/* ======================================================================
   desknot DOKÜMAN BİÇEMİ

   Ürün sayfasının havasından bilerek ayrı. Orası bir satış sayfası: geniş
   başlıklar, SF Pro, tam genişlik görseller, koyu paneller. Burası okunacak
   bir yer. Ölçüler yaygın doküman düzeninden alındı ve tek tek ölçüldü:

     gövde 16/28, h1 36/700 (-0.025em), h2 30/600 altında ince çizgi,
     yan menü 14 punto, etkin madde açık mavi hap, sayfa zemini #fafafa.

   Yazı tipi de oradan: işletim sisteminin kendi arayüz yazı tipi. Ürün
   sayfası SF Pro Display ile başlıyor, burası başlamıyor. Fark bilinçli.

   Tek marka izi mavi. Onu da bırakmak dokümanı başka birinin sitesi gibi
   gösterirdi.
   ====================================================================== */
:root{
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --tek: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas,
         "Liberation Mono", monospace;

  --acc:#2f7ff5; --acc-kuvvetli:#1c5fc4; --acc-zemin:#e6efff;
  --sayfa:#fafafa; --kart:#ffffff;
  --baslik:#0f172a; --metin:#334155; --sonuk:#64748b; --soluk:#94a3b8;
  --cizgi:#e4e4e7; --cizgi-koyu:#d4d4d8;
  --kod:rgba(0,0,0,.055); --kod-yazi:#0f172a;
  --pre:#f6f7f9;
  --logoAcik:block; --logoKoyu:none;
}
html[data-tema="koyu"]{
  --acc:#5aa2ff; --acc-kuvvetli:#96c4ff; --acc-zemin:rgba(90,162,255,.16);
  --sayfa:#080d14; --kart:#111a26;
  --baslik:#f4f6f9; --metin:#c3ccd8; --sonuk:#8f9aa9; --soluk:#6b7686;
  --cizgi:#1e2936; --cizgi-koyu:#2a3746;
  --kod:rgba(255,255,255,.09); --kod-yazi:#e6ecf4;
  --pre:#0e1620;
  --logoAcik:none; --logoKoyu:block;
}
*,*::before,*::after{ box-sizing:border-box }
html{ scroll-behavior:smooth; scroll-padding-top:88px; background:var(--sayfa) }
body{ margin:0; background:var(--sayfa); color:var(--metin);
  font-family:var(--font); font-size:16px; line-height:1.75;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  /* YATAY KAYMA KAPALI. Kapalı menü katmanı ekranın sağ dışında duruyor ve
     kaydırma alanını genişletiyor, telefonda sayfa parmakla sağa sola
     çekilebiliyordu. Ürün sayfasında bu kural zaten vardı, dokümanda yoktu.
     Geniş içerik (tablo, kod, şema, formül) kendi kabında kayıyor, bu kural
     onları etkilemiyor. */
  overflow-x:hidden }
a{ color:var(--acc); text-decoration:none }
a:hover{ text-decoration:underline }

/* --- üst şerit --- */
.ust{ position:sticky; top:0; z-index:40; height:64px;
  background:color-mix(in srgb, var(--sayfa) 85%, transparent);
  backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--cizgi) }
@supports not (background:color-mix(in srgb, red 50%, blue)){ .ust{ background:var(--sayfa) } }
.ust__ic{ display:flex; align-items:center; gap:12px; height:64px;
  max-width:1440px; margin-inline:auto; padding-inline:clamp(16px,3vw,28px) }
.ust__logo{ flex:none; display:flex; align-items:center }
.ust__logo img{ height:28px; width:auto }
.ust__logo img.logoAcik{ display:var(--logoAcik) }
.ust__logo img.logoKoyu{ display:var(--logoKoyu) }
.ust__et{ flex:none; padding:2px 8px; border-radius:6px; font-size:.78rem; font-weight:600;
  color:var(--sonuk); border:1px solid var(--cizgi) }
.ust__sag{ margin-left:auto; display:flex; align-items:center; gap:8px; min-width:0 }
.araclar{ display:flex; align-items:center; gap:8px }

/* Arama üst şeritte, yan menüde değil. Doküman düzeninde alışılmış yer
   burası ve dar ekranda yan menü katmanının içine hapsolmuyor. */
.ara{ position:relative; flex:1 1 auto; min-width:0; max-width:264px }
.ara input{ width:100%; height:34px; padding:0 46px 0 32px; border:0; border-radius:8px;
  font:inherit; font-size:.875rem; color:var(--baslik); background:var(--kod) }
.ara input::placeholder{ color:var(--soluk) }
.ara input:focus{ outline:2px solid var(--acc); outline-offset:-1px }
.ara > svg{ position:absolute; left:10px; top:9px; width:16px; height:16px;
  fill:none; stroke:var(--soluk); stroke-width:2; stroke-linecap:round; pointer-events:none }
.ara kbd{ position:absolute; right:8px; top:8px; padding:1px 6px; border-radius:5px;
  font:inherit; font-size:.7rem; font-weight:600; color:var(--soluk);
  background:var(--kart); border:1px solid var(--cizgi) }
.ara input:focus + svg + kbd, .ara input:not(:placeholder-shown) ~ kbd{ display:none }
.ara__sonuc{ position:absolute; left:0; right:0; top:calc(100% + 8px); z-index:50;
  max-height:66vh; overflow-y:auto; border-radius:10px; background:var(--kart);
  border:1px solid var(--cizgi); box-shadow:0 12px 34px rgba(15,23,42,.13); display:none }
html[data-tema="koyu"] .ara__sonuc{ box-shadow:0 12px 34px rgba(0,0,0,.5) }
.ara__sonuc.gorun{ display:block }
.ara__sonuc a{ display:block; padding:9px 12px; border-bottom:1px solid var(--cizgi);
  color:var(--metin); text-decoration:none }
.ara__sonuc a:last-child{ border-bottom:0 }
.ara__sonuc a:hover, .ara__sonuc a.secili{ background:var(--acc-zemin) }
.ara__sonuc b{ display:block; font-size:.875rem; font-weight:600; color:var(--baslik) }
.ara__sonuc span{ display:block; font-size:.8rem; color:var(--sonuk);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.ara__yok{ margin:0; padding:11px 12px; font-size:.85rem; color:var(--sonuk) }

.dil{ display:inline-flex; border:1px solid var(--cizgi); border-radius:8px; overflow:hidden }
.dil a{ padding:5px 10px; font-size:.75rem; font-weight:600; color:var(--sonuk) }
.dil a:hover{ text-decoration:none; color:var(--baslik) }
.dil a.acik{ background:var(--acc-zemin); color:var(--acc-kuvvetli) }
.tema, .burger{ display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; padding:0; cursor:pointer; color:var(--sonuk);
  background:transparent; border:1px solid var(--cizgi); border-radius:8px }
.tema:hover, .burger:hover{ color:var(--baslik) }
.tema svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round }
.tema .gunes{ display:none } html[data-tema="koyu"] .tema .ay{ display:none }
html[data-tema="koyu"] .tema .gunes{ display:block }
.burger{ display:none; flex:none; flex-direction:column; gap:3px }
.burger i{ display:block; width:15px; height:1.5px; border-radius:2px; background:currentColor }

/* --- üç sütun --- */
.kabuk{ display:grid; grid-template-columns:246px minmax(0,1fr) 216px;
  gap:clamp(20px,3vw,48px); max-width:1440px; margin-inline:auto;
  padding:0 clamp(16px,3vw,28px) 96px }

/* --- yan gezinme --- */
.yan{ position:sticky; top:64px; align-self:start; max-height:calc(100vh - 64px);
  overflow-y:auto; padding:28px 0 48px; font-size:.875rem }
.yan__grup{ margin-bottom:20px }
.yan__grup > b{ display:block; margin:0 0 6px 8px; font-size:.875rem; font-weight:600;
  color:var(--baslik) }
.yan a{ display:block; padding:6px 8px; border-radius:5px; color:var(--sonuk);
  font-weight:400; line-height:1.45 }
.yan a:hover{ color:var(--baslik); background:var(--kod); text-decoration:none }
.yan a.acik{ color:var(--acc-kuvvetli); background:var(--acc-zemin); font-weight:600 }

/* --- içerik --- */
.icerik{ min-width:0; max-width:760px; padding:36px 0 0 }
.iz{ display:flex; align-items:center; gap:6px; margin:0 0 6px;
  font-size:.875rem; color:var(--sonuk) }
.iz svg{ width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round; opacity:.7 }
.icerik h1{ margin:0 0 0; font-size:2.25rem; font-weight:700; line-height:1.12;
  letter-spacing:-.025em; color:var(--baslik) }
.icerik h2{ margin:2.5rem 0 1rem; padding-bottom:.35em; font-size:1.5rem; font-weight:600;
  line-height:1.3; letter-spacing:-.02em; color:var(--baslik);
  border-bottom:1px solid var(--cizgi) }
.icerik h3{ margin:2rem 0 .75rem; font-size:1.18rem; font-weight:600;
  letter-spacing:-.01em; color:var(--baslik) }
.icerik p{ margin:1.25rem 0 0 }
.icerik ul, .icerik ol{ margin:1.25rem 0 0; padding-left:1.4em }
.icerik li{ margin-top:.4em }
.icerik li::marker{ color:var(--soluk) }
.icerik strong{ font-weight:600; color:var(--baslik) }
.icerik a{ text-decoration:underline; text-underline-offset:2px;
  text-decoration-color:color-mix(in srgb, var(--acc) 45%, transparent) }
.icerik code{ font-family:var(--tek); font-size:.875em; padding:.15em .4em;
  border-radius:4px; background:var(--kod); color:var(--kod-yazi) }
.icerik pre{ margin:1.35rem 0 0; padding:14px 16px; border-radius:10px; overflow-x:auto;
  background:var(--pre); border:1px solid var(--cizgi) }
.icerik pre code{ padding:0; background:none; font-size:.86rem; line-height:1.7;
  color:var(--metin) }
.icerik table{ display:block; overflow-x:auto; width:100%; margin:1.35rem 0 0;
  border-collapse:collapse; font-size:.9rem }
.icerik th, .icerik td{ padding:9px 14px; text-align:left; vertical-align:top;
  border-bottom:1px solid var(--cizgi) }
.icerik thead th{ font-weight:600; color:var(--baslik);
  border-bottom:1px solid var(--cizgi-koyu) }
.icerik blockquote{ margin:1.35rem 0 0; padding:2px 16px; color:var(--sonuk);
  border-left:2px solid var(--cizgi-koyu) }
.icerik img{ max-width:100%; height:auto; border-radius:10px }
.icerik h2 a.baglanti, .icerik h3 a.baglanti{ margin-left:.35em; opacity:0;
  color:var(--soluk); font-weight:400; text-decoration:none }
.icerik h2:hover a.baglanti, .icerik h3:hover a.baglanti{ opacity:1 }

/* --- sayfa altı gezinme --- */
.komsu{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:64px;
  padding-top:28px; border-top:1px solid var(--cizgi) }
.komsu a{ padding:14px 16px; border-radius:10px; border:1px solid var(--cizgi);
  background:var(--kart); color:var(--baslik); text-decoration:none }
.komsu a:hover{ border-color:var(--acc); text-decoration:none }
.komsu span{ display:block; margin-bottom:2px; font-size:.78rem; color:var(--sonuk) }
.komsu b{ font-size:.94rem; font-weight:600 }
.komsu .sag{ text-align:right }
.komsu .bos{ visibility:hidden }

/* --- sağdaki içindekiler --- */
.bu{ position:sticky; top:64px; align-self:start; max-height:calc(100vh - 64px);
  overflow-y:auto; padding:40px 0 48px; font-size:.875rem }
.bu > b{ display:block; margin-bottom:10px; font-size:.875rem; font-weight:600;
  color:var(--baslik) }
.bu a{ display:block; padding:4px 0; color:var(--sonuk); line-height:1.5 }
.bu a:hover{ color:var(--baslik); text-decoration:none }
.bu a.acik{ color:var(--acc); font-weight:500 }
.bu a.iki{ padding-left:14px }

footer.dfoot{ border-top:1px solid var(--cizgi); margin-top:0;
  padding:22px clamp(16px,3vw,28px); font-size:.85rem; color:var(--sonuk);
  display:flex; flex-wrap:wrap; gap:8px 18px; max-width:1440px; margin-inline:auto }

/* Dar ekranda üç sütun tek sütuna iner. Sağdaki içindekiler tamamen kalkar:
   ikinci bir gezinme listesi dar ekranda okumayı kolaylaştırmıyor, sayfayı
   uzatıyor. Yan gezinme katman olarak açılıyor. */
@media (max-width:1200px){
  .kabuk{ grid-template-columns:236px minmax(0,1fr) }
  .bu{ display:none }
}
/* DAR EKRANDA ÜST ŞERİTTE YALNIZCA LOGO, ARAMA VE MENÜ DÜĞMESİ KALIR.
   Önce dil, tema, ev ve GitHub da oradaydı; altısı birden sığmayınca şerit
   taşıyor ve menü düğmesi görünmez oluyordu. Bu dördü menünün içine
   taşınıyor, taşımayı JS yapıyor çünkü CSS bir öğeyi başka bir kabın içine
   alamıyor. Kopya işaretleme yazmadım: `id="tema"` iki kez geçseydi tema
   düğmesi tarayıcıda ilk bulduğuna bağlanır, ikincisi ölü kalırdı. */
@media (max-width:900px){
  .burger{ display:inline-flex }
  .ust__et{ display:none }
  .ust__ic{ gap:10px }
  .kabuk{ grid-template-columns:minmax(0,1fr) }
  .icerik{ padding-top:26px; max-width:none }
  .yan{ position:fixed; inset:64px 0 0 auto; z-index:35; width:min(300px,84vw);
    max-height:none; overflow-y:auto; padding:20px 18px 60px;
    background:var(--sayfa); border-left:1px solid var(--cizgi);
    /* Kapalıyken görünmez VE odaklanılamaz. Yalnızca kaydırmakla bıraksaydım
       klavyeyle gezerken odak ekranın dışındaki bağlantılara giderdi. */
    visibility:hidden;
    transform:translateX(100%); transition:transform .2s ease, visibility .2s }
  body.ynav-acik .yan{ transform:none; visibility:visible }
  /* Gövde JS ile sabitleniyor, kaydırma çubuğu da gizlensin ki katmanın
     arkasında ölü bir çubuk durmasın. */
  body.ynav-acik{ overflow:hidden }
  body.ynav-acik::after{ content:""; position:fixed; inset:64px 0 0; z-index:34;
    background:rgba(9,12,18,.4) }
  .komsu{ grid-template-columns:1fr }
}
/* Menünün içindeki araç şeridi: bağlantı listesinden ince bir çizgiyle
   ayrılıyor ve dokunma hedefleri büyütülüyor. */
.yan .araclar{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin:0 0 18px; padding:0 0 16px;
  border-bottom:1px solid var(--cizgi);
}
.yan .araclar .tema{ width:38px; height:38px }
.yan .araclar .dil a{ padding:8px 14px; font-size:.8rem }

@media (max-width:560px){
  .ara kbd{ display:none }
  .ara input{ padding-right:12px }
}
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto } .yan{ transition:none } }

/* Sayfa altındaki imza. Şu an yalnızca senkronizasyon sayfasında var:
   orada teknik bir iddia ve ölçüm yorumu taşındığı için sorumluluğun kimde
   olduğu yazılı. Genel anlatım sayfalarında imza yok. */
.imza__cizgi{ margin:2.6rem 0 1.1rem; border:0; border-top:1px solid var(--cizgi) }
.imza{ margin:0; font-size:.92rem; color:var(--sonuk) }
.imza a{ color:var(--baslik); text-decoration:none }
.imza a:hover{ color:var(--acc); text-decoration:underline }
.imza b{ color:inherit; font-weight:600 }

/* BAŞA DÖN DÜĞMESİ. Doküman sayfaları uzun, özellikle senkronizasyon ve ses
   işleme. Telefonda başa dönmek için parmakla tepeye kadar sürüklemek
   gerekiyordu. Düğme yalnızca bir ekran boyu inildikten sonra beliriyor,
   yukarıdayken görünmesinin bir anlamı yok. Menü açıkken gizleniyor, çünkü
   katmanın üstünde asılı kalıyordu. */
.dyukari{
  position:fixed; right:clamp(14px,3vw,26px); bottom:clamp(14px,3vw,26px); z-index:30;
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; padding:0; cursor:pointer;
  color:var(--sonuk); background:var(--kart);
  border:1px solid var(--cizgi); border-radius:50%;
  box-shadow:0 6px 20px rgba(15,23,42,.13);
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s, color .16s, border-color .16s;
}
html[data-tema="koyu"] .dyukari{ box-shadow:0 6px 20px rgba(0,0,0,.5) }
.dyukari svg{ width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:2.2;
  stroke-linecap:round; stroke-linejoin:round }
.dyukari:hover{ color:var(--acc); border-color:var(--acc) }
.dyukari.gorun{ opacity:1; visibility:visible; transform:none }
body.ynav-acik .dyukari{ opacity:0; visibility:hidden }
@media (prefers-reduced-motion:reduce){ .dyukari{ transition:none } }


/* MATEMATİK. Formüller derleme sırasında LaTeX ile SVG'ye çevriliyor ve
   sayfaya gömülüyor. Çalışma zamanında hiçbir kütüphane yüklenmiyor: KaTeX
   ya da MathJax her doküman sayfasına yüz kilobaytların üstünde JS ve yazı
   tipi ekler, oysa formüller hiç değişmiyor. Renk `currentColor`, koyu temada
   da okunuyor. */
.fml{ margin:1.5rem 0 0; padding:16px 18px; border-radius:10px; overflow-x:auto;
  background:var(--kart); border:1px solid var(--cizgi); text-align:center }
.fml__svg{ display:inline-block; width:auto; max-width:100%; height:auto;
  color:var(--baslik); vertical-align:middle }
/* dvisvgm dolgu yazmıyor, SVG varsayılanı siyah. Koyu temada formül
   görünmez oluyordu. Rengi burada veriyoruz: çıktı biçimi sürüme göre
   değişebildiği için dize değiştirmeye güvenmiyoruz. */
.fml__svg g, .fml__svg use, .fml__svg path, .fml__svg rect{ fill:currentColor }
.fml figcaption, .fml > figcaption{ margin-top:12px; font-size:.83rem; color:var(--sonuk) }
.fml + .fml{ margin-top:.7rem }

/* ======================================================================
   ŞEMALAR VE PANEL MAKETLERİ

   Şemalar EL YAZISI SVG, mermaid değil. Mermaid'in tarayıcı çizicisi
   sıkıştırılmış halde iki buçuk megabaytın üstünde ve bu sunucuda derleme
   sırasında çalıştırılamıyor: Node 8.10 var, mermaid-cli 18 istiyor. Yani
   tek yol çiziciyi her doküman sayfasına yüklemekti, sekiz kilobaytlık bir
   sayfaya. SVG hem anında geliyor hem tema değişkenlerini kullanıyor.
   ====================================================================== */
.sema{ margin:1.6rem 0 0; padding:18px 16px; border-radius:10px;
  background:var(--kart); border:1px solid var(--cizgi); overflow-x:auto }
.sema svg{ display:block; width:100%; height:auto; min-width:460px }
.sema figcaption{ margin-top:12px; font-size:.83rem; color:var(--sonuk); text-align:center }
.sema .kutu{ fill:var(--kod); stroke:var(--cizgi-koyu); stroke-width:1 }
.sema .kutu-v{ fill:var(--acc-zemin); stroke:var(--acc); stroke-width:1.2 }
.sema .ok{ fill:none; stroke:var(--soluk); stroke-width:1.6; stroke-linecap:round }
.sema .ok-v{ fill:none; stroke:var(--acc); stroke-width:2; stroke-linecap:round }
.sema .kesik{ stroke-dasharray:4 4 }
.sema .ucu{ fill:var(--soluk) } .sema .ucu-v{ fill:var(--acc) }
.sema text{ font-family:var(--font); fill:var(--baslik); font-size:12.5px }
.sema text.kucuk{ font-size:11px; fill:var(--sonuk) }
.sema text.vurgu{ fill:var(--acc-kuvvetli); font-weight:600 }
.sema text.kalin{ font-weight:600 }
.sema .cizgi{ stroke:var(--cizgi-koyu); stroke-width:1 }

/* --- Studio ekranı maketi --- */
.mak{ margin:1.6rem 0 0; border-radius:10px; overflow:hidden; font-size:.9rem;
  background:#0d1219; color:#e9eef6; border:1px solid var(--cizgi) }
.mak__ust{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:11px 14px; border-bottom:1px solid rgba(255,255,255,.09) }
.mak__ust b{ font-size:.88rem; color:#fff }
.mak__canli{ display:inline-flex; align-items:center; gap:7px; font-size:.76rem; color:#8ea1b8 }
.mak__canli i{ width:7px; height:7px; border-radius:50%; background:#2ecc71; flex:none }
.mak__ic{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:12px; padding:14px }
.mak__k{ background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.08);
  border-radius:10px; padding:13px }
.mak__k h4{ margin:0 0 2px; font-size:.9rem; font-weight:600; color:#fff }
.mak__k > p{ margin:0 0 12px; font-size:.78rem; color:#7d8fa5 }
.mak__et{ margin:0 0 6px; font-size:.65rem; letter-spacing:.09em; text-transform:uppercase;
  color:#7d8fa5 }
.mak__ray{ position:relative; height:4px; margin-bottom:13px; border-radius:3px;
  background:rgba(255,255,255,.14) }
.mak__ray i{ display:block; height:100%; width:var(--v,50%); border-radius:3px; background:#0b86d6 }
.mak__ray b{ position:absolute; top:50%; left:var(--v,50%); width:11px; height:11px;
  margin:-5.5px 0 0 -5.5px; border-radius:50%; background:#0b86d6 }
.mak__ray:last-child{ margin-bottom:0 }
.mak__sec{ display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:8px 11px; margin-bottom:13px; border-radius:8px; font-size:.83rem; color:#dde6f2;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12) }
.mak__sec::after{ content:""; flex:none; width:6px; height:6px; margin-top:-3px;
  border:solid #7d8fa5; border-width:0 1.5px 1.5px 0; transform:rotate(45deg) }
.mak__onay{ display:flex; align-items:center; gap:8px; margin:0 0 13px;
  font-size:.83rem; color:#dde6f2 }
.mak__onay i{ position:relative; flex:none; width:14px; height:14px; border-radius:4px;
  background:#0b86d6 }
.mak__onay i::after{ content:""; position:absolute; left:4.5px; top:1.5px; width:3px; height:6px;
  border:solid #fff; border-width:0 2px 2px 0; transform:rotate(42deg) }
.mak__onay.bos i{ background:transparent; border:1px solid rgba(255,255,255,.28) }
.mak__onay.bos i::after{ display:none }
.mak__m{ display:grid; grid-template-columns:12px minmax(0,1fr) 58px; align-items:center;
  gap:9px; margin-bottom:6px; font-size:.74rem; color:#8ea1b8 }
.mak__m u{ text-decoration:none; font-weight:700; color:#7d8fa5 }
.mak__m span{ text-align:right }
.mak__mray{ height:10px; border-radius:3px; background:rgba(255,255,255,.07); overflow:hidden }
.mak__mray i{ display:block; height:100%; width:var(--v,70%);
  background:linear-gradient(90deg,#2ecc71 0%,#2ecc71 54%,#e6c33f 78%,#e05b4a 100%) }
.mak__olcek{ display:flex; justify-content:space-between; margin:2px 20px 0;
  font-size:.62rem; color:#66788c }
.icerik .mak p{ margin:0 0 12px }


/* --- desknot marka basligi ---------------------------------------------
   Yazili logo yerine ikon + metin: her iki temada da kesin okunur ve
   olceklendiginde bulaniklasmaz. "not" hecesi marka rengiyle ayrilir. */
.ust__logo{ display:flex; align-items:center; gap:9px }
.ust__logo img{ width:30px; height:30px; display:block }
.ust__ad{ font-size:19px; font-weight:700; letter-spacing:-.4px; color:var(--baslik) }
.ust__ad b{ color:var(--acc); font-weight:700 }