/* ===== Temalar: tüm renkler değişkenlerden gelir ===== */
:root,[data-theme=dark]{--bg:#090913;--bg2:#101022;--card:#12122a;--card2:#171736;--line:#2a2a52;--text:#eceaff;--mut:#a3a1cc;--acc:#9a6eff;--acc2:#4fd8ff;--c3:#ff7ac6;--c4:#ffcf5c;--ok:#5be39a;--err:#ff6b7d;--warn:#ffcf5c;--input:#0b0b1e;--nav:rgba(9,9,19,.78);--glow1:#2a1a66;--glow2:#0b3a55;--btn-text:#fff;--shadow:0 10px 40px rgba(0,0,0,.35)}
[data-theme=light]{--bg:#f5f6fc;--bg2:#eceefa;--card:#fff;--card2:#f3f4ff;--line:#dcdff2;--text:#1a1b3a;--mut:#5d6089;--acc:#6b4bff;--acc2:#0ea5d9;--c3:#e0399b;--c4:#d98a00;--ok:#13885a;--err:#cf2b44;--warn:#a96d00;--input:#fff;--nav:rgba(255,255,255,.85);--glow1:#d9d0ff;--glow2:#cdeeff;--btn-text:#fff;--shadow:0 10px 30px rgba(60,70,140,.12)}
[data-theme=ocean]{--bg:#05141f;--bg2:#08202f;--card:#0a2536;--card2:#0e2f45;--line:#1b4560;--text:#e4f6ff;--mut:#8fbad1;--acc:#27c4ff;--acc2:#38f0c4;--c3:#7aa7ff;--c4:#ffd36b;--ok:#4ff0a8;--err:#ff7a8a;--warn:#ffd36b;--input:#061b29;--nav:rgba(5,20,31,.8);--glow1:#0a4a6e;--glow2:#07503f;--btn-text:#03202e;--shadow:0 10px 40px rgba(0,0,0,.4)}
[data-theme=forest]{--bg:#0a140e;--bg2:#102019;--card:#12261b;--card2:#183324;--line:#2a4d38;--text:#e9f8ee;--mut:#97bfa5;--acc:#5be39a;--acc2:#d6f55a;--c3:#6fd3c0;--c4:#ffc857;--ok:#5be39a;--err:#ff7b6b;--warn:#ffc857;--input:#0a1a11;--nav:rgba(10,20,14,.8);--glow1:#124d2d;--glow2:#3b4a0c;--btn-text:#06210f;--shadow:0 10px 40px rgba(0,0,0,.4)}
[data-theme=sunset]{--bg:#17090f;--bg2:#221017;--card:#2a1019;--card2:#35151f;--line:#5a2a3a;--text:#fff0ea;--mut:#d1a3ac;--acc:#ff7a59;--acc2:#ffc14d;--c3:#ff5fa2;--c4:#ffd98a;--ok:#6be3a0;--err:#ff6b7d;--warn:#ffc14d;--input:#1c0b12;--nav:rgba(23,9,15,.8);--glow1:#6e1d35;--glow2:#6a3a0a;--btn-text:#2a0d07;--shadow:0 10px 40px rgba(0,0,0,.4)}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,system-ui,"Segoe UI",Roboto,sans-serif;background:radial-gradient(1200px 600px at 15% -10%,var(--glow1) 0,transparent 60%),radial-gradient(900px 500px at 95% 0,var(--glow2) 0,transparent 55%),var(--bg);background-attachment:fixed;color:var(--text);line-height:1.6;min-height:100vh;display:flex;flex-direction:column;transition:background-color .25s,color .25s}
a{color:var(--acc2);text-decoration:none}a:hover{text-decoration:underline}
.wrap{width:min(1100px,92vw);margin:0 auto}
.grad{background:linear-gradient(90deg,var(--acc),var(--acc2));-webkit-background-clip:text;background-clip:text;color:transparent}
/* nav */
nav.top{position:sticky;top:0;z-index:30;backdrop-filter:blur(14px);background:var(--nav);border-bottom:1px solid var(--line)}
nav.top .wrap{display:flex;align-items:center;gap:14px;height:64px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.15rem;color:var(--text)}.brand:hover{text-decoration:none}
.brand img{width:34px;height:34px;border-radius:9px}
.brand span{background:linear-gradient(90deg,var(--acc),var(--acc2));-webkit-background-clip:text;background-clip:text;color:transparent}
.links{display:flex;gap:4px;margin-left:auto;align-items:center}
.links form{display:inline}
.links a,.links button.lnk{color:var(--text);padding:8px 12px;border-radius:10px;font-size:.95rem;background:none;border:0;cursor:pointer;font-family:inherit}
.links a:hover,.links button.lnk:hover{background:var(--card2);text-decoration:none}
.tools{display:flex;gap:6px;align-items:center;margin-left:8px}
.tools select{width:auto;padding:7px 10px;border-radius:10px;font-size:.88rem;cursor:pointer}
.burger{display:none;margin-left:auto;background:var(--card2);border:1px solid var(--line);color:var(--text);border-radius:10px;padding:7px 12px;font-size:1.1rem;cursor:pointer}
/* buttons */
.btn,.links a.btn{display:inline-block;border:0;border-radius:12px;padding:11px 20px;font-weight:700;cursor:pointer;font-size:.97rem;font-family:inherit;color:var(--btn-text);background:linear-gradient(90deg,var(--acc),var(--acc2));transition:transform .15s,filter .15s,box-shadow .15s;box-shadow:0 6px 20px -8px var(--acc)}
.btn:hover{transform:translateY(-1px);filter:brightness(1.08);text-decoration:none}
.btn.ghost,.links a.btn.ghost{background:var(--card2);border:1px solid var(--line);color:var(--text);box-shadow:none}
.btn.danger{background:var(--err);color:#fff;box-shadow:none}
.btn.small,.links a.btn.small{padding:6px 13px;font-size:.85rem;border-radius:9px}
.btn.block{width:100%;text-align:center}
main{flex:1;padding:34px 0 60px}
/* hero */
.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center;padding:36px 0 18px}
.pill{display:inline-block;padding:5px 14px;border-radius:99px;font-size:.82rem;font-weight:700;background:var(--card2);border:1px solid var(--line);color:var(--acc2);margin-bottom:16px}
.hero h1{font-size:clamp(2.2rem,5vw,3.7rem);line-height:1.08;margin:0 0 14px}
.hero h1 em{font-style:normal}
.hero p{color:var(--mut);font-size:1.1rem;max-width:560px}
.hero .cta{display:flex;gap:12px;margin-top:22px;flex-wrap:wrap}
.hero .logo{display:flex;justify-content:center}
.hero .logo img{width:min(300px,70vw);border-radius:36px;box-shadow:0 0 90px color-mix(in srgb,var(--acc) 45%,transparent),0 0 0 1px var(--line);animation:float 6s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-10px)}}
@media(prefers-reduced-motion:reduce){.hero .logo img{animation:none}html{scroll-behavior:auto}}
h2.sec{font-size:1.65rem;margin:50px 0 16px}h2.sec small{display:block;font-size:.9rem;color:var(--mut);font-weight:400;margin-top:4px}
/* cards */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.card{background:linear-gradient(180deg,var(--card2),var(--card));border:1px solid var(--line);border-radius:16px;padding:20px;box-shadow:var(--shadow);transition:transform .2s,border-color .2s}
.grid .card:hover{transform:translateY(-3px);border-color:var(--acc)}
.card h3{margin:0 0 6px;font-size:1.05rem}.card p{margin:0 0 6px;color:var(--mut);font-size:.95rem}
.ico{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:12px;font-size:1.3rem;margin-bottom:10px;background:color-mix(in srgb,var(--ac,var(--acc)) 18%,transparent);border:1px solid color-mix(in srgb,var(--ac,var(--acc)) 45%,transparent)}
.a1{--ac:var(--acc)}.a2{--ac:var(--acc2)}.a3{--ac:var(--c3)}.a4{--ac:var(--c4)}
label.card{cursor:pointer;display:block;margin:0;font-weight:400}
label.card input[type=radio]{margin-bottom:8px;accent-color:var(--acc)}
.step-n{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;background:linear-gradient(90deg,var(--acc),var(--acc2));color:var(--btn-text);font-weight:800;margin-bottom:10px}
/* tables */
table{width:100%;border-collapse:collapse;font-size:.93rem}
th,td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{color:var(--mut);font-weight:600;font-size:.8rem;text-transform:uppercase;letter-spacing:.04em}
tr:last-child td{border-bottom:0}
.tablebox{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:var(--card)}
.sysreq td:first-child{color:var(--mut);width:34%}
/* forms */
form.box{max-width:460px;margin:20px auto;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:28px;box-shadow:var(--shadow)}
form.box h2{margin-top:0}
form.box.wide{max-width:none;margin:16px 0}
label{display:block;margin:14px 0 6px;font-weight:600;font-size:.92rem}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=file],select,textarea{width:100%;padding:11px 13px;border-radius:11px;border:1px solid var(--line);background:var(--input);color:var(--text);font-family:inherit;font-size:.97rem}
input:focus,select:focus,textarea:focus,button:focus-visible,a:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-color:transparent}
textarea{min-height:90px}.check{display:flex;gap:9px;align-items:center;margin-top:14px;font-size:.92rem;color:var(--mut)}
.check input{width:auto;accent-color:var(--acc)}
.pw{position:relative}.pw input{padding-right:78px}
.pw button{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:var(--card2);border:1px solid var(--line);color:var(--mut);border-radius:8px;font-size:.78rem;padding:5px 9px;cursor:pointer}
.code-in{text-align:center;font-size:1.6rem!important;letter-spacing:.5em;font-family:ui-monospace,Consolas,monospace}
.hint{color:var(--mut);font-size:.85rem;margin-top:5px}
code{background:var(--input);border:1px solid var(--line);padding:1px 6px;border-radius:6px;font-size:.85em}
.flash{padding:12px 16px;border-radius:12px;margin:12px 0;border:1px solid;font-size:.95rem}
.flash.ok{background:color-mix(in srgb,var(--ok) 12%,transparent);border-color:var(--ok);color:var(--ok)}
.flash.error{background:color-mix(in srgb,var(--err) 12%,transparent);border-color:var(--err);color:var(--err)}
.flash.warn{background:color-mix(in srgb,var(--warn) 12%,transparent);border-color:var(--warn);color:var(--warn)}
.banner{background:linear-gradient(90deg,color-mix(in srgb,var(--acc) 22%,transparent),color-mix(in srgb,var(--acc2) 22%,transparent));border:1px solid var(--line);border-radius:12px;padding:12px 16px;margin-bottom:18px}
.keybox{font-family:ui-monospace,Consolas,monospace;font-size:.82rem;word-break:break-all;background:var(--input);border:1px dashed var(--line);border-radius:10px;padding:10px 12px;margin:8px 0}
.badge{display:inline-block;padding:2px 9px;border-radius:99px;font-size:.78rem;font-weight:700;background:var(--card2);border:1px solid var(--line)}
.badge.ok{color:var(--ok);border-color:var(--ok)}.badge.err{color:var(--err);border-color:var(--err)}.badge.warn{color:var(--warn);border-color:var(--warn)}
/* admin */
.adminnav{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:22px}
.adminnav a{padding:8px 14px;border-radius:10px;background:var(--card);border:1px solid var(--line);color:var(--text);font-size:.92rem}
.adminnav a:hover{background:var(--card2);text-decoration:none}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin-bottom:24px}
.stat b{display:block;font-size:2rem}
.stats .card:nth-child(1) b{color:var(--acc)}.stats .card:nth-child(2) b{color:var(--acc2)}.stats .card:nth-child(3) b{color:var(--c3)}.stats .card:nth-child(4) b{color:var(--c4)}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.row form{display:inline}
.inline-input{width:auto;min-width:0}
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
/* faq */
details.faq{background:var(--card);border:1px solid var(--line);border-radius:14px;margin:10px 0;padding:0 18px}
details.faq summary{cursor:pointer;padding:15px 0;font-weight:700;list-style:none;display:flex;justify-content:space-between;gap:12px}
details.faq summary::after{content:"+";color:var(--acc);font-size:1.3rem;line-height:1}
details.faq[open] summary::after{content:"–"}
details.faq p{margin:0 0 16px;color:var(--mut)}
/* footer */
footer{border-top:1px solid var(--line);padding:26px 0;color:var(--mut);font-size:.88rem}
footer .wrap{display:flex;gap:16px;flex-wrap:wrap;justify-content:space-between;align-items:center}
footer nav a{margin-right:14px;color:var(--mut)}
.err-page{text-align:center;padding:70px 0}.err-page h1{font-size:4.5rem;margin:0}
/* AI asistan */
.ai-fab{position:fixed;right:20px;bottom:20px;z-index:50;width:56px;height:56px;border-radius:50%;border:0;cursor:pointer;font-size:1.5rem;color:var(--btn-text);background:linear-gradient(135deg,var(--acc),var(--acc2));box-shadow:0 10px 30px -6px var(--acc)}
.ai-panel{position:fixed;right:20px;bottom:88px;z-index:50;width:min(380px,calc(100vw - 32px));height:min(520px,calc(100vh - 120px));display:none;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);overflow:hidden}
.ai-panel.open{display:flex}
.ai-head{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:linear-gradient(90deg,var(--acc),var(--acc2));color:var(--btn-text);font-weight:800}
.ai-head button{background:none;border:0;color:inherit;font-size:1.2rem;cursor:pointer}
.ai-log{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px}
.ai-msg{max-width:88%;padding:9px 13px;border-radius:14px;font-size:.92rem;white-space:pre-wrap;word-break:break-word}
.ai-msg.bot{background:var(--card2);border:1px solid var(--line);align-self:flex-start}
.ai-msg.me{background:linear-gradient(90deg,var(--acc),var(--acc2));color:var(--btn-text);align-self:flex-end}
.ai-form{display:flex;gap:8px;padding:10px;border-top:1px solid var(--line)}
.ai-form input{flex:1}
@media(max-width:860px){
 .burger{display:block}
 .links{display:none;position:absolute;left:0;right:0;top:64px;flex-direction:column;align-items:stretch;background:var(--bg2);border-bottom:1px solid var(--line);padding:12px 4vw;margin:0}
 .links.open{display:flex}.links form button{width:100%;text-align:left}
 .tools{margin:6px 0 0}
 .hero{grid-template-columns:1fr;text-align:center}.hero p{margin:0 auto}.hero .cta{justify-content:center}.two{grid-template-columns:1fr}
}

/* ===== Animasyonlar ve gelişmiş görünüm ===== */
#bg-canvas{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;opacity:.55}
body::before{content:"";position:fixed;inset:0;z-index:-2;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:56px 56px;opacity:.18;mask-image:radial-gradient(ellipse at 50% 0,#000 0,transparent 70%);-webkit-mask-image:radial-gradient(ellipse at 50% 0,#000 0,transparent 70%)}
main{animation:pagein .55s cubic-bezier(.2,.7,.2,1) both}
@keyframes pagein{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
nav.top{transition:height .25s,box-shadow .25s}nav.top.scrolled{box-shadow:0 8px 30px rgba(0,0,0,.25)}
nav.top.scrolled .wrap{height:54px}nav.top .wrap{transition:height .25s}
.links a:not(.btn){position:relative}
.links a:not(.btn)::after{content:"";position:absolute;left:12px;right:12px;bottom:4px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--acc),var(--acc2));transform:scaleX(0);transform-origin:left;transition:transform .25s}
.links a:not(.btn):hover::after{transform:scaleX(1)}
.grad{background-size:200% auto;animation:shine 6s linear infinite}
@keyframes shine{to{background-position:200% center}}
.btn{position:relative;overflow:hidden}
.btn::after{content:"";position:absolute;top:0;left:-70%;width:50%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);transition:left .6s}
.btn:hover::after{left:130%}
.btn:active{transform:translateY(1px) scale(.98)}
.pill{animation:pulse 3s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--acc2) 18%,transparent)}}
.hero .logo{position:relative}
.hero .logo::before,.hero .logo::after{content:"";position:absolute;border-radius:50%;border:1px solid var(--line);inset:-24px;animation:spin 18s linear infinite}
.hero .logo::after{inset:-52px;border-style:dashed;animation-duration:30s;animation-direction:reverse;opacity:.6}
@keyframes spin{to{transform:rotate(360deg)}}
.hero .logo img{position:relative;z-index:1}
/* kaydırınca belirme */
.rv{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}.d4{transition-delay:.32s}
/* kart ışığı (fareyi izler) */
.card{position:relative;overflow:hidden}
.card::before{content:"";position:absolute;inset:0;background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%),color-mix(in srgb,var(--acc) 22%,transparent),transparent 60%);opacity:0;transition:opacity .3s;pointer-events:none}
.card:hover::before{opacity:1}
/* istatistik şeridi */
.strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin:34px 0 6px}
.strip div{text-align:center;padding:18px 10px;border:1px solid var(--line);border-radius:16px;background:var(--card)}
.strip b{display:block;font-size:1.7rem}.strip span{color:var(--mut);font-size:.85rem}
/* adım çizgisi */
.steps .card{padding-top:22px}
.steps .step-n{animation:pulse 3s ease-in-out infinite}
/* planlar */
.plan{display:flex;flex-direction:column}
.plan .price{font-size:1.5rem;font-weight:800;margin:6px 0}
.plan .btn{margin-top:auto}
.plan.hot{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc),0 20px 50px -20px var(--acc)}
.ribbon{position:absolute;top:12px;right:-30px;transform:rotate(35deg);background:linear-gradient(90deg,var(--acc),var(--acc2));color:var(--btn-text);font-size:.7rem;font-weight:800;padding:3px 34px}
/* marquee */
.marquee{overflow:hidden;border-block:1px solid var(--line);margin:40px 0 0;padding:12px 0;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.marquee div{display:flex;gap:42px;width:max-content;animation:scroll 28s linear infinite;color:var(--mut);font-weight:700}
.marquee:hover div{animation-play-state:paused}
@keyframes scroll{to{transform:translateX(-50%)}}
/* flash + asistan animasyonu */
.flash{animation:slidein .4s ease both}@keyframes slidein{from{opacity:0;transform:translateY(-8px)}}
.ai-fab{animation:bob 3.2s ease-in-out infinite}@keyframes bob{50%{transform:translateY(-6px)}}
.ai-panel.open{animation:pop .25s ease both}@keyframes pop{from{opacity:0;transform:translateY(12px) scale(.96)}}
.ai-msg{animation:slidein .25s ease both}
/* tarih/tablo satırı */
tbody tr,table tr{transition:background .15s}table tr:hover td{background:color-mix(in srgb,var(--acc) 7%,transparent)}
details.faq{transition:border-color .2s}details.faq[open]{border-color:var(--acc)}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}#bg-canvas{display:none}}