/* ============================================================================
   imzaly — Tasarım v2: "MATERIAL" (Google Material Design 3 temel paleti)
   Önceki tasarım ("Teknik Tuval") git etiketi `tasarim-v1` ve sunucuda
   /root/imzaly-yedek-oncesi-v2-tasarim.tgz olarak yedekli.
   ----------------------------------------------------------------------------
   SÖZLEŞME: Bu dosyadaki TÜM seçici adları ve değişken adları v1 ile birebir
   aynıdır — HTML/JS değişmeden yeni yüz giyer. Yalnız değerler değişti.

   PALET (M3 temel şeması; birincil = mor #6750A4)
     Açık tema: düğme dolgusu KOYU mor + BEYAZ yazı (v1'in tersi — v1'de açık
     lavanta dolgu + koyu yazı vardı). --on-accent bu yüzden artık BEYAZ.
     Koyu tema: M3 kuralı gereği birincil renk açık lavantaya (#D0BCFF) döner,
     üstündeki yazı koyu erik (#381E72) olur — v1'in koyu teması zaten buydu.
     DURUM RENKLERİ (good/warn/bad/info) v1'den AYNEN taşındı: kontrast üçlüleri
     (renk/soft/line) ölçülüp kanıtlanmıştı; --bad zaten M3 hata rengiyle aynıydı.

   TİPOGRAFİ — Roboto (Google Fonts). Yüklenemezse sistem sans'a düşer, ölçü
   değişmez. Hedef kitle 45-70 yaş: v1'in "hiçbir metin 14px altına inmez" ve
   "dokunma hedefi ≥40px" kuralları AYNEN korunur. Roboto negatif harf aralığı
   sevmez: v1'deki -.022em/-.015em izlemeleri kaldırıldı (0).

   BİÇİM ÖLÇEĞİ (M3): köşe 8 (rozet/kod) · 12 (alanlar/kutular) · 16 (kart)
   · 999 (düğme = hap). Boşluk yine 4px ızgara (--s1..--s9, M3'ün 4dp ızgarası).

   İŞLEVSEL BLOKLAR — v1'den DEĞİŞTİRİLMEDEN taşındı, DOKUNMA:
     .udf-page (A4 ölçüleri sekme duraklarına bağlı) · .notebox span[style*=…]
     hex ezmeleri (doc.html renderNotes bağı) · #ownLink !important ·
     #dropZone --line yeniden tanımı · .ok/.err/.muted kaskad sırası ·
     devre dışı bloğunun ghost'tan SONRA gelmesi.
   ============================================================================ */

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

*{box-sizing:border-box}

:root{
  color-scheme:light;

  /* --- 4px ölçek (M3 4dp ızgarası) --- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s7:32px; --s8:40px; --s9:56px;
  --r-xs:8px; --r-sm:12px; --r:16px;

  /* --- tipografi --- */
  --sans:"Roboto",system-ui,-apple-system,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  --mono:"Roboto Mono",ui-monospace,"Cascadia Mono",Consolas,"SF Mono",Menlo,monospace;

  /* --- nötr katmanlar (M3 yüzeyleri; zemin hafif leylak tonlu) --- */
  --ground:#f4eff9;
  --surface:#ffffff;
  --surface2:#f5f0fa;
  --ink:#1d1b20;
  --ink-soft:#48454e;
  --ink-faint:#6e6a75;
  --line:#dcd6e2;        /* hairline: YAPISAL çizgi (ayraç, satır kutusu) */
  --line-soft:#eae4f0;
  /* --line-strong: ETKİLEŞİMLİ bileşen sınırı (input, ghost). M3 outline.
     WCAG 1.4.11 ≥3:1: #79747e beyaz karta 4.5:1, --surface2 dolguya 4.1:1. */
  --line-strong:#79747e;

  /* --- eylem: M3 birincil MOR --- */
  /* Dolgu → --accent (+beyaz yazı), o dolgu üstü yazı → --on-accent,
     zeminsiz yazı/kenarlık/vurgu → --accent-ink, ton dolgusu → --accent-soft
     (üstündeki yazı --accent-ink'ten de koyusu gerekirse #21005d kullan). */
  --accent:#6750a4;
  --accent-dark:#563d99;
  --accent-soft:#eaddff;
  --accent-ink:#53389e;
  --on-accent:#ffffff;

  /* --- ikincil (ghost) düğme: M3 "outlined" — dolgu yok, mor katman hover'ı --- */
  --ghost-bg:transparent;
  --ghost-bg-h:rgba(103,80,164,.08);

  /* --- devre dışı: opacity DEĞİL, ayrı çift (v1 kuralı, kalıcı durumlar var) --- */
  --disabled-bg:#e4e1e6;
  --disabled-fg:#48454e;
  --disabled-line:#cbc7cf;

  /* --- durum renkleri: v1'den AYNEN (ölçülü kontrast üçlüleri) --- */
  --good:#0d6e3f; --good-soft:#e7f4ec; --good-line:#a6d5bc;
  --warn:#8a5a06; --warn-soft:#fbf0d9; --warn-line:#e0c58a;
  --bad:#b3261e;  --bad-soft:#fbe9e7;  --bad-line:#eeb3ad;
  --info:#1f5c9e; --info-soft:#eaf1f9; --info-line:#b3cce6;

  /* --- yardımcılar --- */
  --focus:#6750a4;
  --golge-1:0 1px 2px rgba(28,22,38,.10),0 1px 3px 1px rgba(28,22,38,.06);
  --golge-2:0 1px 2px rgba(28,22,38,.08),0 2px 10px -2px rgba(28,22,38,.12);
  --kagit:#ffffff;
  --kagit-kenar:rgba(16,20,28,.14);
}

@media (prefers-color-scheme:dark){
  :root{
    color-scheme:dark;
    --ground:#141218;
    --surface:#1d1b20;
    --surface2:#26242b;
    --ink:#e6e0e9;
    --ink-soft:#cac4d0;
    --ink-faint:#a5a0ac;
    --line:#3b3842;
    --line-soft:#2b2930;
    --line-strong:#938f99;

    /* M3 koyu tema: birincil açık lavanta + koyu erik yazı (v1 koyu teması zaten buydu) */
    --accent:#d0bcff;
    --accent-dark:#c2a9fb;
    --accent-soft:#4f378b;
    --accent-ink:#cdbdf6;
    --on-accent:#381e72;

    --ghost-bg:transparent;
    --ghost-bg-h:rgba(208,188,255,.12);

    --disabled-bg:#2e2c33;
    --disabled-fg:#cac4d0;
    --disabled-line:#46434b;

    --good:#5fd39a; --good-soft:#10281d; --good-line:#26543f;
    --warn:#e5b969; --warn-soft:#2a2113; --warn-line:#5a4622;
    --bad:#ff9086;  --bad-soft:#2c1614;  --bad-line:#5e2b26;
    --info:#7fb6f0; --info-soft:#12202f; --info-line:#27435f;

    --focus:#d0bcff;
    --golge-1:0 1px 2px rgba(0,0,0,.5);
    --golge-2:0 1px 2px rgba(0,0,0,.5),0 10px 26px -12px rgba(0,0,0,.75);
    --kagit-kenar:rgba(0,0,0,.6);
  }
}

html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  background:var(--ground);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
/* NOKTA HAVUZU — v1'den geri (kullanıcı isteği 04.08.2026: "belli belirsiz nokta
   havuzu, mouse ile hareket eden"). nokta.js --mx/--my/--nokta-op yazar; çizim
   tamamen burada. İki katman: sabit çok silik ızgara (::before) + imleci izleyen
   maskeli vurgu (::after). Renkler --ink/--accent-ink'ten color-mix ile türetilir,
   koyu temada kendiliğinden uyar. pointer-events:none — tıklamayı asla yutmaz. */
:root{ --mx:50vw; --my:30vh; --nokta-op:0; }
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:radial-gradient(color-mix(in srgb, var(--ink) 9%, transparent) 1px, transparent 1.6px);
  background-size:26px 26px;
}
body::after{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:radial-gradient(color-mix(in srgb, var(--accent-ink) 55%, transparent) 1.2px, transparent 1.9px);
  background-size:26px 26px;
  opacity:var(--nokta-op); transition:opacity .5s;
  -webkit-mask-image:radial-gradient(230px at var(--mx) var(--my), #000 0%, transparent 100%);
  mask-image:radial-gradient(230px at var(--mx) var(--my), #000 0%, transparent 100%);
}
/* içerik noktaların ÜSTÜNDE kalsın (v1 kuralı) */
.wrap{position:relative;z-index:1}
/* hareket hassasiyeti: vurgu katmanı hiç çalışmasın, sabit ızgara kalır */
@media (prefers-reduced-motion:reduce){ body::after{display:none} }
.wrap{position:relative;z-index:1}
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.001ms !important;animation-duration:.001ms !important}
}

/* ---------------------------------------------------------------- yerleşim */
.wrap{max-width:880px;margin:0 auto;padding:var(--s9) var(--s6) 72px}

/* ------------------------------------------------------------- tipografi */
.eyebrow{
  font-family:var(--sans);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent-ink);margin:0 0 var(--s3);font-weight:500;
}
h1{
  font-family:var(--sans);font-size:30px;line-height:1.25;font-weight:500;
  margin:0 0 var(--s2);text-wrap:balance;color:var(--ink);
}
h2{
  font-family:var(--sans);font-size:19px;line-height:1.3;font-weight:500;
  margin:0 0 var(--s4);color:var(--ink);
  display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;
}
p.sub{color:var(--ink-soft);font-size:16px;margin:0 0 var(--s7);max-width:64ch}

/* ------------------------------------------------------------------ kart
   M3 "elevated card": beyaz yüzey + yumuşak gölge, kenarlık YOK, köşe 16. */
.card{
  background:var(--surface);
  border:none;
  border-radius:var(--r);
  padding:var(--s5) var(--s6);
  box-shadow:var(--golge-2);
  margin-bottom:var(--s6);
}

/* ---------------------------------------------------- işlem adımları şeridi
   v1'in chevron'lu şeridi yerine M3 hapları. JS sözleşmesi AYNI:
   adimlar[k].className = 'adim' + ' tamam' | ' etkin'. */
.adimlar{
  display:flex;list-style:none;margin:0 0 var(--s5);padding:0;gap:var(--s2);
  font-size:14.5px;font-weight:500;line-height:1.3;flex-wrap:wrap;
}
.adimlar .adim{
  flex:1;display:flex;align-items:center;justify-content:center;gap:7px;text-align:center;
  min-height:44px;padding:9px var(--s4);
  color:var(--ink-soft);background:var(--surface2);
  border:1px solid var(--line-soft);border-radius:999px;
}
.adimlar .adim .no{font-variant-numeric:tabular-nums;color:var(--ink-faint)}
.adimlar .adim.tamam{background:var(--good-soft);color:var(--good);border-color:var(--good-line)}
.adimlar .adim.tamam .no{color:var(--good)}
.adimlar .adim.tamam .no::after{content:'✓';margin-left:1px}
.adimlar .adim.etkin{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.adimlar .adim.etkin .no{color:var(--on-accent)}
@media (max-width:520px){
  .adimlar{font-size:13.5px;gap:var(--s1)}
  .adimlar .adim{padding:8px var(--s3);gap:4px;min-height:40px}
}

/* ------------------------------------------------------------- form alanları */
label{
  font-size:15px;font-weight:500;color:var(--ink-soft);
  display:block;margin-bottom:var(--s2);
}
input,textarea,select{
  width:100%;font-family:var(--sans);font-size:16px;line-height:1.4;
  min-height:44px;                              /* dokunma hedefi */
  border:1px solid var(--line-strong);
  border-radius:var(--r-sm);
  padding:10px var(--s4);
  background:var(--surface);color:var(--ink);
  transition:border-color .15s ease,box-shadow .15s ease,background-color .15s ease;
}
input::placeholder,textarea::placeholder{color:var(--ink-faint);opacity:1}
input:hover,textarea:hover,select:hover{border-color:var(--ink)}
input:focus,textarea:focus,select:focus{
  background:var(--surface);border-color:var(--accent);
  box-shadow:0 0 0 1px var(--accent);
}
input[readonly]{color:var(--ink-soft);background:var(--surface2);cursor:text}
textarea{min-height:96px;resize:vertical;padding:var(--s3) var(--s4)}
textarea.doc-edit{
  min-height:300px;font-family:var(--mono);font-size:13.5px;line-height:1.6;
  background:var(--surface2);tab-size:4;
}
/* select oku saf CSS ile (dış ikon yok) */
select{
  -webkit-appearance:none;appearance:none;padding-right:var(--s8);cursor:pointer;
  background-image:
    linear-gradient(45deg,transparent 50%,var(--ink-faint) 50%),
    linear-gradient(135deg,var(--ink-faint) 50%,transparent 50%);
  background-position:calc(100% - 21px) calc(50% - 1px),calc(100% - 16px) calc(50% - 1px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}

.row{display:flex;gap:var(--s3);flex-wrap:wrap}
.row>*{flex:1;min-width:180px}
/* 'flex:0 0 auto' verilmiş öğeler (✕ sil, Kopyala…) 180px'e gerilmesin;
   dokunma hedefi 40px altına da inmesin. home.html JS'i de bu deseni yazar. */
.row>*[style*="0 0 auto"]{min-width:40px}

/* ------------------------------------------------------------------ düğmeler
   M3 "filled button": hap biçimi, mor dolgu, beyaz yazı. Yükseklik ≥40px. */
button{
  font-family:var(--sans);font-size:15.5px;font-weight:500;letter-spacing:.01em;
  min-height:40px;display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  color:var(--on-accent);background:var(--accent);
  border:1px solid var(--accent);border-radius:999px;
  padding:8px var(--s6);cursor:pointer;
  box-shadow:none;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease;
}
button:hover{background:var(--accent-dark);border-color:var(--accent-dark);box-shadow:var(--golge-1)}
button:active{box-shadow:none}
/* GHOST = M3 "outlined button": dolgu yok, dış çizgi + mor etiket.
   Kenarlık --line-strong (≥3:1), hover'da mor %8 katman. İkincil eylemlerin
   neredeyse tamamı bu ('Kopyala', 'Vazgeç', '✕', 'Reddet'…). */
button.ghost{
  background:var(--ghost-bg);color:var(--accent-ink);border:1px solid var(--line-strong);
  font-weight:500;box-shadow:none;
}
button.ghost:hover{background:var(--ghost-bg-h);color:var(--accent-ink);border-color:var(--accent-ink);box-shadow:none}
button.small{font-size:14.5px;padding:6px var(--s4);min-height:40px;min-width:40px}
/* DEVRE DIŞI: opacity yok (kalıcı durumlar: 'Bu sürümü imzaladınız' vb.).
   Ghost kurallarından SONRA ve yüksek özgüllükte kalmak ZORUNDA. */
button:disabled,
button:disabled:hover,
button.ghost:disabled,
button.ghost:disabled:hover,
.tabs button:disabled,
.tabs button:disabled:hover{
  background:var(--disabled-bg);
  color:var(--disabled-fg);
  border-color:var(--disabled-line);
  opacity:1;cursor:not-allowed;transform:none;box-shadow:none;
}

/* ------------------------------------------------------------------ sekmeler
   sign.html birincil gezinme. Etkin sekme = mor dolgu (M3 segmented). */
.tabs{display:flex;gap:var(--s2);margin-bottom:var(--s4);flex-wrap:wrap}
.tabs button{
  background:var(--surface2);color:var(--ink-soft);border:1px solid var(--line-strong);
  font-size:14.5px;font-weight:500;padding:6px var(--s5);box-shadow:none;
}
.tabs button:hover{background:var(--ghost-bg-h);color:var(--ink);border-color:var(--ink-faint);box-shadow:none}
.tabs button.active{
  background:var(--accent);color:var(--on-accent);border-color:var(--accent);
}
.tabs button.active:hover{background:var(--accent-dark);border-color:var(--accent-dark)}

/* --------------------------------------------------------------- imzacı satırı */
.sgn{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  padding:var(--s3) var(--s4);
  border:1px solid var(--line-soft);border-radius:var(--r-sm);
  margin-top:var(--s2);background:var(--surface2);
}
.sgn:first-child{margin-top:0}
.sgn .nm{font-weight:500;font-size:15px;color:var(--ink)}
.sgn .meta{font-size:13.5px;color:var(--ink-faint);font-family:var(--mono);line-height:1.5;margin-top:2px}

/* ------------------------------------------------------------------ rozetler
   M3 çipleri: sans, cümle düzeni (v1'deki mono+büyük harf bırakıldı). */
.pill{
  display:inline-block;font-family:var(--sans);font-size:13px;font-weight:500;
  letter-spacing:.01em;line-height:1.5;
  padding:3px var(--s3);border-radius:999px;white-space:nowrap;
  border:1px solid var(--line);background:var(--surface2);color:var(--ink-soft);
}
.pill.wait{background:var(--warn-soft);color:var(--warn);border-color:var(--warn-line)}
.pill.ok{background:var(--good-soft);color:var(--good);border-color:var(--good-line)}
.pill.info{background:var(--info-soft);color:var(--info);border-color:var(--info-line)}
/* doc.html renderVerify() 'pill warn' üretiyor (Doğrulanamadı) */
.pill.warn{background:var(--bad-soft);color:var(--bad);border-color:var(--bad-line)}

/* -------------------------------------------------------------- durum şeridi */
.status-banner{
  display:flex;align-items:center;gap:var(--s3);
  padding:var(--s3) var(--s4);border-radius:var(--r-sm);
  font-size:15px;font-weight:500;margin-bottom:var(--s6);
  border:1px solid var(--line);border-left-width:4px;
  background:var(--surface);color:var(--ink-soft);
}
.status-banner.draft{background:var(--surface);color:var(--ink-soft);border-color:var(--line);border-left-color:var(--ink-faint)}
.status-banner.signing{background:var(--warn-soft);color:var(--warn);border-color:var(--warn-line);border-left-color:var(--warn)}
.status-banner.complete{background:var(--good-soft);color:var(--good);border-color:var(--good-line);border-left-color:var(--good)}

/* --------------------------------------------------------- yönetim / salt görüntüleme */
#ownBox label{margin-bottom:var(--s1)}
#ownBox input{font-family:var(--mono);font-size:14px}
/* doc.html satır-içi 12px yazıyor; bu bağlantı belgeye dönüşün TEK yolu. */
#ownLink{font-size:14px !important}
#roBox{
  border-left:4px solid var(--info);background:var(--info-soft);
  border-radius:var(--r-xs);padding:var(--s3) var(--s4);
}
#roBox label{color:var(--info);margin-bottom:var(--s1)}
#roBox .hint{color:var(--ink-soft);margin-top:0}
code{
  font-family:var(--mono);font-size:.92em;
  background:var(--surface2);border:1px solid var(--line);border-radius:var(--r-xs);
  padding:1px 6px;
}
/* home.html #dropZone satır-içi 'var(--line)' kenarlık kullanıyor; koyu temada
   ayrışsın diye değişken bu öğe için yeniden tanımlanır (JS geri bildirimi
   style.borderColor='var(--accent-ink)'/'var(--line)' ÇALIŞMAYA DEVAM EDER). */
#dropZone{--line:var(--line-strong)}

/* ------------------------------------------------------------------ bağlantı */
a.link{
  color:var(--accent-ink);font-family:var(--sans);font-size:14.5px;word-break:break-all;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;
  text-decoration-color:var(--accent-ink);
}
a.link:hover{color:var(--accent-dark);text-decoration-thickness:2px}

/* --------------------------------------------------------------- mesaj / ipucu
   #msg/.msg: imzacının PIN sonrası gördüğü kritik geri bildirim — sans, 15px. */
#msg,.msg{
  margin-top:var(--s3);font-family:var(--sans);font-size:15px;line-height:1.5;min-height:20px;
}
.hint{font-size:14.5px;line-height:1.55;color:var(--ink-faint);margin-top:var(--s2)}
.divider{height:1px;background:var(--line-soft);margin:var(--s6) 0;border:0}
.notebox{
  font-family:var(--mono);font-size:12.5px;line-height:1.7;color:var(--ink-soft);
  background:var(--surface2);border:1px solid var(--line-soft);border-radius:var(--r-sm);
  padding:var(--s3) var(--s4);margin-top:var(--s2);
  max-height:180px;overflow:auto;scrollbar-width:thin;
}
/* KASKAD UYARISI — .ok/.err/.muted, .hint ve #msg/.msg kurallarından SONRA
   gelmek ZORUNDA (home cikarMsg 'hint err/ok', sign not() 'msg ok/err/muted'). */
.ok{color:var(--good)}
.err{color:var(--bad)}
.muted{color:var(--ink-faint)}

/* -------------------------------------------------- A4 belge kabuğu */
.docwrap{
  max-height:540px;overflow:auto;scrollbar-width:thin;
  background:var(--ground);
  border:1px solid var(--line);border-radius:var(--r-sm);
  padding:var(--s4);
  box-shadow:inset 0 1px 2px rgba(16,20,28,.05);
}
@media (prefers-color-scheme:dark){
  .docwrap{background:#0e0c12;box-shadow:inset 0 1px 2px rgba(0,0,0,.6)}
}
/* --------------------------------------------------------------- A4 SAYFA
   AŞAĞIDAKİ ÖLÇÜLER İŞLEVSELDİR, SÜSLEME DEĞİL — DEĞİŞTİRME (v1'den aynen).
   Gerçek A4: 794px genişlik, 56.7px dolgu, içerik 680px; tab durakları punto
   cinsinden olduğundan 'Times New Roman'/16px/1.45 ZORUNLU. Kenarlık yok:
   1px kenarlık içerik genişliğini 2px daraltıp tab hesabını bozar. Kâğıt her
   iki temada da BEYAZ: belge ekranda basılı hâliyle aynı okunmalı. */
.udf-page{
  background:var(--kagit);color:#12141a;
  font-family:'Times New Roman',Georgia,serif;font-size:16px;line-height:1.45;
  width:794px;padding:56.7px;margin:0 auto;box-sizing:border-box;
  border-radius:2px;
  box-shadow:0 0 0 1px var(--kagit-kenar),0 4px 16px -6px rgba(16,20,28,.28);
}
.udf-page .para{margin:0 0 2px;white-space:pre-wrap}
.udf-page .para.empty{height:1.45em}
.udf-page .tab{display:inline-block;width:2.4em;white-space:normal}
.udf-page .bsl{white-space:break-spaces}
.udf-page .udf-tbl{border-collapse:collapse;width:100%;margin:6px 0}
.udf-page .udf-tbl td{border:1px solid #bbb;padding:4px 7px;vertical-align:top}

/* ------------------------------------------------------------ imza doğrulama */
.vrow{
  display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s3);
  padding:var(--s3) var(--s4);
  border:1px solid var(--line-soft);border-radius:var(--r-sm);
  margin-top:var(--s2);background:var(--surface2);
}
.vcn{font-weight:500;font-size:15px;color:var(--ink)}
.vmeta{font-size:13.5px;line-height:1.6;color:var(--ink-faint);margin-top:2px;font-family:var(--mono);word-break:break-word}
.nes{
  display:inline-block;font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.08em;
  background:var(--good-soft);color:var(--good);border:1px solid var(--good-line);
  border-radius:var(--r-xs);padding:1px 6px;margin-left:var(--s2);vertical-align:1px;
}

/* --------------------------------------------------------- değişiklik talebi */
.cr{
  padding:var(--s3) var(--s4);
  border:1px solid var(--warn-line);border-left:4px solid var(--warn);
  background:var(--warn-soft);border-radius:var(--r-sm);margin-top:var(--s3);
}
.cr .who{font-weight:500;font-size:15px;color:var(--warn)}
.cr .txt{font-size:14px;color:var(--ink-soft);margin:var(--s1) 0 var(--s3);white-space:pre-wrap}
.cr button{margin-right:var(--s2);margin-top:var(--s1)}

/* ------------------------------------------------------------------- odak */
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
input:focus-visible,textarea:focus-visible,select:focus-visible{outline-offset:1px}
::selection{background:var(--accent-soft);color:var(--ink)}

/* ---------------------------------------------- doc.html satır-içi hex ezmeleri
   doc.html renderNotes() sabit hex basar: #1d7a4c (gönderildi) · #9b2c33
   (gönderilemedi) · #9a6a12 (hazır) · #77869e (kayıt). Koyu temada okunmuyor,
   açıkta ikisi AA altı — iki temada da ezilir.
   ⚠ KIRILGAN BAĞ: doc.html'deki hex'ler değişirse bu ezmeler SESSİZCE düşer. */
/* Ayni hex'ler imzaci satirlarinda da (kanalEtiket / renderSigners) kullaniliyor —
   Faz 2'de teslim durumu imzacinin satirina tasininca ezme .sgn'ye de genisletildi. */
.notebox span[style*="#1d7a4c"],.sgn span[style*="#1d7a4c"]{color:var(--good) !important}
.notebox span[style*="#9b2c33"],.sgn span[style*="#9b2c33"]{color:var(--bad) !important}
.notebox span[style*="#9a6a12"],.sgn span[style*="#9a6a12"]{color:var(--warn) !important}
.notebox span[style*="#77869e"],.sgn span[style*="#77869e"]{color:var(--ink-faint) !important}

/* ------------------------------------------------------------------ mobil */
@media (max-width:720px){
  .wrap{padding:var(--s7) var(--s4) var(--s9)}
  h1{font-size:26px}
  h2{font-size:18px}
  .card{padding:var(--s4);border-radius:var(--r);margin-bottom:var(--s4)}
  p.sub{margin-bottom:var(--s6)}
  .docwrap{max-height:440px;padding:var(--s2)}
  .sgn,.vrow{flex-direction:column;align-items:flex-start;gap:var(--s2)}
  .sgn>div[style*="right"],.vrow>*{text-align:left !important}
  .row>*{min-width:100%}
  .tabs{gap:var(--s1)}
  .tabs button{flex:1 1 auto}
}
@media (max-width:400px){
  .wrap{padding:var(--s6) var(--s3) var(--s8)}
  .card{padding:var(--s3)}
  h1{font-size:24px}
}