/* marshall.metastaz.org taslak 2 · kimlik v2 "Rota" (2026-10-20) · Metastaz Design: kenar 25, kart köşe 17, kart yan 21,
   anahtar #0077F0, gövde 480, başlık 730-750 · 50+ okunurluk: gövde 18/27, açık zemin, yüksek karşıtlık · dış font/CDN yok */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --zemin:#F2F2F7;--kart:#FFFFFF;--yazi:#1C1C1E;--govde:#3A3A3C;--gri:#6E6E73;--cizgi:#E5E5EA;
  --mavi:#0077F0;--mavi-koyu:#0058B8;--bag:#0066CC;--soluk:#B9C6D8;--acik-mavi:#EAF3FF;
  --kenar:25px;--kose:17px;--yan:21px;
}
html{background:var(--zemin);color:var(--yazi);color-scheme:light;
  font-family:"Metastaz Sans",-apple-system,system-ui,"Segoe UI",Roboto,sans-serif;
  font-size:18px;line-height:27px;font-weight:480;-webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;text-wrap:pretty}
body{min-height:100dvh}
a{color:var(--bag);text-underline-offset:3px}
.sayfa{max-width:680px;margin:0 auto;
  padding:calc(env(safe-area-inset-top) + 20px) calc(var(--kenar) + env(safe-area-inset-right)) calc(env(safe-area-inset-bottom) + 36px) calc(var(--kenar) + env(safe-area-inset-left))}

/* üst çubuk: logo + ad */
.ust{display:flex;align-items:center;gap:12px;min-height:56px;margin-bottom:16px}
.logo{display:block;width:44px;height:44px;flex:none}
.ad{font-size:21px;line-height:26px;font-weight:740;letter-spacing:-.01em}

/* kahraman: selam + rota ilerleme motifi */
.kahraman{background:linear-gradient(180deg,var(--kart) 0%,var(--acik-mavi) 100%);border-radius:var(--kose);
  padding:24px var(--yan) 22px;margin-bottom:21px;box-shadow:inset 0 0 0 1px rgba(0,119,240,.14)}
h1{font-size:32px;line-height:39px;font-weight:750;letter-spacing:-.02em}
.kahraman .alt{margin-top:6px;color:var(--govde);font-size:19px;line-height:27px}
.rota{display:block;width:100%;max-width:420px;height:auto;margin:22px auto 10px}
.rota-yazi{color:var(--gri);font-size:16px;line-height:23px;text-align:center}

.kart{background:var(--kart);border-radius:var(--kose);padding:20px var(--yan) 23px;margin-bottom:21px}
.kart h2{font-size:23px;line-height:30px;font-weight:740;letter-spacing:-.01em;margin-bottom:10px}
.kart h3{font-size:21px;line-height:27px;font-weight:730;letter-spacing:-.01em;margin-bottom:10px}
.kart p{color:var(--govde)}
.kart p+p,.kart ul+p{margin-top:12px}
.beyan{box-shadow:inset 4px 0 0 var(--mavi)}

.bolum{font-size:16px;line-height:21px;font-weight:730;color:var(--gri);
  text-transform:uppercase;letter-spacing:.04em;margin:34px 0 10px var(--yan)}

.etiket{display:inline-block;font-size:15px;line-height:20px;font-weight:650;
  padding:4px 12px;border-radius:999px;margin-bottom:12px}
.kart p.etiket-acik{background:#E3F6E8;color:#1B7A37}
.kart p.etiket-yakin{background:#EEF0F4;color:#4A4F57}

.liste{list-style:none;margin-top:12px}
.liste li{position:relative;padding:6px 0 6px 24px;color:var(--govde)}
.liste li::before{content:"";position:absolute;left:3px;top:16px;width:9px;height:9px;border-radius:50%;background:var(--mavi)}

.kucuk{font-size:16px;line-height:23px}
.kart p.kucuk{color:var(--gri)}

/* yapılan işler: her iş rotada bir durak */
.isler{list-style:none;margin-top:10px;position:relative}
.isler li{position:relative;display:grid;grid-template-columns:82px 1fr;gap:12px;padding:12px 0 12px 26px;color:var(--govde)}
.isler li::before{content:"";position:absolute;left:6px;top:0;bottom:0;width:3px;background:var(--mavi)}
.isler li:first-child::before{top:20px}
.isler li:last-child::before{bottom:auto;height:20px}
.durak{position:absolute;left:0;top:13px;width:15px;height:15px;border-radius:50%;background:var(--mavi);box-shadow:0 0 0 3px var(--kart)}
.tarih{color:var(--gri);font-size:16px;font-weight:600;font-variant-numeric:tabular-nums}

.iletisim{text-align:center}
.dugme{display:flex;align-items:center;justify-content:center;min-height:56px;margin:18px 0 14px;
  background:var(--mavi);color:#fff;border-radius:16px;font-size:19px;font-weight:650;text-decoration:none;
  padding:0 16px;overflow-wrap:anywhere}
.dugme:active{background:var(--mavi-koyu)}
.dugme:focus-visible{outline:3px solid var(--mavi-koyu);outline-offset:3px}

.gizli{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.alt-bilgi{text-align:center;color:var(--gri);font-size:16px;line-height:23px;margin-top:31px}
.alt-bilgi a{color:var(--gri)}
.alt-bilgi p+p{margin-top:6px}

@media (max-width:520px){.isler li{grid-template-columns:1fr;gap:2px}}
@media (max-width:370px){h1{font-size:29px;line-height:36px}}
@media (min-width:900px){.sayfa{padding-top:40px}h1{font-size:36px;line-height:43px}}

.kart pre.ornek{white-space:pre-wrap;word-break:break-word;overflow-x:auto;font-size:14px;line-height:20px;background:#F3F4F6;color:#1F2328;border-radius:12px;padding:12px 14px;margin:8px 0 12px}

/* koyu tema [2026-10-22 #1224]: prefers-color-scheme ile kendiliğinden; data-tema=acik|koyu elle seçim (tema.js) */
:root{--halka:#FFFFFF;--kahraman-cizgi:rgba(0,119,240,.14);--etiket-acik-z:#E3F6E8;--etiket-acik-y:#1B7A37;
  --etiket-yakin-z:#EEF0F4;--etiket-yakin-y:#4A4F57;--ornek-z:#F3F4F6;--ornek-y:#1F2328;--sec-z:#E3E3E8;--sec-s:#FFFFFF;--sec-golge:0 1px 3px rgba(0,0,0,.14)}
@media (prefers-color-scheme:dark){html:not([data-tema="acik"]){
  --zemin:#000000;--kart:#1C1C1E;--yazi:#F5F5F7;--govde:#D1D1D6;--gri:#A1A1A6;--cizgi:#38383A;
  --mavi:#0A84FF;--mavi-koyu:#0062CC;--bag:#5EB1FF;--soluk:#4A5568;--acik-mavi:#0B2140;
  --halka:#0D1D33;--kahraman-cizgi:rgba(10,132,255,.32);--etiket-acik-z:#12351E;--etiket-acik-y:#6FE08F;
  --etiket-yakin-z:#2C2C2E;--etiket-yakin-y:#C7C7CC;--ornek-z:#0E0E10;--ornek-y:#E5E5EA;--sec-z:#1C1C1E;--sec-s:#48484A;--sec-golge:none;
  color-scheme:dark}}
html[data-tema="koyu"]{
  --zemin:#000000;--kart:#1C1C1E;--yazi:#F5F5F7;--govde:#D1D1D6;--gri:#A1A1A6;--cizgi:#38383A;
  --mavi:#0A84FF;--mavi-koyu:#0062CC;--bag:#5EB1FF;--soluk:#4A5568;--acik-mavi:#0B2140;
  --halka:#0D1D33;--kahraman-cizgi:rgba(10,132,255,.32);--etiket-acik-z:#12351E;--etiket-acik-y:#6FE08F;
  --etiket-yakin-z:#2C2C2E;--etiket-yakin-y:#C7C7CC;--ornek-z:#0E0E10;--ornek-y:#E5E5EA;--sec-z:#1C1C1E;--sec-s:#48484A;--sec-golge:none;
  color-scheme:dark}
.kahraman{box-shadow:inset 0 0 0 1px var(--kahraman-cizgi)}
.kart p.etiket-acik{background:var(--etiket-acik-z);color:var(--etiket-acik-y)}
.kart p.etiket-yakin{background:var(--etiket-yakin-z);color:var(--etiket-yakin-y)}
.kart pre.ornek{background:var(--ornek-z);color:var(--ornek-y)}
.dugme{background:#0077F0}
.dugme:active{background:#0058B8}
.r-halka{stroke:var(--halka)}
.r-bos{fill:var(--halka);stroke:var(--soluk)}
.r-soluk-c{stroke:var(--soluk)}
.r-soluk-d{fill:var(--soluk)}

/* görünüm seçici (yalnız JS varken görünür) */
.tema-sec{display:none;background:var(--sec-z);border-radius:13px;padding:3px;gap:2px;margin:0 auto 18px}
.js .tema-sec{display:inline-flex}
.tema-baslik{display:none;font-size:15px;line-height:20px;font-weight:600;color:var(--gri)}
.js .tema-baslik{display:block;margin-bottom:8px}
.alt-bilgi p.tema-baslik+.tema-sec{margin-top:0}
.tema-sec button{font:inherit;font-size:16px;line-height:20px;font-weight:600;color:var(--yazi);background:none;border:0;
  border-radius:10px;min-height:44px;min-width:84px;padding:0 14px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.tema-sec button[aria-pressed="true"]{background:var(--sec-s);box-shadow:var(--sec-golge)}
.tema-sec button:focus-visible{outline:3px solid var(--mavi);outline-offset:2px}