:root{
  --bg0:#070a12;
  --bg1:#0b1022;
  --card: rgba(18, 25, 46, .62);
  --card2: rgba(14, 20, 40, .72);
  --stroke: rgba(255,255,255,.12);
  --stroke2: rgba(255,255,255,.18);
  --text:#e9eefc;
  --muted:#b6c1e8;
  --muted2:#8ea0d8;
  --accent:#f6c247;
  --accent2:#52d2ff;
  --accent3:#8b5cf6;
  --good:#22c55e;
  --shadow: 0 24px 70px rgba(0,0,0,.55);
  --shadow2: 0 10px 30px rgba(0,0,0,.35);
  --r: 18px;
  --r2: 26px;
  --navH: 74px;
  --footH: 64px;
  --maxW: 100vw;
  --ease: cubic-bezier(.2,.9,.1,1);
  --ease2: cubic-bezier(.16,1,.3,1);
  --dur: 620ms;
}

/* reset */
*{box-sizing:border-box}
html,body{height:100%; width:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Helvetica Neue", sans-serif;
  color:var(--text);
  background: radial-gradient(1200px 800px at 10% 10%, var(--panelGlow1, rgba(82,210,255,.14)), transparent 60%),
              radial-gradient(900px 650px at 90% 20%, var(--panelGlow2, rgba(139,92,246,.16)), transparent 58%),
              radial-gradient(900px 700px at 40% 100%, rgba(var(--theme-rgb,127,174,255),.10), transparent 55%),
              linear-gradient(180deg, var(--bg0), var(--bg1));
  overflow:hidden; /* sağ scrollbar yok */
}

a{color:inherit; text-decoration:none}
button{font-family:inherit}

::selection{background: rgba(82,210,255,.25)}
/* yıldız/dot texture */
body::before{
  content:"";
  position:fixed; inset:0;
  background-image:
    radial-gradient(rgba(255,255,255,.09) 1px, transparent 1px),
    radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 40px 40px, 90px 90px;
  background-position: 0 0, 20px 30px;
  opacity:.35;
  pointer-events:none;
}

/* layout */
/* Mobil tarayıcılarda adres çubuğu (100vh sapması) için JS ile --vh ayarlanır */
.wrap{
  height: calc(var(--vh, 1vh) * 100);
  min-height: 100vh;
  width:100vw;
  display:flex;
  flex-direction:column;
}
.nav{
  height:var(--navH);
  display:flex; align-items:center; justify-content:center;
  position:relative;
  padding: 0 18px;
}
.navInner{
  width:min(var(--maxW), calc(100vw - 36px));
  display:flex; align-items:center; justify-content:space-between;
  gap:14px;
}
.brand{
  display:flex; align-items:center; gap:12px;
  user-select:none;
}
.badgeLogo{
  width:44px; height:44px; border-radius:14px;
  background: radial-gradient(26px 26px at 30% 30%, rgba(82,210,255,.35), rgba(139,92,246,.22) 55%, rgba(0,0,0,.0) 70%),
              linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.05));
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow2);
  display:grid; place-items:center;
  overflow:hidden;
}
.badgeLogo svg{opacity:.92}

.badgeLogo img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:14px;
  display:block;
}

.brandText{
  line-height:1.05;
}
.brandText .title{
  font-weight:800; letter-spacing:.4px;
}
.brandText .sub{
  font-size:12px; color:var(--muted2); margin-top:3px;
}

.menu{
  display:flex; align-items:center; gap:10px;
  padding: 10px;
  border-radius:999px;
  background: rgba(10, 14, 28, .55);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow2);
  backdrop-filter: blur(10px);
}
.menu a{
  padding: 10px 14px;
  border-radius:999px;
  color:var(--muted);
  font-weight:650;
  letter-spacing:.2px;
  position:relative;
  transition: transform var(--dur) var(--ease2), background var(--dur) var(--ease2), color var(--dur) var(--ease2);
}
.menu a:hover{
  color: var(--text);
  background: rgba(255,255,255,.08);
  transform: translateY(-1px);
}
.menu a.active{
  color: var(--text);
  background: linear-gradient(90deg, rgba(82,210,255,.18), rgba(139,92,246,.16));
  border: 1px solid rgba(255,255,255,.10);
}

.main{
  flex:1;
  display:flex; justify-content:center; align-items:stretch;
  padding: 0 18px;
}
.mainInner{
  width:min(var(--maxW), calc(100vw - 36px));
  height:calc(100vh - var(--navH) - var(--footH));
  height:calc(100dvh - var(--navH) - var(--footH));
  height:calc((var(--vh, 1vh) * 100) - var(--navH) - var(--footH));
  display:flex;
  gap:16px;
  padding: 14px 0;
}

/* content areas */
.panel{
  flex:1;
  border-radius: var(--r2);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
  overflow:hidden;
  position:relative;
}
.panel::before{
  content:"";
  position:absolute; inset:-2px;
  background: radial-gradient(600px 320px at 14% 18%, rgba(82,210,255,.18), transparent 65%),
              radial-gradient(500px 260px at 92% 20%, rgba(246,194,71,.14), transparent 62%),
              radial-gradient(600px 320px at 70% 110%, rgba(139,92,246,.18), transparent 55%);
  opacity:.75;
  pointer-events:none;
}
.panelBody{
  position:relative;
  height:100%;
  padding: 18px;
  display:flex;
  flex-direction:column;
  gap:14px;
}

/* internal scroll (scrollbar gizli) */
.scrollY{
  overflow-y:auto;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.scrollY::-webkit-scrollbar{width:0;height:0; display:none}

/* hero (anasayfa) */
.heroGrid{
  display:grid;
  grid-template-columns: 340px 1fr;
  gap:16px;
  height:100%;
}
.heroCard{
  height:100%;
  border-radius: var(--r2);
  background: radial-gradient(380px 280px at 30% 20%, rgba(82,210,255,.16), transparent 60%),
              linear-gradient(180deg, rgba(10, 14, 28, .60), rgba(10,14,28,.35));
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow2);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:16px;
  position:relative;
  overflow:hidden;
}
.heroCard::after{
  content:"";
  position:absolute; inset:-10px;
  background: radial-gradient(250px 180px at 60% 30%, rgba(246,194,71,.18), transparent 60%);
  opacity:.8;
  pointer-events:none;
}
.logoBig{
  display:flex; flex-direction:column; gap:10px;
}
.logoBadgeBig{
  width:100%;
  aspect-ratio: 1/1;
  border-radius: 26px;
  background: linear-gradient(145deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: var(--shadow2);
  display:grid;
  place-items:center;
  overflow:hidden;
  position:relative;
}
.logoBadgeBig::before{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(240px 240px at 25% 25%, rgba(82,210,255,.22), transparent 60%),
              radial-gradient(240px 240px at 80% 30%, rgba(139,92,246,.20), transparent 60%),
              radial-gradient(240px 240px at 55% 85%, rgba(246,194,71,.16), transparent 62%);
  opacity:.9;
}
.logoBadgeBig .mark{
  position:relative;
  display:grid; place-items:center;
  transform: translateY(-2px);
}
.logoBadgeBig .mark svg{
  filter: drop-shadow(0 12px 22px rgba(0,0,0,.45));
}
.logoBadgeBig img.logoHeroImg{
  width:86%;
  height:86%;
  object-fit:contain;
  position:relative;
  display:block;
  filter: drop-shadow(0 14px 26px rgba(0,0,0,.55));
}
.logoName{
  font-weight:900;
  letter-spacing:.3px;
  font-size: 26px;
}
.logoName span{ color: var(--accent) }
.tagline{
  color: var(--muted);
  font-size: 13px;
  line-height:1.35;
}

.statsRow{
  display:flex; gap:10px; flex-wrap:wrap;
}
.pill{
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color: var(--muted);
  font-size: 12px;
  display:flex; align-items:center; gap:7px;
  backdrop-filter: blur(10px);
}

.heroRight{
  height:100%;
  display:flex;
  flex-direction:column;
  border-radius: var(--r2);
  background: linear-gradient(180deg, rgba(10, 14, 28, .58), rgba(10,14,28,.32));
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow2);
  overflow:hidden;
  position:relative;
}
.heroRightHeader{
  padding: 18px 18px 12px 18px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  /* başlık alanı daha ferah + dikey ortalı */
  min-height: clamp(170px, 22vh, 260px);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
}
.heroRightHeader .p{
  /* alt açıklama: ince + tek satır */
  font-weight: 300;
  max-width: none;
  white-space: nowrap;
  line-height: 1.15;
}

.kicker{
  color: var(--accent);
  font-weight:800;
  letter-spacing:.6px;
  text-transform:uppercase;
  font-size: 12px;
}
.h1{
  margin: 10px 0 10px;
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap: 12px;
  font-size: clamp(38px, 4.4vw, 74px);
  line-height: 1.02;
  letter-spacing: .3px;
  font-weight: 950;
  color: rgba(140, 255, 45, .98);
  text-shadow: 0 14px 40px rgba(0,0,0,.65), 0 0 26px rgba(140,255,45,.20);
}
.h1 .t{display:inline-block}
.h1 .t2{
  color: rgba(180, 255, 90, 1);
  text-shadow: 0 14px 40px rgba(0,0,0,.65), 0 0 30px rgba(180,255,90,.22);
}
.p{
  margin:0;
  color: rgba(255,255,255,.92);
  font-weight: 850;
  font-size: clamp(16px, 1.55vw, 24px);
  line-height: 1.25;
  max-width: 72ch;
}
.hrLine{
  height:2px;
  margin-top: 14px;
  border-radius:999px;
  background: linear-gradient(90deg, rgba(82,210,255,.85), rgba(139,92,246,.85), rgba(246,194,71,.65));
  opacity:.85;
}

.section{
  padding: 16px 18px 18px;
  flex: 1 1 auto;
  min-height: 0;
  display:flex;
  flex-direction:column;
  gap: 14px;
}
.sectionTitle{
  font-size: 18px;
  font-weight: 850;
  margin: 0;
  letter-spacing:.2px;
}

/* anasayfa başlık düzeni */
.kicker{display:none !important;}
body[data-surface='light'] .sectionTitle{color:#fff;}
.serviceGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}
.service{
  border-radius: var(--r);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  padding: 12px;
  display:flex;
  gap:12px;
  align-items:flex-start;
  transition: transform var(--dur) var(--ease2), background var(--dur) var(--ease2);
}
.service:hover{
  transform: translateY(-3px);
  background: rgba(255,255,255,.08);
}
.icon{
  width:40px; height:40px;
  border-radius: 14px;
  display:grid; place-items:center;
  background: linear-gradient(145deg, rgba(82,210,255,.18), rgba(139,92,246,.14));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 12px 24px rgba(0,0,0,.35);
}

/* inline svg icons */
.ico{display:block; opacity:.92}
.service h3{
  margin: 0;
  font-size: 14px;
  letter-spacing:.2px;
}
.service p{
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12.5px;
  line-height:1.45;
}
/* buttons */
.btnRow{display:flex; gap:10px; flex-wrap:wrap; margin-top: 6px}
.btn{
  border:0;
  cursor:pointer;
  color: var(--text);
  padding: 11px 14px;
  border-radius: 14px;
  background: linear-gradient(90deg, rgba(82,210,255,.24), rgba(139,92,246,.20));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: var(--shadow2);
  transition: transform var(--dur) var(--ease2), filter var(--dur) var(--ease2);
}
.btn:hover{ transform: translateY(-2px); filter: brightness(1.05) }
.btn:active{ transform: translateY(0px); filter: brightness(.98) }
.btn.ghost{
  background: rgba(255,255,255,.06);
}
.btnSmall{
  padding: 9px 12px;
  border-radius: 12px;
  font-weight:700;
}

/* products page */
.pageTitle{
  display:flex; align-items:flex-end; justify-content:space-between; gap:16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.pageTitle h1{
  margin:0;
  font-size: 26px;
  letter-spacing:.2px;
}
.pageTitle p{margin: 6px 0 0; color: var(--muted); line-height:1.45}
.tools{display:flex; gap:10px; align-items:center; flex-wrap:wrap}

.carousel{
  position:relative;
  height:100%;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.trackWrap{
  flex:1;
  border-radius: var(--r2);
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  overflow:hidden;
  position:relative;
}
.track{
  height:100%;
  display:flex;
  gap:12px;
  padding: 14px;
  overflow-x:auto;
  scroll-snap-type: x mandatory;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.track::-webkit-scrollbar{display:none}
.prodCard{
  scroll-snap-align:start;
  min-width: 320px;
  max-width: 360px;
  height:100%;
  border-radius: var(--r2);
  background: radial-gradient(380px 260px at 30% 10%, rgba(82,210,255,.14), transparent 55%),
              linear-gradient(180deg, rgba(10,14,28,.60), rgba(10,14,28,.32));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: var(--shadow2);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  position:relative;
}
.prodTop{
  padding: 14px 14px 10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.prodTop .label{
  display:flex; align-items:center; gap:10px;
  font-weight:850;
  letter-spacing:.2px;
}
.tag{
  font-size: 11px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(246,194,71,.14);
  border: 1px solid rgba(246,194,71,.22);
  color: #ffe6aa;
}
.prodBody{
  padding: 0 14px 14px;
  color: var(--muted);
  line-height:1.55;
  font-size: 13px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.prodBody ul{margin:0; padding-left: 16px}
.prodBody li{margin: 6px 0}
.prodFoot{
  margin-top:auto;
  padding: 12px 14px 14px;
  border-top: 1px solid rgba(255,255,255,.10);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.price{
  font-weight:900;
  color: var(--text);
  letter-spacing:.2px;
}
.mini{
  font-size: 12px;
  color: var(--muted2);
}

/* contact page */
.contactGrid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 14px;
  height: calc(100% - 72px);
}
.formCard, .infoCard{
  height:100%;
  border-radius: var(--r2);
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.cardHead{
  padding: 16px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.cardHead h2{margin:0; font-size: 18px; letter-spacing:.2px}
.cardHead p{margin: 6px 0 0; color: var(--muted); line-height:1.45}
.cardBody{
  padding: 14px 16px 16px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.field{
  display:flex; flex-direction:column; gap:6px;
}
label{font-size: 12px; color: var(--muted2); letter-spacing:.2px}
input, textarea{
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(10, 14, 28, .40);
  color: var(--text);
  padding: 12px 12px;
  outline:none;
  transition: border var(--dur) var(--ease2), transform var(--dur) var(--ease2);
}
textarea{min-height: 120px; resize:none}
input:focus, textarea:focus{
  border-color: rgba(82,210,255,.45);
  transform: translateY(-1px);
}
.infoList{
  display:flex; flex-direction:column; gap:10px;
  padding: 14px 16px 16px;
}
.infoItem{
  border-radius: var(--r);
  padding: 12px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
}
.infoItem .k{font-size: 12px; color: var(--muted2); display:flex; align-items:center; gap:8px}
.infoItem .v{font-weight:850; margin-top: 4px}

/* footer fixed */
.footer{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 0 18px calc(env(safe-area-inset-bottom) + 10px);
  pointer-events: none;
}
.footerInner{
  width:min(var(--maxW), calc(100vw - 36px));
  min-height: 52px;
  pointer-events: auto;
  border-radius: 999px;
  background: rgba(10, 14, 28, .56);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow2);
  backdrop-filter: blur(10px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  padding: 8px 14px;
}
.footLeft{
  display:flex; align-items:center; line-height:1.1;
  min-width: max-content;
}
.footLeft .t{display:none !important}
.footLeft .s{
  font-size:12.5px;
  color: var(--muted2);
  margin-top: 0;
  white-space: nowrap;
  font-weight: 700;
}
.footRight{
  display:flex; align-items:center; justify-content:flex-start; gap:12px; flex-wrap:wrap;
  color: var(--muted);
  font-size: 12px;
  text-align:left;
  margin-left:auto;
}
.sep{opacity:.5}

/* page entrance animation */
[data-animate="in"]{
  animation: pageIn 860ms var(--ease2) both;
}
@keyframes pageIn{
  from{opacity:0; transform: translateY(10px) scale(.985); filter: blur(6px)}
  to{opacity:1; transform: translateY(0) scale(1); filter: blur(0)}
}

/* transition overlay (resim2 benzeri) */
.transition{
  position:fixed; inset:0;
  display:grid;
  place-items:center;
  z-index: 9999;
  pointer-events:none;
  opacity:0;
  transition: opacity 180ms linear;
}
.transition.show{opacity:1; pointer-events:all}
.tCard{
  width:min(860px, calc(100vw - 56px));
  border-radius: 22px;
  padding: 16px;
  background: rgba(10, 14, 28, .62);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
}
.tTop{
  display:flex; align-items:center; gap:12px;
  padding: 8px 8px 12px;
}
.tIcon{
  width:44px; height:44px; border-radius: 16px;
  display:grid; place-items:center;
  background: linear-gradient(145deg, rgba(82,210,255,.20), rgba(139,92,246,.18));
  border: 1px solid rgba(255,255,255,.12);
}
.tTitle{font-weight:900; letter-spacing:.2px}
.tSub{font-size: 12px; color: var(--muted2); margin-top: 2px}
.tSteps{
  margin-top: 6px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  padding: 12px 12px;
}
.step{
  display:flex; align-items:center; gap:10px;
  font-size: 12.5px;
  color: var(--muted);
  margin: 8px 0;
}
.tick{
  width:18px; height:18px; border-radius: 6px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(34,197,94,.12);
  display:grid; place-items:center;
}
.tick svg{opacity:.9}
.progress{
  margin-top: 12px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.10);
  overflow:hidden;
}
.bar{
  height:100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(82,210,255,.95), rgba(139,92,246,.95), rgba(246,194,71,.85));
  animation: bar 1s var(--ease) forwards;
}
@keyframes bar{
  to{width:100%}
}

/* responsive */
@media (max-width: 980px){
  :root{--navH: 72px}

  /*
    ✅ Tam mobil çözüm (Android/Chrome):
    body'de overflow:hidden + iç container scroll kombinasyonu bazı cihazlarda footer'ın altını kesebiliyor.
    Mobilde sayfayı doğal body scroll'a çeviriyoruz; footer ise altta güvenli boşlukla tam görünür.
  */
  body{
    overflow-y:auto;
    overflow-x:hidden;
    scrollbar-width:none;
    -ms-overflow-style:none;
  }
  body::-webkit-scrollbar{width:0;height:0; display:none}

  .wrap{
    height:auto;
    min-height: calc((var(--vh, 1vh) * 100));
    padding-bottom: calc(var(--footH) + env(safe-area-inset-bottom) + 14px);
  }

  /* mobilde sayfa akışı: ana içerik main içinde kayar (footer sabit görünür) */
  .nav{height:auto; padding: 10px 12px;}
  .navInner{flex-wrap:wrap; justify-content:space-between;}
  .brand{flex: 1 1 100%;}
  .menu{
    flex: 1 1 100%;
    width:100%;
    max-width:100%;
    justify-content:center;
    flex-wrap:wrap;
    overflow:visible;
    border-radius: 18px;
  }
  .menu a{white-space:nowrap;}

  /* main alanı kaydırılabilir yap (scrollbar gizli) */
  .main{
    align-items:flex-start;
    overflow:visible;
    padding-bottom: 0;
  }

  /* footer mobilde her zaman TAM görünür olsun */
  .footerInner{
    margin-bottom: calc(16px + env(safe-area-inset-bottom));
  }

  .mainInner{height:auto;}
  .panelBody{padding: 14px; height:auto;}

  /* Footer mobilde içerik kadar uzasın (kesilmeyi önle) */
  .footer{
    height:auto;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  }
  .footerInner{
    height:auto;
    padding: 10px 12px;
  }

  /* nested scroll yerine tek akış */
  .scrollY{overflow:visible;}

  /* anasayfa: kolonları alt alta */
  .heroGrid{grid-template-columns: 1fr; height: auto;}
  .heroCard{
    height: auto;
    min-height: unset;
    justify-content:flex-start;
    gap: 12px;
  }
  .heroRight{height:auto;}
  .heroRightHeader{min-height:auto; padding: 14px 14px 10px; align-items:center; text-align:center;}
  .hrLine{width:100%}

  .section{flex: 0 0 auto; min-height: auto; padding: 14px;}
  .serviceGrid{grid-template-columns: 1fr;}

  /* iletişim: tek kolon */
  .contactGrid{grid-template-columns: 1fr; height: auto}
}

@media (max-width: 640px){
  :root{--footH: 78px}

  .nav{padding: 0 12px;}
  /* alt padding mobil düzeltmesini bozma */
  .main{padding-left: 12px; padding-right: 12px;}
  .footer{padding: 10px 12px calc(10px + env(safe-area-inset-bottom));}

  .navInner{width: calc(100vw - 24px)}
  .footerInner{width: calc(100vw - 24px)}

  .heroRightHeader .p{white-space: nowrap;}
  .h1{font-size: clamp(32px, 9vw, 48px); justify-content:center;}
  .p{font-size: clamp(14px, 4vw, 18px);}

  .logoBadgeBig{width: min(100%, 420px); max-height: 320px; margin-inline:auto;}
  .logoName{text-align:center; font-size: 24px;}
  .tagline{text-align:center;}
  .statsRow{justify-content:center;}

  /* ürünler: başlık + butonlar alt alta */
  .pageTitle{flex-direction:column; align-items:flex-start; gap:10px}
  .tools{width:100%; justify-content:flex-start}
}

@media (max-width: 520px){
  :root{--navH: 70px; --footH: 86px}

  .brandText .sub{display:none}
  .menu{width:100%; max-width:100%; padding: 8px; gap:6px; justify-content:center; flex-wrap:wrap}
  .menu a{padding: 9px 12px; font-size: 14px}

  .panelBody{padding: 12px;}
  .logoBadgeBig{width: min(100%, 360px); max-height: 280px; border-radius: 22px}
  .logoName{font-size: 22px}
  .tagline{font-size: 12.5px}

  /* ürün kartları ekrana daha iyi otursun */
  .track{padding: 12px;}
  .prodCard{min-width: 82vw; max-width: 82vw;}

  /* footer dar ekranda taşmasın */
  .footerInner{height:auto; padding: 10px 12px}
  .footRight{gap:8px}
}


/* ✅ İletişim sayfası: mobilde menü tek satır (wrap yok), resim2 hizası */
@media (max-width: 980px){
  .page-contact .menu{
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    justify-content: flex-start;
    -webkit-overflow-scrolling: touch;
  }
  .page-contact .menu::-webkit-scrollbar{width:0;height:0;display:none}
  .page-contact .menu a{flex: 0 0 auto;}
}
@media (max-width: 520px){
  .page-contact .menu{gap:6px; padding: 7px;}
  .page-contact .menu a{padding: 8px 10px; font-size: 13px;}
}


/* admin panel */
.adminGrid{display:grid;grid-template-columns:1.45fr .95fr;gap:16px;height:100%}
.adminCol{display:flex;flex-direction:column;gap:16px;min-height:0}
.adminSection,.adminPreview,.quickPanel{border-radius:24px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));border:1px solid var(--stroke);box-shadow:var(--shadow2);padding:16px;position:relative;overflow:hidden}
.adminSection::before,.adminPreview::before,.quickPanel::before{content:"";position:absolute;inset:-10px;background:radial-gradient(420px 180px at 0% 0%, rgba(var(--theme-rgb,82,210,255),.12), transparent 55%),radial-gradient(360px 180px at 100% 100%, rgba(139,92,246,.14), transparent 55%);pointer-events:none}
.adminSection > *, .adminPreview > *, .quickPanel > *{position:relative}
.adminStats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.statBox{padding:14px 16px;border-radius:18px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09)}
.statLabel{font-size:12px;color:var(--muted2);margin-bottom:6px}
.statValue{font-size:18px;font-weight:850}
.sectionHead{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
.sectionHead h2{margin:0;font-size:18px}
.sectionHead p{margin:6px 0 0;color:var(--muted);font-size:13px;line-height:1.5}
.adminChip{padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);font-size:12px;color:var(--muted);font-weight:700}
.themeGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.themeCard{padding:16px;border-radius:20px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.09);cursor:pointer;transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease, background .22s ease;min-height:116px;position:relative}
.themeCard:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.16);background:rgba(255,255,255,.055)}
.themeCard.active{border-color:rgba(var(--theme-rgb,82,210,255),.9);box-shadow:0 0 0 1px rgba(var(--theme-rgb,82,210,255),.22) inset, 0 16px 40px rgba(0,0,0,.22)}
.themeDots{display:flex;gap:8px;margin-bottom:18px}
.themeDots span{width:14px;height:14px;border-radius:50%;display:block;box-shadow:0 0 0 1px rgba(255,255,255,.08) inset}
.themeCard h3{margin:0 0 6px;font-size:18px}
.themeCard p{margin:0;color:var(--muted);font-size:13px;line-height:1.45}
.themeBadge{position:absolute;right:14px;top:12px;padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);font-size:11px;color:var(--muted2);font-weight:800}
.themeActions{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px}

.themeToolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:14px;padding:14px 16px;border:1px solid var(--stroke);border-radius:16px;background:rgba(255,255,255,.04)}
.themeToolbarTop{margin:0 0 14px 0;position:sticky;top:0;z-index:8;backdrop-filter:blur(14px);background:linear-gradient(180deg,rgba(13,18,34,.82),rgba(18,25,46,.72));box-shadow:0 12px 30px rgba(0,0,0,.18)}
.themeToolbarTop .btn{min-width:170px;justify-content:center;font-weight:900}
.themeToolbarInfo{color:var(--muted);font-weight:700}
.themeActionsInline{margin-top:0;justify-content:flex-end}
.adminPreviewCard{padding:18px;border-radius:22px;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.025));border:1px solid rgba(255,255,255,.09)}
.previewBrand{font-size:14px;color:var(--muted2);margin-bottom:10px;font-weight:800}
.previewHero{padding:18px;border-radius:18px;background:linear-gradient(135deg, rgba(var(--theme-rgb,82,210,255),.18), rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.08);margin-bottom:12px}
.previewKicker{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;background:rgba(var(--theme-rgb,82,210,255),.14);border:1px solid rgba(var(--theme-rgb,82,210,255),.28);color:rgb(var(--theme-rgb,82,210,255));font-size:12px;font-weight:800;margin-bottom:10px}
.previewHero h3{margin:0 0 8px;font-size:20px}
.previewHero p{margin:0;color:var(--muted);line-height:1.5}
.previewMiniGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.previewMini{padding:14px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.previewMini b{display:block;font-size:14px;margin-bottom:6px}
.previewMini span{font-size:12px;color:var(--muted2)}
.quickList{display:flex;flex-direction:column;gap:12px}
.quickItem{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border-radius:18px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08)}
.quickIcon{width:34px;height:34px;border-radius:12px;background:rgba(var(--theme-rgb,82,210,255),.14);border:1px solid rgba(var(--theme-rgb,82,210,255),.26);display:grid;place-items:center;font-size:16px;flex:0 0 auto}
.quickItem b{display:block;margin-bottom:3px}
.quickItem span{color:var(--muted);font-size:13px;line-height:1.45}
.helperBox{padding:16px;border-radius:18px;background:rgba(255,255,255,.035);border:1px dashed rgba(255,255,255,.14);margin-top:8px}
.helperTags{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.helperTags span{padding:8px 10px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);font-size:12px;color:var(--muted)}
.btn.success{background:linear-gradient(90deg, rgba(34,197,94,.24), rgba(var(--theme-rgb,82,210,255),.24));border-color:rgba(34,197,94,.34)}
.btn.success:hover{box-shadow:0 10px 30px rgba(34,197,94,.16)}
.themeSaved{display:none;color:var(--good);font-size:13px;font-weight:800;margin-top:4px}
.themeSaved.show{display:block}
@media (max-width: 1180px){.adminGrid{grid-template-columns:1fr}.adminStats,.previewMiniGrid,.themeGrid{grid-template-columns:1fr}}


body[data-surface='light']::before{opacity:.16}
body[data-surface='light'] .menu{background:rgba(255,255,255,.5);backdrop-filter:blur(14px)}
body[data-surface='light'] .menu a{color:var(--text)}
body[data-surface='light'] .menu a.active{background:linear-gradient(90deg, rgba(var(--theme-rgb,127,174,255),.18), rgba(171,134,255,.16));border:1px solid rgba(116,95,179,.14)}
body[data-surface='light'] .panel, body[data-surface='light'] .adminSection, body[data-surface='light'] .adminPreview, body[data-surface='light'] .quickPanel{background:linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.56))}
body[data-surface='light'] .panel::before{opacity:.58}
body[data-surface='light'] .heroCard, body[data-surface='light'] .service, body[data-surface='light'] .trackWrap, body[data-surface='light'] .slide, body[data-surface='light'] .infoCard, body[data-surface='light'] .contactCard, body[data-surface='light'] .contactForm, body[data-surface='light'] .statBox, body[data-surface='light'] .themeCard, body[data-surface='light'] .adminPreviewCard, body[data-surface='light'] .previewMini, body[data-surface='light'] .quickItem, body[data-surface='light'] .helperBox, body[data-surface='light'] .themeToolbar, body[data-surface='light'] .footerInner{background:rgba(255,255,255,.56);border-color:rgba(116,95,179,.12)}
body[data-surface='light'] .btn.ghost{background:rgba(255,255,255,.78)}
body[data-surface='light'] .icon{box-shadow:0 10px 20px rgba(116,95,179,.12)}
body[data-surface='light'] .themeToolbarTop{background:linear-gradient(180deg, rgba(250,245,255,.92), rgba(239,232,255,.84))}
body[data-surface='light'] .footerInner{background:rgba(255,255,255,.62)}
body[data-surface='light'] .adminChip, body[data-surface='light'] .themeBadge{background:rgba(255,255,255,.7)}
body[data-surface='light'] .transition{background:rgba(248,243,255,.18)}
body[data-surface='light'] .tCard{background:rgba(255,255,255,.78); border-color:rgba(116,95,179,.16); box-shadow:0 24px 70px rgba(116,95,179,.18)}
body[data-surface='light'] .tSteps{background:rgba(255,255,255,.62); border-color:rgba(116,95,179,.12)}
body[data-surface='light'] .tick{background:rgba(34,197,94,.12); border-color:rgba(34,197,94,.18)}


/* Paketler sayfası */
.packagesPanel .panelBody{overflow:auto}
.packageHeader{margin-bottom:18px}
.packageGroup{display:grid;gap:14px;margin-bottom:20px}
.packageSectionHead{margin-bottom:0}
.packageSectionHead h2{margin:0;font-size:24px}
.packageCarousel{height:auto}
.packageCarousel .trackWrap{background:rgba(255,255,255,.04)}
.packageCard{min-width:340px;max-width:380px}
.packageCard .prodBody{font-size:14px;gap:12px}
.packageCard .prodBody > div:first-child{font-weight:600;color:var(--text);line-height:1.55}
.packageCard .prodBody ul{padding-left:18px}
.packageCard .prodBody li{margin:7px 0}
.packageCard .prodFoot .price{font-size:24px}
.packageCard .prodFoot .mini{text-transform:none}
.packageNote{
  border-radius:22px;
  border:1px solid var(--stroke2);
  background:var(--card);
  box-shadow:var(--shadow2);
  padding:16px 18px;
  color:var(--muted);
  line-height:1.65;
}
.packageNote strong{color:var(--text)}
.packageNoteStack{display:grid;gap:10px}
.social-card{background:radial-gradient(380px 260px at 30% 10%, rgba(82,210,255,.16), transparent 55%), linear-gradient(180deg, rgba(10,14,28,.60), rgba(10,14,28,.32))}
.growth-card,.corp-card{background:radial-gradient(380px 260px at 30% 10%, rgba(34,197,94,.14), transparent 55%), linear-gradient(180deg, rgba(10,14,28,.60), rgba(10,14,28,.32))}
.pro-card,.ecommerce-card{background:radial-gradient(380px 260px at 30% 10%, rgba(139,92,246,.16), transparent 55%), linear-gradient(180deg, rgba(10,14,28,.60), rgba(10,14,28,.32))}
.web-card{background:radial-gradient(380px 260px at 30% 10%, rgba(96,165,250,.16), transparent 55%), linear-gradient(180deg, rgba(10,14,28,.60), rgba(10,14,28,.32))}
body[data-surface='light'] .packageCarousel .trackWrap,
body[data-surface='light'] .packageNote{background:rgba(255,255,255,.56);border-color:rgba(116,95,179,.12)}
body[data-surface='light'] .packageCard{
  background:linear-gradient(180deg, rgba(255,255,255,.82), rgba(249,246,255,.72));
  border-color:rgba(116,95,179,.14);
  box-shadow:0 18px 40px rgba(116,95,179,.12);
}
body[data-surface='light'] .packageCard .tag{
  background:rgba(116,95,179,.10);
  border-color:rgba(116,95,179,.16);
  color:#5b4c86;
}
body[data-surface='light'] .packageCard .prodFoot{border-top-color:rgba(116,95,179,.12)}
body[data-surface='light'] .packageCard .mini{color:#766a98}
body[data-surface='light'] .packageCard .price{color:#2d2a55}
@media (max-width: 900px){
  .packageCard{min-width:300px;max-width:340px}
}
@media (max-width: 680px){
  .packageSectionHead h2{font-size:22px}
  .packageCard{min-width:84vw;max-width:84vw}
  .packageNote{padding:14px 16px;border-radius:18px}
}


/* Paketler sayfası: demo kart mantığı + mobilde alt alta */
.page-packages .packageCarousel .trackWrap{
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  overflow: visible;
}
.page-packages .packageCarousel .track{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  padding: 0;
  overflow: visible;
  scroll-snap-type: none;
}
.page-packages .packageCard{
  min-width: 0;
  max-width: none;
  width: 100%;
  height: 100%;
}
.page-packages .packageCard .prodBody ul{
  margin: 0;
}
.page-packages .packageCard .prodFoot{
  margin-top: auto;
}
.page-packages .packageNote{
  margin-top: 16px;
}

/* Genel mobil iyileştirmeler */
@media (max-width: 1100px){
  .page-packages .packageCarousel .track{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 760px){
  .page-packages .packageCarousel .track{
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .page-packages .packageCard{
    min-width: 100%;
    max-width: 100%;
  }
  .page-packages .packageSectionHead,
  .page-packages .packageHeader{
    align-items: flex-start;
  }
  .page-packages .packageSectionHead .tools,
  .page-packages .packageHeader .tools{
    width: 100%;
    justify-content: flex-start;
  }
}
@media (max-width: 980px){
  .mainInner{
    width: calc(100vw - 24px);
    gap: 12px;
  }
  .panel,
  .heroCard,
  .heroRight,
  .trackWrap,
  .contactCard,
  .contactForm,
  .infoCard,
  .service,
  .adminSection,
  .adminPreview,
  .quickPanel,
  .footerInner{
    border-radius: 20px;
  }
}
@media (max-width: 520px){
  .brandText .title{font-size: 18px;}
  .menu a{flex: 1 1 auto; text-align: center;}
  .btn{width: 100%; justify-content: center;}
  .btn.btnSmall{width: auto;}
  .prodFoot{flex-direction: column; align-items: stretch; gap: 10px;}
  .prodFoot .btn{width: 100%;}
}


/* Ürünler ve demolar: mobilde paketler gibi alt alta */
.page-products .trackWrap,
.page-demos .trackWrap{background:rgba(255,255,255,.05)}
body[data-surface='light'] .page-products .prodCard,
body[data-surface='light'] .page-demos .prodCard{
  background:#fff;
  border-color:rgba(116,95,179,.14);
  box-shadow:0 18px 40px rgba(116,95,179,.12);
}
body[data-surface='light'] .page-products .trackWrap,
body[data-surface='light'] .page-demos .trackWrap{background:rgba(255,255,255,.56); border-color:rgba(116,95,179,.12)}

@media (max-width: 760px){
  .page-products .trackWrap,
  .page-demos .trackWrap{
    background:transparent;
    border:0;
    box-shadow:none;
    overflow:visible;
  }
  .page-products .track,
  .page-demos .track{
    display:grid;
    grid-template-columns:1fr;
    gap:14px;
    padding:0;
    overflow:visible;
    height:auto;
    scroll-snap-type:none;
  }
  .page-products .prodCard,
  .page-demos .prodCard{
    min-width:100%;
    max-width:100%;
    width:100%;
    height:auto;
  }
}

@media (max-width: 980px){
  .menu{
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    justify-content:flex-start;
    -webkit-overflow-scrolling:touch;
  }
  .menu::-webkit-scrollbar{width:0;height:0;display:none}
  .menu a{flex:0 0 auto}

  .tools{
    width:100%;
    flex-wrap:nowrap;
    overflow-x:auto;
    justify-content:flex-start;
    -webkit-overflow-scrolling:touch;
  }
  .tools::-webkit-scrollbar{width:0;height:0;display:none}
  .tools .btn,
  .tools .btn.btnSmall{flex:0 0 auto; width:auto}
}

@media (max-width: 520px){
  .menu{padding:8px; gap:8px; border-radius:22px}
  .menu a{padding:10px 18px; font-size:14px; text-align:center}
  .btnRow{flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch}
  .btnRow::-webkit-scrollbar{width:0;height:0;display:none}
  .btnRow .btn{width:auto; flex:0 0 auto}
  .footRight{width:100%; justify-content:flex-start; gap:8px}
  .footerInner{align-items:flex-start; flex-wrap:wrap}
}