/* MXonnowell v0.3.09 — 360° ekosistem ve sayfalar arası akış. Referans omurgayı bozmayan kompakt bağlantı şeridi. */
.mx309-flow{position:relative;border-top:1px solid #e5edf4;border-bottom:1px solid #e5edf4;background:#f8fbfd;padding:24px 0 25px}
.mx309-flow.is-expanded{padding:34px 0 36px;background:linear-gradient(180deg,#f8fbfd 0%,#fff 100%)}
.mx309-flow__head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:16px}
.mx309-flow__eyebrow{display:block;margin:0 0 6px;color:#0874cf;font-size:10px;font-weight:900;letter-spacing:.16em}
.mx309-flow__head h2{margin:0;color:#0b376f;font-size:clamp(21px,2.1vw,30px);line-height:1.12;letter-spacing:-.035em}
.mx309-flow__head p{max-width:720px;margin:7px 0 0;color:#64758a;font-size:12.5px;line-height:1.55}
.mx309-flow__all{display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;min-height:40px;padding:0 15px;border:1px solid #d9e5ef;border-radius:999px;background:#fff;color:#0b376f;font-size:11px;font-weight:850;text-decoration:none;transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease}
.mx309-flow__all b{font-size:16px;font-weight:700}
.mx309-flow__rail{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;min-width:0}
.mx309-flow.is-expanded .mx309-flow__rail{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.mx309-flow__item{position:relative;display:flex;align-items:center;gap:10px;min-width:0;min-height:70px;padding:11px 12px;border:1px solid #e0e9f1;border-radius:15px;background:#fff;color:#183d6c;text-decoration:none;box-shadow:0 5px 16px rgba(25,57,88,.035);transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease,background .18s ease}
.mx309-flow__item i{display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px;border-radius:50%;background:#f2f7fd;color:#0874cf}
.mx309-flow__item i svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.mx309-flow__item span{display:block;min-width:0}
.mx309-flow__item strong,.mx309-flow__item small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mx309-flow__item strong{color:#123c70;font-size:11.8px;line-height:1.25}
.mx309-flow__item small{margin-top:3px;color:#78899c;font-size:9.5px;line-height:1.2}
.mx309-flow__item.is-apex i{background:#f1f7ff;color:#0874cf}
.mx309-flow__item.is-onnowell i{background:#f2faee;color:#3c9b18}
.mx309-flow__item.is-onnowell strong{color:#287810}
.mx309-flow__item.is-mixed i{background:#eef9f8;color:#078b95}
.mx309-flow__item.is-current{border-color:#8dc8ea;background:#f7fcff;box-shadow:0 7px 20px rgba(2,117,191,.08)}
.mx309-flow__item.is-current::after{content:"Bulunduğunuz alan";position:absolute;right:8px;top:6px;color:#0785c7;font-size:7.5px;font-weight:900;letter-spacing:.04em;text-transform:uppercase}
.mx309-flow.is-expanded .mx309-flow__item{min-height:82px;padding:14px}
.mx309-flow.is-expanded .mx309-flow__item i{width:40px;height:40px;flex-basis:40px}
.mx309-flow.is-expanded .mx309-flow__item strong{font-size:13px}.mx309-flow.is-expanded .mx309-flow__item small{font-size:10.5px}
@media (hover:hover) and (pointer:fine){.mx309-flow__all:hover,.mx309-flow__item:hover{transform:translateY(-1px);border-color:#b8d5e8;box-shadow:0 9px 22px rgba(25,57,88,.075)}}
@media (max-width:1100px){.mx309-flow__rail{grid-template-columns:repeat(3,minmax(0,1fr))}.mx309-flow.is-expanded .mx309-flow__rail{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){
  .mx309-flow,.mx309-flow.is-expanded{padding:20px 0 21px}
  .mx309-flow__head{align-items:flex-start;margin-bottom:12px}.mx309-flow__head p{font-size:11.5px}.mx309-flow__all{display:none}
  .mx309-flow__rail,.mx309-flow.is-expanded .mx309-flow__rail{display:flex;gap:10px;overflow-x:auto;padding:1px 1px 6px;scroll-snap-type:x mandatory;overscroll-behavior-inline:contain;scrollbar-width:none}
  .mx309-flow__rail::-webkit-scrollbar{display:none}
  .mx309-flow__item,.mx309-flow.is-expanded .mx309-flow__item{flex:0 0 72%;min-height:68px;padding:10px 11px;scroll-snap-align:start}
  .mx309-flow.is-expanded .mx309-flow__item{flex-basis:78%}
  .mx309-flow__item.is-current::after{font-size:7px}
}
@media (max-width:390px){.mx309-flow__item,.mx309-flow.is-expanded .mx309-flow__item{flex-basis:82%}.mx309-flow__head h2{font-size:20px}}
