/* Ürün galerisi (Şablon A — onaylı): sitede ürün sayfası ve yönetimde salt görüntüleme penceresi (teklif kalemi → ürün adı) aynı bileşeni kullanır.
   Bağımlılık: Bootstrap Icons; renk değişkenleri site.css / admin.css'ten (yoksa yedek değerler). */
/* ---- Ürün galerisi (Şablon A): büyük görsel + küçük resim şeridi, oklar, sayaç, büyüteç; lightbox ---- */
.pgal { border: 1px solid var(--kd-border, #CFDEE8); border-radius: var(--kd-radius, 12px); background: #fff; padding: .75rem; }
.pgal-main { position: relative; height: 420px; display: flex; align-items: center; justify-content: center; border-radius: 10px; overflow: hidden; background: #fff; }
.pgal-main img { max-width: 100%; max-height: 100%; object-fit: contain; cursor: zoom-in; user-select: none; -webkit-user-drag: none; }
.pgal.is-single .pgal-main img { cursor: default; }
.pgal-arrow { position: absolute; z-index: 2; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--kd-border, #CFDEE8); background: rgba(255,255,255,.92); color: var(--kd-blue-dark, #0B5278); display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0,0,0,.08); transition: background .15s, color .15s; }
.pgal-arrow:hover { background: var(--kd-blue, #0F6997); color: #fff; border-color: var(--kd-blue, #0F6997); }
.pgal-arrow.prev { left: 10px; } .pgal-arrow.next { right: 10px; }
.pgal-count { position: absolute; left: 12px; bottom: 12px; z-index: 2; background: rgba(31,51,94,.85); color: #fff; font-size: .72rem; font-weight: 700; border-radius: 999px; padding: .2rem .6rem; }
.pgal-zoom { position: absolute; right: 12px; bottom: 12px; z-index: 2; width: 34px; height: 34px; border-radius: 8px; background: rgba(255,255,255,.95); border: 1px solid var(--kd-border, #CFDEE8); color: var(--kd-blue, #0F6997); display: flex; align-items: center; justify-content: center; }
.pgal-zoom:hover { background: var(--kd-blue, #0F6997); color: #fff; border-color: var(--kd-blue, #0F6997); }
/* Küçük resim şeridi: 5 görsel görünür, fazlası yanlardaki oklarla kaydırılır */
.pgal-strip { display: flex; align-items: center; gap: .4rem; margin-top: .6rem; }
.pgal-thumbs-view { flex: 1 1 auto; min-width: 0; overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x mandatory; scrollbar-width: none; }
.pgal-thumbs-view::-webkit-scrollbar { display: none; }
.pgal-thumbs { display: flex; gap: .5rem; }
.pgal-thumb { flex: 0 0 calc((100% - 4 * .5rem) / 5); aspect-ratio: 1; border: 2px solid var(--kd-border, #CFDEE8); border-radius: 8px; background: #fff; padding: 3px; display: flex; align-items: center; justify-content: center; transition: border-color .15s; scroll-snap-align: start; }
.pgal-sarrow { flex: 0 0 auto; width: 32px; height: 56px; border-radius: 8px; border: 1px solid var(--kd-border, #CFDEE8); background: #fff; color: var(--kd-blue-dark, #0B5278); display: flex; align-items: center; justify-content: center; font-size: 1rem; box-shadow: 0 2px 6px rgba(0,0,0,.06); transition: background .15s, color .15s; }
.pgal-sarrow:hover:not(:disabled) { background: var(--kd-blue, #0F6997); color: #fff; border-color: var(--kd-blue, #0F6997); }
.pgal-sarrow:disabled { opacity: .35; }
.pgal-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pgal-thumb:hover { border-color: var(--kd-blue-light, #1A80B5); }
.pgal-thumb.is-active { border-color: var(--kd-orange, #F08800); box-shadow: 0 0 0 3px rgba(240,136,0,.15); }
@media (max-width: 575.98px) { .pgal-main { height: 300px; } .pgal-thumb { flex-basis: calc((100% - 3 * .5rem) / 4); } }
/* Lightbox: tam ekran koyu zemin, ortada görsel, oklar, sayaç, kapat (Esc) */
.pgal-lightbox { position: fixed; inset: 0; z-index: 2000; background: rgba(15, 25, 40, .94); display: flex; align-items: center; justify-content: center; padding: 3.5rem 1rem 4.5rem; }
.pgal-lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; box-shadow: 0 20px 60px rgba(0,0,0,.5); border-radius: 6px; background: #fff; }
.pgal-lightbox .lb-close { position: absolute; top: 14px; right: 14px; width: 42px; height: 42px; border-radius: 50%; border: 0; background: rgba(255,255,255,.12); color: #fff; font-size: 1.3rem; display: flex; align-items: center; justify-content: center; }
.pgal-lightbox .lb-close:hover { background: #E74C3C; }
.pgal-lightbox .lb-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgba(255,255,255,.12); color: #fff; font-size: 1.3rem; display: flex; align-items: center; justify-content: center; }
.pgal-lightbox .lb-arrow:hover { background: var(--kd-orange, #F08800); }
.pgal-lightbox .lb-arrow.prev { left: 14px; } .pgal-lightbox .lb-arrow.next { right: 14px; }
.pgal-lightbox .lb-cap { position: absolute; left: 0; right: 0; bottom: 16px; text-align: center; color: #DCEBF3; font-size: .9rem; }
.pgal-lightbox .lb-cap strong { color: #fff; }
.pgal-lightbox .lb-cap .lb-count { display: inline-block; margin-left: .6rem; background: var(--kd-orange, #F08800); color: #fff; border-radius: 999px; padding: .15rem .6rem; font-size: .75rem; font-weight: 800; }
body.pgal-open { overflow: hidden; }