/* ============================================================================
   nfm.css — NFM+ tasarım katmanı
   ----------------------------------------------------------------------------
   Amaç: sistemi ilk kez gören biri üç soruyu anında cevaplayabilsin.
       1. Zincirde neredeyim?
       2. Şimdi ne yapmam gerekiyor?
       3. Sonra ne olacak?

   Bu dosya Bootstrap/Tabler'ın YERİNE geçmez, üstüne biner. Kendi bileşenleri
   `nfm-` önekiyle başlar; hiçbir Bootstrap sınıfını ezmez.

   Tek tema: aydınlık. Bu bilinçli bir karar — resmî belge üreten bir sistemde
   ekran, kâğıda benzemeli. Bu yüzden karanlık tema yok, ama her renk açıkça
   yazıldı; hiçbir şey tarayıcı varsayılanına bırakılmadı.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  /* ── Renk ────────────────────────────────────────────────────────────────
     Nötrler yeşile kaçık: rastgele bir gri değil, seçilmiş bir gri.        */
  --nfm-ink:        #14211a;   /* ana metin */
  --nfm-ink-2:      #47574e;   /* ikincil metin */
  --nfm-ink-3:      #78877e;   /* soluk metin, ipuçları */
  --nfm-paper:      #f4f7f3;   /* sayfa zemini */
  --nfm-card:       #ffffff;   /* kart zemini */
  --nfm-sunk:       #eaeee7;   /* girintili alan */
  --nfm-line:       #d5dcd3;   /* çizgi */
  --nfm-line-soft:  #e6ebe3;

  --nfm-brand:      #054a29;   /* NFM yeşili */
  --nfm-brand-2:    #0a6b3d;
  --nfm-brand-soft: #e2ede7;

  /* Yol gösterici vurgu — kil/okra. Marka yeşiliyle çakışmaz,
     "buraya bak" demek için ayrılmıştır.                                   */
  --nfm-accent:     #a2521a;
  --nfm-accent-soft:#f7ece3;

  /* Anlamsal renkler. Vurgu renginden AYRIDIR: durum bildirir, dikkat çekmez. */
  --nfm-go:         #1f7a4d;   --nfm-go-soft:   #e3f1e9;
  --nfm-wait:       #9a6b00;   --nfm-wait-soft: #fbf1db;
  --nfm-stop:       #a32a24;   --nfm-stop-soft: #f9e6e5;
  --nfm-info:       #15607a;   --nfm-info-soft: #e0eef3;

  /* ── Yazı ─────────────────────────────────────────────────────────────── */
  --nfm-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --nfm-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ── Aralık — 4'ün katları, tek ölçek ─────────────────────────────────── */
  --nfm-1: 4px;  --nfm-2: 8px;  --nfm-3: 12px; --nfm-4: 16px;
  --nfm-5: 24px; --nfm-6: 32px; --nfm-7: 48px; --nfm-8: 64px;

  --nfm-r:   8px;   /* standart köşe */
  --nfm-r-s: 4px;
  --nfm-shadow: 0 1px 2px rgba(20,33,26,.05), 0 4px 12px rgba(20,33,26,.05);
}

/* ============================================================================
   1. Temel
   ========================================================================== */
.nfm{
  font-family: var(--nfm-sans);
  color: var(--nfm-ink);
  font-size: 16px;
  line-height: 1.55;
}
.nfm *{ box-sizing: border-box; }
.nfm h1,.nfm h2,.nfm h3,.nfm h4{
  margin:0; font-weight:600; letter-spacing:-.011em; text-wrap:balance;
}
.nfm h1{ font-size:1.75rem; font-weight:700; }
.nfm h2{ font-size:1.3rem; }
.nfm h3{ font-size:1.06rem; }
.nfm p{ margin:0 0 var(--nfm-3); max-width:66ch; }
.nfm p:last-child{ margin-bottom:0; }
.nfm code,.nfm .nfm-mono{ font-family:var(--nfm-mono); font-size:.9em; }

/* Ekrana özel sayfa çerçevesi */
.nfm-page{
  background: var(--nfm-paper);
  min-height: 100%;
  padding: var(--nfm-5) var(--nfm-4) var(--nfm-8);
}
.nfm-container{ max-width: 1180px; margin: 0 auto; }

/* ============================================================================
   2. Zincir — sistemin tamamını tek bakışta anlatan şerit
   ----------------------------------------------------------------------------
   Sistemi anlaşılır kılan tek şey bu: kullanıcı her ekranda zincirin
   neresinde olduğunu görür. Tamamlananlar tik, bulunduğu adım vurgulu,
   gelecekler soluk.
   ========================================================================== */
.nfm-chain{
  background: var(--nfm-card);
  border: 1px solid var(--nfm-line);
  border-radius: var(--nfm-r);
  padding: var(--nfm-4) var(--nfm-4) var(--nfm-3);
  margin-bottom: var(--nfm-5);
  box-shadow: var(--nfm-shadow);
}
.nfm-chain-title{
  font-size:.72rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color: var(--nfm-ink-3); margin-bottom: var(--nfm-3);
}
.nfm-chain-track{
  display:flex; gap:0; overflow-x:auto; padding-bottom:var(--nfm-2);
  scrollbar-width:thin;
}
.nfm-link{
  flex:1 1 0; min-width:96px; position:relative;
  display:flex; flex-direction:column; align-items:center; gap:var(--nfm-2);
  padding:0 var(--nfm-1); text-align:center; text-decoration:none;
  color:var(--nfm-ink-3);
}
/* Bağlantı çizgisi — halkaların arasını birleştirir */
.nfm-link::before{
  content:""; position:absolute; top:17px; left:-50%; width:100%; height:2px;
  background: var(--nfm-line); z-index:0;
}
.nfm-link:first-child::before{ display:none; }
.nfm-link-dot{
  position:relative; z-index:1;
  width:36px; height:36px; border-radius:50%;
  display:grid; place-items:center;
  background: var(--nfm-card); border:2px solid var(--nfm-line);
  font-family:var(--nfm-mono); font-size:.8rem; font-weight:500;
  color: var(--nfm-ink-3);
  flex-shrink:0;
}
.nfm-link-label{
  font-size:.78rem; font-weight:500; line-height:1.3; max-width:11ch;
}
.nfm-link-who{
  font-size:.66rem; color:var(--nfm-ink-3); line-height:1.25;
}

/* Tamamlanmış halka */
.nfm-link.is-done{ color: var(--nfm-ink-2); }
.nfm-link.is-done .nfm-link-dot{
  background: var(--nfm-go); border-color: var(--nfm-go); color:#fff;
}
.nfm-link.is-done::before{ background: var(--nfm-go); }

/* Şu anki halka */
.nfm-link.is-now{ color: var(--nfm-ink); }
.nfm-link.is-now .nfm-link-dot{
  background: var(--nfm-brand); border-color: var(--nfm-brand); color:#fff;
  box-shadow: 0 0 0 4px var(--nfm-brand-soft);
}
.nfm-link.is-now .nfm-link-label{ font-weight:700; }

/* Tıklanabilir halka */
a.nfm-link:hover .nfm-link-dot,
a.nfm-link:focus-visible .nfm-link-dot{ border-color: var(--nfm-brand); }

/* ============================================================================
   3. "Şimdi ne yapmalıyım" kartı
   ----------------------------------------------------------------------------
   Her ekranda EN FAZLA BİR tane. Sayfanın tek birincil eylemi budur.
   ========================================================================== */
.nfm-do{
  background: var(--nfm-card);
  border: 1px solid var(--nfm-line);
  border-left: 4px solid var(--nfm-brand);
  border-radius: var(--nfm-r);
  padding: var(--nfm-5);
  margin-bottom: var(--nfm-5);
  box-shadow: var(--nfm-shadow);
  display:flex; flex-wrap:wrap; gap:var(--nfm-5); align-items:center;
}
.nfm-do-body{ flex:1 1 300px; min-width:0; }
.nfm-do-eyebrow{
  font-size:.72rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color: var(--nfm-accent); margin-bottom: var(--nfm-2);
}
.nfm-do h2{ margin-bottom: var(--nfm-2); }
.nfm-do-why{ color: var(--nfm-ink-2); font-size:.96rem; margin:0; }

/* Yapılacak bir şey yoksa — bekleme hâli */
.nfm-do.is-waiting{ border-left-color: var(--nfm-wait); }
.nfm-do.is-waiting .nfm-do-eyebrow{ color: var(--nfm-wait); }

/* ============================================================================
   4. Düğmeler — ne olacağını söyleyen düğme
   ========================================================================== */
.nfm-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--nfm-2);
  font-family:var(--nfm-sans); font-size:1rem; font-weight:600; line-height:1.2;
  padding: 14px 24px; border-radius: var(--nfm-r-s);
  border:1px solid transparent; cursor:pointer; text-decoration:none;
  transition: background-color .12s ease, border-color .12s ease;
  white-space:nowrap;
}
.nfm-btn-main{ background: var(--nfm-brand); color:#fff; }
.nfm-btn-main:hover{ background: var(--nfm-brand-2); color:#fff; }
.nfm-btn-second{ background: var(--nfm-card); color: var(--nfm-ink); border-color: var(--nfm-line); }
.nfm-btn-second:hover{ border-color: var(--nfm-ink-3); color: var(--nfm-ink); }
.nfm-btn-quiet{ background:transparent; color: var(--nfm-ink-2); padding-inline:8px; }
.nfm-btn-quiet:hover{ color: var(--nfm-brand); }
.nfm-btn-danger{ background: var(--nfm-card); color: var(--nfm-stop); border-color: var(--nfm-stop); }
.nfm-btn-danger:hover{ background: var(--nfm-stop-soft); color: var(--nfm-stop); }
.nfm-btn[disabled],.nfm-btn.is-disabled{ opacity:.45; cursor:not-allowed; }
.nfm-btn-lg{ font-size:1.08rem; padding:17px 30px; }
.nfm-btn-sm{ font-size:.88rem; padding:9px 15px; }

/* ============================================================================
   5. Sayı kartı — her sayının yanında birimi, anlamı ve kaynağı
   ----------------------------------------------------------------------------
   Rakamı tek başına göstermek bilgi vermez. Birim olmadan yanlış okunur,
   açıklama olmadan anlaşılmaz, kaynak olmadan güvenilmez.
   ========================================================================== */
.nfm-facts{
  display:grid; gap:var(--nfm-3);
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  margin-bottom: var(--nfm-5);
}
.nfm-fact{
  background: var(--nfm-card); border:1px solid var(--nfm-line);
  border-radius: var(--nfm-r); padding: var(--nfm-4);
  display:flex; flex-direction:column; gap:var(--nfm-1);
}
.nfm-fact-label{
  font-size:.82rem; font-weight:500; color: var(--nfm-ink-2);
  display:flex; align-items:center; gap:var(--nfm-2);
}
.nfm-fact-value{
  font-size:1.9rem; font-weight:700; line-height:1.1; letter-spacing:-.02em;
  font-variant-numeric: tabular-nums; color: var(--nfm-ink);
}
.nfm-fact-unit{ font-size:.95rem; font-weight:500; color: var(--nfm-ink-2); margin-left:2px; }
.nfm-fact-note{ font-size:.78rem; color: var(--nfm-ink-3); line-height:1.4; }
.nfm-fact.is-good .nfm-fact-value{ color: var(--nfm-go); }
.nfm-fact.is-warn .nfm-fact-value{ color: var(--nfm-wait); }

/* ============================================================================
   6. Durum rozeti — renk TEK başına anlam taşımaz, yanında hep kelime var
   ========================================================================== */
.nfm-pill{
  display:inline-flex; align-items:center; gap:6px;
  font-size:.76rem; font-weight:600; line-height:1;
  padding:5px 10px; border-radius:99px; white-space:nowrap;
  border:1px solid transparent;
}
.nfm-pill::before{ content:""; width:7px; height:7px; border-radius:50%; background:currentColor; }
.nfm-pill-go  { background: var(--nfm-go-soft);   color: var(--nfm-go); }
.nfm-pill-wait{ background: var(--nfm-wait-soft); color: var(--nfm-wait); }
.nfm-pill-stop{ background: var(--nfm-stop-soft); color: var(--nfm-stop); }
.nfm-pill-info{ background: var(--nfm-info-soft); color: var(--nfm-info); }
.nfm-pill-off { background: var(--nfm-sunk);      color: var(--nfm-ink-3); }

/* ============================================================================
   7. Kanıt şeridi — bu kaydın arkasında ne var
   ----------------------------------------------------------------------------
   Denetlenebilirliğin görünür yüzü. Eksik kanıt gizlenmez, kırmızı görünür.
   ========================================================================== */
.nfm-evidence{ display:flex; flex-wrap:wrap; gap:var(--nfm-2); }
.nfm-ev{
  display:inline-flex; align-items:center; gap:6px;
  font-size:.75rem; font-weight:500;
  padding:5px 9px; border-radius: var(--nfm-r-s);
  background: var(--nfm-sunk); color: var(--nfm-ink-3);
  border:1px solid transparent;
}
.nfm-ev.is-present{
  background: var(--nfm-go-soft); color: var(--nfm-go); border-color:rgba(31,122,77,.2);
}
.nfm-ev.is-missing{
  background: var(--nfm-stop-soft); color: var(--nfm-stop); border-color:rgba(163,42,36,.2);
}
.nfm-ev-hash{ font-family: var(--nfm-mono); font-size:.68rem; }

/* ============================================================================
   8. Sade dil kutusu — jargonun karşılığı
   ========================================================================== */
.nfm-plain{
  background: var(--nfm-info-soft);
  border-left:3px solid var(--nfm-info);
  border-radius: 0 var(--nfm-r-s) var(--nfm-r-s) 0;
  padding: var(--nfm-3) var(--nfm-4);
  font-size:.92rem; color: var(--nfm-ink-2);
  margin: var(--nfm-3) 0;
  max-width:66ch;
}
.nfm-plain strong{ color: var(--nfm-ink); font-weight:600; }
.nfm-plain-title{
  display:block; font-weight:600; color: var(--nfm-info);
  font-size:.76rem; letter-spacing:.06em; text-transform:uppercase;
  margin-bottom: var(--nfm-1);
}

/* Uyarı ve engel kutuları */
.nfm-warn{ background:var(--nfm-wait-soft); border-left-color:var(--nfm-wait); }
.nfm-warn .nfm-plain-title{ color:var(--nfm-wait); }
.nfm-block{ background:var(--nfm-stop-soft); border-left-color:var(--nfm-stop); }
.nfm-block .nfm-plain-title{ color:var(--nfm-stop); }

/* ============================================================================
   9. Kart ve bölüm
   ========================================================================== */
.nfm-card{
  background: var(--nfm-card); border:1px solid var(--nfm-line);
  border-radius: var(--nfm-r); box-shadow: var(--nfm-shadow);
  margin-bottom: var(--nfm-5); overflow:hidden;
}
.nfm-card-head{
  padding: var(--nfm-4) var(--nfm-5);
  border-bottom:1px solid var(--nfm-line-soft);
  display:flex; flex-wrap:wrap; gap:var(--nfm-3); align-items:center; justify-content:space-between;
}
.nfm-card-head h3{ margin:0; }
.nfm-card-sub{ font-size:.85rem; color:var(--nfm-ink-3); margin-top:2px; }
.nfm-card-body{ padding: var(--nfm-5); }
.nfm-card-body.is-flush{ padding:0; }

/* ============================================================================
   10. Liste satırı — tablo yerine okunur satırlar
   ========================================================================== */
.nfm-rows{ display:flex; flex-direction:column; }
.nfm-row{
  display:flex; flex-wrap:wrap; gap:var(--nfm-3) var(--nfm-5); align-items:center;
  padding: var(--nfm-4) var(--nfm-5);
  border-bottom:1px solid var(--nfm-line-soft);
}
.nfm-row:last-child{ border-bottom:0; }
.nfm-row-main{ flex:1 1 220px; min-width:0; }
.nfm-row-id{ font-family:var(--nfm-mono); font-size:.86rem; font-weight:500; color:var(--nfm-ink); }
.nfm-row-sub{ font-size:.83rem; color:var(--nfm-ink-3); margin-top:2px; }
.nfm-row-num{ font-variant-numeric:tabular-nums; font-weight:600; white-space:nowrap; }

/* Boş durum — neden boş olduğunu söyler */
.nfm-empty{
  padding: var(--nfm-7) var(--nfm-5); text-align:center; color:var(--nfm-ink-3);
}
.nfm-empty-icon{ font-size:2rem; opacity:.4; display:block; margin-bottom:var(--nfm-3); }
.nfm-empty-title{ font-weight:600; color:var(--nfm-ink-2); margin-bottom:var(--nfm-1); }
.nfm-empty-why{ font-size:.88rem; max-width:52ch; margin:0 auto; }

/* ============================================================================
   11. Erişilebilirlik
   ========================================================================== */
.nfm :focus-visible{ outline:3px solid var(--nfm-accent); outline-offset:2px; border-radius:2px; }
.nfm-skip{
  position:absolute; left:-9999px;
  background:var(--nfm-brand); color:#fff; padding:12px 20px; border-radius:var(--nfm-r-s);
  font-weight:600; z-index:9999;
}
.nfm-skip:focus{ left:var(--nfm-4); top:var(--nfm-4); }
.nfm-sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
@media (prefers-reduced-motion: reduce){
  .nfm *{ animation:none !important; transition:none !important; }
}

/* ============================================================================
   12. Telefon
   ========================================================================== */
@media (max-width: 640px){
  .nfm-page{ padding: var(--nfm-4) var(--nfm-3) var(--nfm-8); }
  .nfm h1{ font-size:1.45rem; }
  .nfm-do{ padding: var(--nfm-4); gap: var(--nfm-4); }
  .nfm-do .nfm-btn{ width:100%; }
  .nfm-card-head,.nfm-card-body,.nfm-row{ padding-inline: var(--nfm-4); }
  .nfm-fact-value{ font-size:1.6rem; }
  .nfm-link{ min-width:84px; }
}

/* Yazdırma — belge üreten bir sistemde ekran çıktısı da düzgün olmalı */
@media print{
  .nfm-page{ background:#fff; padding:0; }
  .nfm-card,.nfm-chain{ box-shadow:none; border-color:#999; break-inside:avoid; }
  .nfm-btn,.nfm-do{ display:none; }
}