/* Taksi Finans tanıtım sitesi: tek stil dosyası.
   Kaynak: tek ekran föyü (Anıl, 4 Kasım 2026). Değerler föyden aynen.
   Marka: PublicSans-BlackItalic, TAKSİ beyaz, FİNANS #FFD703, birleşik. Metin: Plus Jakarta Sans. */
@font-face{font-family:'TF Baslik';src:url(fonts/PublicSans-Black.ttf) format('truetype');font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:'TF Marka';src:url(fonts/PublicSans-BlackItalic.ttf) format('truetype');font-weight:900;font-style:italic;font-display:swap}
@font-face{font-family:'Jakarta';src:url(fonts/PlusJakartaSans-Regular.ttf) format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Jakarta';src:url(fonts/PlusJakartaSans-Medium.ttf) format('truetype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Jakarta';src:url(fonts/PlusJakartaSans-SemiBold.ttf) format('truetype');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Jakarta';src:url(fonts/PlusJakartaSans-Bold.ttf) format('truetype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Jakarta';src:url(fonts/PlusJakartaSans-ExtraBold.ttf) format('truetype');font-weight:800;font-style:normal;font-display:swap}
:root{--s:#FFD703;--g:#A9A9AE}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#000;color:#fff;font:16px/1.55 'Jakarta',system-ui,-apple-system,'Segoe UI',sans-serif}

/* ══ TEK EKRAN (masaüstü) ══ */
.site{background:#000;color:#fff;font-family:'Jakarta',system-ui,sans-serif;height:100vh;height:100svh;min-height:620px;display:flex;flex-direction:column;overflow:hidden;position:relative;container-type:size}
.w{margin:0 auto;padding:0 5.5cqw;width:100%}
.orta{flex:1;min-height:0;display:flex;align-items:center}
.g2>div{position:relative;z-index:2}
.g2{display:grid;grid-template-columns:minmax(0,46fr) minmax(0,54fr);gap:0;align-items:center}
.logo{display:block;width:max-content;max-width:100%;color:inherit;text-decoration:none}
.logo:focus-visible{outline:3px solid #fff;outline-offset:6px}
.marka{display:flex;align-items:flex-start;gap:0;font:900 italic clamp(28px,2.5cqw,48px)/1.27 'TF Marka','Arial Black',sans-serif;letter-spacing:0;white-space:nowrap;margin:-.2em 0 -.1em}
.marka .t{color:#fff}.marka .f{color:var(--s)}
.msat{display:block;font-size:clamp(13px,1cqw,19px);line-height:1.3;font-weight:500;color:#C9C9CE;margin:.35em 0 0}
.ust{padding-top:3.6cqh;position:relative;z-index:3}
.site h1{font-family:'TF Baslik','Arial Black',sans-serif;font-weight:900;font-size:clamp(34px,min(3.4cqw,7.4cqh),72px);line-height:1.1;letter-spacing:-.012em;margin:0;text-wrap:balance}
.al{font-size:clamp(16px,1.45cqw,27px);line-height:1.5;font-weight:400;color:#C9C9CE;margin:1em 0 0;max-width:27em}
.play{display:inline-flex;align-items:center;gap:10px;min-height:clamp(54px,3.9cqw,76px);padding:0 1.6em;border-radius:12px;background:var(--s);color:#000;font-weight:700;font-size:clamp(16px,1.25cqw,23px);white-space:nowrap;margin-top:clamp(26px,2.6cqw,52px);text-decoration:none}
.play svg{width:1em;height:1em}
.ipucu{font-size:clamp(13px,.95cqw,17px);color:#9A9AA0;margin:.9em 0 0}
.sahne{margin:0;display:flex;align-items:center;justify-content:center}
.sahne svg{display:block;width:min(58cqw,118cqh);max-width:none;margin:0 -5cqw 0 -3cqw;-webkit-mask-image:radial-gradient(closest-side,#000 84%,transparent 100%);mask-image:radial-gradient(closest-side,#000 84%,transparent 100%)}
/* Play tuşu yayında bağ olunca (a.play) dokunuş tepkisi alır; yayın öncesi span düz durur */
a.play{transition:transform .14s cubic-bezier(.23,1,.32,1)}
@media (hover:hover) and (pointer:fine){a.play:hover{transform:translateY(-2px)}}
a.play:active{transform:scale(.97)}
a.play:focus-visible{outline:3px solid #fff;outline-offset:3px}

/* ── GİRİŞ: tek sefer, uygulamanın açılış hareketi (src/ui/components/AcilisHareketi.js), süre ve eğriler aynı:
   TAKSİ soldan gelip çarpar, ezilip seker; yanında makara HABER · FİNANS × 3 akar, FİNANS'ta durur, marka cümlesi belirir. ── */
.marka .t{display:block;transform-origin:100% 80%;animation:carp .58s linear both}
.marka .kes{display:block;height:1.27em;overflow:hidden;padding:0 .06em 0 .04em;margin-left:-.02em}
.marka .f{display:block;height:1.27em}
.marka .reel{display:block;transform:translateY(-83.3333%);animation:makara 2.67s linear both}
@keyframes carp{
0%{transform:translateX(-9em) scale(1.06,.97);animation-timing-function:cubic-bezier(.35,.1,.75,.7)}
55.17%{transform:translateX(0) scale(1.06,.97);animation-timing-function:cubic-bezier(.2,.8,.4,1)}
62.07%{transform:translateX(0) scale(.84,1.07);animation-timing-function:cubic-bezier(.2,.7,.4,1)}
77.59%{transform:translateX(-.12em) scale(1.05,.97);animation-timing-function:cubic-bezier(.4,0,.3,1)}
91.38%{transform:translateX(.03em) scale(.99,1.01)}
100%{transform:translateX(0) scale(1,1)}}
@keyframes makara{
0%,22.47%{transform:translateY(16.6667%);animation-timing-function:cubic-bezier(.3,1.4,.5,1)}
29.21%,35.58%{transform:translateY(0);animation-timing-function:cubic-bezier(.3,1.4,.5,1)}
42.32%,48.69%{transform:translateY(-16.6667%);animation-timing-function:cubic-bezier(.3,1.4,.5,1)}
55.43%,61.8%{transform:translateY(-33.3333%);animation-timing-function:cubic-bezier(.3,1.4,.5,1)}
68.54%,74.91%{transform:translateY(-50%);animation-timing-function:cubic-bezier(.3,1.4,.5,1)}
81.65%,88.01%{transform:translateY(-66.6667%);animation-timing-function:cubic-bezier(.25,1.6,.45,1)}
100%{transform:translateY(-83.3333%)}}
.msat.gel{animation:msat .45s cubic-bezier(.2,.8,.3,1) 2.73s both}
@keyframes msat{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.gel{animation:gel .62s cubic-bezier(.23,1,.32,1) both}
@keyframes gel{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.d1{animation-delay:1s}.d2{animation-delay:1.08s}.d3{animation-delay:1.16s}.d4{animation-delay:1.24s}.d5{animation-delay:1.32s}.d6{animation-delay:1.6s}
.sahne{animation:sahne 1.1s cubic-bezier(.23,1,.32,1) .35s both}
@keyframes sahne{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}


/* ── SAHNE: giriş ekranı föyünün hareketi, değerler aynen (giriş ekranı föyü). Adanın g'si .ada, süre 5 sn. ── */
svg .ada{animation:ada 5s ease-in-out infinite}
@keyframes ada{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
.pencere{mix-blend-mode:screen;opacity:.1;animation:pencere 6s ease-in-out infinite}
.p2{animation-delay:-2s}.p3{animation-delay:-4s}
@keyframes pencere{0%,100%{opacity:.06}50%{opacity:.3}}
.tabela{mix-blend-mode:screen;animation:tabela 2.4s ease-in-out infinite}
@keyframes tabela{0%,100%{opacity:.25}50%{opacity:.7}}
.lamba{mix-blend-mode:screen;animation:lamba 8s linear infinite}
@keyframes lamba{0%,60%,66%,100%{opacity:.6}61%{opacity:.15}62%{opacity:.6}63%{opacity:.2}64%{opacity:.6}}
.far{mix-blend-mode:screen;animation:far 3.2s ease-in-out infinite}
@keyframes far{0%,100%{opacity:.25}50%{opacity:.6}}
.ping{transform-box:fill-box;transform-origin:center;animation:ping 2.6s ease-out infinite}
@keyframes ping{0%{transform:scale(1);opacity:.9}70%,100%{transform:scale(2.3);opacity:0}}
.akis{stroke-dasharray:.4 100;filter:drop-shadow(0 0 10px #FFC107);animation:akis 3.4s linear infinite}
.a2{animation-name:akis2;animation-delay:-1.7s}
@keyframes akis{from{stroke-dashoffset:0}to{stroke-dashoffset:100.4}}
@keyframes akis2{from{stroke-dashoffset:0}to{stroke-dashoffset:-100.4}}
.yildiz{animation:yildiz 3s ease-in-out infinite}
.y2{animation-delay:-1s}.y3{animation-delay:-2s}
@keyframes yildiz{0%,100%{opacity:.15}50%{opacity:.8}}
.t1{animation:t1 14s infinite}
@keyframes t1{0%,10%{transform:translate(0px,0px);animation-timing-function:ease-in}24%{transform:translate(-680px,305px)}24.01%,44%{transform:translate(1004px,-450px);animation-timing-function:ease-out}62%,100%{transform:translate(0px,0px)}}
.t3{animation:t3 14s infinite}
@keyframes t3{0%,18%{transform:translate(0px,0px);animation-timing-function:ease-in}40%{transform:translate(-1091px,489px)}40.01%,58%{transform:translate(530px,-237px);animation-timing-function:ease-out}72%,100%{transform:translate(0px,0px)}}
.kart1,.kart3{transform-box:fill-box;transform-origin:50% 100%}
.kart1{animation:kart1 14s ease-in-out infinite}
@keyframes kart1{0%,8%{opacity:1;transform:scale(1)}10%,62%{opacity:0;transform:scale(.6)}66%{opacity:1;transform:scale(1.1)}69%,100%{opacity:1;transform:scale(1)}}
.kart3{animation:kart3 14s ease-in-out infinite}
@keyframes kart3{0%,16%{opacity:1;transform:scale(1)}18%,72%{opacity:0;transform:scale(.6)}76%{opacity:1;transform:scale(1.1)}79%,100%{opacity:1;transform:scale(1)}}
.yolCizgi{filter:drop-shadow(0 0 5px #FFC107)}
.yolA{animation:yolA 14s linear infinite}
@keyframes yolA{0%,15%{opacity:1}17%,76%{opacity:0}80%,100%{opacity:1}}
.farKap{animation:farKap 14s linear infinite}
@keyframes farKap{0%,22%{opacity:1}23%,58%{opacity:0}64%,100%{opacity:1}}

/* ── ALT BAĞLAR ── */
.alt-s{position:relative;z-index:3;padding:13px 0 17px;font-size:clamp(13px,.95cqw,16px);line-height:1.55;color:var(--g)}
.alt-s .w{display:flex;gap:22px;flex-wrap:wrap;align-items:center}
.alt-s nav{display:flex;gap:22px;flex-wrap:wrap;align-items:center}
.alt-s a{display:inline-block;padding:3px 0;color:inherit;text-decoration:none}
.alt-s a:focus-visible{outline:2px solid #fff;outline-offset:2px}
.alt-s .cp{margin-left:auto}

/* ══ TELEFON (föydeki .site.m kuralları; 899 ve altı) ══
   Föy 390 için çizildi: 390'da değerler aynen, daha dar ekranda punto ve sahne genişliği orantıyla küçülür.
   Telefonda sayfa gerekirse kayar; sahne metnin üstünde durur. */
@media (max-width:899px){
.site{height:auto;min-height:100vh;min-height:100svh;overflow:visible;overflow-x:clip;container-type:inline-size}
.site .w{padding:0 20px}
.site .orta{display:block;flex:1 0 auto}
.site .g2{display:flex;flex-direction:column;align-items:stretch}
.site .g2 .sahne{order:-1}
.site .ust{padding-top:24px}
.site .marka{font-size:30px}
.site .msat{font-size:14px;margin-top:4px}
.site .sahne svg{flex:none;width:min(430px,110.26cqw);margin:-14px 0 -22px}
.site h1{font-size:min(30px,7.7cqw);line-height:1.12;margin:0}
.site .al{font-size:16px;margin-top:10px}
.site .play{width:100%;justify-content:center;margin-top:18px}
.site .play{max-width:420px;display:flex}
.site .ipucu{text-align:center;margin-top:10px}
.alt-s{padding:7px 0 9px;font-size:12px}
.alt-s .w,.alt-s nav{gap:12px;justify-content:center}
.alt-s .cp{display:none}
}
@media (min-width:480px) and (max-width:899px){.site .ipucu{text-align:left;max-width:420px;text-align:center}}

/* ══ İÇ SAYFALAR (hukuk, 404): siyah bant, beyaz gövde, siyah alt ══ */
.ic{background:#fff;color:#000;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;line-height:1.6}
.ic .w{max-width:760px;padding:0 20px}
.ic .bant{background:#000;color:#fff;padding:18px 0 16px}
.ic .marka{font-size:28px}
.ic .msat{font-size:13px;margin-top:4px}
.ic .marka .t,.ic .marka .f,.ic .msat{animation:none}
.ic .alt-s{background:#000;margin-top:auto}
.hukuk{flex:1 0 auto;width:100%;max-width:760px;margin:0 auto;padding:12px 20px 40px}
.hukuk h1{font-weight:800;font-size:28px;line-height:1.2;letter-spacing:-.01em;margin:20px 0 4px}
.hukuk h2{font-weight:700;font-size:20px;line-height:1.3;margin:32px 0 8px}
.hukuk h3{font-weight:700;font-size:16px;margin:20px 0 6px}
.hukuk p,.hukuk ul{margin:0 0 12px}
.hukuk ul{padding-left:22px}
.hukuk li{margin:4px 0}
.hukuk .tarih{color:#666;font-size:14px}
.hukuk a{color:#0b57d0;overflow-wrap:anywhere}
.hukuk section[lang=en]{margin-top:36px;padding-top:4px;border-top:1px solid #e5e5e5}

/* ── Hareket azaltma: hepsi kapanır, içerik görünür kalır ── */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}