/* ===========================
   MERVIFY • RESPONSIVE CSS
   - Fluid tipografi & spacing
   - Net grid kırılımları
   - Mobil ilk yaklaşım
   - Motion-safe (prefers-reduced-motion)
   =========================== */

:root{
  /* Renkler */
  --bg: #070a14;
  --card:#0b1222cc;
  --glass: rgba(255,255,255,0.06);
  --text:#e6f0ff;
  --muted:#b6c3ff;
  --accent1:#a78bfa; /* mor */
  --accent2:#22d3ee; /* camgöbeği */
  --accent3:#f472b6; /* pembe */
  --accent4:#f59e0b; /* amber */
  --ok:#22c55e; --warn:#f59e0b; --err:#ef4444;

  /* Radius & gölge */
  --radius:22px;
  --shadow:0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);

  /* Tipografi & spacing (fluid) */
  --step--1: clamp(0.80rem, 0.75rem + 0.25vw, 0.90rem);
  --step-0:  clamp(0.95rem, 0.86rem + 0.35vw, 1.00rem);
  --step-1:  clamp(1.10rem, 0.98rem + 0.60vw, 1.20rem);
  --step-2:  clamp(1.35rem, 1.10rem + 1.00vw, 1.50rem);
  --step-3:  clamp(1.70rem, 1.28rem + 1.80vw, 2.10rem);
  --step-4:  clamp(2.20rem, 1.60rem + 2.80vw, 2.80rem);
  --step-5:  clamp(2.70rem, 1.90rem + 4.00vw, 3.50rem);

  /* Container & spacing */
  --container: 1160px;
  --px: clamp(14px, 4vw, 20px); /* yatay padding */
  --section-y: clamp(44px, 6vw, 64px);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji','Segoe UI Emoji';
  color:var(--text);
  background:var(--bg);
  overflow-x:hidden;
  line-height:1.5;
  font-size: var(--step-0);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ===== BACKGROUND LAYERS ===== */
.bg-wrap{position:fixed; inset:0; z-index:-2; overflow:hidden}
.gradient{
  position:absolute; inset:-20%;
  filter:blur(50px); opacity:.6;
  background:conic-gradient(from 0deg, var(--accent1), var(--accent2), var(--accent3), var(--accent4), var(--accent1));
  animation:spin 28s linear infinite
}
.noise{
  position:absolute; inset:0;
  background-image:url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22160%22 height=%22160%22%3E%3Cfilter id=%22n%22%3E%3CfeTurbulence baseFrequency=%220.65%22 numOctaves=%223%22 stitchTiles=%22stitch%22/%3E%3CfeColorMatrix type=%22saturate%22 values=%220%22/%3E%3C/filter%3E%3Crect width=%22160%22 height=%22160%22 filter=%22url(%23n)%22/%3E%3C/svg%3E');
  opacity:.05; mix-blend-mode:overlay
}
@keyframes spin{to{transform:rotate(360deg)}}

/* Motion tercihine saygı */
@media (prefers-reduced-motion: reduce){
  .gradient{animation:none}
  .track{animation:none}
  .reveal{transition:none}
}

/* ===== LAYOUT ===== */
.container{
  max-width: var(--container);
  margin:0 auto;
  padding-left: max(var(--px), env(safe-area-inset-left));
  padding-right:max(var(--px), env(safe-area-inset-right));
}
header{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(1.4) blur(10px);
  background:linear-gradient(180deg, rgba(10,15,30,.8), rgba(10,15,30,.5) 40%, transparent);
  border-bottom:1px solid rgba(255,255,255,.06)
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:12px 0
}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--text)}
.brand .logo{width:32px; height:32px}
.brand .title{font-weight:800; letter-spacing:.3px; font-size: var(--step-1)}
.nav-cta{display:flex; align-items:center; gap:10px; flex-wrap:wrap}

/* ===== BUTTONS ===== */
.btn{
  --h: clamp(42px, 5.5vw, 52px);
  height:var(--h); padding:0 clamp(14px, 3vw, 18px);
  border-radius:999px; border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  color:var(--text); display:inline-flex; align-items:center; gap:10px;
  text-decoration:none; font-weight:700; letter-spacing:.2px;
  box-shadow:var(--shadow); position:relative; overflow:hidden;
  line-height:1; font-size: var(--step-0);
  transition: transform .2s ease
}
.btn:hover{transform:translateY(-1px)}
.btn:focus-visible{outline:2px solid var(--accent2); outline-offset:2px}
.btn.primary{border-color:transparent; background:linear-gradient(90deg, var(--accent3), var(--accent2)); color:#0b0f1b}
.btn .shine{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 10% 0%, rgba(255,255,255,.22), transparent 45%),
    radial-gradient(ellipse at 90% 100%, rgba(255,255,255,.12), transparent 46%);
  opacity:.8; pointer-events:none
}

/* ===== HERO ===== */
.hero{position:relative; padding: clamp(68px, 10vw, 88px) 0 clamp(24px, 4vw, 32px)}
.hero-grid{display:block; grid-template-columns:1.1fr .9fr; gap: clamp(18px, 3vw, 28px)}
.headline{
  font-size: var(--step-4);
  line-height:1.06; font-weight:900; letter-spacing:.2px; margin:0 0 .4em
}
.headline .grad{
  background:linear-gradient(90deg, var(--accent2), var(--accent3), var(--accent1));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 18px rgba(164,224,255,.25))
}
.kicker{color:var(--muted); font-weight:600; margin:10px 0 22px; font-size: var(--step-0)}
.hero .cta-row{display:flex; flex-wrap:wrap; gap:12px}
.glass{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.10);
  border-radius:var(--radius); box-shadow:var(--shadow)
}
.hero-card{padding: clamp(14px, 2.5vw, 18px); display:grid; gap:14px}

/* ===== MARQUEE ===== */
.marquee{
  margin-top: clamp(16px, 2.5vw, 28px);
  border-radius:14px; border:1px solid rgba(255,255,255,.08);
  overflow:hidden; position:relative
}
.marquee::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, var(--bg), transparent 10%, transparent 90%, var(--bg));
  pointer-events:none
}
.track{
  display:flex; gap: clamp(18px, 3vw, 34px);
  padding:10px 0; white-space:nowrap;
  animation:slide 26s linear infinite
}
@keyframes slide{to{transform:translateX(-50%)}}
.pill{
  padding:6px 12px; border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  font-size: var(--step--1); opacity:.95
}
/* ——— Marquee: ekranın %60'ını kapla ve ortala ——— */
.marquee.vw60{
  width: 60vw;
  margin-left: calc(50% - 30vw); /* ortala */
  border-radius: 14px;
  overflow: hidden;
}
/* Küçük ekranlarda tam genişliğe dön (taşmasın) */
@media (max-width: 980px){
  .marquee.vw60{
    width: 100%;
    margin-left: 0;
  }
}

/* Akıcılık ve taşma güvenliği */
.marquee.vw60 .track{
  will-change: transform;
  transform: translate3d(0,0,0);
}
.marquee.vw60 .pill{ flex: 0 0 auto; }

/* Marquee %60 viewport genişliğinde ve tam ortalı */
.hero-grid .marquee.vw60{
  grid-column: 1 / -1;              /* gridin tamamını kapsa */
}

.marquee.vw60{
  width: 60vw;                       /* ekranın %60'ı */
  max-width: 100%;                   /* dar ekranlarda taşma olmasın */
  position: relative;
  left: 50%;
  transform: translateX(-50%);       /* ortalama */
  margin-top: clamp(16px, 2.5vw, 28px);
  margin-left: 0;                    /* önceki calc yöntemi yerine */
  margin-right: 0;
}

/* Küçük ekranlarda tam genişliğe dön */
@media (max-width: 980px){
  .marquee.vw60{
    width: 100%;
    left: 0;
    transform: none;
  }
}

/* Akıcılık ve taşma güvenliği (performans) */
.marquee.vw60 .track{
  will-change: transform;
  transform: translate3d(0,0,0);
}
.marquee.vw60 .pill{ flex: 0 0 auto; }




/* ===== SECTIONS & HEADINGS ===== */
section{padding: var(--section-y) 0}
h2{
  font-size: var(--step-3);
  margin:0 0 12px; letter-spacing:.2px
}
.sub{color:var(--muted); margin:-6px 0 24px; font-size: var(--step-0)}

/* ===== GRID HELPERS ===== */
.grid{display:grid; gap:16px}
.grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}

/* ===== FEATURES ===== */
.feature{display:grid; gap:10px; padding:18px; position:relative}
.feature svg{width:26px; height:26px; opacity:.9}
.muted{color:var(--muted); font-size: var(--step--1)}

/* ===== HOW IT WORKS ===== */
.steps{counter-reset:step}
.step{display:grid; gap:10px; padding:18px}
.step .num{font-weight:800; display:flex; align-items:center; gap:10px; font-size: var(--step-1)}
.step .num::before{
  counter-increment:step; content:counter(step);
  font-variant-numeric:tabular-nums; display:inline-grid; place-content:center;
  width:34px; height:34px; border-radius:9px;
  background:linear-gradient(90deg, var(--accent1), var(--accent2));
  color:#08111f;
}

/* ===== PRODUCT ===== */
.product{display:grid; grid-template-columns:1.1fr .9fr; gap:22px}
.cover{
  aspect-ratio:1.2/1; border-radius:var(--radius);
  background:linear-gradient(135deg, rgba(167,139,250,.18), rgba(34,211,238,.14));
  border:1px dashed rgba(255,255,255,.2); display:grid; place-items:center;
  text-align:center; padding:16px
}
.price{font-size: var(--step-3); font-weight:900}
.tag{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:999px;
  background:rgba(34,197,94,.14); border:1px solid rgba(34,197,94,.28);
  color:#a7f3d0; font-weight:700; font-size: var(--step--1)
}

/* ===== AUDIO DEMOS ===== */
.demos{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px}
audio{width:100%}

/* ===== FAQ ===== */
details{
  padding:14px 16px; border-radius:14px;
  border:1px solid rgba(255,255,255,.1);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
}
summary{cursor:pointer; list-style:none; font-weight:700; font-size: var(--step-0)}
summary::-webkit-details-marker{display:none}
details + details{margin-top:10px}

/* ===== CONTACT ===== */
.contact-list{display:flex; flex-wrap:wrap; gap:12px}
.contact-item{
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 14px; border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  text-decoration:none; color:var(--text); font-size: var(--step--1)
}

/* ===== FOOTER ===== */
footer{padding:40px 0 60px; color:var(--muted); text-align:center; font-size: var(--step--1)}

/* ===== REVEAL on scroll ===== */
.reveal{opacity:0; transform:translateY(12px); transition:.6s cubic-bezier(.22,1,.36,1)}
.reveal.show{opacity:1; transform:none}
.reveal{
  margin-top: 30px;
}

/* ===== FLOATING PARTICLES CANVAS ===== */
canvas#fx{position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.5}

/* ===========================
   RESPONSIVE BREAKPOINTS
   =========================== */

/* 1024px ve altı (tablet-yatay & küçük laptoplar) */
@media (max-width: 1024px){
  :root{
    --container: 980px;
  }
  .hero-grid{grid-template-columns:1fr; gap:22px}
  .product{grid-template-columns:1fr}
  .grid.cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid.cols-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nav{padding:10px 0}
  .brand .logo{width:30px; height:30px}
}

/* 768px ve altı (tablet-dikey & büyük telefonlar) */
@media (max-width: 768px){
  :root{
    --container: 720px;
  }
  .track{gap:20px}
  .marquee{margin-top:18px}
  .demos{grid-template-columns:1fr}
  .btn{--h: 46px; padding:0 16px}
  .headline{line-height:1.08}
}

/* 560px ve altı (telefon) */
@media (max-width: 560px){
  :root{
    --container: 520px;
  }
  .grid.cols-4, .grid.cols-3{grid-template-columns:1fr}
  .nav-cta{gap:8px}
  .btn{--h: 44px; padding:0 14px}
  .brand .title{font-size: var(--step-0)}
  .pill{font-size: var(--step--1); padding:6px 10px}
  .hero{padding-top: clamp(56px, 12vw, 72px)}
}

/* 400px ve altı (küçük ekranlar) */
@media (max-width: 400px){
  .btn{--h: 42px; padding:0 12px}
  .price{font-size: var(--step-2)}
  .contact-item{padding:10px 12px}
}

/* Grid çocukları genişleyip kaydırma yapmasın */
.hero-grid, .hero-grid > * { min-width:0; }

/* ====== EK DÜZENLEMELER (KORUYARAK İLAVELER) ====== */
/* 1) Taşmaları kökten kapat */
html, body { width:100%; overflow-x:hidden; }

/* 2) Hero başlık çok uzun olduğunda düzgün kırılsın */
.headline{overflow-wrap:anywhere; word-break:break-word}

/* 3) Marquee taşmayı tetiklemesin ve donanım hızlandırma aktif olsun */
.track{will-change:transform; transform:translate3d(0,0,0)}
.pill{flex:0 0 auto}

/* 4) Full-bleed siyah şerit isteği için yardımcı sınıflar (HTML’de kullanıyorsan) */
.marquee.full{width:100vw; margin-left:50%; transform:translateX(-50%)}
.marquee.dark{background:#0b0f1b; border-color:#000}
.pill.dark{background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)); border-color:rgba(255,255,255,.22)}

/* 5) Butonlarda renk değişimi/animasyon */
.btn.primary{background-size:200% 200%; transition:background-position .35s ease, transform .2s ease}
.btn.primary:hover{background-position:100% 0}
.btn:hover{filter:saturate(1.05)}

/* 6) Menü mobilde daha ferah: logo/buton küçült, aralığı artır */
@media (max-width: 640px){
  .brand .logo{width:26px;height:26px}
  .brand .title{font-size:var(--step--1)}
  .btn{--h:40px; padding:0 12px; font-weight:800}
  .nav{gap:12px}
}


.hero-img {
  aspect-ratio: 16/10;
  border-radius: var(--radius);
  overflow: hidden;
  display: block;
  box-shadow: var(--shadow);
  transition: transform 0.5s ease, box-shadow 0.5s ease; /* animasyon için */
}

.hero-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease; /* zoom efekti için */
}

/* Hover efektleri */
.hero-img:hover {
  transform: translateY(-4px); /* hafif yukarı kalkma */
  box-shadow: 0 12px 32px rgba(0,0,0,0.25);
}

.hero-img:hover img {
  transform: scale(1.05); /* hafif yakınlaşma */
}

.hero-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(255,255,255,0.2) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.4s;
}
.hero-img:hover::after {
  opacity: 1;
}