/* 1. Sinif Odev — Hafta 1 */
:root{
  --mavi:#2563eb; --mavi-ac:#dbeafe; --yesil:#22c55e; --kirmizi:#ef4444;
  --sari:#f59e0b; --mor:#8b5cf6;
  --metin:#0f172a; --soluk:#64748b; --cizgi:#e2e8f0; --zemin:#f5f8fc; --kart:#fff;
  --dokunma:72px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:var(--metin); background:var(--zemin); -webkit-text-size-adjust:100%;
}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
h1,h2,h3,h4{margin:0 0 .5em;line-height:1.25}
table{border-collapse:collapse;width:100%}
.soluk{color:var(--soluk);font-size:.88em}
.orta{text-align:center}
.kucuk-not{color:var(--soluk);font-size:.82rem;margin-top:1rem}
.kirmizi-yazi{color:var(--kirmizi);font-weight:700}

.gorunum{min-height:100dvh}
.gorunum.tam{background:#fff}
.sar{max-width:580px;margin:0 auto;padding:24px 18px 60px}
.sar.genis{max-width:940px}

/* ---------------- giris ---------------- */
.marka{font-size:2rem;text-align:center;margin-top:24px}
.alt-baslik{text-align:center;color:var(--soluk);margin:0 0 14px}
.rozetler{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:26px}
.rozet-bilgi{background:#e2e8f0;color:#334155;border-radius:999px;padding:5px 12px;font-size:.78rem;font-weight:600}
.rozet-bilgi.vurgu{background:#fef3c7;color:#92400e}
.rol-kartlar{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.rol-kart{
  background:var(--kart);border:2px solid var(--cizgi);border-radius:20px;padding:22px 12px;
  display:flex;flex-direction:column;align-items:center;gap:6px;min-height:130px;justify-content:center;
  transition:.15s;box-shadow:0 2px 10px rgba(15,23,42,.05)
}
.rol-kart:active{transform:scale(.97)}
.rol-kart.cocuk{border-color:var(--mavi);background:linear-gradient(160deg,#eff6ff,#fff)}
.rol-ikon{font-size:2.6rem;line-height:1}
.rol-ad{font-weight:700;font-size:1.05rem}
.rol-not{color:var(--soluk);font-size:.78rem}
.uyari-kutu{margin-top:22px;background:#fff7ed;border:1px solid #fed7aa;color:#7c2d12;border-radius:14px;padding:14px;font-size:.86rem}
.geri{color:var(--mavi);font-weight:600;padding:8px 0;margin-bottom:8px;display:inline-block}
.ana-dugme{background:var(--mavi);color:#fff;border-radius:14px;padding:14px 22px;font-weight:700;margin:22px auto 0;display:block}

/* ---------------- gun kartlari ---------------- */
.gun-kartlar{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.gun-kart{
  border:0;border-radius:22px;padding:18px 12px;color:#fff;
  display:flex;flex-direction:column;align-items:center;gap:2px;min-height:168px;justify-content:center;
  box-shadow:0 4px 14px rgba(15,23,42,.14);transition:.15s
}
.gun-kart:active{transform:scale(.97)}
.kart-mavi{background:linear-gradient(160deg,#60a5fa,#2563eb)}
.kart-mor{background:linear-gradient(160deg,#c4b5fd,#7c3aed)}
.kart-turuncu{background:linear-gradient(160deg,#fdba74,#ea580c)}
.kart-yesil{background:linear-gradient(160deg,#6ee7b7,#059669)}
.kart-pembe{background:linear-gradient(160deg,#f9a8d4,#db2777)}
.gun-ikon{font-size:3rem;line-height:1;filter:drop-shadow(0 2px 4px rgba(0,0,0,.2))}
.gun-no{font-size:1.25rem;font-weight:800}
.gun-ad{opacity:.9;font-size:.85rem}
.gun-cizgi{opacity:.85;font-size:.7rem;margin-top:4px;text-align:center;line-height:1.3}

/* ---------------- oturum ---------------- */
.cikis{position:fixed;top:12px;right:14px;z-index:20;font-size:1.4rem;width:46px;height:46px;border-radius:50%;background:#f1f5f9;color:#475569}
.sahne{max-width:640px;margin:0 auto;padding:18px 16px 40px;min-height:100dvh;display:flex;flex-direction:column}
.oturum-ust{display:flex;align-items:center;gap:14px;margin-bottom:10px}
.oturum-ikon{font-size:2rem}
.oturum-ilerleme{display:flex;gap:6px;flex-wrap:wrap}
.nokta{width:11px;height:11px;border-radius:50%;background:#cbd5e1;display:inline-block}
.nokta.dolu{background:var(--mavi)}
.oturum-govde{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px}
.oturum-alt{text-align:center;color:var(--soluk);font-size:.78rem;padding-top:14px;border-top:1px solid var(--cizgi);margin-top:14px}
.talimat{text-align:center;font-size:1.05rem;color:#334155;margin:0;background:#eef2f7;border-radius:14px;padding:12px 16px}
.yon-ok{font-size:1.5rem;color:var(--mavi);font-weight:800}
.dinlet{width:var(--dokunma);height:var(--dokunma);border-radius:50%;background:var(--mavi-ac);color:var(--mavi);font-size:1.9rem;display:flex;align-items:center;justify-content:center;margin:0 auto}
.dinlet:active{transform:scale(.94)}

.secenekler{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;width:100%}
.secenek{
  min-width:var(--dokunma);min-height:var(--dokunma);padding:16px 20px;border-radius:22px;
  background:linear-gradient(160deg,#ffffff,#f1f5f9);border:3px solid var(--cizgi);
  display:flex;align-items:center;justify-content:center;transition:.14s;position:relative;
  box-shadow:0 3px 8px rgba(15,23,42,.07)
}
.secenek.kucuk{padding:12px 14px;min-width:70px;min-height:70px}
.secenek .emoji{font-size:2.5rem;line-height:1;filter:drop-shadow(0 1px 2px rgba(0,0,0,.12))}
.secenek.kucuk .emoji{font-size:2rem}
.secenek:active{transform:scale(.95)}
.secenek.dogru{border-color:var(--yesil);background:linear-gradient(160deg,#f0fdf4,#dcfce7)}
.secenek.ipucu{border-color:var(--sari);background:#fef3c7}
.secenek.sayildi{border-color:var(--mavi);background:var(--mavi-ac);opacity:.8}
.secenek.parla{animation:parla 1s ease-in-out infinite}
.secenek.titre{animation:titre .42s}
.rozet{position:absolute;top:-9px;right:-9px;background:var(--mavi);color:#fff;width:28px;height:28px;border-radius:50%;font-size:.9rem;font-weight:800;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 5px rgba(0,0,0,.2)}
@keyframes parla{0%,100%{box-shadow:0 0 0 0 rgba(245,158,11,0)}50%{box-shadow:0 0 0 10px rgba(245,158,11,.28)}}
@keyframes titre{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}

.izgara{display:grid;grid-template-columns:repeat(auto-fit,minmax(80px,1fr));gap:12px;width:100%;max-width:430px}
.emoji-cerceve{
  width:170px;height:170px;border-radius:34px;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 40% 32%,#fef9c3,#fde68a);box-shadow:0 6px 18px rgba(217,119,6,.22)
}
.buyuk-emoji{font-size:5.5rem;line-height:1}
.buyuk-emoji.parla-hece{animation:hece .34s ease-out}
@keyframes hece{0%{transform:scale(1)}45%{transform:scale(1.22);filter:drop-shadow(0 0 18px rgba(37,99,235,.6))}100%{transform:scale(1)}}

.nefes-sahne{position:relative;width:100%;max-width:320px;height:180px;border-radius:24px;overflow:hidden;background:linear-gradient(#eaf6ff,#cfeafd);display:flex;align-items:center;justify-content:center}
.nefes-dekor{position:absolute;inset:0;width:100%;height:100%}
.balon{width:110px;height:110px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffe0b2,#ff9800);transform:scale(.8);position:relative;box-shadow:0 6px 18px rgba(0,0,0,.14)}
.nefes-yazi{text-align:center;font-size:1.15rem;color:#475569;min-height:1.6em}

.halka{width:210px;height:210px;border-radius:50%;border:8px solid var(--mavi-ac);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:radial-gradient(circle,#f0f9ff,#e0f2fe)}
.balik{font-size:3rem;animation:yuz 4s ease-in-out infinite}
@keyframes yuz{0%,100%{transform:translateX(-22px)}50%{transform:translateX(22px)}}
.sayac{font-size:2.2rem;font-weight:800;color:var(--mavi)}

.ses-sira{display:flex;gap:14px}
.ses-kutu{width:80px;height:80px;border-radius:20px;background:#f1f5f9;border:3px solid var(--cizgi);display:flex;align-items:center;justify-content:center;font-size:1.3rem;transition:.2s}
.ses-kutu.aktif{background:var(--mavi-ac);border-color:var(--mavi);transform:scale(1.09)}
.daireler{display:flex;gap:10px;font-size:2rem}
.daire{transition:.18s}
.daire.dolu{transform:scale(1.22)}
.flas{min-height:92px;display:flex;align-items:center;justify-content:center}
.flas .emoji{font-size:3rem;letter-spacing:8px}
.rakam-nokta{letter-spacing:3px}

.tuval-sar{position:relative;width:100%;max-width:580px;border-radius:20px;overflow:hidden;border:3px solid var(--cizgi);box-shadow:0 4px 14px rgba(15,23,42,.09)}
.tuval-dekor{position:absolute;inset:0;line-height:0}
.tuval-dekor svg{width:100%;height:100%;display:block}
.tuval{position:relative;width:100%;background:transparent;touch-action:none;display:block}

.kutlama{text-align:center;padding-top:40px}
.rapor{margin-top:26px;background:#fff;border:1px solid var(--cizgi);border-radius:16px;padding:16px}
.rapor table{margin-top:8px;font-size:.88rem}
.rapor th,.rapor td{border-bottom:1px solid var(--cizgi);padding:8px 6px;text-align:left;vertical-align:top}

/* ---------------- OGRENME CIKTISI rozetleri ---------------- */
.cikti-serit{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:8px}
.ck{display:inline-flex;flex-direction:column;gap:1px;background:#eef2ff;border:1px solid #c7d2fe;border-radius:10px;padding:5px 9px;text-align:left;max-width:100%}
.ck.gayriresmi{background:#f8fafc;border-color:#e2e8f0}
.ck b{font-size:.68rem;color:#4338ca;letter-spacing:.02em}
.ck.gayriresmi b{color:#64748b}
.ck-metin{font-size:.72rem;color:#334155;line-height:1.3}
.ck-surec{font-size:.66rem;color:var(--soluk)}

.cikti-blok{border-left:4px solid #6366f1;background:#f8fafc;border-radius:0 12px 12px 0;padding:11px 14px;margin-bottom:10px}
.cikti-blok.gayriresmi{border-left-color:#cbd5e1}
.cikti-ust{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.cikti-kod{color:#4338ca;font-size:.9rem}
.cikti-blok.gayriresmi .cikti-kod{color:#64748b}
.cikti-ders{font-size:.74rem;color:var(--soluk)}
.cikti-metin{font-size:.97rem;margin-top:3px;font-weight:500}
.cikti-surec,.cikti-olcut{font-size:.82rem;color:#475569;margin-top:5px}

/* ---------------- ogretmen / veli ---------------- */
.kart{background:#fff;border:1px solid var(--cizgi);border-radius:16px;padding:16px;margin-bottom:16px}
.kart.uyari{background:#fffbeb;border-color:#fde68a}
.kart.yesil{background:#f0fdf4;border-color:#bbf7d0}
.kart.kirmizi{background:#fef2f2;border-color:#fecaca}
.kart h3{font-size:1.02rem}
.kart ul{margin:.4em 0;padding-left:1.2em}
.kart li{margin-bottom:.35em}
.ozet{font-size:1.02rem}
.etiket-hucre{white-space:nowrap}
.ok-buyuk{font-size:1.2rem;color:var(--mavi);font-weight:800}
table.veri td,table.veri th{border-bottom:1px solid var(--cizgi);padding:8px 6px;text-align:left;vertical-align:top;font-size:.9rem}
table.veri th{color:var(--soluk);font-weight:600;font-size:.78rem;text-transform:uppercase;letter-spacing:.03em}

.cizgi-vitrin{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:12px;margin-top:10px}
.cizgi-orn{border:1px solid var(--cizgi);border-radius:14px;overflow:hidden;background:#fff}
.cizgi-orn-svg{line-height:0}
.cizgi-orn-ad{font-weight:700;font-size:.85rem;padding:7px 9px 0}
.cizgi-orn .soluk{padding:0 9px 8px;display:block;font-size:.75rem}

/* ---------------- kagit odev ---------------- */
.yazdir-cubuk{display:flex;gap:12px;align-items:center;justify-content:space-between;margin-bottom:14px}
.yazdir-cubuk .ana-dugme{margin:0}
.sayfa{background:#fff;border:1px solid var(--cizgi);border-radius:12px;padding:22px;margin-bottom:20px;page-break-after:always}
.sayfa header{border-bottom:2px solid var(--metin);padding-bottom:8px;margin-bottom:10px;display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.sayfa .cikti-serit{justify-content:flex-start;margin-bottom:14px}
.sayfa footer{border-top:1px solid var(--cizgi);margin-top:16px;padding-top:8px;font-size:.75rem}
.etkinlik{margin-bottom:22px}
.etkinlik h4{font-size:.98rem;margin-bottom:2px}
.etk-cikti{font-size:.78rem;color:#4338ca;margin-bottom:6px}
.etk-not{font-size:.78rem;color:#92400e;background:#fffbeb;border-radius:8px;padding:6px 9px;margin:6px 0}
.yonerge{background:#eff6ff;border-left:4px solid var(--mavi);padding:8px 12px;margin:6px 0 12px;font-size:.9rem}

.cizgi-blok{margin-bottom:16px}
.cizgi-basligi{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;font-weight:700;font-size:.9rem;margin-bottom:6px}
.cizgi-yonerge{font-weight:400;font-size:.8rem;color:var(--soluk)}
.cizgi-svg{display:block;border:1px solid var(--cizgi);border-radius:12px;overflow:hidden}

.gorsel-satir{display:flex;flex-wrap:wrap;gap:10px}
.kutucuk{width:64px;height:64px;border:2px solid #cbd5e1;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.9rem}
table.dy td{border-bottom:1px solid var(--cizgi);padding:9px 6px;font-size:.9rem;vertical-align:middle}
table.dy td.dy-emoji{width:44px;font-size:1.6rem}
table.dy td.bos{text-align:right;width:120px;white-space:nowrap}
table.dy td.bos svg{vertical-align:middle;margin-left:5px;opacity:.55}
table.dy td.yuzler{width:190px}
.sayma-satir,.kars-satir{display:flex;align-items:center;gap:16px;padding:9px 0;border-bottom:1px dashed var(--cizgi)}
.nesneler,.kutu{font-size:1.7rem;letter-spacing:4px}
.kutu{border:2px solid #cbd5e1;border-radius:12px;padding:6px 14px;min-width:110px;min-height:50px;display:inline-flex;align-items:center}
.bos-kutu{min-width:160px}
.orta-im{font-size:1.3rem;color:var(--soluk)}
.kutucuklar{display:flex;gap:7px;margin-left:auto}
.kare{width:26px;height:26px;border:2px solid #cbd5e1;border-radius:6px;display:inline-block}
.cerceve{border:2px dashed #cbd5e1;border-radius:14px;height:190px;background:#fcfdff}
.bos-yuz-alan{display:flex;justify-content:center;padding:10px 0}
.olcek{font-size:.9rem;color:#334155;display:flex;gap:6px;align-items:center;flex-wrap:wrap}

@media print{
  body{background:#fff}
  .yazdirma,.geri,.ana-dugme{display:none!important}
  .sar{max-width:none;padding:0}
  .sayfa{border:0;border-radius:0;padding:0 0 8mm;margin:0}
  .gorunum{min-height:0}
  .cizgi-svg{border-color:#cbd5e1}
}
@media (max-width:380px){
  .rol-kartlar{grid-template-columns:1fr}
  .secenek .emoji{font-size:2.1rem}
  .emoji-cerceve{width:140px;height:140px}
  .buyuk-emoji{font-size:4.4rem}
}

/* tek gun goster: #kagit3 gibi */
body[data-gun="1"] .sayfa:not(#sayfa-1),
body[data-gun="2"] .sayfa:not(#sayfa-2),
body[data-gun="3"] .sayfa:not(#sayfa-3),
body[data-gun="4"] .sayfa:not(#sayfa-4),
body[data-gun="5"] .sayfa:not(#sayfa-5){display:none}