/* Tum Urunler / kategori sayfasi — Masaustundeki hastia_tum_urunler.html'den
   tureildi. Header ve footer ALINMADI (site layout'u kullaniliyor).
   TUM secicilere .urunler-sayfa kapsami eklendi: bu dosyanin :root degiskenleri ve
   .container/.hero/.grid gibi genel adlari ana sayfayla CAKISIYORDU. */

.urunler-sayfa{--bg:#f5f1e9;--paper:#fbf9f5;--ink:#25231f;--muted:#777269;--line:#ddd7cd;--sage:#64715a;--chip:#e8e4dc;background:var(--bg);color:var(--ink);font-family:"DM Sans",Arial,sans-serif}
.urunler-sayfa .container{max-width:1440px;margin:auto;padding:0 54px}
.urunler-sayfa .hero{height:325px;position:relative;overflow:hidden}

/* site.css'teki ANA SAYFA .hero kurali (min-height:620px, display:flex, arkaplan gorseli)
   buraya siziyor — kapsam daha spesifik oldugu icin sadece ayni ozellikleri geri aliyoruz. */
.urunler-sayfa .hero{min-height:0;display:block;align-items:normal;background:none}
.urunler-sayfa .hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(245,241,233,.94),rgba(245,241,233,.25) 70%,transparent)}
.urunler-sayfa .hero-copy{position:absolute;z-index:2;left:max(54px,calc((100% - 1332px)/2));top:60px}
.urunler-sayfa .hero h1{font:400 58px "Libre Caslon Display",Georgia,serif;margin:0 0 18px}
.urunler-sayfa .hero p{font-size:15px;line-height:1.6}
.urunler-sayfa .layout{display:grid;grid-template-columns:275px 1fr;gap:42px;padding-top:38px}
.urunler-sayfa .sidebar{border-right:1px solid var(--line);padding-right:34px}
.urunler-sayfa .clear{font-size:10px;letter-spacing:.08em;color:var(--muted);display:flex;justify-content:space-between;margin-bottom:24px}
.urunler-sayfa .filter{padding-bottom:21px;margin-bottom:21px;border-bottom:1px solid var(--line)}
.urunler-sayfa .filter h3{font:400 18px "Libre Caslon Display",Georgia,serif;display:flex;justify-content:space-between;margin:0 0 14px}
.urunler-sayfa .check{display:flex;gap:9px;font-size:12px;margin:11px 0;color:#514d46}
.urunler-sayfa .check input{appearance:none;width:14px;height:14px;border:1px solid #bbb5aa}
.urunler-sayfa .swatches{display:grid;grid-template-columns:repeat(5,28px);gap:10px}
.urunler-sayfa .sw{width:28px;height:28px;border-radius:50%;border:1px solid #cfc8bc}
.urunler-sayfa .s1{background:#f6f1e9}
.urunler-sayfa .s2{background:#d9c9b4}
.urunler-sayfa .s3{background:#c4beb3}
.urunler-sayfa .s4{background:#a78b70}
.urunler-sayfa .s5{background:#bd8057}
.urunler-sayfa .s6{background:#625c55}
.urunler-sayfa .s7{background:#68735f}
.urunler-sayfa .s8{background:#899187}
.urunler-sayfa .range{width:100%;accent-color:var(--sage)}
.urunler-sayfa .apply{width:100%;padding:13px;background:var(--sage);border:0;color:#fff}
.urunler-sayfa .main-head{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding-bottom:15px}
.urunler-sayfa .count{font-size:12px;color:#5f5a53}
.urunler-sayfa .sort{display:flex;gap:25px;font-size:11px;color:#716d65}
.urunler-sayfa .sort a:first-child{color:var(--ink);border-bottom:1px solid var(--ink);padding-bottom:15px}
.urunler-sayfa .chips{display:flex;gap:8px;margin:18px 0;flex-wrap:wrap}
.urunler-sayfa .chip{background:var(--chip);border-radius:20px;padding:8px 13px;font-size:10px}
.urunler-sayfa .clear-chip{font-size:10px;text-decoration:underline;padding:8px}
.urunler-sayfa .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px 26px}
.urunler-sayfa .product-image{aspect-ratio:1/.86;overflow:hidden;background:#ddd}
.urunler-sayfa .product img{transition:.4s}
.urunler-sayfa .product:hover img{transform:scale(1.025)}
.urunler-sayfa .product-title{font:400 16px "Libre Caslon Display",Georgia,serif;margin:10px 0 5px}
.urunler-sayfa .meta{font-size:10px;color:#8a857c;margin-bottom:6px}
.urunler-sayfa .card-foot{display:flex;justify-content:space-between}
.urunler-sayfa .price{font-size:12px;font-weight:600}
.urunler-sayfa .heart{font-size:20px;color:#817c72}
.urunler-sayfa .load{display:block;margin:42px auto;border:1px solid #aaa398;background:transparent;padding:13px 34px}
.urunler-sayfa .project{margin-top:45px;background:#eee9df;display:grid;grid-template-columns:40% 60%}
.urunler-sayfa .project img{min-height:220px}
.urunler-sayfa .project-copy{padding:45px 55px;display:flex;flex-direction:column;justify-content:center}
.urunler-sayfa .project h2,.urunler-sayfa .material h2{font:400 30px "Libre Caslon Display",Georgia,serif;margin:0 0 10px}
.urunler-sayfa .project p,.urunler-sayfa .material p{font-size:12px;line-height:1.65;color:#6f6a61}
.urunler-sayfa .cta{align-self:flex-end;background:var(--sage);color:white;padding:14px 25px;font-size:11px}
.urunler-sayfa .material{display:grid;grid-template-columns:1fr 1fr;gap:50px;padding:55px 0;border-bottom:1px solid var(--line)}
.urunler-sayfa .features{display:flex;justify-content:space-around;align-items:center}
.urunler-sayfa .feature{text-align:center;font-size:11px;color:#5d5952}
.urunler-sayfa .feature b{display:block;font-size:20px;margin-bottom:8px}

@media(max-width:900px){.urunler-sayfa .container{padding:0 28px}.urunler-sayfa .layout{grid-template-columns:220px 1fr}.urunler-sayfa .grid{gap:22px 16px}}

@media(max-width:700px){.urunler-sayfa .logo{font-size:25px}.urunler-sayfa .hero{height:260px}.urunler-sayfa .hero-copy{left:28px}.urunler-sayfa .hero h1{font-size:44px}.urunler-sayfa .layout{display:block}.urunler-sayfa .sidebar{border:0;padding:0;margin-bottom:30px}.urunler-sayfa .grid{grid-template-columns:repeat(2,1fr)}.urunler-sayfa .project,.urunler-sayfa .material{grid-template-columns:1fr}.urunler-sayfa .project-copy{padding:30px}}

@media(max-width:480px){.urunler-sayfa .container{padding:0 18px}.urunler-sayfa .grid{grid-template-columns:1fr}.urunler-sayfa .hero-copy{left:18px}.urunler-sayfa .hero h1{font-size:38px}.urunler-sayfa .sort{overflow:auto;white-space:nowrap}}

/* ── Dinamik hale getirilince eklenenler (2026-08-26) ─────────────────── */
.urunler-sayfa .product a{display:block;color:inherit}
.urunler-sayfa .sort a.aktif{color:var(--ink);border-bottom:1px solid var(--ink);padding-bottom:15px}
.urunler-sayfa .sort a:first-child{color:inherit;border-bottom:0;padding-bottom:0}
.urunler-sayfa .sw-wrap{display:block;cursor:pointer;line-height:0}
.urunler-sayfa .sw.is-secili{outline:1px solid var(--ink);outline-offset:2px}
.urunler-sayfa .fiyat-araligi{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.urunler-sayfa .fiyat-araligi input{width:100%;min-width:0;padding:9px;border:1px solid var(--line);background:transparent;font-size:12px}
.urunler-sayfa .apply{cursor:pointer}
.urunler-sayfa .load{text-decoration:none;text-align:center;width:max-content;cursor:pointer}
.urunler-sayfa .bos-sonuc{font-size:13px;color:var(--muted);padding:60px 0;text-align:center}
.urunler-sayfa .sayfalama{margin:10px 0 40px;font-size:12px}
.urunler-sayfa .sayfalama svg{width:14px;height:14px;display:inline-block;vertical-align:middle}
.urunler-sayfa .clear a{text-decoration:none;font-size:14px}
/* .sw artik <label> icinde -> satir ici oluyor, width/height islemiyor */
.urunler-sayfa .sw{display:block}

/* ── OKUNABİLİRLİK (2026-08-26) ────────────────────────────────────────
   Kategori sayfasinda yapilan yazi buyutmesinin ayni si. Mockup'taki
   10–12px taban boyutlar okunur seviyeye cekildi, hiyerarsi korundu. */

/* Kapsayici genisligi HEADER ile ayni (site.css .container ile birebir).
   Mockup max-width:1440px + padding:0 54px kullaniyordu ve 900/480'de padding'i
   degistiriyordu — padding sifirlanip genislik kurali header'inkiyle esitlendi. */
.urunler-sayfa .container{width:min(1440px,calc(100% - 64px));max-width:none;padding:0;margin:auto}
/* Hero metni kapsayiciyla ayni hizada baslasin (1440 - 64 = 1376) */
.urunler-sayfa .hero-copy{left:max(32px,calc((100% - 1376px)/2))}

/* Hero */
.urunler-sayfa .hero p{font-size:16px;line-height:1.7}

/* Filtre kenar cubugu */
.urunler-sayfa .clear{font-size:11.5px;letter-spacing:.06em}
.urunler-sayfa .filter{padding-bottom:22px;margin-bottom:22px}
.urunler-sayfa .filter h3{font-size:17px;margin-bottom:14px}
.urunler-sayfa .check{font-size:13.5px;margin:12px 0;gap:10px;cursor:pointer}
.urunler-sayfa .check input{width:15px;height:15px;flex-shrink:0;border-radius:2px;transition:.15s}
/* Mockup'ta appearance:none vardi ama :checked stili YOKTU -> secili kutu
   isaretsizden ayirt edilemiyordu. Dolu kutu + beyaz tik eklendi. */
.urunler-sayfa .check input:hover{border-color:var(--sage)}
.urunler-sayfa .check input:checked{background-color:var(--sage);border-color:var(--sage);
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2.6 6.2 5 8.5l4.4-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;background-size:11px}
.urunler-sayfa .check:has(input:checked){color:var(--ink);font-weight:500}
.urunler-sayfa .filter p{font-size:12px}
.urunler-sayfa .fiyat-araligi input{font-size:12.5px;padding:10px}
.urunler-sayfa .filter > div[style]{font-size:11.5px !important}
.urunler-sayfa .apply{padding:14px;font-size:13px;cursor:pointer}

/* Katalog basligi */
.urunler-sayfa .main-head{padding-bottom:16px}
.urunler-sayfa .count{font-size:13.5px}
.urunler-sayfa .sort{font-size:12.5px;gap:26px}
.urunler-sayfa .sort a:first-child{padding-bottom:16px}
.urunler-sayfa .sort a.aktif{padding-bottom:16px}

/* Cipler */
.urunler-sayfa .chips{margin:20px 0}
.urunler-sayfa .chip{font-size:11.5px;padding:9px 15px}
.urunler-sayfa .clear-chip{font-size:11.5px;padding:9px}

/* Urun kartlari */
.urunler-sayfa .grid{gap:34px 26px}
.urunler-sayfa .product-title{font-size:18px;margin:12px 0 6px}
.urunler-sayfa .meta{font-size:12px;margin-bottom:8px}
.urunler-sayfa .price{font-size:14px}
.urunler-sayfa .heart{font-size:20px}
.urunler-sayfa .load{font-size:13px;padding:14px 34px;margin:38px auto}

/* Alt bolumler */
.urunler-sayfa .project p,.urunler-sayfa .material p{font-size:14px;line-height:1.75}
.urunler-sayfa .project h2,.urunler-sayfa .material h2{font-size:32px}
.urunler-sayfa .cta{font-size:12.5px;padding:15px 27px}
.urunler-sayfa .feature{font-size:12.5px;line-height:1.5}
.urunler-sayfa .feature b{font-size:22px;margin-bottom:9px}

/* Bos sonuc / sayfalama */
.urunler-sayfa .bos-sonuc{font-size:14px}
.urunler-sayfa .sayfalama{font-size:12.5px}

/* Mobil */
@media(max-width:700px){
  /* header ile ayni mobil kirilim */
  .urunler-sayfa .container{width:min(100% - 30px,1440px)}
  .urunler-sayfa .hero-copy{left:15px;right:15px}
  .urunler-sayfa .hero p{font-size:14.5px}
  .urunler-sayfa .main-head{display:block}
  .urunler-sayfa .count{display:block;margin-bottom:10px}
  .urunler-sayfa .sort{max-width:100%;min-width:0;overflow-x:auto;gap:20px;padding-bottom:2px}
  .urunler-sayfa .sort a:first-child,.urunler-sayfa .sort a.aktif{padding-bottom:6px}
  .urunler-sayfa .product-title{font-size:16.5px}
}