*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:Inter,system-ui,Segoe UI,Arial,sans-serif;color:#0f172a;background:#ffffff;line-height:1.6}
a{color:inherit}
.container{max-width:1160px;margin:0 auto;padding:0 24px}
.btn{display:inline-block;padding:12px 18px;border-radius:12px;text-decoration:none;background:#111827;color:#fff;font-weight:600;box-shadow:0 6px 18px rgba(0,0,0,.15);transition:transform .15s ease, box-shadow .2s ease}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.18)}
.btn.secondary{background:#e5e7eb;color:#111827}

.header{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.7);backdrop-filter:blur(10px);border-bottom:1px solid rgba(2,6,23,.06)}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.brand{display:flex;align-items:center;gap:12px}
.brand img{height:44px;width:auto;border-radius:10px}
.brand strong{font-size:20px}

.hero{position:relative;background:linear-gradient(180deg,#4f46e5 0%, #3b82f6 60%, #60a5fa 100%);color:#fff;padding-top:48px}
.hero-clouds{position:absolute;inset:0;background:radial-gradient(ellipse at 20% 10%,rgba(255,255,255,.35),transparent 40%),radial-gradient(ellipse at 80% 20%,rgba(255,255,255,.3),transparent 45%),radial-gradient(ellipse at 60% 0%,rgba(255,255,255,.25),transparent 50%)}
.hero-inner{position:relative;padding:56px 0 80px;display:grid;grid-template-columns:1.1fr .9fr;gap:32px;align-items:center}
.hero-logo{text-align:center}
.hero-logo img{max-width:420px;width:100%;filter:drop-shadow(0 20px 40px rgba(0,0,0,.25))}
.store-buttons{display:flex;gap:12px;justify-content:center;margin-top:16px}
.store-buttons .btn{background:#0f172a}
.phone-mock{display:flex;align-items:center;justify-content:center}
.phone{width:100%;max-width:360px;aspect-ratio:9/19;border-radius:40px;background:#111;
       padding:14px;border:10px solid #0f172a;box-shadow:0 30px 80px rgba(2,6,23,.4)}
.phone img{width:100%;height:100%;object-fit:cover;border-radius:26px}

.wave{display:block;margin-top:-1px}
.wave svg{display:block;width:100%;height:auto}

.section{padding:72px 0}
.section h2{font-size:36px;line-height:1.2;margin:0 0 16px;color:#0f172a;text-align:center}
.section p.lead{color:#334155;text-align:center;margin:0 auto 28px;max-width:760px}

.features{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:24px}
.card{background:#ffffff;border:1px solid #e5e7eb;border-radius:20px;padding:22px;text-align:center;box-shadow:0 10px 30px rgba(2,6,23,.06);transition:transform .2s ease, box-shadow .2s ease}
.card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(2,6,23,.12)}
.card img{width:96px;height:96px;object-fit:contain;margin-bottom:10px}

.ribbon{background:linear-gradient(90deg,#cffafe,#e0f2fe 50%,#dbeafe);}
.ribbon .features{background:transparent}

.cities .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:16px}
.city{background:#fff;border-radius:20px;overflow:hidden;border:1px solid #e5e7eb;box-shadow:0 10px 30px rgba(2,6,23,.06);transition:transform .2s ease, box-shadow .2s ease}
.city:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(2,6,23,.12)}
.city img{width:100%;display:block}
.city .title{padding:12px 14px;font-weight:700}

.footer{background:linear-gradient(180deg,#1f2937,#111827);color:#cbd5e1;padding:28px 0;margin-top:24px}
.footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:18px}
.footer a{color:#e5e7eb;text-decoration:none}
.footer a:hover{text-decoration:underline}
.copy{border-top:1px solid rgba(255,255,255,.1);margin-top:16px;padding-top:14px;text-align:center;color:#94a3b8;font-size:14px}

@media(max-width:1024px){
  .hero-inner{grid-template-columns:1fr;gap:18px;text-align:center}
  .phone{margin:0 auto}
  .features{grid-template-columns:1fr 1fr}
  .cities .grid{grid-template-columns:1fr 1fr}
  .footer .cols{grid-template-columns:1fr}
}
@media(max-width:640px){
  .features{grid-template-columns:1fr}
  .cities .grid{grid-template-columns:1fr}
}
/* --- Store badges: sabit 300x100 --- */
.store-badges{
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:12px;
}

.store-badges a{
  width:300px;
  height:100px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:0;        /* dikey boşluk olmasın */
}

.store-badges img{
  width:100%;
  height:100%;
  object-fit:contain;   /* taşıp bozulmasın, kutuya sığdır */
  display:block;
}
@media (max-width:480px){
  .store-badges a{ width:240px; height:80px; } /* mobilde daha küçük */
}