/* ==========================================================================
   Ender Yapı Malzemeleri — urunler.css (ürün listesi + ürün detay)
   ========================================================================== */

/* --- Liste: sayfa başlığı ------------------------------------------------ */
.eyu-bas{ padding:clamp(30px,4vw,58px) 0 clamp(34px,4.6vw,72px); }
.eyu-bas h1{
   font-size:clamp(2.1rem,1.1rem+3.4vw,3.9rem);
   line-height:1.03;
   letter-spacing:-.032em;
   max-width:17ch;
}
.eyu-bas__yazi{
   margin:clamp(18px,2vw,26px) 0 0;
   max-width:58ch;
   font-size:1.02rem;
   color:var(--ey-ink-70);
}
.eyu-markaBas{ margin:0 0 20px; }
.eyu-markaBas img{
   max-height:54px;
   width:auto;
   padding:10px 16px;
   border:1px solid var(--ey-cizgi);
   border-radius:var(--ey-r-k);
   background:#fff;
}

/* marka sayfası: logo sağda, başlık solda — sağdaki boşluk dolsun */
@media (min-width:900px){
   .eyu-bas--marka{
      display:grid;
      grid-template-columns:minmax(0,1fr) auto;
      column-gap:clamp(30px,4vw,64px);
      align-items:start;
   }
   .eyu-bas--marka .ey-kirinti{ grid-area:1 / 1 / 2 / 3; }
   .eyu-bas--marka h1{ grid-area:2 / 1 / 3 / 2; }
   .eyu-bas--marka .eyu-bas__yazi{ grid-area:3 / 1 / 4 / 2; }
   .eyu-bas--marka .eyu-markaBas{
      grid-area:2 / 2 / 4 / 3;
      margin:0;
      justify-self:end;
   }
   .eyu-bas--marka .eyu-markaBas img{
      max-height:88px;
      max-width:260px;
      padding:20px 28px;
      border-radius:var(--ey-r);
   }
}

/* --- Liste: iki sütunlu düzen ---------------------------------------- */
.eyu-liste{ padding:0 0 clamp(56px,7vw,110px); }

.eyu-duzen{
   display:grid;
   gap:clamp(24px,3vw,48px);
   grid-template-columns:1fr;
   align-items:start;
}
@media (min-width:1000px){
   .eyu-duzen{ grid-template-columns:248px minmax(0,1fr); }
}
.eyu-duzen--tek{ grid-template-columns:minmax(0,1fr) !important; }
.eyu-icerik{ min-width:0; }

/* --- Sol filtre paneli ------------------------------------------------- */
.eyu-yan{ min-width:0; }
@media (max-width:999px){
   /* mobilde filtre alttan çıkan bir sayfa olarak açılır */
   .eyu-yan{
      position:fixed;
      left:0; right:0; bottom:0; top:auto;
      z-index:160;
      max-height:84vh;
      display:flex;
      background:#fff;
      border-radius:20px 20px 0 0;
      transform:translateY(100%);
      transition:transform .34s var(--ey-egri);
      box-shadow:0 -12px 44px rgba(20,23,26,.18);
   }
   .eyu-yan.ey-acik{ transform:translateY(0); }
   .eyu-yan__ic{
      flex:1;
      min-height:0;
      display:flex;
      flex-direction:column;
      padding:0 22px;
      overflow-y:auto;
      overscroll-behavior:contain;
   }
   .eyu-yan__ust{
      position:sticky;
      top:0;
      z-index:1;
      padding:22px 0 14px;
      margin:0 0 20px;
      background:#fff;
   }
   .eyu-yan__ust::before{
      content:"";
      position:absolute;
      top:9px; left:50%;
      width:42px; height:4px;
      border-radius:999px;
      background:var(--ey-cizgi);
      transform:translateX(-50%);
   }
   .eyu-yan__bitir{
      position:sticky;
      bottom:0;
      margin:auto 0 0;
      padding:14px 0 20px;
      background:#fff;
   }
   .eyu-yan__bitir .ey-btn{ width:100%; justify-content:center; }
}
@media (min-width:1000px){ .eyu-yan__bitir{ display:none; } }
@media (min-width:1000px){
   .eyu-yan{ position:sticky; top:calc(var(--ey-ustPay) + 34px); }
}

.eyu-yan__ust{
   display:flex;
   align-items:center;
   justify-content:space-between;
   gap:12px;
   padding:0 0 16px;
   margin:0 0 20px;
   border-bottom:1px solid var(--ey-cizgi);
}
.eyu-yan__baslik{
   font-size:.72rem;
   font-weight:500;
   letter-spacing:.14em;
   text-transform:uppercase;
   color:var(--ey-ink-45);
}
.eyu-yan__kapat{
   display:inline-flex;
   align-items:center;
   justify-content:center;
   width:32px; height:32px;
   border:1px solid var(--ey-cizgi);
   border-radius:999px;
   background:#fff;
   color:var(--ey-ink-70);
   cursor:pointer;
}
.eyu-yan__kapat svg{ width:13px; height:13px; }
@media (min-width:1000px){ .eyu-yan__kapat{ display:none; } }

.eyu-grup{ margin:0 0 26px; }
.eyu-grup__bas{
   display:block;
   font-size:.9rem;
   font-weight:500;
   color:var(--ey-ink);
   margin:0 0 12px;
}

.eyu-liste2{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.eyu-liste2 a{
   font-size:.88rem;
   color:var(--ey-ink-70);
   transition:color var(--ey-gecis-h),padding-left var(--ey-gecis-h);
}
.eyu-liste2 a:hover{ color:var(--ey-mavi); padding-left:4px; }

/* --- Çoklu seçim kutucukları ------------------------------------------ */
.eyu-secenekler{
   display:flex;
   flex-direction:column;
   gap:2px;
   margin:0 -8px;
   padding:0 8px;
}
.eyu-secenek{
   display:flex;
   align-items:center;
   gap:10px;
   padding:7px 8px;
   border-radius:var(--ey-r-k);
   font-size:.87rem;
   color:var(--ey-ink-70);
   cursor:pointer;
   transition:background var(--ey-gecis-h),color var(--ey-gecis-h);
}
.eyu-secenek:hover{ background:var(--ey-kum); color:var(--ey-ink); }
.eyu-secenek input{
   position:absolute;
   opacity:0;
   width:0; height:0;
}
.eyu-secenek__kutu{
   position:relative;
   flex:0 0 auto;
   width:17px; height:17px;
   border:1.5px solid var(--ey-cizgi);
   border-radius:5px;
   background:#fff;
   transition:border-color var(--ey-gecis-h),background var(--ey-gecis-h);
}
.eyu-secenek__kutu::after{
   content:"";
   position:absolute;
   left:5px; top:1px;
   width:5px; height:10px;
   border:solid #fff;
   border-width:0 2px 2px 0;
   transform:rotate(45deg) scale(0);
   transition:transform var(--ey-gecis-h);
}
.eyu-secenek input:checked ~ .eyu-secenek__kutu{
   background:var(--ey-ink);
   border-color:var(--ey-ink);
}
.eyu-secenek input:checked ~ .eyu-secenek__kutu::after{ transform:rotate(45deg) scale(1); }
.eyu-secenek input:focus-visible ~ .eyu-secenek__kutu{
   outline:2px solid var(--ey-mavi);
   outline-offset:2px;
}
.eyu-secenek input:checked ~ .eyu-secenek__ad{ color:var(--ey-ink); font-weight:500; }
.eyu-secenek__ad{ flex:1; min-width:0; line-height:1.35; }
.eyu-secenek__adet{
   flex:0 0 auto;
   font-size:.76rem;
   color:var(--ey-ink-45);
}

.eyu-yan__eylem{
   display:flex;
   align-items:center;
   gap:14px;
   flex-wrap:wrap;
   padding:18px 0 0;
   border-top:1px solid var(--ey-cizgi);
}
.eyu-yan__eylem .ey-btn{ padding:11px 24px; font-size:.88rem; }

/* --- Liste: araç çubuğu ------------------------------------------------ */
.eyu-arac{
   display:flex;
   align-items:center;
   gap:14px;
   flex-wrap:wrap;
   margin:0 0 16px;
}

.eyu-ara{
   display:flex;
   align-items:center;
   gap:13px;
   flex:1 1 260px;
   min-width:0;
   padding:12px 2px 14px;
   border-bottom:1px solid var(--ey-cizgi);
   transition:border-color var(--ey-gecis-h);
}
.eyu-ara:focus-within{ border-color:var(--ey-ink); }
.eyu-ara__ikon{ width:19px; height:19px; flex:0 0 auto; color:var(--ey-ink-45); }
.eyu-ara__alan{
   flex:1;
   min-width:0;
   border:0;
   background:transparent;
   font-family:inherit;
   font-size:clamp(1rem,.92rem+.3vw,1.15rem);
   color:var(--ey-ink);
   padding:0;
}
.eyu-ara__alan::placeholder{ color:var(--ey-ink-45); }
.eyu-ara__alan:focus{ outline:none; }

.eyu-filtreBtn{
   display:inline-flex;
   align-items:center;
   gap:9px;
   padding:12px 20px;
   border:1.5px solid var(--ey-ink);
   border-radius:999px;
   background:#fff;
   font-family:inherit;
   font-size:.9rem;
   font-weight:500;
   color:var(--ey-ink);
   cursor:pointer;
   white-space:nowrap;
   transition:background var(--ey-gecis-h),color var(--ey-gecis-h);
}
.eyu-filtreBtn:hover{ background:var(--ey-ink); color:#fff; }
.eyu-filtreBtn svg{ width:16px; height:16px; }
@media (min-width:1000px){ .eyu-filtreBtn{ display:none; } }
.eyu-filtreBtn__sayi{
   display:inline-flex;
   align-items:center;
   justify-content:center;
   min-width:21px; height:21px;
   padding:0 6px;
   border-radius:999px;
   background:var(--ey-mavi);
   color:#fff;
   font-size:.73rem;
}

.eyu-temizle{
   border:0;
   background:transparent;
   padding:0 0 2px;
   border-bottom:1px solid var(--ey-cizgi);
   font-family:inherit;
   font-size:.87rem;
   color:var(--ey-ink-70);
   cursor:pointer;
   transition:border-color var(--ey-gecis-h),color var(--ey-gecis-h);
}
.eyu-temizle:hover{ border-color:var(--ey-ink); color:var(--ey-ink); }

.eyu-sonuc{
   display:flex;
   align-items:center;
   justify-content:space-between;
   gap:16px;
   flex-wrap:wrap;
   padding:0 0 clamp(18px,2vw,26px);
   margin:0 0 clamp(20px,2.2vw,30px);
   border-bottom:1px solid var(--ey-cizgi-2);
   font-size:.85rem;
   color:var(--ey-ink-45);
}

.eyu-bosSonuc{
   padding:clamp(44px,6vw,86px) 24px;
   border:1px dashed var(--ey-cizgi);
   border-radius:var(--ey-r);
   text-align:center;
   color:var(--ey-ink-70);
}
.eyu-bosSonuc[hidden]{ display:none; }
.eyu-bosSonuc p{ margin:0 0 20px; }

/* --- Detay: üst düzen --------------------------------------------------- */
.eyu-detay{
   display:grid;
   gap:clamp(30px,3.6vw,64px);
   grid-template-columns:1fr;
   padding:clamp(30px,3.4vw,52px) 0;
   margin:0 0 clamp(30px,3.4vw,56px);
}
@media (min-width:900px){ .eyu-detay{ grid-template-columns:1.1fr .9fr; align-items:start; } }

/* galeri */
.eyu-galeri__buyuk{
   position:relative;
   aspect-ratio:1/1;
   border-radius:var(--ey-r);
   background:var(--ey-kum);
   overflow:hidden;
}
.eyu-galeri__buyuk img{
   position:absolute;
   top:50%; left:50%;
   width:auto; height:auto;
   max-width:86%; max-height:86%;
   border-radius:var(--ey-r);
   transform:translate(-50%,-50%);
}
.eyu-galeri__bos{
   position:absolute;
   inset:0;
   display:flex;
   align-items:center;
   justify-content:center;
   font-size:.8rem;
   letter-spacing:.12em;
   text-transform:uppercase;
   color:var(--ey-ink-45);
}
.eyu-galeri__ok{
   position:absolute;
   top:50%;
   transform:translateY(-50%);
   display:inline-flex;
   align-items:center;
   justify-content:center;
   width:42px; height:42px;
   border:1px solid var(--ey-cizgi);
   border-radius:999px;
   background:rgba(255,255,255,.9);
   cursor:pointer;
   transition:border-color var(--ey-gecis-h),background var(--ey-gecis-h);
}
.eyu-galeri__ok:hover{ border-color:var(--ey-ink); background:#fff; }
.eyu-galeri__ok svg{ width:15px; height:15px; }
.eyu-galeri__ok--sol{ left:16px; }
.eyu-galeri__ok--sag{ right:16px; }

.eyu-galeri__serit{
   display:flex;
   gap:10px;
   margin:12px 0 0;
   overflow-x:auto;
   padding-bottom:4px;
   scrollbar-width:thin;
}
.eyu-galeri__serit button{
   display:flex;
   flex:0 0 78px;
   width:78px; height:78px;
   padding:7px;
   border:1px solid var(--ey-cizgi);
   border-radius:var(--ey-r-k);
   background:#fff;
   cursor:pointer;
   transition:border-color var(--ey-gecis-h);
}
.eyu-galeri__serit button:hover{ border-color:var(--ey-ink-45); }
.eyu-galeri__serit button.ey-secili{ border-color:var(--ey-ink); }
.eyu-galeri__serit img{ width:auto; height:auto; max-width:100%; max-height:100%; margin:auto; border-radius:4px; }

/* bilgi sütunu */
.eyu-bilgi h1{
   font-size:clamp(1.6rem,1.15rem+1.5vw,2.4rem);
   margin:14px 0 0;
}
.eyu-bilgi__ozet{
   margin:18px 0 0;
   font-size:1.02rem;
   color:var(--ey-ink-70);
   max-width:50ch;
}
.eyu-bilgi__marka{
   display:inline-flex;
   align-items:center;
   gap:8px;
   font-size:.78rem;
   font-weight:500;
   letter-spacing:.12em;
   text-transform:uppercase;
   color:var(--ey-mavi);
}
.eyu-bilgi__fiyat{
   margin:24px 0 0;
   font-size:1.5rem;
   letter-spacing:-.02em;
}

.eyu-kunye{
   margin:28px 0 0;
   padding:22px 0 0;
   border-top:1px solid var(--ey-cizgi);
   display:grid;
   gap:14px 20px;
   grid-template-columns:repeat(2,1fr);
}
.eyu-kunye dt{
   font-size:.72rem;
   font-weight:500;
   letter-spacing:.12em;
   text-transform:uppercase;
   color:var(--ey-ink-45);
   margin:0 0 5px;
}
.eyu-kunye dd{ margin:0; font-size:.95rem; }

.eyu-eylem{
   display:flex;
   flex-wrap:wrap;
   gap:12px;
   margin:30px 0 0;
}

/* --- Detay: açıklama + özellikler --------------------------------------- */
.eyu-alt{
   display:grid;
   gap:clamp(30px,3.6vw,64px);
   grid-template-columns:1fr;
   padding:clamp(44px,5vw,80px) 0 0;
   margin:clamp(44px,5vw,80px) 0 0;
   border-top:1px solid var(--ey-cizgi-2);
}
@media (min-width:900px){ .eyu-alt{ grid-template-columns:1.1fr .9fr; align-items:start; } }

.eyu-ozellik{ margin:0; }
.eyu-ozellik__satir{
   display:flex;
   align-items:baseline;
   justify-content:space-between;
   gap:20px;
   padding:13px 0;
   border-bottom:1px solid var(--ey-cizgi-2);
}
.eyu-ozellik dt{ font-size:.92rem; color:var(--ey-ink-45); }
.eyu-ozellik dd{ margin:0; font-size:.95rem; font-weight:500; text-align:right; }
.eyu-ozellik__etiketler{
   display:flex;
   flex-wrap:wrap;
   gap:8px;
   margin:18px 0 0;
}
.eyu-ozellik__etiket{
   padding:7px 14px;
   border:1px solid var(--ey-cizgi);
   border-radius:999px;
   font-size:.82rem;
   color:var(--ey-ink-70);
}

/* --- Detay: paylaşım ---------------------------------------------------- */
.eyu-paylas{
   display:flex;
   align-items:center;
   gap:12px;
   flex-wrap:wrap;
   margin:30px 0 0;
   padding:22px 0 0;
   border-top:1px solid var(--ey-cizgi-2);
   font-size:.82rem;
   color:var(--ey-ink-45);
}
.eyu-paylas a{
   display:inline-flex;
   align-items:center;
   justify-content:center;
   width:36px; height:36px;
   border:1px solid var(--ey-cizgi);
   border-radius:999px;
   color:var(--ey-ink-70);
   transition:border-color var(--ey-gecis-h),color var(--ey-gecis-h);
}
.eyu-paylas a:hover{ border-color:var(--ey-ink); color:var(--ey-ink); }
.eyu-paylas svg{ width:15px; height:15px; }

/* --- Teklif formu (sağdan açılır) --------------------------------------- */
.eyu-teklif{
   position:fixed;
   top:0; right:0; bottom:0;
   z-index:170;
   width:min(470px,94vw);
   background:#fff;
   box-shadow:-14px 0 48px rgba(20,23,26,.18);
   transform:translateX(100%);
   transition:transform .38s var(--ey-egri);
   overflow-y:auto;
   overscroll-behavior:contain;
}
.eyu-teklif[hidden]{ display:block; }
.eyu-teklif.ey-acik{ transform:translateX(0); }

.eyu-teklif__ic{ padding:0 clamp(20px,3vw,34px) clamp(28px,4vw,44px); }

.eyu-teklif__ust{
   position:sticky;
   top:0;
   z-index:1;
   display:flex;
   align-items:center;
   justify-content:space-between;
   gap:14px;
   padding:22px 0 16px;
   margin:0 0 20px;
   border-bottom:1px solid var(--ey-cizgi);
   background:#fff;
}
.eyu-teklif__bas{
   font-size:.76rem;
   font-weight:500;
   letter-spacing:.14em;
   text-transform:uppercase;
   color:var(--ey-ink-45);
}
.ey-form .eyu-teklif__kapat,
.eyu-teklif__kapat{
   display:inline-flex;
   flex:0 0 auto;
   padding:0;
   font-size:inherit;
   font-weight:400;
   align-items:center;
   justify-content:center;
   width:36px; height:36px;
   border:1px solid var(--ey-cizgi);
   border-radius:999px;
   background:#fff;
   color:var(--ey-ink-70);
   cursor:pointer;
   transition:border-color var(--ey-gecis-h),color var(--ey-gecis-h);
}
.ey-form .eyu-teklif__kapat:hover,
.eyu-teklif__kapat:hover{ background:#fff; border-color:var(--ey-ink); color:var(--ey-ink); }
.eyu-teklif__kapat svg{ width:13px; height:13px; }

.eyu-teklif__yazi{
   margin:0 0 24px;
   font-size:.94rem;
   color:var(--ey-ink-70);
}

.eyu-teklif__urun input{
   background:var(--ey-kum);
   color:var(--ey-ink-70);
   cursor:default;
}
.eyu-teklif__urun input:focus{ border-color:var(--ey-cizgi); box-shadow:none; }

@media (prefers-reduced-motion:reduce){
   .eyu-teklif{ transition:none; }
}