/* galeri modülü — renk tonlu kategori kartları, vitrin önizleme, görünüm/sıralama çubuğu ve film şeritli büyük görüntüleyici.
   Renkler yalnız app.css tokenlarından (--bb-*). */
.gal-kategoriler { display: grid; gap: 14px; }
.gal-bolum .gal-kat-bag { color: var(--bb-text-strong); text-decoration: none; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gal-bolum .gal-kat-bag:hover { color: var(--bb-gold-text); }
.gal-bolum .bb-grup-baslik small { margin-left: 2px; }
.gal-tumu { margin-left: auto; color: var(--bb-text-dim); font: 400 12px var(--bb-font-mono); letter-spacing: 0; text-transform: none; text-decoration: none; white-space: nowrap; }
.gal-tumu:hover { color: var(--bb-gold-text); }

/* karşılama: vitrin (3 öğede solda 1 büyük + sağda 2 küçük bento) ya da esnek şerit */
.gal-onizleme { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 8px; text-decoration: none; }
.gal-onizleme.gal-vitrin { grid-template-columns: 1.45fr 1fr; grid-template-rows: 112px 112px; }
.gal-onizleme.gal-vitrin .gal-kutu { aspect-ratio: auto; height: 100%; }
.gal-onizleme.gal-vitrin .gal-kutu:first-child { grid-row: 1 / span 2; }

/* blok "galeri: şerit": tek satır, kare sayısı kadar eşit sütun (n1–n6; satır içi stil yok, CSP) */
.gal-serit { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; text-decoration: none; }
.gal-bolum > .gal-serit { padding: 8px; }
.gal-serit.n1 { grid-template-columns: minmax(0, 1fr); }
.gal-serit.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gal-serit.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gal-serit.n5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.gal-serit.n6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.gal-serit.n1 .gal-kutu { aspect-ratio: 16 / 9; }

/* kategori içi: üst hızlı kategori geçiş şeridi */
.gal-gecis { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; padding-bottom: 2px; overflow-x: auto; scrollbar-width: none; }
.gal-gecis::-webkit-scrollbar { display: none; }
.gal-hap { display: inline-flex; align-items: center; gap: 5px; flex: none; padding: 4px 10px; border: 1px solid var(--bb-border-2); border-radius: 99px;
           background: var(--bb-surface-3); color: var(--bb-text-muted); font: 500 12px var(--bb-font-mono); text-decoration: none; white-space: nowrap; transition: border-color .15s, color .15s, background-color .15s; }
.gal-hap small { color: var(--bb-text-faint); font-size: 11px; }
.gal-hap:hover { color: var(--bb-gold-text); border-color: var(--bb-gold); }
.gal-hap.aktif { background: var(--bb-accent-tint); color: var(--bb-gold-text); border-color: var(--bb-gold); }

/* kategori üst çubuğu: renk tonlu başlık + araçlar (tür, sıra, oran, slayt) */
.gal-ust { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 10px; margin-bottom: 12px; padding: 8px 11px;
           border: 1px solid var(--bb-border-2); border-radius: var(--bb-radius);
           background: linear-gradient(90deg, color-mix(in srgb, var(--bb-gold) 10%, var(--bb-surface)), var(--bb-surface-3) 85%); }
.gal-baslik { display: flex; align-items: center; gap: 8px; margin: 0; min-width: 0; color: var(--bb-text-strong); font: 600 12px var(--bb-font-sans); letter-spacing: .05em; text-transform: uppercase; }
.gal-baslik > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gal-baslik small { padding: 1px 7px; background: var(--bb-surface-2); border: 1px solid var(--bb-border-2); border-radius: 99px; color: var(--bb-text-dim); font: 400 11px var(--bb-font-mono); letter-spacing: 0; text-transform: none; }

.gal-araclar { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.gal-grup-btn { display: inline-flex; border: 1px solid var(--bb-border-2); border-radius: 6px; overflow: hidden; background: var(--bb-bg); }
.gal-grup-btn button { padding: 4px 8px; background: transparent; border: 0; border-radius: 0; color: var(--bb-text-dim); font: 500 11px var(--bb-font-mono); }
.gal-grup-btn button:hover { color: var(--bb-text-strong); background: var(--bb-surface); }
.gal-grup-btn button[aria-pressed="true"] { background: var(--bb-accent-tint); color: var(--bb-gold-text); }
button.gal-slayt { font: 500 11px var(--bb-font-mono); padding: 4px 10px; }

/* ızgara ve görünüm oranları (kare 1:1 · sinema 4:3 · geniş 2 sütun) */
.gal-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(156px, 1fr)); gap: 7px; }
.gal-izgara[data-oran="genis"] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.gal-kutu { position: relative; display: block; width: 100%; aspect-ratio: 1; padding: 0; overflow: hidden; background: var(--bb-surface-3); border: 1px solid var(--bb-border-2); border-radius: 7px; cursor: zoom-in; transition: border-color .18s; }
.gal-izgara[data-oran="sinema"] .gal-kutu { aspect-ratio: 4 / 3; }
.gal-izgara[data-oran="genis"] .gal-kutu { aspect-ratio: 16 / 10; }
.gal-kutu:hover { border-color: color-mix(in srgb, var(--bb-gold) 65%, var(--bb-border-2)); background: var(--bb-surface-3); }
.gal-kutu img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .28s ease; }
.gal-kutu:hover img { transform: scale(1.04); }
.gal-oynat { position: absolute; top: 7px; right: 7px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
             background: color-mix(in srgb, var(--bb-bg) 72%, transparent); color: var(--bb-text-strong); border: 1px solid var(--bb-border-2); font-size: 11px; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.gal-etiket { position: absolute; inset: auto 0 0 0; padding: 16px 8px 5px; background: linear-gradient(transparent, color-mix(in srgb, var(--bb-bg) 82%, transparent));
              color: var(--bb-text-strong); font: 500 11.5px var(--bb-font-sans); text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.gal-kapaksiz { display: grid; place-items: center; width: 100%; height: 100%; color: var(--bb-text-dim); font-size: 26px; }

/* ── büyük görüntüleyici (tam çözünürlük + yakınlaştırma + Ken Burns slayt + film şeridi) ── */
.gal-bakici { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; padding: 0; border: 0;
              background: color-mix(in srgb, var(--bb-bg) 95%, transparent); color: var(--bb-text); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.gal-bakici::backdrop { background: var(--bb-scrim); }
/* tam ekrana giren kap: dialog'u birebir kaplar; tam ekranda kendi zeminini taşır (site arkada görünmez) */
.gal-cerceve { position: absolute; inset: 0; }
.gal-cerceve:fullscreen { background: var(--bb-bg); }
.gal-cerceve::backdrop { background: var(--bb-bg); }

.gal-ilerleme { position: absolute; left: 0; top: 0; z-index: 10; height: 2.5px; width: 0; background: var(--bb-gold); }
.gal-ilerleme.akiyor { animation: gal-ilerle var(--slayt-ms, 4500ms) linear forwards; }
@keyframes gal-ilerle { from { width: 0; } to { width: 100%; } }

.gal-bakici-ust { position: absolute; top: 0; left: 0; right: 0; z-index: 6; display: flex; align-items: center; justify-content: space-between; gap: 10px;
                  padding: calc(8px + env(safe-area-inset-top)) 14px 8px; background: linear-gradient(color-mix(in srgb, var(--bb-bg) 78%, transparent), transparent); }
.gal-bakici-bilgi { display: flex; align-items: center; gap: 8px; }
.gal-sira { font: 500 12px var(--bb-font-mono); color: var(--bb-text-muted); white-space: nowrap; }
.gal-hd-rozet { padding: 1px 6px; border: 1px solid color-mix(in srgb, var(--bb-gold) 45%, var(--bb-border-2)); border-radius: 4px; background: var(--bb-accent-tint); color: var(--bb-gold-text); font: 600 10px var(--bb-font-mono); letter-spacing: .04em; }
.gal-ust-dugmeler { display: flex; align-items: center; gap: 6px; }

.gal-sahne { position: absolute; inset: 52px 58px 86px; display: grid; grid-template: 100% / 100%; place-items: center; overflow: hidden; }
.gal-sahne img, .gal-sahne video { min-width: 0; min-height: 0; max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; box-shadow: var(--bb-shadow-pop);
                                   animation: gal-belir .2s ease-out; transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
.gal-sahne img { cursor: zoom-in; }
/* YouTube çerçevesi: sahneye sığan en büyük 16:9 (sahne boyut kabı; cqw/cqh sahnenin kendisi) */
.gal-sahne:has(iframe) { container-type: size; }
.gal-sahne iframe { width: min(100cqw, 100cqh * 16 / 9); aspect-ratio: 16 / 9; border: 0; border-radius: 6px; background: var(--bb-bg); box-shadow: var(--bb-shadow-pop); animation: gal-belir .2s ease-out; }
.gal-sahne.zoom img { transform: scale(1.85); cursor: zoom-out; }
.gal-bakici.slayt-aktif .gal-sahne:not(.zoom) img { animation: gal-belir .22s ease-out, gal-kenburns var(--slayt-ms, 4500ms) ease-out forwards; }
@keyframes gal-belir { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: scale(1); } }
@keyframes gal-kenburns { from { transform: scale(1); } to { transform: scale(1.045); } }

button.gal-dugme { position: absolute; z-index: 6; display: grid; place-items: center; width: 42px; height: 42px; padding: 0;
                   background: color-mix(in srgb, var(--bb-surface-2) 82%, transparent); color: var(--bb-text); border: 1px solid var(--bb-border-2); border-radius: 50%; font: 500 20px/1 var(--bb-font-mono); }
button.gal-dugme:hover, button.gal-dugme.aktif { background: var(--bb-accent-tint); color: var(--bb-gold-text); border-color: var(--bb-gold); }
.gal-ust-dugmeler button.gal-dugme { position: static; width: auto; min-width: 36px; height: 34px; padding: 0 9px; border-radius: 6px; font-size: 12px; }
.gal-onceki { left: 10px; top: 50%; transform: translateY(-50%); }
.gal-sonraki { right: 10px; top: 50%; transform: translateY(-50%); }

.gal-alt { position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; display: flex; flex-direction: column; gap: 6px;
           padding: 8px 16px calc(10px + env(safe-area-inset-bottom)); background: linear-gradient(transparent, color-mix(in srgb, var(--bb-bg) 88%, transparent) 35%); }
.gal-yazi { margin: 0; font-size: .92em; color: var(--bb-text-strong); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gal-yazi:empty { display: none; }

.gal-film { display: flex; align-items: center; justify-content: safe center; gap: 6px; overflow-x: auto; padding: 2px 4px; scrollbar-width: none; }
.gal-film::-webkit-scrollbar { display: none; }
.gal-film[hidden] { display: none; }
button.gal-thumb { position: relative; flex: none; width: 46px; height: 32px; padding: 0; overflow: hidden; border-radius: 4px;
                   background: var(--bb-surface-3); border: 1.5px solid var(--bb-border-2); color: var(--bb-text-dim); font-size: 11px; opacity: .52; transition: opacity .15s, transform .15s, border-color .15s; }
button.gal-thumb:hover { opacity: .85; background: var(--bb-surface-3); }
button.gal-thumb.aktif { opacity: 1; border-color: var(--bb-gold); transform: translateY(-1px); }
button.gal-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 760px) {
  .gal-onizleme.gal-vitrin { grid-template-rows: 86px 86px; }
  .gal-serit.n4, .gal-serit.n5, .gal-serit.n6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }   /* telefonda en çok 3 kare */
  .gal-serit .gal-kutu:nth-child(n+4) { display: none; }
  .gal-sahne { inset: 50px 6px 92px; }
  .gal-bakici-ust { padding-left: 10px; padding-right: 10px; }
  .gal-ust-dugmeler { gap: 4px; }
  .gal-hd-rozet { display: none; }   /* dar ekranda yer düğmelere */
  .gal-ust-dugmeler button.gal-dugme { min-width: 32px; padding: 0 7px; }
  .gal-izgara, .gal-izgara[data-oran="genis"] { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
  .gal-izgara[data-oran="genis"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gal-onceki, .gal-sonraki { top: auto; bottom: calc(54px + env(safe-area-inset-bottom)); transform: none; width: 38px; height: 38px; }
}
@media (prefers-reduced-motion: reduce) {
  .gal-kutu:hover img, .gal-sahne img, .gal-sahne video, .gal-bakici.slayt-aktif .gal-sahne:not(.zoom) img { animation: none; transform: none; }
}