/* ─────────────────────────────────────────────────────────────
   Yasha: css/vitrin.css
   Ana sayfanın vitrini (js/vitrin.js). Sınıflar vt- önekli; eski hero, carousel,
   pc-card, ep-card, cw-card, hk-* ve po-* kuralları bu dosyayla değişti.
   Yalnız tema değişkenleri kullanılır (koyu, açık, OLED ve özel temalar aynen çalışır).

   1. Hero    2. Şerit (raf) ve oklar   3. Kartlar   4. Hover kartı
   5. Ayrıntı penceresi   6. Bu hafta şeridi   7. Açılış iskeleti
   8. Küçük ekran, açık tema, performans modu
   ───────────────────────────────────────────────────────────── */

/* Ana sayfa vitrini kenardan kenara: main'in iç boşluğu kalkar, geri kalan bölümler kendi kapsayıcısını alır */
body.vt-ana main { max-width: none; padding-inline: 0; padding-bottom: 1rem; }
/* Şeritlerle aynı sol kenar (2K'da .sec ortalanıp şeritlerden 140 px içeride başlıyordu) */
body.vt-ana #tab-home > .sec, body.vt-ana #tab-home > .home-admin-row { max-width: none; margin-inline: 0; padding-inline: var(--yan-bosluk); }
/* Ana sayfadaki haberler: şerit başlığı, altında kartlar (en çok 5; css/cila.css #newsHomeGrid) */
.vt-haber .news-grid { padding: .3rem var(--yan-bosluk) 0; }
@media (max-width: 560px) {
  .vt-haber .news-grid { display: flex; gap: .7rem; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; scroll-padding-inline: var(--yan-bosluk); }
  .vt-haber .news-grid::-webkit-scrollbar { display: none; }
  .vt-haber .news-grid > * { flex: 0 0 82%; scroll-snap-align: start; display: flex !important; }
}

/* ── 1. Hero ────────────────────────────────────────────────── */
.vt-hero {
  position: relative; isolation: isolate; overflow: hidden; background: #000; color: #fff;
  margin-top: calc(-1 * var(--vt-nav));
  /* 21.10.2026: hero eskiden ekranın %94'üydü (2K'da 1232 px), ilk kart sırası bir buçuk ekran aşağıdaydı. Şimdi
     en çok ekranın %62'si ve 48rem: büyük ekranda ilk şeridin kartları ilk bakışta görünür. */
  height: clamp(30rem, 38vw, 48rem); max-height: max(30rem, 62vh); min-height: 30rem;
  --vt-meta: rgba(255, 255, 255, .88); --vt-meta-vurgu: #fff;
}
.vt-slaytlar { position: absolute; inset: 0; }
.vt-slayt { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .9s ease, visibility 0s linear .9s; }
.vt-slayt.on { opacity: 1; visibility: visible; transition: opacity .9s ease; z-index: 1; }
.vt-hero-resim { position: absolute; inset: 0; overflow: hidden; background: #0b0b0b; }
/* Bütün slaytlar aynı yerleşimde (kullanıcı 21.10.2026: "düzensiz oldular"). Görsel sağa yaslı, tam yükseklikte; çok geniş
   ekranda (2K ve üstü) en çok 2160 px genişler, sol kenarı yumuşakça koyuya karışır: banner'lar ~1600 px olduğu için
   2560 px'e gerilince bulanıklaşıyordu. Yavaş yakınlaşma (Ken Burns) da görseli büyütüp yumuşattığı için kalktı. */
.vt-hero-resim img { position: absolute; top: 0; right: 0; width: min(100%, 2160px); height: 100%; object-fit: cover; object-position: 70% 22%; }
@media (min-width: 2161px) {
  .vt-hero-resim img { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%); mask-image: linear-gradient(90deg, transparent 0, #000 22%); }
}
.vt-hero-resim img.yok { display: none; }
/* Okunur yazı için üç katman: alttan sayfa rengine geçiş (en üstte, yoksa hero'nun dibi sayfadan koyu kalıp çizgi yapıyordu), soldan koyu, üstten nav için hafif koyu */
.vt-slayt::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(0deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 82%, transparent) 9%, color-mix(in srgb, var(--bg) 45%, transparent) 20%, color-mix(in srgb, var(--bg) 12%, transparent) 30%, transparent 40%),
    linear-gradient(90deg, rgba(0, 0, 0, .86) 0%, rgba(0, 0, 0, .6) 30%, rgba(0, 0, 0, .12) 58%, rgba(0, 0, 0, 0) 74%),
    linear-gradient(180deg, rgba(0, 0, 0, .5) 0%, transparent 24%);
}
.vt-hero-ic {
  position: absolute; z-index: 3; left: var(--yan-bosluk); bottom: clamp(3.6rem, 11%, 8rem); width: min(41rem, calc(100% - 2 * var(--yan-bosluk)));
  display: flex; flex-direction: column; align-items: flex-start; gap: 1rem;
}
.vt-hero-etiket {
  display: inline-flex; align-items: center; gap: .5rem; font-size: .76rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #fff; opacity: .92;
}
.vt-hero-ust { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem 1rem; }
.vt-hero-ust .ekip-logolari.hero-ici { position: static; }
.vt-hero-ust .ekip-logo { width: 2.1rem; height: 2.1rem; }
.vt-hero-etiket::before { content: ''; width: .2rem; height: 1.15em; border-radius: .2rem; background: var(--pr); }
.vt-hero-etiket.yeni { color: #fff; opacity: 1; }
.vt-hero-etiket.yeni::before { background: var(--green); }
.vt-hero-baslik { margin: 0; line-height: 1; width: 100%; }
.vt-hero-baslik .vt-ad { display: block; font-size: clamp(2.5rem, 5.4vw, 5.2rem); text-shadow: 0 .2rem 1.6rem rgba(0, 0, 0, .55); text-wrap: balance; }
.vt-hero-baslik .vt-logo { max-height: clamp(5rem, 13vw, 11.5rem); max-width: min(100%, 32rem); }
.vt-hero .vt-meta { font-size: .95rem; text-shadow: 0 1px .6rem rgba(0, 0, 0, .6); }
.vt-hero-aciklama {
  margin: 0; max-width: 34rem; font-size: clamp(.95rem, 1.08vw, 1.12rem); line-height: 1.6; color: rgba(255, 255, 255, .92); text-shadow: 0 1px .8rem rgba(0, 0, 0, .7);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.vt-hero-eylem { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; margin-top: .3rem; }

/* Denetimler (sağ alt): duraklat, önceki, sonraki; küçük resim şeridi */
.vt-hero-kontrol { position: absolute; z-index: 5; right: var(--yan-bosluk); bottom: clamp(9.6rem, 17%, 12rem); display: flex; gap: .5rem; }
.vt-sirada { position: absolute; z-index: 5; right: var(--yan-bosluk); bottom: clamp(2rem, 6%, 3.2rem); display: flex; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.vt-kucuk {
  position: relative; display: block; width: clamp(7rem, 9vw, 10.5rem); aspect-ratio: 16/9; padding: 0; border: 0; border-radius: .5rem; overflow: hidden; cursor: pointer;
  background: #151515; opacity: .62; box-shadow: inset 0 0 0 .1rem rgba(255, 255, 255, .2); transition: opacity .25s, transform .25s var(--vt-hizli), box-shadow .25s;
}
.vt-kucuk img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vt-kucuk img.yok { display: none; }
.vt-kucuk:hover { opacity: 1; transform: translateY(-.15rem); }
.vt-kucuk.on { opacity: 1; box-shadow: inset 0 0 0 .14rem #fff; }
.vt-kucuk-ad {
  position: absolute; inset: auto 0 0 0; padding: 1.2rem .5rem .35rem; text-align: left; font-size: .68rem; font-weight: 700; line-height: 1.2; color: #fff;
  background: linear-gradient(0deg, rgba(0, 0, 0, .85), transparent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vt-kucuk-cubuk { position: absolute; left: 0; bottom: 0; height: .2rem; width: 0; background: var(--pr); }
.vt-kucuk.on .vt-kucuk-cubuk { width: 100%; }
.vt-hero.akiyor .vt-kucuk.on .vt-kucuk-cubuk { width: 0; animation: vtCubuk var(--vt-sure, 7500ms) linear forwards; }
@keyframes vtCubuk { to { width: 100%; } }
.vt-hero.tek .vt-hero-kontrol, .vt-hero.tek .vt-sirada { display: none; }

/* ── 2. Şerit (raf) ─────────────────────────────────────────── */
.vt-raf { --vt-aralik: .7rem; --vt-sutun: 7; position: relative; margin-top: clamp(1.4rem, 2.8vw, 2.8rem); }
.vt-raf.genis { --vt-sutun: 4.2; }
@media (max-width: 1900px) { .vt-raf { --vt-sutun: 6; } .vt-raf.genis { --vt-sutun: 4; } }
@media (max-width: 1400px) { .vt-raf { --vt-sutun: 5; } .vt-raf.genis { --vt-sutun: 3.6; } }
@media (max-width: 1100px) { .vt-raf { --vt-sutun: 4.2; } .vt-raf.genis { --vt-sutun: 3; } }
@media (max-width: 820px) { .vt-raf { --vt-sutun: 3.2; --vt-aralik: .55rem; } .vt-raf.genis { --vt-sutun: 2.3; } }
@media (max-width: 560px) { .vt-raf { --vt-sutun: 2.35; } .vt-raf.genis { --vt-sutun: 1.35; } }
.vt-raf-bas { display: flex; align-items: center; gap: 1rem; padding: 0 var(--yan-bosluk); margin-bottom: .55rem; min-height: 2.2rem; }
.vt-raf-baslik { display: flex; align-items: baseline; gap: .6rem; margin: 0; font-size: clamp(1.15rem, 1.5vw, 1.55rem); font-weight: 800; letter-spacing: -.015em; color: var(--text); }
.vt-raf-baslik i { color: var(--pr); font-size: .78em; align-self: center; }
.vt-raf-alt { font-size: .78rem; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.vt-raf-tumu {
  margin-left: .2rem; display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .6rem; border: 0; border-radius: 2rem; background: none; cursor: pointer;
  font: inherit; font-size: .8rem; font-weight: 700; color: var(--pr); opacity: .85; transition: opacity .2s, background .2s, gap .2s;
}
.vt-raf-tumu:hover { opacity: 1; background: color-mix(in srgb, var(--pr) 12%, transparent); gap: .55rem; }
.vt-raf-tumu i { font-size: .7em; }
.vt-raf-sayfa { margin-left: auto; display: flex; gap: .2rem; opacity: 0; transition: opacity .2s; }
.vt-raf-sayfa i { width: 1rem; height: .17rem; border-radius: .2rem; background: var(--border-h); }
.vt-raf-sayfa i.on { background: var(--muted); }
.vt-raf:hover .vt-raf-sayfa, .vt-raf:focus-within .vt-raf-sayfa { opacity: 1; }
@media (hover: none), (max-width: 820px) { .vt-raf-sayfa { display: none; } }
.vt-raf-kapsa { position: relative; }
.vt-raf-seridi {
  display: flex; gap: var(--vt-aralik); list-style: none; margin: 0; padding: .5rem var(--yan-bosluk) 1.2rem;
  overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; scroll-padding-inline: var(--yan-bosluk); scrollbar-width: none; overscroll-behavior-x: contain;
}
.vt-raf-seridi::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: no-preference) { .vt-raf-seridi { scroll-behavior: smooth; } }
.vt-oge { position: relative; flex: 0 0 calc((100% - var(--vt-aralik) * (var(--vt-sutun) - 1)) / var(--vt-sutun)); min-width: 0; scroll-snap-align: start; }
.vt-ok {
  position: absolute; z-index: 7; top: .5rem; bottom: 1.2rem; width: clamp(2.6rem, 3.2vw, 4.2rem); display: flex; align-items: center; justify-content: center; padding: 0; border: 0; cursor: pointer;
  color: var(--text); font-size: 1.3rem; opacity: 0; transition: opacity .2s, background .2s; background: color-mix(in srgb, var(--bg) 62%, transparent);
}
.vt-ok.sol { left: 0; border-radius: 0 var(--vt-r-k) var(--vt-r-k) 0; }
.vt-ok.sag { right: 0; border-radius: var(--vt-r-k) 0 0 var(--vt-r-k); }
.vt-ok i { transition: transform .2s var(--vt-hizli); }
.vt-raf:hover .vt-ok:not(:disabled), .vt-ok:focus-visible { opacity: 1; }
.vt-ok:not(:disabled):hover { background: color-mix(in srgb, var(--bg) 82%, transparent); }
.vt-ok:not(:disabled):hover i { transform: scale(1.25); }
/* polish.css "button:disabled { opacity: .55 }" kaydırılacak şey yokken okları gösteriyordu */
.vt-ok:disabled { cursor: default; opacity: 0; pointer-events: none; }
@media (hover: none) { .vt-ok { display: none; } }

/* ── 3. Kartlar ─────────────────────────────────────────────── */
.vt-kart, .vt-bkart { display: block; color: inherit; text-decoration: none; border-radius: var(--vt-r-k); --vt-odak-r: var(--vt-r-k); }
.vt-kart-gorsel, .vt-bkart-gorsel {
  position: relative; display: block; overflow: hidden; border-radius: var(--vt-r-k); background: var(--card); box-shadow: inset 0 0 0 1px var(--border);
}
.vt-kart-gorsel { aspect-ratio: 2 / 3; }
.vt-kart.yatay .vt-kart-gorsel, .vt-bkart-gorsel { aspect-ratio: 16 / 9; }
/* Yükleniyor: dönen ışıltı (görsel gelince üstünü kapatır). Performans modunda düz. */
.vt-kart-gorsel, .vt-bkart-gorsel, .vt-hafta-resim { background-image: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--text) 8%, transparent) 50%, transparent 70%); background-size: 220% 100%; animation: vtIsilti 1.7s linear infinite; }
@keyframes vtIsilti { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.vt-kart-gorsel > img:first-child, .vt-bkart-gorsel > img:first-child, .vt-hafta-resim > img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--card); transition: transform .6s var(--vt-hizli), filter .3s;
}
.vt-kart-gorsel > img.yok, .vt-bkart-gorsel > img.yok, .vt-hafta-resim > img.yok { visibility: hidden; }
.vt-kart-gorsel:has(> img.yok)::after, .vt-bkart-gorsel:has(> img.yok)::after {
  content: '\f03e'; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; inset: 0; display: grid; place-items: center; font-size: 2rem; color: var(--muted);
}
.vt-kart:hover .vt-kart-gorsel > img:first-child, .vt-bkart:hover .vt-bkart-gorsel > img:first-child { transform: scale(1.045); }
.vt-kart-parilti { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 0, 0, .55) 0%, transparent 34%); pointer-events: none; }
.vt-kart-gorsel .vt-yas { position: absolute; left: .5rem; bottom: .5rem; z-index: 2; color: #fff; background: rgba(0, 0, 0, .58); }
.vt-kart-logo { position: absolute; z-index: 2; left: .7rem; bottom: .7rem; max-width: 58%; max-height: 34%; object-fit: contain; object-position: left bottom; filter: drop-shadow(0 .15rem .5rem rgba(0, 0, 0, .8)); }
.vt-kart-govde, .vt-bkart-govde { display: block; padding: .6rem .1rem 0; }
.vt-kart-ad, .vt-bkart-ad {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; font-size: .94rem; font-weight: 700; line-height: 1.3; color: var(--text);
}
.vt-kart-alt, .vt-bkart-alt { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .45rem; margin-top: .22rem; font-size: .8rem; font-weight: 600; color: var(--muted); }
.vt-kart-alt i, .vt-bkart-alt i { width: .2rem; height: .2rem; border-radius: 50%; background: currentColor; opacity: .6; }
.vt-bkart-proje { display: block; font-size: .78rem; font-weight: 800; letter-spacing: .02em; color: var(--pr); margin-bottom: .1rem; text-transform: none; }
.vt-oynat {
  position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; background: rgba(0, 0, 0, .0); opacity: 0; transition: opacity .25s, background .25s;
}
.vt-oynat i { display: grid; place-items: center; width: 3.1rem; height: 3.1rem; border-radius: 50%; background: rgba(255, 255, 255, .94); color: #000; font-size: 1rem; padding-left: .12rem; transform: scale(.8); transition: transform .25s var(--vt-hizli); }
.vt-bkart:hover .vt-oynat, .vt-bkart:focus-visible .vt-oynat { opacity: 1; background: rgba(0, 0, 0, .32); }
.vt-bkart:hover .vt-oynat i, .vt-bkart:focus-visible .vt-oynat i { transform: scale(1); }
.vt-ilerleme { position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; height: .28rem; background: rgba(255, 255, 255, .28); }
.vt-ilerleme i { display: block; height: 100%; background: var(--pr); }
.vt-kaldir {
  position: absolute; z-index: 6; top: .4rem; right: .4rem; width: 2rem; height: 2rem; display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(0, 0, 0, .7); color: #fff; opacity: 0; transition: opacity .2s, background .2s; font-size: .8rem;
}
.vt-oge:hover > .vt-kaldir, .vt-kaldir:focus-visible { opacity: 1; }
.vt-kaldir:hover { background: var(--red); }
@media (hover: none) { .vt-kaldir { opacity: .9; } }
/* Düzenleme düğmeleri yalnız düzenleyebilene çizilir ve hep görünür. Kullanıcı 21.10.2026: "pc'de ana sayfada düzenle
   tuşları görünmez". css/adminedit.css .ae-card-edit'i opacity:0 tutup yalnız eski kartlarda (.pc-card:hover) gösteriyordu,
   vitrin kartlarında masaüstünde hiç görünmüyordu; fareyle açılan hover kartı da üstünü kapatıyordu (orada da kalem var). */
.vt-duzenle { position: absolute; z-index: 6; top: .4rem; right: .4rem; display: flex; gap: .3rem; }
.vt-duzenle .ae-card-edit { position: static; opacity: 1; }
/* Izgara görünümü (Keşfet, ekip sayfası): aynı kart, hücreye yayılır */
.proj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: 1.4rem .8rem; }
.proj-grid > .vt-kart { min-width: 0; }

/* ── 4. Hover kartı (Netflix gibi) ──────────────────────────── */
.vt-hover {
  position: fixed; z-index: 950; background: var(--card); color: var(--text); border-radius: .95rem; overflow: hidden; pointer-events: none; opacity: 0;
  box-shadow: var(--vt-gol), 0 0 0 1px var(--border-h);
  transform: scale(var(--vt-bas, .6)); transform-origin: var(--vt-ox, 50%) var(--vt-oy, 50%);
  transition: transform .26s var(--vt-hizli), opacity .18s ease;
}
.vt-hover[hidden] { display: none; }
.vt-hover.acik { opacity: 1; transform: none; pointer-events: auto; }
.vt-hover-gorsel { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--surf); overflow: hidden; }
.vt-hover-gorsel > img { width: 100%; height: 100%; object-fit: cover; }
.vt-hover-gradyan { position: absolute; inset: 0; background: linear-gradient(0deg, var(--card) 0%, color-mix(in srgb, var(--card) 40%, transparent) 26%, transparent 55%); }
.vt-hover-baslik { position: absolute; left: 1rem; right: 1rem; bottom: .8rem; line-height: 1; }
.vt-hover-baslik .vt-ad { display: block; font-size: 1.55rem; text-shadow: 0 .1rem .8rem rgba(0, 0, 0, .7); color: #fff; }
.vt-hover-baslik .vt-logo { max-height: 4.6rem; max-width: 62%; }
.vt-hover-govde { padding: .9rem 1rem 1.05rem; display: flex; flex-direction: column; gap: .62rem; }
.vt-hover-eylem { display: flex; align-items: center; gap: .5rem; }
.vt-hover .vt-meta { font-size: .82rem; }
.vt-hover .vt-turler, .vt-turler { display: flex; flex-wrap: wrap; gap: .1rem .15rem; margin: 0; padding: 0; list-style: none; font-size: .82rem; font-weight: 600; color: var(--text-s); }
.vt-turler li + li::before { content: ''; display: inline-block; width: .2rem; height: .2rem; margin: 0 .5rem .18rem 0; border-radius: 50%; background: currentColor; opacity: .55; vertical-align: middle; }
.vt-hover-durum { display: flex; align-items: center; gap: .5rem; font-size: .82rem; font-weight: 800; color: var(--text); }
.vt-hover-durum > span { width: .55rem; height: .55rem; border-radius: 50%; background: var(--gold); flex: 0 0 auto; }
.vt-hover-durum.green > span { background: var(--green); }
.vt-hover-durum.red > span { background: var(--red); }
.vt-hover-durum.blue > span { background: var(--blue); }
.vt-hover-durum.muted > span { background: var(--muted); }
.vt-hover-durum small { font-size: .74rem; font-weight: 600; color: var(--muted); }
.vt-hover-aciklama { margin: 0; font-size: .82rem; line-height: 1.5; color: var(--text-s); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vt-hover-ekip { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; font-size: .76rem; font-weight: 700; color: var(--muted); }
.vt-hover-ekip i { width: .2rem; height: .2rem; border-radius: 50%; background: currentColor; }

/* ── 5. Ayrıntı penceresi ───────────────────────────────────── */
.po-bg { position: fixed; inset: 0; z-index: 2000; background: var(--scrim); opacity: 0; visibility: hidden; transition: opacity .25s, visibility 0s linear .25s; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.po-bg.acik { opacity: 1; visibility: visible; transition: opacity .25s; }
.po-kutu {
  position: fixed; z-index: 2001; left: 50%; top: 50%; width: min(56rem, 94vw); max-height: 92vh; overflow: auto; overscroll-behavior: contain; border-radius: 1.1rem;
  background: var(--modal-bg, var(--card)); color: var(--text); box-shadow: var(--vt-gol), 0 0 0 1px var(--border-h);
  opacity: 0; visibility: hidden; transform: translate(-50%, -46%) scale(.96); transition: opacity .25s, transform .3s var(--vt-hizli), visibility 0s linear .3s;
}
.po-kutu.acik { opacity: 1; visibility: visible; transform: translate(-50%, -50%); transition: opacity .25s, transform .3s var(--vt-hizli); }
.po-x { position: absolute; z-index: 5; top: .8rem; right: .8rem; width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(20, 20, 20, .72); color: #fff; cursor: pointer; font-size: 1rem; transition: background .2s; }
.po-x:hover { background: rgba(70, 70, 70, .9); }
.po-banner { position: relative; aspect-ratio: 16 / 7.6; background: #0b0b0b; color: #fff; overflow: hidden; }
.po-banner > img { width: 100%; height: 100%; object-fit: cover; }
.po-grad { position: absolute; inset: 0; background: linear-gradient(0deg, var(--modal-bg, var(--card)) 0%, color-mix(in srgb, var(--modal-bg, var(--card)) 50%, transparent) 26%, transparent 62%), linear-gradient(90deg, rgba(0, 0, 0, .5), transparent 55%); }
.po-banner-ic { position: absolute; left: 1.8rem; right: 1.8rem; bottom: 1.3rem; display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.po-baslik { margin: 0; line-height: 1; width: 100%; }
.po-baslik .vt-ad { display: block; font-size: clamp(1.9rem, 4vw, 3rem); color: #fff; text-shadow: 0 .2rem 1.2rem rgba(0, 0, 0, .6); }
.po-baslik .vt-logo { max-height: clamp(3.6rem, 9vw, 6.4rem); max-width: min(100%, 22rem); }
.po-govde { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); gap: 1.6rem; padding: .4rem 1.8rem 1rem; }
.po-aciklama { margin: .9rem 0 0; font-size: 1rem; line-height: 1.65; color: var(--text); }
.po-sag { font-size: .88rem; line-height: 1.55; color: var(--text-s); display: flex; flex-direction: column; gap: .5rem; padding-top: .3rem; }
.po-sag p { margin: 0; }
.po-sag p span { display: block; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: .1rem; }
.po-ekip-bas { display: flex; align-items: center; gap: .5rem; padding: .6rem 1.8rem .2rem; font-size: .8rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.po-ekip { padding: 0 1.8rem 1.6rem; }
.po-kutu .meta, .po-kutu .vt-meta { --vt-meta: var(--text-s); --vt-meta-vurgu: var(--text); }
@media (max-width: 700px) {
  .po-kutu { left: 0; right: 0; top: auto; bottom: 0; width: 100%; max-height: 90vh; border-radius: 1.2rem 1.2rem 0 0; transform: translateY(8%); }
  .po-kutu.acik { transform: none; }
  .po-govde { grid-template-columns: 1fr; padding-inline: 1.2rem; }
  .po-banner-ic { left: 1.2rem; right: 1.2rem; }
  .po-ekip-bas, .po-ekip { padding-inline: 1.2rem; }
  .po-banner { aspect-ratio: 16 / 10; }
}

/* Ziyaretçiye kilitli şerit: içerik bulanık, üstünde kayıt çağrısı */
.vt-kilit { position: relative; }
.vt-kilit-icerik { filter: blur(7px) saturate(.9); opacity: .55; pointer-events: none; user-select: none; }
.vt-kilit-ust { position: absolute; inset: 0; z-index: 8; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; text-align: center; padding: 1rem;
  background: linear-gradient(0deg, color-mix(in srgb, var(--bg) 70%, transparent), color-mix(in srgb, var(--bg) 35%, transparent)); }
.vt-kilit-ust h3 { margin: 0; font-size: clamp(1.1rem, 1.6vw, 1.5rem); font-weight: 800; color: var(--text); }
.vt-kilit-ust p { margin: 0 0 .4rem; color: var(--text-s); }
.vt-kilit-ikon { display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: 50%; background: color-mix(in srgb, var(--pr) 18%, var(--card)); color: var(--pr); font-size: 1.1rem; }
.vt-rozet.ekstra { background: color-mix(in srgb, var(--purple) 85%, #000); color: #fff; }

/* ── 6. Bu hafta şeridi ─────────────────────────────────────── */
.vt-hafta-sec, #haftaSec { margin-top: clamp(1.4rem, 2.8vw, 2.8rem); }
.vt-hafta { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .6rem; padding: .3rem var(--yan-bosluk) 0; }
.vt-hafta-gun { min-width: 0; padding: .7rem; border-radius: var(--vt-r); background: var(--card); box-shadow: inset 0 0 0 1px var(--border); }
.vt-hafta-gun.bugun { background: color-mix(in srgb, var(--pr) 10%, var(--card)); box-shadow: inset 0 0 0 .1rem color-mix(in srgb, var(--pr) 60%, transparent); }
.vt-hafta-bas { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; margin-bottom: .6rem; }
.vt-hafta-bas b { font-size: .88rem; font-weight: 800; color: var(--text); }
.vt-hafta-bas span { font-size: .74rem; font-weight: 700; color: var(--muted); }
.vt-hafta-gun ul { display: flex; flex-direction: column; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.vt-hafta-oge { display: flex; gap: .55rem; align-items: center; padding: .3rem; margin: -.3rem; border-radius: .55rem; color: inherit; text-decoration: none; transition: background .2s; }
.vt-hafta-oge:hover { background: var(--hover-bg); }
.vt-hafta-resim { position: relative; flex: 0 0 3.4rem; aspect-ratio: 16 / 10; border-radius: .4rem; overflow: hidden; background-color: var(--surf); }
.vt-hafta-yazi { min-width: 0; display: flex; flex-direction: column; }
.vt-hafta-yazi b { font-size: .8rem; font-weight: 700; line-height: 1.25; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vt-hafta-yazi small { font-size: .72rem; font-weight: 600; color: var(--muted); }
.vt-hafta-bos { margin: 0; font-size: .76rem; color: var(--muted); }
.vt-hafta-gun.bos { background: transparent; box-shadow: inset 0 0 0 1px var(--border); opacity: .75; }
@media (max-width: 1100px) {
  .vt-hafta { display: flex; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding-bottom: .5rem; }
  .vt-hafta::-webkit-scrollbar { display: none; }
  .vt-hafta-gun { flex: 0 0 min(15rem, 62vw); scroll-snap-align: start; }
  /* Kayan şeritte boş günler yer kaplamaz (yalnız yayını olan günler) */
  .vt-hafta-gun.bos { display: none; }
}

/* ── 7. Açılış iskeleti: gerçek vitrinle aynı ölçü, yerleşim zıplamaz ── */
#loader.isk .isk-vt-hero { position: relative; height: clamp(30rem, 38vw, 48rem); max-height: max(30rem, 62vh); background: linear-gradient(100deg, #0d0d0d 20%, #181818 50%, #0d0d0d 80%); background-size: 220% 100%; animation: vtIsilti 1.7s linear infinite; }
#loader.isk .isk-vt-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, var(--bg), transparent 34%); }
#loader.isk .isk-vt-ic { position: absolute; z-index: 2; left: var(--yan-bosluk); bottom: clamp(3.6rem, 11%, 8rem); width: min(34rem, 80%); display: flex; flex-direction: column; gap: 1rem; }
#loader.isk .isk-vt-ic .isk-b { border-radius: .5rem; }
#loader.isk .isk-vt-raf { padding: 0 var(--yan-bosluk); margin-top: 1.6rem; }
#loader.isk .isk-vt-satir { display: flex; gap: .7rem; overflow: hidden; margin-top: .8rem; }
#loader.isk .isk-vt-kart { flex: 0 0 calc((100% - .7rem * 5) / 6); aspect-ratio: 2 / 3; border-radius: var(--vt-r-k); }
@media (max-width: 820px) { #loader.isk .isk-vt-kart { flex-basis: calc((100% - .55rem * 2) / 3.2); } }
@media (max-width: 900px) { #loader.isk .isk-vt-hero { height: clamp(31rem, 112vw, 44rem); } }
@media (max-width: 560px) { #loader.isk .isk-vt-hero { height: clamp(34rem, 150vw, 46rem); max-height: none; } #loader.isk .isk-vt-ic { bottom: 4.4rem; width: calc(100% - 2 * var(--yan-bosluk)); } #loader.isk .isk-vt-kart { flex-basis: calc((100% - .55rem * 2) / 2.35); } }

/* ── 8. Küçük ekran, açık tema, performans modu ─────────────── */
@media (max-width: 900px) {
  .vt-hero { height: clamp(31rem, 112vw, 44rem); }
  .vt-hero-resim img { object-position: 62% 18%; }
  .vt-hero-ic { bottom: 4.6rem; gap: .8rem; width: calc(100% - 2 * var(--yan-bosluk)); }
  .vt-hero-aciklama { -webkit-line-clamp: 3; font-size: .95rem; }
  /* Duraklat düğmesi noktalarla aynı sırada sağda; önceki/sonraki yerine kaydırma var */
  .vt-hero-kontrol { bottom: .95rem; top: auto; }
  .vt-hero-kontrol .vt-ikon-btn[data-yon] { display: none; }
  .vt-hero-kontrol .vt-ikon-btn { width: 2.6rem; height: 2.6rem; }
  /* Küçük resimler yerine noktalar (dokunma alanı 44px) */
  .vt-sirada { left: 0; right: 0; bottom: 1.1rem; justify-content: center; gap: .1rem; }
  .vt-kucuk { width: 2.8rem; height: 2.6rem; aspect-ratio: auto; background: none; box-shadow: none; opacity: 1; overflow: visible; }
  .vt-kucuk img, .vt-kucuk-ad { display: none; }
  .vt-kucuk::before { content: ''; position: absolute; left: .3rem; right: .3rem; top: 50%; height: .24rem; margin-top: -.12rem; border-radius: .2rem; background: rgba(255, 255, 255, .35); }
  .vt-kucuk.on::before { background: rgba(255, 255, 255, .35); }
  .vt-kucuk-cubuk { left: .3rem; bottom: auto; top: 50%; margin-top: -.12rem; height: .24rem; border-radius: .2rem; max-width: calc(100% - .6rem); }
  .vt-hero.akiyor .vt-kucuk.on .vt-kucuk-cubuk { animation-name: vtCubukK; }
  .vt-kucuk.on .vt-kucuk-cubuk { width: calc(100% - .6rem); }
  @keyframes vtCubukK { to { width: calc(100% - .6rem); } }
  .vt-btn { min-height: 2.8rem; padding: 0 1.2rem; font-size: .95rem; }
}
@media (max-width: 560px) {
  /* Telefon: hero daha uzun (yazı üst çubuğa değmez), resim üstte, yazı altta koyu zeminde; açıklama 2 satır */
  .vt-hero { height: clamp(34rem, 150vw, 46rem); max-height: none; }
  .vt-hero-resim img { object-position: 60% 15%; }
  .vt-slayt::before {
    background:
      linear-gradient(0deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 92%, transparent) 14%, rgba(0, 0, 0, .72) 38%, rgba(0, 0, 0, .25) 58%, transparent 72%),
      linear-gradient(180deg, rgba(0, 0, 0, .55) 0%, transparent 18%);
  }
  .vt-hero-ic { bottom: 4.4rem; gap: .65rem; }
  .vt-hero-baslik .vt-ad { font-size: clamp(2.1rem, 10vw, 2.8rem); }
  .vt-hero-baslik .vt-logo { max-height: 6.2rem; max-width: 80%; }
  .vt-hero-etiket { font-size: .7rem; }
  .vt-hero .vt-meta { font-size: .86rem; }
  .vt-hero-geri { font-size: .86rem; margin: 0; }
  .vt-hero-aciklama { -webkit-line-clamp: 2; font-size: .9rem; line-height: 1.5; }
  .vt-hero-eylem { width: 100%; gap: .55rem; margin-top: .15rem; }
  .vt-hero-eylem .vt-btn.ana { flex: 1 1 100%; }
  .vt-hero-eylem .vt-btn.ikincil, .vt-hero-eylem .takip-btn { flex: 1 1 0; min-width: 0; justify-content: center; }
  .vt-raf-tumu { margin-left: auto; }
  .vt-raf-bas { gap: .6rem; }
  /* Ziyaretçiye kilitli şerit telefonda az yer kaplar */
  .vt-kilit .vt-kilit-icerik { max-height: 14rem; overflow: hidden; }
  .vt-kilit-ust { gap: .45rem; }
  .vt-kilit-ikon { width: 2.6rem; height: 2.6rem; font-size: .95rem; }
}
/* Açık tema: kart gölgesi hafif, yükleniyor ışıltısı koyu */
[data-theme="light"] .vt-kart-gorsel, [data-theme="light"] .vt-bkart-gorsel { box-shadow: inset 0 0 0 1px var(--border), 0 .3rem .9rem -.5rem rgba(0, 0, 0, .25); }
[data-theme="light"] .vt-ok { color: #111; }
/* Performans modu (js/perf.js) ve hareketi azalt: ışıltı, yakınlaşma ve geçişler kapanır */
html[data-lite] .vt-kart-gorsel, html[data-lite] .vt-bkart-gorsel, html[data-lite] .vt-hafta-resim,
html[data-hareket-az] .vt-kart-gorsel, html[data-hareket-az] .vt-bkart-gorsel, html[data-hareket-az] .vt-hafta-resim { animation: none; background-image: none; }
html[data-lite] .vt-slayt, html[data-hareket-az] .vt-slayt { transition: none; }
html[data-lite] .vt-hover { transition: opacity .1s; transform: none; }
html[data-lite] nav.main-nav, html[data-lite] .po-bg, html[data-lite] .vt-btn.ikincil, html[data-lite] .vt-ikon-btn { -webkit-backdrop-filter: none; backdrop-filter: none; }
@media (prefers-reduced-motion: reduce) {
  .vt-kart-gorsel, .vt-bkart-gorsel, .vt-hafta-resim { animation: none; background-image: none; }
  .vt-slayt { transition: none; }
  .vt-hover { transform: none; transition: opacity .1s; }
}

/* Yönetici formu: logo önizlemesi dama desenli arka planda (beyaz ve şeffaf logolar görünsün) */
#ae_logo_thumb { background: repeating-conic-gradient(#3a3a3a 0% 25%, #242424 0% 50%) 0 0 / 14px 14px; }
#ae_logo_thumb img { object-fit: contain; width: 100%; height: 100%; padding: .25rem; }

/* Slayt rozeti (kutlama, duyuru): "Vitrini düzenle" > rozet yazısı */
.vt-hero-etiket.ozel { padding: .38rem .85rem .38rem .7rem; border-radius: 2rem; background: var(--pr-btn); color: var(--pr-on); letter-spacing: .08em; opacity: 1; box-shadow: 0 .4rem 1.2rem -.4rem color-mix(in srgb, var(--pr) 80%, transparent); position: relative; overflow: hidden; }
.vt-hero-etiket.ozel::before { display: none; }
.vt-hero-etiket.ozel::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%); transform: translateX(-120%); animation: vtParilti 3.6s ease-in-out 1s infinite; }
@keyframes vtParilti { 0%, 60% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
html[data-hareket-az] .vt-hero-etiket.ozel::after, html[data-lite] .vt-hero-etiket.ozel::after { display: none; }
@media (prefers-reduced-motion: reduce) { .vt-hero-etiket.ozel::after { display: none; } }

/* Yönetici: Vitrini düzenle düğmesi ve penceresi (js/vitrinduzen.js) */
#tab-home { position: relative; }
.vt-duzen-btn { position: absolute; z-index: 8; right: var(--yan-bosluk); top: calc(var(--vt-nav) + .9rem); display: inline-flex; align-items: center; gap: .5rem; padding: .55rem 1rem; border: 0; border-radius: 2rem; cursor: pointer;
  background: rgba(20, 20, 20, .66); color: #fff; font: inherit; font-size: .84rem; font-weight: 700; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); transition: background .2s; }
.vt-duzen-btn:hover { background: rgba(70, 70, 70, .8); }
.vd-kutu { width: min(46rem, 94vw); display: flex; flex-direction: column; }
.vd-bas { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.4rem; border-bottom: 1px solid var(--border); }
.vd-bas h2 { margin: 0; font-size: 1.15rem; font-weight: 800; display: flex; align-items: center; gap: .6rem; } .vd-bas h2 i { color: var(--pr); }
.vd-x { width: 2.4rem; height: 2.4rem; border: 0; border-radius: 50%; background: var(--hover-bg); color: var(--text); cursor: pointer; }
.vd-govde { padding: 1rem 1.4rem; overflow: auto; flex: 1; }
.vd-govde h3 { margin: .4rem 0 .3rem; font-size: 1rem; font-weight: 800; } .vd-govde h3 small { font-size: .76rem; font-weight: 600; color: var(--muted); margin-left: .4rem; }
.vd-govde section + section { margin-top: 1.6rem; padding-top: 1.2rem; border-top: 1px solid var(--border); }
.vd-grup { display: flex; align-items: center; gap: .5rem; margin: 1rem 0 .4rem; font-size: .82rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--text-s); } .vd-grup i { color: var(--pr); }
.vd-ipucu { margin: 0 0 .7rem; font-size: .82rem; line-height: 1.5; color: var(--text-s); }
.vd-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.vd-satir { display: flex; align-items: center; gap: .65rem; padding: .45rem .55rem; border-radius: .6rem; background: var(--card); box-shadow: inset 0 0 0 1px var(--border); cursor: grab; position: relative; }
.vd-satir.suruklenen { opacity: .4; } .vd-satir.ust::before, .vd-satir.alt::after { content: ''; position: absolute; left: .5rem; right: .5rem; height: .22rem; border-radius: .2rem; background: var(--pr); }
.vd-satir.ust::before { top: -.31rem; } .vd-satir.alt::after { bottom: -.31rem; }
.vd-tutamac { color: var(--muted); } .vd-sira { width: 1.4rem; text-align: center; font-size: .78rem; font-weight: 800; color: var(--muted); }
.vd-kucuk { width: 4.4rem; aspect-ratio: 16 / 9; object-fit: cover; border-radius: .35rem; flex: 0 0 auto; background: var(--surf); }
.vd-ad { min-width: 0; flex: 1 1 8rem; display: flex; flex-direction: column; } .vd-ad b { font-size: .9rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vd-ad small { font-size: .74rem; color: var(--muted); }
.vd-etiket { flex: 1 1 10rem; min-width: 8rem; padding: .45rem .65rem; border: 0; border-radius: .45rem; background: var(--input-bg); color: var(--text); font: inherit; font-size: .82rem; box-shadow: inset 0 0 0 1px var(--border); }
.vd-dugmeler { display: flex; gap: .25rem; flex: 0 0 auto; }
.vd-dugmeler button { width: 2.2rem; height: 2.2rem; border: 0; border-radius: .45rem; background: var(--hover-bg); color: var(--text); cursor: pointer; } .vd-dugmeler button:hover:not(:disabled) { background: var(--border-h); } .vd-dugmeler button:disabled { opacity: .3; cursor: default; }
.vd-bos { padding: .8rem; font-size: .82rem; color: var(--muted); border: 1px dashed var(--border-h); border-radius: .6rem; }
.vd-ekle { display: flex; gap: .5rem; margin-top: .7rem; } .vd-ekle select { flex: 1; padding: .55rem .7rem; border: 0; border-radius: .5rem; background: var(--input-bg); color: var(--text); font: inherit; box-shadow: inset 0 0 0 1px var(--border); }
.vd-gizli { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
.vd-btn { display: inline-flex; align-items: center; gap: .45rem; padding: .6rem 1.1rem; border: 0; border-radius: .5rem; background: var(--hover-bg); color: var(--text); font: inherit; font-weight: 700; cursor: pointer; box-shadow: inset 0 0 0 1px var(--border); }
.vd-btn.ana { background: var(--pr-btn); color: var(--pr-on); box-shadow: none; } .vd-btn:disabled { opacity: .6; cursor: wait; }
.vd-alt { display: flex; align-items: center; gap: .6rem; padding: .9rem 1.4rem; border-top: 1px solid var(--border); }
.vd-durum { flex: 1; font-size: .8rem; color: var(--text-s); } .vd-metin-btn { border: 0; background: none; color: var(--text-s); font: inherit; font-size: .8rem; font-weight: 700; text-decoration: underline; cursor: pointer; }
@media (max-width: 560px) { .vd-kucuk { display: none; } .vd-alt { flex-wrap: wrap; } .vd-durum { flex-basis: 100%; order: -1; } }

/* ── 9. Yakında: geri sayım (js/vitrin.js geriSayim) ────────────
   21.10.2026: tek satır küçük kartlar (görsel, ad, bölüm ve tarih, canlı sayaç); en çok 4. Eskiden en yakın yayın
   hero'nun ikinci kopyası gibi büyük bir kartta duruyordu. Telefonda yan yana kayar.
   Hero slaytında .vt-meta-geri çipi, "Bu hafta" şeridinde .vt-hafta-geri. Renkler tema değişkenlerinden. */
.vt-geri-satir { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr)); gap: .7rem; margin: 0; padding: .3rem var(--yan-bosluk) 0; list-style: none; }
.vt-geri-satir li { display: flex; min-width: 0; }
.vt-geri-kucuk { flex: 1; display: flex; align-items: center; gap: .8rem; width: 100%; padding: .6rem; border: 0; border-radius: var(--vt-r); background: var(--card); box-shadow: inset 0 0 0 1px var(--border); color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background .2s, box-shadow .2s, transform .2s var(--vt-hizli); }
.vt-geri-kucuk:hover { background: var(--hover-bg); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pr) 45%, var(--border)); transform: translateY(-2px); }
.vt-geri-kresim { position: relative; flex: 0 0 clamp(6.4rem, 8vw, 8.4rem); aspect-ratio: 16 / 9; border-radius: .5rem; overflow: hidden; background: var(--surf); }
.vt-geri-kresim img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vt-geri-kresim img.yok { visibility: hidden; }
.vt-geri-kyazi { min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.vt-geri-kyazi b { font-size: .95rem; font-weight: 800; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vt-geri-kyazi small { font-size: .78rem; font-weight: 600; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vt-geri-ksayac { align-self: flex-start; margin-top: .3rem; padding: .18rem .55rem; border-radius: .4rem; background: color-mix(in srgb, var(--pr) 14%, transparent); color: var(--pr); font-size: .84rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.vt-geri-ksayac.bitti, .vt-hafta-geri.bitti, .vt-meta-geri b.bitti { color: var(--green, #2ecc71); }
/* hero çipi ve "Bu hafta" kalan süre */
.vt-meta-geri { display: inline-flex; align-items: center; gap: .4rem; padding: .22rem .65rem; border-radius: 99rem; background: color-mix(in srgb, var(--pr) 26%, rgba(0,0,0,.4)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pr) 60%, transparent); font-weight: 700; }
.vt-meta-geri b { font-variant-numeric: tabular-nums; }
.vt-hafta-geri { margin-top: .15rem; font-style: normal; font-size: .72rem; font-weight: 800; color: var(--pr); font-variant-numeric: tabular-nums; }
html[data-hareket-az] .vt-geri-kucuk { transition: none; transform: none; }
.vt-hero-geri { margin: .2rem 0 .1rem; font-size: .95rem; color: #fff; text-shadow: 0 1px .6rem rgba(0, 0, 0, .6); }
.vt-meta-geri i { color: var(--pr); }

/* Ana sayfanın sonu: başvuru bandı ile alt bilgi arasında boşluk az */
body.vt-ana #ariyoruzSec { margin-top: clamp(2rem, 3.6vw, 3.4rem); }
body.vt-ana footer.site-alt { margin-top: clamp(2.2rem, 4vw, 3.6rem); }
/* Telefonda Yakında: kartlar alt alta değil yan yana kayar (sayfa kısalır). */
@media (max-width: 560px) {
  .vt-geri-satir { display: flex; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; scroll-padding-inline: var(--yan-bosluk); }
  .vt-geri-satir::-webkit-scrollbar { display: none; }
  .vt-geri-satir li { flex: 0 0 84%; scroll-snap-align: start; }
  .vt-geri-satir li:only-child { flex-basis: 100%; }
  .vt-geri-kresim { flex-basis: 5.4rem; }
}

/* Önizleme (js/oynatici.js): hover kartında ve hero'da bölüm sessiz oynar; kutuyu doldurur (taşanı keser) */
.vt-hover-gorsel, .vt-hero-resim { container-type: size; }
.yoy-onizle { position: absolute; top: 50%; left: 50%; width: max(100cqw, 177.78cqh); height: max(100cqh, 56.25cqw); transform: translate(-50%, -50%); border: 0; opacity: 0; pointer-events: none; z-index: 1; transition: opacity .5s ease; background: #000; }
.yoy-onizle.gor { opacity: 1; }
.vt-hover-gorsel .vt-hover-gradyan, .vt-hover-gorsel .vt-hover-baslik { z-index: 2; }
.vt-hero.oniz .vt-hero-aciklama { opacity: 0; max-height: 0; margin: 0; overflow: hidden; transition: opacity .4s, max-height .4s; }
.vt-hero-ses { align-self: center; }
@media (prefers-reduced-motion: reduce) { .yoy-onizle { display: none; } }
.vt-kalan{color:var(--pr);font-weight:800}
/* Bölüm kartı önizlemesi (Kaldığın yerden, yeni bölümler) */
.vt-bkart-gorsel { container-type: size; position: relative; }
.vt-bkart-gorsel .vt-ilerleme, .vt-bkart-gorsel .vt-kart-logo, .vt-bkart-gorsel .vt-rozet { z-index: 2; }
.vt-bkart.oniz .vt-oynat { opacity: 0; }

/* ── 10. Kayıtsız ziyaretçi sayfası (index.html misafirEkrani; DEVIR 6.104) ──────────────
   Kullanıcı 21.10.2026: "tam büyük bir misafir ekranı" (Netflix, Disney+ giriş sayfası gibi). Giriş yapmamış kişide ana
   sayfanın yerine geçer: tam ekran eğik afiş duvarı, ortada büyük başlık ve e-postayla kayıt, altında turuncu yay;
   sonra gündemdekiler (büyük numaralar), hesap açmak için nedenler, genel sorular ve yine kayıt. Öteki sayfalar açık. */
body.misafir #tab-home > :not(#misafirSec):not(#ariyoruzSec):not(.vt-duzen-btn) { display: none !important; }
body.misafir #tab-home > .vt-duzen-btn { display: none !important; }
.vt-misafir { display: flex; flex-direction: column; }
.vg-giris { position: relative; isolation: isolate; overflow: hidden; margin-top: calc(-1 * var(--vt-nav)); min-height: max(36rem, 100svh); display: grid; place-items: center; background: #000; }
.vg-duvar { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.vg-duvar-ic { position: absolute; left: 50%; top: 50%; width: 170%; display: flex; flex-direction: column; gap: 1.1rem; transform: translate(-50%, -50%) rotate(-11deg) skewX(4deg); }
.vg-sira { display: flex; gap: 1.1rem; }
.vg-sira:nth-child(even) { margin-left: -6rem; }
.vg-sira img { flex: 0 0 auto; width: clamp(8rem, 10vw, 13rem); aspect-ratio: 2 / 3; object-fit: cover; border-radius: .6rem; background: #111; opacity: .9; }
@media (prefers-reduced-motion: no-preference) {
  html:not([data-lite]):not([data-hareket-az]) .vg-sira { animation: vgKay 90s linear infinite alternate; }
  html:not([data-lite]):not([data-hareket-az]) .vg-sira:nth-child(even) { animation-direction: alternate-reverse; }
}
@keyframes vgKay { from { transform: translateX(0); } to { transform: translateX(-12rem); } }
/* Karartma: ortası okunur, kenarlar koyu, alt sayfa rengine geçer */
.vg-giris::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(0, 0, 0, .55), rgba(0, 0, 0, .78) 70%, rgba(0, 0, 0, .92)),
    linear-gradient(180deg, rgba(0, 0, 0, .7) 0%, transparent 22%, transparent 70%, var(--bg) 100%); }
.vg-ic { position: relative; z-index: 2; width: min(62rem, calc(100% - 2 * var(--yan-bosluk))); padding: 7rem 0 6rem; text-align: center; color: #fff; display: flex; flex-direction: column; align-items: center; }
.vg-ic h1 { margin: 0 0 1rem; font-size: clamp(2.2rem, 5vw, 4.4rem); font-weight: 900; line-height: 1.05; letter-spacing: -.03em; text-wrap: balance; text-shadow: 0 .3rem 2rem rgba(0, 0, 0, .7); }
.vg-alt { margin: 0 0 1.6rem; font-size: clamp(1.05rem, 1.6vw, 1.5rem); font-weight: 700; color: #fff; }
.vg-cagri { margin: 0 0 .9rem; font-size: clamp(.95rem, 1.1vw, 1.1rem); color: rgba(255, 255, 255, .9); }
.vg-kayit { display: flex; gap: .6rem; width: min(38rem, 100%); }
.vg-kayit input { flex: 1; min-width: 0; height: 3.6rem; padding: 0 1.2rem; border-radius: .45rem; border: 1px solid rgba(255, 255, 255, .35); background: rgba(10, 10, 10, .72); color: #fff; font: inherit; font-size: 1rem; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.vg-kayit input::placeholder { color: rgba(255, 255, 255, .7); }
.vg-kayit input:focus { outline: none; border-color: #fff; }
.vg-kayit button { flex: 0 0 auto; height: 3.6rem; padding: 0 1.6rem; border: 0; border-radius: .45rem; background: var(--pr-btn); color: var(--pr-on); font: inherit; font-size: clamp(1.05rem, 1.4vw, 1.4rem); font-weight: 800; cursor: pointer; display: inline-flex; align-items: center; gap: .7rem; transition: background .2s; }
.vg-kayit button:hover { background: var(--pr-btn-h); }
.vg-kayit button i { font-size: .8em; }
.vg-sayilar { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .3rem .8rem; margin: 1.4rem 0 0; font-size: .9rem; font-weight: 700; color: rgba(255, 255, 255, .78); }
.vg-sayilar i { width: .25rem; height: .25rem; border-radius: 50%; background: currentColor; opacity: .6; }
.vg-giris-btn { margin-top: 1rem; border: 0; background: none; color: rgba(255, 255, 255, .78); font: inherit; font-size: .9rem; cursor: pointer; }
.vg-giris-btn b { color: #fff; text-decoration: underline; text-underline-offset: .2em; }
/* Altta turuncu yay (Netflix'in kırmızı yayı gibi, Yasha turuncusu) */
.vg-yay { position: absolute; left: -10%; right: -10%; bottom: -1px; height: 7rem; z-index: 1; pointer-events: none;
  border-top: .22rem solid var(--pr); border-radius: 50% 50% 0 0 / 100% 100% 0 0; background: radial-gradient(ellipse 60% 120% at 50% 100%, color-mix(in srgb, var(--pr) 35%, var(--bg)) 0%, var(--bg) 70%);
  box-shadow: 0 -1rem 3rem -1rem color-mix(in srgb, var(--pr) 60%, transparent); }
.vg-bolum { width: min(78rem, calc(100% - 2 * var(--yan-bosluk))); margin: clamp(2rem, 4vw, 3.6rem) auto 0; }
.vg-bolum h2 { margin: 0 0 1rem; font-size: clamp(1.3rem, 2vw, 1.9rem); font-weight: 900; color: var(--text); }
/* Gündemdekiler: büyük numara, afiş */
.vg-gundem { display: flex; gap: 1.6rem; margin: 0; padding: .4rem 0 1.4rem 1.2rem; list-style: none; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; scroll-snap-type: x proximity; }   /* overflow-y: numara aşağı taşınca şerit dikey de kayıyordu */
.vg-gundem::-webkit-scrollbar { display: none; }
.vg-gundem li { flex: 0 0 auto; scroll-snap-align: start; }
.vg-sira-kart { position: relative; display: block; padding: 0 0 0 3.4rem; border: 0; background: none; cursor: pointer; }
.vg-sira-kart img { position: relative; z-index: 1; display: block; width: clamp(8.5rem, 11vw, 11.5rem); aspect-ratio: 2 / 3; object-fit: cover; border-radius: .6rem; box-shadow: 0 .8rem 2rem -1rem rgba(0, 0, 0, .8); transition: transform .25s var(--vt-hizli); }
.vg-sira-kart:hover img { transform: scale(1.04); }
.vg-no { position: absolute; left: 0; bottom: -.6rem; z-index: 2; font-size: clamp(5rem, 7vw, 7.5rem); font-weight: 900; line-height: 1; color: var(--bg); -webkit-text-stroke: .18rem color-mix(in srgb, var(--text) 85%, transparent); letter-spacing: -.06em; }
/* Nedenler: koyu, turuncu ışıltılı kartlar */
.vg-neden { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .9rem; margin: 0; padding: 0; list-style: none; }
.vg-neden li { position: relative; display: flex; flex-direction: column; gap: .6rem; min-height: 13rem; padding: 1.3rem 1.3rem 4.2rem; border-radius: 1rem; overflow: hidden;
  background: radial-gradient(120% 100% at 100% 100%, color-mix(in srgb, var(--pr) 30%, transparent), transparent 60%), linear-gradient(150deg, #1a1514, #120c0b); color: #fff; }
[data-theme="light"] .vg-neden li { background: radial-gradient(120% 100% at 100% 100%, color-mix(in srgb, var(--pr) 22%, transparent), transparent 60%), linear-gradient(150deg, #2a201d, #1a1210); }
.vg-neden b { font-size: 1.2rem; font-weight: 900; line-height: 1.2; }
.vg-neden span { font-size: .9rem; line-height: 1.55; color: rgba(255, 255, 255, .75); }
.vg-neden i { position: absolute; right: 1.1rem; bottom: 1rem; font-size: 2.6rem; color: var(--pr); opacity: .9; }
/* Genel sorular: geniş çubuklar */
.vg-sss { display: flex; flex-direction: column; gap: .5rem; }
.vg-sss details { background: color-mix(in srgb, var(--text) 9%, var(--bg)); border-radius: .4rem; }
.vg-sss summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.3rem 1.5rem; cursor: pointer; list-style: none; font-size: clamp(1rem, 1.4vw, 1.3rem); font-weight: 600; color: var(--text); }
.vg-sss summary::-webkit-details-marker { display: none; }
.vg-sss summary i { font-size: 1.3rem; transition: transform .2s; }
.vg-sss details[open] summary i { transform: rotate(45deg); }
.vg-sss details:hover { background: color-mix(in srgb, var(--text) 13%, var(--bg)); }
.vg-sss p { margin: 0; padding: 0 1.5rem 1.4rem; font-size: clamp(.95rem, 1.2vw, 1.1rem); line-height: 1.6; color: var(--text-s); }
.vg-sss-tum { display: inline-flex; align-items: center; gap: .5rem; margin-top: .9rem; font-weight: 800; color: var(--pr); text-decoration: none; }
.vg-son { display: flex; flex-direction: column; align-items: center; width: min(62rem, calc(100% - 2 * var(--yan-bosluk))); margin: clamp(2rem, 4vw, 3.4rem) auto 0; text-align: center; }
.vg-son .vg-cagri { color: var(--text-s); }
.vg-son .vg-kayit input { background: var(--input-bg); color: var(--text); border-color: var(--border-h); }
.vg-son .vg-kayit input::placeholder { color: var(--muted); }
@media (max-width: 1100px) { .vg-neden { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .vg-giris { min-height: max(34rem, 92svh); }
  .vg-ic { padding: 6rem 0 5rem; }
  .vg-kayit { flex-direction: column; }
  .vg-kayit button { justify-content: center; height: 3.2rem; }
  .vg-kayit input { height: 3.2rem; }
  .vg-neden { grid-template-columns: minmax(0, 1fr); }
  .vg-neden li { min-height: 0; }
  .vg-gundem { gap: 1rem; padding-left: .6rem; }
  .vg-sira-kart { padding-left: 2.4rem; }
  .vg-yay { height: 4rem; }
}
/* Genel input kuralları (index.css) telefonda yüksekliği eziyordu */
#misafirSec .vg-kayit input { box-sizing: border-box; height: 3.6rem; min-height: 3.6rem; padding: 0 1.2rem; }
@media (max-width: 600px) { #misafirSec .vg-kayit input { height: 3.2rem; min-height: 3.2rem; } }