/* --------------------------------------------------------------------------
   SOL MENU YENI TASARIM (Claude Design "Oyuneks Sol Menu" aktarimi, 27.08.2026)

   Kapsam: yalnizca `.solMenuYeni` sinifi verilen sidebar kokleri —
   urun listesi (product-list), ilan listesi (advert-list-new) ve CS skin
   listesi (skin/list-new) + bunlarin mobil offcanvas kopyalari.
   `.pageSidebar` 20+ sayfada ortak oldugu icin global DOKUNULMAZ; tum
   kurallar bu kapsamin altindadir. Token degerleri tasarim dosyasindan
   birebir (Oyuneks Sol Menu.dc.html). Kategori karti stilleri
   resources/views/components/catalog-nav.blade.php icindeki comp-styles
   blogunda (ayni token setini kullanir).
   -------------------------------------------------------------------------- */

.solMenuYeni {
    --smYuzey: #20212B;
    --smCizgi: #333444;
    --smIcCizgi: #2A2B38;
    --smGirdi: #1C1D26;
    --smMetin: #C8C9D8;
    --smSoluk: #ABACB5;
    --smEtiket: #8B8C99;
    --smPasif: #4E4F5C;
    --smVurgu: #80F1B1;
    --smVurguZemin: rgba(128, 241, 177, 0.10);
    --smVurguCizgi: rgba(128, 241, 177, 0.45);
    --smCipCizgi: rgba(128, 241, 177, 0.30);
    --smButonMetin: #181820;
    font-family: "Archivo", "Wix Madefor Display", sans-serif;
}
body.light .solMenuYeni {
    --smYuzey: #FFFFFF;
    --smCizgi: #E3E1D9;
    --smIcCizgi: #EEECE4;
    --smGirdi: #F7F6F1;
    --smMetin: #1F1E1D;
    --smSoluk: #6B6A65;
    --smEtiket: #8A8880;
    --smPasif: #C9C7BE;
    --smVurgu: #1B6B3C;
    --smVurguZemin: rgba(27, 107, 60, 0.08);
    --smVurguCizgi: rgba(27, 107, 60, 0.45);
    --smCipCizgi: rgba(27, 107, 60, 0.30);
    --smButonMetin: #FFFFFF;
}

/* Eski .pageSidebar kabugu sifirlanir: kartlar (kategori + filtre) kendi
   yuzeylerini tasir, kabuk seffaf bir dikey yigina doner. */
.solMenuYeni.pageSidebar {
    border-radius: 0;
    border: 0;
}
body.light .solMenuYeni.pageSidebar {
    filter: none;
}
.solMenuYeni .pageSidebarHeader,
.solMenuYeni .pageSidebarHeader.first {
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0 0 10px;
}
.solMenuYeni .pageSidebarHeader:empty {
    display: none;
    padding: 0;
}
.solMenuYeni .sidebarTitle {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: -0.2px;
    line-height: 1.3;
    color: var(--smMetin);
    margin: 0;
}
.solMenuYeni .pageSidebarBody {
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
/* Mobil offcanvas kopyalarindaki sarmalayicilar da ayni dikey yigin */
.solMenuYeni .extractFilterWrapper {
    background: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px;
}
.solMenuYeni.offcanvas-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* --------------------------------------------------------------------------
   Filtre karti
   -------------------------------------------------------------------------- */
.solMenuYeni .solMenuKart {
    background: var(--smYuzey);
    border: 1px solid var(--smCizgi);
    border-radius: 12px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.solMenuYeni .solMenuFiltre {
    position: sticky;
    top: 16px;
    align-self: stretch;
}
/* YAPISKAN KARTA TAM RAY (28.08, Özgür): sticky yalniz ebeveyn yuksekligi
   icinde kayabilir; govde icerik boyunda kalinca kart hic kaymiyordu
   (YENI ILAN dugmesi kart icine alininca alttaki pay da gitti). Kabuk ve
   govde kolonun tamamina uzatilir: kart ILANLARIN SONUNA kadar kayar.
   Kolon yuksekligi Bootstrap row'un stretch'inden gelir (liste boyu). */
.solMenuYeni.pageSidebar { height: 100%; }
.solMenuYeni .pageSidebarBody { height: 100%; }
.solMenuYeni .solMenuFiltreBas {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.solMenuYeni .solMenuFiltreEtiket {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--smEtiket);
}
.solMenuYeni .solMenuTemizle {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--smSoluk);
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    text-decoration: none;
    line-height: 1;
}
.solMenuYeni .solMenuTemizle:hover {
    color: var(--smMetin);
}

/* Filtre grubu etiketi (select/aralik ustundeki kucuk baslik) */
.solMenuYeni .solMenuFiltre .optionGroup .groupTitle {
    font-size: 11px;
    font-weight: 700;
    color: var(--smEtiket);
    margin-bottom: 7px;
}
.solMenuYeni .solMenuFiltre .selectAllFilter {
    font-size: 11px;
    font-weight: 700;
    color: var(--smVurgu);
}

/* --------------------------------------------------------------------------
   Girdiler: arama, metin, min-max araliklari

   DIKKAT: style.css'teki taban kurallar bircok ozelligi !important ile verir
   (border-radius:15px, padding:5px 10px, padding-right:30/50px) ve ikon
   kutusunu SAGDA arka planli 30-40px blok olarak cizer. Bu yuzden asagida
   cekismeli ozellikler !important tasir; ikon SOLA alinir, seffaflasir.
   Sayfalardaki satir ici top/bottom/height degerlerini de ezmek icin ikon
   konum ozellikleri !important'tir (CSS !important > satir ici stil).
   -------------------------------------------------------------------------- */
.solMenuYeni .solMenuFiltre .formGroup {
    position: relative;
}
.solMenuYeni .solMenuFiltre .formGroup .formControl,
.solMenuYeni .solMenuFiltre .formGroup.mini .formControl {
    height: 36px;
    background: var(--smGirdi);
    border: 1px solid var(--smCizgi);
    border-radius: 8px !important;
    font-size: 12px;
    color: var(--smMetin);
    box-shadow: none;
    padding: 0 12px !important;
}
/* iOS zoom onlemi (style.css'teki kuralla ayni gerekce): mobilde 16px alti
   yazi odakta sayfayi zumlar; taban kural bizim ozgullugumuze yenildigi
   icin burada tekrarlanir. */
@media (max-width: 1098px) {
    .solMenuYeni .solMenuFiltre .formGroup .formControl,
    .solMenuYeni .solMenuFiltre .formGroup.mini .formControl {
        font-size: 16px;
    }
}
.solMenuYeni .solMenuFiltre .formGroup .formControl::placeholder {
    color: var(--smSoluk);
    opacity: 1;
}
.solMenuYeni .solMenuFiltre .formGroup .formControl:focus {
    background: var(--smGirdi);
    box-shadow: none;
    color: var(--smMetin);
    border-color: var(--smVurguCizgi);
}
/* Ikon: sagdaki renkli kutu yerine input icinde solda, seffaf, soluk */
.solMenuYeni .solMenuFiltre .formGroup.withIcon .icon {
    width: 34px;
    top: 0 !important;
    bottom: 0 !important;
    height: auto !important;
    left: 0;
    right: auto;
    background: none !important;
    border-radius: 0;
    color: var(--smEtiket);
    font-size: 13px;
}
.solMenuYeni .solMenuFiltre .formGroup.withIcon .formControl {
    padding: 0 12px 0 34px !important;
}
/* Arama kutusu bir tik yuksek (tasarim: 38px) */
.solMenuYeni .solMenuFiltre .solMenuArama .formControl {
    height: 38px;
}
/* Select iceren gruplarda soldaki dekoratif ikon tasarimda yok */
.solMenuYeni .solMenuFiltre .formGroup:has(select) .icon {
    display: none !important;
}
.solMenuYeni .solMenuFiltre .formGroup:has(select) .formControl {
    padding: 0 12px !important;
}
/* Min-Max girdisinin sagindaki birim hucresi (₺) */
.solMenuYeni .solMenuFiltre .formGroup .solMenuBirim {
    position: absolute;
    top: 1px;
    right: 1px;
    bottom: 1px;
    width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 1px solid var(--smCizgi);
    border-radius: 0 7px 7px 0;
    font-size: 11px;
    font-weight: 700;
    color: var(--smEtiket);
    pointer-events: none;
    z-index: 2;
}
.solMenuYeni .solMenuFiltre .formGroup:has(.solMenuBirim) .formControl {
    padding: 0 36px 0 12px !important;
}

/* --------------------------------------------------------------------------
   Select2 (ilan listesi filtre select'leri)
   -------------------------------------------------------------------------- */
.solMenuYeni .solMenuFiltre .select2-container--default .select2-selection--single {
    height: 36px;
    background: var(--smGirdi);
    border: 1px solid var(--smCizgi);
    border-radius: 8px;
}
.solMenuYeni .solMenuFiltre .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 34px;
    padding-left: 12px;
    font-size: 12px;
    font-weight: 500;
    color: var(--smSoluk);
}
.solMenuYeni .solMenuFiltre .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 34px;
}
.solMenuYeni .solMenuFiltre .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--smEtiket) transparent transparent transparent;
}
/* Deger secilmis select (JS .dolu sinifi ekler): yesil cerceve + belirgin metin */
.solMenuYeni .solMenuFiltre .formGroup.dolu .select2-container--default .select2-selection--single,
.solMenuYeni .solMenuFiltre .formGroup.dolu select.formControl {
    border-color: var(--smVurguCizgi);
}
.solMenuYeni .solMenuFiltre .formGroup.dolu .select2-selection__rendered {
    color: var(--smMetin);
    font-weight: 700;
}
/* select2 yuklenmemis ham select icin ayni gorunum */
.solMenuYeni .solMenuFiltre select.formControl {
    height: 36px;
    background-color: var(--smGirdi);
    border: 1px solid var(--smCizgi);
    border-radius: 8px !important;
    font-size: 12px;
    color: var(--smSoluk);
}
.solMenuYeni .solMenuFiltre .formGroup.dolu select.formControl {
    color: var(--smMetin);
    font-weight: 700;
}

/* --------------------------------------------------------------------------
   Checkbox / radio gruplari (CS skin)
   -------------------------------------------------------------------------- */
.solMenuYeni .solMenuFiltre .optionGroup .options,
.solMenuYeni .solMenuFiltre .filter.optionGroup .options {
    background: var(--smGirdi);
    border: 1px solid var(--smCizgi);
    border-radius: 8px;
    padding: 4px;
    gap: 1px;
}
.solMenuYeni .solMenuFiltre .optionLabel,
.solMenuYeni .solMenuFiltre .optionLabel.mini {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 3px 5px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--smSoluk);
    line-height: 1.1;
}
.solMenuYeni .solMenuFiltre .optionLabel:hover {
    color: var(--smMetin);
}
.solMenuYeni .solMenuFiltre .optionLabel:has(.optionInput:checked) {
    background: var(--smVurguZemin);
    color: var(--smMetin);
    font-weight: 700;
}
.solMenuYeni .solMenuFiltre .optionInput {
    appearance: none;
    -webkit-appearance: none;
    width: 15px;
    height: 15px;
    flex: none;
    margin: 0;
    border-radius: 4px;
    border: 1px solid var(--smPasif);
    background: var(--smYuzey);
    cursor: pointer;
}
.solMenuYeni .solMenuFiltre .optionInput:checked {
    background: var(--smVurgu) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23181820' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 9px no-repeat;
    border-color: var(--smVurgu);
}
body.light .solMenuYeni .solMenuFiltre .optionInput:checked {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
/* Taban style.css seçili input'a :before ile beyaz check ikonu basar
   (.mini.optionLabel .optionInput:checked:before, content:url). Yeni tasarımda
   checkbox check'i background-image ile, radio ise halka ile çizilir; tabanın
   ikonu radio ortasında check bıraktığından kapsamda tamamen kapatılır. */
.solMenuYeni .solMenuFiltre .optionInput:checked:before {
    content: none !important;
}
.solMenuYeni .solMenuFiltre .optionInputRadio,
.solMenuYeni .solMenuFiltre .optionInputRadio:checked {
    border-radius: 999px;
}
.solMenuYeni .solMenuFiltre .optionInputRadio:checked {
    background: var(--smYuzey);
    border: 4px solid var(--smVurgu);
    box-sizing: border-box;
}
/* body.light kuralı (yukarıda) daha yüksek özgüllükle check background-image
   basıyor; radio'da light temada da halka kalmalı. */
body.light .solMenuYeni .solMenuFiltre .optionInputRadio:checked {
    background-image: none;
}

/* --------------------------------------------------------------------------
   Cevrimici saticilar anahtari (ilan listesi form-switch)
   -------------------------------------------------------------------------- */
.solMenuYeni .solMenuFiltre .form-switch.inputBlock {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0 0;
    border-top: 1px solid var(--smIcCizgi);
    border-radius: 0;
    margin: 0;
    min-height: 0;
    background:unset;
    box-shadow: unset;
}
.solMenuYeni .solMenuFiltre .form-switch.inputBlock .form-check-label {
    flex: 1;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--smMetin);
    padding: 0;
    margin: 0;
}
.solMenuYeni .solMenuFiltre .form-switch .switcher {
    width: 38px;
    height: 21px;
    flex: none;
    border-radius: 999px;
    background: var(--smCizgi);
    display: flex;
    align-items: center;
    padding: 0 3px;
    box-sizing: border-box;
    transition: background .18s;
}
.solMenuYeni .solMenuFiltre .form-switch .switcher span {
    width: 15px;
    height: 15px;
    border-radius: 999px;
    background: var(--smEtiket);
    display: block;
    transition: transform .18s, background .18s;
}
.solMenuYeni .solMenuFiltre .form-switch .switcher span i,
.solMenuYeni .solMenuFiltre .form-switch .switcher span i::after {
    display: none;
}
.solMenuYeni .solMenuFiltre .form-switch input:checked + .switcher {
    background: var(--smVurguZemin);
    border: 1px solid var(--smVurguCizgi);
}
.solMenuYeni .solMenuFiltre .form-switch input:checked + .switcher span {
    background: var(--smVurgu);
    transform: translateX(16px);
}

/* --------------------------------------------------------------------------
   Butonlar
   -------------------------------------------------------------------------- */
/* Kartin altindaki tam genislik yesil eylem dugmesi (+ YENI ILAN EKLE) */
.solMenuYeni .solMenuAnaButon,
.solMenuYeni a.newButton.solMenuAnaButon {
    display: block;
    width: 100%;
    padding: 13px 0;
    text-align: center;
    background: var(--smVurgu);
    color: var(--smButonMetin);
    border: 0;
    border-radius: 10px;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .4px;
}
.solMenuYeni .solMenuAnaButon:hover,
.solMenuYeni a.newButton.solMenuAnaButon:hover {
    filter: brightness(1.06);
    color: var(--smButonMetin);
}
.solMenuYeni .solMenuAnaButon i {
    margin-right: 6px;
}