/* CranioCatch ozel dropdown.

   Kapali hali mevcut .craniocatch-form-select gorunumunu birebir
   tekrarliyor (44px yukseklik, 10px radius, ayni kenarlik ve odak
   halkasi) - kullanici acisindan degisen tek sey ACILAN liste.

   Gercek <select> DOM'da kaliyor; gorsel olarak ortuluyor ama
   erisilebilir birakiliyor (display:none olsa form dogrulamasi ve
   bazi tarayici davranislari bozulurdu). */

.cc-select {
    position: relative;
    width: 100%;
}

/* Gercek select: gorunmez ama DOM'da ve odaklanabilir sirada degil.
   JS calismazsa bu kural hic uygulanmaz (sinif eklenmez) ve native
   select normal gorunur. */
.cc-select > select {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
}

/* ---- Kapali kutu ---- */
.cc-select__button {
    display: flex;
    text-align: left;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    height: 44px;
    padding: 0 14px;
    border: 1px solid rgba(179, 185, 194, 0.5);
    border-radius: 10px;
    background: #fff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 400;
    color: #1F2937;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Deger kutusu <i>: global span kuralindan etkilenmiyor, bu yuzden
   !important yigini gerekmiyor. font-style normal'e cekiliyor. */
.cc-select__value {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    font-size: 13px;
    font-weight: 400;
    font-style: normal;
    line-height: 1;
    text-align: left;
    color: inherit;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Ok isareti: mevcut select ile ayni SVG */
.cc-select__button::after {
    content: "";
    flex: 0 0 12px;
    width: 12px;
    height: 8px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23666D7C' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
    transition: transform 0.2s ease;
}

.cc-select.is-open .cc-select__button::after {
    transform: rotate(180deg);
}

.cc-select__button--placeholder .cc-select__value {
    color: var(--cc-muted, #666D7C);
}

.cc-select__button:hover {
    border-color: rgba(179, 185, 194, 0.9);
}

.cc-select__button:focus-visible,
.cc-select.is-open .cc-select__button {
    outline: none;
    border-color: rgba(118, 64, 232, 0.35);
    box-shadow: 0 0 0 3px rgba(118, 64, 232, 0.1);
}

/* Hata durumu: mevcut aria-invalid stiliyle ayni his */
.cc-select > select[aria-invalid="true"] ~ .cc-select__button {
    border-color: #b3261e;
}

/* ---- Acilan liste ---- */
.cc-select__list {
    position: absolute;
    text-align: left;
    z-index: 50;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    max-height: 260px;
    overflow-y: auto;
    padding: 6px;
    border: 1px solid rgba(179, 185, 194, 0.5);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 12px 32px rgba(16, 24, 40, 0.12);
    /* Acilma animasyonu */
    animation: ccSelectIn 0.14s ease-out;
}

/* Asagida yer yoksa yukari acilir (JS sinif ekler) */
.cc-select--up .cc-select__list {
    top: auto;
    bottom: calc(100% + 6px);
}

@keyframes ccSelectIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .cc-select__list { animation: none; }
    .cc-select__button::after { transition: none; }
}

.cc-select__option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.35;
    color: #1F2937;
    /* Kapsayicidan gelen text-align:center kalitimini ez */
    text-align: left;
    cursor: pointer;
}

/* Klavye/fare ile uzerinde gezilen secenek */
.cc-select__option.is-active {
    background: #F3F4F6;
}

/* Secili secenek: metin koyu kalir, ayrim kalinlik + tik isaretiyle */
.cc-select__option.is-selected {
    color: #1F2937;
    font-weight: 600;
}

.cc-select__option.is-selected::after {
    content: "";
    /* float + margin-top satir yuksekligine gore kayiyordu;
       flex ogesi olarak dikeyde kendiliginden ortalaniyor. */
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M2.5 7.5L5.5 10.5L11.5 3.5' stroke='%231F2937' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
}

/* Uzun isimler (yazar filtresi) kutuyu tasmasin: metin kirpilir,
   tik isareti icin ayrilan yer korunur. */
.cc-select__option {
    min-width: 0;
}
.cc-select__option > * {
    min-width: 0;
}

.cc-select__option--placeholder {
    color: var(--cc-muted, #666D7C);
}

/* Placeholder gercek bir secim degil: secili gibi kalinlasmasin,
   tik isareti almasin. */
.cc-select__option--placeholder.is-selected {
    font-weight: 400;
    color: var(--cc-muted, #666D7C);
}
.cc-select__option--placeholder.is-selected::after {
    content: none;
}

/* Kaydirma cubugu: ince ve notr */
.cc-select__list::-webkit-scrollbar {
    width: 10px;
}
.cc-select__list::-webkit-scrollbar-thumb {
    background: rgba(133, 140, 156, 0.4);
    border: 3px solid #fff;
    border-radius: 8px;
}
.cc-select__list::-webkit-scrollbar-thumb:hover {
    background: rgba(133, 140, 156, 0.65);
}
.cc-select__list {
    scrollbar-width: thin;
    scrollbar-color: rgba(133, 140, 156, 0.4) transparent;
}

/* ==========================================================================
   Demo modali icindeki dropdown
   --------------------------------------------------------------------------
   Modal govdesi (.craniocatch-modal-center) overflow-y:auto, kapsayicisi
   (.craniocatch-modal-content) ise overflow:hidden + max-height:90vh.
   Mutlak konumlu liste bu kutunun disina tasamadigi icin:
     - asagi dogru uzayinca modal govdesinde scroll aciliyordu
     - kirpilip yarim gorunuyordu

   Cozum: modal icinde liste daha kisa (180px) ve kendi icinde kayiyor;
   modal govdesi uzamiyor, scroll acilmiyor.
   ========================================================================== */
.craniocatch-modal-content .cc-select__list {
    max-height: 180px;
}

/* Demo modalinda form alanlari 32px yuksekliginde ve 12px yazi
   (demo-modal.css). Buton varsayilan 44px oldugu icin ulke alani
   digerlerinden uzun goruniyordu - modal icinde esitleniyor. */
.craniocatch-modal-content .cc-select__button {
    height: 32px;
    padding: 0 12px;
    border-color: rgba(179, 185, 194, .4);
    font-size: 12px;
}

.craniocatch-modal-content .cc-select__value {
    font-size: 12px;
}

.craniocatch-modal-content .cc-select__option {
    padding: 7px 10px;
    font-size: 12px;
}

/* ==========================================================================
   Liste araç çubugu filtreleri (yil / yazar)
   --------------------------------------------------------------------------
   Bu select'ler form alani degil, filtre kutusu: base.css'te 40px
   yukseklik ve 14px yazi aliyorlar. Ozel dropdown ayni olculere
   getiriliyor ki arama kutusuyla hizali dursun.

   .list-toolbar__field flex kolonu oldugu icin sarmalayici da
   genisligi kendi almali.
   ========================================================================== */
.list-toolbar .cc-select {
    min-width: 0;
}

.list-toolbar .cc-select__button {
    height: 40px;
    padding: 0 12px;
    border-color: rgba(179, 185, 194, .6);
    font-size: 14px;
    color: #0B0B0F;
}

.list-toolbar .cc-select__value {
    font-size: 14px;
}

.list-toolbar .cc-select__option {
    font-size: 14px;
}

/* Odak halkasi base.css'teki select ile ayni his */
.list-toolbar .cc-select__button:focus-visible,
.list-toolbar .cc-select.is-open .cc-select__button {
    outline: 2px solid #3291FF;
    outline-offset: 1px;
    border-color: rgba(179, 185, 194, .6);
    box-shadow: none;
}

/* Araç çubugu filtre alanlari: native <select> icerige gore
   genisliyordu, ozel dropdown ise kapsayicinin genisligini aliyor.
   .list-toolbar__field genislik tanimlamadigi ve min-width:0
   oldugu icin kutular icerige gore daraliyordu ("All" kadar).
   Filtrelere taban genislik veriliyor; arama alani esnemeye
   devam ediyor. */
.list-toolbar__field:not(.list-toolbar__field--search) {
    flex: 0 1 200px;
    min-width: 160px;
}

/* Arama kutusu base.css'te flex:1 1 260px ile kalan tum bosluğu
   yutuyordu; genis ekranda gereksiz uzuyordu. */
.list-toolbar__field--search {
    flex: 1 1 260px;
    max-width: 420px;
}

/* Acilan liste en az kutu kadar genis, uzun isimler icin
   gerekirse daha da genisleyebilsin. */
.list-toolbar .cc-select__list {
    min-width: 100%;
    width: max-content;
    max-width: 320px;
}

@media (max-width: 575px) {
    .list-toolbar__field--search {
        max-width: none;
    }
    .list-toolbar__field:not(.list-toolbar__field--search) {
        flex: 1 1 100%;
        min-width: 0;
    }
    .list-toolbar .cc-select__list {
        max-width: 100%;
    }
}