/* ===== THEME & TOKENS ===== */
:root{
  --bg:#0b0d12;
  --text:#e9eef9;
  --muted:#a5b0c5;
  --card:#0f1524;
  --line:rgba(255,255,255,.08);
  --brand:#4ef0c3;
  --brand2:#4da0ff;
  --shadow:0 12px 40px rgba(0,0,0,.35);
  --radius:18px;
  --container:1200px;
  --pad-section:56px;
}

/* ===== BASE RESET ===== */
*{box-sizing:border-box}
html,body{
  margin:0; padding:0;
  background:var(--bg); color:var(--text);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  line-height:1.6; scroll-behavior:smooth;
  overflow-x:hidden; /* yatay kaymayı kapat */
}
img{max-width:100%; height:auto; display:block}
a{color:var(--text); text-decoration:none}
a:hover{opacity:.9}
.container{
  width:min(100%, var(--container));
  padding-inline:clamp(16px, 3.6vw, 24px);
  margin-inline:auto;
}

/* Helpers */
.brand-gradient{
  background:linear-gradient(90deg,var(--brand),var(--brand2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ===== NAVBAR ===== */
nav{
  position:sticky; top:0; z-index:40;
  background:rgba(11,13,18,.7);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.navbar{
  display:flex; align-items:center; justify-content:space-between;
  padding-block:14px;
}
.brand{display:flex; align-items:center; gap:12px; font-weight:800; letter-spacing:.4px}
.brand img{height:40px; width:auto; border-radius:12px; box-shadow:var(--shadow)}
.brand span{font-weight:900; background:linear-gradient(90deg,var(--brand),var(--brand2));
  -webkit-background-clip:text; background-clip:text; color:transparent}

nav ul{display:flex; gap:18px; list-style:none; margin:0; padding:0}
nav a.item{padding:8px 12px; border-radius:12px; position:relative}
nav a.item:after{
  content:""; position:absolute; left:12px; right:12px; bottom:4px; height:2px;
  background:linear-gradient(90deg,var(--brand),var(--brand2));
  transform:scaleX(0); transform-origin:left; transition:.2s;
}
nav a.item:hover:after{transform:scaleX(1)}

/* Mobile menu button (icon white via currentColor) */
.menu-btn{
  display:none; color:#fff; background:transparent;
  border:1px solid var(--line); border-radius:12px; padding:8px 12px;
  min-width:44px; min-height:44px; align-items:center; justify-content:center;
}
.menu-btn:hover{background:rgba(255,255,255,.06)}
.menu-btn:focus-visible{outline:2px solid var(--brand2); outline-offset:2px}

@media (max-width:900px){
  .menu-btn{display:inline-flex}
  nav .navbar{position:relative}
  nav ul{
    display:none; position:absolute; left:0; right:0; top:calc(56px + env(safe-area-inset-top,0));
    background:rgba(15,19,32,.98); padding:14px; border-bottom:1px solid var(--line);
    box-shadow:0 16px 40px rgba(0,0,0,.35); z-index:50;
  }
  nav ul.open{display:flex; flex-direction:column; gap:10px}
  .brand{padding-left:12px} /* mobil appbar logosuna padding */
}

/* ===== HERO ===== */
.hero{
  border-bottom:1px solid var(--line);
  /* Glow’u background’a gömdük; overflow yapmaz */
  background:
    radial-gradient(1000px 500px at 10% -10%, rgba(77,160,255,.12), transparent 60%),
    radial-gradient(900px 450px at 90% 10%, rgba(78,240,195,.10), transparent 60%);
  padding-block: calc(var(--pad-section)*.4);
}

/* Grid: WEB= iki kolon, MOBILE= tek kolon (kart önce) */
.hero-inner{
  display:grid; align-items:center; gap:40px;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "content card";
  padding-block: var(--pad-section);
}
.hero-inner > *{min-width:0} /* grid çocukları taşmasın */

/* HTML’de ilk div metin bloğu, ikinci .hero-card */
.hero-inner > div:first-child:not(.hero-card){ grid-area: content; }
.hero-card{ grid-area: card; }

/* --- Card --- */
.hero-card{
  background:var(--card); border:1px solid var(--line); border-radius:22px;
  padding:22px; box-shadow:var(--shadow);
  width:100%; max-width:560px; justify-self:center;
}
.hero-card .device{
  position:relative; width:100%;
  aspect-ratio:1 / 1; /* kare vitrin */
  border-radius:18px; overflow:hidden;
  background:linear-gradient(135deg, rgba(77,160,255,.18), rgba(78,240,195,.15));
  border:1px dashed var(--line);
  display:flex; align-items:center; justify-content:center;
}
.hero-card .device img{
  position:absolute; inset:12px;
  width:calc(100% - 24px); height:calc(100% - 24px);
  object-fit:contain; border-radius:16px; box-shadow:var(--shadow);
}
.hero-card .small{color:var(--muted); text-align:center; margin:10px 0 0}

/* --- Content (başlık + metin + butonlar + marquee) --- */
.hero-inner > div:first-child:not(.hero-card) h1{
  font-size:56px; line-height:1.06; margin:0 0 10px; font-weight:900;
  overflow-wrap:anywhere; word-break:normal; hyphens:auto; /* mobile kesmeler */
}
.hero-inner > div:first-child:not(.hero-card) .lead{
  font-size:18px; color:var(--muted); margin:0 0 18px
}
.badges{display:flex; gap:12px; flex-wrap:wrap; min-width:0}
.btn{
  display:inline-flex; align-items:center; gap:10px; padding:12px 16px;
  border-radius:14px; border:1px solid var(--line);
  background:linear-gradient(90deg,rgba(77,160,255,.18),rgba(78,240,195,.18));
  box-shadow:var(--shadow); font-weight:600
}
.btn.secondary{background:transparent}

/* Marquee container: container ölçüsünü ve paddingini kullanır, overflow yok */
.marquee{
  margin-top:18px; overflow:hidden; white-space:nowrap;
  border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.02);
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.marquee-track{display:inline-block; animation:scroll 22s linear infinite; padding:12px 0; will-change:transform}
.badge{display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--line); border-radius:999px; padding:8px 14px; margin:0 10px}
@keyframes scroll{to{transform:translateX(-50%)}}

/* HERO — MOBILE (kart üstte tüm satır, içerik altta; fontlar küçülür) */
@media (max-width:900px){
  .container{padding-inline:16px} /* section ile aynı mobil padding */
  .hero-inner{
    grid-template-columns:1fr;
    grid-template-areas:
      "card"
      "content";
    gap:22px;
    padding-block: calc(var(--pad-section)*.5);
  }
  .hero-card{max-width:none; width:100%}
  .hero-inner > div:first-child:not(.hero-card) h1{font-size:42px}
  .hero-inner > div:first-child:not(.hero-card) .lead{font-size:16px}
}
@media (max-width:420px){
  .hero-inner > div:first-child:not(.hero-card) h1{font-size:36px}
}

/* ===== SECTIONS ===== */
.section{
  padding-block: var(--pad-section);
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, transparent, rgba(255,255,255,.02) 60%, transparent)
}
.section h2{margin:0 0 12px; font-size:32px}
.section .lead{margin-top:0; color:var(--muted)}

.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:16px}
.card{
  background:var(--card); border:1px solid var(--line); border-radius:18px; padding:18px;
  box-shadow:var(--shadow); transition:transform .2s, border-color .2s
}
.card:hover{transform:translateY(-3px); border-color:rgba(77,160,255,.35)}
.card h3{margin:4px 0 6px; font-size:18px}
.card p{margin:0; color:var(--muted); font-size:14px}
.icon{font-size:22px}
@media (max-width:900px){ .cards{grid-template-columns:1fr} }

.gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:12px}
.gallery div{
  aspect-ratio:16/9;
  background:linear-gradient(135deg, rgba(77,160,255,.12), rgba(78,240,195,.10));
  border:1px dashed var(--line); border-radius:14px;
  display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:14px
}
@media (max-width:900px){ .gallery{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .gallery{grid-template-columns:1fr} }

/* ===== CTA & FOOTER ===== */
.cta{
  padding:50px; border:1px solid var(--line); border-radius:20px;
  background:linear-gradient(135deg, rgba(77,160,255,.07), rgba(78,240,195,.07));
  display:flex; flex-direction:column; gap:14px; align-items:flex-start
}
footer{padding:40px 0; color:var(--muted)}
footer .cols{display:grid; grid-template-columns:2fr 1fr 1fr; gap:16px}
footer a{color:var(--muted)}
.small{font-size:12px; color:var(--muted)}
@media (max-width:900px){ footer .cols{grid-template-columns:1fr} }

/* ===== ACCESSIBILITY ===== */
@media (prefers-reduced-motion: reduce){
  .marquee-track{animation:none}
}