:root {
  --bosluk-1:.5rem; --bosluk-2:1rem; --bosluk-3:1.5rem;
  --bosluk-4:2rem; --bosluk-6:3rem; --bosluk-8:4rem; --bosluk-12:6rem;
  --yazi-sm:.9375rem; --yazi-md:1.0625rem; --yazi-lg:1.25rem;
  --yazi-xl:clamp(1.5rem,3vw,2rem); --yazi-2xl:clamp(2.5rem,7vw,5rem);
  --kose-sm:8px; --kose-md:14px; --kose-lg:22px;
  --sure-normal:220ms; --egri:cubic-bezier(.2,.8,.2,1);
  --kapsayici:1140px;
  --kat-yapiskan:100; --kat-acilir:200; --kat-modal:300;

  --zemin:#faf8ff;
  --yuzey:#efe9fb;
  --vurgu-zemin:#2a1b4d;
  --metin:#241b3a;
  --sonuk:#6b6280;
  --cizgi:#e2dcf0;
  --vurgu:#7c3aed;
  --vurgu-koyu:#5b21b6;
  --beyaz:#ffffff;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family:'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size:var(--yazi-md);
  line-height:1.65;
  color:var(--metin);
  background:var(--zemin);
  overflow-x:hidden;
}
img { max-width:100%; display:block; }
h1,h2,h3 { font-family:'Sora', system-ui, sans-serif; line-height:1.15; letter-spacing:-.02em; }
a { color:var(--vurgu); }

.kapsayici { max-width:var(--kapsayici); margin-inline:auto; padding-inline:var(--bosluk-4); }

.acilis {
  position:fixed; inset:0; z-index:var(--kat-modal);
  background:var(--vurgu-zemin);
  display:none; place-items:center;
}
html.js .acilis { display:grid; }
.acilis--kapat { opacity:0; transition:opacity 350ms var(--egri); pointer-events:none; }
.acilis__logo { display:flex; flex-direction:column; align-items:center; gap:var(--bosluk-2); }
.acilis__ad { font-family:'Sora',sans-serif; font-weight:700; font-size:var(--yazi-lg); color:var(--beyaz); }
.acilis__logo img { animation:acilis-nabiz 1.2s ease-in-out infinite; }
@keyframes acilis-nabiz { 0%,100%{transform:scale(1)} 50%{transform:scale(1.08)} }
@media (prefers-reduced-motion: reduce) {
  .acilis { transition:none; }
  .acilis__logo img { animation:none; }
  html { scroll-behavior:auto; }
  .serit__akis { animation:none; }
}

.ust {
  position:sticky; top:0; z-index:var(--kat-yapiskan);
  background:rgba(250,248,255,.85);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--cizgi);
  transition:box-shadow var(--sure-normal) var(--egri);
}
.ust.kucuk { box-shadow:0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(42,27,77,.08); }
.ust__satir { display:flex; align-items:center; justify-content:space-between; min-height:84px; gap:var(--bosluk-3); }
.ust__marka { display:flex; align-items:center; gap:var(--bosluk-2); text-decoration:none; color:var(--metin); font-family:'Sora',sans-serif; font-weight:700; font-size:var(--yazi-lg); }
.ust__marka img { width:52px; height:52px; }
.ust__menu { display:flex; align-items:center; gap:var(--bosluk-4); }
.ust__menu a {
  text-decoration:none; color:var(--metin); font-weight:600; font-size:var(--yazi-sm);
  text-transform:uppercase; letter-spacing:.08em;
  min-height:44px; display:inline-flex; align-items:center;
}
.ust__menu a:hover { color:var(--vurgu); }
.ust__cta {
  background:var(--vurgu); color:var(--beyaz) !important;
  padding:0 var(--bosluk-3); border-radius:var(--kose-md);
  transition:background var(--sure-normal) var(--egri), transform var(--sure-normal) var(--egri);
}
.ust__cta:hover { background:var(--vurgu-koyu); transform:translateY(-1px); }
.ust__dugme {
  display:none; width:44px; height:44px; border:1px solid var(--cizgi);
  border-radius:var(--kose-sm); background:var(--beyaz); color:var(--metin);
  cursor:pointer; place-items:center;
}

.hero {
  padding:var(--bosluk-12) 0;
  background:
    radial-gradient(600px 400px at 85% 10%, rgba(124,58,237,.10), transparent 70%),
    radial-gradient(500px 350px at 5% 90%, rgba(124,58,237,.07), transparent 70%);
}
.hero__izgara { display:grid; grid-template-columns:1.1fr .9fr; gap:var(--bosluk-8); align-items:center; }
.rozet {
  display:inline-block; background:var(--yuzey); color:var(--vurgu-koyu);
  font-size:var(--yazi-sm); font-weight:600; padding:.35rem .9rem;
  border-radius:999px; margin-bottom:var(--bosluk-3);
}
.hero h1 { font-size:var(--yazi-2xl); margin-bottom:var(--bosluk-3); }
.hero h1 em { font-style:normal; color:var(--vurgu); }
.hero p { color:var(--sonuk); max-width:55ch; margin-bottom:var(--bosluk-4); }
.hero__eylemler { display:flex; flex-wrap:wrap; gap:var(--bosluk-2); margin-bottom:var(--bosluk-4); }
.hero__guven { list-style:none; display:flex; gap:var(--bosluk-4); flex-wrap:wrap; color:var(--sonuk); font-size:var(--yazi-sm); }
.hero__guven strong { color:var(--metin); }
.hero__gorsel { position:relative; }
.hero__gorsel::before {
  content:""; position:absolute; inset:-24px -24px auto auto;
  width:60%; height:60%; border-radius:50%;
  background:radial-gradient(circle, rgba(124,58,237,.18), transparent 70%);
  z-index:0;
}
.hero__gorsel img {
  position:relative; z-index:1;
  width:100%; height:auto; aspect-ratio:9/16; object-fit:contain;
  background:var(--beyaz);
  border-radius:var(--kose-lg);
  box-shadow:0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(42,27,77,.12);
}

.serit {
  background:var(--vurgu-zemin); color:var(--beyaz);
  overflow:hidden; padding:var(--bosluk-2) 0;
  border-block:1px solid rgba(255,255,255,.1);
}
.serit__akis {
  display:flex; gap:var(--bosluk-4); align-items:center;
  white-space:nowrap; width:max-content;
  font-family:'Sora',sans-serif; font-weight:700; font-size:var(--yazi-md);
  text-transform:uppercase; letter-spacing:.12em;
  animation:serit-kaydir 28s linear infinite;
}
.serit__akis i { font-style:normal; color:var(--vurgu); font-size:var(--yazi-sm); }
@keyframes serit-kaydir { from{transform:translateX(0)} to{transform:translateX(-50%)} }

.dugme {
  display:inline-flex; align-items:center; gap:.5rem;
  min-height:48px; padding:0 var(--bosluk-4);
  border-radius:var(--kose-md); font-weight:600; text-decoration:none;
  transition:background var(--sure-normal) var(--egri), transform var(--sure-normal) var(--egri), box-shadow var(--sure-normal) var(--egri);
}
.dugme:hover { transform:translateY(-1px); }
.dugme--birincil { background:var(--vurgu); color:var(--beyaz); box-shadow:0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(124,58,237,.25); }
.dugme--birincil:hover { background:var(--vurgu-koyu); }
.dugme--ikincil { border:1px solid var(--cizgi); color:var(--metin); background:var(--beyaz); }
.dugme--ikincil:hover { border-color:var(--vurgu); color:var(--vurgu); }
.dugme--beyaz { background:var(--beyaz); color:var(--vurgu-koyu); }
.dugme--beyaz:hover { background:var(--yuzey); }
.dugme--beyaz-cizgili { border:1px solid rgba(255,255,255,.5); color:var(--beyaz); }
.dugme--beyaz-cizgili:hover { background:rgba(255,255,255,.12); }
.dugme:focus-visible, a:focus-visible, button:focus-visible { outline:2px solid var(--vurgu); outline-offset:2px; }

.bolum { padding:var(--bosluk-12) 0; }
.bolum--yuzey { background:var(--yuzey); }
.bolum--vurgu { background:var(--vurgu-zemin); color:var(--beyaz); }
.bolum__baslik { max-width:65ch; margin-bottom:var(--bosluk-8); }
.bolum__baslik h2 { font-size:var(--yazi-xl); margin-bottom:var(--bosluk-2); }
.bolum__baslik p { color:var(--sonuk); }
.bolum--vurgu .bolum__baslik p { color:rgba(255,255,255,.75); }

.izgara--3 { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--bosluk-3); }
.kart {
  background:var(--beyaz); border:1px solid var(--cizgi); border-radius:var(--kose-lg);
  padding:var(--bosluk-4); transition:border-color var(--sure-normal) var(--egri), transform var(--sure-normal) var(--egri), box-shadow var(--sure-normal) var(--egri);
}
.kart:hover { border-color:var(--vurgu); transform:translateY(-2px); box-shadow:0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(42,27,77,.08); }
.kart h3 { font-size:var(--yazi-lg); margin-bottom:var(--bosluk-2); }
.kart p { color:var(--sonuk); font-size:var(--yazi-sm); }
.kart__ikon {
  display:inline-flex; width:48px; height:48px; align-items:center; justify-content:center;
  background:var(--yuzey); color:var(--vurgu); border-radius:var(--kose-md); margin-bottom:var(--bosluk-3);
}

.abonelik__izgara { display:grid; grid-template-columns:1.2fr .8fr; gap:var(--bosluk-8); align-items:center; }
.abonelik__metin h2 { font-size:var(--yazi-xl); margin-bottom:var(--bosluk-3); }
.abonelik__metin > p { color:var(--sonuk); margin-bottom:var(--bosluk-6); max-width:60ch; }
.abonelik__metin strong { color:var(--vurgu-koyu); }
.abonelik__gorsel img {
  width:100%; height:auto; aspect-ratio:9/16; object-fit:contain;
  background:var(--beyaz);
  border-radius:var(--kose-lg);
  box-shadow:0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(42,27,77,.12);
}

.ekranlar__izgara { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--bosluk-3); }
.ekran { background:var(--beyaz); border:1px solid var(--cizgi); border-radius:var(--kose-lg); overflow:hidden; }
.ekran img { width:100%; height:auto; aspect-ratio:9/16; object-fit:contain; background:var(--beyaz); }
.ekran figcaption { padding:var(--bosluk-2) var(--bosluk-3); font-weight:600; font-size:var(--yazi-sm); }

.adimlar { list-style:none; display:grid; gap:var(--bosluk-3); max-width:720px; }
.adim {
  display:flex; gap:var(--bosluk-3); align-items:flex-start;
  background:var(--beyaz); border:1px solid var(--cizgi); border-radius:var(--kose-lg); padding:var(--bosluk-4);
}
.adim__no { font-family:'Sora',sans-serif; font-weight:700; font-size:var(--yazi-xl); color:var(--vurgu); line-height:1; }
.adim h3 { font-size:var(--yazi-lg); margin-bottom:var(--bosluk-1); }
.adim p { color:var(--sonuk); font-size:var(--yazi-sm); }

.iletisim__izgara { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--bosluk-4); }
.iletisim__izgara h2 { font-size:var(--yazi-xl); margin-bottom:var(--bosluk-2); }
.iletisim__izgara p { color:rgba(255,255,255,.75); max-width:55ch; }
.iletisim__eylemler { display:flex; flex-wrap:wrap; gap:var(--bosluk-2); }

.altlik { background:var(--vurgu-zemin); color:var(--beyaz); border-top:4px solid var(--vurgu); padding:var(--bosluk-8) 0 var(--bosluk-4); }
.altlik__izgara { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--bosluk-6); align-items:start; }
.altlik__marka { display:flex; flex-direction:column; gap:var(--bosluk-2); }
.altlik__marka p { color:rgba(255,255,255,.7); font-size:var(--yazi-sm); max-width:40ch; }
.altlik h4 { font-family:'Sora',sans-serif; font-size:var(--yazi-md); margin-bottom:var(--bosluk-2); }
.altlik address { font-style:normal; }
.altlik address p, .altlik ul { color:rgba(255,255,255,.7); font-size:var(--yazi-sm); }
.altlik ul { list-style:none; }
.altlik ul li { margin-bottom:var(--bosluk-1); }
.altlik a { color:rgba(255,255,255,.85); text-decoration:none; min-height:44px; display:inline-flex; align-items:center; }
.altlik a:hover { color:var(--beyaz); text-decoration:underline; }
.altlik__telif { border-top:1px solid rgba(255,255,255,.15); margin-top:var(--bosluk-6); padding-top:var(--bosluk-3); font-size:var(--yazi-sm); color:rgba(255,255,255,.6); }

.wa-yuzen {
  position:fixed; right:var(--bosluk-4); bottom:var(--bosluk-4); z-index:var(--kat-yapiskan);
  width:60px; height:60px; border-radius:50%;
  background:#25d366; color:var(--beyaz);
  display:grid; place-items:center;
  box-shadow:0 1px 2px rgba(0,0,0,.1), 0 8px 24px rgba(37,211,102,.4);
  transition:transform var(--sure-normal) var(--egri);
}
.wa-yuzen:hover { transform:scale(1.08); }

html.js .giris { opacity:0; transform:translateY(16px); transition:opacity 500ms var(--egri), transform 500ms var(--egri); }
html.js .giris--gorunur { opacity:1; transform:none; }

@media (max-width:1024px) {
  .ust__dugme { display:grid; }
  .ust__menu {
    position:fixed; inset:84px 0 auto 0; z-index:var(--kat-acilir);
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--beyaz); border-bottom:1px solid var(--cizgi);
    padding:var(--bosluk-2) var(--bosluk-4) var(--bosluk-4);
    display:none;
  }
  .ust__menu.acik { display:flex; }
  .ust__menu a { min-height:52px; border-bottom:1px solid var(--cizgi); }
  .ust__cta { margin-top:var(--bosluk-2); justify-content:center; border-bottom:none; }
  .hero__izgara { grid-template-columns:1fr; }
  .izgara--3 { grid-template-columns:repeat(2,1fr); }
  .ekranlar__izgara { grid-template-columns:repeat(2,1fr); }
  .abonelik__izgara { grid-template-columns:1fr; }
}
@media (max-width:640px) {
  .bolum { padding:var(--bosluk-8) 0; }
  .hero { padding:var(--bosluk-8) 0; }
  .izgara--3, .ekranlar__izgara { grid-template-columns:1fr; }
  .altlik__izgara { grid-template-columns:1fr; gap:var(--bosluk-4); }
  .iletisim__izgara { flex-direction:column; align-items:flex-start; }
}