/* =================================================================
   DEMO GALERİ (demo-galeri.html — 2026-11-02)
   Atlıhan Harita YouTube kanalındaki XGRIDS videoları; yeni yüklenenler js/demo-galeri.js ile eklenir.
   Kırıntı, .gorunmez ve talep bandı urun.css'ten, talep vitrini urunler.css'ten. Ölçüler rem (bkz. CLAUDE.md "Ölçekleme").
   ================================================================= */

/* ---------- Hero: destek sayfalarıyla aynı koyu zemin (mavi ışık + ince ızgara); solda başlık, sağda en yeni video ---------- */
.ghero {
  position: relative; isolation: isolate; overflow: hidden; color: #fff;
  background:
    radial-gradient(ellipse 55% 85% at 88% 0%, rgba(var(--xg-rgb), .34), rgba(var(--xg-rgb), 0) 70%),
    radial-gradient(ellipse 75% 16rem at 50% 100%, rgba(var(--xg-rgb), .2), rgba(var(--xg-rgb), 0) 72%),
    var(--ink);
}
.ghero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 4rem 4rem;
  -webkit-mask-image: radial-gradient(ellipse 70% 90% at 75% 20%, #000 0%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 90% at 75% 20%, #000 0%, transparent 75%);
}
.ghero__ic { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 4.5rem; align-items: stretch; padding-block: 3.5rem 4.5rem; }
/* Sol sütun kartla aynı boyda (kullanıcı 2026-11-02: ne butonların altında ne kırıntının altında boşluk kalsın): içerik vurgu satırıyla kart boyuna
   getirildi; kırıntı kartın üst, düğmeler alt kenarına hizalı, kalan birkaç piksellik fark bloklar arasına eşit dağılır */
.ghero__metin { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; }
.ghero__vurgular { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; align-self: stretch; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, .12); }
.ghero__vurgular li { display: flex; flex-direction: column; gap: 0.375rem; }
.ghero__vurgular strong { font-family: var(--font-baslik); font-size: 1.125rem; font-weight: 700; letter-spacing: .05em; line-height: 1.1; text-transform: uppercase; color: #fff; }
.ghero__vurgular span { font-size: var(--fs-sm); line-height: 1.45; color: var(--koyu-soluk); }
.ghero__baslik { display: flex; flex-direction: column; font-family: var(--font-baslik); font-weight: 800; text-transform: uppercase; }
.ghero__baslik > span:first-child { font-size: 5rem; line-height: .95; }
.ghero__slogan { margin-top: 0.75rem; font-size: 2.25rem; font-weight: 700; line-height: 1.05; color: var(--xg-acik); }
.ghero__giris { max-width: 40rem; margin-top: 1.25rem; font-size: var(--fs-lg); line-height: 1.6; color: rgba(255, 255, 255, .84); }
.ghero__giris .atlihan { white-space: nowrap; }
.ghero__dugmeler { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.25rem; }
.ghero .kirinti[data-belir] { --sira: 0; }
.ghero__baslik[data-belir] { --sira: 1; }
.ghero__giris[data-belir] { --sira: 2; }
.ghero__vurgular[data-belir] { --sira: 3; }
.ghero__dugmeler[data-belir] { --sira: 4; }
.gone[data-belir] { --sira: 2; }

/* En yeni video: yerinde oynar (tıklayınca kapak yerine YouTube oynatıcısı) */
/* Sütun kartla aynı boyda: yazı sütunu daha uzunsa (1101–1279 px) fazlalık alt şeride gider, video kırpılmaz */
.gone { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--cizgi-koyu); border-radius: var(--yaricap); background: rgba(255, 255, 255, .04); box-shadow: 0 2rem 4.5rem rgba(0, 0, 0, .45); }
.gone__cerceve { position: relative; aspect-ratio: 16 / 9; background: #000; }
.gone__oynat { position: absolute; inset: 0; display: block; width: 100%; overflow: hidden; }
.gone__kapak { width: 100%; height: 100%; object-fit: contain; transition: transform .6s var(--ease); }
.gone__oynat:hover .gone__kapak { transform: scale(1.03); }
.gone__dugme {
  position: absolute; left: 50%; top: 50%; display: flex; align-items: center; justify-content: center; width: 5.5rem; height: 5.5rem; margin: -2.75rem 0 0 -2.75rem;
  border-radius: 50%; color: #fff; background: rgba(var(--xg-rgb), .92); box-shadow: 0 0 0 0.625rem rgba(var(--xg-rgb), .25), 0 1rem 2.5rem rgba(0, 0, 0, .4);
  transition: transform .25s var(--ease), background-color .25s;
}
.gone__dugme .ikon { width: 2rem; height: 2rem; margin-left: 0.25rem; }
.gone__oynat:hover .gone__dugme, .gone__oynat:focus-visible .gone__dugme { background: var(--xg); transform: scale(1.08); }
.gone__rozet {
  position: absolute; left: 1rem; top: 1rem; padding: 0.3125rem 0.75rem; border-radius: 0.25rem; background: var(--xg); color: #fff;
  font-family: var(--font-baslik); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}
.gone__alt { display: flex; flex: 1; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.25rem 1.5rem 1.375rem; }
.gone__metin { min-width: 0; }
.gone__ust { display: flex; flex-wrap: wrap; gap: 0.75rem; font-family: var(--font-baslik); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--koyu-soluk); }
.gone__ust > span:not(:empty) { color: var(--xg-acik); }
.gone__ad { margin-top: 0.375rem; font-family: var(--font-baslik); font-size: 1.75rem; font-weight: 700; line-height: 1.1; text-transform: uppercase; text-wrap: balance; }
.gone__yt { flex: none; color: var(--xg-acik); font-size: var(--fs-sm); }
.gone__yt:hover { color: #fff; }

/* ---------- Süzgeç çubuğu (urun.css .ucubuk görünümü; düğmeler aria-pressed) ---------- */
.gcubuk { position: sticky; top: var(--ust-h); z-index: 40; background: rgba(var(--ink-rgb), .94); border-bottom: 1px solid var(--cizgi-koyu); -webkit-backdrop-filter: blur(0.75rem); backdrop-filter: blur(0.75rem); }
.gcubuk__ic { display: flex; align-items: center; gap: 2rem; min-height: 4rem; }
.gcubuk__ad { flex: none; font-family: var(--font-baslik); font-size: 1.375rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: #fff; }
.gcubuk__liste { display: flex; gap: 0.25rem; min-width: 0; margin-right: auto; overflow-x: auto; scrollbar-width: none; }
.gcubuk__liste::-webkit-scrollbar { display: none; }
html:not(.js) .gcubuk__liste { visibility: hidden; }
.gsuz {
  position: relative; display: flex; align-items: center; gap: 0.5rem; padding: 1.25rem 0.875rem; white-space: nowrap;
  font-family: var(--font-baslik); font-size: var(--fs-sm); font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--koyu-soluk); transition: color .2s;
}
.gsuz::after { content: ""; position: absolute; left: 0.875rem; right: 0.875rem; bottom: 0; height: 2px; background: var(--xg); transform: scaleX(0); transition: transform .25s var(--ease); }
.gsuz:hover { color: #fff; }
.gsuz[aria-pressed="true"] { color: var(--xg-acik); }
.gsuz[aria-pressed="true"]::after { transform: scaleX(1); }
.gcubuk__dugme { flex: none; }
@media (min-width: 1101px) {
  .gcubuk__ic { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, max-content) minmax(max-content, 1fr); }
  .gcubuk__ad { grid-column: 2; }
  .gcubuk__liste { grid-column: 3; margin-right: 0; }
  .gcubuk__dugme { grid-column: 4; justify-self: end; }
}
html:has(.sayfa-demo) { scroll-padding-top: calc(var(--ust-h) + 4rem); }

/* ---------- Galeri: gruplar (saha videoları, kısa videolar) ---------- */
/* Galeri zemini kurumsal lacivert (kullanıcı 2026-11-02): anasayfadaki koyu bölümlerle aynı — --ink + üst ve alt kenar boyunca mavi ışık şeridi */
.ggaleri {
  background:
    radial-gradient(ellipse 75% 16rem at 50% 0%, rgba(var(--xg-rgb), .22), transparent 72%),
    radial-gradient(ellipse 75% 16rem at 50% 100%, rgba(var(--xg-rgb), .22), transparent 72%),
    var(--ink);
}
.ggrup + .ggrup { margin-top: 4.5rem; }
.ggrup[hidden], .gkart[hidden], .gdolgu[hidden], .gdaha[hidden] { display: none; }
.ggrup__bas { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 2rem; padding-bottom: 1rem; border-bottom: 1px solid var(--cizgi-koyu); }
.ggrup__baslik { font-family: var(--font-baslik); font-size: 1.75rem; font-weight: 700; line-height: 1.1; text-transform: uppercase; color: #fff; }
.gkartlar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.75rem 1.5rem; }   /* saha videoları 4 sütun (kullanıcı 2026-11-02) */
.gkartlar--shorts { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Kart: eşit yükseklik (satırda gerilir), cihaz etiketleri dipte hizalı */
.gkart { display: flex; min-width: 0; }
.gkart__bag {
  display: flex; flex: 1; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--cizgi-koyu); border-radius: var(--yaricap); background: var(--ink-2);
  transition: border-color .25s, box-shadow .25s, transform .25s var(--ease);
}
.gkart__bag:hover { transform: translateY(-0.25rem); border-color: rgba(var(--xg-rgb), .7); box-shadow: 0 1.25rem 2.5rem rgba(0, 0, 0, .45); }
.gkart__medya { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #000; }
.gkart--dik .gkart__medya { aspect-ratio: 4 / 5; }
.gkart__kapak { width: 100%; height: 100%; object-fit: contain; transition: transform .5s var(--ease); }
.gkart__bag:hover .gkart__kapak { transform: scale(1.04); }
.gkart__oynat {
  position: absolute; left: 50%; top: 50%; display: flex; align-items: center; justify-content: center; width: 3.5rem; height: 3.5rem; margin: -1.75rem 0 0 -1.75rem;
  border-radius: 50%; color: #fff; background: rgba(var(--ink-rgb), .62); box-shadow: 0 0 0 0.3125rem rgba(255, 255, 255, .16);
  -webkit-backdrop-filter: blur(0.25rem); backdrop-filter: blur(0.25rem); transition: transform .25s var(--ease), background-color .25s;
}
.gkart__oynat .ikon { width: 1.25rem; height: 1.25rem; margin-left: 0.1875rem; }
.gkart__bag:hover .gkart__oynat, .gkart__bag:focus-visible .gkart__oynat { background: var(--xg); transform: scale(1.08); }
.gkart__sure {
  position: absolute; right: 0.75rem; bottom: 0.75rem; padding: 0.125rem 0.5rem; border-radius: 0.25rem; background: rgba(0, 0, 0, .74); color: #fff;
  font-size: var(--fs-xs); font-weight: 600; font-variant-numeric: tabular-nums;
}
.gkart__metin { display: flex; flex: 1; flex-direction: column; gap: 0.5rem; padding: 1.125rem 1.25rem 1.25rem; }
.gkart__ust { display: flex; justify-content: space-between; gap: 0.75rem; font-family: var(--font-baslik); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--koyu-soluk); }
.gkart__alan { color: var(--xg-acik); }
.gkart__ad { font-family: var(--font-baslik); font-size: 1.25rem; font-weight: 700; line-height: 1.12; text-transform: uppercase; color: #fff; transition: color .2s; }
.gkart--dik .gkart__ad { font-size: 1.1875rem; }
.gkart__bag:hover .gkart__ad { color: var(--xg-acik); }
.gkart__cihaz { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: auto; padding-top: 0.375rem; }
.gkart__cihaz:empty { display: none; }
.gkart__cihaz > span { padding: 0.1875rem 0.625rem; border-radius: 1rem; background: rgba(var(--xg-rgb), .18); color: var(--xg-acik); font-size: var(--fs-xs); font-weight: 600; }

/* Son satırın boş hücreleri: talep (videolar) / kanal (kısa videolar) kutusu; --yayil = kapladığı sütun (JS genişliğe göre ayarlar) */
.gdolgu { display: flex; grid-column: span var(--yayil, 1); min-width: 0; }
.gdolgu__ic {
  display: flex; flex: 1; flex-direction: column; align-items: flex-start; justify-content: center; gap: 0.875rem; padding: 2.25rem 2.5rem; border: 1px solid rgba(var(--xg-rgb), .4); border-radius: var(--yaricap); color: #fff;
  background:
    radial-gradient(ellipse 70% 90% at 100% 0%, rgba(var(--xg-rgb), .5), rgba(var(--xg-rgb), 0) 70%),
    linear-gradient(120deg, var(--ink-2) 0%, var(--ink-3) 100%);
}
.gdolgu__baslik { font-family: var(--font-baslik); font-size: 2rem; font-weight: 800; line-height: 1; text-transform: uppercase; text-wrap: balance; }
.gdolgu__metin { max-width: 30rem; font-size: var(--fs-sm); line-height: 1.55; color: var(--koyu-soluk); }
.gdolgu__ic .dugme { margin-top: 0.5rem; }
.gdaha { display: flex; margin: 2.25rem auto 0; }

.ggizlilik { display: flex; align-items: flex-start; gap: 0.625rem; margin-top: 3.5rem; font-size: var(--fs-sm); line-height: 1.55; color: var(--koyu-soluk); }
.ggizlilik .ikon { flex: none; margin-top: 0.1875rem; color: var(--xg-acik); }
.ggizlilik a { color: #fff; text-decoration: underline; text-decoration-color: rgba(var(--xg-rgb), .5); text-underline-offset: 0.1875rem; }
.ggizlilik a:hover { color: var(--xg-acik); }

/* ---------- Oynatıcı penceresi: YouTube'un kendi oynatıcısı (gelişmiş gizlilik modu) ----------
   Kalite menüsü, ses, tam ekran ve bitiş ekranı olduğu gibi (kullanıcı 2026-11-02). YouTube başlangıç kalitesini oynatıcının piksel boyutuna
   göre seçer (ölçüldü: 900 px yükseklikte 720p, 922 px'te 1080p; vq parametresi ve kalite komutları yok sayılıyor). Kullanıcı seçimi: 1440p ile
   başla, "Kaliteyi Yükselt" 4K → js/demo-galeri.js çerçeveyi 2560×1440 (Shorts 1440×1800) boyutunda kurup bu kutuya ölçekler; düğme 3840×2160'a
   (Shorts 2160×2700) çıkarır. YouTube'un yazıları çerçeveyle aynı oranda küçülür; 4K'da küçük kalır. Üst çubuk oynatıcının dışında (oynatıcının üstüne bir şey binmez). */
.gmodal { width: 100vw; height: 100svh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; overflow: hidden; background: transparent; color: #fff; }
.gmodal[open] { display: grid; place-items: center; }
.gmodal::backdrop { background: rgba(0, 0, 0, .92); }
.gmodal__ic { display: flex; flex-direction: column; width: min(100vw - 2rem, (100svh - 6rem) * 16 / 9); }
.gmodal--dik .gmodal__ic { width: min(100vw - 2rem, (100svh - 6rem) * 4 / 5); }
.gmodal__ust { display: flex; align-items: center; gap: 0.75rem; min-height: 3.5rem; padding: 0.5rem 0 0.75rem; }
.gmodal__baslik { flex: 1; min-width: 0; overflow: hidden; font-family: var(--font-baslik); font-size: 1.25rem; font-weight: 700; letter-spacing: .03em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.gmodal__kalite { flex: none; padding: 0.1875rem 0.625rem; border: 1px solid rgba(255, 255, 255, .28); border-radius: 0.25rem; font-family: var(--font-baslik); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; color: var(--koyu-soluk); }
.gmodal__kalite[hidden] { display: none; }
/* "YouTube'da 4K İzleyin": YouTube logosu + metin; telefonda logo + "4K" */
.gmodal__yt {
  display: inline-flex; flex: none; align-items: center; gap: 0.5rem; min-height: 2.5rem; padding: 0 1rem; border: 1px solid rgba(255, 255, 255, .28); border-radius: 0.25rem;
  font-family: var(--font-baslik); font-size: var(--fs-sm); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: rgba(255, 255, 255, .06); transition: background-color .2s, border-color .2s;
}
.gmodal__yt:hover { border-color: #fff; background: rgba(255, 255, 255, .14); }
.gmodal__yt .gyt { flex: none; width: 1.5rem; height: 1.5rem; }
.gmodal__yt-kisa { display: none; }
.gmodal__yt-kisa[hidden] { display: none !important; }
.gmodal__yukselt {
  display: inline-flex; flex: none; align-items: center; gap: 0.5rem; min-height: 2.5rem; padding: 0 1rem; border: 1px solid rgba(var(--xg-rgb), .7); border-radius: 0.25rem;
  font-family: var(--font-baslik); font-size: var(--fs-sm); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: rgba(var(--xg-rgb), .18); transition: background-color .2s, border-color .2s;
}
.gmodal__yukselt .ikon { transform: rotate(-45deg); }
.gmodal__yukselt:hover { background: rgba(var(--xg-rgb), .4); }
.gmodal__yukselt[aria-pressed="true"] { border-color: var(--xg); background: var(--xg); }
.gmodal__kapat { display: flex; flex: none; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: rgba(255, 255, 255, .1); font-size: 1.375rem; transition: background-color .2s; }
.gmodal__kapat:hover { background: rgba(255, 255, 255, .22); }
.gmodal__oyuncu { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #000; box-shadow: 0 2rem 5rem rgba(0, 0, 0, .6); }
.gmodal--dik .gmodal__oyuncu { aspect-ratio: 4 / 5; }
.gmodal__oyuncu iframe { position: absolute; left: 0; top: 0; border: 0; transform-origin: 0 0; }
@media (max-aspect-ratio: 1/1) {
  .gmodal__ic { width: 100vw; }
  .gmodal--dik .gmodal__ic { width: min(100vw, (100svh - 7rem) * 4 / 5); }
  .gmodal__ust { padding-inline: 0.75rem; }
}
@media (max-width: 640px) {
  .gmodal__baslik { display: none; }   /* dar ekranda kalite ve düğmeye yer; pencerenin adı (aria-labelledby) yine bu başlık */
  .gmodal__kalite { margin-left: auto; }
  .gmodal__yukselt { padding: 0 0.75rem; }
  .gmodal__ust { justify-content: flex-end; gap: 0.5rem; }   /* başlık gizli: bağlantı ve düğmeler sağda */
  .gmodal__yt { padding: 0 0.625rem; }
  .gmodal__yt-metin { display: none; }
  .gmodal__yt-kisa { display: inline; }
}

/* ---------- Hareket ---------- */
@media (prefers-reduced-motion: reduce) {
  .gkart__bag, .gkart__kapak, .gkart__oynat, .gone__kapak, .gone__dugme, .gsuz::after { transition: none; }
  .gkart__bag:hover, .gkart__bag:hover .gkart__kapak, .gkart__bag:hover .gkart__oynat, .gone__oynat:hover .gone__kapak, .gone__oynat:hover .gone__dugme { transform: none; }
}

/* ---------- Tablet / mobil ---------- */
@media (max-width: 1100px) {
  html:has(.sayfa-demo) { scroll-padding-top: calc(var(--ust-h) + 3.25rem); }
  .ghero__ic { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; padding-block: 2.5rem 3rem; }
  .ghero__baslik > span:first-child { font-size: 3.5rem; }
  .ghero__slogan { font-size: 1.75rem; }
  .gcubuk__ic { gap: 1rem; min-height: 3.25rem; }
  .gcubuk__ad { display: none; }
  .gcubuk__liste { margin-inline: calc(var(--oluk) * -1) auto; padding-left: calc(var(--oluk) - 0.875rem); }
  .gsuz { padding-block: 0.9375rem; }
  .gkartlar { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1.25rem; }
  .gkartlar--shorts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gdolgu__ic { padding: 1.75rem; }
  .gdolgu__baslik { font-size: 1.625rem; }
}
@media (max-width: 760px) {
  .gcubuk__dugme { display: none; }
  .gcubuk__liste { margin-right: calc(var(--oluk) * -1); }
  .gone__alt { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
  .gkartlar--shorts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 1rem; }
  .gkart--dik .gkart__metin { padding: 0.875rem 0.875rem 1rem; }
  .gkart--dik .gkart__ad { font-size: 1.0625rem; }
}
@media (max-width: 640px) {
  .ghero__ic { padding-block: 2rem 2.5rem; }
  .ghero__vurgular { grid-template-columns: minmax(0, 1fr); gap: 0.875rem; }
  .ghero__baslik > span:first-child { font-size: 2.75rem; }
  .ghero__slogan { font-size: 1.375rem; }
  .ghero__dugmeler .dugme { flex: 1 1 auto; justify-content: center; }
  .gone__dugme { width: 4rem; height: 4rem; margin: -2rem 0 0 -2rem; }
  .gone__dugme .ikon { width: 1.5rem; height: 1.5rem; }
  .gone__ad { font-size: 1.375rem; }
  .gkartlar--video { grid-template-columns: minmax(0, 1fr); }
  .gdolgu__ic { padding: 1.5rem; }
}