/* Elif-Be dersleri: tıkla-dinle harf kartları (.letter-grid-wrap > .letter-cell[data-audio]).
   Lesson 1 ve sonrası aynı stili kullanır. Kalın okunan harfler: .letter-red */

/* Medrese Naskh, (c) 2021 Isa Goksu, SIL OFL 1.1. Lisans: assets/fonts/OFL.txt */
@font-face { font-family: 'Medrese Naskh'; src: url('../fonts/MedreseNaskhRegular.ttf') format('truetype'); font-weight: 400; font-display: swap; }

.letter-grid-wrap { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); direction: rtl; gap: 10px; width: 100%; margin-bottom: 28px; }
.letter-cell {
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  padding: clamp(6px,1.5vw,12px) 6px clamp(10px,2vw,16px);
  font-size: clamp(3rem,7vw,5rem); font-weight: 400; font-family: 'Medrese Naskh', 'Scheherazade New', serif; line-height: 1.6; /* 1 iken uzun harflerin ötresi kutuya taşıyordu */
  color: #1a1a1a; user-select: none; border-radius: 12px; background: #f5f4f0;
  box-shadow: 0 1px 4px rgba(0,0,0,.08); min-height: clamp(70px,12vw,110px);
  transition: color .15s, background .15s, box-shadow .15s;
}
.letter-cell.letter-red { color: #dc2626; }
.letter-cell:hover { color: #b45309; background: #fef9ec; box-shadow: 0 4px 12px rgba(0,0,0,.13); }
.letter-cell:focus-visible { outline: 2px solid #0d6efd; outline-offset: 2px; }
.letter-cell.lc-playing { color: #1d4ed8; background: #eff6ff; box-shadow: 0 4px 12px rgba(29,78,216,.15); }
.letter-grid-wrap br { display: none; }
.letter-grid-wrap > p { display: contents; margin: 0; padding: 0; }
@media (max-width: 600px) { .letter-grid-wrap { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } }
@media (prefers-reduced-motion: reduce) { .letter-cell { transition: none; } }

/* Kelime kartları (.word-grid > .word-cell): üstte ayrık harfler, altta birleşik kelime; vurgulanan harf .r (kırmızı) */
.word-grid .word-cell { flex-direction: column; gap: clamp(6px,1.2vw,12px); padding: clamp(14px,2.5vw,22px) 8px clamp(16px,3vw,26px); }
.word-cell .wc-sep { font-size: .62em; word-spacing: .25em; color: #3a3a3a; }
.word-cell .wc-word { font-size: 1em; white-space: nowrap; } /* sığmayan kelimeyi lessons.js küçültür */
.word-cell b { font-weight: inherit; }
.word-cell .r { color: #dc2626; }
.word-cell:hover .r, .word-cell.lc-playing .r { color: inherit; }
.word-cell:hover .wc-sep, .word-cell.lc-playing .wc-sep { color: inherit; }
@media (max-width: 600px) { .word-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── Visuals: konu başlıklı video kartları (.video-group > .video-grid > a.video-card[data-yt]).
   Kapak resmi gösterilir, video yalnız tıklanınca yüklenir (lessons.js). JS yoksa bağlantı YouTube'u açar. ── */
.video-group { margin: 2.25rem 0 2.5rem; }
.video-group h2 { font-size: clamp(1.15rem, 1.6vw, 1.35rem); font-weight: 700; letter-spacing: -.01em; color: #192a3d; margin: 0 0 1rem; }
.video-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 18px; }
.video-card { display: block; color: inherit; text-decoration: none; border-radius: 12px; }
.video-card:hover, .video-card:focus { color: inherit; text-decoration: none; }
.video-card:focus-visible { outline: 2px solid #0d6efd; outline-offset: 4px; }
.vc-media { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 12px; background: #192a3d; box-shadow: 0 2px 10px rgba(25,42,61,.12); }
.vc-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.16,1,.3,1); }
.vc-media iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vc-play { position: absolute; left: 50%; top: 50%; width: 60px; height: 42px; transform: translate(-50%, -50%); border-radius: 12px;
  display: grid; place-items: center; background: rgba(25,42,61,.78); transition: background .2s ease-out, transform .3s cubic-bezier(.16,1,.3,1); }
.vc-play svg { width: 20px; height: 20px; fill: #fff; margin-left: 3px; }
.video-card:hover .vc-media img { transform: scale(1.035); }
.video-card:hover .vc-play, .video-card:focus-visible .vc-play { background: #dc2626; transform: translate(-50%, -50%) scale(1.06); }
.vc-meta { display: grid; grid-template-columns: auto 1fr; column-gap: .65rem; align-items: baseline; padding: .75rem .1rem 0; }
.vc-num { font-size: .8rem; font-weight: 700; color: #5b6b7c; font-variant-numeric: tabular-nums; min-width: 1.4em; }
.vc-title { font-weight: 600; line-height: 1.35; color: #192a3d; text-wrap: balance; }
.vc-by { grid-column: 2; font-size: .82rem; color: #5b6b7c; margin-top: .2rem; }
.video-card.is-playing .vc-media { box-shadow: 0 6px 22px rgba(25,42,61,.22); }
@media (max-width: 600px) { .video-grid { grid-template-columns: 1fr; gap: 20px; } }
@media (prefers-reduced-motion: reduce) { .vc-media img, .vc-play { transition: none; } }