/* ============================================================================
   imzala.net — Tasarım v4 "SESSİZ CUPERTINO" (18.09.2026) — v3'ün üstüne
   ----------------------------------------------------------------------------
   Kullanıcı: "Apple şıklığı mümkün mü?" → estetik denetim (5 göz, 32 bulgu).
   v3 git etiketi `tasarim-material-v3`; bu dosyanın v3 hâli /tmp'de değil,
   o etikette. SÖZLEŞME AYNEN: hiçbir seçici/değişken adı düşmedi.
   v3 → v4'te DEĞİŞEN (yalnız jeton ve bileşen kuralları, HTML sözleşmesi aynı):
     · Yazı: sistem yığını başa (-apple-system / SF Pro / Segoe UI Variable /
       Inter); Roboto Flex artık yüklenmiyor (Google Fonts isteği yalnız Mono).
     · Zemin nötr (#f5f5f7), kart BEYAZ + hairline + çok hafif gölge; pembemsi
       leylak zemin ve tonal kart gitti. Koyu tema sistem grileri (#1c1c1e).
     · Mor KALDI, doygunluğu düştü (#6750a4 → #5e4b9c) ve kullanımı azaldı:
       çip/rozet zemini artık gri, mor yalnız eylem ve seçili durumda.
     · Yarıçap ailesi tek: kontrol 10, düğme 12, kart 16, panel 20 (24/28 gitti).
     · h1 34/700 sıkı takipli, h2 22/600; büyük harfli etiket yok (cümle düzeni).
     · Giriş kutuları gri dolgu + hairline (iOS metin alanı); odak tek halka.
     · Düğme hover'da gölge YOK (ton koyulaşır), basışta hafif kararma.
     · Üst çubuk yapışkan ve yarı saydam (backdrop-filter).
     · Nokta havuzu (04.08 isteği) KAPATILDI — geri açmak için aşağıdaki
       "NOKTA HAVUZU KAPALI" bloğunu sil.
     · Emoji ikonlar (kabuk.js) Material Symbols'a döndü; ikon alt kümesi 51'e
       çıktı (fonts/material-symbols-kirpik.woff2 yeniden üretildi).
   ============================================================================
   imzala.net — Tasarım v3: "MATERIAL 3" (üst bar + ikonlar + elle tema seçimi)
   Önceki iki tasarım da kayıtlı: v1 git etiketi `tasarim-v1`, v2 (bu dosyanın
   09.08.2026 öncesi hâli) git etiketi `tasarim-material-oncesi`. Ayrıca sitenin
   yenileme öncesi TAM kopyası web-eski/ klasöründe duruyor ve /tasarim/eski
   adresiyle canlıda açılabiliyor — geri dönüş yolu kesilmedi.
   ----------------------------------------------------------------------------
   SÖZLEŞME (v1'den beri): Bu dosyadaki TÜM seçici adları ve değişken adları
   korunur — HTML/JS değişmeden yeni yüz giyer. Sayfaların satır içi stilleri
   400'den fazla yerde var(--…) çağırıyor; bir değişken adı düşerse görünüm
   SESSİZCE bozulur. Yeni ad EKLENİR, eski ad SİLİNMEZ.

   v2 → v3'te DEĞİŞEN
     · Yazı tipi Roboto → Roboto Flex; ikonlar için Material Symbols eklendi.
     · Yüzey düzeni M3 kap katmanlarına geçti: sayfa neredeyse beyaz (--ground),
       kart hafif leylak (--surface), kartın İÇİ tekrar beyaz (--surface2).
       v2'de tam tersiydi (leylak sayfa, beyaz kart).
     · Kartlarda gölge yok — M3 "tonal yükselti". Köşe 16 → 24 (--r-lg).
     · Koyu tema artık ELLE de seçilebiliyor: <html data-theme="dark|light">.
       Seçim yoksa sistem tercihi geçerli (eski davranış aynen sürüyor).
     · Üst bar, altbilgi, çip/rozet/durum, stepper, seçilebilir kart gibi yeni
       bileşen sınıfları eklendi. Hiçbiri mevcut sayfalardaki bir adla çakışmıyor
       (09.08.2026'da 22 ad tek tek tarandı).

   TİPOGRAFİ — hedef kitle 45-70 yaş: v1'den gelen "hiçbir metin 14px altına
   inmez" ve "dokunma hedefi ≥40px" kuralları AYNEN geçerli.

   İKON DAYANIKLILIĞI: Material Symbols bir CDN yazı tipidir. Yüklenemezse
   ikonun yerinde adı yazar ("approval" gibi). Bu yüzden ANLAM TAŞIYAN hiçbir
   ikon yalnız bırakılmaz — yanında metin etiketi olur; yalnız-ikon düğmelerde
   aria-label/title zorunludur.

   İŞ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.
   ============================================================================ */

/* v4: yazı tipi SİSTEMİN kendisi (--sans yığını); yalnız eş aralıklı font dışarıdan. */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500&display=swap');
/* İKONLAR ARTIK YEREL (16.08.2026): Google'dan gelen ikon fontu reklam engelleyici /
   kısıtlı kurum ağında bloklanınca ekran "approval, check, edit" gibi ham adlarla
   doluyordu (saha testinde birebir görüldü). Kullanılan 40 ikonla kırpılmış alt küme
   (~32 KB) /fonts/ altında; ikonlar için üçüncü tarafa istek kalmadı. Yazı fontu
   (Roboto) üçüncü tarafta kalabilir — o yüklenmezse sistem fontu devreye girer, zarar yok.
   YENİ İKON EKLERKEN: /fonts/material-symbols-kirpik.woff2 alt kümesinde o ikon YOKTUR;
   css2?...&icon_names=<alfabetik,virgüllü,eskiler+yenisi> adresinden yeni woff2 indirilip
   bu dosya değiştirilmeli — yoksa yeni ikon her ortamda ham ad olarak görünür. */
@font-face{
  font-family:'Material Symbols Outlined';
  font-style:normal;
  font-weight:100 700;
  font-display:block;
  src:url('/fonts/material-symbols-kirpik.woff2') format('woff2');
}

*{box-sizing:border-box}

/* ============================================================================
   RENK BELİRTEÇLERİ
   Koyu tema iki yerde tanımlı: (1) sistem tercihi, (2) elle seçim. CSS'te tek
   bir bloğu iki koşula bağlamanın yolu yok; ikisi de aynı değerleri taşır.
   BİRİNİ DEĞİŞTİREN DİĞERİNİ DE DEĞİŞTİRMELİ.
   ========================================================================= */
: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;
  /* v4 yarıçap ailesi: kontrol 10 · düğme 12 · kart 16 · panel 20 (iç köşe = dış köşe − dolgu) */
  --r-xs:8px; --r-sm:10px; --r:12px; --r-lg:16px; --r-xl:20px;

  /* --- tipografi: sistemin kendi yazısı (SF Pro / Segoe UI Variable / Inter) --- */
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI Variable Text","Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:"Roboto Mono",ui-monospace,"Cascadia Mono",Consolas,"SF Mono",Menlo,monospace;

  /* --- yüzeyler (v4: Apple sistem grileri) ---
     --ground  sayfa zemini (systemGroupedBackground)
     --surface KART yüzeyi  (beyaz; hairline + hafif gölgeyle ayrılır)
     --surface2 kartın İÇİ, satır/kutu (beyaz)
     --surface3 gri dolgu: giriş kutusu, çip rayı, salt-okunur alan (tertiary fill) */
  --ground:#f5f5f7;
  --surface:#ffffff;
  --surface2:#ffffff;
  --surface3:#eeeef2;
  --ink:#1d1d1f;
  --ink-soft:#515154;
  --ink-faint:#6e6e73;   /* beyaz üstünde 5,0:1 — AA */
  --line:#d2d2d7;        /* hairline: YAPISAL çizgi (ayraç, satır kutusu) */
  --line-soft:#e8e8ed;
  /* --line-strong: ETKİLEŞİMLİ bileşen sınırı (input hover, seçilebilir kart).
     WCAG 1.4.11 ≥3:1: #8e8e93 beyaz üstünde 3,0:1. */
  --line-strong:#8e8e93;

  /* --- eylem: marka MORU (doygunluk düşürüldü, kullanım azaldı) --- */
  --accent:#5e4b9c;
  --accent-dark:#4d3c84;
  --accent-soft:#ebe6f7;
  --accent-ink:#4a3a85;
  --on-accent:#ffffff;
  /* mor kabın üstündeki en koyu yazı */
  --on-accent-soft:#2b1d5c;
  /* ikincil kap: çip ve tonal düğme — v4'te GRİ (mor yalnız eylem/seçili durum) */
  --accent2-soft:#eeeef2;
  --on-accent2-soft:#1d1d1f;

  /* --- ikincil (ghost) düğme: v4 gri dolgu (Apple "secondary") --- */
  --ghost-bg:#eeeef2;
  --ghost-bg-h:#e3e3e8;

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

  /* --- 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:#5e4b9c;
  --golge-1:0 1px 2px rgba(0,0,0,.05),0 1px 1px rgba(0,0,0,.03);
  --golge-2:0 1px 2px rgba(0,0,0,.05),0 8px 24px -8px rgba(0,0,0,.14);
  --kagit:#ffffff;
  --kagit-kenar:rgba(0,0,0,.10);
  /* duzenle.html:10 body{background:var(--bg)} yazıyor; v2'de bu ad hiç
     tanımlı değildi, bildirim geçersiz kalıp gövde zemini boş kalıyordu. */
  --bg:var(--ground);
}

/* --- KOYU TEMA (1/2): sistem tercihi. Kullanıcı ELLE açık seçtiyse uygulanmaz. --- */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --ground:#111113;
    --surface:#1c1c1e;
    --surface2:#1c1c1e;
    --surface3:#2c2c2e;
    --ink:#f5f5f7;
    --ink-soft:#c7c7cc;
    --ink-faint:#98989d;
    --line:#3a3a3c;
    --line-soft:#2a2a2d;
    --line-strong:#6e6e73;

    --accent:#b9a7ea;
    --accent-dark:#a994e2;
    --accent-soft:#3a2f63;
    --accent-ink:#cdbff3;
    --on-accent:#1a1235;
    --on-accent-soft:#e6ddfb;
    --accent2-soft:#2c2c2e;
    --on-accent2-soft:#f5f5f7;

    --ghost-bg:#2c2c2e;
    --ghost-bg-h:#3a3a3c;

    --disabled-bg:#2c2c2e;
    --disabled-fg:#98989d;
    --disabled-line:#3a3a3c;

    --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:#b9a7ea;
    --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);
  }
}

/* --- KOYU TEMA (2/2): elle seçim. Sistem açık olsa da kazanır. --- */
:root[data-theme="dark"]{
  color-scheme:dark;
  --ground:#111113;
  --surface:#1c1c1e;
  --surface2:#1c1c1e;
  --surface3:#2c2c2e;
  --ink:#f5f5f7;
  --ink-soft:#c7c7cc;
  --ink-faint:#98989d;
  --line:#3a3a3c;
  --line-soft:#2a2a2d;
  --line-strong:#6e6e73;

  --accent:#b9a7ea;
  --accent-dark:#a994e2;
  --accent-soft:#3a2f63;
  --accent-ink:#cdbff3;
  --on-accent:#1a1235;
  --on-accent-soft:#e6ddfb;
  --accent2-soft:#2c2c2e;
  --on-accent2-soft:#f5f5f7;

  --ghost-bg:#2c2c2e;
  --ghost-bg-h:#3a3a3c;

  --disabled-bg:#2c2c2e;
  --disabled-fg:#98989d;
  --disabled-line:#3a3a3c;

  --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:#b9a7ea;
  --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;
  transition:background-color .2s ease,color .2s ease;
  /* Uzun bölünemez diziler (alan adı, e-posta, token) dar ekranda satırı taşırıp
     tüm sayfayı yana kaydırıyordu — gizlilik metnindeki alan adı 375px'te 19px
     taşırıyordu. Yalnız taşacağı zaman böler; normal metne dokunmaz. */
  overflow-wrap:break-word;
}
/* Belge yüzeyleri hariç: A4 çıktısı ekranda basılı hâliyle aynı olmalı. */
.udf-page,.kagit{overflow-wrap:normal}

/* ------------------------------------------------------------------ ikonlar
   Material Symbols. font-size ikonun boyudur; hizalama için vertical-align.
   ANLAM TAŞIYAN ikon yalnız bırakılmaz (bkz. başlıktaki dayanıklılık notu). */
.material-symbols-outlined{
  font-family:'Material Symbols Outlined';
  font-weight:normal;font-style:normal;line-height:1;letter-spacing:normal;
  text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;
  direction:ltr;-webkit-font-feature-settings:'liga';font-feature-settings:'liga';
  -webkit-font-smoothing:antialiased;
  font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;
  user-select:none;vertical-align:middle;
}

/* NOKTA HAVUZU — v1'den beri (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). 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%);
}

/* 19.08.2026 — kullanıcı: "mouse yazının üstüne gelince noktalar yazı ile
   karışıyor; noktalar gene dursun da yazının altındaki ve yakın çevresindeki
   kabarmasın, yandaki boş deniz güzel". Çözüm: vurgu katmanının maskesine
   ikinci bir katman (okuma sütununu kaplayan dikey bant) eklenir ve birinciden
   EKSİLTİLİR. Böylece imleç ister yazının üstünde olsun ister yanındaki
   denizde, parlak noktalar sütuna GİRMEZ; kenarlardaki vurgu aynen kalır.
   Sabit ızgara (::before) hiç dokunulmadan her yerde durur — "noktalar dursun".
   Bandın iki yanı --nokta-gecis kadar yumuşatılır, keskin dikey kesik olmasın.
   --nokta-sutun, .wrap/.container'ın max-width'i (880px) ile AYNI kalmalı;
   biri değişirse öbürü de değişir, yoksa bant metnin kenarını sıyırır.
   @supports ŞART: mask-composite bilinmeyen tarayıcıda iki maske TOPLANIR ve
   sütun sürekli parlar — desteklemeyen tarayıcı eski tek-maskeli hâlde kalır.
   Dar pencerede sütun ekranı doldurur, bant her yeri kaplar, vurgu kendiliğinden
   susar: deniz yoksa kabarma da yok. */
:root{ --nokta-sutun:880px; --nokta-gecis:120px; }
@supports (mask-composite:subtract){
  body::after{
    --nokta-imlec:radial-gradient(230px at var(--mx) var(--my), #000 0%, transparent 100%);
    --nokta-bant:linear-gradient(to right,
      transparent calc(50% - var(--nokta-sutun)/2 - var(--nokta-gecis)),
      #000        calc(50% - var(--nokta-sutun)/2),
      #000        calc(50% + var(--nokta-sutun)/2),
      transparent calc(50% + var(--nokta-sutun)/2 + var(--nokta-gecis)));
    /* SADECE standart ad yazılır. Üstteki kuralın -webkit-mask-image'ı günümüz
       tarayıcılarında mask-image'in diğer adıdır, bu satır onu ezer; ayrı bir
       özellik gibi davranan bir motor çıkarsa da tek maskeli eski hâline düşer. */
    mask-image:var(--nokta-imlec), var(--nokta-bant);
    mask-composite:subtract;   /* birinci katman EKSİ ikinci: imleç halkası \ sütun bandı */
  }
}
/* NOKTA HAVUZU KAPALI (v4, 18.09.2026): Apple yönünde zemin sakin ve düz.
   Yukarıdaki iki katman ve nokta.js olduğu gibi duruyor; geri açmak için bu
   iki satırı sil. */
body::before,body::after{display:none}
/* 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} }
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.001ms !important;animation-duration:.001ms !important}
}

/* ---------------------------------------------------------------- yerleşim */
.wrap{max-width:880px;margin:0 auto;padding:var(--s7) var(--s6) 72px}
/* Kısa sayfalarda (giriş, imza aracı) altbilgi ekranın dibine insin.
   :has() ile SINIRLI: altbilgisi olmayan duzenle.html'in yerleşimine dokunmaz.
   Desteklemeyen tarayıcıda kural düşer, altbilgi içeriğin hemen altında kalır. */
body:has(> .footer){display:flex;flex-direction:column;min-height:100vh}
/* width:100% ŞART: esnek kutuda 'margin:0 auto' gerilmeyi (stretch) iptal eder,
   .wrap içeriğine göre daralır ve dar ekranda sayfayı yana kaydırır. */
body:has(> .footer) > .wrap{flex:1 0 auto;width:100%}
/* .container üst bar ve altbilginin iç genişliği — .wrap ile HİZALI olmalı,
   yoksa logo ile başlık aynı dikey çizgide durmaz. */
.container{max-width:880px;margin:0 auto;padding:0 var(--s6)}
.wide{max-width:1120px}
/* GENİŞ SAYFA (28.09.2026, kullanıcı: "diğer sayfalara da aynı genişliği ver"). Sol menülü
   sayfalarda içerik 880 → 1120 px (.wide ile aynı; ilk Derin araştırma'da, 086b839). 880 sol
   menüden önceki ölçüydü: ~2200 px'lik ekranda menünün sağında ortada dar bir şerit kalıyordu.
   Dipnot da 1120 ki sol kenarı içerikle hizalı dursun. body.kenar-var'ı kabuk.js koyar; menüsüz
   ekranlar (imza daveti, belge, düzenleyici) 880'de, giriş sayfası satır içi 520'sinde kalır. */
body.kenar-var .wrap{max-width:1120px}
body.kenar-var .footer .container{max-width:1120px}
/* OKUMA ÖLÇÜSÜ: sayfa genişleyince küçük yazı, hukuki metin, yardım ve rapor satırları 145-175
   harfe uzuyordu (göz satır başını kaybeder). Akan metin ~95-100 harfte kırılır; kutuların
   genişliği değişmez. Metni ortalayan kutulardaki not (boş liste .bk-bos, dosya bırakma
   .birakKutu) blok olarak da ortada kalır, sola kaymaz. Başlık altı tanıtım paragrafı (p.sub)
   64ch'te üç kısa satıra sıkışıyordu; aynı ölçüye çıkar (Derin araştırma'daki blok gibi yayılsın).
   Dilekçe önizlemesi (.di-belge) A4 genişliğinde ve ortalı — sözleşme taslağı (.sz-taslak) ve
   .udf-page ile aynı 794 px. */
body.kenar-var .wrap :is(p.sub,.card>p,.hint,.bk-not,.mzOzet,.fy-dipnot,.ic-ozet p,.ra-kart li,.sz-madde p,.ku-kart p,.ka-kart p,.yd-bolum p,.yd-bolum li){max-width:85ch}
body.kenar-var :is(.bk-bos,.birakKutu) .hint{margin-inline:auto}
body.kenar-var .docwrap .di-belge{max-width:794px;margin-inline:auto}

/* --------------------------------------------------------- iki sütunlu pano
   Belge panosu ve imza ekranı maketteki gibi iki sütun: solda BELGE, sağda
   "şimdi ne yapacağım" (durum, eylemler, bağlantılar).
   Dar ekranda tek sütuna iner ve SAĞ sütun öne geçer — telefonda önce eylem
   görünmeli, uzun belge önizlemesi değil. */
.panoIzgara{
  display:grid;grid-template-columns:minmax(320px,1.15fr) minmax(300px,.85fr);
  gap:var(--s5);align-items:start;
}
.sutun{display:flex;flex-direction:column;gap:var(--s5);min-width:0}
.sutun>.card{margin-bottom:0}
@media (max-width:940px){
  .panoIzgara{grid-template-columns:1fr}
  .sutun:nth-child(1){order:2}
  .sutun:nth-child(2){order:1}
}
/* Yaşam döngüsü şeridindeki alt açıklama (TASLAK "sahip düzenler" gibi). */
.stepper .alt{font-size:11px;color:var(--ink-faint);white-space:nowrap}
.stepper .seg.active .alt{color:var(--ink-soft)}

/* ------------------------------------------------------------------ üst bar */
/* v4: yapışkan, yarı saydam çubuk (Apple gezinme çubuğu); hairline altında. */
.topbar{
  position:sticky;top:0;z-index:20;
  background:color-mix(in srgb,var(--ground) 82%,transparent);
  -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--line-soft);
}
@supports not (backdrop-filter:blur(1px)){.topbar{background:var(--ground)}}
.topbar .inner{min-height:60px;display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;padding-top:var(--s2);padding-bottom:var(--s2)}
.spacer{flex:1}
.brand{
  display:inline-flex;align-items:center;gap:10px;color:var(--ink);
  font-size:20px;font-weight:600;letter-spacing:-.2px;text-decoration:none;white-space:nowrap;
}
.brand:hover{text-decoration:none;color:var(--ink)}
.brand .mark{
  width:36px;height:36px;border-radius:50%;background:var(--accent-soft);color:var(--on-accent-soft);
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
}
.brand .mark .material-symbols-outlined{font-size:20px}
.brand em{font-style:normal;color:var(--accent)}
.nav{display:flex;gap:var(--s1);align-items:center;flex-wrap:wrap}
.nav a{
  color:var(--ink);font-size:15px;font-weight:500;padding:8px var(--s3);
  border-radius:var(--r-xs);white-space:nowrap;text-decoration:none;
  transition:background-color .15s ease;
}
.nav a:hover{background:var(--surface3);text-decoration:none;color:var(--ink)}
/* yalnız-ikon düğme: aria-label ZORUNLU */
.iconbtn{
  width:40px;height:40px;min-height:40px;border-radius:999px;border:none;background:transparent;
  color:var(--ink);display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;padding:0;flex-shrink:0;box-shadow:none;
}
.iconbtn:hover{background:var(--surface3);color:var(--ink);box-shadow:none}
.iconbtn .material-symbols-outlined{font-size:22px}
.navDugme{display:none}   /* ☰ yalnız dar ekranda — 720 px bloğunda açılır (21.09.2026) */

/* ------------------------------------------------------------- tipografi */
/* v4 tip ölçeği (Apple HIG): Large Title 34/700 · Title 2 22/600 · Body 16-17 ·
   Subhead 15 · Footnote 14 (alt sınır). Büyük harfli etiket yok, cümle düzeni. */
.eyebrow{
  font-family:var(--sans);font-size:15px;letter-spacing:0;text-transform:none;
  color:var(--ink-faint);margin:0 0 var(--s2);font-weight:600;
}
h1{
  font-family:var(--sans);font-size:34px;line-height:1.18;font-weight:700;
  margin:0 0 var(--s2);text-wrap:balance;color:var(--ink);letter-spacing:-.022em;
}
h2{
  font-family:var(--sans);font-size:22px;line-height:1.3;font-weight:600;letter-spacing:-.01em;
  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:17px;margin:0 0 var(--s7);max-width:64ch}

/* ------------------------------------------------------------------ kart
   M3 tonal kart: gölge YOK, kenarlık YOK — sayfadan renk tonuyla ayrılır. */
/* v4: beyaz kart + hairline + çok hafif gölge (Apple inset grouped). */
.card{
  background:var(--surface);
  border:1px solid var(--line-soft);
  border-radius:var(--r-lg);
  padding:var(--s6);
  box-shadow:var(--golge-1);
  margin-bottom:var(--s6);
}
/* kartın içindeki beyaz kutu (M3 surface-container-lowest) */
.card-lowest{background:var(--surface2)}
.panel{background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-xl);padding:var(--s7);min-height:300px;box-shadow:var(--golge-1)}

/* ---------------------------------------------------- işlem adımları şeridi
   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(--surface);
  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}
}

/* ------------------------------------------------------------------ stepper
   Yatay numaralı adım şeridi (yeni). .seg.done → onay imi, .seg.active → dolu. */
.stepper{display:flex;align-items:flex-start;flex-wrap:wrap}
.stepper .seg{display:flex;align-items:flex-start}
.stepper .line{width:72px;height:2px;background:var(--line);margin:21px 6px 0;border-radius:2px}
.stepper .seg.done .line,.stepper .seg.active .line{background:var(--accent)}
.stepper .node{display:flex;flex-direction:column;align-items:center;gap:var(--s2);min-width:88px}
.stepper .circ{
  width:44px;height:44px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  font-size:16px;font-weight:600;border:2px solid var(--line);color:var(--ink-soft);background:transparent;
  transition:background .2s,color .2s;
}
.stepper .lbl{font-size:13.5px;font-weight:500;color:var(--ink-soft);white-space:nowrap}
.stepper .seg.active .circ{background:var(--accent);color:var(--on-accent);border-color:transparent}
.stepper .seg.active .lbl{font-weight:600;color:var(--ink)}
.stepper .seg.done .circ{background:var(--accent-soft);color:var(--on-accent-soft);border-color:transparent}
.stepper .circ .material-symbols-outlined{font-size:20px;display:none}
.stepper .seg.done .circ .material-symbols-outlined{display:inline}
.stepper .seg.done .circ .num{display:none}
.stepper.sm .circ{width:36px;height:36px;font-size:14px}
.stepper.sm .line{width:56px;margin-top:17px}
.stepper.sm .lbl{font-size:12.5px}
.stepper.sm .node{min-width:78px}

/* ------------------------------------------------------------- form alanları */
label{
  font-size:15px;font-weight:500;color:var(--ink-soft);
  display:block;margin-bottom:var(--s2);
}
/* v4: iOS metin alanı — gri dolgu + hairline; odakta beyaz + tek yumuşak halka. */
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);
  border-radius:var(--r-sm);
  padding:10px var(--s4);
  background:var(--surface3);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(--line-strong)}
input:focus,textarea:focus,select:focus{
  background:var(--surface2);border-color:var(--accent);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 22%,transparent);
  outline:none;
}
input[readonly]{color:var(--ink-soft);background:var(--surface3);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(--surface3);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. */
/* v4 düğme: 12 px köşe, hover'da ton koyulaşır (gölge YOK), basışta kararır. */
button{
  font-family:var(--sans);font-size:15.5px;font-weight:600;letter-spacing:-.005em;
  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:var(--r);
  padding:8px var(--s6);cursor:pointer;
  box-shadow:none;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease,filter .1s ease;
}
button:hover{background:var(--accent-dark);border-color:var(--accent-dark);box-shadow:none}
button:active{box-shadow:none;filter:brightness(.92)}
/* GHOST = ikincil düğme: v4'te gri dolgu, çizgi yok (Apple "secondary"). */
button.ghost{
  background:var(--ghost-bg);color:var(--accent-ink);border:1px solid transparent;
  font-weight:500;box-shadow:none;
}
button.ghost:hover{background:var(--ghost-bg-h);color:var(--accent-ink);border-color:transparent;box-shadow:none}
button.small{font-size:14.5px;padding:6px var(--s4);min-height:40px;min-width:40px}

/* --- .btn ailesi (yeni): <a> etiketini düğme gibi göstermek için.
   <button> kuralları geçerliliğini KORUR; bunlar bağlantılar içindir. --- */
.btn{
  font-family:var(--sans);font-size:15px;font-weight:600;
  min-height:44px;padding:0 var(--s6);border-radius:var(--r);border:1px solid transparent;
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  white-space:nowrap;text-decoration:none;
}
.btn:hover{text-decoration:none}
.btn .material-symbols-outlined{font-size:18px}
.btn-filled{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.btn-filled:hover{background:var(--accent-dark);border-color:var(--accent-dark);color:var(--on-accent);box-shadow:none}
.btn-tonal{background:var(--accent-soft);color:var(--accent-ink);border-color:var(--accent-soft)}
.btn-tonal:hover{background:color-mix(in srgb,var(--accent-soft) 80%,var(--accent));color:var(--accent-ink);border-color:transparent}
.btn-outlined{background:var(--ghost-bg);color:var(--accent-ink);border-color:transparent}
.btn-outlined:hover{background:var(--ghost-bg-h);color:var(--accent-ink);border-color:transparent}
.btn-text{background:transparent;color:var(--accent-ink);padding:0 var(--s4);border-color:transparent}
.btn-text:hover{background:var(--ghost-bg-h);color:var(--accent-ink)}
.btn-err{background:transparent;color:var(--bad);border-color:var(--bad)}
.btn-err:hover{background:var(--bad-soft);color:var(--bad)}
.btn-sm{min-height:40px;padding:0 var(--s5);font-size:14px}

/* 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(--surface);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)}

/* --- .tabbar (yeni): alt çizgili sekme şeridi --- */
.tabbar{display:flex;gap:2px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.tabbar .tab{
  background:transparent;border:none;border-radius:0;font-family:var(--sans);font-size:14.5px;font-weight:500;
  color:var(--ink-soft);padding:13px var(--s5);cursor:pointer;min-height:44px;
  border-bottom:3px solid transparent;display:inline-flex;align-items:center;gap:var(--s2);white-space:nowrap;
  box-shadow:none;
}
.tabbar .tab:hover{background:var(--ghost-bg-h);color:var(--ink);box-shadow:none}
.tabbar .tab .material-symbols-outlined{font-size:19px}
.tabbar .tab.active{color:var(--accent-ink);font-weight:600;border-bottom-color:var(--accent)}
.tabbar .tab.active:hover{background:var(--ghost-bg-h);color:var(--accent-ink)}

/* --------------------------------------------------------------- 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);
  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 */
.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(--surface);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)}

/* --- çip / rozet / durum (yeni) --- */
.chip{
  display:inline-flex;align-items:center;gap:7px;border-radius:999px;padding:7px var(--s4);
  font-size:13.5px;white-space:nowrap;
}
.chip .material-symbols-outlined{font-size:17px}
.chip-outline{border:1px solid var(--line);color:var(--ink-soft)}
.chip-tonal{background:var(--accent2-soft);color:var(--on-accent2-soft);font-weight:500}
.chip-ok{background:var(--good-soft);color:var(--good);font-weight:500}
.chip-sq{border-radius:var(--r-xs);padding:5px var(--s3);font-size:12.5px}
.badge{
  display:inline-block;background:var(--accent2-soft);color:var(--on-accent2-soft);
  border-radius:999px;padding:3px var(--s3);font-size:12.5px;font-weight:600;
  letter-spacing:0;white-space:nowrap;
}
.state{
  display:inline-block;border-radius:999px;padding:3px var(--s3);
  font-size:12.5px;font-weight:600;letter-spacing:0;white-space:nowrap;
}
.state.taslak{background:var(--accent2-soft);color:var(--on-accent2-soft)}
.state.imzada{background:var(--warn-soft);color:var(--warn)}
.state.tamam{background:var(--good-soft);color:var(--good)}

/* ------------------------------------------------------------------ YAKINDA
   Henüz tam randımanlı OLMAYAN sayfalar (hukuk.html, inceleme.html) ve onlara
   giden bağlantılar (home.html) bunu taşır. Sayfa gerçekten tamamlandığında
   rozet ve şerit BİRLİKTE kaldırılır, biri kalırsa yanıltır. */
.yakinda{
  display:inline-block;vertical-align:middle;
  font-family:var(--sans);font-size:12px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;line-height:1.7;
  padding:1px 10px;border-radius:999px;white-space:nowrap;
  background:var(--warn-soft);color:var(--warn);border:1px solid var(--warn-line);
}
h1 .yakinda{position:relative;top:-4px;margin-left:var(--s2)}
.yakinda-serit{
  font-size:14px;line-height:1.65;
  background:var(--warn-soft);color:var(--warn);
  border:1px solid var(--warn-line);border-left:4px solid var(--warn);
  border-radius:var(--r);padding:var(--s3) var(--s4);margin-bottom:var(--s5);
}

/* -------------------------------------------------------------- durum şeridi */
.status-banner{
  display:flex;align-items:center;gap:var(--s3);
  padding:var(--s4);border-radius:var(--r);
  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(--surface3);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)}

/* --- sürükle-bırak alanı (yeni sınıf; #dropZone'a dokunmaz) --- */
/* v4: kesikli değil — hairline + gri dolgu (Finder/Mail bırakma alanı gibi). */
.drop{
  border:1px solid var(--line);border-radius:var(--r-lg);padding:40px var(--s7);background:var(--surface3);
  display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;
  transition:border-color .15s ease,background-color .15s ease,box-shadow .15s ease;
}
.drop:hover{border-color:var(--line-strong)}
.drop .ico{
  width:56px;height:56px;border-radius:50%;background:var(--surface2);color:var(--accent);box-shadow:var(--golge-1);
  display:flex;align-items:center;justify-content:center;
}
@media print{.topbar,.hukukKose,.yb-dugme,.yb-panel{display:none}}
.drop .ico .material-symbols-outlined{font-size:30px}

/* ------------------------------------------------------------------ bağlantı */
a{color:var(--accent-ink)}
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);
  padding:var(--s3) var(--s4);margin-top:var(--s2);
  max-height:180px;overflow:auto;scrollbar-width:thin;
}
/* --- liste satırı / bağlantı kutusu / ilerleme (yeni) --- */
.rowline{
  display:flex;justify-content:space-between;gap:var(--s4);
  padding:11px 0;border-bottom:1px solid var(--line-soft);font-size:14px;
}
.rowline:last-child{border-bottom:none}
.rowline .k{color:var(--ink-soft)}
.rowline .v{font-weight:500}
.linkbox{
  font-family:var(--mono);font-size:12px;color:var(--ink-soft);background:var(--surface3);
  border-radius:var(--r-xs);padding:7px 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.progress{height:6px;border-radius:999px;background:var(--surface3);overflow:hidden}
.progress>div{height:100%;background:var(--accent);border-radius:999px}
/* seçilebilir kart */
.selcard{
  background:var(--surface2);border:1.5px solid transparent;border-radius:var(--r);
  cursor:pointer;transition:border-color .15s;
}
.selcard:hover{border-color:var(--accent)}
.selcard.sel{border-color:var(--accent)}
/* pin kutuları */
.pins{display:flex;gap:9px}
.pin{
  width:44px;height:52px;border:1.5px solid var(--line);border-radius:var(--r-sm);
  display:inline-flex;align-items:center;justify-content:center;font-size:22px;
}
.pin.dot{border-color:var(--line-strong)}
.pin.cursor{border:2px solid var(--accent)}

.hidden{display:none !important}

/* 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);
  padding:var(--s4);
  box-shadow:inset 0 1px 2px rgba(16,20,28,.05);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .docwrap{background:#0e0c12;box-shadow:inset 0 1px 2px rgba(0,0,0,.6)}
}
:root[data-theme="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);
  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);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)}

/* ------------------------------------------------------------------ altbilgi */
.footer{border-top:1px solid var(--line-soft);margin-top:var(--s8);position:relative;z-index:1}
/* 21.09.2026 — GRUPLU DİPNOT. Dokuz bağlantı tek sırada, hukuki metinlerle ürün
   sayfaları karışık akıyordu (19.09 değerlendirmesi). Şimdi üç kısa sütun:
   Hukuk araçları · E-imza · Hukuki; marka ve telif üstte tek satır. Şablon tek
   yerden yazılır (scratchpad dipnot-grupla.mjs → 16 sayfa + kabuk.js). */
.footer .inner{
  padding-top:var(--s6);padding-bottom:var(--s7);display:flex;align-items:flex-start;gap:var(--s5) var(--s8);   /* yan boşluk .container'dan (375 px'te x=0'a yapışıyordu) */
  flex-wrap:wrap;font-size:12.5px;color:var(--ink-soft);
}
.footer .fust{flex-basis:100%;display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4);padding-bottom:var(--s3);border-bottom:1px solid var(--line-soft)}
.footer .fbrand{font-size:14px;font-weight:600;color:var(--ink)}
.footer .fbrand em{font-style:normal;color:var(--accent)}
.footer .ftelif{font-size:12.5px;color:var(--ink-faint)}
.footer .fgrup{display:flex;flex-direction:column;gap:7px;min-width:150px;flex:0 1 auto}
.footer .fbaslik{font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:3px}
.footer a{font-size:14px;color:var(--ink-soft);white-space:nowrap;text-decoration:none}
.footer a:hover{color:var(--accent-ink);text-decoration:underline}
@media (max-width:640px){.footer .fgrup{flex:1 1 40%;min-width:140px}}

/* ------------------------------------------------------------------- odak */
/* v4: tek yumuşak halka; giriş kutuları halkayı :focus kuralından alır (üstte). */
:focus-visible{outline:2px solid color-mix(in srgb,var(--focus) 70%,transparent);outline-offset:2px}
input:focus-visible,textarea:focus-visible,select:focus-visible{outline:none}
::selection{background:var(--accent-soft);color:var(--on-accent-soft)}

/* ---------------------------------------------- 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(--s6) var(--s4) var(--s9)}
  .container{padding:0 var(--s4)}
  h1{font-size:26px}
  h2{font-size:18px}
  .card{padding:var(--s4);border-radius:var(--r-lg);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}
  .topbar .inner{gap:var(--s2)}
  /* 21.09.2026 — ÜST ÇUBUK MENÜSÜ ☰: dört bağlantı 375 px'te dört satıra yayılıp
     ilk ekranın üçte birini alıyordu (ölçüldü). Dar ekranda bağlantılar gizli,
     ☰ (home.html #navDugme) açınca çubuğun altında tam genişlik satırlar
     (order:10 + flex-basis:100% → kendi satırına iner). Yalnız home.html'de
     .nav var; diğer sayfalar zaten "← geri + başlık + tema". */
  .navDugme{display:inline-flex}
  .topbar .nav{display:none;flex-basis:100%;order:10;flex-direction:column;align-items:stretch;gap:2px;padding:2px 0 6px}
  .topbar .nav.acik{display:flex}
  .topbar .nav a{padding:11px var(--s3);font-size:16px;border-radius:var(--r-sm)}
  .stepper .line{width:32px}
  .stepper .node{min-width:64px}
  /* .stepper.sm kuralları (3 sınıf) yukarıdakileri (2 sınıf) EZER — dar ekran
     ölçüleri burada ayrıca yazılmazsa şerit 375px'e sığmaz ve sayfayı yana
     kaydırır (09.08.2026'da ana sayfada 23px taşırıyordu). */
  .stepper.sm .line{width:22px;margin-left:3px;margin-right:3px}
  .stepper.sm .node{min-width:58px}
  .stepper.sm .lbl{font-size:11.5px}
  /* Yaşam döngüsü alt açıklamaları ("kilitli, imzalar birikir") dar ekranda
     satır sarmadığı için taşıyor — küçük ekranda gizlenir, etiket kalır. */
  .stepper .alt{display:none}
}
@media (max-width:400px){
  .wrap{padding:var(--s5) var(--s3) var(--s8)}
  .card{padding:var(--s3)}
  h1{font-size:24px}
}

/* ------------------------------------------------------------- hukuk köşesi
   19.08.2026: "YAKINDA Hukuk Araçları …" şeridi Yeni belge sayfasının baş
   satırından çıkarıldı (kullanıcı isteği) — üç kısayol artık sol altta sabit
   duran bir hamburger kabarcığında (home.html #hukukKose), sayfa kaysa da
   köşede kalır. M3 kuralına uygun: gölge yok, kenarlık + yüzey tonu.
   Dokunma hedefi ≥40px, metin ≥14px (45-70 yaş kuralları). */
.hukukKose{position:fixed;left:14px;bottom:14px;z-index:5;display:flex;flex-direction:column;align-items:flex-start;gap:8px;transition:opacity .2s ease,transform .2s ease}
/* 20.09.2026 — TEK PANEL. Altı ayrı kabarcık (genişlikleri farklı, sağ kenar
   testere gibi, "yığın" hissi) yerine tek beyaz panel: eşit genişlikte satırlar,
   tek kenarlık, tek gölge. "Hep açık" (20.08 kararı) aynen duruyor — değişen
   kalabalığın çizimi, madde sayısı değil.
   22.09.2026 — HEP GÖRÜNÜR (kullanıcı: "sol alttaki menü hep görünür olsun, bütün
   sayfalardan görünsün"). "Dipnot görünür alana girince panel solar" kuralı kabuk.js'ten
   KALDIRILDI: kısa sayfada dipnot açılışta zaten görünür olduğundan panel hiç
   çıkmıyordu (1440×900'de /dogrula; 1250 px yüksek ekranda /ictihat, /ucret,
   /sablonlar). Aşağıdaki seçici sözleşme gereği duruyor, artık kimse vermiyor.
   Dipnota binme derdi kabuk.js bosluk() ile karşılanıyor (ölçülü alt boşluk). */
.hukukKose--gizli{opacity:0;transform:translateY(8px);pointer-events:none}
/* 21.09.2026 — DAR EKRANDA KAYDIRINCA ÇEKİLİR. Telefonda sabit "Hukuk araçları" düğmesi
   ve sağdaki yardım düğmesi okunan satırın üstüne biniyordu (20.09 değerlendirmesi;
   alt boşluk yalnız sayfa SONUNDA işe yarar, kaydırma sırasında değil). kabuk.js
   aşağı kaydırınca body'ye .yuzen-gizli verir, yukarı kaydırınca alır.
   22.09.2026: yalnız YARDIM düğmesi çekilir — Hukuk köşesi "hep görünür" kararıyla
   bu seçiciden çıkarıldı; telefonda da kaydırınca yerinde kalır. */
body.yuzen-gizli .yb-dugme{transform:translateY(calc(100% + 24px));opacity:0;pointer-events:none}
.hukukKose-menu{display:flex;flex-direction:column;align-items:stretch;gap:0;min-width:212px;padding:4px;
  border:1px solid var(--line-soft);border-radius:var(--r);background:var(--surface);box-shadow:var(--golge-1)}
.hukukKose-menu[hidden]{display:none}   /* display:flex hidden'i ezmesin — menü kapalı başlar */
.hukukKose-dugme[hidden]{display:none}  /* aynı tuzak düğme için: masaüstünde gizli (17.09.2026) */
/* v4: beyaz, hairline, hafif gölge, 10 px köşe; ikon tek çizgi (Material
   Symbols) ve vurgu renginde — emoji yok. */
.hukukKose-dugme,.hukukKose-madde{
  display:inline-flex;align-items:center;gap:9px;min-height:40px;
  border:1px solid var(--line-soft);border-radius:var(--r-sm);background:var(--surface);
  color:var(--ink);font-family:var(--sans);font-size:14.5px;font-weight:500;text-decoration:none;
  box-shadow:var(--golge-1);transition:background-color .15s ease,border-color .15s ease;
}
.hukukKose-dugme{padding:7px 16px 7px 12px;font-weight:600;cursor:pointer}
.hukukKose-madde{padding:7px 14px 7px 10px;border:0;box-shadow:none;background:transparent;border-radius:var(--r-xs)}
.hukukKose-dugme:hover{background:var(--surface3);border-color:var(--line);box-shadow:var(--golge-1);color:var(--ink)}
.hukukKose-madde:hover{background:var(--surface3);color:var(--ink)}
.hukukKose-ikon{font-size:19px;line-height:1;color:var(--accent)}
@media print{.hukukKose{display:none}}
/* 20.08.2026 — TASMA DUZELTMESI: menu position:fixed ve 4 maddeyle ~186px;
   .wrap'in alt boslugu ise 72px oldugu icin sayfanin son satiri menunun altinda
   kaliyor ve okunamiyordu. .wrap ortalanmis (max-width:880px), yani sol kenari
   (W-880)/2; menunun sag kenari ~244px. Ortusme sarti (W-880)/2 < 244, yani
   W < 1368px. Genis ekranda bosuna bosluk birakmamak icin kural o esikle sinirli.
   Menuye madde EKLENIRSE bu deger buyur — 220px dort maddeye gore. */
/* 17.09.2026: sabit 254 px KALDIRILDI — boşluğu kabuk.js yığının gerçek
   yüksekliğini ölçüp body'ye yazıyor (madde eklenince/gizlenince kendiliğinden
   uyar). Dar ekranda (<1024 px) yığın tek düğmeye katlanır (.hukukKose-dugme). */

/* İÇTİHAT KAPISI — ana sayfa (21.09.2026): "Karar mı arıyorsunuz?" tek satırlık
   şerit; arabuluculuk sihirbazının önüne geçmez, dava avukatına kapıyı gösterir.
   Dar ekranda metin ve düğme alt alta düşer. */
.hk-giris{display:flex;align-items:center;justify-content:space-between;gap:var(--s3) var(--s5);flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--line-soft);border-left:3px solid var(--accent);border-radius:var(--r-lg);
  padding:var(--s4) var(--s5);margin:calc(-1 * var(--s4)) 0 var(--s6);box-shadow:var(--golge-1)}
.hk-giris-metin{font-size:15.5px;line-height:1.5;flex:1 1 320px}
.hk-giris .btn{flex:0 0 auto}
@media (max-width:640px){.hk-giris .btn{width:100%}}

/* SORUMLULUK KAYDI — 23.08.2026. Metnin kendisi kabuk.js'te, stili burada.
   NEDEN ORTAK: .hk-garanti hukuk.html:30 ve inceleme.html:22'ye BIREBIR
   kopyalanmisti; hat/super/resmigazete/doc de isteyince dort kopya olacakti.
   Ayni gerekce kabuk.js'in kurulus gerekcesiyle bir: "ayni 15 satir 10 sayfaya
   kopyalanacakti; biri guncellenip digerleri unutulunca sayfalar farkli davranir".
   Iki sayfadaki eski kopyalar BIRAKILDI — ayni tanim oldugu icin zarari yok,
   silinirse o sayfalar app.css yuklenene kadar stilsiz kalir. */
.hk-garanti{font-size:14px;line-height:1.6;background:var(--surface3);border-left:3px solid var(--accent);border-radius:var(--r-xs);padding:var(--s2) var(--s3);color:var(--ink-soft);margin-top:var(--s3)}
.hk-sorumluluk{font-size:14px;line-height:1.55;background:transparent;border-left:0;border-top:1px solid var(--line-soft);border-radius:0;padding:var(--s3) 0 0;color:var(--ink-faint);margin:var(--s3) 0}
.hk-sorumluluk a{color:var(--ink-soft);text-decoration:underline}
/* Yazdirmada GORUNMELI — rapor tarayicidan PDF'e basilip mahkemeye sunuluyor.
   .hukukKose gizleniyor ama bu blok gizlenmemeli. */
@media print{.hk-sorumluluk{display:block;border-left:2px solid #999;color:#333;background:none}}

/* DAYANAK VERILERI kutusu (23.08.2026) — web/dayanak.js kullanir.
   Uretilen dilekcede faiz/kur/kira gectiginde ilgili resmi rakami GOSTERIR;
   metne kendiliginden YAZMAZ (gerekce dayanak.js basliginda). */
.dv-kutu{border:1px solid var(--line-soft);border-left:3px solid var(--accent);
  border-radius:var(--r-sm);padding:14px 18px;margin-top:var(--s3);background:var(--surface2)}
.dv-ust{font-size:14px;margin-bottom:10px}
.dv-kart{border-top:1px solid var(--line-soft);padding-top:10px;margin-top:10px}
.dv-kart:first-of-type{border-top:none;padding-top:0;margin-top:0}
.dv-baslik{font-weight:600;font-size:14px;margin-bottom:6px}
.dv-tablo{border-collapse:collapse;width:100%;font-size:14px}
.dv-tablo td{padding:4px 8px 4px 0}
.dv-tablo td:last-child{text-align:right;font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
.dv-dip{font-size:12px;line-height:1.6;color:var(--ink-soft);margin-top:6px}
.dv-uyari{font-size:12.5px;line-height:1.6;color:var(--ink-soft);border-left:3px solid #d97706;
  padding:6px 12px;margin-top:8px}
@media print{.dv-kutu{display:none}}   /* ekran araci, belgeye basilmaz */

/* ------------------------------------------------------------ sol kenar menüsü
   24.09.2026 — De Jure yerleşimi (kullanıcı: "menümüzü De Jure'ninki gibi yapalım").
   Yapı ve davranış kabuk.js'te (SOL KENAR MENÜSÜ bloğu), çizim burada.
   Masaüstünde (≥1024 px) sabit sütun, gövde sütun genişliği kadar sağa kayar ve üst
   çubuk gizlenir; dar ekranda sütun soldan kayan çekmecedir (☰ üst çubukta).
   Menüsüz sayfa (<body data-kenar="kapali">) bu kuralların hiçbirini almaz. */
:root{--kenar-g:256px;--kenar-dar-g:68px}
.kenar{position:fixed;top:0;left:0;bottom:0;z-index:30;width:var(--kenar-g);
  display:flex;flex-direction:column;gap:6px;padding:12px 10px 10px;
  background:var(--ground);border-right:1px solid var(--line-soft);font-family:var(--sans)}
.kenar-ust{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:2px 2px 10px 6px}
.kenar-marka{display:inline-flex;align-items:center;gap:10px;min-width:0;color:var(--ink);font-size:19px;font-weight:600;
  letter-spacing:-.2px;text-decoration:none;white-space:nowrap}
.kenar-marka:hover{color:var(--ink);text-decoration:none}
.kenar-marka em{font-style:normal;color:var(--accent)}
.kenar-marka .mark{width:32px;height:32px;border-radius:50%;background:var(--accent-soft);color:var(--on-accent-soft);
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.kenar-marka .mark .material-symbols-outlined{font-size:19px}
.kenar-dugme{width:36px;height:36px;min-height:36px;padding:0;border:0;border-radius:var(--r-sm);background:transparent;
  color:var(--ink-soft);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;box-shadow:none}
.kenar-dugme:hover{background:var(--surface3);color:var(--ink)}
.kenar-dugme .material-symbols-outlined{font-size:21px}
.kenar-kapat{display:none}
.kenar-govde{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:2px;padding:2px 0}
.kenar-dip{display:flex;flex-direction:column;gap:2px;padding-top:8px;border-top:1px solid var(--line-soft)}
.kenar-madde{display:flex;align-items:center;gap:10px;width:100%;min-height:40px;margin:0;padding:8px 10px;
  border:1px solid transparent;border-radius:var(--r-sm);background:transparent;box-shadow:none;
  color:var(--ink);font:500 14.5px/1.3 var(--sans);text-align:left;text-decoration:none;cursor:pointer}
.kenar-madde:hover{background:var(--surface3);color:var(--ink);text-decoration:none;box-shadow:none}
.kenar-madde.aktif{background:var(--surface);border-color:var(--line-soft);box-shadow:var(--golge-1);font-weight:600}
.kenar-madde:focus-visible,.kenar-altmadde:focus-visible,.kenar-dugme:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.kenar-ikon{font-size:20px;color:var(--ink-soft);flex-shrink:0}
.kenar-madde.aktif .kenar-ikon,.kenar-grup.icinde>.kenar-grup-dugme .kenar-ikon{color:var(--accent)}
.kenar-yazi{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kenar-ok{font-size:18px;color:var(--ink-faint);flex-shrink:0;transition:transform .15s ease}
.kenar-grup.acik .kenar-ok{transform:rotate(90deg)}
.kenar-alt{display:none;flex-direction:column;gap:1px;margin:2px 0 6px 20px;padding-left:10px;border-left:1px solid var(--line)}
.kenar-grup.acik .kenar-alt{display:flex}
.kenar-altmadde{display:flex;align-items:center;min-height:36px;padding:7px 10px;border-radius:var(--r-xs);
  color:var(--ink-soft);font-size:14.5px;line-height:1.3;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kenar-altmadde:hover{background:var(--surface3);color:var(--ink);text-decoration:none}
.kenar-altmadde.aktif{background:var(--surface);color:var(--ink);font-weight:600;box-shadow:var(--golge-1)}
.kenar-perde{position:fixed;inset:0;z-index:29;background:rgba(0,0,0,.32)}
.kenar-perde[hidden]{display:none}
.kenar-ac{display:none}
/* Menü varken sağ alttaki "Nasıl çalışır?" düğmesi gizli (menüde maddesi var).
   !important ŞART: kabuk.js balonu kapatınca düğmeye satır içi display:flex yazıyor. */
body.kenar-var .yb-dugme{display:none !important}
/* Dipnot sadeleşir: araç ve e-imza bağlantıları zaten menüde; hukuki bağlantılar kalır. */
body.kenar-var .footer .fgrup[aria-label="Hukuk araçları"],
body.kenar-var .footer .fgrup[aria-label="E-imza"]{display:none}
@media (min-width:1024px){
  body.kenar-var{padding-left:var(--kenar-g)}
  body.kenar-var .topbar{display:none}
  body.kenar-dar{padding-left:var(--kenar-dar-g)}
  body.kenar-dar .kenar{width:var(--kenar-dar-g);padding-left:8px;padding-right:8px}
  body.kenar-dar .kenar .kenar-yazi,body.kenar-dar .kenar .kenar-ok,body.kenar-dar .kenar .kenar-alt{display:none}
  body.kenar-dar .kenar-ust{flex-direction:column;padding:2px 0 10px}
  body.kenar-dar .kenar-madde{justify-content:center;padding:8px 0}
}
@media (max-width:1023px){
  .kenar{width:min(300px,86vw);transform:translateX(-100%);transition:transform .22s ease;visibility:hidden;box-shadow:var(--golge-2)}
  body.kenar-acik .kenar{transform:none;visibility:visible}
  .kenar-daralt{display:none}
  .kenar-kapat{display:inline-flex}
  body.kenar-var .kenar-ac{display:inline-flex}
  body.kenar-var .kenar-ac--yuzen{position:fixed;top:10px;left:10px;z-index:25;background:var(--surface);
    border:1px solid var(--line-soft);box-shadow:var(--golge-1)}
  /* Üst çubuktaki "← ana sayfa" oku ve ana sayfanın dört bağlantısı ☰'ün yerini bırakır. */
  body.kenar-var .topbar a.iconbtn[href="/"],
  body.kenar-var #anaNav,body.kenar-var #navDugme{display:none !important}
}
@media (prefers-reduced-motion:reduce){.kenar{transition:none}}
@media print{.kenar,.kenar-perde,.kenar-ac{display:none !important}body.kenar-var{padding-left:0 !important}}