/* Practices from Qur'an: alıştırma sayfası + ders menüsündeki alt liste */

/* Medrese Naskh, (c) 2021 Isa Goksu, SIL OFL 1.1 (Muhammet Abay'ın çalışmasına dayanır). Lisans: assets/fonts/OFL.txt */
@font-face {
  font-family: 'Medrese Naskh';
  src: url('../fonts/MedreseNaskhRegular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}

.pp { --pp-ink: #192a3d; --pp-ink-2: #3a4f66; --pp-muted: #5b6b7c; --pp-paper: #fffef8;
      --pp-blue: #0d6efd; --pp-amber: #d97706; --pp-amber-soft: rgba(245,158,11,.2); color: var(--pp-ink); margin-bottom: 1.5rem; }
.pp ::selection { background: rgba(13,110,253,.18); }

.pp h1 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); font-weight: 700; letter-spacing: -.02em; color: var(--pp-ink); margin: 0 0 .4rem; text-wrap: balance; }
.pp h1 .pp-ref { font-weight: 600; color: var(--pp-muted); font-size: .7em; margin-left: .3rem; font-variant-numeric: tabular-nums; }
.pp-lead { margin: 0 0 1.25rem; color: var(--pp-muted); max-width: 62ch; }
.pp-note { margin: 0 0 1rem; padding: .55rem .8rem; border-radius: 8px; background: #f4f6f9; color: var(--pp-ink-2); font-size: .9rem; max-width: 62ch; }

/* Arapça metin: sağa dayalı, parçalar düz metin gibi kelime kelime akar */
.pp-text {
  direction: rtl; text-align: start;
  font-family: 'Medrese Naskh', 'Scheherazade New', 'Traditional Arabic', serif;
  font-size: clamp(2rem, 3.4vw, 2.6rem); line-height: 2.15; color: #0d0c0a;
  background: var(--pp-paper); border: 1px solid #f0ead9; border-radius: 12px; padding: .6rem 1.25rem 1rem;
}
/* Kutu yalnız üzerine gelince, klavye odağında ve çalarken görünür */
.pp-seg {
  cursor: pointer; border: 1px solid transparent; border-radius: 6px; padding: .05em .1em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: background .15s ease-out, border-color .15s ease-out, color .15s ease-out;
}
.pp-seg:hover { background: rgba(25,42,61,.05); border-color: rgba(25,42,61,.22); }
.pp-seg:focus-visible, .pp-end:focus-visible { outline: 2px solid var(--pp-blue); outline-offset: 2px; }
.pp-seg.is-playing { background: var(--pp-amber-soft); border-color: var(--pp-amber); color: #7c3d03; text-decoration: underline 2px var(--pp-amber); text-underline-offset: .35em; }
.pp-end { cursor: pointer; padding: 0 .12em; border-radius: 6px; white-space: nowrap; transition: color .15s ease-out, background .15s ease-out; }
.pp-end:hover { color: var(--pp-blue); }
.pp-end.is-playing { color: #b45309; background: var(--pp-amber-soft); }
.pp-tail { white-space: nowrap; }
.pp-live { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (max-width: 767px) {
  .pp-text { font-size: clamp(1.6rem, 7.5vw, 2.1rem); line-height: 2.1; padding: .45rem .7rem .8rem; }
}
@media (prefers-reduced-motion: reduce) { .pp-seg, .pp-end { transition: none; } }

/* ── Ders menüsü: "Practices from Qur'an" altındaki alıştırmalar ── */
.lesson-sidebar .lesson-sub { list-style: none; margin: 0; padding: .2rem 0 .35rem; border-top: 1px solid #dee2e6; background: #fbfcfd; }
.lesson-sidebar .lesson-sub li a {
  display: block; padding: .38rem .9rem .38rem 1.6rem; font-size: .84rem; line-height: 1.35;
  border-bottom: none; color: #0d6efd; background: transparent; position: relative;
}
.lesson-sidebar .lesson-sub li a:hover { background: #f0f7ff; }
.lesson-sidebar .lesson-sub li a::before { content: ""; position: absolute; left: .95rem; top: .35rem; bottom: .35rem; width: 1px; background: #d5dce4; }
.lesson-sidebar .lesson-sub li.current a { background: #0d6efd; color: #fff; }
.lesson-sidebar .lesson-sub-ref { color: #5b6b7c; font-size: .78rem; margin-left: .25rem; font-variant-numeric: tabular-nums; }
.lesson-sidebar .lesson-sub li.current .lesson-sub-ref { color: rgba(255,255,255,.8); }
.lesson-sidebar li.is-section > a { font-weight: 600; }

/* ── Tekrar çubuğu: metnin hemen altında; telefonda ekranın altına yapışık (başparmak bölgesi) ── */
.pp-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem;
  margin-top: .75rem; padding: .5rem; background: #fff; border: 1px solid #e6eaef; border-radius: 12px;
}
.pp-bar button {
  font-family: inherit; font-size: .875rem; font-weight: 600; line-height: 1; cursor: pointer;
  min-height: 44px; border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--pp-ink-2);
  display: inline-flex; align-items: center; gap: .5rem; padding: 0 .85rem;
  transition: background .15s ease-out, color .15s ease-out, border-color .15s ease-out;
}
.pp-bar button:focus-visible { outline: 2px solid var(--pp-blue); outline-offset: 2px; }
.pp-bar svg { width: 18px; height: 18px; flex: 0 0 auto; }
.pp-bar .pp-play { background: var(--pp-blue); color: #fff; padding: 0 1.1rem 0 .9rem; }
.pp-bar .pp-play:hover { background: #0b5ed7; color: #fff; }
.pp-times button:hover { background: #f1f4f8; color: var(--pp-ink); }
.pp-times-label { font-size: .8125rem; color: var(--pp-muted); margin-right: .25rem; }
.pp-times button { min-width: 44px; justify-content: center; padding: 0 .6rem; border-color: #e6eaef; font-variant-numeric: tabular-nums; }
.pp-times button[aria-pressed="true"] { background: #e7f0ff; border-color: #b6d0fb; color: var(--pp-blue); }

@media (max-width: 767px) {
  .pp-bar { position: sticky; bottom: .5rem; z-index: 5; box-shadow: 0 6px 20px rgba(25,42,61,.12); padding: .4rem; gap: .35rem; }
  .pp-bar .pp-play { flex: 1 1 auto; justify-content: center; }
  .pp-times { margin-left: auto; }
  .pp-times-label { display: none; }
  .pp-times button { padding: 0 .45rem; }
}
@media (prefers-reduced-motion: reduce) { .pp-bar button { transition: none; } }

/* ── Kart düzeni (set verisinde "layout": "cards"): her parça ayrı kutu, ders kartlarıyla aynı görünüm.
   Kutular içeriğe göre genişler ve satırı doldurur: okuma sırası korunur, boşluk kalmaz, uzun ifade kesilmez. ── */
.pp-text.pp-cards {
  display: flex; flex-wrap: wrap; gap: 10px;
  background: none; border: 0; padding: 0; line-height: 1.6; font-size: clamp(2rem, 3.4vw, 2.6rem);
}
.pp-cards .pp-seg, .pp-cards .pp-end {
  flex: 1 1 auto; min-width: calc(25% - 10px); max-width: 100%;
  display: flex; align-items: center; justify-content: center; text-align: center; white-space: nowrap;
  min-height: clamp(64px, 9vw, 96px); padding: clamp(6px,1.2vw,10px) clamp(10px,1.6vw,18px) clamp(10px,1.8vw,14px);
  background: #f5f4f0; border: 1px solid transparent; border-radius: 12px; box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
.pp-cards .pp-seg:hover, .pp-cards .pp-end:hover { background: #fef9ec; border-color: transparent; color: #b45309; box-shadow: 0 4px 12px rgba(0,0,0,.13); }
.pp-cards .pp-seg.is-playing, .pp-cards .pp-end.is-playing { background: var(--pp-amber-soft); border-color: var(--pp-amber); color: #7c3d03; text-decoration: none; }
.pp-cards .pp-end { color: var(--pp-ink-2); flex-grow: 0; }
@media (max-width: 600px) {
  .pp-text.pp-cards { gap: 8px; font-size: clamp(1.6rem, 7vw, 2.1rem); }
  .pp-cards .pp-seg, .pp-cards .pp-end { min-width: calc(50% - 8px); }
}