/* Panel görünümü — sade, açık/koyu temaya uyar. Satır içi stil yok (CSP). */
:root {
  --zemin: #f6f5f1; --kart: #ffffff; --yazi: #1f1e1c; --ikincil: #5f5e5a;
  --cizgi: #d3d1c7; --vurgu: #185fa5; --hata-zemin: #fcebeb; --hata-yazi: #a32d2d;
}
@media (prefers-color-scheme: dark) {
  :root {
    --zemin: #1c1c1b; --kart: #262625; --yazi: #ecebe6; --ikincil: #b4b2a9;
    --cizgi: #444441; --vurgu: #85b7eb; --hata-zemin: #501313; --hata-yazi: #f7c1c1;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--zemin); color: var(--yazi);
       font: 16px/1.6 system-ui, -apple-system, "Segoe UI", sans-serif; }
.sayfa { max-width: 760px; margin: 0 auto; padding: 24px 16px; }
.kart { background: var(--kart); border: 1px solid var(--cizgi); border-radius: 12px;
        padding: 16px 20px; margin-bottom: 12px; }
.giris { max-width: 360px; margin: 10vh auto 0; }
h1 { font-size: 20px; font-weight: 500; margin: 0 0 16px; }
label { display: block; font-size: 14px; color: var(--ikincil); margin: 12px 0 4px; }
input { width: 100%; padding: 8px 10px; font: inherit; color: inherit; background: transparent;
        border: 1px solid var(--cizgi); border-radius: 8px; }
button { margin-top: 16px; padding: 8px 16px; font: inherit; cursor: pointer; color: var(--yazi);
         background: transparent; border: 1px solid var(--cizgi); border-radius: 8px; }
.giris button { width: 100%; }
.hata { background: var(--hata-zemin); color: var(--hata-yazi); padding: 8px 12px;
        border-radius: 8px; font-size: 14px; }
.ust { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.marka { font-weight: 500; }
.satir-ici { display: flex; align-items: center; gap: 8px; }
.satir-ici button { margin: 0; }
.bag { border: none; color: var(--vurgu); padding: 0; }
.ikincil { color: var(--ikincil); font-size: 14px; }

/* ── İşler ve boru hattı (F2-c). Renk her zaman kelimeyle birlikte. ── */
:root { --tamam: #3b6d11; --tamam-z: #eaf3de; --calis: #185fa5; --calis-z: #e6f1fb;
        --hata: #a32d2d; --hata-z: #fcebeb; --gri: #888780; --gri-z: #f1efe8; }
@media (prefers-color-scheme: dark) {
  :root { --tamam: #97c459; --tamam-z: #27500a; --calis: #85b7eb; --calis-z: #0c447c;
          --hata: #f09595; --hata-z: #791f1f; --gri: #b4b2a9; --gri-z: #444441; }
}
h2 { font-size: 16px; font-weight: 500; margin: 0 0 12px; }
.bildirim { background: var(--calis-z); color: var(--calis); padding: 8px 12px; border-radius: 8px; font-size: 14px; }
.yukleme { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.yukleme input { flex: 1; min-width: 200px; }
.yukleme button { margin: 0; }
.is-ust { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.ad { font-weight: 500; word-break: break-all; }
.eylemler { display: flex; gap: 8px; align-items: center; }
.eylemler button, .dugme { margin: 0; padding: 4px 12px; font-size: 14px; border: 1px solid var(--cizgi);
  border-radius: 8px; color: var(--yazi); text-decoration: none; background: transparent; }
.etiket { font-size: 12px; color: var(--ikincil); }
.etiket-hata, .etiket-silindi { color: var(--hata); }
.silinmis .ad { color: var(--ikincil); text-decoration: line-through; }
.hat { list-style: none; display: flex; padding: 0; margin: 14px 0 6px; }
.adim { flex: 1; text-align: center; font-size: 12px; position: relative; min-width: 0; }
.adim::before { content: ""; position: absolute; top: 10px; left: -50%; width: 100%; height: 2px; background: var(--cizgi); z-index: 0; }
.adim:first-child::before { display: none; }
.adim-tamam::before { background: var(--tamam); }
.nokta { display: block; width: 20px; height: 20px; margin: 0 auto 4px; border-radius: 50%;
  border: 2px solid var(--gri); background: var(--gri-z); position: relative; z-index: 1; }
.adim-tamam .nokta { border-color: var(--tamam); background: var(--tamam); }
.adim-calisiyor .nokta { border-color: var(--calis); background: var(--calis-z); animation: nabiz 1.4s ease-in-out infinite; }
.adim-hata .nokta { border-color: var(--hata); background: var(--hata); }
.adim-atlandi .nokta { border-style: dashed; }
.adim-ad { display: block; }
.adim-alt { display: block; color: var(--ikincil); font-size: 11px; overflow-wrap: anywhere; }
.adim-tamam .adim-alt { color: var(--tamam); }
.adim-calisiyor .adim-alt { color: var(--calis); }
.adim-hata .adim-alt { color: var(--hata); }
@keyframes nabiz { 50% { box-shadow: 0 0 0 5px var(--calis-z); } }
@media (prefers-reduced-motion: reduce) { .adim-calisiyor .nokta { animation: none; } }
.gunluk { margin-top: 8px; font-size: 13px; }
.gunluk summary { cursor: pointer; color: var(--ikincil); }
.gunluk ul { margin: 6px 0 0; padding-left: 18px; font-family: ui-monospace, Menlo, monospace; font-size: 12px; }
.saat { color: var(--ikincil); margin-right: 6px; }
.g-tamam { color: var(--tamam); } .g-hata { color: var(--hata); }
@media (max-width: 520px) { .adim-alt { display: none; } .adim { font-size: 10px; } }