/* Düzen: ortalı hero + sahte panel ekranı, altında sade bento ızgarası, iki alan bölümü, kapanış çağrısı. Giriş üst çubuktan açılan pencere. */
@property --a{syntax:'<angle>';inherits:false;initial-value:0deg}
:root{
  --paper:#f7f5ee; --card:#fff; --ink:#14141a; --ink2:#55524a; --line:#e6e1d3;
  --brand:#17566b; --brand-l:#2d7c96; --brand-d:#0b3441; --brand-soft:#e3eef1;
  --amber:#b8762a; --amber-l:#e0a85f; --amber-soft:#fbefdc;
  --night:#0c1f27; --night2:#13303b; --violet:#7a5ad6;
  --serif:Fraunces,Georgia,serif; --sans:'Public Sans',system-ui,sans-serif; --mono:'IBM Plex Mono',Consolas,monospace;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.6;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0}
:focus-visible{outline:3px solid var(--amber-l);outline-offset:2px}
.in{max-width:1160px;margin:0 auto;padding-inline:20px}
h1,h2,h3{font-family:var(--serif);margin:0;text-wrap:balance}

/* üst çubuk */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;padding-block:12px;padding-inline:12px}
.nav .bar{max-width:1120px;margin:0 auto;height:60px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 10px 0 16px;border-radius:999px;background:rgba(255,255,255,.78);backdrop-filter:blur(14px);border:1px solid rgba(20,20,26,.07);box-shadow:0 8px 30px -14px rgba(11,52,65,.35)}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--serif);font-weight:800;font-size:19px}
.brand img{display:block}
.links{display:flex;gap:26px;font-size:15px;font-weight:500;color:var(--ink2)}
.links a:hover{color:var(--ink)}
@media(max-width:760px){.links{display:none}}
.gir{height:42px;padding:0 20px;border-radius:999px;background:var(--ink);color:#fff;font-weight:600;font-size:15px;display:flex;align-items:center;gap:8px;transition:transform .2s,background .2s}
.gir:hover{background:var(--brand);transform:translateY(-1px)}

/* hero */
.hero{position:relative;text-align:center;padding-block:56px 20px;isolation:isolate}
.hero::before{content:"";position:absolute;top:-120px;bottom:0;left:50%;width:100vw;transform:translateX(-50%);z-index:-1;
  background:radial-gradient(600px 380px at 20% 10%,rgba(45,124,150,.28),transparent 70%),radial-gradient(600px 380px at 82% 6%,rgba(224,168,95,.38),transparent 70%),
  radial-gradient(rgba(20,20,26,.09) 1px,transparent 1.3px) 0 0/22px 22px;
  -webkit-mask-image:linear-gradient(#000 60%,transparent);mask-image:linear-gradient(#000 60%,transparent)}
.badge{display:inline-flex;align-items:center;gap:10px;padding:6px 14px 6px 8px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:14px;font-weight:600;box-shadow:0 4px 14px -8px rgba(20,20,26,.3);animation:up .7s both}
.badge img{display:block}
.badge em{font-style:normal;color:var(--ink2);font-weight:500}
h1{font-size:clamp(46px,9.5vw,116px);line-height:.95;letter-spacing:-.035em;font-weight:800;margin-top:26px;animation:up .8s .08s both}
h1 .a{background:linear-gradient(95deg,var(--brand),var(--brand-l));-webkit-background-clip:text;background-clip:text;color:transparent}
h1 .b{background:linear-gradient(95deg,var(--amber),var(--amber-l));-webkit-background-clip:text;background-clip:text;color:transparent;font-style:italic;padding-right:.08em}
.sub{max-width:54ch;margin:24px auto 0;font-size:clamp(17px,2.2vw,20px);color:var(--ink2);animation:up .8s .16s both}
.cta{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:32px;animation:up .8s .24s both}
.rb{position:relative;border-radius:999px;padding:2px;background:conic-gradient(from var(--a),var(--brand-l),var(--amber-l),var(--violet),var(--brand-l));animation:spin 4s linear infinite;box-shadow:0 18px 34px -14px rgba(23,86,107,.7)}
.rb>span{display:flex;align-items:center;gap:10px;height:54px;padding:0 28px;border-radius:999px;background:var(--night);color:#fff;font-weight:700;font-size:17px}
.rb .ar{transition:transform .25s;display:inline-block;font-style:normal}.rb:hover .ar{transform:translateX(5px)}
.ghost{height:58px;padding:0 26px;border-radius:999px;background:#fff;border:1px solid var(--line);font-weight:600;font-size:17px;display:flex;align-items:center;transition:border-color .2s,transform .2s}
.ghost:hover{border-color:var(--ink);transform:translateY(-1px)}
@keyframes spin{to{--a:360deg}}
@keyframes up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.morph{margin:30px auto 0;display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:14px;color:var(--ink2);animation:up .8s .32s both;flex-wrap:wrap;justify-content:center}
.morph b{font-weight:600;padding:5px 10px;border-radius:8px;transition:opacity .4s}
.morph .e{background:var(--brand-soft);color:var(--brand-d)} .morph .c{background:var(--night);color:var(--amber-l)}
.morph.off b{opacity:0}

/* sahte panel */
.shot{margin:48px auto 0;max-width:980px;position:relative;animation:up 1s .4s both}
.win{background:#fff;border-radius:20px;border:1px solid var(--line);box-shadow:0 50px 90px -40px rgba(11,52,65,.5),0 20px 40px -24px rgba(11,52,65,.25);overflow:hidden;text-align:left;transform:perspective(1400px) rotateX(5deg);transform-origin:50% 0}
.wb{display:flex;align-items:center;gap:6px;padding:11px 16px;border-bottom:1px solid var(--line);background:#fbfaf6;font-family:var(--mono);font-size:12px;color:var(--ink2)}
.wb i{width:10px;height:10px;border-radius:50%;background:#ddd7c6;display:block}
.wb span{margin-left:12px}
.wbody{display:grid;grid-template-columns:150px 1fr;min-height:340px}
@media(max-width:700px){.wbody{grid-template-columns:1fr}.side{display:none}}
.side{border-right:1px solid var(--line);padding:16px 12px;display:flex;flex-direction:column;gap:4px;font-size:14px;background:#fbfaf6}
.side div{padding:8px 10px;border-radius:8px;color:var(--ink2);font-weight:500}
.side .on{background:var(--brand-soft);color:var(--brand-d);font-weight:600}
.main{padding:22px;display:grid;grid-template-columns:1fr 1fr;gap:14px;min-width:0}
@media(max-width:560px){.main{grid-template-columns:1fr}}
.t{border:1px solid var(--line);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:4px;min-width:0}
.t small{color:var(--ink2);font-size:13px}
.t b{font-family:var(--serif);font-size:44px;line-height:1}
.up2{color:#12694e;font-weight:600;font-size:13px}
.span2{grid-column:1/-1}
.sp{width:100%;height:84px;display:block}
.bars{display:flex;flex-direction:column;gap:9px;font-size:13px}
.bars div{display:grid;grid-template-columns:110px 1fr 38px;gap:10px;align-items:center}
.bars i{height:8px;border-radius:5px;background:var(--brand-soft);display:block;position:relative}
.bars i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--y);border-radius:5px;background:var(--brand)}
.bars .w i::after{background:#d9462a}
.chip{position:absolute;background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px 14px;font-size:14px;font-weight:600;box-shadow:0 20px 40px -18px rgba(11,52,65,.5);display:flex;gap:10px;align-items:center;animation:flt 6s ease-in-out infinite}
.chip .d{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;color:#fff;font-family:var(--mono);font-size:14px;flex:none}
.chip small{display:block;font-weight:400;color:var(--ink2);font-size:12px;line-height:1.2}
.c1{right:-18px;top:70px}.c1 .d{background:var(--amber)}
.c2{left:-18px;bottom:60px;animation-delay:-3s}.c2 .d{background:var(--brand)}
@keyframes flt{50%{transform:translateY(-10px)}}
@media(max-width:1100px){.c1{right:6px}.c2{left:6px}}
@media(max-width:700px){.chip{display:none}}

/* bölümler */
section.s{padding-block:88px 0}
.eyebrow{font-family:var(--mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);font-weight:600}
.s h2{font-size:clamp(32px,5vw,54px);line-height:1.02;letter-spacing:-.02em;margin-top:12px;font-weight:800}
.s .lede{color:var(--ink2);max-width:52ch;margin:14px 0 0;font-size:18px}

/* bento */
.bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;margin-top:40px}
.bt{border-radius:24px;padding:26px;background:var(--card);border:1px solid var(--line);display:flex;flex-direction:column;gap:10px;min-width:0;position:relative;overflow:hidden;transition:transform .3s,box-shadow .3s}
.bt:hover{transform:translateY(-4px);box-shadow:0 26px 50px -28px rgba(11,52,65,.5)}
.bt h3{font-size:25px;line-height:1.1;font-weight:800}
.bt p{margin:0;color:var(--ink2);font-size:15.5px;max-width:42ch}
.ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-family:var(--mono);font-weight:600;font-size:17px;background:var(--brand-soft);color:var(--brand-d);flex:none}
.b1{grid-column:span 4}.b2{grid-column:span 2}.b3{grid-column:span 2}.b4{grid-column:span 2}.b5{grid-column:span 2}.b6{grid-column:span 6}
@media(max-width:900px){.b1,.b2,.b3,.b4,.b5{grid-column:span 6}}
.b1{background:linear-gradient(150deg,var(--brand),var(--brand-d));color:#fff;border:0;min-height:300px}
.b1 p{color:#cfe3ea}.b1 .ic{background:rgba(255,255,255,.14);color:#fff}
.mini{margin-top:auto;display:flex;align-items:flex-end;gap:7px;height:96px}
.mini i{flex:1;border-radius:6px 6px 0 0;background:rgba(255,255,255,.2);display:block;height:var(--h)}
.mini i:last-child{background:var(--amber-l)}
.b2 .ic{background:var(--amber-soft);color:#8a560f}
.q{margin-top:auto;font-family:var(--serif);font-size:26px;font-weight:700;padding:14px 16px;border-radius:14px;background:var(--amber-soft);color:#6f430c}
.b5{background:var(--night);color:#d6e6ec;border-color:var(--night2)}
.b5 h3{color:#fff}.b5 p{color:#9fb8c2}.b5 .ic{background:rgba(224,168,95,.18);color:var(--amber-l)}
.chat{margin-top:auto;display:flex;flex-direction:column;gap:8px;font-size:14px}
.chat span{padding:9px 13px;border-radius:14px;max-width:90%}
.chat .u{background:var(--night2);align-self:flex-end}
.chat .p{background:rgba(224,168,95,.18);color:var(--amber-l)}
.b6{background:var(--night);color:#d6e6ec;border-color:var(--night2);flex-direction:row;gap:30px;align-items:center;flex-wrap:wrap}
.b6>div{flex:1 1 300px;display:flex;flex-direction:column;gap:10px;min-width:0}
.b6 h3{color:#fff}.b6 p{color:#9fb8c2}.b6 .ic{background:rgba(224,168,95,.18);color:var(--amber-l)}
.b6 .term{flex:1 1 320px}
.term{background:#071419;border-radius:16px;padding:18px;font-family:var(--mono);font-size:14px;line-height:1.75;overflow-x:auto;white-space:pre;min-width:0}
.term .k{color:#6fc0d8}.term .s2{color:var(--amber-l)}.term .c{color:#5f8696}

/* iki alan */
.duo{margin-top:40px;display:flex;height:300px;border-radius:30px;overflow:hidden;box-shadow:0 40px 70px -40px rgba(11,52,65,.6)}
@media(max-width:700px){.duo{flex-direction:column;height:520px}}
.duo a{flex:1;position:relative;overflow:hidden;color:#fff;padding:30px;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;transition:flex .6s cubic-bezier(.3,1.1,.4,1),filter .4s}
.duo:hover a:not(:hover){filter:saturate(.6) brightness(.9)}
.duo a:hover{flex:1.6}
.duo .m{background:radial-gradient(circle at 1px 1px,rgba(255,255,255,.25) 1.5px,transparent 2px) 0 0/16px 16px,linear-gradient(145deg,#1d5f9c,var(--brand-d))}
.duo .y{background:repeating-radial-gradient(circle at 100% 130%,rgba(255,255,255,.15) 0 2px,transparent 2px 16px),linear-gradient(145deg,var(--amber),#8a560f)}
.duo .g{position:absolute;top:22px;left:28px;font-family:var(--mono);font-size:54px;font-weight:600;opacity:.95}
.duo h3{font-size:36px;font-weight:800;line-height:1}
.duo p{margin:0;opacity:.92;max-width:34ch}
.duo .go{margin-top:6px;font-weight:600}

/* kapanış */
.end{margin-block:88px;border-radius:32px;padding:clamp(34px,6vw,70px);text-align:center;background:radial-gradient(500px 260px at 15% 0%,rgba(45,124,150,.5),transparent 70%),radial-gradient(500px 260px at 90% 100%,rgba(224,168,95,.5),transparent 70%),var(--night);color:#fff;display:flex;flex-direction:column;align-items:center;gap:18px}
.end img{display:block;width:92px;height:auto;background:#fff;border-radius:24px;padding:8px}
.end h2{font-size:clamp(32px,5vw,56px);line-height:1.02;font-weight:800;margin:0}
.end p{margin:0;color:#b8cdd5;max-width:46ch}
footer{border-top:1px solid var(--line);padding-block:26px;font-size:14px;color:var(--ink2)}
footer .in{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* giriş penceresi */
.ov{position:fixed;inset:0;z-index:50;background:rgba(12,31,39,.55);backdrop-filter:blur(6px);display:grid;place-items:center;padding:16px;opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
.ov.open{opacity:1;visibility:visible}
.modal{width:min(420px,100%);background:#fff;border-radius:26px;padding:28px;display:flex;flex-direction:column;gap:14px;position:relative;box-shadow:0 50px 90px -30px rgba(0,0,0,.6);transform:translateY(16px) scale(.97);transition:transform .35s cubic-bezier(.3,1.3,.5,1);max-height:100%;overflow:auto}
.ov.open .modal{transform:none}
.modal::before{content:"";position:absolute;inset:0 0 auto 0;height:6px;background:linear-gradient(90deg,var(--brand) 50%,var(--amber) 50%)}
.x{position:absolute;right:14px;top:16px;width:34px;height:34px;border-radius:50%;background:var(--paper);font-size:18px;line-height:1}
.mlogo{display:block;margin:6px auto 0;width:84px;height:auto}
.modal h4{font-family:var(--serif);font-size:27px;text-align:center;margin:0;font-weight:800}
.pill{position:relative;display:grid;grid-template-columns:1fr 1fr;padding:5px;border-radius:999px;background:var(--paper);box-shadow:inset 0 2px 6px rgba(20,20,26,.12)}
.pill .th{position:absolute;top:5px;bottom:5px;left:5px;width:calc(50% - 5px);border-radius:999px;background:linear-gradient(135deg,var(--brand),var(--brand-l));box-shadow:0 8px 18px -6px rgba(23,86,107,.7);transition:transform .55s cubic-bezier(.34,1.56,.64,1),background .4s}
.pill[data-i="1"] .th{transform:translateX(100%);background:linear-gradient(135deg,var(--amber),var(--amber-l))}
.pill button{position:relative;z-index:1;background:none;height:44px;border-radius:999px;font-weight:700;color:var(--ink2);transition:color .3s}
.pill button.on{color:#fff}
label{font-size:14px;font-weight:600;display:flex;flex-direction:column;gap:6px}
input{font:inherit;padding:13px 14px;border:1px solid var(--line);border-radius:12px;background:var(--paper)}
.submit{height:54px;border-radius:14px;background:linear-gradient(135deg,var(--brand),var(--brand-l));color:#fff;font-weight:700;font-size:17px;box-shadow:0 14px 28px -12px rgba(23,86,107,.8)}
.modal.ogrt .submit{background:linear-gradient(135deg,var(--amber),var(--amber-l));box-shadow:0 14px 28px -12px rgba(184,118,42,.8)}
.after{display:flex;gap:8px;flex-wrap:wrap;font-size:13px;align-items:center}
.after span{padding:4px 10px;border-radius:999px;font-weight:600;background:var(--brand-soft);color:var(--brand-d)}
.after span.y{background:var(--amber-soft);color:#8a560f}
.after span.z{background:#e9e6f3;color:#3b3470}
.note{font-size:13.5px;color:var(--ink2);margin:0;text-align:center}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* canlı sayfa eklemeleri */
.gizli{display:none!important}
.uyari{background:#fbeae5;color:#9e2f18;border:1px solid #f3d3c9;border-radius:12px;padding:10px 14px;font-size:14px;font-weight:500}
.hatirla{flex-direction:row;align-items:flex-start;gap:10px;font-weight:500;font-size:14px;color:var(--ink2)}
.hatirla input{padding:0;margin-top:3px;width:18px;height:18px;accent-color:var(--brand)}
.hatirla span{display:block}
.hatirla small{display:block;font-weight:400;font-size:12.5px}
.submit:disabled{opacity:.7;cursor:progress}
.duo .yakin{cursor:default}
.soon{display:inline-block;width:max-content;padding:4px 12px;border-radius:999px;background:rgba(255,255,255,.22);font-weight:600;font-size:13px}