/* yunusanginer.com — /youtube/ alt sayfaları
 *
 * style.css'in ÜSTÜNE biner: renk, tipografi ve ritim oradaki değişkenlerden
 * gelir (--ink, --gold, --display, --wrap-narrow…). Burada yalnızca bu iki
 * sayfa türünün düzeni var; hiçbir ortak sınıf yeniden tanımlanmaz.
 *
 * ⚠️ Üst çubuk bu sayfalarda KALICI olarak `.scrolled`: ana sayfada çubuk
 * koyu kahramanın üstünde saydam duruyor, burada arkasında kahraman yok.
 * Saydam bırakılsaydı yazı içeriğin üstüne binerdi.
 */

/* Üst çubuk sabit; içerik onun altından başlamalı. */
.ytpage .ytwrap {
  width: var(--wrap-narrow);
  margin-inline: auto;
  padding: clamp(7rem, 6rem + 4vw, 9.5rem) 0 0;
}

/* ---------------------------------------------------------- site yolu */

.yt-yol {
  display: flex;
  align-items: center;
  gap: 0.65em;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 1.6rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: clamp(2.2rem, 4vw, 3.2rem);
}
.yt-yol a { color: var(--muted); transition: color var(--dur-s) var(--ease); }
.yt-yol a:hover, .yt-yol a:focus-visible { color: var(--gold-hi); }
.yt-yol span[aria-hidden] { color: var(--muted-2); }

/* ---------------------------------------------------------- başlık */

.yt-bas { margin-bottom: clamp(2rem, 4vw, 2.8rem); }
.yt-bas .eyebrow { margin: 0 0 1rem; }

.yt-bas h1 {
  font-family: var(--display);
  font-weight: 400;
  /* Video başlıkları uzun olabiliyor; --text-h2 kahraman ölçeğinden küçük,
     gövde metninden belirgin biçimde büyük kalsın diye ayrı ayarlandı. */
  font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.1rem);
  line-height: 1.14;
  letter-spacing: -0.01em;
  color: var(--parchment);
  margin: 0 0 1.1rem;
  text-wrap: balance;
}

.yt-meta {
  display: flex;
  align-items: center;
  gap: 0.6em;
  margin: 0;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.yt-meta span[aria-hidden] { color: var(--muted-2); }

/* ---------------------------------------------------------- kapak
 *
 * Tek bir <a>: hem resim hem oynat düğmesi hem alt yazı aynı bağlantının
 * içinde. Ekran okuyucu tek bir "YouTube'da izle" bağlantısı duyurur, üç
 * ayrı parça değil.
 */

.yt-kapak {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface);
  transition: border-color var(--dur-s) var(--ease), box-shadow var(--dur-s) var(--ease), transform var(--dur-s) var(--ease);
  will-change: transform;
}
.yt-kapak:hover, .yt-kapak:focus-visible {
  border-color: var(--line-strong);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.9);
  transform: translateY(-3px);
}
.yt-kapak img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.85) brightness(0.78);
  transition: transform var(--dur) var(--ease), filter var(--dur) var(--ease);
}
.yt-kapak:hover img, .yt-kapak:focus-visible img {
  transform: scale(1.04);
  filter: saturate(1) brightness(0.92);
}

.yt-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(12, 10, 8, 0.55);
  border: 1px solid var(--line-strong);
  backdrop-filter: blur(4px);
  transition: background var(--dur-s) var(--ease), transform var(--dur-s) var(--ease), border-color var(--dur-s) var(--ease);
}
.yt-play svg { width: 26px; height: 26px; fill: var(--gold-hi); margin-left: 4px; transition: fill var(--dur-s) var(--ease); }
.yt-kapak:hover .yt-play, .yt-kapak:focus-visible .yt-play,
.yt-kart:hover .yt-play {
  background: var(--ember);
  border-color: transparent;
  transform: scale(1.08);
}
.yt-kapak:hover .yt-play svg, .yt-kapak:focus-visible .yt-play svg,
.yt-kart:hover .yt-play svg { fill: #fff; }

/* Videonun burada değil YouTube'da açılacağını söyleyen şerit. Kapağın
   üstünde duruyor: kullanıcı tıklamadan önce nereye gideceğini bilir. */
.yt-kapak-not {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.85rem 1.1rem;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--parchment);
  background: linear-gradient(to top, rgba(12, 10, 8, 0.92), rgba(12, 10, 8, 0));
}
.yt-kapak-not .arrow { transition: transform var(--dur-s) var(--ease); }
.yt-kapak:hover .yt-kapak-not .arrow { transform: translate(3px, -3px); }

/* ---------------------------------------------------------- açıklama */

.yt-metin {
  margin-top: clamp(2.2rem, 4vw, 3rem);
  color: var(--parchment-dim);
  font-size: var(--text-body);
  line-height: 1.85;
}
.yt-metin p { margin: 0 0 1.35rem; }
/* İlk paragraf videonun özeti; giriş cümlesi gibi okunsun. */
.yt-metin p:first-child {
  font-family: var(--display);
  font-size: var(--text-lead);
  line-height: 1.5;
  color: var(--parchment);
  font-style: italic;
}
.yt-metin a {
  color: var(--gold);
  border-bottom: 1px solid var(--line-strong);
  overflow-wrap: anywhere;
  transition: color var(--dur-s) var(--ease), border-color var(--dur-s) var(--ease);
}
.yt-metin a:hover { color: var(--gold-hi); border-color: var(--gold-hi); }

/* ---------------------------------------------------------- diğer videolar */

.yt-baska {
  margin-top: clamp(3.5rem, 7vw, 5.5rem);
  border-top: 1px solid var(--line);
  padding-top: clamp(2rem, 4vw, 2.8rem);
}
.yt-baska > h2 {
  font-family: var(--body);
  font-size: var(--text-eyebrow);
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 1.6rem;
}
.yt-baska ul { list-style: none; margin: 0; padding: 0; }
.yt-baska li { border-bottom: 1px solid var(--line); }
.yt-baska li a {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.35rem);
  line-height: 1.3;
  color: var(--parchment);
  padding: 1.05rem 0 0.35rem;
  transition: color var(--dur-s) var(--ease);
}
.yt-baska li a:hover, .yt-baska li a:focus-visible { color: var(--gold-hi); }
.yt-baska li time {
  display: block;
  padding-bottom: 1.05rem;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.yt-alt {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin: clamp(2.2rem, 4vw, 3rem) 0 0;
}

/* ---------------------------------------------------------- hub sayfası */

/* Liste sayfası tek videodan geniştir: kartlar sıkışmasın. */
.ytpage .ytwrap:has(.yt-izgara) { width: var(--wrap); }

.yt-bas-hub { margin-bottom: clamp(2.8rem, 5vw, 4rem); }
.yt-bas-hub h1 { font-size: var(--text-h2); margin-bottom: 1.4rem; }
.yt-giris {
  max-width: 56ch;
  margin: 0 0 1rem;
  font-family: var(--display);
  font-size: var(--text-lead);
  font-style: italic;
  line-height: 1.5;
  color: var(--parchment-dim);
}
.yt-sayi {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Yıl başlığı: 257 kart tek yığın hâlinde okunmuyor, dönemlere bölünüyor.
   Sayfa yine TEK sayfa — her videonun bağlantısı burada. */
.yt-yil { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.yt-yil-bas {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin: 0 0 1.4rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--line);
}
.yt-yil-bas span {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
  line-height: 1;
  color: var(--gold-hi);
  letter-spacing: 0.02em;
}
.yt-yil-bas small {
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.yt-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.4rem;
}

.yt-kart {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  background: var(--ink-2);
  transition: transform var(--dur-s) var(--ease), border-color var(--dur-s) var(--ease), box-shadow var(--dur-s) var(--ease);
  will-change: transform;
}
.yt-kart:hover {
  transform: translateY(-4px);
  border-color: var(--line-strong);
  box-shadow: 0 24px 44px -24px rgba(0, 0, 0, 0.8);
}

.yt-kart-kapak {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--surface);
}
.yt-kart-kapak img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.85) brightness(0.82);
  transition: transform var(--dur) var(--ease), filter var(--dur) var(--ease);
}
.yt-kart:hover .yt-kart-kapak img { transform: scale(1.05); filter: saturate(1) brightness(0.95); }
.yt-kart .yt-play { width: 58px; height: 58px; }
.yt-kart .yt-play svg { width: 20px; height: 20px; margin-left: 3px; }

.yt-kart-alt {
  padding: 1rem 1.1rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  /* Kartlar aynı yükseklikte bitsin: tarih hep en altta. */
  flex: 1;
}
.yt-kart-alt h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.18rem;
  line-height: 1.25;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.yt-kart-alt h2 a { color: var(--parchment); transition: color var(--dur-s) var(--ease); }
.yt-kart-alt h2 a:hover, .yt-kart-alt h2 a:focus-visible { color: var(--gold-hi); }
.yt-kart-alt time {
  margin-top: auto;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------------------------------------------------------- dar ekran */

@media (max-width: 560px) {
  /* Uzun başlıklar ve bağlantılar 320px'te taşmasın. */
  .ytpage .ytwrap { width: min(100% - 2rem, 92vw); }

  /* Tarih ve ad, dar ekranda yan yana iki sütuna bölünüp aralarında koca bir
     boşluk bırakıyordu (flex, satır atlamadan öğeleri kendi içinde sarıyor).
     Normal metin gibi aksın: satır dolunca alta insin. */
  .yt-meta { display: block; }
  .yt-meta time { white-space: nowrap; }
  .yt-meta span[aria-hidden] { margin: 0 0.4em; }
  .yt-kapak-not { font-size: 0.66rem; letter-spacing: 0.1em; padding: 0.7rem 0.85rem; }
  .yt-play { width: 58px; height: 58px; }
  .yt-play svg { width: 20px; height: 20px; }
  .yt-alt .btn { flex: 1 1 100%; justify-content: center; }
}

/* Hareket azaltma tercihi: kayma ve büyüme kapanır, renk geçişleri kalır. */
@media (prefers-reduced-motion: reduce) {
  .yt-kapak, .yt-kapak img, .yt-kart, .yt-kart-kapak img, .yt-play, .arrow {
    transition: none !important;
    transform: none !important;
  }
}