/* =====================================================
   SentraSoft — WOW (Rengarenk) Tema CSS v2 "ColorBurst"
   - Cam efektli header + çok renkli arkaplan
   - Otomatik responsive grid (auto-fit)
   - Kartlarda gökkuşağı çerçeve ve parıltı animasyonu
   - Renkli butonlar + efektli hover
   - Mobil menü: tam ekran, blur + degrade
   - Erişilebilir odak halkaları & reduce-motion saygısı
   - Dark mode uyumu
   ===================================================== */

/* -------------------- Temel Değerler -------------------- */
:root{
  --container-max: 1120px;
  --radius: 14px;

  /* Ana palet */
  --brand: #0ea5e9;   /* sky-500 */
  --brand-2: #22d3ee; /* cyan-400 */
  --brand-3: #2563eb; /* indigo-600 */
  --bg: #ffffff;
  --bg-soft: #f7fafc;
  --text: #0f172a;
  --muted: #475569;
  --border: #e5e7eb;

  /* Rengarenk ek palet */
  --pink:#ec4899; --fuchsia:#d946ef; --violet:#8b5cf6; --purple:#7c3aed;
  --indigo:#6366f1; --blue:#3b82f6; --cyan:#22d3ee; --teal:#14b8a6;
  --green:#10b981; --lime:#84cc16; --yellow:#f59e0b; --orange:#f97316;

  /* Efektler */
  --shadow-1: 0 1px 2px rgba(2, 6, 23, 0.06), 0 1px 1px rgba(2, 6, 23, 0.04);
  --shadow-2: 0 10px 20px rgba(2, 6, 23, 0.08), 0 4px 8px rgba(2, 6, 23, 0.06);
  --ring: 0 0 0 3px rgba(14, 165, 233, 0.35);

  /* Gökkuşağı degrade */
  --rainbow: conic-gradient(from 180deg at 50% 50%,
    var(--pink), var(--fuchsia), var(--violet), var(--purple), var(--indigo), var(--blue), var(--cyan), var(--teal), var(--green), var(--lime), var(--yellow), var(--orange), var(--pink)
  );
}

@media (prefers-color-scheme: dark){
  :root{
    --bg: #0b1220; 
    --bg-soft: #0d1526;
    --text: #e5e7eb;
    --muted: #a1a1aa;
    --border: #1f2937;
    --shadow-1: 0 1px 2px rgba(0,0,0,.4);
    --shadow-2: 0 12px 24px rgba(0,0,0,.45);
    --ring: 0 0 0 3px rgba(34, 211, 238, 0.35);
  }
}

/* -------------------- Genel -------------------- */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color:var(--text); background: var(--bg);
  /* Katmanlı arkaplan: yumuşak + rengarenk vurgular */
  background-image:
    radial-gradient(1200px 800px at 0% -20%, rgba(14,165,233,0.10) 0%, rgba(14,165,233,0) 60%),
    radial-gradient(1000px 700px at 100% 0%, rgba(34,211,238,0.10) 0%, rgba(34,211,238,0) 55%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-soft) 100%);
  background-attachment: fixed;
}
/* Rengarenk animasyonlu örtü (çok hafif) */
body::before{
  content:""; position:fixed; inset:-20vh; z-index:-1; pointer-events:none;
  background: var(--rainbow);
  opacity:.06; filter: blur(80px) saturate(120%);
  animation: pan 28s linear infinite;
}

.container{max-width:var(--container-max); margin:0 auto; padding:0 16px}
a{color:inherit; text-decoration:none}
/* Renkli alt-çizgi */
a:hover{ text-decoration:none; background: linear-gradient(90deg, var(--pink), var(--violet), var(--blue), var(--cyan), var(--green)); background-size: 200% 2px; background-repeat:no-repeat; background-position: 0 100%; animation: underline 2.5s linear infinite }
img{max-width:100%; height:auto; display:block}

/* Odak (erişilebilir) */
:where(a,button,[role="button"],.btn,.card) { outline: none; }
:where(a,button,[role="button"],.btn,.card):focus-visible { box-shadow: var(--ring); border-radius: var(--radius); }

/* Skip link */
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:16px;top:12px;width:auto;height:auto;padding:8px 12px;background:#111;color:#fff;border-radius:8px;z-index:1000}

/* -------------------- Header -------------------- */
.site-header{
  position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid rgba(2, 6, 23, 0.06);
  background: rgba(255,255,255,0.65);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
}
@media (prefers-color-scheme: dark){
  .site-header{ background: rgba(11,18,32,0.55); border-bottom: 1px solid rgba(255,255,255,0.06); }
}
.header-inner{ height:64px; display:flex; align-items:center; justify-content:space-between; gap:16px }
.logo{ font-weight:800; letter-spacing:.2px; font-size:1.15rem }
.menu-toggle{ display:none; border:0; background:transparent; font-size:1.35rem; cursor:pointer }

.nav{ display:flex; gap:10px }
.nav a{ padding:8px 12px; border-radius:999px; position:relative; border:1px solid transparent; transition:.25s ease }
.nav a:hover{ background: rgba(2,6,23,0.05) }
.nav a.active, .nav a[aria-current="page"]{
  background: linear-gradient(135deg, rgba(14,165,233,.15), rgba(37,99,235,.15));
  border-color: rgba(14,165,233,.35);
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.6);
}
@media (max-width:900px){
  .menu-toggle{ display:inline-block }
  .nav{ display:none }
  .nav.open{
    position: fixed; inset: 64px 0 0; display:block; padding:16px; 
    background: linear-gradient(135deg, rgba(14,165,233,.20), rgba(124,58,237,.20), rgba(16,185,129,.20));
    -webkit-backdrop-filter: blur(10px) saturate(160%);
    backdrop-filter: blur(10px) saturate(160%);
    border-bottom: 1px solid rgba(2,6,23,.06);
    animation: slideDown .24s ease-out;
  }
  .nav.open a{ display:block; padding:14px 16px; margin:8px 0; background: rgba(255,255,255,.55); border-radius:12px }
  @media (prefers-color-scheme: dark){ .nav.open a{ background: rgba(13,21,38,.55) } }
}
@keyframes slideDown{ from{ opacity:0; transform: translateY(-6px) } to{ opacity:1; transform:none } }

/* -------------------- Logo (header) -------------------- */
:root{ --logo-size:28px; --logo-size-sm:24px; }
.logo{ display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.2px; font-size:1.15rem; line-height:1; text-decoration:none }
.logo:hover{ text-decoration:none }
.logo-mark{ height:var(--logo-size); width:auto; display:block; filter: drop-shadow(0 4px 10px rgba(14,165,233,.25)) }
.logo-text{ white-space:nowrap }
@media (max-width:900px){ .logo-mark{ height:var(--logo-size-sm) } }
@media (max-width:420px){ .logo-text{ display:none } }
@media (prefers-color-scheme: dark){ .logo-mark{ filter: drop-shadow(0 6px 14px rgba(14,165,233,.4)) } }

/* -------------------- Hero -------------------- */
.hero{ padding: clamp(56px, 8vw, 96px) 0 24px; position:relative }
.hero::after{
  content:""; position:absolute; inset:auto -10% -30% -10%; height:220px; z-index:-1; filter: blur(40px) saturate(120%);
  background: var(--rainbow); opacity:.12; animation: pan 22s linear infinite reverse;
}
.hero h1{
  margin:0 0 12px; line-height:1.1; font-size:clamp(30px,5vw,52px);
  background: linear-gradient(90deg, var(--pink), var(--violet), var(--blue), var(--cyan), var(--green));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.hero p{ font-size:clamp(16px, 1.8vw, 18px); color:var(--muted); margin:0 0 24px; max-width: 70ch }
.actions{ display:flex; gap:12px; flex-wrap:wrap }

/* -------------------- Butonlar -------------------- */
.btn{ display:inline-block; padding:12px 16px; border-radius:12px; font-weight:700; border:1px solid var(--text); background:transparent; transition:.25s ease; box-shadow: var(--shadow-1); position:relative; overflow:hidden }
.btn:hover{ transform: translateY(-1px) }
.btn:active{ transform: translateY(0) scale(.98) }

.btn.primary{
  border:none; color:#fff;
  background: linear-gradient(135deg, var(--pink), var(--violet), var(--blue));
  box-shadow: 0 8px 20px rgba(14,165,233,.25), var(--shadow-1);
}
.btn.rainbow{ border:none; color:#111; background: var(--rainbow) }
.btn.rainbow:where(:hover,:focus-visible){ filter: brightness(1.05) }
/* Parıltı çizgisi */
.btn::after{ content:""; position:absolute; inset:-40% -20% auto; height:40%; transform: rotate(12deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent); opacity:0; transition:.3s }
.btn:hover::after{ opacity:1; transform: translateX(40%) rotate(12deg) }

/* -------------------- Bölümler / Kartlar -------------------- */
.features{ padding: 24px 0 8px }
.grid{ display:grid; gap:16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) }
.card{
  position:relative; border:1px solid var(--border); border-radius: var(--radius); padding: 18px; background: rgba(255,255,255,.9);
  box-shadow: var(--shadow-1); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
  /* Gökkuşağı çerçeve */
  background-image: linear-gradient(#fff, #fff), var(--rainbow);
  background-origin: border-box; background-clip: padding-box, border-box;
  border: 1px solid transparent;
}
@media (prefers-color-scheme: dark){ .card{ background: rgba(13,21,38,.6); background-image: linear-gradient(rgba(13,21,38,.7), rgba(13,21,38,.7)), var(--rainbow) } }
.card h3{ margin:0 0 8px; font-size:18px }
.card p{ margin:0; color:var(--muted) }
/* Parıltı animasyonu */
.card::after{ content:""; position:absolute; inset: -1px; border-radius: calc(var(--radius) + 1px);
  background: linear-gradient(135deg, rgba(255,255,255,.0), rgba(255,255,255,.2), rgba(255,255,255,.0)); opacity:0; pointer-events:none; transition:opacity .25s ease }
.card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-2); }
.card:hover::after{ opacity:1 }

/* -------------------- Footer -------------------- */
.site-footer{ border-top:1px solid var(--border); background: rgba(250, 250, 250, .9); margin-top:48px; position:relative }
.site-footer::before{ content:""; position:absolute; left:0; right:0; top:-2px; height:2px; background: var(--rainbow); opacity:.6 }
.footer-inner{ padding:24px 0; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap }
.site-footer .links{ display:flex; gap:12px; flex-wrap:wrap }
@media (prefers-color-scheme: dark){ .site-footer{ background: rgba(13,21,38,.6) } }

/* -------------------- Yardımcılar -------------------- */
.sr-only{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0 }
main{ padding: 8px 0 }

/* -------------------- Responsive -------------------- */
@media (max-width: 1100px){ .container{ padding: 0 14px } }
@media (max-width: 900px){ .hero{ padding-top: clamp(40px, 8vw, 72px) } }

/* -------------------- Hareket Duyarlı -------------------- */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important }
}

/* -------------------- Animasyonlar -------------------- */
@keyframes pan{ to{ transform: rotate(1turn) } }
@keyframes underline{ to{ background-position: 200% 100% } }