/* ============================================================
   TG Dashboard — Yeni tasarım (beta)
   ------------------------------------------------------------
   style-v2.css'in ÜSTÜNE yüklenir; yalnızca "Yeni tasarım" açık olan
   tarayıcıda (tg_beta çerezi). v2 token tabanlı: 29 şablon kendi
   <style> bloklarını var(--card), var(--muted) gibi adlarla yazıyor, o
   yüzden asıl iş token'ları yeniden tanımlamak. Bileşen kuralları az ve
   seçici; hiçbir form, alan adı ya da rota değişmez.

   Kapatınca bu dosya hiç yüklenmez. Bir kural sorun çıkarırsa yalnızca
   beta açık olanı etkiler.

   Değerler (tasarım sistemi):
     zemin   #0B0F17   kart #111723   ikinci yüzey #161D2B
     vurgu   Telegram mavisi #229ED9 (çizgi, ikon, odak)
     dolgu   #1677AE  (beyaz yazıyla 4.9:1 — AA)
     durum   yeşil aktif · amber uyarı · kırmızı hata · gri pasif
     yazı    Geist / Geist Mono, sayılarda tabular-nums
     boşluk  4/8px ızgara · köşe 9/12/14px · 1px yarı saydam çizgi
   ============================================================ */

/* ---------------------------------------------------- 1. ölçekler */
:root {
  --sans: "Geist", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: var(--sans);
  --mono: "Geist Mono", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --r-sm: 7px;
  --r-md: 9px;
  --r-lg: 12px;
  --r-xl: 14px;

  --header-h: 56px;
  --nav-w: 240px;
  --nav-mini: 64px;

  /* Telegram mavisi rampası: v2'nin "brand" adlarını yeniden doldurur, böylece
     marka rengini doğrudan kullanan her yer de değişir. */
  --brand-50:  #EAF6FC;
  --brand-100: #D3ECF8;
  --brand-200: #A6D8F1;
  --brand-300: #6FC0EA;
  --brand-400: #3FAEE2;
  --brand-500: #229ED9;
  --brand-600: #1677AE;
  --brand-700: #0F6696;

  --tg-blue: #229ED9;
}

/* ---------------------------------------------------- 2. açık palet */
:root[data-theme="light"] {
  color-scheme: light;
  --bg:         #F5F7FA;
  --bg-soft:    #EEF1F6;
  --surface:    #FFFFFF;
  --surface-2:  #F3F5F9;
  --surface-3:  #EBEFF5;
  --surface-sunken: #EEF1F6;

  --line:        rgba(15, 23, 42, .09);
  --line-soft:   rgba(15, 23, 42, .06);
  --line-strong: rgba(15, 23, 42, .18);

  --text:   #0E1525;
  --text-2: #2C3648;
  --muted:  #4F5A6C;
  --faint:  #646E80;   /* 4.8:1 sayfa zemininde (önceki ton 4.3'te kalıyordu) */

  --accent:      #1677AE;
  --accent-hover:#0F6696;
  --accent-ink:  #FFFFFF;
  --accent-soft: rgba(22, 119, 174, .10);
  --accent-dim:  rgba(22, 119, 174, .40);
  --accent-text: #0F6696;

  --focus-ring: rgba(34, 158, 217, .35);

  --tg-chat:   #D9E3EC;
  --tg-bubble: #FFFFFF;
  --tg-key:    rgba(22, 119, 174, .10);
  --tg-link:   #1A73C9;
}

/* ---------------------------------------------------- 3. koyu palet (öncelikli) */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:         #0B0F17;
  --bg-soft:    #0E131D;
  --surface:    #111723;
  --surface-2:  #161D2B;
  --surface-3:  #1B2333;
  --surface-sunken: #0B0F17;

  --line:        rgba(148, 163, 184, .12);
  --line-soft:   rgba(148, 163, 184, .07);
  --line-strong: rgba(148, 163, 184, .24);

  --text:   #E6EAF2;
  --text-2: #C7CFDC;
  --muted:  #9AA4B5;   /* 7.1:1 kart üstünde */
  --faint:  #7A8496;   /* 4.8:1 */

  --accent:      #1677AE;
  --accent-hover:#1C86C2;
  --accent-ink:  #FFFFFF;
  --accent-soft: rgba(34, 158, 217, .14);
  --accent-dim:  rgba(34, 158, 217, .45);
  --accent-text: #5DBDEB;

  --ok:        #34D27B;  --ok-ink: #04231A;
  --ok-soft:   rgba(52, 210, 123, .13);  --ok-border: rgba(52, 210, 123, .35);
  --warn:      #F5A524;  --warn-ink: #2A1B02;
  --warn-soft: rgba(245, 165, 36, .14);  --warn-border: rgba(245, 165, 36, .35);
  --danger:    #F2555A;  --danger-ink: #2B0D0A;
  --danger-soft: rgba(242, 85, 90, .14); --danger-border: rgba(242, 85, 90, .38);
  --info:      #5DBDEB;  --info-soft: rgba(34, 158, 217, .14); --info-border: rgba(34, 158, 217, .4);

  --sh-xs: none;
  --sh-sm: 0 1px 2px rgba(0, 0, 0, .35);
  --sh-md: 0 6px 16px -6px rgba(0, 0, 0, .55);
  --sh-lg: 0 16px 40px -10px rgba(0, 0, 0, .65);
  --focus-ring: rgba(34, 158, 217, .45);

  --tg-chat:   #0E1621;
  --tg-bubble: #182533;
  --tg-key:    rgba(255, 255, 255, .07);
  --tg-link:   #6AB3F3;
}

/* ---------------------------------------------------- 4. temel */
body { font-feature-settings: normal; letter-spacing: -0.003em; }
h1 { font-size: 1.5rem; letter-spacing: -0.015em; }
h2 { letter-spacing: -0.01em; }
.number, .num, .adsnums b, td.num, .tlwhen { font-variant-numeric: tabular-nums; }

:focus-visible {
  outline: 2px solid var(--tg-blue);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
input:focus, select:focus, textarea:focus {
  border-color: var(--tg-blue);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

/* ---------------------------------------------------- 5. menü */
.sidebar {
  background: var(--surface);
  padding: var(--sp-4) var(--sp-2) var(--sp-6);
  transition: width 200ms var(--ease), flex-basis 200ms var(--ease);
}
.sidebar h2 { margin-bottom: var(--sp-5); padding: 0 var(--sp-2); min-height: 32px; }
.sidebar h2::before {
  width: 30px; height: 30px; flex-basis: 30px; border-radius: var(--r-md);
  background: var(--tg-blue)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 2 11 13'/%3E%3Cpath d='M22 2 15 22l-4-9-9-4 20-7Z'/%3E%3C/svg%3E")
    center / 16px no-repeat;
  box-shadow: none;
}
.sidebar summary { padding: var(--sp-2) var(--sp-2) var(--sp-1); color: var(--faint); }
.sidebar a {
  padding: 7px var(--sp-2) 7px 10px;
  border-radius: var(--r-md);
  color: var(--muted);
  font-weight: 500;
}
.sidebar a:hover { background: var(--surface-2); color: var(--text); }
.sidebar a.active { background: var(--accent-soft); color: var(--text); font-weight: 600; }
.sidebar a.active .nav-ico { color: var(--tg-blue); }
.sidebar a .nav-ico { width: 17px; height: 17px; flex-basis: 17px; }

/* Daraltma düğmesi (beta.js ekler). */
.betacollapse {
  display: flex; width: 100%; align-items: center; gap: var(--sp-2);
  margin-top: var(--sp-4); min-height: 34px; padding: 6px 10px;
  background: transparent; border: 0; box-shadow: none;
  color: var(--faint); font-size: var(--fs-xs); justify-content: flex-start;
}
.betacollapse:hover { background: var(--surface-2); color: var(--text); box-shadow: none; }
.betacollapse svg { width: 16px; height: 16px; flex: 0 0 16px; }

/* Dar menü: yalnızca ikonlar, ad üstüne gelince görünür (title). Masaüstü
   için; telefonda menü zaten çekmece. Dar modda beta.js grupları açık tutar,
   kapalı bir grubun bağlantıları ikon olarak da görünsün diye. */
@media (min-width: 861px) {
  html.beta-mini .sidebar { width: var(--nav-mini); flex-basis: var(--nav-mini); padding-inline: var(--sp-2); }
  html.beta-mini .sidebar h2 { font-size: 0; justify-content: center; padding: 0; }
  html.beta-mini .sidebar summary { font-size: 0; padding: 0; height: 1px; margin: var(--sp-2) var(--sp-3);
                                   background: var(--line); pointer-events: none; }
  html.beta-mini .sidebar summary::after { display: none; }
  html.beta-mini .sidebar a { font-size: 0; justify-content: center; padding: 9px 0; gap: 0; }
  html.beta-mini .betacollapse { justify-content: center; font-size: 0; }
  html.beta-mini .betacollapse svg { transform: scaleX(-1); }
}

/* ---------------------------------------------------- 6. üst şerit */
.appbar { min-height: var(--header-h); border-bottom-color: var(--line); }
.betaburger { display: none; }
.betapill.on .betadot { box-shadow: 0 0 0 3px rgba(34, 158, 217, .25); }

/* ---------------------------------------------------- 7. kartlar */
.card {
  border-radius: var(--r-xl);
  border-color: var(--line);
  padding: var(--sp-5);
}
.card > h2, .cardhead h2 { font-size: .96rem; font-weight: 600; }
.card .small, .small { color: var(--muted); }
.grid > .card { border-radius: var(--r-lg); }
.grid > .card > div:first-child { color: var(--muted); font-size: var(--fs-xs); }
.grid > .card .number { font-size: 1.75rem; font-weight: 600; letter-spacing: -0.02em; }
/* Dikkat isteyen sayaç (bozuk YAML, tekrar): kartın kendisi kırmızılaşır. */
.grid > .card:has(.number.bad) { border-color: var(--danger-border); background: var(--danger-soft); }

.msg { border-radius: var(--r-lg); }

/* ---------------------------------------------------- 8. düğme ve alanlar */
button, .btn { border-radius: var(--r-md); min-height: 34px; font-weight: 500; }
button.secondary, .btn.secondary { background: var(--surface-2); border-color: var(--line-strong); }
button.secondary:hover, .btn.secondary:hover { border-color: var(--faint); }
input, select, textarea {
  background: var(--surface-2);
  border-color: var(--line-strong);
  border-radius: var(--r-md);
}
:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea { background: var(--surface-2); color: var(--text); }

/* ---------------------------------------------------- 9. tablolar */
.wrap { border-radius: var(--r-lg); border-color: var(--line); }
.wrap th { font-size: var(--fs-xs); font-weight: 500; color: var(--faint);
           text-transform: none; letter-spacing: 0; }
.wrap tbody tr { transition: background-color 150ms var(--ease); }
.wrap tbody tr:hover { background: var(--surface-2); }

/* ---------------------------------------------------- 10. rozet ve çipler
   10-14 arası kurallar html[data-beta] ile başlıyor: sayfa şablonları kendi
   <style> bloklarını bu dosyadan SONRA yüklüyor, eşit öncelikte onlar
   kazanırdı. */
html[data-beta] .badge,
html[data-beta] .chip { border-radius: 999px; }
html[data-beta] .badge.info { background: var(--accent-soft); color: var(--accent-text); border-color: transparent; }
html[data-beta] .state {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 9px; border-radius: 999px; border: 0;
  font-size: 11.5px; font-weight: 500; letter-spacing: 0; text-transform: none;
}
html[data-beta] .state::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
html[data-beta] .state.live { color: var(--ok); background: var(--ok-soft); }
html[data-beta] .state.off  { color: var(--muted); background: var(--surface-3); }
html[data-beta] .state.live-warn { color: var(--warn); background: var(--warn-soft); }
html[data-beta] .state.live-bad  { color: var(--danger); background: var(--danger-soft); }

/* ---------------------------------------------------- 11. bildirim */
html[data-beta] .toast { border-radius: var(--r-lg); background: var(--surface-3);
                         border-color: var(--line-strong); box-shadow: var(--sh-lg); }

/* ---------------------------------------------------- 12. Telegram önizlemesi */
html[data-beta] .tgprev { background: var(--tg-chat); border-radius: var(--r-xl); padding: var(--sp-3); }
html[data-beta] .tgprev .tgtext { background: var(--tg-bubble); color: var(--text);
                                  border-radius: 14px 14px 14px 4px; }
html[data-beta] .tgprev .tgtext a { color: var(--tg-link); }
html[data-beta] .tgprev .tgkey { background: var(--tg-key); color: var(--tg-link);
                                 border-radius: var(--r-md); border: 0; }

/* ---------------------------------------------------- 13. Dashboard sırası
   En önemli en üstte: servis durumu ve dikkat isteyen sayaçlar, sonra son
   değişenler, en altta seyrek yapılan ZIP yükleme. Yalnızca sıra değişir. */
html[data-beta] .dash { display: flex; flex-direction: column; }
html[data-beta] .dash > .dash-head    { order: 1; }
html[data-beta] .dash > .dash-stats   { order: 2; }
html[data-beta] .dash > .dash-service { order: 3; }
html[data-beta] .dash > .dash-recent  { order: 4; margin-bottom: var(--sp-6); }
html[data-beta] .dash > .dash-upload  { order: 5; }

/* ---------------------------------------------------- 14. TG Ads */
html[data-beta] .adswrap { grid-template-columns: 18rem minmax(0, 1fr); gap: var(--sp-5); }
@media (min-width: 901px) {
  html[data-beta] .adswrap > :first-child { position: sticky; top: calc(var(--header-h) + var(--sp-3)); }
  html[data-beta] .adspick { max-height: calc(100vh - var(--header-h) - 15rem); }
}
@media (max-width: 900px) {
  /* 1fr = minmax(auto, 1fr): en geniş çocuk (sekme çubuğu, bot listesi)
     sütunu ekrandan taşırıyordu. 0 alt sınır, taşan öğe kendi içinde kayar. */
  html[data-beta] .adswrap { grid-template-columns: minmax(0, 1fr); }
  html[data-beta] .adswrap > * { min-width: 0; }
}
html[data-beta] .adspick { border-radius: var(--r-lg); border-color: var(--line); background: var(--surface); }
html[data-beta] .adsopt { border-bottom-color: var(--line-soft); }
html[data-beta] .adsopt.on { background: var(--accent-soft); border-left-color: var(--tg-blue); }
html[data-beta] .adstabs { background: var(--surface-2); border-radius: var(--r-md); }
html[data-beta] .adshead h2 { font-size: 1.2rem; letter-spacing: -0.015em; }
html[data-beta] .adsnums { gap: var(--sp-6); padding-top: var(--sp-3); margin-top: var(--sp-4);
                           border-top: 1px solid var(--line); }
html[data-beta] .adsnums div { color: var(--faint); }
html[data-beta] .adsnums b { font-size: 1.15rem; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Sekmeler (beta.js ekler). Kart taşımaz: seçili sekmenin dışındakileri gizler. */
html[data-beta] .betatabs {
  position: sticky; top: var(--header-h); z-index: 15;
  display: flex; gap: 2px; overflow-x: auto; scrollbar-width: thin;
  margin: 0 0 var(--sp-4); padding: 0 var(--sp-1);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
html[data-beta] .betatabs button {
  position: relative; flex: 0 0 auto; min-height: 42px;
  padding: 0 12px; border: 0; border-radius: 0; background: transparent; box-shadow: none;
  color: var(--muted); font-size: 13px; font-weight: 500;
}
html[data-beta] .betatabs button:hover { background: transparent; color: var(--text); box-shadow: none; }
html[data-beta] .betatabs button[aria-selected="true"] { color: var(--text); }
html[data-beta] .betatabs button[aria-selected="true"]::after {
  content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px;
  height: 2px; border-radius: 2px; background: var(--tg-blue);
}
html[data-beta] .betatabs .n { margin-left: 5px; color: var(--faint); font-size: 11px;
                               font-variant-numeric: tabular-nums; }
html[data-beta] .betatabs button.dirty::before {
  content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px;
  border-radius: 50%; background: var(--warn, #d9a406); vertical-align: middle;
}
html[data-beta] .betahide { display: none !important; }
html[data-beta] .tabmark, html[data-beta] .tabbar { display: none; }

/* Geri alma bantları kart gibi dursun. */
html[data-beta] .adswrap .sw {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); border: 1px solid var(--line);
  border-radius: var(--r-lg); background: var(--surface);
}
html[data-beta] .adswrap .sw .swtext { flex: 1 1 18rem; min-width: 0; }
html[data-beta] .adswrap .sw form { margin: 0; }

/* Saat skalası: zaman çizelgesi. */
html[data-beta] .tl { border: 0; border-radius: 0; overflow: visible; }
html[data-beta] .tlrow { border-top: 0; padding: 9px 11px 9px 34px; border-radius: var(--r-md); }
html[data-beta] .tlrow::before {
  content: ""; position: absolute; left: 14px; top: 0; bottom: 0; width: 2px;
  background: var(--line-strong);
}
html[data-beta] .tlrow:first-child::before { top: 50%; }
html[data-beta] .tlrow:last-child::before { bottom: 50%; }
html[data-beta] .tlrow::after {
  content: ""; position: absolute; left: 10px; top: 18px; width: 10px; height: 10px;
  border-radius: 50%; background: var(--surface); border: 2px solid var(--tg-blue);
}
html[data-beta] .tlrow.next { background: var(--accent-soft); }
html[data-beta] .tlrow.next::after { background: var(--tg-blue); box-shadow: 0 0 0 4px var(--accent-soft); }
html[data-beta] .tlwhen { color: var(--text); font-weight: 500; }

/* Promo satırları */
html[data-beta] .slotwrap { border-radius: var(--r-lg); border-color: var(--line); background: var(--surface); }
html[data-beta] .slotwrap:hover { border-color: var(--line-strong); }
html[data-beta] .slotwrap.staged { border-color: var(--tg-blue); box-shadow: inset 3px 0 0 var(--tg-blue); }
html[data-beta] .slotrow .no { color: var(--faint); font-variant-numeric: tabular-nums; }

/* Satır içi akış/öncelik (beta.js). */
html[data-beta] .betainline { display: inline-flex; gap: 4px; align-items: center; flex: none; }
html[data-beta] .betainline select { width: auto; min-height: 28px; margin: 0; padding: 2px 24px 2px 8px;
                                     font-size: 12px; border-radius: var(--r-sm); }
@media (max-width: 720px) {
  html[data-beta] .betainline { order: 5; flex-basis: 100%; padding-left: 30px; }
}

/* Kaydedilmemiş değişiklik (beta.js). */
html[data-beta] .card.betadirty { border-color: var(--warn-border); }
html[data-beta] .card.betadirty > h2::after,
html[data-beta] .card.betadirty > .cardhead h2::after,
html[data-beta] .card.betadirty > .adshead h2::after,
html[data-beta] .card.betadirty > div:first-child > h2::after {
  content: "kaydedilmedi"; margin-left: 8px; padding: 1px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 500; letter-spacing: 0;
  color: var(--warn); background: var(--warn-soft);
}

/* Yüzen toplu ayar çubuğu */
html[data-beta] .stagebar { border-radius: var(--r-xl); background: var(--surface-3);
                            border-color: var(--line-strong); }

/* ---------------------------------------------------- 15. telefon
   Menü üstte 40vh'lik şerit yerine yandan açılan çekmece. Yalnızca beta.js
   yüklendiyse (html.beta-js): betik çalışmazsa v2'nin şeridi kalır. */
@media (max-width: 860px) {
  html.beta-js .layout { flex-direction: row; }
  html.beta-js .sidebar {
    position: fixed; inset: 0 auto 0 0; z-index: 60;
    width: min(280px, 86vw); max-height: none; height: 100%;
    border-right: 1px solid var(--line); border-bottom: 0;
    transform: translateX(-102%); transition: transform 200ms var(--ease);
    box-shadow: var(--sh-lg);
  }
  html.beta-js .sidebar details > a { display: flex; width: auto; }
  html.beta-js.beta-nav .sidebar { transform: none; }
  html.beta-js .betascrim { position: fixed; inset: 0; z-index: 55; background: rgba(0, 0, 0, .5); }
  html.beta-js .betaburger {
    display: inline-flex; min-height: 36px; width: 36px; padding: 0;
    background: transparent; border: 0; box-shadow: none; color: var(--muted);
  }
  html.beta-js .betaburger:hover { background: var(--surface-2); color: var(--text); }
  .betacollapse { display: none; }
  html[data-beta] .betatabs { position: static; }   /* telefonda üst şerit iki satır olabiliyor */
}

@media (prefers-reduced-motion: reduce) {
  .sidebar, html.beta-js .sidebar { transition: none; }
}

/* Yüksek kontrast isteyen sistem ayarı: çizgiler ve soluk yazılar güçlenir. */
@media (prefers-contrast: more) {
  :root[data-theme="dark"] { --line: rgba(148, 163, 184, .35); --line-strong: rgba(148, 163, 184, .6);
                             --muted: #C2CAD6; --faint: #A3ADBD; }
  :root[data-theme="light"] { --line: rgba(15, 23, 42, .25); --line-strong: rgba(15, 23, 42, .45);
                              --muted: #2F3A4C; --faint: #4A5568; }
}

/* Küçük düğmeler parmakla da tutulabilsin (en az 28px). */
html[data-beta] .slotwrap button, html[data-beta] .wrap td button { min-height: 28px; }


/* ---------------------------------------------------------------------------
   Erişilebilirlik ve kullanım

   Onay kutuları ve seçenek düğmeleri: tarayıcı varsayılanı 13 piksel; fareyle
   de parmakla da ıskalanıyor. 18 piksel + çevresinde boşluk, 24 piksellik
   hedef kuralını (WCAG 2.5.8) karşılar. Satır içi stil verilmiş kutular
   (ölçüsü bilerek ayarlanmış olanlar) bundan etkilenmez.
   ------------------------------------------------------------------------ */
html[data-beta] input[type="checkbox"],
html[data-beta] input[type="radio"] {
  width: 18px; height: 18px; min-width: 18px; margin: 3px;
  accent-color: var(--accent); cursor: pointer; flex: none;
}
html[data-beta] label:has(> input[type="checkbox"]),
html[data-beta] label:has(> input[type="radio"]) { cursor: pointer; }

/* Atlama bağlantısıyla ya da kayıttan sonra odak ana içeriğe gelince çerçeve
   çizilmesin: orası bir düğme değil, yalnızca okuma yerinin başı. */
html[data-beta] #main:focus { outline: none; }

/* Açılır satırların başlığı en az 24 piksel yüksek olsun. */
html[data-beta] details > summary { min-height: 24px; }

/* Klavyeyle gezerken odaktaki satır, yapışkan araç çubuğunun altında kalmasın. */
html[data-beta] .main :focus-visible { scroll-margin-top: 96px; scroll-margin-bottom: 24px; }

/* Renk tek başına durum bildirmesin: hata bildirimi kalın kenarla da ayrılır. */
html[data-beta] .msg.bad { border-left-width: 4px; }

/* ---------------------------------------------------------------------------
   Simgeler

   Tek renkli çizgi simgeler (Lucide çizimleri), dosya olarak değil maske
   olarak: simge bulunduğu yazının rengini alır, iki temada da ayrı çizim
   gerekmez ve satır başına tek bir sınıf yeter — yüzlerce satırlık tabloda
   satır içi <svg> sayfayı yüzlerce kilobayt büyütürdü.

     <span class="ic ic-copy"></span>                      yazının içinde simge
     <button class="icbtn ic-copy" title="…" aria-label="…">   yalnız simgeli düğme
     <button class="secondary withic ic-download">CSV</button> simge + yazı

   Yalnız simgeli düğme adını title ve aria-label'dan alır: ikisi de yazılmalı.
   ------------------------------------------------------------------------ */
:root {
  --ic-pin: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M12 17v5'/><path d='M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z'/></svg>");
  --ic-search: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><path d='m21 21-4.3-4.3'/></svg>");
  --ic-filecheck: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/><path d='M14 2v4a2 2 0 0 0 2 2h4'/><path d='m9 15 2 2 4-4'/></svg>");
  --ic-power: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M12 2v10'/><path d='M18.4 6.6a9 9 0 1 1-12.77.04'/></svg>");
  --ic-copy: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><rect width='14' height='14' x='8' y='8' rx='2'/><path d='M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2'/></svg>");
  --ic-copyall: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><rect width='8' height='4' x='8' y='2' rx='1'/><path d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/><path d='M12 11h4'/><path d='M12 16h4'/><path d='M8 11h.01'/><path d='M8 16h.01'/></svg>");
  --ic-check: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>");
  --ic-eye: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M2.06 12.35a1 1 0 0 1 0-.7 10.75 10.75 0 0 1 19.88 0 1 1 0 0 1 0 .7 10.75 10.75 0 0 1-19.88 0'/><circle cx='12' cy='12' r='3'/></svg>");
  --ic-eyeoff: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M10.73 5.08a10.74 10.74 0 0 1 11.2 6.57 1 1 0 0 1 0 .7 10.75 10.75 0 0 1-1.44 2.49'/><path d='M14.08 14.16a3 3 0 0 1-4.24-4.24'/><path d='M17.48 17.5a10.75 10.75 0 0 1-15.42-5.15 1 1 0 0 1 0-.7 10.75 10.75 0 0 1 4.45-5.14'/><path d='m2 2 20 20'/></svg>");
  --ic-key: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><circle cx='7.5' cy='15.5' r='5.5'/><path d='m21 2-9.6 9.6'/><path d='m15.5 7.5 3 3L22 7l-3-3'/></svg>");
  --ic-download: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/><path d='m7 10 5 5 5-5'/><path d='M12 15V3'/></svg>");
  --ic-upload: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/><path d='m17 8-5-5-5 5'/><path d='M12 3v12'/></svg>");
  --ic-trash: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M3 6h18'/><path d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6'/><path d='M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/></svg>");
  --ic-pencil: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M21.17 6.81a1 1 0 0 0-3.98-3.98L3.84 16.17a2 2 0 0 0-.5.83l-1.32 4.35a.5.5 0 0 0 .62.62l4.35-1.32a2 2 0 0 0 .83-.5z'/></svg>");
  --ic-refresh: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8'/><path d='M21 3v5h-5'/><path d='M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16'/><path d='M8 16H3v5'/></svg>");
  --ic-x: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M18 6 6 18'/><path d='m6 6 12 12'/></svg>");
  --ic-plus: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14'/><path d='M12 5v14'/></svg>");
  --ic-link: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/><path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/></svg>");
  --ic-play: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M6 3 20 12 6 21Z'/></svg>");
  --ic-pause: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><rect x='14' y='4' width='4' height='16' rx='1'/><rect x='6' y='4' width='4' height='16' rx='1'/></svg>");
  --ic-list: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M3 12h.01'/><path d='M3 18h.01'/><path d='M3 6h.01'/><path d='M8 12h13'/><path d='M8 18h13'/><path d='M8 6h13'/></svg>");
  --ic-message: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/></svg>");
  --ic-globe: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M2 12h20'/><path d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/></svg>");
  --ic-clock: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M12 6v6l4 2'/></svg>");
  --ic-repeat: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='m17 2 4 4-4 4'/><path d='M3 11v-1a4 4 0 0 1 4-4h14'/><path d='m7 22-4-4 4-4'/><path d='M21 13v1a4 4 0 0 1-4 4H3'/></svg>");
  --ic-share: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><circle cx='18' cy='5' r='3'/><circle cx='6' cy='12' r='3'/><circle cx='18' cy='19' r='3'/><path d='m8.59 13.51 6.83 3.98'/><path d='m15.41 6.51-6.82 3.98'/></svg>");
  --ic-button: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='7' width='20' height='10' rx='3'/><path d='M7 12h6'/></svg>");
  --ic-bot: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M12 8V4H8'/><rect width='16' height='12' x='4' y='8' rx='2'/><path d='M2 14h2'/><path d='M20 14h2'/><path d='M15 13v2'/><path d='M9 13v2'/></svg>");
  --ic-phone: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><rect width='14' height='20' x='5' y='2' rx='2'/><path d='M12 18h.01'/></svg>");
  --ic-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><rect width='18' height='18' x='3' y='3' rx='2'/><circle cx='9' cy='9' r='2'/><path d='m21 15-3.09-3.09a2 2 0 0 0-2.82 0L6 21'/></svg>");
  --ic-megaphone: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='m3 11 18-5v12L3 14v-3z'/><path d='M11.6 16.8a3 3 0 1 1-5.8-1.6'/></svg>");
  --ic-history: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8'/><path d='M3 3v5h5'/><path d='M12 7v5l4 2'/></svg>");
  --ic-factory: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M2 20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8l-7 5V8l-7 5V4a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z'/><path d='M17 18h1'/><path d='M12 18h1'/><path d='M7 18h1'/></svg>");
  --ic-users: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/><circle cx='9' cy='7' r='4'/><path d='M22 21v-2a4 4 0 0 0-3-3.87'/><path d='M16 3.13a4 4 0 0 1 0 7.75'/></svg>");
  --ic-ban: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='m4.9 4.9 14.2 14.2'/></svg>");
  --ic-sliders: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M4 21v-7'/><path d='M4 10V3'/><path d='M12 21v-9'/><path d='M12 8V3'/><path d='M20 21v-5'/><path d='M20 12V3'/><path d='M2 14h4'/><path d='M10 8h4'/><path d='M18 16h4'/></svg>");
  --ic-rss: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M4 11a9 9 0 0 1 9 9'/><path d='M4 4a16 16 0 0 1 16 16'/><circle cx='5' cy='19' r='1'/></svg>");
  --ic-tag: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M12.59 2.59A2 2 0 0 0 11.17 2H4a2 2 0 0 0-2 2v7.17a2 2 0 0 0 .59 1.42l8.7 8.7a2.43 2.43 0 0 0 3.42 0l6.58-6.58a2.43 2.43 0 0 0 0-3.42z'/><circle cx='7.5' cy='7.5' r='.5'/></svg>");
  --ic-alert: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/><path d='M12 9v4'/><path d='M12 17h.01'/></svg>");
  --ic-info: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M12 16v-4'/><path d='M12 8h.01'/></svg>");
  --ic-undo: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8'/><path d='M3 3v5h5'/></svg>");
  --ic-table: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3v18'/><rect width='18' height='18' x='3' y='3' rx='2'/><path d='M3 9h18'/><path d='M3 15h18'/></svg>");
  --ic-activity: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M22 12h-4l-3 9L9 3l-3 9H2'/></svg>");
  --ic-sun: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='4'/><path d='M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41'/></svg>");
  --ic-moon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z'/></svg>");
  --ic-sparkle: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3l1.9 5.1L19 10l-5.1 1.9L12 17l-1.9-5.1L5 10l5.1-1.9Z'/><path d='M19 15l.8 2.2L22 18l-2.2.8L19 21l-.8-2.2L16 18l2.2-.8Z'/></svg>");
  --ic-lines: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M6.5 15.5l9-9M9 18.5l9.5-9.5M4.5 12l7.5-7.5'/></svg>");
  --ic-logout: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/><path d='M16 17l5-5-5-5'/><path d='M21 12H9'/></svg>");
  --ic-save: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M15.2 3a2 2 0 0 1 1.4.6l3.8 3.8a2 2 0 0 1 .6 1.4V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z'/><path d='M17 21v-7a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v7'/><path d='M7 3v4a1 1 0 0 0 1 1h7'/></svg>");
  --ic-send: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M14.54 21.69a.5.5 0 0 0 .94-.03l6.5-19a.5.5 0 0 0-.64-.63l-19 6.5a.5.5 0 0 0-.02.93l7.93 3.18a2 2 0 0 1 1.11 1.11z'/><path d='m21.85 2.15-10.94 10.94'/></svg>");
  --ic-minus: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M8 12h8'/></svg>");
  --ic-eraser: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='m7 21-4.3-4.3c-1-1-1-2.5 0-3.4l9.6-9.6c1-1 2.5-1 3.4 0l5.6 5.6c1 1 1 2.5 0 3.4L13 21'/><path d='M22 21H7'/><path d='m5 11 9 9'/></svg>");
  --ic-toggle: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><rect width='20' height='12' x='2' y='6' rx='6'/><circle cx='16' cy='12' r='2'/></svg>");
  --ic-arrowleft: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='m12 19-7-7 7-7'/><path d='M19 12H5'/></svg>");
  --ic-arrowright: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14'/><path d='m12 5 7 7-7 7'/></svg>");
  --ic-flask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M14 2v6a2 2 0 0 0 .25.96l5.51 10.08A2 2 0 0 1 18 22H6a2 2 0 0 1-1.76-2.96l5.51-10.08A2 2 0 0 0 10 8V2'/><path d='M6.45 15h11.1'/><path d='M8.5 2h7'/></svg>");
  --ic-login: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4'/><path d='m10 17 5-5-5-5'/><path d='M15 12H3'/></svg>");
  --ic-unban: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M21 12a9 9 0 1 1-5.6-8.33'/><path d='m5.6 5.6 7.4 7.4'/><path d='m15 10 2.5 2.5L22 8'/></svg>");
  --ic-code: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='m16 18 6-6-6-6'/><path d='m8 6-6 6 6 6'/></svg>");
  --ic-codeblock: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><rect width='18' height='18' x='3' y='3' rx='2'/><path d='m10 9-3 3 3 3'/><path d='m14 15 3-3-3-3'/></svg>");
  --ic-server: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><rect width='20' height='8' x='2' y='2' rx='2'/><rect width='20' height='8' x='2' y='14' rx='2'/><path d='M6 6h.01'/><path d='M6 18h.01'/></svg>");
}
.ic-pin { --ic: var(--ic-pin); }
.ic-search { --ic: var(--ic-search); }
.ic-filecheck { --ic: var(--ic-filecheck); }
.ic-power { --ic: var(--ic-power); }
.ic-copy { --ic: var(--ic-copy); }
.ic-copyall { --ic: var(--ic-copyall); }
.ic-check { --ic: var(--ic-check); }
.ic-eye { --ic: var(--ic-eye); }
.ic-eyeoff { --ic: var(--ic-eyeoff); }
.ic-key { --ic: var(--ic-key); }
.ic-download { --ic: var(--ic-download); }
.ic-upload { --ic: var(--ic-upload); }
.ic-trash { --ic: var(--ic-trash); }
.ic-pencil { --ic: var(--ic-pencil); }
.ic-refresh { --ic: var(--ic-refresh); }
.ic-x { --ic: var(--ic-x); }
.ic-plus { --ic: var(--ic-plus); }
.ic-link { --ic: var(--ic-link); }
.ic-play { --ic: var(--ic-play); }
.ic-pause { --ic: var(--ic-pause); }
.ic-list { --ic: var(--ic-list); }
.ic-message { --ic: var(--ic-message); }
.ic-clock { --ic: var(--ic-clock); }
.ic-globe { --ic: var(--ic-globe); }
.ic-repeat { --ic: var(--ic-repeat); }
.ic-share { --ic: var(--ic-share); }
.ic-button { --ic: var(--ic-button); }
.ic-bot { --ic: var(--ic-bot); }
.ic-phone { --ic: var(--ic-phone); }
.ic-image { --ic: var(--ic-image); }
.ic-megaphone { --ic: var(--ic-megaphone); }
.ic-history { --ic: var(--ic-history); }
.ic-factory { --ic: var(--ic-factory); }
.ic-users { --ic: var(--ic-users); }
.ic-ban { --ic: var(--ic-ban); }
.ic-sliders { --ic: var(--ic-sliders); }
.ic-rss { --ic: var(--ic-rss); }
.ic-tag { --ic: var(--ic-tag); }
.ic-alert { --ic: var(--ic-alert); }
.ic-info { --ic: var(--ic-info); }
.ic-undo { --ic: var(--ic-undo); }
.ic-table { --ic: var(--ic-table); }
.ic-activity { --ic: var(--ic-activity); }
.ic-server { --ic: var(--ic-server); }
.ic-sun { --ic: var(--ic-sun); }
.ic-moon { --ic: var(--ic-moon); }
.ic-sparkle { --ic: var(--ic-sparkle); }
.ic-lines { --ic: var(--ic-lines); }
.ic-logout { --ic: var(--ic-logout); }
.ic-save { --ic: var(--ic-save); }
.ic-send { --ic: var(--ic-send); }
.ic-minus { --ic: var(--ic-minus); }
.ic-eraser { --ic: var(--ic-eraser); }
.ic-toggle { --ic: var(--ic-toggle); }
.ic-arrowleft { --ic: var(--ic-arrowleft); }
.ic-arrowright { --ic: var(--ic-arrowright); }
.ic-flask { --ic: var(--ic-flask); }
.ic-login { --ic: var(--ic-login); }
.ic-unban { --ic: var(--ic-unban); }
.ic-code { --ic: var(--ic-code); }
.ic-codeblock { --ic: var(--ic-codeblock); }
/* Üst çubuktaki seçimler ikonla (21 Eki 2026): tema ☀/☾, tasarım ✦/Linear, çıkış. Adı title ve aria-label'da. */
.segctl > a.segic { display: inline-flex; align-items: center; justify-content: center; padding: 4px 9px; }
.segctl > a.segic .ic { width: 15px; height: 15px; vertical-align: 0; }
.ic, .icbtn::before, .withic::before {
  content: ""; display: inline-block; flex: 0 0 auto; width: 1em; height: 1em;
  background: currentColor;
  -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat;
}
.ic { vertical-align: -0.14em; }
.withic::before { width: 15px; height: 15px; margin-right: 2px; }
/* beta.js'in yazısına bakıp simge koyduğu düğmeler: düğmenin düzenine dokunmadan simge yazıyla aynı hizada. */
[data-autoic].withic::before { width: 14px; height: 14px; vertical-align: -0.18em; }
html[data-beta] .icbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; min-width: 28px; height: 28px; min-height: 28px; padding: 0; margin: 0;
  border: 1px solid transparent; border-radius: 8px; background: transparent; box-shadow: none;
  color: var(--muted); font-size: 0; line-height: 0; cursor: pointer; vertical-align: middle;
}
html[data-beta] .icbtn::before { width: 15px; height: 15px; }
html[data-beta] .icbtn:hover { background: var(--surface-3); border-color: var(--line); color: var(--text); box-shadow: none; }
html[data-beta] .icbtn.accent { color: var(--accent-text); }
html[data-beta] .icbtn.accent:hover { background: var(--accent-soft); border-color: var(--accent-dim); color: var(--accent-text); }
html[data-beta] .icbtn.done { color: var(--ok); --ic: var(--ic-check); }
html[data-beta] .icbtn:disabled { opacity: .45; }
/* Bir değerin yanındaki simge satırın üstüne gelince belirginleşir. */
html[data-beta] .withcopy { display: inline-flex; align-items: center; gap: 2px; max-width: 100%; }