:root {
  --zemin: #0d1410;
  --yuzey: #151d18;
  --kenar: #26332b;
  --metin: #eceee9;
  --soluk: #8d9990;
  --sinyal: #b4f000;
  --sinyal-koyu: #0d1410;

  --display: "Archivo Black", "Arial Black", sans-serif;
  --govde: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--zemin);
  color: var(--metin);
  font-family: var(--govde);
  font-size: 16px;
  line-height: 1.55;
}

h1, h2 {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: -0.01em;
  margin: 0;
}

main {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 20px 72px;
}

section { margin-top: 64px; }

/* ---------------------------------------------------------------- üst */

.ust {
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 20px 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.marka {
  font-family: var(--display);
  font-size: 20px;
  letter-spacing: -0.01em;
}

.marka-alt {
  font-size: 13px;
  color: var(--soluk);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ---------------------------------------------------------------- giris */

.giris { margin-top: 56px; }

.giris h1 {
  font-size: 40px;
  line-height: 1.08;
  max-width: 14ch;
}

.giris-metin {
  margin: 20px 0 0;
  max-width: 60ch;
  color: var(--soluk);
}

.kiyas {
  display: flex;
  gap: 12px;
  margin-top: 32px;
}

.kiyas-kutu {
  flex: 1;
  background: var(--yuzey);
  border: 1px solid var(--kenar);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kiyas-kutu--one {
  background: var(--sinyal);
  border-color: var(--sinyal);
}

.kiyas-etiket {
  font-size: 13px;
  color: var(--soluk);
}

.kiyas-kutu--one .kiyas-etiket { color: #3d5200; }

.kiyas-eski,
.kiyas-yeni {
  font-family: var(--display);
  font-size: 32px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.kiyas-eski {
  color: var(--soluk);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}

.kiyas-yeni { color: var(--sinyal-koyu); }

/* ---------------------------------------------------------------- saatler */

.saatler-bolum h2,
.nasil h2,
.saha h2 {
  font-size: 28px;
  margin-bottom: 8px;
}

.guncelleme {
  margin: 0 0 20px;
  font-size: 13px;
  color: var(--soluk);
}

.suzgec {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.cip {
  background: var(--yuzey);
  border: 1px solid var(--kenar);
  border-radius: 8px;
  color: var(--soluk);
  font-family: var(--govde);
  font-size: 14px;
  padding: 8px 14px;
  cursor: pointer;
  transition: color 120ms cubic-bezier(0.22, 1, 0.36, 1);
}

.cip:hover { color: var(--metin); }

.cip--acik {
  background: var(--metin);
  border-color: var(--metin);
  color: var(--zemin);
}

.cip:focus-visible {
  outline: 2px solid var(--sinyal);
  outline-offset: 2px;
}

.liste {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.satir {
  background: var(--yuzey);
  border: 1px solid var(--kenar);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.satir-zaman {
  flex: 1 1 140px;
  min-width: 0;
}

.satir-gun {
  font-family: var(--display);
  font-size: 20px;
  line-height: 1.2;
}

.satir-tarih {
  font-size: 13px;
  color: var(--soluk);
}

.satir-fiyat {
  flex: 0 0 auto;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.satir-eski {
  font-size: 14px;
  color: var(--soluk);
  text-decoration: line-through;
}

.satir-yeni {
  font-family: var(--display);
  font-size: 24px;
  line-height: 1.2;
  color: var(--sinyal);
}

.satir-kisi {
  font-size: 13px;
  color: var(--soluk);
}

.satir .dugme { flex: 1 1 100%; }

.durum {
  color: var(--soluk);
  margin: 0;
}

/* ---------------------------------------------------------------- dugme */

.dugme {
  display: block;
  background: var(--sinyal);
  color: var(--sinyal-koyu);
  font-family: var(--govde);
  font-weight: 600;
  font-size: 16px;
  text-align: center;
  text-decoration: none;
  padding: 13px 20px;
  border-radius: 8px;
  transition: background 120ms cubic-bezier(0.22, 1, 0.36, 1);
}

.dugme:hover { background: #c6ff1f; }

.dugme:focus-visible {
  outline: 2px solid var(--metin);
  outline-offset: 2px;
}

.dugme--genis { margin-top: 20px; }

/* ---------------------------------------------------------------- nasil */

.adimlar {
  margin: 12px 0 0;
  padding-left: 20px;
  max-width: 60ch;
}

.adimlar li { margin-bottom: 8px; }

.nasil-not {
  margin: 24px 0 0;
  max-width: 60ch;
  font-size: 14px;
  color: var(--soluk);
}

/* ---------------------------------------------------------------- saha */

.sahalar {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 12px;
}

.saha-ad {
  font-family: var(--display);
  font-size: 20px;
  margin: 0 0 4px;
}

.saha-adres {
  margin: 0;
  color: var(--soluk);
  max-width: 50ch;
}

.saha-harita {
  display: inline-block;
  margin-top: 6px;
  color: var(--sinyal);
  font-size: 14px;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* ---------------------------------------------------------------- alt */

.alt {
  border-top: 1px solid var(--kenar);
  padding: 24px 20px;
  max-width: 720px;
  margin: 0 auto;
}

.alt p {
  margin: 0;
  font-size: 13px;
  color: var(--soluk);
}

/* ---------------------------------------------------------------- genis ekran */

@media (min-width: 640px) {
  .giris h1 { font-size: 60px; }
  .satir .dugme {
    flex: 0 0 auto;
    min-width: 180px;
  }
}