/* Yeni Kare — ana sayfa görsel sistemi: telefon maketi, hero sahnesi, akış, adım illüstrasyonları,
   bento görselleri, panel grafiği, blog kapakları ve hareket dili.
   Dil: logodaki "kare" (yuvarlatılmış kare), koyu yeşil + sarı, yumuşak çok katmanlı gölge, cam yüzey. */
:root{
  --ease:cubic-bezier(.16,1,.3,1);
  --g1:0 1px 2px rgba(4,53,45,.06),0 10px 24px -14px rgba(4,53,45,.3);
  --g2:0 2px 4px rgba(4,53,45,.05),0 30px 70px -28px rgba(4,53,45,.5);
}

/* ---------- Hareket dili ---------- */
.gizli-basla{opacity:0;transform:translateY(20px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:calc(var(--sira,0)*90ms)}
.gizli-basla.gorundu{opacity:1;transform:none}
.btn-birincil{position:relative;overflow:hidden}
.btn-birincil::before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.3) 50%,transparent 70%);transform:translateX(-130%);transition:transform .8s var(--ease);pointer-events:none}
.btn-birincil:hover::before{transform:translateX(130%)}
[data-derinlik],.kahraman .kare{translate:calc(var(--mx,0)*var(--d,0)*2px) calc(var(--my,0)*var(--d,0)*2px);transition:translate .6s var(--ease)}
@keyframes nabiz{70%{box-shadow:0 0 0 7px rgba(10,138,95,0)}100%{box-shadow:0 0 0 0 rgba(10,138,95,0)}}
@keyframes dash{to{stroke-dashoffset:-9}}
@keyframes halka{from{transform:scale(.55);opacity:.9}to{transform:scale(1.2);opacity:0}}
@keyframes kaydir{0%{background-position:-160px 0}100%{background-position:160px 0}}

/* ---------- Telefon maketi (saf HTML/CSS) ---------- */
.tel{container-type:inline-size;aspect-ratio:9/18.6}
.tel-govde{position:relative;height:100%;padding:3.6cqw;border-radius:14cqw;background:linear-gradient(145deg,#3a4a44,#0c1814 36%,#16231e 70%,#2e3e38);box-shadow:inset 0 0 0 .5cqw rgba(255,255,255,.09),inset 0 0 0 1.4cqw #0b1612,0 50px 80px -34px rgba(4,53,45,.8),0 18px 30px -18px rgba(0,0,0,.5)}
.tel-ekran{position:relative;height:100%;display:flex;flex-direction:column;border-radius:10.8cqw;overflow:hidden;background:#fff;font-size:4.6cqw;transition:opacity .26s,transform .26s}
.tel-ekran.degis{opacity:0;transform:scale(.96)}
.tel-durum{position:absolute;z-index:3;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:3.4cqw 7.5cqw 0;color:#fff;font-size:3.4cqw;font-weight:700;letter-spacing:.02em}
.tel-ada{position:absolute;left:50%;top:2.6cqw;width:22cqw;height:6cqw;border-radius:9px;background:#05100c;transform:translateX(-50%)}
.tel-sinyal{display:flex;gap:.7cqw;align-items:flex-end}
.tel-sinyal u{width:1cqw;height:1.6cqw;border-radius:1px;background:#fff}.tel-sinyal u:nth-child(2){height:2.4cqw}.tel-sinyal u:nth-child(3){height:3.2cqw}
.tel-kapak{position:relative;overflow:hidden;padding:15cqw 6cqw 7cqw;text-align:center;color:#fff;background:linear-gradient(150deg,color-mix(in srgb,var(--renk) 80%,#fff),var(--renk) 52%,color-mix(in srgb,var(--renk) 52%,#000));transition:background .3s}
.tel-kapak::before,.tel-kapak::after{content:"";position:absolute;border-radius:8cqw;transform:rotate(18deg)}
.tel-kapak::before{width:34cqw;height:34cqw;right:-9cqw;top:-8cqw;background:rgba(255,255,255,.11)}
.tel-kapak::after{width:20cqw;height:20cqw;left:-6cqw;bottom:-9cqw;background:rgba(247,210,88,.3);transform:rotate(-14deg)}
.tel-logo{position:relative;z-index:1;display:block;width:16cqw;height:16cqw;margin:0 auto 3cqw;border-radius:5cqw;background:linear-gradient(145deg,#ffe58a,var(--sari));box-shadow:0 0 0 1.2cqw rgba(255,255,255,.24),0 3cqw 6cqw -2cqw rgba(0,0,0,.5)}
.tel-logo::after{content:"";position:absolute;inset:4.6cqw;border-radius:1.6cqw;background:var(--renk)}
.tel-kapak b,.tel-kapak small{position:relative;z-index:1;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tel-kapak b{font-size:6.2cqw;line-height:1.2}
.tel-kapak small{margin-top:1cqw;opacity:.85;font-size:4cqw}
.tel-sekme{display:flex;gap:2cqw;padding:4.4cqw 4.4cqw 1.4cqw}
.tel-sekme i{flex:1;height:2.2cqw;border-radius:9px;background:#e4ebe7}.tel-sekme i.e{background:var(--renk)}
.tel-satir{display:grid;grid-template-columns:11.5cqw 1fr 10cqw;align-items:center;gap:2.6cqw;margin:2.2cqw 4.4cqw 0;padding:2.4cqw;border-radius:3.6cqw;background:#fff;border:1px solid #e8eeea;box-shadow:0 2cqw 4cqw -3cqw rgba(4,53,45,.3);animation:satir 5.4s ease-in-out infinite;animation-delay:calc(var(--g)*.9s)}
.tel-satir .g{position:relative;height:11.5cqw;border-radius:2.8cqw;background:linear-gradient(135deg,color-mix(in srgb,var(--renk) 40%,#fff),var(--renk))}
.tel-satir .g::after{content:"";position:absolute;right:1.6cqw;top:1.6cqw;width:3cqw;height:3cqw;border-radius:50%;background:rgba(255,255,255,.55)}
.tel-satir b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:3.9cqw;line-height:1.25}
.tel-satir em{height:4.6cqw;border-radius:9px;background:color-mix(in srgb,var(--renk) 16%,#fff)}
.tel-dugme{margin:auto 4.4cqw 3.4cqw;padding:3.3cqw;border-radius:3.6cqw;background:linear-gradient(180deg,color-mix(in srgb,var(--renk) 88%,#fff),var(--renk));color:#fff;text-align:center;font-size:4.2cqw;font-weight:800;box-shadow:inset 0 -1cqw 0 rgba(0,0,0,.18),0 3cqw 5cqw -3cqw var(--renk)}
.tel-cubuk{display:block;width:28cqw;height:1.2cqw;margin:0 auto 2.2cqw;border-radius:9px;background:#14211c;opacity:.55}
.tel-parilti{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(115deg,rgba(255,255,255,.26),rgba(255,255,255,0) 30%);pointer-events:none}
@keyframes satir{0%,62%,100%{background:#fff;transform:none}22%{background:var(--sari-acik);transform:translateX(.8cqw)}}

/* ---------- 1. Hero sahnesi ---------- */
.kahraman{padding:48px 0 88px}
.kahraman .kare{position:absolute;border-radius:24%;pointer-events:none}
.kahraman .k1{--d:30;width:128px;height:128px;right:4%;top:36px;background:linear-gradient(145deg,#ffe58a,var(--sari));box-shadow:inset 0 0 0 1px rgba(255,255,255,.5),0 24px 40px -22px rgba(190,150,20,.6);transform:rotate(14deg);animation:suz 9s ease-in-out infinite;--don:14deg}
.kahraman .k2{--d:-24;width:78px;height:78px;left:2%;bottom:70px;background:var(--yesil);opacity:.08;transform:rotate(-10deg)}
.kahraman .k3{--d:40;width:34px;height:34px;left:49%;top:30px;border:5px solid var(--sari);transform:rotate(18deg);animation:suz 7s ease-in-out infinite;--don:18deg}
.kahraman-metin{animation:yuksel .7s both}
.donen{display:inline-block;color:var(--yesil);background:linear-gradient(transparent 68%,rgba(247,210,88,.85) 68%);transition:opacity .28s,transform .28s}
.donen.cik{opacity:0;transform:translateY(.3em)}
.hero-gorsel{position:relative;width:min(560px,100%);height:626px;margin-inline:auto;animation:yuksel .9s .1s both}
.sahne-arka{position:absolute;inset:0;pointer-events:none}
.isik{position:absolute;border-radius:50%}
.isik.i1{right:-70px;top:-50px;width:440px;height:440px;background:radial-gradient(circle,rgba(247,210,88,.5),transparent 66%)}
.isik.i2{left:-60px;bottom:-30px;width:380px;height:380px;background:radial-gradient(circle,rgba(13,92,76,.22),transparent 66%)}
.sayfa{position:absolute;border-radius:40px;width:318px;height:420px}
.sayfa.s1{left:-26px;top:76px;width:336px;height:470px;background:linear-gradient(160deg,#ffe58a,var(--sari));transform:rotate(-7deg);box-shadow:0 30px 50px -30px rgba(190,150,20,.7)}
.sayfa.s2{left:34px;top:22px;width:336px;height:470px;background:linear-gradient(160deg,#d9eee6,#bfe0d3);transform:rotate(4deg)}
.demo-kart{position:absolute;z-index:2;left:0;top:40px;width:340px;padding:20px;border-radius:30px;background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.95);box-shadow:var(--g2),0 0 0 1px rgba(4,53,45,.06);transform:perspective(1100px) rotateY(calc(var(--mx,0)*7deg)) rotateX(calc(var(--my,0)*-6deg));transition:transform .5s var(--ease)}
.demo-ust{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;font-weight:800;font-size:.98rem}
.canli{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:99px;background:#e6f6ef;color:#06704b;font-size:.72rem;font-weight:800}
.canli i{width:7px;height:7px;border-radius:50%;background:#0a8a5f;box-shadow:0 0 0 0 rgba(10,138,95,.6);animation:nabiz 1.8s infinite}
.demo-qr{position:relative;overflow:hidden;padding:18px;border-radius:22px;background:#fff;border:1px solid var(--cizgi)}
.demo-qr>div{display:grid;place-items:center}
.demo-qr svg{display:block;width:100%;height:auto}
.kose{position:absolute;width:24px;height:24px;border:0 solid var(--sari);animation:kose 2.4s ease-in-out infinite}
.kose.ka{left:8px;top:8px;border-width:4px 0 0 4px;border-top-left-radius:9px}
.kose.kb{right:8px;top:8px;border-width:4px 4px 0 0;border-top-right-radius:9px}
.kose.kc{left:8px;bottom:8px;border-width:0 0 4px 4px;border-bottom-left-radius:9px}
.kose.kd{right:8px;bottom:8px;border-width:0 4px 4px 0;border-bottom-right-radius:9px}
@keyframes kose{50%{transform:scale(.88)}}
.tarama-cizgi{position:absolute;left:6%;right:6%;top:8%;height:3px;border-radius:3px;background:linear-gradient(90deg,transparent,var(--sari) 18%,var(--sari) 82%,transparent);box-shadow:0 0 18px 4px rgba(247,210,88,.7);animation:tara 3.4s ease-in-out infinite}
@keyframes tara{0%,100%{top:8%}50%{top:90%}}
.demo-alan{display:flex;align-items:center;gap:8px;margin-top:14px;padding:0 13px;border:1.5px solid var(--cizgi);border-radius:14px;background:#fff;transition:border-color .2s,box-shadow .2s}
.demo-alan:focus-within{border-color:var(--yesil);box-shadow:0 0 0 4px rgba(4,53,45,.1)}
.demo-alan .ikon{color:var(--yesil)}
.demo-alan input{flex:1;min-width:0;padding:12px 0;border:0;outline:0;background:none;font:inherit;font-size:.9rem}
.demo-renkler{display:flex;align-items:center;gap:9px;margin-top:14px;color:var(--soluk);font-size:.8rem;font-weight:700}
.demo-renkler button{width:26px;height:26px;padding:0;border:0;border-radius:8px;background:var(--c);box-shadow:inset 0 0 0 2px rgba(255,255,255,.3);cursor:pointer;transition:transform .2s var(--ease),box-shadow .2s}
.demo-renkler button:hover{transform:scale(1.14)}
.demo-renkler button.etkin{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--c)}
.demo-alt{display:flex;gap:8px;margin-top:14px}.demo-alt .btn{flex:1}
.hero-telefon{position:absolute;z-index:1;right:0;top:0;width:226px;transform:rotate(5deg);animation:suz 8s ease-in-out infinite;--don:5deg}
.bildirim-kart{position:absolute;z-index:3;display:flex;align-items:center;gap:10px;padding:10px 15px 10px 10px;border-radius:17px;background:rgba(255,255,255,.93);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(4,53,45,.07);box-shadow:var(--g1),0 20px 38px -18px rgba(4,53,45,.5);animation:suz 7s ease-in-out infinite}
.bildirim-kart b{display:block;font-size:.84rem;line-height:1.2}
.bildirim-kart small{display:block;color:var(--soluk);font-size:.72rem}
.bildirim-kart.b1{right:-8px;top:312px}
.bildirim-kart.b2{left:26px;bottom:-16px;gap:14px;animation-delay:-2.4s}
.bildirim-kart.b2 b{font-size:1.15rem;font-variant-numeric:tabular-nums}
.bildirim-kart.b2 svg{width:70px;height:30px;overflow:visible}
.bildirim-kart.b2 .hat{fill:none;stroke:#0a8a5f;stroke-width:2.4;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:cizdon 3.6s ease-in-out infinite}
@keyframes cizdon{0%{stroke-dashoffset:1}55%,100%{stroke-dashoffset:0}}
.bildirim-kart.b3{right:4px;top:506px;animation-delay:-4.2s}
.av{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:11px;background:var(--yesil);color:var(--sari);font-size:.72rem;font-weight:800}
.av.a2{background:#0b66c3;color:#fff}.av.a3{background:#be185d;color:#fff}
.onay-kutu{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:#e6f6ef;color:#0a8a5f}
@media (max-width:1180px){.hero-gorsel{height:600px}.demo-kart{width:316px}.hero-telefon{width:196px}.bildirim-kart.b1{display:none}.sayfa{width:296px}}
@media (max-width:960px){
  .hero-gorsel{width:min(380px,100%);height:auto}
  .sahne-arka,.hero-telefon,.bildirim-kart{display:none}
  .demo-kart{position:relative;top:0;width:100%;transform:none}
  .kahraman .k1{width:70px;height:70px}
}

/* ---------- 2. Kayan şerit ---------- */
.serit{background:linear-gradient(180deg,#fff,#f8fbf9)}
.serit-oge{display:inline-flex;align-items:center;gap:10px;white-space:nowrap;padding:7px 17px 7px 7px;border-radius:99px;background:#fff;border:1px solid var(--cizgi);box-shadow:var(--g1);font-size:.88rem;font-weight:700;color:var(--metin)}
.serit-oge i{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--yesil-acik);color:var(--yesil)}
.serit-oge:nth-child(4n+2) i{background:var(--sari-acik);color:#8a6a00}
.serit-oge:nth-child(4n+3) i{background:#e1ecfb;color:#0b66c3}
.serit-oge:nth-child(4n+4) i{background:#fde4ee;color:#be185d}

/* ---------- 4. Nedir: akış diyagramı ---------- */
.akis{position:relative;display:grid;grid-template-columns:1fr 96px 1fr 96px 1fr;align-items:center;gap:4px;max-width:1040px;margin:0 auto 44px;padding:34px 28px 26px;border-radius:32px;background:linear-gradient(180deg,#fff,#f6faf8);border:1px solid var(--cizgi);box-shadow:var(--g2);overflow:hidden}
.akis::before{content:"";position:absolute;left:50%;top:-120px;width:520px;height:240px;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(247,210,88,.28),transparent);pointer-events:none}
.akis-dugum{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
.akis-dugum b{font-size:1.04rem}.akis-dugum small{color:var(--soluk)}
.akis-gorsel{position:relative;display:grid;place-items:center;width:100%;max-width:230px;height:196px;margin-bottom:12px;border-radius:24px;background:linear-gradient(160deg,#f1f6f3,#e3eee8);border:1px solid rgba(4,53,45,.06);overflow:hidden}
.akis-gorsel.qr-ic>div{width:132px;padding:11px;border-radius:18px;background:#fff;box-shadow:var(--g1)}
.akis-gorsel.qr-ic svg{display:block;width:100%;height:auto}
.akis-ok svg{display:block;width:100%;height:24px;overflow:visible}
.akis-ok path{fill:none;stroke:var(--yesil);stroke-width:2;stroke-dasharray:4 5;stroke-linecap:round;opacity:.55;animation:dash 1s linear infinite}
.akis-ok circle{fill:var(--sari);stroke:var(--yesil);stroke-width:1.6}
.akis-gorsel.tarayici{align-content:start;justify-items:stretch;background:#fff}
.tar-ust{display:flex;gap:5px;padding:10px 12px;background:#eef3f0}
.tar-ust i{width:8px;height:8px;border-radius:50%;background:#f2a7a0}.tar-ust i:nth-child(2){background:#f2d27a}.tar-ust i:nth-child(3){background:#8fd1ae}
.tar-adres{display:flex;align-items:center;gap:6px;margin:12px 12px 0;padding:8px 10px;border-radius:10px;background:var(--zemin-2);color:var(--soluk);font:600 .66rem ui-monospace,Consolas,monospace;white-space:nowrap;overflow:hidden}
.tar-adres .ikon{flex:none;width:12px;height:12px;color:#0a8a5f}
.tar-adres b{padding:0 3px;border-radius:4px;background:var(--sari-acik);color:var(--yesil)}
.tar-govde{display:grid;gap:9px;padding:16px 12px}
.tar-govde span{height:11px;border-radius:6px;background:linear-gradient(90deg,#e6eeea 30%,#f6faf8 50%,#e6eeea 70%) 0 0/320px 100%;animation:kaydir 2.2s linear infinite}
.tar-govde .s1{width:58%}.tar-govde .s3{width:78%}
.akis-gorsel.telefon-kes{align-items:start;padding-top:18px}
.akis-gorsel.telefon-kes .tel{width:132px}
@media (max-width:860px){.akis{grid-template-columns:1fr;gap:6px}.akis-ok{justify-self:center;width:70px;transform:rotate(90deg);margin:14px 0}}

/* ---------- 5. Adım illüstrasyonları ---------- */
.adim-gorsel{position:relative;display:grid;place-items:center;height:140px;margin:10px 0 18px;border-radius:18px;overflow:hidden;background:linear-gradient(160deg,var(--a1,#f1f6f3),var(--a2,#e1ece6));border:1px solid rgba(4,53,45,.05)}
.nasil-adim:nth-child(2) .adim-gorsel{--a1:#fef8dd;--a2:#fbeeb4}
.nasil-adim:nth-child(3) .adim-gorsel{--a1:#edf4fe;--a2:#d9e7fb}
.nasil-adim:nth-child(4) .adim-gorsel{--a1:#eef5f1;--a2:#d8e9e0}
.adim-gorsel.tur{grid-template-columns:repeat(3,46px);gap:9px;align-content:center;justify-content:center}
.adim-gorsel.tur i{display:grid;place-items:center;height:46px;border-radius:13px;background:var(--t);color:var(--yesil);box-shadow:0 8px 14px -9px rgba(4,53,45,.55)}
.adim-gorsel.tur i.sec{animation:sec 4.6s ease-in-out infinite}
@keyframes sec{0%,34%,86%,100%{background:var(--t);color:var(--yesil);transform:none}42%,78%{background:var(--yesil);color:var(--sari);transform:scale(1.1)}}
.imlec{position:absolute;width:22px;height:22px;fill:var(--yesil);stroke:#fff;stroke-width:1.6;stroke-linejoin:round;filter:drop-shadow(0 3px 4px rgba(0,0,0,.3));animation:imlec 4.6s ease-in-out infinite}
@keyframes imlec{0%{left:88%;top:112%;transform:none}34%{left:calc(50% + 4px);top:96px}38%{left:calc(50% + 4px);top:98px;transform:scale(.86)}44%,78%{left:calc(50% + 4px);top:96px;transform:none}100%{left:88%;top:112%}}
.adim-gorsel.yelpaze .k{position:absolute;left:50%;bottom:-16px;width:76px;margin-left:-38px;transform-origin:50% 100%;animation:yelpaze 6s ease-in-out infinite}
.adim-gorsel.yelpaze .k2{animation-delay:-2s}.adim-gorsel.yelpaze .k3{animation-delay:-4s}
.adim-gorsel.yelpaze .mini{display:block;border:2px solid #fff;border-radius:12px;box-shadow:0 16px 26px -12px rgba(4,53,45,.55)}
@keyframes yelpaze{0%,26%{transform:translateX(0) rotate(0) scale(1.08);z-index:3}33%,59%{transform:translateX(48px) rotate(10deg) scale(.88);z-index:1}66%,92%{transform:translateX(-48px) rotate(-10deg) scale(.88);z-index:2}100%{transform:translateX(0) rotate(0) scale(1.08);z-index:3}}
.adim-gorsel.boya{align-content:center;gap:10px}
.qr-dongu{position:relative;width:88px;height:88px}
.qr-dongu span{position:absolute;inset:0;padding:7px;border-radius:14px;background:#fff;box-shadow:var(--g1);animation:qrgec 6s ease-in-out infinite}
.qr-dongu span:nth-child(2){animation-delay:-4s}.qr-dongu span:nth-child(3){animation-delay:-2s}
.qr-dongu svg{display:block;width:100%;height:auto}
@keyframes qrgec{0%,28%{opacity:1;transform:none}34%,94%{opacity:0;transform:scale(.9) rotate(-5deg)}100%{opacity:1;transform:none}}
.renk-sira{display:flex;gap:7px}
.renk-sira i{width:14px;height:14px;border-radius:5px;background:var(--c);box-shadow:inset 0 0 0 2px rgba(255,255,255,.35)}
.adim-gorsel.grafik{display:block;padding:0}
.adim-gorsel.grafik svg{display:block;width:100%;height:100%}
.adim-gorsel.grafik .izg{stroke:rgba(4,53,45,.1);stroke-width:1;fill:none}
.adim-gorsel.grafik .dol{opacity:0;transition:opacity 1s 1.2s}
.nasil-adim.gorundu .grafik .dol{opacity:1}
.adim-gorsel.grafik .hat{fill:none;stroke:var(--yesil);stroke-width:3.2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.nasil-adim.gorundu .grafik .hat{animation:ciz 1.6s .3s ease forwards}
.adim-gorsel.grafik .uc{fill:#fff;stroke:var(--yesil);stroke-width:3;opacity:0}
.nasil-adim.gorundu .grafik .uc{animation:belirnokta .4s 1.8s forwards}
.adim-gorsel.grafik .rozet{position:absolute;left:12px;top:10px;padding:5px 11px;border-radius:11px;background:var(--yesil);color:var(--sari);font-size:.95rem;font-weight:800;box-shadow:0 10px 18px -10px var(--yesil)}
.adim-gorsel.grafik .rozet small{font-size:.62rem;font-weight:700;opacity:.8}

/* ---------- 9. Bento görselleri ---------- */
.qr-stilleri{display:grid;grid-template-columns:repeat(2,1fr);flex:none;gap:10px;width:246px}
.qr-stilleri span{display:block;padding:10px;border-radius:18px;background:var(--t,#fff);border:1px solid rgba(4,53,45,.06);box-shadow:var(--g1);transition:transform .35s var(--ease)}
.qr-stilleri span:nth-child(odd){transform:rotate(-3deg)}.qr-stilleri span:nth-child(even){transform:rotate(3deg) translateY(8px)}
.bk:hover .qr-stilleri span{transform:none}
.qr-stilleri svg,.cta-qr svg{display:block;width:100%;height:auto;border-radius:8px}
.adres-cubugu{display:flex;align-items:center;gap:8px;margin-top:18px;padding:10px 12px;border-radius:14px;background:#fff;border:1px solid var(--cizgi);box-shadow:var(--g1);color:var(--soluk);font:600 .78rem ui-monospace,Consolas,monospace;white-space:nowrap;overflow:hidden}
.adres-cubugu .fav{flex:none;width:16px;height:16px;border-radius:5px;background:linear-gradient(135deg,var(--yesil),var(--yesil-orta))}
.adres-cubugu .ikon{flex:none;width:13px;height:13px;color:#0a8a5f}
.adres-cubugu b{color:var(--yesil)}
.yaziliyor::after{content:"";display:inline-block;width:2px;height:1em;margin-left:2px;vertical-align:-.15em;background:var(--sari);animation:yan 1s steps(1) infinite}
@keyframes yan{50%{opacity:0}}
.menu-kart{position:relative;display:grid;gap:8px;margin-top:18px;padding:12px 12px 20px;border-radius:18px;background:var(--zemin-2)}
.mk-satir{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:13px;background:#fff;box-shadow:var(--g1)}
.mk-g{flex:none;width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,#ffe58a,#e3a82f)}.mk-g.g2{background:linear-gradient(135deg,#a9724a,#5c3b22)}
.mk-satir b{flex:1;font-size:.85rem}
.fiyat-cevir{display:inline-grid;font-size:.9rem;font-weight:800}
.fiyat-cevir s,.fiyat-cevir em{grid-area:1/1;justify-self:end}
.fiyat-cevir s{color:var(--soluk);text-decoration-color:#c0392b;text-decoration-thickness:2px;animation:eskifiyat 4.4s ease-in-out infinite}
.fiyat-cevir em{padding:0 7px;border-radius:7px;background:var(--sari);color:var(--yesil);font-style:normal;animation:yenifiyat 4.4s ease-in-out infinite}
.fiyat-cevir.sabit em{background:none;color:var(--yesil);padding:0;animation:none}
@keyframes eskifiyat{0%,34%{opacity:1;transform:none}44%,100%{opacity:0;transform:translateY(-8px)}}
@keyframes yenifiyat{0%,34%{opacity:0;transform:translateY(8px)}46%,88%{opacity:1;transform:none}100%{opacity:0}}
.mk-toast{position:absolute;right:12px;bottom:-12px;display:flex;align-items:center;gap:6px;padding:6px 11px;border-radius:99px;background:var(--yesil);color:#fff;font-size:.7rem;font-weight:700;box-shadow:0 12px 20px -10px var(--yesil);animation:toast 4.4s ease-in-out infinite}
.mk-toast .ikon{color:var(--sari)}
@keyframes toast{0%,40%{opacity:0;transform:translateY(8px)}50%,86%{opacity:1;transform:none}96%,100%{opacity:0}}
.posta{display:grid;gap:8px;margin:18px 0 0;padding:0;list-style:none}
.posta li{display:flex;align-items:center;gap:10px;padding:9px 11px 9px 9px;border-radius:15px;background:#fff;border:1px solid var(--cizgi);box-shadow:var(--g1);animation:soldan 6s ease-in-out infinite}
.posta li:nth-child(2){animation-delay:.7s}.posta li:nth-child(3){animation-delay:1.4s}
.posta li>div{flex:1;min-width:0}
.posta b{display:block;font-size:.8rem}
.posta small{display:block;overflow:hidden;color:var(--soluk);font-size:.7rem;text-overflow:ellipsis;white-space:nowrap}
.et{padding:3px 9px;border-radius:99px;font-size:.68rem;font-style:normal;font-weight:800}
.et.e1{background:#e1ecfb;color:#0b66c3}.et.e2{background:var(--sari-acik);color:#7a5c00}.et.e3{background:#e6f6ef;color:#06704b}
@keyframes soldan{0%,72%,100%{transform:none}14%{transform:translateX(5px);border-color:var(--sari)}}
.anahtarlar{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.anahtarlar span{display:inline-flex;align-items:center;gap:9px;padding:8px 13px;border-radius:99px;background:#fff;border:1px solid var(--cizgi);box-shadow:var(--g1);font-size:.8rem;font-weight:700}
.anahtarlar i{position:relative;width:34px;height:19px;border-radius:99px;background:#c9d4ce}
.anahtarlar i::after{content:"";position:absolute;left:2px;top:2px;width:15px;height:15px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.anahtarlar .ac i{background:#0a8a5f}.anahtarlar .ac i::after{left:17px;animation:dugme 5s ease-in-out infinite}
.anahtarlar .kod{color:var(--yesil)}
@keyframes dugme{0%,40%,100%{left:17px}50%,90%{left:2px}}
.serp{margin-top:18px;padding:13px 15px;border-radius:15px;background:#fff;border:1px solid var(--cizgi);box-shadow:var(--g1)}
.serp small{display:flex;align-items:center;gap:7px;color:#5b6b64;font-size:.7rem}
.serp small i{width:16px;height:16px;border-radius:50%;background:linear-gradient(135deg,var(--yesil),var(--yesil-orta))}
.serp b{display:block;margin:4px 0 2px;color:#1558d6;font-size:.95rem;font-weight:600}
.serp span{display:block;color:#5b6b64;font-size:.78rem;line-height:1.45}
.guvenlik{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:18px 0 0;padding:0;list-style:none}
.guvenlik li{display:flex;align-items:center;gap:8px;padding:9px 11px;border-radius:12px;background:var(--zemin-2);font-size:.8rem;font-weight:700}
.guvenlik .ikon{flex:none;color:#0a8a5f}
.kalkan{position:relative;display:grid;place-items:center;flex:none;width:200px;height:200px}
.kalkan svg{position:relative;width:96px;height:108px;filter:drop-shadow(0 18px 18px rgba(4,53,45,.35))}
.kalkan svg path:first-child{fill:var(--yesil)}
.kalkan .t{fill:none;stroke:var(--sari);stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round}
.kalkan .r1,.kalkan .r2{position:absolute;inset:14px;border-radius:50%;border:2px solid rgba(10,138,95,.35);animation:halka 3.2s ease-out infinite}
.kalkan .r2{animation-delay:1.6s}
@media (max-width:700px){.qr-stilleri{width:100%}.kalkan{width:100%;height:150px}.guvenlik{grid-template-columns:1fr}}

/* ---------- 10. Panel grafiği ---------- */
.pano .cizgi{stroke:url(#cizgi-g);filter:drop-shadow(0 6px 6px rgba(4,53,45,.25))}
.y-etiket text{fill:#8a9a93;font-size:10px;font-weight:600}
.ipucu{opacity:0;transform-box:fill-box;transform-origin:50% 100%}
.ipucu rect,.ipucu path{fill:var(--yesil)}
.ipucu text{fill:#fff;font-size:11px;font-weight:700}
.pano.gorundu .ipucu{animation:belirnokta .5s 2s forwards}

/* ---------- 13. Blog kapakları ---------- */
.yazi-kapak{position:relative;overflow:hidden;isolation:isolate}
.yazi-kapak::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(rgba(255,255,255,.16) 1.4px,transparent 1.7px) 0 0/18px 18px}
.yazi-kapak.kapak1{background:linear-gradient(135deg,#04352d,#0d5c4c)}
.yazi-kapak.kapak2{background:linear-gradient(135deg,#0b3a6b,#0b66c3)}
.yazi-kapak.kapak3{background:linear-gradient(135deg,#5a1230,#be185d)}
.yazi-kapak .kp{position:absolute;z-index:-1;aspect-ratio:1;border-radius:22%;transition:transform .6s var(--ease)}
.yazi-kapak .kp.k1{right:-6%;top:-30%;width:38%;background:linear-gradient(145deg,#ffe58a,var(--sari));transform:rotate(16deg)}
.yazi-kapak .kp.k2{left:7%;bottom:-18%;width:28%;background:rgba(255,255,255,.14);transform:rotate(-12deg)}
.yazi-kapak .kp.k3{left:24%;top:16%;width:11%;border:3px solid rgba(255,255,255,.38);transform:rotate(20deg)}
.kapak-ikon{display:grid;place-items:center;width:86px;height:86px;border-radius:26px;background:rgba(255,255,255,.16);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.38);color:#fff;box-shadow:0 20px 32px -14px rgba(0,0,0,.55);transition:transform .5s var(--ease)}
.kapak-ikon .ikon{width:40px;height:40px;stroke-width:1.5}
.yazi-kart:hover .kapak-ikon{transform:translateY(-5px) rotate(-5deg)}
.yazi-kart:hover .kp.k1{transform:rotate(30deg) scale(1.1)}
.yazi-kart:hover .kp.k2{transform:rotate(-22deg) scale(1.15)}

/* ---------- CTA ---------- */
.cta-qr{box-shadow:0 34px 56px -26px rgba(0,0,0,.65)}

@media (prefers-reduced-motion:reduce){
  .akis-ok circle{display:none}
  .gizli-basla{opacity:1;transform:none}
  [data-derinlik],.kahraman .kare{translate:none}
}
.karsilastir{max-width:1040px}

/* ---------- Mobil taşma güvenceleri (kaydırılabilir sekme şeritleri ızgara öğesini genişletmesin) ---------- */
.vs-sol,.vs-sag,.alan-paneller,.sektor>*,.akis-dugum,.bk{min-width:0}
@media (max-width:960px){.vs{grid-template-columns:minmax(0,1fr)}.sektor{grid-template-columns:minmax(0,1fr)}}