/* =============================================================================
   DersTeders — Çözüm Bileşeni (assets/css/cozum.css)
   -----------------------------------------------------------------------------
   js/cozum.js ile birlikte kullanılır. Sayfa değişkenlerini (var(--…)) kullanır,
   bulunamayanlar için gömülü yedek değerler tanımlıdır; böylece aynı bileşen
   odev, yks, yazili ve kpss sayfalarında aynı görünür.
   ============================================================================= */

.cz {
  --cz-bg: var(--bg, #FFFFFF);
  --cz-surface: var(--surface, #F1F5F9);
  --cz-text: var(--text, #0F172A);
  --cz-ikincil: var(--text-secondary, #475569);
  --cz-soluk: var(--text-muted, #64748B);
  --cz-cizgi: var(--border, #E2E8F0);
  --cz-vurgu: var(--accent, #0F6B7C);
  --cz-vurgu-acik: var(--accent-light, #E3F1F4);
  --cz-yesil: var(--ders-green, #2F9E6B);
  --cz-kirmizi: var(--ders-red, #C0492F);
  --cz-altin: var(--ders-gold, #C5923E);
  --cz-yaricap: var(--radius, 12px);
  --cz-gecis: .2s ease;

  display: block;
  margin: 14px 0 4px;
  padding: 14px;
  background: var(--cz-bg);
  border: 1px solid var(--cz-cizgi);
  border-radius: var(--cz-yaricap);
  color: var(--cz-text);
  font-size: .95rem;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

.cz * { box-sizing: border-box; }

/* ------------------------------- başlık --------------------------------- */
.cz-ust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.cz-baslik {
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: .78rem;
  color: var(--cz-vurgu);
}

.cz-rozetler { display: flex; flex-wrap: wrap; gap: 6px; }

.cz-rozet {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--cz-surface);
  border: 1px solid var(--cz-cizgi);
  color: var(--cz-ikincil);
  font-size: .74rem;
  font-weight: 600;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cz-rozet--kolay { background: rgba(47, 158, 107, .12); color: var(--cz-yesil); border-color: transparent; }
.cz-rozet--orta { background: rgba(197, 146, 62, .14); color: var(--cz-altin); border-color: transparent; }
.cz-rozet--zor { background: rgba(192, 73, 47, .12); color: var(--cz-kirmizi); border-color: transparent; }

/* ---------------------------- ipucu merdiveni ---------------------------- */
.cz-ipucu {
  border: 1px dashed var(--cz-cizgi);
  border-radius: calc(var(--cz-yaricap) - 4px);
  padding: 10px 12px;
  margin-bottom: 12px;
  background: var(--cz-surface);
  background: color-mix(in srgb, var(--cz-vurgu) 5%, var(--cz-bg));
}

.cz-ipucu-bas {
  margin: 0 0 8px;
  font-size: .8rem;
  font-weight: 700;
  color: var(--cz-ikincil);
}

.cz-kad-dugmeler { display: flex; flex-wrap: wrap; gap: 8px; }

.cz-kad {
  appearance: none;
  cursor: pointer;
  border: 1px solid var(--cz-cizgi);
  background: var(--cz-bg);
  color: var(--cz-text);
  border-radius: 999px;
  padding: 6px 13px;
  font: inherit;
  font-size: .83rem;
  font-weight: 600;
  transition: background var(--cz-gecis), border-color var(--cz-gecis), color var(--cz-gecis);
}

.cz-kad:hover, .cz-kad:focus-visible {
  border-color: var(--cz-vurgu);
  background: var(--cz-vurgu-acik);
}

.cz-kad[aria-expanded="true"] {
  background: var(--cz-vurgu);
  border-color: var(--cz-vurgu);
  color: #fff;
}

.cz-kad-panel {
  margin-top: 10px;
  padding: 9px 11px;
  border-left: 3px solid var(--cz-vurgu);
  background: var(--cz-bg);
  border-radius: 0 8px 8px 0;
}

.cz-kad-panel[hidden] { display: none !important; }

.cz-kad-panel p { margin: 0; font-size: .89rem; color: var(--cz-ikincil); }

.cz-etiket {
  display: inline-block;
  margin-top: 7px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(197, 146, 62, .16);
  color: var(--cz-altin);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .02em;
}

.cz-etiket[hidden] { display: none !important; }

/* ------------------------------ açma düğmesi ---------------------------- */
.cz-ac {
  appearance: none;
  cursor: pointer;
  width: 100%;
  padding: 10px 14px;
  border-radius: calc(var(--cz-yaricap) - 4px);
  border: 1px solid var(--cz-vurgu);
  background: var(--cz-vurgu);
  color: #fff;
  font: inherit;
  font-weight: 700;
  font-size: .92rem;
  transition: filter var(--cz-gecis), transform var(--cz-gecis);
}

.cz-ac:hover { filter: brightness(1.08); }
.cz-ac:active { transform: translateY(1px); }

.cz-ic { margin-top: 14px; }
.cz-ic[hidden] { display: none !important; }

/* ------------------------------ bölüm başlıkları ------------------------ */
.cz-bolum {
  margin: 16px 0 8px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--cz-cizgi);
}

.cz-bolum h4 {
  margin: 0;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--cz-ikincil);
}

.cz-bolum:first-child { margin-top: 0; }

.cz-bos {
  margin: 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--cz-surface);
  color: var(--cz-soluk);
  font-size: .88rem;
}

/* ------------------------------ adım kartları --------------------------- */
.cz-adim-kutu {
  border: 1px solid var(--cz-cizgi);
  border-radius: calc(var(--cz-yaricap) - 4px);
  overflow: hidden;
}

.cz-adim-ust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  background: var(--cz-surface);
  border-bottom: 1px solid var(--cz-cizgi);
}

.cz-adim-sayac {
  font-size: .8rem;
  font-weight: 700;
  color: var(--cz-vurgu);
}

.cz-adim-dugmeler { display: flex; flex-wrap: wrap; gap: 7px; }

.cz-adimlar {
  list-style: none;
  margin: 0;
  padding: 4px 0;
}

.cz-adim {
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--cz-cizgi);
}

.cz-adim:last-child { border-bottom: 0; }
.cz-adim[hidden] { display: none !important; }

.cz-adim-no {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--cz-vurgu);
  color: #fff;
  font-size: .74rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}

.cz-adim-metin { flex: 1 1 auto; font-size: .93rem; }

/* -------------------------------- düğmeler ------------------------------ */
.cz-dugme {
  appearance: none;
  cursor: pointer;
  border: 1px solid var(--cz-vurgu);
  background: var(--cz-vurgu);
  color: #fff;
  border-radius: 999px;
  padding: 6px 14px;
  font: inherit;
  font-size: .84rem;
  font-weight: 700;
  transition: filter var(--cz-gecis);
}

.cz-dugme:hover { filter: brightness(1.08); }
.cz-dugme[hidden] { display: none !important; }

.cz-dugme--ikincil {
  background: transparent;
  color: var(--cz-vurgu);
}

.cz-dugme:focus-visible,
.cz-kad:focus-visible,
.cz-ac:focus-visible,
.cz-cip:focus-visible {
  outline: 2px solid var(--cz-vurgu);
  outline-offset: 2px;
}

/* --------------------------------- ses ---------------------------------- */
.cz-ses {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.cz-ses-durum { font-size: .8rem; color: var(--cz-soluk); }

/* -------------------------- diğer şıklar neden yanlış -------------------- */
.cz-sikler {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.cz-sik {
  padding: 9px 11px;
  border: 1px solid var(--cz-cizgi);
  border-left: 3px solid var(--cz-kirmizi);
  border-radius: 8px;
  background: var(--cz-surface);
}

.cz-sik-ust {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  font-size: .87rem;
}

.cz-sik-metin { color: var(--cz-ikincil); }

.cz-sik-tip {
  margin-left: auto;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(192, 73, 47, .12);
  color: var(--cz-kirmizi);
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.cz-sik-not { margin: 5px 0 0; font-size: .87rem; }

/* ---------------------------- yanlış nedeni çipleri ---------------------- */
.cz-yanlis {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--cz-cizgi);
}

.cz-yanlis-bas { font-size: .84rem; font-weight: 700; color: var(--cz-ikincil); }

.cz-yanlis-chips { display: flex; flex-wrap: wrap; gap: 6px; }

.cz-cip {
  appearance: none;
  cursor: pointer;
  border: 1px solid var(--cz-cizgi);
  background: var(--cz-bg);
  color: var(--cz-ikincil);
  border-radius: 999px;
  padding: 4px 11px;
  font: inherit;
  font-size: .8rem;
  transition: background var(--cz-gecis), color var(--cz-gecis), border-color var(--cz-gecis);
}

.cz-cip:hover { border-color: var(--cz-vurgu); }

.cz-cip.secili {
  background: var(--cz-vurgu);
  border-color: var(--cz-vurgu);
  color: #fff;
  font-weight: 700;
}

.cz-yanlis-durum { font-size: .78rem; color: var(--cz-yesil); }

/* --------------------------- ödev paylaşım bloğu ------------------------ */
.od-paylas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 12px;
  border: 1px dashed var(--cz-cizgi);
  border-radius: calc(var(--cz-yaricap) - 4px);
  background: var(--cz-surface);
}

.od-paylas-btn {
  appearance: none;
  cursor: pointer;
  border: 1px solid var(--cz-vurgu);
  background: var(--cz-vurgu);
  color: #fff;
  border-radius: 999px;
  padding: 7px 15px;
  font: inherit;
  font-size: .85rem;
  font-weight: 700;
}

.od-paylas-btn.ghost {
  background: transparent;
  color: var(--cz-vurgu);
}

.od-paylas-btn[hidden] { display: none !important; }

.od-paylas-link {
  flex: 1 1 260px;
  min-width: 0;
  padding: 7px 10px;
  border: 1px solid var(--cz-cizgi);
  border-radius: 8px;
  background: var(--cz-bg);
  color: var(--cz-ikincil);
  font: inherit;
  font-size: .82rem;
}

.od-paylas-link[hidden] { display: none !important; }

.od-paylas-not {
  flex: 1 1 100%;
  font-size: .78rem;
  color: var(--cz-soluk);
}

/* ------------------------------- hareket azaltma ------------------------ */
@media (prefers-reduced-motion: reduce) {
  .cz, .cz * { transition: none !important; animation: none !important; }
  .cz-ac:active { transform: none; }
}

/* --------------------------------- mobil -------------------------------- */
@media (max-width: 640px) {
  .cz { padding: 12px 10px; font-size: .93rem; }
  .cz-adim-ust { align-items: flex-start; }
  .cz-sik-tip { margin-left: 0; }
  .cz-kad { font-size: .8rem; padding: 6px 11px; }
  .cz-yanlis { align-items: flex-start; }
  .od-paylas { padding: 10px; }
}

/* -------------------------------- yazdırma ------------------------------ */
@media print {
  .cz {
    border: 1px solid #ccc !important;
    background: #fff !important;
    color: #111 !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  /* yazdırmada çözüm ve ipuçları tamamen açık basılır */
  .cz-ic[hidden] { display: block !important; }
  .cz-kad-panel[hidden] { display: block !important; }
  .cz-etiket[hidden] { display: none !important; }
  .cz-adim[hidden] { display: flex !important; }

  .cz-ac, .cz-dugme, .cz-kad, .cz-cip,
  .od-paylas-btn, .od-paylas-link, .cz-ses { display: none !important; }

  .cz-ipucu { background: none !important; border-color: #bbb !important; }
  .cz-adim-kutu, .cz-sik, .cz-kad-panel { background: #fff !important; }
  .cz-sik { border-left-color: #666 !important; }
  .cz-bolum h4, .cz-baslik { color: #333 !important; }
  .cz-adim-no { background: #333 !important; }
  .cz-sik-tip { background: #eee !important; color: #333 !important; }
  .cz-rozet { background: #f3f3f3 !important; color: #333 !important; border-color: #ccc !important; }
}