:root{
      --bg: #f7fbff;
      --bg2:#eef7ff;
      --card:#ffffffcc;
      --cardSolid:#ffffff;
      --text:#0f172a;
      --muted:#4b5563;
      --line:#dbe7f5;

      --blue:#1d9bf0;
      --blue2:#0ea5e9;
      --ice:#dff3ff;
      --indigo:#2563eb;

      --shadow: 0 22px 55px rgba(2, 40, 90, .14);
      --shadow2: 0 14px 30px rgba(2, 40, 90, .12);
      --r: 18px;
      --r2: 26px;

      --container: 1180px;
    }

    *{ box-sizing:border-box; }
    body{
      margin:0;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
      color:var(--text);
      background:
        radial-gradient(900px 500px at 80% 10%, rgba(29,155,240,.18), transparent 60%),
        radial-gradient(800px 500px at 20% 25%, rgba(14,165,233,.14), transparent 65%),
        linear-gradient(180deg, #ffffff 0%, var(--bg) 55%, var(--bg2) 100%);
      overflow-x:hidden;
    }

    a{ color:inherit; text-decoration:none; }
    .container{ max-width:var(--container); margin:0 auto; padding: 0 16px; }

    /* Top subtle snow dots */
    .snow{
      position:fixed; inset:0;
      pointer-events:none;
      background-image:
        radial-gradient(rgba(255,255,255,.8) 1px, transparent 1.2px),
        radial-gradient(rgba(255,255,255,.55) 1px, transparent 1.2px);
      background-size: 42px 42px, 75px 75px;
      background-position: 0 0, 18px 22px;
      opacity:.35;
      mix-blend-mode: soft-light;
    }

    /* NAV */
    .nav{
      position:relative; top:0; z-index:50;
      backdrop-filter: blur(10px);
      background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.65));
      border-bottom:1px solid rgba(219,231,245,.75);
    }
    .navrow{
      height:76px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
    }
    .brand{
      display:flex; align-items:center; gap:12px;
      font-weight:900;
      letter-spacing:-.3px;
    }
    .logo{
      width:38px; height:38px; border-radius:14px;
      background:
        radial-gradient(14px 14px at 30% 30%, #fff, rgba(255,255,255,.3) 70%),
        linear-gradient(135deg, rgba(37,99,235,.95), rgba(14,165,233,.95));
      box-shadow: 0 10px 25px rgba(37,99,235,.22);
      position:relative;
    }
    .logo:after{
      content:"";
      position:absolute; inset:9px 10px 12px 10px;
      border-radius:10px;
      background: rgba(255,255,255,.92);
      clip-path: polygon(10% 60%, 45% 30%, 85% 58%, 85% 75%, 45% 50%, 10% 78%);
      opacity:.9;
    }
    .brand small{ display:block; font-weight:700; color:#4b5563; letter-spacing:0; margin-top:2px; }
    .brand span{ font-size:18px; }
    .menu{
      display:flex; align-items:center; gap:22px;
      color:#22324b;
      font-weight:700;
    }
    .menu a{
      padding:10px 10px;
      border-radius:12px;
      opacity:.88;
    }
    .menu a.active{
      position:relative;
      opacity:1;
    }
    .menu a.active:after{
      content:"";
      position:absolute; left:10px; right:10px; bottom:4px;
      height:3px;
      border-radius:999px;
      background: linear-gradient(90deg, var(--blue), var(--indigo));
      box-shadow: 0 10px 18px rgba(29,155,240,.25);
    }
    .navcta{
      display:flex; align-items:center; gap:10px;
    }
    .btn{
      display:inline-flex; align-items:center; justify-content:center;
      gap:10px;
      border-radius:14px;
      padding:12px 16px;
      font-weight:800;
      border:1px solid rgba(219,231,245,.95);
      background: rgba(255,255,255,.9);
      box-shadow: 0 10px 22px rgba(2, 40, 90, .08);
      transition: transform .15s ease, box-shadow .15s ease;
      cursor:pointer;
      user-select:none;
    }
    .btn:hover{ transform: translateY(-1px); box-shadow: 0 16px 30px rgba(2, 40, 90, .12); }
    .btn-primary{
      border:0;
      color:#fff;
      background: linear-gradient(135deg, var(--blue2), #3b82f6);
      box-shadow: 0 18px 38px rgba(14,165,233,.25);
    }
    .btn-icon{
      width:44px; height:44px; padding:0;
      border-radius:16px;
      background: radial-gradient(14px 14px at 30% 30%, rgba(255,255,255,.95), rgba(255,255,255,.2)),
                  linear-gradient(135deg, #25b6ff, #2b6bff);
      border:0;
      box-shadow: 0 18px 38px rgba(37,99,235,.22);
    }
    .arrow{
      width:14px; height:14px; border:2px solid #fff; border-left:0; border-bottom:0;
      transform: rotate(45deg);
      margin-left:2px;
    }

    /* HERO */
    .hero{
      padding: 34px 0 10px;
    }
    .heroGrid{
      display:grid;
      grid-template-columns: 1.1fr .9fr;
      gap: 28px;
      align-items: center;
    }
.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 14px;
  border-radius:999px;
  background:rgba(14,165,233,.08);
  font-weight:700;
  font-size:14px;
}

.pill i{
  width:22px;
  height:22px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:linear-gradient(135deg,#22c55e,#16a34a);
  color:#fff;
  font-size:12px;
}

    h1{
      margin: 16px 0 8px;
      font-size: clamp(36px, 4vw, 56px);
      line-height: 1.02;
      letter-spacing: -1px;
    }
    .grad{
      background: linear-gradient(135deg, #0b67ff, #12b6ff);
      -webkit-background-clip:text;
      background-clip:text;
      color: transparent;
    }
    .lead{
      color: var(--muted);
      font-size: 17px;
      line-height: 1.6;
      max-width: 52ch;
      margin: 10px 0 18px;
      font-weight: 650;
    }
    .checks{
      display:flex;
      gap:18px;
      flex-wrap: wrap;
      margin: 10px 0 18px;
      color:#334155;
      font-weight:800;
    }
    .check{
      display:flex; align-items:center; gap:10px;
      padding:10px 12px;
      border-radius: 14px;
      background: rgba(255,255,255,.7);
      border:1px solid rgba(219,231,245,.9);
    }
    .tick{
      width:18px; height:18px; border-radius:7px;
      background: linear-gradient(135deg, #0ea5e9, #2563eb);
      position:relative;
      box-shadow: 0 10px 20px rgba(37,99,235,.2);
    }
    .tick:after{
      content:"";
      position:absolute;
      width:8px; height:4px;
      border:2px solid #fff;
      border-top:0; border-right:0;
      transform: rotate(-45deg);
      left:5px; top:6px;
    }


    .btn-big{
      padding:14px 18px;
      border-radius:16px;
      font-size:16px;
    }
    .btn-ghost{
      background: rgba(255,255,255,.55);
    }
    .playDot{
      width:18px; height:18px;
      border-radius:999px;
      background: linear-gradient(135deg, #0ea5e9, #2563eb);
      position:relative;
      box-shadow: 0 12px 26px rgba(37,99,235,.2);
    }
    .playDot:after{
      content:"";
      position:absolute;
      left:7px; top:5px;
      width:0; height:0;
      border-left:7px solid #fff;
      border-top:5px solid transparent;
      border-bottom:5px solid transparent;
    }

    .illus{
      position:relative;
      border-radius: var(--r2);
      min-height: 320px;
      background:
        radial-gradient(180px 180px at 70% 25%, rgba(37,99,235,.18), transparent 60%),
        radial-gradient(260px 220px at 25% 60%, rgba(14,165,233,.16), transparent 62%),
        linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.35));
      border: 1px solid rgba(219,231,245,.9);
      box-shadow: var(--shadow);
      overflow:hidden;
    }
    .illusInner{
      position:absolute; inset:0;
      display:flex; align-items:center; justify-content:center;
      padding: 18px;
    }
    /* Buraya kendi 3D sunucu görselini koy */
    .illusInner img{
      width:100%;
      max-width: 440px;
      height:auto;
      filter: drop-shadow(0 28px 40px rgba(2, 40, 90, .20));
    }
    .badge10x{
      position:absolute;
      right: 18px;
      top: 50%;
      transform: translateY(-50%);
      padding: 10px 14px;
      border-radius: 999px;
      background: linear-gradient(180deg, #ffe9bd, #ffd38a);
      color:#7a4a00;
      font-weight: 1000;
      border:1px solid rgba(245, 158, 11, .35);
      box-shadow: 0 18px 34px rgba(245,158,11,.16);
    }
    .chip{
      position:absolute;
      left: 18px;
      bottom: 18px;
      padding: 10px 12px;
      border-radius: 14px;
      background: rgba(255,255,255,.75);
      border:1px solid rgba(219,231,245,.9);
      font-weight: 900;
      color:#1f2a44;
    }


    /* SECTION TITLES */
    .section{
      padding: 26px 0 54px;
    }
    .sectionHead{
      text-align:center;
      margin: 22px auto 18px;
      max-width: 760px;
    }
    .sectionPill{
      display:inline-flex; align-items:center; justify-content:center;
      gap:10px;
      padding: 10px 14px;
      border-radius: 999px;
      background: rgba(255,255,255,.7);
      border: 1px solid rgba(219,231,245,.9);
      font-weight: 900;
      color:#1f2a44;
      box-shadow: 0 14px 30px rgba(2,40,90,.08);
    }
    .sectionHead h2{
      margin: 14px 0 8px;
      font-size: clamp(28px, 3vw, 44px);
      letter-spacing: -1px;
      line-height: 1.08;
    }
    .sectionHead p{
      margin: 0;
      color: var(--muted);
      font-weight: 650;
      line-height: 1.6;
    }

    /* PRICING */
    .pricing{
      margin-top: 18px;
      display:grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
      align-items: stretch;
    }
    .plan{
      border-radius: 22px;
      background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.62));
      border:1px solid rgba(219,231,245,.95);
      box-shadow: var(--shadow2);
      padding: 18px 18px;
      position:relative;
      overflow:hidden;
    }
    .plan h3{
      margin:0 0 10px;
      font-size: 18px;
      letter-spacing:-.2px;
    }
    .price{
      display:flex; align-items:baseline; gap:8px;
      margin: 8px 0 12px;
    }
    .price strong{
      font-size: 40px;
      letter-spacing:-1px;
    }
    .price small{ color:#475569; font-weight:900; }
    .list{
      margin: 12px 0 16px;
      padding:0;
      list-style:none;
      display:grid;
      gap:10px;
      color:#22324b;
      font-weight: 800;
    }
    .list li{ display:flex; gap:10px; align-items:flex-start; }
    .dot{
      width:18px; height:18px; border-radius:7px;
      background: linear-gradient(135deg, #0ea5e9, #2563eb);
      box-shadow: 0 12px 22px rgba(37,99,235,.16);
      position:relative;
      flex:0 0 auto;
      margin-top: 1px;
    }
    .dot:after{
      content:"";
      position:absolute;
      width:8px; height:4px;
      border:2px solid #fff;
      border-top:0; border-right:0;
      transform: rotate(-45deg);
      left:5px; top:6px;
    }
    .plan .buy{
      width:100%;
      border-radius: 16px;
      padding: 12px 14px;
      font-weight: 950;
      border:1px solid rgba(219,231,245,.95);
      background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.65));
      box-shadow: 0 16px 30px rgba(2,40,90,.10);
      cursor:pointer;
    }
    .plan.popular{
      border: 1px solid rgba(29,155,240,.35);
      box-shadow: 0 26px 60px rgba(29,155,240,.18);
      transform: translateY(-6px);
      background:
        radial-gradient(220px 220px at 50% 0%, rgba(14,165,233,.18), transparent 60%),
        linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.62));
    }
    .ribbon{
      position:absolute;
      top: 14px; left: 14px;
      padding: 8px 10px;
      border-radius: 999px;
      font-weight: 1000;
      font-size: 12px;
      letter-spacing: .8px;
      text-transform: uppercase;
      color:#0b67ff;
      background: rgba(14,165,233,.12);
      border: 1px solid rgba(14,165,233,.22);
    }
    .plan.popular .buy{
      border:0;
      color:#fff;
      background: linear-gradient(135deg, var(--blue2), #3b82f6);
      box-shadow: 0 18px 38px rgba(14,165,233,.25);
    }
    .plan.accent .buy{
      border:0;
      color:#fff;
      background: linear-gradient(135deg, #6d28d9, #3b82f6);
      box-shadow: 0 18px 38px rgba(109,40,217,.20);
    }

    /* TWO CARDS */
    .two{
      margin-top: 18px;
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }
    .card{
      border-radius: 22px;
      border:1px solid rgba(219,231,245,.95);
      background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.62));
      box-shadow: var(--shadow2);
      padding: 18px 18px;
      overflow:hidden;
      position:relative;
    }
    .card h3{
      margin: 0 0 12px;
      font-size: 26px;
      letter-spacing:-.8px;
    }
    .why{
      display:grid;
      gap: 12px;
    }
    .whyItem{
      display:flex; gap:12px; align-items:center;
      padding: 12px 12px;
      border-radius: 18px;
      background: rgba(255,255,255,.6);
      border:1px solid rgba(219,231,245,.85);
    }
    .whyIcon{
      width:44px; height:44px; border-radius:16px;
      background: radial-gradient(14px 14px at 30% 30%, rgba(255,255,255,.95), rgba(255,255,255,.2)),
                  linear-gradient(135deg, #60a5fa, #2563eb);
      box-shadow: 0 16px 28px rgba(37,99,235,.16);
      flex:0 0 auto;
    }
    .whyItem b{ display:block; font-size: 16px; letter-spacing:-.2px; }
    .whyItem small{ display:block; color:#475569; font-weight: 850; margin-top:2px; }

    .perfRow{
      display:grid;
      gap: 14px;
    }
    .bar{
      height: 12px;
      border-radius: 999px;
      background: rgba(148,163,184,.35);
      border:1px solid rgba(219,231,245,.95);
      overflow:hidden;
    }
    .bar > span{
      display:block; height:100%;
      width: 82%;
      background: linear-gradient(90deg, #0ea5e9, #2563eb);
      border-radius: 999px;
      box-shadow: 0 14px 28px rgba(37,99,235,.18);
    }
    .perfMeta{
      display:flex; align-items:center; justify-content:space-between;
      font-weight: 950;
      color:#1f2a44;
    }
    .perfMeta small{ color:#475569; font-weight: 900; }

    /* DOMAIN */
    .domain{
      margin-top: 18px;
      border-radius: 26px;
      border:1px solid rgba(219,231,245,.95);
      background:
        radial-gradient(260px 220px at 20% 20%, rgba(14,165,233,.16), transparent 65%),
        radial-gradient(260px 220px at 80% 45%, rgba(37,99,235,.14), transparent 65%),
        linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.62));
      box-shadow: var(--shadow2);
      padding: 18px;
    }
    .domain h3{
      text-align:center;
      margin: 0 0 12px;
      font-size: 28px;
      letter-spacing:-.9px;
    }
    .searchRow{
      display:flex;
      gap: 10px;
      align-items:center;
      max-width: 860px;
      margin: 0 auto 12px;
      background: rgba(255,255,255,.75);
      border:1px solid rgba(219,231,245,.95);
      border-radius: 18px;
      padding: 10px;
      box-shadow: 0 14px 28px rgba(2,40,90,.08);
    }
    .searchRow input{
      flex:1;
      border:0;
      outline:none;
      font-size: 16px;
      padding: 12px 12px;
      background: transparent;
      font-weight: 800;
      color:#1f2a44;
    }
    .searchRow button{
      border:0;
      padding: 12px 14px;
      border-radius: 16px;
      font-weight: 950;
      color:#fff;
      background: linear-gradient(135deg, var(--blue2), #3b82f6);
      box-shadow: 0 18px 34px rgba(14,165,233,.22);
      cursor:pointer;
      display:flex; align-items:center; gap:10px;
      white-space:nowrap;
    }
    .magnifier{
      width:14px; height:14px;
      border:2px solid #fff;
      border-radius:999px;
      position:relative;
    }
    .magnifier:after{
      content:"";
      position:absolute;
      width:8px; height:2px;
      background:#fff;
      right:-7px; bottom:-5px;
      transform: rotate(45deg);
      border-radius: 999px;
    }
.tlds{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:18px;
  margin-top:20px;
}

.tld{
  background:linear-gradient(180deg,#ffffff,#f3f9ff);
  border:1px solid #e3eefc;
  border-radius:18px;
  padding:18px 20px;
  min-width:220px;
  box-shadow:0 12px 28px rgba(14,165,233,.08);
  transition: all .25s ease;
  cursor:pointer;
}

.tld:hover{
  transform:translateY(-6px);
  background:linear-gradient(135deg,#0ea5e9,#2563eb);
  color:#fff;
  box-shadow:0 20px 45px rgba(14,165,233,.25);
}

.tld-name{
  font-size:24px;
  font-weight:900;
  margin-bottom:8px;
}

.tld-prices{
  display:flex;
  flex-direction:column;
  gap:4px;
  font-size:14px;
}

.tld-prices span{
  display:flex;
  justify-content:space-between;
  color:#64748b;
}

.tld:hover .tld-prices span{
  color:#fff;
}

.tld-prices b{
  font-weight:900;
}

    /* Responsive */
    @media (max-width: 980px){
      .menu{ display:none; }
      .heroGrid{ grid-template-columns: 1fr; }
      .illus{ min-height: 280px; }
      .statbar{ grid-template-columns: repeat(2, 1fr); }
      .pricing{ grid-template-columns: repeat(2, 1fr); }
      .two{ grid-template-columns: 1fr; }
      .plan.popular{ transform:none; }
    }
    @media (max-width: 520px){
      .navrow{ height:auto; padding: 12px 0; }
      .navcta .btn{ padding: 11px 14px; }
      .statbar{ grid-template-columns: 1fr; }
      .pricing{ grid-template-columns: 1fr; }
      .searchRow{ flex-direction:column; align-items:stretch; }
      .searchRow button{ width:100%; justify-content:center; }
    }
	
	
  /* --- MEGA MENU STYLES (mevcut CSS'in altına ekleyebilirsin) --- */

  /* Desktop menu items become buttons */
  .menu{ display:flex; align-items:center; gap:10px; }
  .mitem{
    border:0;
    background:transparent;
    font: inherit;
    color:#22324b;
    font-weight:800;
    padding:10px 10px;
    border-radius:12px;
    cursor:pointer;
    display:flex; align-items:center; gap:10px;
    opacity:.9;
  }
  .mitem.active{ opacity:1; position:relative; }
  .mitem.active:after{
    content:"";
    position:absolute; left:10px; right:10px; bottom:4px;
    height:3px; border-radius:999px;
    background: linear-gradient(90deg, var(--blue), var(--indigo));
    box-shadow: 0 10px 18px rgba(29,155,240,.25);
  }
  .mi{ display:flex; align-items:center; gap:10px; }
  .chev{
    width:10px; height:10px;
    border:2px solid #2b3b55;
    border-left:0; border-top:0;
    transform: rotate(45deg);
    opacity:.55;
    margin-top:-2px;
  }
  .mitem[aria-expanded="true"] .chev{ transform: rotate(-135deg); opacity:.8; }

  .mlink{
    padding:10px 10px;
    border-radius:12px;
    font-weight:800;
    opacity:.9;
    display:flex; align-items:center;
  }

  /* Mega wrapper under nav */
  .megaWrap{
    position: relative;
  }
  .mega{
    display:none;
    margin: 10px 0 14px;
    border-radius: 22px;
    border:1px solid rgba(219,231,245,.95);
    background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.68));
    box-shadow: var(--shadow2);
    padding: 16px;
  }
  .mega.open{ display:block; }
  .megaHead{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap: 14px;
    padding: 4px 6px 14px;
    border-bottom: 1px solid rgba(219,231,245,.85);
    margin-bottom: 14px;
  }
  .megaTitle{
    font-weight:1000;
    letter-spacing:-.4px;
    font-size: 18px;
    color:#1f2a44;
  }
  .megaDesc{
    margin-top:4px;
    color:#475569;
    font-weight:700;
  }
  .megaAll{
    font-weight:950;
    color:#0b67ff;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(14,165,233,.10);
    border: 1px solid rgba(14,165,233,.18);
    white-space:nowrap;
  }

  .megaGrid{
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
  }
  .megaCard{
    display:flex;
    gap: 12px;
    align-items:flex-start;
    padding: 14px;
    border-radius: 18px;
    background: rgba(255,255,255,.62);
    border: 1px solid rgba(219,231,245,.85);
    transition: transform .15s ease, box-shadow .15s ease;
  }
  .megaCard:hover{
    transform: translateY(-2px);
    box-shadow: 0 16px 30px rgba(2, 40, 90, .12);
  }
  .megaCard b{
    display:block;
    font-size: 14.5px;
    letter-spacing:-.2px;
  }
  .megaCard p{
    margin:4px 0 0;
    color:#475569;
    font-weight:650;
    line-height:1.35;
    font-size: 13px;
  }

  /* Icon base */
  .ico, .mci{
    width:18px; height:18px;
    border-radius:8px;
    background: radial-gradient(14px 14px at 30% 30%, rgba(255,255,255,.95), rgba(255,255,255,.2)),
                linear-gradient(135deg, #7dd3fc, #2563eb);
    box-shadow: 0 12px 22px rgba(37,99,235,.16);
    position:relative;
    flex:0 0 auto;
  }
  .mci{ width:42px; height:42px; border-radius:16px; }

  /* Tiny glyphs (CSS-only) */
  .ico:after, .mci:after{ content:""; position:absolute; inset:0; margin:auto; }
  .i-home:after{ width:12px; height:10px; background:#fff; clip-path: polygon(50% 5%, 95% 45%, 85% 45%, 85% 92%, 58% 92%, 58% 66%, 42% 66%, 42% 92%, 15% 92%, 15% 45%, 5% 45%); top:4px; left:0; right:0; }
  .i-host:after{ width:12px; height:12px; background:#fff; border-radius:3px; top:3px; box-shadow: 0 7px 0 rgba(255,255,255,.85); }
  .i-server:after{ width:14px; height:12px; background:#fff; border-radius:3px; top:3px; box-shadow: 0 7px 0 rgba(255,255,255,.85); }
  .i-domain:after{ width:12px; height:12px; border:2px solid #fff; border-radius:999px; top:3px; }
  .i-mail:after{ width:14px; height:10px; background:#fff; clip-path: polygon(0 0,100% 0,100% 100%,0 100%, 50% 55%); top:4px; }
  .i-web:after{ width:16px; height:16px; border:2px solid #fff; border-radius:999px; top:0; bottom:0; left:0; right:0; }
  .i-word:after{ width:14px; height:14px; background:#fff; border-radius:4px; top:0; bottom:0; left:0; right:0; }
  .i-reseller:after{ width:14px; height:14px; background:#fff; border-radius:999px; top:0; bottom:0; left:0; right:0; }
  .i-mail2:after{ width:16px; height:12px; background:#fff; clip-path: polygon(0 10%,100% 10%,100% 90%,0 90%, 50% 55%); top:0; bottom:0; left:0; right:0; }
  .i-vps:after{ width:16px; height:12px; background:#fff; border-radius:4px; top:0; bottom:0; left:0; right:0; }
  .i-vds:after{ width:16px; height:12px; background:#fff; border-radius:4px; top:0; bottom:0; left:0; right:0; box-shadow: inset 0 0 0 2px rgba(37,99,235,.0); }
  .i-managed:after{ width:14px; height:14px; border:2px solid #fff; border-radius:6px; top:0; bottom:0; left:0; right:0; }
  .i-shield:after{ width:14px; height:14px; background:#fff; clip-path: polygon(50% 5%, 88% 20%, 88% 55%, 50% 92%, 12% 55%, 12% 20%); top:0; bottom:0; left:0; right:0; }
  .i-search:after{ width:10px; height:10px; border:2px solid #fff; border-radius:999px; top:10px; left:10px; }
  .i-transfer:after{ width:14px; height:10px; background:#fff; clip-path: polygon(0 40%, 70% 40%, 70% 20%, 100% 50%, 70% 80%, 70% 60%, 0 60%); top:0; bottom:0; left:0; right:0; }
  .i-lock:after{ width:12px; height:10px; background:#fff; border-radius:3px; top:12px; left:0; right:0; }
  .i-dns:after{ width:14px; height:14px; background:#fff; border-radius:999px; top:0; bottom:0; left:0; right:0; }
  .i-tag:after{ width:14px; height:10px; background:#fff; clip-path: polygon(0 0, 75% 0, 100% 50%, 75% 100%, 0 100%); top:0; bottom:0; left:0; right:0; }
  .i-rocket:after{ width:12px; height:14px; background:#fff; clip-path: polygon(50% 0, 80% 20%, 80% 70%, 50% 100%, 20% 70%, 20% 20%); top:0; bottom:0; left:0; right:0; }
  .i-help:after{ width:14px; height:14px; border:2px solid #fff; border-radius:999px; top:0; bottom:0; left:0; right:0; }
  .i-status:after{ width:14px; height:10px; background:#fff; clip-path: polygon(0 80%, 20% 60%, 40% 70%, 60% 35%, 80% 50%, 100% 10%, 100% 100%, 0 100%); top:0; bottom:0; left:0; right:0; }


.menu-icon{
  font-size:25px;
  color:#2563eb;
  width:20px;
  text-align:center;
  transition: all .2s ease;
}

.mitem:hover .menu-icon{
  color:#0ea5e9;
  transform: translateY(-1px);
}


  /* Mobile */
  .m-toggle{
    display:none;
    width:44px; height:44px;
    border-radius:16px;
    border:1px solid rgba(219,231,245,.95);
    background: rgba(255,255,255,.85);
    box-shadow: 0 10px 22px rgba(2,40,90,.08);
    cursor:pointer;
    padding:10px;
  }
  .m-toggle span{
    display:block;
    height:2px;
    background:#1f2a44;
    border-radius:999px;
    margin: 6px 0;
    opacity:.85;
  }

  .mDrawer{ display:none; }
  @media (max-width: 980px){
    .menu{ display:none; }
    .megaWrap{ display:none; }
    .m-toggle{ display:inline-block; }
    .mDrawer{
      display:block;
      position: fixed;
      inset: 0;
      z-index: 60;
      pointer-events:none;
    }
    .mDrawer.open{ pointer-events:auto; }
    .mBackdrop{
      position:absolute; inset:0;
      background: rgba(2, 12, 28, .35);
      backdrop-filter: blur(4px);
      opacity:0;
      transition: opacity .18s ease;
    }
    .mDrawer.open .mBackdrop{ opacity:1; }
    .mPanel{
      position:absolute;
      top: 10px; right: 10px; left: 10px;
      border-radius: 22px;
      background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.82));
      border:1px solid rgba(219,231,245,.95);
      box-shadow: var(--shadow);
      transform: translateY(-8px);
      opacity:0;
      transition: transform .18s ease, opacity .18s ease;
      max-height: calc(100vh - 20px);
      overflow:auto;
    }
    .mDrawer.open .mPanel{ transform:none; opacity:1; }

    .mTop{
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding: 14px 14px 10px;
      border-bottom:1px solid rgba(219,231,245,.85);
    }
    .mTitle{ font-weight:1000; letter-spacing:-.4px; }
    .mClose{
      width:42px; height:42px;
      border-radius:16px;
      border:1px solid rgba(219,231,245,.95);
      background: rgba(255,255,255,.9);
      cursor:pointer;
      font-weight:900;
    }
    .mLinks{ padding: 12px; display:grid; gap: 10px; }
    .mSingle{
      display:flex; gap:10px; align-items:center;
      padding: 12px 12px;
      border-radius: 18px;
      background: rgba(255,255,255,.65);
      border: 1px solid rgba(219,231,245,.85);
      font-weight: 900;
      color:#1f2a44;
    }
    .mAcc{
      width:100%;
      display:flex; align-items:center; justify-content:space-between;
      gap:10px;
      padding: 12px 12px;
      border-radius: 18px;
      background: rgba(255,255,255,.65);
      border: 1px solid rgba(219,231,245,.85);
      font-weight: 950;
      color:#1f2a44;
      cursor:pointer;
    }
    .mChev{
      width:10px; height:10px;
      border:2px solid #2b3b55;
      border-left:0; border-top:0;
      transform: rotate(45deg);
      opacity:.55;
    }
    .mAcc[aria-expanded="true"] .mChev{ transform: rotate(-135deg); opacity:.8; }
    .mAccBody{
      display:none;
      padding: 10px 6px 0;
      margin-top: -6px;
      border-left: 1px dashed rgba(37,99,235,.22);
      margin-left: 18px;
    }
    .mAccBody.open{ display:grid; gap: 8px; }
    .mAccBody a{
      display:flex;
      justify-content:space-between;
      gap: 12px;
      padding: 12px 12px;
      border-radius: 16px;
      background: rgba(255,255,255,.62);
      border: 1px solid rgba(219,231,245,.85);
      color:#1f2a44;
      font-weight: 950;
    }
    .mAccBody a span{
      color:#475569;
      font-weight: 750;
    }
  }

  /* Mega grid responsive */
  @media (max-width: 1100px){
    .megaGrid{ grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 520px){
    .megaGrid{ grid-template-columns: 1fr; }
  }
  
  
  
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  font-weight:900;
  letter-spacing:-.3px;
  padding: 6px 0;
}

.brand-logo{
  height: 34px;        /* navbar içinde ideal */
  width: auto;
  display:block;
  object-fit: contain;
}

@media (max-width: 520px){
  .brand-logo{
    height: 30px;      /* mobilde biraz küçül */
  }
} 












/* Masaüstü auth alanı */
.desktop-auth{
  display:flex;
  gap:10px;
  align-items:center;
}

/* Buton varyasyonları */
.btn-outline{
  background: rgba(255,255,255,.9);
  border:1px solid rgba(219,231,245,.95);
  font-weight:900;
}

.btn-primary{
  border:0;
  color:#fff;
  background: linear-gradient(135deg, #0ea5e9, #2563eb);
  box-shadow: 0 18px 34px rgba(14,165,233,.25);
  font-weight:900;
}

/* Mobilde üst butonları kaldır */
@media (max-width: 980px){
  .desktop-auth{
    display:none;
  }
}

/* Mobil drawer alt butonlar */
.mAuth{
  margin-top: 14px;
  display:flex;
  gap:10px;
}

.mBtn{
  flex:1;
  padding:14px 12px;
  border-radius:16px;
  text-align:center;
  font-weight:950;
  border:1px solid rgba(219,231,245,.95);
  background: rgba(255,255,255,.75);
}

.mBtn.primary{
  border:0;
  color:#fff;
  background: linear-gradient(135deg, #0ea5e9, #2563eb);
  box-shadow: 0 18px 34px rgba(14,165,233,.22);
}

.mBtn.outline{
  background: rgba(255,255,255,.85);
} 















/* MEGA MENU */
.mega-wrapper{
  position:relative;
}

.mega-menu{
  display:none;
  position:absolute;
  left:0;
  width:100%;
  background:#fff;
  border-top:1px solid #e6f0fb;
  box-shadow:0 30px 80px rgba(12,20,60,.15);
  padding:40px 0;
  z-index:999;
}

.mega-menu.active{
  display:block;
  animation:fadeIn .2s ease;
}

.mega-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:30px;
}

.mega-col h4{
  margin-bottom:12px;
  font-size:16px;
}

.mega-col a{
  display:block;
  margin-bottom:8px;
  text-decoration:none;
  color:#1f2937;
  font-weight:600;
}

.mega-col a:hover{
  color:#0ea5e9;
}

.mega-col.highlight{
  background:linear-gradient(135deg,#e0f2fe,#f0f9ff);
  padding:20px;
  border-radius:12px;
}

.mega-btn{
  display:inline-block;
  margin-top:10px;
  padding:10px 14px;
  background:linear-gradient(135deg,#0ea5e9,#2563eb);
  color:#fff !important;
  border-radius:8px;
  font-size: 17px;
}

@keyframes fadeIn{
  from{opacity:0; transform:translateY(-6px);}
  to{opacity:1; transform:none;}
}









/* Mega grid */
.mega-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:25px;
}

/* Mega item kart */
.mega-item{
  display:flex;
  gap:14px;
  align-items:flex-start;
  padding:18px;
  border-radius:14px;
  background:#fff;
  border:1px solid #eef3f9;
  text-decoration:none;
  transition:all .2s ease;
}

.mega-item:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 50px rgba(14,165,233,.12);
}

/* Icon alanı */
.mega-icon{
  width:50px;
  height:50px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#2f4f4f;
  color:#fff;
  font-size:26px;
  flex-shrink:0;
}

/* İçerik */
.mega-content h4{
  margin:0;
  font-size:15px;
  font-weight:800;
  color:#1f2937;
}

.mega-content p{
  margin:6px 0 0;
  font-size:14px;
  color:#64748b;
  line-height:1.4;
}

/* Highlight kart */
.mega-item.highlight{
  background:linear-gradient(135deg,#e0f2fe,#f0f9ff);
  border:1px solid #cce7ff;
}











.heroSlider{ position:relative; overflow:hidden; border-radius:26px;  padding-bottom: 50px; }
.heroTrack{ display:flex; transition:transform .55s cubic-bezier(.2,.8,.2,1); will-change:transform; }
.heroSlide{ min-width:100%; }

.heroNav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:14px;
  border:1px solid rgba(219,231,245,.95);
  background: rgba(255,255,255,.85);
  box-shadow: 0 14px 28px rgba(2,40,90,.10);
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  z-index:5;
}
.heroNav.prev{ left:12px; }
.heroNav.next{ right:12px; }

.heroDots{
  position:absolute; left:0; right:0; bottom:10px;
  display:flex; justify-content:center; gap:8px; z-index:5;
}
.heroDot{
  width:10px; height:10px; border-radius:999px;
  border:1px solid rgba(37,99,235,.25);
  background: rgba(255,255,255,.7);
  cursor:pointer;
}
.heroDot.active{ width:22px; background:linear-gradient(135deg,#0ea5e9,#2563eb); border:0; }


/* ---------- layout vars ---------- */
:root{
  --nav-height-top:70px;
  --nav-height-bottom:66px;
  --accent: #0ea5e9;
  --blue: #2563eb;
  --muted:#475569;
}

/* reset for this block */
.nav{ font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; }

/* TOP ROW */
.nav-top{ background: linear-gradient(180deg,#ffffff,#f7fbff); border-bottom:1px solid #e6f0fb; }
.nav-top-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:0 12px; }
.brand-logo{ height:80px; width:auto; display:block; margin-top: 12px; }

/* top actions (desktop) */
.top-actions{ display:flex; gap:14px; align-items:center; }
.top-link{ color:var(--muted); font-weight:700; text-decoration:none; padding:8px 10px; border-radius:10px; }
.top-link.btn-primary{ background:linear-gradient(135deg,var(--accent),var(--blue)); color:#fff; border:0; box-shadow:0 12px 28px rgba(14,165,233,.12); }
.top-link:hover{ color:var(--blue); transform:translateY(-1px); transition:all .14s ease; }

/* mobile toggle hidden on desktop */
.m-toggle{ display:none; background:transparent; border:0; width:48px; height:48px; border-radius:10px; align-items:center; justify-content:center; cursor:pointer; }
.m-toggle span{ display:block; height:2px; background:#1f2a44; margin:5px 0; border-radius:2px; width:20px; opacity:.9; }

/* BOTTOM ROW */
.nav-bottom{ background:#2f4f4f; }
.center-menu{ display:flex; gap:36px; align-items:center; justify-content:center; height:var(--nav-height-bottom); }
.mitem, .mlink{ background:none; border:0; font-weight:800; color:#ffffff; display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:8px; cursor:pointer; }
.mitem[aria-expanded="true"], .mitem:hover, .mlink:hover{ color:var(--accent); transform:translateY(-2px); transition:all .12s ease; }
.menu-icon{ color:#ffffff; font-size:20px; width:30px; text-align:center; }

/* MOBILE DRAWER (hidden by default) */
.mobile-drawer{ display:none; position:fixed; inset:0; z-index:9999; pointer-events:none; }
.mobile-drawer.open{ pointer-events:auto; }
.m-backdrop{ position:absolute; inset:0; background:rgba(2,12,28,.45); opacity:0; transition:opacity .18s ease; }
.mobile-drawer.open .m-backdrop{ opacity:1; }
.m-panel{ position:absolute; top:14vh; left:8px; right:8px; margin:auto; max-width:520px; border-radius:16px; background:#fff; border:1px solid #e6f3ff; box-shadow:0 30px 70px rgba(12,20,60,.22); transform:translateY(-8px); opacity:0; transition:transform .18s ease, opacity .18s ease; max-height:80vh; overflow:auto; }
.mobile-drawer.open .m-panel{ transform:none; opacity:1; }

/* mobile panel content */
.m-top{ display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid #eef6ff; }
.m-links{ display:grid; gap:8px; padding:14px; }
.m-link{ display:block; padding:12px 14px; border-radius:12px; text-decoration:none; color:#102030; font-weight:800; background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.9)); border:1px solid #eef6ff; }
.m-auth{ display:flex; gap:8px; margin-top:8px; align-items:center; }
.m-btn{ flex:1; padding:12px; text-align:center; border-radius:12px; font-weight:900; border:1px solid #e6f3ff; }
.m-btn.primary{ background:linear-gradient(135deg,var(--accent),var(--blue)); color:#fff; border:0; box-shadow:0 12px 30px rgba(14,165,233,.12); }
.m-btn.outline{ background:#fff; }

/* RESPONSIVE */
@media (max-width: 980px){
  /* hide desktop top-actions; show mobile toggle */
  .top-actions{ display:none; }
  .m-toggle{ display:flex; }
  /* hide center menu – will be in drawer */
  .center-menu{ display:none; }
  /* mobile drawer visible when open (JS toggles .open) */
  .mobile-drawer{ display:block; }
}

/* optional: keep desktop aligned but allow narrow screens to scroll menu */
@media (max-width: 700px){
  .brand-logo{ height:75px; }
}









.m-acc{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid #eef6ff;
  background: #040c5a;
  font-weight:900;
  cursor:pointer;
  color: #ffffff;
}

.m-acc-body{
  display:none;
  margin-top:-4px;
  padding:10px 10px 0;
  border-left: 1px dashed rgba(37,99,235,.22);
  margin-left:12px;
}

.m-acc-body.open{ display:grid; gap:8px; }

.m-sublink{
  display:block;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid #eef6ff;
  background:#040c5a;
  font-weight:800;
  text-decoration:none;
  color: #bbcaca;
}	


.m-sublink i{
  color:#ffffff;       /* icon gri */
  width:25px;
  text-align:center;
}


.m-auth-buttons{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
  margin-top:10px;
}

.m-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:12px;
  border-radius:12px;
  font-weight:700;
  text-decoration:none;
  font-size:14px;
}

/* giriş yap */
.m-btn.login{
  background:#060606;
  border:1px solid #e2e8f0;
  color:#ffffff;
}

/* kayıt ol */
.m-btn.register{
  background:linear-gradient(135deg,#0ea5e9,#2563eb);
  color:#fff;
}


.m-top{
  display:flex;
  align-items:center;
  justify-content:space-between; /* 👈 sağa iter */
}


.m-close{
  margin-left:auto;
}








.m-close{
  width:42px;
  height:42px;
  border-radius:12px;
  border:1px solid #e2e8f0;
  background:#fff;
  font-size:18px;
  cursor:pointer;

  display:flex;
  align-items:center;
  justify-content:center;

  transition: all .25s ease;
}

/* hover */
.m-close:hover{
  background:#ef4444;
  color:#fff;
  border-color:#ef4444;
  transform:scale(1.05);
}


.heroActions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
  margin-top:6px;

  justify-content:flex-start; /* PC: solda */
}

/* Mobilde ortala */
@media (max-width: 520px){
  .heroActions{
    justify-content:center;
  }
}

@media (max-width: 768px){
  .illus{
    display:none;
  } 
}


@media (max-width: 768px){

  .tlds{
    display:grid;
    grid-template-columns: 1fr 1fr; /* 2 sütun */
    gap:12px;
  }

  .tld{
    min-width:unset; /* flex genişlik çakışmasını kaldırır */
    width:100%;
  }

}




/* PRICING - daha premium görünüm */
.pricing{
  margin-top:18px;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:16px;
  align-items:stretch;
}

.plan{
  position:relative;
  overflow:hidden;
  border-radius:22px;
  border:1px solid rgba(219,231,245,.95);
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.68));
  box-shadow: 0 14px 34px rgba(2, 40, 90, .10);
  padding:20px 18px 18px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.plan::before{
  content:"";
  position:absolute;
  inset:-120px -80px auto -80px;
  height:220px;
  background:
    radial-gradient(220px 160px at 30% 30%, rgba(14,165,233,.22), transparent 60%),
    radial-gradient(220px 160px at 70% 30%, rgba(37,99,235,.16), transparent 60%);
  pointer-events:none;
  opacity:.9;
}

.plan:hover{
  transform: translateY(-4px);
  box-shadow: 0 22px 60px rgba(2, 40, 90, .14);
  border-color: rgba(14,165,233,.35);
}

.plan h3{
  margin:0 0 10px;
  font-size:18px;
  letter-spacing:-.2px;
  font-weight:950;
  color:#0f172a;
}

.price{
  display:flex;
  align-items:baseline;
  gap:10px;
  margin: 10px 0 14px;
  padding:12px 12px;
  border-radius:16px;
  background: rgba(255,255,255,.72);
  border:1px solid rgba(219,231,245,.85);
}

.price small{
  color:#475569;
  font-weight:900;
}

.price strong{
  font-size:42px;
  letter-spacing:-1px;
  line-height:1;
}

.list{
  margin: 10px 0 16px;
  padding:0;
  list-style:none;
  display:grid;
  gap:0px;
  color:#1f2a44;
  font-weight:850;
}

.list li{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:10px 10px;
  border-radius:14px;
  background: rgba(255,255,255,.58);
  border:1px solid rgba(219,231,245,.78);
}

.dot{
  width:18px; height:18px;
  border-radius:7px;
  background: linear-gradient(135deg, #0ea5e9, #2563eb);
  box-shadow: 0 12px 22px rgba(37,99,235,.16);
  position:relative;
  flex:0 0 auto;
  margin-top: 1px;
}
.dot:after{
  content:"";
  position:absolute;
  width:8px; height:4px;
  border:2px solid #fff;
  border-top:0; border-right:0;
  transform: rotate(-45deg);
  left:5px; top:6px;
}

/* CTA */
.plan .buy{
  width:100%;
  border-radius:16px;
  padding:13px 14px;
  font-weight:950;
  border:1px solid rgba(219,231,245,.95);
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.72));
  box-shadow: 0 16px 30px rgba(2,40,90,.10);
  cursor:pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.plan .buy:hover{
  transform: translateY(-1px);
  box-shadow: 0 22px 44px rgba(2,40,90,.14);
}

/* POPULAR */
.plan.popular{
  border:1px solid rgba(14,165,233,.45);
  box-shadow: 0 26px 70px rgba(14,165,233,.18);
  background:
    radial-gradient(240px 240px at 50% 0%, rgba(14,165,233,.18), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.68));
}

.plan.popular::after{
  content:"ÖNERİLEN";
  position:absolute;
  top:14px; right:14px;
  padding:8px 10px;
  border-radius:999px;
  font-weight:1000;
  font-size:12px;
  letter-spacing:.8px;
  color:#0b67ff;
  background: rgba(14,165,233,.12);
  border: 1px solid rgba(14,165,233,.22);
}

/* popular button primary */
.plan.popular .buy{
  border:0;
  color:#fff;
  background: linear-gradient(135deg, #0ea5e9, #2563eb);
  box-shadow: 0 18px 38px rgba(14,165,233,.25);
}

/* accent plan biraz mor ton */
.plan.accent .buy{
  border:0;
  color:#fff;
  background: linear-gradient(135deg, #6d28d9, #2563eb);
  box-shadow: 0 18px 38px rgba(109,40,217,.20);
}

/* Responsive */
@media (max-width: 980px){
  .pricing{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px){
  .pricing{ grid-template-columns: 1fr; }
  .price strong{ font-size:40px; }
}









/* Paket Akordeon */
.pkgAcc{
  margin-top:18px;
  display:grid;
  gap:12px;
}

.pkgItem{
  border-radius:22px;
  border:1px solid rgba(219,231,245,.95);
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.68));
  box-shadow: 0 14px 34px rgba(2, 40, 90, .10);
  overflow:hidden;
}

.pkgHead{
  width:100%;
  border:0;
  cursor:pointer;
  padding:16px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  background: transparent;
  font-weight:950;
  color:#0f172a;
}

.pkgLeft{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:16px;
}

.pkgIco{
  color:#64748b;        /* icon gri */
  font-size:16px;
  width:18px;
  text-align:center;
}

.pkgRight{
  display:flex;
  align-items:center;
  gap:10px;
}

.pkgHint{
  color:#64748b;
  font-weight:800;
  font-size:13px;
  display:none;
}

.pkgChev{
  transition: transform .18s ease;
  color:#2563eb;
}

.pkgHead[aria-expanded="true"] .pkgChev{
  transform: rotate(180deg);
}

.pkgBody{
  display:none;
  padding: 0 16px 16px;
}

.pkgBody.open{
  display:block;
}

/* Desktop'ta açıklama gözüksün */
@media (min-width: 980px){
  .pkgHint{ display:inline; }
}



.list {
  list-style: none;
  padding: 0;
}

.list li {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  font-size: 15px;
}

.icon-box {
  width: 32px;
  height: 32px;
  background: #0d6efd; /* mavi */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
}

.icon-box i {
  color: #fff;
  font-size: 14px;
}