/* Ulukat Tema · Hesaplama araçları · v0.2.0 */

/* ── ARAÇ ── */

.hsp { margin: 0 0 60px; padding: 36px 36px 32px; background: #111; border: 1px solid rgba(181, 123, 81, .35); }
.hsp-baslik { margin: 0 0 24px; color: #fff; font: 700 26px/1.3 var(--ul-serif); }
.hsp .uif-alan input[type="date"] { color-scheme: dark; }
.hsp-para { position: relative; }
.hsp-para input { padding-right: 46px; font-variant-numeric: tabular-nums; }
.hsp-para span { position: absolute; top: 50%; right: 18px; transform: translateY(-50%); color: #8a8a8a; font: 600 16px/1 var(--ul-sans2); pointer-events: none; }
.hsp-ipucu { display: block; margin-top: 8px; color: #9d9d9d; font: 500 13.5px/1.55 var(--ul-sans2); }
.hsp-form .uif-alt { margin-top: 28px; }
.hsp-hata { margin: 22px 0 0; padding: 14px 16px; background: rgba(180, 60, 60, .14); border: 1px solid rgba(180, 60, 60, .45); color: #f3b7b7; font: 500 15px/1.5 var(--ul-sans2); }
.hsp-hata[hidden],
.hsp-sonuc[hidden],
.hsp [data-kosul][hidden] { display: none; }

/* ── SONUÇ ── */

.hsp-sonuc { margin-top: 34px; padding-top: 30px; border-top: 1px solid rgba(255, 255, 255, .1); scroll-margin-top: 130px; outline: none; animation: hsp-gir .45s var(--ul-ease-cikis); }
@keyframes hsp-gir { from { opacity: 0; transform: translateY(10px); } }
.hsp-ozet { display: flex; flex-wrap: wrap; gap: 8px 30px; margin: 0 0 22px; color: #b5b5b5; font: 500 15px/1.5 var(--ul-sans2); }
.hsp-ozet p { margin: 0; }
.hsp-ozet strong { color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; }
.hsp-kartlar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.hsp-kart { padding: 24px 24px 22px; background: #0b0b0b; border: 1px solid rgba(255, 255, 255, .1); }
.hsp-kart h3 { margin: 0 0 12px; color: var(--ul-fawn); font: 700 19px/1.3 var(--ul-serif); }
.hsp-kart dl { margin: 0; }
.hsp-satir { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, .07); font: 500 15px/1.45 var(--ul-sans2); }
.hsp-satir dt { color: #a9a9a9; }
.hsp-satir dd { margin: 0; color: #ececec; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.hsp-net { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 6px 16px; margin: 16px 0 0; }
.hsp-net span { color: #d6d6d6; font: 600 15px/1.4 var(--ul-sans2); }
.hsp-net strong { color: #fff; font: 700 26px/1.2 var(--ul-serif); font-variant-numeric: tabular-nums; }
.hsp-yok { margin: 0; color: #bdbdbd; font: 500 15px/1.65 var(--ul-sans2); }
.hsp-toplam { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 6px 16px; margin: 18px 0 0; padding: 20px 24px; background: rgba(181, 123, 81, .1); border: 1px solid rgba(181, 123, 81, .4); }
.hsp-toplam span { color: #e0d6cc; font: 600 16px/1.4 var(--ul-sans2); }
.hsp-toplam strong { color: var(--ul-fawn); font: 700 30px/1.2 var(--ul-serif); font-variant-numeric: tabular-nums; }
.hsp-notlar { margin: 22px 0 0; padding-left: 1.2em; color: #a3a3a3; font: 500 14px/1.65 var(--ul-sans2); }
.hsp-notlar li + li { margin-top: 6px; }
.hsp-notlar li::marker { color: var(--ul-bronz); }

/* ── ARAÇ LİSTESİ ── */

.hsl { padding: 80px 0 90px; }
.hsl-giris { max-width: 780px; margin: 0 0 44px; }
.hsl-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.hsl-kart {
  display: flex; flex-direction: column; gap: 12px; height: 100%; padding: 30px 28px 26px;
  background: #111; border: 1px solid rgba(255, 255, 255, .1); color: inherit; text-decoration: none;
  transition: border-color .35s var(--ul-ease), background-color .35s var(--ul-ease), transform .35s var(--ul-ease-cikis);
}
.hsl-ikon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: rgba(181, 123, 81, .14); color: var(--ul-fawn); }
.hsl-ikon .ul-ikon { width: 26px; height: 26px; }
.hsl-ad { margin-top: 6px; color: #fff; font: 700 21px/1.3 var(--ul-serif); }
.hsl-kisa { color: #b3b3b3; font: 500 15px/1.65 var(--ul-sans2); }
.hsl-git { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 8px; color: var(--ul-fawn); font: 700 15px/1 var(--ul-sans2); }
.hsl-git .ul-ikon { width: 15px; height: 15px; transition: transform .45s var(--ul-ease-cikis); }
.hsl-kart:hover { border-color: rgba(181, 123, 81, .55); background: #141312; transform: translateY(-3px); }
.hsl-kart:hover .hsl-git .ul-ikon { transform: translateX(5px); }
.hsl-kart:focus-visible { outline: 2px solid var(--ul-gold); outline-offset: 3px; }
.hsl-not { max-width: 780px; margin: 36px 0 0; color: #9d9d9d; font: 500 14px/1.65 var(--ul-sans2); }

@media (max-width: 767px) {
  .hsp { padding: 26px 20px 24px; }
  .hsp-baslik { font-size: 23px; }
  .hsp-kartlar { grid-template-columns: 1fr; }
  .hsp-kart { padding: 20px 18px; }
  .hsp-toplam { padding: 18px; }
  .hsp-toplam strong { font-size: 26px; }
  .hsl { padding: 56px 0 64px; }
}

@media (prefers-reduced-motion: reduce) {
  .hsp-sonuc { animation: none; }
  .hsl-kart,
  .hsl-git .ul-ikon { transition: none; }
  .hsl-kart:hover { transform: none; }
}