/* Yaren Özkök Tema · Hesaplama araçları · v0.1.0 */

.yhs {
  --yhs-iyi: #1E4D40;
  --yhs-iyi-zemin: #E1F0E8;
  --yhs-iyi-serit: #8DC3A8;
  --yhs-dikkat: #7A4A12;
  --yhs-dikkat-zemin: #F8E9D2;
  --yhs-dikkat-serit: #E6B56F;
  --yhs-risk: #8C1D18;
  --yhs-risk-zemin: #F9E0DD;
  --yhs-risk-serit: #D98880;
  --yhs-notr: #3A4F47;
  --yhs-notr-zemin: #E8EEEB;
  --yhs-notr-serit: #C5D3CD;
  --yhs-cizgi: #DDE7E3;
}

.yhs-govde { margin-top: 0; }
.yhs-govde > * { min-width: 0; }

.yhs-giris {
  max-width: 68ch;
  margin: 0 0 28px;
  color: #333;
  font-family: var(--yz-font);
  font-size: 17px;
  line-height: 1.65;
  text-wrap: pretty;
}

.yhs-gizlilik {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  color: var(--yz-ink-yumusak);
  font-family: var(--yz-font);
  font-size: 13.5px;
  line-height: 1.5;
}
.yhs-gizlilik svg { flex-shrink: 0; margin-top: 1px; color: var(--yz-yesil); }

/* ── PANEL ── */
.yhs-kabuk {
  padding: 6px;
  border-radius: 16px;
  background: var(--yz-zemin);
}

.yhs-panel {
  padding: 32px;
  border: 1px solid var(--yhs-cizgi);
  border-radius: 12px;
  background: #fff;
}

.yhs-alanlar {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 24px;
}

.yhs-alan { display: flex; flex-direction: column; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.yhs-alan--genis { grid-column: 1 / -1; }
.yhs-alan[hidden] { display: none; }

.yhs-alan > label,
.yhs-alan legend {
  padding: 0;
  color: #1B2E28;
  font-family: var(--yz-font);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}
.yhs-alan > label small { color: var(--yz-ink-yumusak); font-size: 13px; font-weight: 500; }

.yhs-girdi { position: relative; }

.yhs-girdi input,
.yhs-girdi select {
  width: 100%;
  min-height: 52px;
  margin: 0;
  padding: 12px 16px;
  border: 1px solid #C9D9D2;
  border-radius: 10px;
  background: #fff;
  color: #1B2E28;
  font-family: var(--yz-font);
  font-size: 17px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  transition: border-color var(--yz-sure-kisa) var(--yz-ease), box-shadow var(--yz-sure-kisa) var(--yz-ease);
}
.yhs-girdi input { padding-right: 72px; }
.yhs-girdi input::placeholder { color: #587068; font-weight: 400; }
.yhs-girdi input:hover,
.yhs-girdi select:hover { border-color: #A9C2B7; }
.yhs-girdi input:focus,
.yhs-girdi select:focus {
  border-color: var(--yz-yesil);
  outline: none;
  box-shadow: 0 0 0 3px rgba(47, 111, 94, .2);
}
.yhs-girdi input[aria-invalid="true"] { border-color: var(--yz-hata); background: #FFF8F7; }
.yhs-girdi input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(179, 38, 30, .16); }

.yhs-birim {
  position: absolute;
  top: 50%;
  right: 16px;
  color: var(--yz-ink-yumusak);
  font-family: var(--yz-font);
  font-size: 14px;
  font-weight: 600;
  pointer-events: none;
  transform: translateY(-50%);
}

.yhs-girdi--liste select {
  padding-right: 44px;
  font-size: 16px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.yhs-girdi--liste svg {
  position: absolute;
  top: 50%;
  right: 14px;
  color: var(--yz-yesil);
  pointer-events: none;
  transform: translateY(-50%);
}

.yhs-ipucu { margin: 0; color: var(--yz-ink-yumusak); font-family: var(--yz-font); font-size: 13.5px; line-height: 1.45; }

.yhs-hata {
  margin: 0;
  color: #8C1D18;
  font-family: var(--yz-font);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.45;
}

/* ── SEÇİM ── */
.yhs-secim legend { margin-bottom: 8px; }
.yhs-secim-ic {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  background: var(--yz-zemin);
}
.yhs-secim-ic label { position: relative; display: block; cursor: pointer; }
.yhs-secim-ic input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.yhs-secim-ic span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px 12px;
  border-radius: 9px;
  color: #3A4F47;
  font-family: var(--yz-font);
  font-size: 15px;
  font-weight: 600;
  transition: background var(--yz-sure-kisa) var(--yz-ease), color var(--yz-sure-kisa) var(--yz-ease);
}
.yhs-secim-ic label:hover span { color: #1B2E28; }
.yhs-secim-ic input:checked + span { background: var(--yz-yesil); color: #fff; }
.yhs-secim-ic input:focus-visible + span { outline: 3px solid var(--yz-yesil-koyu); outline-offset: 2px; }

.yhs-onay { flex-direction: row; align-items: center; gap: 12px; }
.yhs-onay input {
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: var(--yz-yesil);
  cursor: pointer;
}
.yhs-onay label { color: #1B2E28; font-family: var(--yz-font); font-size: 15.5px; font-weight: 500; cursor: pointer; }

/* ── GÖNDER ── */
.yhs-gonder {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  margin-top: 28px;
}
.yhs-hesapla {
  min-height: 52px;
  padding: 14px 28px;
  font-size: 16px;
  cursor: pointer;
}
.yhs-hesapla:active { transform: scale(.98); }
.yhs-gonder .yhs-gizlilik { flex: 1 1 260px; }

/* ── SONUÇ ── */
.yhs-sonuc {
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid var(--yhs-cizgi);
  scroll-margin-top: 120px;
}
.yhs-sonuc:focus { outline: none; }
.yhs-sonuc:focus-visible { outline: 2px solid var(--yz-yesil); outline-offset: 6px; border-radius: 4px; }

.yhs-sonuc.is-giris { animation: yhs-giris 380ms var(--yz-ease) both; }
@keyframes yhs-giris {
  from { opacity: 0; transform: translateY(8px); filter: blur(4px); }
  to { opacity: 1; transform: none; filter: none; }
}

.yhs-sonuc-baslik {
  margin: 0;
  color: var(--yz-ink-yumusak);
  font-family: var(--yz-font);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}

.yhs-deger {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin: 6px 0 12px;
  color: #1B2E28;
  font-family: var(--yz-font);
  line-height: 1.1;
}
.yhs-sayi {
  font-size: clamp(40px, 4.2vw, 54px);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.yhs-deger-birim { color: #3A4F47; font-size: 17px; font-weight: 500; }

.yhs-durum {
  display: inline-flex;
  margin: 0;
  padding: 6px 14px;
  border-radius: var(--yz-r-tam);
  font-family: var(--yz-font);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.35;
}
.yhs-durum[hidden] { display: none; }
.yhs-durum[data-ton="iyi"] { background: var(--yhs-iyi-zemin); color: var(--yhs-iyi); }
.yhs-durum[data-ton="dikkat"] { background: var(--yhs-dikkat-zemin); color: var(--yhs-dikkat); }
.yhs-durum[data-ton="risk"] { background: var(--yhs-risk-zemin); color: var(--yhs-risk); }
.yhs-durum[data-ton="notr"] { background: var(--yhs-notr-zemin); color: var(--yhs-notr); }
.yhs-durum[data-ton="bilgi"] { background: var(--yz-yesil-acik); color: var(--yz-yesil-koyu); }

/* ── ÖLÇEK ── */
.yhs-olcek { margin: 20px -4px 4px; padding: 6px 4px 0; overflow-x: clip; }
.yhs-olcek-baslik { margin: 0 0 10px; color: #3A4F47; font-family: var(--yz-font); font-size: 13.5px; font-weight: 600; }

.yhs-olcek-serit {
  position: relative;
  display: flex;
  gap: 3px;
  height: 10px;
}
.yhs-olcek-serit > span { border-radius: 3px; }
.yhs-olcek-serit > span:first-child { border-radius: 999px 3px 3px 999px; }
.yhs-olcek-serit > span:nth-last-child(2) { border-radius: 3px 999px 999px 3px; }
.yhs-olcek-serit > span[data-ton="iyi"] { background: var(--yhs-iyi-serit); }
.yhs-olcek-serit > span[data-ton="dikkat"] { background: var(--yhs-dikkat-serit); }
.yhs-olcek-serit > span[data-ton="risk"] { background: var(--yhs-risk-serit); }
.yhs-olcek-serit > span[data-ton="notr"] { background: var(--yhs-notr-serit); }

.yhs-olcek-isaret {
  position: absolute;
  inset: -6px 0;
  pointer-events: none;
  transform: translateX(var(--x, 0%));
  transition: transform 420ms var(--yz-ease);
}
.yhs-olcek-isaret span {
  position: absolute;
  top: 0;
  left: -3px;
  width: 6px;
  height: 22px;
  border-radius: 3px;
  background: #1B2E28;
  box-shadow: 0 0 0 2px #fff;
}

.yhs-olcek-etiketler {
  display: flex;
  gap: 3px;
  margin-top: 12px;
}
.yhs-olcek-etiketler span {
  min-width: 0;
  overflow: hidden;
  color: var(--yz-ink-yumusak);
  font-family: var(--yz-font);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── SATIRLAR ── */
.yhs-satirlar {
  display: grid;
  gap: 10px;
  margin: 24px 0 0;
  padding: 16px 20px;
  border-radius: 10px;
  background: var(--yz-zemin);
}
.yhs-satirlar[hidden] { display: none; }
.yhs-satir {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2px 16px;
  font-family: var(--yz-font);
  font-size: 15px;
  line-height: 1.45;
}
.yhs-satir dt { color: #3A4F47; }
.yhs-satir dd { margin: 0; color: #1B2E28; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.yhs-satir dd[data-ton="risk"] { color: var(--yhs-risk); }
.yhs-satir dd[data-ton="dikkat"] { color: var(--yhs-dikkat); }

.yhs-yorum {
  max-width: 68ch;
  margin: 20px 0 0;
  color: #333;
  font-family: var(--yz-font);
  font-size: 16px;
  line-height: 1.65;
  text-wrap: pretty;
}

.yhs-not {
  margin: 16px 0 0;
  padding: 12px 16px;
  border-radius: 10px;
  background: var(--yhs-dikkat-zemin);
  color: var(--yhs-dikkat);
  font-family: var(--yz-font);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.55;
}
.yhs-not[hidden] { display: none; }

.yhs-eylem {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  margin-top: 24px;
}
.yhs-eylem .yhd-btn:active { transform: scale(.98); }

.yhs-uyari {
  margin: 16px 0 0;
  color: var(--yz-ink-yumusak);
  font-family: var(--yz-font);
  font-size: 13px;
  line-height: 1.45;
}

/* ── İÇERİK ── */
.yhs-icerik { margin-top: 64px; }
.yhs-icerik .yhd-bolum + .yhd-cta { margin-top: 48px; }
.yhs-icerik .yhd-p a,
.yhs-icerik .yhd-liste a { color: var(--yz-yesil-koyu); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

.yhs-formul {
  margin: 0 0 16px;
  padding: 16px 20px;
  border-radius: 10px;
  background: var(--yz-zemin);
  color: #1B2E28;
  font-family: var(--yz-font);
  font-size: 15.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.7;
}

.yhs-tablo-kap { margin: 0 0 16px; overflow-x: auto; }
.yhs-tablo {
  width: 100%;
  min-width: 420px;
  border-collapse: collapse;
  font-family: var(--yz-font);
  font-size: 15px;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
}
.yhs-tablo th,
.yhs-tablo td { padding: 12px 16px; text-align: left; vertical-align: top; }
.yhs-tablo thead th {
  background: var(--yz-zemin);
  color: #1B2E28;
  font-size: 14px;
  font-weight: 600;
}
.yhs-tablo thead th:first-child { border-radius: 10px 0 0 10px; }
.yhs-tablo thead th:last-child { border-radius: 0 10px 10px 0; }
.yhs-tablo tbody th { color: #1B2E28; font-weight: 600; }
.yhs-tablo tbody td { color: #333; }
.yhs-tablo tbody tr + tr > * { border-top: 1px solid #E8EEEB; }

.yhs-kaynak {
  display: grid;
  gap: 10px;
  margin: 0;
  padding-left: 20px;
  color: #3A4F47;
  font-family: var(--yz-font);
  font-size: 14.5px;
  line-height: 1.55;
}
.yhs-kaynak a { color: var(--yz-yesil-koyu); overflow-wrap: anywhere; text-underline-offset: 3px; }
.yhs-guncel { margin: 16px 0 0; color: var(--yz-ink-yumusak); font-family: var(--yz-font); font-size: 13.5px; }

/* ── KENAR ── */
.yhs-ipuclari ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding-left: 18px;
  color: #333;
  font-family: var(--yz-font);
  font-size: 15px;
  line-height: 1.5;
}
.yhs-ipuclari li::marker { color: var(--yz-yesil); }

/* ── MERKEZ ── */
.yhs-hub-giris { max-width: 760px; margin-bottom: 56px; }
.yhs-hub-giris .yhs-giris { margin-bottom: 16px; }
.yhs-hub-giris .yhs-gizlilik { margin-top: 8px; }

.yhs-grup {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 24px 64px;
  padding: 40px 0;
  border-top: 1px solid var(--yhs-cizgi);
}
.yhs-grup-bas .yhd-h2 { margin-bottom: 10px; }
.yhs-grup-bas .yhd-p { color: #3A4F47; font-size: 15.5px; }

.yhs-liste { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.yhs-liste a {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 20px;
  padding: 18px 20px;
  border-radius: 12px;
  color: inherit;
  text-decoration: none;
  transition: background var(--yz-sure) var(--yz-ease);
}
.yhs-liste a:hover { background: var(--yz-zemin); }
.yhs-liste a:active { transform: scale(.995); }
.yhs-liste a:focus-visible { outline: 2px solid var(--yz-yesil-koyu); outline-offset: 2px; }

.yhs-liste-ikon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: var(--yz-yesil-acik);
  color: var(--yz-yesil);
  transition: background var(--yz-sure) var(--yz-ease), color var(--yz-sure) var(--yz-ease);
}
.yhs-liste a:hover .yhs-liste-ikon { background: var(--yz-yesil); color: #fff; }

.yhs-liste-metin { display: grid; gap: 4px; }
.yhs-liste-ad { color: #1B2E28; font-family: var(--yz-font); font-size: 18px; font-weight: 600; line-height: 1.3; }
.yhs-liste-ozet { color: #3A4F47; font-family: var(--yz-font); font-size: 15px; line-height: 1.5; }

.yhs-liste-ok { color: var(--yz-yesil); transition: transform var(--yz-sure) var(--yz-ease); }
.yhs-liste a:hover .yhs-liste-ok { transform: translateX(3px); }

.yhs-hub-cta { margin-top: 24px; }

/* ── DUYARLI ── */
@media (max-width: 1000px) {
  .yhs-grup { grid-template-columns: 1fr; padding: 32px 0; }
  .yhs-icerik { margin-top: 48px; }
}

@media (max-width: 600px) {
  .yhs-panel { padding: 22px 18px; }
  .yhs-alanlar { grid-template-columns: 1fr; gap: 18px; }
  .yhs-hesapla { flex: 1 1 100%; }
  .yhs-eylem .yhd-btn { flex: 1 1 100%; }
  .yhs-satir { flex-direction: column; }
  .yhs-satir dd { text-align: left; }
  .yhs-liste a { grid-template-columns: 44px minmax(0, 1fr) 18px; gap: 14px; padding: 16px 12px; }
  .yhs-liste-ikon { width: 44px; height: 44px; }
  .yhs-olcek-etiketler span { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .yhs-sonuc.is-giris { animation: none; }
  .yhs-olcek-isaret,
  .yhs-girdi input,
  .yhs-girdi select,
  .yhs-secim-ic span,
  .yhs-liste a,
  .yhs-liste-ikon,
  .yhs-liste-ok { transition: none; }
}