/*
 * Modül davranışlarının (slider, galeri, sekmeler, akordeon, sayaç) yapı stili. YALNIZ yapı ve tema değişkenleri
 * (tema değişkenleri) kullanılır: renk sabiti, yazı tipi adı, dış adres ve yazı tipi dosyası yoktur. Sınıflar `ws-` öneklidir
 * ve kapsanmaz (kütüphane CSS'i sayfaya bir kez `link` ile gelir). Bu dosya değişince config/modul.php
 * `kutuphaneler.ws-davranis.surum` değeri artırılır.
 */

/* ---- slider (Swiper) ---- */

.ws-slider {
    --swiper-theme-color: var(--tema-renk-birincil);
    --swiper-navigation-color: var(--tema-renk-birincil);
    --swiper-pagination-color: var(--tema-renk-birincil);
    position: relative;
    overflow: hidden;
}

.ws-slider .swiper-slide {
    position: relative;
    height: auto;
}

.ws-slider .swiper-slide > img {
    display: block;
    width: 100%;
    height: auto;
}

.ws-slider__yazi {
    padding: var(--tema-bosluk-4) var(--tema-bosluk-6);
    color: var(--tema-renk-metin);
}

.ws-slider__yazi > :first-child {
    margin-top: 0;
}

.ws-slider__yazi > :last-child {
    margin-bottom: 0;
}

/* ---- galeri (GLightbox) ---- */

.ws-galeri {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: var(--tema-izgara-araligi);
}

.ws-galeri__oge {
    display: block;
}

.ws-galeri__oge img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: var(--tema-kose-orta);
}

/* ---- sekmeler ---- */

.ws-sekmeler__liste {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tema-bosluk-2);
    border-bottom: var(--tema-kenarlik-kalinligi) solid var(--tema-renk-kenarlik);
}

.ws-sekmeler__sekme {
    padding: var(--tema-bosluk-3) var(--tema-bosluk-4);
    margin-bottom: calc(var(--tema-kenarlik-kalinligi) * -1);
    border: 0;
    border-bottom: calc(var(--tema-kenarlik-kalinligi) * 2) solid var(--tema-renk-zemin);
    background: none;
    color: var(--tema-renk-metin-soluk);
    font: inherit;
    font-weight: var(--tema-yazi-agirligi-kalin);
    cursor: pointer;
}

.ws-sekmeler__sekme[aria-selected=true] {
    color: var(--tema-renk-birincil);
    border-bottom-color: var(--tema-renk-birincil);
}

.ws-sekmeler__sekme:focus-visible {
    outline: 2px solid var(--tema-renk-odak);
    outline-offset: 2px;
}

.ws-sekmeler__panel {
    padding: var(--tema-bosluk-4) 0;
}

.ws-sekmeler__panel[hidden] {
    display: none;
}

/* ---- akordeon ---- */

.ws-akordeon__oge {
    border-bottom: var(--tema-kenarlik-kalinligi) solid var(--tema-renk-kenarlik);
}

.ws-akordeon__baslik {
    padding: var(--tema-bosluk-3) 0;
    font-weight: var(--tema-yazi-agirligi-kalin);
    cursor: pointer;
}

.ws-akordeon__icerik {
    padding: 0 0 var(--tema-bosluk-4);
}

/* ---- sayaç ---- */

.ws-sayac {
    font-variant-numeric: tabular-nums;
}

/* ---- menu (acilir alt menu) ----
 * Kapali alt menu, modul CSS'i alt menuye hangi `display` degerini verirse versin gorunmez; acik durumun `display` degeri kutuphanede
 * YAZILMAZ (modulun kendi degeri gecerlidir; mega menu paneli `grid` olabilir). JS baslamadiysa (ya da tuvalde) alt menu uzerine gelince
 * ve odak icerideyken acilir.
 */

.ws-menu__oge:not([data-acik]) > .ws-menu__alt {
    display: none !important;
}

.ws-menu:not([data-davranis-durum]) .ws-menu__oge:hover > .ws-menu__alt,
.ws-menu:not([data-davranis-durum]) .ws-menu__oge:focus-within > .ws-menu__alt {
    display: block !important;
}

/* ---- cekmece (hamburger paneli / yandan acilan panel) ----
 * Kapali panel ve ortu sayfa yuklenirken de gorunmez (titreme olmaz). Panelin genisligi, zemini ve ic boslugu modulun CSS'indedir.
 */

.ws-cekmece:not([data-acik]) .ws-cekmece__panel,
.ws-cekmece:not([data-acik]) .ws-cekmece__ortu {
    display: none !important;
}

.ws-cekmece__ortu {
    position: fixed;
    inset: 0;
    z-index: var(--tema-katman-ortu);
    background: var(--tema-renk-ortu);
}

.ws-cekmece__panel {
    position: fixed;
    top: 0;
    bottom: 0;
    inset-inline-start: 0;
    z-index: var(--tema-katman-pencere);
    max-width: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.ws-cekmece__panel--sag {
    inset-inline-start: auto;
    inset-inline-end: 0;
}

.ws-kaydirma-kilidi {
    overflow: hidden;
}