/* weta cms — landing page stilleri */
:root{
  --bg:#F6F8FC;
  --bg-2:#FFFFFF;
  --panel:#FFFFFF;
  --panel-2:#F1F4FA;
  --ink:#0F1729;
  --ink-2:#4A5568;
  --ink-3:#7A869A;
  --line:#DDE3ED;
  --line-2:#E9EDF5;
  --acc:#2F6BFF;
  --acc-2:#7C4DFF;
  --acc-soft:#E8EFFF;
  --ok:#0F9D58;
  --ok-soft:#E3F5EB;
  --code-bg:#0E1526;
  --code-ink:#D6E0F5;
  --grid:rgba(47,107,255,.07);
  --shadow:0 1px 2px rgba(15,23,41,.05), 0 8px 24px rgba(15,23,41,.05);
  --logo-light:none;
  --logo-dark:block;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#070B14;
    --bg-2:#0B1120;
    --panel:#0E1526;
    --panel-2:#131C30;
    --ink:#E9EEF8;
    --ink-2:#A6B1C6;
    --ink-3:#7A869A;
    --line:#1E2840;
    --line-2:#172034;
    --acc:#6D9BFF;
    --acc-2:#A98BFF;
    --acc-soft:#14203A;
    --ok:#4ED08A;
    --ok-soft:#10261C;
    --code-bg:#060A13;
    --code-ink:#D6E0F5;
    --grid:rgba(109,155,255,.08);
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.35);
    --logo-light:block;
    --logo-dark:none;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#070B14;--bg-2:#0B1120;--panel:#0E1526;--panel-2:#131C30;
  --ink:#E9EEF8;--ink-2:#A6B1C6;--ink-3:#7A869A;--line:#1E2840;--line-2:#172034;
  --acc:#6D9BFF;--acc-2:#A98BFF;--acc-soft:#14203A;--ok:#4ED08A;--ok-soft:#10261C;
  --code-bg:#060A13;--code-ink:#D6E0F5;--grid:rgba(109,155,255,.08);
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.35);
  --logo-light:block;--logo-dark:none;color-scheme:dark;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:16.5px;line-height:1.6;
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}*{animation:none!important;transition:none!important;}}
img{max-width:100%;display:block;}
a{color:var(--acc);}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:2px;}
.logo-dark{display:var(--logo-dark);}
.logo-light{display:var(--logo-light);}

.wrap{max-width:1140px;margin:0 auto;padding:0 20px;}
section{padding:64px 0;}
h1,h2,h3,h4{margin:0;letter-spacing:-.022em;line-height:1.15;font-weight:700;}
h2{font-size:clamp(25px,3.2vw,34px);margin-bottom:12px;}
h3{font-size:18px;letter-spacing:-.01em;}
h4{font-size:15.5px;}
p{margin:0 0 15px;}
.lede{font-size:clamp(16.5px,1.7vw,19px);color:var(--ink-2);max-width:72ch;}
.mono,code,pre{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;}
.tag{
  display:inline-flex;align-items:center;gap:7px;
  font-size:12.5px;font-weight:600;color:var(--acc);
  background:var(--acc-soft);border:1px solid var(--line);
  padding:5px 12px;border-radius:99px;margin-bottom:16px;
}
.tag i{width:6px;height:6px;border-radius:50%;background:var(--acc);display:block;}

/* header */
header{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;gap:22px;padding:12px 20px;max-width:1140px;margin:0 auto;}
.nav .mark{width:78px;}
.nav .links{display:none;gap:20px;margin-left:12px;}
.nav .links a{font-size:14.5px;color:var(--ink-2);text-decoration:none;font-weight:500;}
.nav .links a:hover{color:var(--ink);}
.nav .right{margin-left:auto;display:flex;align-items:center;gap:10px;}
.nav .right .by{font-size:13px;color:var(--ink-3);display:none;}
@media (min-width:900px){.nav .links{display:flex;}.nav .right .by{display:block;}}

/* hero */
.hero{
  position:relative;overflow:hidden;padding:56px 0 64px;
  background:
    radial-gradient(900px 400px at 78% -10%, var(--acc-soft), transparent 70%),
    linear-gradient(var(--grid) 1px, transparent 1px) 0 0/48px 48px,
    linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0/48px 48px;
}
.hero-grid{display:grid;gap:34px;}
@media (min-width:1000px){.hero-grid{grid-template-columns:1.02fr 1fr;gap:44px;align-items:start;}}
.hero h1{font-size:clamp(31px,4.6vw,49px);font-weight:800;letter-spacing:-.035em;margin-bottom:16px;}
.hero h1 .grad{
  background:linear-gradient(94deg,var(--acc),var(--acc-2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.btns{display:flex;gap:11px;flex-wrap:wrap;margin-top:22px;}
.btn{
  font:inherit;font-size:15px;font-weight:600;text-decoration:none;
  padding:11px 20px;border-radius:9px;border:1px solid transparent;
  background:linear-gradient(94deg,var(--acc),var(--acc-2));color:#fff;
  display:inline-block;box-shadow:var(--shadow);
}
.btn.alt{background:var(--panel);color:var(--ink);border-color:var(--line);box-shadow:none;}
.hero-facts{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px;font-size:13.5px;color:var(--ink-2);}
.hero-facts span{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:6px 11px;}

/* panel mock */
.panel{
  background:var(--panel);border:1px solid var(--line);
  border-radius:14px;box-shadow:var(--shadow);overflow:hidden;
}
.panel-top{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:10px 13px;background:var(--panel-2);border-bottom:1px solid var(--line);
}
.dots{display:flex;gap:5px;margin-right:6px;}
.dots i{width:9px;height:9px;border-radius:50%;background:var(--line);display:block;}
.path{font-size:12px;color:var(--ink-3);}
.state{margin-left:auto;font-size:11.5px;font-weight:700;color:var(--ok);background:var(--ok-soft);padding:4px 9px;border-radius:99px;}
.panel-body{padding:18px 18px 20px;}
.langs{display:flex;gap:5px;border-bottom:1px solid var(--line);margin-bottom:16px;flex-wrap:wrap;}
.langs button{
  font:inherit;font-size:13px;font-weight:600;cursor:pointer;
  padding:8px 13px;background:transparent;border:0;color:var(--ink-3);
  border-bottom:2px solid transparent;margin-bottom:-1px;
}
.langs button:hover{color:var(--ink);}
.langs button[aria-selected="true"]{color:var(--acc);border-bottom-color:var(--acc);}
.flabel{font-size:11.5px;font-weight:600;color:var(--ink-3);margin-bottom:6px;}
.fbox{border:1px solid var(--line);border-radius:9px;padding:11px 13px;background:var(--bg-2);margin-bottom:13px;}
#headline{font-size:clamp(19px,2.4vw,24px);font-weight:700;letter-spacing:-.02em;line-height:1.25;outline:none;min-height:1.3em;}
#headline:focus{outline:none;}
.caret{display:inline-block;width:2px;height:.9em;background:var(--acc);vertical-align:-.08em;margin-left:2px;animation:bl 1.1s steps(1) infinite;}
@keyframes bl{50%{opacity:0;}}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:11px;}
.fbox.sm{font-size:13px;color:var(--ink-2);margin-bottom:0;}
.fbox.sm code{font-size:12px;color:var(--ink);}
.panel-foot{
  display:flex;gap:8px;align-items:center;flex-wrap:wrap;
  padding:12px 18px;border-top:1px solid var(--line);background:var(--panel-2);
  font-size:12.5px;color:var(--ink-3);
}
.mini-btn{font-size:12.5px;font-weight:600;color:#fff;background:var(--acc);padding:6px 12px;border-radius:7px;}
.hint{font-size:13px;color:var(--ink-3);margin-top:12px;}

/* içindekiler */
.toc{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px 22px;box-shadow:var(--shadow);}
.toc h2{font-size:16px;margin-bottom:12px;}
.toc ol{margin:0;padding-left:20px;columns:2;column-gap:32px;font-size:14.5px;}
@media (max-width:640px){.toc ol{columns:1;}}
.toc li{margin-bottom:6px;break-inside:avoid;}
.toc a{color:var(--ink-2);text-decoration:none;}
.toc a:hover{color:var(--acc);}

/* kart ızgaraları */
.cards{display:grid;gap:14px;margin-top:26px;}
@media (min-width:680px){.cards{grid-template-columns:repeat(2,1fr);}}
@media (min-width:1000px){.cards.c3{grid-template-columns:repeat(3,1fr);}}
.card{
  background:var(--panel);border:1px solid var(--line);border-radius:13px;
  padding:20px;box-shadow:var(--shadow);
}
.card h3{margin-bottom:8px;}
.card p{margin:0;color:var(--ink-2);font-size:14.8px;}
.card ul{margin:11px 0 0;padding:0;list-style:none;font-size:14px;color:var(--ink-2);}
.card ul li{padding:4px 0 4px 20px;position:relative;}
.card ul li::before{
  content:"";position:absolute;left:0;top:11px;width:8px;height:8px;
  border-radius:2px;background:var(--acc);opacity:.55;
}
.ico{
  width:34px;height:34px;border-radius:9px;margin-bottom:13px;
  background:var(--acc-soft);border:1px solid var(--line);
  display:grid;place-items:center;color:var(--acc);
}
.ico svg{width:18px;height:18px;}

/* kod */
.split{display:grid;gap:26px;}
@media (min-width:920px){.split{grid-template-columns:1fr 1fr;gap:40px;align-items:start;}}
pre{
  margin:0;background:var(--code-bg);color:var(--code-ink);
  padding:18px;border-radius:12px;overflow-x:auto;font-size:12.8px;line-height:1.75;
  border:1px solid var(--line);
}
pre .k{color:#7FB0FF;} pre .s{color:#9EE6A8;} pre .c{color:#5E6C88;}
.endp{margin:16px 0 0;padding:0;list-style:none;font-size:13.5px;}
.endp li{display:flex;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line-2);}
.endp .m{font-weight:700;color:var(--ok);font-size:11.5px;min-width:42px;}

/* seo aracı */
.seo-tool{display:grid;gap:22px;margin-top:26px;}
@media (min-width:920px){.seo-tool{grid-template-columns:1fr 1fr;gap:34px;align-items:start;}}
.inp{margin-bottom:15px;}
.inp label{display:block;font-size:13px;font-weight:600;color:var(--ink-2);margin-bottom:6px;}
.inp input,.inp textarea{
  font:inherit;font-size:14.5px;width:100%;padding:10px 12px;
  border:1px solid var(--line);border-radius:9px;background:var(--panel);color:var(--ink);resize:vertical;
}
.count{font-size:12px;color:var(--ink-3);margin-top:5px;}
.count.over{color:#D93025;font-weight:600;}
.serp{background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:20px;box-shadow:var(--shadow);}
.serp .url{font-size:13px;color:var(--ink-2);margin-bottom:3px;}
.serp .ttl{font-size:19px;color:var(--acc);line-height:1.3;margin-bottom:4px;overflow-wrap:break-word;}
.serp .dsc{font-size:14px;color:var(--ink-2);line-height:1.5;}
.serp-meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px;font-size:12px;color:var(--ink-3);}
.serp-meta span{background:var(--panel-2);border:1px solid var(--line);border-radius:7px;padding:4px 9px;}

/* tablo */
.table-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:13px;background:var(--panel);margin-top:24px;box-shadow:var(--shadow);}
table{border-collapse:collapse;width:100%;min-width:640px;font-size:14.6px;}
th,td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--line-2);vertical-align:top;}
thead th{font-size:13px;color:var(--ink-3);font-weight:600;background:var(--panel-2);}
tbody th{font-weight:600;width:28%;}
td.yes{color:var(--ok);}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:0;}

/* sss */
.faq{margin-top:24px;border-top:1px solid var(--line);}
details{border-bottom:1px solid var(--line);}
summary{
  cursor:pointer;list-style:none;padding:16px 34px 16px 0;position:relative;
  font-weight:600;font-size:16px;
}
summary::-webkit-details-marker{display:none;}
summary::after{
  content:"";position:absolute;right:6px;top:22px;width:9px;height:9px;
  border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);
  transform:rotate(45deg);transition:transform .18s ease;
}
details[open] summary::after{transform:rotate(-135deg);}
details .a{padding:0 0 18px;color:var(--ink-2);font-size:15.2px;max-width:76ch;}
details .a p:last-child{margin-bottom:0;}

/* kimler için */
.use{display:grid;gap:12px;margin-top:24px;}
@media (min-width:760px){.use{grid-template-columns:repeat(2,1fr);}}
.use div{background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:16px 18px;}
.use h4{margin-bottom:5px;}
.use p{margin:0;font-size:14.4px;color:var(--ink-2);}

/* sözlük */
.gloss{display:grid;gap:0;margin-top:22px;border-top:1px solid var(--line);}
.gloss div{padding:15px 0;border-bottom:1px solid var(--line-2);display:grid;gap:4px;}
@media (min-width:760px){.gloss div{grid-template-columns:230px 1fr;gap:26px;}}
.gloss dt,.gloss b{font-weight:600;}
.gloss p{margin:0;color:var(--ink-2);font-size:14.6px;}

/* alt bant */
.band{
  background:linear-gradient(100deg,var(--acc),var(--acc-2));
  color:#fff;border-radius:16px;padding:32px;margin:0 0 10px;
}
.band h2{color:#fff;}
.band p{color:rgba(255,255,255,.88);max-width:62ch;}
.band .btn{background:#fff;color:#16224A;}
.band .btn.alt{background:transparent;color:#fff;border-color:rgba(255,255,255,.55);}

footer{border-top:1px solid var(--line);padding:30px 0 50px;font-size:13.8px;color:var(--ink-3);margin-top:50px;}
footer .mark{width:62px;margin-bottom:12px;}
footer .cols{display:grid;gap:22px;}
@media (min-width:760px){footer .cols{grid-template-columns:1.6fr 1fr 1fr;gap:40px;}}
footer a{color:var(--ink-2);text-decoration:none;display:block;padding:3px 0;}
footer a:hover{color:var(--acc);}
footer h4{color:var(--ink);margin-bottom:8px;font-size:14px;}
.fine{margin-top:26px;padding-top:18px;border-top:1px solid var(--line-2);font-size:13px;}