/* Ürün listesi üst araç çubuğu — premium (var token'lar → dark-mode otomatik) */
.pl-toolbar {
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .75rem;
    padding: .7rem .95rem; margin-bottom: 1.25rem;
    background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
    box-shadow: 0 8px 24px -18px rgba(0, 0, 0, .35);
}
.pl-count { font: 500 .92rem/1 "Montserrat", sans-serif; color: var(--muted); letter-spacing: .01em; }
.pl-count strong { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }

.pl-controls { display: flex; gap: .5rem; flex-wrap: wrap; }
.pl-select { position: relative; display: inline-flex; align-items: center; }
.pl-field {
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    border: 1px solid var(--border); background: var(--surface); color: var(--text);
    font: 500 .86rem/1 "Montserrat", sans-serif; border-radius: 999px;
    padding: .55rem 2.35rem .55rem 2.2rem; cursor: pointer;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.pl-field:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); }
.pl-field:focus-visible { outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.pl-select__icon { position: absolute; left: .92rem; color: var(--muted); font-size: .95rem; pointer-events: none; }
.pl-select__caret { position: absolute; right: .92rem; color: var(--muted); font-size: .72rem; pointer-events: none;
    transition: transform .18s ease; }

/* Filtre açılır menüleri (Kategori / Fiyat) — tetikleyici .pl-field pill'iyle birebir aynı görünür.
   data-bs-display="static": konum Popper'sız, tamamen CSS'te (masaüstü: pill'in altı, telefon: çubuk genişliği). */
.pl-trigger { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.pl-trigger.is-active { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.pl-trigger.is-active ~ .pl-select__icon { color: var(--accent); }
.pl-trigger[aria-expanded="true"] ~ .pl-select__caret { transform: rotate(180deg); }

.pl-menu {
    --bs-dropdown-bg: var(--surface); --bs-dropdown-color: var(--text);
    --bs-dropdown-border-color: var(--border); --bs-dropdown-border-radius: 12px;
    --bs-dropdown-link-color: var(--text); --bs-dropdown-link-hover-color: var(--text);
    --bs-dropdown-link-hover-bg: color-mix(in srgb, var(--accent) 8%, transparent);
    --bs-dropdown-link-active-color: var(--accent);
    --bs-dropdown-link-active-bg: color-mix(in srgb, var(--accent) 12%, transparent);
    min-width: 220px; max-width: calc(100vw - 32px); max-height: min(60vh, 420px); overflow-y: auto;
    padding: .35rem; margin-top: .35rem !important;
    box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .45);
    font: 500 .88rem/1.35 "Montserrat", sans-serif;
}
.pl-menu .dropdown-item { border-radius: 8px; padding: .5rem .75rem; white-space: normal; }
.pl-menu .dropdown-item.active { font-weight: 700; }
.pl-menu__sub { padding-left: 1.9rem !important; font-size: .84rem; color: var(--muted); position: relative; }
.pl-menu__sub::before { content: ""; position: absolute; left: 1rem; top: 50%; width: .45rem; height: 1px; background: currentColor; opacity: .5; }

.pl-menu--price { width: 290px; max-width: calc(100vw - 32px); padding: .85rem; }
.pl-price__row { display: flex; align-items: flex-end; gap: .5rem; }
.pl-price__field { flex: 1 1 0; min-width: 0; margin: 0; }
.pl-price__field span { display: block; font-size: .74rem; font-weight: 600; color: var(--muted); margin-bottom: .25rem; }
.pl-price__sep { color: var(--muted); padding-bottom: .4rem; }
.pl-price__actions { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-top: .75rem; }
.pl-price__clear { color: var(--muted); font-size: .84rem; text-decoration: none; }
.pl-price__clear:hover { color: var(--accent); text-decoration: underline; }
.pl-price__apply {
    border: 0; border-radius: 999px; padding: .5rem 1.1rem; min-height: 38px;
    background: var(--accent); color: #fff; font: 600 .84rem/1 "Montserrat", sans-serif; cursor: pointer;
}
.pl-price__apply:hover { filter: brightness(1.1); }
.pl-price__apply:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Aktif filtre varken: tümünü sıfırla (→ /urunler) */
.pl-clear {
    display: inline-flex; align-items: center; gap: .35rem; padding: .55rem .4rem;
    color: var(--muted); font: 500 .84rem/1 "Montserrat", sans-serif; text-decoration: none; white-space: nowrap;
}
.pl-clear:hover { color: var(--accent); text-decoration: underline; }

@media (max-width: 575.98px) {
    .pl-toolbar { justify-content: center; }
    /* Telefonda 2 sütunlu eşit ızgara: pill'ler tam genişlik, menüler ekrana sığar (16px kenar) */
    .pl-controls { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
    .pl-controls .pl-select, .pl-controls .pl-field { width: 100%; }
    .pl-trigger { max-width: none; }
    .pl-clear { grid-column: 1 / -1; justify-content: center; }
    /* Menüler iki sütunu kaplar (pill ×2 + boşluk = çubuk içi genişlik): sol pill'den sağa,
       sağ pill'den (Fiyat) sola açılır — yatay taşma/scroll olmaz */
    .pl-menu[data-bs-popper] { width: calc(200% + .5rem); min-width: 0; max-width: none; }
    .pl-select--sag .pl-menu[data-bs-popper] { left: auto; right: 0; }
}

/* Mobil: iOS Safari odak-zoom'unu engelle (font-size >= 16px) + dokunma hedefi >= 44px */
@media (max-width: 767.98px) {
    .pl-field { font-size: 16px; min-height: 44px; }
    .pl-page .form-control-sm,
    .pl-page .form-select-sm { font-size: 16px; min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
    .pl-field, .pl-select__caret { transition: none; }
}