/* Sıfırlama */
    * { margin: 0; padding: 0; box-sizing: border-box; }

    body {
      font-family: 'Times New Roman', Times, serif;
      line-height: 1.5;
      display: flex;
      flex-direction: column;
      min-height: 100vh;
      align-items: center;
      justify-content: center;
      background: #000000;
      background-color: black;
      color: white;
      padding: 1rem; /* Mobil için padding */
     padding-top: 100px; /* Header kadar boşluk bırak */
      background-image: url('arkaplan.jpg');
    }

.header-bar {
  background: linear-gradient(90deg, #1a1a1a 0%, #131212 50%, #1a1a1a 100%);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 20px;
  color: #eee;
  font-family: 'Times New Roman', serif;
  font-size: 0.9rem;
  font-weight: bold;
  letter-spacing: 1px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  border-bottom: 1px solid #444;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

.logo {
  height: 60px;
  margin-right: 15px;
}

.header-text {
  display: flex;
  flex-direction: column;
}

.purpose {
  font-size: 1rem;
  font-weight: bold;
}

.description {
  font-size: 0.85rem;
  font-weight: normal;
  color: #ccc;
}

.butonHesapla {
      padding: 0.5rem 0.5rem;
      font-family: 'Times New Roman', serif;
      font-size: 1rem;
      color: #eee;
      background: linear-gradient(to bottom, #0f4103 0%, #266907 100%);
      border: 1px solid #666;
      border-radius: 4px;
      box-shadow:
        inset 1px 1px 0   #555,
        inset -1px -1px 0 #000,
        0 2px 4px rgba(0,0,0,0.5);
      text-shadow: 0 -1px 0 #000;
      cursor: pointer;
      width: 100%; /* Mobil için tam genişlik */
      margin-bottom: 0.5rem;
    }

    .butonHesapla:hover {
      background: linear-gradient(to bottom, #1a580a 0%, #339107 100%);
      border-color: #888;
    }

    .textBoxGiris {
      padding: 0.5rem;
      width: 250px;
      height: 30px;
      font-family: 'Times New Roman', serif;
      font-size: 1rem;
      color: #eee;
      background: linear-gradient(to bottom, #333 0%, #222 100%);
      border: 1px solid #666;
      border-radius: 4px;
      box-shadow:
        inset 1px 1px 0 #555,
        inset -1px -1px 0 #000,
        0 2px 4px rgba(0,0,0,0.5);
      text-shadow: 0 -1px 0 #000;
    }

    .textBoxGiris:focus {
      outline: none;
      background: linear-gradient(to bottom, #444 0%, #222 100%);
    }

    .container {
          padding-top: 100px; /* Header kadar boşluk bırak */
      width: 100%;
      max-width: 400px;
      margin: 1rem auto;
      padding: 1.5rem;
      background: #111;
      border: 2px solid #333;
      border-radius: 6px;
      box-shadow: 0 4px 8px rgba(0,0,0,0.7);
    }

    .container h1 {
      font-family: 'Times New Roman', serif;
      color: #eee;
      text-align: center;
      margin-bottom: 1.5rem;
      font-size: 1.5rem;
    }
  
    /* Input grup container'ı */
    .input-group {
      display: flex;
      align-items: center;
      margin-bottom: 1rem;
      gap: 1rem;
    }

    .container label {
      color: #ccc;
      font-size: 0.9rem;
      white-space: nowrap;
      min-width: 120px; /* Label'lar için minimum genişlik */
      text-align: left;
    }

    .button-group {
      margin-top: 1.5rem;
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }

    .output, .reverse-output,.detaylar {
      display: none;
      margin-top: 1rem;
      padding: 1rem;
      border-radius: 4px;
      background: #222;
      border: 1px solid #444;
      color: #eee;
    }

    .output p, .reverse-output p {
      margin: 0.25rem 0;
      color: #ccc;
    }

    .reverse-output {
      background: #2a2a2a;
    }

    /* Mobil cihazlar için responsive düzenlemeler */
    @media (max-width: 767px) {
      .textBoxGiris {
        width: 100%;
      }
      
      .butonHesapla {
        width: 100%;
      }
    }

    /* Çok küçük ekranlar için */
    @media (max-width: 480px) {
      .container {
        padding: 1rem;
        margin: 0.5rem;
      }
      
      .container h1 {
        font-size: 1.25rem;
      }
      
      .input-group {
        flex-direction: column;
        align-items: stretch;
        gap: 0.25rem;
      }
      
      .container label {
        min-width: auto;
        margin-bottom: 0.25rem;
      }
    }
.toggle-outputs {
    display: none;
  margin-top: 1rem;
  text-align: center;
  font-size: 0.9rem;
  color: #9ab;
  cursor: pointer;
  user-select: none;
}
.toggle-outputs:hover {
  text-decoration: underline;
  color: #cdf;
}

    .defaults-panel {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 90%;
  width: 500px;
  background: #222;
  border: 2px solid #444;
  border-radius: 6px;
  padding: 1rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.8);
  color: #eee;
  display: none; /* başta gizli */
  z-index: 2000;
}
.defaults-panel table {
  width: 100%;
  border-collapse: collapse;
}
.defaults-panel th,
.defaults-panel td {
  padding: 0.5rem;
  border: 1px solid #555;
  text-align: left;
  cursor: pointer;
}
.defaults-panel tr:hover {
  background: rgba(255,255,255,0.1);
}