/* =====================================================================
   Dalga 13 — Anasayfa Düzen Motoru ek stilleri
   main.css'e DOKUNULMAZ; bu dosya yalnız yeni bölüm düzeninin eklerini taşır.
   - Gündem: manşet + 8 küçük kart. Kart ızgarası main.css'teki
     .gundem-genis .gundem-kucukler (repeat(4, 1fr)) kuralını miras alır;
     8 kart 4'lü düzende kendiliğinden iki satıra akar. Mobil kırılımlar
     (3 sütun / tek sütun) main.css'te tanımlıdır ve aynen geçerlidir.
   - Başkan: sağdaki video modalı kalktı; yerine /baskan sayfasına giden
     büyük portre görseli geldi (aşağıdaki .baskan-portre kuralları).
   ===================================================================== */

/* İki satıra akan gündem kartları: satırlar eşit yükseklikte otursun */
.gundem-genis .gundem-kucukler {
    grid-auto-rows: 1fr;
}

/* --------------------------- Başkan portresi -------------------------- */
.baskan-vitrin {
    display: flex;
    flex-direction: column;
}

.baskan-portre {
    position: relative;
    display: block;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    /* Görsel oranı ne olursa olsun kadraj sabit: zarif dikey portre */
    aspect-ratio: 4 / 5;
    max-height: 540px;
    isolation: isolate; /* köşe yarıçapı + ölçek animasyonu taşma güvenliği */
}

.baskan-portre img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Yüz kadrajı üst-orta: yatay fotoğraflarda da baş kesilmez */
    object-position: 50% 18%;
    display: block;
    transition: transform 0.6s ease;
}

.baskan-portre:hover img,
.baskan-portre:focus-visible img {
    transform: scale(1.04);
}

.baskan-portre:focus-visible {
    outline: 3px solid var(--secondary);
    outline-offset: 3px;
}

/* Alt bilgi bandı: lacivert degrade üzerinde ad + sayfa bağlantısı */
.baskan-portre-alt {
    position: absolute;
    inset: auto 0 0 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 48px 22px 18px;
    background: linear-gradient(180deg, rgba(27, 58, 92, 0) 0%, rgba(16, 36, 58, 0.88) 78%);
    pointer-events: none; /* tıklama hedefi bağlantının tamamıdır */
}

.baskan-portre-ad {
    font-family: var(--font-heading);
    font-size: 21px;
    font-weight: 700;
    color: var(--white);
    line-height: 1.25;
}

.baskan-portre-lnk {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--secondary);
}

.baskan-portre-lnk i {
    font-size: 12px;
    transition: transform var(--transition);
}

.baskan-portre:hover .baskan-portre-lnk i {
    transform: translateX(4px);
}

/* Mobil: tek sütuna düşen bölümde portre ekranı boğmasın */
@media (max-width: 768px) {
    .baskan-portre {
        aspect-ratio: 4 / 5;
        max-height: 440px;
    }

    .baskan-portre-alt {
        padding: 40px 16px 14px;
    }

    .baskan-portre-ad {
        font-size: 18px;
    }
}

/* Hareketi azalt tercihi: ölçek animasyonları kapatılır */
@media (prefers-reduced-motion: reduce) {
    .baskan-portre img,
    .baskan-portre-lnk i {
        transition: none;
    }

    .baskan-portre:hover img,
    .baskan-portre:focus-visible img {
        transform: none;
    }
}

/* =====================================================================
   Dalga 14 — Gündem kayan manşet + 3'lü ızgara + dolu duyuru panosu
   ve fuar şeridinin 8 karta (4×2) çıkarılması.
   ===================================================================== */

/* ------------------------- Kayan manşet alanı ------------------------- */
/* Slaytlar aynı grid hücresine yığılır: yükseklik en uzun slayt kadar
   olur, geçiş nazik bir çapraz solmayla yapılır. Pasif slaytlar
   pointer-events almaz; gizli bağlantı tıklanamaz. */
.gundem-slider {
    position: relative;
}

.gundem-slider-pist {
    display: grid;
}

.gundem-slider-pist .gundem-slide {
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 0;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.gundem-slider-pist .gundem-slide-aktif {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    z-index: 1;
}

/* Oklar + nokta göstergeleri */
.gundem-slider-kontrol {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 12px;
    /* Hedefler 40 px'e çıkınca dar ekranda satıra sığmayabilir; sıkışıp
       hedefi küçültmek yerine ikinci satıra iner (taşma olmaz). */
    flex-wrap: wrap;
}

.gs-ok {
    width: 40px;
    height: 40px;
    /* DENETİM: esnek kapsayıcı dar ekranda okları 35 px'e sıkıştırıyordu */
    flex: 0 0 40px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--white);
    color: var(--primary);
    font-size: 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.gs-ok:hover,
.gs-ok:focus-visible {
    background: var(--secondary);
    border-color: var(--secondary);
    color: #fff;
}

.gs-ok:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

[dir="rtl"] .gs-ok i {
    transform: scaleX(-1);
}

.gs-noktalar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    /* Hedefler 40px'e çıktığı için aralarına ayrıca 4px konur:
       iki hedef merkezi arası 44px → parmak izi komşuya taşmaz. */
    gap: 4px;
}

/* Nokta görünürde 11px; dokunma hedefi 40×40px.
   DENETİM: hedef 22×40 px idi; 40 px'lik parmak izi komşu noktanın
   üstüne biniyor ve yanlış slayt açılıyordu (WCAG 2.5.8 / 2.5.5). */
.gs-nokta {
    position: relative;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    /* dokunmada 300 ms gecikme ve çift dokunuşla yakınlaştırma olmasın */
    touch-action: manipulation;
}

.gs-nokta::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: rgba(27, 58, 92, 0.25);
    transition: background 0.2s, transform 0.2s;
}

.gs-nokta:hover::before {
    background: rgba(27, 58, 92, 0.5);
}

.gs-nokta-aktif::before,
.gs-nokta-aktif:hover::before {
    background: var(--secondary);
    transform: translate(-50%, -50%) scale(1.25);
}

.gs-nokta:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -12px;
    border-radius: 999px;
}

/* Duraklat / sürdür düğmesi — gundem.js üretir, oklarla aynı görünüm.
   WCAG 2.2.2 (Duraklat, Durdur, Gizle): 5 sn'de bir kendiliğinden değişen
   içeriğin kullanıcı tarafından durdurulabilir olması gerekir. */
.gs-duraklat {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--white);
    color: var(--primary);
    font-size: 13px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.gs-duraklat:hover,
.gs-duraklat:focus-visible {
    background: var(--secondary);
    /* Altın zemin üzerinde beyaz 2.42:1 idi; lacivert 4.81:1 */
    border-color: var(--secondary);
    color: var(--altin-uzeri-metin, #1B3A5C);
}

.gs-duraklat:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* --------------- Haber kartları: 3'lü / 2'li / 1'li ızgara ------------ */
/* main.css'teki repeat(4) kuralını daha özgül seçiciyle ezer. */
.gundem-genis .gundem-sol .gundem-kucukler {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    gap: 18px;
}

@media (max-width: 1024px) {
    .gundem-genis .gundem-sol .gundem-kucukler {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .gundem-genis .gundem-sol .gundem-kucukler {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

/* --------------------- Duyuru panosu: 8 kayıt dolu -------------------- */
/* Sol kenarda kategori renk şeridi + tarih rozeti; satırlar sıkılaştı ki
   8 duyuru sol kolonla dengeli otursun. */
.duyuru-panel-liste li.dp-oge {
    position: relative;
    padding-left: 12px;
}

.duyuru-panel-liste li.dp-oge::before {
    content: "";
    position: absolute;
    left: 0;
    top: 13px;
    bottom: 13px;
    width: 3px;
    border-radius: 2px;
    background: rgba(120, 190, 255, 0.55);
}

.duyuru-panel-liste li.dp-oge-egitim::before {
    background: rgba(82, 211, 163, 0.6);
}

.duyuru-panel-liste li.dp-oge-fuar::before {
    background: var(--secondary-light);
}

[dir="rtl"] .duyuru-panel-liste li.dp-oge {
    padding-left: 0;
    padding-right: 12px;
}

[dir="rtl"] .duyuru-panel-liste li.dp-oge::before {
    left: auto;
    right: 0;
}

.duyuru-panel-liste li.dp-oge a {
    padding: 12px 2px;
    gap: 6px;
}

/* Tarih rozeti */
.duyuru-panel-liste li.dp-oge .dp-meta time {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.78);
}

/* ------------------- Fuar şeridi: 8 kart, 4×2 denge ------------------- */
/* Genişte kesin 4 sütun (auto-fit dalgalanmasın), satırlar eşit boyda.
   Dar ekranlarda main.css'teki auto-fit/tek sütun davranışı sürer. */
@media (min-width: 1025px) {
    .fuar-serit .fuar-serit-izgara {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.fuar-serit .fuar-serit-izgara {
    grid-auto-rows: 1fr;
}

/* Kart içinde yer/destekli satırı tabana yaslanır; başlıklar farklı
   uzunlukta olsa da kartlar dengeli görünür. */
.fuar-serit .fuar-serit-kart .fuar-serit-ad {
    margin-bottom: auto;
}

/* Oklarda da altın zemin üzerindeki metin/ikon lacivert olur (4.81:1) */
.gs-ok:hover,
.gs-ok:focus-visible {
    color: var(--altin-uzeri-metin, #1B3A5C);
}

/* Dar ekran: 5 nokta + 2 ok + duraklat düğmesi 40 px hedeflerle tek satırda
   kalsın diye kümeler arası boşluk daraltılır (hedef boyutu KÜÇÜLTÜLMEZ).
   Daha çok slayt varsa flex-wrap ikinci satıra indirir, taşma olmaz. */
@media (max-width: 480px) {
    .gundem-slider-kontrol {
        gap: 6px;
    }

    .gs-noktalar {
        gap: 2px;
    }
}

/* Hareketi azalt tercihi: manşet geçişi anında olur */
@media (prefers-reduced-motion: reduce) {
    .gundem-slider-pist .gundem-slide,
    .gs-nokta::before,
    .gs-ok,
    .gs-duraklat {
        transition: none;
    }
}