/* ═══════════════════════════════════════════════════════════════════════
   PLAN RENKLERİ · ETİKETLERİ · EFEKTLERİ — TEK KAYNAK (25.09.2026)
   ───────────────────────────────────────────────────────────────────────
   FREE / PRO / MAX / MAX PLUS etiketlerinin (rozet, çip, hap) rengi, kenarlığı,
   parıltısı ve MAX'ın akan geçiş efekti YALNIZCA bu dosyada tanımlıdır.
   layout-head.ejs her sayfada yükler.

   NASIL DEĞİŞTİRİLİR?
     • Renk / efekt → aşağıdaki :root değişkenleri (açık tema metin
       renkleri body.light-theme bloğunda).
     • Etiketin biçimi (köşe, kalınlık, harf aralığı) → "Ortak biçim"
       değişkenleri.
     • Bir etiketin tüm görünümü → "ETİKET KAYITLARI" bölümündeki kural;
       sitedeki bütün plan etiketlerinin seçicileri orada listelidir.
   Sayfalar kendi etiket sınıflarında yalnızca boyut/boşluk tutar.
   Plan rengini kullanan başka öğeler (kart kenarı, şerit, fiyat yazısı,
   parıltı) da buradaki değişkenlerden okur.

   Yeni bir yerde plan etiketi gerekiyorsa:  <span class="plan-tag pro">PRO</span>
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* ── FREE ── (açık mavi) */
  --plan-free-rgb: 56, 189, 248;           /* zemin/kenar tonu (rgb üçlüsü) */
  --plan-free-text: #7dd3fc;               /* etiket yazısı */
  --plan-free-btn-text: #e0f2fe;           /* FREE renkli düğme yazısı (guild-detail kur/ayar düğmeleri) */
  --plan-free-bg-alpha: 0.14;
  --plan-free-line-alpha: 0.35;
  --plan-free-solid: #38bdf8;              /* dolu düğme zemini ("Ücretsiz başla", FREE sunucuda "Yönet") */
  --plan-free-on-solid: #04293f;           /* dolu düğme yazısı */

  /* ── PRO ── (Planlar sayfasındaki yeşil etiket) */
  --plan-pro-rgb: 46, 204, 113;
  --plan-pro-text: #7ee2a8;
  --plan-pro-bg-alpha: 0.14;
  --plan-pro-line-alpha: 0.45;
  --plan-pro-glow: none;                   /* ör. 0 0 12px rgba(46,204,113,.4) */
  --plan-pro-solid: #2ecc71;               /* dolu düğme zemini ("Kur", "Yenile") */
  --plan-pro-on-solid: #062814;            /* dolu düğme yazısı */
  --plan-pro-bar: #2ecc71, #7ee2a8, #b9f5cf, #7ee2a8, #2ecc71;   /* akan üst şerit renk durakları */

  /* ── MAX ── (akan sarı-turuncu etiket) */
  --plan-max-rgb: 251, 191, 36;
  --plan-max-text: #fcd34d;                /* düz yazı olarak kullanıldığında */
  --plan-max-gradient: linear-gradient(90deg, #f59e0b, #fbbf24, #f97316, #f59e0b);
  --plan-max-gradient-size: 300% 100%;
  --plan-max-flow-speed: 2.5s;             /* akış hızı; 0s yerine efekti kapatmak için animation: none */
  --plan-max-line: rgba(251, 191, 36, 0.6);
  --plan-max-glow: 0 0 16px rgba(251, 191, 36, 0.45);
  --plan-max-on-solid: #1a1000;            /* geçişin üstündeki yazı */
  --plan-max-bar: #f59e0b, #fbbf24, #fde68a, #fbbf24, #f59e0b;

  /* ── MAX PLUS ── (akan kırmızı etiket · 28.09.2026) — Max ile aynı sistemler, 3 sunucu */
  --plan-maxplus-rgb: 239, 68, 68;
  --plan-maxplus-text: #fca5a5;            /* düz yazı olarak kullanıldığında */
  --plan-maxplus-gradient: linear-gradient(90deg, #dc2626, #ef4444, #f43f5e, #dc2626);
  --plan-maxplus-gradient-size: 300% 100%;
  --plan-maxplus-flow-speed: 2.5s;
  --plan-maxplus-line: rgba(239, 68, 68, 0.65);
  --plan-maxplus-glow: 0 0 16px rgba(239, 68, 68, 0.5);
  --plan-maxplus-on-solid: #ffffff;        /* geçişin üstündeki yazı */
  --plan-maxplus-bar: #dc2626, #ef4444, #fca5a5, #ef4444, #dc2626;

  /* ── Ortak biçim ── */
  --plan-tag-radius: 999px;
  --plan-tag-weight: 800;
  --plan-tag-spacing: .06em;

  /* ── Plan düğmeleri (aşağıdaki PLAN DÜĞMELERİ kayıtları) ── */
  --plan-btn-soft-alpha: 0.12;             /* ikon düğmesi zemini */
  --plan-btn-soft-hover-alpha: 0.26;       /* ikon düğmesi zemini (üzerine gelince) */
  --plan-btn-soft-line-alpha: 0.4;         /* ikon düğmesi kenarlığı */
}
body.light-theme {
  --plan-free-text: #0369a1;
  --plan-free-btn-text: #075985;
  --plan-pro-text: #15803d;
  --plan-max-text: #b45309;
  --plan-maxplus-text: #b91c1c;
}

@keyframes planMaxFlow { 0% { background-position: 0% 50%; } 100% { background-position: 300% 50%; } }

/* ── Ortak etiket bileşeni ── */
.plan-tag {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  padding: 3px 9px; font-size: 10.5px; line-height: 1.2; text-transform: uppercase; white-space: nowrap; flex-shrink: 0;
  border: 1px solid transparent;
}

/* ═══════════════ ETİKET KAYITLARI ═══════════════
   Sitedeki bütün plan etiketleri. Sayfa CSS'leri bu etiketlere renk
   VERMEZ; yalnızca boyut/boşluk verir. "html body" öneki, sayfa içi
   stillerin önüne geçmek içindir (özgüllük) — silme.

   Kullanan yerler:
     .plan-tag ................ ortak bileşen (admin hediye kodları, yeni yerler)
     .plan-chip ............... guild-detail (araç kartları vb.)
     .gd-sc-plan / .gd-sys-badge / .gd-st-plan ... guild-detail sistem kartı, grup başlığı, stüdyo
     .plan-badge .............. plans (mevcut plan), redeem (planım)
     .plan-active-badge ....... plans (plan kartında "Aktif abonelik")
     .plan-badge-pill ......... guilds (başlıktaki plan hapı)
     .gl-plan-pill ............ guilds (plan şeridi)
     .gl-card .gl-badge ....... guilds (sunucu kartındaki PRO/MAX rozeti)
     .uk-badge.pro ............ plans ("Popüler" rozeti) */

/* Ortak biçim (köşe, kalınlık, harf aralığı) */
html body .plan-tag,
html body .plan-chip.free, html body .plan-chip.pro, html body .plan-chip.max, html body .plan-chip.maxplus,
html body .gd-sc-plan, html body .gd-sys-badge, html body .gd-st-plan,
html body .plan-badge.free, html body .plan-badge.pro, html body .plan-badge.max, html body .plan-badge.maxplus,
html body .plan-active-badge.free, html body .plan-active-badge.pro, html body .plan-active-badge.max, html body .plan-active-badge.maxplus,
html body .plan-badge-pill,
html body .gl-plan-pill {
  border-radius: var(--plan-tag-radius) !important;
  font-weight: var(--plan-tag-weight) !important;
  letter-spacing: var(--plan-tag-spacing) !important;
}

/* FREE */
html body .plan-tag.free,
html body .plan-chip.free,
html body .gd-sc-plan.free, html body .gd-sys-badge.free, html body .gd-st-plan.free,
html body .plan-badge.free,
html body .plan-active-badge.free,
html body .plan-badge-pill.plan-free,
html body .plan-free .gl-plan-pill {
  background: rgba(var(--plan-free-rgb), var(--plan-free-bg-alpha)) !important;
  border-color: rgba(var(--plan-free-rgb), var(--plan-free-line-alpha)) !important;
  color: var(--plan-free-text) !important;
  box-shadow: none !important;
  animation: none;
}

/* PRO */
html body .plan-tag.pro,
html body .plan-chip.pro,
html body .gd-sc-plan.pro, html body .gd-sys-badge.pro, html body .gd-st-plan.pro,
html body .plan-badge.pro,
html body .plan-active-badge.pro,
html body .plan-badge-pill.plan-pro,
html body .plan-pro .gl-plan-pill,
html body .gl-card.is-mine:not(.plan-max):not(.plan-maxplus) .gl-badge,
html body .uk-badge.pro {
  background: rgba(var(--plan-pro-rgb), var(--plan-pro-bg-alpha)) !important;
  border-color: rgba(var(--plan-pro-rgb), var(--plan-pro-line-alpha)) !important;
  color: var(--plan-pro-text) !important;
  box-shadow: var(--plan-pro-glow) !important;
  animation: none;
}

/* MAX */
html body .plan-tag.max,
html body .plan-chip.max,
html body .gd-sc-plan.max, html body .gd-sys-badge.max, html body .gd-st-plan.max,
html body .plan-badge.max,
html body .plan-active-badge.max,
html body .plan-badge-pill.plan-max,
html body .plan-max .gl-plan-pill,
html body .gl-card.is-mine.plan-max .gl-badge {
  background: var(--plan-max-gradient) !important;
  background-size: var(--plan-max-gradient-size) !important;
  border-color: var(--plan-max-line) !important;
  color: var(--plan-max-on-solid) !important;
  box-shadow: var(--plan-max-glow) !important;
  animation: planMaxFlow var(--plan-max-flow-speed) linear infinite;
}

/* MAX PLUS (28.09.2026) */
html body .plan-tag.maxplus,
html body .plan-chip.maxplus,
html body .gd-sc-plan.maxplus, html body .gd-sys-badge.maxplus, html body .gd-st-plan.maxplus,
html body .plan-badge.maxplus,
html body .plan-active-badge.maxplus,
html body .plan-badge-pill.plan-maxplus,
html body .plan-maxplus .gl-plan-pill,
html body .gl-card.is-mine.plan-maxplus .gl-badge {
  background: var(--plan-maxplus-gradient) !important;
  background-size: var(--plan-maxplus-gradient-size) !important;
  border-color: var(--plan-maxplus-line) !important;
  color: var(--plan-maxplus-on-solid) !important;
  box-shadow: var(--plan-maxplus-glow) !important;
  animation: planMaxFlow var(--plan-maxplus-flow-speed) linear infinite;
}
/* Etiketin içindeki ikon/nokta yazı rengini izlesin */
.plan-tag i, .plan-badge i, .plan-badge span { color: inherit !important; }

/* ═══════════════ PLAN DÜĞMELERİ (28.09.2026) ═══════════════
   Plana göre renklenen düğmeler. Renkler yukarıdaki değişkenlerden gelir;
   plan rengi değişince bu düğmeler de kendiliğinden değişir.

   Yeni bir yerde:  <a class="plan-btn pro">…</a>   (dolu)
                    <a class="plan-btn-soft pro">…</a> (ikon / ikincil)

   Kullanan yerler:
     .vx-btn.free/.pro/.max ........... index (Planlar bölümü düğmeleri)
     .gl-card[data-plan] .gl-manage ... guilds (sunucu kartındaki "Yönet")
     .gl-ico[data-plan] ............... guilds (Loglar / Analiz / Topluluk / Başarımlar — her biri kendi sisteminin planı)
   "Yönet" kartın planından (aktif değil → free, aktif → pro / max); kısayol
   düğmeleri bağlı oldukları sistemin planından renk alır. "Davet et" (yeşil) ve
   yetkisiz (gri) düğmeler kendi renginde kalır. */

/* Dolu — FREE */
html body .plan-btn.free, html body .plan-btn.free:hover,
html body .vx-btn.free, html body .vx-btn.free:hover,
html body .gl-card[data-plan="free"] .gl-manage:not(.off):not(.invite), html body .gl-card[data-plan="free"] .gl-manage:not(.off):not(.invite):hover:not(.idx-slider-btn) {
  background: var(--plan-free-solid) !important;
  border-color: var(--plan-free-solid) !important;
  color: var(--plan-free-on-solid) !important;
  box-shadow: 0 6px 18px rgba(var(--plan-free-rgb), 0.3) !important;
  animation: none;
}
/* Dolu — PRO */
html body .plan-btn.pro, html body .plan-btn.pro:hover,
html body .vx-btn.pro, html body .vx-btn.pro:hover,
html body .gl-card[data-plan="pro"] .gl-manage:not(.off):not(.invite), html body .gl-card[data-plan="pro"] .gl-manage:not(.off):not(.invite):hover:not(.idx-slider-btn) {
  background: var(--plan-pro-solid) !important;
  border-color: var(--plan-pro-solid) !important;
  color: var(--plan-pro-on-solid) !important;
  box-shadow: 0 6px 18px rgba(var(--plan-pro-rgb), 0.3) !important;
  animation: none;
}
/* Dolu — MAX (akan geçiş) */
html body .plan-btn.max, html body .plan-btn.max:hover,
html body .vx-btn.max, html body .vx-btn.max:hover,
html body .gl-card[data-plan="max"] .gl-manage:not(.off):not(.invite), html body .gl-card[data-plan="max"] .gl-manage:not(.off):not(.invite):hover:not(.idx-slider-btn) {
  background: var(--plan-max-gradient) !important;
  background-size: var(--plan-max-gradient-size) !important;
  border-color: var(--plan-max-line) !important;
  color: var(--plan-max-on-solid) !important;
  box-shadow: var(--plan-max-glow) !important;
  animation: planMaxFlow var(--plan-max-flow-speed) linear infinite;
}
/* Dolu — MAX PLUS (akan kırmızı geçiş) */
html body .plan-btn.maxplus, html body .plan-btn.maxplus:hover,
html body .vx-btn.maxplus, html body .vx-btn.maxplus:hover,
html body .gl-card[data-plan="maxplus"] .gl-manage:not(.off):not(.invite), html body .gl-card[data-plan="maxplus"] .gl-manage:not(.off):not(.invite):hover:not(.idx-slider-btn) {
  background: var(--plan-maxplus-gradient) !important;
  background-size: var(--plan-maxplus-gradient-size) !important;
  border-color: var(--plan-maxplus-line) !important;
  color: var(--plan-maxplus-on-solid) !important;
  box-shadow: var(--plan-maxplus-glow) !important;
  animation: planMaxFlow var(--plan-maxplus-flow-speed) linear infinite;
}
html body .plan-btn:hover, html body .vx-btn:is(.free, .pro, .max, .maxplus):hover,
html body .gl-card[data-plan] .gl-manage:not(.off):not(.invite):hover:not(.idx-slider-btn) { filter: brightness(1.07); }
html body :is(.plan-btn, .vx-btn, .gl-manage) :is(span, i, svg) { color: inherit !important; }

/* İkon / ikincil — FREE · PRO · MAX */
html body .plan-btn-soft.free, html body .gl-wrap .gl-ico[data-plan="free"], html body .gl-wrap .gl-ico[data-plan="free"]:hover:not(.idx-slider-btn) {
  background: rgba(var(--plan-free-rgb), var(--plan-btn-soft-alpha)) !important;
  border-color: rgba(var(--plan-free-rgb), var(--plan-btn-soft-line-alpha)) !important;
  color: var(--plan-free-text) !important;
}
html body .plan-btn-soft.pro, html body .gl-wrap .gl-ico[data-plan="pro"], html body .gl-wrap .gl-ico[data-plan="pro"]:hover:not(.idx-slider-btn) {
  background: rgba(var(--plan-pro-rgb), var(--plan-btn-soft-alpha)) !important;
  border-color: rgba(var(--plan-pro-rgb), var(--plan-btn-soft-line-alpha)) !important;
  color: var(--plan-pro-text) !important;
}
html body .plan-btn-soft.max, html body .gl-wrap .gl-ico[data-plan="max"], html body .gl-wrap .gl-ico[data-plan="max"]:hover:not(.idx-slider-btn) {
  background: rgba(var(--plan-max-rgb), var(--plan-btn-soft-alpha)) !important;
  border-color: rgba(var(--plan-max-rgb), var(--plan-btn-soft-line-alpha)) !important;
  color: var(--plan-max-text) !important;
}
html body .plan-btn-soft.maxplus, html body .gl-wrap .gl-ico[data-plan="maxplus"], html body .gl-wrap .gl-ico[data-plan="maxplus"]:hover:not(.idx-slider-btn) {
  background: rgba(var(--plan-maxplus-rgb), var(--plan-btn-soft-alpha)) !important;
  border-color: rgba(var(--plan-maxplus-rgb), var(--plan-btn-soft-line-alpha)) !important;
  color: var(--plan-maxplus-text) !important;
}
html body .plan-btn-soft.free:hover, html body .gl-wrap .gl-ico[data-plan="free"]:hover:not(.idx-slider-btn) { background: rgba(var(--plan-free-rgb), var(--plan-btn-soft-hover-alpha)) !important; }
html body .plan-btn-soft.pro:hover,  html body .gl-wrap .gl-ico[data-plan="pro"]:hover:not(.idx-slider-btn)  { background: rgba(var(--plan-pro-rgb), var(--plan-btn-soft-hover-alpha)) !important; }
html body .plan-btn-soft.max:hover,  html body .gl-wrap .gl-ico[data-plan="max"]:hover:not(.idx-slider-btn)  { background: rgba(var(--plan-max-rgb), var(--plan-btn-soft-hover-alpha)) !important; }
html body .plan-btn-soft.maxplus:hover, html body .gl-wrap .gl-ico[data-plan="maxplus"]:hover:not(.idx-slider-btn) { background: rgba(var(--plan-maxplus-rgb), var(--plan-btn-soft-hover-alpha)) !important; }

/* ═══════════════ PLAN RENKLİ YÜZEYLER ═══════════════
   Etiket olmayan ama plan efektini taşıyan öğeler için yardımcılar. */
.plan-max-flow {                         /* akan MAX zemini (şerit, dolu düğme) */
  background: var(--plan-max-gradient) !important;
  background-size: var(--plan-max-gradient-size) !important;
  animation: planMaxFlow var(--plan-max-flow-speed) linear infinite;
}
.plan-maxplus-flow {                     /* akan MAX PLUS zemini */
  background: var(--plan-maxplus-gradient) !important;
  background-size: var(--plan-maxplus-gradient-size) !important;
  animation: planMaxFlow var(--plan-maxplus-flow-speed) linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  html body .plan-tag.max, html body .plan-chip.max, html body .gd-sc-plan.max, html body .gd-sys-badge.max, html body .gd-st-plan.max,
  html body .plan-badge.max, html body .plan-active-badge.max, html body .plan-badge-pill.plan-max, html body .plan-max .gl-plan-pill,
  html body .gl-card.is-mine.plan-max .gl-badge, .plan-max-flow,
  html body .plan-btn.max, html body .vx-btn.max, html body .gl-card[data-plan="max"] .gl-manage,
  html body .plan-tag.maxplus, html body .plan-chip.maxplus, html body .gd-sc-plan.maxplus, html body .gd-sys-badge.maxplus, html body .gd-st-plan.maxplus,
  html body .plan-badge.maxplus, html body .plan-active-badge.maxplus, html body .plan-badge-pill.plan-maxplus, html body .plan-maxplus .gl-plan-pill,
  html body .gl-card.is-mine.plan-maxplus .gl-badge, .plan-maxplus-flow,
  html body .plan-btn.maxplus, html body .vx-btn.maxplus, html body .gl-card[data-plan="maxplus"] .gl-manage { animation: none !important; }
}