/* 06-gunluk.css — bölüm 6: kağıt dokulu kartlar eğik yığın, listedeki
   maddenin üzerine gelince/klavyeyle odaklanınca ilgili kart kalkar
   (sahneler/gunluk.js `sec()`; aynı `aktif`/`gorsel-goster` deseni bölüm 2). */

.sahne-gunluk {
  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: 120px clamp(16px, 7vw, 120px) 100px;
  max-width: 1280px; margin: 0 auto;
}

.gunluk-liste { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.gunluk-oge {
  display: flex; gap: 14px; align-items: flex-start; padding: 10px 10px 10px 4px;
  border-radius: 16px; cursor: pointer; transition: background 0.25s;
  position: relative; overflow: hidden;
}
.gunluk-oge:hover, .gunluk-oge:focus-visible, .gunluk-oge.aktif {
  background: color-mix(in srgb, var(--kor) 7%, transparent); outline: none;
}
.gunluk-oge:focus-visible { box-shadow: 0 0 0 2px var(--altin); }
.gunluk-simge {
  display: inline-flex; align-items: center; justify-content: center; flex: none; margin-top: 1px;
  width: 34px; height: 34px; border-radius: 50%;
  background: color-mix(in srgb, var(--kor) 12%, transparent); color: var(--kor);
}
.gunluk-liste-metin { display: flex; flex-direction: column; gap: 3px; }
.gunluk-liste-metin b { font: 700 15.5px var(--govde-font); }
.gunluk-liste-metin > span:not(.rozet-pro) { font-size: 14px; line-height: 1.5; 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;
}

.gunluk-yigin { position: relative; height: 280px; display: flex; justify-content: center; }
.gunluk-kart {
  position: absolute; top: 0; width: min(240px, 68vw); min-height: 220px;
  padding: 20px 20px 18px; background: var(--kart-zemin);
  background-image: repeating-linear-gradient(180deg, transparent 0 27px, var(--cizgi) 27px 28px);
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s, z-index 0s;
}
.gunluk-kart p { font: italic 15px/1.6 var(--baslik-font); margin: 30px 0 0; }
.gunluk-kart-etiket {
  font: 700 11px var(--govde-font); letter-spacing: 0.08em; text-transform: uppercase; color: var(--kor);
}

.gunluk-kart[data-oge="0"] { transform: rotate(-7deg) translate(-14px, 6px); z-index: 1; }
.gunluk-kart[data-oge="1"] { transform: rotate(2deg) translate(6px, -2px); z-index: 2; }
.gunluk-kart[data-oge="2"] { transform: rotate(9deg) translate(20px, 10px); z-index: 1; }
.gunluk-kart.on-top { transform: translateY(-18px) rotate(0deg) !important; z-index: 5 !important; }

@media (prefers-reduced-motion: reduce) {
  .gunluk-kart { transition: none; }
}

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

.gunluk-ipucu {
  display: inline-flex; align-items: center; gap: 8px; margin: 18px 0 0 4px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.04em; color: var(--kor);
}