/* =====================================================
   NOREM PARK V7 PREMIUM FINAL PLUS
   Yükleme sırası:
   1) index.css
   2) v7.css  ← bu dosya
   ===================================================== */

:root{
  --np-purple:#7458ff;
  --np-pink:#ff5f9f;
  --np-text:#17213a;
  --np-muted:#667085;
  --np-line:#eef0f7;
}

/* HEADER */
.header{
  position:sticky!important;
  top:0!important;
  z-index:9999!important;
  background:
    radial-gradient(circle at 12% 0%, rgba(255,95,159,.10), transparent 32%),
    radial-gradient(circle at 92% 0%, rgba(116,88,255,.12), transparent 36%),
    rgba(255,255,255,.94)!important;
  backdrop-filter:blur(22px)!important;
  -webkit-backdrop-filter:blur(22px)!important;
  border-bottom:1px solid rgba(238,240,247,.95)!important;
  box-shadow:0 12px 38px rgba(17,24,39,.075)!important;
}

.header .container{
  position:relative!important;
  z-index:2!important;
}

.header .top-line{
  min-height:72px!important;
  padding:7px 26px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
}

.header .logo{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  margin:0!important;
  padding:7px 11px!important;
  border-radius:22px!important;
  background:rgba(255,255,255,.78)!important;
  border:1px solid rgba(238,240,247,.95)!important;
  box-shadow:0 18px 42px rgba(17,24,39,.075)!important;
}

.header .logo img{
  max-height:50px!important;
  max-width:154px!important;
  width:auto!important;
  display:block!important;
  object-fit:contain!important;
}

.header-controls{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
}

.hamburger{
  width:49px!important;
  height:49px!important;
  border-radius:20px!important;
  background:rgba(255,255,255,.86)!important;
  border:1px solid rgba(238,240,247,.95)!important;
  box-shadow:0 16px 38px rgba(17,24,39,.10)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  cursor:pointer!important;
  transition:transform .22s ease, box-shadow .22s ease!important;
}

.hamburger:active{
  transform:scale(.96)!important;
}

.hamburger svg{
  width:23px!important;
  height:18px!important;
}

/* MASAÜSTÜ MENÜ */
@media(min-width:1200px){
  .main-nav{
    display:flex!important;
    align-items:center!important;
    margin-left:auto!important;
  }

  .main-nav-list{
    display:flex!important;
    align-items:center!important;
    gap:5px!important;
    margin:0!important;
    padding:0!important;
  }

  .main-nav-list > li > a,
  .main-nav li a{
    color:var(--np-text)!important;
    font-weight:800!important;
    font-size:14px!important;
    padding:10px 12px!important;
    border-radius:999px!important;
    text-decoration:none!important;
    transition:.22s ease!important;
  }

  .main-nav-list > li > a:hover,
  .main-nav li a:hover{
    background:#f3efff!important;
    color:var(--np-purple)!important;
  }

  .main-nav-list li:nth-last-child(2) > a{
    background:#f3efff!important;
    color:var(--np-purple)!important;
    box-shadow:0 10px 24px rgba(116,88,255,.10)!important;
  }

  .main-nav-list li:nth-last-child(1) > a{
    background:linear-gradient(135deg,var(--np-purple),var(--np-pink))!important;
    color:#fff!important;
    box-shadow:0 12px 28px rgba(116,88,255,.22)!important;
  }
}

/* MOBİL MENÜ */
@media(max-width:1199px){
  body.active{
    overflow:hidden!important;
  }

  .main-nav{
    position:fixed!important;
    top:0!important;
    right:-100%!important;
    left:auto!important;
    width:84vw!important;
    max-width:360px!important;
    height:100vh!important;
    min-height:100vh!important;
    background:
      radial-gradient(circle at 18% 0%, rgba(116,88,255,.13), transparent 35%),
      radial-gradient(circle at 100% 20%, rgba(255,95,159,.11), transparent 38%),
      rgba(255,255,255,.985)!important;
    backdrop-filter:blur(24px)!important;
    -webkit-backdrop-filter:blur(24px)!important;
    border-left:1px solid rgba(238,240,247,.95)!important;
    box-shadow:-28px 0 90px rgba(17,24,39,.17)!important;
    z-index:10000!important;
    padding:104px 24px 34px!important;
    overflow-y:auto!important;
    box-sizing:border-box!important;
    transition:right .36s cubic-bezier(.22,.61,.36,1), opacity .25s ease!important;
    transform:none!important;
    opacity:.96!important;
  }

  .main-nav.active{
    right:0!important;
    opacity:1!important;
  }

  .main-nav-list{
    display:flex!important;
    flex-direction:column!important;
    gap:11px!important;
    margin:0!important;
    padding:0!important;
    list-style:none!important;
    transform:none!important;
    position:relative!important;
    top:auto!important;
  }

  .main-nav-list > li{
    margin:0!important;
    padding:0!important;
    list-style:none!important;
  }

  .main-nav-list > li > a,
  .main-nav li a{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    width:100%!important;
    min-height:43px!important;
    padding:11px 15px!important;
    border-radius:18px!important;
    color:var(--np-text)!important;
    font-size:16px!important;
    line-height:1.15!important;
    font-weight:800!important;
    text-decoration:none!important;
    background:rgba(255,255,255,.72)!important;
    border:1px solid rgba(238,240,247,.86)!important;
    box-shadow:0 8px 20px rgba(17,24,39,.035)!important;
    transition:transform .18s ease, background .18s ease, color .18s ease!important;
  }

  .main-nav-list > li > a:active,
  .main-nav li a:active{
    transform:scale(.985)!important;
  }

  .main-nav-list > li > a:hover,
  .main-nav li a:hover{
    background:#f7f5ff!important;
    color:var(--np-purple)!important;
  }

  .main-nav-list li:nth-last-child(2){
    margin-top:18px!important;
  }

  .main-nav-list li:nth-last-child(2) > a{
    justify-content:center!important;
    text-align:center!important;
    min-height:48px!important;
    border-radius:999px!important;
    background:linear-gradient(180deg,#f8f5ff,#f1ecff)!important;
    color:var(--np-purple)!important;
    border:1px solid rgba(116,88,255,.10)!important;
    box-shadow:0 14px 30px rgba(116,88,255,.14)!important;
  }

  .main-nav-list li:nth-last-child(1) > a{
    justify-content:center!important;
    text-align:center!important;
    min-height:51px!important;
    border-radius:999px!important;
    background:linear-gradient(135deg,var(--np-purple),var(--np-pink))!important;
    color:#fff!important;
    border:0!important;
    box-shadow:0 18px 40px rgba(116,88,255,.25)!important;
    margin-bottom:18px!important;
  }

  .close-nav{
    position:absolute!important;
    top:24px!important;
    right:24px!important;
    width:46px!important;
    height:46px!important;
    border-radius:18px!important;
    background:rgba(255,255,255,.88)!important;
    border:1px solid var(--np-line)!important;
    box-shadow:0 14px 32px rgba(17,24,39,.11)!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    cursor:pointer!important;
  }
}

/* KÜÇÜK TELEFON */
@media(max-width:575px){
  .header .top-line{
    min-height:68px!important;
    padding:7px 22px!important;
  }

  .header .logo{
    padding:7px 10px!important;
    border-radius:20px!important;
  }

  .header .logo img{
    max-height:44px!important;
    max-width:136px!important;
  }

  .hamburger{
    width:47px!important;
    height:47px!important;
    border-radius:18px!important;
  }

  .main-nav{
    width:86vw!important;
    max-width:340px!important;
    padding:98px 20px 30px!important;
  }

  .main-nav-list > li > a,
  .main-nav li a{
    font-size:15px!important;
    min-height:40px!important;
    padding:10px 13px!important;
  }

  .main-nav-list li:nth-last-child(2) > a,
  .main-nav-list li:nth-last-child(1) > a{
    font-size:15px!important;
    min-height:47px!important;
  }
}

/* HERO BUTONLARINA PREMIUM DOKUNUŞ */
.main-slider a,
.main-slider .btn,
[class*="banner"] a.btn,
[class*="hero"] a.btn{
  border-radius:999px!important;
  transition:transform .18s ease, box-shadow .18s ease!important;
}

.main-slider a:active,
.main-slider .btn:active,
[class*="banner"] a.btn:active,
[class*="hero"] a.btn:active{
  transform:scale(.98)!important;
}