/* Web Sitesi Programı ortak bileşenleri: telefon + panel kartı (.vit), program kartı (.pl-kart), animasyon.
   Hizmetler ve /hizmetler/web-sitesi birlikte kullanır. Kural sırası bilerek korunuyor (üst üste ezmelere dayanır). */
/* hero görseli */
.hero.pr{min-height:760px}
.vit{position:absolute;right:24px;top:130px;width:460px;height:600px}
.vit .tl{position:absolute;right:60px;top:0;width:250px;aspect-ratio:9/19;border-radius:38px;background:#0a0a0a;padding:8px;box-shadow:0 0 0 1.5px #2b2b2e,0 40px 80px rgba(0,0,0,.65);transform:rotate(3deg)}
.vit .ek{width:100%;height:100%;border-radius:31px;overflow:hidden;background:#f4efe7;color:#1b1713;display:flex;flex-direction:column}
.vit .ek .ba{display:flex;justify-content:space-between;align-items:center;padding:20px 16px 10px;font:800 13px/1 "Hanken Grotesk";letter-spacing:.06em}
.vit .ek .ba i{width:18px;height:2px;background:#1b1713;box-shadow:0 5px #1b1713;font-style:normal}
.vit .ek .du{margin:0 12px;padding:8px 10px;border-radius:10px;background:#fff3cf;box-shadow:inset 0 0 0 1px #e8c660;font:600 11px/1.2 "Hanken Grotesk"}
.vit .ek .fo{margin:12px 12px 0;flex:1;max-height:150px;border-radius:16px;background:linear-gradient(160deg,#d6b896,#8a5a3a 70%,#3b2415);position:relative}
.vit .ek .fo b{position:absolute;left:12px;bottom:10px;font:800 22px/1 "Hanken Grotesk";letter-spacing:-.03em;color:#fff}
.vit .ek .sa{padding:12px 16px 0;font:600 11.5px/1.5 "Hanken Grotesk";color:#5c5146}
.vit .ek .sa b{display:block;color:#1b1713;font-size:13px}
.vit .ek .dg{margin:auto 12px 14px;display:flex;gap:6px}
.vit .ek .dg span{flex:1;height:36px;border-radius:999px;display:flex;align-items:center;justify-content:center;font:700 12px/1 "Hanken Grotesk";background:#1b1713;color:#fff}
.vit .ek .dg span+span{background:#2fa84f}
.vit .pc{position:absolute;left:0;top:210px;width:250px;border-radius:20px;background:#f4f1ec;color:#1b1713;padding:14px;box-shadow:0 30px 60px rgba(0,0,0,.6);transform:rotate(-3deg)}
.vit .pc small{display:block;font:500 10px/1 "IBM Plex Mono";letter-spacing:.1em;color:#7a6f63}
.vit .pc .al{margin-top:8px;padding:10px 12px;border-radius:10px;background:#fff;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1);font:500 13px/1.25 "Hanken Grotesk"}
.vit .pc .kb{margin-top:10px;display:flex;align-items:center;justify-content:space-between;font:600 12px/1 "Hanken Grotesk"}
.vit .pc .kb b{padding:9px 14px;border-radius:999px;background:var(--k);color:#fff}
.vit .pc .kb span{color:#2f8a4a}
.vit .ok2{position:absolute;left:120px;top:420px;padding:10px 14px;border-radius:999px;background:#0e1f17;color:#7bf0a8;box-shadow:inset 0 0 0 1px rgba(123,240,168,.35),0 20px 40px rgba(0,0,0,.5);font:500 12px/1 "IBM Plex Mono"}
@media(max-width:1100px){.hero.pr{min-height:0}.vit{position:relative;right:auto;top:auto;width:100%;max-width:460px;margin:50px auto 0;height:560px}}
@media(max-width:560px){.vit{height:520px}.vit .tl{right:10px;width:220px}.vit .pc{width:220px;top:200px}.vit .ok2{left:60px;top:400px}}
.vit .pc{top:330px;left:-10px}
.vit .ok2{top:470px;left:70px}
.vit .ek .fo{max-height:170px}
@media(max-width:560px){.vit .pc{top:310px;left:0}.vit .ok2{top:440px;left:40px}}
.vit .ok2{top:280px;left:-6px}
@media(max-width:560px){.vit .ok2{top:270px;left:0}}
@media(min-width:1101px){.vit{transform:scale(1.32);transform-origin:100% 0;top:120px;right:30px}}
@media(min-width:1101px){.vit{transform:none;scale:1.32;transform-origin:100% 0}}
@media(min-width:1101px){.vit{scale:1.2;right:10px}.vit .pc{left:14px}.vit .ok2{left:20px}}
/* programlar listesi */
.pl-liste{max-width:1240px;margin:0 auto;padding:40px 24px 0;display:grid;gap:20px}
.pl-kart{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:0;min-height:460px;border-radius:32px;overflow:hidden;background:radial-gradient(80% 90% at 0% 0%,rgba(198,99,63,.32),transparent 65%),#0c0c0e;box-shadow:inset 0 0 0 1px rgba(224,138,92,.4),0 40px 80px -30px rgba(198,99,63,.4);transition:transform .35s,box-shadow .35s}
.pl-kart:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px rgba(224,138,92,.7),0 50px 90px -30px rgba(198,99,63,.55)}
.pl-kart .m{padding:46px;display:flex;flex-direction:column;align-items:flex-start}
.pl-kart .rozet{display:inline-flex;align-items:center;gap:9px;height:30px;padding:0 13px;border-radius:999px;background:rgba(123,240,168,.1);box-shadow:inset 0 0 0 1px rgba(123,240,168,.35);font:500 12px/1 "IBM Plex Mono";letter-spacing:.1em;color:#7bf0a8}
.pl-kart .rozet i{width:7px;height:7px;border-radius:50%;background:#7bf0a8}
.pl-kart h2{margin-top:22px;font:800 clamp(40px,4.6vw,68px)/.95 "Hanken Grotesk";letter-spacing:-.05em}
.pl-kart .ne{margin-top:16px;font-size:18px;line-height:1.5;color:#b4b4bb;max-width:460px}
.pl-kart .fy{margin-top:26px;display:flex;align-items:baseline;gap:12px}
.pl-kart .fy b{font:800 54px/1 "Hanken Grotesk";letter-spacing:-.05em;background:linear-gradient(95deg,#FFD2A8,#FFB27A 40%,var(--k2));-webkit-background-clip:text;background-clip:text;color:transparent}
.pl-kart .fy span{font:500 13px/1.4 "IBM Plex Mono";color:var(--soluk)}
.pl-kart .dh{margin-top:18px;display:flex;flex-wrap:wrap;gap:8px}
.pl-kart .dh span{height:30px;padding:0 12px;border-radius:999px;display:inline-flex;align-items:center;gap:6px;font:600 13px/1 "Hanken Grotesk";background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.pl-kart .dh span::before{content:"✓";color:#7bf0a8;font-weight:800}
.pl-kart .cb{margin-top:auto}
.pl-kart .gor-alan{position:relative;border-left:1px solid var(--cz);display:flex;align-items:center;justify-content:center;overflow:hidden}
.pl-kart .gor-alan .vit{position:relative;right:auto;top:auto;width:460px;height:560px;scale:.92;transform:none}
@media(max-width:980px){.pl-kart{grid-template-columns:1fr}.pl-kart .gor-alan{border-left:0;border-top:1px solid var(--cz);min-height:520px}.pl-kart .m{padding:28px}}
@media(max-width:560px){.pl-kart .gor-alan .vit{scale:.78;width:460px;margin:-40px 0}}
.pl-kart .gor-alan{padding:70px 0 40px}
.pl-kart .gor-alan .vit{scale:.8;margin:-50px 0}
@media(max-width:560px){.pl-kart .gor-alan{padding:50px 0 30px}.pl-kart .gor-alan .vit{scale:.72;margin:-70px 0}}
.pl-kart .ok2{display:none}
/* Hizmetler içinde program bölümü */
.prg-bol{max-width:1240px;margin:0 auto;padding:70px 24px 0}
.prg-bol .bas{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
.prg-bol h2{font:800 clamp(34px,4vw,56px)/1 "Hanken Grotesk";letter-spacing:-.045em;margin-top:14px}
.prg-bol .bas p{max-width:420px;font-size:16px;line-height:1.5;color:var(--soluk)}
.prg-bol .pl-liste{padding:26px 0 0}
.ayrac{max-width:1240px;margin:90px auto 0;padding:0 24px}
.ayrac > div{border-top:1px solid var(--cz);padding-top:26px;display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
.ayrac h2{font:800 clamp(34px,4vw,56px)/1 "Hanken Grotesk";letter-spacing:-.045em;margin-top:14px}
.ayrac p{max-width:420px;font-size:16px;line-height:1.5;color:var(--soluk)}
.pl-kart{min-height:640px}
.pl-kart .gor-alan{padding:30px 0}
.pl-kart .gor-alan .vit{scale:1.08;margin:0}
@media(min-width:981px){.pl-kart .m{padding:56px 50px}}
@media(max-width:980px){.pl-kart{min-height:0}.pl-kart .gor-alan{min-height:640px}.pl-kart .gor-alan .vit{scale:1}}
@media(max-width:560px){.pl-kart .gor-alan{min-height:580px;padding:20px 0}.pl-kart .gor-alan .vit{scale:.85;margin:-30px 0}}
/* ---- döngü animasyonu: panelde yaz → Kaydet → telefon güncellenir (9 sn) ---- */
.vit .ek .du{position:relative;height:30px;padding:0}
.vit .ek .du span{position:absolute;left:10px;right:10px;top:50%;margin-top:-7px;white-space:nowrap;animation-duration:9s;animation-iteration-count:infinite;animation-timing-function:ease-in-out}
.vit .ek .du .a{animation-name:bnA}.vit .ek .du .b{animation-name:bnB;opacity:0}
.vit .pc .al{position:relative;min-height:38px;padding:0}
.vit .pc .al span{position:absolute;left:12px;right:12px;top:11px;white-space:nowrap;animation-duration:9s;animation-iteration-count:infinite}
.vit .pc .al .a{animation-name:txA}.vit .pc .al .b{animation-name:txB;opacity:0;clip-path:inset(0 100% 0 0)}
.vit .pc .kb .st{position:relative;width:118px;height:14px}
.vit .pc .kb .st i{position:absolute;left:0;top:0;font-style:normal;white-space:nowrap;animation-duration:9s;animation-iteration-count:infinite}
.vit .pc .kb .st .s1{animation-name:st1}
.vit .pc .kb .st .s0{animation-name:st0;opacity:0;color:#8a6d1f}
.vit .pc .kb .st .s2{animation-name:st2;opacity:0;color:#8a6d1f}
.vit .pc .kb b{animation:bas 9s infinite}
.vit .ok2{animation:pil 9s infinite;opacity:0}
html.js .vit:not(.gorunur) *{animation-play-state:paused!important}
@keyframes txA{0%,12%{opacity:1}14%,92%{opacity:0}96%,100%{opacity:1}}
@keyframes txB{0%,13.9%{opacity:0;clip-path:inset(0 100% 0 0)}14%{opacity:1;clip-path:inset(0 100% 0 0);animation-timing-function:steps(26,end)}28%{clip-path:inset(0 0 0 0)}90%{opacity:1;clip-path:inset(0 0 0 0)}94%,100%{opacity:0;clip-path:inset(0 0 0 0)}}
@keyframes st1{0%,12%{opacity:1}13%,46%{opacity:0}47%,100%{opacity:1}}
@keyframes st0{0%,12.9%{opacity:0}13%,30%{opacity:1}31%,100%{opacity:0}}
@keyframes st2{0%,30.9%{opacity:0}31%,45%{opacity:1}46%,100%{opacity:0}}
@keyframes bas{0%,29%{transform:none}31%{transform:scale(.88)}35%,100%{transform:none}}
@keyframes bnA{0%,44%{opacity:1;transform:none}49%,92%{opacity:0;transform:translateY(-7px)}97%,100%{opacity:1;transform:none}}
@keyframes bnB{0%,44%{opacity:0;transform:translateY(7px)}49%,90%{opacity:1;transform:none}95%,100%{opacity:0;transform:translateY(7px)}}
@keyframes pil{0%,46%{opacity:0;transform:translateY(8px) scale(.92)}50%,86%{opacity:1;transform:none}92%,100%{opacity:0;transform:translateY(-4px) scale(.96)}}
@media(prefers-reduced-motion:reduce){.vit *{animation:none!important}.vit .ok2{opacity:1}.vit .pc .al .a,.vit .ek .du .a,.vit .pc .kb .st .s1{opacity:1}}
/* A2: sade fiyat, kartın altında */
.altg{margin-top:auto;align-self:stretch;padding-top:28px;border-top:1px solid var(--cz2);display:grid;gap:20px}
.fyA2{display:flex;align-items:flex-end;gap:22px;flex-wrap:wrap}
.fyA2 .p{font:800 clamp(72px,7.4vw,108px)/.82 "Hanken Grotesk";letter-spacing:-.065em;color:#fff;white-space:nowrap}
.fyA2 .p sup{font-size:.42em;letter-spacing:0;margin-left:6px;vertical-align:top;position:relative;top:.05em;color:#8d8d95;font-weight:700}
.fyA2 .t{display:grid;gap:9px;padding-bottom:4px}
.fyA2 .t b{justify-self:start;height:26px;padding:0 11px;border-radius:999px;display:inline-flex;align-items:center;font:500 11.5px/1 "IBM Plex Mono";letter-spacing:.12em;color:var(--k2);box-shadow:inset 0 0 0 1px rgba(224,138,92,.5)}
.fyA2 .t span{font:500 15px/1.4 "Hanken Grotesk";color:#b9b9c0}
.altg .dh{margin-top:0}
.altg .cb{margin-top:0!important;width:100%;height:60px;font-size:17.5px}
@media(max-width:560px){.fyA2 .p{font-size:76px}}
.altg{gap:24px}.fyA2{padding-bottom:6px}
@media(max-width:380px){.fyA2 .p{font-size:62px}.altg .cb{font-size:16px}}