/*
 * Urun listeleme sayfasindaki yatay "Urun bulucu" filtre bari
 * (resources/views/site/product/partials/filter-bar.blade.php).
 *
 * Marka renkleri style.css'teki :root degiskenlerinden gelir
 * (--dikkan-color, --dikkan-antrasit-color); burada yeniden tanimlanmaz ki
 * marka rengi tek yerden degistirilebilsin (finder.css ile ayni kural).
 *
 * Duzen: dolgu turuncu sutun basligi + altinda beyaz, acilir-kapanir alt
 * filtre satirlari. Dort sutun aralarinda 40px bosluk olan, her biri kendi
 * cercevesini tasiyan ayri bloklar.
 */

/*
 * Belgeler arasi yumusak gecis (deneme).
 *
 * Kullanim alani sayfasindan (/urunler/kategori/...) bir vana tipi secildiginde
 * /urunler'e GERCEK sayfa yuklemesiyle gidilir; bu iki sayfanin ustundeki filtre
 * bari ayni oldugu icin sicrama gozu rahatsiz ediyordu. Ajax'a cevirmek bar'in
 * paylasilan betigini, meta/canonical uretimini ve geri tusu davranisini
 * etkileyecegi icin once bu tek kural deneniyor: tarayici iki belge arasinda
 * capraz gecis (cross-fade) yapar, adres/meta/analitik tarafinda hicbir sey
 * degismez. Destegi olmayan tarayicida kural yok sayilir, davranis eskisi gibi.
 *
 * Bu dosya sadece filtre barinin bulundugu sayfalarda yuklendigi icin gecis de
 * yalnizca o sayfalar arasinda devreye girer (bkz. site/product/index.blade.php
 * ve site/product/category.blade.php @section('css')).
 */
@view-transition {
    navigation: auto;
}

/* Hareket azaltma tercihi olan kullanicida capraz gecis animasyonu
   calistirilmaz; sayfa dogrudan degisir. */
@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) {
        animation: none !important;
    }
}

.product-finder-bar {
    margin-bottom: 28px;
}

.product-finder-bar__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}

.product-finder-bar__title {
    font-size: 20px;
    font-weight: 700;
    color: var(--dikkan-antrasit-color);
    margin: 0;
}

/* Baslikla ayni satirdaki ince ikincil metin.
   Sol tarafinda ince bir dikey ayrac ':before' ile, baslikla arasindaki
   bosluk 'margin-left' ile veriliyor - yeni bir kap elemani acmadan. */
.product-finder-bar__subtitle {
    margin-left: 10px;
    padding-left: 10px;
    border-left: 1px solid #ddd;
    color: #9a9b9e;
    font-size: 13px;
    font-weight: 400;
}

.product-finder-bar__actions {
    display: flex;
    align-items: center;
    gap: 18px;
}

.product-finder-bar__action {
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--dikkan-color);
    cursor: pointer;
    text-decoration: underline;
    -webkit-appearance: none;
    appearance: none;
}

.product-finder-bar__action:hover {
    opacity: .8;
}

.product-finder-bar__action--reset {
    color: #6b6c6f;
}

/* ------------------------------------------------- birlesik sutun izgarasi */

/*
 * Sutunlar arasinda 40px bosluk. Kolonlar 1fr oldugu icin bosluk izgaranin
 * DIS genisligini buyutmez, sutunlar kendi arasinda daralarak yer acar.
 *
 * Zemin, cerceve ve yaricap izgarada degil .product-finder-column'da: ayri
 * bloklar oldugu icin her biri kendi cercevesini tasimali, yoksa 40px
 * bosluklarin uzerinden gecen tek bir cerceve kalirdi.
 *
 * align-items: start ZORUNLU: izgara ogeleri varsayilan olarak satirin en
 * yuksek ogesi kadar uzar; ayri bloklarda bu, KAPALI bir akordeonun 38px'lik
 * basligi altinda kocaman bos beyaz alan birakirdi.
 */
.product-finder-bar__columns {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 40px;
    align-items: start;
}

.product-finder-column {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: #fff;
    border: 1px solid #e4e4e7;
    border-radius: 12px;
    /* Turuncu baslik blogun yuvarlatilmis ust koselerine uysun. */
    overflow: hidden;
}

/* ------------------------------------------------------- sutun basligi */

.product-finder-column__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    background: var(--dikkan-color);
    border: none;
    /* Alcak serit: filtre bari kart alanini daha az asagi itiyor.
       Yatay padding alttaki arama seridiyle ayni, ayni hizada dursunlar. */
    padding: 14px 18px;
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 600;
    color: #fff;
    text-align: left;
    line-height: 1.3;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.product-finder-column__header i {
    /* Incelen seritte 17px sembol baskin duruyordu. */
    font-size: 15px;
    flex: 0 0 auto;
    transition: transform .2s ease;
}

.product-finder-column.is-collapsed .product-finder-column__header i {
    transform: rotate(180deg);
}

.product-finder-column.is-collapsed .product-finder-column__body {
    display: none;
}

.product-finder-column__body {
    flex: 1 1 auto;
}

/* --------------------------------------- alt filtre grubu (ic akordeon) */

/* Her grup kendi alt ayracini tasir. Komsuluk (+) secicisi kullanilmiyor:
   "Urun" sutununda ikinci grup ajax ile yenilenen bir sarmalayici div'in
   icinde durdugu icin gruplar kardes degil, komsuluk kurali tutmaz. */
.product-finder-group {
    border-bottom: 1px solid #e4e4e7;
}

.product-finder-group__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    background: #fff;
    border: none;
    padding: 14px 18px;
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--dikkan-color);
    text-align: left;
    line-height: 1.3;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.product-finder-group__header:hover {
    background: #fafafa;
}

.product-finder-group__header i {
    font-size: 16px;
    flex: 0 0 auto;
    color: var(--dikkan-color);
    transition: transform .2s ease;
}

.product-finder-group:not(.is-collapsed) .product-finder-group__header i {
    transform: rotate(180deg);
}

.product-finder-group.is-collapsed .product-finder-group__body {
    display: none;
}

.product-finder-group__body {
    padding: 0 10px 14px;
    /* Gorunmez radyo dugmesi absolute konumlanir; sicramamasi icin en yakin
       konumlandirilmis ata burasi olmali. */
    position: relative;
}

/* ------------------------------------------------------- secenek listesi */

.product-finder-group__body ul {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 230px;
    overflow-y: auto;
}

/* Kaydirilabilir liste oldugu belli olsun: referans tasarimda da kaydirma
   cubugu marka renginde ve gorunur duruyor. */
.product-finder-group__body ul::-webkit-scrollbar {
    width: 4px;
}

.product-finder-group__body ul::-webkit-scrollbar-track {
    background: #f1f1f2;
}

.product-finder-group__body ul::-webkit-scrollbar-thumb {
    background: var(--dikkan-color);
    border-radius: 2px;
}

.product-finder-group__body li {
    /* "x" dugmesi satira gore konumlaniyor. */
    position: relative;
    display: block;
    margin: 0 0 2px;
    padding: 0;
    text-align: left;
}

.product-finder-group__body li:last-child {
    margin-bottom: 0;
}

/*
 * Radyo dugmesi GORUNMEZ ama DOM'da kalir: secenek satirinin tamami
 * (label) tiklanabilir olur, form JS olmadan da submit edilebilir ve
 * ekran okuyucu icin "bir gruptan bir secim" anlami korunur. display:none
 * verilmiyor - o, elemani klavye erisiminden de cikarirdi.
 */
.product-finder-group__body input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
    margin: 0;
}

.product-finder-group__body label {
    display: block;
    text-align: left;
    font-size: 13px;
    color: var(--dikkan-antrasit-color);
    cursor: pointer;
    line-height: 1.4;
    padding: 5px 8px;
    border-radius: 3px;
    transition: background-color .15s, color .15s;
}

.product-finder-group__body label:hover {
    background: #f7f7f8;
    color: var(--dikkan-color);
}

/* Secili secenek: radyo halkasi olmadigi icin renk + kalinlik tasiyor.
   Sag bosluk, satirin sagindaki "x" dugmesine yer acar. */
.product-finder-group__body input[type="radio"]:checked + label {
    color: var(--dikkan-color);
    font-weight: 700;
    background: rgba(255, 65, 0, .07);
    padding-right: 28px;
}

/* Klavyeyle gezinen kullanici da hangi secenekte oldugunu gormek zorunda. */
.product-finder-group__body input[type="radio"]:focus-visible + label {
    outline: 2px solid var(--dikkan-color);
    outline-offset: 1px;
}

.finder-bar-count {
    color: #9a9a9d;
    font-size: 12px;
}

/*
 * Secili secenegi kaldiran "x" dugmesi.
 *
 * Yalnizca secili satirda gorunur: her satirda durmasi listeyi okunmaz
 * hale getirirdi, ayrica secili olmayan bir secenekte "kaldir" anlamsiz.
 * Kardes secici kullanilabiliyor cunku gizli radyo, DOM'da label ve
 * dugmeden ONCE duruyor (bkz. finder-facet-options.blade.php).
 *
 * Label'in kendisi tiklanir alan oldugu icin dugme label'in USTUNE degil,
 * satirin sagina konumlanir ve secili label ona yer acacak kadar sag
 * bosluk alir - aksi halde uzun malzeme adlari "x"in altina girerdi.
 */
.finder-option__clear {
    display: none;
    position: absolute;
    top: 50%;
    right: 4px;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    border-radius: 3px;
    background: transparent;
    color: var(--dikkan-color);
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    transition: background-color .15s;
}

.product-finder-group__body input[type="radio"]:checked ~ .finder-option__clear {
    display: flex;
    align-items: center;
    justify-content: center;
}

.finder-option__clear:hover,
.finder-option__clear:focus-visible {
    background: rgba(255, 65, 0, .16);
}

/* ------------------------------------------- serbest metin arama seridi */

/* Barin altinda, sutun izgarasiyla ayni cerceve/yaricap dilinde tek bir
   beyaz serit. Referans tasarimda cerceve renksizdir; burada marka rengi
   yalnizca ikonda ve odakta gorunur - turuncu bir kutu, ustundeki turuncu
   sutun basliklariyla yarisirdi. */
.product-search {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
    /* Yatay padding ustteki sutun basliklariyla ayni, ayni hizada dursunlar. */
    padding: 0 18px;
    background: #fff;
    border: 1px solid #e4e4e7;
    border-radius: 6px;
    transition: border-color .15s;
}

/* Cerceve alanin tamamina ait: odak halkasi input'ta degil seritte gorunur,
   aksi halde tarayicinin varsayilan outline'i beyaz seridin icinde kesik
   duruyor. */
.product-search:focus-within {
    border-color: var(--dikkan-color);
}

/* <label>: ikona tiklamak da imleci alana koyar. */
.product-search__icon {
    display: flex;
    align-items: center;
    margin: 0;
    flex: 0 0 auto;
    /* Incelen seride gore kucultuldu (sutun basligindaki sembolle ayni oran). */
    font-size: 20px;
    color: var(--dikkan-color);
    cursor: text;
}

.product-search input {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    background: none;
    /* Serit ustteki sutun basliklariyla ayni yukseklikte kalsin diye alcak.
       line-height ACIKCA veriliyor: input line-height'i body'den 26px miras
       aliyordu, seridin yuksekligi tarayiciya gore oynuyordu. */
    padding: 15px 0;
    line-height: 1.3;
    font-family: inherit;
    font-size: 14.5px;
    color: var(--dikkan-antrasit-color);
    -webkit-appearance: none;
    appearance: none;
}

.product-search input:focus {
    outline: none;
}

.product-search input::placeholder {
    color: #9a9a9d;
    opacity: 1;
}

.product-finder-column__hint {
    font-size: 13px;
    color: #9a9a9d;
    margin: 0;
    padding: 16px 18px;
}

/*
 * Ajax suresince geri bildirim. Sonuc listesi soluklastirilir ve tiklama
 * kapatilir: yavas baglantida kullanici eski listeye bakip filtresinin
 * uygulanmadigini sanmasin, yarim yenilenmis listeye tiklamasin.
 */
.product-finder-bar.is-loading,
#product-results.is-loading {
    opacity: .55;
    transition: opacity .15s ease;
}

#product-results.is-loading {
    pointer-events: none;
}

/* ---------------------------------------------------------- responsive */

/* Sutunlar ayri bloklar ve her biri kendi cercevesini tasiyor; bu
   bantlarda yalnizca kolon sayisi ve bosluk degisiyor - 40px iki kolonda cok
   genis duruyordu. */
@media (max-width: 991px) {
    .product-finder-bar__columns {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
    }
}

@media (max-width: 767px) {
    .product-finder-bar__columns {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }
}

/* Kullanim alani sayfasinda arama metnine uyan kategori karti kalmadiginda
   izgaranin altinda gorunen blok (bkz. category-card-search.js). */
.category-search-empty {
    padding: 40px 20px;
    text-align: center;
}

.category-search-empty p {
    margin: 0 0 12px;
    color: var(--dikkan-antrasit-color);
    font-size: 16px;
}

/* ------------------------------------------------- finder-promo-cards */

/*
 * Yalnizca iki buton: "Sihirbazi Baslat" ve "AI ile Urun Bul". Konum:
 * breadcrumb'in HEMEN ALTI, sola yasli (bkz. product/index.blade.php ve
 * product/subcategory.blade.php).
 */
.finder-promo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin: 16px 0 0;
    /* Negatif margin yok: butonlar urun bolumunun ust boslugunun icine
       binmiyor, bosluk dogrudan urun bolumunun ust dolgusundan geliyor (style.css
       ".product-area--after-crumb"). */
    margin-bottom: 0;
}

.finder-promo__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    border: none;
    border-radius: 10px;
    background: var(--dikkan-color);
    color: #fff;
    font-weight: 600;
    font-size: 14.5px;
    font-family: inherit;
    white-space: nowrap;
    cursor: pointer;
    transition: background-image .18s ease;
}

.finder-promo__btn:hover,
.finder-promo__btn:focus-visible {
    background-image: linear-gradient(rgba(0, 0, 0, .12), rgba(0, 0, 0, .12));
    color: #fff;
    text-decoration: none;
}

.finder-promo__btn i {
    font-size: 14px;
}

/* Acik, yanardoner "AI" butonu - koseleri pembe/camgobegi, ortasi buz
   mavisi zemin; camgobegi-mor-pembe gecisli ince cerceve; disinda hafif
   camgobegi/pembe parlama; koyu indigo yazi; ikon mavi-mor-pembe gecisli.

   Cerceve 'border' DEGIL, '::before' uzerinde maskeli halka: gercek bir
   kenarlik butonu sihirbaz butonundan 3px buyuturdu. '::after' mobilde
   ok isareti icin kullaniliyor (products-mobile.css), o yuzden '::before'. */
.finder-promo__btn--ai {
    --finder-ai-fill:
        radial-gradient(90% 160% at 0% 0%, #FDF0FE 0%, rgba(253, 240, 254, 0) 60%),
        radial-gradient(90% 160% at 100% 0%, #D2F0FF 0%, rgba(210, 240, 255, 0) 60%),
        radial-gradient(90% 160% at 0% 100%, #DFF6FD 0%, rgba(223, 246, 253, 0) 60%),
        radial-gradient(90% 160% at 100% 100%, #F9CCFD 0%, rgba(249, 204, 253, 0) 60%),
        linear-gradient(#EBF4FF, #EBF4FF);
    position: relative;
    background: var(--finder-ai-fill);
    color: #2B2475;
    box-shadow:
        inset 0 0 0 3px rgba(255, 255, 255, .85),
        0 -3px 14px rgba(94, 206, 253, .28),
        0 5px 16px rgba(209, 77, 247, .22);
    transition: box-shadow .18s ease;
}

.finder-promo__btn--ai::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1.5px;
    border-radius: inherit;
    background: linear-gradient(120deg, #A59CFA 0%, #5ECEFD 35%, #A9F1FE 55%, #828DFD 75%, #D14DF7 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

/* Taban hover kurali zemine koyu bir katman ekleyip yaziyi beyaza
   ceviriyordu - burada zemin korunuyor, sadece parlama belirginlesiyor. */
.finder-promo__btn--ai:hover,
.finder-promo__btn--ai:focus-visible {
    background: var(--finder-ai-fill);
    color: #2B2475;
    box-shadow:
        inset 0 0 0 3px rgba(255, 255, 255, .85),
        0 -4px 18px rgba(94, 206, 253, .4),
        0 6px 20px rgba(209, 77, 247, .32);
}

.finder-promo__btn--ai i {
    background: linear-gradient(135deg, #5361FD 0%, #A764FA 55%, #C363F9 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Hover'da "AI oldugu anlasilsin" - cercevede akan renk gecisi, zeminden
   soldan saga gecen parlama seridi, camgobegi/pembe yer degistiren nabizli
   parlama ve renk kaydiran ikon. Parlama '::after' DEGIL, zeminin en ust
   katmani: '::after' mobilde ok isareti (products-mobile.css). Ayni
   animasyon /v1'deki butonda da var (home-v1.css '.v1-products__findai'). */
.finder-promo__btn--ai:hover,
.finder-promo__btn--ai:focus-visible {
    background:
        linear-gradient(110deg, rgba(255, 255, 255, 0) 32%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 68%),
        var(--finder-ai-fill);
    background-size: 250% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
    background-repeat: no-repeat;
    animation:
        finder-ai-shine 1.3s ease-in-out infinite,
        finder-ai-glow 1.1s ease-in-out infinite alternate;
}

.finder-promo__btn--ai:hover::before,
.finder-promo__btn--ai:focus-visible::before {
    background: linear-gradient(90deg, #A59CFA 0%, #5ECEFD 10%, #A9F1FE 20%, #828DFD 30%, #D14DF7 40%, #A59CFA 50%, #5ECEFD 60%, #A9F1FE 70%, #828DFD 80%, #D14DF7 90%, #A59CFA 100%);
    background-size: 200% 100%;
    padding: 2.5px;
    animation: finder-ai-ring 1.4s linear infinite;
}

.finder-promo__btn--ai:hover i,
.finder-promo__btn--ai:focus-visible i {
    animation: finder-ai-hue 1.1s ease-in-out infinite alternate;
}

@keyframes finder-ai-shine {
    0%   { background-position: 100% 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
    65%, 100% { background-position: 0% 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
}

@keyframes finder-ai-ring {
    from { background-position: 0% 0; }
    to   { background-position: 100% 0; }
}

@keyframes finder-ai-glow {
    from {
        box-shadow:
            inset 0 0 0 3px rgba(255, 255, 255, .85),
            0 -6px 24px rgba(94, 206, 253, .65),
            0 8px 28px rgba(209, 77, 247, .55);
    }
    to {
        box-shadow:
            inset 0 0 0 3px rgba(255, 255, 255, .85),
            0 -6px 28px rgba(209, 77, 247, .62),
            0 8px 32px rgba(94, 206, 253, .68);
    }
}

@keyframes finder-ai-hue {
    from { filter: hue-rotate(-70deg); }
    to   { filter: hue-rotate(80deg); }
}

@media (prefers-reduced-motion: reduce) {
    .finder-promo__btn--ai:hover,
    .finder-promo__btn--ai:focus-visible,
    .finder-promo__btn--ai:hover::before,
    .finder-promo__btn--ai:focus-visible::before,
    .finder-promo__btn--ai:hover i,
    .finder-promo__btn--ai:focus-visible i {
        animation: none;
    }
}

@media (max-width: 480px) {
    .finder-promo {
        flex-direction: column;
        align-items: stretch;
    }

    .finder-promo__btn {
        justify-content: center;
    }
}

.category-search-empty a {
    display: inline-block;
    color: var(--dikkan-color);
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
}

.category-search-empty a:hover {
    color: var(--dikkan-antrasit-color);
}

/* ---------------------------------------------------------------------------
   Sonuc sayaci: filtre barinin altinda, kart izgarasinin hemen ustunde
   ("85 ürün bulundu · 31 ürün grubu"). Isaretleme grid partial'inin icinde
   (site/product/partials/grid.blade.php), boylece ajax guncellemesinde
   kendiliginden tazeleniyor.

   Saga hizali: sol tarafta zaten kullanim alani/vana tipi basligi ve aktif
   filtre rozetleri var, sayac oraya girmesin. Alt-ust margin, yazinin arama
   seridi ile ilk kart satiri arasinda sikismamasi icin (kartlarin ilk
   satirinda 'no-mt' var, yani ustten kendi bosluklarini vermiyorlar).
--------------------------------------------------------------------------- */
.product-result-count {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: baseline;
    gap: 6px;
    margin: 22px 0 18px;
    font-size: 15px;
    line-height: 1.4;
    color: var(--dikkan-antrasit-color);
}

.product-result-count__total {
    font-weight: 600;
}

/* Ikincil sayi: ayirici nokta CSS'ten gelir, ceviri metni kirlenmesin. */
.product-result-count__groups {
    color: #6b7280;
}

.product-result-count__groups::before {
    content: "·";
    margin-right: 6px;
}

.product-result-count__empty {
    font-weight: 600;
    color: var(--dikkan-color);
}

/* ---------------------------------------------------------------------------
   Sihirbaz modali: "Sihirbazi baslat" butonu /product-finder/wizard'a
   gitmek yerine ayni sihirbazi (finder.js, 'mode: embedded') bu urun listesi
   sayfasinin USTUNDE bir modal icinde aciyor - bkz.
   finder-wizard-modal.blade.php ve finder-wizard-modal.js.

   '.finder-wizard' zaten kendi beyaz kart govdesini tasiyor (bkz. finder.css)
   - modal kutusu (.finder-wizard-modal__box) ikinci bir kart olmasin diye
   asagida o govdenin kendi border/golge/dolgusu bilerek iptal ediliyor, tek
   katman (kutunun kendisi) kaliyor. --------------------------------------- */
.finder-wizard-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1200;
    align-items: flex-start;
    justify-content: center;
    padding: 5vh 16px;
    overflow-y: auto;
}

.finder-wizard-modal.is-open {
    display: flex;
}

body.finder-wizard-modal-open {
    overflow: hidden;
}

.finder-wizard-modal__overlay {
    position: fixed;
    inset: 0;
    background: rgba(20, 20, 22, .55);
}

.finder-wizard-modal__box {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 900px;
    max-height: 90vh;
    /* Kutu kendisi kaymiyor. Ilerleme seridi, rozet ve alt cubuk sabit;
       aradaki adim govdesi (.finder-step) kayiyor - bkz. asagidaki 'kompakt
       duzen' blogu. */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .35);
}

.finder-wizard-modal__box .finder-wizard {
    border: none;
    box-shadow: none;
    max-width: none;
    margin: 0;
    /* --finder-pad-x: finder.css'teki sabit alt cubuk ve ilerleme seridi
       kenardan kenara bu degerle uzaniyor. Alt dolgu yok: cubuk kutunun
       alt kenarina oturur. */
    --finder-pad-x: 34px;
    padding: 20px var(--finder-pad-x) 0;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* ---------------------------------------------------------------------------
   Kompakt duzen: sihirbazdaki gereksiz bosluklar alindi. Yalnizca modal;
   ayri sihirbaz sayfasi (finder.css) degismedi.
   - ilerleme seridi ~90px (32px daireler)
   - secim rozeti kompakt ve adimiyla birlikte ("Endustri: Gemi", finder.js)
   - 2. adimda baslik solda, arama sagda (finder.js '.finder-step__head')
   - masaustunde 4 kolon, ~200px kart, urun sayisi rozet degil duz metin
   - alt cubuk ~75px, 2. adimdaki "Atla" ikincil metin dugmesi
   - yalnizca adim govdesi kayar; serit, rozet ve alt cubuk yerinde kalir */

.finder-wizard-modal__box .finder-progress,
.finder-wizard-modal__box .finder-chips,
.finder-wizard-modal__box .finder-actions {
    flex: 0 0 auto;
}

/* Negatif yan bosluk + ayni ic bosluk: kaydirma cubugu kutunun kenarinda
   durur, kartlarin hover cercevesi kirpilmaz. */
.finder-wizard-modal__box .finder-step {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    margin: 0 calc(var(--finder-pad-x) * -1);
    padding: 4px var(--finder-pad-x) 0;
}

.finder-wizard-modal__box .finder-progress {
    margin-bottom: 16px;
    padding-bottom: 14px;
}

.finder-wizard-modal__box .finder-progress li {
    gap: 6px;
    font-size: 14px;
}

.finder-wizard-modal__box .finder-progress__num {
    width: 32px;
    height: 32px;
    font-size: 14px;
}

.finder-wizard-modal__box .finder-progress li.is-done .finder-progress__num {
    font-size: 16px;
}

.finder-wizard-modal__box .finder-progress li:not(:last-child)::after {
    top: 15px;
    left: calc(50% + 24px);
    right: calc(-50% + 24px);
}

.finder-wizard-modal__box .finder-chips {
    gap: 8px;
    margin-bottom: 12px;
}

.finder-wizard-modal__box .finder-chip {
    gap: 6px;
    padding: 5px 12px;
    font-size: 13px;
}

.finder-wizard-modal__box .finder-chip i {
    font-size: 13px;
}

.finder-wizard-modal__box .finder-step__title {
    font-size: 24px;
    margin-bottom: 16px;
}

.finder-wizard-modal__box .finder-step__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 16px;
}

.finder-wizard-modal__box .finder-step__head .finder-step__title {
    margin-bottom: 0;
}

.finder-wizard-modal__box .finder-step__head .finder-search {
    flex: 0 0 300px;
    margin-bottom: 0;
}

.finder-wizard-modal__box .finder-search input {
    height: 44px;
}

.finder-wizard-modal__box .finder-grid {
    margin-top: 0;
}

/* Vana tipi karti (foto varyanti degil): ~200px, gorsel 115px, altinda ad
   ve gri duz metin urun sayisi. Hover: ince turuncu cerceve + hafif golge,
   yukselme yok. */
.finder-wizard-modal__box .finder-grid:not(.finder-grid--photo) .finder-card {
    height: auto;
    padding: 12px 10px;
}

.finder-wizard-modal__box .finder-grid:not(.finder-grid--photo) .finder-card__media {
    height: 115px;
    margin-bottom: 8px;
    padding: 4px;
}

.finder-wizard-modal__box .finder-card {
    border-width: 1px;
}

.finder-wizard-modal__box .finder-card:hover,
.finder-wizard-modal__box .finder-card:focus-visible {
    transform: none;
    box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .18);
}

.finder-wizard-modal__box .finder-card__name {
    font-size: 14.5px;
    margin-bottom: 4px;
}

.finder-wizard-modal__box .finder-card__count,
.finder-wizard-modal__box .finder-card:hover .finder-card__count,
.finder-wizard-modal__box .finder-card:focus-visible .finder-card__count {
    background: none;
    padding: 0;
    border-radius: 0;
    font-weight: 500;
    color: #8b8c90;
}

@media (min-width: 768px) {
    .finder-wizard-modal__box .finder-grid:not(.finder-grid--photo) {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 14px;
    }
}

.finder-wizard-modal__box .finder-actions {
    margin-top: 0;
    padding-top: 18px;
    padding-bottom: 18px;
}

.finder-wizard-modal__box .finder-submit {
    padding: 11px 22px;
    font-size: 15px;
}

/* 2. adimdaki "Atla ve sonuclari gor": ikincil eylem, turuncu metin. */
.finder-wizard-modal__box .finder-actions .finder-submit--skip,
.finder-wizard-modal__box .finder-actions .finder-submit--skip:hover {
    background: none;
    box-shadow: none;
    transform: none;
    color: var(--dikkan-color);
    padding: 8px 4px;
    justify-content: flex-end;
}

/* Genis ekranda ilerleme seridine sagdan margin VERILMEZ: serit kenardan
   kenara cizgi tasidigi icin sagdan kisaltmak cizgiyi de keser. Adim adlari
   dairelerin altinda ve son adimin adi kendi sutununda ortali; kapat
   dugmesinin altina uzanmiyor. */

.finder-wizard-modal__close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: #f2f2f4;
    color: var(--dikkan-antrasit-color);
    font-size: 16px;
    cursor: pointer;
    transition: background-color .15s ease;
}

.finder-wizard-modal__close:hover {
    background: #e4e4e7;
}

/* Mobil popup: secim rozetleri ve kart metinleri daha hafif bir olcekte. */
@media (max-width: 767px) {
    .finder-wizard-modal__close {
        top: 10px;
        right: 10px;
    }

    /* 32px daire ve cizgi konumu artik her genislikte (kompakt duzen). */
    .finder-wizard-modal__box .finder-progress {
        padding-bottom: 12px;
    }

    .finder-wizard-modal__box .finder-progress li {
        font-size: 12px;
    }

    .finder-wizard-modal__box .finder-chip {
        max-width: 100%;
        min-height: 32px;
        padding: 5px 10px;
        font-size: 12.5px;
        line-height: 1.4;
        text-align: left;
        overflow-wrap: anywhere;
    }

    .finder-wizard-modal__box .finder-chip i {
        flex-shrink: 0;
        font-size: 13px;
    }

    .finder-wizard-modal__box .finder-step__title {
        font-size: 20px;
    }

    /* Dar ekranda baslik ve arama alt alta, arama tam genislik. */
    .finder-wizard-modal__box .finder-step__head {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .finder-wizard-modal__box .finder-step__head .finder-search {
        flex-basis: auto;
    }

    .finder-wizard-modal__box .finder-step__desc {
        font-size: 14px;
        line-height: 1.6;
    }

    /* Yalnizca vana tipi kartlari: sektor fotograflari kendi oranini korur.
       'min-height' yok - urun sayisi rozet degil duz metin, kart kendi icerigi
       kadar. */
    .finder-wizard-modal__box .finder-grid:not(.finder-grid--photo) .finder-card {
        padding: 10px 10px 12px;
    }

    .finder-wizard-modal__box .finder-grid:not(.finder-grid--photo) .finder-card__media {
        height: 110px;
        flex-shrink: 0;
        padding: 2px;
    }

    .finder-wizard-modal__box .finder-grid:not(.finder-grid--photo) .finder-card__media img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .finder-wizard-modal__box .finder-grid:not(.finder-grid--photo) .finder-card__name {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 2.7em;
        margin-bottom: 8px;
        overflow-wrap: anywhere;
    }

    .finder-wizard-modal__box .finder-facet__label {
        font-size: 16px;
        margin-bottom: 12px;
    }

    .finder-wizard-modal__box .finder-option {
        gap: 8px;
        padding: 14px 10px;
    }

    .finder-wizard-modal__box .finder-option__swatch {
        width: 14px;
        height: 14px;
        flex-basis: 14px;
    }

    .finder-wizard-modal__box .finder-option__name {
        font-size: 13px;
        line-height: 1.4;
    }

    .finder-wizard-modal__box .finder-option__count {
        font-size: 12px;
        line-height: 1.5;
    }

    .finder-wizard-modal__box .finder-option__check {
        width: 20px;
        height: 20px;
        flex-basis: 20px;
        font-size: 12px;
    }

    .finder-wizard-modal__box .finder-actions {
        gap: 10px;
    }

    .finder-wizard-modal__box .finder-forward {
        min-width: 0;
    }

    .finder-wizard-modal__box .finder-back,
    .finder-wizard-modal__box .finder-skip {
        min-height: 44px;
        font-size: 13px;
    }

    .finder-wizard-modal__box .finder-submit {
        min-width: 0;
        min-height: 44px;
        gap: 6px;
        padding: 12px 10px;
        font-size: 13px;
        line-height: 1.4;
        white-space: normal;
    }
}

@media (max-width: 480px) {
    .finder-wizard-modal {
        padding: 0;
    }

    .finder-wizard-modal__box {
        max-width: none;
        max-height: 100vh;
        height: 100%;
        border-radius: 0;
    }

    /* Tam ekran kutuda icerik kisa kalsa da aksiyon cubugu ekranin altinda
       durur: sihirbaz kutuyu doldurur, cubuk en alta itilir. */
    /* Flex sutun duzeni ve kutuyu doldurma artik her genislikte (kompakt
       duzen); burada yalnizca dolgu. */
    .finder-wizard-modal__box .finder-wizard {
        --finder-pad-x: 20px;
        padding: 44px var(--finder-pad-x) 0;
    }

    /* '.finder-step'e alt margin verilmez: adim govdesi esneyip kayan alan,
       cubugu zaten en alta o itiyor. */

    .finder-wizard-modal__box .finder-actions {
        margin-top: auto;
    }
}