/* =====================================================================
   ÖZEL İZ ANAOKULU — Özelleştirmeler
   PROTECHSOFT · Yazılım & Dijital Çözümler

   Bu dosya main.css'ten SONRA yüklenir. Tema dosyalarına hiç
   dokunulmamıştır; tüm kuruma özel eklemeler burada tutulur.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1) MARKA RENKLERİ — Özel İz Anaokulu logosundan alınmıştır
   Tema tüm tonlarını (50…900) bu HSL bileşenlerinden türetir; dolayısıyla
   aşağıdaki değerler bütün siteyi marka renklerine çevirir.

   Logodaki el izi renkleri (CMYK → sRGB karşılıkları):
     turuncu #F58220 · kırmızı #E8342E · sarı #F1E23E · yeşil #2BB258
     açık mavi #29BBEF · koyu mavi #1C75BC · mor #A34A9B
   --------------------------------------------------------------------- */
:root {
  /* Ana renk — logodaki turuncu el (#F58220) */
  --main-h: 28;
  --main-s: 91%;
  --main-l: 54%;

  /* İkincil renk — logodaki sarıya yaklaştırılmış sıcak altın.
     Açık tonu (main-two-200) header ve bölüm zeminlerindeki krem rengi verir. */
  --main-two-h: 46;
  --main-two-s: 92%;
  --main-two-l: 54%;

  /* Logo paleti — bileşenlerde doğrudan kullanılabilir */
  --oi-turuncu:    #F58220;
  --oi-kirmizi:    #E8342E;
  --oi-sari:       #F1E23E;
  --oi-yesil:      #2BB258;
  --oi-acik-mavi:  #29BBEF;
  --oi-koyu-mavi:  #1C75BC;
  --oi-mor:        #A34A9B;

  /* Temanın vurgu renkleri logo paletine bağlandı */
  --primary-600: #1C75BC;
  --primary-700: #145A91;
  --primary-100: #1C75BC1A;
  --primary-50:  #1C75BC12;
  --pink-600:    #A34A9B;
  --pink-100:    #F6EBF5;
  --pink-50:     #A34A9B14;
  --gren-600:    #2BB258;
  --gren-50:     #2BB25866;
  --gren-10:     #2BB2582B;

  /* Hızlı iletişim butonları */
  --oi-whatsapp: #25D366;
  --oi-whatsapp-koyu: #1DA851;
}

/* Türkçe metinlerde kelime kırılmasını yumuşat */
body { word-break: normal; overflow-wrap: break-word; hyphens: none; }

/* ---------------------------------------------------------------------
   1a) <main> SARMALI — bölümler arası geçişlerin temayla birebir olması

   Temada bütün bölümler doğrudan <body>'nin çocuğudur ve main.css'te
   `body { display:flex; flex-direction:column }` tanımlıdır. Yani her
   bölüm bir FLEX ÖĞESİDİR; flex öğelerinde margin çökmesi (margin
   collapsing) olmaz.

   Tema bunun üzerine kuruludur: örneğin veli yorumları sarmalındaki
   `.tw-mt--250-px` tanıtım videosunu 250 px yukarı taşıyıp ücret
   bölümünün üstüne bindirir — ama sarmalın kendi zemini yerinde kalır.

   Erişilebilirlik için araya <main> koyduğumuzda bölümler yeniden
   normal blok oldu, negatif margin üst sarmala sızdı ve zeminler
   250 px yukarı kaydı (gri alan pembe bandın üstünü örttü).
   <main>'i de sütun flex kabı yaparak temanın davranışını geri alıyoruz.
   Panelin kendi <main class="ap-icerik"> öğesi body'nin doğrudan
   çocuğu olmadığı için bu kuraldan etkilenmez.
   --------------------------------------------------------------------- */
body > main {
  display: flex;
  flex-direction: column;
}

/* ---------------------------------------------------------------------
   1b) TİPOGRAFİ — font aileleri kesinleştirildi

   Tema yıllardır bozuk bir @import kullanıyordu (ayraçlar `&` yerine `&amp;`)
   ve bu yüzden Google'dan YALNIZCA "Love Ya Like A Sister" iniyordu.
   Başlıklar `--heading-font: "Nunito", "Love Ya Like A Sister"` diyor; Nunito
   inmediği için sıradaki Love Ya devreye giriyor ve sitenin bilinen oyuncu
   el yazısı başlıkları böyle oluşuyordu. Fontlar yerele alınıp hepsi düzgün
   yüklenince Nunito öne geçti ve başlıkların karakteri kayboldu.

   Aşağıda üç aile de niyet edilen değerine sabitleniyor:

   • Başlık  → Love Ya Like A Sister (onaylanan görünüm bu)
   • Gövde   → Nunito. Temada `--body-font: "Source Sans Pro", "Pangolin"`
               yazıyor ama "Source Sans Pro" hiçbir yerden yüklenmiyor:
               ziyaretçinin makinesinde kuruluysa o kullanılıyor, DEĞİLSE
               sıradaki Pangolin'e düşüyordu — yani paragrafların tamamı
               el yazısıyla çıkıyordu. Ziyaretçiye göre değişen bu davranış
               kaldırıldı.
   • Menü    → Pangolin (müşteri onaylı: 500 · 16px / 24px · rgb(7,7,19))

   Ölçüm: Pangolin, Nunito ve Love Ya artık assets/fonts'tan yerel geliyor.
   --------------------------------------------------------------------- */
:root {
  --heading-font: "Love Ya Like A Sister", "Nunito", cursive;
  --body-font: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --oi-menu-font: "Pangolin", "Nunito", sans-serif;
}

.nav-menu__link,
.nav-submenu__link,
.nav-menu--mobile .nav-menu__link {
  font-family: var(--oi-menu-font);
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: rgb(7, 7, 19);
}

/* Üzerine gelme ve aktif sayfa durumunda yalnızca renk değişir —
   ağırlık sabit kalır ki menü genişliği oynamasın. */
.nav-menu__item:hover > .nav-menu__link,
.nav-menu__item.activePage > .nav-menu__link,
.nav-submenu__item:hover > .nav-submenu__link {
  color: var(--main-600);
  font-weight: 500;
}

/* Menü öğeleri asla iki satıra kırılmasın — logonun üstüne binmeye yol açıyor */
.nav-menu > .nav-menu__item > .nav-menu__link { white-space: nowrap; }

/* 1200–1399 px arası: Türkçe etiketler İngilizce karşılıklarından uzun olduğu
   için menü bu aralıkta sıkışıyor. Boşluk ve punto kademeli daraltılır. */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .header-menu .nav-menu { gap: 1rem !important; }

  .nav-menu > .nav-menu__item > .nav-menu__link {
    font-size: 15px;
    padding-inline-end: 1.15rem !important;
  }

  .nav-menu > .nav-menu__item:not(.has-submenu) > .nav-menu__link {
    padding-inline-end: 0 !important;
  }

  .header nav { padding: 1rem 1.25rem !important; }
  .oi-logo--sade .oi-logo__isaret   { width: 66px; height: 66px; }
  /* 1200-1399: menü zaten dar, logo metni yer kaplamasın */
  .oi-logo--header .oi-logo__isaret { width: 48px; height: 48px; }
  .oi-logo--header .oi-logo__yazi   { display: none; }
  .header .btn { white-space: nowrap; }
}

/* Logo ile menü arasında her zaman nefes payı kalsın */
.header .logo { flex-shrink: 0; margin-inline-end: 1rem; }

/* Menü sayfada ortalanır.
   Tema `justify-content: between` kullanıyor; sağdaki buton grubu (arama +
   telefon + Ön Kayıt) logodan çok daha geniş olduğu için menü sağa kaymış
   görünüyordu. Menüyü kalan alanda ortalayıp iki yanına eşit pay veriyoruz. */
.header-menu { min-width: 0; }

/* Menü sayfanın tam ortasında dursun.
   Tema `justify-content: between` kullanıyor; sağdaki buton grubu (arama +
   telefon + Ön Kayıt ≈ 298 px) logodan (≈ 86 px) çok daha geniş olduğu için
   menü akışta bırakıldığında hiçbir zaman ortaya gelmiyordu. Menüyü nav'a
   göre mutlak konumlayıp %50'den ortalıyoruz; logo ve butonlar akışta
   kaldığı için kendi kenarlarında durmaya devam ediyor.
   Eşik 1400 px: ölçüldü, 1200-1399 arasında menü ortalandığında sağ uçtaki
   buton grubunun altına giriyor (1366'da 35 px, 1200'de 35 px çakışma).
   O aralıkta menü akışta bırakılır; zaten 1b'deki daraltma kuralı devrede. */
@media (min-width: 1400px) {
  .header-menu {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
}

/* ---------------------------------------------------------------------
   1d) FOOTER KATMANLAMASI
   Temadaki dekoratif görseller (zürafa, balon, kalem) mutlak konumlu.
   Metin ve logonun bunların üstünde kalması sağlanır.
   --------------------------------------------------------------------- */
.footer .container { position: relative; z-index: 1; }
.footer .oi-logo,
.footer .oi-logo__yazi { position: relative; z-index: 2; }

/* Bülten kutusu footer'ın üstüne binerken formun görünür kalması şart */
.footer + *, .footer { isolation: auto; }

/* ---------------------------------------------------------------------
   1c) LOGO KİLİDİ
   Dairesel marka işareti + okunabilir kurum adı.
   --------------------------------------------------------------------- */
.oi-logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  line-height: 1;
}

.oi-logo__isaret {
  width: 62px;
  height: 62px;
  flex-shrink: 0;
  object-fit: contain;
}

.oi-logo__yazi {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.oi-logo__ad {
  font-family: var(--heading-font);
  font-weight: 800;
  font-size: 20px;
  line-height: 1.15;
  color: var(--neutral-950);
  letter-spacing: -.2px;
  white-space: nowrap;
}

.oi-logo__alt {
  font-family: var(--oi-menu-font);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--main-600);
  white-space: nowrap;
}

.oi-logo:hover .oi-logo__ad { color: var(--main-700); }

/* Sade varyant — yalnızca marka işareti, yazı yok. */
.oi-logo--sade .oi-logo__isaret { width: 86px; height: 86px; }

@media (max-width: 1199.98px) {
  .oi-logo--sade .oi-logo__isaret { width: 72px; height: 72px; }
}

@media (max-width: 575.98px) {
  .oi-logo--sade .oi-logo__isaret { width: 60px; height: 60px; }
}

/* ---------------------------------------------------------------------
   Header varyantı — küçük işaret + kurum adı

   Önce 86 px'lik yalın işaret vardı: başlık çubuğunu gereksiz yükseltiyor,
   dairenin üzerindeki yazı o boyutta okunmuyordu. İşaret 52 px'e indirildi,
   yanına düz metin kurum adı kondu; çubuk alçaldı ve marka okunur oldu.

   Ad 1200 px altında GİZLENİR: o aralıkta menü zaten sıkışık (bkz. 1b) ve
   logo metni menüyü butonların altına itiyordu. Orada işaret tek başına kalır,
   kurum adı ekran okuyucu ve SEO için DOM'da durmaya devam eder.
   --------------------------------------------------------------------- */
.oi-logo--header { gap: 10px; }
.oi-logo--header .oi-logo__isaret { width: 52px; height: 52px; }

.oi-logo--header .oi-logo__ad {
  font-size: 19px;
  line-height: 1.1;
  white-space: nowrap;
}

@media (max-width: 1199.98px) {
  .oi-logo--header .oi-logo__isaret { width: 56px; height: 56px; }
  .oi-logo--header .oi-logo__yazi   { display: none; }
}

/* Büyük varyant — footer */
.oi-logo--buyuk .oi-logo__isaret { width: 76px; height: 76px; }
.oi-logo--buyuk .oi-logo__ad     { font-size: 23px; }

/* Mobil menü içi */
.oi-logo--mobil .oi-logo__isaret { width: 54px; height: 54px; }
.oi-logo--mobil .oi-logo__ad     { font-size: 17px; }
.oi-logo--mobil .oi-logo__alt    { font-size: 10.5px; }

/* Koyu zemin */
.oi-logo--beyaz .oi-logo__ad  { color: #fff; }
.oi-logo--beyaz .oi-logo__alt { color: rgba(255, 255, 255, .82); }

/* Dar ekranlarda yazı gizlenir, işaret kalır */
@media (max-width: 480px) {
  .oi-logo__yazi { display: none; }
  .oi-logo__isaret { width: 54px; height: 54px; }
}

/* ---------------------------------------------------------------------
   2) SABİT HIZLI İLETİŞİM BUTONLARI (masaüstü)
   --------------------------------------------------------------------- */
.oi-float {
  position: fixed;
  left: 20px;
  bottom: 24px;
  z-index: 995;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.oi-float__btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  color: #fff;
  font-size: 26px;
  line-height: 1;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
  transition: width .32s cubic-bezier(.4, 0, .2, 1), border-radius .32s, transform .2s, box-shadow .2s;
  overflow: hidden;
  white-space: nowrap;
}

.oi-float__btn:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, .24); }
.oi-float__btn i { flex-shrink: 0; }

.oi-float__btn--wa    { background: var(--oi-whatsapp); }
.oi-float__btn--wa:hover { background: var(--oi-whatsapp-koyu); }
.oi-float__btn--tel   { background: var(--main-600); }
.oi-float__btn--tel:hover { background: var(--main-700); }
.oi-float__btn--kayit { background: var(--main-two-600); }
.oi-float__btn--kayit:hover { background: var(--main-two-700); }

.oi-float__label {
  max-width: 0;
  opacity: 0;
  font-size: 15px;
  font-weight: 600;
  transition: max-width .32s cubic-bezier(.4, 0, .2, 1), opacity .2s, margin .32s;
}

.oi-float__btn:hover {
  width: auto;
  min-width: 56px;
  padding: 0 22px 0 16px;
  border-radius: 32px;
  gap: 10px;
}

.oi-float__btn:hover .oi-float__label { max-width: 260px; opacity: 1; }

/* Yumuşak nabız — dikkat çeker ama rahatsız etmez */
.oi-float__btn--wa::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(37, 211, 102, .55);
  animation: oiNabiz 2.4s infinite;
}

@keyframes oiNabiz {
  0%   { box-shadow: 0 0 0 0 rgba(37, 211, 102, .55); }
  70%  { box-shadow: 0 0 0 16px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .oi-float__btn--wa::after { animation: none; }
  .oi-float__btn, .oi-float__label { transition: none; }
}

/* ---------------------------------------------------------------------
   3) MOBİL HIZLI EYLEM ÇUBUĞU
   --------------------------------------------------------------------- */
.oi-mobilbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 996;
  display: flex;
  background: #fff;
  border-top: 1px solid #EFEFEF;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, .09);
  padding-bottom: env(safe-area-inset-bottom);
}

.oi-mobilbar__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 9px 4px 8px;
  color: var(--neutral-950);
  /* 11,5 px küçük ekranda zor okunuyordu; 4 sütuna sığan en büyük punto 12,5 px */
  font-size: 12.5px;
  font-weight: 600;
  text-align: center;
  line-height: 1.2;
  border-right: 1px solid #F2F2F2;
}

.oi-mobilbar__item:last-child { border-right: 0; }
.oi-mobilbar__item i { font-size: 21px; color: var(--main-600); }
.oi-mobilbar__item--wa i { color: var(--oi-whatsapp); }
.oi-mobilbar__item--kayit i { color: var(--main-two-600); }
.oi-mobilbar__item:active { background: #FAFAFA; }

/* Mobil çubuk sayfayı örtmesin */
@media (max-width: 991.98px) {
  body { padding-bottom: 62px; }
  .progress-wrap { bottom: 76px !important; }
}

/* ---------------------------------------------------------------------
   4) BİLDİRİM KUTULARI (form sonuçları)
   --------------------------------------------------------------------- */
.oi-uyari {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 20px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 20px;
  border: 1px solid transparent;
}

.oi-uyari i { font-size: 22px; flex-shrink: 0; margin-top: 1px; }
.oi-uyari--success { background: #EAF7EE; color: #1E6B33; border-color: #C6E9D1; }
.oi-uyari--error   { background: #FDECEC; color: #A32020; border-color: #F6C9C9; }
.oi-uyari--info    { background: #EAF3FB; color: #1B5A88; border-color: #C6DEF2; }

/* ---------------------------------------------------------------------
   5) FORM ALANLARI
   --------------------------------------------------------------------- */
.oi-form-hata {
  display: block;
  color: #C62828;
  font-size: 13.5px;
  font-weight: 600;
  margin-top: 6px;
}

.oi-input-hata { border-color: #E57373 !important; background: #FFFBFB !important; }

.oi-form label.oi-etiket {
  display: block;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--neutral-950);
  margin-bottom: 8px;
}

.oi-form label.oi-etiket .oi-zorunlu { color: #E53935; }

.oi-form select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23385469' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  padding-right: 44px !important;
}

.oi-kvkk {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--paragraph-500);
  line-height: 1.55;
}

.oi-kvkk input[type="checkbox"] {
  width: 19px;
  height: 19px;
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--main-600);
  cursor: pointer;
}

/* ---------------------------------------------------------------------
   6) İÇERİK ALANI (yönetim panelinden girilen zengin metin)
   --------------------------------------------------------------------- */
.oi-icerik { font-size: 16px; line-height: 1.85; color: var(--paragraph-500); }
.oi-icerik > *:last-child { margin-bottom: 0; }
.oi-icerik p { margin-bottom: 20px; }

.oi-icerik h2,
.oi-icerik h3,
.oi-icerik h4,
.oi-icerik h5 {
  color: var(--neutral-950);
  font-weight: 700;
  margin: 34px 0 16px;
}

.oi-icerik h2 { font-size: 28px; }
.oi-icerik h3 { font-size: 24px; }
.oi-icerik h4 { font-size: 20px; }
.oi-icerik h5 { font-size: 18px; }

.oi-icerik ul,
.oi-icerik ol { margin: 0 0 22px; padding-left: 0; list-style: none; }

.oi-icerik ul li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 12px;
}

.oi-icerik ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--main-600);
  box-shadow: 0 0 0 4px var(--main-50);
}

.oi-icerik ol { counter-reset: oiSayac; }

.oi-icerik ol li {
  position: relative;
  padding-left: 38px;
  margin-bottom: 12px;
  counter-increment: oiSayac;
}

.oi-icerik ol li::before {
  content: counter(oiSayac);
  position: absolute;
  left: 0;
  top: 1px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--main-600);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.oi-icerik blockquote {
  margin: 28px 0;
  padding: 24px 28px;
  background: var(--main-50);
  border-left: 5px solid var(--main-600);
  border-radius: 12px;
  font-size: 17px;
  font-style: italic;
  color: var(--neutral-950);
}

.oi-icerik img { max-width: 100%; height: auto; border-radius: 14px; margin: 12px 0 24px; }
.oi-icerik a { color: var(--main-700); text-decoration: underline; }
.oi-icerik a:hover { color: var(--main-800); }

.oi-icerik table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 24px;
  font-size: 15px;
}

.oi-icerik table th,
.oi-icerik table td { padding: 12px 16px; border: 1px solid #EAEAEA; text-align: left; }
.oi-icerik table th { background: var(--main-50); color: var(--neutral-950); font-weight: 700; }

/* ---------------------------------------------------------------------
   7) GÖRSEL YER TUTUCULAR
   Fotoğraflar yüklenene kadar ölçüsü yazılı çerçeve gösterilir.
   --------------------------------------------------------------------- */
.oi-gorsel-alani {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  border-radius: 16px;
  background: #FFF6E5;
}

.oi-gorsel-alani > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Sabit oranlı görsel kutuları — yükleme sırasında sayfa zıplamasını önler */
.oi-oran-4-3   { aspect-ratio: 4 / 3; }
.oi-oran-16-9  { aspect-ratio: 16 / 9; }
.oi-oran-1-1   { aspect-ratio: 1 / 1; }
.oi-oran-3-4   { aspect-ratio: 3 / 4; }
.oi-oran-portre { aspect-ratio: 400 / 509; }

/* ---------------------------------------------------------------------
   8) SAYFALAMA
   --------------------------------------------------------------------- */
.oi-sayfalama {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 56px;
}

.oi-sayfalama a,
.oi-sayfalama span {
  min-width: 46px;
  height: 46px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #EDEDED;
  color: var(--neutral-950);
  font-weight: 700;
  font-size: 15px;
  transition: all .2s;
}

.oi-sayfalama a:hover { background: var(--main-50); border-color: var(--main-600); color: var(--main-700); }
.oi-sayfalama .oi-aktif { background: var(--main-600); border-color: var(--main-600); color: #fff; }
.oi-sayfalama .oi-pasif { opacity: .45; pointer-events: none; }

/* ---------------------------------------------------------------------
   9) GALERİ
   --------------------------------------------------------------------- */
/* ---------------------------------------------------------------------
   17b) KAYIT BÖLÜMÜ GÖRSELİ

   Tema bu alana arka planı SİLİNMİŞ (şeffaf PNG) bir çocuk görseli koyuyor;
   görsel kartın alt kenarına basıp dalganın üstünde duruyor. Oraya normal
   dikdörtgen bir fotoğraf konunca kart `overflow-hidden` olduğu için fotoğraf
   kenarlara dayanıyor, köşeleri kesiliyor ve alttaki dalga/dekor süslemelerini
   örtüyordu.

   Fotoğraf kart içine oturtulur: köşeler yuvarlatılır, kenarlardan pay
   bırakılır, hafif gölgeyle kartın üstünde ayrı bir öğe gibi durur.
   Okul ileride şeffaf PNG yüklerse de bu kural görüntüyü bozmaz.
   --------------------------------------------------------------------- */
.oi-kayit-gorsel {
  width: 100%;
  max-width: 420px;
  height: auto;
  margin: 28px 0;
  border-radius: 26px;
  object-fit: cover;
  box-shadow: 0 16px 38px rgba(0, 0, 0, .14);
}

/* ---------------------------------------------------------------------
   18) GALERİ IZGARASI — eşit kutular

   Fotoğraflar farklı en-boy oranlarında geliyor (dikey telefon karesi,
   yatay fotoğraf makinesi karesi). Kutuya oran verilmediğinde her fotoğraf
   kendi boyunda basılıyor ve ızgara "kimi büyük kimi küçük" görünüyordu.
   Sabit 4:3 oran + object-fit:cover ile bütün önizlemeler aynı ölçüde olur;
   fotoğrafın tamamı tıklanınca lightbox'ta görünür (main.js → magnificPopup).
   --------------------------------------------------------------------- */
.oi-galeri-kart {
  position: relative;
  display: block;
  border-radius: 16px;
  overflow: hidden;
  background: #FFF6E5;
  aspect-ratio: 4 / 3;
}

.oi-galeri-kart img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}
.oi-galeri-kart:hover img { transform: scale(1.07); }

.oi-galeri-kart__ust {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(0, 0, 0, .05), rgba(0, 0, 0, .55));
  opacity: 0;
  transition: opacity .35s;
}

.oi-galeri-kart:hover .oi-galeri-kart__ust { opacity: 1; }

.oi-galeri-kart__ikon {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #fff;
  color: var(--main-600);
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(.7);
  transition: transform .35s;
}

.oi-galeri-kart:hover .oi-galeri-kart__ikon { transform: scale(1); }

/* Albüm filtre butonları */
.oi-filtre {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 40px;
}

.oi-filtre button {
  padding: 11px 24px;
  border-radius: 30px;
  border: 1px solid #EDEDED;
  background: #fff;
  color: var(--neutral-950);
  font-weight: 700;
  font-size: 15px;
  transition: all .25s;
}

.oi-filtre button:hover { border-color: var(--main-600); color: var(--main-700); }
.oi-filtre button.oi-aktif { background: var(--main-600); border-color: var(--main-600); color: #fff; }

/* ---------------------------------------------------------------------
   10) BİLDİRİM BALONU (toast)
   --------------------------------------------------------------------- */
.oi-toast {
  position: fixed;
  right: 20px;
  top: 20px;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 280px;
  max-width: 400px;
  padding: 16px 20px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .16);
  font-size: 15px;
  font-weight: 600;
  transform: translateX(120%);
  transition: transform .4s cubic-bezier(.2, .9, .3, 1.2);
}

.oi-toast.oi-gorunur { transform: translateX(0); }
.oi-toast i { font-size: 22px; }
.oi-toast--success { border-left: 5px solid #2E7D32; color: #1E6B33; }
.oi-toast--success i { color: #2E7D32; }
.oi-toast--error { border-left: 5px solid #C62828; color: #A32020; }
.oi-toast--error i { color: #C62828; }
.oi-toast--info { border-left: 5px solid #1976D2; color: #1B5A88; }
.oi-toast--info i { color: #1976D2; }

/* ---------------------------------------------------------------------
   11) ERİŞİLEBİLİRLİK
   --------------------------------------------------------------------- */
.oi-atla {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  padding: 12px 22px;
  background: var(--main-600);
  color: #fff;
  font-weight: 700;
  border-radius: 0 0 10px 0;
}

.oi-atla:focus { left: 0; color: #fff; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--main-600);
  outline-offset: 2px;
}

/* Ekran okuyucular için gizli metin */
.oi-gizli {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------------
   12) HARİTA
   --------------------------------------------------------------------- */
.oi-harita { position: relative; width: 100%; height: 500px; }
.oi-harita iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(.15); }

@media (max-width: 767.98px) {
  .oi-harita { height: 340px; }
}

/* ---------------------------------------------------------------------
   12b) BÜLTEN BALONU — şeklin tamamının görünmesi

   Bültenin turuncu zemini bir maske görselidir (newsletter-bg-img1.png,
   1169 x 448 px → en/boy 2.61). Tema `mask-size: cover` kullanır ve
   İngilizce metinle kutu 1296 x 496 px (2.61) olduğu için maske tam
   oturur, kırpılmaz.

   Bizde başlık iki satıra iniyor ve altta KVKK bilgilendirme cümlesi
   var; kutu 534 px'e çıkıyor (2.43). `cover` maskeyi yükseklikten
   ölçeklediği için genişlikten ~98 px kırpıyor ve balonun yuvarlak sağ
   ile sol uçları kesiliyordu.

   `100% 100%` maskeyi kutuya tam oturtur: şekil her zaman bütün görünür,
   metin uzunluğundan bağımsız çalışır. Oranlar birbirine çok yakın
   olduğu için balon yalnızca ~%7 daha dolgun görünür.

   1400 px altında tema zaten maskeyi kaldırıp köşeleri yuvarlıyor;
   o kurala dokunmuyoruz.
   --------------------------------------------------------------------- */
@media (min-width: 1400px) {
  .oi-bulten-zemin {
    mask-size: 100% 100%;
    -webkit-mask-size: 100% 100%;
  }
}

/* Maskenin verdiği height:100%, kutuyu satır yüksekliğine kadar uzatıyor.
   Bülten kutusu içeriği kadar yüksek olmalı. */
.oi-bulten-zemin { height: auto; }

/* ---------------------------------------------------------------------
   12c) KART KAPAK GÖRSELLERİ

   Tema <a> öğelerini inline-block yapıyor. Kapak görselini saran bağlantı
   böyle kalınca görsele daralıyor, görseldeki `w-100` de kartı değil o dar
   bağlantıyı referans aldığı için kartın sağında beyaz boşluk kalıyordu.
   Sarmalı blok yaparak görsel kutuyu tam dolduruyor.

   Şablonlarda ayrıca açıkça `d-block` verildi; bu kural gözden kaçan
   yerler için ağ görevi görür.
   --------------------------------------------------------------------- */
a:has(> img.w-100) { display: block; }

/* ---------------------------------------------------------------------
   14) FOOTER

   a) İletişim şeridi
      Tema düzeni `d-flex ... flex-wrap`: metin bloğu ikonun yanına
      sığmadığında alt satıra iniyor. En uzun sütun olan adres bu yüzden
      diğer ikisinden aşağı kayıyordu. Metin bloğuna daralma izni verip
      (flex:1 1 0 + min-width:0) satırda tutuyoruz; uzun adres artık
      kendi içinde alt satıra geçiyor.
   --------------------------------------------------------------------- */
.oi-iletisim-serit .d-flex > span { flex-shrink: 0; }

.oi-iletisim-serit .d-flex > div {
  flex: 1 1 0;
  min-width: 0;
}

/* ---------------------------------------------------------------------
   b) Sütunların mobil akordeonu
      768 px altında bağlantı listeleri kapalı başlar; başlıklar açılır
      kapanır düğmedir. Masaüstünde düğme düz başlık gibi davranır.
   --------------------------------------------------------------------- */
.oi-fsutun__ac {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: inherit;
}

.oi-fsutun__ok { display: none; }

/* Masaüstü: gövde daima açık, düğme tıklanmaz bir başlıktır */
@media (min-width: 768px) {
  .oi-fsutun__ac { cursor: default; pointer-events: none; }
  .oi-fsutun__govde[hidden] { display: block !important; }
}

@media (max-width: 767.98px) {
  /* Akordeonda iki sütunlu düzen okunmuyor; her sütun tam genişlik */
  .oi-fsutun { width: 100%; }

  .oi-fsutun__baslik { margin: 0; }

  .oi-fsutun__ac {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    padding: 14px 0;
  }

  .oi-fsutun__ok {
    display: inline-block;
    flex-shrink: 0;
    font-size: 20px;
    color: var(--oi-turuncu);
    transition: transform .25s ease;
  }

  .oi-fsutun__ac[aria-expanded="true"] .oi-fsutun__ok { transform: rotate(180deg); }

  /* Başlık altındaki gradyan çizgi akordeonda gereksiz; yerine ayraç */
  .oi-fsutun__cizgi { display: none; }

  .oi-fsutun + .oi-fsutun .oi-fsutun__baslik,
  .oi-fsutun:first-of-type .oi-fsutun__baslik {
    border-top: 1px solid rgba(0, 0, 0, .10);
  }

  /* Gövdelerin bir kısmı Bootstrap'ın `d-flex` sınıfını taşıyor; o sınıf
     `display:flex !important` verdiği için `hidden` özniteliğinin gizlemesini
     eziyordu (kapalı sütunlar açık kalıyordu). Bu yüzden !important şart. */
  .oi-fsutun__govde[hidden] { display: none !important; }

  .oi-fsutun__govde { padding-bottom: 18px; }

  /* Satır aralığı akordeonda fazla geliyordu */
  .footer .row.gy-5 > .oi-fsutun { padding-top: 0; }
}

/* ---------------------------------------------------------------------
   c) Alt şerit — telif ve sözleşme bağlantıları
   --------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .oi-alt-serit {
    flex-direction: column;
    justify-content: center;
    text-align: center;
    gap: 14px;
  }

  .oi-alt-serit > div {
    justify-content: center;
    row-gap: 10px;
  }
}

/* ---------------------------------------------------------------------
   15) SAYFA ÜST BAŞLIĞI (BREADCRUMB)

   a) Dekorların uzun Türkçe başlıkları örtmesi
      Zürafa (newslater-three-shape2) soldan sabit 250 px'te, 138 px eninde;
      yılan (newslater-three-shape1) sağdan sabit 389 px kaplıyor. Tema
      başlıkları "About Us" gibi kısa olduğu için ikisinin arasındaki boşluğa
      rahat sığıyor. Bizim başlıklarımız ("Eğitim Programlarımız" ~640 px)
      992-1399 px arasında bu boşluğa sığmıyor; ölçümde başlığın solundan
      ~30 px, sağından ~170 px dekorların altında kalıyordu. Aynı sorun
      soldan sabit 480 px'teki güneş dekorunda da var: "Anasayfa / ..."
      bağlantı satırının üstüne biniyordu.
      Bu üç dekor 1400 px altında gizlenir; tam genişlikteki alt dalga
      (banner-shape2) yerinde kaldığı için bölüm boş görünmez.
      1400 px ve üstünde tema görünümü aynen korunur.
   --------------------------------------------------------------------- */
@media (max-width: 1399.98px) {
  .oi-bc-dekor { display: none !important; }
}

/* b) Başlık her zaman dekorların üstünde kalsın.
      Dekorlar position:absolute, başlık normal akışta; aynı yığın bağlamında
      konumlanmış öğeler statik olanların üstüne boyandığı için uzun
      başlıklarda metin şeklin altında kalıyordu. */
.oi-bc-icerik { position: relative; z-index: 1; }

/* ---------------------------------------------------------------------
   16) DOKUNMA HEDEFLERİ

   Temanın simge-butonları çok küçük: mobil menü kapatma 26x26, arama
   katmanının kapatma düğmesi 30x38, arama gönder düğmesi 20x27 px.
   Parmakla ıskalanıyorlar (önerilen alt sınır 44x44). Butonların
   GÖRÜNÜMÜNÜ değiştirmiyoruz — tema tasarımı korunsun diye tıklanabilir
   alanı görünmez bir ::after katmanıyla genişletiyoruz.
   --------------------------------------------------------------------- */
/* DİKKAT: mobil menü kapatma düğmesi (.position-absolute) ve arama gönder
   düğmesi zaten konumlandırılmış; onlara position vermiyoruz — arama gönder
   düğmesinin tema kuralıyla aynı özgüllükte olduğumuz için `position:relative`
   yazsaydık temanın `position:absolute` değerini ezer, düğme yerinden oynardı.
   Yalnızca hiç konumu olmayan kapatma düğmesine relative veriyoruz. */
.search_wrapper .search_top .search_close .search_close_btn { position: relative; }

.mobile-menu .close-button::after,
.search_wrapper .search_top .search_close .search_close_btn::after,
.search_wrapper .search_form .search_input button::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

/* ---------------------------------------------------------------------
   19) ANASAYFA MARKA ŞERİDİ — başlık genişliği

   Temada bu bölümün başlığı elle iki satıra bölünmüş (<br>) ve ~620 px
   kalıyor; sağındaki dönen rozet de aynı satırda duruyor. Bizim başlığımız
   yönetim panelinden geldiği için içine <br> koyamıyoruz ve tek satırda
   1159 px'e çıkıyordu. Sonuç: rozet alt satıra düşüyor, başlığın sonu
   sağdaki zürafa dekorunun (about-us-shape-1, container'ın sağına yaslı)
   altında kalıyordu. Genişlik sınırı başlığı temadaki gibi iki satıra
   indirir; metin uzunluğundan bağımsız çalışır.
   --------------------------------------------------------------------- */
.oi-serit-metin { max-width: 680px; }

/* Not: Bülten kutusunun altındaki fazladan boşluk HATA DEĞİLDİR — temanın
   `.tw-py-99-px` sınıfı bilerek asimetriktir (padding-top:100px /
   padding-bottom:134px), balon şeklinin alt yuvarlağına yer bırakır.
   Ölçülüp doğrulandı, dokunulmadı. */

/* ---------------------------------------------------------------------
   16) PROGRAMLAR MEGA MENÜSÜ (yalnızca masaüstü)

   Temanın açılır listesi `tw-w-max` ile içeriğe göre daralıyor. Mega panel
   sabit genişlikte ve menü öğesinin altında ortalanmış olmalı; program
   sayısı arttıkça yana taşmaması için ızgara iki sütun.
   --------------------------------------------------------------------- */
@media (min-width: 992px) {
  .oi-mega { position: relative; }

  .oi-mega > .oi-mega__panel {
    /* 3 sütun için genişletildi. 2 sütunda 9 program 5 satır yapıyor, panel
       uzayıp alt şeritteki "Sınıflarımız" ekranın altında kalıyordu; müşteri
       bu yüzden bağlantıyı hiç göremedi. 3 sütunda 3 satır kalıyor. */
    width: 880px;
    max-width: calc(100vw - 48px);
    left: 50%;
    transform: translateX(-50%);
    padding: 22px 22px 18px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .13);

    /* Temanın `.nav-submenu` kuralı 400 px'te kesiyor. Program sayısı 8'e
       çıkınca panel içeriği 439 px oldu ve alt şerit görünmez oldu; üstelik
       Bootstrap'ın `overflow-hidden` sınıfı kaydırmayı da öldürdüğü için
       kırpma sessizce oluyordu (o sınıf nav-menu.php'de artık verilmiyor).
       Yükseklik ekrana göre esner; taşarsa panel kendi içinde kayar. */
    max-height: min(76vh, 620px);
    overflow-y: auto;
    overflow-x: hidden;
  }

  /* Temadaki açılış animasyonu translateX'i ezmesin diye ortalama korunur */
  .oi-mega > .oi-mega__panel.nav-submenu { transform: translateX(-50%); }

  .oi-mega__govde { display: block; }

  .oi-mega__baslik {
    display: block;
    font-family: var(--oi-menu-font);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--main-600);
    margin-bottom: 14px;
  }

  .oi-mega__izgara {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px 8px;
  }

  /* Dar ekranda 3 sütun sıkışır, 2'ye düşer */
  @media (max-width: 1399.98px) {
    .oi-mega > .oi-mega__panel { width: 620px; }
    .oi-mega__izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  .oi-mega__kart {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 10px;
    border-radius: 14px;
    text-decoration: none;
    transition: background-color .2s ease, transform .2s ease;
  }

  .oi-mega__kart:hover {
    background: var(--main-50, #FEF3E8);
    transform: translateY(-2px);
  }

  .oi-mega__gorsel {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--main-two-200, #FBEBC6);
  }

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

  .oi-mega__metin { min-width: 0; }

  .oi-mega__ad {
    display: block;
    font-weight: 700;
    font-size: 15px;
    line-height: 1.3;
    color: var(--neutral-950);
  }

  .oi-mega__kart:hover .oi-mega__ad { color: var(--main-600); }

  .oi-mega__yas {
    display: block;
    margin-top: 2px;
    font-size: 12.5px;
    color: var(--main-600);
  }

  .oi-mega__tumu {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px dashed rgba(0, 0, 0, .12);
    width: 100%;
    font-weight: 700;
    font-size: 14.5px;
    color: var(--main-600);
    text-decoration: none;
  }

  .oi-mega__tumu i { transition: transform .2s ease; }
  .oi-mega__tumu:hover i { transform: translateX(4px); }

  /* Panelin alt şeridi iki bağlantı taşıyor (Tüm Programlar + Sınıflarımız).
     Ayırıcı çizgi ve üst boşluk artık şeridin kendisinde; `oi-mega__tumu`
     tek başınayken taşıdığı `width:100%` + `border-top` burada sıfırlanır,
     yoksa iki bağlantı arasında ikinci bir çizgi çıkıyor. */
  .oi-mega__alt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px dashed rgba(0, 0, 0, .12);
  }

  .oi-mega__alt .oi-mega__tumu {
    width: auto;
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
  }

  /* Sınıflarımız ikincil eylem: aynı punto, hap biçimli sakin zemin —
     "Tüm Programları Görün" birincil bağlantı olarak öne çıkmayı sürdürür. */
  .oi-mega__yan {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border-radius: 999px;
    background: var(--main-two-100, #FDF6E3);
    font-weight: 700;
    font-size: 14px;
    line-height: 1.2;
    white-space: nowrap;
    color: var(--neutral-950);
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease;
  }

  .oi-mega__yan i { color: var(--main-600); transition: color .2s ease; }
  .oi-mega__yan:hover { background: var(--main-600); color: #fff; }
  .oi-mega__yan:hover i { color: #fff; }
}

/* ---------------------------------------------------------------------
   17) TASARIM KÜNYESİ (footer alt şeridi)
   Yasal bağlantılar Hızlı Bağlantılar sütununa taşındıktan sonra bu şeritte
   yalnızca telif ve künye kaldı; künye artık kalabalıkta kaybolmuyor.
   --------------------------------------------------------------------- */
/* Sadece logo basılır. Yanına "Tasarım & Yazılım" etiketi konduğunda logo
   zaten iki satırlı (işaret + yazı + alt yazı) olduğu için hizalar tutmuyor
   ve şerit dağınık görünüyordu; bilgi `title` ve `alt` metninde duruyor. */
.oi-kunye {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  opacity: .78;
  transition: opacity .25s ease, transform .25s ease;
}

.oi-kunye:hover { opacity: 1; transform: translateY(-1px); }

.oi-kunye__logo {
  height: 38px;
  width: auto;
  display: block;
}

/* ---------------------------------------------------------------------
   13) YAZDIRMA
   --------------------------------------------------------------------- */
@media print {
  .oi-float, .oi-mobilbar, .header, .footer, .progress-wrap,
  .mobile-menu, .search_popup, .loader-mask, .cursor, .dot { display: none !important; }
  body { padding-bottom: 0; }
}