/* OTOMOBİN™ Phase III visual identity: Blue #0878B8 · Deep #073B63 · Digital #2D9CDB · Ice #EAF5FB · Text #17212B */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
:root{--om-blue:#0878B8;--om-deep:#073B63;--om-digital:#2D9CDB;--om-ice:#EAF5FB}
html,body,button,input,textarea,[class]{font-family:'Inter','GT Walsheim Wero',system-ui,sans-serif!important}
h1,h2,h3,[class*=title]{font-weight:800!important;letter-spacing:-.02em}
body{background:var(--om-ice);color:#17212B}
/* calm brand backdrop instead of Wero gradient (brief: avoid heavy gradients) */
.app__background{background:linear-gradient(160deg,#EAF5FB 0%,#D3EAF8 100%)!important;animation:none!important}
/* hand / plane / puzzle / card lotties: recolor to brand blue, keep shading */
svg[viewBox] g[clip-path],.lottie svg,[class*=lottie] svg,[class*=lottie] canvas,[class*=hands] canvas,[class*=hands] svg,[class*=puzzle] svg,[class*=airplane] svg{filter:grayscale(1) sepia(1) hue-rotate(170deg) saturate(3.2) brightness(.95)}
/* shared-line graphic device under headings */
[class*=top-title]::after,[class*=title]>span:last-child:not(:empty)::after{content:none}
::selection{background:var(--om-blue);color:#fff}
/* every remaining lottie (banks, wipe transition, puzzle, cards, fist bump) -> brand blue */
[class*=animation] svg,[class*=animation-container] svg,.image-container svg,.page-transition svg,.block__faq-animation svg,.cards-block__card-visual svg{filter:grayscale(1) sepia(1) hue-rotate(170deg) saturate(3.2) brightness(.95)}
main svg,.page-transition svg,.page-transition{--x:0}main svg,.page-transition svg{filter:grayscale(1) sepia(1) hue-rotate(170deg) saturate(3.2) brightness(.95)}
/* custom illustrations in the same kit style replace the three FAQ lotties (kept on the svg so scroll animation still reveals them) */
.faq-section__animation svg{background:center/contain no-repeat;filter:none!important}
.faq-section__animation svg>*{visibility:hidden}
.faq-section__content-container>:nth-child(1) .faq-section__animation svg{background-image:url(/media/images/kit-car-question.svg)}
.faq-section__content-container>:nth-child(3) .faq-section__animation svg{background-image:url(/media/images/kit-meeting-point.svg)}
.faq-section__content-container>:nth-child(5) .faq-section__animation svg{background-image:url(/media/images/kit-split-cost.svg)}
/* official OTOMOBİN logo: big and centered, docks top-left on scroll */
main svg:not(.faq-section__animation svg),.page-transition svg{filter:grayscale(1) sepia(1) hue-rotate(170deg) saturate(3.2) brightness(.95)}
/* more OTOMOBİN kit illustrations: Shared Line, verified profile, empty seat */
.stopwatch__animation-container svg,.speedometer__animation-container svg,.puzzle-section .image-container svg{background:center/contain no-repeat;filter:none!important}
.stopwatch__animation-container svg>*,.speedometer__animation-container svg>*,.puzzle-section .image-container svg>*{visibility:hidden}
.stopwatch__animation-container svg{background-image:url(/media/images/kit-shared-line.svg)}
.speedometer__animation-container svg{background-image:url(/media/images/kit-verified-shield.svg)}
.puzzle-section .image-container svg{background-image:url(/media/images/kit-empty-seat.svg)}
.hero__sticker-container,.hero__sticker{visibility:hidden!important;pointer-events:none}
/* calmer hero: smaller headline, no extra decorative strokes */
.hero__title{font-size:clamp(40px,7.2vw,104px)!important;line-height:1.02!important;letter-spacing:-.03em}
.hero__lines-animation-holder,.hero__stars-animation-holder{visibility:hidden!important}
.hero__hands-animation-holder{opacity:.85;transform:scale(.85);transform-origin:50% 100%}
/* animated cars replace the paper planes (airplane1 = canvas, airplane2 = svg) */
.airplane1__animation-container canvas{visibility:hidden}
.airplane1__animation-container,.airplane2__animation-container{background:center/contain no-repeat}
.airplane1__animation-container{background-image:url(/media/images/kit-anim-car-a.svg)}
.airplane2__animation-container{background-image:url(/media/images/kit-anim-car-b.svg)}
.airplane2__animation-container svg{visibility:hidden}
.airplane1__image-container,.airplane2__image-container{max-width:min(560px,60vw);max-height:360px}
/* ecosystem network replaces the bank pillars */
.airplanes__title .animation-holder{visibility:hidden!important}
/* composed "pickup" scene replaces the two cars/planes; calmer headline */
.airplane1__image-container,.airplane2__image-container{visibility:hidden!important;pointer-events:none}
.airplanes__title{font-size:clamp(34px,5.4vw,84px)!important;line-height:1.04!important}
#om-scene{width:min(1100px,92vw);margin:28px auto 0}#om-scene svg{display:block;width:100%;height:auto;overflow:visible}
/* cards: illustration fits its box, larger calmer copy */
/* ecosystem section: new map + architecture; old hub lottie and logo grid hidden */
.banks-animation-container>svg:not(#om-map){visibility:hidden!important;position:absolute!important;width:1px!important;height:1px!important}
.partners-section__logos{visibility:hidden!important;height:0!important;min-height:0!important;overflow:hidden!important;padding:0!important;margin:0!important}
.banks-animation-container{height:auto!important;aspect-ratio:auto!important}
#om-mapwrap{width:min(1000px,92vw);margin:24px auto}#om-map{display:block;width:100%;height:auto;filter:none!important}
.om-arch{width:min(920px,92vw);margin:40px auto;display:grid;gap:16px;font-family:Inter,Arial,sans-serif}
.om-l{border:4px solid #05131f;border-radius:28px;padding:22px 28px;box-shadow:0 8px 0 #05131f;display:flex;flex-direction:column;gap:6px}
.om-l small{font-weight:800;letter-spacing:.12em;font-size:12px;opacity:.7}.om-l b{font-size:clamp(26px,3.4vw,44px);font-weight:900;letter-spacing:-.03em}.om-l span{font-weight:600}
.om-l1{background:#073B63;color:#fff;margin-right:0}.om-l2{background:#fff;color:#073B63;margin:0 5%}.om-l3{background:#C6E6F7;color:#073B63;margin:0 10%}
.om-l3 div{display:flex;flex-wrap:wrap;gap:10px}.om-l3 i{font-style:normal;font-weight:800;background:#fff;border:3px solid #05131f;border-radius:999px;padding:8px 16px;font-size:15px}
.om-arch p{text-align:center;font-weight:700;color:#073B63;margin:8px 0 0}
#om-map text{font-family:Inter,Arial,sans-serif}
/* fixes: card illustrations stay inside their box; map no longer overlaps the section title */
.banks-animation-container{margin:80px 0 40px!important;position:relative!important}
/* logo: own fixed element, animated */
.logo-container{visibility:hidden!important;pointer-events:none}.logo-container *{visibility:hidden!important}
#om-logo{position:fixed;z-index:70;top:20px;left:50%;width:min(460px,60vw);aspect-ratio:932/166;transform:translateX(-50%);background:url(/media/images/otomobin-logo-clean.png) center/contain no-repeat;transition:left .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1),width .7s cubic-bezier(.2,.8,.2,1),top .7s cubic-bezier(.2,.8,.2,1);animation:om-in .9s cubic-bezier(.2,.9,.2,1) backwards;filter:drop-shadow(0 6px 0 rgba(5,19,31,.12))}
#om-logo::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.85) 50%,transparent 60%);-webkit-mask:url(/media/images/otomobin-logo-clean.png) center/contain no-repeat;mask:url(/media/images/otomobin-logo-clean.png) center/contain no-repeat;background-size:250% 100%;background-position:150% 0;animation:om-shine 4.5s 1.2s infinite}
html.om-scrolled #om-logo{left:24px;top:14px;transform:none;width:170px}
@keyframes om-in{from{opacity:0;transform:translateX(-50%) translateY(-30px) scale(.85)}to{opacity:1;transform:translateX(-50%)}}
@keyframes om-shine{0%{background-position:150% 0}35%,100%{background-position:-50% 0}}
@media(prefers-reduced-motion:reduce){#om-logo,#om-logo::after{animation:none}}

.om-steps{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin:0 0 16px;font-family:Inter,Arial,sans-serif}
.om-steps span{display:flex;align-items:center;gap:8px;padding:8px 18px 8px 8px;border:3px solid #05131f;border-radius:999px;background:#fff;color:#073B63;font-weight:800;transition:background .3s,color .3s,transform .3s}
.om-steps b{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#EAF5FB;border:2px solid #05131f;font-size:14px}
.om-steps span.on{background:#0878B8;color:#fff;transform:translateY(-3px)}
#om-map text{font-family:Inter,Arial,sans-serif}

/* new footer replaces the original bento footer */
footer>*:not(#om-footer){position:absolute!important;left:-9999px!important;top:0!important;width:1px!important;height:1px!important;overflow:hidden!important;opacity:0!important;pointer-events:none!important}  /* not display:none: ScrollTrigger throws on triggers without a layout box */footer::before,footer::after{display:none!important}
#om-footer{font-family:Inter,Arial,sans-serif;color:#05131f;padding:clamp(40px,6vw,96px) clamp(16px,4vw,56px) 0;max-width:1400px;margin:0 auto}
.omf-cta{background:#0878B8;border:4px solid #05131f;border-radius:40px;box-shadow:0 10px 0 #05131f;padding:clamp(28px,5vw,72px);color:#fff;display:grid;gap:28px;position:relative;overflow:hidden}
.omf-cta h2{margin:0;font-size:clamp(40px,7vw,104px);line-height:.95;font-weight:900;letter-spacing:-.04em}
.omf-cta p{margin:0;font-size:clamp(16px,1.6vw,22px);font-weight:600;max-width:560px;opacity:.95}
.omf-btns{display:flex;flex-wrap:wrap;gap:14px}
.omf-btns a{display:inline-flex;align-items:center;gap:10px;padding:16px 26px;border:3px solid #05131f;border-radius:999px;background:#fff;color:#073B63;font-weight:800;font-size:18px;text-decoration:none;box-shadow:0 5px 0 #05131f;transition:transform .2s,box-shadow .2s}
.omf-btns a:hover{transform:translateY(3px);box-shadow:0 2px 0 #05131f}.omf-btns a.alt{background:#073B63;color:#fff}
.omf-road{position:relative;height:120px;margin:34px calc(-1*clamp(28px,5vw,72px)) calc(-1*clamp(28px,5vw,72px));background:linear-gradient(#073B63,#073B63) bottom/100% 34px no-repeat;overflow:hidden}
.omf-road::before{content:"";position:absolute;left:0;right:0;bottom:15px;height:4px;background:repeating-linear-gradient(90deg,#EAF5FB 0 44px,transparent 44px 74px);animation:omf-dash 1s linear infinite}
.omf-road i{position:absolute;bottom:22px;left:-240px;width:230px;height:100px;background:url(/media/images/kit-anim-car-a.svg) center/contain no-repeat;animation:omf-drive 9s linear infinite}
@keyframes omf-drive{to{left:105%}}@keyframes omf-dash{to{background-position:74px 0}}
.omf-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:20px;margin:36px 0}
.omf-card{border:4px solid #05131f;border-radius:28px;background:#fff;padding:26px;box-shadow:0 7px 0 #05131f}
.omf-logo{width:min(380px,100%);aspect-ratio:932/166;background:url(/media/images/otomobin-logo-clean.png) left center/contain no-repeat;margin-bottom:14px;transition:transform .3s}.omf-logo:hover{transform:scale(1.05) rotate(-1.5deg)}
.omf-card h3{margin:0 0 12px;font-size:13px;letter-spacing:.14em;color:#0878B8;font-weight:800}
.omf-card p{margin:0;font-weight:600;color:#073B63;line-height:1.45}
.omf-card a{display:block;padding:7px 0;color:#05131f;font-weight:700;text-decoration:none;border-bottom:2px solid #EAF5FB}.omf-card a:hover{color:#0878B8}
.omf-bottom{display:flex;gap:28px;align-items:center;justify-content:space-between;padding:8px 0 40px;font-size:13px;font-weight:600;color:#073B63}
.omf-bottom p{margin:0;max-width:880px;line-height:1.5}
.omf-badge{flex:none;width:130px;aspect-ratio:1;background:url(/media/images/sticker-phase-1-nl.svg) center/contain no-repeat;animation:omf-spin 18s linear infinite}
html[lang^=en] .omf-badge{background-image:url(/media/images/sticker-phase-1-en.svg)}@keyframes omf-spin{to{transform:rotate(360deg)}}
@media(max-width:800px){.omf-grid{grid-template-columns:1fr}.omf-bottom{flex-direction:column;align-items:flex-start}}
.partners-section__logos-container{padding-top:24px!important}.partners-section__logos-title{margin-bottom:8px!important}
/* fit the pinned headline + scene inside the viewport above the bottom nav */
.airplanes__title{font-size:clamp(28px,min(4.6vw,5.4vh),72px)!important;line-height:1.05!important}
.airplanes__text-container{padding-bottom:0!important}
#om-scene{width:min(940px,90vw,calc((100vh - 330px)*3.05))!important;margin:14px auto 0!important}
#om-scene svg{overflow:hidden!important;border-radius:28px}
/* FAQ kicker stays in the DOM (the site's reveal animation targets it) but takes no space */
.faq-section__top-title{color:transparent!important}.faq-section__top-title *{color:transparent!important}
/* FAQ blocks reveal in turn (class toggled by otomobin-brand.js): title lines rise in, then the illustration pops */
.faq-section__animation{opacity:0;transform:scale(.82) translateY(24px);transition:opacity .7s .35s ease,transform .9s .35s cubic-bezier(.2,1.4,.4,1)}
.om-in .faq-section__animation{opacity:1;transform:none}

/* card illustrations: the lottie box is wider than the visible window, so shrink the picture to the window instead of resizing the box (keeps the page length ScrollTrigger measured) */
.stopwatch__animation-container svg,.speedometer__animation-container svg{background-size:62% auto!important;background-position:52% 50%!important}

/* ---------- mobile ---------- */
@media(max-width:700px){
  #om-logo{width:min(300px,72vw);top:14px}
  html.om-scrolled #om-logo{width:92px;left:10px;top:10px;box-sizing:content-box;padding:5px 8px;background-color:rgba(234,245,251,.92);background-origin:content-box;background-clip:padding-box;border-radius:12px;box-shadow:0 2px 0 #05131f22}
  html.om-scrolled #om-logo::after{display:none}
  .airplanes__title{font-size:clamp(28px,8.4vw,40px)!important}
  #om-scene{width:94vw!important;margin-top:10px!important}
  #om-scene svg{border-radius:18px}
  .om-steps{gap:6px}.om-steps span{font-size:13px;padding:4px 12px 4px 4px;border-width:2.5px}.om-steps b{width:22px;height:22px;font-size:12px}
  #om-mapwrap{width:96vw}
  .om-l{padding:18px 20px;border-width:3px;box-shadow:0 6px 0 #05131f}.om-l2{margin:0 3%}.om-l3{margin:0 6%}
  #om-footer{padding-left:14px;padding-right:14px}
  .omf-cta{padding:26px 20px;border-radius:28px}.omf-cta h2{font-size:clamp(34px,11vw,52px)}
  .omf-btns a{font-size:16px;padding:13px 20px}
  .omf-road{margin-left:-20px;margin-right:-20px;margin-bottom:-26px}
  .omf-card{padding:20px}
  .omf-badge{width:100px}
  .faq-section__animation{margin-top:2.2vh!important}
}
@media(max-width:380px){.airplanes__title{font-size:27px!important}}
@media(max-width:700px){.airplanes__title,.airplanes__title .line{text-align:center!important;text-align-last:center!important;word-spacing:0!important;justify-content:center!important;display:block}}
.airplanes__title .animation-holder{width:0!important;min-width:0!important;margin:0!important;padding:0!important;display:inline-block!important;overflow:hidden!important;vertical-align:top}