/* 03-uyku.css — bölüm 3: metin + liste solda, rapor kartı sağda "masaya
   düşer" (eğik iniş), horlama dalgası kartın üstünde. Sınıflar bu bölüme
   özgü önekle (`uyku-`) çakışma riskini azaltıyor. */

/* Kap şeffaf: yazı ve kart ızgaranın DOĞRUDAN öğesi olsun. Eskiden kabın
   kuralı yoktu; iki sütunlu ızgarada tek çocuk kaldığı için kart masaüstünde
   yazının altına düşüyor, mobilde `order` işlemiyordu (24 Eyl). */
.uyku-govde { display: contents; }
.sahne-uyku {
  min-height: 100vh;
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center; gap: clamp(24px, 5vw, 80px);
  padding: 110px clamp(16px, 7vw, 120px) 90px;
  max-width: 1280px; margin: 0 auto;
}

.uyku-liste { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.uyku-liste li { display: flex; gap: 14px; align-items: flex-start; }
.uyku-simge {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 34px; height: 34px; border-radius: 50%; margin-top: 1px;
  background: color-mix(in srgb, var(--kor) 12%, transparent); color: var(--kor);
}
.uyku-liste-metin { display: flex; flex-direction: column; gap: 3px; }
.uyku-liste-metin b { font: 700 15.5px var(--govde-font); }
.uyku-liste-metin > span:not(.rozet-pro) { font-size: 14px; line-height: 1.5; color: var(--metin-ikincil); }

/* Tıbbi cihaz uyarısı: listenin altında, ikincil metin tonunda — okunur
   ama özellik listesiyle yarışmaz. */
.uyku-tibbi-not { margin: 22px 0 0; max-width: 46ch; font-size: 13.5px; line-height: 1.55; color: var(--metin-ikincil); }

.rozet-pro {
  font: 700 10px var(--govde-font); letter-spacing: 0.06em; text-transform: uppercase;
  color: #1e1a16; background: var(--altin); padding: 2px 8px; border-radius: 999px;
}

.uyku-sahne-kart { position: relative; display: flex; justify-content: center; padding-top: 30px; }
.uyku-rapor-karti {
  width: min(300px, 70vw); position: relative; z-index: 2;
  opacity: 0; transform: translateY(-70px) rotate(-11deg);
  transition: opacity 0.7s ease, transform 0.7s var(--yay);
}
.sahne-uyku.goruldu .uyku-rapor-karti { opacity: 1; transform: rotate(-3deg); }

.uyku-dalga {
  position: absolute; left: 6%; right: 6%; top: 4px; height: 40px; z-index: 3;
  pointer-events: none;
}
.uyku-dalga path {
  fill: none; stroke: var(--kor); stroke-width: 2.5; stroke-linecap: round;
  stroke-dasharray: 7 11; opacity: 0.6;
  animation: uykuDalgaAk 3.6s linear infinite;
}
@keyframes uykuDalgaAk { to { stroke-dashoffset: -216; } }

@media (prefers-reduced-motion: reduce) {
  .uyku-rapor-karti { transition: none; opacity: 1; transform: rotate(-3deg); }
  .uyku-dalga path { animation: none; }
}

@media (max-width: 760px) {
  .sahne-uyku { grid-template-columns: 1fr; padding-top: 100px; }
  .uyku-sahne-kart { order: -1; margin-bottom: 20px; }
}