/* ─────────────────────────────────────────────────────────────
   Yasha: css/tasarim.css
   Tasarım sistemi v2, her sayfada ortak. Eski katmanların (index, perf, polish,
   cila...) üstüne en son yüklenir ve YALNIZ değişken kullanır: tema (koyu, açık,
   OLED, Gece Moru, Yoshiwara, Bocchi...) neyse bu da onu izler.

   İçindekiler
     1. Değişkenler (yarıçap, gölge, vurgu üstü yazı rengi)
     2. Odak halkası ve atla bağlantısı (klavye kullanıcısı için)
     3. Üst çubuk (Netflix gibi: ana sayfada hero'nun üstünde saydam, kaydırınca dolu)
     4. Düğmeler (.vt-btn, .vt-ikon-btn, .vt-yuvarlak)
     5. Küçük bileşenler (meta satırı, rozet, çip)
     6. Erişilebilirlik tercihleri (yazı boyutu, karşıtlık, hareket)
   ───────────────────────────────────────────────────────────── */

/* ── 1. Değişkenler ─────────────────────────────────────────── */
:root {
  --vt-nav: 3.9rem;
  --vt-r: .8rem;            /* büyük yüzeyler */
  --vt-r-k: .55rem;         /* kartlar, görseller */
  --vt-hizli: cubic-bezier(.2, .8, .2, 1);
  --vt-gol: 0 1.6rem 4rem rgba(0, 0, 0, .7);
  /* Vurgu rengi üstünde yazı: koyu turuncu zeminde beyaz 4.8:1 (WCAG AA). Açık vurgulu
     temalarda (aşağıda) yazı koyuya döner, kontrast yine geçer. */
  --pr-btn: color-mix(in srgb, var(--pr) 82%, #000);
  --pr-btn-h: color-mix(in srgb, var(--pr) 70%, #000);
  --pr-on: #fff;
  --vt-odak: #fff;
  --vt-odak-ic: #000;
  --vt-cam: color-mix(in srgb, var(--bg) 72%, transparent);
  --vt-yazi-olcek: 1;
}
[data-theme="light"] { --vt-odak: #000; --vt-odak-ic: #fff; --vt-cam: color-mix(in srgb, var(--bg) 82%, transparent); --vt-gol: 0 1.2rem 3rem rgba(0, 0, 0, .22); }
/* Açık vurgulu temalar: yazı koyu */
[data-theme="kul"], [data-theme="derin"], [data-theme="yasha"], [data-theme="bocchi"] {
  --pr-btn: var(--pr); --pr-btn-h: color-mix(in srgb, var(--pr) 86%, #fff); --pr-on: #111;
}

/* Kaydırma çubuğu kaybolunca (pencere açılırken) sayfa sağa zıplamasın */
html { scrollbar-gutter: stable; }
html.vt-kilitli, html.vt-kilitli body { overflow: hidden; }
::selection { background: color-mix(in srgb, var(--pr) 45%, transparent); color: inherit; }

/* ── 2. Odak halkası ────────────────────────────────────────── */
/* Çift halka: içte zemin rengi, dışta açık/koyu çizgi. Hangi görselin üstünde olursa
   olsun görünür (tek renkli halka parlak afişte kayboluyordu). */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible,
summary:focus-visible, [tabindex]:focus-visible, [role="button"]:focus-visible {
  outline: .17rem solid var(--vt-odak);
  outline-offset: .16rem;
  box-shadow: 0 0 0 .17rem var(--vt-odak-ic);
  border-radius: max(.3rem, var(--vt-odak-r, 0));
}
:focus:not(:focus-visible) { outline: none; }
/* İçerik değil kapsayıcı odağı: halka çizme */
[tabindex="-1"]:focus-visible { outline: none; box-shadow: none; }

.atla-baglanti, a.atla-baglanti {
  position: fixed; left: 1rem; top: -4rem; z-index: 5000; background: var(--vt-odak); color: var(--vt-odak-ic);
  padding: .8rem 1.2rem; border-radius: .6rem; font-weight: 800; font-size: .9rem; transition: top .15s;
}
.atla-baglanti:focus, a.atla-baglanti:focus { top: 1rem; }

/* Ekran okuyucuya açık, gözden gizli */
.vt-gizli, .takip-btn.vt-yuvarlak span {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ── 3. Üst çubuk ───────────────────────────────────────────── */
nav.main-nav {
  height: var(--vt-nav);
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  -webkit-backdrop-filter: saturate(1.5) blur(16px); backdrop-filter: saturate(1.5) blur(16px);
  /* Alt çizgi yok (kullanıcı 21.10.2026: "header'ın altındaki 1 piksellik çizgi kadar çirkin duran bir şey yok"). Eskiden saydam
     1px kenarlık vardı; hero üstündeki karartma o 1px'te başa dönüp koyu bir çizgi çiziyordu, kaydırınca da gri çizgi çıkıyordu. */
  border-bottom: 0;
  transition: background .3s var(--vt-hizli), box-shadow .3s;
}
nav.main-nav.kayik { background: color-mix(in srgb, var(--bg) 94%, transparent); box-shadow: 0 .8rem 2rem -1.4rem rgba(0, 0, 0, .8); }
/* Hero'lu ana sayfa: üstte saydam, hero'nun üstünde durur; kaydırınca dolar */
body.vt-ana nav.main-nav:not(.kayik) {
  background: linear-gradient(to bottom, rgba(0, 0, 0, .78), rgba(0, 0, 0, 0));
  -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none;
}
body.vt-ana nav.main-nav:not(.kayik) :is(.main-tab, .nav-icon, .nav-destek, .brand-text) { color: #f2f2f2; }
[data-theme="light"] body.vt-ana nav.main-nav:not(.kayik) .nav-logo img { content: url('../images/yasharecords-256.webp'); }
nav.main-nav .nav-logo { font-size: .86rem; letter-spacing: .22em; font-weight: 800; }
nav.main-nav .nav-logo img { height: 2.2rem; width: 2.2rem; }

nav.main-nav .main-tabs { background: none; border: 0; padding: 0; gap: .1rem; border-radius: 0; margin-left: 1.2rem; overflow: visible; }
nav.main-nav .main-tab {
  position: relative; color: var(--text-s); font-weight: 600; font-size: .84rem; padding: .5rem .8rem; border-radius: .45rem;
  background: none; min-height: 2.5rem; transition: color .2s;
}
nav.main-nav .main-tab:hover { color: var(--text); background: none; }
nav.main-nav .main-tab i { opacity: .8; }
nav.main-nav .main-tab.active, [data-theme] nav.main-nav .main-tab.active { color: var(--text); background: none; box-shadow: none; font-weight: 800; }
nav.main-nav .main-tab.active i, [data-theme] nav.main-nav .main-tab.active i { color: var(--pr); opacity: 1; }
nav.main-nav .main-tab::after { content: ''; position: absolute; left: .8rem; right: .8rem; bottom: .22rem; height: .18rem; border-radius: .2rem; background: var(--pr); transform: scaleX(0); transform-origin: left; transition: transform .28s var(--vt-hizli); }
nav.main-nav .main-tab.active::after { transform: scaleX(1); }
nav.main-nav .main-tab:hover::after { transform: scaleX(.35); }
nav.main-nav .main-tab.active:hover::after { transform: scaleX(1); }

nav.main-nav .nav-icon { width: 2.5rem; height: 2.5rem; border-radius: 50%; color: var(--text-s); font-size: 1rem; }
nav.main-nav .nav-icon:hover { color: var(--text); background: var(--hover-bg); }
nav.main-nav .nav-destek { border-radius: 2rem; border-color: transparent; background: none; color: var(--text-s); }
nav.main-nav .nav-destek:hover { color: var(--text); border-color: var(--border-h); background: var(--hover-bg); }
nav.main-nav .nav-right .nav-katil:not(.ekip), nav.main-nav .nav-right .nav-katil.ekip {
  background: var(--pr-btn); color: var(--pr-on); border-color: transparent; border-radius: .5rem; font-weight: 800; height: 2.4rem; padding: 0 1.05rem;
}
nav.main-nav .nav-right .nav-katil i { color: var(--pr-on); }
nav.main-nav .nav-right .nav-katil:hover { background: var(--pr-btn-h); color: var(--pr-on); border-color: transparent; }
nav.main-nav .nav-profile { border-radius: 2rem; }

/* ── 4. Düğmeler ────────────────────────────────────────────── */
.vt-btn, .vt-hero-eylem .takip-btn, .po-banner .takip-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 2.9rem; padding: 0 1.5rem;
  border-radius: .5rem; border: 0; font: inherit; font-size: 1rem; font-weight: 800; letter-spacing: .005em; cursor: pointer;
  text-decoration: none; white-space: nowrap; transition: background .2s, transform .2s var(--vt-hizli), box-shadow .2s;
}
.vt-btn i { font-size: .95em; }
.vt-btn.ana { background: var(--pr-btn); color: var(--pr-on); box-shadow: 0 .5rem 1.4rem -.5rem color-mix(in srgb, var(--pr) 70%, transparent); }
.vt-btn.ana:hover { background: var(--pr-btn-h); transform: translateY(-1px); }
/* Hero ve pencere görselin üstünde: koyu cam */
.vt-btn.ikincil, .vt-hero-eylem .takip-btn, .po-banner .takip-btn {
  background: rgba(30, 30, 30, .62); color: #fff; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
}
.vt-btn.ikincil:hover, .vt-hero-eylem .takip-btn:hover, .po-banner .takip-btn:hover { background: rgba(70, 70, 70, .72); }
.vt-hero-eylem .takip-btn.on, .po-banner .takip-btn.on { background: color-mix(in srgb, var(--pr) 28%, rgba(20, 20, 20, .7)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pr) 70%, transparent); }
.vt-hero-eylem .takip-btn i, .po-banner .takip-btn i { color: inherit; }

.vt-ikon-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; padding: 0;
  background: rgba(20, 20, 20, .55); color: #fff; border: 0; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); cursor: pointer;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background .2s, transform .2s var(--vt-hizli);
}
.vt-ikon-btn:hover { background: rgba(255, 255, 255, .22); transform: scale(1.06); }
.vt-ikon-btn i { font-size: .85rem; }

/* Hover kartındaki yuvarlak düğmeler */
.vt-yuvarlak, .vt-yuvarlak.takip-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 2.5rem; height: 2.5rem; min-height: 0; padding: 0; border-radius: 50%; cursor: pointer;
  background: rgba(40, 40, 40, .6); color: #fff; border: 0; box-shadow: inset 0 0 0 .1rem rgba(255, 255, 255, .45);
  transition: box-shadow .18s, background .18s, transform .18s var(--vt-hizli); font-size: .85rem; text-decoration: none;
}
.vt-yuvarlak:hover { box-shadow: inset 0 0 0 .1rem #fff; background: rgba(90, 90, 90, .7); transform: scale(1.07); }
.vt-yuvarlak.ana { background: #fff; color: #000; box-shadow: none; }
.vt-yuvarlak.ana:hover { background: rgba(255, 255, 255, .82); }
.vt-yuvarlak.takip-btn.on { background: color-mix(in srgb, var(--pr) 35%, rgba(30, 30, 30, .7)); box-shadow: inset 0 0 0 .1rem var(--pr); }
.vt-yuvarlak.sag { margin-left: auto; }
.vt-yuvarlak i { font-size: .85rem; color: inherit; }

/* ── 5. Küçük bileşenler ────────────────────────────────────── */
.vt-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .7rem; font-size: .88rem; font-weight: 600; color: var(--vt-meta, var(--text-s)); line-height: 1.3; }
.vt-meta > span { display: inline-flex; align-items: center; gap: .35rem; }
.vt-meta i[aria-hidden] { width: .22rem; height: .22rem; border-radius: 50%; background: currentColor; opacity: .55; display: inline-block; }
.vt-meta-tur { font-weight: 800; color: var(--vt-meta-vurgu, var(--text)); }
.vt-yas { display: inline-flex; align-items: center; padding: .05rem .4rem; border: .1rem solid currentColor; border-radius: .25rem; font-size: .75em; font-weight: 800; line-height: 1.35; letter-spacing: .02em; opacity: .92; }
.vt-tr { display: inline-flex; align-items: center; padding: .05rem .45rem; border-radius: .25rem; font-size: .72em; font-weight: 800; letter-spacing: .03em; color: var(--pr); background: color-mix(in srgb, var(--pr) 14%, transparent); }
.vt-rozet {
  position: absolute; left: .5rem; top: .5rem; z-index: 2; display: inline-flex; align-items: center; gap: .3rem; padding: .22rem .5rem; border-radius: .3rem;
  background: rgba(20, 20, 20, .82); color: #fff; font-size: .66rem; font-weight: 800; letter-spacing: .06em; line-height: 1.2; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.vt-rozet.yeni { background: var(--pr-btn); color: var(--pr-on); }
.vt-rozet.altin { background: color-mix(in srgb, var(--gold) 88%, #000); color: #111; }
.vt-rozet.st-paused { background: color-mix(in srgb, var(--gold) 88%, #000); color: #111; }
.vt-rozet.st-cancelled { background: color-mix(in srgb, var(--red) 88%, #000); color: #fff; }
.vt-rozet.st-tba { background: color-mix(in srgb, var(--blue) 88%, #000); color: #fff; }
.vt-rozet.st-hidden { background: #4b5563; color: #fff; }
.vt-ad { font-weight: 900; letter-spacing: -.02em; line-height: 1.02; }
.vt-logo { display: block; max-width: 100%; height: auto; object-fit: contain; object-position: left bottom; filter: drop-shadow(0 .2rem .7rem rgba(0, 0, 0, .6)); }

/* ── 6. Erişilebilirlik tercihleri (Tema penceresi > Görünüm ve erişilebilirlik) ──
   js/erisim.js html'e data-* yazar; burada karşılıkları var. */
html { font-size: calc(clamp(16px, 0.57vw + 7.8px, 22px) * var(--vt-yazi-olcek)); }
html[data-yazi="buyuk"] { --vt-yazi-olcek: 1.12; }
html[data-yazi="cok-buyuk"] { --vt-yazi-olcek: 1.26; }
/* Yüksek karşıtlık: kenarlıklar belirgin, yazı tam beyaz/siyah, saydamlık yok */
html[data-karsit="1"] { --border: rgba(255, 255, 255, .4); --border-h: rgba(255, 255, 255, .75); --muted: rgba(255, 255, 255, .82); --text-s: rgba(255, 255, 255, .95); --text: #fff; --vt-cam: var(--bg); }
html[data-karsit="1"][data-theme="light"] { --border: rgba(0, 0, 0, .55); --border-h: rgba(0, 0, 0, .9); --muted: rgba(0, 0, 0, .78); --text-s: rgba(0, 0, 0, .92); --text: #000; }
html[data-karsit="1"] nav.main-nav { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--bg); border-bottom-color: var(--border-h); }
html[data-karsit="1"] :is(.vt-kart-gorsel, .vt-bkart-gorsel, .vt-hover) { box-shadow: 0 0 0 .12rem var(--border-h); }
html[data-karsit="1"] a:not([class]) { text-decoration: underline; }
/* Hareketi azalt */
html[data-hareket-az] *, html[data-hareket-az] *::before, html[data-hareket-az] *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
/* Hover kartlarını kapat (yalnız tıklayınca açılan pencere kalır) */
html[data-onizleme-kapali] .vt-hover { display: none !important; }
/* Seçilebilir her şey için büyük dokunma alanı (dokunmatik cihaz) */
@media (pointer: coarse) { .vt-yuvarlak { width: 2.9rem; height: 2.9rem; } .vt-ikon-btn { width: 2.9rem; height: 2.9rem; } nav.main-nav .nav-icon { width: 2.8rem; height: 2.8rem; } }

@media (max-width: 760px) {
  :root { --vt-nav: 3.4rem; }
  nav.main-nav { height: auto; }
  body.vt-ana nav.main-nav:not(.kayik) .main-tab { color: #f2f2f2; }
}

/* ── Erişilebilirlik paneli (Tema penceresi, js/erisim.js) ─────── */
.erisim-panel { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--border); text-align: left; }
.er-bas { display: flex; align-items: center; gap: .55rem; margin: 0 0 .7rem; font-size: .95rem; font-weight: 800; color: var(--text); }
.er-bas i { color: var(--pr); }
.er-satir { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .65rem 0; border-bottom: 1px solid var(--border); }
.er-metin { min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.er-metin b { font-size: .9rem; font-weight: 700; color: var(--text); }
.er-metin small { font-size: .78rem; line-height: 1.4; color: var(--text-s); }
.er-anahtar { position: relative; flex: 0 0 auto; width: 2.9rem; height: 1.6rem; padding: 0; border: 0; border-radius: 2rem; background: var(--border-h); cursor: pointer; transition: background .2s; }
.er-anahtar span { position: absolute; left: .2rem; top: .2rem; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .4); transition: transform .22s var(--vt-hizli); }
.er-anahtar[aria-checked="true"] { background: var(--pr-btn); }
.er-anahtar[aria-checked="true"] span { transform: translateX(1.3rem); }
.er-segment { display: inline-flex; flex: 0 0 auto; padding: .18rem; border-radius: .6rem; background: var(--input-bg); box-shadow: inset 0 0 0 1px var(--border); }
.er-segment button { padding: .4rem .75rem; border: 0; border-radius: .45rem; background: none; color: var(--text-s); font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer; white-space: nowrap; }
.er-segment button[aria-checked="true"] { background: var(--pr-btn); color: var(--pr-on); }
.er-sifirla { margin-top: .8rem; padding: .45rem .9rem; border: 0; border-radius: .5rem; background: none; color: var(--text-s); font: inherit; font-size: .8rem; font-weight: 700; text-decoration: underline; cursor: pointer; }
.er-sifirla:hover { color: var(--text); }
@media (max-width: 520px) { .er-satir { flex-wrap: wrap; } .er-segment { width: 100%; } .er-segment button { flex: 1; } }

/* Ekip Paneli düğmesi mor ve belirgin (kullanıcı 21.10.2026: "çok önemli, daha anlaşılır, rengi mor"); üst çubukta hem masaüstünde hem telefonda,
   mobil menüde ilk sırada tam renkli kutu. "Destek Ol" düğmesi kaldırıldı. Mor, Bize Katıl'ın turuncusundan ayrışsın diye sabit renk. */
nav.main-nav .nav-right .nav-katil.ekip, .nav-katil.ekip { background: #7c3aed; color: #fff; border: 1px solid rgba(255, 255, 255, .22); box-shadow: 0 2px 14px rgba(124, 58, 237, .45); }
nav.main-nav .nav-right .nav-katil.ekip i, .nav-katil.ekip i { color: #fff; }
nav.main-nav .nav-right .nav-katil.ekip:hover, .nav-katil.ekip:hover { background: #6d28d9; color: #fff; border-color: rgba(255, 255, 255, .4); }
nav.main-nav .nav-right .nav-katil.ekip.aktif { background: #5b21b6; }
.mm-oge.ekip { background: #7c3aed; border-color: #7c3aed; color: #fff; }
.mm-oge.ekip i { color: #fff; }

/* ── 7. Rozetler: hepsi Kurucu rozeti gibi hap biçimli ve simgeli ──────────────────────────────
   Kullanıcı 21.10.2026 (DEVIR 6.103/1): "tüm roller Kurucu gibi yuvarlaklaşacak". ADMİN, MOD, EKİP, VIP, ÜRETİCİ, ayın üyesi
   ve site rolleri aynı hap: tam yuvarlak, rengin hafif degradesi, aynı renkte ince kenar, açık renkte yazı ve simge.
   Simge, rozeti üreten yerlere (index, izle, profil, kullanıcı sayfası...) dokunmamak için CSS'ten gelir (::before).
   Yazı rengi temaya göre: rengin %60'ı + tema yazısı (açık temada koyu, koyu temada açık kalır). Eski kurallar
   index.css, izle.css, polish.css ve cila.css'te; burası en son yüklendiği için onları ezer. */
:root { --rz-r: 99rem; --rz-px: .6rem; }
html:root :is(.badge-admin, .badge-mod, .badge-ekip, .badge-director, .badge-pending, .badge-vip, .badge-uretici, .badge-rol, .badge-ayin) {
  --rk: #9ca3af;
  display: inline-flex; align-items: center; gap: .3rem; box-sizing: border-box; height: var(--rz-h, 20px); padding: 0 var(--rz-px) 0 calc(var(--rz-px) - .1rem);
  border-radius: var(--rz-r); border: 1px solid color-mix(in srgb, var(--rk) 62%, transparent);
  background: linear-gradient(100deg, color-mix(in srgb, var(--rk) 30%, transparent), color-mix(in srgb, var(--rk) 12%, transparent));
  color: color-mix(in srgb, var(--rk) 55%, var(--text)); -webkit-text-fill-color: color-mix(in srgb, var(--rk) 55%, var(--text));
  font-family: 'DM Sans', sans-serif; font-size: var(--rz-fs, .64rem); font-weight: 900; letter-spacing: .08em; line-height: 1; text-transform: uppercase;
  white-space: nowrap; vertical-align: middle; box-shadow: none;
}
html:root :is(.badge-admin, .badge-mod, .badge-ekip, .badge-director, .badge-pending)::before {
  font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: .9em; line-height: 1;
}
html:root .badge-admin { --rk: #ef4444; }
html:root .badge-admin::before { content: '\f3ed'; }          /* kalkan */
html:root .badge-mod { --rk: #3b82f6; }
html:root .badge-mod::before { content: '\f0e3'; }            /* tokmak */
html:root .badge-ekip { --rk: #a855f7; }
html:root .badge-ekip::before { content: '\f130'; }           /* mikrofon */
html:root .badge-director { --rk: #9333ea; }
html:root .badge-director::before { content: '\f008'; }       /* film */
html:root .badge-pending { --rk: #f59e0b; }
html:root .badge-pending::before { content: '\f254'; }        /* kum saati */
html:root .badge-vip { --rk: #f59e0b !important; background: linear-gradient(100deg, color-mix(in srgb, #f59e0b 30%, transparent), color-mix(in srgb, #f59e0b 12%, transparent)) !important;
  border-color: color-mix(in srgb, #f59e0b 62%, transparent) !important; color: color-mix(in srgb, #f59e0b 60%, var(--text)) !important; -webkit-text-fill-color: color-mix(in srgb, #f59e0b 60%, var(--text)) !important; }
html:root .badge-vip:not(.booster)::before { content: '\f521'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: .9em; }   /* taç */
html:root .badge-vip.ucretsiz { background: linear-gradient(100deg, color-mix(in srgb, #22d3ee 30%, transparent), color-mix(in srgb, #22d3ee 12%, transparent)) !important;
  border-color: color-mix(in srgb, #22d3ee 62%, transparent) !important; color: color-mix(in srgb, #22d3ee 60%, var(--text)) !important; -webkit-text-fill-color: color-mix(in srgb, #22d3ee 60%, var(--text)) !important; }
html:root .badge-vip.booster { background: linear-gradient(100deg, color-mix(in srgb, #f47fff 30%, transparent), color-mix(in srgb, #f47fff 12%, transparent)) !important;
  border-color: color-mix(in srgb, #f47fff 62%, transparent) !important; color: color-mix(in srgb, #f47fff 60%, var(--text)) !important; -webkit-text-fill-color: color-mix(in srgb, #f47fff 60%, var(--text)) !important; }
html:root .badge-ayin { --rk: #f59e0b; }
html:root .badge-ayin i { font-size: .9em; }
html:root .badge-uretici, html:root .badge-rol { --rk: var(--r, #99aab5); }
html:root .badge-rol i, html:root .badge-uretici i { color: inherit; }
html:root .badge-rol .badge-rol-nokta { background: var(--rk); }
html:root .badge-rol.bh, html:root .badge-rol { text-transform: none; letter-spacing: .02em; }
html:root .badge-rol.bh { text-transform: uppercase; letter-spacing: .08em; }
/* Site rolünün kendi türü (dolu, çizgi, degrade, parıltı) korunur: hap biçimi ortak, dolgu türü rolünki */
html:root .badge-rol.s-dolu { background: var(--rk); border-color: var(--rk); color: #fff; -webkit-text-fill-color: #fff; }
html:root .badge-rol.s-cizgi { background: transparent; }
html:root .badge-rol.s-gradyan { background: linear-gradient(90deg, var(--r), var(--r2, var(--r))); border-color: transparent; color: #fff; -webkit-text-fill-color: #fff; }
html:root .badge-rol.f { font-family: var(--rf) !important; font-weight: 700; }
html:root .badge-rol.s-parilti { background: linear-gradient(110deg, color-mix(in srgb, var(--r) 25%, transparent) 30%, color-mix(in srgb, var(--r2) 60%, #fff 20%) 50%, color-mix(in srgb, var(--r) 25%, transparent) 70%); background-size: 250% 100%; border-color: var(--r); }
/* Kurucu: açık temada sarı yazı okunmuyordu; yazı rengi de temaya göre */
html:root .badge-kurucu { color: color-mix(in srgb, #ffb347 60%, var(--text)); -webkit-text-fill-color: color-mix(in srgb, #ffb347 60%, var(--text)); }