: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%, rgba(82,210,255,.14), transparent 60%),
              radial-gradient(900px 650px at 90% 20%, rgba(139,92,246,.16), transparent 58%),
              radial-gradient(900px 700px at 40% 100%, rgba(246,194,71,.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;
}
.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; flex-direction:column; line-height:1.1;
}
.footLeft .t{font-weight:900; letter-spacing:.2px}
.footLeft .s{font-size:12px; color: var(--muted2); margin-top: 3px}
.footRight{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  color: var(--muted);
  font-size: 12px;
}
.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;}
}