:root {
      --bg-main: #000000;
      --bg-elevated: rgba(10, 10, 10, 0.96);
      --accent: #ef4444;
      --accent-2: #b91c1c;
      --accent-orange: #fb923c;
      --text-main: #f9fafb;
      --text-muted: #d5d5d5;
      --glow-red: 0 0 40px rgba(248, 113, 113, 0.95);
      --bs-secondary-rgb: 193, 193, 193;
    }

    * { box-sizing: border-box; }

    body {
    font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    background: radial-gradient(circle at top, #111827 0, #020617 35%, #000 80%), #000;
    color: var(--text-main);
    scroll-behavior: smooth;
    position: relative;
    min-height: 100vh;
    }

    /* Arka plan araba + blur */
    body::before {
      content: "";
      position: fixed;
      inset: 0;
      background:
        linear-gradient(to bottom, rgba(0,0,0,0.86), rgba(0,0,0,0.97)),
        url("https://images.pexels.com/photos/799443/pexels-photo-799443.jpeg?auto=compress&cs=tinysrgb&w=1600")
          center top/cover no-repeat;
      opacity: 0.32;
      filter: grayscale(0.35) contrast(1.25) blur(2px);
      z-index: -3;
    }

a {
    color: #fff;
}

.nav-glass .gap-2 a {
    text-decoration: none;
}
    .blur-orb {
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: -2;
    }
    .blur-orb::before,
    .blur-orb::after {
      content: "";
      position: absolute;
      width: 520px;
      height: 520px;
      border-radius: 50%;
      filter: blur(170px);
      opacity: 0.9;
    }
    .blur-orb::before {
      background: #ef4444;
      top: -160px;
      left: -140px;
    }
    .blur-orb::after {
      background: #7f1d1d;
      bottom: -180px;
      right: -160px;
    }

    .cursor-glow {
      position: fixed;
      width: 280px;
      height: 280px;
      border-radius: 50%;
      pointer-events: none;
      z-index: -1;
      background: radial-gradient(circle, rgba(248, 113, 113, 0.32), transparent 65%);
      mix-blend-mode: screen;
      opacity: 0;
      transition: opacity 0.3s ease-out;
      filter: blur(2px);
    }

    /* HEADER */
    header {
      position: sticky;
      top: 0;
      z-index: 50;
      padding-top: 0.8rem;
    }
    .nav-glass {
      background: linear-gradient(to right, rgba(10,10,10,0.98), rgba(12,12,12,0.94));
      backdrop-filter: blur(22px);
      border-radius: 999px;
      border: 1px solid rgba(248, 113, 113, 0.6);
      padding: 1rem;
      transition: all 0.22s ease-out;
    }
    header.scrolled .nav-glass {
      border-color: rgba(248, 113, 113, 0.98);
      background: rgba(7,7,7,0.98);
      box-shadow: 0 20px 50px rgba(0,0,0,0.8);
      transform: translateY(-4px);
    }
    .nav-link {
      color: var(--text-muted) !important;
      font-size: 0.9rem;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      position: relative;
      padding-bottom: 0.15rem;
    }
    .nav-link::after {
      content:"";
      position:absolute;
      left:0;
      bottom:0;
      width:0;
      height:2px;
      border-radius:999px;
      background:linear-gradient(90deg,#ef4444,#f97316);
      transition:width .2s ease-out;
    }
    .nav-link:hover { color:#fff !important; }
    .nav-link:hover::after { width:100%; }

    .nav-link.active {
      color:#fee2e2 !important;
      font-weight:600;
    }
    .nav-link.active::after {
      width:100%;
    }

    .btn-pill {
      border-radius: 999px;
      padding: 0.65rem 1.5rem;
      font-weight: 500;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      font-size: 0.78rem;
      transition: transform 0.18s ease-out, box-shadow 0.18s ease-out, background 0.18s ease-out;
    }
    .btn-accent {
      background: linear-gradient(135deg,#ef4444,#b91c1c);
      border:none;
      color:white;
      box-shadow: var(--glow-red);
    }
    .btn-accent:hover {
      transform: translateY(-2px) scale(1.02);
      box-shadow: 0 0 52px rgba(248,113,113,1);
      filter: brightness(1.06);
    }
    .btn-ghost {
      border:1px solid rgba(148,163,184,0.55);
      color:var(--text-main);
      background: radial-gradient(circle at top left,rgba(148,163,184,0.22),rgba(10,10,10,0.98));
    }
    .btn-ghost:hover {
      border-color: rgba(248,250,252,0.9);
      background: rgba(10,10,10,0.98);
      transform:translateY(-1px);
      color: #fff;
    }

    .badge-soft {
      background: linear-gradient(to right,rgba(248,113,113,0.26),rgba(248,113,113,0.1));
      border-radius:999px;
      padding:0.25rem 0.9rem;
      border:1px solid rgba(248,113,113,0.9);
      color:#fee2e2;
      font-size:0.75rem;
      letter-spacing:0.1em;
      text-transform:uppercase;
    }

    .bg-transparent::placeholder {
    color: #888888
    }
    .form-label.text-secondary {
      color: rgb(249, 250, 251)!important;
    }
    .girisbutton a:hover {color: #fff}
    #hero { padding-top:7rem; padding-bottom:8.5rem; }
    .hero-title {
      font-size: clamp(2.7rem,4vw,3.6rem);
      font-weight:700;
      letter-spacing:-0.04em;
    }
    .hero-gradient {
      background: linear-gradient(135deg,#fca5a5,#f87171,#b91c1c);
      -webkit-background-clip:text;
      color:transparent;
    }

    .hero-panel-preview {
      border-radius:1.7rem;
      border:1px solid rgba(31,41,55,0.95);
      background: radial-gradient(circle at top left,rgba(248,113,113,0.26),rgba(10,10,10,0.98));
      box-shadow:0 32px 88px rgba(0,0,0,0.96),0 0 0 1px rgba(15,23,42,0.95);
      padding:1.25rem;
      position:relative;
      overflow:hidden;
      transform-origin:center;
      transition:transform 0.25s ease-out, box-shadow 0.25s ease-out;
      animation: floatPanel 10s ease-in-out infinite alternate;
    }
    .hero-panel-preview:hover {
      transform:translateY(-4px) scale(1.01);
      box-shadow:0 40px 110px rgba(0,0,0,0.98),0 0 0 1px rgba(248,113,113,1);
    }
    .hero-panel-bar {
      height:12px;
      border-radius:99px;
      background:linear-gradient(to right,rgba(75,85,99,0.9),rgba(17,24,39,1));
      margin-bottom:1rem;
      display:flex;
      align-items:center;
      gap:0.35rem;
      padding:0 0.4rem;
    }
    .hero-dot {
      width:7px;height:7px;border-radius:50%;
      background:rgba(248,113,113,0.95);
      box-shadow:0 0 16px rgba(248,113,113,0.9);
    }

    .hero-card {
      border-radius:1.1rem;
      border:1px solid rgba(55,65,81,0.98);
      background:radial-gradient(circle at top,rgba(15,23,42,0.78),#020617);
      padding:1rem;
      margin-bottom:0.75rem;
      transition:transform 0.2s ease-out, box-shadow 0.2s ease-out, border-color 0.2s ease-out;
    }
    .hero-card:hover {
      transform:translateY(-2px);
      border-color:rgba(248,113,113,0.9);
      box-shadow:0 0 26px rgba(15,23,42,0.9);
    }

    .hero-chart-title {
      font-size:0.8rem;
      letter-spacing:0.16em;
      color:var(--text-muted);
    }

    .stage-legend {
      display:flex;
      flex-wrap:wrap;
      gap:0.35rem;
      justify-content:flex-end;
    }
    .stage-pill {
      display:inline-flex;
      align-items:center;
      gap:0.35rem;
      padding:0.15rem 0.6rem;
      border-radius:999px;
      font-size:0.72rem;
      background:rgba(15,15,15,0.96);
      border:1px solid rgba(148,163,184,0.5);
      color:#e5e7eb;
    }
    .stage-dot { width:8px;height:8px;border-radius:50%; }
    .stage-dot.stage1 {
      background:#f87171;
      box-shadow:0 0 8px rgba(248,113,113,0.95);
    }
    .stage-dot.stage2 {
      background:#b91c1c;
      box-shadow:0 0 8px rgba(185,28,28,0.98);
    }
    .stage-dot.stock {
      background:#9ca3af;
      box-shadow:0 0 8px rgba(148,163,184,0.9);
    }

    .ecu-chart {
      margin-top:0.6rem;
      border-radius:0.9rem;
      overflow:hidden;
      border:1px solid rgba(55,65,81,0.95);
      background:radial-gradient(circle at top,rgba(15,23,42,0.96),#020617);
      position:relative;
    }
    .ecu-chart svg { display:block;width:100%;height:auto; }

    /* ECU eğrisi animasyonu */
    .ecu-curve {
      transform-origin:center;
      transform-box:fill-box;
      animation: ecuCurvePulse 3.5s ease-in-out infinite;
    }
    .ecu-curve.stage2 {
      animation-duration: 4.1s;
      animation-delay: .2s;
    }
    .ecu-curve.stock {
      animation-duration: 4.3s;
      animation-delay: .4s;
    }

    /* Stage kutuları */
    .stage-info-row {
      display:flex;
      gap:1.2rem;
      flex-wrap:wrap;
      margin-top:1.4rem;
    }
    .stage-box {
      flex:1 1 260px;
      background:rgba(15,15,15,0.7);
      border:1px solid rgba(248,113,113,0.35);
      border-radius:1rem;
      padding:9px;
      backdrop-filter: blur(14px);
      box-shadow:0 0 22px rgba(248,113,113,0.07);
      transition:all 0.25s ease-out;
      min-height: 107px;
    }
    .stage-box:hover {
      transform:translateY(-4px);
      box-shadow:0 0 48px rgba(248,113,113,0.3);
      border-color:rgba(248,113,113,0.9);
    }
    .stage-box h5 {
      margin-bottom:.8rem;
      display:flex;
      align-items:center;
      gap:.5rem;
      font-weight:600;
    }
    .stage-bullet {
      width:10px;
      height:10px;
      border-radius:50%;
      display:inline-block;
    }
    .stage-bullet.stage1 { background:#f87171; box-shadow:0 0 6px #f87171; }
    .stage-bullet.stage2 { background:#b91c1c; box-shadow:0 0 6px #b91c1c; }
    .stage-box ul {
      list-style:none;
      padding:0;
      margin:0;
    }
    .stage-box ul li {
      color:#cbd5e1;
      font-size:.9rem;
      margin-bottom:.35rem;
    }
    .form-check-label {
      color: #989898;
    }
    .car-glow {
      position:absolute;
      inset:auto 5% -2%;
      height:120px;
      background:radial-gradient(circle at center,rgba(248,113,113,0.4),transparent 75%);
      filter:blur(12px);
      z-index:-1;
    }

    section { padding-block:4.5rem; }

    .section-label {
      font-size:0.72rem;
      letter-spacing:0.16em;
      text-transform:uppercase;
      color:var(--text-muted);
    }
    .section-title {
      font-size:1.9rem;
      font-weight:600;
      letter-spacing:-0.03em;
    }

    .card-glass {
      background:radial-gradient(circle at top left,rgba(248,113,113,0.26),rgba(10,10,10,0.98));
      border-radius:1.25rem;
      border:1px solid rgba(248,113,113,0.6);
      padding:1.6rem;
      position:relative;
      overflow:hidden;
      transition:transform 0.25s ease-out, box-shadow 0.25s ease-out, border-color 0.25s ease-out;
    }
    .card-glass:hover::before { opacity:1; }
    .card-glass:hover {
      transform:translateY(-4px);
      box-shadow:0 26px 54px rgba(0,0,0,0.86);
      border-color:rgba(252,165,165,1);
    }

    .icon-circle {
      width:40px;height:40px;border-radius:999px;
      display:inline-flex;align-items:center;justify-content:center;
      background:radial-gradient(circle at top left,rgba(248,113,113,0.38),rgba(10,10,10,1));
      border:1px solid rgba(248,113,113,0.8);
      font-size:1.1rem;color:#fecaca;
      box-shadow:0 0 18px rgba(248,113,113,0.9);
      animation:pulseIcon 2.6s ease-in-out infinite;
    }

    .screenshot-frame {
      border-radius:1.25rem;
      border:1px solid rgba(75,85,99,0.95);
      padding:0.4rem;
      background:radial-gradient(circle at top,rgba(15,23,42,0.8),rgba(0,0,0,1));
      overflow:hidden;
      transition:transform 0.22s ease-out, box-shadow 0.22s ease-out, border-color 0.22s ease-out;
    }
    .screenshot-frame img {
      border-radius:1rem;
      width:100%;
      height:220px;
      object-fit:cover;
      display:block;
      filter:saturate(1.25) contrast(1.12);
      transition:transform 0.4s ease-out, filter 0.25s ease-out;
    }
    .screenshot-frame:hover {
      transform:translateY(-4px);
      border-color:rgba(248,113,113,1);
      box-shadow:0 0 38px rgba(15,23,42,0.98);
    }
    .screenshot-frame:hover img {
      transform:scale(1.06);
      filter:saturate(1.45) contrast(1.18);
    }

    .screenshot-tag {
      border-radius:999px;
      border:1px solid rgba(148,163,184,0.6);
      padding:0.2rem 0.75rem;
      font-size:0.72rem;
      color:var(--text-muted);
    }

    .pricing-toggle {
      border-radius:999px;
      background:rgba(10,10,10,0.98);
      border:1px solid rgba(248,113,113,0.7);
      padding:0.25rem;
      display:inline-flex;
      gap:0.25rem;
    }
    .pricing-toggle button {
      border-radius:999px;
      border:none;
      background:transparent;
      color:var(--text-muted);
      font-size:0.8rem;
      padding:0.35rem 0.85rem;
      transition:background 0.18s ease-out,color 0.18s ease-out;
    }
    .pricing-toggle button.active {
      background:linear-gradient(135deg,rgba(239,68,68,0.98),rgba(185,28,28,0.98));
      color:white;
    }

    .pricing-card {
      background:radial-gradient(circle at top left,rgba(127,29,29,0.38),rgba(7,7,7,0.98));
      border-radius:1.4rem;
      border:1px solid rgba(248,113,113,0.8);
      padding:2rem 1.7rem;
      height:100%;
      transition:transform 0.25s ease-out, box-shadow 0.25s ease-out, border-color 0.25s ease-out;
    }
    .pricing-card.featured {
      box-shadow:var(--glow-red);
      border-color:rgba(248,113,113,1);
      transform:translateY(-6px);
      position:relative;
    }
    .pricing-card:hover {
      transform:translateY(-4px);
      border-color:rgba(252,165,165,1);
      box-shadow:0 28px 64px rgba(0,0,0,0.95);
    }

    .price-value { font-size:2.2rem;font-weight:600; }
    .price-unit { font-size:0.8rem;color:var(--text-muted); }
    .price-badge {
      font-size:0.75rem;
      border-radius:999px;
      padding:0.25rem 0.75rem;
      background:rgba(248,113,113,0.18);
      border:1px solid rgba(248,113,113,0.9);
      color:#fecaca;
    }

    .feature-list {
      list-style:none;
      padding-left:0;
      margin:1.25rem 0 0;
      font-size:0.88rem;
    }
    .feature-list li {
      display:flex;
      gap:0.5rem;
      margin-bottom:0.4rem;
      color:var(--text-muted);
    }
    .feature-list i {
      color:#22c55e;
      margin-top:0.1rem;
      font-size:0.9rem;
    }

    .faq-item {
      border-bottom:1px solid rgba(31,41,55,0.98);
      padding-block:1.1rem;
    }
    .faq-question { font-size:0.95rem; }
    .faq-answer {
      font-size:0.88rem;
      color:var(--text-muted);
      margin-top:0.35rem;
    }

    footer {
      border-top:1px solid rgba(31,41,55,0.98);
      padding-block:2rem;
      font-size:0.85rem;
      color:var(--text-muted);
      background:#020617;
      position: absolute;
      left: 0;
      width: 100%;
    }

    .offcanvas-dark {
      background:#050505;
      color:var(--text-main);
      border-left:1px solid rgba(248,113,113,0.7);
    }
    .offcanvas-dark .nav-link {
      font-size:0.9rem;
      padding-left:0;
    }

    .navbar-toggler { border:none; }
    .navbar-toggler-icon {
      background-image:none;
      width:1.4rem;height:1.4rem;position:relative;
    }
    .navbar-toggler-icon::before,
    .navbar-toggler-icon::after {
      content:"";
      position:absolute;
      left:0;right:0;
      height:2px;border-radius:999px;
      background:#fecaca;
      box-shadow:0 0 10px rgba(248,113,113,0.9);
    }
    .navbar-toggler-icon::before { top:4px; }
    .navbar-toggler-icon::after { bottom:4px; }

    .reveal {
      opacity:0;
      transform:translateY(18px);
      transition:opacity 0.5s ease-out, transform 0.5s ease-out;
    }
    .reveal.visible {
      opacity:1;
      transform:translateY(0);
    }

    .segment-strip {
      border-radius:999px;
      border:1px solid rgba(148,163,184,0.6);
      background:radial-gradient(circle at top,rgba(15,23,42,0.95),rgba(0,0,0,1));
      padding:0.7rem 1rem;
      display:flex;
      flex-wrap:wrap;
      gap:0.8rem;
      align-items:center;
      justify-content:center;
      margin-top:1.8rem;
      font-size:0.8rem;
    }
    .segment-pill {
      display:inline-flex;
      align-items:center;
      gap:0.35rem;
      padding:0.35rem 0.7rem;
      border-radius:999px;
      border:1px solid rgba(148,163,184,0.5);
      color:#e5e7eb;
    }

    /* NASIL KULLANILIR – başlık pill (mavi yerine kırmızı/dark) */
    .how-title-pill {
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding:0.45rem 1.6rem;
      border-radius:999px;
      background:linear-gradient(135deg,#ef4444,#b91c1c);
      border:1px solid rgba(248,113,113,0.95);
      box-shadow:0 0 26px rgba(248,113,113,0.8);
      font-size:1.02rem;
      min-width:260px;
      min-height:44px;
    }

    /* NASIL KULLANILIR – adım kartları */
    .how-steps-row {
      display:flex;
      flex-wrap:wrap;
      gap:1.5rem;
      justify-content:center;
      align-items:stretch;
    }
    .how-step-card {
      flex:1 1 230px;
      max-width:100%;
      background:radial-gradient(circle at top left,rgba(24,24,27,0.96),rgba(15,23,42,0.96));
      border-radius:1.4rem;
      border:1px solid rgba(248,113,113,0.5);
      padding:1.6rem 0.4rem 1.9rem;
      position:relative;
      box-shadow:0 18px 40px rgba(0,0,0,0.9);
      transition:transform 0.22s ease-out, box-shadow 0.22s ease-out, border-color 0.22s ease-out;
      overflow:hidden;
      min-height:220px;      /* hepsi benzer yükseklik */
      display:flex;
      flex-direction:column;
      justify-content:flex-start;
    }
    .how-step-card::before {
      content:"";
      position:absolute;
      inset:-40%;
      background:radial-gradient(circle at top,rgba(248,113,113,0.2),transparent 55%);
      opacity:0;
      transition:opacity 0.25s ease-out;
    }
    .how-step-card:hover {
      transform:translateY(-6px);
      border-color:rgba(248,113,113,0.9);
      box-shadow:0 26px 60px rgba(0,0,0,0.95);
    }
    .how-step-card:hover::before { opacity:1; }

    .how-step-icon {
   font-size: 3.6rem;
    color: #ff8181;
    text-align: center;
    margin-bottom: -0.4rem;
    font-weight: 400 !important;

    }
  .how-step-title {
    font-weight: 600;
    margin-bottom: .4rem;
    text-align: center;
    font-size: 21px;
}
    .how-step-text {
      font-size:.9rem;
      color:#cbd5e1;
      text-align:center;
    }
    .how-step-number {
      position:absolute;
      bottom:-22px;
      left:50%;
      transform:translateX(-50%);
      width:42px;
      height:42px;
      border-radius:999px;
      display:flex;
      align-items:center;
      justify-content:center;
      font-weight:600;
      background:radial-gradient(circle at top, #ef4444, #b91c1c);
      color:white;
      box-shadow:0 0 26px rgba(248,113,113,1);
      font-size:.9rem;
    }
    .how-step-card.done .how-step-number {
      background:radial-gradient(circle at top, #fb923c, #ea580c);
      box-shadow:0 0 26px rgba(251,146,60,0.95);
    }
    .how-step-card.done .how-step-number i {
      font-size:1rem;
    }
    .form-control {
      padding: 0.75rem .5rem;
    }
    span.form-label-description a {
    color: #989898;
    text-decoration: none;
}

span.form-label-description a:hover {
    text-decoration: underline;
}

.input-group-text {
    background: transparent;
    border-color: rgb(108,117,125);
}
.form-control:focus {
      border-color: #b91c1c;
}
.form-control::placeholder {
    color: #646464;
}
.input-icon {
    position: relative;
}
.input-icon-addon {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    color: var(--tblr-icon-color);
    pointer-events: none;
    font-size: 1.2em;
}

.input-icon.sifreinput input {
    padding-left: 40px;
}

    /* zig-zag yerleşim: 1 ve 3 üstte, 2 ve 4 aşağıda */
    @media (min-width: 768px) {
      .how-step-card:nth-child(2),
      .how-step-card:nth-child(4) {
        position: relative;
        top: 66px;
      }
    }

    /* Animations */
    @keyframes floatPanel {
      0% { transform:translateY(0); }
      100% { transform:translateY(-6px); }
    }
    @keyframes pulseIcon {
      0% { box-shadow:0 0 10px rgba(248,113,113,0.6); transform:scale(1); }
      50%{ box-shadow:0 0 22px rgba(248,113,113,1); transform:scale(1.06); }
      100%{ box-shadow:0 0 10px rgba(248,113,113,0.6); transform:scale(1); }
    }
    @keyframes ecuCurvePulse {
      0%   { transform:scaleY(1);   filter:drop-shadow(0 0 0 rgba(248,113,113,0)); }
      50%  { transform:scaleY(1.04); filter:drop-shadow(0 0 10px rgba(248,113,113,0.9)); }
      100% { transform:scaleY(1);   filter:drop-shadow(0 0 0 rgba(248,113,113,0)); }
    }
    
    @media (max-width: 580px) {
      .g-5 {--bs-gutter-x: 0rem;}
     }

    @media (max-width: 992px) {
      .pricing-card.featured { transform:none; }
      #hero { padding-top:6.2rem; }
    }