/* ======================================================================
   MARMARA AKADEMİ CİMNASTİK — Unified CSS (commented)
   Açıklamalar: her blok/özellik üstünde kısaca ne yaptığını ve kapsamını belirtiyor
   ====================================================================== */


/* =========================
   [GLOBAL] Lazy bg optimizasyon
   İlk 3/4 elementor konteyner dışında arka plan görsellerini yükleme
   ========================= */

/* 0) 4. ve sonrası konteynerlerde (yüksek sayfalarda) bg-image kapat */
.e-con.e-parent:nth-of-type(n+4):not(.e-lazyloaded):not(.e-no-lazyload),
/* 0.1) Aynı kural: içteki çocuklar için de kapat */
.e-con.e-parent:nth-of-type(n+4):not(.e-lazyloaded):not(.e-no-lazyload) *{
  /* arka plan görselini kapatır (performans) */
  background-image:none !important;
}

/* 0.2) Ekran yüksekliği 1024px ve altı: 3. ve sonrasında kapat */
@media (max-height:1024px){
  /* 3. ve sonrası kapalı */
  .e-con.e-parent:nth-of-type(n+3):not(.e-lazyloaded):not(.e-no-lazyload),
  .e-con.e-parent:nth-of-type(n+3):not(.e-lazyloaded):not(.e-no-lazyload) *{
    background-image:none !important;
  }
}

/* 0.3) Ekran yüksekliği 640px ve altı: 2. ve sonrasında kapat */
@media (max-height:640px){
  /* 2. ve sonrası kapalı */
  .e-con.e-parent:nth-of-type(n+2):not(.e-lazyloaded):not(.e-no-lazyload),
  .e-con.e-parent:nth-of-type(n+2):not(.e-lazyloaded):not(.e-no-lazyload) *{
    background-image:none !important;
  }
}


/* =========================
   [PAGE-SPECIFIC] Sayfa başlığı hizası
   Sadece: page-id-12525 ve page-id-12601
   ========================= */

/* 1) H1’i ortala (iki sayfada) */
.page-id-12525 .page-title-center h1,
.page-id-12601 .page-title-center h1{
  /* başlığı ortalar ve üst/alt marjı sıfırlar */
  text-align:center; 
  margin:0;
}

/* 1.1) Breadcrumb listesini ortala (iki sayfada) */
.page-id-12525 .page-title-center ul,
.page-id-12601 .page-title-center ul{
  /* otomatik merkez + tablo gibi ortalama tekniği */
  margin:auto; 
  display:table;
}


/* =========================
   [GLOBAL] Sidebar link durumları
   ========================= */

/* 2) Aktif sidebar öğesi: lacivert zemin, beyaz yazı */
.sidebar aside ul li.active > a{ 
  background:#001b44 !important; 
  color:#fff !important; 
}

/* 2.1) Hover’da (erken kural): açık lacivert zemin, beyaz yazı
   Not: Aşağıda “sarı hover” kuralı da var; o kural bu satırı ezer. */
.sidebar aside ul li > a:hover{ 
  background:#002b7f !important; 
  color:#fff !important; 
}


/* =========================
   [COMPONENT] DataTables: “Kurallar” tablosu teması
   Kullanım: kurallar sayfası ve tablo bileşenleri
   ========================= */

/* 3) Thead başlıkları: koyu lacivert arka plan */
div#kurallar > table thead th,
table.page-tablo thead th,
table#kurallar thead th{
  background:#001b44 !important; 
  color:#fff !important; 
  border:0 !important;
}

/* 3.1) Sıralama / hover anında daha açık lacivert */
div#kurallar > table thead th.sorting:hover,
div#kurallar > table thead th.sorting_asc,
div#kurallar > table thead th.sorting_desc,
table#kurallar thead th.sorting:hover,
table#kurallar thead th.sorting_asc,
table#kurallar thead th.sorting_desc{
  background:#002b7f !important;
}

/* 3.2) Başlık ilk/son hücrede köşe yuvarla */
div#kurallar > table thead th:first-child{ border-top-left-radius:10px; }
div#kurallar > table thead th:last-child{  border-top-right-radius:10px; }

/* 3.3) Thead içi arama input stil */
div#kurallar > table thead th input.myInputkurallar{
  background:#fff; 
  color:#001b44; 
  border:1px solid #001b44; 
  border-radius:6px;
  padding:6px 10px; 
  height:32px;
}

/* 3.4) Placeholder rengi */
div#kurallar > table thead th input.myInputkurallar::placeholder{ color:#6b7a99; }

/* 3.5) Sayfalama: aktif buton lacivert */
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover{
  background:#001b44 !important; 
  color:#fff !important; 
  border:1px solid #001b44 !important;
}

/* 3.6) Sayfalama hover: açık lacivert */
.dataTables_wrapper .dataTables_paginate .paginate_button:hover{
  background:#002b7f !important; 
  color:#fff !important; 
  border:1px solid #002b7f !important;
}

/* 3.7) Satır hover: hafif gri arka plan */
.page-tablo tbody tr:hover td{ background:#f5f7fb; }


/* =========================
   [GLOBAL HEADER] Logo ölçüleri
   ========================= */

/* 4) Logo kapsayıcısı: hizalama */
#head .logo a{ 
  display:flex; 
  align-items:center; 
  gap:8px; 
}

/* 4.1) Masaüstünde normal ve sticky logo yüksekliği */
@media (min-width:769px){
  #head .logo img.normal-logo,
  #head .logo img.sticky-logo{
    height:110px; 
    max-height:110px; 
    width:auto;
  }
}

/* 4.2) Tablet/mobil normal logo yüksekliği */
@media (max-width:768px){
  #head .logo img.mobil-menu{
    height:84px; 
    max-height:84px; 
    width:auto;
  }
}

/* 4.3) Çok küçük ekranlarda logo biraz küçült */
@media (max-width:380px){
  #head .logo img.mobil-menu{
    height:74px; 
    max-height:74px;
  }
}


/* =========================
   [GLOBAL / MOBILE] Branş butonları
   ========================= */

/* 5) Mobilde branş rozetlerini bir tık büyüt & vurgu sarı */
@media (max-width:768px){
  .left-menu .menu .sub-menu li a span{
    background:#F4C300 !important; 
    color:#001B44 !important; 
    font-weight:600 !important;
    font-size:12px !important; 
    padding:7px 14px !important; 
    border-radius:24px !important;
    display:inline-block; 
    margin-top:6px !important; 
    box-shadow:0 2px 4px rgba(0,0,0,.2);
    transition:all .2s ease-in-out;
  }
  /* 5.1) Hover’da biraz büyüt + daha parlak sarı */
  .left-menu .menu .sub-menu li a:hover span{
    background:#FFD500 !important; 
    transform:scale(1.03);
  }
  /* 5.2) Görsel radius ve alt boşluk */
  .left-menu .menu .sub-menu li a img{
    margin-bottom:5px !important; 
    border-radius:8px !important;
  }
}


/* =========================
   [GLOBAL / MOBILE] Tipografi küçültmeleri
   ========================= */

/* 6) Mobilde menü ve yazıları bir tık küçült */
@media (max-width:768px){
  .left-menu nav .menu > li > a{ 
    font-size:13px !important; 
    line-height:1.2 !important; 
  }
  .left-menu .menu .sub-menu li a span{ 
    font-size:11px !important; 
    padding:6px 12px !important; 
    border-radius:20px !important; 
  }
  .sosyalmenu .menu .chip{ 
    font-size:11.5px !important; 
    padding:7px 10px !important; 
  }
  .sosyalmenu .menu .chip i{ 
    width:24px !important; 
    height:24px !important; 
    font-size:13px !important; 
  }
  .left-copyright p{ font-size:11px !important; }
  #head nav ul.menu > li > a{ font-size:13px !important; }
  .page-title-center h1{ font-size:20px !important; }
}


/* =========================
   [GLOBAL / MOBILE] Menü oku & alt çizgi
   ========================= */

/* 7) Mobilde açılır ok simgesini ve alt çizgileri kaldır */
@media (max-width:768px){
  .left-menu nav .menu > li.menu-item-has-children > a::after{ content:none !important; }
  .left-menu nav .menu > li > a,
  .left-menu nav .menu > li > a:hover,
  .left-menu nav .menu > li > a:focus{
    text-decoration:none !important; 
    border-bottom:none !important;
  }
}


/* =========================
   [GLOBAL] Sol menü sosyal alan boşluğu
   ========================= */

/* 8) Sosyal kısım: menüye yaklaştır (negatif margin-top) */
.left-menu .sosyalmenu{ 
  margin-top:-85px !important; /* Not: tasarıma göre -105/-44 denenebilir */
}


/* =========================
   [COMPONENT] Sosyal “chip” butonları
   ========================= */

/* 9) Liste düzeni: dikey, aralıklı */
.sosyalmenu .menu{
  display:flex; 
  flex-direction:column; 
  gap:10px; 
  padding:0; 
  margin:0; 
  list-style:none;
}

/* 9.1) Chip’lerin temel görünümü */
.sosyalmenu .menu .chip{
  display:flex; 
  align-items:center; 
  gap:10px; 
  padding:8px 12px; 
  border-radius:14px;
  color:#fff; 
  font-weight:700; 
  font-size:13px; 
  text-decoration:none;
  box-shadow:0 6px 14px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.12);
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

/* 9.2) Chip içi ikonlar */
.sosyalmenu .menu .chip i{
  width:28px; 
  height:28px; 
  border-radius:50%;
  display:flex; 
  align-items:center; 
  justify-content:center; 
  font-size:15px;
  background:rgba(255,255,255,.14);
}

/* 9.3) Instagram gradyanı */
.chip-insta{ 
  background:linear-gradient(135deg,#f58529 0%,#dd2a7b 45%,#8134af 75%,#515bd4 100%); 
}

/* 9.4) WhatsApp yeşili */
.chip-wp{ background:#25D366; }

/* 9.5) Telefon laciverti */
.chip-phone{ background:#001B44; }

/* 9.6) Chip hover/focus animasyonu */
.sosyalmenu .menu .chip:hover,
.sosyalmenu .menu .chip:focus{
  transform:translateY(-1px); 
  box-shadow:0 10px 18px rgba(0,0,0,.16); 
  filter:brightness(.98);
}

/* 9.7) Çok küçük ekranlarda kompakt chip */
@media (max-width:480px){
  .sosyalmenu .menu .chip{ 
    padding:7px 10px; 
    font-size:12px; 
    border-radius:12px; 
  }
  .sosyalmenu .menu .chip i{ 
    width:24px; 
    height:24px; 
    font-size:13px; 
  }
}


/* =========================
   [COMPONENT] WhatsApp/Telefon modal
   ========================= */

/* 10) Modal arkaplan: tam ekran, blur ve en üst z-index */
.wp-branch-modal{
  display:none; 
  position:fixed; 
  inset:0;
  background:rgba(0,0,0,.6); 
  backdrop-filter:blur(3px);
  z-index:2147483647 !important; /* üstte kalsın */
}

/* 10.1) Modal içerik kutusu */
.wp-branch-modal__content{
  position:relative; 
  width:min(90vw,520px); 
  margin:6vh auto; 
  background:#fff;
  border-radius:12px; 
  padding:18px 20px; 
  text-align:center;
  box-shadow:0 10px 30px rgba(0,0,0,.2);
}

/* 10.2) Kapat butonu (X) */
.wp-branch-modal__close{
  position:absolute; 
  top:10px; 
  right:14px; 
  border:0; 
  background:#eee; 
  color:#333;
  width:30px; 
  height:30px; 
  border-radius:8px; 
  font-size:18px; 
  line-height:30px; 
  cursor:pointer;
}

/* 10.3) Kapat butonu hover */
.wp-branch-modal__close:hover{ background:#ddd; }

/* 10.4) Şube butonları (buton/link) */
.wp-branch-modal__btn{
  -webkit-appearance:none; 
  appearance:none; 
  border:1px solid #e5e7eb; 
  outline:0;
  display:inline-flex; 
  align-items:center; 
  justify-content:center; 
  gap:8px;
  margin:6px 6px 0 0; 
  padding:10px 14px; 
  border-radius:10px; 
  background:#f8fafc;
  font-weight:700; 
  font-size:13.5px; 
  color:#111; 
  cursor:pointer; 
  text-decoration:none;
}

/* 10.5) Buton hover */
.wp-branch-modal__btn:hover{ background:#eef2f7; }

/* 10.6) Link gibi davranan buton */
.wp-branch-modal__btn.as-link{ display:flex; }

/* 10.7) Küçük ekran optimizasyonu */
@media (max-width:560px){
  .wp-branch-modal__content{ 
    margin:10vh 14px; 
    padding:16px; 
  }
  .wp-branch-modal__btn{ width:100%; }
}


/* =========================
   [COMPONENT] TCF Yeterlilik mini rozet
   ========================= */

/* 11) Menüde küçük rozet: kapsayıcı */
.tcf-yeterlilik-mini{ 
  list-style:none; 
  margin-left:10px; 
}

/* 11.1) Rozetin görünümü: lacivert gradyan + sarı vurgu */
.tcf-badge-static{
  display:inline-flex; 
  align-items:center; 
  gap:6px; 
  padding:6px 10px; 
  border-radius:9999px;
  font-size:12px; 
  font-weight:500; 
  line-height:1.2;
  background:linear-gradient(180deg,#001b44 25%,#002b7f 95%); 
  color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 3px 6px rgba(0,0,0,.25);
  border:1px solid rgba(255,204,51,.6); 
  white-space:nowrap;
}

/* 11.2) “Yeterlilik” kelimesini sarı vurgula */
.tcf-badge-static strong{ 
  color:#ffcc33; 
  font-weight:600; 
}

/* 11.3) Küçük kalkan/ikon rengi */
.tcf-ikon{ 
  color:#ffcc33; 
  flex:0 0 auto; 
}

/* 11.4) Rozet link değil; imleci normal tut */
.tcf-badge-static:hover{ cursor:default; }

/* 11.5) Mobilde rozet daha kompakt */
@media (max-width:768px){
  .tcf-badge-static{ 
    padding:4px 8px; 
    font-size:11px; 
    gap:4px; 
  }
  .tcf-ikon{ width:12px; height:12px; }
}


/* =========================
   [GLOBAL HEADER] Üst bant/şerit gradyanı
   ========================= */

/* 12) Hero/slider alanı için lacivert→sarı şerit */
.home-slider-alan{
  width:100%; 
  height:auto; 
  padding:150px 0 180px;
  background:linear-gradient(180deg,#001b44 25%,#002b7f 96%,#f9cd00 96%,#f9cd00 100%);
  position:relative;
}


/* =========================
   [GLOBAL NAV] Hover renkleri
   ========================= */

/* 13) Alt menü ve sidebar hover: TCF sarısı (Bu kural, yukarıdaki lacivert hover’ı ezer) */
#head nav ul.sub-menu li > a:hover,
#head nav ul.sub-menu li > a:focus,
/* not: buradaki .sidebar hover sarı yapar */
.sidebar aside ul li > a:hover{
  background:#FFCC33 !important; 
  color:#001b44 !important;
}

/* 13.1) Ana menü öğesi hover: metin rengi sarı */
#head nav ul.menu > li > a:hover,
#head nav ul.menu > li:hover > a,
#head nav ul.menu > li > a:focus{
  color:#FFCC33 !important;
}


/* =========================
   [GLOBAL NAV] Mega menü chip etiketleri
   ========================= */

/* 14) Mega menü etiketleri: normalde beyaz kapsül */
#head nav ul.sub-menu li a span,
.megamenu .sub-menu li a span{
  background:#fff !important; 
  color:#001B44 !important; 
  border:1px solid rgba(0,27,68,.15) !important;
  font-weight:700; 
  border-radius:9999px; 
  box-shadow:0 4px 10px rgba(0,0,0,.08);
  transition:background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}

/* 14.1) Hover’daki etiket: sarı kapsül */
#head nav ul.sub-menu li a:hover span,
#head nav ul.sub-menu li a:focus span,
.megamenu .sub-menu li a:hover span,
.megamenu .sub-menu li a:focus span{
  background:#FFCC33 !important; 
  color:#001B44 !important; 
  border-color:#FFCC33 !important;
  transform:translateY(-1px);
}


/* =========================
   [GLOBAL] Page Title & Motto
   DİKKAT: Bu blokta “halkalar” için bir ::before tanımı var.
           Arka plan görseli tanımlanmadığı için görsel çıkmaz (sadece konum/size var).
           Mobilde ayrıca bir yerde display:none ile kapatılıyor.
   ========================= */

/* 15) Başlık kapsayıcıları: üstte kalma ve taşma kontrolü */
.page-title{ 
  position:relative; 
  overflow:visible; 
}
.page-title-center{ 
  position:relative; 
  z-index:2; 
}

/* 15.1) (Masaüstü) Halkalar için pseudo elemana yer (img eklenmemiş) */
.page-title::before{
  /* pseudo element oluşturur */
  content:""; 
  position:absolute; 
  inset:0; 
  z-index:0; 
  pointer-events:none;
  /* saydamlık & blend efekti */
  opacity:.12; 
  mix-blend-mode:screen;
  /* ÖNEMLİ: arka plan resmi verilmemiş; sadece yerleşim var.
     İleride eklenecekse: background-image:url(...); */
  background:
    no-repeat center calc(100% - 26px) / 560px auto
    /* ← burada bir resim olmadığından görsel görünmez, sadece kurallar parse edilir */;
}

/* 15.2) Motto rozeti/metni: sağda dikey iki satır */
.page-title .motto-right{
  position:absolute; 
  top:50%; 
  right:36px; 
  transform:translateY(-50%);
  display:inline-flex; 
  flex-direction:column; 
  align-items:center; 
  gap:6px;
  z-index:3; 
  pointer-events:none; /* arkadaki linkler tıklanabilsin */
}

/* 15.3) Üst satır: beyaz “HEDEF OLİMPİYAT” */
.page-title .motto-right .sub{
  font:800 18px/1.15 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  text-transform:uppercase; 
  letter-spacing:.45px; 
  color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.45);
}

/* 15.4) Alt satır: sarı motto metni */
.page-title .motto-right .motto-text{
  font:700 15px/1.1 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:#F9DA64; 
  letter-spacing:.2px; 
  text-transform:none;
  text-shadow:0 1px 2px rgba(0,0,0,.35);
}

/* 15.5) İsteğe bağlı: küçük halkalar (SVG bg) */
.page-title .motto-right .rings{
  position:absolute; 
  left:50%; 
  top:-6px; 
  transform:translate(-50%,-100%);
  width:120px; 
  height:42px; 
  opacity:.6; 
  pointer-events:none;
  background:center/contain no-repeat url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='84' viewBox='0 0 240 84' fill='none' stroke-width='6'><circle cx='48' cy='42' r='27' stroke='%230085C7'/><circle cx='96' cy='42' r='27' stroke='%23000000'/><circle cx='144' cy='42' r='27' stroke='%23DF0024'/><circle cx='72' cy='69' r='27' stroke='%23F4C300'/><circle cx='120' cy='69' r='27' stroke='%23009F3D'/></svg>");
}


/* =========================
   [GLOBAL / MOBILE] Page Title & Motto mobil ayarları
   ========================= */

/* 15.6) Mobil paddings, motto konumu ve başlık rengi/boyutu */
@media (max-width:768px){
  .page-title{ 
    padding:60px 16px 60px !important; 
    min-height:300px !important; 
  }
  /* Not: burada ::before için konum/size ayarlıyorsun,
     ancak altta 767px blokta tamamen display:none yapılıyor */
  .page-title::before{
    background-position:center center !important;
    background-size:min(68vw,340px) auto !important;
    opacity:.14 !important;
  }
  .page-title .motto-right{
    position:static; 
    transform:none; 
    margin-top:8px; 
    text-align:center; 
    pointer-events:none;
  }
  .page-title .motto-right .sub{ font-size:16px; }
  .page-title .motto-right .motto-text{ font-size:13.5px; }
  .page-title-center{ width:100% !important; }
  .page-title-center h1{
    color:#FFCC33 !important; 
    font-size:22px !important; 
    font-weight:800 !important; 
    margin-bottom:6px !important;
  }
  .page-title-center ul{ margin-top:4px !important; }
}


/* =========================
   [GLOBAL / MOBILE] Sol menü gradyanı ve hover
   ========================= */

/* 16) Mobilde sol menüye lacivert→sarı gradyan ver; linkleri beyaz göster */
@media (max-width:768px){
  .left-menu{
    background:linear-gradient(180deg,#001B44 0%,#002B7F 35%,#FFD500 100%) !important;
    color:#fff;
  }
  .left-menu nav .menu > li > a{
    color:#fff !important; 
    border-bottom:1px solid rgba(255,255,255,.25); 
    transition:all .3s ease;
  }
  .left-menu nav .menu > li > a:hover{
    background:#FFCC00 !important; 
    color:#001B44 !important; 
    font-weight:700;
  }
  .left-menu nav .menu > li.menu-item-has-children > a::after{
    content:"\f107"; 
    font-family:"Font Awesome 5 Free"; 
    font-weight:900; 
    margin-left:8px; 
    color:#FFCC00;
  }
  .left-menu nav .menu > li.menu-item-has-children:hover > a::after{ color:#001B44; }
  .left-copyright p{ color:rgba(255,255,255,.85); }
}


/* =========================
   [GLOBAL A11Y] Reduce motion
   ========================= */

/* 17) Hareketi azalt tercihinde animasyon/geçişleri kapat */
@media (prefers-reduced-motion:reduce){
  *{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition:none !important;
    scroll-behavior:auto !important;
  }
}


/* =========================
   [GLOBAL / MOBILE-STRICT] 767px ve altı
   Bu blok halkaları tamamen gizler (display:none).
   ========================= */

@media (max-width: 767px){

  /* 18) Arka plan halkalarını tamamen kapat */
  .page-title::before {
    display: none !important;
  }

  /* 18.1) Başlık alanı padding ve overflow düzeni */
  .page-title {
    position: relative !important;
    padding: 60px 16px 100px !important;  /* üst kısmı biraz kısa */
    min-height: 300px !important;
    overflow: visible !important;
  }

  /* 18.2) Motto’yu ortada konumla (absolute) */
  .page-title .motto-right {
    position: absolute !important;
    top: 36% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    text-align: center !important;
    z-index: 2 !important;
  }

  /* 18.3) Motto üst satır stil */
  .page-title .motto-right .sub {
    font-weight: 800 !important;
    font-size: 18px !important;
    color: #fff !important;
  }

  /* 18.4) Motto alt satır stil */
  .page-title .motto-right .motto-text {
    font-weight: 700 !important;
    font-size: 14px !important;
    color: #F9DA64 !important;
  }

  /* 18.5) H1 ve breadcrumb’ı biraz yukarı al */
  .page-title-center {
    position: static !important;
    margin-top: 140px !important; 
    text-align: left !important;
    width: 100% !important;
    z-index: 3 !important;
  }

  /* 18.6) Mobil H1 boyutu ve rengi */
  .page-title-center h1 {
    font-size: 26px !important;
    margin-bottom: 6px !important;
    color: #fff !important;
  }

  /* 18.7) Breadcrumb üst marj */
  .page-title-center ul {
    margin-top: 4px !important;
  }
}