/* Standalone header styles (no JS) */
:root{
  --ink:#eaf2ff;
  --ink-dim:#b8c6e8;
  --brand:#00a7ff;
  --brand-2:#6a5cff;
  --brand-3:#00d4a6;
  /* Logo size (desktop) */
  --logo-size:50px;
}

.site-header{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(140%) blur(10px);
  background:rgba(10,14,30,.55);
  border-bottom:1px solid rgba(255,255,255,.06);
}

.nav{
  max-width:1100px; margin:0 auto; height:60px;
  display:flex; align-items:center; justify-content:space-between; gap:16px; padding:0 18px;
  color:var(--ink); font-family:Montserrat, Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* ===== Fancy Modal (error) ===== */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(2, 6, 23, 0.6);
  backdrop-filter: blur(4px) saturate(120%);
  opacity: 0;
  animation: modal-fade-in 160ms ease forwards;
}
@keyframes modal-fade-in {
  to { opacity: 1; }
}
.modal {
  width: min(520px, 96vw);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.14);
  color: #eaf2ff;
  box-shadow: 0 20px 50px rgba(0,0,0,.35), 0 0 40px rgba(16,102,255,.15);
  transform: translateY(10px) scale(.98);
 
  animation: modal-in 200ms cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes modal-in {
  to { transform: translateY(0) scale(1); opacity: 1; }
}
.modal .hd {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px 8px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.modal .hd .badge {
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 800; font-size: 18px;
  background: linear-gradient(135deg, #f43f5e 0%, #fb7185 100%);
  color: #0b1220;
  box-shadow: 0 0 22px #f43f5e55, inset 0 1px rgba(255,255,255,.6);
  flex: 0 0 auto;
}
.modal .hd .title {
  font-size: 16px; font-weight: 800; letter-spacing: .2px;
}
.modal .bd {
  padding: 14px 18px 6px;
  color: #cfe0ff;
  line-height: 1.45;
}
.modal .ft {
  padding: 12px 18px 16px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.modal .btn {
  border: 0; border-radius: 12px; padding: 10px 14px; font-weight: 700; cursor: pointer;
}
.modal .btn.primary {
  background: linear-gradient(90deg, var(--brand, #00a7ff), var(--brand-2, #6a5cff));
  color: #00122a;
  box-shadow: 0 10px 28px rgba(0,167,255,.25);
}
.modal .btn.ghost {
  background: transparent;
  color: #cfe0ff;
  border: 1px solid rgba(255,255,255,.16);
}
.modal .btn:active { transform: translateY(1px); }

/* Small screens */
@media (max-width: 420px) {
  .modal .hd, .modal .bd, .modal .ft { padding-left: 14px; padding-right: 14px; }
}

.brand{
  display:flex; align-items:center; gap:12px; font-weight:800; letter-spacing:.3px;
}
.logo{
  width:var(--logo-size); height:var(--logo-size);
  border-radius:14px; display:grid; place-items:center;
background: conic-gradient(from 124deg, #ffffff, #cddff4, #ffe8ff);  box-shadow:0 10px 30px rgba(0,0,0,.28);
  user-select:none;
  overflow:hidden; /* köşelerden taşmasın */
}
.logo img{
  width:80%; height:80%;
  object-fit:contain;
  display:block;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.15)); /* hafif derinlik */
}

.navlinks{
  display:flex; gap:22px; align-items:center; font-weight:600; color:var(--ink-dim);
}
.navlinks a{ color:inherit; text-decoration:none; }
.navlinks a:hover{ color:#fff; }

.cta-sm{ display:flex; gap:10px; align-items:center; }
.btn{
  border:0; cursor:pointer; border-radius:12px; padding:12px 18px; font-weight:700; transition:all .2s ease;
  font-family:inherit; text-decoration:none; display:inline-block;
}
.btn.primary{
  background:linear-gradient(90deg, var(--brand), var(--brand-2));
  color:#00122a;
  box-shadow:0 10px 30px rgba(0,167,255,.25);
}
.btn.primary:hover{ filter:brightness(1.05); }
.btn.ghost{
  background:transparent; color:var(--ink); border:1px solid rgba(255,255,255,.14)
}
.btn.ghost:hover{ background:rgba(255,255,255,.06) }

@media (max-width: 640px){
  .nav{ height:64px }
  .navlinks{ display:none }
  /* Logo size (mobile) */
  :root{ --logo-size:40px; }
}

 :root{
      --bg:#0c1633;
      --bg-2:#0a1f4a;
      --bg-3:#0a2963;
      --glow-1:#0f66ff;
      --glow-2:#30b2ff;
      --glow-3:#6a5cff;
      --ink:#eaf2ff;
      --ink-dim:#b8c6e8;
      --brand:#00a7ff;
      --brand-2:#6a5cff;
      --brand-3:#00d4a6;
      --card:#121935;
      --muted:#7ca1ff;
      --accent:#ffb544;
      --danger:#ff6b6b;
      --ok:#19d18f;
      --shadow:0 10px 30px rgba(0,0,0,.28);
      --radius:18px;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0; color:var(--ink);
      font-family:Montserrat, Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      background:
        radial-gradient(1200px 800px at 10% -10%, rgba(16,102,255,.22) 0%, transparent 55%),
        radial-gradient(1000px 700px at 110% 0%, rgba(48,178,255,.20) 0%, transparent 52%),
        radial-gradient(900px 700px at -5% 100%, rgba(106,92,255,.18) 0%, transparent 55%),
        linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 40%, var(--bg-3) 100%);
      overflow-x:hidden;
      position: relative;
      isolation: isolate;
    }
    body::before,
    body::after{
      content:"";
      position: fixed;
      inset:auto auto auto auto;
      width: 58vmax;
      height: 58vmax;
      filter: blur(70px);
      opacity:.20;
      z-index: -1;
      pointer-events:none;
      border-radius: 50%;
      background: radial-gradient(closest-side, rgba(48,178,255,.55), transparent 70%);
      transform: translate(-35%, -25%);
      animation: float1 18s ease-in-out infinite alternate;
    }
    body::after{
      width: 42vmax;
      height: 42vmax;
      background: radial-gradient(closest-side, rgba(15,102,255,.55), transparent 70%);
      transform: translate(55%, 15%);
      animation: float2 22s ease-in-out infinite alternate;
    }
    @keyframes float1 { to { transform: translate(-30%, -18%); } }
    @keyframes float2 { to { transform: translate(50%, 22%); } }

    a{color:inherit; text-decoration:none}
    img{max-width:100%; display:block}

    .promo{
      position:relative;
      background:linear-gradient(90deg, rgba(15,102,255,.22), rgba(106,92,255,.22));
      border-bottom:1px solid rgba(255,255,255,.12);
      box-shadow: 0 8px 28px rgba(10,20,45,.15) inset;
    }
    .promo-inner{
      max-width:1100px; margin:0 auto; padding:10px 18px;
      display:flex; gap:10px; align-items:center; justify-content:center; text-align:center;
      color:#eaf2ff; font-weight:700; letter-spacing:.2px;
    }
    .promo .tag{
      display:inline-flex; align-items:center; gap:8px; font-size:12px;
      padding:6px 10px; border:1px solid rgba(255,255,255,.16); border-radius:999px;
      background:rgba(255,255,255,.05); color:#b8c6e8; font-weight:800;
    }

    .hero{
      position:relative; overflow:hidden;
      max-width:1100px; margin:12px auto 0; padding:24px 18px 36px;
      display:grid; grid-template-columns:1.05fr .95fr; gap:28px; align-items:start;
    }
    .blob{
      position:absolute; inset:-120px -140px auto auto; z-index:-1;
      width:680px; height:680px; filter:blur(50px); opacity:.25;
      background:
        radial-gradient(45% 45% at 60% 40%, #30b2ff 0%, transparent 60%),
        radial-gradient(50% 50% at 30% 70%, #4f67ff 0%, transparent 65%),
        radial-gradient(40% 40% at 70% 70%, #7fd3ff 0%, transparent 70%);
    }
    .headline{
      font-size:clamp(28px, 5vw, 44px); line-height:1.16; font-weight:800;
      letter-spacing:-.4px; margin:8px 0 10px;
      text-shadow: 0 6px 30px rgba(79,103,255,.18);
    }
    .tag{
      display:inline-flex; gap:8px; align-items:center;
      padding:8px 12px; border:1px solid rgba(255,255,255,.12); border-radius:999px;
      color:var(--muted); font-weight:700; font-size:12px; background:rgba(255,255,255,.04);
      box-shadow: 0 6px 24px rgba(15,102,255,.12) inset;
    }
    .sub{color:var(--ink-dim); font-weight:500; line-height:1.7; margin:10px 0 20px; max-width:52ch;}
    .actions{display:flex; gap:10px; flex-wrap:wrap}
    .note{margin-top:10px; display:flex; align-items:center; gap:8px; color:var(--ink-dim); font-size:13px;}
    .hero-card{
      background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
      border:1px solid rgba(255,255,255,.10); border-radius:var(--radius); padding:16px;
      box-shadow:var(--shadow), 0 20px 50px rgba(10,30,70,.35);
    }
    .phone{
      position:relative;
      aspect-ratio:9/16; border-radius:24px; overflow:hidden; border:1px solid rgba(255,255,255,.18);
      background:
        linear-gradient(180deg, rgba(15,102,255,.18), transparent 30%),
        linear-gradient(180deg, rgba(79,103,255,.20), transparent 65%),
        url('../resimler/savephoto.png') center/cover no-repeat;
    }
    .phone::after{
      content:""; position:absolute; inset:auto 18px 18px 18px; height:110px; border-radius:16px;
      background:rgba(13,18,36,.55); border:1px solid rgba(255,255,255,.10);
      box-shadow:inset 0 0 0 1px rgba(0,0,0,.2);
    }
    .phone-caption{
      position:absolute; right:14px; top:14px;
      background:rgba(255,255,255,.08);
      border:1px solid rgba(255,255,255,.18);
      color:#fff; font-weight:700; font-size:12.5px;
      padding:8px 12px; border-radius:12px;
      backdrop-filter: blur(6px);
      box-shadow: 0 6px 20px rgba(0,0,0,.25);
      max-width: 60%;
    }

    .stats{max-width:1100px; margin:12px auto 0; padding:0 18px 8px; display:grid; grid-template-columns:repeat(3, 1fr); gap:12px;}
    .stat{
      background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
      border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:14px 16px;
      display:flex; align-items:center; gap:12px; box-shadow: 0 10px 28px rgba(9,25,60,.22);
    }
    .stat .ico{
      width:38px; height:38px; border-radius:10px; display:grid; place-items:center;
      background:linear-gradient(135deg, rgba(15,102,255,.16), rgba(79,103,255,.16));
      border:1px solid rgba(255,255,255,.12);
    }
    .stat .v{font-weight:800; font-size:18px}
    .stat .k{font-size:12px; color:var(--ink-dim)}

    .section{max-width:1100px; margin:34px auto 0;}
    .section h2{margin:0 0 10px; font-size:28px; letter-spacing:-.2px}
    .section p.lead{color:var(--ink-dim); margin:0 0 16px}
    .grid{display:grid; gap:16px; grid-template-columns:repeat(3, minmax(0, 1fr));}
    .card{
      background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
      border:1px solid rgba(255,255,255,.10); border-radius:16px; padding:16px;
      box-shadow:var(--shadow); transition:transform .2s ease, box-shadow .2s ease;
    }
    .card:hover{transform:translateY(-4px); box-shadow:0 16px 36px rgba(9,25,60,.45)}
    .card .icon{
      width:44px; height:44px; border-radius:12px; display:grid; place-items:center; margin-bottom:10px;
      background:linear-gradient(135deg, rgba(79,103,255,.22), rgba(15,102,255,.22)); border:1px solid rgba(255,255,255,.15)
    }
    .card h3{margin:0 0 6px; font-size:17px}
    .card p{margin:0; color:var(--ink-dim); font-size:14px; line-height:1.6}

    .steps{display:grid; gap:16px; grid-template-columns:repeat(3, 1fr)}
    .step{display:flex; gap:12px; align-items:flex-start}
    .step .badge{
      width:34px; height:34px; border-radius:10px; display:grid; place-items:center; font-weight:800;
      background:linear-gradient(135deg, rgba(255,181,68,.2), rgba(106,92,255,.2)); border:1px solid rgba(255,255,255,.15)
    }
    .step h4{margin:0 0 6px}
    .step p{margin:0; color:var(--ink-dim); font-size:14px}

/*
dasboard sayfası başlangıç

*/ 
/* ==== Overview Panel Neon Glow (edges colored like pricing) ==== */

/* Keep glow behind the cards without leaking outside */
#overviewPanel,
#overviewPanel .panel-inner {
  isolation: isolate;
}

/* Base neon look for all cards inside the overview panel */
#overviewPanel .card {
  position: relative;
  border-radius: 0.75rem; /* matches rounded-xl */
  --neon: #60a5fa;        /* default neon (sky) */
  --neon-soft: #60a5fa80; /* soft glow */
  border: 1.5px solid var(--neon);
  box-shadow:
    0 0 10px 0 var(--neon-soft),
    0 0 22px 0 var(--neon-soft),
    inset 0 1px 0 rgba(255,255,255,0.06);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  will-change: transform, box-shadow;
  background-clip: padding-box; /* keep border sharp */
}

/* Outer blurred glow */
#overviewPanel .card::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -10px; /* expand to show outer neon */
  border-radius: 1rem;
  background: radial-gradient(60% 80% at 50% 50%, var(--neon) 0%, transparent 60%);
  filter: blur(14px);
  opacity: .75;
  pointer-events: none;
}

/* Hover effect: intensify glow and slight lift */
#overviewPanel .card:hover {
  transform: translateY(-3px);
  box-shadow:
    0 0 12px 0 var(--neon),
    0 0 28px 2px var(--neon-soft),
    inset 0 1px 0 rgba(255,255,255,0.08);
}

/* Dark scheme surface tweak so neon pops on dark cards */
@media (prefers-color-scheme: dark) {
  #overviewPanel .card {
    background-color: rgba(2, 6, 23, 0.5); /* subtle translucent deep surface */
  }
}

/* Per-card colors (like pricing), based on order inside the overview-grid */
#overviewPanel .overview-grid > .card.stat:nth-child(1) {
  /* Rehber Kişi Sayısı */
  --neon: #14b8a6;         /* teal */
  --neon-soft: #14b8a680;
}
#overviewPanel .overview-grid > .card.stat:nth-child(2) {
  /* Kalan Alan */
  --neon: #f59e0b;         /* amber */
  --neon-soft: #f59e0b80;
}
#overviewPanel .overview-grid > .card.stat:nth-child(3) {
  /* Şifre */
  --neon: #10b981;         /* emerald */
  --neon-soft: #10b98180;
}

/* The "Gizli Dosyalar" card (outside the grid) */
#overviewPanel .panel-inner > .card:not(.stat) {
  --neon: #38bdf8;         /* sky */
  --neon-soft: #38bdf880;
}

/* Optional: refine small badges/text inside cards if you have any "pill" style there too */
#overviewPanel .card .pill {
  border: 1px solid var(--neon);
  color: var(--neon);
  background: color-mix(in oklab, var(--neon) 12%, transparent);
  box-shadow: 0 0 10px var(--neon-soft) inset, 0 0 8px var(--neon-soft);
}

/* Optional: buttons inside overview cards can inherit the neon */
#overviewPanel .card .btn.primary {
  background: var(--neon);
  border-color: var(--neon);
  box-shadow: 0 6px 18px -6px var(--neon-soft), 0 0 0 1px var(--neon);
  color: #0b1220;
}
#overviewPanel .card .btn.primary:hover {
  filter: brightness(1.05) saturate(1.05);
}
#overviewPanel .card .btn.ghost {
  border-color: var(--neon);
  color: var(--neon);
  box-shadow: 0 0 0 1px var(--neon);
}
#overviewPanel .card .btn.ghost:hover {
  background: color-mix(in oklab, var(--neon) 10%, transparent);
}

/*
dasboard sayfası bitiş

*/ 

/* ==== Pricing Neon Glow (edges colored) ==== */
.pricing {
    display:grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:16px;
  align-items: stretch; /* aynı yükseklik için içeriği gerer */
  /* ensure cards have room for glow */
  isolation: isolate;
}

.pricing .price {
  padding-left: 1rem;
  
  position: relative;
  border-radius: 16px;
  /* default (will be overridden per card) */
  --neon: #60a5fa;         /* main neon color */
  --neon-soft: #60a5fa80;  /* soft glow */
  --surface: #0b1220;      /* for dark themes if needed */
  background-clip: padding-box;
  /* crisp border plus subtle inner sheen */
  border: 1.5px solid var(--neon);
  box-shadow:
    0 0 10px 0 var(--neon-soft),
    0 0 22px 0 var(--neon-soft),
    inset 0 1px 0 rgba(255,255,255,0.06);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

/* Outer blurred glow ring */
.pricing .price::after {
  content: "";
  position: absolute;
  z-index: -1;          /* keep glow behind card */
  inset: -10px;         /* extend beyond edges for neon effect */
  border-radius: 20px;
  background:
    radial-gradient(60% 80% at 50% 50%, var(--neon) 0%, transparent 60%);
  filter: blur(14px);
  opacity: .75;
  pointer-events: none;
}

/* Hover: intensify neon + slight lift */
.pricing .price:hover {
  transform: translateY(-4px);
  box-shadow:
    0 0 12px 0 var(--neon),
    0 0 28px 2px var(--neon-soft),
    inset 0 1px 0 rgba(255,255,255,0.08);
}

/* Stronger glow for the best (featured) plan */
.pricing .price.best {
  --neon: #22c55e;       /* emerald */
  --neon-soft: #22c55e80;
  border-width: 2px;
  box-shadow:
    0 0 14px 0 var(--neon-soft),
    0 0 34px 2px var(--neon-soft),
    inset 0 1px 0 rgba(255,255,255,0.1);
}
.pricing .price.best::after {
  inset: -12px;
  filter: blur(18px);
  opacity: .85;
}

/* Assign different neon colors per pricing card (based on order) */
.pricing .price:nth-child(1) { /* 20 GB - Rüzgarnet'e Özel */
  --neon: #00eaff;       /* cyan */
  --neon-soft: #00eaff80;
}
.pricing .price:nth-child(2) { /* 100 GB */
  --neon: #a78bfa;       /* violet */
  --neon-soft: #a78bfa80;
}
.pricing .price:nth-child(3) { /* 500 GB - has .best too */
  /* colors set by .best above (emerald) */
}
.pricing .price:nth-child(4) { /* 1 TB */
  --neon: #fb923c;       /* orange */
  --neon-soft: #fb923c80;
}

/* Optional: ensure the little "pill" badge harmonizes with the neon */
.pricing .price .pill {
  border: 1px solid var(--neon);
  color: var(--neon);
  background: color-mix(in oklab, var(--neon) 12%, transparent);
  box-shadow: 0 0 10px var(--neon-soft) inset, 0 0 8px var(--neon-soft);
}

/* Optional: adjust primary/ghost buttons inside cards to match neon color */
.pricing .price .btn.primary {
  background: transparent;

  border-color: var(--neon);
  box-shadow: 0 6px 18px -6px var(--neon-soft), 0 0 0 1px var(--neon);
  color: var(--neon); /* readable on neon */
}
.pricing .price .btn.primary:hover {
  filter: brightness(1.05) saturate(1.05);
}
.pricing .price .btn.ghost {
  border-color: var(--neon);
  color: var(--neon);
  box-shadow: 0 0 0 1px var(--neon);
}
.pricing .price .btn.ghost:hover {
  background: color-mix(in oklab, var(--neon) 10%, transparent);
}

/* If you have a dark theme background, this keeps neon vivid */
@media (prefers-color-scheme: dark) {
  .pricing .price {
    background-color: rgba(2, 6, 23, 0.6); /* translucent deep surface */
  }
}
    .rzg{
      display:inline-flex; align-items:center; gap:8px; font-size:12px;
      padding:6px 10px; border:1px solid rgba(255,255,255,.14); border-radius:999px;
      background:rgba(255,255,255,.05); color:#b8c6e8; font-weight:800;
    }

    .testis{display:grid; gap:16px; grid-template-columns:repeat(3, 1fr)}
    .quote{
      background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
      border:1px solid rgba(255,255,255,.10); border-radius:16px; padding:16px; box-shadow:var(--shadow);
      font-size:14px; color:var(--ink-dim)
    }
    .quote b{display:block; color:#fff; margin-top:10px}

    .faq{display:grid; gap:10px; grid-template-columns:1fr 1fr}
    details{
      background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
      border:1px solid rgba(255,255,255,.10); border-radius:14px; padding:10px 14px; box-shadow:var(--shadow)
    }
    summary{cursor:pointer; font-weight:700; outline:none}
    details p{margin:10px 0 0; color:var(--ink-dim); font-size:14px}

    .cta{margin:34px auto 0; padding:0 18px 20px; max-width:1100px;}
    .cta-box{
      display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
      border-radius:18px; padding:18px;
      background:linear-gradient(90deg, rgba(15,102,255,.18), rgba(79,103,255,.18));
      border:1px solid rgba(255,255,255,.12);
      box-shadow: 0 10px 30px rgba(9,25,60,.25);
    }
    .cta-box h3{margin:0}
    .cta-box p{margin:4px 0 0; color:var(--ink-dim)}
    .cta-actions{display:flex; gap:10px}

    footer{
      margin-top:28px; border-top:1px solid rgba(255,255,255,.08);
      background:rgba(8,14,28,.7);
      box-shadow: 0 -10px 30px rgba(9,25,60,.25) inset;
    }
    .foot{
      max-width:1100px; margin:0 auto; padding:20px 18px;
      display:grid; gap:16px; grid-template-columns:2fr 1fr 1fr 1fr;
    }
    .foot h5{margin:0 0 8px}
    .foot a{display:block; color:var(--ink-dim); font-size:14px; margin:6px 0}
    .copyright{ text-align:center; color:var(--ink-dim); font-size:13px; padding:12px 0 20px;}

    @media (max-width: 1100px){ .pricing{grid-template-columns:repeat(2, 1fr)} }
    @media (max-width: 980px){
      .hero{grid-template-columns:1fr; padding-top:14px}
      .stats{grid-template-columns:repeat(3, 1fr)}
      .grid,.steps,.testis,.faq{grid-template-columns:repeat(2, 1fr)}
      .foot{grid-template-columns:1fr 1fr}
    }
    @media (max-width: 640px){
      .nav{height:64px}
      .pricing{grid-template-columns:1fr}
      .stats{grid-template-columns:1fr}
      .grid,.steps,.testis,.faq{grid-template-columns:1fr}
      .foot{grid-template-columns:1fr}
      .navlinks{display:none}
      .phone-caption{max-width: 80%; font-size:12px}
    }