/* ============================================================================
   collection-v7.css : koleksiyon (v7.1). Başlık · filtre · ızgara (3/2/1 kolon,
   kartlar fotoğrafın doğal 4:3 oranında, ad + tagline altta) · boş durum.
   Kart stilleri base-v7.css (.pcard/.media) içinde. Yalnız token, iki tema.
   ========================================================================= */

/* ---------- 1 · Başlık ----------
   Dikey zincir (1440x900): header 72 · 24 · H1 58 · 16 · giriş 27 · 16 · filtre şeridi 60 ·
   24 · ilk kart satırı (408 x 305 fotoğraf + künye) => ilk satır katlamanın üstünde. */
.col-head{padding-top:var(--sp-4);padding-bottom:var(--sp-3)}
.col-head__top{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"title status" "lead lead";align-items:baseline;column-gap:var(--sp-5)}
.col-head__title{grid-area:title}
.col-filter__status{grid-area:status}
.col-head__lead{grid-area:lead;margin-top:var(--sp-3);max-width:62rem;color:var(--c-text-2)}
.col-filter__status{display:flex;flex-direction:row-reverse;align-items:baseline;gap:var(--sp-4)}
.col-filter__count{font-family:var(--f-display);font-weight:var(--w-display);font-size:1.375rem;line-height:var(--lh-snug);letter-spacing:var(--tr-heading);color:var(--c-ink);white-space:nowrap}
.col-filter__clear{min-height:44px;font-size:var(--t-body-s)}
/* Yeri rezerve: "Filtreleri temizle" belirince sayaç kaymaz (visibility ağaçtan ve sekmeden de çıkarır). */
.col-filter__clear[hidden]{display:inline-flex !important;visibility:hidden}

/* ---------- 2 · Filtre şeridi (v7.2, yapışkan cam) ----------
   Tek satır: [Ayak etiketi + chip'ler] | [Kumaş tonu etiketi + chip'ler]. Header'ın hemen altında
   yapışır; yapışınca (is-stuck, collection-v7.js IntersectionObserver) cam olur: yarı saydam token
   zemin + blur + alt kenarda gradient hairline. Header'ın kendi hairline'ı bu sırada gizlenir,
   ikisi tek cam katman gibi okunur. JS yoksa şerit opak paper zeminle yapışır (altı görünmez). */
.col-bar__sentinel{display:block;height:1px;margin-bottom:-1px}
.col-bar{position:sticky;top:var(--hdr-h);z-index:calc(var(--z-header) - 1);padding-block:var(--sp-2);background-color:transparent;transition:background-color var(--du-hover) var(--ez-out)}
.col-bar::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--glass-hair);opacity:0;pointer-events:none;transition:opacity var(--du-hover) var(--ez-out)}
.col-bar.is-stuck{background-color:var(--glass-bar);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat))}
.col-bar.is-stuck::after{opacity:1}
html:not(.js) .col-bar{background-color:var(--c-paper)}
body:has(.col-bar.is-stuck) .site-header::after{opacity:0}

.col-filter{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2) var(--sp-5)}
.chip-group{position:relative;display:flex;align-items:center;gap:var(--sp-3)}
.chip-group + .chip-group{padding-left:var(--sp-5)}
.chip-group + .chip-group::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:1px;background:var(--c-hair-strong)}
.chip-group__label{font-size:var(--t-label);font-weight:var(--w-ui);letter-spacing:var(--tr-label);line-height:var(--lh-ui);color:var(--c-text-2);white-space:nowrap}
.chip-group__list{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
/* Layout shift 0: iki katman aynı hücrede üst üste. Genişliği her zaman "ikon + etiket"
   katmanı belirler; seçili değilken yalnız ortalanmış etiket görünür (dengeli boşluk),
   seçilince ikonlu katman belirir. Chip genişliği ve satır asla değişmez.
   Erişilebilir ad ikonlu katmandan (opacity ile gizli, ağaçta kalır); düz katman aria-hidden.
   Sessiz sekme: hafif kenarlık (hair-strong), dolgu yok; yalnız seçili chip dolgulu.
   v7.2: tam pill; geçiş yalnız background-color + transform; basınca .97. */
.chip{display:inline-grid;place-items:center;height:44px;padding:0 18px;border:1px solid var(--c-hair-strong);border-radius:var(--r-pill);background-color:transparent;color:var(--c-text);font-size:.875rem;font-weight:var(--w-ui);line-height:1;text-decoration:none;white-space:nowrap;-webkit-tap-highlight-color:transparent;transition:background-color var(--du-micro) var(--ez-out),transform var(--du-micro) var(--ez-out)}
.chip__on,.chip__off{grid-area:1 / 1;transition:opacity var(--du-micro) var(--ez-out)}
.chip__on{display:inline-flex;align-items:center;gap:6px;opacity:0}
.chip__check{display:inline-flex;flex:none;width:16px;height:16px}
.chip__check .icon{width:16px;height:16px}
.chip[aria-pressed="true"]{background-color:var(--c-selected);border-color:var(--c-selected);color:var(--c-on-action)}
.chip[aria-pressed="true"] .chip__on{opacity:1}
.chip[aria-pressed="true"] .chip__off{opacity:0}
.chip:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.chip[aria-pressed="false"]:hover{background-color:var(--c-stage)}}
.col-bar.is-stuck .chip[aria-pressed="false"]{background-color:color-mix(in srgb, var(--c-paper) 40%, transparent)}
@media (hover:hover) and (pointer:fine){.col-bar.is-stuck .chip[aria-pressed="false"]:hover{background-color:var(--c-stage)}}

/* ---------- 3 · Izgara ---------- */
.col-grid-section{padding-top:var(--sp-4);padding-bottom:var(--sp-section)}
/* 9 model = masaüstünde 3x3 (yetim yok). Yatay (4:3) fotoğraflar için kolon aralığı
   48px (>=1280; kartlar 408 x 306), satır aralığı 64. 560-1023 iki kolon, <560 tek kolon
   (yatay fotoğraf telefonda tam genişlikte okunur). Tek sayıda sonuçta son kart sola hizalı. */
.col-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--grid-gap);row-gap:var(--sp-7);margin:0;padding:0;list-style:none}
@media (min-width:1280px){.col-grid{column-gap:var(--sp-6)}}
.col-grid__item{min-width:0}

/* Özel sipariş şeridi: paylaşılan .quote-band--soft (base-v7.css). */

/* Boş durum */
.col-empty{padding:var(--sp-6);background:var(--c-ivory-soft);border-radius:var(--r);max-width:44rem}
.col-empty__title{font-family:var(--f-display);font-weight:var(--w-display);font-size:var(--t-heading-m);line-height:var(--lh-snug);color:var(--c-ink)}
.col-empty__text{margin-top:var(--sp-2);color:var(--c-text)}
.col-empty .actions{margin-top:var(--sp-4)}

@media (max-width:1023px){
  .col-grid{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--sp-6)}
}
@media (max-width:559px){
  .col-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:767px){
  .col-head{padding-top:var(--sp-4);padding-bottom:var(--sp-2)}
  .col-head__top{grid-template-columns:minmax(0,1fr);grid-template-areas:"title" "lead" "status"}
  .col-head__lead{font-size:var(--t-body-s)}
  /* Sayaç girişin altında, sola yaslı; temizle bağlantısı sağında. */
  .col-filter__status{flex-direction:row;justify-content:flex-start;margin-top:var(--sp-2)}
  .col-filter__count{font-size:1.125rem}
  /* Şerit tek satır, yatay kayar (iki grup arka arkaya); kenarlarda yumuşak solma. */
  .col-bar{padding-block:4px}
  .col-bar > .wrap{padding-inline:0}
  .col-filter{flex-wrap:nowrap;gap:var(--sp-4);overflow-x:auto;overscroll-behavior-x:contain;padding:4px var(--wrap-gutter);scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--wrap-gutter),#000 calc(100% - var(--wrap-gutter)),transparent);mask-image:linear-gradient(90deg,transparent,#000 var(--wrap-gutter),#000 calc(100% - var(--wrap-gutter)),transparent)}
  .col-filter::-webkit-scrollbar{display:none}
  .chip-group{flex:none;gap:var(--sp-2)}
  .chip-group + .chip-group{padding-left:var(--sp-4)}
  .chip-group__list{flex-wrap:nowrap}
  .chip-group__list li{flex:none}
  .chip{padding:0 16px}
  .col-grid-section{padding-top:var(--sp-3)}
  .col-grid{column-gap:12px;row-gap:var(--sp-5)}
  /* Tek kolonda künye tam: ad 20px, tagline tek satıra sığmazsa iki satır. */
  .col-grid .pcard__name{font-size:var(--t-heading-s)}
  .col-empty{padding:var(--sp-5)}
}

/* ---------- Cam fallback'leri ---------- */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .col-bar.is-stuck{background-color:var(--glass-bar-solid)}
}
@media (prefers-reduced-transparency:reduce){
  .col-bar.is-stuck{background-color:var(--glass-bar-solid);-webkit-backdrop-filter:none;backdrop-filter:none}
}
@media (forced-colors:active){
  .col-bar.is-stuck{background:Canvas;-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom:1px solid CanvasText}
  .col-bar::after{display:none}
}