:root{
      --bg:#070a10;
      --panel:#0f1626;
      --panel2:#0b1220;
      --line:rgba(255,255,255,.10);
      --text:#eef2ff;
      --muted:#b3bfdc;
      --acc:#6d5cff;
      --acc2:#33b1ff;
      --ok:#34d399;
      --shadow:0 22px 70px rgba(0,0,0,.55);
      --r:18px;
      --r2:26px;
      --max:1180px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;
      color:var(--text);
      background:
        radial-gradient(1100px 700px at 20% -10%, rgba(51,177,255,.18), transparent 60%),
        radial-gradient(900px 600px at 90% 15%, rgba(109,92,255,.18), transparent 60%),
        linear-gradient(180deg, var(--bg), #05060a);
      overflow-x:hidden;
    }
    a{color:inherit;text-decoration:none}
    .container{max-width:var(--max);margin:0 auto;padding:0 18px}
    .nav{
      position:sticky;top:0;z-index:50;
      background:rgba(7,10,16,.7);
      border-bottom:1px solid rgba(255,255,255,.07);
      backdrop-filter: blur(12px);
    }
    .navin{height:74px;display:flex;align-items:center;justify-content:space-between;gap:14px}
    .brand{display:flex;align-items:center;gap:12px;font-weight:900;letter-spacing:.2px}
    .logo{
      width:38px;height:38px;border-radius:14px;
      background:linear-gradient(135deg,var(--acc2),var(--acc));
      box-shadow:0 18px 40px rgba(109,92,255,.18);
      position:relative;
    }
    .logo:after{content:"";position:absolute;inset:11px;border-radius:12px;border:2px solid rgba(255,255,255,.55);transform:rotate(10deg)}
    .links{display:flex;gap:10px;align-items:center}
    .links a{color:var(--muted);font-weight:700;font-size:14px;padding:10px 10px;border-radius:12px}
    .links a:hover{background:rgba(255,255,255,.05);color:var(--text)}
    .cta{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
    .btn{
      display:inline-flex;align-items:center;justify-content:center;gap:10px;
      padding:12px 16px;border-radius:14px;
      border:1px solid var(--line);
      background:rgba(255,255,255,.04);
      font-weight:800;
      transition:.18s transform,.18s background,.18s border-color;
      cursor:pointer;
      white-space:nowrap;
    }
    .btn:hover{transform:translateY(-1px);background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.18)}
    .btn.primary{border-color:transparent;background:linear-gradient(135deg,var(--acc2),var(--acc));box-shadow:0 14px 35px rgba(51,177,255,.18)}
    .btn.primary:hover{box-shadow:0 18px 48px rgba(51,177,255,.24)}
    .pill{
      display:inline-flex;align-items:center;gap:10px;
      padding:8px 12px;border-radius:999px;
      border:1px solid rgba(255,255,255,.10);
      background:rgba(255,255,255,.03);
      color:var(--muted);font-size:13px;
    }
    header{padding:36px 0 20px}
    .hero{
      display:grid;grid-template-columns:1.1fr .9fr;gap:22px;align-items:center;
      padding:26px 0;
    }
    h1{font-size:46px;line-height:1.08;margin:14px 0 10px;letter-spacing:-.9px}
    .lead{color:var(--muted);font-size:17px;margin:0 0 16px}
    .hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
    .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
    .card{
      border:1px solid rgba(255,255,255,.09);
      background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
      border-radius:var(--r2);
      box-shadow:var(--shadow);
    }
    .card.pad{padding:18px}
    .imgcard{overflow:hidden}
    .imgcard img{width:100%;height:auto;display:block}
    section{padding:28px 0}
    .title{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin:0 0 14px}
    .title h2{margin:0;font-size:28px;letter-spacing:-.4px}
    .title p{margin:0;color:var(--muted)}
    .pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
    .price{font-size:34px;font-weight:950;letter-spacing:-.8px;margin:8px 0 10px}
    .tag{display:inline-flex;align-items:center;gap:8px;padding:7px 10px;border-radius:999px;
      border:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.18);color:var(--muted);font-size:13px}
    .list{list-style:none;padding:0;margin:12px 0 0;color:var(--muted);font-size:14px}
    .list li{display:flex;gap:10px;margin:8px 0}
    .check{width:18px;height:18px;border-radius:7px;background:rgba(52,211,153,.16);border:1px solid rgba(52,211,153,.34);display:grid;place-items:center;flex:0 0 auto}
    .grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
    details{border:1px solid rgba(255,255,255,.09);border-radius:16px;background:rgba(255,255,255,.03);padding:12px 14px}
    summary{cursor:pointer;font-weight:850}
    details p{margin:10px 0 0;color:var(--muted)}
    .contact{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:stretch}
    .field{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
    label{font-size:13px;color:var(--muted);font-weight:750}
    input, textarea{width:100%;padding:12px;border-radius:14px;border:1px solid rgba(255,255,255,.10);
      background:rgba(0,0,0,.20);color:var(--text);outline:none}
    input:focus, textarea:focus{border-color:rgba(51,177,255,.35);box-shadow:0 0 0 4px rgba(51,177,255,.10)}
    iframe{width:100%;height:340px;border:0;border-radius:18px}
    footer{border-top:1px solid rgba(255,255,255,.07);padding:26px 0;color:var(--muted)}
    .foot{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
    .wa{position:fixed;right:16px;bottom:16px;z-index:70;width:56px;height:56px;border-radius:18px;
      background:linear-gradient(135deg,#25D366,#10b981);display:grid;place-items:center;
      box-shadow:0 18px 45px rgba(16,185,129,.28);border:1px solid rgba(255,255,255,.16);transition:transform .15s ease}
    .wa:hover{transform:translateY(-1px)}

    @media(max-width:980px){
      .hero{grid-template-columns:1fr}
      .pricing{grid-template-columns:1fr}
      .cards{grid-template-columns:1fr}
      .grid2{grid-template-columns:1fr}
      .contact{grid-template-columns:1fr}
      .links{display:none}
      h1{font-size:40px}
    }
.headline{font-size:20px}
    }

  
    /* Full-width hero banner */
    .hero{grid-template-columns:1fr !important; padding:0 !important}
    .hero-full{
      width:100vw;
      margin-left:calc(50% - 50vw);
      margin-right:calc(50% - 50vw);
    }
    .hero-full img{
      width:100%;
      height:80vh;
      object-fit:cover;
      display:block;
    }
    @media(max-width:980px){
      .hero-full img{height:60vh}
    }


    /* Katmanlı (Layered) hero banner */
    .hero-layered{
      position:relative;
      width:100vw;
      margin-left:calc(50% - 50vw);
      margin-right:calc(50% - 50vw);
      height:86vh;
      min-height:520px;
      overflow:hidden;
      background:#05060a;
    }
    .hero-layered .layer-bg{
      position:absolute; inset:0;
      background-image:url(../images/logo.png);
      background-size:cover;
      background-position:center;
      transform:scale(1.02);
      filter:saturate(1.02) contrast(1.02);
    }
    .hero-layered .layer-shade{
      position:absolute; inset:0;
      background:
        radial-gradient(900px 500px at 70% 45%, rgba(109,92,255,.22), transparent 60%),
        radial-gradient(900px 520px at 25% 35%, rgba(51,177,255,.18), transparent 62%),
        linear-gradient(90deg, rgba(0,0,0,.78), rgba(0,0,0,.28) 55%, rgba(0,0,0,.75));
      pointer-events:none;
    }
    .hero-layered .layer-content{
      position:relative;
      height:100%;
      display:flex;
      align-items:center;
    }
    .hero-layered .content-wrap{
      width:100%;
      max-width:var(--max);
      margin:0 auto;
      padding:0 18px;
      display:grid;
      grid-template-columns: 1.05fr .95fr;
      gap:18px;
      align-items:center;
    }
    .hero-layered h1{
      font-size:52px;
      line-height:1.06;
      margin:0 0 12px;
      letter-spacing:-1px;
    }
    .hero-layered .lead{
      color:var(--muted);
      font-size:17px;
      margin:0 0 14px;
      max-width:44ch;
    }
    .hero-layered .bullets{
      margin:10px 0 0; padding:0; list-style:none;
      color:var(--muted); font-weight:650;
    }
    .hero-layered .bullets li{display:flex; gap:10px; margin:8px 0}
    .hero-layered .bullet-dot{
      width:9px; height:9px; border-radius:999px; margin-top:7px;
      background:rgba(255,255,255,.55);
      box-shadow:0 0 0 6px rgba(255,255,255,.06);
      flex:0 0 auto;
    }
    .hero-layered .cta-row{display:flex; gap:10px; flex-wrap:wrap; margin-top:16px}
    .hero-layered .right-card{
      justify-self:end;
      width:min(520px, 100%);
      border:1px solid rgba(255,255,255,.10);
      background:rgba(0,0,0,.18);
      border-radius:var(--r2);
      padding:14px;
      backdrop-filter: blur(10px);
      box-shadow: 0 22px 70px rgba(0,0,0,.35);
    }
    .hero-layered .right-card .title{
      display:flex; justify-content:space-between; align-items:center;
      margin:0 0 8px;
    }
    .hero-layered .right-card .title strong{font-weight:950}
    .hero-layered .right-card .tiny{font-size:12px; color:var(--muted)}
    .hero-layered .right-card .row{
      display:grid; grid-template-columns:1fr 1fr; gap:10px;
    }
    .hero-layered .kpi{
      border:1px solid rgba(255,255,255,.10);
      background:rgba(255,255,255,.03);
      border-radius:16px;
      padding:12px;
    }
    .hero-layered .kpi .v{font-weight:950; font-size:18px}
    .hero-layered .kpi .t{color:var(--muted); font-size:12px; margin-top:2px}

    @media(max-width:980px){
      .hero-layered{height:70vh; min-height:520px}
      .hero-layered .content-wrap{grid-template-columns:1fr}
      .hero-layered h1{font-size:40px}
      .hero-layered .right-card{justify-self:stretch}
    }

    /* Sinematik (21:9) banner + üstünde katmanlı overlay */
    .hero-layered{
      position:relative;
      width:100vw;
      margin-left:calc(50% - 50vw);
      margin-right:calc(50% - 50vw);
      aspect-ratio: 21 / 9;   /* sinematik */
      height:auto;
      overflow:hidden;
      background:#05060a;
      border-bottom:1px solid rgba(255,255,255,.06);
    }
    .hero-layered .layer-bg{
      position:absolute;
      inset:0;
      background-image:url(../images/logo.png);
      background-size:cover;
      background-position:center;
      transform:scale(1.01);
      filter:saturate(1.02) contrast(1.02);
    }
    .hero-layered .layer-shade{
      position:absolute; inset:0;
      background:
        radial-gradient(1100px 600px at 70% 45%, rgba(109,92,255,.22), transparent 60%),
        radial-gradient(1100px 640px at 25% 35%, rgba(51,177,255,.16), transparent 62%),
        linear-gradient(90deg, rgba(0,0,0,.78), rgba(0,0,0,.24) 55%, rgba(0,0,0,.78));
      pointer-events:none;
    }
    .hero-layered .layer-content{
      position:absolute; inset:0;
      display:flex;
      align-items:center;
    }
    /* İçerik katmanı mevcut ayarlarla devam */
    @media(max-width:980px){
      .hero-layered{aspect-ratio:16/9;}
    }
    @media(max-width:520px){
      .hero-layered{aspect-ratio:4/3;}
    }


    /* i – sağ görsel */
    .neden-wrap{
      display:grid;
      grid-template-columns:1.1fr .9fr;
      gap:24px;
      align-items:center;
    }
    .neden-img img{
      width:100%;
      border-radius:24px;
      box-shadow:0 24px 60px rgba(0,0,0,.45);
    }
    @media(max-width:980px){
      .neden-wrap{grid-template-columns:1fr}
    }


    /* i koyu arka plan */
    #neden{
      background:linear-gradient(180deg,#070a10,#0b1220);
      padding:80px 0;
    }


    /* Paket kartlarını daha görsel yap */
    #paketler .pricing .card.pad{
      position:relative;
      overflow:hidden;
    }
    #paketler .pricing .card.pad:before{
      content:"";
      position:absolute; inset:-2px;
      background:
        radial-gradient(420px 260px at 20% 15%, rgba(51,177,255,.18), transparent 60%),
        radial-gradient(420px 260px at 80% 65%, rgba(109,92,255,.16), transparent 60%);
      pointer-events:none;
    }
    #paketler .pricing .card.pad > *{position:relative}
    .pkg-top{
      display:flex; align-items:center; justify-content:space-between; gap:12px;
      margin-bottom:6px;
    }
    .pkg-ico{
      width:48px; height:48px; border-radius:18px;
      display:grid; place-items:center;
      border:1px solid rgba(255,255,255,.12);
      background:rgba(0,0,0,.18);
      backdrop-filter: blur(10px);
      box-shadow: 0 14px 40px rgba(0,0,0,.28);
    }
    .pkg-ico svg{width:22px; height:22px}
    .pkg-badges{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px}
    .pkg-badge{
      display:inline-flex; align-items:center; gap:8px;
      padding:7px 10px; border-radius:999px;
      border:1px solid rgba(255,255,255,.10);
      background:rgba(0,0,0,.18);
      color:var(--muted);
      font-size:12px;
      font-weight:750;
    }
    .pkg-price{
      display:flex; align-items:flex-end; gap:10px; flex-wrap:wrap;
      margin:10px 0 6px;
    }
    .pkg-price .amount{
      font-size:36px; font-weight:950; letter-spacing:-.8px;
      line-height:1;
    }
    .pkg-price .per{
      color:var(--muted); font-weight:750; font-size:13px;
      padding-bottom:4px;
    }


    .nav.is-scrolled .site-logo{height:32px}
    }


    /* Sinematik (21:9) banner – geri yüklendi */
    .hero-layered{
      position:relative;
      width:100vw;
      margin-left:calc(50% - 50vw);
      margin-right:calc(50% - 50vw);
      aspect-ratio: 21 / 9;
      overflow:hidden;
      background:#05060a;
    }
    .hero-layered .layer-bg{
      position:absolute;
      inset:0;
      background-image:url('../images/top-banner.jpg');
      background-size:cover;
      background-position:center;
    }
    .hero-layered .layer-shade{
      position:absolute; inset:0;
      background:
        radial-gradient(1100px 600px at 70% 45%, rgba(109,92,255,.22), transparent 60%),
        radial-gradient(1100px 640px at 25% 35%, rgba(51,177,255,.16), transparent 62%),
        linear-gradient(90deg, rgba(0,0,0,.78), rgba(0,0,0,.24) 55%, rgba(0,0,0,.78));
      pointer-events:none;
    }


    /* Banner altına yumuşak eğimli geçiş */
    .hero-layered::after{
      content:"";
      position:absolute;
      left:0; right:0; bottom:-1px;
      height:140px;
      background:linear-gradient(to bottom, rgba(5,6,10,0), rgba(5,6,10,.9));
      clip-path: ellipse(75% 100% at 50% 0%);
      pointer-events:none;
    }


    /* Logo en-boy oranı düzeltme */
    .site-logo{
      max-height:42px;
      height:auto;
      width:auto;
      max-width:180px;
      object-fit:contain;
    }
    .nav.is-scrolled .site-logo{
      max-height:32px;
      width:auto;
    }


    /* Logo + yazı birlikte */
    .brand{
      display:flex;
      align-items:center;
      gap:12px;
    }
    .brand-text{
      font-size:18px;
      font-weight:800;
      letter-spacing:.4px;
      white-space:nowrap;
    }
    .brand-text strong{
      color:#33b1ff;
      font-weight:900;
    }
    .nav.is-scrolled .brand-text{
      font-size:16px;
    }


    /* Logo arka planı şeffaf + daha büyük kullanım */
    .site-logo{
      max-height:56px;
      height:auto;
      width:auto;
    }
    .nav.is-scrolled .site-logo{
      max-height:42px;
    }


    /* Paket görselleri */
    .pkg-img{
      width:100%;
      max-width:220px;
      margin:0 auto 14px;
      display:block;
      filter: drop-shadow(0 18px 40px rgba(0,0,0,.35));
    }


    /* En Çok Tercih Edilen – glow */
    .card.pad.is-featured{
      position:relative;
      border-color: rgba(51,177,255,.38) !important;
      box-shadow:
        0 24px 70px rgba(0,0,0,.55),
        0 0 0 1px rgba(51,177,255,.18),
        0 0 42px rgba(51,177,255,.22),
        0 0 90px rgba(109,92,255,.16);
    }
    .card.pad.is-featured::after{
      content:"";
      position:absolute; inset:-2px;
      border-radius:var(--r2);
      background:
        radial-gradient(520px 240px at 20% 10%, rgba(51,177,255,.22), transparent 60%),
        radial-gradient(520px 260px at 85% 75%, rgba(109,92,255,.18), transparent 60%);
      filter: blur(10px);
      opacity:.9;
      pointer-events:none;
      z-index:0;
    }
    .card.pad.is-featured > *{position:relative; z-index:1}
    .card.pad.is-featured .tag{
      background:linear-gradient(135deg, rgba(51,177,255,.25), rgba(109,92,255,.18));
      border-color: rgba(255,255,255,.16);
      color: var(--text);
    }


    /* Footer logo header ile aynı */
    footer .site-logo{
      max-height:48px;
      width:auto;
    }
    footer .brand-text{
      font-size:16px;
      font-weight:800;
    }


    
    /* Harita (normal genişlik) */
    #konum iframe{
      width:100%;
      height:420px;
      border:0;
    }


    /* Adres - Footer yumuşak ayraç */
    .soft-divider{
      height:80px;
      background: linear-gradient(
        to bottom,
        rgba(255,255,255,0.00),
        rgba(51,177,255,0.12),
        rgba(255,255,255,0.00)
      );
    }


    /* Footer sosyal medya ikonları */
    .footer-row{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:20px;
      flex-wrap:wrap;
    }
    .footer-social{
      display:flex;
      gap:14px;
    }
    .footer-social a{
      width:42px;
      height:42px;
      border-radius:50%;
      display:grid;
      place-items:center;
      border:1px solid rgba(255,255,255,.18);
      background:rgba(0,0,0,.25);
      transition:.25s ease;
    }
    .footer-social a:hover{
      transform:translateY(-3px);
      box-shadow:0 10px 30px rgba(51,177,255,.35);
      border-color:rgba(51,177,255,.6);
    }
    .footer-social svg{
      width:18px;
      height:18px;
      fill:currentColor;
    }


    /* SSS ikon + hover */
    .sss-card{
      transition:.3s ease;
    }
    .sss-card:hover{
      transform:translateY(-6px);
      box-shadow:0 20px 60px rgba(51,177,255,.35);
      border-color:rgba(51,177,255,.6);
    }
    .sss-head{
      display:flex;
      align-items:center;
      gap:12px;
      margin-bottom:6px;
    }
    .sss-ico{
      width:40px;
      height:40px;
      border-radius:50%;
      display:grid;
      place-items:center;
      background:rgba(51,177,255,.18);
      font-size:20px;
    }


    /* SSS SVG line icon set */
    .sss-ico{
      width:42px;
      height:42px;
      border-radius:50%;
      display:grid;
      place-items:center;
      background:rgba(51,177,255,.14);
      border:1px solid rgba(51,177,255,.20);
    }
    .sss-ico svg{
      width:20px;
      height:20px;
      color:var(--text);
    }


/* Header küçük butonlar + SVG ikon */
.btn-sm{
  padding:6px 12px;
  font-size:12.5px;
  border-radius:10px;
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.btn-sm .ico.svg svg{
  width:15px;
  height:15px;
  display:block;
}


.btn.mail{
  background:rgba(255,255,255,.08);
}
.btn.mail:hover{
  background:rgba(255,255,255,.14);
}



/* Paketler: 2'li düzen + ortalı (2 Yıllık kaldırıldı) */
#paketler .cards{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:20px;
  width:100%;
  max-width: 1280px; /* daha geniş */
  margin: 0 auto;
  padding: 0 18px;   /* sayfa kenar boşluğu */
  align-items: stretch;
}
@media (max-width: 820px){
  #paketler .cards{grid-template-columns: 1fr; max-width: 560px; padding: 0 14px;}
}

}



/* Paketler - ürün görsel kartı */
.product-card .pkg-img{max-width:100%; height:auto; display:block; margin:0 auto 6px}