/* Özellik ve protokol sayfaları (Views/UrunSayfasi): yan gezinti + içerik sütunu. Program bağlamı data-program="studio|live|convert" ile --pc değişkenlerini alır. */
.us{background:var(--beyaz); padding-block:clamp(36px,5vw,72px) clamp(40px,5vw,80px)}
.us-duzen{display:grid; grid-template-columns:260px minmax(0,1fr); gap:clamp(28px,4vw,64px); align-items:start}

/* ---- yan gezinti ---- */
.us-yan{position:sticky; top:calc(var(--ust-yuk) + 24px); max-height:calc(100vh - var(--ust-yuk) - 48px); overflow-y:auto; overscroll-behavior:contain; padding-right:6px}
.us-yan-baslik{margin:0 0 12px; font:700 .72rem/1 var(--font-baslik); letter-spacing:.16em; text-transform:uppercase; color:var(--gri)}
.us-yan-liste{list-style:none; margin:0; padding:0; display:grid; gap:2px}
.us-yan-liste>li>a{display:flex; align-items:center; gap:10px; padding:8px 14px 8px 12px; border-radius:10px; color:var(--metin); font:600 .93rem/1.35 var(--font-govde); text-decoration:none; border-left:3px solid transparent}
.us-yan-liste>li>a:hover{background:var(--zemin); color:var(--lac); text-decoration:none}
.us-yan-liste>li>a[aria-current="page"]{background:var(--pc-zemin,#E8F0FB); color:var(--lac); font-weight:700; border-left-color:var(--pc,var(--baglanti))}
.us-yan-bolumler{list-style:none; margin:4px 0 8px 17px; padding:0 0 0 12px; border-left:1px solid var(--cizgi); display:grid; gap:1px}
.us-yan-bolumler a{display:block; padding:5px 10px; font:500 .85rem/1.35 var(--font-govde); color:var(--gri); text-decoration:none; border-radius:8px}
.us-yan-bolumler a:hover{color:var(--lac); background:var(--zemin); text-decoration:none}

/* ---- içerik ---- */
.us-icerik{min-width:0; max-width:820px}
.us-bolum{padding-top:clamp(8px,1.5vw,16px); margin-bottom:clamp(36px,4.5vw,60px); scroll-margin-top:calc(var(--ust-yuk) + 20px)}
.us-bolum>h2{font-size:clamp(1.45rem,2.3vw,1.9rem); margin-bottom:.7em; padding-bottom:.45em; border-bottom:1px solid var(--cizgi-2)}
.us-bolum>*+*{margin-top:1.1rem}
.us-bolum>h2+*{margin-top:0}
.us-metin p{margin:0 0 1em; max-width:72ch}
.us-metin ul{margin:0 0 1em; padding-left:1.25em; max-width:72ch}
.us-metin li{margin-bottom:.4em}
.us-metin li::marker{color:var(--pc,var(--baglanti))}
.us-metin>:last-child{margin-bottom:0}
.us-metin code,.us-tablo code,.us-adim-m code,.us-not code,.us-adim-b code{font:600 .88em/1.4 ui-monospace,"Cascadia Mono",Consolas,monospace; padding:.12em .42em; border-radius:6px; background:#EEF2F9; color:var(--lac)}
.us-metin a,.us-adim-m a,.us-not a,.us-tablo a{color:var(--pc2,var(--baglanti))}

/* görseller */
.us-gorseller{display:grid; gap:14px}
.us-gorseller--cok{grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start}
.us-gorseller .cerceve{margin:0}

/* tablo */
.us-tablo{min-width:520px}
.us-tablo tbody td:first-child{font-weight:650; color:var(--lac)}
.us-tablo td{line-height:1.55}

/* adımlar */
.us-adimlar{list-style:none; margin:0; padding:0; display:grid; gap:18px; counter-reset:adim}
.us-adimlar>li{position:relative; counter-increment:adim; padding-left:56px; min-height:40px}
.us-adimlar>li::before{content:counter(adim); position:absolute; left:0; top:-2px; display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:var(--pc-zemin,#E8F0FB); color:var(--pc2,var(--lac)); font:800 .95rem/1 var(--font-baslik); border:1px solid color-mix(in srgb,var(--pc,#1C6BD0) 28%,transparent)}
.us-adim-b{display:block; margin-bottom:.2em; color:var(--lac); font:700 1.02rem/1.4 var(--font-baslik); letter-spacing:-.01em}
.us-adim-m p{margin:0 0 .6em; max-width:70ch}
.us-adim-m>:last-child{margin-bottom:0}

/* kod / adres örnekleri */
.us-kod pre{font-size:.85rem}
.us-satir{display:block; white-space:pre}
.us-adr{display:inline-block; min-width:var(--w,12ch); color:#9BE0B0}

/* not + çipler */
.us-not>div{min-width:0}
.us-not p{margin:0 0 .6em}
.us-not p:last-child{margin-bottom:0}
.us-cipler{list-style:none; margin:0; padding:0}

/* ilgili sayfalar + önceki / sonraki */
.us-ilgili{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px}
.us-ilgili-kart{display:block; padding:20px 22px; text-decoration:none; color:var(--metin)}
.us-ilgili-kart small{display:block; margin-bottom:6px; font:700 .7rem/1 var(--font-baslik); letter-spacing:.14em; text-transform:uppercase; color:var(--pc,var(--gri))}
.us-ilgili-kart h3{font-size:1.1rem; margin:0 0 .3em; color:var(--lac)}
.us-ilgili-kart p{margin:0; font-size:.93rem; line-height:1.55; color:var(--gri)}
.us-sira{display:flex; justify-content:space-between; gap:16px; margin-top:clamp(36px,4.5vw,60px); padding-top:24px; border-top:1px solid var(--cizgi-2)}
.us-sira a{display:grid; gap:2px; max-width:48%; padding:10px 14px; border-radius:12px; text-decoration:none; color:var(--lac)}
.us-sira a:hover{background:var(--zemin); text-decoration:none}
.us-sira small{font:700 .7rem/1 var(--font-baslik); letter-spacing:.14em; text-transform:uppercase; color:var(--gri)}
.us-sira span{font:650 1rem/1.35 var(--font-baslik)}
.us-sira-sonraki{text-align:right; margin-left:auto}

/* sık sorulanlar: içerik sütununda */
.us .v2-sss{margin-inline:0; max-width:none}

/* ---- dar ekran: yan gezinti içeriğin üstünde yatay şeride döner ---- */
@media (max-width:980px){
  .us-duzen{grid-template-columns:minmax(0,1fr); gap:24px}
  .us-yan{position:static; max-height:none; overflow:visible; padding:0}
  .us-yan-baslik{margin-bottom:8px}
  .us-yan-liste{display:flex; gap:6px; overflow-x:auto; padding-bottom:6px; scrollbar-width:thin}
  .us-yan-liste>li{flex:none}
  .us-yan-liste>li>a{border-left:0; border:1px solid var(--cizgi); border-radius:99px; padding:8px 15px; white-space:nowrap; background:#fff}
  .us-yan-liste>li>a[aria-current="page"]{border-color:var(--pc,var(--baglanti))}
  .us-yan-bolumler{display:none}
}
@media (max-width:640px){
  .us-gorseller--cok,.us-ilgili{grid-template-columns:minmax(0,1fr)}
  .us-adimlar>li{padding-left:50px}
  .us-sira{flex-direction:column}
  .us-sira a{max-width:none}
  .us-sira-sonraki{text-align:left; margin-left:0}
}

/* yan gezinti simgeleri */
.us-ik{display:inline-grid; place-items:center; flex:none; width:26px; height:26px; border-radius:8px; background:var(--zemin); color:var(--pc2,var(--gri))}
.us-ik .ikon{width:15px; height:15px}
.us-ik--mono{width:34px; font:800 .62rem/1 var(--font-baslik); letter-spacing:.03em; color:var(--lac-700)}
.us-yan-liste>li>a[aria-current="page"] .us-ik{background:#fff}
.us-yan-liste>li>a:hover .us-ik{background:#fff}