/* ==========================================================================
   ÜMMÜ KUMRU — siteye özel düzeltmeler / eklemeler
   Tema dosyalarını (main.css vb.) DEĞİŞTİRMEYİN; override'lar bu dosyaya yazılır,
   böylece tema güncellenirse değişikliklerimiz kaybolmaz.
   Bu dosya head'de main.css'ten SONRA yüklenmelidir.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) HİZMET KARTLARI (ilk 4) — gradyan renkleri

   Tema varsayılanı: normalde koyu lacivert (#1F2432), üzerine gelince
   turuncu (#fe8235). Kurum rengimize çekiliyor:
     - normal  : #003f5e (koyu mavi)
     - :hover  : siyah
   Gradyanlar iki katmandan geliyor — `::before` her zaman görünür,
   `::after` yalnızca hover'da (opacity 0 → 1). Renk geçişinin üst ucu
   şeffaf kalmalı, yoksa görselin tamamı boyanır.

   Yükseklik: tema 60% (before) / 50% (after) kullanıyordu — gradyan görselin
   çok yukarısına çıkıyordu. 40%'a çekildi. İkisi eşit olduğu için hover'da
   siyah, maviyi tam olarak örtüyor (arada mavi bant kalmıyor).
   -------------------------------------------------------------------------- */
/* max(): dar ekranlarda kart kısaldığı için salt yüzde yetmiyor, uzun başlık
   gradyanın dışına taşıp çıplak fotoğrafın üstünde okunmaz hale geliyordu.
   Piksel tabanı bunu engelliyor. */
.it-team-2-item::before {
    height: max(40%, 130px);
    background: linear-gradient(180deg, rgba(0, 63, 94, 0) 0%, #003f5e 100%);
}

.it-team-2-item::after {
    height: max(40%, 130px);
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
}

/* dar ekranda 24px başlık 4 satıra sarıyordu — küçültülüp satır sayısı düşürüldü */
@media (max-width: 767px) {
    .it-team-2-title {
        font-size: 18px;
    }
}

/* --------------------------------------------------------------------------
   2) HİZMET KARTLARI (alttaki 9) — koyu arka plan katmanı

   Bölümün koyu arka planı `.it-testimonial-2-shape-4` adlı mutlak konumlu bir
   görsel ve tema yüksekliğini %59'a sabitlemiş (dar ekranlarda %40). Tema bu
   bölümde kısa bir yorum kaydırıcısı kullandığı için o oran yetiyordu; biz
   yerine 9 kartlık grid koyunca bölüm uzadı ve katman kartların ortasında
   bitip alt sıra açıkta kalıyordu.

   Tema görseli (morumsu bir JPG) kaldırıldı; yerine bölümün kendisine çok
   katmanlı bir "mesh" gradyan verildi. Böylece katman her zaman bölümün
   tamamını kaplar (yükseklik sorunu tümden ortadan kalkar) ve bir HTTP
   isteği azalır. Palet temadan + kurum mavimizden:
     yeşil  #1AB69D (--it-theme-3), #03594E (--it-theme-1)
     mavi   #005f8f (kurum rengi, kart gradyanıyla aynı)
     siyah  #0C121D / #1F2432 (--it-common-black)
   -------------------------------------------------------------------------- */
.it-testimonial-2-shape-4 {
    display: none;
}

/* `.uk-mesh-bg`: aynı gradyan başka sayfalarda da kullanılabilsin diye ortak
   sınıf (örn. iç sayfaların breadcrumb başlığı). */
.it-testimonial-2-area,
.uk-mesh-bg {
    /* taban: maviye çalan siyah */
    background-color: #0A1420;
    /* NOT: listede önce yazılan katman ÜSTTE kalır — maviler başa alındı ki baskın olsunlar */
    background-image:
        radial-gradient(at 82% 10%, rgba(0, 119, 179, 0.72) 0px, transparent 60%),
        radial-gradient(at 20% 78%, rgba(0, 95, 143, 0.66) 0px, transparent 62%),
        radial-gradient(at 52% 42%, rgba(0, 95, 143, 0.34) 0px, transparent 64%),
        radial-gradient(at 10% 16%, rgba(26, 182, 157, 0.32) 0px, transparent 50%),
        radial-gradient(at 70% 76%, rgba(3, 89, 78, 0.40) 0px, transparent 54%),
        linear-gradient(160deg, #0A1420 0%, #14243A 55%, #0A1420 100%);
}

/* --------------------------------------------------------------------------
   1b) SLIDER — slogan boyutu ve dikey denge

   Slaytlarda yalnızca slogan var (paragraf ve buton kaldırıldı). Tema
   `.it-slider-content`'e 140px üst / 240px alt dolgu veriyordu; bu ölçü
   başlık+paragraf+buton üçlüsüne göre ayarlanmıştı, tek satır slogan kalınca
   metin yukarıda asılı kalıyordu → dolgu simetrik hale getirildi.

   Başlık 72px'ten 50px'e çekildi (%30). DİKKAT: tema başlık boyutunu
   kırılımlara göre kademeli veriyor (72/48/45/42/28). Bu dosya main.css'ten
   SONRA yüklendiği için kapsamsız bir kural tüm kırılımları ezerdi; bu yüzden
   override yalnızca temanın 72px verdiği aralığa (≥1400px) uygulanıyor.
   -------------------------------------------------------------------------- */
/* Slogan boyutu: yalnızca temanın 72px verdiği aralıkta ezilir.
   Diğer kırılımlarda temanın kendi ölçeği (48/45/42/28) korunur. */
@media (min-width: 1400px) {
    .it-slider-title {
        font-size: 50px;
    }
}

/* Yükseklik: temada slaytın yüksekliği İÇERİKTEN geliyordu (büyük üst/alt
   dolgu + başlık + paragraf + buton). Paragraf ve butonu kaldırınca slider
   yarı yarıya kısaldı; ayrıca kısa kutuda 2.13 oranındaki görsel
   `object-fit: cover` yüzünden alttan/üstten kırpılıyordu.

   Çözüm: yükseklik artık içeriğe değil EKRANA bağlı. Kutu tam ekran, slogan
   flexbox ile dikeyde ortalanıyor — böylece slogan kaç satır olursa olsun
   ortada kalır ve görsel tam ekran oranında kırpılır.
   `100svh`: mobil tarayıcılarda adres çubuğu yüzünden 100vh taşma yaratır;
   destekleyen tarayıcılar svh'yi kullanır, desteklemeyenler vh'de kalır. */
.it-slider-box {
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    align-items: center;
}

.it-slider-box > .container {
    width: 100%;
}

/* Yönlendirme: ok tuşları kaldırıldı, yerine altta ortalanmış noktalar.
   Swiper yapılandırması (slider.js) zaten `.it-slider-dots` bekliyordu ve
   `clickable:true` idi; tema o öğeyi markup'a koymamış, biz ekledik.
   Stil, temanın `.it-testimonial-dots` hap-nokta görünümünden uyarlandı;
   renkler koyu fotoğraf zeminine göre ayarlandı. */
/* flex: inline-block noktalar taban çizgisine asılıp kutunun altına taşıyor.
   Ayrıca noktalar swiper'ın içinde olduğu için Swiper'ın kendi kuralı
   `.swiper-horizontal > .swiper-pagination-bullets { bottom: 8px }` devreye
   giriyor ve daha spesifik olduğu için sade `.it-slider-dots`'u eziyordu →
   seçici `.it-slider-area` ile güçlendirildi, ayrıca Swiper'ın kendi
   değişkeni de ayarlandı. */
.it-slider-area .it-slider-dots {
    position: absolute;
    top: 50%;
    right: 45px;
    /* Swiper'ın yatay sayfalama kuralı left:0 / width:100% / bottom:8px veriyor;
       dikey yerleşim için hepsi sıfırlanmalı. */
    left: auto;
    bottom: auto;
    width: auto;
    transform: translateY(-50%);
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.it-slider-dots .swiper-pagination-bullet {
    flex: 0 0 auto;
    width: 7px;
    height: 30px;
    margin: 6px 0 !important;
    border-radius: 10px;
    opacity: 1;
    transition: 0.4s;
    background-color: rgba(255, 255, 255, 0.45);
}

.it-slider-dots .swiper-pagination-bullet:hover {
    background-color: rgba(255, 255, 255, 0.75);
}

.it-slider-dots .swiper-pagination-bullet-active {
    height: 42px;
    background-color: var(--it-theme-2);
}

/* 992px altında slogan sütunu (col-lg-9) devre dışı kalıp tam genişliğe
   çıkıyor ve metin noktaların altına giriyor → sağdan pay bırakılıyor.
   ≥992px'te sütun %75 olduğu için metin zaten noktalara ulaşmıyor. */
@media (max-width: 991px) {
    .it-slider-content {
        padding-right: 62px;
    }
}

@media (max-width: 767px) {
    /* seçici masaüstü kuralıyla aynı spesifiklikte olmalı, yoksa ezilir */
    .it-slider-area .it-slider-dots {
        right: 18px;
    }
    .it-slider-dots .swiper-pagination-bullet {
        width: 6px;
        height: 22px;
        margin: 4px 0 !important;
    }
    .it-slider-dots .swiper-pagination-bullet-active {
        height: 32px;
    }
    /* dar ekranda slogan tam genişlikte olduğu için noktaların altına giriyordu;
       metne sağdan pay bırakılıyor */
    .it-slider-content {
        padding-right: 34px;
    }
}

/* Ken Burns zoom'u (scale 1.15 → 1) görseli kutudan taşırıyor. Tema bunu
   yalnızca swiper düzeyinde kırpıyordu; kırpmayı slaytın kendi sınırına
   sabitliyoruz ki geçiş sırasında komşu slayta sızmasın. */
.it-slider-bg {
    overflow: hidden;
}

.it-slider-content {
    padding-top: 0;
    padding-bottom: 0;
}

.it-slider-content .it-slider-title {
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   1c) HAKKIMIZDA — "30 + Yıllık Eğitim Tecrübesi" rozeti

   Tema rozete sürekli sağa-sola salınan bir animasyon veriyordu
   (`ittranslateX2 4s infinite alternate`) → durduruldu, sabitlendi.
   Konum da yukarı alındı: top %12 (62px) → %5 (~26px).
   NOT: dar ekranlarda tema rozeti `position: static` yapıp görselin altına
   alıyor; oraya karışmıyoruz — `top` statik öğede etkisiz kalır.
   -------------------------------------------------------------------------- */
.it-about-2-left .it-about-experience-box {
    animation: none;
    top: 5%;
}

/* Görsel ile yazı sütunu arasındaki TOPLAM aralık 40px olacak.
   Aralık üç parçadan oluşuyordu: 15px + 15px bootstrap oluğu (iki sütunun
   kendi dolgusu) + temanın `.it-about-2-right { margin-left: 60px }` kuralı.
   Oluklar sütun ızgarasının parçası olduğu için kaldırılmıyor; geriye kalan
   10px'i marjdan veriyoruz → 15 + 15 + 10 = 40px. */
.it-about-2-right {
    margin-left: 10px;
    padding-left: 0;
}

/* Ana başlık artık kurum adı; eski başlık metni onun altında daha küçük
   bir alt başlığa dönüştü. */
.uk-about-subtitle {
    margin-top: 12px;
    margin-bottom: 0;
    font-size: 22px;
    line-height: 1.4;
    font-weight: 500;
    color: var(--it-theme-1);
}

/* dar ekranda sütunlar alt alta dizildiği için sol boşluk gereksiz */
@media (max-width: 991px) {
    /* sütunlar alt alta dizilir, yatay aralık gereksiz */
    .it-about-2-right {
        margin-left: 0;
        padding-left: 0;
    }
    .uk-about-subtitle {
        font-size: 19px;
    }
}

/* --------------------------------------------------------------------------
   1d) BÖLÜM AYIRICI (Hakkımızda ↔ Gelişim Programları)

   İki bölümün 130'ar px dolgusu arasında ~260px bomboş alan kalıyordu.
   Uçları şeffaflaşan ince bir çizgi + ortasında temanın sarısıyla küçük bir
   eşkenar dörtgen. Çizgi kabın genişliğini kullanır, ekranı bölmez.
   -------------------------------------------------------------------------- */
.uk-ayirici .container {
    display: flex;
    justify-content: center;
}

.uk-ayirici-cizgi {
    position: relative;
    display: block;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg,
        rgba(3, 89, 78, 0) 0%,
        rgba(3, 89, 78, 0.22) 22%,
        rgba(3, 89, 78, 0.22) 78%,
        rgba(3, 89, 78, 0) 100%);
}

.uk-ayirici-cizgi::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 9px;
    height: 9px;
    transform: translate(-50%, -50%) rotate(45deg);
    background-color: var(--it-theme-2);
}

/* --------------------------------------------------------------------------
   1e) ETKİNLİK KARTLARI — görselin üst köşeleri

   Kartın alt kısmı (`.it-blog-2-content`) 20px yuvarlak ama görsel kutusunun
   köşeleri kareydi. Tema `border-radius: 20px 20px 0 0` kuralını tanımlamış,
   ancak bizim markup'ta uygulanmıyor; temanın diğer sayfaları thumb'a elle
   `border-radius-20` yardımcı sınıfını ekliyor. Burada CSS ile veriyoruz.
   Kapsam `.it-blog-2-item` — bölüm sınıfı (`it-tuition-area`) galeri bölümüyle
   ortak olduğu için ona göre kapsamak yanlış olurdu.
   -------------------------------------------------------------------------- */
.it-blog-2-item .it-blog-thumb,
.it-blog-2-item .it-blog-thumb img {
    border-radius: 20px 20px 0 0;
}

/* --------------------------------------------------------------------------
   1f) HEADER / FOOTER — logo ve sosyal ikonlar

   Kurum logosu KARE (752x751); temanın slotu ise geniş logo (180x53) için
   tasarlanmış, boyut sınırı yok → yükseklikten sınırlanıyor.
   Sosyal bağlantılarda temanın SVG'leri yerine Font Awesome marka ikonları
   kullanıldı (Instagram/Facebook/WhatsApp için doğru ikonlar gerekiyordu).
   -------------------------------------------------------------------------- */
.uk-footer-logo {
    max-height: 80px;
    width: auto;
}

/* Header artık container yerine tam genişlik kullanıyor: logo (kurum adıyla
   birlikte geniş), 9 maddelik menü ve telefon butonu 1350px'lik container'a
   tek satırda sığmıyordu. Kenar boşlukları ekranla birlikte ölçekleniyor. */
.uk-header-genis {
    padding-left: 20px;
    padding-right: 20px;
}

@media (max-width: 1199px) {
    .uk-header-genis {
        padding-left: 15px;
        padding-right: 15px;
    }
}

.uk-header-logo {
    max-height: 60px;
    max-width: 100%;
    width: auto;
}

/* 1600px altında logo + 9 maddelik menü + telefon butonu tek satıra sığmıyor;
   üçü de kademeli olarak küçültülüyor (menü yine tek satırda kalıyor). */
@media (min-width: 1200px) and (max-width: 1599px) {
    .it-header-menu nav > ul > li > a {
        font-size: 14px;
    }
    .it-header-right-action .it-btn-yellow {
        padding-left: 18px;
        padding-right: 18px;
        font-size: 14px;
    }
}

/* 1200–1399: masaüstü menünün en dar aralığı. Telefon butonu yalnızca simgeye
   indiriliyor ve boşalan alan menüye aktarılıyor; böylece menü tek satırda kalır.
   (1200'ün altında tema zaten hamburger menüye geçiyor.) */
@media (min-width: 1200px) and (max-width: 1399px) {
    #header-sticky .col-xl-2:first-child {
        flex: 0 0 15%;
        max-width: 15%;
    }
    #header-sticky .col-xl-8 {
        flex: 0 0 75%;
        max-width: 75%;
    }
    #header-sticky .col-xl-2:last-child {
        flex: 0 0 10%;
        max-width: 10%;
    }
    .it-header-menu nav > ul > li > a {
        font-size: 13px;
    }
    /* buton: metin gizlenir, yalnızca telefon simgesi kalır */
    .it-header-right-action .it-btn-yellow > span:not(.uk-tel-ikon) {
        display: none;
    }
    .it-header-right-action .it-btn-yellow {
        padding-left: 15px;
        padding-right: 15px;
    }
    .uk-tel-ikon {
        margin-right: 0;
    }
}

/* Tema 5 menü öğesi için tasarlanmış; gerçek menümüzde 9 öğe var ve menü
   3 satıra sarıp başlığı 240px'e çıkarıyordu. Sütunlar yeniden dengelendi
   (nav 5→7, sağ 5→3) ve öğe aralığı biraz kısıldı. */
@media (min-width: 1200px) {
    /* ul'un varsayılan sol dolgusu (20px) menüyü 1px taşırıp satır kırıyordu */
    .it-header-menu nav > ul {
        padding-left: 0;
    }
    .it-header-menu nav > ul > li {
        margin-right: 3px;
    }
}

/* Mobilde başlıkta yalnızca logo + telefon + hamburger kalsın: üstteki siyah
   bilgi şeridi (adres, e-posta, sosyal medya) tamamen kaldırılıyor. Bu bilgiler
   zaten hamburger çekmecesinde ve footer'da mevcut. */
@media (max-width: 767px) {
    .it-header-top-area {
        display: none;
    }
    .uk-header-genis {
        padding-left: 15px;
        padding-right: 15px;
    }
    .it-header-right-action {
        gap: 10px;
    }
    .it-header-right-action .it-btn-yellow {
        padding-left: 16px;
        padding-right: 16px;
        font-size: 13px;
    }
}

/* Çok dar ekranda (küçük telefonlar) numara metni logoyu sıkıştırıyor;
   buton yalnızca simgeye iniyor, dokunma hedefi korunuyor. */
@media (max-width: 419px) {
    .it-header-right-action .it-btn-yellow > span:not(.uk-tel-ikon) {
        display: none;
    }
    .it-header-right-action .it-btn-yellow {
        padding-left: 14px;
        padding-right: 14px;
    }
    .it-header-right-action .uk-tel-ikon {
        margin-right: 0;
    }
}

/* --------------------------------------------------------------------------
   ÜST MENÜ AÇILIR LİSTESİ — hover efekti

   Tema hover'da iki şey yapıyordu:
     .submenu li a::before  -> 15px genişliğinde yeşil çizgi (ekranda "-" gibi)
     .submenu li:hover > a  -> padding-left: 20px
   20px'lik kayma 270px'lik listede uzun program adlarını 2 satıra düşürüyordu.
   Yerine: satırın tamamını kaplayan koyu yeşil zemin + beyaz yazı. Genişlik
   hover'da hiç değişmediği için sarma da olmuyor.

   Sadece masaüstü menüsünü etkiler: mobil kopya .it-menu-mobile içine
   taşınıyor ve .it-header-menu sarmalayıcısını almıyor.
   -------------------------------------------------------------------------- */
.it-header-menu nav ul li .submenu {
    padding: 14px 0;
    overflow: hidden;
}

.it-header-menu nav ul li .submenu li {
    padding: 0;
}

.it-header-menu nav ul li .submenu li:not(:last-child) {
    margin-bottom: 2px;
}

/* yatay dolgu li'den a'ya taşındı ki zemin satırın tamamını kaplasın */
.it-header-menu nav ul li .submenu li a {
    display: block;
    padding: 9px 24px;
    transition: background-color 0.25s ease, color 0.25s ease;
}

/* tire efekti kapatıldı */
.it-header-menu nav ul li .submenu li a::before {
    content: none;
}

.it-header-menu nav ul li .submenu li:hover > a {
    padding-left: 24px;            /* temanın eklediği 20px'i geri al */
    background-color: #03594E;
    color: var(--it-common-white);
}

/* Telefon butonundaki simge — metinden önce, hafif boşlukla */
.uk-tel-ikon {
    display: inline-flex;
    align-items: center;
    margin-right: 8px;
    font-size: 14px;
    line-height: 1;
}

.it-header-top-social-box a i,
.it-footer-widget-social a i {
    font-size: 15px;
    line-height: 1;
}

.it-header-top-social-box a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* --------------------------------------------------------------------------
   1g) SSS — soru sütunu ile sağdaki görsel arasındaki boşluk

   Tema `.it-faq-left`'e 83px sağ marj veriyordu; soru sütunu ile görsel
   arasında ~148px boşluk kalıyordu → 30px'e indirildi.
   -------------------------------------------------------------------------- */
.it-faq-left {
    margin-right: 30px;
}

@media (max-width: 991px) {
    /* sütunlar alt alta dizilir, yatay marj gereksiz */
    .it-faq-left {
        margin-right: 0;
    }
}

/* --------------------------------------------------------------------------
   1h) İÇ SAYFA BAŞLIĞI (breadcrumb)

   Tema bu başlık stiline 150px/155px dolgu veriyor (kurs detay sayfası için
   tasarlanmış) — iç sayfada 451px'lik dev bir blok oluyordu. Daraltıldı.
   Ayrıca mesh gradyanın üstüne temanın slider şekli eklenerek zemin
   hareketlendirildi. Şekil dekoratiftir: tıklamayı engellememeli ve
   taşmamalı, o yüzden pointer-events kapalı ve kap `overflow: hidden`.
   -------------------------------------------------------------------------- */
.it-breadcrumb-area.it-breadcrumb-course-details-4-style {
    padding-top: 95px;
    padding-bottom: 95px;
    overflow: hidden;
}

.uk-bc-shape {
    position: absolute;
    right: -3%;
    top: -32%;
    z-index: -1;
    max-width: 46%;
    opacity: 0.5;
    pointer-events: none;
}

/* Temanın noktalı deseni sol ÜSTTE ve büyüktü; sol alta alındı, küçültüldü
   ve soluklaştırıldı. `top: auto` şart — tema `top: -7%` veriyor, sıfırlanmazsa
   `bottom` ile çakışır.
   Mobil için ayrı kural yazılmadı: tema bu deseni 1200px altında zaten
   `display: none` ile gizliyor. */
.it-breadcrumb-area .it-breadcrumb-shape-1 {
    top: auto;
    bottom: -6%;
    left: -1%;
    width: 105px;
    height: auto;
    opacity: 0.35;
    pointer-events: none;
}

@media (max-width: 991px) {
    .it-breadcrumb-area.it-breadcrumb-course-details-4-style {
        padding-top: 70px;
        padding-bottom: 70px;
    }
    .uk-bc-shape {
        max-width: 70%;
        opacity: 0.35;
    }
}

/* --------------------------------------------------------------------------
   1i) GALERİ SAYFASI — 3 sütunlu mozaik + lightbox

   CSS `column-count` kullanıldı: fotoğraflar kendi doğal oranlarını koruyarak
   sütunlara akar, böylece gerçek bir mozaik oluşur (sabit oranlı hücrelerde
   fotoğraflar kırpılırdı). `break-inside: avoid` bir görselin iki sütuna
   bölünmesini engeller.
   Lightbox temanın magnific-popup'ı ile geliyor: `.popup-image` sınıfı
   main.js'te `gallery: {enabled:true}` ile başlatılıyor, yani ileri/geri
   gezinme hazır — ek bir kütüphane gerekmiyor.
   -------------------------------------------------------------------------- */
.uk-galeri-sayfa {
    column-count: 3;
    column-gap: 24px;
}

.uk-galeri-oge {
    position: relative;
    display: block;
    margin-bottom: 24px;
    overflow: hidden;
    border-radius: 20px;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
}

.uk-galeri-oge img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.6s ease;
}

.uk-galeri-oge:hover img {
    transform: scale(1.06);
}

/* üzerine gelince koyu perde + büyüteç */
.uk-galeri-ustluk {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.4s ease;
    background-color: rgba(0, 63, 94, 0.55);
    color: var(--it-common-white);
}

.uk-galeri-oge:hover .uk-galeri-ustluk {
    opacity: 1;
}

@media (max-width: 991px) {
    .uk-galeri-sayfa {
        column-count: 2;
        column-gap: 18px;
    }
    .uk-galeri-oge {
        margin-bottom: 18px;
    }
}

@media (max-width: 575px) {
    .uk-galeri-sayfa {
        column-count: 1;
    }
}

/* --------------------------------------------------------------------------
   1i-2) HAKKIMIZDA — anasayfa bölümünün altındaki devam metni
   -------------------------------------------------------------------------- */
.uk-hakkimizda-metin p {
    margin-bottom: 24px;
    font-size: 17px;
    line-height: 1.85;
}

.uk-hakkimizda-metin p:last-child {
    margin-bottom: 0;
}

@media (max-width: 767px) {
    .uk-hakkimizda-metin p {
        margin-bottom: 20px;
        font-size: 16px;
        line-height: 1.8;
    }
}

/* --------------------------------------------------------------------------
   1i-3) ETKİNLİKLER — yıl / ay filtresi + blog ızgarası

   Kartlar temanın blog-grid yapısı (.it-blog-item). Etkinlik fotoğrafları
   farklı en-boy oranlarında geldiği için görselleri sabit orana kırpıyoruz;
   aksi halde ızgara satırları kayıyor.
   Select'ler main.js tarafından nice-select'e çevriliyor, o yüzden hem
   .nice-select hem de ham <select> için kural yazıldı.
   -------------------------------------------------------------------------- */
.uk-etkinlik-filtre {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 20px;
    margin-bottom: 55px;
    padding: 24px 26px;
    border: 1px solid rgba(3, 89, 78, 0.14);
    border-radius: 16px;
    background-color: var(--it-common-white);
}

.uk-etkinlik-filtre-alan {
    flex: 0 0 auto;
    min-width: 190px;
}

.uk-etkinlik-filtre-alan label {
    display: block;
    margin-bottom: 8px;
    font-family: var(--it-ff-heading);
    font-size: 15px;
    color: var(--it-common-black);
}

/* Temanın nice-select.css'i `.nice-select`e `position: relative`i yalnızca
   `.it-contact-select` kapsamında veriyor. Bizim filtremiz o kapsayıcının
   içinde olmadığı için kutu `static` kalıyordu; açılan liste (position:
   absolute) konumunu ve `width:100%`ünü en yakın konumlu ataya — yani
   <section>'a — göre hesaplayıp 1069px genişlikte, sağa kaymış halde,
   alakasız bir yerde açılıyordu. Kullanıcıya "değer yok" gibi görünüyordu. */
.nice-select {
    position: relative;
}

.uk-etkinlik-filtre-alan .nice-select,
.uk-etkinlik-filtre-alan select {
    width: 100%;
    height: 50px;
    line-height: 48px;
    padding-left: 18px;
    padding-right: 40px;
    border: 1px solid rgba(3, 89, 78, 0.2);
    border-radius: 100px;
    background-color: var(--it-common-white);
    font-size: 15px;
}

/* Liste kutu genişliğinde açılsın; uzun ay adları sığmazsa büyüyebilsin. */
.uk-etkinlik-filtre-alan .nice-select .list {
    left: 0;
    right: auto;
    width: 100%;
    min-width: 100%;
    border-radius: 12px;
}

/* sayaç, filtrenin sağ ucuna itiliyor */
.uk-etkinlik-sayi {
    margin: 0 0 14px auto;
    font-size: 15px;
    color: var(--it-text-body);
}

.uk-etkinlik-sayi strong {
    color: var(--it-common-black);
}

/* Kart görseli de detay sayfasına link; <a> blok olmazsa görsel taşıyor. */
.uk-etkinlik-kapak {
    display: block;
    overflow: hidden;
}

.uk-etkinlik-oge .it-blog-thumb img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.uk-etkinlik-kapak:hover img {
    transform: scale(1.05);
}

.uk-etkinlik-oge .it-blog-title {
    font-size: 20px;
    line-height: 1.4;
}

.uk-etkinlik-bos {
    padding: 40px 0;
    text-align: center;
    color: var(--it-text-body);
}

@media (max-width: 767px) {
    .uk-etkinlik-filtre {
        gap: 16px;
        padding: 20px;
        margin-bottom: 40px;
    }
    .uk-etkinlik-filtre-alan {
        flex: 1 1 100%;
        min-width: 0;
    }
    .uk-etkinlik-sayi {
        margin: 0;
        flex: 1 1 100%;
    }
}

/* --------------------------------------------------------------------------
   1i-4) ETKİNLİK DETAY — sol sütun (son etkinlikler + etiketler) ve foto ızgarası
   -------------------------------------------------------------------------- */

/* Son etkinlik küçük görselleri de sabit orana kırpılıyor; kayıtlardan gelen
   fotoğraflar dikey/yatay karışık. */
.sidebar-widget-post .rc-post-thumb img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: 14px;
}

.sidebar-widget-post .rc-post-title {
    font-size: 17px;
    line-height: 1.45;
}

/* Etiketler veritabanında virgülle ayrılmış tek alan; uzun etiketler de var,
   o yüzden sarmalıyorlar. */
.tagcloud a {
    max-width: 100%;
    white-space: normal;
}

/* Ana etkinlik başlığı (büyük görselin altındaki). Tema 36px veriyor,
   uzun etkinlik adlarında fazla yer kaplıyordu. `>` ile sadece bu başlık
   hedefleniyor; galeri başlığı .uk-etkinlik-galeri içinde kalıyor. */
.postbox-content-box > .it-section-title {
    font-size: 30px;
    line-height: 1.35;
}

/* Foto başlığı ana etkinlik başlığıyla aynı boydaydı; sol sütun
   başlıklarıyla aynı seviyeye çekildi ki alt başlık olduğu anlaşılsın. */
.uk-etkinlik-galeri .it-section-title {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 12px;
    font-size: 24px;
    line-height: 1.4;
}

.uk-foto-adet {
    font-family: var(--it-ff-body);
    font-size: 15px;
    font-weight: 400;
    color: var(--it-text-body);
}

.uk-etkinlik-foto {
    display: block;
    overflow: hidden;
}

.uk-etkinlik-foto img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform 0.4s;
}

.uk-etkinlik-foto:hover img {
    transform: scale(1.05);
}

/* Sadece etkinlik detayında: kapak fotoğrafları farklı oranlarda geliyor,
   sabit orana kırpılıyor. Destek eğitim konularında bu kural GEÇERLİ DEĞİL —
   oradaki görseller şema/tablo içerebiliyor, kırpmak bilgi kaybettirir. */
.it-blog-details-area .postbox-main-thumb img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

@media (max-width: 767px) {
    .postbox-content-box > .it-section-title {
        font-size: 24px;
    }
    .uk-etkinlik-galeri .it-section-title {
        gap: 8px;
        font-size: 20px;
    }
}

/* --------------------------------------------------------------------------
   1i-5) DESTEK EĞİTİM PROGRAMLARI — sol program listesi + sağ konu listesi

   Temanın kurs ızgarası (it-course-style-2) kullanıldı. Konuların kendi
   görsel alanı yok; küçük resim `icerik` HTML'indeki ilk <img>'den geliyor,
   o yüzden oranları çok değişken → sabit orana kırpılıyor.
   -------------------------------------------------------------------------- */
.uk-destek-ust {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 16px;
    margin-bottom: 30px;
    padding-bottom: 22px;
    border-bottom: 1px solid rgba(3, 89, 78, 0.14);
}

.uk-destek-ust-baslik {
    margin: 0;
    font-size: 26px;
    line-height: 1.35;
}

.uk-destek-ust-adet {
    font-size: 15px;
    color: var(--it-text-body);
}

.uk-destek-ust-adet strong {
    color: var(--it-common-black);
}

/* Program bağlantısı: tema `a` rengini miras alıyordu, kutu içi metin
   rengini kutunun kendisi yönetsin. */
.uk-destek-kat,
.uk-destek-konu {
    display: block;
    color: inherit;
}

/* Program / konu adları temanın gövde grisiyle (#6c757d) soluk kalıyordu;
   sol sütun bir gezinme listesi, okunaklı olmalı. */
.uk-destek-kat .sidebar-widget-list,
.uk-destek-konu .sidebar-widget-list {
    cursor: pointer;
    color: var(--it-common-black);
    font-weight: 600;
}

.uk-destek-kat .sidebar-widget-list.active,
.uk-destek-kat .sidebar-widget-list:hover,
.uk-destek-konu .sidebar-widget-list.active,
.uk-destek-konu .sidebar-widget-list:hover {
    color: var(--it-common-white);
}

/* Konu listesi programa göre daha uzun (16 kalem); satırlar biraz sıkışsın. */
.uk-destek-konu .sidebar-widget-list {
    font-size: 15px;
    line-height: 1.45;
}

/* Kapak görselleri veritabanında küçük (400–770px); 900px'lik sütuna
   gerdirilirse bulanıklaşıyor. Doğal boyutunda, ortalanmış gösteriliyor. */
.uk-kapak-kutu {
    text-align: center;
}

.uk-kapak-gorsel {
    max-width: 100%;
    height: auto;
    border-radius: 20px;
}

/* --- konu içeriği (CKEditor'den geliyor) --- */
.uk-destek-icerik p {
    font-size: 16px;
    line-height: 1.85;
}

.uk-destek-icerik strong {
    color: var(--it-common-black);
}

.uk-destek-icerik img {
    max-width: 100%;
    height: auto;
    margin: 10px 0 26px;
    border-radius: 16px;
}

.uk-destek-icerik ul,
.uk-destek-icerik ol {
    margin: 0 0 24px;
    padding-left: 20px;
    list-style: disc;
}

.uk-destek-icerik ol {
    list-style: decimal;
}

.uk-destek-icerik li {
    margin-bottom: 8px;
    font-size: 16px;
    line-height: 1.7;
}

.uk-destek-icerik h3 {
    margin: 32px 0 16px;
    font-size: 22px;
    line-height: 1.4;
}

/* --- Bilgi Al kutusu ---
   Fotoğraf 1024x1408 dikey; tema kutuyu 223px'te tuttuğu için görselin
   yalnızca alt %39'u görünüyordu (logo ve yüzler tamamen kesiliyordu).
   Kutu fotoğrafın oranına yakın bir yüksekliğe çıkarıldı, içerik de
   fotoğrafın üzerine, alttan koyu bir geçişin içine alındı. */
.sidebar-contact-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 560px;
    padding: 0;
}

.sidebar-contact-wrap .shape {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

/* metin okunabilirliği için alttan yukarı koyu geçiş */
.sidebar-contact-wrap::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: max(52%, 250px);
    background: linear-gradient(to top,
                rgba(0, 47, 40, 0.96) 14%,
                rgba(0, 47, 40, 0.80) 44%,
                rgba(0, 47, 40, 0) 100%);
    pointer-events: none;
}

.sidebar-contact-wrap .sidebar-contact-2 {
    position: relative;
    z-index: 1;
    margin-top: 0 !important;
    padding: 0 26px 30px;
}

.uk-destek-panel .it-course-thumb img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* Görseli hiç olmayan konular için monogram karo */
.uk-destek-gorselsiz {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
    background-color: rgba(3, 89, 78, 0.08);
    color: #03594E;
    font-family: var(--it-ff-heading);
    font-size: 26px;
}

@media (max-width: 767px) {
    .uk-destek-ust-baslik {
        font-size: 21px;
    }
    /* Dar ekranda 4/8 bölünme küçük resmi çok daraltıyor; üst üste bindir. */
    .uk-destek-panel .it-course-item .row > [class*="col-"] {
        width: 100%;
    }
    .uk-destek-panel .it-course-thumb img,
    .uk-destek-gorselsiz {
        aspect-ratio: 16 / 9;
    }
    .uk-destek-panel .it-course-content {
        padding-top: 18px;
    }
}

/* --------------------------------------------------------------------------
   1i-6) MOBİL MENÜ ÇEKMECESİ (offcanvas)
   -------------------------------------------------------------------------- */
.uk-offcanvas-logo {
    max-height: 64px;
    width: auto;
}

/* Telefon satırında iki numara alt alta */
.itoffcanvas__info-address a {
    display: block;
}

.uk-offcanvas-sosyal {
    display: flex;
    gap: 12px;
    margin-top: 28px;
}

.uk-offcanvas-sosyal a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(3, 89, 78, 0.1);
    color: #03594E;
    font-size: 16px;
    transition: 0.3s;
}

.uk-offcanvas-sosyal a:hover {
    background-color: #03594E;
    color: var(--it-common-white);
}

/* --------------------------------------------------------------------------
   1i-7) İLETİŞİM — bilgi listesi, sosyal ikonlar, harita
   -------------------------------------------------------------------------- */

/* Tema bu listede inline SVG bekliyor ve span'e `display:block` veriyor;
   Font Awesome simgesi kutunun içinde dikeyde ortalanmıyordu. Kutunun
   boyutu/köşesi temadan geliyor, sadece ortalama burada ezliyor. */
.it-contact-list .uk-iletisim-liste li > span {
    /* Tema `display:block` veriyor ve daha yüksek özgüllükte; simge kutunun
       içinde 6px yukarıda kalıyordu. Kutu ölçüsü/köşesi temadan geliyor,
       burada yalnızca ortalama zorlanıyor. */
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    background-color: rgba(3, 89, 78, 0.09);
    color: #03594E;
    font-size: 18px;
}

.uk-iletisim-sosyal a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background-color: rgba(3, 89, 78, 0.09);
    color: #03594E;
    font-size: 16px;
    transition: 0.3s;
}

.uk-iletisim-sosyal a:hover {
    background-color: #03594E;
    color: var(--it-common-white);
}

/* Harita: iframe sabit 600x450 geliyor, kapsayıcıya oturtuluyor. */
.uk-harita {
    overflow: hidden;
    line-height: 0;
}

.uk-harita iframe {
    display: block;
    width: 100%;
    height: 460px;
    border: 0;
}

.uk-form-notu {
    margin: 18px 0 0;
    padding: 12px 16px;
    border-radius: 10px;
    background-color: rgba(3, 89, 78, 0.08);
    font-size: 15px;
    line-height: 1.6;
    color: var(--it-common-black);
}

@media (max-width: 767px) {
    .uk-harita iframe {
        height: 320px;
    }
}

/* --------------------------------------------------------------------------
   1i-8) HATA SAYFASI (404)
   -------------------------------------------------------------------------- */
.uk-hata-kod {
    font-family: var(--it-ff-heading);
    font-size: 120px;
    line-height: 1;
    color: #03594E;
    opacity: 0.18;
    margin-bottom: 10px;
}

.uk-hata-metin {
    font-size: 17px;
    line-height: 1.8;
}

.uk-hata-baglantilar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.uk-hata-baglantilar a {
    padding: 10px 20px;
    border: 1px solid rgba(3, 89, 78, 0.22);
    border-radius: 100px;
    color: var(--it-common-black);
    font-size: 15px;
    transition: 0.3s;
}

.uk-hata-baglantilar a:hover {
    background-color: #03594E;
    border-color: #03594E;
    color: var(--it-common-white);
}

@media (max-width: 767px) {
    .uk-hata-kod {
        font-size: 80px;
    }
    .uk-hata-metin {
        font-size: 16px;
    }
}

/* Anasayfadaki 4'lü program kartlarında görsel de detay sayfasına link.
   <a> blok olmazsa satır içi kalıp görselin altında boşluk bırakıyor ve
   gradyan hizası kayıyor. */
.uk-kart-kapak {
    display: block;
}

/* --------------------------------------------------------------------------
   1j) KADROMUZ — departman filtresi + 2 sütunlu kart ızgarası

   Fotoğraf yok; hiyerarşi ÜNVAN > isim olarak kuruldu (kullanıcı tercihi):
   ünvan kartın tepesinde koyu departman renginde bir bant, beyaz ve iri;
   isim onun altında daha küçük. Departman rengi her karta `--uk-dept`
   değişkeniyle geçiyor, böylece tek kural bütün renkleri yönetiyor.
   Özgeçmiş kartta değil, isim altındaki butonla açılan tek bir modalda
   gösteriliyor (akordiyon açılışı ızgarada satır yüksekliğini bozuyordu).
   -------------------------------------------------------------------------- */
.uk-kadro-filtre-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-bottom: 55px;
}

/* Filtre butonları departman rengiyle dolu. Renkler ayırt edilebilsin diye
   pasif buton da neredeyse tam doygun kalıyor (eski 0.55 opaklık bütün
   tonları griye çekip birbirine benzetiyordu); seçili olan opaklık yerine
   beyaz halka + kendi renginde dış halka ile işaretleniyor. */
.uk-kadro-filtre {
    padding: 11px 20px;
    border: 0;
    border-radius: 100px;
    background-color: var(--uk-dept);
    color: var(--it-common-white);
    font-size: 14px;
    line-height: 1.2;
    opacity: 0.88;
    transition: 0.3s;
}

.uk-kadro-filtre span {
    display: inline-block;
    margin-left: 7px;
    padding: 1px 8px;
    border-radius: 100px;
    font-size: 12px;
    background-color: rgba(255, 255, 255, 0.24);
}

.uk-kadro-filtre:hover {
    opacity: 1;
}

.uk-kadro-filtre.aktif {
    opacity: 1;
    transform: translateY(-1px);
    box-shadow: 0 0 0 3px var(--it-common-white),
                0 0 0 5px var(--uk-dept),
                0 8px 18px rgba(1, 6, 20, 0.18);
}

/* --- 2 sütunlu ızgara --- */
.uk-kadro-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* satır arası (üst-alt) sütun arasından belirgin şekilde daha geniş */
    gap: 42px 26px;
    align-items: start;
}

.uk-kadro-oge {
    border: 1px solid rgba(3, 89, 78, 0.14);
    border-radius: 16px;
    overflow: hidden;
    background-color: var(--it-common-white);
    transition: box-shadow 0.3s, transform 0.3s;
}

.uk-kadro-oge:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(1, 6, 20, 0.1);
}

/* ÜNVAN — kartın en belirgin öğesi */
.uk-kadro-unvan {
    padding: 16px 22px;
    background-color: var(--uk-dept);
    color: var(--it-common-white);
    font-family: var(--it-ff-heading);
    font-size: 20px;
    line-height: 1.35;
}

/* Kişi satırı: solda monogram + isim, sağa dayalı özgeçmiş butonu. */
.uk-kadro-govde {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 26px 22px 28px;
}

.uk-kadro-kisi {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 14px;
}

.uk-kadro-monogram {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background-color: rgba(3, 89, 78, 0.09);
    color: var(--uk-dept);
    font-family: var(--it-ff-heading);
    font-size: 14px;
    letter-spacing: 0.5px;
}

/* isim: kalın ve okunaklı, ama ünvandan (20px) yine de KÜÇÜK — hiyerarşi
   ünvan > isim olarak korunuyor. */
.uk-kadro-ad {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--it-common-black);
}

/* Özgeçmiş butonu: isimle aynı satırda, kartın sağına dayalı. */
.uk-kadro-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 8px 16px;
    border: 1px solid var(--uk-dept);
    border-radius: 100px;
    background-color: transparent;
    color: var(--uk-dept);
    font-size: 14px;
    line-height: 1.2;
    white-space: nowrap;
    transition: 0.3s;
}

.uk-kadro-btn i {
    font-size: 12px;
    transition: transform 0.3s;
}

.uk-kadro-btn:hover,
.uk-kadro-btn:focus-visible {
    background-color: var(--uk-dept);
    color: var(--it-common-white);
}

.uk-kadro-btn:hover i {
    transform: translateX(3px);
}

/* --- özgeçmiş penceresi --- */

/* Tema `.modal-dialog`a max-width:100% + yatay kenar boşluğu birlikte veriyor;
   ikisi toplanınca kutu dar ekranda viewport'u taşırıyordu. Kenar boşluğunu
   genişliğin içine alıyoruz. Bootstrap'in kendi değişkenini de güncelliyoruz
   ki `-centered` / `-scrollable` yükseklik hesabı boşlukla uyumlu kalsın. */
.uk-kadro-modal .modal-dialog {
    --bs-modal-margin: 16px;
    max-width: min(800px, calc(100% - 32px));
    margin: var(--bs-modal-margin) auto;
}

.uk-kadro-modal .modal-content {
    border: 0;
    border-radius: 16px;
    overflow: hidden;
}

.uk-kadro-modal .modal-header {
    align-items: flex-start;
    gap: 16px;
    /* sağda kapatma düğmesine yer ayrılıyor (düğme akış dışı konumlanıyor) */
    padding: 22px 60px 22px 26px;
    border-bottom: 0;
    background-color: var(--uk-dept, #003f5e);
}

.uk-kadro-modal .uk-modal-unvan {
    display: block;
    font-family: var(--it-ff-heading);
    font-size: 20px;
    line-height: 1.35;
    color: var(--it-common-white);
}

.uk-kadro-modal .modal-title {
    margin: 5px 0 0;
    font-size: 16px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.82);
}

/* Tema `.btn-close`u 50x50 kutuya çevirip 35px içeriden konumlandırıyor
   (kendi arama/offcanvas katmanları için). Burada küçültüp pencerenin sağ
   üst köşesine sabitliyoruz. Beyaz çarpı `filter: invert()` yerine doğrudan
   beyaz SVG ile veriliyor; aksi halde filtre arkadaki daireyi de ters
   çevirip koyu zeminde görünmez hale getiriyordu. */
.uk-kadro-modal .btn-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 28px;
    height: 28px;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3E%3Cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3E%3C/svg%3E")
        center / 10px 10px no-repeat;
    filter: none;
    opacity: 1;
    transition: background-color 0.3s;
}

.uk-kadro-modal .btn-close:hover {
    background-color: rgba(255, 255, 255, 0.34);
    transform: none;
    border: 0 !important;
}

.uk-kadro-modal .modal-body {
    padding: 6px 26px 26px;
}

.uk-modal-bio p {
    margin: 14px 0 0;
    font-size: 15px;
    line-height: 1.75;
}

.uk-modal-bio ul {
    margin: 12px 0 0;
    padding-left: 18px;
    list-style: disc;
}

.uk-modal-bio li {
    margin-bottom: 6px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--it-text-body);
}

.uk-kadro-bio-yok {
    font-style: italic;
    color: var(--it-text-body);
}

.uk-kadro-bos {
    padding: 40px 0;
    text-align: center;
    color: var(--it-text-body);
}

@media (max-width: 767px) {
    .uk-kadro-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .uk-kadro-unvan {
        padding: 14px 18px;
        font-size: 17px;
    }
    .uk-kadro-govde {
        padding: 22px 18px 24px;
    }
    .uk-kadro-kisi {
        gap: 12px;
    }
    .uk-kadro-monogram {
        width: 38px;
        height: 38px;
        font-size: 13px;
    }
    .uk-kadro-ad {
        font-size: 17px;
    }
    .uk-kadro-btn {
        padding: 7px 14px;
        font-size: 13px;
    }
    .uk-kadro-filtre {
        padding: 9px 15px;
        font-size: 13px;
    }
    .uk-kadro-modal .modal-header {
        padding: 20px 54px 20px 20px;
    }
    .uk-kadro-modal .modal-body {
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* --------------------------------------------------------------------------
   2b) ALT 9 KART — hover efekti

   Sadece görselin üzerinde düz bir karartma olsun istendi:
     - kart zemini / başlık rengi hover'da DEĞİŞMEZ (bölümün arka planı zaten
       koyu; kartın da koyulaşması uyumsuz duruyordu)
     - 3D `rotateX` katlanma YOK, katman sadece yumuşakça belirir (opacity)
   Görsel zoom'u temadan hazır geliyor, ona dokunulmadı.
   Kurallar `.it-testimonial-2-area` altına kapsandı — `it-course-item`
   tema genelinde kullanılan bir sınıf, diğer sayfaları etkilemesin.
   -------------------------------------------------------------------------- */
/* Başlığın altındaki boşluk üstündekinden fazlaydı. Üç kaynak vardı:
     1. `.it-blog-2-content` alt dolgusu 36px  → 18px'e çekildi
     2. `.it-course-title` alt marjı 8px       → sıfırlandı
     3. satır yüksekliği (30px) ile yazı yüksekliği (22px) farkından doğan
        4px'lik alt pay — line-height 1.3'e çekilerek azaltıldı
   Gözle görülen boşluk, kutunun değil YAZININ sınırından ölçülmelidir. */
.it-testimonial-2-area .it-blog-2-content {
    padding-bottom: 18px;
}

.it-testimonial-2-area .it-course-title {
    margin-bottom: 0;
    line-height: 1.3;
    font-size: 18px;
}

.it-testimonial-2-area .it-course-thumb::after {
    display: block;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    border-radius: inherit;
    background-color: rgba(31, 36, 50, 0.45);
    opacity: 0;
    transition: opacity 0.4s ease;
    /* Katman görselin üstünde duruyor; pointer-events açık kalırsa
       opacity:0 iken bile tıklamayı yutuyor ve görselin bağlantısı
       çalışmıyor. Süsleme amaçlı, tıklamayı geçirmeli. */
    pointer-events: none;
}

.it-testimonial-2-area .it-course-item:hover .it-course-thumb::after {
    opacity: 1;
}

/* Kart zemini hover'da AÇIK yeşil bir tona döner, başlık koyu yeşile.
   Denemeler: koyu mavi #003f5e → bölümün arka planıyla çakıştı;
   koyu yeşil #03594E → koyu zeminde fazla ağır kaldı.
   Bu yüzden aydınlık bir mint tonu (#C6EDE7) tercih edildi: koyu arka plan
   üzerinde kart öne çıkıyor, yazı kontrastı da yüksek kalıyor.
   İçerik sarmalayıcısının beyaz zemini şeffaflaştırılmalı, yoksa rengi örter. */
.it-testimonial-2-area .it-course-item,
.it-testimonial-2-area .it-blog-2-content,
.it-testimonial-2-area .it-course-title a {
    transition: background-color 0.4s ease, border-color 0.4s ease, color 0.4s ease,
                text-shadow 0.4s ease;
}

.it-testimonial-2-area .it-course-item:hover {
    background-color: #c6ede7;
    border-color: rgba(26, 182, 157, 0.6);
}

.it-testimonial-2-area .it-course-item:hover .it-blog-2-content {
    background-color: transparent;
}

.it-testimonial-2-area .it-course-item:hover .it-course-title a {
    color: var(--it-theme-1);
    /* açık mint zeminde kabartma (1px) + yumuşak hâle: yazı belirginleşir */
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.95),
        0 0 12px rgba(255, 255, 255, 0.75);
}

/* --------------------------------------------------------------------------
   3) GALERİ — 4 sütunlu MOZAİK

   Temanın orijinal mozaiği 5 sütunluydu ve görsellerin önceden farklı
   boyutlarda hazırlanmış olmasına güveniyordu:
     - `.it-gallery-thumb img { max-width: inherit }` → genişlik sınırsız
     - `width:100%` ve `gap` yalnızca 768–1399px arasında tanımlı
   Bu yüzden 1400px üstünde admin'den yüklenen büyük fotoğraflar doğal
   boyutunda açılıyor, galeri devleşiyor ve görseller yapışık görünüyordu.

   Buradaki çözüm mozaik görünümü KORUYARAK 4 sütuna indiriyor. Mozaik hissi
   üç şeyden geliyor:
     a) her sütunda biri kısa (4:3) biri uzun (3:4) iki görsel,
     b) kısa/uzun sırasının sütunlar arasında dönüşümlü olması (zigzag),
     c) çift numaralı sütunların dikeyde aşağı kaydırılması (kademe).
   Görseller `object-fit: cover` ile hücreyi doldurduğu için admin panelinden
   gelen her boyut/oran güvenle oturur.
   -------------------------------------------------------------------------- */
.uk-galeri-mozaik {
    display: flex;
    align-items: flex-start;
    gap: 30px;
}

.uk-galeri-kolon {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* kademe: çift sütunlar aşağı kaysın */
.uk-galeri-kolon:nth-child(even) {
    margin-top: 55px;
}

.uk-galeri-mozaik .it-gallery-thumb {
    margin: 0;
    overflow: hidden;
}

.uk-galeri-mozaik .it-gallery-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.uk-galeri-mozaik .uk-kisa img { aspect-ratio: 4 / 3; }   /* yatay hücre */
.uk-galeri-mozaik .uk-uzun img { aspect-ratio: 3 / 4; }   /* dikey hücre */

/* tablet ve altı: 2 sütun, kademe kapansın */
@media (max-width: 991px) {
    .uk-galeri-mozaik {
        flex-wrap: wrap;
        gap: 20px;
    }
    .uk-galeri-kolon {
        flex: 0 0 calc(50% - 10px);
        gap: 20px;
    }
    .uk-galeri-kolon:nth-child(even) {
        margin-top: 0;
    }
}

@media (max-width: 767px) {
    .uk-galeri-mozaik { gap: 14px; }
    .uk-galeri-kolon {
        flex: 0 0 calc(50% - 7px);
        gap: 14px;
    }
}