/* MAKINEX ONE tanıtım sayfası, Faz 1C: premium arayüz (hero yerleşimi, özellik kartları, süreç akışı). Yalnızca CSS. */

/* ---- hero: geniş ekranda dengeli sol metin / sağ görsel; ikinci (dekoratif) monitör ---- */
.laptop-2 { display: none; }
.m2-screen { padding: 14px 16px; border-radius: 14px 14px 4px 4px; background: linear-gradient(160deg, #1b2547, #0b1124); border: 1px solid rgba(148, 163, 255, .26); display: grid; gap: 7px; pointer-events: none; }
.m2-title { font-size: 10px; font-weight: 600; color: #cfd6f5; }
.m2-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 9px; border-radius: 9px; background: rgba(148, 163, 255, .06); border: 1px solid var(--line); font-size: 9px; color: #cfd6f5; }
.m2-row .pill { font-size: 8px; padding: 2px 7px; }
.m2-bars { display: grid; gap: 5px; padding-top: 4px; }
.m2-bars i { display: block; height: 4px; border-radius: 4px; background: linear-gradient(90deg, #4f6bff 0 var(--w), rgba(148, 163, 255, .15) var(--w) 100%); }
.m2-base { height: 8px; margin: 0 -3%; border-radius: 0 0 16px 16px; background: linear-gradient(180deg, #2a3358, #10162d); }
@media (min-width: 1200px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 72px; align-items: center; }
  .preview { transform: translateX(3%); }
  .laptop-2 { display: block; position: absolute; top: -5%; right: -5%; width: 44%; z-index: 0; opacity: .8; pointer-events: none;
    transform: perspective(1400px) rotateY(-22deg) rotateX(6deg); transform-origin: 70% 50%; filter: drop-shadow(0 26px 40px rgba(0, 0, 0, .5)); }
}

/* ---- özellik kartları: kategori vurgu rengi, ince neon çerçeve, yumuşak gölge ---- */
.feature { --acc: #6d8bff; border-color: color-mix(in srgb, var(--acc) 42%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--acc) 8%, #101a36), rgba(10, 16, 34, .88));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), inset 0 0 28px color-mix(in srgb, var(--acc) 6%, transparent), 0 14px 34px rgba(2, 6, 20, .5), 0 0 22px color-mix(in srgb, var(--acc) 12%, transparent); }
.feature[data-feature="ai"] { --acc: #6d8bff; }
.feature[data-feature="match"] { --acc: #a78bfa; }
.feature[data-feature="catalog"] { --acc: #38bdf8; }
.feature[data-feature="quote"] { --acc: #818cf8; }
.feature[data-feature="approval"] { --acc: #e879f9; }
.feature[data-feature="order"] { --acc: #22d3ee; }
.feature[data-feature="mail"] { --acc: #2dd4bf; }
.feature[data-feature="security"] { --acc: #fb7185; }
.feature:hover, .feature:focus-within { border-color: color-mix(in srgb, var(--acc) 72%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), inset 0 0 34px color-mix(in srgb, var(--acc) 10%, transparent), 0 18px 40px rgba(2, 6, 20, .55), 0 0 34px color-mix(in srgb, var(--acc) 26%, transparent); }
.feature .ico { background: color-mix(in srgb, var(--acc) 18%, transparent); box-shadow: 0 0 18px color-mix(in srgb, var(--acc) 32%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--acc) 30%, transparent); }
.feature .ico svg { stroke: color-mix(in srgb, var(--acc) 55%, #fff); }

/* ---- süreç: iki akış, belirgin numaralar, yönlü bağlantılar ---- */
.flow { padding: 26px 24px 28px; border: 1px solid var(--line); border-radius: 22px; background: linear-gradient(180deg, rgba(14, 23, 48, .55), rgba(8, 14, 32, .3)); }
.flow:nth-of-type(1) { border-left: 3px solid rgba(79, 107, 255, .75); }
.flow:nth-of-type(2) { border-left: 3px solid rgba(139, 92, 246, .75); }
.steps b { width: 44px; height: 44px; font-size: 17px; margin-bottom: 18px; box-shadow: 0 0 0 4px rgba(99, 102, 241, .18), 0 8px 22px rgba(79, 107, 255, .35); }
.flow:nth-of-type(2) .steps b { background: linear-gradient(135deg, #5448e8 0%, #7c3fe8 100%); box-shadow: 0 0 0 4px rgba(139, 92, 246, .2), 0 8px 22px rgba(139, 92, 246, .35); }
@media (min-width: 1021px) {
  .steps:not(.ops) li:not(:nth-child(4n))::after, .steps.ops li:not(:nth-child(3n)):not(:last-child)::after { top: 49px; }
  .steps:not(.ops) li:not(:nth-child(4n))::before, .steps.ops li:not(:nth-child(3n)):not(:last-child)::before {
    content: ""; position: absolute; top: 45px; left: calc(100% + 13px); border: 4px solid transparent; border-left: 7px solid rgba(165, 180, 255, .75); pointer-events: none; }
}
@media (max-width: 760px) {      /* dikey akış: bağlantı çizgisi + aşağı ok */
  .flow { padding: 20px 16px 22px; }
  .steps li:not(:last-child)::after { content: ""; position: absolute; left: 49px; top: 100%; width: 2px; height: 20px; pointer-events: none;
    background: linear-gradient(180deg, rgba(139, 150, 255, .6), rgba(139, 150, 255, .2)); }
  .steps li:not(:last-child)::before { content: ""; position: absolute; left: 45px; top: calc(100% + 12px); border: 5px solid transparent; border-top: 7px solid rgba(165, 180, 255, .75); pointer-events: none; }
}
@media (forced-colors: active) { .laptop-2, .steps li::before, .steps li::after { display: none !important; } }