/* Ürün listeleri (mağaza, koleksiyon, ressam, arama).
   Ürünler önde: başlık kısa, koleksiyon şeridi ve araç çubuğu tek satır. Sayfanın tek iddialı anı ızgaradaki
   büyük karedir (o sayfadaki bir tablonun oda fotoğrafı); geri kalan her şey sakin. */

/* ============ Başlık ============ */
.lhead{max-width:900px;padding:clamp(22px,3vw,44px) 0 0}
.lhead h1{font-size:clamp(36px,5vw,74px);line-height:1.05;letter-spacing:-.015em}
.lhead__meta{margin-top:14px;font-size:15.5px;color:var(--ink-2)}
.lhead__meta span{font-weight:600;color:var(--ink)}
.lhead__intro{margin-top:18px;max-width:62ch;font-size:clamp(16.5px,1.25vw,18px);line-height:1.65;color:var(--ink-2)}
.lhead__intro p+p{margin-top:.8em}
.lhead__intro a{color:var(--ink);text-decoration-color:var(--accent);text-underline-offset:3px}
.lhead__intro strong{color:var(--ink);font-weight:600}
.lhead__extra{margin-top:20px}

/* ============ Koleksiyon şeridi ============ */
.lchips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:clamp(22px,2.6vw,32px) calc(var(--gut) * -1) 0;padding:2px var(--gut) 4px;scroll-padding-inline:var(--gut);-webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--gut),#000 calc(100% - 48px),transparent);mask-image:linear-gradient(90deg,transparent,#000 var(--gut),#000 calc(100% - 48px),transparent)}
.lchips::-webkit-scrollbar{display:none}
.lchips a{flex:none;display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 15px;border-radius:999px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);font-size:14.5px;font-weight:500;text-decoration:none;white-space:nowrap;transition:box-shadow .25s var(--ease),background .25s var(--ease),color .25s var(--ease)}
.lchips a span{font-size:12.5px;color:var(--ink-2)}
.lchips a:hover{box-shadow:inset 0 0 0 1px var(--ink)}
.lchips a[aria-current="page"]{background:var(--ink);color:#fff;box-shadow:none}
.lchips a[aria-current="page"] span{color:rgba(255,255,255,.62)}

/* ============ Kategorinin öne çıkan tabloları (yönetimden seçilen, kayan şerit) ============ */
.lpop{margin-top:clamp(36px,4.4vw,56px)}
.lpop .picks__h h2{font-size:clamp(24px,2.3vw,32px)}
.lpop__track{grid-auto-columns:calc((100% - 4 * 18px) / 5);margin:0 calc(var(--gut) * -1);padding:4px var(--gut) 14px;scroll-padding-inline:var(--gut)}
.lpop__track .pc{scroll-snap-align:start}
@media (max-width:1180px){.lpop__track{grid-auto-columns:calc((100% - 3 * 18px) / 4)}}
@media (max-width:900px){.lpop__track{grid-auto-columns:calc((100% - 18px) / 2.25)}}

/* ============ Araç çubuğu: kutusuz, düğmeler ince çizgili ============ */
.ltool{display:flex;align-items:center;gap:14px;margin:clamp(18px,2.2vw,26px) 0 clamp(24px,2.8vw,36px);padding:0}
.ltool__btn{display:inline-flex;align-items:center;gap:9px;height:46px;padding:0 18px 0 14px;border:0;border-radius:var(--r-ctl);background:var(--card);font-size:15px;font-weight:600;box-shadow:inset 0 0 0 1px var(--line);transition:transform .2s var(--ease),box-shadow .25s var(--ease)}
.ltool__btn:hover{box-shadow:inset 0 0 0 1px var(--ink)}
.ltool__btn:active{transform:scale(.98)}
.ltool__btn i{font-size:19px}
.ltool__count{flex:1;min-width:0;font-size:14px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lsort{display:flex;align-items:center;gap:10px}
.lsort label{font-size:14px;color:var(--ink-2)}
.lsort__sel{position:relative;display:inline-flex}
.lsort select{appearance:none;-webkit-appearance:none;height:46px;padding:0 42px 0 16px;border:0;border-radius:var(--r-ctl);background:var(--card);font:600 15px var(--fb);color:var(--ink);cursor:pointer;box-shadow:inset 0 0 0 1px var(--line);font-variant-numeric:lining-nums}
.lsort select:hover{box-shadow:inset 0 0 0 1px var(--ink)}
.lsort select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.lsort__sel i{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-size:16px;pointer-events:none}

/* ============ Izgara ============ */
.lgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(30px,3.2vw,48px) clamp(14px,1.6vw,24px)}
.pc.is-new{animation:cardIn .8s var(--ease) both;animation-delay:calc(var(--i,0) * 40ms)}
@keyframes cardIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
/* Yükleniyor: kart biçiminde iskelet */
.pc--skel .pc__img{background:linear-gradient(100deg,var(--stage) 30%,#F1F2F4 50%,var(--stage) 70%) 0 0/300% 100%;animation:shimmer 1.6s linear infinite}
.pc--skel .sk{display:block;height:13px;width:72%;margin-top:4px;border-radius:6px;background:var(--stage)}
.pc--skel .sk--s{width:38%}
@keyframes shimmer{to{background-position:-150% 0}}

/* Duvarda: sayfadaki bir tablonun oda fotoğrafı, ızgarada 2 x 2 */
.ltile{position:relative;grid-column:3/span 2;grid-row:2/span 2;display:block;min-height:320px;border-radius:var(--r-core);box-shadow:var(--sh-1);text-decoration:none}
.ltile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:var(--r-core);transition:transform 1.4s var(--ease)}
.ltile::before{content:"";position:absolute;inset:0;border-radius:var(--r-core);background:var(--stage)}
.ltile{overflow:hidden}
.ltile:hover img{transform:scale(1.03)}
.ltile__tag{position:absolute;left:22px;right:22px;bottom:22px;z-index:1;display:flex;align-items:center;gap:12px;padding:10px 10px 10px 16px;border-radius:14px;background:rgba(255,255,255,.94);box-shadow:var(--sh-2);transition:transform .5s var(--spring)}
.ltile:hover .ltile__tag{transform:translateY(-2px)}
.ltile__t{flex:1;min-width:0;display:grid}
.ltile__t b{font-weight:600;font-size:15.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ltile__t span{font-size:13.5px;color:var(--ink-2)}
.ltile .btn__ic{flex:none;background:var(--ink);color:#fff}
.ltile:hover .btn__ic{background:var(--accent);transform:translate(2px,-1px) scale(1.05)}

/* ============ Daha fazla ve sayfalar ============ */
.lmore{display:grid;justify-items:center;gap:12px;margin-top:clamp(44px,5vw,64px)}
.lmore__n{font-size:14px;color:var(--ink-2)}
.lmore .btn[aria-busy="true"]{opacity:.6;pointer-events:none}
.ats-list .pager{margin-top:28px;flex-wrap:wrap}
.pager .dots{display:grid;place-items:center;min-width:30px;color:var(--ink-3)}

/* ============ Boş sonuç ============ */
.lempty{margin-top:clamp(24px,3vw,40px)}
.lempty .core{display:grid;gap:12px;justify-items:start;padding:clamp(28px,4vw,56px)}
.lempty h2{font-size:clamp(26px,2.6vw,38px)}
.lempty p{color:var(--ink-2);max-width:52ch}
.lempty form{display:flex;gap:8px;width:min(100%,600px);margin-top:10px}
.lempty input{flex:1;min-width:0;height:54px;border:0;border-radius:var(--r-ctl);padding:0 16px;font:inherit;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink);outline:0;font-variant-numeric:lining-nums}
.lempty input:focus{box-shadow:inset 0 0 0 1.5px var(--ink)}
.lempty .chips{margin-top:8px}

/* ============ Koleksiyon rehberi (kategori açıklaması) ve SSS ============ */
.lguide{display:grid;grid-template-columns:minmax(210px,250px) minmax(0,1fr);gap:clamp(36px,6vw,104px);align-items:start;margin-top:clamp(96px,10vw,152px);padding-top:clamp(40px,5vw,64px);border-top:1px solid var(--line)}
.lguide--solo{grid-template-columns:minmax(0,1fr)}
.lguide .prose{max-width:70ch}
.lguide .prose>h2:first-child{margin-top:0;font-size:clamp(28px,2.8vw,42px);line-height:1.1}
.lextra{margin-top:clamp(56px,6vw,88px);max-width:70ch}
.lfaq{margin-top:clamp(72px,8vw,120px)}
.lfaq .sec__h{max-width:24ch}

/* ============ Koleksiyonlar paneli ============ */
.lpanel{position:fixed;inset:0;z-index:calc(var(--z-hd) + 2);pointer-events:none}
.lpanel__bg{position:absolute;inset:0;background:rgba(32,35,40,.26);opacity:0;transition:opacity .45s var(--ease)}
.lpanel__box{position:absolute;top:10px;bottom:10px;left:10px;width:min(420px,calc(100% - 20px));display:flex;flex-direction:column;padding:18px 18px 0;border-radius:var(--r-core);background:var(--paper);box-shadow:var(--sh-2);transform:translateX(calc(-100% - 24px));transition:transform .65s var(--spring)}
.lpanel.is-open{pointer-events:auto}
.lpanel.is-open .lpanel__bg{opacity:1}
.lpanel.is-open .lpanel__box{transform:none}
.lpanel__head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.lpanel__head h2{font-size:28px}
.lpanel__q{margin:14px 0 8px;height:50px;border:0;border-radius:var(--r-ctl);padding:0 16px;font:inherit;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink);outline:0;font-variant-numeric:lining-nums}
.lpanel__q:focus{box-shadow:inset 0 0 0 1.5px var(--ink)}
.lpanel__q::placeholder{color:var(--ink-2)}
.lpanel__scroll{flex:1;overflow-y:auto;overscroll-behavior:contain;margin:0 -18px;padding:6px 18px 28px}
.lpanel__list{list-style:none;margin:0;padding:0;display:grid}
.lpanel__list a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 10px;border-radius:var(--r-s);font-weight:500;text-decoration:none;transition:background .2s var(--ease)}
.lpanel__list a:hover{background:var(--card)}
.lpanel__list a[aria-current="page"]{background:var(--ink);color:#fff}
.lpanel__list span{font-size:13px;color:var(--ink-2)}
.lpanel__list a[aria-current="page"] span{color:rgba(255,255,255,.6)}
.ats .lpanel__sub{margin:22px 10px 6px;font:500 13.5px var(--fb);letter-spacing:0;color:var(--ink-2);font-variant-numeric:lining-nums}
.lpanel__none{padding:16px 10px;color:var(--ink-2);font-size:15px}
.lpanel [data-stg]{opacity:0;transform:translateY(10px);transition:opacity .4s var(--ease),transform .55s var(--spring)}
.lpanel.is-open [data-stg]{opacity:1;transform:none;transition-delay:calc(min(var(--i,0),14) * 22ms + 120ms)}

/* ============ Mobil alt çubuk (araç çubuğu ekrandan çıkınca) ============ */
.lbar{position:fixed;left:12px;right:92px;bottom:calc(14px + env(safe-area-inset-bottom));z-index:20;display:none;pointer-events:none}
.lbar__in{display:inline-flex;gap:4px;padding:5px;border-radius:18px;background:rgba(255,255,255,.74);-webkit-backdrop-filter:saturate(170%) blur(18px);backdrop-filter:saturate(170%) blur(18px);box-shadow:inset 0 0 0 1px rgba(32,35,40,.08),0 18px 40px -18px rgba(32,35,40,.45);transform:translateY(170%);opacity:0;transition:transform .6s var(--spring),opacity .35s var(--ease)}
.lbar.is-on .lbar__in{transform:none;opacity:1;pointer-events:auto}
.lbar button,.lbar__sort{position:relative;display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 16px;border:0;border-radius:13px;background:none;font:600 14.5px var(--fb);color:var(--ink);white-space:nowrap;font-variant-numeric:lining-nums}
.lbar button{background:var(--ink);color:#fff}
.lbar i{font-size:18px}
.lbar__sort select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;font-size:16px}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.lbar__in{background:rgba(255,255,255,.97)}}

/* ============ Duyarlı düzen ============ */
@media (max-width:1180px){
  .lgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ltile{grid-column:2/span 2}
}
@media (max-width:900px){
  .lgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 12px}
  .ltile{grid-column:1/-1;grid-row:auto;aspect-ratio:1;min-height:0}
  .ltile__tag{left:16px;right:16px;bottom:16px}
  .ltool{gap:8px}
  .ltool__count{display:none}
  .lsort{margin-left:auto}
  .lsort label{display:none}
  .lbar{display:block}
  .lguide{grid-template-columns:minmax(0,1fr);gap:28px}
  .lguide .toc{position:relative;top:0}
}
@media (max-width:640px){
  .lpanel__box{top:auto;left:8px;right:8px;bottom:8px;width:auto;height:min(80dvh,660px);transform:translateY(calc(100% + 24px))}
  .ltool__btn,.lsort select{height:44px;font-size:14.5px}
  .lsort{min-width:0;flex:0 1 auto}
  .lsort__sel{min-width:0;max-width:100%}
  .lsort select{min-width:0;max-width:min(52vw,100%);text-overflow:ellipsis}
  .ltool__btn{flex:0 0 auto}
  .lempty form{flex-direction:column}
  .lempty form .btn{justify-content:space-between}
}
