/* landing3 — modern katman (landing2 üstüne) */
:root{--blue2:#5b8cff;--ind:#4f46e5;--card:#fff;--ring:color-mix(in srgb,var(--blue) 18%,transparent)}
@media(prefers-color-scheme:dark){:root{--card:#101a30}}
body{background:var(--bg)}
main{background:
 radial-gradient(760px 420px at 100% -80px,color-mix(in srgb,var(--blue) 17%,transparent),transparent 70%),
 radial-gradient(560px 360px at -8% 120px,color-mix(in srgb,var(--mint) 13%,transparent),transparent 70%) no-repeat}
/* nav */
.nav{border-bottom-color:color-mix(in srgb,var(--line) 70%,transparent)}
.logo img{width:36px;height:36px;border-radius:10px;display:block;box-shadow:0 4px 12px -4px rgba(30,60,140,.45)}
.logo span{line-height:1.15}
/* düğmeler */
.btn{border-radius:14px;transition:transform .15s,box-shadow .15s,border-color .15s}
.btn.p{background:linear-gradient(135deg,var(--blue2),var(--blue) 55%,var(--ind));border-color:transparent;box-shadow:0 10px 22px -10px color-mix(in srgb,var(--blue) 80%,#000)}
.btn.p:hover{background:linear-gradient(135deg,var(--blue2),var(--blue) 55%,var(--ind));transform:translateY(-1px);box-shadow:0 14px 26px -10px color-mix(in srgb,var(--blue) 85%,#000)}
.btn:not(.p):hover{transform:translateY(-1px)}
.btn.sm{border-radius:11px}
/* hero */
.hero h1{font-weight:850;letter-spacing:-.035em}
.hero .lead{line-height:1.6}
.links{gap:10px}
.links a{display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border:1.5px solid var(--line);border-radius:999px;background:var(--card);color:var(--ink);font-weight:650;font-size:14.5px}
.links a:hover{text-decoration:none;border-color:var(--blue);color:var(--blue)}
.note{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13px}
/* özellikler: kartlar */
.feats{gap:16px}
.feat{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:22px;box-shadow:0 1px 0 rgba(20,40,90,.03),0 12px 28px -22px rgba(20,40,90,.35);transition:transform .2s,box-shadow .2s,border-color .2s}
.feat:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--blue) 35%,var(--line));box-shadow:0 18px 34px -20px rgba(20,40,90,.4)}
.feat .ik{width:44px;height:44px;border-radius:13px;font-size:21px;margin-bottom:14px;background:color-mix(in srgb,var(--blue) 12%,var(--bg))}
.feat:nth-child(3n+2) .ik{background:color-mix(in srgb,var(--mint) 16%,var(--bg))}
.feat:nth-child(3n) .ik{background:color-mix(in srgb,var(--ind) 13%,var(--bg))}
/* bölüm arka planları */
#roller,#tablo{background:var(--mist)}
.role{border-radius:24px}
.role.a{background:linear-gradient(150deg,#13213f,#0b1428);color:#eaf0ff;box-shadow:var(--shadow)}
.role.b{background:var(--card);border:1px solid var(--line)}
/* paketler */
.plan{border-radius:24px;background:var(--card);border-color:var(--line);padding:28px;box-shadow:0 14px 30px -24px rgba(20,40,90,.4);transition:transform .2s}
.plan:hover{transform:translateY(-3px)}
.plan.one{background:linear-gradient(180deg,color-mix(in srgb,var(--blue) 8%,var(--card)),var(--card));box-shadow:0 0 0 1.5px var(--blue),0 22px 40px -22px color-mix(in srgb,var(--blue) 60%,transparent)}
.plan .badge{background:linear-gradient(135deg,var(--blue2),var(--ind))}
/* tablo */
.ftw{background:var(--card);border-radius:20px;border-color:var(--line)}
/* çağrı bandı */
.band{background:radial-gradient(520px 240px at 85% 0,rgba(255,255,255,.18),transparent 70%),linear-gradient(135deg,#2f6fe0,#4f46e5);border-radius:30px;box-shadow:0 26px 50px -26px rgba(47,111,224,.7)}
/* mobil */
@media(max-width:560px){
 .hero{padding-top:26px}
 .hero h1{font-size:2.05rem}
 .cta .btn.p{height:54px;font-size:17px}
 .feat{padding:18px}
 .band{border-radius:24px}
}
@media(max-width:560px){
 .feats{gap:12px}
 .feat{display:grid;grid-template-columns:44px 1fr;column-gap:14px;align-items:start;padding:16px}
 .feat .ik{grid-row:1 / span 2;margin:0}
 .feat h3{margin:2px 0 4px}
}
.hero{padding-inline:20px}
.chips{list-style:none;margin:0 0 24px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.chips li{display:inline-flex;align-items:center;gap:8px;padding:8px 14px 8px 8px;border-radius:999px;background:var(--card);border:1px solid var(--line);font-weight:700;font-size:14.5px;box-shadow:0 8px 18px -14px rgba(20,40,90,.45)}
.chips b{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:14px;font-weight:400;background:color-mix(in srgb,var(--blue) 12%,var(--bg))}
.chips li:nth-child(2) b{background:color-mix(in srgb,var(--mint) 16%,var(--bg))}
.chips li:nth-child(3) b{background:color-mix(in srgb,var(--ind) 14%,var(--bg))}
.hero .lead{margin-bottom:16px}
@media(max-width:560px){.logo small{display:block;margin-top:3px}.logo span{white-space:nowrap}.nav .btn.sm.p{max-width:110px}.nav .w{gap:6px}.dil summary{padding:0 9px}}