:root{--primary:#4C1D95;--primary-2:#6D28D9;--bg:#FFFFFF;--bg-alt:#F5F3FF;--text:#111827;--muted:#6B7280;--nav-h:80px}
*{box-sizing:border-box}
html,body{height:100%}
html:focus-within{scroll-behavior:smooth}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,"Helvetica Neue",Arial,sans-serif;color:var(--text);background:var(--bg);line-height:1.6}
img{max-width:100%;height:auto;display:block}
a{text-decoration:none}
a:focus-visible,button:focus-visible{outline:3px solid var(--primary-2);outline-offset:2px;border-radius:.5rem}
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:1rem;top:1rem;width:auto;height:auto;z-index:1050;background:#fff;color:#000;padding:.5rem .75rem;border-radius:.5rem;box-shadow:0 6px 22px rgba(0,0,0,.15)}

.section{padding:64px 0;scroll-margin-top:calc(var(--nav-h) + 12px)}
.section-pt{padding-top:calc(var(--nav-h) + 12px)}
.section-alt{background:var(--bg-alt)}

.site-header{position:fixed;inset:0 0 auto 0;z-index:1100;background:linear-gradient(180deg,#0b122000,#0b122000);transition:background-color .25s ease,box-shadow .25s ease,backdrop-filter .25s ease}
.site-header.scrolled{background:rgba(11,18,32,.86);backdrop-filter:saturate(140%) blur(6px);box-shadow:0 6px 22px rgba(12,10,24,.25)}
.navbar{min-height:var(--nav-h)}
.navbar .navbar-brand{color:#fff}
.navbar .nav-link{color:#fff;font-weight:600}
.navbar .nav-link:hover,.navbar .nav-link:focus{color:#E9D5FF}
.navbar-toggler{border:2px solid #fff;border-radius:.75rem;padding:.4rem .6rem;color:#fff}
.navbar-toggler .fa-bars{color:#fff;font-size:1.25rem}

.btn{border-radius:.75rem}
.btn-primary{--bs-btn-bg:var(--primary);--bs-btn-border-color:var(--primary);--bs-btn-hover-bg:var(--primary-2);--bs-btn-hover-border-color:var(--primary-2);--bs-btn-active-bg:var(--primary-2)}
.btn-outline-primary{--bs-btn-color:var(--primary);--bs-btn-border-color:var(--primary);--bs-btn-hover-bg:var(--primary);--bs-btn-hover-border-color:var(--primary);--bs-btn-hover-color:#fff}
.btn-outline-light{--bs-btn-color:#fff;--bs-btn-border-color:#fff;--bs-btn-hover-bg:#fff;--bs-btn-hover-color:var(--primary)}

.hero{position:relative;min-height:calc(100svh - 0px);display:flex;align-items:center;color:#fff;text-align:center;overflow:hidden}
.hero .overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,10,24,.55),rgba(12,10,24,.70))}
.hero .grad{background:linear-gradient(90deg,#E9D5FF,#C4B5FD,#A78BFA);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero h1{font-weight:800;font-size:clamp(2rem,4vw,3.25rem);text-shadow:0 2px 18px rgba(0,0,0,.35)}
.hero .lead{max-width:900px;margin-inline:auto;color:#F3E8FF}
.hero .hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;filter:brightness(.75)}
.hero-bubbles{position:absolute;inset:0;pointer-events:none;z-index:-1}
.hero-bubbles span{position:absolute;border-radius:999px;background:radial-gradient(closest-side,rgba(167,139,250,.9),rgba(76,29,149,.2));opacity:.5;animation:float 14s ease-in-out infinite}
.hero-bubbles .b1{width:220px;height:220px;left:8%;top:62%}
.hero-bubbles .b2{width:160px;height:160px;left:78%;top:18%}
.hero-bubbles .b3{width:120px;height:120px;left:55%;top:75%}
.hero-bubbles .b4{width:260px;height:260px;left:24%;top:8%}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-26px)}}

.breadcrumb-wrap{background:#0b1220;color:#CBD5E1}
.breadcrumb{margin:0;display:flex;gap:.5rem;align-items:center;padding:10px 16px;list-style:none;font-size:.95rem;max-width:1140px;margin-inline:auto}
.breadcrumb a{color:#E5E7EB}
.breadcrumb .active{color:#A78BFA}

.card.feature{border:0;border-radius:1rem;box-shadow:0 10px 30px rgba(20,20,40,.06);padding:24px;background:#fff;transition:transform .25s ease,box-shadow .25s ease}
.card.feature:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(20,20,40,.10)}
.card.feature .icon{width:64px;height:64px;border-radius:16px;background:linear-gradient(135deg,#6D28D9,#4C1D95);display:flex;align-items:center;justify-content:center;margin:0 auto 12px auto;color:#fff;font-size:28px}
.card.feature h3{font-size:1.15rem;margin:.25rem 0 .35rem 0}
.card.feature p{color:var(--muted);margin:0}

.checklist{margin:0;padding:0}
.checklist li{display:flex;gap:.5rem;align-items:flex-start;margin:.35rem 0;color:var(--text)}
.checklist i{color:var(--primary-2);margin-top:.2rem}

.section h2{font-weight:800;font-size:clamp(1.5rem,2.5vw,2.2rem);margin-bottom:12px}

.accordion.themed .accordion-item{border:0;border-radius:14px;overflow:hidden;box-shadow:0 8px 26px rgba(20,20,40,.08);margin-bottom:12px}
.accordion.themed .accordion-button{background:linear-gradient(90deg,#4C1D95,#6D28D9);color:#fff;font-weight:600}
.accordion.themed .accordion-button:focus{box-shadow:none}
.accordion.themed .accordion-button:not(.collapsed){color:#fff}
.accordion.themed .accordion-body{background:#fff;color:var(--text)}

.cta-final{background:linear-gradient(135deg,#4C1D95,#6D28D9);color:#fff}
.cta-final .btn-light{color:var(--primary);font-weight:600}

.site-footer{background:#0b1220;color:#CBD5E1}
.footer-top{display:grid;grid-template-columns:1fr auto auto;gap:16px;align-items:center;padding:24px 0}
.footer-top .brand{display:flex;align-items:center;gap:10px;color:#fff;font-weight:700}
.footer-top .social{display:flex;gap:10px}
.footer-menu{display:flex;gap:16px;flex-wrap:wrap;list-style:none;margin:0;padding:0}
.footer-menu a{color:#E5E7EB}
.footer-menu a:hover{color:#fff}
.site-footer .social a{width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;border:1.5px solid #A78BFA;color:#C4B5FD;transition:all .2s ease;box-shadow:0 0 0 0 rgba(167,139,250,0)}
.site-footer .social a:hover,.site-footer .social a:focus-visible{background:linear-gradient(135deg,#6D28D9,#4C1D95);color:#fff;border-color:transparent;box-shadow:0 10px 28px rgba(76,29,149,.35)}
.site-footer a:hover i{transform:translateY(-2px)}
.site-footer i{transition:transform .2s ease}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08);padding:12px 0;text-align:center}

#loader{position:fixed;inset:0;background:#0b1220;display:flex;flex-direction:column;gap:12px;align-items:center;justify-content:center;z-index:2000;transition:opacity .3s ease,visibility .3s ease}
#loader.hide{opacity:0;visibility:hidden}
.spinner{width:56px;height:56px;border-radius:999px;border:4px solid rgba(255,255,255,.2);border-top-color:#fff;animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.navbar-brand .brand-logo{width:56px;height:56px;border-radius:12px}

@media (max-width:991.98px){
  :root{--nav-h:72px}
  .section-pt{padding-top:calc(var(--nav-h) + 8px)}
  .navbar .navbar-brand{position:absolute;left:50%;transform:translateX(-50%);margin:0 auto}
  .navbar-brand .brand-logo{width:44px;height:44px}
  .navbar .navbar-brand span{font-size:1.0625rem}
  .navbar .navbar-toggler{position:relative;z-index:2;margin-left:auto}
  .navbar{padding-left:.75rem;padding-right:.75rem}
  .navbar .navbar-toggler{margin-right:.35rem}
}

@media (max-width:991.98px){
  #nav{
    display:block!important;position:fixed;top:var(--nav-h);right:-100%;
    width:82%;height:calc(100vh - var(--nav-h));
    background:linear-gradient(135deg,#4C1D95,#6D28D9);
    padding:12px 14px 18px;border-top-left-radius:14px;
    box-shadow:0 12px 30px rgba(0,0,0,.28);
    transition:right .25s ease;
    z-index:1102;           /* backdrop’tan yüksek */
    pointer-events:auto;    /* güvenlik için */
  }
  #nav.show{right:0}

  .nav-backdrop{
    position:fixed;inset:0;
    z-index:1090;           /* header(1100) & nav(1102)’dan düşük */
    background:rgba(0,0,0,.38);
    opacity:0;pointer-events:none;transition:opacity .2s ease
  }
  .nav-backdrop.show{opacity:1;pointer-events:auto}
  body.nav-lock{overflow:hidden}
}
/* Aktif link (desktop navbar) – daha okunaklı kontrast */
.navbar .nav-link.active[aria-current="true"]{
  background: #E9D5FF;      /* açık lila zemin */
  color: #2E1065 !important;/* koyu mor metin */
  border-radius: 10px;
}

/* Aktif link (sağdan açılan cospella menü) */
@media (max-width:991.98px){
  #nav .nav-link.active[aria-current="true"]{
    background: #E9D5FF;
    color: #2E1065 !important;
  }
}