/* Ortak ders yerleşimi: mevcut etkinlik ve mavi tema korunur. */
main.lesson-page{
  width:min(1240px,calc(100% - 40px));
  max-width:none;
  padding:28px 0 0;
  background:transparent;
  border:0;
  box-shadow:none;
}
html[data-theme=dark] main.lesson-page{background:transparent;border:0}
.lesson-page>p:not(.crumbs){max-width:75ch}
.lesson-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(270px,300px);
  grid-template-areas:"outcomes sidebar" "activity sidebar";
  grid-template-rows:min-content 1fr;
  align-items:start;
  gap:24px 26px;
  margin-top:26px;
}
.lesson-outcomes,.lesson-materials{
  padding:22px 24px;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--paper);
  box-shadow:0 8px 28px #0f172a0a;
}
.lesson-outcomes{grid-area:outcomes}
.lesson-outcomes h2,.lesson-materials h2{
  margin:0 0 12px;
  padding:0;
  border:0;
  font-size:clamp(1.25rem,2vw,1.45rem);
}
.lesson-outcomes>p{margin:0 0 16px;color:var(--muted);font-size:.92rem}
.lesson-outcomes label{display:flex;align-items:flex-start;gap:12px;margin:12px 0;line-height:1.45;cursor:pointer}
.lesson-outcomes input{width:21px;height:21px;margin:2px 0 0;flex:none;accent-color:var(--blue)}
.lesson-outcomes small{display:block;margin-top:16px;color:var(--muted);font-size:.81rem}
.lesson-activity{grid-area:activity;min-width:0}
.lesson-activity .rectangle-lesson{margin:0 0 24px;background:var(--paper);border-color:#93c5fd}
.lesson-sidebar{grid-area:sidebar;min-width:0}
.lesson-materials ul{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.lesson-materials li{
  display:grid;
  gap:4px;
  min-width:0;
  margin:0;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--paper);
}
.lesson-materials li strong{font-size:.95rem;line-height:1.35}
.lesson-materials li span{display:flex;flex-wrap:wrap;gap:8px 14px;font-size:.88rem}
.lesson-materials li a{font-weight:650;text-underline-offset:3px}
.lesson-materials [data-pdf-status],.lesson-materials-note{margin:14px 0 0;color:var(--muted);font-size:.82rem;line-height:1.5}
html[data-theme=dark] .lesson-outcomes,
html[data-theme=dark] .lesson-materials,
html[data-theme=dark] .lesson-materials li,
html[data-theme=dark] .lesson-activity .rectangle-lesson{background:var(--paper);border-color:var(--line);color:var(--ink)}
@media(max-width:850px){
  .lesson-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"outcomes" "sidebar" "activity";grid-template-rows:auto}
  .lesson-materials ul{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:620px){
  main.lesson-page{width:100%;margin:0 auto 46px;padding:24px 18px 0}
  .lesson-grid{gap:18px}
  .lesson-outcomes,.lesson-materials{padding:18px 16px}
  .lesson-materials ul{grid-template-columns:minmax(0,1fr)}
  .lesson-activity .rectangle-lesson{margin:0}
}
@media print{
  main.lesson-page{width:100%;padding:0}
  .lesson-grid{display:block}
  .lesson-outcomes,.lesson-materials{box-shadow:none;break-inside:avoid}
  .lesson-sidebar{margin-top:18px}
}

.lesson-material-kind{display:inline-block;width:max-content;padding:2px 8px;border-radius:999px;background:var(--blue-soft);color:var(--blue-deep);font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.lesson-materials li span.lesson-actions{display:flex;flex-wrap:wrap;gap:8px}
.lesson-materials .lesson-action{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:8px 11px;border:1px solid #93c5fd;border-radius:9px;background:var(--blue-soft);color:var(--blue-deep);font-size:.83rem;font-weight:750;text-decoration:none}
.lesson-materials .lesson-action:hover{background:#dbeafe;text-decoration:underline}
.lesson-materials .lesson-action:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.lesson-materials .lesson-action--pdf{background:var(--blue);border-color:var(--blue);color:#fff}
.lesson-materials .lesson-action--pdf:hover{background:#1d4ed8;color:#fff}
.lesson-materials .lesson-action--print{background:var(--paper);border-color:var(--line);color:var(--ink)}
.lesson-materials .lesson-action[hidden]{display:none}
.lesson-start{padding:22px 24px;border:1px solid var(--line);border-radius:18px;background:var(--paper)}
.lesson-start h2{margin:0 0 12px;padding:0;border:0}
.lesson-start p{margin:0 0 14px}
.lesson-start a{display:inline-flex;align-items:center;min-height:44px;padding:9px 14px;border-radius:10px;background:var(--blue);color:#fff;text-decoration:none;font-weight:750}
.lesson-start a:hover{background:#1d4ed8}
html[data-theme=dark] .lesson-start{background:var(--paper)}
html[data-theme=dark] .lesson-materials .lesson-action{background:#1e3a5f;color:#dbeafe;border-color:#475569}
html[data-theme=dark] .lesson-materials .lesson-action--pdf{background:#3b82f6;color:#fff;border-color:#3b82f6}
html[data-theme=dark] .lesson-materials .lesson-action--print{background:var(--paper);color:var(--ink);border-color:var(--line)}
@media(max-width:620px){.lesson-start{padding:18px 16px}}


/* Lesson infographics */
.lesson-infographic { margin: 2.25rem 0 1rem; padding: clamp(1rem, 3vw, 2rem); border: 1px solid var(--border, #c8d8e8); border-radius: 1.25rem; background: var(--surface, #fff); box-shadow: 0 10px 30px rgba(21, 50, 89, .07); }
.lesson-infographic-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1rem; margin-bottom: 1rem; }
.lesson-infographic h2 { margin: 0; }
.lesson-infographic-heading p, .lesson-infographic-action { margin: .25rem 0; color: var(--muted, #53677d); }
.lesson-infographic a { display: block; overflow: hidden; border-radius: .75rem; outline-offset: 4px; }
.lesson-infographic img { display: block; width: 100%; height: auto; }
.lesson-infographic-action { margin-top: .8rem; font-size: .9rem; }
.lesson-infographic-placeholder { min-height: 210px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; padding: 1.5rem; border: 2px dashed #a5b9d0; border-radius: .75rem; text-align: center; background: rgba(98, 153, 208, .06); }
.lesson-infographic-placeholder span { font-size: 2.5rem; line-height: 1; color: #7295bb; }
.lesson-infographic-placeholder p { margin: 0; }
@media print { .lesson-infographic--pending { display: none; } .lesson-infographic { break-inside: avoid; } }