:root{
      --accent-1:#88baf3;
      --accent-2:#1238c2;
      --accent-3:#ee9b43;
      --accent-4:#c55307;
      --accent-dark:#9a4913;
      --muted:#64748b;
      --radius:14px;
      --shadow-lg:0 14px 40px rgba(15,23,42,0.12);
      --shadow-md:0 8px 26px rgba(15,23,42,0.08);
      --shadow-sm:0 4px 14px rgba(15,23,42,0.06);
    }

    *{box-sizing:border-box}
    body{
      margin:0;
      padding:32px 12px;
      background:linear-gradient(180deg,#f8fafc 0,#eef7fa 100%);
      font-family:Inter, sans-serif;
      color:#0f172a;
      display:flex;
      justify-content:center;
      width: 100%;
      overflow-x: hidden;
      
    }

    .page{
      width:100%;
      max-width:1200px;
      background:white;
      border-radius:var(--radius);
      box-shadow:var(--shadow-lg);
      overflow:hidden;
      border:1px solid rgba(15,23,42,0.06);
    }

    /* HERO */
    .hero{
      padding:48px;
      display:grid;
      gap:36px;
      grid-template-columns:1fr 380px;
      background:linear-gradient(120deg,rgba(58, 139, 237, 0.07),rgba(165, 84, 14, 0.06));
      border-bottom:1px solid rgba(15,23,42,0.06);
    }

    .hero-badge{
      width:60px;height:60px;
      display:grid;place-items:center;
      background:linear-gradient(135deg,var(--accent-1),var(--accent-2));
      border-radius:14px;
      color:white;font-size:22px;font-weight:800;
      box-shadow:var(--shadow-md);
      margin-bottom: 40px;
    }

    .title h1{
      margin:0;font-size:32px;
      font-weight:800;letter-spacing:-0.5px;
    }
    .title p{
      margin:6px 0 0;
      font-size:15px;color:var(--muted);
    }

    .hero-meta{
      background:white;
      padding-left:18px;

      border-radius:var(--radius);
      box-shadow:var(--shadow-sm);
      border:1px solid rgba(15,23,42,0.06);
      display:flex;
      gap:12px;
      align-items:center;
      justify-content:space-between;
    }

    .pill{
      padding:8px 14px;
      background:linear-gradient(90deg,var(--accent-1),var(--accent-2));
      font-size:13px;color:white;font-weight:600;
      border-radius:999px;
      box-shadow:var(--shadow-sm);
      margin-left: 70px;
    }


    /* CONTENT */
    .content{
      display:grid;
      grid-template-columns:1fr 350px;
      gap:32px;
      padding:40px 48px;
    }

    .card{
      padding:22px;
      border-radius:var(--radius);
      background:white;
      border:1px solid rgba(15,23,42,0.04);
      box-shadow:var(--shadow-sm);
    }

    .lead{font-size:14px;color:var(--muted)}

    /* MODULES */
    .modules{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:16px;
    }

    .module{
      padding:18px;
      border-radius:var(--radius);
      background:linear-gradient(180deg,rgba(73, 123, 248, 0.024),rgba(36, 84, 168, 0.053));
      border:1px solid rgba(150, 85, 5, 0.05);
      transition:0.25s ease;
      box-shadow:0 4px 16px rgba(237, 118, 58, 0.06);
    }

    .module:hover{
      transform:translateY(-3px);
      box-shadow:0 16px 36px rgba(237, 127, 58, 0.12);
    }

    .module .m-title{
      font-weight:700;font-size:20px;color: #062c74;
    }
    .module h4{
      margin:8px 0 12px;
      font-size:16px;color:#0f172aae;
    }

    .module ul{
      padding-left:20px;margin:10px 0 0;
      color:var(--muted);font-size:14px;
    }

    /* SIDEBAR */
    .aside .box{
      background:rgba(236, 185, 153, 0.087);
      padding:20px;
      border-radius:var(--radius);
      border:1px solid rgba(15,23,42,0.05);
      box-shadow:var(--shadow-sm);
    }

    .dot{
      width:12px;height:12px;
      background:linear-gradient(90deg,var(--accent-1),var(--accent-2));
      border-radius:50%;
      box-shadow:0 4px 10px rgba(124,58,237,0.20);
    }

    .klist{
      list-style:none;
      padding:0;margin:12px 0 0;
      display:flex;flex-direction:column;
      gap:10px;
      font-size:14px;color:var(--muted);
    }

    /* LABS */
    .labs{
      display:grid;grid-template-columns:1fr 1fr;
      gap:16px;margin-top:14px;
    }

    .lab{
      padding:14px;
      border-radius:var(--radius);
      background:rgba(14,165,164,0.05);
      border:1px dashed rgba(14,165,164,0.25);
      font-size:14px;color:#0f172a;
    }

    /* CTA */
    .btn{
      padding:12px 18px;border-radius:12px;
      font-weight:700;font-size:14px;
      cursor:pointer;border:none;
      transition:.2s ease;
    }
    .btn-primary{
      background:linear-gradient(90deg,var(--accent-1),var(--accent-2));
      color:white;
      box-shadow:var(--shadow-sm);
    }
    .btn-primary:hover{opacity:0.9}
    .btn-ghost{
      background:white;
      border:1px solid rgba(15,23,42,0.1);
      color:var(--accent-dark);
    }

    /* FULL RESPONSIVE */
    @media(max-width:1080px){
      .hero{grid-template-columns:1fr; text-align:center;}
      .hero-meta{flex-direction:column; text-align:center;}
    }
    @media(max-width:900px){
      .content{grid-template-columns:1fr;}
      .aside{order:-1;}
    }
    @media(max-width:680px){
      .modules{grid-template-columns:1fr;}
      .labs{grid-template-columns:1fr;}
      .hero{padding:32px;}
      .content{padding:28px;}
      .title h1{font-size:26px;}
    }
    @media(max-width:480px){
      body{padding:16px 8px;}
      .page{border-radius:10px;}
      .hero-badge{width:52px;height:52px;font-size:19px;}
      .btn{width:100%;text-align:center;}
      .hero{padding:24px;}
      .content{padding:22px;}
    }

     /* ====== Tokens ====== */
  :root{
    --blue-900:#0f172a;   /* başlık/metin koyu */
    --blue-700:#1e3a8a;
    --blue-600:#2563eb;
    --blue-500:#3b82f6;
    --blue-200:#bfdbfe;
    --blue-100:#e0ecff;
    --bg-grad: radial-gradient(1200px 500px at 10% 0%, rgba(59,130,246,.12), transparent),
               linear-gradient(180deg, #ffffff, #f7fbff);
    --ring: 0 8px 20px rgba(37,99,235,.18);
  }

  /* ====== Layout ====== */
  .process{
    padding: clamp(28px, 4vw, 56px);
    background: var(--bg-grad);
    border-radius: 20px;
    border: 1px solid rgba(37,99,235,.12);
  }

  .process-title{
    margin: 0 0 24px;
    font-size: clamp(22px, 2.4vw, 34px);
    line-height: 1.15;
    text-align: center;
    color: var(--blue-900);
    letter-spacing: .2px;
  }

  .process-steps{
    --cols: 5;
    list-style: none;
    margin: 0;
    padding: clamp(10px, 2vw, 16px);
    display: grid;
    grid-template-columns: repeat(var(--cols), minmax(160px, 1fr));
    gap: clamp(16px, 2vw, 28px);
    position: relative;
  }

  /* Bağlantı çizgisi (desktop) */
  .process-steps::before{
    content:"";
    position: absolute;
    top: 58px; /* ikon orta hizası */
    left: 12%;
    right: 12%;
    height: 2px;
    background: linear-gradient(90deg, var(--blue-200), var(--blue-500), var(--blue-200));
    opacity:.55;
    z-index: 0;
  }

  .step{
    background: #fff;
    border: 1px solid rgba(37,99,235,.12);
    border-radius: 16px;
    padding: 18px 16px 16px;
    box-shadow: var(--ring);
    position: relative;
    z-index: 1;
    text-align: center;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  }
  .step:hover{
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(37,99,235,.22);
    border-color: rgba(37,99,235,.28);
  }

  .step-icon{
    width: 56px;
    height: 56px;
    margin: -34px auto 10px;
    display: grid;
    place-items: center;
    font-size: 26px;
    color:#0b2a6a;
    background:
      radial-gradient(60px 60px at 30% 20%, rgba(191,219,254,.9), rgba(191,219,254,0)),
      linear-gradient(135deg, #ffffff, #dbeafe);
    border: 2px solid #dbeafe;
    border-radius: 50%;
    box-shadow: 0 8px 20px rgba(59,130,246,.25), inset 0 0 0 6px #f5f9ff;
  }

  .step-title{
    margin: 8px 0 6px;
    font-size: clamp(14px, 1.4vw, 18px);
    color: var(--blue-700);
    font-weight: 700;
  }
  .step-text{
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    color: #334155;
    opacity: .9;
  }

  /* ====== Badges: 1..5 ====== */
  .step::after{
    counter-increment: steps;
    content: counter(steps);
    position: absolute;
    top: -10px;
    left: 10px;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--blue-500), var(--blue-600));
    color:#fff;
    font: 600 13px/28px ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    box-shadow: 0 6px 14px rgba(37,99,235,.35);
  }
  .process-steps{ counter-reset: steps; }

  /* ====== Responsive ====== */
  @media (max-width: 1100px){
    .process-steps{ --cols: 3; }
  }
  @media (max-width: 720px){
    .process-steps{ --cols: 1; }
    .process-steps::before{ display: none; } /* yatay çizgiyi gizle */
    .step{
      text-align: center;
      padding-left: 76px;
   
    }
    .step-icon{
      position: absolute;
      left: 12px;
      top: 10px;
      margin: 0;
    }
    /* Dikey bağlayıcı */
    .step + .step{ margin-top: 14px; }
    .step::before{
      content:"";
      position: absolute;
      left: 40px;
      top: -14px;
      width: 2px;
      height: 14px;
      background: linear-gradient(180deg, var(--blue-200), var(--blue-500));
      opacity:.6;
    }
  }