/* Zetan Teklif — tasarım sistemi (Tailwind CDN dışı statik stiller) */

html{overflow-x:hidden}
body{font-family:'Outfit',system-ui,sans-serif;color:#555;background:#f2f3f5;overflow-x:hidden;max-width:100vw}
html.dark body{background:#1f2128;color:#d4d4d8}
img,svg,canvas,iframe{max-width:100%}
*{min-width:0}

/* Marka wordmark */
.brand-wm{font-family:'Sora',sans-serif;font-weight:800;letter-spacing:-.02em;line-height:1;display:inline-block}
.brand-wm .d{color:#7c3aed}

/* Yüzeyler */
.glass{background:rgba(255,255,255,.65);backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%);border:1px solid rgba(124,58,237,.08)}
html.dark .glass{background:rgba(40,42,49,.65);border-color:rgba(255,255,255,.05)}
.glass-solid{background:rgba(255,255,255,.88);backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%);border:1px solid rgba(124,58,237,.1)}
html.dark .glass-solid{background:rgba(40,42,49,.85);border-color:rgba(255,255,255,.06)}
.glass-card{background:rgba(255,255,255,.85);backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(24px) saturate(160%);border:1px solid rgba(124,58,237,.08)}
html.dark .glass-card{background:rgba(40,42,49,.8);border-color:rgba(255,255,255,.06)}

/* Mesh blob zemin */
.backdrop-mesh{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.backdrop-mesh::before,.backdrop-mesh::after,.backdrop-mesh .b3{content:'';position:absolute;border-radius:50%;filter:blur(100px);opacity:.35}
.backdrop-mesh::before{width:520px;height:520px;background:radial-gradient(circle,rgb(124,58,237) 0%,transparent 65%);top:-120px;left:-100px;animation:mesh 28s ease-in-out infinite}
.backdrop-mesh::after{width:580px;height:580px;background:radial-gradient(circle,rgb(159,88,235) 0%,transparent 65%);bottom:-180px;right:-120px;animation:mesh 34s ease-in-out infinite reverse;opacity:.25}
.backdrop-mesh .b3{width:460px;height:460px;background:radial-gradient(circle,rgb(139,92,246) 0%,transparent 65%);top:50%;left:30%;animation:mesh 32s ease-in-out infinite;opacity:.12}
html.dark .backdrop-mesh::before{opacity:.18}
html.dark .backdrop-mesh::after{opacity:.12}
html.dark .backdrop-mesh .b3{opacity:.07}
@keyframes mesh{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(30px,-40px) scale(1.06)}66%{transform:translate(-25px,25px) scale(.94)}}

/* lift */
.lift{transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .3s}
.lift:hover{transform:translateY(-2px);box-shadow:0 8px 32px rgba(0,0,0,.08)}

/* Butonlar */
.btn-primary{background:linear-gradient(135deg,rgb(124,58,237) 0%,rgb(91,33,182) 100%);color:#fff;box-shadow:rgba(124,58,237,.35) 0 10px 30px -8px,inset 0 1px 0 rgba(255,255,255,.18)}
.btn-primary:hover{box-shadow:rgba(124,58,237,.45) 0 16px 40px -8px,inset 0 1px 0 rgba(255,255,255,.18)}
.btn-ghost{background:rgba(255,255,255,.85);color:rgb(50,49,58);border:1px solid rgba(124,58,237,.18)}
html.dark .btn-ghost{background:rgba(40,42,49,.85);color:#fff;border-color:rgba(255,255,255,.08)}
.btn-ghost:hover{border-color:rgba(124,58,237,.4)}
.btn-outline{background:transparent;color:rgb(124,58,237);border:1.5px solid rgba(124,58,237,.4);transition:all .25s}
.btn-outline:hover{background:rgba(124,58,237,.08);border-color:rgb(124,58,237)}
html.dark .btn-outline{color:rgb(134,239,172)}

/* Float-label input */
.field-wrap{position:relative;border-radius:1rem;transition:border-color .2s,box-shadow .2s,background .2s;border:1px solid rgba(124,58,237,.14);background:rgba(255,255,255,.7)}
.field-wrap:focus-within{border-color:rgba(124,58,237,.7);box-shadow:0 0 0 4px rgba(124,58,237,.12);background:rgba(255,255,255,.95)}
html.dark .field-wrap{background:rgba(40,43,55,.55);border-color:rgba(255,255,255,.06)}
html.dark .field-wrap:focus-within{background:rgba(40,43,55,.8);border-color:rgba(124,58,237,.65)}
.field-wrap.invalid{border-color:rgba(220,60,60,.5);box-shadow:0 0 0 4px rgba(220,60,60,.12);animation:shake .4s ease-in-out}
.float-input{width:100%;background:transparent;outline:none;border:0;padding:22px 14px 8px 44px;font-size:15px;color:#1f2128;font-family:inherit}
html.dark .float-input{color:#fff}
.float-input + label{position:absolute;left:44px;top:50%;transform:translateY(-50%);pointer-events:none;font-size:14px;color:rgb(102,112,120);transition:all .2s cubic-bezier(.4,0,.2,1)}
html.dark .float-input + label{color:rgb(178,189,200)}
.float-input:focus + label,.float-input:not(:placeholder-shown) + label{top:12px;transform:translateY(0);font-size:11px;color:rgb(124,58,237);font-weight:600}
.field-wrap > .ic{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:rgb(102,112,120);pointer-events:none}
/* ikonsuz (label sol 14) */
.field-wrap.no-ic .float-input{padding-left:14px}
.field-wrap.no-ic .float-input + label{left:14px}

/* Sade input/select/textarea (form alanları) */
.zinput,.zselect,textarea.zinput{width:100%;padding:11px 14px;border-radius:12px;border:1px solid rgba(124,58,237,.16);background:rgba(255,255,255,.85);font-size:14.5px;font-family:inherit;color:#1f2128;outline:none;transition:.18s}
.zinput:focus,.zselect:focus,textarea.zinput:focus{border-color:rgba(124,58,237,.7);box-shadow:0 0 0 4px rgba(124,58,237,.12);background:#fff}
html.dark .zinput,html.dark .zselect,html.dark textarea.zinput{background:rgba(40,43,55,.6);border-color:rgba(255,255,255,.07);color:#fff}
.zlbl{display:block;font-size:13px;font-weight:600;color:#3a4152;margin-bottom:6px}
html.dark .zlbl{color:#c7cad2}

/* Checkbox */
.check-box{width:18px;height:18px;border-radius:5px;border:1.5px solid rgba(124,58,237,.4);background:#fff;display:grid;place-items:center;cursor:pointer;transition:all .15s;flex-shrink:0}
html.dark .check-box{background:rgba(40,43,55,.8)}
.check-box svg{opacity:0;transition:opacity .15s}
input[type=checkbox]:checked + .check-box{background:rgb(124,58,237);border-color:rgb(124,58,237)}
input[type=checkbox]:checked + .check-box svg{opacity:1}

/* Toggle switch */
.toggle{position:relative;display:inline-block;width:44px;height:26px;flex-shrink:0}
.toggle input{opacity:0;width:0;height:0}
.toggle .slider{position:absolute;cursor:pointer;inset:0;background:rgba(102,112,120,.3);border-radius:999px;transition:background .25s}
.toggle .slider::before{content:'';position:absolute;height:20px;width:20px;left:3px;top:3px;background:#fff;border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
.toggle input:checked + .slider{background:linear-gradient(135deg,rgb(124,58,237),rgb(91,33,182))}
.toggle input:checked + .slider::before{transform:translateX(18px)}
html.dark .toggle .slider{background:rgba(178,189,200,.25)}

/* Sidebar nav-item */
.nav-item{position:relative;transition:padding .3s ease,color .2s ease}
.nav-item::after{content:'';position:absolute;left:.5rem;top:50%;transform:translateY(-50%);width:6px;height:2px;background:currentColor;border-radius:2px;opacity:.4;transition:width .3s cubic-bezier(.34,1.56,.64,1),opacity .2s,background .2s}
.nav-item:hover::after{width:14px;opacity:1}
.nav-item:hover{padding-left:2rem}
.nav-item.active{color:rgb(124,58,237);padding-left:2rem}
.nav-item.active::after{width:14px;opacity:1;background:linear-gradient(90deg,rgb(124,58,237),rgb(91,33,182))}
/* İkonlu menü modu — dash marker'ı ve padding kaymasını kapat */
.nav-ic::after{display:none}
.nav-ic{padding-left:.75rem}
.nav-ic:hover,.nav-ic.active{padding-left:.75rem}
.nav-ic.active{background:rgba(124,58,237,.1);font-weight:600}

/* Gradient sayı */
.stat-num{background:linear-gradient(135deg,rgb(124,58,237) 0%,rgb(91,33,182) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* hand-accent vurgu */
.hand-accent{background-image:linear-gradient(transparent 65%,rgba(124,58,237,.3) 65%);background-size:100% 100%}
.tag-pill{display:inline-flex;align-items:center;gap:8px;padding:7px 14px 7px 10px;border-radius:999px;color:rgb(124,58,237);font-size:13px;font-weight:600;border:1px solid rgba(124,58,237,.3);background:linear-gradient(rgba(255,255,255,.95),rgba(255,255,255,.95)) padding-box,linear-gradient(135deg,rgba(124,58,237,.6),rgba(159,88,235,.5)) border-box}
.feat-check{width:18px;height:18px;border-radius:50%;background:rgba(139,92,246,.15);color:rgb(139,92,246);display:grid;place-items:center;flex-shrink:0;margin-top:2px}

/* Pricing */
.plan-card{transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s}
.plan-card:hover{transform:translateY(-4px)}
.pro-card{position:relative;background:linear-gradient(rgba(255,255,255,.96),rgba(255,255,255,.96)) padding-box,linear-gradient(135deg,rgb(124,58,237) 0%,rgb(159,88,235) 50%,rgb(91,33,182) 100%) border-box;border:2px solid transparent;box-shadow:0 20px 60px -10px rgba(124,58,237,.22)}
html.dark .pro-card{background:linear-gradient(rgba(40,42,49,.96),rgba(40,42,49,.96)) padding-box,linear-gradient(135deg,rgb(124,58,237) 0%,rgb(159,88,235) 50%,rgb(91,33,182) 100%) border-box;box-shadow:0 20px 60px -10px rgba(124,58,237,.35)}
.plan-card.pro-card:hover{transform:translateY(-6px) scale(1.01)}
.recommended-badge{background:linear-gradient(135deg,rgb(124,58,237) 0%,rgb(91,33,182) 100%);color:#fff;box-shadow:0 8px 22px -6px rgba(124,58,237,.5)}

/* nav-bar (landing) */
.nav-bar{transition:background .35s,backdrop-filter .35s,border-color .35s,box-shadow .35s;background:transparent;border-bottom:1px solid transparent}
.nav-bar.scrolled{background:rgba(255,255,255,.72);backdrop-filter:blur(20px) saturate(160%);border-bottom-color:rgba(124,58,237,.1);box-shadow:0 1px 0 rgba(124,58,237,.04),0 10px 30px -18px rgba(124,58,237,.18)}
html.dark .nav-bar.scrolled{background:rgba(31,33,40,.72);border-bottom-color:rgba(255,255,255,.06)}
.nav-link{position:relative;padding:6px 2px;color:rgb(102,112,120);font-weight:500;transition:color .2s}
.nav-link::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,rgb(124,58,237),rgb(159,88,235));transform:scaleX(0);transform-origin:left;transition:transform .25s cubic-bezier(.16,1,.3,1);border-radius:2px}
.nav-link:hover::after{transform:scaleX(1)}
.logo-dark{transition:.2s}
html.dark .logo-dark{filter:brightness(1.6)}

/* Trust + beta */
.trust-item{display:inline-flex;align-items:center;gap:5px;color:rgb(102,112,120);font-size:13px;font-weight:500}
.trust-item .check{width:16px;height:16px;border-radius:50%;background:rgba(139,92,246,.15);color:rgb(139,92,246);display:grid;place-items:center;flex-shrink:0}
.trust-item .check svg{width:10px;height:10px;display:block}
.beta-pill{background:linear-gradient(135deg,rgba(124,58,237,.16),rgba(159,88,235,.16));color:rgb(124,58,237);border:1px solid rgba(124,58,237,.22);font-size:10px;font-weight:700;letter-spacing:.08em;padding:2px 7px;border-radius:999px}

/* scrollbar + drawer + deco */
.app-scroll::-webkit-scrollbar{width:6px;height:6px}
.app-scroll::-webkit-scrollbar-thumb{background-color:rgba(50,49,58,.25);border-radius:20px}
.app-scroll::-webkit-scrollbar-track{background-color:transparent}
/* App shell — Tailwind yüklenmese/gecikSE de düzgün çalışsın (sidebar her zaman açık görünmesin) */
.app-shell{display:flex;height:100vh;overflow:hidden}
#left-sidebar{width:256px;flex-shrink:0;display:flex;flex-direction:column;transition:transform .35s cubic-bezier(.16,1,.3,1)}
.app-main{flex:1;display:flex;flex-direction:column;min-width:0;position:relative}
@media(max-width:1023px){
  #left-sidebar{position:fixed!important;left:0;top:0;bottom:0;width:284px;max-width:84vw;z-index:55;transform:translateX(-100%)!important;box-shadow:8px 0 32px rgba(0,0,0,.12)}
  #left-sidebar.open{transform:translateX(0)!important}
}
@media(min-width:1024px){ #open-left,#left-backdrop{display:none!important} }
.drawer-backdrop{position:fixed;inset:0;background:rgba(20,22,30,.45);backdrop-filter:blur(4px);z-index:50;opacity:0;pointer-events:none;transition:opacity .3s}
.drawer-backdrop.show{opacity:1;pointer-events:auto}
.deco-ring{position:absolute;border:1.5px dashed rgba(124,58,237,.25);border-radius:50%;animation:float 8s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-12px) rotate(2deg)}}
@keyframes slideUp{0%{transform:translateY(16px);opacity:0}100%{transform:translateY(0);opacity:1}}
@keyframes shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.animate-slide-up{animation:slideUp .5s cubic-bezier(.16,1,.3,1) both}
.spinner{border:2.5px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}