/* pebble — içerik listesi ve detay */

/* Kart ızgarası: yuvarlak görsel + altına binen koyu hap başlık */
.pb-izgara { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px 28px; }
.pb-kart { position: relative; display: flex; flex-direction: column; align-items: center; padding-bottom: 6px; }
.pb-kart-gorsel { display: grid; place-items: center; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--pb-yuvarlak); background: var(--pb-acik); }
.pb-kart-gorsel img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--pb-gecis); }
.pb-kart-gorsel img.is-simge { width: 60%; height: 70%; object-fit: contain; }
.pb-kart:hover .pb-kart-gorsel img { transform: scale(1.07); }
.pb-kart-bos svg { width: 54px; height: 54px; color: var(--pb-soluk); }
.pb-kart-ad { position: relative; max-width: 86%; margin-top: -22px; padding: 10px 22px; border-radius: 30px; background: var(--pb-koyu); color: var(--pb-beyaz); font-size: 14px; font-weight: 700; line-height: 1.35; text-align: center; transition: background-color .3s; }
.pb-kart:hover .pb-kart-ad { background: var(--pb-ana); }

/* Detay: yan liste + panel */
.pb-detay { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 20px; align-items: start; }
.pb-detay.is-tek { grid-template-columns: minmax(0, 1fr); }
.pb-detay .pb-panel { margin-top: 20px; }
.pb-yan { position: sticky; top: 140px; display: grid; gap: 16px; margin-top: 20px; }
.pb-yan ul { padding: 14px; border-radius: var(--pb-yuvarlak); background: var(--pb-gri); }
.pb-yan li a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 14px; border-radius: 12px; color: var(--pb-beyaz); font-size: 14px; font-weight: 700; line-height: 1.35; transition: background-color .2s, color .2s; }
.pb-yan li a svg { width: 16px; height: 16px; flex: 0 0 auto; opacity: 0; transform: translateX(-6px); transition: opacity .25s, transform .25s var(--pb-gecis); }
.pb-yan li a:hover { background: rgba(255, 255, 255, .12); }
.pb-yan li a:hover svg { opacity: 1; transform: none; }
.pb-yan li.is-secili a { background: var(--pb-beyaz); color: var(--pb-koyu); }
.pb-yan li.is-secili a svg { opacity: 1; transform: none; color: var(--pb-ana); }
.pb-yan-cagri { display: grid; gap: 8px; padding: 22px; border-radius: var(--pb-yuvarlak); background: var(--pb-koyu); color: var(--pb-beyaz); }
.pb-yan-cagri small { font-size: 13px; opacity: .7; }
.pb-yan-cagri a { display: inline-flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 700; transition: color .2s; }
.pb-yan-cagri a:hover { color: #ffd2d4; }
.pb-yan-cagri svg { width: 18px; height: 18px; }
.pb-detay-manset { float: right; max-width: 40%; margin: 0 0 20px 26px; border-radius: 12px; }
.pb-detay-govde::after { content: ""; display: block; clear: both; }
.pb-galeri { clear: both; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; padding-top: 30px; }
.pb-galeri a { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 14px; background: var(--pb-acik); }
.pb-galeri img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--pb-gecis); }
.pb-galeri a::after { content: ""; position: absolute; inset: 0; background: rgba(41, 35, 33, .25); opacity: 0; transition: opacity .3s; }
.pb-galeri a:hover img { transform: scale(1.07); }
.pb-galeri a:hover::after { opacity: 1; }
.pb-indirler { clear: both; display: grid; gap: 12px; padding-top: 26px; }
.pb-indir { display: flex; align-items: center; gap: 16px; padding: 14px 18px; border-radius: 14px; background: var(--pb-acik); transition: background-color .25s; }
.pb-indir:hover { background: var(--pb-zemin); }
.pb-indir-ikon { display: grid; place-items: center; flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; background: var(--pb-beyaz); color: var(--pb-ana); }
.pb-indir-ikon svg { width: 20px; height: 20px; }
.pb-indir b { flex: 1; min-width: 0; font-weight: 700; color: var(--pb-koyu); overflow-wrap: anywhere; }
.pb-indir-dugme { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; padding: 7px 14px; border-radius: 30px; background: var(--pb-ana); color: var(--pb-beyaz); font-size: 13px; font-weight: 700; }
.pb-indir-dugme svg { width: 15px; height: 15px; transition: transform .25s var(--pb-gecis); }
.pb-indir:hover .pb-indir-dugme svg { transform: translateY(2px); }

@media (max-width: 1099px) {
	.pb-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pb-detay { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.pb-yan { position: static; }
}
@media (max-width: 640px) {
	.pb-izgara { grid-template-columns: minmax(0, 1fr); gap: 26px; }
	.pb-yan { margin-top: 14px; }
	.pb-detay .pb-panel { margin-top: 14px; }
	.pb-detay-manset { float: none; max-width: 100%; margin: 0 0 20px; }
	.pb-galeri { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.pb-indir { flex-wrap: wrap; }
}