:root{
  --c1:#20c997;
  --c2:#2dd36f;
  --c3:#4dabf7;

  --text:#eef6ff;
  --header-h: 64px;
  --footer-h: 58px;
}

html, body{
  height: 100%;
  overflow: hidden;
}

/* İmleç/caret çizgisini tamamen kapatır */
body{ caret-color: transparent; }

/* İstenmeyen focus çizgilerini azaltır */
:focus{ outline: none; }

*{box-sizing:border-box;margin:0;padding:0}

body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background:
    radial-gradient(900px 520px at 18% 40%, rgba(77,171,247,.34), transparent 58%),
    radial-gradient(880px 520px at 78% 44%, rgba(32,201,151,.26), transparent 60%),
    linear-gradient(90deg, #061224 0%, #0b2b55 38%, #08152a 72%, #030813 100%);
}

/* HEADER */
.site-header{
  height: var(--header-h);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.navwrap{
  height: 100%;
  width: 100%;
  padding: 0 12px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 14px;
}

.brand{display:flex; align-items:center; text-decoration:none}
.brand img{
  height: 56px;
  width:auto;
  display:block;
}

/* Menü */
.nav{ flex: 1; display:flex; justify-content:center; }
.nav-list{ list-style:none; display:flex; gap:18px; align-items:center; }

.nav-link{
  text-decoration:none;
  color:#0b1b33;
  font-weight:900;
  font-size:15px;
  padding:10px 10px;
  border-radius:10px;
  transition:.2s ease;
}
.nav-link:hover{ background: rgba(32,201,151,.10); }
.nav-link.active{ color:#0a7f63; position:relative; }
.nav-link.active::after{
  content:"";
  position:absolute;
  left:10px; right:10px; bottom:6px;
  height:2px;
  border-radius:999px;
  background: linear-gradient(90deg, var(--c1), var(--c2), var(--c3));
}

/* Sağ */
.right-controls{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:10px;
}

/* Dil */
.lang{ position:relative; }
.lang-pill{
  display:flex; align-items:center; gap:8px;
  padding: 7px 12px;
  border:1px solid rgba(0,0,0,.12);
  border-radius:999px;
  background:#fff;
  cursor:pointer;
  font-weight:900;
  font-size:13px;
}
.flag-img{
  width:22px;height:14px;object-fit:cover;border-radius:3px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.15);
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}
.chev{opacity:.7;font-size:12px}

.lang-menu{
  position:absolute;
  right:0;
  top: calc(100% + 8px);
  width: 170px;
  background:#fff;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 14px;
  overflow:hidden;
  box-shadow: 0 18px 45px rgba(0,0,0,.12);
  display:none;
  z-index: 99999;
  pointer-events: auto;
}
.lang-menu.show{display:block;}

.lang-item{
  display:flex; align-items:center; gap:10px;
  width:100%;
  text-align:left;
  padding:10px 12px;
  background:#fff;
  border:0;
  cursor:pointer;
  font-weight:800;
}
.lang-item:hover{ background: rgba(32,201,151,.10); }
.lang-item img{
  width:22px;height:14px;border-radius:3px;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

.burger{ display:none; }

/* HERO */
.hero{
  width: 100%;
  height: calc(100vh - var(--header-h) - var(--footer-h));
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  align-items:center;
  gap: 34px;
  padding: 18px 22px;
  position: relative;
}

.hero::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.22) 48%, rgba(0,0,0,.34) 100%);
}

.mock{ position:relative; z-index:1; display:flex; justify-content:center; }
.pc{
  width: min(820px, 96%);
  height:auto;
  display:block;
  filter: drop-shadow(0 30px 80px rgba(0,0,0,.55));
}

.content{ position:relative; z-index:1; padding-right:10px; }

.title{
  font-size: clamp(44px, 4.4vw, 72px);
  line-height: 1.02;
  letter-spacing: -1px;
  font-weight: 950;
  text-shadow: 0 10px 26px rgba(0,0,0,.45);
}
.accent-line{
  height:4px; width: 180px; border-radius:999px;
  margin: 12px 0 16px;
  background: linear-gradient(90deg, var(--c1), var(--c2), var(--c3));
}
.subtitle{
  color: rgba(255,255,255,.86);
  font-size: 14.7px;
  line-height: 1.6;
  max-width: 62ch;
  text-shadow: 0 8px 20px rgba(0,0,0,.45);
}

/* Maddeler animasyon */
.yapibak-list{ list-style:none; margin-top:16px; display:grid; gap:14px; max-width:70ch; }
.yapibak-list li{
  display:flex; gap:12px; align-items:flex-start;
  color: rgba(255,255,255,.90);
  font-size: 14.8px; line-height: 1.55; font-weight: 650;
  text-shadow: 0 8px 18px rgba(0,0,0,.45);

  opacity: 0;
  transform: translateY(10px);
}
body.loaded .yapibak-list li{ opacity:1; transform:translateY(0); transition:.55s ease; }
body.loaded .yapibak-list li:nth-child(1){ transition-delay:.05s; }
body.loaded .yapibak-list li:nth-child(2){ transition-delay:.15s; }
body.loaded .yapibak-list li:nth-child(3){ transition-delay:.25s; }
body.loaded .yapibak-list li:nth-child(4){ transition-delay:.35s; }
body.loaded .yapibak-list li:nth-child(5){ transition-delay:.45s; }
body.loaded .yapibak-list li:nth-child(6){ transition-delay:.55s; }

.yapibak-list strong{ font-weight:950; color: rgba(255,255,255,.98); }

.bullet-icon{
  width:22px; height:22px; object-fit:contain;
  margin-top:3px; flex-shrink:0;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,.55)) brightness(1.25);
}

/* CTA */
.cta{ margin-top: 16px; }
.btn{
  display:inline-flex;
  align-items:center;
  text-decoration:none;
  padding: 10px 18px;
  border-radius: 999px;
  font-weight: 950;
}
.btn.primary{
  background: linear-gradient(90deg, rgba(32,201,151,.98), rgba(45,211,111,.92), rgba(77,171,247,.92));
  color: #062013;
  box-shadow: 0 18px 45px rgba(32,201,151,.20);
}
.btn.primary:hover{ transform: translateY(-1px); }

/* FOOTER */
.footer-bar{
  height: var(--footer-h);
  background:#000;
  border-top:1px solid rgba(255,255,255,.12);
  display:flex;
  align-items:center;
}
.footer-wrap{
  width:100%;
  padding: 0 12px;
  display:flex;
  align-items:center;
}
.f-left{ flex:1; display:flex; justify-content:flex-start; }
.f-center{
  flex:1;
  text-align:center;
  color: rgba(255,255,255,.85);
  font-weight: 900;
  font-size: 13px;
  letter-spacing:.3px;
}
.f-right{ flex:1; display:flex; justify-content:flex-end; }

/* Instagram çerçevesiz */
.social-ico{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border:0;
  background: transparent;
}
.social-ico img{
  width:20px;
  height:20px;
  object-fit:contain;
  display:block;
  filter: brightness(1.1);
}

.tekno{
  height:34px;
  width:auto;
  border-radius:6px;
}

@media (max-width: 980px){
  .nav{ display:none; }
  .burger{ display:flex; flex-direction:column; }
  .hero{ grid-template-columns: 1fr; gap:14px; padding: 14px 16px; }
  .pc{ width: min(680px, 96%); }
}

/* Header her şeyin üstünde olsun, overlay tıklamayı kesmesin */
.site-header{
  position: relative;
  z-index: 999999;
}

/* Hero overlay kesinlikle arkada kalsın */
.hero::after{
  z-index: 0 !important;
}

/* Hero içeriği overlay'in üstünde */
.mock, .content{
  position: relative;
  z-index: 1;
}

/* Dil menüsü en üstte ve tıklanabilir */
.lang, .lang-menu{
  position: relative;
  z-index: 9999999 !important;
}
.lang-menu{
  pointer-events: auto !important;
}

/* Patent logo (sağ alt, footer içinde değil) */
.patent-badge{
  position: fixed;
  right: 12px;
  bottom: calc(var(--footer-h) + 10px);
  height: 48px;
  width: auto;
  z-index: 9999999;
  pointer-events: none;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,.45));
}
/* Dil menüsü açılınca header kaymasın */
.lang { position: relative; }
.lang-menu{
  position: absolute !important;
  top: calc(100% + 8px) !important;
  right: 0 !important;

  /* Header yüksekliğini etkilemesin */
  margin: 0 !important;
}

/* Üst bar sabit kalsın */
.site-header{
  position: sticky;
  top: 0;
  left: 0;
  z-index: 999999;
}