:root {
      --bg-dark: #050814;
      --primary: #3b82f6;
      --accent: #22c55e;
      --accent2: #eab308;
      --danger: #f97373;
      --text-main: #f9fafb;
      --text-soft: #94a3b8;
      --card-bg: #070b1b;
      --border-soft: #1e293b;
      --radius-lg: 18px;
      --intro-duration: 4000ms; /* fallback */
    }

    /* Light tema override */
    body.theme-light {
      --bg-dark: #f3f4f6;
      --text-main: #020617;
      --text-soft: #4b5563;
      --card-bg: #ffffff;
      --border-soft: #e5e7eb;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    body {
      background: radial-gradient(circle at top, #0b1120, #020617);
      color: var(--text-main);
      line-height: 1.6;
      overflow-x: hidden;
      position: relative;
    }

    a { color: inherit; text-decoration: none; }

    .wrapper {
      max-width: 1180px;
      margin: 0 auto;
      padding: 0 1.6rem;
    }

    /* 🔵 NEON CURSOR TRAIL */

    .cursor-dot {
      position: fixed;
      width: 10px;
      height: 10px;
      border-radius: 999px;
      pointer-events: none;
      z-index: 9998;
      background: radial-gradient(circle, #f9fafb 0, #60a5fa 40%, transparent 70%);
      box-shadow:
        0 0 12px rgba(59,130,246,0.9),
        0 0 24px rgba(59,130,246,0.6);
      transform: translate(-50%, -50%);
      animation: cursorFade 0.7s linear forwards;
      mix-blend-mode: screen;
    }

    @keyframes cursorFade {
      0% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
      100% { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
    }

    /* ARKA PLAN VIDEO + SHADER CANVAS + GRID */

    .bg-video {
      position: fixed;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      filter: blur(8px) brightness(0.35) saturate(1.4);
      opacity: 0.55;
      z-index: -4;
      pointer-events: none;
    }

    /* Şeffaf shader/partikül canvas */
    #bg-particles {
      position: fixed;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: -3;
      pointer-events: none;
      opacity: 0.35;
    }

    body::before {
      content: "";
      position: fixed;
      inset: -40%;
      background-image:
        linear-gradient(90deg, rgba(148,163,184,0.16) 1px, transparent 1px),
        linear-gradient(180deg, rgba(148,163,184,0.12) 1px, transparent 1px);
      background-size: 70px 70px;
      opacity: 0.12;
      z-index: -2;
      animation: gridMove 40s linear infinite;
    }

    @keyframes gridMove {
      0% { transform: translate3d(0,0,0); }
      100% { transform: translate3d(-80px,-80px,0); }
    }

    .blob {
      position: fixed;
      width: 260px;
      height: 260px;
      border-radius: 999px;
      filter: blur(40px);
      opacity: 0.4;
      z-index: -1;
      pointer-events: none;
    }
    .blob.b1 { top: -40px; left: -60px; background:#2563eb; animation: blobDrift1 40s linear infinite alternate; }
    .blob.b2 { bottom:-60px; right:-40px; background:#22c55e; animation: blobDrift2 50s linear infinite alternate; }
    .blob.b3 { top:45%; right:20%; background:#eab308; animation: blobDrift3 46s linear infinite alternate; }

    @keyframes blobDrift1 { 0%{transform:translate3d(0,0,0);} 100%{transform:translate3d(40px,50px,0);} }
    @keyframes blobDrift2 { 0%{transform:translate3d(0,0,0);} 100%{transform:translate3d(-30px,-40px,0);} }
    @keyframes blobDrift3 { 0%{transform:translate3d(0,0,0);} 100%{transform:translate3d(20px,-20px,0);} }

    /* INTRO OVERLAY */

    .intro-overlay {
      position: fixed;
      inset: 0;
      z-index: 9999;
      background:
        radial-gradient(circle at top, #020617 0, #020617 30%, #020617 60%, #020617 100%),
        radial-gradient(circle at top, rgba(37,99,235,0.8), transparent 55%);
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      animation: introGridMove 16s linear infinite;
    }

    .intro-overlay::before {
      content: "";
      position: absolute;
      inset: -20%;
      background-image:
        linear-gradient(90deg, rgba(148,163,184,0.18) 1px, transparent 1px),
        linear-gradient(180deg, rgba(148,163,184,0.18) 1px, transparent 1px);
      background-size: 70px 70px;
      opacity: 0.18;
      mix-blend-mode: screen;
    }

    .intro-overlay.hide {
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.9s ease;
    }

    .intro-inner {
      position: relative;
      text-align: center;
      padding: 2rem 1.5rem;
    }

    .intro-chip-ring {
      position: absolute;
      border-radius: 999px;
      border: 1px dashed rgba(59,130,246,0.6);
      opacity: 0.4;
      animation: introRingSpin 16s linear infinite;
      box-shadow: 0 0 30px rgba(59,130,246,0.5);
    }
    .intro-chip-ring.ring1 { inset:-50px; animation-duration:12s; }
    .intro-chip-ring.ring2 { inset:-90px; border-color:rgba(34,197,94,0.6); animation-duration:20s; animation-direction:reverse; opacity:0.35; }
    .intro-chip-ring.ring3 { inset:-130px; border-color:rgba(234,179,8,0.6); animation-duration:26s; opacity:0.3; }

    .intro-chip-ring.ring1::before,
    .intro-chip-ring.ring1::after {
      content:"";
      position:absolute;
      width:16px; height:16px;
      border-radius:999px;
      background:var(--accent);
      box-shadow:0 0 24px rgba(34,197,94,0.9);
    }
    .intro-chip-ring.ring1::before { top:-8px; left:22%; }
    .intro-chip-ring.ring1::after  { bottom:-8px; right:18%; }

    .intro-text-main {
      font-size: clamp(2.5rem, 5vw, 3.5rem);
      letter-spacing: 0.35em;
      text-indent: 0.35em;
      text-transform: uppercase;
      font-weight: 800;
      color: #e5f3ff;
      text-shadow: 0 0 18px rgba(37,99,235,1), 0 0 32px rgba(37,99,235,0.8);
      animation: introTextPulse 2.6s ease-in-out infinite,
                 introTextGlitch 1.8s steps(2, end) infinite;
      position: relative;
    }

    .intro-text-main::before,
    .intro-text-main::after {
      content: "AFACAN BİLİŞİM";
      position: absolute;
      inset: 0;
      letter-spacing: inherit;
      text-indent: inherit;
      text-transform: inherit;
      font-weight: inherit;
      mix-blend-mode: screen;
      opacity: 0.5;
    }
    .intro-text-main::before { color:#22c55e; transform:translate(-2px,1px); clip-path:inset(0 0 50% 0); }
    .intro-text-main::after  { color:#3b82f6; transform:translate(2px,-1px); clip-path:inset(50% 0 0 0); }

    .intro-sub {
      margin-top: 1rem;
      font-size: 0.9rem;
      color: var(--text-soft);
      text-transform: uppercase;
      letter-spacing: 0.22em;
      opacity: 0.85;
      animation: introSubFade 3s ease-in-out infinite;
    }

    .intro-progress {
      margin-top: 1.4rem;
      width: 220px;
      height: 3px;
      border-radius: 999px;
      background: rgba(15,23,42,0.9);
      overflow: hidden;
      margin-inline: auto;
      box-shadow: 0 0 16px rgba(15,23,42,0.9);
    }
    .intro-progress-bar {
      width: 0;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, var(--primary), var(--accent2), var(--accent));
      animation: introProgressFill var(--intro-duration) linear forwards;
    }

    .intro-skip-btn {
      position: absolute;
      right: 1.5rem;
      bottom: 1.5rem;
      padding: 0.4rem 0.9rem;
      border-radius: 999px;
      border: 1px solid rgba(148,163,184,0.9);
      background: rgba(15,23,42,0.9);
      color: #e5f3ff;
      font-size: 0.78rem;
      text-transform: uppercase;
      letter-spacing: 0.16em;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      box-shadow: 0 0 18px rgba(15,23,42,0.9);
    }
    .intro-skip-btn span { font-size:0.8rem; color:var(--accent2); }
    .intro-skip-btn:hover {
      border-color: var(--primary);
      box-shadow: 0 0 16px rgba(59,130,246,0.8), 0 0 24px rgba(15,23,42,0.9);
    }

    @keyframes introGridMove { 0%{background-position:0 0,0 0;} 100%{background-position:-140px -140px,0 0;} }
    @keyframes introRingSpin { 0%{transform:rotate(0);} 100%{transform:rotate(360deg);} }
    @keyframes introTextPulse { 0%,100%{transform:scale(1);opacity:1;} 50%{transform:scale(1.06);opacity:0.9;} }
    @keyframes introTextGlitch {
      0%{clip-path:inset(0 0 0 0);}
      20%{clip-path:inset(0 0 0 0);}
      21%{clip-path:inset(0 0 40% 0);transform:translate(1px,-1px);}
      22%{clip-path:inset(60% 0 0 0);transform:translate(-1px,1px);}
      23%{clip-path:inset(0 0 0 0);transform:translate(0,0);}
      40%{clip-path:inset(0 0 0 0);}
      41%{clip-path:inset(10% 0 40% 0);transform:translate(-1px,0);}
      42%{clip-path:inset(0 0 0 0);transform:translate(0,0);}
      100%{clip-path:inset(0 0 0 0);}
    }
    @keyframes introSubFade { 0%,100%{opacity:0.6;} 50%{opacity:1;} }
    @keyframes introProgressFill { from{width:0;} to{width:100%;} }

    /* HEADER + TEMA TOGGLE */

    header {
      position: sticky;
      top: 0;
      z-index: 40;
      backdrop-filter: blur(18px);
      background: rgba(5,8,20,0.92);
      border-bottom: 1px solid rgba(30,64,175,0.5);
    }
    body.theme-light header {
      background: rgba(243,244,246,0.92);
      border-bottom-color: rgba(148,163,184,0.6);
    }

    .nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0.7rem 0;
      gap: 1rem;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 0.6rem;
    }

    .brand-logo {
      width: 34px;
      height: 34px;
      border-radius: 11px;
      border: 2px solid rgba(56,189,248,0.9);
      box-shadow: 0 0 16px rgba(59,130,246,0.7), inset 0 0 10px rgba(15,23,42,0.9);
      position: relative;
      overflow: hidden;
      background:
        repeating-linear-gradient(45deg, rgba(59,130,246,0.2) 0, rgba(59,130,246,0.2) 4px, transparent 4px, transparent 8px);
      animation: logoScan 10s linear infinite;
    }
    .brand-logo::before {
      content: "A";
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 800;
      font-size: 1.1rem;
      color: #e5f3ff;
      text-shadow: 0 0 10px rgba(15,23,42,0.9);
    }
    @keyframes logoScan { 0%{background-position:0 0;} 100%{background-position:40px 40px;} }

    .brand-text-main {
      font-weight: 700;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      font-size: 0.8rem;
      cursor: default;
    }

    .brand-text-sub {
      font-size: 0.7rem;
      color: var(--text-soft);
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 1.1rem;
      font-size: 0.9rem;
    }

    .nav-links a {
      position: relative;
      color: var(--text-soft);
      padding-bottom: 3px;
    }
    .nav-links a:hover { color: var(--text-main); }
    .nav-links a::after {
      content:"";
      position:absolute;
      left:0; bottom:0;
      width:0; height:2px;
      border-radius:999px;
      background: linear-gradient(90deg, var(--primary), var(--accent));
      transition: width 0.2s ease;
    }
    .nav-links a:hover::after { width:100%; }

    .btn-nav {
      border-radius: 999px;
      padding: 0.45rem 1.05rem;
      border: 1px solid rgba(148,163,184,0.7);
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      font-size: 0.85rem;
      background: radial-gradient(circle at top left, rgba(37,99,235,0.35), transparent 55%);
      box-shadow: 0 0 18px rgba(37,99,235,0.35);
      color: #e5f3ff;
    }
    .btn-nav span { font-size:0.9rem; color:var(--accent2); }

    .theme-toggle {
      width: 32px;
      height: 32px;
      border-radius: 999px;
      border: 1px solid rgba(148,163,184,0.8);
      background: rgba(15,23,42,0.9);
      color: #e5f3ff;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 0.9rem;
      box-shadow: 0 0 14px rgba(37,99,235,0.6);
    }
    body.theme-light .theme-toggle {
      background: #f9fafb;
      color: #020617;
      box-shadow: 0 0 10px rgba(148,163,184,0.8);
    }

    /* HERO */

    .hero {
      padding: 3.5rem 0 3.9rem;
      position: relative;
      overflow: hidden;
    }

    .hero-inner {
      display: grid;
      grid-template-columns: minmax(0,1.05fr) minmax(0,0.95fr);
      gap: 2.8rem;
      align-items: stretch;
    }

    .hero-badge {
      display: inline-flex;
      align-items: center;
      gap: 0.45rem;
      padding: 0.25rem 0.8rem;
      border-radius: 999px;
      border: 1px solid rgba(148,163,184,0.6);
      background: rgba(15,23,42,0.8);
      font-size: 0.75rem;
      color: var(--text-soft);
      margin-bottom: 1rem;
    }
    body.theme-light .hero-badge {
      background: rgba(248,250,252,0.9);
    }

    .hero-badge span.dot {
      width: 7px; height:7px;
      border-radius:999px;
      background: var(--accent);
      box-shadow:0 0 12px rgba(34,197,94,0.9);
    }

    .hero-title {
      font-size: clamp(2.2rem, 3.2vw + 1.1rem, 3.1rem);
      line-height: 1.05;
      margin-bottom: 0.7rem;
    }

    /* Hover text glitch */
    .glitch-hover {
      position: relative;
      display: inline-block;
    }
    .glitch-hover::before,
    .glitch-hover::after {
      content: attr(data-text);
      position: absolute;
      inset: 0;
      opacity: 0;
      mix-blend-mode: screen;
      pointer-events: none;
    }
    .glitch-hover::before { color:#22c55e; transform: translate(-2px,0); }
    .glitch-hover::after  { color:#3b82f6; transform: translate(2px,0); }
    .glitch-hover:hover::before,
    .glitch-hover:hover::after {
      opacity: 0.8;
      animation: glitchHover 0.5s steps(2,end);
    }

    @keyframes glitchHover {
      0% { clip-path: inset(0 0 0 0); }
      30% { clip-path: inset(0 0 60% 0); }
      60% { clip-path: inset(40% 0 0 0); }
      100% { clip-path: inset(0 0 0 0); }
    }

    .hero-title span.highlight {
  background: linear-gradient(
    90deg,
    var(--primary),
    var(--accent),
    var(--accent2)
  );
  background-size: 200% 200%;

  -webkit-background-clip: text;
  background-clip: text;

  -webkit-text-fill-color: transparent; /* 🔑 KRİTİK SATIR */
  color: transparent;

  display: inline-block; /* 🔑 animasyon stabilitesi */
  animation: gradientTextShift 16s ease-in-out infinite;
}

    @keyframes gradientTextShift {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }

    .hero-dynamic {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      font-size: 0.92rem;
      margin-bottom: 1rem;
      color: var(--text-soft);
    }

    .hero-dynamic-label {
      text-transform: uppercase;
      letter-spacing: 0.16em;
      font-size: 0.7rem;
    }

    .hero-dynamic-word {
  background: linear-gradient(
    90deg,
    var(--accent),
    var(--primary)
  );
  background-size: 200% 200%;

  -webkit-background-clip: text;
  background-clip: text;

  -webkit-text-fill-color: transparent; /* 🔑 ŞART */
  color: transparent;

  font-weight: 700;
  display: inline-block; /* 🔑 animasyon için şart */

  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

    .hero-dynamic-word.show { opacity:1; transform:translateY(0); }

    .hero-text {
      font-size: 0.98rem;
      max-width: 520px;
      color: var(--text-soft);
      margin-bottom: 1.4rem;
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 0.9rem;
      margin-bottom: 1.3rem;
    }

    .btn {
      border-radius: 999px;
      padding: 0.75rem 1.5rem;
      font-size: 0.95rem;
      border: none;
      cursor: pointer;
      font-weight: 500;
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      position: relative;
      overflow: hidden;
      z-index: 0;
    }

    .btn-primary {
      color: #020617;
      background: linear-gradient(135deg, var(--primary), var(--accent));
      box-shadow: 0 0 18px rgba(37,99,235,0.6), 0 0 26px rgba(34,197,94,0.4);
    }

    .btn-primary::after {
      content: "";
      position: absolute;
      inset: -40%;
      background: radial-gradient(circle at 0 0, rgba(255,255,255,0.7), transparent 55%);
      opacity: 0;
      transform: translateX(-40%);
      transition: opacity 0.3s ease, transform 0.3s ease;
    }
    .btn-primary:hover::after { opacity:1; transform:translateX(0); }

    .btn-outline {
      background: rgba(15,23,42,0.85);
      border: 1px solid rgba(148,163,184,0.9);
      color: var(--text-main);
    }
    body.theme-light .btn-outline {
      background: #f9fafb;
      border-color: #d1d5db;
    }
    .btn-outline:hover {
      border-color: var(--primary);
      box-shadow: 0 0 16px rgba(37,99,235,0.5);
    }

    .hero-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 1.2rem;
      font-size: 0.8rem;
      color: var(--text-soft);
    }
    .hero-meta span {
      display:inline-flex;
      align-items:center;
      gap:0.3rem;
    }
    .hero-meta span::before {
      content:"";
      width:6px; height:6px;
      border-radius:999px;
      background:var(--accent2);
    }

    .hero-visual-wrap {
      position: relative;
      perspective: 900px;
      transition: transform 0.1s linear;
    }

    .hero-visual {
      position: relative;
      min-height: 500px;
      transform-style: preserve-3d;
    }

    .data-ring {
      position: absolute;
      border-radius: 999px;
      border: 1px dashed rgba(148,163,184,0.5);
      opacity: 0.6;
      animation: ringSpin 30s linear infinite;
      box-shadow: 0 0 25px rgba(59,130,246,0.4);
    }
    .data-ring.dr1 { inset:8% 0; animation-duration:28s; }
    .data-ring.dr2 { inset:0 18%; animation-duration:40s; animation-direction:reverse; opacity:0.4; }
    .data-ring.dr3 { inset:18% 10%; animation-duration:34s; transform:rotate(10deg); opacity:0.3; }

    .data-ring.dr1::before,
    .data-ring.dr1::after {
      content:"";
      position:absolute;
      width:10px; height:10px;
      border-radius:999px;
      background:var(--primary);
      box-shadow:0 0 14px rgba(59,130,246,0.9);
    }
    .data-ring.dr1::before { top:-5px; left:24%; }
    .data-ring.dr1::after {
      bottom:-6px; right:18%;
      background:var(--accent);
      box-shadow:0 0 14px rgba(34,197,94,0.9);
    }

    @keyframes ringSpin { 0%{transform:rotate(0);} 100%{transform:rotate(360deg);} }

    .data-card {
      position: absolute;
      inset: 16% 8%;
      border-radius: 20px;
      background:
        radial-gradient(circle at 20% 20%, rgba(59,130,246,0.45), transparent 60%),
        radial-gradient(circle at 80% 80%, rgba(34,197,94,0.35), transparent 60%),
        var(--card-bg);
      border: 1px solid var(--border-soft);
      box-shadow: 0 0 34px rgba(0,0,0,0.8), 0 0 22px rgba(59,130,246,0.5);
      padding: 1.3rem 1.2rem;
      display: flex;
      flex-direction: column;
      gap: 0.6rem;
      animation: floatCard 8s ease-in-out infinite alternate;
    }

    @keyframes floatCard {
      0% { transform: translate3d(0,0,0); }
      100% { transform: translate3d(6px,-10px,0); }
    }

    .data-card-header {
      display:flex;
      justify-content:space-between;
      align-items:center;
      font-size:0.8rem;
      color:var(--text-soft);
    }

    .pill {
      padding: 0.15rem 0.6rem;
      border-radius: 999px;
      border: 1px solid rgba(148,163,184,0.8);
      font-size: 0.68rem;
      text-transform: uppercase;
      letter-spacing: 0.12em;
    }

    /* 3D KÜP – SADE, KENDİ KENDİNE DÖNEN */

    .chip-3d-wrapper {
      margin-top: 0.8rem;
      margin-bottom: 0.4rem;
      display: flex;
      align-items: center;
      justify-content: center;
      perspective: 600px;
    }

    .cube {
      width: 60px;
      height: 60px;
      position: relative;
      transform-style: preserve-3d;
      cursor: default;
      animation: spinCube 8s linear infinite;
    }

    @keyframes spinCube {
      0%   { transform: rotateX(-15deg) rotateY(0deg); }
      50%  { transform: rotateX(15deg)  rotateY(180deg); }
      100% { transform: rotateX(-15deg) rotateY(360deg); }
    }

    .cube-face {
      position: absolute;
      inset: 0;
      border-radius: 10px;
      border: 1px solid rgba(148,163,184,0.8);
      background:
        radial-gradient(circle at 30% 20%, rgba(59,130,246,0.9), transparent 55%),
        radial-gradient(circle at 80% 80%, rgba(34,197,94,0.8), transparent 55%),
        #020617;
      box-shadow: 0 0 14px rgba(59,130,246,0.8), inset 0 0 10px rgba(15,23,42,0.95);
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:0.8rem;
      font-weight:600;
      color:#e5f3ff;
    }

    .cube-face.front  { transform: rotateY(0deg)   translateZ(30px); }
    .cube-face.back   { transform: rotateY(180deg) translateZ(30px); }
    .cube-face.right  { transform: rotateY(90deg)  translateZ(30px); }
    .cube-face.left   { transform: rotateY(-90deg) translateZ(30px); }
    .cube-face.top    { transform: rotateX(90deg)  translateZ(30px); }
    .cube-face.bottom { transform: rotateX(-90deg) translateZ(30px); }

    .chip-3d-caption {
      margin-top: 0.5rem;
      font-size: 0.75rem;
      color: var(--text-soft);
      text-align: center;
    }

    .data-footer {
      display:flex;
      justify-content:space-between;
      align-items:center;
      font-size:0.75rem;
      margin-top:0.8rem;
      color:var(--text-soft);
    }

    .data-legend {
      display:flex;
      gap:0.35rem;
      align-items:center;
      font-size:0.75rem;
    }

    .legend-dot {
      width:7px; height:7px;
      border-radius:999px;
      background:var(--accent);
      box-shadow:0 0 10px rgba(34,197,94,0.9);
    }

    .chip-float {
      position: absolute;
      width: 24px; height:24px;
      border-radius:7px;
      border:1px solid rgba(59,130,246,0.7);
      background:rgba(15,23,42,0.95);
      box-shadow:0 0 12px rgba(59,130,246,0.7), inset 0 0 8px rgba(30,64,175,0.7);
      opacity:0.25;
      animation: floatChip 18s linear infinite;
    }
    .chip-float::before {
      content:"";
      position:absolute;
      inset:6px;
      border-radius:4px;
      border:1px dashed rgba(59,130,246,0.7);
    }
    @keyframes floatChip {
      0%{transform:translate3d(0,60px,0);opacity:0;}
      15%{opacity:0.35;}
      80%{opacity:0.25;}
      100%{transform:translate3d(0,-220px,0);opacity:0;}
    }
    .chip-float.c1{left:4%;bottom:-60px;animation-duration:28s;}
    .chip-float.c2{left:15%;bottom:-80px;animation-duration:22s;}
    .chip-float.c3{left:72%;bottom:-70px;animation-duration:24s;}
    .chip-float.c4{left:88%;bottom:-90px;animation-duration:30s;}

    .reveal {
      opacity: 0;
      transform: translateY(35px);
      transition: opacity 0.6s ease, transform 0.6s ease;
    }
    .reveal.visible { opacity:1; transform:translateY(0); }

    section { position:relative; z-index:1; }
    .section { padding:3.1rem 0; }

    .section-header { margin-bottom:2rem; }
    .section-kicker {
      text-transform: uppercase;
      letter-spacing: 0.18em;
      font-size: 0.7rem;
      color: var(--accent2);
      margin-bottom: 0.4rem;
    }
    .section-title {
      font-size:1.6rem;
      margin-bottom:0.4rem;
    }

    .section-subtitle {
      font-size:0.9rem;
      color:var(--text-soft);
      max-width:520px;
    }

    /* ÖNE ÇIKANLAR */

    .feature-grid {
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:1.4rem;
    }

    .feature-card {
      background: radial-gradient(circle at top left, rgba(59,130,246,0.28), transparent 55%), var(--card-bg);
      border-radius: var(--radius-lg);
      border: 1px solid var(--border-soft);
      padding: 1.3rem 1.2rem;
      box-shadow: 0 16px 36px rgba(0,0,0,0.5);
      font-size: 0.9rem;
      display:flex;
      flex-direction:column;
      gap:0.6rem;
      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    }
    .feature-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 20px 50px rgba(15,23,42,0.9);
      border-color: rgba(59,130,246,0.8);
    }

    .feature-icon {
      width:28px;height:28px;
      border-radius:9px;
      background:rgba(15,23,42,0.9);
      display:inline-flex;
      align-items:center;
      justify-content:center;
      font-size:1rem;
      box-shadow:0 0 14px rgba(59,130,246,0.8);
    }

    .feature-title { font-size:1rem;font-weight:600; }
    .feature-text { font-size:0.85rem;color:var(--text-soft); }

    .tech-ticker {
      margin-top:2.6rem;
      border-radius:16px;
      border:1px solid var(--border-soft);
      background: radial-gradient(circle at top, rgba(15,23,42,0.9), rgba(15,23,42,0.86));
      overflow:hidden;
      position:relative;
    }
    .tech-ticker::before,
    .tech-ticker::after {
      content:"";
      position:absolute;
      top:0;width:40px;height:100%;
      z-index:2;
    }
    .tech-ticker::before{left:0;background:linear-gradient(90deg,var(--bg-dark),transparent);}
    .tech-ticker::after{right:0;background:linear-gradient(-90deg,var(--bg-dark),transparent);}

    .tech-track {
      display:flex;
      gap:2.3rem;
      padding:0.7rem 1.8rem;
      animation: techMove 26s linear infinite;
      white-space:nowrap;
    }
    @keyframes techMove {
      0%{transform:translateX(0);}
      100%{transform:translateX(-50%);}
    }
    .tech-item {
      font-size:0.82rem;
      text-transform:uppercase;
      letter-spacing:0.18em;
      color:var(--text-soft);
      display:inline-flex;
      align-items:center;
      gap:0.5rem;
    }
    .tech-pill {
      padding:0.1rem 0.6rem;
      border-radius:999px;
      font-size:0.7rem;
      border:1px solid rgba(148,163,184,0.9);
      color:var(--text-main);
    }

    /* HÄ°ZMETLER + MOCKUP ANÄ°MASYON */

    .services-grid {
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:1.4rem;
      margin-top:2.4rem;
    }

    .service-card {
      background:rgba(15,23,42,0.95);
      border-radius:var(--radius-lg);
      border:1px solid var(--border-soft);
      padding:1.4rem 1.2rem;
      box-shadow:0 18px 42px rgba(0,0,0,0.7);
      font-size:0.88rem;
      display:flex;
      flex-direction:column;
      gap:0.6rem;
    }
    body.theme-light .service-card { background:#ffffff; }

    .service-header-row {
      display:flex;
      justify-content:space-between;
      align-items:flex-start;
      gap:0.5rem;
    }

    .service-chip {
      font-size:0.72rem;
      text-transform:uppercase;
      letter-spacing:0.14em;
      color:var(--accent);
      margin-bottom:0.1rem;
    }
    .service-title { font-size:1rem;font-weight:600; }

    .service-icon {
      width:30px;height:30px;
      border-radius:10px;
      border:1px solid rgba(148,163,184,0.9);
      display:inline-flex;
      align-items:center;
      justify-content:center;
      font-size:1rem;
      box-shadow:0 0 14px rgba(59,130,246,0.8);
      background:radial-gradient(circle at top,rgba(59,130,246,0.7),transparent 60%),rgba(15,23,42,0.95);
    }
    .service-icon-ads { background:radial-gradient(circle at top,rgba(234,179,8,0.85),transparent 60%),rgba(15,23,42,0.95); }
    .service-icon-web { background:radial-gradient(circle at top,rgba(59,130,246,0.85),transparent 60%),rgba(15,23,42,0.95); }
    .service-icon-sec { background:radial-gradient(circle at top,rgba(34,197,94,0.85),transparent 60%),rgba(15,23,42,0.95); }

    .service-text { font-size:0.85rem;color:var(--text-soft); }

    .service-list { list-style:none;font-size:0.8rem;color:var(--text-soft);margin-top:0.4rem; }
    .service-list li { display:flex;gap:0.4rem;margin-bottom:0.25rem; }
    .service-dot {
      width:6px;height:6px;
      border-radius:999px;
      margin-top:0.25rem;
      background:var(--primary);
    }

    .service-mock-row {
      margin-top:0.6rem;
      display:flex;
      gap:0.5rem;
      align-items:flex-end;
      font-size:0.7rem;
      color:var(--text-soft);
    }
    
    /* Service card hover – sade ve kurumsal */
    .service-card {
      transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
    }
    
    /* Hover efekti */
    .service-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 22px 48px rgba(0,0,0,0.55);
      border-color: rgba(99,102,241,0.45);
    }



    .device-mock {
      border-radius:10px;
      border:1px solid rgba(148,163,184,0.7);
      background:radial-gradient(circle at 20% 10%,rgba(59,130,246,0.7),transparent 60%),rgba(15,23,42,0.96);
      box-shadow:0 10px 20px rgba(0,0,0,0.8),inset 0 0 10px rgba(15,23,42,0.9);
      position:relative;
      animation: mockFloat 4.5s ease-in-out infinite alternate;
    }
    @keyframes mockFloat {
      0%{transform:translateY(0);}
      100%{transform:translateY(-6px);}
    }

    .device-mock.web { width:70px;height:40px;border-radius:11px; }
    .device-mock.web::after {
      content:"";
      position:absolute;
      left:50%;bottom:-4px;
      transform:translateX(-50%);
      width:40px;height:6px;
      border-radius:999px;
      background:rgba(15,23,42,0.95);
      box-shadow:0 0 8px rgba(15,23,42,0.9);
    }

    .device-mock.phone { width:24px;height:38px;border-radius:9px; }
    .device-mock.phone::before {
      content:"";
      position:absolute;
      top:4px;left:50%;
      transform:translateX(-50%);
      width:11px;height:2px;
      border-radius:999px;
      background:rgba(148,163,184,0.8);
    }

    .device-mock.shield {
      width:36px;height:36px;
      border-radius:50%;
      background:radial-gradient(circle at 30% 20%,rgba(34,197,94,0.9),transparent 65%),rgba(15,23,42,0.96);
    }

    .device-mock-label { margin-left:0.1rem; }

    /* MÜŞTERİ LOGO SLIDER */

    .clients {
      padding:2.6rem 0;
    }

    .client-slider {
      border-radius:16px;
      border:1px solid var(--border-soft);
      background:rgba(15,23,42,0.9);
      overflow:hidden;
      position:relative;
    }
    body.theme-light .client-slider { background:#f9fafb; }

    .client-track {
      display:flex;
      gap:2.8rem;
      padding:0.9rem 1.8rem;
      animation: clientMove 26s linear infinite;
      white-space:nowrap;
    }

    @keyframes clientMove {
      0%{transform:translateX(0);}
      100%{transform:translateX(-50%);}
    }

    .client-logo {
      display:inline-flex;
      align-items:center;
      gap:0.5rem;
      font-size:0.85rem;
      color:var(--text-soft);
    }
    .client-badge {
      width:26px;height:26px;
      border-radius:999px;
      border:1px solid rgba(148,163,184,0.9);
      display:inline-flex;
      align-items:center;
      justify-content:center;
      font-size:0.8rem;
      background:rgba(15,23,42,0.95);
      box-shadow:0 0 10px rgba(59,130,246,0.7);
    }

    /* FÄ°YAT PAKETLERÄ° */

    .pricing-grid {
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:1.4rem;
      margin-top:2.4rem;
    }

    .pricing-card {
      background:rgba(15,23,42,0.95);
      border-radius:var(--radius-lg);
      border:1px solid var(--border-soft);
      padding:1.4rem 1.2rem;
      box-shadow:0 18px 42px rgba(0,0,0,0.7);
      font-size:0.86rem;
      display:flex;
      flex-direction:column;
      gap:0.5rem;
      position:relative;
    }
    body.theme-light .pricing-card { background:#ffffff; }

    .pricing-badge {
      font-size:0.72rem;
      text-transform:uppercase;
      letter-spacing:0.16em;
      color:var(--accent2);
    }
    .pricing-name { font-size:1.1rem;font-weight:600; }
    .pricing-price { font-size:1.4rem;font-weight:700;margin:0.2rem 0; }
    .pricing-price span { font-size:0.8rem;font-weight:400;color:var(--text-soft); }

    .pricing-list { list-style:none;font-size:0.8rem;color:var(--text-soft);margin-top:0.5rem; }
    .pricing-list li { margin-bottom:0.25rem; }
    

    .pricing-popular {
      position:absolute;
      top:0.9rem;right:1rem;
      font-size:0.7rem;
      padding:0.15rem 0.55rem;
      border-radius:999px;
      background:linear-gradient(135deg,var(--primary),var(--accent));
      color:#020617;
    }
        /* Hover motion – pricing cards */
    .pricing-card {
      transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;
    }
    
    /* Hover efekti */
    .pricing-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 26px 60px rgba(0,0,0,0.55);
      border-color: rgba(99,102,241,0.55);
    }
    

    .pricing-card {
      animation: pricingFade 0.6s ease forwards;
    }
    
    .pricing-card:nth-child(1) { animation-delay: 0.1s; }
    .pricing-card:nth-child(2) { animation-delay: 0.25s; }
    .pricing-card:nth-child(3) { animation-delay: 0.4s; }


/* YORUMLAR */
    .testimonial-grid {
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:1.3rem;
      margin-top:2.1rem;
    }

    .testimonial-card {
      background:rgba(15,23,42,0.95);
      border-radius:var(--radius-lg);
      border:1px solid var(--border-soft);
      padding:1.2rem 2rem;
      font-size:1 rem;
      color:var(--text-soft);
      position:relative;
    }
    body.theme-light .testimonial-card { background:#ffffff; }
    .testimonial-card::before {
      /*content:"“";*/
      position:absolute;
      top:-12px;left:10px;
      font-size:2rem;
      color:rgba(148,163,184,0.6);
    }
    .testimonial-author {
      margin-top:0.8rem;
      font-size:0.8rem;
      color:var(--text-main);
      font-weight:600;
    }
    .testimonial-role { font-size:0.76rem;color:var(--text-soft); }
    /* Hover hareketi */
    .testimonial-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
      border-color: rgba(99, 102, 241, 0.55);
    }
    
    
/* BANNER / KAMPANYA + HALKALAR */

    .promo-banner {
      margin-top:3.4rem;
      border-radius:22px;
      overflow:hidden;
      position:relative;
      background:#020617;
      box-shadow:0 24px 60px rgba(0,0,0,0.9);
      border:1px solid rgba(37,99,235,0.7);
    }
    body.theme-light .promo-banner { background:#f9fafb; }

    .promo-bg-stripes {
      position:absolute;
      inset:0;
      background-image:linear-gradient(
        120deg,
        rgba(37,99,235,0.18) 15%,
        transparent 15% 30%,
        rgba(34,197,94,0.16) 30%,
        transparent 30% 45%,
        rgba(234,179,8,0.16) 45%,
        transparent 45% 60%
      );
      background-size:260px 260px;
      opacity:0.6;
      animation: stripeMove 18s linear infinite;
      pointer-events:none;
      z-index:0;
    }

    .promo-ring {
      position:absolute;
      border-radius:999px;
      border:1px dashed rgba(148,163,184,0.5);
      opacity:0.35;
      animation: promoRingSpin 32s linear infinite;
      z-index:1;
    }
    .promo-ring.pr1{inset:10% 18%;animation-duration:30s;}
    .promo-ring.pr2{inset:18% 8%;border-color:rgba(59,130,246,0.5);animation-duration:42s;animation-direction:reverse;opacity:0.3;}
    .promo-ring.pr3{inset:0 26%;border-color:rgba(34,197,94,0.45);animation-duration:38s;opacity:0.28;}

    @keyframes promoRingSpin { 0%{transform:rotate(0);} 100%{transform:rotate(-360deg);} }
    @keyframes stripeMove { 0%{transform:translate3d(0,0,0);} 100%{transform:translate3d(-260px,0,0);} }

    .promo-inner {
      position:relative;
      z-index:2;
      padding:1.7rem 1.6rem;
      display:grid;
      grid-template-columns:minmax(0,1.2fr) minmax(0,0.8fr);
      gap:1.5rem;
      align-items:center;
    }

    .promo-title { font-size:1.4rem;margin-bottom:0.4rem; }
    .promo-text { font-size:0.9rem;color:#e5e7eb;max-width:480px; }
    body.theme-light .promo-text { color:#111827; }

    .promo-badges {
      margin-top:0.7rem;
      display:flex;
      flex-wrap:wrap;
      gap:0.5rem;
      font-size:0.78rem;
    }
    .promo-badge {
      border-radius:999px;
      padding:0.25rem 0.7rem;
      border:1px solid rgba(248,250,252,0.7);
      background:rgba(15,23,42,0.66);
      color:#e5e7eb;
    }
    body.theme-light .promo-badge {
      background:#ffffff;
      color:#111827;
      border-color:#e5e7eb;
    }


    .promo-logo {
      width: 44px;
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      color: #fff;
      text-decoration: none;
    }

    .promo-logo.wp {
      background: #25D366;
    }

    .promo-logo.ig {
      background: linear-gradient(45deg,#F58529,#DD2A7B,#8134AF,#515BD4);
    }

    .promo-logo:hover {
      transform: scale(1.1);
    }


    .promo-right { display:flex;flex-direction:column;gap:0.7rem;align-items:flex-start; }
    .promo-metric-row { display:flex;gap:1rem;font-size:0.8rem;color:#e5e7eb; }
    body.theme-light .promo-metric-row { color:#111827; }

    .promo-metric {
      padding:0.7rem 0.9rem;
      border-radius:14px;
      border:1px solid rgba(148,163,184,0.7);
      background:rgba(15,23,42,0.95);
      min-width:110px;
    }
    body.theme-light .promo-metric { background:#ffffff; }

    .promo-metric strong { display:block;font-size:1.1rem; }

    .promo-visual {
      display:flex;
      gap:0.7rem;
      align-items:flex-end;
      margin-top:0.3rem;
    }

    .promo-device {
      width:90px;height:54px;
      border-radius:14px;
      border:1px solid rgba(148,163,184,0.8);
      background:
        radial-gradient(circle at 20% 10%,rgba(59,130,246,0.9),transparent 60%),
        radial-gradient(circle at 80% 90%,rgba(34,197,94,0.7),transparent 60%),
        rgba(15,23,42,0.96);
      position:relative;
      box-shadow:0 18px 36px rgba(0,0,0,0.9),inset 0 0 12px rgba(15,23,42,0.9);
      animation: mockFloat 5s ease-in-out infinite alternate;
    }

    .promo-device::after {
      content:"";
      position:absolute;
      left:50%;bottom:-6px;
      transform:translateX(-50%);
      width:54px;height:6px;
      border-radius:999px;
      background:rgba(15,23,42,0.98);
      box-shadow:0 6px 12px rgba(0,0,0,0.9);
    }

    .promo-logos {
      display:flex;
      gap:0.35rem;
      align-items:center;
      font-size:0.7rem;
    }

    .promo-logo {
      width:24px;height:24px;
      border-radius:999px;
      border:1px solid rgba(148,163,184,0.9);
      display:inline-flex;
      align-items:center;
      justify-content:center;
      background:rgba(15,23,42,0.95);
      box-shadow:0 0 10px rgba(37,99,235,0.7);
      font-size:0.7rem;
    }
    .promo-logo.fb { background:radial-gradient(circle at 30% 20%,rgba(59,130,246,0.9),transparent 60%),rgba(15,23,42,0.95); }
    .promo-logo.ig { background:radial-gradient(circle at 30% 20%,rgba(236,72,153,0.9),transparent 60%),rgba(15,23,42,0.95); }
    .promo-logo.yt { background:radial-gradient(circle at 30% 20%,rgba(248,113,113,0.9),transparent 60%),rgba(15,23,42,0.95); }

    .promo-note { font-size:0.78rem;color:#cbd5f5; }
    body.theme-light .promo-note { color:#4b5563; }

    /* CTA / RANDEVU TAKVÄ°MÄ° */

    .cta { padding:3.4rem 0 3.7rem; }

    .cta-inner {
      border-radius:20px;
      border:1px solid rgba(148,163,184,0.8);
      background:
        radial-gradient(circle at top left,rgba(37,99,235,0.4),transparent 55%),
        radial-gradient(circle at bottom right,rgba(34,197,94,0.4),transparent 55%),
        #020617;
      padding:1.7rem 1.6rem;
      display:grid;
      grid-template-columns:minmax(0,1.1fr) minmax(0,0.9fr);
      gap:1.5rem;
      box-shadow:0 24px 60px rgba(0,0,0,0.9);
    }
    body.theme-light .cta-inner {
      background:
        radial-gradient(circle at top left,rgba(59,130,246,0.2),transparent 55%),
        radial-gradient(circle at bottom right,rgba(34,197,94,0.2),transparent 55%),
        #f9fafb;
    }

    .cta-title { font-size:1.45rem;margin-bottom:0.5rem; }
    .cta-text { font-size:0.9rem;color:var(--text-soft);margin-bottom:0.9rem; }

    .cta-badges {
      display:flex;
      flex-wrap:wrap;
      gap:0.6rem;
      font-size:0.78rem;
    }
    .badge {
      padding:0.25rem 0.7rem;
      border-radius:999px;
      border:1px solid rgba(148,163,184,0.8);
      background:rgba(15,23,42,0.85);
    }
    body.theme-light .badge { background:#ffffff; }

    .cta-form {
      display:flex;
      flex-direction:column;
      gap:0.6rem;
    }

    .cta-input {
      border-radius:999px;
      border:1px solid rgba(148,163,184,0.8);
      padding:0.6rem 0.9rem;
      background:rgba(15,23,42,0.95);
      color:var(--text-main);
      font-size:0.85rem;
      outline:none;
    }
    body.theme-light .cta-input { background:#ffffff; }

    .cta-input::placeholder { color:rgba(148,163,184,0.9); }

    .cta-button {
      border-radius:999px;
      border:none;
      padding:0.65rem 1.1rem;
      font-size:0.9rem;
      font-weight:600;
      cursor:pointer;
      background:linear-gradient(135deg,var(--primary),var(--accent2));
      color:#020617;
      box-shadow:0 14px 30px rgba(37,99,235,0.7);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: auto;
      max-width: 70%;
    }

    .appointment-toggle {
      margin-top:0.4rem;
      font-size:0.82rem;
      cursor:pointer;
      color:var(--accent2);
      display:inline-flex;
      align-items:center;
      gap:0.4rem;
    }

    .appointment-box {
      margin-top:0.5rem;
      padding:0.6rem 0.8rem;
      border-radius:12px;
      border:1px dashed rgba(148,163,184,0.9);
      background:rgba(15,23,42,0.9);
      font-size:0.78rem;
      display:none;
      gap:0.5rem;
      align-items:center;
    }
    body.theme-light .appointment-box {
      background:#ffffff;
    }
    .appointment-box input {
      border-radius:999px;
      border:1px solid rgba(148,163,184,0.9);
      padding:0.3rem 0.6rem;
      font-size:0.8rem;
      background:transparent;
      color:inherit;
    }

    .cta-note { font-size:0.78rem;color:var(--text-soft); }

    /* FOOTER */

    footer {
      border-top:1px solid rgba(30,64,175,0.7);
      padding:1.3rem 0 1.7rem;
      font-size:0.78rem;
      color:var(--text-soft);
      background:rgba(3,6,18,0.95);
    }
    body.theme-light footer {
      background:#f3f4f6;
      border-top-color:#d1d5db;
    }

    .footer-inner {
      display:flex;
      flex-wrap:wrap;
      justify-content:space-between;
      gap:0.9rem;
    }

    /* RESPONSIVE */

    @media (max-width:960px) {
      .hero-inner { grid-template-columns:minmax(0,1fr); }
      .hero-visual-wrap { margin-top:1.8rem; }
      .feature-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
      .services-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
      .pricing-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
      .testimonial-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
      .promo-inner { grid-template-columns:minmax(0,1fr); }
      .cta-inner { grid-template-columns:minmax(0,1fr); }
      .nav-links a:not(.btn-nav) { display:none; }
    }

    @media (max-width:640px) {
      .feature-grid,
      .services-grid,
      .pricing-grid,
      .testimonial-grid { grid-template-columns:minmax(0,1fr); }
      .hero { padding-top:2.6rem; }
      .hero-title { font-size:2.1rem; }
      .promo-inner,
      .cta-inner { padding:1.5rem 1.2rem; }
    }
    .hero-glow {
  width: 180px;
  height: 180px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 30% 30%, rgba(59,130,246,0.7), transparent 60%),
    radial-gradient(circle at 70% 70%, rgba(34,197,94,0.6), transparent 60%);
  filter: blur(30px);
  opacity: 0.6;
  animation: glowFloat 6s ease-in-out infinite alternate;
}

@keyframes glowFloat {
  0% { transform: translateY(0); }
  100% { transform: translateY(-14px); }
}

.motion-banner {
  position: relative;
  width: 100%;
  height: 340px;          /* 🔴 BU YOKSA HİÇBİR ŞEY GÖRÜNMEZ */
  border-radius: 22px;
  overflow: hidden;
  align-self: stretch;
}

.motion-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.06);
  transition:
    opacity 1.5s ease,
    transform 6s ease;
}

.motion-slide.active {
  opacity: 1;
  transform: scale(1);
}

.product-lines {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.product-line {
  display: grid;
  grid-template-columns: 1.2fr 2fr 1.2fr;
  gap: 1.4rem;
  padding: 1.4rem 1.6rem;
  border-radius: 18px;
  background: linear-gradient(
    135deg,
    rgba(59,130,246,0.18),
    rgba(15,23,42,0.9)
  );
  border: 1px solid var(--border-soft);
  box-shadow: 0 14px 40px rgba(0,0,0,0.6);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product-line:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.8);
}

.product-left h3 {
  font-size: 1.1rem;
  margin-bottom: 0.2rem;
}

.product-left span {
  font-size: 0.75rem;
  color: var(--accent2);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.product-center {
  font-size: 0.9rem;
  color: var(--text-soft);
}

.product-right {
  font-size: 0.9rem;
  font-weight: 600;
  background: linear-gradient(
    90deg,
    var(--primary),
    var(--accent)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@media (max-width: 900px) {
  .product-line {
    grid-template-columns: 1fr;
    gap: 0.8rem;
  }
}
/* WHATSAPP FLOAT BUTTON */
.wp-float {
  position: fixed;
  bottom: 22px;
  right: 22px;
  z-index: 9999;

  display: flex;
  align-items: center;
  gap: 10px;

  padding: 14px 18px;
  border-radius: 999px;

  background: linear-gradient(135deg, #25D366, #128C7E);
  color: #052e16;

  font-size: 14px;
  font-weight: 600;
  text-decoration: none;

  box-shadow: 0 20px 40px rgba(37, 211, 102, 0.35);
  transition: transform .25s ease, box-shadow .25s ease;
}


.wp-float:hover {
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 30px 55px rgba(37, 211, 102, 0.5);
}

.wp-float svg {
  display: block;
  flex-shrink: 0;
}
/* ICON */
.wp-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #fff;

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

  font-size: 18px;
}

/* TEXT */
.wp-text {
  line-height: 1.2;
}

/* PULSE EFFECT */
.wp-float::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 999px;
  border: 2px solid rgba(37, 211, 102, 0.6);
  animation: wpPulse 2.5s infinite;
}

@keyframes wpPulse {
  0%   { transform: scale(1); opacity: .9; }
  70%  { transform: scale(1.15); opacity: 0; }
  100% { opacity: 0; }
}

/* MOBÄ°L */
@media (max-width: 768px) {
  .wp-text {
    display: none;
  }

  .wp-float {
    padding: 14px;
  }
}
.pricing-focus {
  padding: 80px 0;
}

.pricing-row {
  display: grid;
  grid-template-columns: 1fr 1.25fr 1fr;
  gap: 32px;
  align-items: stretch;
}

.price-card {
  position: relative;
  background: rgba(15,23,42,.8);
  border: 1px solid rgba(148,163,184,.15);
  border-radius: 20px;
  padding: 36px;
  transition: transform .35s ease, box-shadow .35s ease;
}

.price-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 70px rgba(0,0,0,.45);
}

.price-card.side {
  opacity: .85;
}

.price-card.main {
  border-color: #22c55e;
}

.price-glow {
  position: absolute;
  inset: -1px;
  border-radius: 22px;
  background: radial-gradient(
    circle at top,
    rgba(34,197,94,.35),
    transparent 70%
  );
  pointer-events: none;
}

.price-tag {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .3px;
  color: #94a3b8;
}

.price-title {
  font-size: 22px;
  font-weight: 700;
  margin: 6px 0 12px;
}

.price-value strong {
  font-size: 28px;
  color: #22c55e;
}

.price-value span {
  font-size: 14px;
  color: #94a3b8;
}

.price-desc {
  font-size: 15px;
  line-height: 1.7;
  color: #cbd5f5;
  margin: 12px 0 20px;
}

.price-card ul {
  list-style: none;
  padding: 0;
}

.price-card ul li {
  font-size: 14px;
  margin-bottom: 8px;
}

@media (max-width: 900px) {
  .pricing-row {
    grid-template-columns: 1fr;
  }

  .price-card.main {
    order: -1;
  }
}
.commerce-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}

.commerce-card {
  background: rgba(15,23,42,.75);
  border: 1px solid rgba(148,163,184,.15);
  border-radius: 18px;
  padding: 28px;
  transition: transform .3s ease, box-shadow .3s ease;
}

.commerce-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(0,0,0,.45);
}

.commerce-icon {
  font-size: 34px;
  margin-bottom: 12px;
}

.commerce-card h3 {
  font-size: 18px;
  margin-bottom: 10px;
  color: #fff;
}

.commerce-card p {
  font-size: 14.5px;
  line-height: 1.6;
  color: #cbd5f5;
}

.commerce-meta {
  display: inline-block;
  margin-top: 14px;
  font-size: 12px;
  color: #22c55e;
  font-weight: 600;
}
.contact-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(240px,1fr));
  gap: 24px;
  margin-top: 40px;
}

.contact-card {
  background: rgba(15,23,42,.75);
  border: 1px solid rgba(148,163,184,.15);
  border-radius: 18px;
  padding: 32px;
  text-decoration: none;
  color: inherit;
  transition: transform .3s ease, box-shadow .3s ease;
}

.contact-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(0,0,0,.45);
}

.contact-icon {
  font-size: 36px;
  margin-bottom: 12px;
}

.contact-card h3 {
  font-size: 18px;
  margin-bottom: 8px;
  color: #fff;
}

.contact-card p {
  font-size: 14.5px;
  color: #cbd5f5;
  line-height: 1.6;
}

.contact-meta {
  display: inline-block;
  margin-top: 14px;
  font-size: 12px;
  font-weight: 600;
  color: #22c55e;
}

.btn-nav.contact-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;

  /* 🔥 SOL ikon için SAĞDAN ekstra padding */
  padding: 0.55rem 2rem 0.55rem 1.6rem;

  border-radius: 999px;
  border: 1px solid rgba(99,102,241,0.55);

  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: .3px;
  line-height: 1;

  color: #eef6ff;

  background:
    linear-gradient(135deg, rgba(99,102,241,.45), rgba(37,99,235,.2)),
    radial-gradient(circle at top left, rgba(37,99,235,.5), transparent 60%);

  box-shadow:
    0 0 20px rgba(37,99,235,.45),
    inset 0 0 18px rgba(99,102,241,.2);

  backdrop-filter: blur(6px);
  transition: all .3s ease;
}

.btn-nav.contact-cta:hover {
  transform: translateY(-1px);
  box-shadow:
    0 0 32px rgba(99,102,241,.65),
    inset 0 0 24px rgba(99,102,241,.3);
}