/* SSE Plan — © Ozan Eren Kayan
   Saha ekipleri tablette ve telefonda, çoğu zaman dışarıda kullanır: okunaklı yazı, büyük dokunma
   alanları, yüksek kontrast. Tek vurgu öğesi: sıralı adımları birbirine bağlayan kesikli "rota" çizgisi. */

@font-face { font-family: "Atkinson"; font-weight: 400; font-display: swap;
  src: url("/fonts/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "Atkinson"; font-weight: 400; font-display: swap;
  src: url("/fonts/atkinson-hyperlegible-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0; }
@font-face { font-family: "Atkinson"; font-weight: 700; font-display: swap;
  src: url("/fonts/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "Atkinson"; font-weight: 700; font-display: swap;
  src: url("/fonts/atkinson-hyperlegible-latin-ext-700-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0; }

:root {
  --murekkep: #14343b;      /* derin petrol: üst bar, başlıklar */
  --murekkep-2: #21515a;
  --zemin: #f2f5f4;         /* serin kâğıt beyazı */
  --kart: #ffffff;
  --cizgi: #cfd9d7;
  --metin: #18292c;
  --soluk: #5b6e71;
  --isaret: #e8a33d;        /* rota işareti: birincil eylem ve rota çizgisi */
  --isaret-koyu: #9a6516;
  --iyi: #2e7d5b;
  --uyari: #a2620d;
  --kotu: #b3412e;
  --yaricap: 10px;
  --odak: 0 0 0 3px #fff, 0 0 0 6px var(--isaret-koyu);
  --olcek-1: 0.875rem; --olcek-2: 1rem; --olcek-3: 1.25rem; --olcek-4: 1.75rem; --olcek-5: 2.5rem;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  font-family: "Atkinson", system-ui, sans-serif; font-size: 1.0625rem; line-height: 1.5;
  color: var(--metin); background: var(--zemin);
}
main { flex: 1; outline: none; }
h1, h2 { line-height: 1.2; color: var(--murekkep); margin: 0 0 .5rem; }
h1 { font-size: var(--olcek-4); }
h2 { font-size: var(--olcek-3); }
a { color: var(--murekkep-2); }
:focus-visible { outline: none; box-shadow: var(--odak); border-radius: 6px; }
[hidden] { display: none !important; }

/* ---------- üst bar ---------- */
.ust { background: var(--murekkep); color: #fff; position: sticky; top: 0; z-index: 5;
  padding-top: env(safe-area-inset-top); }
.ust-ic { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; gap: 1.5rem;
  padding: .75rem 1rem; flex-wrap: wrap; }
.marka { color: #fff; text-decoration: none; font-weight: 700; font-size: var(--olcek-3); }
.menu { display: flex; gap: .25rem; flex: 1; }
.menu a { color: #d9e6e4; text-decoration: none; padding: .5rem .75rem; border-radius: 8px; }
.menu a[aria-current="page"] { color: #fff; background: var(--murekkep-2); }
.kim { display: flex; align-items: center; gap: .75rem; color: #d9e6e4; font-size: var(--olcek-1); }
.kim .metin-dugme { color: #fff; }

/* ---------- genel ---------- */
.sayfa { max-width: 1100px; margin: 0 auto; padding: 2rem 1rem 3rem; }
.aciklama { max-width: 70ch; color: var(--soluk); margin: 0 0 2rem; }
.soluk { color: var(--soluk); margin: 0; }
.satir { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: center; }
.alt { text-align: center; color: var(--soluk); font-size: var(--olcek-1); padding: 1.5rem 1rem calc(1.5rem + env(safe-area-inset-bottom)); }

.dugme { font: inherit; font-weight: 700; min-height: 48px; padding: .6rem 1.4rem; border-radius: var(--yaricap);
  border: 2px solid var(--murekkep); background: var(--kart); color: var(--murekkep); cursor: pointer; }
.dugme.birincil { background: var(--isaret); border-color: var(--isaret); color: #2a1a03; }
.dugme.birincil:hover:not(:disabled) { background: #f0b252; }
.dugme:disabled { opacity: .45; cursor: not-allowed; }
.dugme[aria-busy="true"] { opacity: .7; cursor: progress; }
.metin-dugme { font: inherit; background: none; border: 0; padding: .5rem .25rem; color: var(--murekkep-2);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: 44px; }
.metin-dugme:disabled { opacity: .45; cursor: not-allowed; }

.form { display: grid; gap: 1rem; }
.alan { display: grid; gap: .35rem; }
.alan-ad { font-weight: 700; }
.alan input { font: inherit; font-size: 1.125rem; min-height: 52px; padding: .6rem .85rem; border-radius: var(--yaricap);
  border: 2px solid var(--cizgi); background: #fff; color: var(--metin); width: 100%; }
.alan input:focus-visible { border-color: var(--murekkep); }
.alan input:disabled { background: #eef2f1; }
.kanal { border: 0; padding: 0; margin: 0; display: flex; gap: .5rem 1.5rem; flex-wrap: wrap; }
.kanal legend { font-weight: 700; margin-bottom: .35rem; padding: 0; }
.secim { display: flex; align-items: center; gap: .5rem; min-height: 44px; cursor: pointer; }
.secim input { width: 22px; height: 22px; accent-color: var(--murekkep); }
.ipucu { margin: 0; color: var(--soluk); font-size: var(--olcek-1); min-height: 1.3em; }
.hata { margin: 1rem 0 0; color: var(--kotu); font-weight: 700; min-height: 1.5em; }

/* ---------- rota: sıralı adımları bağlayan kesikli çizgi ---------- */
.rota { list-style: none; margin: 0; padding: 0; counter-reset: adim; }
.rota-adim { position: relative; padding: 0 0 2rem 3.25rem; counter-increment: adim; }
.rota-adim::before {               /* durak */
  content: counter(adim); position: absolute; left: 0; top: 0; width: 2.25rem; height: 2.25rem;
  border-radius: 50%; display: grid; place-items: center; font-weight: 700;
  background: var(--isaret); color: #2a1a03; border: 3px solid var(--zemin); box-shadow: 0 0 0 2px var(--isaret);
}
.rota-adim:not(:last-child)::after { /* duraklar arası yol */
  content: ""; position: absolute; left: calc(1.125rem - 1.5px); top: 2.5rem; bottom: .25rem;
  border-left: 3px dashed var(--isaret);
}
.rota-adim[aria-disabled="true"]::before { background: var(--zemin); color: var(--soluk); box-shadow: 0 0 0 2px var(--cizgi); }
.rota-adim[aria-disabled="true"]::after { border-left-color: var(--cizgi); }
.rota-adim[data-tamam]::before { content: "✓"; background: var(--iyi); color: #fff; box-shadow: 0 0 0 2px var(--iyi); }
.rota-adim h2 { padding-top: .2rem; }

/* ---------- giriş ---------- */
.giris { min-height: calc(100vh - 4rem); display: grid; place-items: center; padding: 2rem 1rem;
  background: linear-gradient(var(--murekkep) 0 38%, var(--zemin) 38% 100%); }
.giris-kart { width: min(100%, 30rem); background: var(--kart); border-radius: 16px; padding: 2rem 1.5rem 1.5rem;
  box-shadow: 0 18px 40px -24px rgba(20, 52, 59, .55); }
.giris-baslik { font-size: var(--olcek-5); margin: 0; }
.giris-alt { margin: .25rem 0 2rem; color: var(--soluk); }

/* ---------- ana sayfa ---------- */
.kisayollar { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); }
.kisayol { display: block; padding: 1.25rem; background: var(--kart); border: 2px solid var(--cizgi); border-radius: 14px;
  text-decoration: none; color: var(--metin); }
.kisayol:hover { border-color: var(--murekkep); }
.kisayol strong { display: block; color: var(--murekkep); font-size: var(--olcek-3); margin-bottom: .25rem; }
.kisayol span { color: var(--soluk); }
.kisayol.yakinda { border-style: dashed; color: var(--soluk); }

/* ---------- yükleme ---------- */
.dosya-alani { position: relative; display: block; border: 2px dashed var(--murekkep-2); border-radius: 14px;
  background: var(--kart); padding: 1.5rem; cursor: pointer; text-align: center; }
.dosya-alani:focus-within { box-shadow: var(--odak); }
.dosya-alani[data-surukle] { background: #fff7e8; border-color: var(--isaret-koyu); }
.dosya-alani input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.dosya-metin { font-weight: 700; color: var(--murekkep-2); }

.ozet-rakam { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); margin: 0 0 1.5rem; }
.ozet-rakam div { background: var(--kart); border-radius: 12px; padding: .9rem 1rem; border-left: 4px solid var(--murekkep-2); }
.ozet-rakam dt { color: var(--soluk); font-size: var(--olcek-1); }
.ozet-rakam dd { margin: 0; font-size: var(--olcek-4); font-weight: 700; color: var(--murekkep); font-variant-numeric: tabular-nums; }

.grup { background: var(--kart); border-radius: 12px; padding: 1rem 1.1rem; margin-bottom: .75rem; border: 1px solid var(--cizgi); }
.grup.onay { border: 2px solid var(--isaret); background: #fffaf0; }
.grup.dikkat { border-left: 5px solid var(--kotu); }
.grup h3 { margin: 0 0 .5rem; font-size: var(--olcek-2); color: var(--murekkep); }
.grup p { margin: 0 0 .5rem; color: var(--soluk); }
.liste { margin: 0; padding-left: 1.2rem; max-height: 14rem; overflow: auto; }
.liste li { padding: .15rem 0; }
.fazla { color: var(--soluk); font-size: var(--olcek-1); margin-top: .35rem; }
.hata-listesi { color: var(--kotu); }
.onay-kutusu { display: flex; gap: .65rem; align-items: flex-start; font-weight: 700; margin: .75rem 0 0; cursor: pointer; }
.onay-kutusu input { width: 24px; height: 24px; margin: 0; flex: none; accent-color: var(--isaret-koyu); }

.gecmis { margin-top: 1rem; }
.tablo-kutu { overflow-x: auto; background: var(--kart); border-radius: 12px; border: 1px solid var(--cizgi); }
.tablo { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tablo th, .tablo td { text-align: left; padding: .7rem .9rem; border-bottom: 1px solid var(--cizgi); white-space: nowrap; }
.tablo th { color: var(--soluk); font-size: var(--olcek-1); font-weight: 700; }
.tablo .sayi { text-align: right; }
.tablo tr:last-child td { border-bottom: 0; }
.durum { font-weight: 700; }
.durum[data-durum="uygulandi"] { color: var(--iyi); }
.durum[data-durum="iptal"] { color: var(--soluk); }
.durum[data-durum="onizleme"] { color: var(--uyari); }

/* ---------- bildirim ---------- */
.bildirim { position: fixed; left: 50%; bottom: calc(1rem + env(safe-area-inset-bottom)); transform: translate(-50%, 1rem);
  background: var(--murekkep); color: #fff; padding: .85rem 1.25rem; border-radius: 12px; max-width: min(92vw, 34rem);
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 10; font-weight: 700; }
.bildirim[data-goster] { opacity: 1; transform: translate(-50%, 0); }
.bildirim[data-tur="hata"] { background: var(--kotu); }

/* ---------- geniş ekran: yükleme adımları yan yana değil, okunaklı tek sütun kalır;
   tablette ve masaüstünde yalnızca giriş kartı ve boşluklar büyür ---------- */
@media (min-width: 720px) {
  .giris-kart { padding: 2.5rem 2.5rem 2rem; }
  .sayfa { padding-top: 2.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}