/* Formbox-Group – Genel konteyner */
.formbox-group.my-form {
  max-width: 600px;
  padding: var(--gutter);
  background-color: var(--background-secondary);
  border: 1px solid var(--border-primary);
  border-radius: var(--elem-radius);
  box-shadow: var(--shadow-02);
  color: var(--text-primary);
  font: var(--type-body);
}

/* Satırlar: esnek yerleşim */
.formbox-group.my-form .formbox-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gutter);
  margin-bottom: var(--gutter);
}

/* Etiketler (sol) */
.formbox-group.my-form .formbox-line > label,
.formbox-group.my-form .formbox-line .formbox-label {
  flex: 0 0 auto;
  min-width: 120px;
  font: var(--type-ui);
  color: var(--text-secondary);
}

/* Alanlar: select ve input */
.formbox-group.my-form select,
.formbox-group.my-form input[type="text"],
.formbox-group.my-form input[type="number"],
.formbox-group.my-form input[type="email"],
.formbox-group.my-form input[type="url"],
.formbox-group.my-form input[type="tel"],
.formbox-group.my-form input[type="password"],
.formbox-group.my-form input[type="search"],
.formbox-group.my-form textarea {
  flex: 1 1 auto;
  min-height: var(--form-elem-height);
  padding: 0.5rem 0.75rem;
  font: var(--type-ui);
  color: var(--text-primary);
  background-color: var(--background-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--elem-radius);
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.formbox-group.my-form select:hover,
.formbox-group.my-form input[type="text"]:hover,
.formbox-group.my-form input[type="number"]:hover,
.formbox-group.my-form input[type="email"]:hover,
.formbox-group.my-form input[type="url"]:hover,
.formbox-group.my-form input[type="tel"]:hover,
.formbox-group.my-form input[type="password"]:hover,
.formbox-group.my-form input[type="search"]:hover,
.formbox-group.my-form textarea:hover {
  border-color: var(--border-secondary);
  background: var(--background-secondary);
}

.formbox-group.my-form select:focus,
.formbox-group.my-form input[type="text"]:focus,
.formbox-group.my-form input[type="number"]:focus,
.formbox-group.my-form input[type="email"]:focus,
.formbox-group.my-form input[type="url"]:focus,
.formbox-group.my-form input[type="tel"]:focus,
.formbox-group.my-form input[type="password"]:focus,
.formbox-group.my-form input[type="search"]:focus,
.formbox-group.my-form textarea:focus {
  outline: none;
  border-color: var(--field-focus-border);
  box-shadow: var(--focus-01);
  background: var(--background-primary);
}

.formbox-group.my-form ::placeholder {
  color: var(--text-inactive);
}

/* Checkbox grupları */
.formbox-group.my-form .formbox-line input[type="checkbox"] {
  margin-right: 0.5rem;
  flex: 0 0 auto;
}

.formbox-group.my-form .formbox-line label[for^="extras_"] {
  display: inline-flex;
  align-items: center;
  font: var(--type-body);
  color: var(--text-primary);
  margin-right: var(--gutter);
}

/* Radio/Checkbox grouped semantics */
.choice-group { border: 0; padding: 0; margin: 0; }
.choice-group .formbox-label { margin-bottom: 0.25rem; font: var(--type-ui); color: var(--text-secondary); }
.choice {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-right: 1rem;
  font: var(--type-body);
  color: var(--text-primary);
}
.choice input[type="radio"],
.choice input[type="checkbox"] {
  appearance: none;
  inline-size: 1rem;
  block-size: 1rem;
  border: 1px solid var(--border-primary);
  background: var(--background-primary);
  display: inline-grid;
  place-content: center;
  transition: background-color .15s, border-color .15s, box-shadow .15s;
}
.choice input[type="checkbox"] { border-radius: 0.2rem; }
.choice input[type="radio"]    { border-radius: 50%; }

.choice input[type="checkbox"]::after {
  content: "";
  width: 0.55rem; height: 0.55rem;
  transform: scale(0);
  background: var(--accent-primary);
  border-radius: 0.1rem;
  transition: transform .12s ease;
}
.choice input[type="radio"]::after {
  content: "";
  width: 0.5rem; height: 0.5rem;
  transform: scale(0);
  background: var(--accent-primary);
  border-radius: 50%;
  transition: transform .12s ease;
}
.choice input:checked {
  border-color: var(--accent-primary);
  background: var(--accent-primary-engage);
}
.choice input:checked::after { transform: scale(1); }
.choice input:focus-visible { outline: none; box-shadow: var(--focus-01); }

/* Submit butonu — sistem dili */
.formbox-group.my-form button[type="submit"] {
  flex: 0 0 auto;
  min-height: var(--form-elem-height);
  padding: 0.5rem 1rem;
  font: var(--type-ui);
  color: var(--text-invert);
  background-color: var(--button-primary-default);
  border: 1px solid var(--button-primary-default);
  border-radius: var(--elem-radius);
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.formbox-group.my-form button[type="submit"]:hover {
  background-color: var(--button-primary-hover);
}
.formbox-group.my-form button[type="submit"]:active {
  background-color: var(--button-primary-active);
}
.formbox-group.my-form button[type="submit"]::after {
  /* opsiyonel loading için yer tutucu */
  content: "";
}

/* Hint/Error ve required */
.formbox-group .req { color: var(--text-primary-red); }
.sr-only {
  position: absolute !important;
  width:1px !important; height:1px !important;
  padding:0 !important; margin:-1px !important;
  overflow:hidden !important; clip:rect(0,0,0,0) !important;
  white-space:nowrap !important; border:0 !important;
}

.form-hint  { font-size: var(--fs-tiny); line-height: var(--lh-ui); color: var(--text-muted); }
.form-error { font-size: var(--fs-tiny); line-height: var(--lh-ui); color: var(--text-primary-red); }

/* Invalid state */
.formbox-line[data-state="invalid"] input,
.formbox-line[data-state="invalid"] select,
.formbox-line[data-state="invalid"] textarea {
  border-color: var(--button-secondary-border-red);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--button-secondary-border-red) 20%, transparent);
}

/* Select oku (native, CSS-only) */
.formbox-group.my-form select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="%23666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>');
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 14px 14px;
  padding-right: 2rem;
}

/* Mobil uyum */
@media (max-width: 480px) {
  .formbox-group.my-form .formbox-line {
    flex-direction: column;
    align-items: stretch;
  }
  .formbox-group.my-form .formbox-line > label,
  .formbox-group.my-form .formbox-line .formbox-label {
    margin-bottom: 0.25rem;
  }
  .formbox-group.my-form button[type="submit"] {
    width: 100%;
  }
}

/* result bloğu: sticky header’ı hesaba kat */
#result1 {
  scroll-margin-top: var(--top-nav-height);
}

/* Result Kartı */
#result1 {
  max-width: 600px;
  padding: var(--gutter);
  background-color: var(--background-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--elem-radius);
  box-shadow: var(--shadow-01);
  color: var(--text-primary);
  font: var(--type-body);
  line-height: var(--lh-body);
}

/* İçerik düzeni */
#result1 > div {
  font: var(--type-body);
}

/* Vurgu metinler */
#result1 strong {
  color: var(--accent-primary);
}

/* Mobilde padding azalt */
@media (max-width: 480px) {
  #result1 { padding: calc(var(--gutter) * 0.75); }
}





/* Unit Converter – Genel yapı */
#unit-converter {
  max-width: 480px;
  padding: var(--gutter);
  background: var(--background-secondary);
  border: 1px solid var(--border-primary);
  border-radius: var(--elem-radius);
  box-shadow: var(--shadow-02);
  color: var(--text-primary);
  font: var(--type-body);
}

#unit-converter .formbox-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gutter);
  margin-bottom: var(--gutter);
}

#unit-converter .uc-field { margin: 0 0 .5rem; }

/* Label + input */
#unit-converter label {
  flex: 0 0 auto;
  font: var(--type-ui);
  color: var(--text-secondary);
  margin-right: 0.5rem;
}

#unit-converter input[type="number"] {
  flex: 1 1 auto;
  min-height: var(--form-elem-height);
  padding: 0.5rem 0.75rem;
  font: var(--type-ui);
  color: var(--text-primary);
  background: var(--background-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--elem-radius);
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

#unit-converter input[type="number"]::placeholder { color: var(--text-inactive); }

#unit-converter input[type="number"]:hover {
  border-color: var(--border-secondary);
  background: var(--background-secondary);
}

#unit-converter input[type="number"]:focus {
  outline: none;
  border-color: var(--field-focus-border);
  box-shadow: var(--focus-01);
  background: var(--background-primary);
}

/* Butonlar */
#unit-converter #uc_button,
#unit-converter #uc_switch {
  flex: 0 1 auto;
  min-height: var(--form-elem-height);
  padding: 0.5rem 1rem;
  font: var(--type-ui);
  border-radius: var(--elem-radius);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

/* Birincil: Dönüştür */
#unit-converter #uc_button {
  color: var(--text-invert);
  background: var(--button-primary-default);
  border: 1px solid var(--button-primary-default);
}
#unit-converter #uc_button:hover { background: var(--button-primary-hover); }
#unit-converter #uc_button:active { background: var(--button-primary-active); }
#unit-converter #uc_button:focus-visible { outline: none; box-shadow: var(--focus-01); }

/* Sekonder: Terse çevir (link görünümlü buton) */
#unit-converter #uc_switch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  background: var(--button-secondary-default);
  color: var(--color-text-primary);
  border: 1px solid var(--border-primary);
}
#unit-converter #uc_switch:hover { background: var(--button-secondary-hover); }
#unit-converter #uc_switch:active { background: var(--button-secondary-active); }
#unit-converter #uc_switch:focus-visible { outline: none; box-shadow: var(--focus-01); }

/* Sonuç alanı */
#unit-converter #uc_result {
  flex: 1 1 100%;
  min-height: var(--form-elem-height);
  padding: 0.5rem 0.75rem;
  background: var(--background-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--elem-radius);
  font: var(--type-body);
  color: var(--text-primary);
  display: flex;
  align-items: center;
}

/* Kopyala butonu */
#unit-converter #uc_copy {
  flex: 0 0 auto;
  inline-size: var(--form-elem-height);
  block-size: var(--form-elem-height);
  background: var(--button-secondary-default);
  border: 1px solid var(--border-primary);
  border-radius: var(--elem-radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-primary);
  cursor: pointer;
  transition: background-color .15s ease, box-shadow .15s ease, border-color .15s ease;
}
#unit-converter #uc_copy:hover { background: var(--button-secondary-hover); }
#unit-converter #uc_copy:active { background: var(--button-secondary-active); }
#unit-converter #uc_copy:focus-visible { outline: none; box-shadow: var(--focus-01); }

/* İkonlar: currentColor ile senkron */
#unit-converter .icon {
  width: var(--icon-size);
  height: var(--icon-size);
  display: inline-block;
  color: currentColor;
  fill: currentColor;
}

/* Mobil */
@media (max-width: 480px) {
  #unit-converter .formbox-line {
    flex-direction: column;
    align-items: stretch;
  }
  #unit-converter #uc_switch { margin-top: 0.5rem; }
}










/* Formula Container Callout */
.formula-container {
  display: flex;
  align-items: center;
  gap: var(--gutter);
  padding: var(--gutter);
  margin: var(--gutter) 0;
  background: var(--background-secondary);
  border: 1px solid var(--border-primary);
  border-radius: var(--elem-radius);
  box-shadow: var(--shadow-01);
}

/* Sol taraf: içerik */
.formula-container .formula {
  flex: 1 1 auto;
  min-width: 0;
}

/* Başlık */
.formula-container .formula h3 {
  margin: 0 0 0.5rem;
  font: var(--type-heading-h4);
  color: var(--text-primary);
  letter-spacing: var(--ls-h-medium);
}

/* Formül satırı (inline code görgüsü) */
.formula-container .formula p.math {
  margin: 0;
  font-family: var(--font-code);
  font-size: var(--fs-0);
  line-height: var(--lh-code);
  color: var(--accent-primary);
  background: var(--background-primary);
  padding: 0.25rem 0.5rem;
  border-radius: var(--elem-radius);
  border: 1px solid var(--border-secondary);
  overflow-x: auto;
  white-space: nowrap;
}

/* Sağdaki accent stripe */
.formula-container .stripe {
  flex: 0 0 4px;
  background: var(--accent-primary);
  border-radius: 2px;
  align-self: stretch;
}

/* Küçük ekran uyumu */
@media (max-width: 600px) {
  .formula-container { flex-direction: column; }
  .formula-container .stripe {
    width: 100%;
    height: 4px;
    align-self: auto;
  }
}








/* Form kabı */
.quiz-form {
  max-width: 600px;
  padding: var(--gutter);
  background: var(--background-secondary);
  border: 1px solid var(--border-primary);
  border-radius: var(--elem-radius);
  box-shadow: var(--shadow-02);
  color: var(--text-primary);
  font: var(--type-body);
}

/* Soru bloğu */
.quiz-form .question {
  margin-bottom: var(--gutter);
  padding-bottom: var(--gutter);
  border-bottom: 1px solid var(--border-secondary);
}

/* Soru metni */
.quiz-form .question > p {
  margin: 0 0 0.5rem;
  font: var(--type-heading-h5);
  color: var(--text-primary);
}

/* Seçenek satırı */
.quiz-form .question label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-right: var(--gutter);
  margin-bottom: 0.5rem;
  font: var(--type-body);
  color: var(--text-secondary);
  cursor: pointer;
  position: relative;
  padding-left: 1.8rem; /* custom daire için alan */
  user-select: none;
}

/* Açıklama (opsiyonel) */
.quiz-form .question em { font: var(--type-ui); }

/* Radio — native’i gizle, erişilebilir bırak */
.quiz-form .question input[type="radio"] {
  position: absolute;
  opacity: 0;
  inline-size: 0;
  block-size: 0;
  pointer-events: none;
}

/* Kutu (dairesel) */
.quiz-form .question label::before {
  content: "";
  position: absolute;
  inset-inline-start: 0; inset-block-start: 50%;
  transform: translateY(-50%);
  inline-size: 1rem; block-size: 1rem;
  border: 2px solid var(--border-primary);
  border-radius: 50%;
  background: var(--background-primary);
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

/* Checked — :has ve kardeş seçicisi fallback */
.quiz-form .question label:has(input[type="radio"]:checked)::before,
.quiz-form .question input[type="radio"]:checked + label::before {
  border-color: var(--accent-primary);
  background-color: var(--accent-primary);
}

/* Hover/focus */
.quiz-form .question label:hover::before {
  border-color: var(--border-secondary);
  background: var(--background-secondary);
}
.quiz-form .question input[type="radio"]:focus-visible + label::before,
.quiz-form .question label:focus-within::before {
  box-shadow: var(--focus-01);
  border-color: var(--field-focus-border);
}

/* Disabled */
.quiz-form .question input[type="radio"]:disabled + label {
  color: var(--text-inactive);
  cursor: not-allowed;
}
.quiz-form .question input[type="radio"]:disabled + label::before {
  border-color: var(--border-secondary);
  background: var(--background-secondary);
  opacity: .8;
}

/* Submit butonu */
.quiz-form .button,
.quiz-form button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 1.5rem;
  min-height: var(--form-elem-height);
  font: var(--type-ui);
  color: var(--text-invert);
  background: var(--button-primary-default);
  border: 1px solid var(--button-primary-default);
  border-radius: var(--elem-radius);
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
  margin-top: var(--gutter);
}
.quiz-form .button:hover,
.quiz-form button[type="submit"]:hover { background: var(--button-primary-hover); }
.quiz-form .button:active,
.quiz-form button[type="submit"]:active { background: var(--button-primary-active); }
.quiz-form .button:focus-visible,
.quiz-form button[type="submit"]:focus-visible { outline: none; box-shadow: var(--focus-01); }

/* Error state (soru bloğu seviyesinde) */
.quiz-form .question[data-state="invalid"] > p { color: var(--text-primary-red); }
.quiz-form .question[data-state="invalid"] label::before {
  border-color: var(--button-secondary-border-red);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--button-secondary-border-red) 20%, transparent);
}

/* Quiz sonuç kartı */
#quiz-result {
  max-width: 600px;
  padding: var(--gutter);
  background: var(--background-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--elem-radius);
  box-shadow: var(--shadow-01);
  text-align: center;
  color: var(--text-primary);
  font: var(--type-body);
}

/* Skor başlığı */
#quiz-result h2 {
  margin: 0 0 0.5rem;
  font: var(--type-heading-h3);
  color: var(--accent-primary);
}

/* Skor açıklaması */
#quiz-result > div {
  font: var(--type-body);
  color: var(--text-secondary);
}

/* Mobil */
@media (max-width: 480px) {
  .quiz-form .question label { flex: 1 1 100%; }
  .quiz-form .button,
  .quiz-form button[type="submit"] { width: 100%; }
  #quiz-result { padding: calc(var(--gutter) * 0.75); }
}









/* — Geri Sayım (count-down) Kapsayıcı — */
.count-down {
  background: var(--background-secondary);
  border: 1px solid var(--border-primary);
  border-radius: var(--elem-radius);
  padding: var(--gutter);
  text-align: center;
  margin-bottom: 2rem;
  box-shadow: var(--shadow-02);
  color: var(--text-primary);
  font: var(--type-body);
}

/* Başlık */
.count-down h2 {
  margin: 0 0 var(--gutter);
  font: var(--type-heading-h3);
  color: var(--accent-primary);
  letter-spacing: var(--ls-h-medium);
}

/* Hedef Tarih */
.count-down .event-date {
  font: var(--type-body);
  font-weight: var(--wt-semibold);
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

/* Yerel Saat */
.count-down .local-time {
  font: var(--type-body);
  font-style: italic;
  color: var(--text-secondary);
  margin: 0 0 var(--gutter);
}

/* Sayım Kutuları */
.count-down .countdown-box {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gutter);
}

/* Her bir birim kartı */
.count-down .unit {
  background: var(--background-primary);
  border: 1px solid var(--border-secondary);
  border-radius: var(--elem-radius);
  padding: 0.75rem 1.25rem;
  min-width: 4.5rem;
  box-shadow: var(--shadow-01);
}

/* Değer */
.count-down .unit .value {
  display: block;
  font: var(--type-heading-h4);
  color: var(--accent-secondary);
  margin-bottom: 0.25rem;
  line-height: var(--lh-heading);
}

/* Etiket */
.count-down .unit .label {
  display: block;
  font: var(--type-ui);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Focus görünürlüğü — kart grubu içinde tuşla dolaşım */
.count-down a:focus-visible,
.count-down button:focus-visible {
  outline: none;
  box-shadow: var(--focus-01);
  border-radius: var(--elem-radius);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .count-down, .count-down .unit { transition: none; }
}

/* Küçük ekran düzenlemeleri */
@media (max-width: 600px) {
  .count-down { padding: calc(var(--gutter) * 0.75); }
  .count-down .countdown-box { gap: calc(var(--gutter) * 0.5); }
  .count-down .unit { padding: 0.5rem 0.75rem; min-width: 3.5rem; }
  .count-down .unit .value {
    font: var(--wt-semibold) 1.4rem / var(--lh-heading) var(--font-heading);
    letter-spacing: var(--ls-h-medium);
  }
}




/* Download Form Kartı */
.download-form {
  list-style: none;
  max-width: 600px;
  margin: var(--gutter) auto;
  padding: var(--gutter);
  background: var(--background-secondary);
  border: 1px solid var(--border-primary);
  border-radius: var(--elem-radius);
  box-shadow: var(--shadow-02);
  color: var(--text-primary);
  font: var(--type-body);
}

/* Liste öğeleri */
.download-form li {
  display: flex;
  align-items: flex-start;
  gap: var(--gutter);
  padding: calc(var(--gutter) / 2) 0;
  border-bottom: 1px solid var(--border-secondary);
}
.download-form li:last-child { border-bottom: none; }

/* Alan başlıkları */
.download-form li strong {
  flex: 0 0 120px;
  font: var(--type-ui);
  font-weight: var(--wt-semibold);
  line-height: var(--lh-body);
  color: var(--text-primary);
}

/* İndirme linki */
.download-form li a {
  color: var(--accent-primary);
  text-decoration: none;
  border-bottom: 1px dashed var(--accent-primary);
  transition: color .15s ease, border-bottom-color .15s ease;
}
.download-form li a:hover {
  color: var(--accent-secondary);
  border-bottom-color: var(--accent-secondary);
}
.download-form li a:focus-visible {
  outline: none;
  box-shadow: var(--focus-01);
  border-radius: 2px;
}

/* Mobil düzen */
@media (max-width: 480px) {
  .download-form li {
    flex-direction: column;
    align-items: stretch;
  }
  .download-form li strong {
    margin-bottom: 0.25rem;
  }
}









/* — Convert Form Kartı — */
#convert {
  max-width: 600px;
  margin: var(--gutter) auto;
  padding: var(--gutter);
  background: var(--background-secondary);
  border: 1px solid var(--border-primary);
  border-radius: var(--elem-radius);
  box-shadow: var(--shadow-02);
  color: var(--text-primary);
  font: var(--type-body);
}

/* — Her satır: formbox-line eşleniği — */
#convert .convert-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gutter);
  margin-bottom: var(--gutter);
}


/* — Sol etiket — */
#convert .convert-line-left {
  flex: 0 0 120px;
  font: var(--type-ui);
  color: var(--text-secondary);
}

/* — Sağ alan — */
#convert .convert-line-right {
  flex: 1 1 auto;
  min-width: 0;
}

/* — Select ve number input — form grubu ile aynı — */
#convert .convert-line-right select,
#convert .convert-line-right .select, /* mevcut markup için geçici */
#convert .convert-line-right input[type="number"],
#convert .convert-line-right input[type="text"],
#convert-form textarea {
  width: 100%;
  min-height: var(--form-elem-height);
  padding: 0.5rem 0.75rem;
  font: var(--type-ui);
  color: var(--text-primary);
  background: var(--background-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--elem-radius);
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

#convert .convert-line-right select:hover,
#convert .convert-line-right .select:hover,
#convert .convert-line-right input[type="number"]:hover,
#convert .convert-line-right input[type="text"]:hover,
#convert-form textarea:hover {
  border-color: var(--border-secondary);
  background: var(--background-secondary);
}

#convert .convert-line-right select:focus,
#convert .convert-line-right .select:focus,
#convert .convert-line-right input[type="number"]:focus,
#convert .convert-line-right input[type="text"]:focus,
#convert-form textarea:focus {
  outline: none;
  border-color: var(--field-focus-border);
  box-shadow: var(--focus-01);
  background: var(--background-primary);
}

#convert .convert-line-right ::placeholder { color: var(--text-inactive); }

/* — Hesapla butonu — form grubu dili — */
#convert-button .convert,
#convert .convert-btn,
.convert-line-button .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--form-elem-height);
  padding: 0.5rem 1rem;
  font: var(--type-ui);
  color: var(--text-invert);
  background: var(--button-primary-default);
  border: 1px solid var(--button-primary-default);
  border-radius: var(--elem-radius);
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

#convert-button .convert:hover,
#convert .convert-btn:hover,
.convert-line-button .button:hover { background: var(--button-primary-hover); }
#convert-button .convert:active,
#convert .convert-btn:active,
.convert-line-button .button:active { background: var(--button-primary-active); }
#convert-button .convert:focus-visible,
#convert .convert-btn:focus-visible,
.convert-line-button .button:focus-visible { outline: none; box-shadow: var(--focus-01); }




/* Sekonder: Terse çevir (link görünümlü buton) */

#convert .secondary-button {
    flex: 0 1 auto;
    min-height: var(--form-elem-height);
    padding: 0.5rem 1rem;
    font: var(--type-ui);
    border-radius: var(--elem-radius);
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

#convert .secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  background: var(--button-secondary-default);
  color: var(--color-text-primary);
  border: 1px solid var(--border-primary);
}
#convert .secondary-button:hover { background: var(--button-secondary-hover); }
#convert .secondary-button:active { background: var(--button-secondary-active); }
#convert .secondary-button:focus-visible { outline: none; box-shadow: var(--focus-01); }


/* — Sonuç kutusu — form result eşleniği — */
#convert-result .result-box {
  background: var(--background-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--elem-radius);
  padding: var(--gutter);
  box-shadow: var(--shadow-01);
  margin-top: var(--gutter);
  color: var(--text-primary);
  font: var(--type-body);
}

#convert-result .result-box-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--gutter);
}

#convert-result .text-result {
  font: var(--type-body);
  color: var(--text-secondary);
}

#convert-result .result {
  font: var(--type-heading-h4);
  color: var(--accent-primary);
  cursor: pointer;
  line-height: var(--lh-heading);
}

/* “Kopyalandı” mesajı */
#convert-result .copied-text {
  margin-top: 0.5rem;
  font: var(--type-body);
  color: var(--accent-primary);
  display: none;
}
#convert-result.show-copied .copied-text { display: block; }

/* Mobil düzen */
@media (max-width: 480px) {
  #convert .convert-line { flex-direction: column; align-items: stretch; }
  #convert .convert-line-left { margin-bottom: 0.5rem; }
  #convert-button .convert { width: 100%; }
}







/* — Convert / Tableizer Aracı Kartı — */
#tableizer #convert {
  max-width: 800px;
  margin: 2rem auto;
  padding: var(--gutter);
  background-color: var(--background-secondary);
  border: 1px solid var(--border-primary);
  border-radius: var(--elem-radius);
  box-shadow: var(--shadow-02);
  font-family: var(--font-body);
  color: var(--text-primary);
}

/* — Her Satır için Flex Düzeni — */
#tableizer #convert .convert-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gutter);
  margin-bottom: var(--gutter);
}

/* — Label/Sol Kısım — */
#tableizer #convert .convert-line-left {
  flex: 0 0 140px;
  font: var(--type-label-s);
  color: var(--text-secondary);
}

/* — Kontrol/Sağ Kısım — */
#tableizer #convert .convert-line-right {
  flex: 1;
}

/* — Select, Textarea ve Input Stilleri — */
#tableizer #convert select,
#tableizer #convert textarea,
#tableizer #convert input[type="number"] {
  width: 100%;
  min-height: var(--form-elem-height);
  padding: 0.5rem var(--gutter);
  font: var(--type-article-p);
  color: var(--text-primary);
  background-color: var(--background-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--elem-radius);
  transition: border-color 0.2s, box-shadow 0.2s;
  resize: vertical;
}

#tableizer #convert select:focus,
#tableizer #convert textarea:focus,
#tableizer #convert input[type="number"]:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: var(--focus-effect);
}

/* — Checkbox & Radio Kutucukları — */
#tableizer #convert .radio-box {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-right: var(--gutter);
  margin-bottom: 0.25rem;
  font: var(--type-article-p);
  color: var(--text-primary);
}

#tableizer #convert .radio-box input {
  accent-color: var(--accent-primary);
  margin: 0;min-height: 1rem;
}

/* — Hesapla / Kopyala / Temizle Butonları — */
#tableizer #convert-button {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gutter);
  margin-bottom: var(--gutter);
}

#tableizer #convert-button .button {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 1.2rem;
  height: var(--form-elem-height);
  font: var(--type-label-s);
  border-radius: var(--elem-radius);
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}

#tableizer #convert-button .main-button {
  background-color: var(--accent-primary);
  color: var(--text-invert);
  border: 1px solid var(--accent-primary);
}

#tableizer #convert-button .main-button:hover {
  background-color: var(--button-primary-hover);
}

#tableizer #convert-button .main-button:active {
  background-color: var(--button-primary-active);
}

#tableizer #convert-button .secondary-button {
  background-color: transparent;
  color: var(--accent-primary);
  border: 1px solid var(--accent-primary);
}

#tableizer #convert-button .secondary-button:hover {
  background-color: var(--accent-primary);
  color: var(--text-invert);
}

#tableizer #convert-button .secondary-button:active {
  background-color: var(--button-primary-active);
}

/* — Çıktı Textarea — */
#tableizer #txtResult {
  margin-top: var(--gutter);
  width: 100%;
  min-height: 12rem;
  padding: var(--gutter);
  font-family: var(--font-code);
  font-size: var(--type-article-p);
  color: var(--text-primary);
  background-color: var(--background-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--elem-radius);
  resize: vertical;
}

/* — Canlı Tablo Önizleme — */
#tableizer .table-responsive {
  overflow-x: auto;
}

#tableizer #table-container {
  margin-top: var(--gutter);
  border: 1px solid var(--border-primary);
  border-radius: var(--elem-radius);
  box-shadow: var(--shadow-01);
}

#tableizer #table-container table {
  width: 100%;
  border-collapse: collapse;
  font: var(--type-article-p);
}

#tableizer #table-container th,
#tableizer #table-container td {
  border: 1px solid var(--border-secondary);
  padding: 0.5rem;
  text-align: left;
}

#tableizer #table-container th {
  background-color: var(--background-tertiary);
  font: var(--font-body-strong-weight) var(--type-article-p)
    / var(--font-line-normal) var(--font-body);
}

#tableizer #table-container tr:nth-child(even) td {
  background-color: var(--background-secondary);
}

/* — Dışa Aktarma Araçları — */
#tableizer #convert-form ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--gutter);
  padding: 0;
  margin: var(--gutter) 0 0;
}

#tableizer #convert-form ul li {
  margin: 0;
}

#tableizer .bottom-tools {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.5rem;
  font: var(--type-article-p);
  color: var(--accent-primary);
  cursor: pointer;
  transition: color 0.2s, background-color 0.2s;
  border-radius: var(--elem-radius);
}

#tableizer .bottom-tools:hover {
  background-color: var(--accent-primary-engage);
}

/* — Mobil Uyumluluk — */
@media (max-width: 600px) {
#tableizer #convert .convert-line {
    flex-direction: column;
    align-items: stretch;
  }
  #tableizer #convert .convert-line-left {
    margin-bottom: 0.5rem;
  }
  #tableizer #convert-button {
    flex-direction: column;
  }
  #tableizer #convert-button .button {
    width: 100%;
  }
  #tableizer #convert-form ul {
    justify-content: center;
  }
}