{"cards":{"plesk":"<!DOCTYPE html>\r\n<html data-bento-key=\"plesk\" data-bento-paused=\"true\" lang=\"tr\">\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\r\n<meta name=\"theme-color\" content=\"#0b0d10\">\r\n<title>Zonely · Plesk Barındırma ve Güvenlik</title>\r\n<style>\r\n  :root { color-scheme: dark; font-family: Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif; }\r\n  * { box-sizing: border-box; }\r\n  html, body { min-height: 100%; margin: 0; }\r\n  /* Sayfa ve kart zemini tamamen şeffaf; sadece glow katmanları görünür. */\r\n  body { display: grid; place-items: center; padding: 20px; background: transparent; }\r\n\r\n  .ai-card {\r\n    position: relative;\r\n    width: min(794px, 100%);\r\n    overflow: hidden;\r\n    isolation: isolate;\r\n    color: #f3f4f7;\r\n    background: transparent;\r\n    border-radius: 0;\r\n  }\r\n  /* Eski gren/vinyet arka planları kaldırıldı; ışık animasyonları .ambient ve .chip-halo ile korunuyor. */\r\n  .ai-card::before,\r\n  .ai-card::after { content: none; }\r\n\r\n  .visual-window { position: relative; height: 452px; z-index: 1; }\r\n  .scene {\r\n    position: absolute;\r\n    width: 794px; height: 452px;\r\n    left: 0; top: 0;\r\n    transform-origin: 0 0;\r\n    transform: scale(var(--scene-scale, 1));\r\n    user-select: none;\r\n  }\r\n  .ambient { position: absolute; pointer-events: none; border-radius: 50%; filter: blur(24px); animation: breathe 5.8s ease-in-out infinite alternate; }\r\n  .ambient.warm {\r\n    width: 310px; height: 276px; left: 233px; top: 147px;\r\n    background: radial-gradient(ellipse, rgba(67, 214, 157, .23) 0%, rgba(88, 187, 173, .11) 40%, transparent 71%);\r\n  }\r\n  .ambient.cool {\r\n    width: 310px; height: 290px; left: 337px; top: 119px;\r\n    background: radial-gradient(ellipse, rgba(112, 143, 255, .27) 0%, rgba(102, 105, 229, .11) 41%, transparent 73%);\r\n    animation-delay: -2.8s;\r\n  }\r\n  .ambient.aura {\r\n    width: 450px; height: 380px; left: 170px; top: 70px;\r\n    background: radial-gradient(ellipse, rgba(120, 197, 210, .075), transparent 69%);\r\n    filter: blur(30px);\r\n  }\r\n\r\n  /* Altı özelliği merkeze bağlayan hareketli bağlantılar. */\r\n  .network { position: absolute; inset: 0; width: 794px; height: 452px; overflow: visible; }\r\n  .track { fill: none; stroke: #656773; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: .9; }\r\n  .track.warm { stroke: #96cbb9; }\r\n  .track.cool { stroke: #a0aaca; }\r\n  .track-pulse { fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 17 400; animation: trace 5.4s linear infinite; filter: drop-shadow(0 0 4px currentColor); }\r\n  .track-pulse.warm { color: #6ef0ba; stroke: #85f6c6; }\r\n  .track-pulse.cool { color: #a0b5ff; stroke: #b2c4ff; }\r\n  .p2 { animation-delay: -1.9s; }.p3 { animation-delay: -3.3s; }\r\n  .p4 { animation-delay: -1.1s; }.p5 { animation-delay: -3.8s; }.p6 { animation-delay: -2.5s; }\r\n  @keyframes trace { from { stroke-dashoffset: 410; } to { stroke-dashoffset: 0; } }\r\n\r\n  .progress-outer {\r\n    position: absolute; top: 17px; left: 342px; width: 119px; height: 43px;\r\n    border-radius: 25px;\r\n    border: 1px solid rgba(187, 200, 233, .18);\r\n    background: linear-gradient(135deg, #292d35, #1c2028 53%, #20242d);\r\n    box-shadow: 0 9px 23px #0009, inset 0 1px 1px #e2eaff19, 0 0 15px #9bb4ff11;\r\n    display: grid; place-items: center;\r\n  }\r\n  .progress-outer::before { content: \"\"; position: absolute; inset: 7px; border-radius: 20px; border: 1px solid #07090c; background: #171920; box-shadow: inset 0 3px 8px #050609c9; }\r\n  .progress-track { position: relative; height: 10px; width: 85px; background: #666167; border-radius: 10px; box-shadow: 0 1px 0 #ffffff1c; overflow: visible; }\r\n  .progress-fill {\r\n    position: absolute; inset: 0 auto 0 0; width: 41%; border-radius: inherit;\r\n    background: linear-gradient(90deg, #64e8c4, #65adff);\r\n    box-shadow: 0 0 5px #91f7d7, 0 0 11px #65ccfa, 0 0 22px #62baff99;\r\n    animation: progress 4.3s ease-in-out infinite alternate;\r\n  }\r\n  @keyframes progress { from { width: 35%; } to { width: 64%; } }\r\n\r\n  .feature {\r\n    position: absolute;\r\n    height: 40px;\r\n    display: flex;\r\n    gap: 9px;\r\n    align-items: center;\r\n    padding: 0 12px;\r\n    border-radius: 15px;\r\n    border: 1px solid rgba(216, 224, 240, .22);\r\n    background: linear-gradient(125deg, #23262d 0%, #252830 46%, #1b1e25 100%);\r\n    box-shadow: 0 10px 24px #0004, inset 0 1px #f7f8ff0b, inset 0 -1px #0002;\r\n    color: #d8d9df;\r\n    font-size: 14px;\r\n    line-height: 1;\r\n    letter-spacing: -.17px;\r\n    white-space: nowrap;\r\n    transition: border-color .3s, background .3s, box-shadow .3s;\r\n    z-index: 3;\r\n  }\r\n  .feature:hover { border-color: #abb8d943; background: linear-gradient(135deg, #2c3039, #1f232b); box-shadow: 0 10px 25px #0008, 0 0 18px #829fff1c; }\r\n  .feature svg { width: 15px; height: 15px; flex: none; color: #dfe3eb; }\r\n  .feature.spending { top: 81px; left: 172px; width: 172px; }\r\n  .feature.fraud { top: 81px; left: 470px; width: 158px; }\r\n  .feature.bills { top: 230px; left: 73px; width: 151px; }\r\n  .feature.alerts { top: 231px; left: 596px; width: 130px; }\r\n  .feature.budget { top: 378px; left: 172px; width: 151px; }\r\n  .feature.invest { top: 378px; left: 470px; width: 158px; }\r\n  .feature.bills { gap: 8px; padding-left: 10px; }.feature.bills svg { width: 13px; height: 13px; }\r\n  .feature.alerts { gap: 8px; padding-left: 10px; }\r\n  .feature.budget { gap: 8px; padding-left: 10px; }\r\n  .feature.invest { gap: 8px; padding-left: 10px; }\r\n\r\n  .node { position: absolute; width: 8px; height: 8px; border-radius: 50%; z-index: 5; transform: translate(-50%,-50%); }\r\n  .node::before { content: \"\"; position: absolute; inset: -5px; border-radius: 50%; opacity: .45; animation: node-breathe 3s ease-in-out infinite alternate; }\r\n  .node.warm { background: #93f8c9; box-shadow: 0 0 0 1px #a6ffd765, 0 0 8px 1px #57e1b285; }\r\n  .node.warm::before { background: radial-gradient(circle,#7ce9b977,transparent 72%); }\r\n  .node.cool { background: #a3baff; box-shadow: 0 0 0 1px #b4c4ff66, 0 0 8px 1px #8da7ff8a; }\r\n  .node.cool::before { background: radial-gradient(circle,#91aaff88,transparent 72%); }\r\n  .n1 { left: 248px; top: 121px; }.n2 { left: 553px; top: 121px; }\r\n  .n3 { left: 223px; top: 252px; }.n4 { left: 596px; top: 252px; }\r\n  .n5 { left: 248px; top: 378px; }.n6 { left: 553px; top: 378px; }\r\n  .n2::before,.n5::before { animation-delay: -1.5s; }\r\n  @keyframes node-breathe { from { transform: scale(.8); opacity: .35; } to { transform: scale(1.6); opacity: .8; } }\r\n\r\n  .chip-halo { position:absolute; left: 290px; top: 160px; width: 215px; height: 200px; pointer-events:none; filter: blur(19px); background: conic-gradient(from 60deg, #8faaff66, transparent 24%, #6fddad59 53%, transparent 72%, #8caaff55); border-radius: 60px; opacity:.4; animation: halo 6s ease-in-out infinite alternate; }\r\n  @keyframes halo { from { opacity:.28; transform:scale(.96); } to { opacity:.62; transform:scale(1.06); } }\r\n  .chip {\r\n    position: absolute; left: 321px; top: 184px;\r\n    width: 152px; height: 151px;\r\n    border-radius: 30px;\r\n    padding: 13px;\r\n    background: linear-gradient(130deg, #293b38 2%, #5d7d83 32%, #84b1db 48%, #343d45 63%, #4e806d 88%, #303e3c 100%);\r\n    box-shadow:\r\n      0 17px 32px #000a,\r\n      0 0 45px 7px #7e8eff1a,\r\n      -21px 20px 45px -18px #6fddad58,\r\n      18px -16px 40px -18px #93a9ff70,\r\n      inset 0 1px 2px #ffffff24,\r\n      inset -3px -5px 12px #0007;\r\n    z-index: 4;\r\n    animation: chip-float 6s ease-in-out infinite;\r\n    will-change: transform;\r\n  }\r\n  .chip::before { content:\"\"; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:linear-gradient(116deg,#0009 5%,transparent 30%,#dce5ff0f 48%,transparent 72%,#0006 96%); }\r\n  .chip-inner {\r\n    position: relative; height: 100%; width: 100%; overflow: hidden;\r\n    border-radius: 20px;\r\n    display: grid; place-items: center;\r\n    background: linear-gradient(136deg, #050608, #08090c 54%, #020305);\r\n    border: 1px solid #ffffff15;\r\n    box-shadow: 0 3px 10px #000b inset, 0 1px 1px #eff2ff1a, 0 0 0 1px #0006;\r\n  }\r\n  .chip-inner::before { content:\"\"; position:absolute; inset:-50%; background:linear-gradient(105deg,transparent 38%,#aabaff0c 46%,transparent 54%); transform:translateX(-90%) rotate(12deg); animation: shine 7.5s ease-in-out infinite; }\r\n  .chip-icon { width: 119px; height: 105px; overflow: visible; filter: drop-shadow(0 0 11px rgba(82,187,230,.24)); }\r\n  .chip-inner::after { content: \"\"; position: absolute; left: 26px; right: 26px; bottom: 27px; height: 1px; background: linear-gradient(90deg, transparent, rgba(105,195,231,.36), transparent); }\r\n  @media (max-width: 600px) { body { padding: 12px; } }\r\n\r\n  .chip-icon path,.chip-icon rect,.chip-icon circle { stroke-linecap:round; stroke-linejoin:round; }\r\n  @keyframes chip-float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-4px); } }\r\n  @keyframes shine { 0%,53% { transform:translateX(-90%) rotate(12deg); } 80%,100% { transform:translateX(90%) rotate(12deg); } }\r\n  @keyframes breathe { from { transform:scale(.96); opacity:.82; } to { transform:scale(1.12); opacity:1; } }\r\n\r\n  @media (prefers-reduced-motion: reduce) {\r\n    .ai-card *, .ai-card *::before, .ai-card *::after { animation: none !important; transition: none !important; }\r\n  }\r\n</style>\r\n<style id=\"zonely-bento-host-layout\">html{color-scheme:dark}html,body{min-height:0!important;height:auto!important;overflow-x:hidden!important;background:transparent!important}html[data-bento-paused=\"true\"] *,html[data-bento-paused=\"true\"] *::before,html[data-bento-paused=\"true\"] *::after{animation-play-state:paused!important}</style>\r\n<style id=\"zn-inline-card-fit\">html,body{width:100%;height:100vh!important;min-height:0!important;margin:0!important;overflow:hidden!important;background:transparent!important}body{box-sizing:border-box;display:flex!important;align-items:center!important;justify-content:center!important;padding:28px!important}body>.ai-card,body>.bento,body>.deploy-card,body>.card,body>.templates-card,body>.automation,body>.code-card,body>.analytics{flex:0 1 auto;box-sizing:border-box;width:min(100%,calc((100vh - 56px) * 1.7566))!important;max-width:100%!important;min-height:0!important;margin:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:transparent!important;overflow:visible!important}</style></head>\r\n<body>\r\n<article class=\"ai-card\" aria-label=\"Zonely Plesk barındırma ve güvenlik özellikleri\">\r\n  <div class=\"visual-window\" id=\"visual-window\">\r\n    <div class=\"scene\" id=\"scene\">\r\n      <div class=\"ambient aura\"></div>\r\n      <div class=\"ambient warm\"></div>\r\n      <div class=\"ambient cool\"></div>\r\n\r\n      <div class=\"progress-outer\" aria-label=\"Barındırma etkinlik göstergesi\"><div class=\"progress-track\"><div class=\"progress-fill\"></div></div></div>\r\n\r\n      <svg class=\"network\" viewBox=\"0 0 794 452\" aria-hidden=\"true\">\r\n        <defs>\r\n          <linearGradient id=\"leftLine\" x1=\"0\" y1=\"0\" x2=\"1\" y2=\"0\"><stop stop-color=\"#73e1b3\" stop-opacity=\".4\"/><stop offset=\"1\" stop-color=\"#bda5ae\" stop-opacity=\".15\"/></linearGradient>\r\n          <linearGradient id=\"rightLine\" x1=\"0\" y1=\"0\" x2=\"1\" y2=\"0\"><stop stop-color=\"#c9d1fb\" stop-opacity=\".2\"/><stop offset=\"1\" stop-color=\"#a1b4ff\" stop-opacity=\".4\"/></linearGradient>\r\n        </defs>\r\n        <!-- Shallow network wire geometry, drawn beneath the center tile. -->\r\n        <path class=\"track warm\" d=\"M248 121 V177 L287 216 H337\"/>\r\n        <path class=\"track cool\" d=\"M553 121 V177 L512 216 H458\"/>\r\n        <path class=\"track warm\" d=\"M223 252 H337\"/>\r\n        <path class=\"track cool\" d=\"M458 252 H596\"/>\r\n        <path class=\"track warm\" d=\"M248 378 V325 L287 285 H337\"/>\r\n        <path class=\"track cool\" d=\"M553 378 V325 L513 285 H458\"/>\r\n        <path class=\"track-pulse warm\" d=\"M248 121 V177 L287 216 H337\"/>\r\n        <path class=\"track-pulse cool p2\" d=\"M553 121 V177 L512 216 H458\"/>\r\n        <path class=\"track-pulse warm p3\" d=\"M223 252 H337\"/>\r\n        <path class=\"track-pulse cool p4\" d=\"M458 252 H596\"/>\r\n        <path class=\"track-pulse warm p5\" d=\"M248 378 V325 L287 285 H337\"/>\r\n        <path class=\"track-pulse cool p6\" d=\"M553 378 V325 L513 285 H458\"/>\r\n      </svg>\r\n\r\n      <div class=\"feature spending\" aria-label=\"ModSecurity web uygulaması güvenlik duvarı\">\r\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" aria-hidden=\"true\"><path d=\"M12 2.4 20 6v6c0 5.2-3.2 8.4-8 9.6C7.2 20.4 4 17.2 4 12V6l8-3.6Z\"/><path d=\"m8.4 12.2 2.5 2.4 4.8-5.1\"/></svg>\r\n        <span>ModSecurity</span>\r\n      </div>\r\n      <div class=\"feature fraud\" aria-label=\"Fail2Ban saldırı engelleme\">\r\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"12\" r=\"9\"/><path d=\"m5.6 5.6 12.8 12.8\"/><path d=\"M9.2 9.2 10 8h4l1 1.8M8.5 16H15\"/></svg>\r\n        <span>Fail2Ban</span>\r\n      </div>\r\n      <div class=\"feature bills\" aria-label=\"Kendi alan adınızı kullanın\">\r\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.75\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"12\" r=\"9.1\"/><path d=\"M3 12h18M12 3c2.5 2.6 3.6 5.6 3.6 9s-1.1 6.4-3.6 9M12 3c-2.5 2.6-3.6 5.6-3.6 9s1.1 6.4 3.6 9\"/></svg>\r\n        <span>Alan Adı</span>\r\n      </div>\r\n      <div class=\"feature alerts\" aria-label=\"Cloudflare entegrasyonu\">\r\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" aria-hidden=\"true\"><path d=\"M5.7 17.8h11.9a3.5 3.5 0 0 0 .2-7 6.1 6.1 0 0 0-11.6-1.3A4.2 4.2 0 0 0 5.7 17.8Z\"/><path d=\"M10 14.4h8.5\"/></svg>\r\n        <span>Cloudflare</span>\r\n      </div>\r\n      <div class=\"feature budget\" aria-label=\"SSL sertifikası ve HTTPS\">\r\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" aria-hidden=\"true\"><rect x=\"5.1\" y=\"10.2\" width=\"13.8\" height=\"11\" rx=\"2\"/><path d=\"M8 10.2V7a4 4 0 0 1 8 0v3.2M12 14.6v2.2\"/></svg>\r\n        <span>SFTP Erişimi</span>\r\n      </div>\r\n      <div class=\"feature invest\" aria-label=\"PHP 8.5 ve PHP-FPM barındırma\">\r\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.75\" aria-hidden=\"true\"><rect x=\"3.3\" y=\"4.4\" width=\"17.4\" height=\"6.1\" rx=\"1.4\"/><rect x=\"3.3\" y=\"13.4\" width=\"17.4\" height=\"6.1\" rx=\"1.4\"/><path d=\"M6.3 7.5h.01M6.3 16.5h.01M10 7.5h7M10 16.5h7\" stroke-linecap=\"round\" stroke-width=\"2.4\"/></svg>\r\n        <span>PHP 8.5 / FPM</span>\r\n      </div>\r\n\r\n      <div class=\"node warm n1\"></div><div class=\"node cool n2\"></div>\r\n      <div class=\"node warm n3\"></div><div class=\"node cool n4\"></div>\r\n      <div class=\"node warm n5\"></div><div class=\"node cool n6\"></div>\r\n\r\n      <div class=\"chip-halo\"></div>\r\n      <div class=\"chip\" aria-label=\"Plesk barındırma altyapısı\">\r\n        <div class=\"chip-inner\">\r\n          <svg class=\"chip-icon\" viewBox=\"0 0 24 24\" role=\"img\" aria-label=\"Plesk logosu\" xmlns=\"http://www.w3.org/2000/svg\">\r\n            <title>Plesk</title>\r\n            <path fill=\"#52BBE6\" d=\"M6.102 7.021v7.353h.736V7.02zm13.655.01v7.343h.735V7.032zm.735 4.633l2.479 2.71h1.019l-2.574-2.731L24 9.122h-.987zm-4.008-2.636c-.536 0-.972.125-1.31.378-.337.252-.505.609-.505 1.07 0 .26.049.474.148.642.1.168.226.306.38.415.154.108.328.198.522.267.194.07.39.134.59.19.175.049.342.1.5.152.158.052.297.117.418.194.12.077.216.17.286.278.07.109.104.244.104.405 0 .21-.095.388-.286.535-.19.147-.484.221-.88.221-.609 0-1.104-.245-1.485-.735l-.572.504c.286.315.59.54.913.678.322.136.693.204 1.11.204.272 0 .527-.033.766-.1a1.89 1.89 0 0 0 .621-.294c.176-.13.316-.288.419-.478.102-.189.153-.402.153-.64 0-.26-.051-.474-.153-.646a1.46 1.46 0 0 0-.402-.436 2.284 2.284 0 0 0-.545-.289 13.019 13.019 0 0 0-.594-.205c-.161-.049-.317-.1-.467-.152a2.013 2.013 0 0 1-.397-.184.923.923 0 0 1-.275-.252.598.598 0 0 1-.104-.357c0-.203.075-.371.225-.504.15-.133.413-.2.787-.2.293 0 .546.055.759.163.213.109.41.278.594.51l.011.01.54-.494c-.272-.315-.556-.535-.853-.661a2.586 2.586 0 0 0-1.018-.19zm-14.688.041c-.588 0-1.187.095-1.796.284v7.626h.725v-2.72c.182.048.364.087.546.115a3.539 3.539 0 0 0 1.586-.11c.336-.102.635-.261.898-.478.263-.217.474-.494.636-.83.16-.336.241-.739.241-1.208 0-.385-.067-.742-.2-1.071a2.42 2.42 0 0 0-.572-.851 2.636 2.636 0 0 0-.898-.557c-.35-.133-.739-.2-1.166-.2zm8.886 0c-.322 0-.627.055-.914.163-.287.11-.54.275-.756.5a2.391 2.391 0 0 0-.515.845c-.126.34-.189.74-.189 1.202 0 .35.052.683.157.998.106.315.263.596.473.84.21.246.473.44.788.583.315.144.683.216 1.103.216.455 0 .844-.068 1.166-.205.322-.137.605-.338.85-.604l-.44-.462c-.204.224-.431.387-.683.488a2.226 2.226 0 0 1-.84.153c-.554 0-.992-.175-1.314-.526-.322-.35-.493-.822-.514-1.417h3.939c.013-.904-.176-1.592-.568-2.064-.392-.473-.973-.71-1.743-.71zm.031.62c.26 0 .487.04.683.121.196.08.355.187.478.32.122.133.217.295.284.484.066.189.1.392.1.609H9.074a2.126 2.126 0 0 1 .494-1.103c.111-.126.264-.23.456-.31.193-.08.422-.12.688-.12zM1.86 9.7c.616 0 1.094.188 1.434.563.34.374.51.866.51 1.475 0 .659-.185 1.165-.552 1.518-.368.354-.863.53-1.486.53-.168 0-.342-.018-.52-.057a4.836 4.836 0 0 1-.52-.142V9.868c.182-.063.367-.107.557-.132.189-.024.38-.036.577-.036zm2.377 6.588v.692H8.66v-.692z\"/>\r\n          </svg>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</article>\r\n<script>\r\n  // Scale the precise 794×452 design to its container without changing the layout.\r\n  (() => {\r\n    const card = document.querySelector('.ai-card');\r\n    const scene = document.getElementById('scene');\r\n    const windowEl = document.getElementById('visual-window');\r\n    function resize() {\r\n      const scale = Math.min(1, card.getBoundingClientRect().width / 794);\r\n      scene.style.setProperty('--scene-scale', String(scale));\r\n      windowEl.style.height = `${452 * scale}px`;\r\n    }\r\n    if (typeof ResizeObserver !== 'undefined') new ResizeObserver(resize).observe(card);\r\n    else addEventListener('resize', resize);\r\n    resize();\r\n  })();\r\n</script>\r\n\r\n</body>\r\n</html>\r\n","payments":"<!doctype html>\r\n<html data-bento-key=\"payments\" data-bento-paused=\"true\" lang=\"tr\">\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\r\n<title>Zonely | Koyu Zeminli Odeme Kartlari</title>\r\n<style>\r\n:root{\r\n  color-scheme:dark;\r\n  --ink:#f5f5f7;\r\n}\r\n*{box-sizing:border-box}\r\nhtml,body{margin:0;min-height:100%;background:transparent;font-family:Inter,ui-sans-serif,system-ui,-apple-system,\"Segoe UI\",sans-serif}\r\nbody{display:grid;place-items:center;padding:16px;background:transparent}\r\n\r\n.bento{\r\n  position:relative;\r\n  isolation:isolate;\r\n  width:min(802px,100%);\r\n  aspect-ratio:802/400;\r\n  overflow:visible;\r\n  color:var(--ink);\r\n  border-radius:6px;\r\n  background:transparent;\r\n}\r\n.bento::before,\r\n.bento::after{content:\"\";position:absolute;inset:0;pointer-events:none}\r\n.bento::before{\r\n  background:\r\n    radial-gradient(ellipse 32% 50% at 50% 12%, rgba(167,191,252,.11), transparent 74%),\r\n    radial-gradient(circle at 50% 30%, rgba(125,164,255,.06), transparent 48%);\r\n  filter:blur(4px);\r\n}\r\n.bento::after{\r\n  opacity:.11;\r\n  background-image:url(\"data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.17'/%3E%3C/svg%3E\");\r\n  mask-image:radial-gradient(circle at 50% 30%, black, transparent 85%);\r\n}\r\n\r\n.spotlight{\r\n  position:absolute;\r\n  top:-140px;\r\n  left:43%;\r\n  width:160px;\r\n  height:360px;\r\n  transform:translateX(-50%) rotate(3deg);\r\n  background:linear-gradient(180deg,rgba(144,175,253,.4),rgba(133,175,255,.13) 45%,transparent);\r\n  filter:blur(47px);\r\n  pointer-events:none;\r\n  animation:beam 6s ease-in-out infinite alternate;\r\n}\r\n.sparkles{\r\n  position:absolute;\r\n  left:44%;\r\n  top:12px;\r\n  width:100px;\r\n  height:135px;\r\n  background-image:radial-gradient(circle,#a7c7ff 1px,transparent 1.6px);\r\n  background-size:23px 27px;\r\n  mask-image:linear-gradient(to bottom,transparent,black 50%,transparent);\r\n  opacity:.22;\r\n  animation:glitter 5s ease-in-out infinite;\r\n}\r\n.center-halo{\r\n  position:absolute;\r\n  left:50%;\r\n  top:132px;\r\n  width:220px;\r\n  height:220px;\r\n  transform:translate(-50%,-50%);\r\n  border-radius:50%;\r\n  background:radial-gradient(circle, rgba(106,157,255,.28), rgba(106,157,255,.12) 34%, transparent 68%);\r\n  filter:blur(28px);\r\n  opacity:.9;\r\n  animation:pulse 6s ease-in-out infinite;\r\n  pointer-events:none;\r\n}\r\n\r\n.connectors{position:absolute;inset:0;width:100%;height:100%;z-index:1;overflow:visible}\r\n.connectors .trace{fill:none;stroke:#455366;stroke-width:1.05;opacity:.38}\r\n.connectors .trace-soft{\r\n  fill:none;\r\n  stroke:#a7bdf8;\r\n  stroke-width:1.25;\r\n  stroke-linecap:round;\r\n  opacity:.72;\r\n  stroke-dasharray:15 460;\r\n  animation:travel 6s linear infinite;\r\n  filter:drop-shadow(0 0 5px rgba(168,201,255,.95));\r\n}\r\n.connectors .trace-soft.second{animation-delay:-3s}\r\n.connectors .trace-soft.third{animation-delay:-1.4s}\r\n.connectors .trace-soft.fourth{animation-delay:-4.4s}\r\n\r\n.brand{\r\n  position:absolute;\r\n  z-index:3;\r\n  display:flex;\r\n  align-items:center;\r\n  justify-content:center;\r\n  background:linear-gradient(135deg,rgba(38,44,51,.92),rgba(34,39,46,.92) 75%,rgba(27,30,36,.92));\r\n  border:1px solid rgba(255,255,255,.08);\r\n  border-radius:24px;\r\n  box-shadow:\r\n    inset 0 1px rgba(255,255,255,.05),\r\n    0 16px 27px rgba(0,0,0,.22),\r\n    0 0 0 1px rgba(12,14,18,.25);\r\n  height:57px;\r\n  width:118px;\r\n  transition:transform .3s ease,box-shadow .3s ease;\r\n  animation:float 7s ease-in-out infinite;\r\n  backdrop-filter:blur(6px);\r\n}\r\n.brand:hover{transform:translateY(-4px)!important;box-shadow:0 0 25px rgba(141,188,249,.15),inset 0 1px rgba(255,255,255,.12)}\r\n.brand svg{display:block}\r\n\r\n.visa{left:13.8%;top:20.7%}\r\n.mc{left:72.1%;top:20.7%;width:126px}\r\n.apple{left:13.8%;top:44%}\r\n.google{left:71.8%;top:44%;width:130px}\r\n.upi{left:43.1%;top:54%;width:116px;height:58px;border-radius:24px;animation-delay:-2s}\r\n\r\n.wallet{\r\n  position:absolute;\r\n  z-index:4;\r\n  top:20.4%;\r\n  left:44.3%;\r\n  width:95px;\r\n  height:98px;\r\n  border-radius:8px;\r\n  background:linear-gradient(146deg,#252838 0%,#171923 53%,#17191d 100%);\r\n  box-shadow:0 13px 30px rgba(0,0,0,.48),0 0 32px rgba(110,158,255,.25),inset 0 1px rgba(255,255,255,.09),inset 0 0 20px rgba(108,138,232,.08);\r\n  display:grid;\r\n  place-items:center;\r\n  animation:walletbreath 5s ease-in-out infinite;\r\n}\r\n.wallet:before{\r\n  content:\"\";\r\n  position:absolute;\r\n  inset:-50px 13px 62px;\r\n  background:radial-gradient(ellipse,rgba(135,179,255,.62),transparent 68%);\r\n  filter:blur(14px);\r\n  z-index:-1;\r\n}\r\n.wallet svg{width:60px;height:60px;overflow:visible;filter:drop-shadow(0 0 11px rgba(123,180,255,.4))}\r\n.wallet .wall-glint{\r\n  position:absolute;\r\n  top:0;\r\n  left:27%;\r\n  height:1px;\r\n  width:48%;\r\n  background:linear-gradient(90deg,transparent,#b8d5ff,transparent);\r\n  box-shadow:0 0 13px 3px rgba(154,187,255,.75);\r\n  animation:blink 5s ease-in-out infinite;\r\n}\r\n\r\n@keyframes beam{0%{opacity:.55;transform:translateX(-50%) rotate(-5deg) scale(.8)}100%{opacity:1;transform:translateX(-50%) rotate(8deg) scale(1.15)}}\r\n@keyframes travel{from{stroke-dashoffset:475}to{stroke-dashoffset:0}}\r\n@keyframes float{0%,100%{translate:0 0}50%{translate:0 -3px}}\r\n@keyframes walletbreath{0%,100%{}50%{}}\r\n@keyframes blink{0%,100%{opacity:.42}50%{opacity:1}}\r\n@keyframes glitter{0%,100%{opacity:.08;transform:translateY(10px)}50%{opacity:.3;transform:translateY(0)}}\r\n@keyframes pulse{0%,100%{transform:translate(-50%,-50%) scale(.96);opacity:.7}50%{transform:translate(-50%,-50%) scale(1.08);opacity:1}}\r\n\r\n@media(max-width:560px){\r\n  body{padding:8px}\r\n  .bento{aspect-ratio:802/430}\r\n  .brand{scale:.74;transform-origin:center}\r\n  .visa,.apple{left:6%}\r\n  .mc,.google{left:auto;right:6%}\r\n  .upi{left:calc(50% - 58px);top:53%;scale:.83}\r\n  .wallet{left:calc(50% - 47px);top:18%}\r\n  .spotlight{left:50%}\r\n}\r\n@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}\r\n\r\n/* Gercek logo dosyalari, orta cuzdan kartindaki gibi koyu kartlarda. */\r\n.brand{\r\n  background:linear-gradient(146deg,#252838 0%,#171923 53%,#17191d 100%);\r\n  border:1px solid rgba(199,213,255,.16);\r\n  border-radius:13px;\r\n  box-shadow:0 13px 30px rgba(0,0,0,.34),0 0 18px rgba(110,158,255,.09),inset 0 1px rgba(255,255,255,.09),inset 0 0 17px rgba(108,138,232,.05);\r\n  overflow:hidden;\r\n}\r\n.brand:after{\r\n  content:\"\";position:absolute;inset:0;pointer-events:none;\r\n  background:linear-gradient(118deg,rgba(255,255,255,.045),transparent 34%,rgba(0,0,0,.06));\r\n}\r\n.brand:hover{\r\n  border-color:rgba(181,213,255,.32);\r\n  box-shadow:0 15px 31px rgba(0,0,0,.4),0 0 26px rgba(141,188,249,.2),inset 0 1px rgba(255,255,255,.13);\r\n}\r\n.brand img{display:block;width:79%;height:75%;object-fit:contain;user-select:none;pointer-events:none}\r\n.brand.visa img{width:75%;height:65%;filter:brightness(0) invert(1)}\r\n.brand.mc img{height:85%;width:77%}\r\n.brand.apple img{width:82%;height:72%;filter:brightness(0) invert(1)}\r\n.brand.google img{width:86%;height:75%;filter:brightness(0) invert(1)}\r\n.brand.upi img{width:83%;height:72%;filter:brightness(0) invert(1)}\r\n@media(max-width:560px){.brand{scale:.74}}\r\n</style>\r\n<style id=\"zonely-bento-host-layout\">html{color-scheme:dark}html,body{min-height:0!important;height:auto!important;overflow-x:hidden!important;background:transparent!important}html[data-bento-paused=\"true\"] *,html[data-bento-paused=\"true\"] *::before,html[data-bento-paused=\"true\"] *::after{animation-play-state:paused!important}</style>\r\n<style id=\"zn-inline-card-fit\">html,body{width:100%;height:100vh!important;min-height:0!important;margin:0!important;overflow:hidden!important;background:transparent!important}body{box-sizing:border-box;display:flex!important;align-items:center!important;justify-content:center!important;padding:28px!important}body>.ai-card,body>.bento,body>.deploy-card,body>.card,body>.templates-card,body>.automation,body>.code-card,body>.analytics{flex:0 1 auto;box-sizing:border-box;width:min(100%,calc((100vh - 56px) * 2.0050))!important;max-width:100%!important;min-height:0!important;margin:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:transparent!important;overflow:visible!important}</style><style id=\"zn-effect-soft-edges\">.spotlight{top:-20%;left:50%;width:48%;height:100%;border-radius:50%;background:radial-gradient(ellipse at 50% 42%,rgba(144,175,253,.32) 0%,rgba(133,175,255,.13) 36%,transparent 70%);filter:blur(24px);-webkit-mask-image:radial-gradient(ellipse,black 24%,transparent 72%);mask-image:radial-gradient(ellipse,black 24%,transparent 72%)}.bento::before{inset:-18%;background:radial-gradient(ellipse 32% 44% at 50% 35%,rgba(167,191,252,.13),transparent 75%);filter:blur(12px)}.bento::after{-webkit-mask-image:radial-gradient(ellipse,black 8%,transparent 68%);mask-image:radial-gradient(ellipse,black 8%,transparent 68%)}</style><style id=\"zn-visual-polish-20261101\">\r\n\r\n.brand,.brand.mc,.brand.google,.brand.visa,.brand.apple{width:118px;height:57px;border-radius:15px;\r\n background:linear-gradient(150deg,rgba(40,45,58,.95),rgba(21,25,35,.97) 65%,rgba(24,28,38,.95));\r\n border:1px solid rgba(170,194,243,.20);\r\n box-shadow:0 12px 28px rgba(0,0,0,.34),inset 0 1px rgba(255,255,255,.09),0 0 21px rgba(113,162,253,.07);}\r\n.brand img{object-position:center;object-fit:contain;max-width:84%;max-height:78%;}\r\n.brand.mc img{width:66%;height:73%;}\r\n.brand.google img{width:83%;height:73%;}\r\n.brand.visa img{width:74%;height:66%;}\r\n.brand.apple img{width:83%;height:70%;}\r\n@media(max-width:560px){.brand{scale:.74;}}\r\n\r\n</style><style>.brand.visa,.brand.apple,.brand.mc,.brand.google{width:116px;height:56px}.brand.visa,.brand.apple{left:10%}.brand.mc,.brand.google{left:auto;right:10%}.brand img{width:78%;height:72%;object-fit:contain}.brand.mc img{width:72%;height:78%}</style></head>\r\n<body>\r\n<section class=\"bento\" aria-label=\"Animated payment logo network\">\r\n  <div class=\"spotlight\"></div>\r\n  <div class=\"sparkles\"></div>\r\n  <div class=\"center-halo\"></div>\r\n\r\n  <svg class=\"connectors\" viewBox=\"0 0 802 400\" preserveAspectRatio=\"none\" aria-hidden=\"true\">\r\n    <path class=\"trace\" d=\"M217 114 H357 M451 114 H589 M217 229 H253 Q292 229 292 191 V160 Q292 135 319 135 H357 M451 135 H483 Q513 135 513 164 V201 Q513 229 545 229 H589\"/>\r\n    <path class=\"trace-soft\" d=\"M217 114 H357\"/>\r\n    <path class=\"trace-soft second\" d=\"M451 114 H589\"/>\r\n    <path class=\"trace-soft third\" d=\"M217 229 H253 Q292 229 292 191 V160 Q292 135 319 135 H357\"/>\r\n    <path class=\"trace-soft fourth\" d=\"M451 135 H483 Q513 135 513 164 V201 Q513 229 545 229 H589\"/>\r\n  </svg>\r\n\r\n  <div class=\"brand visa\" aria-label=\"Visa\"><img src=\"/Files/Assets/bento/zonely-six/logos/visa.svg\" alt=\"Visa\" draggable=\"false\" decoding=\"async\"></div>\r\n  <div class=\"brand mc\" aria-label=\"Mastercard\"><img src=\"/Files/Assets/bento/zonely-six/logos/mastercard.svg\" alt=\"Mastercard\" draggable=\"false\" decoding=\"async\"></div>\r\n  <div class=\"brand apple\" aria-label=\"Apple Pay\"><img src=\"/Files/Assets/bento/zonely-six/logos/apple-pay.svg\" alt=\"Apple Pay\" draggable=\"false\" decoding=\"async\"></div>\r\n  <div class=\"brand google\" aria-label=\"Google Pay\"><img src=\"/Files/Assets/bento/zonely-six/logos/google-pay.svg\" alt=\"Google Pay\" draggable=\"false\" decoding=\"async\"></div>\r\n\r\n  <div class=\"wallet\" aria-label=\"wallet core visual\">\r\n    <div class=\"wall-glint\"></div>\r\n    <svg viewBox=\"0 0 64 64\" fill=\"none\" aria-hidden=\"true\">\r\n      <path d=\"M10 19.4 42 6.5c3.2-1.3 7.2 1 7.2 5.3V18\" fill=\"#c4dcff\"/>\r\n      <path d=\"M9 21.3c0-3.9 2.9-6.4 6.9-6.4h33.3c5 0 7.4 3 7.4 7.5v28c0 3.8-2.7 5.8-6.5 5.8H15.6c-4.1 0-6.6-2.6-6.6-6.6V21.3z\" fill=\"#c4dbff\"/>\r\n      <circle cx=\"41\" cy=\"36\" r=\"4\" fill=\"#415779\"/>\r\n    </svg>\r\n  </div>\r\n</section>\r\n\r\n</body>\r\n</html>\r\n","setup":"<!doctype html>\r\n<html data-bento-key=\"setup\" data-bento-paused=\"true\" lang=\"tr\">\r\n<head>\r\n  <meta charset=\"utf-8\">\r\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\r\n  <title>Zonely Kurulum Akışı — Şeffaf Animated Bento</title>\r\n  <style>\r\n    :root{color-scheme:dark;font-family:Inter,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif}\r\n    *{box-sizing:border-box}\r\n    html,body{margin:0;min-height:100%;background:transparent}\r\n    body{min-height:100vh;display:grid;place-items:center;padding:16px;background:transparent}\r\n\r\n    .deploy-card{\r\n      position:relative;isolation:isolate;overflow:visible;width:min(802px,100%);aspect-ratio:802/410;\r\n      container-type:inline-size;color:#f2f7fc;border-radius:14px;background:transparent;\r\n    }\r\n    .deploy-card::before{\r\n      content:\"\";position:absolute;z-index:0;inset:0;opacity:.58;pointer-events:none;\r\n      background-image:radial-gradient(circle,#b6ebff 1.2px,transparent 1.75px);background-size:8px 8px;\r\n      -webkit-mask-image:radial-gradient(ellipse 43% 54% at 16% 35%,#000 12%,#000a 48%,transparent 100%);\r\n      mask-image:radial-gradient(ellipse 43% 54% at 16% 35%,#000 12%,#000a 48%,transparent 100%);\r\n    }\r\n    .deploy-card::after{\r\n      content:\"\";position:absolute;z-index:0;pointer-events:none;inset:0;\r\n      background:\r\n        radial-gradient(ellipse 38% 42% at 26% 41%,rgba(83,174,196,.30) 0%,rgba(36,102,126,.16) 47%,transparent 86%),\r\n        radial-gradient(ellipse 30% 36% at 41% 48%,rgba(57,125,150,.18),transparent 98%),\r\n        radial-gradient(circle at 73% 46%,rgba(114,204,233,.06),transparent 26%);\r\n      filter:blur(4px);\r\n      opacity:.95;\r\n    }\r\n\r\n    .haze{position:absolute;z-index:1;top:7%;left:-2%;width:60%;height:72%;background:radial-gradient(ellipse,rgba(139,222,239,.22),transparent 70%);filter:blur(26px);animation:haze 7s ease-in-out infinite alternate;pointer-events:none}\r\n    .glow-beam{position:absolute;z-index:1;top:4%;left:13%;width:23%;height:55%;background:linear-gradient(180deg,rgba(173,247,255,.18),rgba(89,184,207,.06) 55%,transparent);filter:blur(28px);transform:rotate(-8deg);pointer-events:none;animation:beam 6.5s ease-in-out infinite alternate}\r\n\r\n    .check-tile{\r\n      position:absolute;z-index:3;top:13.4%;left:7.3%;width:35.3%;aspect-ratio:1;\r\n      border-radius:12.4%;padding:2.25%;\r\n      background:linear-gradient(136deg,#87f9ff 0%,#70d6e7 7%,#427d98 30%,#355c77 61%,#426d8c 100%);\r\n      box-shadow:-9px -8px 25px rgba(120,246,255,.29),4px 14px 24px rgba(0,0,0,.36),inset 2px 2px 4px #d0ffff60;\r\n      animation:tileFloat 6s ease-in-out infinite\r\n    }\r\n    .check-tile::before{\r\n      content:\"\";position:absolute;inset:-1.4%;border-radius:13%;pointer-events:none;\r\n      background:linear-gradient(135deg,rgba(183,255,255,.95),rgba(104,255,255,.21) 30%,transparent 55%);\r\n      padding:2px;\r\n      -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);\r\n      -webkit-mask-composite:xor;mask-composite:exclude;\r\n      filter:drop-shadow(0 0 6px #82f7ff)\r\n    }\r\n    .check-tile::after{\r\n      content:\"\";position:absolute;inset:-1%;border-radius:13%;border-top:3px solid rgba(178,255,255,.86);border-left:3px solid rgba(139,245,255,.74);\r\n      filter:blur(4px);pointer-events:none\r\n    }\r\n    .tile-inside{\r\n      display:grid;place-items:center;width:100%;height:100%;overflow:hidden;border-radius:11%;\r\n      background:linear-gradient(136deg,#324d5e 0%,#1e2933 44%,#242831 70%,#2e4555 100%);\r\n      border:1.5px solid rgba(221,255,255,.72);\r\n      box-shadow:inset 3px 5px 15px #0005,inset -9px -10px 22px rgba(112,183,211,.07)\r\n    }\r\n    .big-check{width:77%;height:77%;overflow:visible;filter:drop-shadow(2px 7px 7px rgba(0,0,0,.45))}\r\n    .check-line{fill:none;stroke:url(#check-metal);stroke-width:22;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:220;stroke-dashoffset:220;animation:drawCheck 1.35s .12s cubic-bezier(.2,.75,.2,1) forwards}\r\n    .check-soft{filter:blur(6px);opacity:.21;fill:none;stroke:#c3faff;stroke-width:26;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:220;stroke-dashoffset:220;animation:drawCheck 1.35s .12s ease forwards}\r\n\r\n    .checks{position:absolute;inset:0;z-index:2;pointer-events:none}\r\n    .check-row{\r\n      position:absolute;display:flex;align-items:center;gap:1.45cqw;height:14%;padding:0 2.15cqw 0 2.05cqw;border-radius:1.45cqw;\r\n      border:1px solid rgba(171,213,226,.24);background:linear-gradient(90deg,rgba(59,104,123,.19),rgba(18,30,41,.05) 92%);\r\n      box-shadow:inset 0 1px rgba(255,255,255,.035);font-size:2.05cqw;font-weight:450;letter-spacing:-.015em;\r\n      color:rgba(224,234,241,.43);transition:background .45s,border-color .45s,color .45s,opacity .45s,box-shadow .45s;overflow:hidden;\r\n      line-height:1.2\r\n    }\r\n    .check-row .small-check{display:grid;place-items:center;flex:none;width:4.2cqw;height:4.2cqw;border-radius:.95cqw;border:1.8px solid rgba(199,236,249,.36)}\r\n    .small-check svg{width:68%;height:68%;stroke:currentColor;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}\r\n    .check-row .dim{color:rgba(225,236,244,.33);font-weight:400}\r\n    .check-row.is-active{color:#eafaff;border-color:rgba(141,232,252,.53);background:linear-gradient(90deg,rgba(82,167,194,.24),rgba(41,92,110,.21) 60%,rgba(23,39,49,.02));box-shadow:-1px 0 0 1px rgba(123,223,246,.38),inset 0 1px rgba(166,246,255,.2),0 0 22px rgba(92,189,218,.12)}\r\n    .check-row.is-active .small-check{border-color:rgba(158,235,251,.47);background:rgba(136,224,250,.07)}\r\n    .check-row.is-active .dim{color:rgba(233,246,251,.45)}\r\n\r\n    .row-one{left:49.5%;top:11%;width:49%;opacity:.92}\r\n    .row-two{left:46%;top:28.8%;width:53%;opacity:.98}\r\n    .row-three{left:52%;top:46.4%;width:46%;opacity:.88}\r\n    .row-four{left:49%;top:64.1%;width:50%;opacity:.93}\r\n\r\n    @keyframes drawCheck{to{stroke-dashoffset:0}}\r\n    @keyframes tileFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}\r\n    @keyframes haze{from{transform:translate(-8px,0);opacity:.65}to{transform:translate(13px,9px);opacity:1}}\r\n    @keyframes beam{from{transform:rotate(-10deg) translateY(0);opacity:.6}to{transform:rotate(-3deg) translateY(6px);opacity:1}}\r\n    \r\n    @media(max-width:600px){\r\n      .deploy-card{aspect-ratio:802/460}\r\n      .check-row{font-size:2.38cqw;height:13.2%}\r\n      .row-one{left:45%;width:54%}\r\n      .row-two{left:42%;width:57%}\r\n      .row-three{left:48%;width:50%}\r\n      .row-four{left:45%;width:54%}\r\n    }\r\n    @media(max-width:470px){\r\n      .deploy-card{border-radius:10px;aspect-ratio:802/520}\r\n      .check-row{font-size:2.55cqw;height:12.8%;padding-inline:2.3cqw}\r\n    }\r\n    @media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.check-line,.check-soft{stroke-dashoffset:0}}\r\n  </style>\r\n<style id=\"zonely-bento-host-layout\">html{color-scheme:dark}html,body{min-height:0!important;height:auto!important;overflow-x:hidden!important;background:transparent!important}html[data-bento-paused=\"true\"] *,html[data-bento-paused=\"true\"] *::before,html[data-bento-paused=\"true\"] *::after{animation-play-state:paused!important}</style>\r\n<style id=\"zn-inline-card-fit\">html,body{width:100%;height:100vh!important;min-height:0!important;margin:0!important;overflow:hidden!important;background:transparent!important}body{box-sizing:border-box;display:flex!important;align-items:center!important;justify-content:center!important;padding:28px!important}body>.ai-card,body>.bento,body>.deploy-card,body>.card,body>.templates-card,body>.automation,body>.code-card,body>.analytics{flex:0 1 auto;box-sizing:border-box;width:min(100%,calc((100vh - 56px) * 1.9561))!important;max-width:100%!important;min-height:0!important;margin:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:transparent!important;overflow:visible!important}</style><style id=\"zn-effect-soft-edges\">.deploy-card::before{inset:-24% -10%;background-size:8px 8px;-webkit-mask-image:radial-gradient(ellipse 40% 46% at 40% 50%,#000 12%,#000a 48%,transparent 100%);mask-image:radial-gradient(ellipse 40% 46% at 40% 50%,#000 12%,#000a 48%,transparent 100%)}.deploy-card::after{inset:-12%;-webkit-mask-image:radial-gradient(ellipse,black 25%,transparent 74%);mask-image:radial-gradient(ellipse,black 25%,transparent 74%)}</style><style id=\"zn-visual-polish-20261101\">\r\n\r\n.check-row{font-family:Arial,Helvetica,sans-serif;font-weight:600;font-size:1.95cqw;\r\n color:rgba(235,249,255,.76);letter-spacing:-.015em;\r\n border-color:rgba(157,220,237,.31);background:linear-gradient(90deg,rgba(52,102,126,.23),rgba(18,30,41,.05) 92%);}\r\n.check-row .dim{display:block;margin-top:2px;font-weight:400;font-size:.82em;line-height:1.13;\r\n color:rgba(225,240,247,.52);}\r\n.check-row.is-active{color:#f2fcff;}\r\n.check-row.is-active .dim{color:rgba(227,246,253,.70);}\r\n.setup-progress{position:absolute;left:51%;right:5%;bottom:11%;height:2px;z-index:3;\r\n background:linear-gradient(90deg,rgba(110,209,238,.36),rgba(110,209,238,.12));overflow:hidden;border-radius:99px;}\r\n.setup-progress span{position:absolute;inset:0 auto 0 0;width:32%;border-radius:inherit;\r\n background:linear-gradient(90deg,transparent,rgba(197,251,255,.95),transparent);\r\n box-shadow:0 0 9px rgba(116,222,245,.55);animation:setup-sweep 4s ease-in-out infinite;}\r\n@keyframes setup-sweep{0%{transform:translateX(-110%)}100%{transform:translateX(370%)}}\r\n@media(max-width:600px){.check-row{font-size:2.28cqw;}}\r\n@media(prefers-reduced-motion:reduce){.setup-progress span{animation:none;transform:translateX(80%)}}\r\n\r\n</style><style>.check-row{color:#dceaf0!important;line-height:1.25}.check-row>span:last-child{display:block}.check-row .dim,.check-row.is-active .dim{color:#a8becb!important;display:block;font-size:11px;margin-top:3px}.small-check{opacity:1!important}</style></head>\r\n<body>\r\n  <article class=\"deploy-card\" aria-label=\"Zonely kurulum akışı kartı\">\r\n    <div class=\"haze\"></div>\r\n    <div class=\"glow-beam\"></div>\r\n    <div class=\"check-tile\" aria-hidden=\"true\">\r\n      <div class=\"tile-inside\">\r\n        <svg class=\"big-check\" viewBox=\"0 0 225 225\" aria-hidden=\"true\">\r\n          <defs>\r\n            <linearGradient id=\"check-metal\" x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\">\r\n              <stop offset=\"0\" stop-color=\"#979da3\"/><stop offset=\".29\" stop-color=\"#f2f8ff\"/>\r\n              <stop offset=\".67\" stop-color=\"#ffffff\"/><stop offset=\"1\" stop-color=\"#95969a\"/>\r\n            </linearGradient>\r\n          </defs>\r\n          <path class=\"check-soft\" d=\"M48 116 L93 161 L178 77\"/>\r\n          <path class=\"check-line\" d=\"M48 116 L93 161 L178 77\"/>\r\n        </svg>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"checks\" aria-label=\"Kurulum durumu\">\r\n      <div class=\"check-row row-one\" data-row=\"0\">\r\n        <span class=\"small-check\"><svg viewBox=\"0 0 24 24\"><path d=\"m4 12 5 5L20 6\"/></svg></span>\r\n        <span>Lisans doğrulandı <span class=\"dim\">Kurulum için hazır</span></span>\r\n      </div>\r\n      <div class=\"check-row row-two is-active\" data-row=\"1\">\r\n        <span class=\"small-check\"><svg viewBox=\"0 0 24 24\"><path d=\"m4 12 5 5L20 6\"/></svg></span>\r\n        <span>Kurulum başlatıldı <span class=\"dim\">Plesk altyapısında</span></span>\r\n      </div>\r\n      <div class=\"check-row row-three\" data-row=\"2\">\r\n        <span class=\"small-check\"><svg viewBox=\"0 0 24 24\"><path d=\"m4 12 5 5L20 6\"/></svg></span>\r\n        <span>Alan adı bağlandı <span class=\"dim\">Cloudflare DNS üzerinden</span></span>\r\n      </div>\r\n      <div class=\"check-row row-four\" data-row=\"3\">\r\n        <span class=\"small-check\"><svg viewBox=\"0 0 24 24\"><path d=\"m4 12 5 5L20 6\"/></svg></span>\r\n        <span>Site yayına hazır <span class=\"dim\">Bağlantılar yapılandırıldı</span></span>\r\n      </div>\r\n    </div>\r\n    <div class=\"setup-progress\" aria-hidden=\"true\"><span></span></div>\r\n  </article>\r\n  <script>\r\n    (() => {\r\n      const rows = [...document.querySelectorAll('.check-row')];\r\n      if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;\r\n      let active=1;\r\n      setInterval(() => {\n        if(document.documentElement.dataset.bentoPaused==='true')return;\r\n        rows[active].classList.remove('is-active');\r\n        active = (active + 1) % rows.length;\r\n        rows[active].classList.add('is-active');\r\n      }, 2800);\r\n    })();\r\n  </script>\r\n\r\n</body>\r\n</html>\r\n","delivery":"<!DOCTYPE html>\r\n<html data-bento-key=\"delivery\" data-bento-paused=\"true\" lang=\"tr\">\r\n<head>\r\n  <meta charset=\"UTF-8\" />\r\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\r\n  <title>Zonely — Oyun İçi Teslimat</title>\r\n  <style>\r\n    :root {\r\n      --bg-1: #090a10;\r\n      --bg-2: #17131a;\r\n      --bg-3: #2a1716;\r\n      --text: #f5efed;\r\n      --muted: rgba(255,255,255,.58);\r\n      --muted-2: rgba(255,255,255,.34);\r\n      --line: rgba(255,255,255,.12);\r\n      --warm: #f1b39a;\r\n      --warm-2: #df8b69;\r\n      --warm-3: #bd6544;\r\n      --panel: rgba(35, 22, 25, .74);\r\n    }\r\n\r\n    * { box-sizing: border-box; }\r\n\r\n    html, body {\r\n      width: 100%;\r\n      min-height: 100%;\r\n      margin: 0;\r\n      background: transparent;\r\n      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\r\n      color: var(--text);\r\n    }\r\n\r\n    body {\r\n      display: grid;\r\n      place-items: center;\r\n      padding: 18px;\r\n    }\r\n\r\n    .card {\r\n      position: relative;\r\n      width: min(824px, 100%);\r\n      aspect-ratio: 824 / 530;\r\n      overflow: hidden;\r\n      border-radius: 8px;\r\n      background: transparent;\r\n      box-shadow: none;\r\n      isolation: isolate;\r\n    }\r\n\r\n    .card::before {\r\n      content: \"\";\r\n      position: absolute;\r\n      inset: 0;\r\n      background:\r\n        radial-gradient(circle at 71% 59%, rgba(245, 137, 82, .12), transparent 18%),\r\n        radial-gradient(circle at 72% 58%, rgba(255, 176, 133, .08), transparent 35%);\r\n      filter: blur(12px);\r\n      pointer-events: none;\r\n      z-index: 0;\r\n    }\r\n\r\n    .card::after {\r\n      content: \"\";\r\n      position: absolute;\r\n      inset: 0;\r\n      opacity: .11;\r\n      background-image:\r\n        radial-gradient(rgba(255,255,255,.7) .65px, transparent .75px);\r\n      background-size: 4px 4px;\r\n      mask-image: radial-gradient(circle at 72% 58%, black 0, black 24%, transparent 58%);\r\n      pointer-events: none;\r\n      z-index: 0;\r\n    }\r\n\r\n    .stat {\r\n      position: absolute;\r\n      left: 38px;\r\n      top: 34px;\r\n      width: 259px;\r\n      height: 176px;\r\n      padding: 24px 26px;\r\n      border-radius: 16px;\r\n      background: linear-gradient(180deg, rgba(31,19,22,.76), rgba(34,21,24,.66));\r\n      border: 1px solid rgba(255,255,255,.16);\r\n      box-shadow:\r\n        inset 0 0 0 2px rgba(255,255,255,.05),\r\n        inset 0 0 28px rgba(241, 146, 103, .10),\r\n        0 10px 18px rgba(0,0,0,.35),\r\n        0 0 0 3px rgba(255,255,255,.03);\r\n      z-index: 2;\r\n    }\r\n\r\n    .percent {\r\n      font-size: 58px;\r\n      line-height: .95;\r\n      letter-spacing: -0.04em;\r\n      font-weight: 300;\r\n      color: #f4e6df;\r\n      text-shadow: 0 0 22px rgba(243, 165, 132, .12);\r\n    }\r\n\r\n    .percent span {\r\n      color: #e7b49d;\r\n    }\r\n\r\n    .stat p {\r\n      margin: 10px 0 0 2px;\r\n      font-size: 19px;\r\n      line-height: 1.25;\r\n      color: rgba(255,255,255,.46);\r\n      font-weight: 400;\r\n    }\r\n\r\n    .connector {\r\n      position: absolute;\r\n      inset: 0;\r\n      z-index: 1;\r\n      pointer-events: none;\r\n    }\r\n\r\n    .glow-dot {\r\n      position: absolute;\r\n      left: 244px;\r\n      top: 342px;\r\n      width: 12px;\r\n      height: 12px;\r\n      border-radius: 50%;\r\n      background: #fff;\r\n      box-shadow:\r\n        0 0 8px rgba(255,255,255,.95),\r\n        0 0 18px rgba(255,255,255,.75),\r\n        0 0 36px rgba(247, 198, 170, .45);\r\n      animation: pulse 2.2s ease-in-out infinite;\r\n      z-index: 2;\r\n    }\r\n\r\n    .gauge-wrap {\r\n      position: absolute;\r\n      right: -54px;\r\n      top: 94px;\r\n      width: 510px;\r\n      height: 420px;\r\n      z-index: 1;\r\n    }\r\n\r\n    .gauge {\r\n      position: absolute;\r\n      right: 0;\r\n      top: 0;\r\n      width: 100%;\r\n      height: 100%;\r\n      border-radius: 50%;\r\n      filter: drop-shadow(0 15px 45px rgba(0,0,0,.42));\r\n    }\r\n\r\n    .gauge svg {\r\n      width: 100%;\r\n      height: 100%;\r\n      overflow: visible;\r\n    }\r\n\r\n    .ticks {\r\n      opacity: .52;\r\n    }\r\n\r\n    .tick-label {\r\n      font-size: 11px;\r\n      fill: rgba(255,255,255,.18);\r\n      font-weight: 500;\r\n    }\r\n\r\n    .needle-base-glow {\r\n      filter: blur(24px);\r\n      opacity: .28;\r\n    }\r\n\r\n    .needle {\r\n      transform-origin: 255px 296px;\r\n      animation: needleFloat 5.5s ease-in-out infinite;\r\n    }\r\n\r\n\r\n    .orb {\r\n      position: absolute;\r\n      right: 16px;\r\n      bottom: -44px;\r\n      width: 286px;\r\n      height: 286px;\r\n      border-radius: 50%;\r\n      background: radial-gradient(circle at 40% 40%, rgba(255,185,141,.88), rgba(238,125,71,.82) 32%, rgba(231,112,61,.28) 58%, rgba(255,130,81,0) 72%);\r\n      filter: blur(34px);\r\n      opacity: .58;\r\n      z-index: 0;\r\n      animation: orbPulse 5.8s ease-in-out infinite;\r\n      pointer-events: none;\r\n    }\r\n\r\n    .ambient {\r\n      position: absolute;\r\n      inset: 0;\r\n      background:\r\n        radial-gradient(circle at 76% 61%, rgba(247,150,98,.18), transparent 23%),\r\n        radial-gradient(circle at 62% 28%, rgba(141, 79, 61, .12), transparent 18%);\r\n      mix-blend-mode: screen;\r\n      pointer-events: none;\r\n      z-index: 0;\r\n    }\r\n\r\n    @keyframes pulse {\r\n      0%, 100% { transform: scale(.92); opacity: .88; }\r\n      50% { transform: scale(1.18); opacity: 1; }\r\n    }\r\n\r\n    @keyframes orbPulse {\r\n      0%, 100% { transform: scale(.96); opacity: .48; }\r\n      50% { transform: scale(1.05); opacity: .68; }\r\n    }\r\n\r\n    @keyframes needleFloat {\r\n      0%, 100% { transform: rotate(-2deg); }\r\n      50% { transform: rotate(2.6deg); }\r\n    }\r\n    .card-stage {\r\n      position: absolute;\r\n      inset: 0 auto auto 0;\r\n      width: 824px;\r\n      height: 530px;\r\n      transform: scale(var(--scene-scale, 1));\r\n      transform-origin: left top;\r\n    }\r\n    .zonely-label {\r\n      font-size: 47px;\r\n      font-weight: 650;\r\n      letter-spacing: -.055em;\r\n      line-height: 1.05;\r\n    }\r\n    @media (max-width: 760px) { body { padding: 8px; } }\r\n    @media (prefers-reduced-motion: reduce) {\r\n      *, *::before, *::after { animation: none !important; transition: none !important; }\r\n    }\r\n  </style>\r\n<style id=\"zonely-bento-host-layout\">html{color-scheme:dark}html,body{min-height:0!important;height:auto!important;overflow-x:hidden!important;background:transparent!important}html[data-bento-paused=\"true\"] *,html[data-bento-paused=\"true\"] *::before,html[data-bento-paused=\"true\"] *::after{animation-play-state:paused!important}</style>\r\n<style id=\"zn-inline-card-fit\">html,body{width:100%;height:100vh!important;min-height:0!important;margin:0!important;overflow:hidden!important;background:transparent!important}body{box-sizing:border-box;display:flex!important;align-items:center!important;justify-content:center!important;padding:28px!important}body>.ai-card,body>.bento,body>.deploy-card,body>.card,body>.templates-card,body>.automation,body>.code-card,body>.analytics{flex:0 1 auto;box-sizing:border-box;width:min(100%,calc((100vh - 56px) * 1.5547))!important;max-width:100%!important;min-height:0!important;margin:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:transparent!important;overflow:visible!important}</style><style id=\"zn-visual-polish-20261101\">\r\n\r\n.stat{height:198px;padding:24px 25px;border-color:rgba(255,235,224,.17);}\r\n.stat .zonely-label{font-family:Arial,Helvetica,sans-serif;font-size:37px;font-weight:750;\r\n letter-spacing:-.055em;line-height:1.07;color:#f8eeea;text-shadow:0 2px 22px rgba(238,164,131,.13);}\r\n.stat p{margin:12px 0 0;font-family:Arial,Helvetica,sans-serif;font-size:16px;line-height:1.36;\r\n font-weight:400;letter-spacing:-.01em;color:rgba(245,234,228,.77);}\r\n\r\n</style><style>@font-face{font-family:ZonelyUI;src:url('/Files/Assets/performance/zonely-blog-median.woff2')}body,.card-stage,.card-stage p{font-family:ZonelyUI,Arial,sans-serif!important}.percent.zonely-label{font-family:ZonelyUI,Arial,sans-serif!important;font-size:30px!important;letter-spacing:-1px}.card-stage p{color:#c0b9bb!important;font-size:13px}</style></head>\r\n<body>\r\n  <div class=\"card\" id=\"card\">\r\n    <div class=\"card-stage\" aria-label=\"Zonely hız göstergesi görseli\">\r\n    <div class=\"ambient\"></div>\r\n    <div class=\"orb\"></div>\r\n\r\n    <div class=\"stat\">\r\n      <div class=\"percent zonely-label\">Oyun İçi<br>Teslimat</div>\r\n      <p>Siparişten sunucuya<br>otomatik işlem akışı</p>\r\n    </div>\r\n\r\n    <svg class=\"connector\" viewBox=\"0 0 824 598\" preserveAspectRatio=\"none\" aria-hidden=\"true\">\r\n      <defs>\r\n        <filter id=\"pathGlow\" x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\">\r\n          <feGaussianBlur stdDeviation=\"2.6\" result=\"b\"/>\r\n          <feMerge>\r\n            <feMergeNode in=\"b\"/>\r\n            <feMergeNode in=\"SourceGraphic\"/>\r\n          </feMerge>\r\n        </filter>\r\n      </defs>\r\n\r\n      <path d=\"M158 210 L158 310 Q158 342 190 342 L245 342\"\r\n            fill=\"none\"\r\n            stroke=\"rgba(255,255,255,.12)\"\r\n            stroke-width=\"2\"\r\n            stroke-linecap=\"round\"\r\n            stroke-dasharray=\"7 8\" />\r\n\r\n      <path d=\"M158 210 L158 310 Q158 342 190 342 L245 342\"\r\n            fill=\"none\"\r\n            stroke=\"rgba(242,196,170,.08)\"\r\n            stroke-width=\"1.4\"\r\n            stroke-linecap=\"round\"\r\n            stroke-dasharray=\"7 8\"\r\n            filter=\"url(#pathGlow)\" />\r\n    </svg>\r\n\r\n    <div class=\"glow-dot\"></div>\r\n\r\n    <div class=\"gauge-wrap\">\r\n      <div class=\"gauge\">\r\n        <svg viewBox=\"0 0 510 420\" aria-hidden=\"true\">\r\n          <defs>\r\n            <linearGradient id=\"ringGrad\" x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\">\r\n              <stop offset=\"0%\" stop-color=\"#ffd9cc\" />\r\n              <stop offset=\"55%\" stop-color=\"#e8a089\" />\r\n              <stop offset=\"100%\" stop-color=\"#9d4e35\" />\r\n            </linearGradient>\r\n            <radialGradient id=\"centerGrad\" cx=\"50%\" cy=\"50%\" r=\"65%\">\r\n              <stop offset=\"0%\" stop-color=\"#25171b\" />\r\n              <stop offset=\"65%\" stop-color=\"#160d11\" />\r\n              <stop offset=\"100%\" stop-color=\"#0a070a\" />\r\n            </radialGradient>\r\n            <linearGradient id=\"needleGrad\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\r\n              <stop offset=\"0%\" stop-color=\"#fff4ea\"/>\r\n              <stop offset=\"38%\" stop-color=\"#f0c0ad\"/>\r\n              <stop offset=\"100%\" stop-color=\"#5c4a47\"/>\r\n            </linearGradient>\r\n            <filter id=\"softGlow\" x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\">\r\n              <feGaussianBlur stdDeviation=\"14\" result=\"g\"/>\r\n              <feMerge>\r\n                <feMergeNode in=\"g\"/>\r\n                <feMergeNode in=\"SourceGraphic\"/>\r\n              </feMerge>\r\n            </filter>\r\n            <filter id=\"needleGlow\" x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\">\r\n              <feGaussianBlur stdDeviation=\"2\" result=\"ng\"/>\r\n              <feMerge>\r\n                <feMergeNode in=\"ng\"/>\r\n                <feMergeNode in=\"SourceGraphic\"/>\r\n              </feMerge>\r\n            </filter>\r\n          </defs>\r\n\r\n          <!-- Outer body -->\r\n          <path d=\"M58 300 A197 197 0 0 1 452 300\"\r\n                fill=\"none\"\r\n                stroke=\"#2a2d31\"\r\n                stroke-width=\"22\"\r\n                stroke-linecap=\"round\"/>\r\n          <path d=\"M66 300 A189 189 0 0 1 444 300\"\r\n                fill=\"none\"\r\n                stroke=\"#0f0a0d\"\r\n                stroke-width=\"38\"\r\n                stroke-linecap=\"round\"/>\r\n\r\n          <!-- Track -->\r\n          <path d=\"M94 300 A161 161 0 0 1 416 300\"\r\n                fill=\"none\"\r\n                stroke=\"#140c0f\"\r\n                stroke-width=\"33\"\r\n                stroke-linecap=\"round\"/>\r\n\r\n          <!-- Active arc -->\r\n          <path d=\"M107 300 A148 148 0 0 1 195 108\"\r\n                fill=\"none\"\r\n                stroke=\"url(#ringGrad)\"\r\n                stroke-width=\"18\"\r\n                stroke-linecap=\"round\"\r\n                filter=\"url(#softGlow)\"/>\r\n\r\n          <!-- subtle glow arc -->\r\n          <path d=\"M107 300 A148 148 0 0 1 195 108\"\r\n                fill=\"none\"\r\n                stroke=\"rgba(255, 214, 196, .34)\"\r\n                stroke-width=\"31\"\r\n                stroke-linecap=\"round\"\r\n                opacity=\".12\"\r\n                filter=\"url(#softGlow)\"/>\r\n\r\n          <!-- Tick marks -->\r\n          <g class=\"ticks\">\r\n            <path d=\"M87 300 A168 168 0 0 1 423 300\" fill=\"none\" stroke=\"transparent\"/>\r\n            <!-- Generated manually -->\r\n            <g stroke=\"rgba(255,255,255,.09)\" stroke-width=\"1.6\" stroke-linecap=\"round\">\r\n              <line x1=\"102\" y1=\"287\" x2=\"91\" y2=\"286\"/>\r\n              <line x1=\"106\" y1=\"264\" x2=\"95\" y2=\"262\"/>\r\n              <line x1=\"112\" y1=\"242\" x2=\"101\" y2=\"239\"/>\r\n              <line x1=\"121\" y1=\"220\" x2=\"111\" y2=\"215\"/>\r\n              <line x1=\"132\" y1=\"200\" x2=\"122\" y2=\"194\"/>\r\n              <line x1=\"145\" y1=\"181\" x2=\"136\" y2=\"174\"/>\r\n              <line x1=\"161\" y1=\"164\" x2=\"152\" y2=\"156\"/>\r\n              <line x1=\"178\" y1=\"149\" x2=\"170\" y2=\"140\"/>\r\n              <line x1=\"197\" y1=\"136\" x2=\"190\" y2=\"127\"/>\r\n              <line x1=\"218\" y1=\"126\" x2=\"212\" y2=\"116\"/>\r\n              <line x1=\"239\" y1=\"119\" x2=\"236\" y2=\"108\"/>\r\n              <line x1=\"261\" y1=\"116\" x2=\"261\" y2=\"104\"/>\r\n              <line x1=\"284\" y1=\"118\" x2=\"286\" y2=\"107\"/>\r\n              <line x1=\"306\" y1=\"124\" x2=\"310\" y2=\"113\"/>\r\n              <line x1=\"326\" y1=\"133\" x2=\"332\" y2=\"123\"/>\r\n              <line x1=\"346\" y1=\"145\" x2=\"353\" y2=\"136\"/>\r\n              <line x1=\"364\" y1=\"159\" x2=\"372\" y2=\"151\"/>\r\n              <line x1=\"380\" y1=\"176\" x2=\"389\" y2=\"169\"/>\r\n              <line x1=\"393\" y1=\"194\" x2=\"403\" y2=\"188\"/>\r\n              <line x1=\"404\" y1=\"214\" x2=\"415\" y2=\"210\"/>\r\n              <line x1=\"412\" y1=\"236\" x2=\"423\" y2=\"234\"/>\r\n              <line x1=\"417\" y1=\"258\" x2=\"428\" y2=\"258\"/>\r\n              <line x1=\"420\" y1=\"281\" x2=\"431\" y2=\"282\"/>\r\n            </g>\r\n\r\n            <text class=\"tick-label\" x=\"150\" y=\"144\">10</text>\r\n            <text class=\"tick-label\" x=\"257\" y=\"125\">12</text>\r\n            <text class=\"tick-label\" x=\"359\" y=\"144\"> </text>\r\n            <text class=\"tick-label\" x=\"92\" y=\"302\">9</text>\r\n            <text class=\"tick-label\" x=\"149\" y=\"150\">10</text>\r\n            <text class=\"tick-label\" x=\"256\" y=\"125\">12</text>\r\n          </g>\r\n\r\n          <!-- needle glow behind -->\r\n          <g class=\"needle\">\r\n            <path class=\"needle-base-glow\" d=\"M256 296 L155 109 L166 104 L276 286 Z\" fill=\"rgba(255,198,173,.55)\"/>\r\n            <path d=\"M255 296 L155 109 L166 104 L278 286 Z\" fill=\"url(#needleGrad)\" filter=\"url(#needleGlow)\"/>\r\n            <circle cx=\"255\" cy=\"296\" r=\"42\" fill=\"url(#centerGrad)\" stroke=\"rgba(255,255,255,.08)\" stroke-width=\"2\"/>\r\n            <circle cx=\"255\" cy=\"296\" r=\"17\" fill=\"url(#needleGrad)\" stroke=\"rgba(255,255,255,.1)\" stroke-width=\"1.5\"/>\r\n          </g>\r\n        </svg>\r\n      </div>\r\n    </div>\r\n    </div>\r\n  </div>\r\n  <script>\r\n    (() => {\r\n      const card = document.getElementById('card');\r\n      if (!card) return;\r\n      const resize = () => card.style.setProperty('--scene-scale', String(card.clientWidth / 824));\r\n      if (typeof ResizeObserver !== 'undefined') new ResizeObserver(resize).observe(card);\r\n      else window.addEventListener('resize', resize);\r\n      resize();\r\n    })();\r\n  </script>\r\n\r\n</body>\r\n</html>\r\n","network":"<!doctype html>\r\n<!DOCTYPE html>\r\n\r\n<html data-bento-key=\"network\" data-bento-paused=\"true\" lang=\"tr\"><head><meta charset=\"utf-8\"/><meta content=\"width=device-width, initial-scale=1\" name=\"viewport\"/><title>Zonely | Oyun Logoları Kayarak Geçiş — Şeffaf Bento</title>\r\n<style>\r\n:root{color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#0b0a0e;color:#f6f3f3;font-family:Inter,ui-sans-serif,system-ui,-apple-system,\"Segoe UI\",sans-serif}body{display:grid;place-items:center;padding:16px}\r\n.card{position:relative;isolation:isolate;overflow:hidden;width:min(778px,100%);aspect-ratio:778/584;border-radius:5px;background:radial-gradient(ellipse 47% 47% at 73% -4%,rgba(239,147,119,.42),transparent 99%),radial-gradient(ellipse 46% 48% at 58% 30%,rgba(118,77,68,.35),transparent),radial-gradient(ellipse 72% 66% at 43% 34%,#292022 0%,#1c171b 53%,#141216 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.015)}\r\n.card:before{content:\"\";position:absolute;inset:-10% -10% 0 22%;background:radial-gradient(ellipse 40% 41% at 66% 0%,rgba(255,190,161,.42),transparent 95%);filter:blur(27px);pointer-events:none;animation:ambient 7s ease-in-out infinite alternate;z-index:0}.card:after{content:\"\";position:absolute;inset:0;pointer-events:none;opacity:.075;background-image:url(\"data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.26'/%3E%3C/svg%3E\");z-index:3}\r\n.geometry{position:absolute;inset:0;z-index:1;width:100%;height:100%;overflow:visible}.ring-slow{transform-origin:389px 200px;animation:orbit 38s linear infinite}.ring-reverse{transform-origin:389px 200px;animation:orbit 58s linear reverse infinite}.ring-glint{transform-origin:389px 200px;animation:orbit 18s linear infinite;filter:drop-shadow(0 0 9px #ffd6bb)}\r\n.bits{position:absolute;left:36%;right:2%;top:0;height:214px;z-index:1;overflow:hidden;mask-image:linear-gradient(180deg,black,rgba(0,0,0,.24) 88%,transparent);color:rgba(255,226,210,.13);font-family:ui-monospace,monospace;font-size:11px;line-height:18px;letter-spacing:11px;white-space:pre;transform:rotate(-6deg);animation:bitFloat 13s ease-in-out infinite alternate;pointer-events:none}\r\n.icon-bubble{position:absolute;z-index:3;top:26.9%;width:90px;height:90px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(255,214,192,.16);background:radial-gradient(circle at 45% 25%,#3c3233 0%,#292223 47%,#1a1718 100%);box-shadow:inset 0 2px 2px rgba(255,255,255,.09),inset 0 -14px 18px rgba(0,0,0,.33),0 17px 32px rgba(0,0,0,.25),0 0 15px rgba(255,179,142,.07);animation:bubble 6s ease-in-out infinite}.bubble-chat{left:23.1%;animation-delay:-2.3s}.bubble-support{left:65.1%}.icon-bubble svg{width:40px;height:40px;filter:drop-shadow(0 0 7px rgba(255,230,210,.18))}.bubble-chat svg{width:40px;height:40px}\r\n.shield-disc{position:absolute;z-index:4;left:39.2%;top:19.8%;width:21.9%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 74% 14%,rgba(255,181,125,.40),transparent 42%),radial-gradient(circle at 39% 60%,#292327,#211a1e 62%,#291c1c 100%);border:1px solid rgba(255,206,174,.3);box-shadow:0 -2px 3px rgba(255,236,200,.82),0 -8px 26px rgba(255,159,100,.38),0 13px 40px rgba(0,0,0,.36),inset 0 -22px 30px rgba(0,0,0,.3);animation:discPulse 6s ease-in-out infinite}\r\n.shield-disc:before{content:\"\";position:absolute;left:11%;right:11%;top:-2px;height:28%;border-radius:100%;background:radial-gradient(ellipse at center,rgba(255,208,177,.8),transparent 71%);filter:blur(9px);opacity:.76;pointer-events:none}.shield-disc:after{content:\"\";position:absolute;inset:-2px;border-radius:50%;border-top:2px solid rgba(255,222,191,.75);border-left:1px solid rgba(255,219,187,.08);border-bottom:1px solid transparent;filter:drop-shadow(0 0 12px rgba(255,172,118,.8));pointer-events:none}\r\n.shield-disc>svg{position:relative;z-index:1;width:90px;height:100px;max-width:65%;max-height:75%;filter:drop-shadow(0 8px 17px rgba(0,0,0,.33))}\r\n.copy{position:absolute;bottom:20px;left:12px;right:17px;z-index:5}.copy h2{margin:0 0 17px;font-size:29px;letter-spacing:-.4px;line-height:1.12;font-weight:670;color:#f4f2f3}.copy p{margin:0;color:#aeabad;font-size:21px;line-height:1.28;letter-spacing:-.15px;font-weight:400;max-width:745px}\r\n@keyframes orbit{to{transform:rotate(360deg)}}@keyframes bubble{0%,100%{transform:translateY(0);}50%{transform:translateY(-5px);}}@keyframes discPulse{0%,100%{}50%{}}@keyframes bitFloat{from{transform:translateY(-5px) rotate(-6deg);opacity:.52}to{transform:translateY(15px) rotate(-6deg);opacity:1}}@keyframes ambient{from{opacity:.55;transform:translate(-3%,-4%)}to{opacity:1;transform:translate(2%,3%)}}\r\n@media(max-width:600px){body{padding:8px}.card{min-height:390px;aspect-ratio:778/584}.icon-bubble{width:11.5%;height:auto;aspect-ratio:1}.icon-bubble svg{width:50%;height:50%}.shield-disc{top:20%}.shield-disc>svg{width:65%}.copy{left:13px;right:13px;bottom:18px}.copy h2{font-size:clamp(21px,4.2vw,29px);margin-bottom:10px}.copy p{font-size:clamp(14px,3.2vw,21px);line-height:1.38}}\r\n@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important}}\r\n\r\n/* Zonely transparent integration card — original orbit and shimmer retained. */\r\nhtml,body{background:transparent!important}\r\nbody{min-height:100vh;overflow-x:hidden;background:transparent!important}\r\n.card{width:min(778px,100%);aspect-ratio:778/420;overflow:hidden;border-radius:4px;background:transparent!important;box-shadow:none!important}\r\n.card:before{inset:-10% -10% 0 22%;z-index:0;background:radial-gradient(ellipse 47% 47% at 61% 12%,rgba(255,182,151,.36),transparent 92%);filter:blur(31px)}\r\n.card:after{z-index:0;opacity:.055;mask-image:radial-gradient(ellipse 58% 65% at 50% 42%,black,transparent);pointer-events:none}\r\n.geometry{z-index:1}\r\n.flow-lines{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;overflow:visible}\r\n.flow-base{fill:none;stroke:rgba(255,206,186,.34);stroke-width:1.3;stroke-dasharray:3 7;stroke-linecap:round}\r\n.flow-active{fill:none;stroke:url(#sendLight);stroke-width:2.1;stroke-linecap:round;stroke-dasharray:24 160;animation:sendPulse 3s linear infinite;filter:drop-shadow(0 0 6px #ffcfb9)}\r\n.flow-active.second{animation-delay:-1.1s}\r\n.arrow-mark{fill:none;stroke:#ffd5c3;stroke-width:1.85;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 6px rgba(255,190,165,.6))}\r\n.signal-dot{fill:#ffe6d9;filter:drop-shadow(0 0 5px #ffd1b7)}\r\n@keyframes sendPulse{to{stroke-dashoffset:-184}}\r\n.endpoint{position:absolute;top:calc(200 / 420 * 100%);z-index:4;width:103px;height:103px;border-radius:50%;display:grid;place-items:center;transform:translate(-50%,-50%);border:1px solid rgba(255,218,193,.26);background:radial-gradient(circle at 38% 18%,rgba(87,68,67,.98),rgba(39,31,34,.98) 62%,rgba(26,22,26,.98));box-shadow:inset 0 2px 2px rgba(255,255,255,.12),inset 0 -15px 22px rgba(0,0,0,.43),0 18px 37px rgba(0,0,0,.25),0 0 26px rgba(255,156,115,.13);animation:endpointFloat 6s ease-in-out infinite}\r\n.site-end{left:calc(165 / 778 * 100%)}\r\n.discord-end{left:calc(615 / 778 * 100%);animation-delay:-3s}\r\n.endpoint .site-svg{width:51%;height:51%;color:#f9e9e1;filter:drop-shadow(0 0 9px rgba(255,221,207,.20))}\r\n.endpoint .discord-svg{width:52%;height:52%;fill:white;filter:drop-shadow(0 0 8px rgba(255,255,255,.28))}\r\n.game-hub{position:absolute;z-index:4;left:50%;top:calc(200 / 420 * 100%);width:198px;height:198px;transform:translate(-50%,-50%);border-radius:50%;border:1px solid rgba(255,202,174,.42);background:radial-gradient(circle at 70% 8%,rgba(255,186,128,.32),transparent 36%),radial-gradient(circle at 40% 57%,#332930,#241d23 65%,#2d1d21 100%);box-shadow:0 -3px 3px rgba(255,232,214,.58),0 -8px 30px rgba(255,159,105,.31),0 15px 40px rgba(0,0,0,.34),inset 0 -22px 34px rgba(0,0,0,.34);animation:hubBreathe 5.8s ease-in-out infinite}\r\n.game-hub:before{content:\"\";position:absolute;inset:10px;border:1px solid rgba(255,222,202,.13);border-radius:50%;pointer-events:none}\r\n.game-hub:after{content:\"\";position:absolute;inset:-2px;border-top:2px solid rgba(255,228,203,.82);border-radius:50%;filter:drop-shadow(0 0 9px rgba(255,172,117,.72));pointer-events:none}\r\n.hub-light{position:absolute;inset:23%;border-radius:50%;background:radial-gradient(circle,rgba(207,242,200,.11),transparent 70%);filter:blur(11px);pointer-events:none}\r\n.game-logo{position:absolute;display:grid;place-items:center;transform:translateX(-50%);border-radius:16px;border:1px solid rgba(255,255,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.11),0 6px 16px rgba(0,0,0,.35);background:linear-gradient(145deg,rgba(66,58,61,.93),rgba(31,28,34,.95));animation:gameFloat 5.4s ease-in-out infinite}\r\n.game-logo svg{width:65%;height:65%;overflow:visible;filter:drop-shadow(0 2px 4px rgba(0,0,0,.24))}\r\n.minecraft-logo{left:50%;top:19px;width:91px;height:91px;color:#b0eea6;border-radius:19px;box-shadow:0 0 23px rgba(117,212,115,.14),inset 0 1px rgba(255,255,255,.16)}\r\n.fivem-logo{left:30%;top:119px;width:51px;height:51px;color:#efbd91;animation-delay:-2s;border-radius:13px}\r\n.cs-logo{left:70%;top:119px;width:51px;height:51px;color:#f1e7e1;animation-delay:-3.4s;border-radius:13px}\r\n@keyframes endpointFloat{0%,100%{translate:0 0;}50%{translate:0 -5px;}}\r\n@keyframes hubBreathe{0%,100%{}50%{}}\r\n@keyframes gameFloat{0%,100%{translate:0 0}50%{translate:0 -3px}}\r\n@media(max-width:600px){body{padding:7px}.card{min-height:0;aspect-ratio:778/420}.endpoint{width:13.24%;height:auto;aspect-ratio:1}.game-hub{width:25.45%;height:auto;aspect-ratio:1}.minecraft-logo{width:46%;height:46%;top:10%;border-radius:12px}.fivem-logo,.cs-logo{width:26%;height:26%;top:60%;border-radius:9px}}\r\n@media(prefers-reduced-motion:reduce){.flow-active,.endpoint,.game-hub,.game-logo{animation:none!important}.geometry *{animation:none!important}}\r\n\r\n/* 5. kart v2 — ortada yalnızca oyun logosu; kutusuz dikey geçiş */\r\n.game-hub {\r\n  background: transparent !important;\r\n  border: 0 !important;\r\n  border-radius: 0 !important;\r\n  box-shadow: none !important;\r\n  animation: none !important;\r\n  filter: none !important;\r\n  overflow: visible;\r\n}\r\n.game-hub::before, .game-hub::after {content:none !important;display:none !important}\r\n.game-logo, .minecraft-logo, .fivem-logo, .cs-logo {\r\n  left:50% !important;\r\n  top:50% !important;\r\n  width:124px !important;\r\n  height:124px !important;\r\n  margin:0 !important;\r\n  padding:0 !important;\r\n  border:0 !important;\r\n  outline:0 !important;\r\n  border-radius:0 !important;\r\n  box-shadow:none !important;\r\n  background:transparent !important;\r\n  animation:gameLogoRise 10.5s cubic-bezier(.25,.7,.28,1) infinite both !important;\r\n  translate:none !important;\r\n  opacity:0;\r\n  will-change:opacity,transform,filter;\r\n  pointer-events:none;\r\n}\r\n.game-logo svg{\r\n  display:block;\r\n  width:100% !important;\r\n  height:100% !important;\r\n  filter:drop-shadow(0 6px 9px rgba(0,0,0,.25)) drop-shadow(0 0 9px rgba(255,207,170,.18)) !important;\r\n  overflow:visible;\r\n}\r\n.minecraft-logo {color:#a7ed99;animation-delay:-1.1s !important}\r\n.fivem-logo {color:#f0a66b;animation-delay:-8.1s !important}\r\n.cs-logo {color:#f4ebe7;animation-delay:-4.6s !important}\r\n@keyframes gameLogoRise {\r\n  0% {opacity:0;transform:translate(-50%,calc(-50% + 44px)) scale(.96);}\r\n  7% {opacity:1;transform:translate(-50%,-50%) scale(1);}\r\n  27% {opacity:1;transform:translate(-50%,-50%) scale(1);}\r\n  33.32% {opacity:0;transform:translate(-50%,calc(-50% - 46px)) scale(.96);}\r\n  33.33%,100% {opacity:0;transform:translate(-50%,calc(-50% + 44px)) scale(.96);}\r\n}\r\n@media(max-width:600px){\r\n  .game-hub{width:25.45%;height:auto;aspect-ratio:1}\r\n  .game-logo, .minecraft-logo, .fivem-logo, .cs-logo {\r\n    width:78% !important;\r\n    height:78% !important;\r\n  }\r\n}\r\n@media(prefers-reduced-motion:reduce){\r\n  .game-logo{animation:none !important;opacity:0 !important}\r\n  .minecraft-logo{opacity:1 !important;transform:translate(-50%,-50%) !important}\r\n}\r\n</style><style id=\"zonely-bento-host-layout\">html{color-scheme:dark}html,body{min-height:0!important;height:auto!important;overflow-x:hidden!important;background:transparent!important}html[data-bento-paused=\"true\"] *,html[data-bento-paused=\"true\"] *::before,html[data-bento-paused=\"true\"] *::after{animation-play-state:paused!important}</style>\r\n<style id=\"zn-inline-card-fit\">html,body{width:100%;height:100vh!important;min-height:0!important;margin:0!important;overflow:hidden!important;background:transparent!important}body{box-sizing:border-box;display:flex!important;align-items:center!important;justify-content:center!important;padding:28px!important}body>.ai-card,body>.bento,body>.deploy-card,body>.card,body>.templates-card,body>.automation,body>.code-card,body>.analytics{flex:0 1 auto;box-sizing:border-box;width:min(100%,calc((100vh - 56px) * 1.3322))!important;max-width:100%!important;min-height:0!important;margin:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:transparent!important;overflow:visible!important}</style></head><body>\r\n<section aria-label=\"Zonely web sitesi, oyun sunucuları ve Discord bağlantısı\" class=\"card\">\r\n<svg aria-hidden=\"true\" class=\"geometry\" preserveAspectRatio=\"xMidYMid meet\" viewBox=\"0 0 778 420\">\r\n<defs>\r\n<lineargradient id=\"ringmetal\" x1=\"0\" x2=\"1\" y1=\"0\" y2=\"1\"><stop stop-color=\"#c59a85\" stop-opacity=\".21\"></stop><stop offset=\".42\" stop-color=\"#a77e72\" stop-opacity=\".1\"></stop><stop offset=\"1\" stop-color=\"#49363d\" stop-opacity=\".01\"></stop></lineargradient>\r\n<lineargradient id=\"orbitwarm\" x1=\"0\" x2=\"1\" y1=\"0\" y2=\"1\"><stop stop-color=\"#f6aa8b\" stop-opacity=\"0\"></stop><stop offset=\".35\" stop-color=\"#ffd9c8\" stop-opacity=\".45\"></stop><stop offset=\".6\" stop-color=\"#ffbc8e\" stop-opacity=\".07\"></stop><stop offset=\"1\" stop-color=\"#f9c3a0\" stop-opacity=\"0\"></stop></lineargradient>\r\n<radialgradient cx=\"50%\" cy=\"50%\" id=\"softburst\" r=\"50%\"><stop stop-color=\"#ffb481\" stop-opacity=\".38\"></stop><stop offset=\"1\" stop-color=\"#ffb481\" stop-opacity=\"0\"></stop></radialgradient>\r\n<filter height=\"700%\" id=\"blurred\" width=\"700%\" x=\"-300%\" y=\"-300%\"><fegaussianblur stddeviation=\"17\"></fegaussianblur></filter>\r\n</defs>\r\n<ellipse cx=\"576\" cy=\"-11\" fill=\"url(#softburst)\" filter=\"url(#blurred)\" opacity=\".45\" rx=\"224\" ry=\"148\"></ellipse>\r\n<circle cx=\"389\" cy=\"200\" fill=\"none\" r=\"305\" stroke=\"url(#ringmetal)\" stroke-width=\"1\"></circle>\r\n<circle cx=\"389\" cy=\"200\" fill=\"none\" r=\"224\" stroke=\"rgba(240,206,192,.068)\" stroke-width=\"1\"></circle>\r\n<circle cx=\"389\" cy=\"200\" fill=\"none\" r=\"144\" stroke=\"rgba(246,206,189,.11)\" stroke-width=\"1.3\"></circle>\r\n<circle cx=\"389\" cy=\"200\" fill=\"none\" r=\"218\" stroke=\"rgba(255,235,222,.045)\" stroke-width=\"18\"></circle>\r\n<g class=\"ring-slow\"><path d=\"M148 22 A302 302 0 0 1 629 30\" fill=\"none\" stroke=\"url(#orbitwarm)\" stroke-width=\"1.5\"></path><path d=\"M111 78 A305 305 0 0 1 223 -56\" fill=\"none\" stroke=\"rgba(250,211,188,.055)\"></path></g>\r\n<g class=\"ring-reverse\"><path d=\"M245 101 A154 154 0 0 1 467 65\" fill=\"none\" stroke=\"rgba(255,214,194,.17)\" stroke-width=\"1.5\"></path><path d=\"M489 310 A154 154 0 0 1 295 332\" fill=\"none\" stroke=\"rgba(248,180,150,.07)\"></path></g>\r\n<g class=\"ring-glint\"><circle cx=\"389\" cy=\"55\" fill=\"#ffdbc3\" opacity=\".65\" r=\"3\"></circle><circle cx=\"389\" cy=\"55\" fill=\"#ffb481\" filter=\"url(#blurred)\" opacity=\".9\" r=\"12\"></circle></g>\r\n</svg>\r\n<svg aria-hidden=\"true\" class=\"flow-lines\" preserveAspectRatio=\"xMidYMid meet\" viewBox=\"0 0 778 420\">\r\n<defs><lineargradient id=\"sendLight\" x1=\"0\" x2=\"1\" y1=\"0\" y2=\"0\"><stop stop-color=\"#f6b18e\" stop-opacity=\".16\"></stop><stop offset=\".5\" stop-color=\"#ffe1ca\" stop-opacity=\".9\"></stop><stop offset=\"1\" stop-color=\"#ffb69a\" stop-opacity=\".16\"></stop></lineargradient></defs>\r\n<path class=\"flow-base\" d=\"M217 200 H286\"></path><path class=\"flow-base\" d=\"M492 200 H563\"></path>\r\n<path class=\"flow-active\" d=\"M217 200 H286\"></path><path class=\"flow-active second\" d=\"M492 200 H563\"></path>\r\n<path class=\"arrow-mark\" d=\"m277 194 9 6-9 6\"></path><path class=\"arrow-mark\" d=\"m554 194 9 6-9 6\"></path>\r\n<circle class=\"signal-dot\" r=\"3\"><animatemotion dur=\"3s\" path=\"M217 200 H286\" repeatcount=\"indefinite\"></animatemotion></circle>\r\n<circle class=\"signal-dot\" r=\"3\"><animatemotion begin=\"1.1s\" dur=\"3s\" path=\"M492 200 H563\" repeatcount=\"indefinite\"></animatemotion></circle>\r\n</svg><div aria-label=\"Web sitesi\" class=\"endpoint site-end\" role=\"img\">\r\n<svg aria-hidden=\"true\" class=\"site-svg\" viewBox=\"0 0 64 64\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"8\" y=\"11\" width=\"48\" height=\"42\" rx=\"6\"/><path d=\"M8 23h48M17 17h1m6 0h1M24 32l-7 6 7 6m16-12 7 6-7 6m-5-14-6 16\"/></svg>\r\n</div>\r\n<div aria-label=\"Oyun logoları sırayla: Minecraft, FiveM, Counter-Strike\" class=\"game-hub\" role=\"img\">\r\n\r\n<div aria-hidden=\"true\" class=\"game-logo minecraft-logo\" title=\"Minecraft\"><svg aria-hidden=\"true\" fill=\"currentColor\" viewBox=\"0 0 1024 1024\"><path d=\"M170.666667 85.333333h682.666666a85.333333 85.333333 0 0 1 85.333334 85.333334v682.666666a85.333333 85.333333 0 0 1-85.333334 85.333334H170.666667a85.333333 85.333333 0 0 1-85.333334-85.333334V170.666667a85.333333 85.333333 0 0 1 85.333334-85.333334m85.333333 170.666667v170.666667h170.666667v85.333333H341.333333v256h85.333334v-85.333333h170.666666v85.333333h85.333334v-256h-85.333334v-85.333333h170.666667V256h-170.666667v170.666667h-170.666666V256H256z\"></path></svg></div>\r\n<div aria-hidden=\"true\" class=\"game-logo fivem-logo\" title=\"FiveM\"><svg aria-hidden=\"true\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M22.4 24h-5.225c-.117 0-.455-1.127-1.026-3.375-1.982-6.909-3.124-10.946-3.417-12.12l3.37-3.325h.099c.454 1.42 2.554 7.676 6.299 18.768ZM12.342 7.084h-.048a3.382 3.382 0 0 1-.098-.492v-.098a102.619 102.715 0 0 1 3.272-3.275c.13.196.196.356.196.491v.05a140.694 140.826 0 0 1-3.322 3.324ZM5.994 10.9h-.05c.67-2.12 1.076-3.209 1.223-3.275L14.492.343c.08 0 .258.524.533 1.562zm1.37-4.014h-.05C8.813 2.342 9.612.048 9.71 0h4.495v.05a664.971 664.971 0 0 1-6.841 6.839Zm-2.69 7.874h-.05c.166-.798.554-1.418 1.174-1.855a312.918 313.213 0 0 1 5.71-5.717h.05c-.117.672-.375 1.175-.781 1.52zM1.598 24l-.098-.05c1.399-4.172 2.148-6.322 2.248-6.45l6.74-6.694v.05C10.232 11.88 8.974 16.263 6.73 24Z\"></path></svg></div>\r\n<div aria-hidden=\"true\" class=\"game-logo cs-logo\" title=\"Counter-Strike\"><svg aria-hidden=\"true\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M21.7101 3.2348a.0218.0218 0 0 1-.0216-.0215c.001-.0815.003-.3698.004-.424 0-.1292-.1428-.1831-.2117-.0829-.0113.016-.1457.212-.2287.3323a.0244.0244 0 0 1-.0198.0103h-6.5508a.0473.0473 0 0 1-.0473-.0463l-.0131-.177a.0477.0477 0 0 1 .056-.0477l.335.0319a.059.059 0 0 0 .0624-.0445l.2441-.989a.0475.0475 0 0 0-.0295-.0542l-.2268-.0848a.0427.0427 0 0 1-.0263-.0295c-.0412-.1722-.3766-1.3235-1.9935-1.581-.7867-.125-1.302.2107-1.577.4784a1.594 1.594 0 0 0-.3018.4095l-.0965.2125c-.008.0164-.046.2157-.046.234l.0513.9815a.109.109 0 0 0 .0422.0856l.3546.153-.1958.3244a.055.055 0 0 1-.053.0402s-.417.0108-.6227.0192c-.3856.0155-1.2444.4858-1.8773 1.8385-.6219 1.3282-.724 1.5496-.724 1.5496a.0736.0736 0 0 1-.0684.0398l-.5776.0019c-.0356 0-.0736.0285-.0886.0608l-.8982 2.5428c-.0149.0323-.006.081.0173.1081l.627.3918a.059.059 0 0 1 .0195.059l-.3274.9664a.1916.1916 0 0 1-.0235.0618l-.4343.3824a.1056.1056 0 0 0-.0356.059l-.5978 1.5308a.0632.0632 0 0 1-.0608.0455l-.3355.0018a.1633.1633 0 0 0-.162.1488l-.2007 2.2883a1.7194 1.7194 0 0 1-.0159.1207l-.1583.908a.128.128 0 0 1-.0333.0553l-.5584.4263c-.2559.2443-.5988.6903-.7665 1.0015l-1.86 3.9235c-.045.0833-.0811.227-.0788.3221l.1321.2354c.002.0842-.0319.4559-.0707.5307L.817 23.6545a.0985.0985 0 0 0-.003.0856l.0309.0706.0932.1859 1.8913.0029c.1173.0106.247-.1396.2507-.3005l.1027-1.2965-.0268-.1952 3.6063-4.232c.0942-.1146.222-.3168.2861-.4506l1.7186-3.7892a.1712.1712 0 0 1 .1004-.088l.1086-.035a.1694.1694 0 0 1 .1827.0528c.1505.1807.5042.781.6765 1.0315.1425.2079.8495 1.2304 1.1582 1.5675.0853.0926.3481.198.4658.2696a.083.083 0 0 1 .029.1119l-1.0298 1.8083-.4549 2.1357a.9542.9542 0 0 0-.0356.1526l-.4118 1.4831c.003.1873-.141.2856-.1527.5064l-.15 1.084a.0581.0582 0 0 0 .0582.0614l2.5445.014c.0951-.0003.1902-.0045.2854-.0067a1.1049 1.1049 0 0 0 .0755-.0069c.1242-.0158.5629-.0754.75-.1503.1097-.0388.1809-.0819.2268-.1295.1855-.1935.2002-.278.2034-.3975.001-.0212-.011-.0726-.0283-.1049-.0053-.0117-.0316-.0382-.059-.0477l-1.1815-.3562a.3693.3693 0 0 1-.1889-.1338l-.3172-.469a.0865.0865 0 0 1 .0173-.0973l.618-.609a.2017.2017 0 0 0 .0483-.072l1.9036-4.488c.089-.285.0595-.6056 0-.9445-.044-.2504-.6854-1.3264-.8532-1.6236-.1476-.262-1.0677-1.8707-1.286-2.2517-.0793-.1376-.1894-.1328-.2287-.276l-.0726-1.1173a.0398.0398 0 0 1 .0356-.0505l.3312-.0276a.093.093 0 0 0 .0741-.0487l1.147-2.1544a.0958.0958 0 0 0-.002-.094l-.2349-.2907a.0874.0874 0 0 1-.001-.0875l.3515-.3796a.054.054 0 0 1 .0736-.0206l.9343.5266a.3819.3819 0 0 0 .186.0505c.259-.0019.6858-.1549.908-.2906a.3833.3833 0 0 0 .1386-.148l.4583-1.0703c.006-.0136.0262-.0117.029.0028l.1278.5953a.0635.0635 0 0 0 .0788.0501l1.3494-.3a.0662.0662 0 0 0 .05-.0786l-.318-1.3437a.0716.0716 0 0 1 .009-.0534l.1313-.2036a.281.281 0 0 0 .036-.0814l.1589-.725a.0408.0408 0 0 1 .0397-.0323l3.7327.0047a.0916.0916 0 0 0 .0932-.0931v-.6336a.022.022 0 0 1 .0216-.0216h1.4393a.0465.0465 0 0 0 .0464-.0463v-.2855a.0465.0465 0 0 0-.0464-.0463h-1.4398z\"></path></svg></div>\r\n</div>\r\n<div aria-label=\"Discord\" class=\"endpoint discord-end\" role=\"img\"><svg aria-hidden=\"true\" class=\"discord-svg\" fill=\"white\" viewBox=\"0 0 24 24\"><path d=\"M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z\"></path></svg></div></section>\r\n\r\n</body></html>\r\n","themes":"<!doctype html>\r\n<html data-bento-key=\"themes\" data-bento-paused=\"true\" lang=\"tr\">\r\n<head>\r\n  <meta charset=\"utf-8\">\r\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\r\n  <meta name=\"theme-color\" content=\"#070708\">\r\n  <title>Temalar — Zonely Bento Card</title>\r\n  <style>\r\n    :root{color-scheme:dark;font-family:Inter,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif}\r\n    *{box-sizing:border-box}\r\n    html,body{margin:0;min-height:100%;background:transparent;color:#eeedf2}\r\n    body{min-height:100vh;display:grid;place-items:center;padding:16px;background:transparent}\r\n    .templates-card{\r\n      position:relative;overflow:hidden;isolation:isolate;width:min(641px,100%);aspect-ratio:641/762;\r\n      container-type:inline-size;border-radius:14px;background:transparent;\r\n    }\r\n    .dots{position:absolute;inset:12% auto 0 0;width:57%;height:37%;opacity:.28;pointer-events:none;background-image:radial-gradient(circle,rgba(141,136,175,.55) .75px,transparent 1.2px);background-size:8px 8px;mask-image:radial-gradient(ellipse at 2% 24%,#000 0,transparent 76%)}\r\n    .templates-panel{\r\n      position:absolute;z-index:2;left:2.35%;top:6%;width:111%;height:91%;padding:4.55cqw 4.1cqw;\r\n      border-radius:5.5cqw;border:1px solid rgba(172,163,214,.25);\r\n      background:\r\n        radial-gradient(ellipse 66% 42% at 15% 2%,rgba(91,86,119,.42),transparent 86%),\r\n        linear-gradient(143deg,rgba(26,25,35,.95),rgba(11,11,16,.97) 66%,#080809 100%);\r\n      box-shadow:inset 0 1px rgba(244,238,255,.17),inset 1px 0 rgba(192,188,227,.07),0 0 36px rgba(66,61,97,.17),0 23px 50px #0005;\r\n      animation:panelPulse 6s ease-in-out infinite alternate\r\n    }\r\n    .templates-panel::before{\r\n      content:\"\";position:absolute;inset:-1px;border-radius:inherit;padding:1.6px;\r\n      background:linear-gradient(134deg,rgba(219,214,255,.54),rgba(158,153,201,.18) 22%,rgba(90,89,116,.05) 57%,transparent 75%);\r\n      -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);\r\n      -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none\r\n    }\r\n    .templates-panel::after{\r\n      content:\"\";position:absolute;left:-1px;right:0;bottom:0;top:0;border-radius:inherit;pointer-events:none;\r\n      background:linear-gradient(to bottom,transparent 31%,rgba(5,5,7,.16) 54%,rgba(5,5,7,.76) 79%,rgba(5,5,7,.97) 100%),linear-gradient(to right,transparent 55%,rgba(5,5,7,.47) 99%);\r\n      z-index:5\r\n    }\r\n    .panel-light{position:absolute;width:68%;height:25%;top:-9%;left:-7%;background:radial-gradient(ellipse,rgba(174,169,218,.16),transparent 73%);filter:blur(16px);pointer-events:none;animation:lightDrift 10s ease-in-out infinite alternate}\r\n    .panel-head{position:relative;z-index:2;font-size:4.25cqw;font-weight:420;letter-spacing:-.033em;color:rgba(233,230,246,.82);margin:0 0 8.15cqw}\r\n    .filter-strip{position:relative;z-index:2;display:flex;align-items:center;gap:1.9cqw;width:111%;white-space:nowrap;overflow:hidden;margin:0 0 7.55cqw}\r\n    .filter-strip button{flex:none;border-radius:2cqw;border:1px solid rgba(176,166,208,.075);padding:1.6cqw 2.25cqw;font-family:inherit;font-weight:400;font-size:3.35cqw;line-height:1.25;color:rgba(175,170,197,.42);background:linear-gradient(135deg,rgba(67,64,90,.42),rgba(34,32,49,.53));cursor:pointer;transition:color .25s,background .25s,border-color .25s,box-shadow .25s}\r\n    .filter-strip button[aria-pressed=\"true\"]{border:2px solid rgba(202,199,219,.74);color:rgba(239,237,250,.85);background:rgba(69,68,89,.42);padding:calc(1.6cqw - 1px) calc(2.25cqw - 1px);box-shadow:inset 0 1px #ffffff0d}\r\n    .filter-strip button:hover{color:#eeecf8;border-color:rgba(209,204,238,.5)}\r\n    .searchbox{position:relative;z-index:2;display:flex;align-items:center;gap:1.8cqw;height:10.4cqw;width:89%;border-radius:2cqw;padding:0 3cqw;border:1px solid rgba(143,138,172,.07);\r\n      background:linear-gradient(130deg,rgba(61,59,82,.40),rgba(38,37,52,.33));box-shadow:inset 0 2px 8px #ffffff04;transition:box-shadow .3s,border-color .3s}\r\n    .searchbox:focus-within{border-color:rgba(185,177,238,.37);box-shadow:0 0 22px #9d9ad61c}\r\n    .searchbox svg{width:4.1cqw;height:4.1cqw;flex:none;stroke:#777384;stroke-width:2.1;fill:none;opacity:.70}\r\n    .searchbox input{width:100%;font-family:inherit;font-weight:400;font-size:3.8cqw;line-height:1.3;background:none;border:0;outline:none;color:#d4d2e4;min-width:0}\r\n    .searchbox input::placeholder{color:rgba(157,153,177,.43)}\r\n    .preview-row{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:3cqw;width:96%;margin-top:5.1cqw}\r\n    .preview{height:28.5cqw;min-width:0;overflow:hidden;position:relative;border-radius:2cqw;border:1px solid rgba(148,144,181,.12);background:linear-gradient(152deg,rgba(25,25,33,.66),#0a0a0d);box-shadow:inset 0 1px rgba(255,255,255,.02);transition:opacity .35s,transform .35s}\r\n    .preview[hidden]{display:none}\r\n    .preview:hover{transform:translateY(-3px)}\r\n    .browser-toolbar{position:absolute;left:7%;right:8%;top:9%;height:8%;display:flex;gap:1.15cqw;align-items:center}\r\n    .browser-toolbar i{display:block;width:1.9cqw;height:1.9cqw;background:rgba(123,121,149,.24);border-radius:.15cqw}\r\n    .browser-toolbar::after{content:\"\";margin-left:3cqw;width:24%;height:.9cqw;border-radius:10px;background:rgba(117,116,144,.21)}\r\n    .mini-window{position:absolute;top:26%;left:12%;width:73%;height:75%;border-radius:1.8cqw 1.8cqw 0 0;border:1px solid rgba(146,142,176,.11);background:linear-gradient(145deg,rgba(14,15,19,.93),rgba(12,12,16,.52));padding:4.5cqw 3cqw}\r\n    .mini-window::before{content:\"\";position:absolute;top:9%;left:4%;width:1cqw;height:1cqw;border-radius:50%;background:rgba(132,128,164,.2);box-shadow:1.5cqw 0 rgba(132,128,164,.18),3cqw 0 rgba(132,128,164,.13)}\r\n    .skeleton{height:1.15cqw;background:rgba(130,128,151,.13);margin-bottom:1.4cqw;border-radius:.2cqw}\r\n    .skeleton.wide{width:83%;height:1.25cqw;margin:1.5cqw 0 6cqw}\r\n    .skeleton.short{width:39%}.skeleton.medium{width:56%}\r\n    .skeleton-grid{display:flex;gap:2cqw;align-items:center}\r\n    .skeleton-grid .block{width:7cqw;height:4.8cqw;border-radius:.3cqw;background:rgba(136,131,170,.14)}\r\n    .skeleton-grid .lines{flex:1}\r\n    .skeleton-grid .lines .skeleton{width:70%}\r\n    .preview:nth-child(2) .mini-window{left:16%;width:65%}\r\n    .preview:nth-child(2) .skeleton-grid .block{width:4cqw;height:10cqw}\r\n    .bottom-fade{position:absolute;inset:0;z-index:6;pointer-events:none;background:linear-gradient(to bottom,transparent 70%,rgba(5,5,7,.42) 83%,#050507 100%)}\r\n    @keyframes panelPulse{from{box-shadow:inset 0 1px rgba(244,238,255,.17),inset 1px 0 rgba(192,188,227,.07),0 0 30px rgba(66,61,97,.12),0 23px 50px #0005}to{box-shadow:inset 0 1px rgba(244,238,255,.21),inset 1px 0 rgba(192,188,227,.10),0 0 48px rgba(91,83,148,.22),0 23px 50px #0005}}\r\n    @keyframes lightDrift{from{transform:translateX(-4%);opacity:.7}to{transform:translateX(15%);opacity:1}}\r\n    @media(max-width:500px){.templates-card{border-radius:10px}.panel-head{font-size:4.35cqw}.filter-strip button{font-size:3.55cqw}}\r\n    @media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}\r\n  </style>\r\n<style id=\"zonely-bento-host-layout\">html{color-scheme:dark}html,body{min-height:0!important;height:auto!important;overflow-x:hidden!important;background:transparent!important}html[data-bento-paused=\"true\"] *,html[data-bento-paused=\"true\"] *::before,html[data-bento-paused=\"true\"] *::after{animation-play-state:paused!important}</style>\r\n<style id=\"zn-inline-card-fit\">html,body{width:100%;height:100vh!important;min-height:0!important;margin:0!important;overflow:hidden!important;background:transparent!important}body{box-sizing:border-box;display:flex!important;align-items:center!important;justify-content:center!important;padding:28px!important}body>.ai-card,body>.bento,body>.deploy-card,body>.card,body>.templates-card,body>.automation,body>.code-card,body>.analytics{flex:0 1 auto;box-sizing:border-box;width:min(100%,calc((100vh - 56px) * 0.8412))!important;max-width:100%!important;min-height:0!important;margin:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:transparent!important;overflow:visible!important}</style><style>.templates-card{aspect-ratio:1;border-radius:24px;overflow:hidden}.templates-panel{left:3%;top:5%;width:94%;height:90%;border-radius:24px}.filter-strip{width:100%;gap:1.5cqw}.filter-strip button{font-size:3cqw;padding:1.5cqw}.bottom-fade{display:none}.templates-panel::after{border-radius:inherit;background:transparent}.templates-panel{box-shadow:inset 0 1px rgba(244,238,255,.17),0 0 24px rgba(66,61,97,.12)}</style><style>@font-face{font-family:ZonelyBentoPoly;src:url(\"/Files/Assets/performance/zonely-blog-median.woff2\") format(\"woff2\");font-display:swap}html,body,button,input{font-family:ZonelyBentoPoly,Arial,sans-serif!important}</style></head>\r\n<body>\r\n  <article class=\"templates-card\" aria-label=\"Zonely temalar kartı\">\r\n    <div class=\"dots\" aria-hidden=\"true\"></div>\r\n    <section class=\"templates-panel\" aria-label=\"Tema tarayıcı önizlemesi\">\r\n      <div class=\"panel-light\" aria-hidden=\"true\"></div>\r\n      <h3 class=\"panel-head\">Temalar</h3>\r\n      <nav class=\"filter-strip\" aria-label=\"Tema kategorileri\">\r\n        <button type=\"button\" aria-pressed=\"true\" data-filter=\"Oyun İçi\">Oyun İçi</button>\r\n        <button type=\"button\" aria-pressed=\"false\" data-filter=\"AdminCP\">AdminCP</button>\r\n        <button type=\"button\" aria-pressed=\"false\" data-filter=\"Dijital\">Dijital</button>\r\n        <button type=\"button\" aria-pressed=\"false\" data-filter=\"SMM\">SMM</button>\r\n      </nav>\r\n      <label class=\"searchbox\" aria-label=\"Tema ara\">\r\n        <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><circle cx=\"10.8\" cy=\"10.8\" r=\"7.6\"/><path d=\"m16.4 16.4 5 5\"/></svg>\r\n        <input type=\"search\" placeholder=\"tema ara\" aria-label=\"Tema ara\" id=\"template-search\" autocomplete=\"off\">\r\n      </label>\r\n      <div class=\"preview-row\" aria-label=\"Tema önizlemeleri\">\r\n        <div class=\"preview\" data-categories=\"Oyun İçi AdminCP\" data-title=\"oyun içi yönetim teması\" aria-label=\"Oyun içi tema önizlemesi\">\r\n          <div class=\"browser-toolbar\"><i></i><i></i><i></i></div>\r\n          <div class=\"mini-window\"><div class=\"skeleton wide\"></div><div class=\"skeleton-grid\"><div class=\"lines\"><div class=\"skeleton short\"></div><div class=\"skeleton medium\"></div><div class=\"skeleton short\"></div></div><div class=\"block\"></div><div class=\"lines\"><div class=\"skeleton medium\"></div><div class=\"skeleton short\"></div></div></div></div>\r\n        </div>\r\n        <div class=\"preview\" data-categories=\"Dijital SMM\" data-title=\"dijital satış smm teması\" aria-label=\"Dijital tema önizlemesi\">\r\n          <div class=\"browser-toolbar\"><i></i><i></i><i></i></div>\r\n          <div class=\"mini-window\"><div class=\"skeleton wide\"></div><div class=\"skeleton-grid\"><div class=\"block\"></div><div class=\"lines\"><div class=\"skeleton medium\"></div><div class=\"skeleton short\"></div></div></div></div>\r\n        </div>\r\n      </div>\r\n    </section>\r\n    <div class=\"bottom-fade\" aria-hidden=\"true\"></div>\r\n  </article>\r\n  <script>\r\n    (() => {\r\n      const buttons=[...document.querySelectorAll('[data-filter]')];\r\n      const previews=[...document.querySelectorAll('.preview')];\r\n      const input=document.getElementById('template-search');\r\n      let selected='Oyun İçi';\r\n      function update(){\r\n        const query=input.value.toLocaleLowerCase('tr').trim();\r\n        for(const item of previews){\r\n          const goodFilter=item.dataset.categories.includes(selected);\r\n          const goodQuery=!query||(`${item.dataset.title} ${item.dataset.categories}`).toLocaleLowerCase('tr').includes(query);\r\n          item.hidden=!(goodFilter&&goodQuery);\r\n        }\r\n      }\r\n      for(const button of buttons){\r\n        button.addEventListener('click',()=>{\r\n          selected=button.dataset.filter;\r\n          for(const b of buttons)b.setAttribute('aria-pressed',String(b===button));\r\n          update();\r\n        })\r\n      }\r\n      input.addEventListener('input',update);\r\n      update();\r\n    })();\r\n  </script>\r\n\r\n</body>\r\n</html>\r\n","automation":"<!doctype html>\r\n<html data-bento-key=\"automation\" data-bento-paused=\"true\" lang=\"en\">\r\n<head>\r\n<meta charset=\"utf-8\">\r\n<meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">\r\n<meta name=\"color-scheme\" content=\"dark\">\r\n<title>Smart Automation — Animated Bento</title>\r\n<style>\r\n:root{color-scheme:dark;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif}\r\n*{box-sizing:border-box}\r\nhtml,body{margin:0;min-height:100%;background:transparent}\r\nbody{display:grid;place-items:center;padding:0}\r\n.automation{\r\n --warm:#e8ab81;\r\n position:relative;width:min(504px,100%);aspect-ratio:504/386;\r\n container-type:inline-size;isolation:isolate;overflow:hidden;\r\n border-radius:0 0 27px 27px;\r\n background:radial-gradient(ellipse 39% 48% at 50% 31%,rgba(121,76,62,.20),transparent 80%),#151416;\r\n border-bottom:1px solid rgba(255,255,255,.07);color:#ededee;\r\n}\r\n.automation::before{content:\"\";position:absolute;inset:-18% 14% 41%;background:radial-gradient(ellipse,rgba(204,115,73,.21),transparent 67%);filter:blur(27px);pointer-events:none;animation:ambient 7s ease-in-out infinite alternate}\r\n.automation::after{content:\"\";position:absolute;inset:0;pointer-events:none;opacity:.15;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='110'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.2'/%3E%3C/svg%3E\")}\r\n.lines{position:absolute;top:5%;left:0;width:100%;height:50%;overflow:visible;z-index:1}\r\n.wire{fill:none;stroke:rgba(131,102,101,.31);stroke-width:1.8;stroke-linejoin:round}\r\n.wire.faint{stroke:rgba(131,109,105,.17)}\r\n.surge{fill:none;stroke:#ffdec4;stroke-width:1.5;stroke-linecap:round;stroke-dasharray:0 1000;opacity:.9;filter:drop-shadow(0 0 5px #ffb785);animation:surge 5.6s ease-in-out infinite}\r\n.surge.two{animation-delay:-2.4s}\r\n.surge.three{animation-delay:-4s}\r\n.spark{fill:#fff3d9;filter:drop-shadow(0 0 3px #ffebb1) drop-shadow(0 0 8px #ffc78e)}\r\n.chip-shell{position:absolute;z-index:5;top:15%;left:50%;transform:translateX(-50%);width:24.5%;aspect-ratio:1;border-radius:19%;padding:2.3%;\r\n background:linear-gradient(136deg,#3e2b2b,#8f5840 23%,#ca8760 46%,#5a3831 69%,#282127 100%);\r\n box-shadow:0 13px 22px #050405a8,0 0 27px rgba(227,134,72,.20),inset 0 1px 2px #ffd1a56b;\r\n animation:chipHover 5.7s ease-in-out infinite;\r\n}\r\n.chip-shell::before{content:\"\";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;border-top:1px solid #e7a9778c;box-shadow:0 -5px 20px rgba(248,147,73,.14)}\r\n.chip-inner{position:relative;display:grid;place-items:center;width:100%;height:100%;overflow:hidden;border-radius:16%;background:radial-gradient(circle at 50% 75%,#382427 0%,#201d25 68%,#161720 100%);box-shadow:inset 0 0 0 1px rgba(255,226,204,.10),inset 0 5px 16px rgba(0,0,0,.38)}\r\n.chip-inner::after{content:\"\";position:absolute;inset:-70%;transform:translateX(-85%) rotate(24deg);background:linear-gradient(90deg,transparent 42%,rgba(255,236,206,.075) 50%,transparent 58%);animation:shine 6s ease-in-out infinite;pointer-events:none}\r\n.global-badge{width:70%;height:70%;filter:drop-shadow(0 0 16px rgba(254,155,88,.4));animation:logoBreathe 5s ease-in-out infinite;user-select:none}\r\n.content{position:absolute;z-index:6;left:3.35%;right:3.5%;top:61.5%}\r\nh2{margin:0 0 3.5cqw;font-size:5.8cqw;font-weight:620;letter-spacing:-.044em;line-height:1.16;color:#e8e7e8}\r\np{margin:0;font-size:3.95cqw;line-height:1.48;font-weight:400;letter-spacing:-.012em;color:#8e8c91}\r\n@keyframes surge{0%{stroke-dasharray:0 1000;stroke-dashoffset:0;opacity:0}16%{opacity:1;stroke-dasharray:24 1000}84%{opacity:1;stroke-dasharray:24 1000}100%{stroke-dashoffset:-630;opacity:0;stroke-dasharray:24 1000}}\r\n@keyframes chipHover{0%,100%{translate:0 0}50%{translate:0 -4px}}\r\n@keyframes logoBreathe{0%,100%{}50%{}}\r\n@keyframes ambient{from{opacity:.65;transform:scale(.95)}to{opacity:1;transform:scale(1.13)}}\r\n@keyframes shine{0%,45%{transform:translateX(-85%) rotate(24deg)}80%,100%{transform:translateX(85%) rotate(24deg)}}\r\n@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important}.surge{opacity:0}}\r\n\r\n/* Card art only: transparent canvas with light effects intact */\r\nhtml, body {background:transparent!important;}\r\n.automation {\r\n  aspect-ratio:504 / 252;\r\n  border:0;\r\n  border-radius:0;\r\n  background:transparent;\r\n  box-shadow:none;\r\n}\r\n.automation::after {\r\n  opacity:.08;\r\n  mask-image:radial-gradient(ellipse 42% 66% at 51% 42%, #000 2%,transparent 100%);\r\n}\r\n.automation::before {inset:-20% 12% 13%;}\r\n.lines {top:5%;height:77%;}\r\n.chip-shell {top:22%;}\r\n\r\n</style>\r\n<style id=\"zonely-bento-host-layout\">html{color-scheme:dark}html,body{min-height:0!important;height:auto!important;overflow-x:hidden!important;background:transparent!important}html[data-bento-paused=\"true\"] *,html[data-bento-paused=\"true\"] *::before,html[data-bento-paused=\"true\"] *::after{animation-play-state:paused!important}</style>\r\n<style id=\"zn-inline-card-fit\">html,body{width:100%;height:100vh!important;min-height:0!important;margin:0!important;overflow:hidden!important;background:transparent!important}body{box-sizing:border-box;display:flex!important;align-items:center!important;justify-content:center!important;padding:18px!important}body>.ai-card,body>.bento,body>.deploy-card,body>.card,body>.templates-card,body>.automation,body>.code-card,body>.analytics{flex:0 1 auto;box-sizing:border-box;width:min(100%,calc((100vh - 36px) * 2.0000))!important;max-width:100%!important;min-height:0!important;margin:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:transparent!important;overflow:visible!important}</style></head>\r\n<body>\r\n<article class=\"automation\" aria-label=\"Smart Automation animated card\">\r\n <svg class=\"lines\" viewBox=\"0 0 504 193\" preserveAspectRatio=\"none\" aria-hidden=\"true\">\r\n  <path class=\"wire\" d=\"M59 31 L132 73 H192 M57 98 H192 M58 172 L132 135 H192\"/>\r\n  <path class=\"wire\" d=\"M313 73 H381 L454 31 M313 98 H448 M313 135 H381 L450 170\"/>\r\n  <path class=\"wire faint\" d=\"M58 121 H192 M313 121 H446\"/>\r\n  <path class=\"surge\" d=\"M59 31 L132 73 H192\"/><path class=\"surge two\" d=\"M454 31 L381 73 H313\"/><path class=\"surge three\" d=\"M57 98 H192\"/>\r\n  <circle class=\"spark\" cx=\"189\" cy=\"98\" r=\"3\"><animate attributeName=\"opacity\" values=\"0.3;1;0.3\" dur=\"2.8s\" repeatCount=\"indefinite\"/></circle>\r\n  <circle class=\"spark\" cx=\"382\" cy=\"73\" r=\"2.7\"><animate attributeName=\"opacity\" values=\"1;.15;1\" dur=\"3.9s\" repeatCount=\"indefinite\"/></circle>\r\n  <circle class=\"spark\" cx=\"235\" cy=\"171\" r=\"1.5\"><animate attributeName=\"opacity\" values=\".1;1;.1\" dur=\"4.1s\" repeatCount=\"indefinite\"/></circle>\r\n  <circle r=\"2.4\" class=\"spark\"><animateMotion dur=\"5.8s\" repeatCount=\"indefinite\" path=\"M454 31 L381 73 H313\"/></circle>\r\n </svg>\r\n <div class=\"chip-shell\"><div class=\"chip-inner\">\r\n  <svg class=\"global-badge\" viewBox=\"0 0 100 100\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-label=\"Küresel Çapta Yazılım Ağ Amblemi\" role=\"img\">\r\n   <defs>\r\n    <linearGradient id=\"globeGrad1\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"100%\">\r\n     <stop offset=\"0%\" stop-color=\"#ffdfa0\"/>\r\n     <stop offset=\"50%\" stop-color=\"#efb66e\"/>\r\n     <stop offset=\"100%\" stop-color=\"#e98252\"/>\r\n    </linearGradient>\r\n    <linearGradient id=\"globeGrad2\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"100%\">\r\n     <stop offset=\"0%\" stop-color=\"#efb66e\"/>\r\n     <stop offset=\"100%\" stop-color=\"#8f4520\"/>\r\n    </linearGradient>\r\n   </defs>\r\n   <circle cx=\"50\" cy=\"50\" r=\"38\" stroke=\"url(#globeGrad1)\" stroke-width=\"2.2\" opacity=\"0.9\" fill=\"url(#globeGrad2)\" fill-opacity=\"0.2\"/>\r\n   <ellipse cx=\"50\" cy=\"50\" rx=\"38\" ry=\"14\" stroke=\"url(#globeGrad1)\" stroke-width=\"1.6\" opacity=\"0.65\"/>\r\n   <ellipse cx=\"50\" cy=\"50\" rx=\"38\" ry=\"27\" stroke=\"url(#globeGrad1)\" stroke-width=\"1.2\" opacity=\"0.45\" stroke-dasharray=\"3 2\"/>\r\n   <ellipse cx=\"50\" cy=\"50\" rx=\"17\" ry=\"38\" stroke=\"url(#globeGrad1)\" stroke-width=\"1.6\" opacity=\"0.75\"/>\r\n   <line x1=\"50\" y1=\"12\" x2=\"50\" y2=\"88\" stroke=\"url(#globeGrad1)\" stroke-width=\"1.8\" opacity=\"0.8\"/>\r\n   <circle cx=\"50\" cy=\"36\" r=\"3\" fill=\"#ffdfa0\"/>\r\n   <circle cx=\"67\" cy=\"50\" r=\"2.5\" fill=\"#ffdfa0\"/>\r\n   <circle cx=\"33\" cy=\"50\" r=\"2.5\" fill=\"#ffdfa0\"/>\r\n   <circle cx=\"50\" cy=\"64\" r=\"3\" fill=\"#ffdfa0\"/>\r\n  </svg>\r\n </div></div>\r\n</article>\r\n\r\n</body>\r\n</html>\r\n","code":"<!doctype html>\r\n<html data-bento-key=\"code\" data-bento-paused=\"true\" lang=\"en\">\r\n<head>\r\n<meta charset=\"utf-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"><meta name=\"color-scheme\" content=\"dark\">\r\n<title>Intelligent Code Understanding — Animated Bento</title>\r\n<style>\r\n:root{color-scheme:dark;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif}\r\n*{box-sizing:border-box}\r\nhtml,body{margin:0;min-height:100%;background:transparent}body{display:grid;place-items:center;padding:0}\r\n.code-card{position:relative;isolation:isolate;overflow:hidden;width:min(547px,100%);aspect-ratio:547/501;container-type:inline-size;background:radial-gradient(ellipse 42% 36% at 46% 8%,rgba(112,50,117,.18),transparent 85%),linear-gradient(145deg,#0a080d,#09070d 54%,#07070a);border-radius:0 0 25px 25px;border:1px solid rgba(180,124,192,.15);border-top:0;color:#e9e8ed}\r\n.code-card::before{content:\"\";position:absolute;z-index:0;top:-22%;left:20%;width:52%;height:40%;background:radial-gradient(ellipse,rgba(219,138,238,.28),transparent 68%);filter:blur(31px);pointer-events:none;animation:aura 6s ease-in-out infinite alternate}\r\n.code-card::after{content:\"\";position:absolute;z-index:4;top:53%;bottom:18%;left:0;right:0;pointer-events:none;background:linear-gradient(to bottom,transparent 0%,rgba(10,8,13,.64) 38%,#09080c 93%)}\r\n.editor{position:absolute;top:6.6%;left:14.3%;width:94%;height:72%;z-index:1;border:1px solid rgba(167,135,173,.14);border-bottom:0;border-right:0;border-radius:11px 0 0 0;background:linear-gradient(115deg,rgba(25,18,29,.46),rgba(12,10,16,.12));box-shadow:-3px -9px 30px rgba(121,80,132,.09),inset 1px 1px 4px rgba(241,194,255,.04);overflow:hidden}\r\n.editor::before{content:\"\";position:absolute;top:-1px;left:17%;right:0;height:2px;background:linear-gradient(90deg,transparent,#dd9fe8 23%,rgba(255,203,255,.74) 31%,transparent 76%);box-shadow:0 0 14px #e5a0f1,0 0 28px #ae6ebf;animation:lightSweep 8s ease-in-out infinite alternate}\r\n.editor::after{content:\"\";position:absolute;top:-8%;left:20%;width:45%;height:40%;background:radial-gradient(ellipse,rgba(172,101,184,.16),transparent 66%);filter:blur(18px);pointer-events:none}\r\n.traffic{position:absolute;z-index:2;display:flex;gap:8px;align-items:center;top:11px;left:15px}.traffic i{width:8px;height:8px;border-radius:50%;background:#fd6d75;box-shadow:0 0 5px #fd6d7520}.traffic i:nth-child(2){background:#eaca66}.traffic i:nth-child(3){background:#69c26d}\r\n.code-lines{position:absolute;left:0;top:46px;width:100%;padding:0 12px 12px 13px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,\"Liberation Mono\",monospace;font-size:2.28cqw;letter-spacing:-.025em;line-height:2.02;white-space:normal;opacity:.82;animation:codeFloat 11s ease-in-out infinite alternate}\r\n.line{display:flex;min-width:720px;gap:11px;min-height:21px;line-height:1.97;white-space:pre}\r\n.num{flex:0 0 11px;text-align:right;color:rgba(190,171,193,.36);user-select:none}\r\n.src{color:#877786}.comment{color:#655a71}.kw{color:#c987c9}.fn{color:#6b9eeb}.str{color:#b4974e}.obj{color:#c297c8}.punct{color:#9a8a9f}.var{color:#b5a3be}.tag{color:#e06c75}.attr{color:#d19a66}.val{color:#98c379}.tpl-b{color:#e5c07b;font-weight:600}.tpl-ns{color:#c678dd;font-weight:500}.tpl-fn{color:#61afef}.tpl-v{color:#56b6c2}\r\n.cursor{display:inline-block;height:1em;width:1px;background:#deb6e7;vertical-align:-.15em;opacity:0;animation:caret 2s steps(1) infinite}\r\n.code-card .content{position:absolute;z-index:5;left:2.8%;right:3%;bottom:4.7%}\r\nh2{margin:0 0 2.65cqw;font-size:4.65cqw;line-height:1.2;letter-spacing:-.032em;font-weight:610;color:#e8e7e9}\r\np{margin:0;font-size:3.18cqw;line-height:1.46;letter-spacing:-.023em;color:#89868c;font-weight:400}\r\n@keyframes aura{from{opacity:.63;transform:translateX(-5%) scale(.88)}to{opacity:1;transform:translateX(6%) scale(1.13)}}\r\n@keyframes lightSweep{0%{opacity:.55;transform:translateX(-18%)}100%{opacity:1;transform:translateX(18%)}}\r\n@keyframes codeFloat{from{transform:translateY(0)}to{transform:translateY(-7px)}}\r\n@keyframes caret{0%,48%{opacity:0}49%,100%{opacity:1}}\r\n@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important}}\r\n\r\n/* Preserve the editor and light while removing opaque backdrop */\r\nhtml, body {background:transparent!important;}\r\n.code-card {\r\n  aspect-ratio:547 / 324;\r\n  background:transparent;\r\n  border:0;\r\n  border-radius:0;\r\n  box-shadow:none;\r\n}\r\n.code-card::before {top:-35%;height:65%;}\r\n.code-card::after {display:none;}\r\n.editor {\r\n  top:9.5%;\r\n  height:89%;\r\n  background:linear-gradient(115deg,rgba(25,18,29,.37),rgba(12,10,16,.035));\r\n  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 65%,transparent 100%);\r\n  mask-image:linear-gradient(to bottom,#000 0%,#000 65%,transparent 100%);\r\n}\r\n.code-lines {font-size:2.05cqw;line-height:1.68;top:38px;}\r\n.line{min-height:17px;line-height:1.68;}\r\n.num{flex:0 0 19px;}\r\n\r\n</style>\r\n<style id=\"zonely-bento-host-layout\">html{color-scheme:dark}html,body{min-height:0!important;height:auto!important;overflow-x:hidden!important;background:transparent!important}html[data-bento-paused=\"true\"] *,html[data-bento-paused=\"true\"] *::before,html[data-bento-paused=\"true\"] *::after{animation-play-state:paused!important}</style>\r\n<style id=\"zn-inline-card-fit\">html,body{width:100%;height:100vh!important;min-height:0!important;margin:0!important;overflow:hidden!important;background:transparent!important}body{box-sizing:border-box;display:flex!important;align-items:center!important;justify-content:center!important;padding:18px!important}body>.ai-card,body>.bento,body>.deploy-card,body>.card,body>.templates-card,body>.automation,body>.code-card,body>.analytics{flex:0 1 auto;box-sizing:border-box;width:min(100%,calc((100vh - 36px) * 1.6883))!important;max-width:100%!important;min-height:0!important;margin:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:transparent!important;overflow:visible!important}</style></head><body>\r\n<article class=\"code-card\" aria-label=\"Intelligent Code Understanding animated code editor\">\r\n  <div class=\"editor\">\r\n    <div class=\"traffic\" aria-hidden=\"true\"><i></i><i></i><i></i></div>\r\n    <div class=\"code-lines\" aria-label=\"Zonely Tema Şablonu Kod Düzenleyici\">\r\n      <div class=\"line\"><span class=\"num\">1.</span><span class=\"src\"><span class=\"tpl-b\">[%</span> <span class=\"tpl-ns\">server:</span><span class=\"tpl-fn\">prepare_mvcfragmentvars_forms_formscount_appealesc</span> <span class=\"tpl-b\">%]</span></span></div>\r\n      <div class=\"line\"><span class=\"num\">2.</span><span class=\"src\"><span class=\"punct\">&lt;</span><span class=\"tag\">div</span> <span class=\"attr\">class</span><span class=\"punct\">=</span><span class=\"val\">\"d-flex flex-column flex-column-fluid\"</span><span class=\"punct\">&gt;</span></span></div>\r\n      <div class=\"line\"><span class=\"num\">3.</span><span class=\"src\">  <span class=\"punct\">&lt;</span><span class=\"tag\">div</span> <span class=\"attr\">class</span><span class=\"punct\">=</span><span class=\"val\">\"content fs-6 d-flex flex-column-fluid\"</span><span class=\"punct\">&gt;</span></span></div>\r\n      <div class=\"line\"><span class=\"num\">4.</span><span class=\"src\">    <span class=\"punct\">&lt;</span><span class=\"tag\">div</span> <span class=\"attr\">class</span><span class=\"punct\">=</span><span class=\"val\">\"container-xxl\"</span><span class=\"punct\">&gt;</span></span></div>\r\n      <div class=\"line\"><span class=\"num\">5.</span><span class=\"src\">      <span class=\"punct\">&lt;</span><span class=\"tag\">div</span> <span class=\"attr\">class</span><span class=\"punct\">=</span><span class=\"val\">\"d-flex flex-wrap align-items-center justify-content-between gap-3 mb-6\"</span><span class=\"punct\">&gt;</span></span></div>\r\n      <div class=\"line\"><span class=\"num\">6.</span><span class=\"src\">        <span class=\"punct\">&lt;</span><span class=\"tag\">div</span><span class=\"punct\">&gt;</span></span></div>\r\n      <div class=\"line\"><span class=\"num\">7.</span><span class=\"src\">          <span class=\"punct\">&lt;</span><span class=\"tag\">h2</span> <span class=\"attr\">class</span><span class=\"punct\">=</span><span class=\"val\">\"mb-1\"</span><span class=\"punct\">&gt;</span><span class=\"tpl-b\">[%</span> <span class=\"tpl-ns\">text:</span><span class=\"tpl-v\">open_applications</span> <span class=\"tpl-b\">%]</span><span class=\"punct\">&lt;/</span><span class=\"tag\">h2</span><span class=\"punct\">&gt;</span></span></div>\r\n      <div class=\"line\"><span class=\"num\">8.</span><span class=\"src\">        <span class=\"punct\">&lt;/</span><span class=\"tag\">div</span><span class=\"punct\">&gt;</span></span></div>\r\n      <div class=\"line\"><span class=\"num\">9.</span><span class=\"src\">        <span class=\"tpl-b\">[%</span> <span class=\"tpl-ns\">server:</span><span class=\"tpl-fn\">if_formscount</span> <span class=\"tpl-b\">%]</span></span></div>\r\n      <div class=\"line\"><span class=\"num\">10.</span><span class=\"src\">          <span class=\"punct\">&lt;</span><span class=\"tag\">span</span> <span class=\"attr\">class</span><span class=\"punct\">=</span><span class=\"val\">\"badge badge-light-primary\"</span><span class=\"punct\">&gt;</span></span></div>\r\n      <div class=\"line\"><span class=\"num\">11.</span><span class=\"src\">            <span class=\"tpl-b\">[%</span> <span class=\"tpl-ns\">server:</span><span class=\"tpl-v\">value_formscount</span> <span class=\"tpl-b\">%]</span> <span class=\"tpl-b\">[%</span> <span class=\"tpl-ns\">text:</span><span class=\"tpl-v\">active_application_lowercase</span> <span class=\"tpl-b\">%]</span><span class=\"punct\">&lt;/</span><span class=\"tag\">span</span><span class=\"punct\">&gt;</span></span></div>\r\n      <div class=\"line\"><span class=\"num\">12.</span><span class=\"src\">        <span class=\"tpl-b\">[%</span> <span class=\"tpl-ns\">server:</span><span class=\"tpl-fn\">end_formscount</span> <span class=\"tpl-b\">%]</span></span></div>\r\n      <div class=\"line\"><span class=\"num\">13.</span><span class=\"src\">      <span class=\"punct\">&lt;/</span><span class=\"tag\">div</span><span class=\"punct\">&gt;</span></span></div>\r\n      <div class=\"line\"><span class=\"num\">14.</span><span class=\"src\">      <span class=\"tpl-b\">[%</span> <span class=\"tpl-ns\">server:</span><span class=\"tpl-fn\">if_formscount_primary</span> <span class=\"tpl-b\">%]</span></span></div>\r\n      <div class=\"line\"><span class=\"num\">15.</span><span class=\"src\">        <span class=\"punct\">&lt;</span><span class=\"tag\">div</span> <span class=\"attr\">class</span><span class=\"punct\">=</span><span class=\"val\">\"row g-5\"</span><span class=\"punct\">&gt;</span></span></div>\r\n      <div class=\"line\"><span class=\"num\">16.</span><span class=\"src\">          <span class=\"tpl-b\">[%</span> <span class=\"tpl-ns\">server:</span><span class=\"tpl-fn\">loop_forms_as_form</span> <span class=\"tpl-b\">%]</span><span class=\"cursor\"></span></span></div>\r\n    </div>\r\n  </div>\r\n</article>\r\n\r\n</body></html>\r\n","analytics":"<!doctype html>\r\n<html data-bento-key=\"analytics\" data-bento-paused=\"true\" lang=\"en\">\r\n<head>\r\n<meta charset=\"utf-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"><meta name=\"color-scheme\" content=\"dark\">\r\n<title>Advanced Analytics — Animated Bento</title>\r\n<style>\r\n:root{color-scheme:dark;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif}\r\n*{box-sizing:border-box}\r\nhtml,body{margin:0;min-height:100%;background:transparent}body{display:grid;place-items:center;padding:0}\r\n.analytics{position:relative;isolation:isolate;overflow:hidden;width:min(503px,100%);aspect-ratio:503/383;container-type:inline-size;border-radius:0 0 24px 24px;background:radial-gradient(ellipse 34% 48% at 66% 39%,rgba(114,67,53,.19),transparent 84%),#151416;border-bottom:1px solid rgba(255,255,255,.065);color:#e9e8eb}\r\n.analytics::before{content:\"\";position:absolute;left:48%;top:15%;width:33%;height:51%;background:radial-gradient(ellipse,rgba(193,103,61,.20),transparent 68%);filter:blur(24px);animation:breathe 6s ease-in-out infinite alternate;pointer-events:none}\r\n.chart{position:absolute;z-index:1;top:0;left:0;width:100%;height:62%;overflow:visible}\r\n.chart .grid-path{fill:none;stroke:rgba(117,109,113,.27);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}\r\n.chart .subpath{stroke:rgba(127,115,115,.24)}\r\n.chart .amber-path{fill:none;stroke:#bc8067;stroke-width:1.5;opacity:.31;stroke-dasharray:550;stroke-dashoffset:550;animation:drawLine 3.8s 0.2s ease forwards}\r\n.chart .traveler{fill:#fff0c8;filter:drop-shadow(0 0 4px #ffe1a4) drop-shadow(0 0 10px #edbc7f)}\r\n.bars{position:absolute;z-index:2;left:58.7%;top:30.1%;height:27.7%;width:4.05%;border-radius:2px 2px 0 0;background:linear-gradient(180deg,rgba(202,115,77,.78),rgba(121,74,61,.48) 55%,rgba(70,46,42,.06));box-shadow:0 0 24px rgba(195,111,64,.07);animation:barRise 3.5s cubic-bezier(.18,.7,.18,1) both;transform-origin:bottom}\r\n.bars::before{content:\"\";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,215,175,.13),transparent);animation:barShimmer 5s infinite}\r\n.metric{position:absolute;z-index:5;top:26.8%;left:45.9%;width:31%;height:7.1%;border:1px solid rgba(179,155,146,.23);border-radius:99px;display:flex;align-items:center;justify-content:center;gap:1.6cqw;color:#999095;background:linear-gradient(170deg,rgba(35,31,33,.83),rgba(22,21,24,.89));box-shadow:inset 0 1px rgba(255,255,255,.04),0 5px 13px rgba(0,0,0,.18);font-size:2.6cqw;white-space:nowrap;letter-spacing:-.015em;animation:metricBob 6s ease-in-out infinite}\r\n.metric svg{width:3.2cqw;height:3.2cqw;stroke:#b3adae;stroke-width:1.55;fill:none}\r\n.content{position:absolute;z-index:4;left:4.1%;right:4.7%;top:66%}\r\nh2{margin:0 0 3.6cqw;font-size:5.8cqw;line-height:1.16;letter-spacing:-.041em;font-weight:620;color:#e9e8e9}\r\np{margin:0;color:#979398;font-size:3.75cqw;line-height:1.48;font-weight:400;letter-spacing:-.012em}\r\n@keyframes drawLine{to{stroke-dashoffset:0}}\r\n@keyframes breathe{from{transform:scale(.83);opacity:.56}to{transform:scale(1.12);opacity:1}}\r\n@keyframes barRise{0%{transform:scaleY(.06);opacity:.2}100%{transform:scaleY(1);opacity:1}}\r\n@keyframes barShimmer{0%,35%{opacity:.07}65%{opacity:.7}100%{opacity:.07}}\r\n@keyframes metricBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}\r\n@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important}.amber-path{stroke-dashoffset:0}}\r\n\r\n/* Transparent analytics visualization without the marketing copy */\r\nhtml, body {background:transparent!important;}\r\n.analytics {\r\n  aspect-ratio:503 / 260;\r\n  background:transparent;\r\n  border:0;\r\n  border-radius:0;\r\n  box-shadow:none;\r\n}\r\n.analytics::before {top:8%;height:80%;}\r\n.chart {height:91%;}\r\n.bars {top:44%;height:40%;}\r\n.metric {top:39%;height:10.5%;}\r\n\r\n</style>\r\n<style id=\"zonely-bento-host-layout\">html{color-scheme:dark}html,body{min-height:0!important;height:auto!important;overflow-x:hidden!important;background:transparent!important}html[data-bento-paused=\"true\"] *,html[data-bento-paused=\"true\"] *::before,html[data-bento-paused=\"true\"] *::after{animation-play-state:paused!important}</style>\r\n<style id=\"zn-inline-card-fit\">html,body{width:100%;height:100vh!important;min-height:0!important;margin:0!important;overflow:hidden!important;background:transparent!important}body{box-sizing:border-box;display:flex!important;align-items:center!important;justify-content:center!important;padding:18px!important}body>.ai-card,body>.bento,body>.deploy-card,body>.card,body>.templates-card,body>.automation,body>.code-card,body>.analytics{flex:0 1 auto;box-sizing:border-box;width:min(100%,calc((100vh - 36px) * 1.9346))!important;max-width:100%!important;min-height:0!important;margin:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:transparent!important;overflow:visible!important}</style></head><body>\r\n<article class=\"analytics\" aria-label=\"Advanced Analytics animated chart card\">\r\n <svg class=\"chart\" viewBox=\"0 0 503 238\" preserveAspectRatio=\"none\" aria-hidden=\"true\">\r\n  <path class=\"grid-path\" d=\"M0 221 L126 95 H239 L367 0\"/>\r\n  <path class=\"grid-path subpath\" d=\"M107 221 L449 0\"/>\r\n  <path class=\"grid-path\" d=\"M356 221 L490 97 H503 M356 221 H0\"/>\r\n  <path class=\"grid-path subpath\" d=\"M357 221 L503 79\"/>\r\n  <path class=\"amber-path\" d=\"M0 221 L126 95 H239 L367 0\"/>\r\n  <circle class=\"traveler\" r=\"2.6\"><animateMotion dur=\"8s\" repeatCount=\"indefinite\" path=\"M0 221 L126 95 H239 L367 0\"/></circle>\r\n  <circle cx=\"299\" cy=\"132\" r=\"2.4\" fill=\"#ce936f\" opacity=\".25\"><animate attributeName=\"opacity\" values=\".15;.7;.15\" dur=\"4s\" repeatCount=\"indefinite\"/></circle>\r\n </svg>\r\n <div class=\"bars\" aria-hidden=\"true\"></div>\r\n <div class=\"metric\" aria-label=\"16 percent growth compared with last month\">\r\n  <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M3 17l6-6 4 3 7-7M15 7h5v5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\r\n  <span>+16% vs last month</span>\r\n </div>\r\n</article>\r\n\r\n</body></html>\r\n"},"styles":"/* Motion lives on small compositor layers; the illustration beneath stays painted. */\nhtml,body{contain:layout style paint}\nhtml body svg,html body svg *{filter:none!important}\nbody *{backdrop-filter:none!important}\n.ambient,.chip-halo{animation:none!important}\nhtml[data-bento-paused=\"true\"] *,html[data-bento-paused=\"true\"] *::before,html[data-bento-paused=\"true\"] *::after{animation-play-state:paused!important}\n.zn-motion-plane{position:absolute;pointer-events:none;overflow:visible;transform-origin:0 0}\n.zn-route-particle{position:absolute;left:0;top:0;display:block;border-radius:99px;transform-origin:0 0;animation-duration:5s;animation-timing-function:linear;animation-iteration-count:infinite;will-change:transform,opacity;pointer-events:none}\n.zn-svg-layer{position:absolute;inset:0;display:block;pointer-events:none;will-change:transform,opacity}\n.zn-svg-layer img{display:block;width:100%;height:100%;max-width:none}\n.progress-fill{width:64%!important;transform-origin:left center}\n@keyframes progress{from{transform:scaleX(.546875)}to{transform:scaleX(1)}}\n.templates-panel{animation:none!important}\n.zn-panel-glow{position:absolute;z-index:1;left:2.35%;top:6%;width:111%;height:91%;border-radius:5.5cqw;box-shadow:0 0 48px rgba(91,83,148,.22);animation:zn-panel-light 6s ease-in-out infinite alternate;pointer-events:none}\n@keyframes zn-panel-light{from{opacity:.4}to{opacity:1}}\n.check-line,.check-soft,.amber-path{animation:none!important;stroke-dashoffset:0!important}\n.bars{animation:none!important;transform:scaleY(1)}\n.game-logo{will-change:transform,opacity!important}\n@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}\n","runtime":"(() => {\n 'use strict';\n const root=document.documentElement,key=root.dataset.bentoKey,motion=matchMedia('(prefers-reduced-motion:reduce)');\n const abort=new AbortController(),planes=[],sizes=new Map();let visible=false,alive=true,routeId=0;\n const routeStyles=document.createElement('style');document.head.append(routeStyles);\n root.dataset.bentoPaused='true';\n const namespace='http://www.w3.org/2000/svg';\n function plane(svg){\n  let record=planes.find(x=>x.svg===svg);if(record)return record.el;\n  const box=svg.viewBox.baseVal;if(!box.width||!box.height)return null;\n  const el=document.createElement('div');el.className='zn-motion-plane';el.setAttribute('aria-hidden','true');\n  el.style.width=box.width+'px';el.style.height=box.height+'px';svg.after(el);\n  record={svg,el,box:{x:box.x,y:box.y,width:box.width,height:box.height}};planes.push(record);return el;\n }\n function updatePlanes(){\n  // Resize only. Never read layout or update styles from scroll/animation frames.\n  const measures=planes.map(record=>({record,css:getComputedStyle(record.svg)})).map(({record,css})=>({record,width:parseFloat(css.width),height:parseFloat(css.height),left:css.left,top:css.top,z:css.zIndex}));\n  for(const {record,width,height,left,top,z} of measures){\n   if(!width||!height)continue;const {box,svg,el}=record;\n   let sx=width/box.width,sy=height/box.height,x=0,y=0;\n   const aspect=svg.preserveAspectRatio.baseVal;\n   if(aspect.align!==1){sx=sy=aspect.meetOrSlice===2?Math.max(sx,sy):Math.min(sx,sy);const align=aspect.align-2;x=(width-box.width*sx)*(align%3)/2;y=(height-box.height*sy)*Math.floor(align/3)/2;}\n   Object.assign(el.style,{left:left==='auto'?'0px':left,top:top==='auto'?'0px':top,zIndex:z,transform:`translate(${x-box.x*sx}px,${y-box.y*sy}px) scale(${sx},${sy})`});\n  }\n }\n function particle(svg,d,{duration=5,delay=0,color='#f7cdbb',width=15,height=2,easing='linear',opacity=1,fade=false}={}){\n  if(!d)return false;\n  const host=plane(svg);if(!host)return false;\n  const path=document.createElementNS(namespace,'path');path.setAttribute('d',d);let length;try{length=path.getTotalLength();}catch{return false;}if(!length)return false;\n  // Sample the path once. Transform keyframes run on the compositor, with no\n  // SVG paint, motion-path style calculation or JS work on animation frames.\n  const steps=Math.max(8,Math.min(100,Math.ceil(length/7))),name='zn-route-'+(++routeId),frames=[];let lastAngle=0;\n  for(let i=0;i<=steps;i++){\n   const progress=i/steps,at=length*progress,p=path.getPointAtLength(at),a=path.getPointAtLength(Math.max(0,at-.2)),b=path.getPointAtLength(Math.min(length,at+.2));\n   let angle=Math.atan2(b.y-a.y,b.x-a.x)*180/Math.PI;while(angle-lastAngle>180)angle-=360;while(angle-lastAngle< -180)angle+=360;lastAngle=angle;\n   const transform=`translate(${p.x.toFixed(2)}px,${p.y.toFixed(2)}px) rotate(${angle.toFixed(2)}deg) translate(-50%,-50%)`;\n   frames.push(`${(progress*100).toFixed(3)}%{transform:${transform};${fade?'opacity:'+Math.min(1,progress/.16,(1-progress)/.16).toFixed(3)+';':''}}`);\n  }\n  routeStyles.sheet.insertRule(`@keyframes ${name}{${frames.join('')}}`,routeStyles.sheet.cssRules.length);\n  const el=document.createElement('span');el.className='zn-route-particle';\n  const middle=path.getPointAtLength(length/2);\n  Object.assign(el.style,{width:width+'px',height:height+'px',background:color.startsWith('url(')?'#f7cdbb':color,opacity:String(fade?1:opacity),transform:`translate(${middle.x}px,${middle.y}px)`,animationName:name,animationDuration:duration+'s',animationDelay:delay+'s',animationTimingFunction:easing});host.append(el);return true;\n }\n function rasterLayer(target,animation,svg){\n  const host=plane(svg);if(!host)return;\n  const copy=target.cloneNode(true),sourceNodes=[target,...target.querySelectorAll('*')],copyNodes=[copy,...copy.querySelectorAll('*')];\n  // An SVG image is rasterized once; transform/opacity then move its HTML wrapper.\n  for(let i=0;i<sourceNodes.length;i++){\n   const css=getComputedStyle(sourceNodes[i]),dest=copyNodes[i];\n   for(const prop of ['fill','stroke','stroke-width','stroke-linecap','stroke-linejoin','stroke-dasharray','opacity'])dest.style.setProperty(prop,css.getPropertyValue(prop).replace(/url\\([\"']?[^)]*#([^\"')]+)[\"']?\\)/g,'url(#$1)'));\n   dest.style.setProperty('animation','none','important');\n  }\n  copy.style.setProperty('transform','none','important');copy.style.setProperty('opacity','1');\n  const imageSvg=document.createElementNS(namespace,'svg');imageSvg.setAttribute('xmlns',namespace);imageSvg.setAttribute('viewBox',svg.getAttribute('viewBox'));\n  for(const defs of svg.querySelectorAll(':scope > defs'))imageSvg.append(defs.cloneNode(true));imageSvg.append(copy);\n  const layer=document.createElement('div');layer.className='zn-svg-layer';const img=new Image();img.alt='';img.decoding='async';img.src='data:image/svg+xml;charset=utf-8,'+encodeURIComponent(new XMLSerializer().serializeToString(imageSvg));layer.append(img);\n  const css=getComputedStyle(target);Object.assign(layer.style,{animationName:animation.animationName,animationDuration:css.animationDuration,animationDelay:css.animationDelay,animationTimingFunction:css.animationTimingFunction,animationIterationCount:css.animationIterationCount,animationDirection:css.animationDirection,transformOrigin:css.transformOrigin,opacity:css.opacity});\n  host.append(layer);target.remove();\n }\n function optimize(){\n  // Offscreen content-visibility may not instantiate CSSAnimation objects yet.\n  // Read the declared keyframes once so conversion also finishes before first view.\n  const keyframes=new Map();\n  const selectors=new Set(['[style*=\"animation\"]']);\n  function collect(rules) {\n   for (const rule of rules) {\n    if (rule.type === CSSRule.KEYFRAMES_RULE) {\n     keyframes.set(rule.name,[...rule.cssRules].map(frame=>({strokeDashoffset:frame.style.getPropertyValue('stroke-dashoffset'),strokeDasharray:frame.style.getPropertyValue('stroke-dasharray'),transform:frame.style.getPropertyValue('transform'),opacity:frame.style.opacity})));\n    } else {\n     if (rule.selectorText && rule.style?.animationName && rule.style.animationName !== 'none') selectors.add(rule.selectorText);\n     if (rule.cssRules?.length) collect(rule.cssRules);\n    }\n   }\n  }\n  for(const sheet of document.styleSheets){try{collect(sheet.cssRules);}catch{}}\n  // Only query computed animation styles for elements matched by an animation rule.\n  for(const target of document.querySelectorAll([...selectors].join(','))){\n   const svg=target.ownerSVGElement;if(!svg||!target.isConnected)continue;\n   const css=getComputedStyle(target),name=css.animationName,frames=keyframes.get(name)||[];if(name==='none')continue;\n   const animation={animationName:name};\n   if(frames.some(frame=>frame.strokeDashoffset||frame.strokeDasharray)){\n    const timing={iterations:css.animationIterationCount==='infinite'?Infinity:Number(css.animationIterationCount),duration:parseFloat(css.animationDuration)*1000,delay:parseFloat(css.animationDelay)*1000};\n    if(timing.iterations!==Infinity){target.style.setProperty('animation','none','important');target.style.strokeDashoffset='0';continue;}\n    if(particle(svg,target.getAttribute('d'),{duration:Number(timing.duration)/1000,delay:timing.delay/1000,color:css.stroke,width:Math.min(24,parseFloat(css.strokeDasharray)||15),height:parseFloat(css.strokeWidth)||2,easing:css.animationTimingFunction,opacity:parseFloat(css.opacity),fade:frames.some(frame=>frame.opacity)}))target.remove();\n   }else if(frames.some(frame=>frame.transform||frame.opacity))rasterLayer(target,animation,svg);\n  }\n  for(const smil of [...document.querySelectorAll('animateMotion')]){\n   const target=smil.parentElement,svg=target.ownerSVGElement,css=getComputedStyle(target),radius=Number(target.getAttribute('r'))||2;\n   if(particle(svg,smil.getAttribute('path'),{duration:parseFloat(smil.getAttribute('dur'))||5,delay:parseFloat(smil.getAttribute('begin'))||0,color:css.fill,width:radius*2,height:radius*2}))target.remove();\n  }\n  // Tiny twinkles get their own raster layer too, instead of repainting the SVG.\n  for(const smil of [...document.querySelectorAll('animate[attributeName=\"opacity\"]')]){\n   const target=smil.parentElement,svg=target.ownerSVGElement,css=getComputedStyle(target),box=target.getBBox(),host=plane(svg);if(!host)continue;\n   const dot=document.createElement('span');dot.className='zn-route-particle';Object.assign(dot.style,{left:box.x+'px',top:box.y+'px',width:box.width+'px',height:box.height+'px',background:css.fill,animationName:'zn-panel-light',animationDirection:'alternate',animationDuration:(parseFloat(smil.getAttribute('dur'))||4)+'s',willChange:'opacity'});host.append(dot);target.remove();\n  }\n  if(document.querySelector('.templates-panel')&&!document.querySelector('.zn-panel-glow')){const glow=document.createElement('div');glow.className='zn-panel-glow';document.querySelector('.templates-panel').before(glow);}\n  updatePlanes();root.dataset.bentoOptimized='true';\n }\n function sync(){const playing=visible&&!document.hidden&&!motion.matches;root.dataset.bentoPaused=String(!playing);}\n function size(){const height=Math.ceil(document.body.getBoundingClientRect().height);if(sizes.get('height')===height)return;sizes.set('height',height);parent.postMessage({type:'zonely-bento-size',key,height},window.origin);}\n const resize=new ResizeObserver(()=>{updatePlanes();size();});\n function dispose(){if(!alive)return;alive=false;visible=false;sync();abort.abort();resize.disconnect();}\n addEventListener('message',event=>{if(event.source!==parent||event.origin!==window.origin||event.data?.type!=='zonely-bento-active')return;visible=!!event.data.active;sync();},{signal:abort.signal});\n document.addEventListener('visibilitychange',sync,{signal:abort.signal});motion.addEventListener('change',()=>{if(!motion.matches){optimize();for(const {svg} of planes)resize.observe(svg);}sync();},{signal:abort.signal});addEventListener('pagehide',dispose,{once:true,signal:abort.signal});\n addEventListener('error',event=>{const message=event.message||(event.target?.src?'Asset failed':'');if(message)parent.postMessage({type:'zonely-bento-error',key,message},window.origin);},{capture:true,signal:abort.signal});\n optimize();resize.observe(document.body);for(const {svg} of planes)resize.observe(svg);size();sync();\n parent.postMessage({type:'zonely-bento-ready',key},window.origin);\n})();\n"}