/* Business benefit pages (business/benefit.php) on top of share-ways.css: gains, examples, short steps and the
   three-stage "how it works" animation (business/benefit-art.php). One 9 s loop: stage 1 at 0 s, 2 at 3 s, 3 at 6 s. */
.bf-section{margin-top:56px}
.bf-section h2{margin:0 0 22px;font-size:clamp(24px,3vw,36px)}
.bf-gains{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.bf-gains li{padding:22px;border:1px solid var(--lp-line-strong);border-radius:18px;background:var(--lp-panel)}
.bf-gains b{display:block;font-size:19px;line-height:1.2;color:var(--lp-text)}
.bf-gains p{margin:10px 0 0;color:var(--lp-soft);font-size:15px;line-height:1.5}
.bf-gains li::before{content:'';display:block;width:28px;height:6px;margin-bottom:14px;border-radius:3px;background:var(--lp-mint)}
.bf-gains li:nth-child(2)::before{background:#b9e6ff}.bf-gains li:nth-child(3)::before{background:#ffd966}
.bf-examples{display:grid;gap:12px}
.bf-examples article{display:grid;grid-template-columns:150px minmax(0,1fr);gap:18px;align-items:start;padding:18px 22px;border:1px solid var(--lp-line-strong);border-radius:18px;background:var(--lp-panel)}
.bf-examples h3{margin:2px 0 0;font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--lp-mint)}
.bf-examples p{margin:0;font-size:17px;line-height:1.5;color:var(--lp-soft)}
/* Steps: short title, one line under it. */
.share-steps.bf-steps li b{display:block;margin-top:10px;font-size:20px;line-height:1.2;font-weight:900}
.share-steps.bf-steps li p{margin:6px 0 0;font-size:15px;font-weight:600;line-height:1.4;opacity:.85}
/* Animation (business/benefit-art.php): three pictures side by side (stacked on phones), each with its caption
   inside the same lilac panel. It runs only while .is-playing (set by benefit.php when the figure is on screen,
   restarting from stage 1); without it, or with reduced motion, the finished picture of every stage shows. Timing
   classes are generated from the classes the four pages use: on-N appears at N %, off-N-M shows between N and M %,
   pop-N pops in, type-N types the text under it, gx/gy grow, sl slides up, mv moves in. 12 s loop; stages at 0/33/66 %. */
.bf-flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:22px 0 0;border:3px solid #20183b;border-radius:18px;overflow:hidden;box-shadow:8px 8px 0 #20183b;background:#d8cef8}
.bf-col{display:flex;flex-direction:column;justify-content:space-between;gap:14px;padding:16px 14px 16px}
.bf-col+.bf-col{border-left:2px dashed rgba(32,24,59,.25)}
.bf-svg{display:block;width:100%;max-width:300px;height:auto;margin:0 auto;image-rendering:pixelated}
.bf-svg *{transform-box:fill-box}
.bf-svg text{font-kerning:normal}
.bf-cap{display:flex;align-items:center;gap:10px;margin:0;padding:10px 12px;border:2px solid #20183b;border-radius:12px;background:#f3efff;color:#20183b;font-size:16px;font-weight:900;line-height:1.25}
.bf-cap span{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:#20183b;color:#ffffff;font-size:15px;font-weight:900}
.bf-flow.is-playing .bf-cap1{animation:bf-cap1 12s infinite}.bf-flow.is-playing .bf-cap2{animation:bf-cap2 12s infinite}.bf-flow.is-playing .bf-cap3{animation:bf-cap3 12s infinite}
@keyframes bf-cap1{0%,32%{background:#20183b;color:#ffffff}34%,100%{background:#f3efff;color:#20183b}}
@keyframes bf-cap2{0%,32%{background:#f3efff;color:#20183b}34%,65%{background:#20183b;color:#ffffff}67%,100%{background:#f3efff;color:#20183b}}
@keyframes bf-cap3{0%,65%{background:#f3efff;color:#20183b}67%,99%{background:#20183b;color:#ffffff}100%{background:#f3efff;color:#20183b}}
.bf-flow.is-playing .bf-cap1 span{animation:bf-num1 12s infinite}.bf-flow.is-playing .bf-cap2 span{animation:bf-num2 12s infinite}.bf-flow.is-playing .bf-cap3 span{animation:bf-num3 12s infinite}
@keyframes bf-num1{0%,32%{background:#52e5a5;color:#06110d}34%,100%{background:#20183b;color:#ffffff}}
@keyframes bf-num2{0%,32%{background:#20183b;color:#ffffff}34%,65%{background:#52e5a5;color:#06110d}67%,100%{background:#20183b;color:#ffffff}}
@keyframes bf-num3{0%,65%{background:#20183b;color:#ffffff}67%,99%{background:#52e5a5;color:#06110d}100%{background:#20183b;color:#ffffff}}
/* Continuous movement inside a stage. */
.bf-flow.is-playing .ring{transform-origin:50% 50%;animation:bf-ring 1.1s ease-in-out infinite}
.bf-flow.is-playing .blink{animation:bf-blink .7s steps(2,end) infinite}
.bf-flow.is-playing .shake{transform-origin:50% 0;animation:bf-shake .9s ease-in-out infinite}
.bf-flow.is-playing .scan{animation:bf-scan 1.4s ease-in-out infinite alternate}
.bf-flow.is-playing .caret{animation:bf-blink .8s steps(2,end) infinite}
.bf-flow.is-playing .drop{animation:bf-drop 1.2s linear infinite}
.bf-flow.is-playing .flow{animation:bf-flowx 1s linear infinite}
.bf-flow.is-playing .sel{animation:bf-sel 12s infinite}
.bf-flow.is-playing .brush{animation:bf-brush 12s infinite}
@keyframes bf-ring{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes bf-blink{0%{opacity:.15}50%{opacity:1}}
@keyframes bf-shake{0%,100%{transform:rotate(0)}20%{transform:rotate(14deg)}40%{transform:rotate(-12deg)}60%{transform:rotate(8deg)}80%{transform:rotate(-5deg)}}
@keyframes bf-scan{from{transform:translateY(0)}to{transform:translateY(46px)}}
@keyframes bf-drop{0%{transform:translateY(0);opacity:1}80%{transform:translateY(36px);opacity:1}100%{transform:translateY(40px);opacity:0}}
@keyframes bf-flowx{from{transform:translateX(0);opacity:1}to{transform:translateX(12px);opacity:0}}
@keyframes bf-sel{0%,10%{transform:translateX(0)}14%,18%{transform:translateX(19px)}22%,26%{transform:translateX(38px)}30%,100%{transform:translateX(19px)}}
@keyframes bf-brush{0%,34%{transform:translateX(0);opacity:0}36%{opacity:1}52%{transform:translateX(86px);opacity:1}56%,100%{transform:translateX(86px);opacity:0}}
.bf-flow.is-playing .gx-10{transform-origin:0 50%;animation:bf-gx-10 12s infinite}
.bf-flow.is-playing .gx-13{transform-origin:0 50%;animation:bf-gx-13 12s infinite}
.bf-flow.is-playing .gx-25{transform-origin:0 50%;animation:bf-gx-25 12s infinite}
.bf-flow.is-playing .gx-26{transform-origin:0 50%;animation:bf-gx-26 12s infinite}
.bf-flow.is-playing .gx-27{transform-origin:0 50%;animation:bf-gx-27 12s infinite}
.bf-flow.is-playing .gx-37{transform-origin:0 50%;animation:bf-gx-37 12s infinite}
.bf-flow.is-playing .gx-41{transform-origin:0 50%;animation:bf-gx-41 12s infinite}
.bf-flow.is-playing .gx-45{transform-origin:0 50%;animation:bf-gx-45 12s infinite}
.bf-flow.is-playing .gx-72{transform-origin:0 50%;animation:bf-gx-72 12s infinite}
.bf-flow.is-playing .gx-74{transform-origin:0 50%;animation:bf-gx-74 12s infinite}
.bf-flow.is-playing .gx-76{transform-origin:0 50%;animation:bf-gx-76 12s infinite}
.bf-flow.is-playing .gx-77{transform-origin:0 50%;animation:bf-gx-77 12s infinite}
.bf-flow.is-playing .gx-78{transform-origin:0 50%;animation:bf-gx-78 12s infinite}
.bf-flow.is-playing .gx-80{transform-origin:0 50%;animation:bf-gx-80 12s infinite}
.bf-flow.is-playing .gx-82{transform-origin:0 50%;animation:bf-gx-82 12s infinite}
.bf-flow.is-playing .gy-2{transform-origin:50% 100%;animation:bf-gy-2 12s infinite}
.bf-flow.is-playing .gy-70{transform-origin:50% 100%;animation:bf-gy-70 12s infinite}
.bf-flow.is-playing .gy-73{transform-origin:50% 100%;animation:bf-gy-73 12s infinite}
.bf-flow.is-playing .gy-76{transform-origin:50% 100%;animation:bf-gy-76 12s infinite}
.bf-flow.is-playing .gy-79{transform-origin:50% 100%;animation:bf-gy-79 12s infinite}
.bf-flow.is-playing .off-45-51{animation:bf-off-45-51 12s infinite}
.bf-flow.is-playing .off-66-86{animation:bf-off-66-86 12s infinite}
.bf-flow.is-playing .off-7-13{animation:bf-off-7-13 12s infinite}
.bf-flow.is-playing .on-0{animation:bf-on-0 12s infinite}
.bf-flow.is-playing .on-13{animation:bf-on-13 12s infinite}
.bf-flow.is-playing .on-15{animation:bf-on-15 12s infinite}
.bf-flow.is-playing .on-33{animation:bf-on-33 12s infinite}
.bf-flow.is-playing .on-38{animation:bf-on-38 12s infinite}
.bf-flow.is-playing .on-43{animation:bf-on-43 12s infinite}
.bf-flow.is-playing .on-48{animation:bf-on-48 12s infinite}
.bf-flow.is-playing .on-51{animation:bf-on-51 12s infinite}
.bf-flow.is-playing .on-53{animation:bf-on-53 12s infinite}
.bf-flow.is-playing .on-55{animation:bf-on-55 12s infinite}
.bf-flow.is-playing .on-66{animation:bf-on-66 12s infinite}
.bf-flow.is-playing .pop-11{transform-origin:50% 50%;animation:bf-pop-11 12s infinite}
.bf-flow.is-playing .pop-13{transform-origin:50% 50%;animation:bf-pop-13 12s infinite}
.bf-flow.is-playing .pop-18{transform-origin:50% 50%;animation:bf-pop-18 12s infinite}
.bf-flow.is-playing .pop-2{transform-origin:50% 50%;animation:bf-pop-2 12s infinite}
.bf-flow.is-playing .pop-23{transform-origin:50% 50%;animation:bf-pop-23 12s infinite}
.bf-flow.is-playing .pop-29{transform-origin:50% 50%;animation:bf-pop-29 12s infinite}
.bf-flow.is-playing .pop-31{transform-origin:50% 50%;animation:bf-pop-31 12s infinite}
.bf-flow.is-playing .pop-36{transform-origin:50% 50%;animation:bf-pop-36 12s infinite}
.bf-flow.is-playing .pop-39{transform-origin:50% 50%;animation:bf-pop-39 12s infinite}
.bf-flow.is-playing .pop-6{transform-origin:50% 50%;animation:bf-pop-6 12s infinite}
.bf-flow.is-playing .pop-61{transform-origin:50% 50%;animation:bf-pop-61 12s infinite}
.bf-flow.is-playing .pop-7{transform-origin:50% 50%;animation:bf-pop-7 12s infinite}
.bf-flow.is-playing .pop-70{transform-origin:50% 50%;animation:bf-pop-70 12s infinite}
.bf-flow.is-playing .pop-72{transform-origin:50% 50%;animation:bf-pop-72 12s infinite}
.bf-flow.is-playing .pop-74{transform-origin:50% 50%;animation:bf-pop-74 12s infinite}
.bf-flow.is-playing .pop-78{transform-origin:50% 50%;animation:bf-pop-78 12s infinite}
.bf-flow.is-playing .pop-80{transform-origin:50% 50%;animation:bf-pop-80 12s infinite}
.bf-flow.is-playing .pop-86{transform-origin:50% 50%;animation:bf-pop-86 12s infinite}
.bf-flow.is-playing .pop-9{transform-origin:50% 50%;animation:bf-pop-9 12s infinite}
.bf-flow.is-playing .sl-23{animation:bf-sl-23 12s infinite}
.bf-flow.is-playing .sl-37{animation:bf-sl-37 12s infinite}
.bf-flow.is-playing .sl-4{animation:bf-sl-4 12s infinite}
.bf-flow.is-playing .sl-70{animation:bf-sl-70 12s infinite}
.bf-flow.is-playing .type-38{transform-origin:100% 50%;animation:bf-type-38 12s infinite}
.bf-flow.is-playing .type-4{transform-origin:100% 50%;animation:bf-type-4 12s infinite}
@keyframes bf-gx-10{0%,10%{transform:scaleX(0)}17%,100%{transform:scaleX(1)}}
@keyframes bf-gx-13{0%,13%{transform:scaleX(0)}20%,100%{transform:scaleX(1)}}
@keyframes bf-gx-25{0%,25%{transform:scaleX(0)}32%,100%{transform:scaleX(1)}}
@keyframes bf-gx-26{0%,26%{transform:scaleX(0)}33%,100%{transform:scaleX(1)}}
@keyframes bf-gx-27{0%,27%{transform:scaleX(0)}34%,100%{transform:scaleX(1)}}
@keyframes bf-gx-37{0%,37%{transform:scaleX(0)}44%,100%{transform:scaleX(1)}}
@keyframes bf-gx-41{0%,41%{transform:scaleX(0)}48%,100%{transform:scaleX(1)}}
@keyframes bf-gx-45{0%,45%{transform:scaleX(0)}52%,100%{transform:scaleX(1)}}
@keyframes bf-gx-72{0%,72%{transform:scaleX(0)}79%,100%{transform:scaleX(1)}}
@keyframes bf-gx-74{0%,74%{transform:scaleX(0)}81%,100%{transform:scaleX(1)}}
@keyframes bf-gx-76{0%,76%{transform:scaleX(0)}83%,100%{transform:scaleX(1)}}
@keyframes bf-gx-77{0%,77%{transform:scaleX(0)}84%,100%{transform:scaleX(1)}}
@keyframes bf-gx-78{0%,78%{transform:scaleX(0)}85%,100%{transform:scaleX(1)}}
@keyframes bf-gx-80{0%,80%{transform:scaleX(0)}87%,100%{transform:scaleX(1)}}
@keyframes bf-gx-82{0%,82%{transform:scaleX(0)}89%,100%{transform:scaleX(1)}}
@keyframes bf-gy-2{0%,2%{transform:scaleY(0)}16%,100%{transform:scaleY(1)}}
@keyframes bf-gy-70{0%,70%{transform:scaleY(0)}79%,100%{transform:scaleY(1)}}
@keyframes bf-gy-73{0%,73%{transform:scaleY(0)}82%,100%{transform:scaleY(1)}}
@keyframes bf-gy-76{0%,76%{transform:scaleY(0)}85%,100%{transform:scaleY(1)}}
@keyframes bf-gy-79{0%,79%{transform:scaleY(0)}88%,100%{transform:scaleY(1)}}
@keyframes bf-off-45-51{0%,45%{opacity:0}46%,50%{opacity:1}51%,100%{opacity:0}}
@keyframes bf-off-66-86{0%,66%{opacity:0}67%,85%{opacity:1}86%,100%{opacity:0}}
@keyframes bf-off-7-13{0%,7%{opacity:0}8%,12%{opacity:1}13%,100%{opacity:0}}
@keyframes bf-on-0{0%{opacity:0}3%,96%{opacity:1}100%{opacity:0}}
@keyframes bf-on-13{0%,13%{opacity:0}15%,96%{opacity:1}100%{opacity:0}}
@keyframes bf-on-15{0%,15%{opacity:0}17%,96%{opacity:1}100%{opacity:0}}
@keyframes bf-on-33{0%,33%{opacity:0}35%,96%{opacity:1}100%{opacity:0}}
@keyframes bf-on-38{0%,38%{opacity:0}40%,96%{opacity:1}100%{opacity:0}}
@keyframes bf-on-43{0%,43%{opacity:0}45%,96%{opacity:1}100%{opacity:0}}
@keyframes bf-on-48{0%,48%{opacity:0}50%,96%{opacity:1}100%{opacity:0}}
@keyframes bf-on-51{0%,51%{opacity:0}53%,96%{opacity:1}100%{opacity:0}}
@keyframes bf-on-53{0%,53%{opacity:0}55%,96%{opacity:1}100%{opacity:0}}
@keyframes bf-on-55{0%,55%{opacity:0}57%,96%{opacity:1}100%{opacity:0}}
@keyframes bf-on-66{0%,66%{opacity:0}68%,96%{opacity:1}100%{opacity:0}}
@keyframes bf-pop-11{0%,11%{opacity:0;transform:scale(.2)}14%{opacity:1;transform:scale(1.12)}16%,96%{opacity:1;transform:scale(1)}100%{opacity:0}}
@keyframes bf-pop-13{0%,13%{opacity:0;transform:scale(.2)}16%{opacity:1;transform:scale(1.12)}18%,96%{opacity:1;transform:scale(1)}100%{opacity:0}}
@keyframes bf-pop-18{0%,18%{opacity:0;transform:scale(.2)}21%{opacity:1;transform:scale(1.12)}23%,96%{opacity:1;transform:scale(1)}100%{opacity:0}}
@keyframes bf-pop-2{0%,2%{opacity:0;transform:scale(.2)}5%{opacity:1;transform:scale(1.12)}7%,96%{opacity:1;transform:scale(1)}100%{opacity:0}}
@keyframes bf-pop-23{0%,23%{opacity:0;transform:scale(.2)}26%{opacity:1;transform:scale(1.12)}28%,96%{opacity:1;transform:scale(1)}100%{opacity:0}}
@keyframes bf-pop-29{0%,29%{opacity:0;transform:scale(.2)}32%{opacity:1;transform:scale(1.12)}34%,96%{opacity:1;transform:scale(1)}100%{opacity:0}}
@keyframes bf-pop-31{0%,31%{opacity:0;transform:scale(.2)}34%{opacity:1;transform:scale(1.12)}36%,96%{opacity:1;transform:scale(1)}100%{opacity:0}}
@keyframes bf-pop-36{0%,36%{opacity:0;transform:scale(.2)}39%{opacity:1;transform:scale(1.12)}41%,96%{opacity:1;transform:scale(1)}100%{opacity:0}}
@keyframes bf-pop-39{0%,39%{opacity:0;transform:scale(.2)}42%{opacity:1;transform:scale(1.12)}44%,96%{opacity:1;transform:scale(1)}100%{opacity:0}}
@keyframes bf-pop-6{0%,6%{opacity:0;transform:scale(.2)}9%{opacity:1;transform:scale(1.12)}11%,96%{opacity:1;transform:scale(1)}100%{opacity:0}}
@keyframes bf-pop-61{0%,61%{opacity:0;transform:scale(.2)}64%{opacity:1;transform:scale(1.12)}66%,96%{opacity:1;transform:scale(1)}100%{opacity:0}}
@keyframes bf-pop-7{0%,7%{opacity:0;transform:scale(.2)}10%{opacity:1;transform:scale(1.12)}12%,96%{opacity:1;transform:scale(1)}100%{opacity:0}}
@keyframes bf-pop-70{0%,70%{opacity:0;transform:scale(.2)}73%{opacity:1;transform:scale(1.12)}75%,96%{opacity:1;transform:scale(1)}100%{opacity:0}}
@keyframes bf-pop-72{0%,72%{opacity:0;transform:scale(.2)}75%{opacity:1;transform:scale(1.12)}77%,96%{opacity:1;transform:scale(1)}100%{opacity:0}}
@keyframes bf-pop-74{0%,74%{opacity:0;transform:scale(.2)}77%{opacity:1;transform:scale(1.12)}79%,96%{opacity:1;transform:scale(1)}100%{opacity:0}}
@keyframes bf-pop-78{0%,78%{opacity:0;transform:scale(.2)}81%{opacity:1;transform:scale(1.12)}83%,96%{opacity:1;transform:scale(1)}100%{opacity:0}}
@keyframes bf-pop-80{0%,80%{opacity:0;transform:scale(.2)}83%{opacity:1;transform:scale(1.12)}85%,96%{opacity:1;transform:scale(1)}100%{opacity:0}}
@keyframes bf-pop-86{0%,86%{opacity:0;transform:scale(.2)}89%{opacity:1;transform:scale(1.12)}91%,96%{opacity:1;transform:scale(1)}100%{opacity:0}}
@keyframes bf-pop-9{0%,9%{opacity:0;transform:scale(.2)}12%{opacity:1;transform:scale(1.12)}14%,96%{opacity:1;transform:scale(1)}100%{opacity:0}}
@keyframes bf-sl-23{0%,23%{opacity:0;transform:translateY(24px)}29%,96%{opacity:1;transform:none}100%{opacity:0}}
@keyframes bf-sl-37{0%,37%{opacity:0;transform:translateY(24px)}43%,96%{opacity:1;transform:none}100%{opacity:0}}
@keyframes bf-sl-4{0%,4%{opacity:0;transform:translateY(24px)}10%,96%{opacity:1;transform:none}100%{opacity:0}}
@keyframes bf-sl-70{0%,70%{opacity:0;transform:translateY(24px)}76%,96%{opacity:1;transform:none}100%{opacity:0}}
@keyframes bf-type-38{0%,38%{transform:scaleX(1);animation-timing-function:steps(22,end)}46%,100%{transform:scaleX(0)}}
@keyframes bf-type-4{0%,4%{transform:scaleX(1);animation-timing-function:steps(22,end)}12%,100%{transform:scaleX(0)}}
@media(max-width:820px){.bf-flow{grid-template-columns:1fr}.bf-col+.bf-col{border-left:0;border-top:2px dashed rgba(32,24,59,.25)}.bf-svg{max-width:340px}}
@media(prefers-reduced-motion:reduce){.bf-flow *{animation:none!important}}
/* "Ana sayfa" + "Tasda Business" side by side above the first box. */
.share-top .share-top-buttons{display:flex;gap:10px;margin-left:auto}
.share-top a.lp-top-quiet{min-height:40px;display:inline-flex;align-items:center;padding:0 14px;border:1px solid var(--lp-line-strong);border-radius:6px;background:rgba(177,198,255,.05);box-shadow:4px 4px 0 rgba(191,210,255,.16);color:var(--lp-soft);font-size:13px;font-weight:900;text-decoration:none}
.share-top a.lp-top-quiet:hover{color:var(--lp-text);border-color:rgba(191,210,255,.5);transform:translate(1px,1px);box-shadow:3px 3px 0 rgba(191,210,255,.14)}
@media(max-width:820px){.bf-gains{grid-template-columns:1fr}.bf-examples article{grid-template-columns:1fr;gap:8px}}
@media(max-width:560px){.bf-caps{grid-template-columns:1fr;gap:6px}.share-top .share-crumbs{font-size:12px}}