@charset "UTF-8";
:root {
  /* Kontrastı artırmak için koyu tonlar seçildi */
  --primary-color: #003366;      /* Yüksek kontrastlı koyu mavi */
  --secondary-color: #b8860b;     /* Koyu altın tonlarında vurgu rengi */
  --background-color: #fafafa;    /* Açık arka plan */
  --primary-alpha: #00336632;     /* %20 opaklıkta primary renk */
  --secondary-alpha: #b8860b32;   /* %20 opaklıkta secondary renk */
}

/* Örnek: Geri kalan yapısal düzenlemeler korunarak renk atamaları güncellendi */
body {
  width: 100%;
  max-width: 90%; /* 600px yerine daha esnek */
  margin: auto;
  background-color: var(--background-color);
  font-family: sans-serif;
  padding: 20px;
}

main {
  max-width: 600px;
  margin: auto;
  background-color: var(--background-color);
  font-family: sans-serif;
  10px 0px 10px 0px;
  justify-content: center;
  align-items: center;
}

.calculator-title {
  text-align: center;
  color: var(--primary-color); /* Artık koyu mavi */
}

.calculator-instruction {
  text-align: center;
  margin-bottom: 20px;
  padding-bottom: 20px;
  
}

.calculator-container {
  margin: 20px 0;
  display: flex;
  justify-content: space-between;
}

.calculator-input.length label,
.calculator-input.length input {
  color: var(--secondary-color); /* Koyu altın rengi, vurgu için */
}

.calculator-input.length input {
  border-color: var(--secondary-color);
}

.calculator-input label,
.calculator-input input {
  display: block;
  text-align: center;
}

.calculator-input label {
  font: 600 1em sans-serif;
  color: var(--primary-color);
}

.calculator-input input {
  width: 4em;
  padding-top: 2em;
  padding-bottom: 0.5em;
  margin-top: -1.5em;
  background: transparent;
  font: 600 1.6em sans-serif;
  color: var(--primary-color);
  border: 3px solid var(--primary-color);
  border-radius: 0.6em;
  text-overflow: ellipsis;
}

.calculator-input input:disabled {
  border-style: dotted;
  opacity: 0.6;
}

.calculator-visual {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

svg {
  overflow: visible;
}

svg text {
  fill: var(--primary-color);
  font: 600 0.9em sans-serif;
}

.calculator-steps {
  background-color: var(--secondary-alpha);
  padding: 10px;
  border-radius: 8px;
  border: 1px solid var(--secondary-color);
}

.calculator-steps h2 {
  font-size: 1.2em;
  margin-bottom: 10px;
  color: var(--primary-color);
  /*color: var(--secondary-color);*/
}

footer {
  text-align: center;
  padding: 20px;
  color: var(--primary-color);
}

/* Responsive design */
@media screen and (max-width: 768px) {
  body {
    width: 100%;
  }
}