/* magNaAYS – tanıtım ve demo talebi sitesi
   Kurumsal kimlik v1.0: Gece Mavisi #0B1F3A · Kabin Mavisi #1E5AA8 · Sinyal Sarısı #F2A900 · Çelik Gri #5B6675 · Bulut #F4F6F9 */
:root {
  --derin: #050D1A; --gece: #0B1F3A; --gece-2: #0F2747; --kabin: #1E5AA8; --kabin-acik: #5B8FD6;
  --altin: #F2A900; --altin-acik: #FFCB47; --sampanya: #EBD9AE;
  --bulut: #F4F6F9; --yazi: #E8EEF6; --soluk: #9AAABF; --celik: #5B6675;
  --cizgi: rgba(255, 255, 255, .09); --cizgi-altin: rgba(242, 169, 0, .32);
  --yesil: #2BB673; --mavi: #3D8BE0; --sari: #F2C230; --kirmizi: #E2554A;
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --kap: 1200px; --yan: clamp(16px, 4vw, 40px);
  --golge: 0 30px 80px -20px rgba(0, 0, 0, .65), 0 0 0 1px rgba(255, 255, 255, .06);
  --gecis: cubic-bezier(.2, .7, .2, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--derin); color: var(--yazi); font: 400 17px/1.65 var(--sans); overflow-x: hidden;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
::selection { background: var(--altin); color: var(--gece); }
.simgeler { position: absolute; width: 0; height: 0; overflow: hidden; }
svg use { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.kap { width: 100%; max-width: var(--kap); margin: 0 auto; padding: 0 var(--yan); }
.atla { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--altin); color: var(--gece); padding: 10px 16px; border-radius: 8px; font-weight: 600; }
.atla:focus { left: 16px; }
:focus-visible { outline: 2px solid var(--altin); outline-offset: 3px; }
section[id] { scroll-margin-top: 76px; }

/* ---------- Tipografi ---------- */
h1, h2, h3 { margin: 0; font-weight: 500; letter-spacing: -.01em; }
h1, h2 { font-family: var(--serif); font-optical-sizing: auto; }
h1 em, h2 em, .ara-ic em { font-style: italic; font-weight: 400;
  background: linear-gradient(100deg, var(--altin-acik) 0%, var(--altin) 45%, var(--sampanya) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
h2 { font-size: clamp(32px, 4.6vw, 56px); line-height: 1.08; }
h3 { font-size: 20px; font-weight: 600; letter-spacing: -.005em; }
.bolum-no { margin: 0 0 18px; font: 600 12px/1 var(--sans); letter-spacing: .28em; text-transform: uppercase; color: var(--altin);
  display: inline-flex; align-items: center; gap: 12px; }
.bolum-no::after { content: ""; width: 48px; height: 1px; background: var(--cizgi-altin); }
.bolum-alt { color: var(--soluk); font-size: clamp(16px, 1.6vw, 19px); max-width: 640px; margin: 22px 0 0; }

/* ---------- Düğmeler ---------- */
.dugme { --y: 54px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: var(--y); padding: 0 26px;
  border-radius: 999px; font: 600 16px/1 var(--sans); text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: transform .35s var(--gecis), box-shadow .35s var(--gecis), background .35s, border-color .35s, color .35s; white-space: nowrap; }
.dugme svg { width: 18px; height: 18px; transition: transform .35s var(--gecis); }
.dugme:hover svg { transform: translateX(4px); }
.dugme.altin { color: #1A1300; background: linear-gradient(180deg, #FFC93A, var(--altin)); border-color: #FFD56A;
  box-shadow: 0 10px 30px -8px rgba(242, 169, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .45); }
.dugme.altin:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -10px rgba(242, 169, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .5); }
.dugme.hayalet { color: var(--yazi); border-color: rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .02); }
.dugme.hayalet:hover { border-color: var(--altin); color: #fff; background: rgba(242, 169, 0, .06); }
.dugme.kucuk { --y: 42px; padding: 0 18px; font-size: 14px; }
.dugme:disabled { opacity: .6; cursor: progress; transform: none; }

/* ---------- Üst çubuk ---------- */
.ust { position: fixed; inset: 0 0 auto; z-index: 40; transition: background .4s, border-color .4s, backdrop-filter .4s; border-bottom: 1px solid transparent; }
.ust.kaydi { background: rgba(5, 13, 26, .78); backdrop-filter: saturate(140%) blur(14px); -webkit-backdrop-filter: saturate(140%) blur(14px); border-bottom-color: var(--cizgi); }
.ust-ic { display: flex; align-items: center; gap: 28px; height: 76px; }
.marka img { height: 36px; width: auto; }
.menu { display: flex; gap: 30px; margin-left: auto; }
.menu a { text-decoration: none; font-size: 15px; color: var(--soluk); position: relative; padding: 6px 0; transition: color .3s; }
.menu a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--altin); transform: scaleX(0); transition: transform .35s var(--gecis); }
.menu a:hover { color: #fff; } .menu a:hover::after { transform: scaleX(1); }
.menu-ac { display: none; }

/* ---------- Kat göstergesi ---------- */
.kat-gostergesi { position: fixed; right: 26px; top: 50%; transform: translateY(-50%); z-index: 30; display: flex; flex-direction: column; align-items: center; gap: 10px;
  opacity: 0; transition: opacity .6s; pointer-events: none; }
.kat-gostergesi.gorunur { opacity: 1; }
.kat-ekran { width: 58px; height: 58px; border-radius: 14px; background: #02060D; border: 1px solid var(--cizgi-altin);
  display: flex; align-items: center; justify-content: center; gap: 4px; color: var(--altin);
  box-shadow: inset 0 0 18px rgba(242, 169, 0, .12), 0 10px 30px rgba(0, 0, 0, .5); }
.kat-ekran svg { width: 12px; height: 12px; } .kat-ekran svg use { fill: currentColor; stroke: none; }
.kat-ekran b { font: 600 24px/1 ui-monospace, 'Cascadia Mono', Consolas, monospace; text-shadow: 0 0 12px rgba(242, 169, 0, .55); min-width: 16px; text-align: center; }
.kat-ekran.degisti b { animation: katCevir .5s var(--gecis); }
@keyframes katCevir { from { transform: translateY(60%); opacity: 0; } to { transform: none; opacity: 1; } }
.kat-ad { font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--soluk); writing-mode: vertical-rl; transform: rotate(180deg); }
.kat-cizelge { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column-reverse; gap: 6px; }
.kat-cizelge li { width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 255, 255, .18); transition: background .3s, transform .3s; }
.kat-cizelge li.aktif { background: var(--altin); transform: scale(1.5); box-shadow: 0 0 8px var(--altin); }

/* ---------- Giriş (zemin kat) ---------- */
.giris { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding: 120px 0 90px; overflow: hidden; isolation: isolate; }
.giris-zemin { position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(1200px 700px at 78% 18%, rgba(30, 90, 168, .38), transparent 60%),
              radial-gradient(900px 600px at 10% 90%, rgba(242, 169, 0, .10), transparent 60%),
              linear-gradient(180deg, #071427 0%, var(--derin) 100%); }
.kuyu { position: absolute; inset: 0; opacity: .5;
  background-image: linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(0deg, rgba(255, 255, 255, .03) 1px, transparent 1px);
  background-size: 120px 120px; -webkit-mask-image: radial-gradient(ellipse at 60% 40%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse at 60% 40%, #000 20%, transparent 75%);
  animation: kuyuAkis 22s linear infinite; }
@keyframes kuyuAkis { to { background-position: 0 -120px, 0 -120px; } }
.parilti { position: absolute; width: 2px; height: 34vh; left: 58%; top: -34vh; background: linear-gradient(180deg, transparent, var(--altin), transparent);
  filter: blur(.4px); opacity: .7; animation: kabin 7s var(--gecis) infinite; }
@keyframes kabin { 0% { transform: translateY(0); } 60%, 100% { transform: translateY(170vh); } }
.giris-ic { display: grid; grid-template-columns: 1.02fr 1fr; gap: 56px; align-items: center; }
.ust-etiket { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 26px; padding: 8px 16px 8px 12px; border-radius: 999px;
  border: 1px solid var(--cizgi); background: rgba(255, 255, 255, .03); color: var(--sampanya); font-size: 13.5px; letter-spacing: .01em; }
.nokta { width: 8px; height: 8px; border-radius: 50%; background: var(--altin); box-shadow: 0 0 0 4px rgba(242, 169, 0, .18); animation: nabiz 2.4s infinite; }
@keyframes nabiz { 50% { box-shadow: 0 0 0 8px rgba(242, 169, 0, 0); } }
h1 { font-size: clamp(40px, 6.2vw, 80px); line-height: 1.02; letter-spacing: -.02em; }
h1 em { display: inline; }
.giris-alt { margin: 28px 0 0; max-width: 560px; color: var(--soluk); font-size: clamp(17px, 1.6vw, 20px); }
.giris-alt b { color: var(--yazi); font-weight: 600; }
.dugmeler { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px; }
.giris-olcu { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 54px 0 0; border-top: 1px solid var(--cizgi); max-width: 600px; }
.giris-olcu div { padding: 20px 18px 0 0; }
.giris-olcu div + div { padding-left: 18px; border-left: 1px solid var(--cizgi); }
.giris-olcu dt { font: 500 30px/1 var(--serif); color: #fff; }
.giris-olcu dd { margin: 10px 0 0; font-size: 13px; line-height: 1.45; color: var(--soluk); }
.giris-sahne { position: relative; aspect-ratio: 1.1; perspective: 1600px; }
.cerceve { border-radius: 14px; overflow: hidden; background: #0A1628; box-shadow: var(--golge); }
.cerceve img { width: 100%; height: auto; }
/* Ekran görüntüleri sürüklenip sağ tıkla kolayca kaydedilmesin (caydırıcı; görseller zaten küçültülmüş ve filigranlı) */
.cerceve img, .giris-sahne img { -webkit-user-select: none; user-select: none; -webkit-user-drag: none; pointer-events: none; -webkit-touch-callout: none; }
.cubuk { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; background: #0D1B30; border-bottom: 1px solid var(--cizgi); }
.cubuk i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .16); }
.cubuk span { margin-left: 10px; font-size: 11.5px; color: var(--soluk); letter-spacing: .02em; }
.ana-ekran { position: absolute; width: 112%; left: 0; top: 8%; transform: rotateY(-14deg) rotateX(4deg) translateZ(0); transform-origin: left center;
  animation: suzul 9s ease-in-out infinite; }
.ana-ekran::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 40%, rgba(255, 255, 255, .07) 50%, transparent 60%);
  background-size: 250% 100%; animation: parla 7s ease-in-out infinite; pointer-events: none; }
@keyframes parla { 0%, 30% { background-position: 120% 0; } 70%, 100% { background-position: -40% 0; } }
@keyframes suzul { 50% { transform: rotateY(-12deg) rotateX(3deg) translateY(-10px); } }
.tel-ekran { position: absolute; width: 30%; right: -2%; bottom: 0; border-radius: 26px; border: 6px solid #0A1424; box-shadow: var(--golge), 0 0 0 1px rgba(242, 169, 0, .25);
  animation: suzul2 8s ease-in-out infinite; }
@keyframes suzul2 { 50% { transform: translateY(-14px); } }
.rozet-yuzen { position: absolute; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 14px;
  background: rgba(8, 20, 38, .82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--cizgi);
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .7); font-size: 12.5px; color: var(--soluk); }
.rozet-yuzen b { display: block; color: #fff; font-size: 14px; font-weight: 600; }
.rozet-yuzen > svg { width: 34px; height: 34px; padding: 7px; border-radius: 10px; background: rgba(242, 169, 0, .14); color: var(--altin); flex: none; }
.r1 { left: -6%; bottom: 12%; animation: suzul2 7s ease-in-out infinite .6s; }
.r2 { right: 22%; top: 0; animation: suzul2 9s ease-in-out infinite 1.2s; }
.etiket-renk { width: 14px; height: 14px; border-radius: 4px; flex: none; }
.etiket-renk.yesil { background: var(--yesil); box-shadow: 0 0 12px rgba(43, 182, 115, .6); }
.asagi { position: absolute; left: 50%; bottom: 26px; width: 26px; height: 42px; margin-left: -13px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 14px; }
.asagi span { position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--altin); animation: asagi 2s infinite; }
@keyframes asagi { 0% { opacity: 0; transform: translateY(0); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(14px); } }

/* ---------- Bölümler ---------- */
.bolum { position: relative; padding: clamp(90px, 12vw, 150px) 0; }
.bolum-bas { max-width: 760px; margin-bottom: clamp(48px, 6vw, 72px); }
.bolum + .bolum::before { content: ""; position: absolute; top: 0; left: 50%; width: min(var(--kap), 92%); transform: translateX(-50%); height: 1px;
  background: linear-gradient(90deg, transparent, var(--cizgi), transparent); }

/* Merak */
.merak { background: radial-gradient(800px 400px at 15% 20%, rgba(242, 169, 0, .06), transparent 70%); }
.merak-soru { max-width: 900px; }
.merak h2 { font-size: clamp(34px, 5.2vw, 64px); }
.karsilastir { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 64px; }
.ks { padding: 30px 28px; border-radius: 20px; border: 1px solid var(--cizgi); background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .01)); }
.ks p { margin: 8px 0 0; color: var(--soluk); font-size: 15.5px; }
.ks .iyi { color: var(--yazi); font-size: 17px; }
.once, .sonra { display: block; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; }
.once { color: #7C8BA0; text-decoration: line-through; text-decoration-color: rgba(226, 85, 74, .6); }
.sonra { margin-top: 24px; padding-top: 22px; border-top: 1px dashed var(--cizgi); color: var(--altin); text-transform: none; letter-spacing: .04em; font-size: 13px; font-weight: 600; }

/* Zincir */
.zincir { list-style: none; margin: 0 0 90px; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; position: relative; }
.zincir::before { content: ""; position: absolute; left: 8%; right: 8%; top: 31px; height: 1px; background: linear-gradient(90deg, transparent, var(--cizgi-altin) 10%, var(--cizgi-altin) 90%, transparent); }
.zincir li { position: relative; text-align: center; padding: 0 10px; display: flex; flex-direction: column; align-items: center; }
.halka { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--derin); border: 1px solid var(--cizgi-altin);
  color: var(--altin); margin-bottom: 18px; box-shadow: 0 0 0 8px var(--derin); transition: background .4s, color .4s, transform .4s var(--gecis); }
.halka svg { width: 26px; height: 26px; }
.zincir li:hover .halka { background: var(--altin); color: var(--gece); transform: translateY(-4px); }
.zincir b { font-size: 16px; font-weight: 600; color: #fff; }
.zincir li > span:last-child { margin-top: 6px; font-size: 13.5px; color: var(--soluk); line-height: 1.5; }

.moduller { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.modul { position: relative; padding: 32px 30px; border-radius: 22px; border: 1px solid var(--cizgi); overflow: hidden;
  background: linear-gradient(160deg, rgba(30, 90, 168, .12), rgba(255, 255, 255, .015) 55%); transition: border-color .4s, transform .5s var(--gecis); }
.modul::before { content: ""; position: absolute; inset: 0; background: radial-gradient(400px 200px at var(--mx, 50%) var(--my, 0%), rgba(242, 169, 0, .10), transparent 70%);
  opacity: 0; transition: opacity .4s; pointer-events: none; }
.modul:hover { border-color: var(--cizgi-altin); transform: translateY(-4px); }
.modul:hover::before { opacity: 1; }
.modul.genis { grid-column: span 2; background: linear-gradient(140deg, rgba(242, 169, 0, .10), rgba(30, 90, 168, .14) 60%, rgba(255, 255, 255, .01)); }
.m-ikon { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 22px; color: var(--altin);
  background: rgba(242, 169, 0, .1); border: 1px solid rgba(242, 169, 0, .22); }
.m-ikon svg { width: 24px; height: 24px; }
.modul p { margin: 10px 0 0; color: var(--soluk); font-size: 15.5px; }
.etiketler { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; }
.etiketler li { font-size: 12.5px; font-weight: 600; padding: 6px 12px 6px 26px; border-radius: 999px; border: 1px solid var(--cizgi); position: relative; }
.etiketler li::before { content: ""; position: absolute; left: 10px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 3px; }
.etiketler .yesil::before { background: var(--yesil); } .etiketler .mavi::before { background: var(--mavi); }
.etiketler .sari::before { background: var(--sari); } .etiketler .kirmizi::before { background: var(--kirmizi); }
.etiketler .muhurlu::before { background: #7A2A22; box-shadow: 0 0 0 1px rgba(255, 255, 255, .25); }
.etiketler li:not([class]) { padding-left: 12px; color: var(--sampanya); }
.modul p b { color: var(--yazi); font-weight: 600; }

/* Sürümler */
.surum-bolum { background: linear-gradient(180deg, transparent, rgba(11, 31, 58, .55) 30%, rgba(11, 31, 58, .55) 70%, transparent); }
.surumler { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.surum { position: relative; padding: 46px 42px 40px; border-radius: 26px; background: linear-gradient(180deg, #0E223F, #091628);
  border: 1px solid var(--cizgi); overflow: hidden; display: flex; flex-direction: column; }
.surum::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, transparent, var(--altin), transparent); opacity: .7; }
.surum::after { content: ""; position: absolute; width: 360px; height: 360px; right: -120px; top: -160px; border-radius: 50%;
  background: radial-gradient(circle, rgba(242, 169, 0, .14), transparent 65%); pointer-events: none; }
.surum-ust { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: .02em; color: var(--soluk); }
.surum h3 { font: 500 clamp(44px, 5vw, 60px)/1 var(--serif); margin-top: 6px; color: #fff; letter-spacing: -.02em; }
.surum-kim { margin: 14px 0 0; color: var(--altin); font-size: 14.5px; }
.surum ul { list-style: none; margin: 30px 0 36px; padding: 0; display: grid; gap: 14px; }
.surum li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; }
.surum li svg { width: 20px; height: 20px; flex: none; margin-top: 3px; color: var(--altin); }
.surum .dugme { align-self: flex-start; margin-top: auto; }

/* Ekranlar */
.vitrin { display: grid; grid-template-columns: 300px 1fr; gap: 36px; align-items: center; }
.vitrin-sekmeler { display: flex; flex-direction: column; gap: 6px; }
.vitrin-sekmeler button { text-align: left; background: none; border: 0; border-left: 2px solid var(--cizgi); color: var(--soluk); padding: 16px 20px; cursor: pointer;
  font: inherit; transition: border-color .35s, color .35s, background .35s; border-radius: 0 12px 12px 0; }
.vitrin-sekmeler b { display: block; font-size: 17px; font-weight: 600; color: var(--yazi); }
.vitrin-sekmeler span { font-size: 13.5px; }
.vitrin-sekmeler button[aria-selected="true"] { border-left-color: var(--altin); background: linear-gradient(90deg, rgba(242, 169, 0, .08), transparent); }
.vitrin-sekmeler button[aria-selected="true"] b { color: #fff; }
.vitrin-sahne { position: relative; min-width: 0; }
.vitrin-pano { animation: belirPano .7s var(--gecis); }
.vitrin-pano[hidden] { display: none; }
@keyframes belirPano { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
.vitrin-pano .cerceve { box-shadow: var(--golge), 0 40px 120px -40px rgba(30, 90, 168, .55); }
.telefonlar { display: flex; justify-content: center; gap: 28px; }
.cerceve.tel { width: min(260px, 44%); border-radius: 28px; border: 7px solid #0A1424; }
.not-kucuk { margin: 26px 0 0; font-size: 12.5px; color: #6E7E94; text-align: right; }

/* Güven */
.guven-bolum { background: radial-gradient(900px 500px at 85% 10%, rgba(30, 90, 168, .22), transparent 65%); }
.guven-bas { max-width: 780px; margin-bottom: 64px; }
.guven-bas h2 { font-size: clamp(38px, 5.6vw, 72px); }
.guvenceler { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--cizgi); border-left: 1px solid var(--cizgi); }
.guvence { padding: 34px 30px; border-right: 1px solid var(--cizgi); border-bottom: 1px solid var(--cizgi); transition: background .4s; }
.guvence:hover { background: rgba(255, 255, 255, .025); }
.guvence svg { width: 30px; height: 30px; color: var(--altin); margin-bottom: 20px; }
.guvence b { display: block; font-size: 17.5px; font-weight: 600; color: #fff; }
.guvence span { display: block; margin-top: 8px; color: var(--soluk); font-size: 15px; }

/* Ara çağrı */
.ara-cagri { padding: 0 0 clamp(60px, 8vw, 100px); }
.ara-ic { display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; padding-top: 54px; padding-bottom: 54px;
  border-radius: 28px; background: linear-gradient(120deg, rgba(242, 169, 0, .14), rgba(30, 90, 168, .22)); border: 1px solid var(--cizgi-altin);
  max-width: calc(var(--kap) - 2 * var(--yan)); }
.ara-ic p { margin: 0; font: 400 clamp(24px, 3vw, 36px)/1.2 var(--serif); max-width: 640px; color: #fff; }

/* Süreç */
.adimlar { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: adim; }
.adimlar li { position: relative; padding: 34px 28px 30px; border-radius: 22px; border: 1px solid var(--cizgi); background: rgba(255, 255, 255, .018); }
.adim-no { display: block; font: 400 56px/1 var(--serif); color: transparent; -webkit-text-stroke: 1px var(--cizgi-altin); margin-bottom: 22px; }
.adimlar li:first-child .adim-no { color: var(--altin); -webkit-text-stroke: 0; }
.adimlar b { display: block; font-size: 18px; font-weight: 600; color: #fff; }
.adimlar li > span:last-child { display: block; margin-top: 8px; color: var(--soluk); font-size: 15px; }

/* SSS */
.sss-ic { display: grid; grid-template-columns: .8fr 1.2fr; gap: 60px; align-items: start; }
.sss-ic .bolum-bas { position: sticky; top: 110px; }
.sss details { border-bottom: 1px solid var(--cizgi); }
.sss details:first-child { border-top: 1px solid var(--cizgi); }
.sss summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 24px 0;
  font-size: 18px; font-weight: 500; color: #fff; }
.sss summary::-webkit-details-marker { display: none; }
.sss summary svg { width: 22px; height: 22px; flex: none; color: var(--altin); transition: transform .4s var(--gecis); }
.sss details[open] summary svg { transform: rotate(45deg); }
.sss details p { margin: -6px 0 26px; color: var(--soluk); font-size: 16px; max-width: 640px; }
.sss details p b { color: var(--yazi); }

/* ---------- Demo ---------- */
.demo-bolum { overflow: hidden; isolation: isolate; }
.demo-zemin { position: absolute; inset: 0; z-index: -1; background: radial-gradient(900px 600px at 20% 30%, rgba(242, 169, 0, .12), transparent 60%),
  radial-gradient(900px 700px at 90% 80%, rgba(30, 90, 168, .32), transparent 60%), linear-gradient(180deg, var(--derin), #071833); }
.demo-ic { display: grid; grid-template-columns: .85fr 1.15fr; gap: 64px; align-items: start; }
.demo-yan { position: sticky; top: 110px; }
.demo-yan h2 { font-size: clamp(36px, 4.8vw, 60px); }
.demo-vaat { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 22px; }
.demo-vaat li { display: flex; gap: 16px; align-items: flex-start; }
.demo-vaat svg { width: 36px; height: 36px; flex: none; padding: 8px; border-radius: 50%; color: var(--gece); background: var(--altin); }
.demo-vaat svg use { stroke-width: 2.4; }
.demo-vaat b { display: block; color: #fff; font-weight: 600; }
.demo-vaat span { color: var(--soluk); font-size: 15px; }
.demo-kart { position: relative; padding: clamp(26px, 4vw, 44px); border-radius: 28px; background: linear-gradient(180deg, rgba(16, 36, 66, .92), rgba(9, 22, 41, .95));
  border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 50px 120px -40px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .06); }
.demo-kart::before { content: ""; position: absolute; inset: -1px; border-radius: 29px; padding: 1px; pointer-events: none;
  background: linear-gradient(140deg, rgba(242, 169, 0, .65), transparent 30%, transparent 70%, rgba(91, 143, 214, .5));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.form-bas { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 26px; padding-bottom: 18px; border-bottom: 1px solid var(--cizgi); }
.form-bas b { font: 500 26px/1.1 var(--serif); color: #fff; }
.form-bas span { font-size: 12.5px; color: var(--soluk); }
.izgara { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 18px; }
.alan { display: flex; flex-direction: column; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.alan.tam { grid-column: 1 / -1; }
.alan label, .alan legend { font-size: 13px; font-weight: 500; color: var(--sampanya); letter-spacing: .01em; padding: 0; }
.alan legend { margin-bottom: 10px; }
.alan input, .alan select, .alan textarea { width: 100%; font: 400 16px/1.4 var(--sans); color: #fff; background: rgba(2, 8, 18, .55);
  border: 1px solid rgba(255, 255, 255, .13); border-radius: 12px; padding: 14px 15px; transition: border-color .3s, box-shadow .3s, background .3s; }
.alan select { appearance: none; -webkit-appearance: none; padding-right: 40px; background-image: linear-gradient(45deg, transparent 50%, var(--altin) 50%), linear-gradient(135deg, var(--altin) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.alan select option { background: var(--gece); color: #fff; }
.alan textarea { resize: vertical; min-height: 92px; }
.alan input::placeholder, .alan textarea::placeholder { color: #5F7089; }
.alan input:focus, .alan select:focus, .alan textarea:focus { outline: none; border-color: var(--altin); box-shadow: 0 0 0 4px rgba(242, 169, 0, .14); background: rgba(2, 8, 18, .75); }
.alan.hatali input, .alan.hatali select { border-color: var(--kirmizi); }
.tercihler { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tercih { position: relative; cursor: pointer; }
.tercih input { position: absolute; opacity: 0; inset: 0; }
.tercih span { display: block; height: 100%; padding: 14px 14px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .13); background: rgba(2, 8, 18, .4);
  font-size: 13px; color: var(--soluk); transition: border-color .3s, background .3s; }
.tercih b { display: block; font-size: 15px; color: #fff; font-weight: 600; margin-bottom: 2px; }
.tercih input:checked + span { border-color: var(--altin); background: rgba(242, 169, 0, .1); box-shadow: inset 0 0 0 1px var(--altin); }
.tercih input:focus-visible + span { outline: 2px solid var(--altin); outline-offset: 2px; }
.cipler { display: flex; flex-wrap: wrap; gap: 8px; }
.cipler label { position: relative; cursor: pointer; }
.cipler input { position: absolute; opacity: 0; inset: 0; }
.cipler span { display: inline-block; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .14); font-size: 13.5px; color: var(--soluk);
  transition: all .25s; }
.cipler input:checked + span { color: var(--gece); background: var(--altin); border-color: var(--altin); font-weight: 600; }
.cipler input:focus-visible + span { outline: 2px solid var(--altin); outline-offset: 2px; }
.gizli-alan { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.onay { flex-direction: row; align-items: flex-start; gap: 12px; font-size: 13.5px; color: var(--soluk); cursor: pointer; }
.onay input { width: 20px; height: 20px; flex: none; margin: 2px 0 0; accent-color: var(--altin); }
.onay a { color: var(--altin); }
.genis-dugme { width: 100%; margin-top: 26px; --y: 60px; font-size: 17px; }
.form-sonuc { margin: 14px 0 0; min-height: 1.4em; font-size: 14.5px; text-align: center; }
.form-sonuc.hata { color: #FF8A80; } .form-sonuc.bilgi { color: var(--soluk); }
.tesekkur { text-align: center; padding: 30px 6px; animation: belirPano .8s var(--gecis); outline: none; }
.tesekkur-isaret { width: 84px; height: 84px; margin: 0 auto 24px; border-radius: 50%; display: grid; place-items: center; color: var(--gece);
  background: radial-gradient(circle at 30% 30%, var(--altin-acik), var(--altin)); box-shadow: 0 0 0 10px rgba(242, 169, 0, .12), 0 20px 50px -10px rgba(242, 169, 0, .6); }
.tesekkur-isaret svg { width: 40px; height: 40px; } .tesekkur-isaret svg use { stroke-width: 2.6; stroke-dasharray: 30; stroke-dashoffset: 30; animation: ciz .8s .3s forwards; }
@keyframes ciz { to { stroke-dashoffset: 0; } }
.tesekkur h3 { font: 500 34px/1.1 var(--serif); color: #fff; }
.tesekkur p { color: var(--soluk); margin: 14px auto 0; max-width: 440px; }
.tesekkur p b { color: var(--altin); font-family: ui-monospace, Consolas, monospace; letter-spacing: .04em; }
.tesekkur ol { text-align: left; max-width: 420px; margin: 28px auto 0; padding: 22px 22px 22px 44px; border-radius: 16px; border: 1px solid var(--cizgi); color: var(--yazi); font-size: 15px; }
.tesekkur li + li { margin-top: 8px; }

/* ---------- Alt bilgi ---------- */
.alt-bilgi { border-top: 1px solid var(--cizgi); background: #030810; padding: 64px 0 40px; color: var(--soluk); font-size: 14px; }
.alt-ic { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.alt-marka img { width: 230px; height: auto; }
.alt-marka p { margin: 18px 0 0; max-width: 360px; }
.alt-bilgi nav { display: flex; flex-wrap: wrap; gap: 14px 28px; align-content: flex-start; }
.alt-bilgi nav a { text-decoration: none; } .alt-bilgi nav a:hover { color: var(--altin); }
.telif-satir { margin-top: 44px; padding-top: 26px; border-top: 1px solid var(--cizgi); font-size: 12.5px; }
.telif-satir p { margin: 0; } .telif-satir .telif { margin-top: 8px; color: #6E7E94; max-width: 820px; }

.mobil-cta { display: none; }

/* ---------- Belirme ---------- */
.js .belir { opacity: 0; transform: translateY(26px); transition: opacity 1s var(--gecis), transform 1s var(--gecis); transition-delay: var(--gecikme, 0s); }
.js .belir.gorundu { opacity: 1; transform: none; }

/* ---------- Belge sayfaları (KVKK, 404) ---------- */
.belge { max-width: 820px; margin: 0 auto; padding: 150px var(--yan) 100px; }
.belge h1 { font-size: clamp(34px, 5vw, 54px); margin-bottom: 30px; }
.belge h2 { font-size: 24px; margin: 40px 0 10px; font-family: var(--sans); font-weight: 600; color: #fff; }
.belge p, .belge li { color: var(--soluk); }
.belge b { color: var(--yazi); }
.belge a { color: var(--altin); }
.bulunamadi { text-align: center; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top: 60px; }
.bulunamadi img { width: 88px; height: 88px; margin-bottom: 28px; }

/* ---------- Duyarlı ---------- */
@media (max-width: 1260px) { .kat-gostergesi { right: 12px; } }
@media (max-width: 1100px) {
  .kat-gostergesi { display: none; }
  .giris-ic { grid-template-columns: 1fr; gap: 64px; }
  .giris-sahne { max-width: 720px; width: 100%; margin: 0 auto; aspect-ratio: 1.35; }
  .zincir { grid-template-columns: repeat(3, 1fr); row-gap: 44px; } .zincir::before { display: none; }
  .moduller { grid-template-columns: 1fr 1fr; } .modul.genis { grid-column: 1 / -1; }
  .vitrin { grid-template-columns: 1fr; } .vitrin-sekmeler { flex-direction: row; overflow-x: auto; scrollbar-width: none; }
  .vitrin-sekmeler button { border-left: 0; border-bottom: 2px solid var(--cizgi); border-radius: 0; flex: 1 0 auto; }
  .vitrin-sekmeler button[aria-selected="true"] { border-bottom-color: var(--altin); background: none; }
  .vitrin-sekmeler span { display: none; }
  .adimlar { grid-template-columns: 1fr 1fr; }
  .sss-ic, .demo-ic { grid-template-columns: 1fr; gap: 40px; }
  .sss-ic .bolum-bas, .demo-yan { position: static; }
}
@media (max-width: 860px) {
  .menu { position: fixed; inset: 76px 0 auto; flex-direction: column; gap: 0; padding: 10px var(--yan) 24px; background: rgba(5, 13, 26, .97);
    border-bottom: 1px solid var(--cizgi); transform: translateY(-12px); opacity: 0; visibility: hidden; transition: all .35s var(--gecis); }
  .menu.acik { transform: none; opacity: 1; visibility: visible; }
  .menu a { padding: 16px 0; font-size: 18px; color: var(--yazi); border-bottom: 1px solid var(--cizgi); }
  .menu a::after { display: none; }
  .menu-ac { display: flex; flex-direction: column; justify-content: center; gap: 7px; width: 44px; height: 44px; margin-left: 4px; padding: 0 11px;
    background: none; border: 1px solid var(--cizgi); border-radius: 12px; cursor: pointer; }
  .menu-ac span { display: block; height: 1.5px; background: #fff; transition: transform .3s; }
  .menu-ac[aria-expanded="true"] span:first-child { transform: translateY(4.25px) rotate(45deg); }
  .menu-ac[aria-expanded="true"] span:last-child { transform: translateY(-4.25px) rotate(-45deg); }
  .ust-cta { margin-left: auto; }
  .karsilastir, .surumler, .guvenceler { grid-template-columns: 1fr; }
  .surum { padding: 36px 26px 32px; }
}
@media (max-width: 600px) {
  body { font-size: 16px; }
  .ust-ic { height: 64px; gap: 10px; } section[id] { scroll-margin-top: 64px; }
  .menu { inset: 64px 0 auto; }
  .marka img { height: 30px; }
  .ust-cta { display: none; }
  .menu-ac { margin-left: auto; }
  .giris { padding: 100px 0 80px; }
  .dugmeler .dugme { width: 100%; }
  .giris-olcu { grid-template-columns: 1fr; }
  .giris-olcu div, .giris-olcu div + div { padding: 16px 0; border-left: 0; border-bottom: 1px solid var(--cizgi); display: flex; align-items: baseline; gap: 16px; }
  .giris-olcu dt { font-size: 26px; min-width: 96px; } .giris-olcu dd { margin: 0; }
  .giris-sahne { aspect-ratio: 1.15; }
  .ana-ekran { width: 100%; transform: none; animation: none; top: 4%; }
  .tel-ekran { width: 36%; right: 0; border-width: 4px; border-radius: 18px; }
  .rozet-yuzen { font-size: 11px; padding: 9px 12px; } .rozet-yuzen b { font-size: 12.5px; }
  .r1 { left: 0; bottom: 4%; } .r2 { display: none; }
  .asagi { display: none; }
  .zincir { grid-template-columns: 1fr 1fr; }
  .moduller { grid-template-columns: 1fr; }
  .modul { padding: 26px 22px; }
  .adimlar { grid-template-columns: 1fr; }
  .ara-ic { border-radius: 22px; padding: 36px 22px; margin: 0 16px; max-width: none; width: auto; }
  .ara-ic .dugme { width: 100%; }
  .guvence { padding: 26px 22px; }
  .izgara { grid-template-columns: 1fr; }
  .tercihler { grid-template-columns: 1fr; }
  .tercih span { display: flex; align-items: baseline; gap: 8px; } .tercih b { margin: 0; }
  .demo-kart { border-radius: 22px; } .demo-kart::before { border-radius: 23px; }
  .cerceve.tel { border-width: 5px; border-radius: 20px; }
  .telefonlar { gap: 14px; }
  .not-kucuk { text-align: left; }
  .mobil-cta { display: flex; position: fixed; left: 16px; right: 16px; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 35; height: 54px; border-radius: 999px;
    align-items: center; justify-content: center; gap: 10px; font-weight: 600; text-decoration: none; color: #1A1300;
    background: linear-gradient(180deg, #FFC93A, var(--altin)); box-shadow: 0 14px 34px -8px rgba(0, 0, 0, .7), 0 6px 20px -6px rgba(242, 169, 0, .6);
    transform: translateY(140%); transition: transform .45s var(--gecis); }
  .mobil-cta svg { width: 18px; height: 18px; }
  .mobil-cta.gorunur { transform: none; }
  .alt-bilgi { padding-bottom: 100px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .js .belir { opacity: 1; transform: none; }
}