/* ============================================================
   PUGI MODERN — paylaşılan görsel katman (ekosistem hissi)
   Tüm sayfalara <link> ile eklenir. Mevcut token'ları kullanır,
   layout'u değiştirmez; sadece derinlik + parlaklık + tutarlılık.
   ============================================================ */

/* Tema renkleriyle uyumlu ambient ışıma değişkenleri (yoksa varsayılan) */
:root {
  --glow-1: color-mix(in srgb, var(--accent) 16%, transparent);
  --glow-2: color-mix(in srgb, var(--accent2, var(--accent)) 12%, transparent);
  --glow-3: color-mix(in srgb, var(--accent3, var(--accent)) 10%, transparent);
  --ring: color-mix(in srgb, var(--accent) 55%, transparent);
}

/* 1) Tipografi — yumuşatma */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }

/* 2) Ambient arka plan — KALDIRILDI (sol-alt köşedeki yeşil "iz" rahatsız ediyordu).
   Düz tema arka planı (var(--bg)) kullanılıyor; köşe ışımaları yok. */

/* 3) Scrollbar GİZLİ — kaydırma çalışır ama çubuk görünmez (uygulama hissi, web değil).
   !important: bazı sayfaların inline ::-webkit-scrollbar kurallarını da bastırır. */
* { scrollbar-width: none !important; -ms-overflow-style: none !important; }
::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none !important; }
::-webkit-scrollbar-thumb, ::-webkit-scrollbar-track { background: transparent !important; }

/* 4) Metin seçimi */
::selection { background: color-mix(in srgb, var(--accent) 40%, transparent); color: #fff; }

/* 5) Klavye odak halkası (erişilebilirlik + modern his) */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px var(--ring) !important;
  border-radius: 12px;
}

/* 6) Etkileşimli ögelerde yumuşak geçiş */
a, button, input, select, textarea,
.card, .chip, .tab-btn, .pill, .badge {
  transition: background-color .2s ease, border-color .2s ease,
              box-shadow .25s ease, transform .12s ease, color .2s ease, filter .2s ease;
}

/* 7) Buton dokunuş geri bildirimi (inline transform yoksa) */
button:active:not([style*="transform"]) { transform: scale(.97); }

/* 8) Kart parlatması — class tabanlı kartlarda derinlik + üst ışık çizgisi */
.card {
  position: relative;
  border: 1px solid color-mix(in srgb, var(--accent) 8%, var(--border));
  box-shadow: 0 1px 0 rgba(255,255,255,.03) inset,
              0 10px 30px -12px rgba(0,0,0,.55);
}
.card::after {
  content: "";
  position: absolute; left: 14px; right: 14px; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent,
              color-mix(in srgb, var(--accent) 45%, transparent), transparent);
  opacity: .5; pointer-events: none;
}
.card:hover { box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 18px 40px -16px rgba(0,0,0,.6); }

/* 9) Gradient ana butonlara hafif parıltı */
button[style*="gradient"]:hover, a[style*="gradient"]:hover, .btn-primary:hover {
  filter: brightness(1.06) saturate(1.05);
  box-shadow: 0 8px 28px -8px var(--ring);
}

/* ============================================================
   LANDING (index.html) — daha belirgin modern yenileme
   (Sadece açılışta olan sınıflar; diğer sayfaları etkilemez)
   ============================================================ */

/* Logo arkası ışık halesi */
.brand-mark::after {
  content: ""; position: absolute; inset: -28%; z-index: -1;
  background: radial-gradient(circle, var(--glow-1), transparent 70%);
  filter: blur(16px); opacity: .85;
}

/* Marka adı — yumuşak ışıltı */
.hero-logo-name { filter: drop-shadow(0 6px 26px color-mix(in srgb, var(--accent) 38%, transparent)); }

/* Hero pill'ler — camsı, hover'da accent */
.hero-pill {
  border-color: color-mix(in srgb, var(--accent) 16%, rgba(255,255,255,.06));
  background: color-mix(in srgb, var(--accent) 6%, rgba(255,255,255,.03));
}
.hero-pill:hover { border-color: color-mix(in srgb, var(--accent) 42%, transparent); color: var(--text); transform: translateY(-1px); }

/* Ana CTA — parıltı süpürmesi + güçlü glow + hover yükselme */
.btn-start { box-shadow: 0 10px 38px -8px color-mix(in srgb, var(--accent) 60%, transparent), 0 2px 8px rgba(0,0,0,.35); }
.btn-start::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 38%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.38), transparent);
  transform: skewX(-18deg); animation: ctaSheen 3.6s ease-in-out infinite; pointer-events: none;
}
@keyframes ctaSheen { 0%, 58% { left: -60%; } 100% { left: 130%; } }
.btn-start:hover { transform: translateY(-2px); box-shadow: 0 16px 46px -10px color-mix(in srgb, var(--accent) 70%, transparent); }
.btn-secondary-landing:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
@media (prefers-reduced-motion: reduce) { .btn-start::after { animation: none; display: none; } }

/* Özellik kartları — camsı yükselme + sol accent şeridi */
.landing-feat-card {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border: 1px solid color-mix(in srgb, var(--accent) 10%, rgba(255,255,255,.06));
  box-shadow: 0 10px 30px -16px rgba(0,0,0,.6);
  transition: transform .18s ease, border-color .2s ease, box-shadow .25s ease;
}
.landing-feat-card::before {
  content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 3px;
  background: linear-gradient(var(--accent), var(--accent2, var(--accent))); opacity: .55;
}
.landing-feat-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
  box-shadow: 0 18px 42px -18px rgba(0,0,0,.72);
}
.feat-icon { transition: transform .18s ease; }
.landing-feat-card:hover .feat-icon { transform: scale(1.08); }
.feat-icon.blue   { box-shadow: 0 6px 18px -8px rgba(56,189,248,.55); }
.feat-icon.purple { box-shadow: 0 6px 18px -8px rgba(129,140,248,.55); }
.feat-icon.green  { box-shadow: 0 6px 18px -8px rgba(52,211,153,.55); }
.feat-icon.orange { box-shadow: 0 6px 18px -8px rgba(251,146,60,.55); }