/* BELGE-SABLON v1 - Smart360 / SmartMail / SmartFiles belge sayfalari.
   TEK KAYNAK: Smart360/web/belgeler/belgeler.css. Diger iki siteye
   `node Smart360/scripts/belge-uret.mjs` KOPYALAR - kopyalari elle duzenlemeyin.
   Kullanim ve veri bicimi: Smart360/docs/belgeler/SABLON.md
   Renkler sitelerin ortak jeton adlarindan gelir (--text, --dim, --faint,
   --brand, --deep, --line, --line2, --surface, --surface2, --bg, --tint,
   --tintStrong, --grad, --shadow); uc site de bu adlari tanimlar. */

.belge-duzen{max-width:1320px; margin:0 auto; padding:28px 24px 72px;
  display:grid; gap:40px; grid-template-columns:minmax(0,1fr)}
@media (min-width:1000px){ .belge-duzen{grid-template-columns:260px minmax(0,1fr)} }
@media (min-width:1260px){ .belge-duzen{grid-template-columns:260px minmax(0,1fr) 220px} }

/* ---------- sol menu + arama ---------- */
.belge-yan{position:relative}
@media (min-width:1000px){
  .belge-yan{position:sticky; top:calc(var(--ust-bar, 0px) + 20px); align-self:start;
    max-height:calc(100vh - var(--ust-bar, 0px) - 40px); overflow:auto; padding-right:6px}
}
.belge-ara{position:relative; margin-bottom:18px}
.belge-ara input{width:100%; font:inherit; font-size:14.5px; color:var(--text); background:var(--surface);
  border:1px solid var(--line); border-radius:12px; padding:10px 12px 10px 38px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a6f8f' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:12px center; background-size:17px}
.belge-ara input:focus{outline:0; border-color:var(--brand); box-shadow:0 0 0 3px var(--tint)}
.belge-ara kbd{position:absolute; right:10px; top:50%; transform:translateY(-50%); font:600 11px ui-monospace,monospace;
  color:var(--faint); border:1px solid var(--line); border-radius:6px; padding:2px 6px; pointer-events:none}
.belge-sonuclar{position:absolute; z-index:30; left:0; right:0; top:calc(100% + 6px); margin:0; padding:6px; list-style:none;
  background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow);
  max-height:min(420px,70vh); overflow:auto}
@media (min-width:1000px){ .belge-sonuclar{width:min(460px,80vw); right:auto} }
.belge-sonuclar[hidden]{display:none}
.belge-sonuclar a{display:block; padding:9px 11px; border-radius:10px; border:0; color:var(--text)}
.belge-sonuclar a b{display:block; font-size:14.5px}
.belge-sonuclar a span{display:block; font-size:12.5px; color:var(--faint); margin-top:2px; line-height:1.45}
.belge-sonuclar a mark{background:var(--tintStrong); color:inherit; border-radius:3px; padding:0 1px}
.belge-sonuclar [aria-selected="true"] a,.belge-sonuclar a:hover{background:var(--tint)}
.belge-sonuclar .bos{padding:10px 11px; font-size:13.5px; color:var(--faint)}

.belge-menu{font-size:14.5px}
.belge-menu details{margin:0 0 6px; background:none; border:0; border-radius:0}
.belge-menu summary::after{content:none}
.belge-menu summary{list-style:none; cursor:pointer; display:flex; align-items:center; gap:8px;
  padding:7px 8px; border-radius:9px; font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--faint)}
.belge-menu summary::-webkit-details-marker{display:none}
.belge-menu summary::before{content:""; width:7px; height:7px; border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(-45deg); transition:transform .15s; margin-left:2px}
.belge-menu details[open] > summary::before{transform:rotate(45deg)}
.belge-menu summary:hover{color:var(--deep)}
.belge-menu ul{list-style:none; margin:2px 0 8px; padding:0 0 0 12px; border-left:1px solid var(--line)}
.belge-menu li{margin:0}
.belge-menu a{display:block; margin-left:-1px; padding:6px 10px; border:0; border-left:2px solid transparent;
  color:var(--dim); line-height:1.4}
.belge-menu a:hover{color:var(--deep); background:var(--tint); border-radius:0 8px 8px 0}
.belge-menu a[aria-current="page"]{color:var(--deep); font-weight:700; border-left-color:var(--brand);
  background:var(--tint); border-radius:0 8px 8px 0}
.belge-menu .belge-ana{display:block; margin-bottom:10px; font-weight:700; color:var(--text); border:0; padding:6px 8px}
/* Dar ekranda menu katlanir: tek dugme, ici acilinca listelenir. */
@media (max-width:999px){
  .belge-menu-ac{display:flex; width:100%; align-items:center; justify-content:space-between; font:inherit; font-size:14.5px; font-weight:700;
    color:var(--text); background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:10px 14px; cursor:pointer}
  .belge-menu-ac::after{content:""; width:8px; height:8px; border-right:2px solid var(--faint); border-bottom:2px solid var(--faint); transform:rotate(45deg)}
  .belge-yan:not(.acik) .belge-menu{display:none}
  .belge-yan.acik .belge-menu{margin-top:12px; padding:12px; border:1px solid var(--line); border-radius:12px; background:var(--surface)}
}
@media (min-width:1000px){ .belge-menu-ac{display:none} }

/* ---------- icerik ---------- */
.belge-icerik{min-width:0; max-width:780px}
.belge-kirinti ol{list-style:none; margin:0 0 18px; padding:0; display:flex; flex-wrap:wrap; gap:4px 6px; font-size:13px; color:var(--faint)}
.belge-kirinti li + li::before{content:"/"; margin-right:6px; color:var(--line)}
.belge-kirinti a{color:var(--faint); border:0}
.belge-kirinti a:hover{color:var(--deep)}
.belge-yazi h1{font-size:clamp(28px,3.2vw,38px); line-height:1.15; letter-spacing:-0.02em; color:var(--text); margin:0}
.belge-ozet{font-size:17px; line-height:1.6; color:var(--dim); margin-top:14px}
.belge-rol{display:inline-flex; flex-wrap:wrap; gap:6px; margin:16px 0 0; padding:0; list-style:none}
.belge-rol li{font-size:12.5px; font-weight:700; color:var(--deep); background:var(--tint); border-radius:999px; padding:4px 11px}
.belge-yazi h2{font-size:clamp(21px,2.2vw,25px); line-height:1.25; color:var(--text); margin:44px 0 0; scroll-margin-top:calc(var(--ust-bar, 0px) + 20px)}
.belge-yazi h3{font-size:17.5px; color:var(--text); margin:28px 0 0; scroll-margin-top:calc(var(--ust-bar, 0px) + 20px)}
.belge-yazi p,.belge-yazi li{font-size:16px; line-height:1.7}
.belge-yazi p{margin:14px 0 0}
.belge-yazi code{font-size:.9em}

/* Adimlar: numara ekran notlarindaki numarayla AYNI gorunur. */
ol.belge-adimlar{list-style:none; counter-reset:adim; margin:18px 0 0; padding:0}
ol.belge-adimlar > li{counter-increment:adim; position:relative; padding:0 0 22px 50px; margin:0}
ol.belge-adimlar > li::before{content:counter(adim); position:absolute; left:0; top:0; width:32px; height:32px; border-radius:999px;
  background:var(--grad-dugme, var(--grad)); color:#fff; font-weight:700; font-size:14.5px; display:grid; place-items:center}
ol.belge-adimlar > li:not(:last-child)::after{content:""; position:absolute; left:15px; top:38px; bottom:6px; width:2px; background:var(--line)}
ol.belge-adimlar > li > :first-child{margin-top:4px}
.not-no{display:inline-grid; place-items:center; width:21px; height:21px; border-radius:999px; font-size:12px; font-weight:700;
  background:#fff; color:var(--deep); border:1.5px solid var(--brand); vertical-align:1px; margin:0 2px}

/* Ipucu / dikkat kutulari */
.belge-kutu{margin:22px 0 0; padding:16px 18px 16px 52px; border-radius:14px; position:relative; font-size:15.5px; line-height:1.6;
  background:var(--surface2); border:1px solid var(--line)}
.belge-kutu::before{content:""; position:absolute; left:16px; top:16px; width:22px; height:22px; background:center/22px no-repeat}
.belge-kutu > b:first-child{display:block; color:var(--text); margin-bottom:2px}
.belge-kutu p:first-child{margin-top:0}
.belge-kutu.ipucu{background:rgba(130,89,210,.07); border-color:rgba(130,89,210,.22)}
.belge-kutu.ipucu::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238259D2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4M12 3a6 6 0 0 0-3.5 10.9c.6.5 1 1.2 1 2.1h5c0-.9.4-1.6 1-2.1A6 6 0 0 0 12 3z'/%3E%3C/svg%3E")}
.belge-kutu.dikkat{background:rgba(245,184,61,.10); border-color:rgba(245,184,61,.45)}
.belge-kutu.dikkat::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a86b00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l10 18H2z'/%3E%3Cpath d='M12 10v5M12 18h.01'/%3E%3C/svg%3E")}
.belge-kutu.sonuc{background:rgba(47,212,160,.09); border-color:rgba(47,212,160,.4)}
.belge-kutu.sonuc::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f7a5a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12l3 3 5-6'/%3E%3C/svg%3E")}

.belge-ilgili{margin:40px 0 0; padding:0; list-style:none; display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.belge-ilgili a{display:block; height:100%; padding:14px 16px; border:1px solid var(--line); border-radius:12px; background:var(--surface); color:var(--text); font-weight:600}
.belge-ilgili a:hover{border-color:var(--brand); color:var(--deep)}

/* onceki / sonraki */
.belge-gecis{margin-top:48px; padding-top:24px; border-top:1px solid var(--line); display:grid; gap:12px; grid-template-columns:repeat(2,minmax(0,1fr))}
.belge-gecis a{display:block; padding:14px 16px; border:1px solid var(--line); border-radius:12px; color:var(--text); background:var(--surface)}
.belge-gecis a:hover{border-color:var(--brand)}
.belge-gecis small{display:block; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); margin-bottom:3px}
.belge-gecis .sonraki{grid-column:2; text-align:right}
@media (max-width:559px){ .belge-gecis{grid-template-columns:minmax(0,1fr)} .belge-gecis .sonraki{grid-column:1} }

/* sayfa ici basliklar (sag) */
.belge-toc{display:none}
@media (min-width:1260px){
  .belge-toc{display:block; position:sticky; top:calc(var(--ust-bar, 0px) + 20px); align-self:start; font-size:13.5px}
  .belge-toc b{display:block; font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); margin-bottom:8px}
  .belge-toc ul{list-style:none; margin:0; padding:0; border-left:1px solid var(--line)}
  .belge-toc a{display:block; padding:5px 12px; margin-left:-1px; border:0; border-left:2px solid transparent; color:var(--dim); line-height:1.4}
  .belge-toc a:hover{color:var(--deep)}
  .belge-toc a.etkin{color:var(--deep); border-left-color:var(--brand); font-weight:600}
}

/* belgeler ana sayfasi: bolum kartlari */
/* Bolum kartlari MASONRY (kullanici bulgusu 2026-09-24): kartlar farkli uzunlukta
   (ör. 13 ve 30 belge). Duz izgarada ayni satirdaki kartlar en uzunu kadar geriliyor,
   kisa kartin icinde ve altinda buyuk bos alan kaliyordu. Izgara satiri 2px; her kart
   kendi yuksekligi kadar satir kaplar (belgeler.js `bolumMasonry`, .masonry sinifini JS ekler). Okuma sirasi
   korunur (satir satir). JS yoksa kartlar gerilmez, yalniz uste hizalanir. */
.belge-bolumler{margin-top:28px; display:grid; gap:18px; align-items:start; grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr))}
.belge-bolumler.masonry{row-gap:0; grid-auto-rows:2px}
.belge-bolumler section{padding:22px; border:1px solid var(--line); border-radius:16px; background:var(--surface)}
.belge-bolumler.masonry section{margin-bottom:18px}
.belge-bolumler h2{margin:0; font-size:19px}
.belge-bolumler p{margin:6px 0 12px; font-size:14.5px; color:var(--faint)}
.belge-bolumler ul{margin:0; padding:0; list-style:none}
.belge-bolumler li a{display:block; padding:5px 0; border:0; font-size:15px}

/* ===========================================================================
   EKRAN NOTU - ekran goruntusu + ustune numarali isaret, OK ve kisa not.
   Notlar resme GOMULMEZ (belge kurali): HTML metin, keskin ve erisilebilir.
   Konumlar yuzde, style="--x:..; --y:..; --nx:..; --ny:.." (bkz. SABLON.md).
   - Genis (>=560px kap): not balonu (--nx,--ny) + OK (belgeler.js SVG ciziyor)
     + hedefte halka (--x,--y).
   - Dar: resim uzerinde yalniz numarali nokta (hedefte), notlar resmin
     ALTINDA numarali liste.
   JS yoksa: balonlar ve numaralar yine yerinde, yalniz ok cizilmez.
   =========================================================================== */
.ekran-notu{margin:22px 0 0; container-type:inline-size}
.en-sahne{position:relative; border-radius:14px; overflow:hidden; border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(42,33,53,.06), 0 24px 44px -28px rgba(44,24,74,.35); background:#fff}
.en-resim{position:relative}
.en-sahne img{display:block; width:100%; height:auto}
.en-oklar{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible}
.en-oklar .ok-hale{fill:none; stroke:#fff; stroke-width:7; stroke-linecap:round; opacity:.9}
.en-oklar .ok{fill:none; stroke:#6C3FA8; stroke-width:3; stroke-linecap:round}
.en-oklar .ok-uc{fill:#6C3FA8; stroke:#fff; stroke-width:1.5; stroke-linejoin:round}
.en-oklar .hedef{fill:rgba(130,89,210,.14); stroke:#8259D2; stroke-width:2.5}
.en-oklar .hedef-dis{fill:none; stroke:#fff; stroke-width:5; opacity:.9}
.en-notlar{margin:0; padding:0; list-style:none}
.en-notlar li{position:absolute; left:var(--nx); top:var(--ny); transform:translate(-50%,-50%); z-index:2;
  display:flex; align-items:flex-start; gap:8px; max-width:clamp(150px,30cqi,260px);
  padding:8px 12px 8px 8px; border-radius:12px; background:#2a1d47; color:#fff; font-size:13.5px; line-height:1.4; font-weight:600;
  box-shadow:0 10px 24px -10px rgba(20,10,40,.55), 0 0 0 2px rgba(255,255,255,.9)}
.en-no{flex:0 0 22px; height:22px; border-radius:999px; display:grid; place-items:center;
  background:#fff; color:#6C3FA8; font-size:12.5px; font-weight:800}
.en-nokta{display:none}
.en-altyazi{margin-top:10px; font-size:13.5px; color:var(--faint)}
/* Dar kap: balonlar listeye iner, resimde numarali nokta kalir. */
@container (max-width:559px){
  .en-notlar{margin-top:14px; display:grid; gap:8px}
  .en-notlar li{position:static; transform:none; max-width:none; background:var(--surface2); color:var(--text); box-shadow:none;
    border:1px solid var(--line); font-weight:500}
  .en-notlar .en-no{background:var(--grad-dugme, var(--grad)); color:#fff}
  .en-oklar .ok,.en-oklar .ok-hale,.en-oklar .ok-uc{display:none}
  .en-nokta{display:grid; position:absolute; left:var(--x); top:var(--y); transform:translate(-50%,-50%); z-index:2;
    width:24px; height:24px; border-radius:999px; place-items:center; font-size:12.5px; font-weight:800;
    background:var(--grad-dugme, var(--grad)); color:#fff; box-shadow:0 0 0 2px #fff, 0 4px 10px -2px rgba(20,10,40,.5)}
}
@media print{ .belge-yan,.belge-toc,.belge-gecis{display:none} .belge-duzen{display:block} }
.belge-gizli{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
@container (max-width:559px){ .en-notlar{padding:0 12px 12px} }