/* ═══════════════════════════════════════════════════════════════════════════
   OGK PLATFORM — "Wow" Layer v1.0
   Hope UI (iqonic.design) tasarım dilinden ilham alınarak: renkle tonlanmış
   "glow" gölgeler, degradeli ikon rozetleri, buton ışık geçişi (shine-sweep),
   kademeli (staggered) giriş animasyonları, sayaç (count-up) efekti,
   camsı (glass) navbar/sidebar dokunuşu.
   Marka kimliği korunur (mor/indigo #8b5cf6 / #6366f1 / #9a55ff aile).
   Additive only — ogk-enhanced.css'in temel kart/buton/KPI stillerini EZMEZ,
   üzerine ışık/renk/hareket ekler. ogk-motion.css'ten SONRA, ogk-dark.css'ten
   ÖNCE yüklenmelidir (dark tema bu katmanın rengini de override edebilsin).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Ek Tasarım Belirteçleri ─────────────────────────────────────────── */
:root {
  --ogk-glow-purple: rgba(139, 92, 246, .22);
  --ogk-glow-indigo: rgba(99, 102, 241, .22);
  --ogk-glow-green:  rgba(16, 185, 129, .20);
  --ogk-glow-orange: rgba(245, 158, 11, .20);
  --ogk-glow-red:    rgba(239, 68, 68, .20);
  --ogk-glow-blue:   rgba(59, 130, 246, .20);
  --ogk-glow-teal:   rgba(20, 184, 166, .20);
  --ogk-shine:       cubic-bezier(.22, 1, .36, 1);
}

/* ── 2. Kart — Renkli "Glow" Gölge ──────────────────────────────────────── */
/* ogk-enhanced.css'teki düz siyah gölgeyi, hover anında markanın moruyla
   tonlanmış yumuşak bir "ışıma" ile zenginleştirir (Hope UI sidebar'daki
   0 0 30px rgba(primary,.05) tekniğinin genelleştirilmiş hali). */
.card:hover {
  box-shadow: var(--ogk-shadow), 0 16px 40px -12px var(--ogk-glow-purple) !important;
}

/* ── 3. KPI Kart — Degradeli İkon Rozet + Renkli Glow ───────────────────── */
.ogk-kpi-icon {
  position: relative;
  background-image: linear-gradient(135deg, currentColor 0%, transparent 130%);
  background-blend-mode: overlay;
  transition: transform .35s var(--ogk-shine), box-shadow .35s var(--ogk-shine);
}
.ogk-kpi:hover .ogk-kpi-icon {
  transform: scale(1.08) rotate(-4deg);
}
.ogk-kpi-purple:hover { box-shadow: var(--ogk-shadow-lg), 0 18px 44px -10px var(--ogk-glow-purple) !important; }
.ogk-kpi-green:hover  { box-shadow: var(--ogk-shadow-lg), 0 18px 44px -10px var(--ogk-glow-green) !important; }
.ogk-kpi-blue:hover   { box-shadow: var(--ogk-shadow-lg), 0 18px 44px -10px var(--ogk-glow-blue) !important; }
.ogk-kpi-orange:hover { box-shadow: var(--ogk-shadow-lg), 0 18px 44px -10px var(--ogk-glow-orange) !important; }
.ogk-kpi-red:hover    { box-shadow: var(--ogk-shadow-lg), 0 18px 44px -10px var(--ogk-glow-red) !important; }
.ogk-kpi-teal:hover   { box-shadow: var(--ogk-shadow-lg), 0 18px 44px -10px var(--ogk-glow-teal) !important; }

/* Sayaç (count-up) hedefi — JS bu class'ı arar */
.ogk-kpi-value[data-countup] { font-variant-numeric: tabular-nums; }

/* ── 4. Buton — Işık Geçişi (Shine Sweep) ───────────────────────────────── */
.btn-gradient-primary,
.btn-gradient-success,
.btn-gradient-info,
.btn-gradient-danger,
.btn-gradient-warning {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: transform .25s var(--ogk-shine), box-shadow .25s var(--ogk-shine), opacity .25s ease !important;
}
.btn-gradient-primary::before,
.btn-gradient-success::before,
.btn-gradient-info::before,
.btn-gradient-danger::before,
.btn-gradient-warning::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.35) 48%, rgba(255,255,255,.35) 52%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .65s var(--ogk-shine);
  pointer-events: none;
  z-index: 1;
}
.btn-gradient-primary:hover::before,
.btn-gradient-success:hover::before,
.btn-gradient-info:hover::before,
.btn-gradient-danger:hover::before,
.btn-gradient-warning:hover::before {
  transform: translateX(120%);
}
.btn-gradient-primary:hover,
.btn-gradient-success:hover,
.btn-gradient-info:hover,
.btn-gradient-danger:hover,
.btn-gradient-warning:hover {
  opacity: 1 !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 26px -8px var(--ogk-glow-purple) !important;
}

/* ── 5. Kademeli Giriş (Staggered Entrance) ─────────────────────────────── */
/* content-wrapper'ın doğrudan çocukları içindeki kart/grid sütunları,
   ogk-enhanced.css'teki tekil "ogk-in" yerine art arda kayarak belirir.
   fill-mode SADECE "backwards" — "both"/"forwards" olsaydı animasyon bitince
   transform (translateY(0) olsa bile) elementte kalıcı kalır ve içindeki
   position:fixed elemanlar (örn. Bootstrap modal) için görünmez bir
   "containing block" yaratıp modalı ekran yerine bu sütuna sabitler
   (görünmez modal + arkada backdrop bug'ı). "backwards" gecikme sırasında
   başlangıç durumunu korur ama bitişte transform'u miras bırakmaz. */
@keyframes ogk-wow-rise {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* Sadece opacity — transform YOK. Bu seçici Bootstrap'ın .row > col-*
   grid yapısına uygulanıyor, yani neredeyse her sayfadaki her bileşenin
   olası atası; içine düşen bir Bootstrap modalı (position:fixed), fill-mode
   "backwards" + gecikme süresince (0–300ms) aktif bir transform gördüğünde
   ekran yerine bu küçük sütuna sabitlenip görünmez/deforme olur. */
.content-wrapper .row > [class*="col-"] {
  animation: ogk-wow-rise .45s var(--ogk-shine) backwards;
}
.content-wrapper .row > [class*="col-"]:nth-child(1) { animation-delay: .02s; }
.content-wrapper .row > [class*="col-"]:nth-child(2) { animation-delay: .07s; }
.content-wrapper .row > [class*="col-"]:nth-child(3) { animation-delay: .12s; }
.content-wrapper .row > [class*="col-"]:nth-child(4) { animation-delay: .17s; }
.content-wrapper .row > [class*="col-"]:nth-child(5) { animation-delay: .22s; }
.content-wrapper .row > [class*="col-"]:nth-child(6) { animation-delay: .27s; }
.content-wrapper .row > [class*="col-"]:nth-child(n+7) { animation-delay: .30s; }

/* ── 6. Sidebar (Sneat) — Aktif Öge Degradeli Vurgu ─────────────────────── */
.menu-item.active > .menu-link:not(.menu-toggle),
.menu-item.active > .menu-link.menu-toggle {
  background: linear-gradient(115deg, #ff7a45 0%, #c2569e 50%, #a855f7 100%) !important;
  box-shadow: 0 6px 18px -6px rgba(255, 122, 69, .45);
}
.menu-item.active > .menu-link:not(.menu-toggle) i,
.menu-item.active > .menu-link:not(.menu-toggle) div,
.menu-item.active > .menu-link.menu-toggle i,
.menu-item.active > .menu-link.menu-toggle div {
  color: #fff !important;
}
.menu-sub .menu-item.active > .menu-link { color: #a855f7 !important; }
.menu-link i {
  transition: transform .3s var(--ogk-shine), color .25s ease;
}
.menu-item.active .menu-link i,
.menu-item:hover .menu-link i {
  transform: scale(1.1);
}

/* ── 7. Tablo — Aktif Satır Vurgusu ─────────────────────────────────────── */
.table > tbody > tr { position: relative; transition: transform .18s var(--ogk-shine); }
.table > tbody > tr > td:first-child { position: relative; }
.table > tbody > tr:hover > td:first-child::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, #8b5cf6, #6366f1);
  border-radius: 0 3px 3px 0;
}

/* ── 8. Giriş Sayfası — Yumuşak Işık Küreleri ───────────────────────────── */
body:has(.content-wrapper.auth) {
  position: relative;
  overflow-x: hidden;
}
body:has(.content-wrapper.auth)::before,
body:has(.content-wrapper.auth)::after {
  content: '';
  position: fixed;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
  animation: ogk-wow-float 10s ease-in-out infinite;
}
body:has(.content-wrapper.auth)::before {
  width: 380px; height: 380px;
  background: rgba(218, 140, 255, .25);
  top: -80px; left: -80px;
}
body:has(.content-wrapper.auth)::after {
  width: 460px; height: 460px;
  background: rgba(99, 102, 241, .22);
  bottom: -120px; right: -100px;
  animation-delay: -5s;
}
@keyframes ogk-wow-float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(24px, -18px) scale(1.06); }
}
.content-wrapper.auth .card,
.content-wrapper.auth .auth-form-light {
  position: relative;
  z-index: 1;
}

/* ── 9. Avatar / Rozet — Yumuşak Ton Dairesi (Hope UI "subtle badge") ──── */
.ogk-badge-circle {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-weight: 700;
  transition: transform .25s var(--ogk-shine);
}
.ogk-badge-circle:hover { transform: scale(1.1); }

/* ── 9b. Checkbox / Radio — İşaretli/İşaretsiz Durumu Net Ayırt Edilsin ───
   İki tema (style.css + Sneat core.scss) aynı .form-check-input:checked
   seçicisini tanımlıyor; sonuç teknik olarak doğru olsa da kontrast zayıf
   kalabiliyor (özellikle "Beni hatırla" gibi text-muted etiketli, küçük
   checkbox'larda). Marka rengiyle, büyütülmüş ve kesin kontrastlı bir stil
   ile üzerine yazıyoruz — hem light hem dark modda geçerli. */
/* float + negatif margin yerine flex: iç içe/label-wrap gibi farklı
   markup düzenlerinde de checkbox'ın görünmez/kaymış olmasını engeller. */
.form-check {
  display: flex !important;
  align-items: center !important;
  gap: .5rem;
  padding-left: 0 !important;
  min-height: auto !important;
}
.form-check-input {
  flex-shrink: 0 !important;
  float: none !important;
  margin: 0 !important;
  position: static !important;
  width: 1.15em !important;
  height: 1.15em !important;
  min-width: 1.15em !important;
  border-width: 2px !important;
  border-color: #9ca3af !important;
  background-color: #fff !important;
  opacity: 1 !important;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, transform .1s ease;
}
.form-check-input:hover { border-color: #8b5cf6 !important; }
.form-check-input:checked {
  background-color: #8b5cf6 !important;
  border-color: #8b5cf6 !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3.5' d='m6 10 3 3 6-6'/%3e%3c/svg%3e") !important;
  transform: scale(1.05);
}
.form-check-input:focus {
  border-color: #8b5cf6 !important;
  box-shadow: 0 0 0 0.2rem rgba(139, 92, 246, 0.25) !important;
}
.form-check-label {
  cursor: pointer;
  margin: 0 !important;
  padding-left: 0 !important;
}

/* ── 10. Erişilebilirlik — Hareket Azaltma Tercihine Saygı ──────────────── */
@media (prefers-reduced-motion: reduce) {
  .content-wrapper .row > [class*="col-"] { animation: none !important; }
  body:has(.content-wrapper.auth)::before,
  body:has(.content-wrapper.auth)::after { animation: none !important; }
  .ogk-kpi:hover .ogk-kpi-icon,
  .menu-item.active .menu-link i { transform: none !important; }
}