/* ==========================================================================
   Özyeğin Filarmoni — site-specific overrides
   style.css Sass'tan derlendiği için tüm özel stiller burada tutulur.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tipografi — başlıklar ve menü bir tık daha belirgin
   -------------------------------------------------------------------------- */
.h1,
h1,
.h2,
h2,
.h3,
h3 {
  font-weight: 600;
}

.sec-title,
.breadcumb-title,
.box-title,
.widget_title {
  font-weight: 600;
}

.main-menu > ul > li > a,
.th-mobile-menu ul li a {
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   1b. Logo — Özyeğin Philharmonic yatay logo
   -------------------------------------------------------------------------- */
/* Logo 4925x1139 (4.32:1) — eski SVG'ler 196x54 idi. Yükseklikten sınırlayıp
   genişliği orana bırakıyoruz ki header yüksekliği değişmesin.
   Not: dosya şeffaf değil (opak koyu zemin içeriyor). */
.header-logo img,
.th-menu-wrapper .mobile-logo img,
.footer-wrapper .about-logo img {
  height: 54px;
  width: auto;
  max-width: 100%;
}

/* Ana marka + sanat yönetmeni kilidi yan yana. İkisini ayıran şey çizgi değil
   boşluk: araları geniş tutuluyor, boy farkı da hiyerarşiyi veriyor.
   Aralık 26px'ten 60px'e çıkarıldı (GP-19098): iki logo tek bir kilit gibi
   okunuyordu, "FAZIL SAY" ayrı bir imza olarak durmalı. Mobil kademeler aynı
   oranla (yaklaşık 2.3x) türetildi. */
.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 60px;
}

/* Ölçünün çıkış noktası ana logodaki "FİLARMONİ" satırı (411px / 1139px, yani
   54px'lik logoda 19.5px). Kilit iki satırlı olduğundan CSS yüksekliği bloğun
   tamamını ifade eder: "FAZIL SAY" satırı bloğun 228/381'i. Tam eşitlik 33px
   ederdi ama yan yana durduğunda fazla baskın görünüyordu, bu yüzden bir kademe
   altına (28px) çekildi; mobil kademeler de aynı oranla türetildi. */
img.brand-lockup__art-director {
  height: 28px;
  opacity: 0.85;
}

/* --- Versiyon B: ana marka ile sanat yönetmeni arasında ayırıcı çizgi ---
   Çizgi art-director <img>'inin sol kenarlığı. Pseudo-element kullanılamıyor
   (<img> replaced element, ::before/::after üretmez) ve flex container'ın
   ::before'u her zaman ilk çocuk olarak ana logodan ÖNCE düşer — `order` ile
   yerini zorlamak kırılgan kalıyordu. Kenarlık ise doğası gereği tam iki logo
   arasında duruyor.

   Boşluk dengesi: `gap` 44px'ten 22px'e iniyor, kenarlığın sol dolgusu 22px
   ekliyor; toplam açıklık A ile aynı (44px), çizgi tam ortada.

   Kenarlık <img>'in kutusuna ait olduğu için logolara uygulanan
   `filter: invert(1)` (sticky beyaz zemin) çizgiyi de birlikte çeviriyor —
   istenen davranış: koyu zeminde açık, beyaz zeminde koyu.

.brand-lockup {
  gap: 22px;
}

img.brand-lockup__art-director {
  padding-left: 22px;
  border-left: 1px solid rgba(255, 255, 255, 0.35);
  box-sizing: content-box;
}

.th-header.header-layout1.style2 img.brand-lockup__art-director,
.th-menu-wrapper .mobile-logo img.brand-lockup__art-director {
  border-left-color: rgba(0, 0, 0, 0.25);
}

@media (max-width: 575px) {
  .brand-lockup {
    gap: 15px;
  }

  img.brand-lockup__art-director {
    padding-left: 15px;
  }
}

@media (max-width: 375px) {
  .brand-lockup {
    gap: 12px;
  }

  img.brand-lockup__art-director {
    padding-left: 12px;
  }
}

.th-menu-wrapper .mobile-logo img.brand-lockup__art-director {
  padding-left: 0;
  padding-top: 10px;
  border-left: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.25);
}
   --- Versiyon B sonu --- */

/* The theme caps .header-logo at 150px (120px under 376px) — a width limit made
   for the old 196x54 mark. This lockup is 3.73:1, so at 42px tall it needs
   157px and the cap was squeezing the image sideways (23% at 375px, measured).
   The cap is dropped and the size comes from the height alone, as everywhere
   else; the height itself steps down so the narrowest phones still fit it next
   to the menu button. */
@media (max-width: 575px) {
  .header-logo {
    max-width: none;
  }

  .header-logo img {
    height: 42px;
  }
}

@media (max-width: 375px) {
  .header-logo img {
    height: 36px;
  }
}

/* Kilidin mobil kademeleri, yukarıdaki .header-logo img kurallarından SONRA
   durmak zorunda: ikisi de (0,1,1) spesifiklikte, bu yüzden sırayı kaybeden
   ezilir. Değerler ana logonun 42/36px boylarındaki FİLARMONİ satırına göre
   aynı oranla türetildi. */
@media (max-width: 575px) {
  .brand-lockup {
    gap: 40px;
  }

  img.brand-lockup__art-director {
    height: 21px;
  }
}

@media (max-width: 375px) {
  .brand-lockup {
    gap: 32px;
  }

  img.brand-lockup__art-director {
    height: 19px;
  }
}

/* Mobil menü panelinde ana logo 54px kalıyor (tema onu küçültmüyor) ve yan
   yana kilit 202 + 79 + 26 = 307px ile 310px'lik panelin (style.css:1359)
   iç boşluğuna pay bırakmıyor. Panelde dikey alan bol olduğundan kilit alt
   alta diziliyor. */
.th-menu-wrapper .mobile-logo .brand-lockup {
  flex-direction: column;
  gap: 10px;
}

.th-menu-wrapper .mobile-logo img.brand-lockup__art-director {
  /* .th-menu-wrapper .mobile-logo img (0,2,1) yukarıda 54px veriyor ve tek
     sınıflı kuralı eziyor; yükseklik burada yeniden söylenmek zorunda. */
  height: 28px;
}

/* Mobil menüdeki logo şeridi: logo şeffaf zeminli siyah çizim, koyu şerit
   siyah üstüne siyah olur. Şerit beyaz (bkz. "Mobil menü — site diliyle"). */

/* --------------------------------------------------------------------------
   2. Header — dil seçici (dünya ikonu + kalın TR)
   -------------------------------------------------------------------------- */
/* Normal menü linkleri padding: 29px 0 ile yüksek; li'ler inline-block olduğu
   için kısa olan dil seçici baseline'a hizalanıp aşağıda kalıyordu.
   ul'yi flex yapıp dikeyde ortalıyoruz. */
.main-menu > ul {
  display: flex;
  align-items: center;
}

.main-menu > ul > li.lang-switch {
  margin-left: 14px;
}

.main-menu > ul > li.lang-switch > a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 16px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 999px;
  line-height: 1;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}

.main-menu > ul > li.lang-switch > a:hover {
  border-color: var(--theme-color);
  background-color: rgba(255, 255, 255, 0.08);
}

.main-menu > ul > li.lang-switch > a i {
  font-size: 15px;
}

.main-menu > ul > li.lang-switch > a span {
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Header banner üzerinde şeffaf (metin beyaz) ama sticky olunca beyaz zemine
   geçip metin koyulaşıyor — pill çerçevesi de o duruma uymalı, yoksa
   beyaz üstüne beyaz kalıp görünmez oluyor. */
.sticky-wrapper.sticky .main-menu > ul > li.lang-switch > a {
  border-color: rgba(0, 0, 0, 0.22);
}

.sticky-wrapper.sticky .main-menu > ul > li.lang-switch > a:hover {
  background-color: rgba(0, 0, 0, 0.04);
}

/* --------------------------------------------------------------------------
   2c. Menü — "Sanat Yönetmeni" iki satırlı (altında Fazıl Say)
   -------------------------------------------------------------------------- */
/* Menüdeki tek iki satırlı başlık. Üst satır komşu linklerle aynı hizadan
   başlamalı, yani tema padding'i (29px) korunuyor ve "FAZIL SAY" onun ALTINA
   taşıyor. Alt satır normal akışta yer kaplarsa header boyu ~15px büyür ve
   logoyla menü şeridi kayar; bu yüzden alt satır mutlak konumlandırılıp akıştan
   çıkarılıyor — üst satır tek satırlık linklerle birebir aynı yerde kalıyor. */
.main-menu > ul > li.menu-item--stacked > a {
  position: relative;
  line-height: 1.15;
}

.menu-item__title {
  display: block;
}

/* Alt satır özel isim olduğu için üst satırdan (600) bir tık daha kalın (700)
   basılıyor; punto müşteri isteğiyle üst satırla aynı (inherit). Rengi currentColor'dan
   alıyor ki banner üstü beyaz / sticky koyu geçişini üst satırla birlikte
   yapsın — ayrı bir renk kuralı gerekmiyor. Opaklık bold'la birlikte 0.65'ten
   0.8'e çekildi: kalın ve çok soluk bir metin bulanık okunuyordu.
   İki satır birbirine göre ortalanıyor: üst satır uzun, alt satır kısa;
   sola yaslı bırakılınca kilit dağınık duruyor. */
.menu-item__subtitle {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: -26px;
  font-size: inherit;
  font-weight: 700;
  letter-spacing: 0.08em;
  opacity: 0.8;
  text-align: center;
  white-space: nowrap;
}

/* Mobil menüde linkler alt alta ve dikey alan bol: alt satır akışta kalabilir,
   mutlak konum orada gereksiz üst üste binmeye yol açardı. */
.th-mobile-menu .menu-item__subtitle {
  position: static;
  display: block;
  margin-top: 2px;
  text-align: left;
}

/* 1200–1399px: iç .container Bootstrap'in 1140px'inde kalıyor; EN metinler
   ("ARTISTIC DIRECTOR", "EDUCATION AND YOUTH") uzun olduğu için logo + menü
   sığmıyor, nav kolonu logonun altına düşüyor ve başlık iki satıra kırılıyordu.
   Container footer'daki gibi viewport'a açılıyor, mr-50 ve li araları
   daraltılıyor; nowrap kolonun sessizce kırılmasını engelliyor. */
@media (min-width: 1200px) and (max-width: 1399px) {
  .th-header.header-layout1 .menu-area .container {
    max-width: none;
    width: max(1140px, 100vw - 40px);
  }

  .th-header.header-layout1 .main-menu {
    margin-right: 0;
  }

  .th-header.header-layout1 .main-menu > ul > li {
    margin: 0 10px;
  }

  .main-menu > ul > li > a,
  .main-menu .menu-item__title {
    white-space: nowrap;
  }
}

/* --------------------------------------------------------------------------
   2b. Sticky header — alt sayfalarda da anasayfa gibi beyaz zemin
   -------------------------------------------------------------------------- */
/* Tema iki farklı sticky zemini tanımlıyor:
     style.css:7717  .header-layout1 .sticky-wrapper.sticky        -> --title-color (koyu)
     style.css:7895  .header-layout1.style2 .sticky-wrapper.sticky -> --white-color (beyaz)
   Anasayfa style2 olduğu için beyaz, diğer 10 sayfa koyu kalıyordu. Hepsi
   beyaz olacak. Alt sayfalarda header banner üzerinde ŞEFFAF durduğu ve menü
   metni --white-color olduğu için, renk düzeltmesi yalnızca .sticky
   durumunda uygulanmalı — aksi halde banner üzerinde beyaz metin kaybolur. */
.th-header.header-layout1 .sticky-wrapper.sticky {
  background-color: var(--white-color);
}

/* Beyaz zeminde menü metni koyulaşıyor (style2'nin yaptığının aynısı). */
.th-header.header-layout1 .sticky-wrapper.sticky .main-menu > ul > li > a {
  color: var(--title-color);
}

.th-header.header-layout1 .sticky-wrapper.sticky .main-menu > ul > li > a:hover {
  color: var(--theme-color);
}

/* Dil seçici pill'i: kenarlık ve ikon beyaz zemine göre koyulaşıyor.
   (Aşağıdaki .sticky-wrapper.sticky lang-switch kuralı border rengini zaten
   koyuya çekiyordu; ikon/metin rengi burada tamamlanıyor.) */
.th-header.header-layout1 .sticky-wrapper.sticky .main-menu > ul > li.lang-switch > a {
  color: var(--title-color);
}

/* Hamburger toggle beyaz zeminde kendi beyaz zeminiyle kayboluyordu. */
.th-header.header-layout1 .sticky-wrapper.sticky .th-menu-toggle {
  color: var(--title-color);
}

/* Logo: inner pages carry the white lockup in the HTML, which is right over the
   banner but vanishes once the sticky header turns white. The dark variant is
   the same artwork in pure black on transparent — pixel-identical outlines —
   so inverting the white one reproduces it exactly: no second <img>, no extra
   request, and nothing here has to know which language the page is in.
   Excludes the home header (.style2), which is white-backed from the start and
   already serves the dark lockup, so inverting it would erase it. */
.th-header.header-layout1:not(.style2) .sticky-wrapper.sticky .header-logo .brand-lockup__mark {
  filter: invert(1);
}

/* Sanat yönetmeni kilidinin beyaz varyantı ayrı bir dosya (markup'ta
   seçiliyor), ama ana logo gibi o da sticky beyaz zeminde koyuya dönmeli —
   aynı invert, aynı koşul. */
.th-header.header-layout1:not(.style2) .sticky-wrapper.sticky .header-logo .brand-lockup__art-director {
  filter: invert(1);
}

/* Anasayfa (style2): header sticky'yi beklemeden BAŞTAN beyaz zeminli.
   Alt sayfalarda header banner üzerinde şeffaf başlayıp sticky'de beyaza
   dönüyor; anasayfada ise hero'nun üstünde sürekli beyaz şerit isteniyor,
   bu yüzden zemin/metin/logo .sticky koşuluna bağlı değil. */
.th-header.header-layout1.style2 .sticky-wrapper {
  background-color: var(--white-color);
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.07);
}

.th-header.header-layout1.style2 .sticky-wrapper .main-menu > ul > li > a,
.th-header.header-layout1.style2 .sticky-wrapper .main-menu > ul > li.lang-switch > a,
.th-header.header-layout1.style2 .sticky-wrapper .th-menu-toggle {
  color: var(--title-color);
}

.th-header.header-layout1.style2 .sticky-wrapper .main-menu > ul > li > a:hover {
  color: var(--theme-color);
}

/* Beyaz zeminde dil seçici pill'inin kenarı beyaz kalmasın. */
.th-header.header-layout1.style2 .sticky-wrapper .main-menu > ul > li.lang-switch > a {
  border-color: rgba(0, 0, 0, 0.22);
}

.th-header.header-layout1.style2 .sticky-wrapper .main-menu > ul > li.lang-switch > a:hover {
  background-color: rgba(0, 0, 0, 0.04);
}

/* --------------------------------------------------------------------------
   2c. Sticky geçişi — menünün kaybolup yeniden belirmesi kaldırıldı
   -------------------------------------------------------------------------- */
/* Sorun her iki header tipinde de var:
     alt sayfalar  -> .header-absolute  position:absolute (style.css:6946)
     anasayfa      -> .th-header        position:relative (style.css:6941)
   İkisi de sayfayla birlikte yukarı kayıp görüş alanından çıkıyor; JS 100px'te
   .sticky sınıfını ekleyene kadar menü GÖRÜNMÜYOR, sonra stickyAni
   (style.css:6966) ile yukarıdan aşağı düşerek geri geliyor. Kullanıcının
   gördüğü "kaybolma" bu boşluk.
   Çözüm: menü şeridi baştan fixed duruyor, böylece hiç kaybolmuyor; .sticky
   yalnızca zemin/gölge değişimini tetikliyor ve giriş animasyonu iptal.
   fixed olan .sticky-wrapper (tema .header-top şeridini hiçbir sayfa
   kullanmıyor, dolayısıyla üst üste binme riski yok). */
.th-header.header-layout1 .sticky-wrapper {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 41;
}

.th-header.header-layout1 .sticky-wrapper.sticky {
  animation: none;
}

/* Header yüksekliği tek standart: her ekranda --header-h. Tema yüksekliği
   içerikten türetiyordu ve iki boşluk üst üste biniyordu — .header-logo'nun
   12px üst/alt padding'i (style.css:5278) + 1200px altında .menu-area'nın
   12px padding'i (style.css:5556) — üstüne telefonda logo küçülüyordu;
   sonuç 86 / 110 / 98 / 92px (ölçüldü). Satıra sabit yükseklik verilip
   padding'ler sıfırlanıyor, logo ve menü butonu row'un align-items-center'ı
   ile dikeyde ortalanıyor. Anasayfa banner payı da bu değişkeni kullanıyor
   (home.scss, .th-hero-wrapper.hero-1 margin-top): fixed header <main>'in
   kardeşi olduğu için hero'dan yer kaplamıyor, pay elle verilmek zorunda. */
:root {
  --header-h: 86px;
  /* Kart / görsel / kutu köşeleri için tek standart (bkz. "Köşe standardı"). */
  --radius-card: 16px;
  /* Kart İÇİNDEKİ öğeler (ikon kutusu, alıntı, mesaj) ve iç içe kutular:
     dış kapla aynı yarıçap iç içe görünümü bozuyor, bir kademe küçük. */
  --radius-inner: 12px;
  /* Butonlar: yuvarlatılmış dikdörtgen (GP-19185, müşteri isteği). */
  --radius-btn: 8px;
  /* Kontroller: input, etiket/meta çipleri. */
  --radius-pill: 999px;
  /* Boşluk standardı (bkz. "Boşluk standardı"): section üst/alt ve aynı
     section içindeki bloklar arası. ≤991 ve ≤575'te yeniden tanımlanır. */
  --space-section: 120px;
  --space-block: 60px;
}

@media (max-width: 991px) {
  :root {
    --space-section: 80px;
    --space-block: 40px;
  }
}

@media (max-width: 575px) {
  :root {
    --space-section: 52px;
  }
}

.th-header.header-layout1 .menu-area {
  padding-top: 0;
  padding-bottom: 0;
}

.th-header.header-layout1 .menu-area .row {
  height: var(--header-h);
}

/* display:flex — inline-flex .brand-lockup bir satır kutusunda duruyordu ve
   altına baseline boşluğu (8px) ekleniyordu; logo ortalanmış görünmüyor,
   üstte 12, altta 20px kalıyordu (375px'te 21/29, ölçüldü). */
.th-header.header-layout1 .header-logo {
  display: flex;
  padding-top: 0;
  padding-bottom: 0;
}

/* Anasayfa hero'sunun header payı home.scss'te (.th-hero-wrapper.hero-1
   margin-top). Burada `.th-header + .th-hero-wrapper` ile verilemez: header
   <main>'in kardeşi, hero onun içinde — kardeş seçicisi hiç eşleşmez. */

/* Not: .breadcumb-wrapper zaten padding: 291px 0 247px (style.css:8945)
   taşıyor — header absolute'ken de üstünde duruyordu. fixed'e geçişte ek pay
   GEREKMİYOR, eklenirse banner gereksiz uzar. */

/* Mobil menü: dil seçicisini diğer itemlardan ayır, chevron ikonunu gizle */
/* Üstteki son linkin border-bottom'ı zaten ayırıcı; ek border-top çift çizgi
   oluşturuyordu. */
.th-mobile-menu ul li.lang-switch {
  margin-top: 10px;
  padding-top: 12px;
}

.th-mobile-menu ul li.lang-switch > a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-left: 0;
}

.th-mobile-menu ul li.lang-switch > a:before {
  display: none;
}

.th-mobile-menu ul li.lang-switch > a span {
  font-weight: 700;
}

/* Mobil menü — site diliyle. Tema varsayılanları (mor kenarlık, mor kapatma
   dairesi, pembe #fdedf1 ayırıcılar) sitenin geri kalanında hiç geçmiyor.
   Linklerin önündeki \f105 chevron subset'lenmiş fontawesome'da yok ve boş
   kutu olarak görünüyordu; tamamen kaldırılıyor. */
.th-menu-wrapper .th-menu-area {
  border-left: none;
}

.th-menu-wrapper .mobile-logo {
  background-color: var(--white-color);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

/* Kapatma butonu header'daki hamburger ile aynı dilde: beyaz daire, gri
   çerçeve. Panelin içine alınıyor (tema yarısını panel dışına taşırıyordu). */
.th-menu-wrapper .th-menu-toggle {
  left: auto;
  right: 16px;
  top: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  line-height: 1;
  font-size: 18px;
  color: var(--title-color);
  background-color: var(--white-color);
  border: 1px solid #d4d4d4;
  border-radius: 50%;
}

.th-menu-wrapper .th-menu-toggle:hover {
  color: var(--white-color);
  background-color: var(--title-color);
  border-color: var(--title-color);
}

.th-mobile-menu {
  overflow-y: auto;
}

.th-mobile-menu ul li {
  border-bottom-color: rgba(0, 0, 0, 0.1);
}

/* Tipografi desktop menüyle aynı: başlık fontu, büyük harf. */
.th-mobile-menu ul li a {
  padding: 14px 0;
  font-family: var(--title-font);
  font-size: 15px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.th-mobile-menu ul li a:before {
  content: none;
}

.th-mobile-menu ul li a:hover {
  color: var(--theme-color);
}

/* --------------------------------------------------------------------------
   Alt menü (Eğitim → alt sayfalar, GP-19185)
   -------------------------------------------------------------------------- */
/* Temanın açılır menüsü (style.css .main-menu ul.sub-menu) ve mobil akordeonu
   (marta-main.js thmobilemenu) kullanılıyor. Ancak ok, +/− ve hover ikonu
   fontawesome glifleri (\f078, \f067, \f068, \f8cb); subset fontta bunlar yok,
   boş kutu basılıyordu. O yüzden hepsi CSS ile çiziliyor. */
.main-menu > ul > li.menu-item-has-children > a:after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  font-family: inherit;
  transform: translateY(-3px) rotate(45deg);
}

/* Tema alt menüyü yalnızca :hover ile açıyor; klavyede Tab ile gelindiğinde
   visibility:hidden kalıyor ve gizli linkler odak alamıyordu. :focus-within
   aynı açılışı odak için de veriyor (style.css'teki hover kuralının eşi). */
.main-menu ul li:focus-within > ul.sub-menu {
  visibility: visible;
  opacity: 1;
  transform: scaleY(1);
  z-index: 9;
}

.main-menu ul.sub-menu {
  min-width: 220px;
  padding: 10px 0;
  left: -20px;
  border-top: 0;
  border-radius: var(--radius-inner);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

.main-menu ul.sub-menu li {
  padding: 0;
}

.main-menu ul.sub-menu li a {
  display: block;
  padding: 10px 20px;
  font-size: 15px;
  font-weight: 500;
  color: var(--title-color);
  text-transform: none;
}

.main-menu ul.sub-menu li a:before {
  content: none;
}

.main-menu ul.sub-menu li a:hover {
  padding-left: 20px;
  letter-spacing: normal;
  color: var(--theme-color);
}

.th-mobile-menu ul .th-item-has-children > a:after {
  content: none;
}

.th-mobile-menu ul .th-item-has-children > a .th-mean-expand:before,
.th-mobile-menu ul .th-item-has-children.th-active > a .th-mean-expand:before {
  content: "+";
  font-family: var(--title-font);
  font-size: 16px;
}

.th-mobile-menu ul .th-item-has-children.th-active > a .th-mean-expand:before {
  content: "\2212";
}

.th-mobile-menu ul li ul li a {
  text-transform: none;
}

/* Tema alt listenin ilk satırına pembe (#fdedf1) üst çizgi veriyor; diğer
   ayırıcılarla aynı renge çekiliyor. */
.th-mobile-menu ul li li:first-child {
  border-top-color: rgba(0, 0, 0, 0.1);
}

/* Header hamburger'ı: temada gap tanımlı ama display: flex yok, ikon
   baseline'a oturuyordu. */
.header-layout1 .th-menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* --------------------------------------------------------------------------
   3. Loader — renkli çubuklar kaldırıldı, metin küçültüldü
   -------------------------------------------------------------------------- */
.loader-wrapper {
  height: auto;
  margin: 1.5rem;
  font-size: 26px;
  scale: 1;
}

@media (max-width: 991px) {
  .loader-wrapper {
    margin: 1rem;
    font-size: clamp(15px, 4.5vw, 24px);
  }
}

/* "ğ"nin kuyruğu kesiliyordu: harf animasyonundaki filter/transform her harfi
   kendi katmanına alıyor ve katman inline-block kutusu kadar boyanıyor;
   satır yüksekliği alt uzantıyı (descender) içermiyordu. */
.loader-letter {
  line-height: 1.3;
  padding-block: 0.12em;
}

/* iOS 26+ Safari (viewport-fit=cover yok) alt araç çubuğu bölgesini sayfaya
   vermez, rengini viewport kenarına oturan fixed öğenin background-color'ından
   örnekler (absolute çocukları, yani perdeleri okumaz). Tema 100vh, önceki
   düzeltmeler 100lvh/taşma veriyordu; kutu görünen alanın altına taştığı için
   kenara oturmuyor, Safari loader rengini almayıp çubuğu siyah boyuyordu
   (GP-19219). Yükseklik verilmiyor, temanın inset: 0'ı görünen viewport'u
   izliyor. lvh veya taşma geri eklenmemeli.
   Tema loader'ı jQuery fadeOut ile kapatıyor (inline display: none). */
#preloader {
  width: auto;
  height: auto;
  background: var(--secondary-color, #111);
}

/* Koyu zemin yalnızca loader yazısı görünürken: tema açılışı başlatırken
   .loader-wrapper'a inline opacity:0 veriyor (marta-main.js), ardından
   #preloader 400ms'de soluyor. Koşul "display: none"a bağlıyken o arada
   sayfanın şeffaf bölümlerinden koyu zemin görünüyordu; loader'ın kendi
   zemini de perdeler kayarken siyah kalıyordu. Açılış başlayınca ikisi de
   bırakılıyor, perdeler doğrudan sayfayı açıyor. */
html:has(#preloader:not([style*="display: none"]) .loader-wrapper:not([style*="opacity: 0"])),
html:has(#preloader:not([style*="display: none"]) .loader-wrapper:not([style*="opacity: 0"])) body {
  background-color: var(--secondary-color, #111);
  overflow: hidden;
}

/* Koyu zemin tek başına yetmiyor: iOS 26 Safari'nin yüzen alt araç çubuğu
   ve bazı uygulama içi tarayıcılar fixed loader'ı çubuğun altına uzatmıyor.
   Zemin koyu olsa da akıştaki sayfa içeriği orada boyanıyor ve altta yazılar
   görünüyordu (GP-19185). Bu yüzden loader yazısı görünürken içerik de
   gizleniyor. Koşul yukarıdakiyle aynı, açılış başlayınca perdeler sayfayı
   yine gösteriyor. */
html:has(#preloader:not([style*="display: none"]) .loader-wrapper:not([style*="opacity: 0"])) body > :not(#preloader) {
  visibility: hidden;
}

#preloader:has(.loader-wrapper[style*="opacity: 0"]) {
  background: transparent;
}

/* --------------------------------------------------------------------------
   5. İçerik metin oranları — görsel küçültüldüğü için metni de oranla
   (ana sayfa, About Us, Artistic Director ve aynı yapıyı kullanan sayfalar)
   -------------------------------------------------------------------------- */
/* Tema h2'ye 1400px üstünde 1.1 veriyor; çok satırlı başlıkta "ğ" kuyruğu alt
   satırdaki "/"e değiyordu (Education and Youth). */
.body-content-section .title-area .sec-title {
  line-height: 1.35;
}

/* Desktop: bu bölümler sayfanın ana tanıtım metni, tema'nın 16px base'inden
   bir tık iri duruyor. Metne iç boşluk verilmiyor: dış kenarı görselle aynı
   container çizgisinde olmalı (eskiden 12px içeride kalıyordu). Görselden
   ayrımı kolon gutter'ı ve görseldeki me-xl-5 sağlıyor. */
@media (min-width: 992px) {
  .body-content-section .title-area p {
    font-size: 18px;
    line-height: 1.7;
  }
}

/* Mobil/tablet: etiket, başlık, paragraf ve buton aynı sol hizada — ortalanmış
   gövde metni satır sonlarını düzensiz gösteriyordu.
   Genişlik standardı: metin ve görsel container kenarından kenarına, yani
   sezon, haberler ve diğer sayfalarla aynı sol hiza. Eskiden burada 520px
   sınır + 20px iç boşluk, temada da görsele 300px sınır vardı; ana sayfa,
   orkestra ve sanat yönetmeni diğer sayfalardan dar ve metinle görsel farklı
   genişlikte duruyordu. */
@media (max-width: 991px) {
  .body-content-section .title-area {
    text-align: left;
  }

  .body-content-section .title-area .sub-title {
    display: block;
  }

  .body-content-section .title-area p {
    font-size: 15px;
    line-height: 1.7;
  }

  /* Buton da metinle aynı sol hizada başlasın */
  .body-content-section .title-area + .btn-group {
    justify-content: flex-start;
  }

  /* Tema (style.css:9961-9969) görseli calc(100% - 32px) / 360px ve portreyi
     300px !important ile sınırlıyor; !important ancak !important ile ezilir. */
  .body-content-section .img-box1.body-content-image,
  .body-content-section .body-content-image--portrait {
    width: 100%;
    max-width: none !important;
  }

  /* Tema bu kolona margin-bottom: 0 !important veriyor, ama bu class yalnızca
     About Us / Artistic Director'da var — ana sayfada olmadığı için orada
     kolonun mb-30'u geçerli kalıyordu. Görsel-başlık arası boşluk mobilde
     her sayfada ana sayfayla aynı olsun. */
  .body-content-section .body-content-image-column {
    margin-bottom: 30px !important;
  }

  /* Orkestra / Sanat Yönetmeni: metin görselin üstüne alındı (order-first).
     Boşluklar ana sayfadaki aynı düzenle (home.scss, .home-about-image-col)
     eşleniyor: metnin üstündeki mt-50 banner'la arayı açmasın, görselin
     boşluğu altından üstüne geçsin. */
  .body-content-row--text-first .title-area.mt-50 {
    margin-top: 0 !important;
  }

  .body-content-row--text-first .body-content-image-column {
    margin-top: var(--space-block);
    margin-bottom: 0 !important;
  }
}

/* Tablette tam genişlikte dikey portre ~900px boy alıyordu; kadraj yatay
   orana kırpılıyor, yüzler genelde üst üçte bir olduğu için odak yukarıda. */
@media (min-width: 576px) and (max-width: 991px) {
  .body-content-section .body-content-image--portrait img {
    aspect-ratio: 4 / 3;
    object-position: center 25%;
  }
}

@media (max-width: 575px) {

  .body-content-section .title-area p {
    font-size: 14px;
    line-height: 1.75;
  }
}

/* Connect — e-posta adresi: tema .contact-media.style2 .link'e
   text-transform: capitalize veriyor, adres "Info@Ozyeginfilarmoni.Com"
   olarak görünüyordu. E-posta adresleri küçük harf kalmalı. */
.contact-media.style2 .link[href^="mailto:"] {
  text-transform: none;
}

/* Kutular eşit yükseklikte olsun: tema .contact-media.style2'ye display: block
   veriyor, içerik uzunluğu farklı olunca adres kutusu e-postadan uzun kalıyordu. */
.contact-media_wrapp {
  display: flex;
}

.contact-media_wrapp .contact-media.style2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}

/* Adres metni: 18px'te satır satır alt alta düşüyordu — bir tık küçültüp
   satır aralığını sıkılaştırıyoruz. */
.contact-media.style2 .box-text {
  font-size: 16px;
  line-height: 26px;
  margin-inline: auto;
}

/* Tema list-style:none kuralını `.checklist ul` olarak yazmış, ama burada ul
   doğrudan .checklist taşıyor — o yüzden tarayıcının varsayılan madde
   işaretleri görünüyor. Tema'nın kendi :after bullet'ı zaten var. */
ul.checklist {
  list-style: none;
}

/* --------------------------------------------------------------------------
   8. Footer
   -------------------------------------------------------------------------- */
/* Footer boşluk ölçeği — tüm bölümler (Quick Links, Social, copyright, alt
   bağlantılar) bu değerlerden besleniyor ki kırılım noktalarında oranlar
   bozulmasın. Masaüstü değerleri tasarımdaki hâliyle birebir aynı. */
.footer-wrapper.footer-layout2 {
  --footer-block-gap: 0px;     /* bloklar arası (masaüstünde yatay düzen) */
  --footer-copy-gap: 77px;     /* copyright bloğunun üst/alt boşluğu */
  --footer-pad-x: 12px;        /* içerik yatay payı */
}

/* Footer içeriği dar ekranlarda kenara yapışmasın. Burada yalnızca yatay pay
   ölçeğe bağlanıyor; genişlik container'ın kendi değerinden geliyor.
   NOT: Bootstrap .container'a 1200px+ için 1140px veriyor, tema ise 1300px'ten
   itibaren 1320+24px'e çıkarıyor (style.css:1253). Arada kalan 1200-1299px
   aralığı aşağıda ayrıca ele alınıyor. */
.footer-wrapper.footer-layout2 .container {
  padding-inline: var(--footer-pad-x);
}

/* Taşma koruması: uzun başlık/metinler yatay kaydırma açmasın. */
.footer-wrapper.footer-layout2 .widget_title,
.footer-wrapper.footer-layout2 .copyright-text,
.footer-wrapper.footer-layout2 .footer-quick-links a,
.footer-wrapper.footer-layout2 .copyright-wrap .footer-links a {
  overflow-wrap: break-word;
  max-width: 100%;
}

/* Tema .footer-widget .widget_title'a max-width: 270px veriyor — ortalanmış
   düzende başlığı gereksiz daraltıyor. */
.footer-wrapper.footer-layout2 .footer-widget .widget_title {
  max-width: 100%;
}

/* Copyright satırının üst boşluğu .copyright-wrap padding-top'undan geliyor
   (Figma: 77px), widget kolonları kendi alt boşluğunu eklemesin. */
.footer-layout2 .footer-widget {
  margin-bottom: var(--footer-block-gap);
}

/* Quick Links: referans tasarımda linkler alt alta değil tek satırda yan yana.
   Tema .widget_nav_menu a'ya display: block veriyor, o yüzden ul flex'e alınıp
   li/a inline hale getiriliyor.
   Tema ayrıca .menu/ul'a -5px margin veriyor (dikey liste için); yatay
   düzende hizayı kaydırdığı için sıfırlanıyor. */
.footer-wrapper .footer-quick-links .menu,
.footer-wrapper .footer-quick-links > ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-wrapper .footer-quick-links .menu li {
  margin: 0;
  padding: 0;
  border: 0;
  line-height: 1;
}

/* Kritik: tema her linke margin-bottom: 15px veriyor (dikey liste içindi).
   Yatay flex'te bu, linkleri birbirine göre kaydırıyordu — "Sponsors" ve
   "Resources" alt hizaya düşüyordu. Figma: 16px / 21.01px, Poppins 400. */
.footer-wrapper.footer-layout2 .footer-quick-links .menu a,
.footer-wrapper.footer-layout2 .footer-quick-links > ul a {
  display: inline-block;
  margin: 0;
  padding: 0;
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 21.01px;
  vertical-align: middle;
}

/* Logo, "Quick Links" / "Social" başlıklarıyla aynı yükseklikte dursun.
   Kolonlar üstten hizalanıyor; logo (54px) başlık satırından (24px) yüksek
   olduğu için negatif üst boşlukla optik olarak başlık hizasına çekiliyor:
   (54 - 24) / 2 = 15px. */
.footer-wrapper.footer-layout2 .widget-area .row {
  align-items: flex-start;
}

.footer-wrapper .footer-logo-widget .about-logo {
  margin: -15px 0 0 0;
  line-height: 1;
}

.footer-wrapper .footer-logo-widget .about-logo a {
  display: inline-block;
  line-height: 1;
}

/* Sosyal ikonlar kendi kolonunda, "Social" başlığı altında. */
.footer-wrapper .footer-social-widget .social-link {
  display: flex;
  align-items: center;
  gap: 24px;
  line-height: 1;
}

/* Social kolonu bir bütün olarak yukarı kayıyor: ikon satırı Quick Links menü
   satırıyla aynı hizaya gelsin, "Social" başlığı da doğal olarak "Quick Links"
   başlığından yukarıda kalsın (tasarımdaki görünüm).
   Menü satırı ortası: 24 + 12 + 21.01/2 = 46.51px
   İkon satırı ortası (kaymasız): 24 + 20 + 24/2 = 56px
   Fark: 9.49px */
.footer-wrapper .footer-social-widget {
  margin-top: -9.49px;
}

/* Tema ikon görselinin altına 16px margin koyuyor (hover'da açılan isim
   etiketi için yer ayırmıştı) — bu, ikon satırını menü satırından yukarı
   kaydırıyordu. İsim etiketi zaten absolute konumlu, boşluğa ihtiyaç yok. */
.footer-wrapper .footer-social-widget .social-link a img {
  margin: 0;
  display: block;
}

/* Başlık altı boşluğu (Figma: 12px). Tema .footer-widget .widget_title'a
   padding-bottom: 25px + margin-bottom: 15px veriyor (toplam 40px); padding
   gizlenmiş alt çizgi (:before/:after, style.css:6853 display:none) için
   ayrılmıştı — çizgi görünmediği için o boşluk gereksiz. */
.footer-wrapper .footer-quick-links .widget_title,
.footer-wrapper .footer-social-widget .widget_title {
  padding-bottom: 0;
  font-family: "Poppins", sans-serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 24px;
  vertical-align: middle;
}

/* Başlık altı boşlukları (Figma): Quick Links 12px, Social 20px. */
.footer-wrapper .footer-quick-links .widget_title {
  margin: 0 0 15px 0;
}

.footer-wrapper .footer-social-widget .widget_title {
  margin: 0 0 20px 0;
}

/* Copyright satırı: üstten ve alttan eşit boşluk (masaüstü Figma: 77px). */
.footer-layout2 .copyright-wrap {
  margin-top: 0;
  padding: var(--footer-copy-gap) 0;
}

.copyright-wrap .copyright-text {
  margin: 0;
}

/* Desktop: copyright solda, yasal bağlantılar sağda */
@media (min-width: 992px) {
  .copyright-wrap .col-12 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
  }

  .copyright-wrap .footer-links {
    flex-shrink: 0;
  }
}

.copyright-wrap .footer-links ul {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 39px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.copyright-wrap .footer-links a {
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.copyright-wrap .footer-links a:hover {
  opacity: 0.7;
}

/* Mobil: footer itemları ortalı */
@media (max-width: 991px) {
  .footer-wrapper .widget,
  .footer-wrapper .copyright-wrap {
    text-align: center;
  }

  .footer-wrapper .about-logo,
  .footer-wrapper .social-link {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  }

  /* Quick Links ve Social kolonları yatay flex — mobilde ortalanmaları için
     justify-content gerekiyor, text-align tek başına yetmiyor. */
  .footer-wrapper .footer-quick-links .menu,
  .footer-wrapper .footer-social-widget .social-link {
    justify-content: center;
  }

  /* Mobil dizilim: masaüstündeki sıra korunuyor, sadece dikey —
     logo -> Quick Links + menüsü -> Social + ikonları. */
  .footer-layout2 .widget-area .row {
    flex-direction: column;
    align-items: center;
  }

  .footer-layout2 .widget-area .row > [class*="col-"] {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
  }

  /* Menü linkleri tek sütun, alt alta ve ortalı. */
  .footer-wrapper .footer-quick-links .menu {
    flex-direction: column;
    gap: 20px;
  }

  /* Bloklar arası boşluk tek kaynaktan: Bootstrap'in gy-4 gutter'ı (24px)
     yerine ölçekteki değer kullanılıyor, widget'ların kendi alt boşluğu
     sıfır. Böylece logo / Quick Links / Social araları birebir eşit. */
  .footer-wrapper.footer-layout2 {
    --footer-block-gap: 0px;
    --footer-copy-gap: 40px;
    /* Sayfa container'ıyla aynı 20px (Mobil kenar boşluğu standardı).
       Eskiden tablette 24, telefonda 16px'ti; row'un -20px margin'i 16px
       pay ile birleşince footer satırları ekran dışına 4px taşıyordu. */
    --footer-pad-x: 20px;
  }

  .footer-layout2 .widget-area .row {
    --bs-gutter-y: 40px;
  }

  /* Mobilde masaüstündeki optik hizalama boşlukları (logo -15px,
     Social kolonu -9.49px) gerekmiyor. */
  .footer-wrapper .footer-logo-widget .about-logo {
    margin: 0;
    justify-content: center;
  }

  .footer-wrapper .footer-social-widget {
    margin-top: 0;
  }

  /* Copyright metni ortadan kırılmasın — tek satırda tutulamıyorsa bile
     kelime bazında düzgün sarsın. */
  .copyright-wrap .copyright-text {
    margin-bottom: 20px;
    text-wrap: balance;
  }

  /* Yasal bağlantılar: tema'nın margin-right'ı sağdan taşırıyordu.
     Küçük ekranda düzgün sarsın, satır arası da yatay boşlukla dengeli. */
  .copyright-wrap .footer-links ul {
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px 20px;
  }

  .copyright-wrap .footer-links a {
    display: inline-block;
    white-space: nowrap;
  }

  .copyright-wrap .footer-links li {
    margin-right: 0;
    padding-right: 0;
  }

}

/* --------------------------------------------------------------------------
   Küçük masaüstü (992–1199px): col-xl-auto henüz devrede değil, col-md-6
   yüzünden kolonlar 2'li ızgaraya giriyordu. Bu genişlikte üç kolon yatay
   rahat sığıyor — auto genişliğe erken geçiliyor.
   -------------------------------------------------------------------------- */
@media (min-width: 992px) and (max-width: 1199px) {
  .footer-layout2 .widget-area .row > [class*="col-"] {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
  }

  .footer-wrapper .footer-quick-links .menu {
    gap: 8px 18px;
  }

  .footer-wrapper .footer-social-widget .social-link {
    gap: 18px;
  }
}

/* --------------------------------------------------------------------------
   Küçük masaüstü (1200–1299px): tema .container'a 1320+24px'i ancak 1300px'ten
   itibaren veriyor (style.css:1253), bu aralıkta Bootstrap'in xl değeri
   (1140px) devrede kalıyor. Üç kolon 1140px'e SIĞIYOR (logo ~234 + menü ~640
   + sosyal ~168 = ~1042), sorun taşma değil: justify-content-between'e
   dağıtacak yalnızca ~75px kalıyor, yani kolon araları tasarımdaki ~139px
   yerine ~37px'e düşüyor ve Quick Links ile Social iç içe görünüyor.
   Çözüm: footer container'ı bu aralıkta da tema genişliğine bırakılıyor;
   viewport küçükse kenar payı korunuyor.
   -------------------------------------------------------------------------- */
@media (min-width: 1200px) and (max-width: 1299px) {
  .footer-wrapper.footer-layout2 .container {
    max-width: none;
    /* max() ile 1140px taban korunuyor: 1200-1220px arasında viewport payı
       Bootstrap'in kendi genişliğinden dar kalıyor, aksi hâlde aralığın
       başında kolon araları daha da sıkışırdı. 40px pay dikey kaydırma
       çubuğunu da soğuruyor (100vw çubuğu içerir), yatay taşma olmuyor. */
    width: max(1140px, 100vw - 40px);
  }
}

/* --------------------------------------------------------------------------
   Tablet (768–991px): dizilim, sıra ve blok araları (max-width: 991px)
   bloğundan geliyor; burada yalnızca copyright bloğu biraz daha ferah.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 991px) {
  .footer-wrapper.footer-layout2 {
    --footer-copy-gap: 56px;
  }
}

/* --------------------------------------------------------------------------
   Mobil (max 575px): dar ekranda menü linkleri ve yasal bağlantılar
   sarmalanıyor — satır aralığı ve ikon boşlukları buna göre daralıyor.
   -------------------------------------------------------------------------- */
@media (max-width: 575px) {
  .footer-wrapper.footer-layout2 {
    --footer-copy-gap: 32px;
  }

  /* Menü dikey — gap satır aralığı olarak çalışıyor. */
  .footer-wrapper .footer-quick-links .menu {
    gap: 16px;
  }

  .footer-wrapper .footer-social-widget .social-link {
    gap: 20px;
  }

  .copyright-wrap .footer-links ul {
    gap: 12px 16px;
  }
}

/* --------------------------------------------------------------------------
   9. Artistic Director / About Us — sabit görsel, akan metin
   -------------------------------------------------------------------------- */
/* Sol kolondaki dikey görsel (624px) ile sağdaki uzun biyografi metni (1559px)
   arasındaki fark, görselin altında ~950px boş alan bırakıyordu. Görsel
   sticky yapılarak metin akarken sabit kalıyor, metin bitince birlikte
   yukarı çıkıyor.

   İki kritik nokta:
   1) Bölümdeki .overflow-hidden (Bootstrap, !important) sticky'yi sessizce
      öldürüyor. overflow: clip aynı kırpmayı yapar ama scroll container
      oluşturmadığı için sticky çalışmaya devam eder.
      Not: body'deki overflow-x: hidden (style.css:140) sticky'yi ETKİLEMİYOR —
      scrollport html'dir, body değil. O satıra dokunulmadı.
   2) .row'un align-items'ına DOKUNULMAMALI. Bootstrap'in varsayılan stretch'i
      sol kolonu metin kolonu kadar uzun tutuyor; sticky'nin kayacak alanı
      tam olarak budur. flex-start eklenirse kolon görselin boyuna düşer ve
      sticky işlevsiz kalır. */
/* Kapsam: Artistic Director ve About Us. Ana sayfa da #about-sec kullanıyor
   ama bölümü ayrıca .about-area taşıyor; :not() ile dışarıda bırakılıyor.
   (Orada görsel ve metin kolonları zaten eşit yükseklikte — kayacak alan 0 —
   yani etkisi olmazdı, ama metin ileride uzarsa istenmeyen davranış çıkardı.) */
@media (min-width: 992px) {
  #about-sec.overflow-hidden:not(.about-area) {
    overflow: clip !important;
  }

  #about-sec:not(.about-area) .body-content-image--portrait {
    position: sticky;
    top: 120px;
  }
}

/* --- CMS'ten yonetilen buton renkleri ---------------------------------- */

/* Renkler sablonda inline CSS degiskeni olarak basilir (bkz. _helpers.html
   btnColor makrosu). Degisken basilmadiysa asagidaki kurallar hic eslesmez
   ve buton temanin varsayilan rengiyle kalir.

   DIKKAT: hover rengi butonun kendi background'i degil, ::before katmanidir
   (style.css:1746 — asagidan yukari acilan katman). `:hover { background }`
   yazmak cogu butonda hicbir sey yapmaz; bu yuzden ::before hedefleniyor. */
.th-btn[style*="--btn-bg"] {
  background-color: var(--btn-bg);
}

.th-btn[style*="--btn-hover-bg"]::before {
  background-color: var(--btn-hover-bg);
}

/* .btn-fw istisnasi: tema bu varyantta ::before'u display:none yapip duz
   renk gecisine donuyor (style.css:1837-1842), bu yuzden ayrica gerekli. */
.th-btn.btn-fw[style*="--btn-hover-bg"]:hover {
  background-color: var(--btn-hover-bg);
}

/* .style4 kenarlikli: tema hover'da kenarligi da renklendiriyor
   (style.css:1803-1806), CMS rengiyle ayni davranis korunuyor. */
.th-btn.style4[style*="--btn-hover-bg"]:hover {
  border-color: var(--btn-hover-bg);
}

/* --------------------------------------------------------------------------
   8.6 Footer — müşteri revizyonu
   Logo 54px sabit kalıyor; yanındaki her şey ona göre küçültülüyor.
   "Hızlı Erişim" başlığı footer.html'den kaldırıldı (her iki dilde).
   -------------------------------------------------------------------------- */
/* Hızlı Erişim başlığı gidince linkler tek başına kaldı ve Social sütunundaki
   başlık+ikon bloğuna göre yukarıda asılı kalıyordu. Menü, logonun optik
   ortasına hizalanıyor: kolonlar üstten hizalı (align-items:flex-start,
   bkz. 8. bölüm), bu yüzden hizayı üst boşlukla veriyoruz.
   Logo 54px, menü satırı ~18px → (54 - 18) / 2 = 18px. */
.footer-wrapper.footer-layout2 .footer-quick-links {
  margin-top: 18px;
}

/* Linkler logoya göre küçültüldü: 16px → 14px. Tema/8. bölümdeki 16px
   kuralının (line-height 21.01px dahil) üzerine yazıyor. */
.footer-wrapper.footer-layout2 .footer-quick-links .menu a,
.footer-wrapper.footer-layout2 .footer-quick-links > ul a {
  font-size: 14px;
  line-height: 18px;
}

/* Türkçe metinler İngilizce'den uzun ("Sanat Yönetmeni", "Basın Odası");
   aynı genişlikte satır sonu yapıp footer'ın iki dilde farklı görünmesine
   yol açıyordu. Yatay boşluk daraltılınca TR de tek satıra sığıyor. */
.footer-wrapper .footer-quick-links .menu,
.footer-wrapper .footer-quick-links > ul {
  gap: 8px 18px;
}

/* "Bizi Takip Edin" / "Follow Us On" başlığı: 24px → 18px. */
.footer-wrapper .footer-social-widget .widget_title {
  font-size: 18px;
  line-height: 20px;
  margin: 0 0 14px 0;
}

/* Sosyal ikonlar: 24px → 20px, araları da oranla daraltıldı. */
.footer-wrapper .footer-social-widget .social-link {
  gap: 18px;
}

.footer-wrapper .footer-social-widget .social-link a img {
  width: 20px;
  height: 20px;
}

/* Social kolonunun optik kaydırması (8. bölümdeki -9.49px) başlık ve ikon
   ölçüleri değiştiği için yeniden hesaplandı:
   menü satırı ortası  = 18 (üst boşluk) + 18/2       = 27px
   ikon satırı ortası  = 18 (başlık) + 14 (boşluk) + 20/2 = 42px
   fark = 15px */
.footer-wrapper .footer-social-widget {
  margin-top: -15px;
}

/* Mobilde bu optik hizalamaların hiçbiri geçerli değil (kolonlar alt alta,
   ortalı). 8. bölümdeki mobil sıfırlamalarla aynı mantık. */
@media (max-width: 991px) {
  .footer-wrapper.footer-layout2 .footer-quick-links {
    margin-top: 0;
  }

  .footer-wrapper .footer-social-widget {
    margin-top: 0;
  }
}

/* --------------------------------------------------------------------------
   Mobil kenar boşluğu — tüm sayfalarda aynı
   -------------------------------------------------------------------------- */
/* Bootstrap'in 12px'i telefonda metni ve görselleri ekran kenarına fazla
   yaklaştırıyordu. Tema yalnızca .body-content-section'da 20px veriyordu
   (style.css:~10000), bu da sayfalar arası genişlik farkı yaratıyordu.
   Artık her sayfanın container'ı telefonda 20px; row/col gutter'ları
   birbirini sıfırladığı için içerik tam bu kenardan başlar. */
/* Kolon gutter'ı da aynı değere çekiliyor ki kolonlar da 20px taşısın
   (row'un negatif margin'i gutter/2 olduğu için içerik yine 20px'te kalır).
   Yan yana kolonların arası (ör. sanatçı kartları) 40px olur.
   Kapsam ≤991: kolonların alt alta indiği tüm mobil/tablet aralığı. */
@media (max-width: 991px) {
  /* container-fluid: galeri slider'ı. Masaüstünde kenardan kenara, mobilde
     12px'te kalıyor ve altındaki ızgaradan dışarı taşmış görünüyordu. */
  .container,
  .container-fluid {
    padding-inline: 20px;
  }

  /* Bootstrap .row>* padding'ini calc(var(--bs-gutter-x) / 2) ile veriyor;
     değer açıkça yazılıyor ki DevTools'ta da 20px görünsün. */
  .row {
    --bs-gutter-x: 40px;
    margin-inline: -20px;
  }

  .row > * {
    padding-inline: 20px;
  }
}

/* --------------------------------------------------------------------------
   Boşluk standardı — section üst/alt ve bloklar arası
   -------------------------------------------------------------------------- */
/* Tema .space-extra-bottom'a "-30px" varyantı, ≤767'de 60px ara kademesi ve
   .body-content-section'a ≤575'te 44px veriyordu; sayfalar farklı dikey
   ritimde duruyordu. Hepsi tek değişkene bağlandı: 120 / 80 / 52px.
   .body-content-section.space seçicisi temanın (0,2,0) override'ını ezmek
   için gerekli. 404 kabuğu (.status-shell .space) bilinçli olarak kısa,
   daha özgül olduğu için etkilenmiyor. */
.space,
.space-top,
.body-content-section.space {
  padding-top: var(--space-section);
}

.space,
.space-bottom,
.space-extra-bottom,
.body-content-section.space {
  padding-bottom: var(--space-section);
}

/* Aynı section içindeki bloklar arası: etkinlik detayında bilgi şeridi →
   Program, About'ta tanıtım → vakıf satırı. Tema ikinci satıra ≤991'de
   24px !important veriyordu. */
.contact-media-wrapp {
  margin-bottom: var(--space-block);
}

.body-content-section .row.mt-50 {
  margin-top: var(--space-block) !important;
}

/* --------------------------------------------------------------------------
   Köşe standardı
   -------------------------------------------------------------------------- */
/* Tema her bileşene ayrı değer veriyordu (konser 34/24, haber 24, kutular
   24/30, görseller 16/14, etiketler 20/30/48) ve sanatçı + sponsor kartları
   hiç yuvarlatılmamıştı. Müşteri isteğiyle dört kademeye çekildi:
     --radius-card  16px  kart, görsel, kutu, harita, textarea
     --radius-inner 12px  kart içi öğe ve iç içe kutu
     --radius-btn   8px   buton (GP-19185: hap yerine yuvarlatılmış dikdörtgen)
     --radius-pill  999px input, etiket/meta çipi
     50%                  yuvarlak ikon butonları (ok, scroll-top, sosyal)
   Tam genişlik hero, sayfa başlığı banner'ı ve footer kenardan kenara
   olduğu için köşesiz. */
.event-box,
.event-box .box-img,
.event-box .box-img img,
.blog-single.single-grid,
.blog-single.single-grid .blog-img,
.blog-single.single-grid .blog-img img,
.blog-single .blog-img,
.blog-single .blog-img img,
.contact-media,
.contact-media.style2,
.contact-media-wrapp,
.widget,
.widget_banner,
.widget.widget_banner .widget-map iframe,
.th-comment-form,
textarea.form-control,
textarea,
.th-team .box-img,
.th-team .box-img img,
.brand-card,
.share-links,
.gallery-insta,
.gallery-box .box-img,
.gallery-box .box-img img,
.img-box1.style2 .img1,
.img-box1.style2 .img1 img,
.page-img,
.page-img img,
.page-img.style1,
.page-img.style1 img {
  border-radius: var(--radius-card);
}

/* İkon kutusu etkinlik detayında 20px kare, iletişim/kaynaklarda daireydi —
   aynı bileşen tek görünüme indi. Etkinlik detayındaki şeritte beyaz kutular
   gri kabın İÇİNDE durduğu için onlar da iç kademede. */
.contact-media .icon-btn,
.contact-media.style2 .icon-btn,
.contact-media-wrapp .contact-media {
  border-radius: var(--radius-inner);
}

.th-btn,
.th-btn:before {
  border-radius: var(--radius-btn);
}

/* Tema (style.css:1734) butonları büyük harfe çeviriyordu; metin CMS'te
   nasıl yazıldıysa öyle görünsün (ör. "Send Message", "Bilet Al"). */
.th-btn {
  text-transform: none;
}

/* Buton boyu müşteri isteğiyle küçültüldü (GP-19185): tema 24px 34px / 16px
   ile 64px, mobilde (style.css:1847) 18px 26px ile 50px yüksekliğindeydi.
   Sayfa bazlı daraltmalar (ör. season.scss kart butonları) daha özgül
   olduğu için etkilenmiyor. */
.th-btn {
  font-size: 15px;
  padding: 18px 28px;
}

@media (max-width: 767px) {
  .th-btn {
    font-size: 14px;
    padding: 15px 22px;
  }
}

.tagcloud a,
.widget.widget_tag_cloud a,
.blog-meta span,
.blog-meta a,
.blog-single.single-grid .blog-meta span,
.blog-single.single-grid .blog-meta a {
  border-radius: var(--radius-pill);
}

/* Etkinlik kartı çerçevesi: tema yalnızca %3 opaklıkta gölge veriyor, beyaz
   zeminde kartlar birbirinden ayrışmıyordu (özellikle mobilde alt alta). */
.event-box {
  border: 1px solid rgba(17, 17, 17, 0.08);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.07);
}

/* Sponsor kartının içindeki logo köşeden taşmasın. */
.brand-card {
  overflow: hidden;
}

/* Tema (style.css:155, :199) a/button odağında outline'ı tamamen kaldırıyor;
   klavyeyle gezinen kullanıcı nerede olduğunu göremiyordu. :focus-visible
   yalnızca klavye odağında devreye girer, fare tıklamasında halka çıkmaz.
   Input/textarea hariç: tema odakta zaten kenarlık rengini değiştiriyor. */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--theme-color);
  outline-offset: 3px;
}

/* Ana menü linkleri header boyunca uzanıyor (29px dikey padding), halka
   üstten/alttan kesilip iki dikey çizgi gibi görünüyordu (ölçüldü).
   Bunun yerine metnin altı çiziliyor. */
.main-menu a:focus-visible {
  outline: none;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

/* Scroll-top oku: temanın :after'ı subset FA'da olmayan \f062 glifini
   basıyordu; halka (border) :after'da kalıyor, ok footer.html'deki SVG. */
.scroll-top:after {
  content: "";
}

.scroll-top__arrow {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  color: var(--theme-color);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Çerez bandı + tercih modalı (GP-19188) — shared/cookie-banner.html,
   2-cookie-consent.js
   -------------------------------------------------------------------------- */
/* Her sayfada gerekli olduğu için optima.css'te; main.css temadan önce
   yüklendiği için oradan yazılamazdı. z-index scroll-top'un (10000) üstünde,
   mobil menü (999999) ve preloader'ın altında. */
/* Sol alt köşeye yaslı kart; sağ altta scroll-top'la çakışmaz. Köşeye
   yapıştığı için yalnızca sağ üst köşe yuvarlak. */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 100000;
  width: 414px;
  max-width: 100%;
  padding: 30px 30px 24px;
  border-radius: 0 var(--radius-card) 0 0;
  background: var(--white-color);
  box-shadow: 0 0 32px rgba(0, 0, 0, 0.12);
  color: var(--title-color);
}

.cookie-banner[hidden] {
  display: none;
}

.cookie-banner__close {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--theme-color);
  transition: background-color 0.2s;
}

.cookie-banner__close:hover {
  background: var(--smoke-color);
}

.cookie-banner__text {
  margin: 0 0 24px;
  padding-right: 8px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--title-color);
}

.cookie-banner__text a {
  color: var(--theme-color);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cookie-banner__text a:hover {
  color: var(--title-color);
}

.cookie-banner__actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.cookie-banner__actions .cookie-btn {
  padding: 10px 8px;
}

/* İkincil butonlar çerçeveli, birincil (Kabul Et / Seçimleri Kaydet) tema renginde. */
.cookie-btn {
  min-height: 44px;
  padding: 10px 22px;
  border: 1px solid var(--smoke-color2);
  border-radius: var(--radius-btn);
  background: var(--white-color);
  font-family: var(--body-font);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--title-color);
  white-space: nowrap;
  transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}

.cookie-btn:hover {
  border-color: var(--theme-color);
  color: var(--theme-color);
}

.cookie-btn--primary {
  border-color: var(--theme-color);
  background: var(--theme-color);
  color: var(--white-color);
}

.cookie-btn--primary:hover {
  border-color: var(--title-color);
  background: var(--title-color);
  color: var(--white-color);
}

.cookie-btn:focus-visible,
.cookie-banner__close:focus-visible,
.cookie-banner__switch:focus-visible {
  outline: 2px solid var(--theme-color);
  outline-offset: 2px;
}
/* Giriş/çıkış: kart soldan kayarak gelir ve sola kayarak kapanır.
   JS önce .is-hidden ekler, transition bitince `hidden` verir. */
.cookie-banner {
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.45s;
}

.cookie-banner.is-hidden {
  transform: translateX(-100%);
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .cookie-banner {
    transition: none;
  }
}

/* Ayarlar görünümü — aynı kartın içinde açılır. Uzun içerikte ekran
   yüksekliğini aşmasın diye yalnızca seçenek listesi kayar. */
.cookie-banner__view[hidden] {
  display: none;
}

.cookie-banner__title {
  margin: 0 32px 8px 0;
  font-family: var(--title-font);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--title-color);
}

.cookie-banner__options {
  max-height: calc(100dvh - 220px);
  margin-bottom: 20px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.cookie-banner__option {
  padding: 14px 0;
  border-bottom: 1px solid var(--smoke-color2);
}

.cookie-banner__option-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  cursor: pointer;
}

.cookie-banner__option-title {
  font-size: 14px;
  font-weight: 600;
}

.cookie-banner__always {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--theme-color);
}

.cookie-banner__option-desc {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--body-color);
}

/* Tema input stillerini sıfırlayıp anahtar görünümü veriyoruz. Görünüm
   Fiba Grup çerez sayfasındaki anahtarla aynı (müşteri referansı): 90x34
   hap, içinde KAPALI/AÇIK yazısı, kapalıyken koyu, açıkken tema rengi.
   Yazı dil etiketinden data-off/data-on ile gelir. */
input.cookie-banner__switch {
  appearance: none;
  -webkit-appearance: none;
  /* Tema (style.css:834) her checkbox'ı display:none + visibility:hidden +
     0x0 yapıyor ve `input[type=checkbox]` tek sınıftan özgül; anahtar hiç
     görünmüyordu (ölçüldü). Seçici bu yüzden input. ile başlıyor. */
  display: block;
  visibility: visible;
  opacity: 1;
  position: relative;
  flex-shrink: 0;
  width: 90px;
  height: 34px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--title-color);
  cursor: pointer;
  transition: background-color 0.4s;
}

/* Yuvarlak düğme */
.cookie-banner__switch::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  z-index: 2;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--white-color);
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.24);
  transition: transform 0.4s;
}

/* Durum yazısı: kapalıyken sağda, açıkken solda (düğmenin karşı tarafı). */
.cookie-banner__switch::before {
  content: attr(data-off);
  position: absolute;
  top: 50%;
  right: 12px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  color: var(--white-color);
  transform: translateY(-50%);
}

.cookie-banner__switch:checked {
  background: var(--theme-color);
}

.cookie-banner__switch:checked::before {
  content: attr(data-on);
  right: auto;
  left: 14px;
}

.cookie-banner__switch:checked::after {
  transform: translateX(56px);
}

.cookie-banner__actions--settings {
  grid-template-columns: 1fr 2fr;
}

/* Mobilde ekran genişliğinde alta yaslanır. Sayfa metniyle iç içe geçmiş
   görünmesin diye üst köşeler yuvarlak ve gölge belirgin; X metnin üstüne
   binmesin diye metne sağdan boşluk bırakılıyor. */
@media (max-width: 575px) {
  .cookie-banner {
    width: 100%;
    padding: 20px 16px 16px;
    border-top: 1px solid var(--smoke-color2);
    border-radius: var(--radius-card) var(--radius-card) 0 0;
    box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.14);
  }

  .cookie-banner__close {
    top: 12px;
    right: 8px;
  }

  .cookie-banner__text {
    margin-bottom: 16px;
    padding-right: 36px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--body-color);
  }

  .cookie-banner__title {
    font-size: 16px;
  }

  .cookie-banner__actions {
    gap: 8px;
  }

  .cookie-banner__actions .cookie-btn {
    min-height: 40px;
    font-size: 13px;
  }
}