:root{
      --primary:#6c3df2;
      --primary-soft:#f3edff;
      --bg:#f3f4f6;
      --text:#111827;
      --muted:#6b7280;
      --border:#e5e7eb;
      --radius:14px;
    }
    *{box-sizing:border-box;margin:0;padding:0;font-family:system-ui,-apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif;}
    body{background:var(--bg);color:var(--text);}
    a{text-decoration:none;color:inherit;}
    .site-header{
      position:sticky;top:0;z-index:20;
      backdrop-filter:blur(12px);
      background:rgba(255,255,255,.94);
      border-bottom:1px solid rgba(229,231,235,.9);
    }
    .header-inner{
      max-width:1200px;margin:0 auto;padding:10px 20px;
      display:flex;align-items:center;justify-content:space-between;gap:16px;
    }
    .brand{display:flex;align-items:center;gap:10px;}
    .brand img{height:32px;}
    .brand-main{font-weight:700;font-size:19px;}
    .brand-sub{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.18em;}
    .main-nav{display:flex;gap:10px;align-items:center;font-size:14px;}
    .nav-link{padding:6px 10px;border-radius:999px;color:#4b5563;}
    .nav-link.active{background:#eef2ff;color:#4338ca;}
    .nav-link:hover{background:#f3f4ff;}
    main{max-width:1200px;margin:20px auto 32px;padding:0 20px;}
    h1{font-size:23px;font-weight:700;margin-bottom:4px;}
    .sub{font-size:14px;color:var(--muted);margin-bottom:14px;}
    .wizard-card{background:#fff;border-radius:var(--radius);border:1px solid var(--border);box-shadow:0 12px 26px rgba(15,23,42,.08);padding:16px;}
    .stepper{display:flex;gap:8px;font-size:12px;color:#6b7280;margin-bottom:12px;flex-wrap:wrap;}
    .step-pill{padding:4px 10px;border-radius:999px;border:1px solid #e5e7eb;background:#f9fafb;display:flex;align-items:center;gap:6px;}
    .step-pill.active{border-color:#6c3df2;background:#f3edff;color:#4c1d95;}
    .step-pill .dot{width:18px;height:18px;border-radius:999px;background:#e5e7ff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;}
    .step-pill.active .dot{background:#6c3df2;color:#fff;}
    .step-title{font-size:16px;font-weight:600;margin-bottom:4px;}
    .step-desc{font-size:13px;color:#6b7280;margin-bottom:10px;}
    .options-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;}
    .option-card{border-radius:12px;border:1px solid #e5e7eb;padding:10px;cursor:pointer;background:#f9fafb;}
    .option-card.selected{border-color:#6c3df2;background:#f3edff;box-shadow:0 0 0 1px rgba(108,61,242,.25);}
    .option-title{font-size:14px;font-weight:600;margin-bottom:2px;}
    .option-sub{font-size:12px;color:#6b7280;}
    .radio-row{display:flex;align-items:center;gap:6px;font-size:13px;margin:3px 0;}
    .pkg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:8px;margin-top:8px;}
    .pkg-card{border-radius:12px;border:1px solid #e5e7eb;padding:9px;font-size:13px;cursor:pointer;}
    .pkg-card strong{display:block;font-size:14px;margin-bottom:2px;}
    .pkg-card.selected{border-color:#6c3df2;background:#f3edff;}
    .field-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin-top:8px;}
    label{font-size:13px;color:#6b7280;display:block;margin-bottom:4px;}
    select,input,textarea{width:100%;padding:7px 9px;border-radius:8px;border:1px solid #d1d5db;font-size:14px;background:#f9fafb;outline:none;}
    select:focus,input:focus,textarea:focus{border-color:#6c3df2;background:#fff;box-shadow:0 0 0 1px rgba(108,61,242,.12);}
    .design-grid{margin-top:10px;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px;}
    .design-box{border-radius:12px;border:1px solid #e5e7eb;background:#f9fafb;padding:9px;display:flex;flex-direction:column;gap:5px;position:relative;}
    .design-box-header{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#4b5563;}
    .badge{font-size:11px;border-radius:999px;padding:2px 7px;background:#eef2ff;color:#4f46e5;}
    .design-box textarea{font-size:13px;min-height:60px;}
    .small{font-size:12px;color:#9ca3af;}
    .radio-inline{display:flex;gap:8px;flex-wrap:wrap;font-size:12px;}
    .extra-controls{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;align-items:flex-end;}
    .btn{border-radius:999px;border:1px solid #d1d5db;padding:7px 12px;font-size:13px;background:#f9fafb;cursor:pointer;display:inline-flex;align-items:center;gap:6px;}
    .btn-primary{border:none;background:linear-gradient(135deg,#6c3df2,#a855f7);color:#fff;box-shadow:0 12px 24px rgba(108,61,242,.45);}
    .btn-primary:hover{filter:brightness(1.05);transform:translateY(-1px);}
    .wizard-footer{display:flex;justify-content:space-between;align-items:center;margin-top:14px;flex-wrap:wrap;gap:8px;font-size:13px;}
    .summary-card{margin-top:14px;border-radius:12px;border:1px solid #e5e7eb;background:#fefefe;padding:10px;font-size:13px;}
    .summary-row{display:flex;justify-content:space-between;margin:2px 0;}
    .summary-row.total{font-weight:700;font-size:14px;margin-top:4px;}
    .orientation-tag{font-size:11px;border-radius:999px;padding:2px 6px;border:1px solid #cbd5e1;}
    .design-box.horizontal{background:#f9fafb;}
    .design-box.vertical{background:#fef9c3;}
  
    /* Header alignment & actions */
    .header-inner{
      max-width:1200px;
      margin:0 auto;
      padding:10px 24px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:18px;
      flex-wrap:wrap;
    }
    .main-nav{
      display:flex;
      align-items:center;
      gap:12px;
      font-size:14px;
      flex-wrap:wrap;
    }
    .nav-link{
      padding:6px 12px;
      border-radius:999px;
      color:#4b5563;
      transition:background .15s ease,color .15s ease, box-shadow .15s ease;
    }
    .nav-link:hover{
      background:#eef2ff;
      color:#111827;
    }
    .nav-link.active{
      background:#4f46e5;
      color:#fff;
      box-shadow:0 10px 22px rgba(79,70,229,.35);
    }
    .header-actions{
      display:flex;
      align-items:center;
      gap:8px;
    }
    .btn.btn-ghost{
      border-radius:999px;
      border:1px solid #e5e7eb;
      background:#ffffff;
      padding:6px 12px;
      font-size:13px;
      cursor:pointer;
    }
    .btn.btn-ghost:hover{
      background:#f3f4ff;
    }
    .btn.btn-primary{
      border:none;
      padding:7px 14px;
      border-radius:999px;
      background:linear-gradient(135deg,#4f46e5,#7c3aed);
      color:#fff;
      font-size:13px;
      cursor:pointer;
      box-shadow:0 12px 24px rgba(79,70,229,.45);
    }

    /* Wizard & box styling unify with diğer hizmetler */
    .wizard-card{
      border-radius:16px;
      border:1px solid #e5e7eb;
      background:radial-gradient(circle at top left,#f5f3ff 0,#ffffff 45%,#f9fafb 100%);
      box-shadow:0 18px 45px rgba(15,23,42,.10);
      padding:18px 18px 20px;
    }
    .stepper{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      font-size:13px;
      margin-bottom:16px;
    }
    .step-pill{
      display:flex;
      align-items:center;
      gap:6px;
      padding:6px 11px;
      border-radius:999px;
      border:1px solid transparent;
      background:rgba(255,255,255,.96);
    }
    .step-pill .dot{
      width:20px;
      height:20px;
      border-radius:999px;
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:12px;
      font-weight:600;
      background:#e5e7eb;
      color:#4b5563;
    }
    .step-pill.active{
      border-color:#4f46e5;
      background:#eef2ff;
      color:#312e81;
      box-shadow:0 10px 22px rgba(79,70,229,.25);
    }
    .step-pill.active .dot{
      background:#4f46e5;
      color:#fff;
    }

    .options-grid{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
      gap:10px;
    }
    .option-card{
      border-radius:14px;
      border:1px solid #e5e7eb;
      background:linear-gradient(145deg,#f9fafb,#f3f4ff);
      padding:11px 11px 10px;
      display:flex;
      flex-direction:column;
      gap:2px;
      cursor:pointer;
      transition:all .18s ease;
    }
    .option-card:hover{
      box-shadow:0 14px 30px rgba(148,163,184,.45);
      transform:translateY(-2px);
      border-color:#818cf8;
    }
    .option-card.selected{
      border-color:#4f46e5;
      background:linear-gradient(145deg,#eef2ff,#e0e7ff);
      box-shadow:0 16px 38px rgba(79,70,229,.50);
    }

    .pkg-grid{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
      gap:10px;
      margin-top:8px;
    }
    .pkg-card{
      border-radius:13px;
      border:1px solid #e5e7eb;
      background:#f9fafb;
      padding:10px 11px;
      font-size:13px;
      cursor:pointer;
      transition:all .18s ease;
    }
    .pkg-card:hover{
      box-shadow:0 12px 26px rgba(148,163,184,.45);
      transform:translateY(-2px);
      border-color:#818cf8;
    }
    .pkg-card.selected{
      border-color:#4f46e5;
      background:linear-gradient(135deg,#eef2ff,#e5e7ff);
      box-shadow:0 14px 32px rgba(79,70,229,.45);
    }

    .design-grid{
      margin-top:12px;
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
      gap:12px;
    }
    .design-box{
      border-radius:16px;
      border:1px solid #e5e7eb;
      background:#ffffff;
      padding:10px 10px 12px;
      display:flex;
      flex-direction:column;
      gap:6px;
      position:relative;
      box-shadow:0 14px 32px rgba(15,23,42,.09);
      transition:all .18s ease;
    }
    .design-box.horizontal{
      background:linear-gradient(135deg,#f9fafb,#eef2ff);
    }
    .design-box.vertical{
      background:linear-gradient(135deg,#fefce8,#fffbeb);
    }
    .design-box:hover{
      transform:translateY(-2px);
      box-shadow:0 18px 40px rgba(15,23,42,.12);
    }
    .summary-card{
      margin-top:16px;
      border-radius:14px;
      border:1px solid #e5e7eb;
      background:linear-gradient(145deg,#f9fafb,#fefefe);
      padding:12px;
      font-size:13px;
      box-shadow:0 12px 26px rgba(148,163,184,.35);
    }

    @media (max-width:768px){
      .header-inner{
        padding-inline:14px;
      }
      .header-actions{
        margin-left:auto;
      }
    }