/* Tek CSS dosyasi, derleme yok. Renkler light-dark() ile; tema icin
   JavaScript kullanilmiyor, yani satir ici script'e de gerek yok. */

:root {
  color-scheme: light dark;

  --bg: light-dark(#fbfaf8, #14151a);
  --surface: light-dark(#ffffff, #1c1e25);
  --border: light-dark(#e3e0da, #2c2f38);
  --text: light-dark(#1b1c20, #e9eaee);
  --muted: light-dark(#5f6470, #9aa0ad);
  --accent: light-dark(#a3421c, #f0915f);
  --accent-contrast: light-dark(#ffffff, #14151a);
  --focus: light-dark(#a3421c, #f0915f);

  --wrap: 46rem;
  --radius: 10px;
  --radius-pill: 999px;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;

  /* Buyuk sayi kendi kademesinde. Kademe tahminle degil olcumle secildi:
     sistem yiginda "104.418.554" (8 rakam + 3 nokta) 11 karakterde
     karakter basina 0,541em yer kapliyor, yani 5,95em. 360 px ekranda
     kullanilabilir genislik 328 px oldugundan yazi boyu 55 px'i gecemez.
     Onceki clamp orada 60,8 px veriyordu ve sayi 362 px'e tasip sayfaya
     yatay kaydirma ekliyordu; olculdu ve duzeltildi. */
  --fs-number: clamp(2.25rem, 2rem + 4.5vw, 5.5rem);
  --fs-stat: clamp(2rem, 1.75rem + 3.6vw, 4.5rem);

  /* Iskelet ve avatar dolgusu: zeminle yuzey arasinda tek ara ton. */
  --fill: light-dark(#f3efe9, #22242c);
}

/* Tema dugmesi sistem tercihini ezmek istediginde. Renkler yine
   light-dark() ile geldigi icin tek satir yetiyor. */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 1rem/1.65 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-synthesis-weight: none;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--space);
}

a { color: var(--accent); }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
}
.skip-link:focus {
  position: static;
  display: inline-block;
  margin: 0.5rem;
}

.site-header {
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space);
  padding-block: 0.75rem;
}

.brand {
  font-weight: 650;
  text-decoration: none;
  color: var(--text);
  letter-spacing: -0.01em;
}

/* Tema dugmesiyle ayni kutu: ikisi yan yana duruyor ve farkli
   yukseklikte olmalari basligi egri gosteriyordu (BULGULAR #48).
   Genislik kisa kodu (EN/TR) rahat alacak kadar. */
.lang-switch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 30px;
  padding: 0 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-decoration: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--muted);
}
.lang-switch:hover,
.lang-switch:focus-visible { color: var(--accent); border-color: var(--accent); }

main { padding-block: 2rem 3rem; }

h1 {
  font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.25rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0 0 0.5rem;
}

h2 {
  font-size: 1.1rem;
  letter-spacing: -0.01em;
  margin: 2rem 0 0.5rem;
}

.lede {
  color: var(--muted);
  margin: 0 0 1.5rem;
}

.muted { color: var(--muted); }

.tool-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
  /* Dar ekranda tek kolon, genis ekranda iki. 736 px'lik icerik
     sutununda 16rem'lik en az genislik tam iki kolon veriyor; 360 px'te
     tek kolona duser. Kirilma noktasi elle degil icerikten cikiyor. */
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
}
.tool-list a {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 0.9rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
}
.tool-list a:hover,
.tool-list a:focus-visible { border-color: var(--accent); }
.tool-list svg { flex: none; margin-top: 0.2rem; color: var(--accent); }
.tool-name { display: block; font-weight: 550; }
.tool-note { display: block; font-size: 0.8125rem; color: var(--muted); line-height: 1.45; }

/* Grup basligi: kucuk, harf araligi acik, gozu cekmeyen. */
.group-label {
  font-size: 0.8125rem;
  font-weight: 550;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.65rem;
}
.group + .group { margin-top: 1.75rem; }

/* Arama: JS kapaliyken gizlenir, liste tam kalir. */
.search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.6rem 0.8rem;
  margin-bottom: 1.5rem;
}
.search:focus-within { border-color: var(--accent); }
.search svg { flex: none; color: var(--muted); }
.search input {
  flex: 1;
  min-width: 0;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
}
.search input:focus { outline: none; }
.search[hidden] { display: none; }
.no-result { color: var(--muted); margin: 0; }

/* Ust cubuk dugmeleri: gorunur alan 30 px, dokunma hedefi 44 px. */
.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  cursor: pointer;
  position: relative;
}
.icon-button::after {
  content: "";
  position: absolute;
  inset: -7px;
}
.icon-button:hover { color: var(--accent); border-color: var(--accent); }
.icon-button[hidden] { display: none; }

.field-label {
  display: block;
  font-weight: 550;
  margin-bottom: 0.4rem;
}

textarea {
  width: 100%;
  padding: 0.9rem;
  background: var(--surface);
  color: inherit;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font: inherit;
  line-height: 1.6;
  resize: vertical;
}

.tool-actions {
  margin-top: 0.75rem;
}

.button {
  display: inline-block;
  padding: 0.5rem 1rem;
  font: inherit;
  font-weight: 550;
  color: var(--accent);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
}
.button:hover { border-color: var(--accent); }

.stats {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
}

.stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.9rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.stat output {
  font-size: 1.6rem;
  font-weight: 620;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

/* Sayac sayfasinin ana sayisi buyuk gosterilir. */
.stat-primary {
  grid-column: 1 / -1;
  align-items: center;
  text-align: center;
  padding-block: 1.5rem;
}
.stat-primary output {
  font-size: var(--fs-stat);
}

.stat-label {
  font-size: 0.85rem;
  color: var(--muted);
}

.notice {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 0.7rem 0.85rem;
  margin-bottom: 1.5rem;
}
.notice p { margin: 0.35rem 0 0; color: var(--muted); font-size: 0.9rem; }
.notice svg { flex: none; margin-top: 0.2rem; }

/* Kesikli kenarlik "bu kutu bir olcum degil, bir durum" demek. */
.notice-state { border-style: dashed; }

.note {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}
.note h2 { margin-top: 0; }
.note p { color: var(--muted); margin: 0; }

.site-footer {
  border-top: 1px solid var(--border);
  padding-block: 1.25rem;
  font-size: 0.9rem;
}
.site-footer p { margin: 0; }

/* --- Blok 4: tarayici araclari --- */

.tool-centered {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
}

.big-number {
  display: block;
  font-size: var(--fs-number);
  font-weight: 650;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
}

.button-lg {
  font-size: 1.35rem;
  padding: 0.6rem 1.4rem;
  min-width: 5rem;
  font-variant-numeric: tabular-nums;
}

.button-accent {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
}
.button-accent:hover { filter: brightness(1.06); }
.button:disabled { opacity: 0.5; cursor: not-allowed; }

.field-inline {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.field-inline .field-label { margin: 0; }

.field-block { margin-top: 1rem; }
.field-block:first-child { margin-top: 0; }

.field-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  margin-top: 1.5rem;
}
.field-grid .field-block { margin-top: 0; }

input[type="number"],
input[type="date"],
input[type="datetime-local"] {
  padding: 0.55rem 0.7rem;
  background: var(--surface);
  color: inherit;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font: inherit;
  max-width: 100%;
}
input[type="number"] { width: 7rem; }

.mode-switch {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  margin: 0 0 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.mode-switch legend { padding-inline: 0.35rem; }
.mode-switch label { display: flex; align-items: center; gap: 0.4rem; }

.hint { color: var(--muted); font-size: 0.9rem; margin: 0.35rem 0 0; }

.message {
  min-height: 1.5rem;
  margin: 0.75rem 0 0;
  color: var(--accent);
  font-size: 0.95rem;
}

.clock {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
  grid-template-columns: repeat(4, 1fr);
}

.clock-part {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.9rem 0.4rem;
  text-align: center;
}
.clock-part output {
  display: block;
  font-size: clamp(1.6rem, 1rem + 4vw, 2.75rem);
  font-weight: 640;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}

.phase {
  margin: 0;
  font-weight: 550;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8rem;
}
.phase[data-current="work"] { color: var(--accent); }

.limits { margin-top: 2rem; }
.limit-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.4rem;
}
.limit-list li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0.9rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.limit-list li.is-over { border-color: var(--accent); }
.limit-value { font-variant-numeric: tabular-nums; color: var(--muted); }
.limit-list li.is-over .limit-value { color: var(--accent); font-weight: 600; }

.celebrate {
  font-size: 1.4rem;
  font-weight: 650;
  color: var(--accent);
  margin: 0;
}

.confetti {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}

/* Ust cubugun sag tarafi ve alt bilgi baglantilari. */
.header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 0.6rem;
}

/* Gorsel olarak gizli ama ekran okuyucuya acik. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Gizlenen liste ogesi ve grubu. */
.tool-list li[hidden],
.group[hidden] { display: none; }

/* --- Blok 6: sosyal sayac sonucu --- */

.social-form {
  display: flex;
  gap: 0.6rem;
  align-items: stretch;
  margin-bottom: 1.75rem;
}
.social-form .search { flex: 1; margin-bottom: 0; }
.social-form .button { white-space: nowrap; }

/* Sonuc karti. Dolu kenarlik olcum, kesikli kenarlik durum demek. */
.result {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.75rem 1.25rem;
  text-align: center;
}
.result-state { border-style: dashed; }
.result-icon { color: var(--muted); margin-bottom: 0.6rem; }

.result-number {
  margin: 0;
  font-size: var(--fs-stat);
  font-weight: 650;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
/* Olculmus sifir: rakam soluk, ama kart dolu kenarlikta kalir. */
.result-number.is-zero { color: var(--muted); }
.result-approx {
  font-size: 0.45em;
  color: var(--muted);
  vertical-align: 0.35em;
  margin-right: 0.15em;
}

.result-unit { margin: 0.4rem 0 0; color: var(--muted); }
.result-title { margin: 0; font-size: 1.2rem; font-weight: 550; letter-spacing: -0.01em; }
.result-body { margin: 0.5rem auto 0; max-width: 42ch; color: var(--muted); font-size: 0.95rem; }
.result .notice { margin: 1rem 0 0; text-align: left; }

.result-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  border-top: 1px solid var(--border);
  margin-top: 1.5rem;
  padding-top: 1rem;
  text-align: left;
}
.avatar {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  background: var(--fill);
  border: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  color: var(--muted);
}
/* Anasayfada kapali sayacin isareti. Kucuk ve sessiz: bilgi versin,
   listedeki dengeyi bozmasin. */
.tool-off {
  display: inline-block;
  margin-left: 0.4em;
  padding: 0.05rem 0.4rem;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  vertical-align: 1px;
}
li:has(.tool-off) .tool-name { color: var(--muted); }

.result-name { display: block; font-weight: 550; line-height: 1.35; }
.result-note { display: block; font-size: 0.8125rem; color: var(--muted); line-height: 1.35; }

/* Fotograf harfin ustune oturur: proxy cevap veremezse alttaki harf
   gorunur ve yedek icin script gerekmez. */
.avatar { position: relative; overflow: hidden; }
.avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.result-name .badge-verified,
.result-name .badge-private {
  vertical-align: -2px;
  margin-left: 0.2em;
}
.result-name .badge-verified { color: var(--accent); }
.result-name .badge-private { color: var(--muted); }

/* Ikincil sayilar: kahraman sayiyi bastirmasin diye kucuk ve sessiz.
   Saglayici basina dolu sutun sayisi degistigi icin auto-fit; tek deger
   kalsa da satir ortali durur. */
.result-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(5.5rem, auto));
  justify-content: center;
  gap: 0.35rem 1.5rem;
  margin: 0.9rem 0 0;
  padding-top: 0.9rem;
  border-top: 1px solid var(--border);
}
.result-stats div { text-align: center; }
.result-stats dt {
  font-size: 0.75rem;
  color: var(--muted);
  letter-spacing: 0.01em;
}
.result-stats dd {
  margin: 0.1rem 0 0;
  font-size: 1rem;
  font-weight: 550;
  font-variant-numeric: tabular-nums;
}

.share {
  margin: 0.9rem 0 0;
  font-size: 0.875rem;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.share code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* --- Hesaplayicilar ve metin araclari --- */

/* Yan yana alan ciftleri; dar ekranda alt alta duser. */
.inline-fields {
  display: grid;
  grid-template-columns: auto minmax(6rem, 1fr);
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-bottom: 0.75rem;
}
.inline-fields .field-label { margin: 0; }

.tool-question {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 0.75rem;
}

.result-line {
  margin: 0;
  padding-top: 0.6rem;
  border-top: 1px solid var(--border);
  font-size: var(--fs-stat);
  font-weight: 600;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

/* Secim kumeleri: radyo dugmeleri etiketleriyle birlikte tiklanabilir
   birer parca olsun diye label icinde. */
.choice-group {
  border: 0;
  padding: 0;
  margin: 0 0 0.9rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}
.choice-group .field-label {
  flex-basis: 100%;
  margin: 0 0 0.15rem;
}
.choice {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  cursor: pointer;
  font-size: 0.9375rem;
}
.choice:hover { border-color: var(--accent); }
.choice:has(input:checked) {
  border-color: var(--accent);
  color: var(--accent);
}
.choice input { accent-color: var(--accent); }
.choice-custom { max-width: 7rem; }

/* --- Blok 7: iletisim ve yasal sayfalar --- */

.stack {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.stack .field-block { margin-top: 0; }

input[type="text"],
input[type="email"] {
  width: 100%;
  padding: 0.65rem 0.8rem;
  background: var(--surface);
  color: inherit;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font: inherit;
}
input[aria-invalid="true"],
textarea[aria-invalid="true"] { border-color: var(--accent); }

.field-error {
  margin: 0.4rem 0 0;
  font-size: 0.875rem;
  color: var(--accent);
}

.captcha-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.captcha-image {
  flex: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #ffffff;
}
.captcha-row input { flex: 1; min-width: 8rem; }

/* Uzun metin: olcu satir uzunlugu, baslik araliklari. */
.prose { max-width: 66ch; }
.prose h2 { margin: 2rem 0 0.5rem; font-size: 1.15rem; }
.prose p { margin: 0 0 0.9rem; }
.prose ul { margin: 0 0 0.9rem; padding-left: 1.25rem; }
.prose li { margin-bottom: 0.35rem; }
.prose .updated { font-size: 0.875rem; margin: 0 0 1rem; }
.prose .lede { margin-bottom: 1.5rem; }