/* Ay sonu karnesi (Task 19). Panel renkleri app.css'teki değişkenlerden gelir. */

.karne-kontrol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.karne-kontrol select {
  min-width: 180px;
  padding: 8px 10px;
  border: 1px solid var(--renk-sinir);
  border-radius: var(--yaricap);
  background: var(--renk-kart);
  color: var(--renk-metin);
}
.karne-belge {
  display: grid;
  gap: 14px;
  max-width: 760px;
  margin: 0 auto;
  color: var(--renk-metin);
}
.karne-baslik h3 {
  margin: 2px 0;
  font-size: 1.6rem;
}
.karne-etiket {
  margin: 0;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  color: var(--renk-soluk);
}
.karne-alt {
  margin: 2px 0;
  font-size: 0.9rem;
  color: var(--renk-soluk);
}
.karne-not {
  color: var(--renk-soluk);
  font-size: 0.92rem;
}
.karne-hata {
  color: var(--renk-hata);
}
.karne-kart {
  background: var(--renk-kart);
  border: 1px solid var(--renk-sinir);
  border-radius: var(--yaricap);
  padding: 16px;
  break-inside: avoid;
}
.karne-kart h4 {
  margin: 0 0 10px;
  font-size: 1rem;
}
.karne-puan {
  display: flex;
  gap: 16px;
  align-items: center;
}
.karne-halka {
  --oran: 0;
  flex: 0 0 96px;
  height: 96px;
  border-radius: 50%;
  background:
    conic-gradient(var(--renk-aksan) calc(var(--oran) * 1%), var(--renk-sinir) 0);
  display: grid;
  place-items: center;
}
.karne-halka span {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: var(--renk-kart);
  display: grid;
  place-items: center;
  font-size: 1.6rem;
  font-weight: 700;
}
.karne-bilesen {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  font-size: 0.85rem;
}
.karne-bilesen li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 0;
}
.karne-ozet {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.karne-kutu {
  border: 1px solid var(--renk-sinir);
  border-radius: var(--yaricap);
  padding: 10px;
  background: var(--renk-kart);
  display: grid;
  gap: 4px;
}
.karne-kutu span {
  font-size: 0.8rem;
  color: var(--renk-soluk);
}
.karne-kutu strong {
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}
.karne-kutu-net strong {
  color: var(--renk-basari);
}
.karne-tablo {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}
.karne-tablo th,
.karne-tablo td {
  padding: 7px 4px;
  border-bottom: 1px solid var(--renk-sinir);
  text-align: left;
}
.karne-tablo td {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.karne-cubuk-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
  font-size: 0.9rem;
}
.karne-cubuk-liste li {
  display: grid;
  grid-template-columns: minmax(90px, 1fr) 2fr auto;
  gap: 10px;
  align-items: center;
}
.karne-cubuk {
  height: 8px;
  border-radius: 4px;
  background: var(--renk-sinir);
  overflow: hidden;
}
.karne-cubuk i {
  display: block;
  height: 100%;
  background: var(--renk-aksan);
  border-radius: 4px;
}
.karne-sayi {
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.karne-oneri {
  background: color-mix(in srgb, var(--renk-basari) 10%, var(--renk-kart));
}
.karne-oneri ul,
.karne-notlar ul {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 8px;
  font-size: 0.92rem;
}
.karne-rakam {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin-right: 4px;
}
.karne-notlar ul {
  color: var(--renk-soluk);
  font-size: 0.85rem;
}

@media (max-width: 560px) {
  .karne-ozet {
    grid-template-columns: 1fr;
  }
  .karne-puan {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Yazdırma: yalnızca karne; sayfa taşmaz, bölümler sayfa sonunu bölmez. */
@page karne { size: A4; margin: 12mm; }
@media print {
  body.karne-yazdir .karne-sayfa { page: karne; }
  body.karne-yazdir #uygulama > .ust-bar,
  body.karne-yazdir #cekmece,
  body.karne-yazdir #perde,
  body.karne-yazdir .karne-kontrol,
  body.karne-yazdir h2 {
    display: none !important;
  }
  body.karne-yazdir {
    background: #fff !important;
    color: #111 !important;
  }
  body.karne-yazdir .karne-sayfa,
  body.karne-yazdir .karne-icerik {
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
  }
  body.karne-yazdir .karne-belge {
    max-width: 100%;
    gap: 10px;
  }
  body.karne-yazdir .karne-kart,
  body.karne-yazdir .karne-kutu {
    background: #fff !important;
    border-color: #ccc !important;
    color: #111 !important;
  }
  body.karne-yazdir .karne-halka span {
    background: #fff !important;
  }
  body.karne-yazdir .karne-halka {
    background: conic-gradient(#2563eb calc(var(--oran) * 1%), #ddd 0) !important;
  }
  body.karne-yazdir .karne-oneri {
    background: #ecfdf5 !important;
  }
  body.karne-yazdir .karne-cubuk,
  body.karne-yazdir .karne-cubuk i {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
  @page {
    size: A4;
    margin: 12mm;
  }
}