/* buunhouse.com — ürün kartları (ana sayfa) ve ürün sayfaları. ana.css'in üstüne yüklenir. */

/* Kategori süzgeci: yalnız CSS (radyo + kardeş seçici), betik yok */
.kat-r { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.suzgec { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 26px; }
.suzgec label { cursor: pointer; user-select: none; font-size: 14.5px; font-weight: 600; color: var(--soluk); padding: 8px 16px; border-radius: 999px; background: var(--yuzey); box-shadow: 0 0 0 1px var(--cizgi) inset; transition: color .2s, background .2s, box-shadow .2s; }
.suzgec label:hover { color: var(--yazi); background: rgba(255,255,255,.08); }

/* Izgara: telefonda 2, tablette 3-4, masaüstünde 5-6 sütun */
.urun-kare { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px; }
@media (min-width: 600px) { .urun-kare { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 20px; } }
@media (min-width: 860px) { .urun-kare { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .urun-kare { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 1260px) { .urun-kare { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.uk a { display: block; text-decoration: none; color: var(--yazi); border-radius: 26px; padding: 8px 8px 12px; transition: background .25s; }
.uk-gorsel { position: relative; display: block; aspect-ratio: 1 / 1; border-radius: 22%; overflow: hidden; background: #151729;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset, 0 18px 40px -22px rgba(0,0,0,.9); transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s; }
.uk-gorsel img { width: 100%; height: 100%; object-fit: cover; }
.uk-gorsel::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 1px rgba(255,255,255,.1) inset; background: linear-gradient(160deg, rgba(255,255,255,.14), transparent 40%); pointer-events: none; }
.uk-ad { display: block; margin-top: 12px; font-size: 16.5px; font-weight: 650; letter-spacing: -.01em; line-height: 1.25; }
.uk-alt { display: block; margin-top: 2px; font-size: 13.5px; color: var(--sonuk); line-height: 1.35; }
.rozet { display: inline-block; margin-top: 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; color: var(--altin); background: rgba(242,196,109,.1); box-shadow: 0 0 0 1px rgba(242,196,109,.28) inset; }
.rozet.serbest { text-transform: none; letter-spacing: .02em; font-size: 12px; }
.rozet.yayinda { color: var(--turkuaz); background: rgba(79,220,196,.1); box-shadow: 0 0 0 1px rgba(79,220,196,.3) inset; }
.uk a:hover .uk-gorsel, .uk a:focus-visible .uk-gorsel { transform: translateY(-6px) scale(1.03); box-shadow: 0 0 0 1px rgba(255,255,255,.14) inset, 0 28px 50px -22px rgba(0,0,0,.95); }
.uk a:hover { background: rgba(255,255,255,.03); }
@media (max-width: 599px) { .uk a { padding: 4px 4px 10px; } .uk-ad { font-size: 15.5px; margin-top: 10px; } }

/* Ürün sayfası */
.ust.sabit { background: rgba(10,11,20,.72); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); border-bottom-color: var(--cizgi); }
.urun-sayfa { padding: calc(72px + env(safe-area-inset-top) + clamp(36px, 6vw, 80px)) 0 clamp(60px, 8vw, 110px); }
.geri { display: inline-flex; gap: 6px; align-items: center; color: var(--soluk); text-decoration: none; font-size: 15px; margin-bottom: 28px; }
.geri:hover { color: var(--yazi); }
.urun-bas { display: grid; grid-template-columns: auto 1fr; gap: clamp(20px, 4vw, 40px); align-items: center; }
.urun-simge { width: clamp(108px, 16vw, 168px); aspect-ratio: 1 / 1; border-radius: 22%; overflow: hidden; box-shadow: 0 0 0 1px rgba(255,255,255,.1) inset, 0 30px 60px -28px rgba(0,0,0,.95), 0 20px 70px -40px var(--u, #8b7cff); }
.urun-simge img { width: 100%; height: 100%; object-fit: cover; }
.urun-bas h1 { font-size: clamp(36px, 6vw, 64px); }
.urun-bas .ust-yazi { margin-bottom: 10px; }
.urun-bas .rozet { margin-top: 14px; font-size: 12.5px; padding: 5px 11px; }
.urun-govde { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(30px, 6vw, 80px); align-items: start; margin-top: clamp(40px, 6vw, 70px); }
.urun-govde .giris { font-size: 19px; color: var(--yazi); }
.ozellik { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 12px; }
.ozellik li { position: relative; padding-left: 30px; color: var(--soluk); }
.ozellik li::before { content: ""; position: absolute; left: 4px; top: .55em; width: 10px; height: 10px; border-radius: 3px; background: var(--u, var(--altin)); transform: rotate(45deg); box-shadow: 0 0 14px var(--u, var(--altin)); }
.urun-not { margin-top: 16px; font-size: 14px; color: var(--sonuk); }
.urun-eylem { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 34px; }
.dugme.pasif { cursor: default; color: var(--soluk); background: rgba(255,255,255,.05); box-shadow: 0 0 0 1px var(--cizgi) inset; }
.dugme.pasif:hover { transform: none; box-shadow: 0 0 0 1px var(--cizgi) inset; }
.dugme.pasif small { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--altin); }
.urun-bag { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 26px; font-size: 15px; }
.urun-bag a { color: var(--soluk); }
.urun-bag a:hover { color: var(--yazi); }
.ekranlar { display: flex; gap: 18px; justify-content: center; align-items: flex-start; }
.ekranlar figure { margin: 0; flex: 0 1 220px; border-radius: 26px; overflow: hidden; background: #111; box-shadow: 0 0 0 1px rgba(255,255,255,.1) inset, 0 40px 70px -35px rgba(0,0,0,.95); }
.ekranlar figure:nth-child(2) { margin-top: 40px; }
.ekranlar figure:nth-child(3) { margin-top: 80px; }
.ekranlar img { width: 100%; height: auto; }
.diger { margin-top: clamp(70px, 9vw, 120px); }
.diger h2 { font-size: clamp(24px, 3vw, 32px); margin-bottom: 24px; }

@media (max-width: 860px) {
  .urun-govde { grid-template-columns: 1fr; }
  .ekranlar { order: -1; justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
  .ekranlar figure { flex: 0 0 min(46vw, 210px); scroll-snap-align: start; margin-top: 0 !important; }
}
@media (max-width: 520px) { .urun-bas { grid-template-columns: 1fr; } }

/* üretildi: kategori süzgeci */
#kat-hepsi:checked ~ .suzgec label[for="kat-hepsi"] { color: #17120a; background: var(--altin); box-shadow: none; }
#kat-hepsi:focus-visible ~ .suzgec label[for="kat-hepsi"] { outline: 2px solid var(--altin); outline-offset: 3px; }
#kat-oyun:checked ~ .suzgec label[for="kat-oyun"] { color: #17120a; background: var(--altin); box-shadow: none; }
#kat-oyun:focus-visible ~ .suzgec label[for="kat-oyun"] { outline: 2px solid var(--altin); outline-offset: 3px; }
#kat-oyun:checked ~ .urun-kare .uk:not([data-kat~="oyun"]) { display: none; }
#kat-cocuk:checked ~ .suzgec label[for="kat-cocuk"] { color: #17120a; background: var(--altin); box-shadow: none; }
#kat-cocuk:focus-visible ~ .suzgec label[for="kat-cocuk"] { outline: 2px solid var(--altin); outline-offset: 3px; }
#kat-cocuk:checked ~ .urun-kare .uk:not([data-kat~="cocuk"]) { display: none; }
#kat-is:checked ~ .suzgec label[for="kat-is"] { color: #17120a; background: var(--altin); box-shadow: none; }
#kat-is:focus-visible ~ .suzgec label[for="kat-is"] { outline: 2px solid var(--altin); outline-offset: 3px; }
#kat-is:checked ~ .urun-kare .uk:not([data-kat~="is"]) { display: none; }
#kat-kisisel:checked ~ .suzgec label[for="kat-kisisel"] { color: #17120a; background: var(--altin); box-shadow: none; }
#kat-kisisel:focus-visible ~ .suzgec label[for="kat-kisisel"] { outline: 2px solid var(--altin); outline-offset: 3px; }
#kat-kisisel:checked ~ .urun-kare .uk:not([data-kat~="kisisel"]) { display: none; }
/* üretildi: ürün renkleri */
.urun-sayfa:has(.u-foldcut) { --u: #8b7cff; }
.urun-sayfa:has(.u-tapout) { --u: #f2c46d; }
.urun-sayfa:has(.u-lasertrap) { --u: #4fdcc4; }
.urun-sayfa:has(.u-lineblock) { --u: #f2c46d; }
.urun-sayfa:has(.u-buuncrm) { --u: #4fdcc4; }