/* =====================================================================
   Uçkunoğlu Halı · katalog.css · katalog sayfalarına özgü eklemeler (site.css'in ÜSTÜNE yüklenir)
   Ana sayfa, koleksiyonlar, marka ve ürün sayfaları. site.css'teki bileşenler (.pcard .grid .rail .chip .filters
   .toolbar .pd .viewer ...) aynen kullanılır; burada yalnız statik çok sayfalı yapının gerektirdiği farklar var.
   Sınıf adları sayfalar_katalog.py ile eşleşir. JS yokken (html:not(.js)) sayfa okunur kalır.
   ===================================================================== */

/* ---------- ton renkleri (kart noktası, süzgeç çipi, ton çubuğu): tek kaynak ---------- */
.t-krem{background:#E6D9B8}
.t-gri{background:#8D97A5}
.t-kahve{background:#9A6238}
.t-renkli{background:conic-gradient(#9E3424 0 34%,#1F2C4A 0 67%,#7E8642 0)}
.tone-bar .t-renkli,.sw-line.t-renkli{background:linear-gradient(90deg,#9E3424 0 34%,#1F2C4A 0 67%,#7E8642 0)}
.tone-bar .t-yok{background:repeating-linear-gradient(45deg,var(--erik-200) 0 4px,var(--erik-100) 4px 8px)}

/* ---------- kart ---------- */
.pcard[hidden],.empty-state[hidden]{display:none}

/* Odada görünümü (?gorunum=oda): her fotoğraflı kartta halı seçilen örnek odanın zemininde (katalog.js odalariKur).
   Sahne kartın görselinin altına kurulur; bağlantı, ölçü etiketi ve Seçkim düğmesi üstte kalır. */
.pimg > .stage{display:none}
.grid.oda{grid-template-columns:repeat(3,1fr);gap:var(--s7) var(--s5)}
.grid.oda .pimg,.grid.oda .pcard.nophoto .pimg{aspect-ratio:3/2}
.grid.oda .pimg > .stage{display:block;position:absolute;inset:0;aspect-ratio:auto;border-radius:0}
.grid.oda .pimg > .stage .stage-tag{display:none}
.grid.oda .pcard:not(.nophoto):not([data-sahne]) .pimg-a img{visibility:hidden}   /* sahne fotoğrafı: oda kurulmaz, kendi fotoğrafı kalır */
.grid.oda .pcard:hover .pimg img{transform:none}
/* Liste görünümü: her halı bir satır (küçük görsel, marka, ad, ton); ölçü etiketi ve Seçkim kalbi satırın sağında */
.col-layout .grid.liste{grid-template-columns:minmax(0,1fr);gap:0}
.grid.liste .pcard{position:relative;flex-direction:row;align-items:center;gap:var(--s4);padding:var(--s3) 140px var(--s3) 0;border-bottom:1px solid var(--line);grid-column:auto}
.grid.liste .pimg,.grid.liste .pcard.nophoto .pimg{position:static;flex:none;width:60px;height:86px;aspect-ratio:auto;overflow:visible;background:none}
.grid.liste .pcard.serili .pimg{background:none}
.grid.liste .pimg-a{position:relative;inset:auto;display:block;width:60px;height:86px;border-radius:var(--r1);overflow:hidden;background:var(--surface-2)}
.grid.liste .pcard.serili .pimg-a{background:var(--zemin)}
.grid.liste .pimg-a img,.grid.liste .pcard.serili .pimg-a img{width:100%;height:100%;object-fit:cover;padding:0;filter:none}
.grid.liste .pcard.serili .pimg-a img{object-fit:contain;padding:4px}
.grid.liste .ph-rug{padding:.4rem}
.grid.liste .ph-rug span{display:none}
.grid.liste .pcard > a{min-width:0;overflow-wrap:anywhere}
.grid.liste .size-tag{right:64px;top:50%;transform:translateY(-50%)}
.grid.liste .save{right:6px;top:50%;bottom:auto;transform:translateY(-50%)}
.grid.liste .pcard:hover .pimg img{transform:none}
.grid.liste .pname{font-size:1.05rem;margin:.1rem 0}
.grid.liste .pimg > .stage{display:none}
@media (max-width:420px){   /* dar telefonda kalp üstte, ölçü etiketi altında: ad sütunu daralmasın */
  .grid.liste .pcard{padding-right:96px}
  .grid.liste .save{top:var(--s3);transform:none}
  .grid.liste .size-tag{top:auto;bottom:var(--s3);right:6px;transform:none}
}   /* oda fotoğrafı büyürse halı zeminden kayar */
@media (max-width:1080px){.grid.oda{grid-template-columns:repeat(2,1fr)}}
@media (max-width:760px){.grid.oda{grid-template-columns:1fr;gap:var(--s6)}}
.pimg-a{display:block}
/* fotoğrafsız kart kısa (4:3): liste sonunda uzun desenli kutu yığını olmasın. Motif ölçü etiketinin (üst) ve Seçkim
   düğmesinin (alt) arasında; "Mağazada görün" yalnız kart en az 200 px genişse (dar kartta düğmeye binerdi) */
.pcard.nophoto{container-type:inline-size}
.pcard.nophoto .pimg{aspect-ratio:4/3}
.pcard.nophoto .ph-rug{padding:2.2rem .6rem 1.6rem}
.pcard.nophoto .ph-rug span{display:none}
@container (min-width:200px){
  .pcard.nophoto .ph-rug{padding-bottom:3.4rem}
  .pcard.nophoto .ph-rug span{display:inline}
}
.ph-rug .motif{width:30px;height:30px;color:var(--kirmizi)}
.ptone{display:inline-flex;align-items:center;gap:.45rem}
.pname{overflow-wrap:anywhere}
.pcard > a:hover .pname{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.float-card .meta{display:block}
.fc-name{display:block;font:450 1.05rem/1.15 var(--serif);margin:.2rem 0 .25rem}
.sec-tight{padding-block:clamp(3.5rem,7vw,5.5rem)}

/* ---------- ana sayfa ---------- */
.rail-all{margin-right:.8rem}
.marquee-track span{flex:none}
@media (prefers-reduced-motion:reduce){.marquee-track [aria-hidden="true"]{display:none}}
.strip-0{background:var(--b-field) center/48px auto,var(--surface-2)}
.strip-1{grid-template-columns:1fr}
.strip-2{grid-template-columns:repeat(2,1fr)}
.tone-card{color:inherit}
.visit-media.solo{grid-template-rows:1fr;min-height:0}
.visit-media.solo .visit-photos img{aspect-ratio:3/4}
.stage-tag a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.ev .viewer{min-width:0}
.viewer .v-top .seg{max-width:100%}
.viewer .swatches button{background:#000}
@media (scripting:none){[data-rail]{display:none}}

/* ---------- koleksiyonlar ---------- */
.head-jump{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s6);margin:var(--s5) 0 0}
.brand-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(172px,1fr));gap:var(--s3)}
.brand-card{display:flex;flex-direction:column;min-width:0;overflow:hidden;background:var(--surface);border:1px solid var(--line);border-radius:var(--r2);text-align:center;transition:transform .25s,box-shadow .25s,border-color .2s}
.brand-card:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--line-2)}
.bc-logo{display:flex;align-items:center;justify-content:center;height:84px;padding:0 1rem;background:#fff;border-bottom:1px solid var(--line)}
.bc-logo img{width:auto;height:auto;max-width:100%;max-height:44px;object-fit:contain}
.bc-logo.dark{background:var(--lacivert-900)}
.bc-logo img.esit{height:var(--lh,36px);max-height:none;max-width:86%}   /* eşit görsel ağırlık (sayfalar_katalog.logo_yuksekligi) */
.bc-logo.harf{background:var(--b-field) center/48px auto,var(--surface-2);font:400 1.9rem/1 var(--serif);color:var(--kirmizi)}
.bc-logo.harf span{display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;background:rgba(251,247,240,.92);box-shadow:inset 0 0 0 1px var(--line-2)}
.bc-logo.text{background:var(--b-field) center/48px auto,var(--surface-2);font:450 1.3rem/1.1 var(--serif);color:var(--lacivert);overflow-wrap:anywhere}
.brand-card strong{padding:.7rem .8rem 0;font:450 1.05rem/1.2 var(--serif)}
.brand-card .num{padding:.2rem .8rem .8rem;font-size:.76rem;font-weight:800;color:var(--text-3)}
.sec-products{padding-bottom:0}
.sec-products .sec-head{margin-bottom:0}
.col-layout .grid{min-width:0}
.btn-center{justify-content:center;margin-top:var(--s5)}
.seckim-ipucu{display:flex;align-items:center;gap:.55rem;margin:0 0 var(--s4);font-size:.9rem;color:var(--text-2)}
.seckim-ipucu .motif{width:16px;height:14px;color:var(--kirmizi);flex:none}
.active-row b{margin-right:.4rem}
.active-row:focus{outline:0}
.tag-x .ico{width:.9em;height:.9em}
.empty-state .h3{margin-bottom:.5rem}
.density button{min-width:4.6em}
.filter-fab{display:none}
@media (min-width:761px){
  .filters{max-height:calc(100vh - 124px);overflow:auto;padding-right:.35rem;scrollbar-width:thin}
}
@media (max-width:760px){
  .sec-head{gap:var(--s3)}
  .brand-grid{grid-template-columns:repeat(2,1fr);gap:var(--s2)}
  .bc-logo{height:56px;padding:0 .6rem}
  .bc-logo img{max-height:30px}
  .bc-logo img.esit{height:calc(var(--lh,36px) * .68);max-height:none}
  .bc-logo.harf{font-size:1.4rem}
  .bc-logo.harf span{width:40px;height:40px}
  .bc-logo.text{font-size:1.05rem}
  .brand-card strong{padding:.5rem .6rem 0;font-size:.98rem}
  .brand-card .num{padding:.1rem .6rem .55rem}
  /* 21 marka telefonda iki satırlık yatay şerit: ürünler bir ekran yukarı gelir */
  .brand-grid{grid-template-columns:none;grid-template-rows:repeat(2,auto);grid-auto-flow:column;grid-auto-columns:42%;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);scrollbar-width:none;padding:6px var(--gutter);margin:-6px calc(-1*var(--gutter))}
  .brand-grid::-webkit-scrollbar{display:none}
  .brand-card{scroll-snap-align:start}
  /* ortalama transform'suz (.btn:hover transform'u ezmesin); menü (39) ve üst bilginin altında, alt çubuğun (60) üstünde */
  .filter-fab{display:inline-flex;position:fixed;left:0;right:0;margin-inline:auto;width:max-content;bottom:calc(5.4rem + env(safe-area-inset-bottom));z-index:35;box-shadow:var(--shadow-d)}
  .filter-fab:hover,.filter-fab:active{transform:none}
  html:has(.filter-fab){scroll-padding-bottom:132px}   /* odaklanan kart düğmenin altında kalmasın */
  .toolbar{position:static}   /* üç satırlık araç çubuğu telefonda ekranı yer: yapışkan olmasın */
}
/* JS yokken süzgeç arayüzü işlevsizdir: gizle, yalnız kartlar ve marka kutucukları kalır */
@media (scripting:none){
  .filters,.toolbar,.active-row,.seckim-ipucu{display:none}
  .col-layout{grid-template-columns:1fr}
}

/* ---------- marka sayfası ---------- */
.pt-grid{padding-top:var(--s7)}
.brand-tones{max-width:420px}
.brand-hero.solo{grid-template-columns:minmax(0,760px)}   /* fotoğrafı olmayan markada boş kolaj kutusu yok */
.collage.c2{grid-template-columns:1fr 1fr;grid-template-rows:1fr}
.collage.c1{grid-template-columns:1fr;grid-template-rows:1fr}
.collage.c1 div:first-child,.collage.c2 div:first-child{grid-row:auto}
.tone-links a{display:inline-block;white-space:nowrap;padding-block:.3rem;margin-block:-.3rem;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.tone-links a:hover{color:var(--text)}
.other-brands{margin-top:var(--s8)}
.other-brands .h3{margin-bottom:var(--s4)}
.brand-hero .tone-bar{margin-bottom:var(--s2)}

/* ---------- ürün sayfası ---------- */
.pd-wrap .crumbs{padding-top:var(--s6);margin-bottom:0}
.pd-gallery{position:static}   /* site.css'te yapışkan; küçük resim şeridi onun altında kalıp örtülmesin */
.pd-frame:not(.zoomable){cursor:default}
.pd-frame .ph-rug{border-radius:0}
.pd-frame .ph-rug span{max-width:30ch;line-height:1.5;font-size:.8rem}
.pd-frame .ph-rug .motif{width:44px;height:44px}
.pd-views{flex-wrap:wrap}
.pd-views a,.pd-views button{display:grid;grid-template-rows:64px auto;gap:.3rem;width:78px;padding:4px;border-radius:var(--r1);border:1px solid var(--line-2);background:var(--surface);font:800 .72rem/1.2 var(--sans);color:var(--text-2);text-align:center}
.pd-views a img,.pd-views button img{width:100%;height:64px;object-fit:cover;border-radius:3px}
.pd-views a[aria-current="true"],.pd-views button[aria-pressed="true"]{border-color:var(--lacivert);box-shadow:inset 0 0 0 1px var(--lacivert);color:var(--text)}
.pd-views button .vi{display:flex;align-items:center;justify-content:center;height:64px;border-radius:3px;background:var(--surface-2);color:var(--kirmizi)}
.pd-views button .vi .motif{width:30px;height:26px}
.pd-frame.v-oda{position:relative}
.pd-frame .stage,[data-room-demo] .stage{touch-action:auto}
.pd-frame.v-oda .stage{position:absolute;inset:0;aspect-ratio:auto;border-radius:0}
.pd-frame .room-seg{position:absolute;left:.6rem;top:.6rem;z-index:3;background:rgba(251,247,240,.94);border-color:var(--line)}
.pd-frame .room-seg button{color:var(--text-2)}
.pd-frame .room-seg button[aria-pressed="true"]{background:var(--lacivert);color:var(--erik-50)}
.pd-note{margin:var(--s3) 0 0 38px;font-size:.8rem;color:var(--text-3)}
.pd-note a{font-weight:800;color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.pd-cta .link{justify-self:start;margin-top:var(--s2)}
.pd-cta .link .ico{order:-1}
.specs dd{overflow-wrap:anywhere}
.pd-head .pbrand{display:inline-block}
.care-note{margin:0}
.pd-related{padding:var(--s4) 0 var(--s9)}
.pd-sticky{visibility:hidden;transition:transform .35s cubic-bezier(.2,.7,.2,1),visibility 0s linear .35s}
@media (min-width:761px){html:has(.pd-sticky){scroll-padding-top:164px}}   /* sabit ürün çubuğu (85 + 69 px) odaklanan bağlantıyı örtmesin */
.pd-sticky.show{visibility:visible;transition-delay:0s}
.pd-sticky .sp .btn .motif{width:16px;height:14px}
@media (scripting:none){
  .pd-cta [data-save]{display:none}
  .pd-cta .row{grid-template-columns:1fr}
}
@media (max-width:1080px){
  .pd-note{margin-left:0}
  .collage.c1{display:none}   /* tek sütunda tek fotoğraf tüm genişliğe büyür, yalnız bir doku şeridi kalır */
}
@media (max-width:760px){
  .collage.c1,.collage.c2{display:none}   /* telefonda bir iki fotoğraf ızgaranın tekrarı olur */
  .pd-related .rail{grid-auto-columns:40%}   /* iki kart yan yana, üçüncüsünün ucu görünür: kaydırılabildiği belli olsun */
  .pd-views a,.pd-views button{width:68px;font-size:.75rem}
  .pd-wrap .crumbs{padding-top:var(--s4)}
}