/* Tema "metro": beyaz zemin, kalın renkli hatlar, nabız atan duraklar, tramvay, split-flap sefer tablosu, çember hat süreç */
:root{
  --bg:#fff;--ink:#1d1d1b;--ink-2:#5b6270;--line:#e6e8ec;--soft:#f4f5f7;--board:#1d1d1b;
  /* hat üzerinde gidip gelen minik kamyon (yatay: sağa bakar, dikey: aşağı bakar) */
  --mini-truck:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 22'%3E%3Crect x='1.5' y='1.5' width='27' height='14' rx='2' fill='%23fff' stroke='%231d1d1b' stroke-width='2.5'/%3E%3Cpath d='M30 5.5h7l5 6v5H30z' fill='%23e30613' stroke='%231d1d1b' stroke-width='2.5' stroke-linejoin='round'/%3E%3Ccircle cx='9' cy='18' r='3.4' fill='%231d1d1b' stroke='%23fff' stroke-width='1.5'/%3E%3Ccircle cx='35' cy='18' r='3.4' fill='%231d1d1b' stroke='%23fff' stroke-width='1.5'/%3E%3C/svg%3E");
  --mini-truck-v:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 44'%3E%3Crect x='4.5' y='1.5' width='15' height='26' rx='2' fill='%23fff' stroke='%231d1d1b' stroke-width='2.5'/%3E%3Cpath d='M5.5 30h13v7l-4 5h-5l-4-5z' fill='%23e30613' stroke='%231d1d1b' stroke-width='2.5' stroke-linejoin='round'/%3E%3Ccircle cx='3.5' cy='9' r='3' fill='%231d1d1b'/%3E%3Ccircle cx='20.5' cy='9' r='3' fill='%231d1d1b'/%3E%3Ccircle cx='3.5' cy='35' r='3' fill='%231d1d1b'/%3E%3Ccircle cx='20.5' cy='35' r='3' fill='%231d1d1b'/%3E%3C/svg%3E");
  --red:#e30613;--blue:#0072bc;--green:#00a650;--yellow:#ffcd00;--purple:#8e3c97;--orange:#f39200;--pink:#e5007e;--teal:#00a9a5;
  --f-head:"Lexend",system-ui,sans-serif;--f-body:"Nunito",system-ui,sans-serif;
  --stripe:linear-gradient(90deg,var(--red) 0 20%,var(--blue) 0 40%,var(--green) 0 60%,var(--yellow) 0 80%,var(--purple) 0);
}
::selection{background:var(--yellow);color:var(--ink)}
body{background:var(--bg)}
.progress{background:var(--stripe);height:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hl-txt{background:linear-gradient(transparent 60%,var(--yellow) 60% 92%,transparent 92%)}

/* Butonlar */
.btn{border-radius:99px;font-family:var(--f-head);font-weight:600}
.btn-main{background:var(--ink);color:#fff}
.btn-main:hover{background:var(--red);transform:translateY(-3px)}
.btn-wa:hover{transform:translateY(-3px)}

/* Üst menü */
.top{background:rgba(255,255,255,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:var(--ink)}
.top::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--stripe)}
.top.scrolled{box-shadow:0 10px 30px -20px rgba(0,0,0,.35)}
.logo{font-family:var(--f-head);font-weight:800;letter-spacing:-.01em}
.logo-mark{border-radius:50%;background:#fff;border:6px solid var(--red);color:var(--ink);box-shadow:0 0 0 2px #fff,0 0 0 4px var(--ink);transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.logo-mark svg{width:16px;height:16px}
.logo:hover .logo-mark{transform:rotate(-25deg) scale(1.06)}
.nav a.link{position:relative;color:var(--ink);font-family:var(--f-head);font-weight:500}
.nav a.link::after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:5px;border-radius:9px;background:var(--c,var(--red));transform:scaleX(0);transform-origin:left;transition:transform .35s}
.nav a.link:hover::after{transform:none}
.nav a.link:nth-child(1){--c:var(--red)}.nav a.link:nth-child(2){--c:var(--blue)}.nav a.link:nth-child(3){--c:var(--green)}.nav a.link:nth-child(4){--c:var(--orange)}.nav a.link:nth-child(5){--c:var(--purple)}
.top .btn-call{background:var(--ink);color:#fff;padding:11px 18px;font-size:.92rem}
.top .btn-call:hover{background:var(--red)}

/* Bölüm başlıkları */
.sec{padding:110px 0}
.sec-head{max-width:780px;margin-bottom:54px}
.sec-head h2,.intro-head h2{font-family:var(--f-head);font-weight:700;font-size:clamp(2rem,4.4vw,3.4rem);letter-spacing:-.025em;line-height:1.08;margin-top:14px}
.sec-head p{color:var(--ink-2);margin-top:16px;font-size:1.08rem}
.eyebrow{display:inline-flex;align-items:center;gap:12px;font-family:var(--f-head);font-size:.8rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.eyebrow::before{content:"";width:44px;height:16px;background:radial-gradient(circle at 8px 8px,#fff 0 3.5px,var(--ink) 4px 7.5px,transparent 8px),linear-gradient(var(--c,var(--red)),var(--c,var(--red))) 4px 50%/40px 7px no-repeat;border-radius:9px}

/* ---------- Hero ---------- */
.hero{min-height:100svh;padding:130px 0 150px;overflow:hidden;display:flex;flex-direction:column;justify-content:center;background:radial-gradient(circle,#dde1e7 1.2px,transparent 1.6px) 0 0/26px 26px,#fff}
.hero-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hl{fill:none;stroke:var(--c);stroke-width:16;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:draw 2.4s var(--dl,0s) cubic-bezier(.6,0,.2,1) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.hst circle{fill:#fff;stroke:var(--ink);stroke-width:5;transform-box:fill-box;transform-origin:center;scale:0;animation:pop .5s 2.2s cubic-bezier(.3,1.6,.5,1) forwards}
@keyframes pop{to{scale:1}}
.hero-in{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:64px;align-items:center}
.kicker{display:inline-flex;align-items:center;gap:12px;font-family:var(--f-head);font-weight:600;font-size:.95rem;padding:8px 16px 8px 10px;border-radius:99px;background:#fff;box-shadow:0 0 0 2px var(--ink)}
.mk{position:relative;width:18px;height:18px;border-radius:50%;background:#fff;border:5px solid var(--red)}
.mk::after,.ml-stops i::after,.sv-dot::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:3px solid var(--c,var(--red));animation:ring 2.2s ease-out infinite}
@keyframes ring{from{transform:scale(.8);opacity:.9}to{transform:scale(2);opacity:0}}

/* Split-flap başlık */
.flap-h1{margin:26px 0 28px;font-family:var(--f-head)}
.flap-h1:not(.flapped) .fl-row{display:block;font-weight:800;text-transform:uppercase;letter-spacing:-.02em;line-height:1}
.flap-h1:not(.flapped) .fl-row.big{font-size:clamp(3rem,8vw,6.2rem)}
.flap-h1:not(.flapped) .fl-row:not(.big){font-size:clamp(1.4rem,3vw,2.4rem);margin-top:10px}
.flap-h1.flapped{font-size:0}
.fl-row{display:block;--w:clamp(20px,2.3vw,31px);--g:3px}
.fl-row.big{--w:clamp(38px,6vw,76px);--g:5px}
.fl-row+.fl-row{margin-top:12px}
.tiles{display:flex;flex-wrap:wrap;gap:var(--g) calc(var(--w) * .5)}
.word{display:inline-flex;gap:var(--g)}
.t{position:relative;display:inline-grid;place-items:center;width:var(--w);height:calc(var(--w) * 1.32);border-radius:calc(var(--w) * .12);background:linear-gradient(#2e2e2b 50%,#1d1d1b 50%);color:#fff;font:700 calc(var(--w) * .74)/1 var(--f-head);box-shadow:0 3px 0 #000,inset 0 1px 0 rgba(255,255,255,.1);perspective:240px;overflow:hidden}
.t::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(0,0,0,.7);box-shadow:0 1px 0 rgba(255,255,255,.06)}
.t b{display:block;font-weight:700;backface-visibility:hidden}
.t.fa b{animation:fa .11s ease-out}
.t.fb b{animation:fb .11s ease-out}
@keyframes fa{from{transform:rotateX(88deg);opacity:.4}}
@keyframes fb{from{transform:rotateX(-88deg);opacity:.4}}
.big .t{color:var(--yellow)}

.lead{font-size:1.12rem;color:var(--ink-2);max-width:560px}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}

.hero-r{position:relative;padding:0 0 70px}
.window{position:relative;margin:0 0 0 40px;padding:14px}
.win-img{border-radius:16px;overflow:hidden;aspect-ratio:1/1}
.win-img img{width:100%;height:100%;object-fit:cover;animation:kb 22s ease-in-out infinite alternate}
@keyframes kb{to{transform:scale(1.1)}}
.win-line{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.win-line rect{fill:none;stroke:var(--blue);stroke-width:12px;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;animation:draw 2.6s .5s cubic-bezier(.6,0,.2,1) forwards}
.window::before,.window::after{content:"";position:absolute;z-index:2;width:26px;height:26px;border-radius:50%;background:#fff;border:6px solid var(--ink);scale:0;animation:pop .5s 2.6s cubic-bezier(.3,1.6,.5,1) forwards}
.window::before{top:-6px;right:22%}.window::after{bottom:-6px;left:18%}
.peron{position:absolute;top:30px;right:30px;z-index:2;background:var(--blue);color:#fff;font:600 .82rem var(--f-head);padding:7px 14px;border-radius:8px;box-shadow:0 6px 16px -6px rgba(0,0,0,.4)}
.board{position:absolute;left:-30px;bottom:0;width:min(410px,92%);z-index:3;background:var(--board);color:#fff;border-radius:18px;padding:16px 18px 14px;font-family:var(--f-head);box-shadow:0 30px 60px -24px rgba(0,0,0,.55)}
.board-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.board-top b{color:var(--yellow);font-size:.78rem;letter-spacing:.24em;text-transform:uppercase}
.clock{font-weight:700;color:var(--yellow);font-variant-numeric:tabular-nums;letter-spacing:.06em}
.board-head,.board-row{display:grid;grid-template-columns:50px 1fr auto;align-items:center;gap:10px}
.board-head{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:#8d929a;padding-bottom:6px}
.board-row{padding:8px 0;border-top:1px dashed #3d3d3a;font-size:.88rem;font-weight:600;letter-spacing:.05em;animation:rowin .6s calc(var(--i) * .16s + .7s) both}
@keyframes rowin{from{opacity:0;transform:translateX(-14px)}}
.board-row em{font-style:normal;font-size:.76rem;color:#5ee38a;letter-spacing:.1em}
.bp{display:grid;place-items:center;height:24px;border-radius:99px;background:var(--c);color:var(--t);font-size:.76rem;font-weight:800}
.board-next{display:flex;align-items:center;gap:10px;margin-top:8px;padding-top:12px;border-top:1px solid #3d3d3a}
.blink{flex:none;width:9px;height:9px;border-radius:50%;background:#5ee38a;animation:blink 1.2s steps(2) infinite}
@keyframes blink{50%{opacity:.15}}
.cycle{display:flex;gap:2px;--w:17px;min-height:20px;font-weight:700;color:var(--yellow);letter-spacing:.06em}
.cycle .t{background:linear-gradient(#34342f 50%,#272724 50%);color:var(--yellow);box-shadow:none;font-size:12.5px}

/* Yol ve nakliye kamyonu (duraklarda kısa mola verir) */
.track{position:absolute;left:0;right:0;bottom:30px;height:96px;pointer-events:none}
.rail{position:absolute;left:0;right:0;bottom:0;height:26px;background:repeating-linear-gradient(90deg,#fff 0 34px,transparent 34px 64px) 0 50%/100% 3px no-repeat,#3a3f46;border-top:3px solid var(--ink);border-bottom:3px solid var(--ink)}
.track>i{position:absolute;bottom:38px;left:var(--x);width:18px;height:18px;margin-left:-9px;border-radius:50%;background:#fff;border:5px solid var(--red);z-index:1}
.track>i::after{content:"";position:absolute;left:50%;top:100%;width:3px;height:12px;margin-left:-1.5px;background:var(--ink)}
.tram{position:absolute;left:0;bottom:9px;width:210px;height:auto;z-index:2;animation:tram 18s ease-in-out infinite;filter:drop-shadow(0 8px 6px rgba(0,0,0,.18))}
.tram .wh{transform-box:fill-box;transform-origin:center}
@keyframes tram{0%{transform:translateX(-240px)}24%,32%{transform:translateX(calc(38vw - 105px))}62%,70%{transform:translateX(calc(88vw - 105px))}100%{transform:translateX(calc(100vw + 30px))}}
.headlight{animation:blink 1s steps(2) infinite}

/* Kayan şerit */
.ticker{background:var(--ink);color:#fff;padding:15px 0;font-family:var(--f-head);font-weight:600;text-transform:uppercase;letter-spacing:.04em;--mq-speed:40s;--mq-gap:34px}
.ticker span{display:inline-flex;align-items:center;gap:10px;white-space:nowrap}
.ticker b{background:var(--c);color:var(--t);font-size:.78rem;padding:3px 10px;border-radius:99px}

/* ---------- Giriş ---------- */
.intro-in{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:70px;align-items:start}
.intro-head{position:sticky;top:110px}
.points{list-style:none;padding:0;margin:34px 0 0;display:grid;gap:12px}
.points li{display:flex;align-items:center;gap:14px;font-family:var(--f-head);font-weight:500;font-size:1rem}
.ix{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:#fff;border:4px solid var(--ink);box-shadow:0 0 0 4px var(--c)}
.ix svg{width:20px;height:20px}
.stops-v{list-style:none;margin:0;padding:0 0 0 64px;position:relative}
.stops-v::before,.stops-v::after{content:"";position:absolute;left:18px;top:14px;bottom:14px;width:12px;border-radius:9px;background:var(--line)}
.stops-v::after{background:linear-gradient(var(--red),var(--blue),var(--green));transform:scaleY(calc(var(--p,0) * 1.6));transform-origin:top}
.stops-v li{position:relative;margin-bottom:34px}
.stops-v li:last-child{margin-bottom:0}
.sv-dot{position:absolute;left:-58px;top:2px;width:36px;height:36px;border-radius:50%;background:#fff;border:7px solid var(--ink);z-index:1}
.sv-dot::after{border-color:var(--c)}
.sv-k{display:inline-block;font:700 .76rem var(--f-head);letter-spacing:.16em;text-transform:uppercase;color:#fff;background:var(--c);padding:4px 12px;border-radius:99px;margin:4px 0 10px}
.stops-v p{font-size:1.08rem}

/* ---------- Hizmetler ---------- */
.svc-sec{background:var(--soft)}
.svc-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.svc{position:relative;padding:22px 22px 26px;border-radius:22px;background:#fff;border:2px solid var(--line);border-bottom:6px solid var(--c);transition:border-color .35s,box-shadow .35s,transform .35s}
.svc:hover{border-color:var(--c);transform:translateY(-6px);box-shadow:0 26px 40px -26px var(--c)}
.svc-top{display:flex;justify-content:space-between;align-items:center}
.svc-pill{background:var(--c);color:var(--t);font:800 1rem var(--f-head);padding:6px 16px;border-radius:99px}
.svc-ic{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;border:3px solid var(--ink);transition:transform .5s}
.svc:hover .svc-ic{transform:rotate(-12deg)}
.svc-ic svg{width:22px;height:22px}
.svc-track{position:relative;display:flex;justify-content:space-between;align-items:center;height:24px;margin:22px 0 18px}
.svc-track::before{content:"";position:absolute;left:0;right:0;top:50%;height:8px;margin-top:-4px;border-radius:9px;background:var(--c);transform:scaleX(0);transform-origin:left;transition:transform 1.1s .35s cubic-bezier(.6,0,.2,1)}
.svc.in .svc-track::before{transform:none}
.svc-track i{position:relative;z-index:1;width:18px;height:18px;border-radius:50%;background:#fff;border:4px solid var(--ink)}
.svc-track b{position:absolute;z-index:2;top:50%;left:0;width:30px;height:15px;margin-top:-9px;background:var(--mini-truck) center/contain no-repeat;animation:shuttle 5s ease-in-out infinite alternate;animation-delay:calc(var(--d) * -1.2s)}
@keyframes shuttle{0%,12%{left:0}88%,100%{left:calc(100% - 30px)}}
.svc h3{font-family:var(--f-head);font-weight:700;font-size:1.18rem;line-height:1.25;margin-bottom:8px}
.svc p{color:var(--ink-2);font-size:.95rem;line-height:1.6}

/* ---------- İşlerimiz ---------- */
.screens{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.screen{margin:0;padding:10px;border-radius:20px;background:var(--board);box-shadow:0 30px 50px -30px rgba(0,0,0,.6)}
.scr-top{display:flex;justify-content:space-between;align-items:center;padding:4px 6px 10px;font-family:var(--f-head)}
.scr-top b{background:var(--c);color:#fff;font-size:.78rem;padding:3px 12px;border-radius:99px}
.scr-top span{display:inline-flex;align-items:center;gap:8px;color:#9aa0a8;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase}
.scr-top span::before{content:"";width:8px;height:8px;border-radius:50%;background:#5ee38a;animation:blink 1.2s steps(2) infinite}
.scr{aspect-ratio:4/5;border-radius:12px;overflow:hidden}
.screen figcaption{overflow:hidden;white-space:nowrap;margin:10px 4px 2px;color:var(--yellow);font:500 .86rem var(--f-head)}
.screen figcaption span{display:inline-block;padding-left:100%;animation:cap 13s linear infinite}
@keyframes cap{to{transform:translateX(-100%)}}
.train-wrap{margin-top:80px}
.train-btns{display:flex;justify-content:flex-end;gap:10px;margin-bottom:10px}
.train-btns button{width:50px;height:50px;border-radius:50%;border:3px solid var(--ink);background:#fff;color:var(--ink);cursor:pointer;display:grid;place-items:center;transition:background .3s,color .3s}
.train-btns button:hover{background:var(--ink);color:#fff}
.train-btns svg{width:22px;height:22px}
/* Kasaların altında asfalt yol */
.consist{display:flex;align-items:stretch;padding:10px 4px 44px;background:repeating-linear-gradient(90deg,#fff 0 30px,transparent 30px 58px) 0 calc(100% - 11px)/100% 3px no-repeat,linear-gradient(#3a3f46,#3a3f46) 0 100%/100% 24px no-repeat}
.car{flex:0 0 300px;position:relative;margin:0 0 0 18px;padding:34px 14px 30px;border:3px solid var(--ink);border-radius:20px;background:linear-gradient(#fff 0 calc(100% - 22px),var(--red) calc(100% - 22px) calc(100% - 14px),#fff calc(100% - 14px))}
.car::before{content:"";position:absolute;left:-21px;bottom:34px;width:18px;height:7px;background:var(--ink);border-radius:2px}
.car::after{content:"";position:absolute;left:22px;right:22px;bottom:-21px;height:22px;background:radial-gradient(circle at 11px 11px,var(--ink) 0 8px,#c7ccd3 8.5px 10.5px,transparent 11px) 0 0/22px 22px no-repeat,radial-gradient(circle at 11px 11px,var(--ink) 0 8px,#c7ccd3 8.5px 10.5px,transparent 11px) 28px 0/22px 22px no-repeat,radial-gradient(circle at 11px 11px,var(--ink) 0 8px,#c7ccd3 8.5px 10.5px,transparent 11px) 100% 0/22px 22px no-repeat,radial-gradient(circle at 11px 11px,var(--ink) 0 8px,#c7ccd3 8.5px 10.5px,transparent 11px) calc(100% - 28px) 0/22px 22px no-repeat}
.car-no{position:absolute;top:9px;left:16px;font:700 .72rem var(--f-head);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.car-win{border-radius:12px;overflow:hidden;aspect-ratio:4/3;background:#0f2c4c}
.car-win img{width:100%;height:100%;object-fit:cover;pointer-events:none;transition:transform 1s}
.car:hover .car-win img{transform:scale(1.06)}
.car figcaption{font:500 .88rem/1.4 var(--f-head);margin-top:12px}
/* Kasaları çeken kamyon kabini (sola bakar) */
.loco{flex:0 0 190px;margin:0;border-radius:64px 16px 16px 26px;background:linear-gradient(var(--red) 0 calc(100% - 22px),#fff calc(100% - 22px) calc(100% - 14px),var(--red) calc(100% - 14px));padding:0}
.loco::before{content:none}
/* kabinde iki büyük teker */
.loco::after{left:18px;right:18px;bottom:-26px;height:36px;background:radial-gradient(circle at 18px 18px,var(--ink) 0 14px,#c7ccd3 14.5px 17px,transparent 17.5px) 0 0/36px 36px no-repeat,radial-gradient(circle at 18px 18px,var(--ink) 0 14px,#c7ccd3 14.5px 17px,transparent 17.5px) 100% 0/36px 36px no-repeat}
.loco-face{position:absolute;inset:0}
.loco-face::before{content:"";position:absolute;top:26px;left:22px;right:60px;height:86px;border-radius:44px 8px 8px 8px;background:linear-gradient(160deg,#bfe3ff,#6fa8d6 70%);border:3px solid var(--ink)}
.loco-face::after{content:"";position:absolute;right:16px;top:30px;width:30px;height:80px;border:3px solid var(--ink);border-radius:6px;background:linear-gradient(var(--ink),var(--ink)) 6px 38px/12px 3px no-repeat}
.loco .lamp.l{left:auto;right:auto;left:10px;bottom:46px;width:14px;height:10px;border-radius:3px}
.loco-no{position:absolute;top:150px;left:22px;background:#fff;color:var(--red);font:800 1rem var(--f-head);padding:4px 14px;border-radius:99px}
.loco-dest{position:absolute;top:192px;left:18px;right:18px;background:var(--board);color:var(--yellow);font:700 .8rem var(--f-head);letter-spacing:.14em;text-align:center;padding:7px 4px;border-radius:6px}
.lamp{position:absolute;bottom:40px;width:16px;height:16px;border-radius:50%;background:#fff4b0;box-shadow:0 0 16px 4px rgba(255,220,90,.8);animation:blink 1.6s steps(2) infinite}
.lamp.l{left:22px}.lamp.r{right:22px;animation-delay:.8s}

/* ---------- Süreç (çember hat) ---------- */
.loop-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:60px;align-items:center}
.loop-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.loop-list button{width:100%;display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:start;text-align:left;font:inherit;color:inherit;background:none;border:0;padding:14px 16px;border-radius:16px;cursor:pointer;transition:background .35s}
.loop-list button:hover{background:var(--soft)}
.loop-list b{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;border:5px solid var(--purple);background:#fff;font:800 1rem var(--f-head);transition:background .35s,color .35s}
.loop-list strong{display:block;font:700 1.12rem var(--f-head);margin-top:6px}
.loop-list em{display:block;font-style:normal;color:var(--ink-2);font-size:.95rem;margin-top:4px}
.loop-list li.on button{background:#f5eef7}
.loop-list li.on b{background:var(--purple);color:#fff}
.loop{position:relative;width:100%;max-width:470px;margin:0 auto;aspect-ratio:1}
.loop svg{width:100%;height:100%;display:block;overflow:visible}
.ring-bg{fill:none;stroke:var(--soft);stroke-width:28}
.ring{fill:none;stroke:var(--purple);stroke-width:28;stroke-dasharray:1;stroke-dashoffset:1;transform:rotate(-90deg);transform-box:view-box;transform-origin:200px 200px}
.loop.in .ring{animation:draw 2s .2s cubic-bezier(.6,0,.2,1) forwards}
.ring-in{fill:none;stroke:#d7dae0;stroke-width:2;stroke-dasharray:4 6}
.loop-train{transform:rotate(var(--a,0deg));transform-box:view-box;transform-origin:200px 200px;transition:transform 1.2s cubic-bezier(.6,0,.3,1)}
.loop-train rect{fill:var(--ink)}
.loop-train .lw{fill:var(--yellow)}
.lp{fill:none;stroke:var(--purple);stroke-width:4;opacity:0;transform-box:fill-box;transform-origin:center}
.lst.on .lp{animation:lpulse 1.8s ease-out infinite}
@keyframes lpulse{from{opacity:.8;transform:scale(1)}to{opacity:0;transform:scale(1.9)}}
.lc{fill:#fff;stroke:var(--ink);stroke-width:6;transition:fill .4s}
.lst text{font:800 14px var(--f-head);text-anchor:middle;fill:var(--ink);transition:fill .4s}
.lst.on .lc{fill:var(--purple)}
.lst.on text{fill:#fff}
.loop-c{position:absolute;inset:0;display:grid;place-content:center;text-align:center;padding:0 22%;pointer-events:none}
.lc-k{font:700 .74rem var(--f-head);letter-spacing:.24em;text-transform:uppercase;color:var(--ink-2)}
.lc-n{font:800 clamp(3.4rem,8vw,5.4rem)/1 var(--f-head);color:var(--purple)}
.lc-t{font:700 1.2rem/1.2 var(--f-head);margin-top:6px}
.loop.pop .loop-c{animation:cpop .5s cubic-bezier(.3,1.5,.5,1)}
@keyframes cpop{from{transform:scale(.85);opacity:.3}}

/* ---------- Mahalleler (hat haritası) ---------- */
.map-sec{background:radial-gradient(circle,#dde1e7 1.2px,transparent 1.6px) 0 0/26px 26px,#fff}
.map{display:grid;gap:26px}
.mline{padding:22px 26px 26px;border-radius:24px;background:#fff;border:2px solid var(--line)}
.ml-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ml-pill{background:var(--c);color:#fff;font:800 1rem var(--f-head);padding:6px 16px;border-radius:99px}
.ml-head span{font:700 1.15rem var(--f-head)}
.ml-head em{margin-left:auto;font-style:normal;color:var(--ink-2);font-size:.92rem;font-weight:700}
.ml-stops{list-style:none;margin:24px 0 0;padding:0;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));position:relative}
.ml-stops::before{content:"";position:absolute;left:calc(50% / var(--n));right:calc(50% / var(--n));top:11px;height:14px;border-radius:9px;background:var(--c);transform:scaleX(0);transform-origin:left;transition:transform 1.6s .2s cubic-bezier(.6,0,.2,1)}
.mline.in .ml-stops::before{transform:none}
.ml-stops::after{content:"";position:absolute;z-index:2;top:4px;left:calc(50% / var(--n));width:44px;height:22px;margin-left:-22px;background:var(--mini-truck) center/contain no-repeat;opacity:0;transition:opacity .5s 1.6s;animation:mlgo var(--sp) ease-in-out infinite alternate}
.mline.in .ml-stops::after{opacity:1}
@keyframes mlgo{0%,8%{left:calc(50% / var(--n))}92%,100%{left:calc(100% - 50% / var(--n))}}
.ml-stops li{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;--c2:var(--c)}
.ml-stops i{position:relative;z-index:1;width:36px;height:36px;border-radius:50%;background:#fff;border:7px solid var(--ink);scale:0;transition:scale .5s calc(var(--i) * .12s + .5s) cubic-bezier(.3,1.6,.5,1)}
.mline.in .ml-stops i{scale:1}
.ml-stops i::after{animation-delay:calc(var(--i) * .35s)}
.ml-stops span{font:600 .95rem/1.25 var(--f-head);padding:0 4px;overflow-wrap:anywhere}
.ml-stops li:hover i{background:var(--c)}

/* ---------- SSS + form ---------- */
.duo{background:var(--soft)}
.duo-in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;align-items:start}
.faq details{border-bottom:2px solid var(--line);--c:var(--red)}
.faq details:nth-of-type(2){--c:var(--blue)}.faq details:nth-of-type(3){--c:var(--green)}.faq details:nth-of-type(4){--c:var(--orange)}.faq details:nth-of-type(5){--c:var(--purple)}.faq details:nth-of-type(6){--c:var(--pink)}
.faq summary{display:flex;align-items:center;gap:16px;padding:20px 0;font:600 1.06rem/1.35 var(--f-head)}
.faq summary::before{content:"";flex:none;width:14px;height:14px;border-radius:50%;background:#fff;border:4px solid var(--c)}
.faq summary span{flex:1}
.pm{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;border:3px solid var(--ink);background:#fff;transition:transform .4s,background .3s,border-color .3s,color .3s}
.pm svg{width:16px;height:16px}
.faq details[open] .pm{transform:rotate(45deg);background:var(--c);border-color:var(--c);color:#fff}
.faq details p{color:var(--ink-2);padding:0 54px 22px 30px;animation:fadeup .5s}
@keyframes fadeup{from{opacity:0;transform:translateY(-8px)}}
#teklif{position:sticky;top:100px;scroll-margin-top:100px}
.quote{position:relative;overflow:hidden;padding:30px;border-radius:26px;background:linear-gradient(140deg,#262624,#1d1d1b);color:#fff;box-shadow:0 40px 70px -36px rgba(0,0,0,.6)}
.quote::before{content:"";position:absolute;right:-100px;top:-100px;width:230px;height:230px;background:linear-gradient(135deg,transparent 38%,var(--red) 38% 45%,var(--yellow) 45% 52%,var(--green) 52% 59%,var(--blue) 59% 66%,transparent 66%);pointer-events:none}
.quote::after{content:"";position:absolute;left:30px;top:30px;width:44px;height:32px;border-radius:7px;background:linear-gradient(135deg,#f6d77a,#c99b2e);box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)}
.quote h3{position:relative;font:700 1.6rem var(--f-head);margin-top:48px}
.quote .sub{position:relative;color:#b9bec6;margin:6px 0 22px;font-size:.95rem}
.field{display:block;margin-bottom:14px;position:relative}
.field span{display:block;font:700 .72rem var(--f-head);letter-spacing:.16em;text-transform:uppercase;color:#9aa0a8;margin-bottom:6px}
.field input,.field select{width:100%;font:inherit;padding:12px 14px;border-radius:12px;border:2px solid #3d3d3a;background:#2c2c29;color:#fff;color-scheme:dark;transition:border-color .3s}
.field input:focus,.field select:focus{outline:0;border-color:var(--yellow)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.quote .btn-wa{width:100%;margin-top:6px}
.quote .note{font-size:.8rem;color:#9aa0a8;text-align:center;margin-top:12px}

/* ---------- Son çağrı ---------- */
.final{padding:100px 0 110px;background:#fff}
.final-board{position:relative;padding:54px 30px;border-radius:30px;background:var(--board);color:#fff;text-align:center;box-shadow:0 40px 80px -40px rgba(0,0,0,.6);overflow:hidden}
.final-board::after{content:"";position:absolute;left:0;right:0;bottom:0;height:8px;background:var(--stripe)}
.fb-k{font:700 .84rem var(--f-head);letter-spacing:.3em;text-transform:uppercase;color:var(--yellow)}
.flap-h1.small{margin:22px 0 0}
.flap-h1.small .fl-row{--w:clamp(22px,4.4vw,58px);--g:4px}
.flap-h1.small .tiles{justify-content:center}
.flap-h1.small:not(.flapped) .fl-row{font-size:clamp(2rem,6vw,4rem)}
.fb-sub{max-width:520px;margin:22px auto 0;color:#b9bec6}
.final-phone{display:inline-flex;align-items:center;gap:12px;margin-top:30px;padding:16px 30px;border-radius:99px;background:var(--yellow);color:var(--ink);text-decoration:none;font:800 clamp(1.2rem,2.6vw,1.7rem) var(--f-head);transition:transform .3s,background .3s}
.final-phone svg{width:26px;height:26px}
.final-phone:hover{background:#fff;transform:translateY(-4px)}

/* ---------- Alt bilgi ---------- */
.foot{position:relative;background:var(--soft);color:var(--ink-2);padding:80px 0 30px}
.foot::before{content:"";position:absolute;left:0;right:0;top:0;height:8px;background:var(--stripe)}
.foot-in{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:50px}
.foot .logo{color:var(--ink);margin-bottom:16px}
.foot p{font-size:.93rem;max-width:380px}
.foot h4{font-family:var(--f-head);color:var(--ink);font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;margin-bottom:16px}
.foot ul{list-style:none;padding:0;margin:0;display:grid;gap:9px;font-size:.93rem}
.foot a{text-decoration:none}
.foot a:hover{color:var(--red)}
.copy{margin-top:50px;padding-top:24px;border-top:1px solid #dfe2e7;font-size:.84rem}
.mbar{background:rgba(255,255,255,.96);backdrop-filter:blur(12px);border-top:4px solid transparent;border-image:var(--stripe) 1}
.mbar .btn-call{background:var(--ink);color:#fff}

/* ---------- Duyarlı ---------- */
@media (max-width:1100px){
  .svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:980px){
  .loop-in{grid-template-columns:minmax(0,1fr);gap:30px}
  .loop{order:-1;max-width:380px}
}
@media (max-width:900px){
  .top .nav{background:#fff;box-shadow:0 16px 30px -20px rgba(0,0,0,.35)}
  .hero{min-height:0;padding:110px 0 130px}
  .hero-lines{display:none}
  .hero-in,.intro-in,.duo-in{grid-template-columns:minmax(0,1fr);gap:44px}
  .hero-r{padding:0}
  .window{margin:0;padding:10px}
  .board{position:relative;left:auto;bottom:auto;width:auto;margin:-40px 10px 0}
  .intro-head,#teklif{position:static}
  .sec{padding:80px 0}
  .screens{grid-template-columns:minmax(0,1fr);max-width:400px;margin:0 auto}
  .quote{padding:26px 20px}
  .quote::after{left:20px;top:26px}
  .row2{grid-template-columns:1fr}
  .foot-in{grid-template-columns:1fr;gap:34px}
  .faq details p{padding:0 0 20px 30px}
  .stops-v{padding-left:56px}
  .sv-dot{left:-54px;width:32px;height:32px;border-width:6px}
  .stops-v::before,.stops-v::after{left:16px;width:10px}
}
@media (max-width:760px){
  .ml-stops{grid-template-columns:minmax(0,1fr);grid-auto-rows:1fr;margin-top:18px}
  .ml-stops::before{left:11px;right:auto;top:calc(50% / var(--n));bottom:calc(50% / var(--n));width:14px;height:auto;transform:scaleY(0);transform-origin:top}
  .mline.in .ml-stops::before{transform:none}
  .ml-stops::after{top:calc(50% / var(--n));left:6px;width:24px;height:44px;margin:-22px 0 0;background-image:var(--mini-truck-v);animation-name:mlgo-v}
  @keyframes mlgo-v{0%,8%{top:calc(50% / var(--n))}92%,100%{top:calc(100% - 50% / var(--n))}}
  .ml-stops li{flex-direction:row;text-align:left;gap:14px;padding:6px 0}
  .ml-stops i{width:32px;height:32px;border-width:6px;flex:none;margin-left:2px}
  .ml-stops span{font-size:1rem}
  .mline{padding:18px 18px 18px}
}
@media (max-width:560px){
  .svc-grid{grid-template-columns:minmax(0,1fr)}
  .car{flex-basis:250px}
  .loco{flex-basis:150px}
  .loco-dest{font-size:.7rem}
  .cycle{--w:14px}
  .cycle .t{font-size:10px}
  .board{margin:-30px 0 0;padding:14px 14px 12px}
  .board-head,.board-row{grid-template-columns:44px 1fr auto;gap:8px}
  .cta .btn{flex:1 1 140px;padding:15px 14px}
  .tram{width:170px}
  .flap-h1 .fl-row.big{--w:min(42px,calc((100vw - 76px) / 7))}
  .flap-h1:not(.small) .fl-row:not(.big){--w:min(27px,calc((100vw - 90px) / 9))}
  .final-board{padding:44px 18px}
}