:root{
  --bg:#0b1220; --card:#11192b; --muted:#9aa4b2; --text:#e6edf7;
  --primary:#5b8cff; --primary2:#22d3ee; --ring:rgba(91,140,255,.35);
  --shadow:0 12px 40px rgba(2,8,23,.28);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica Neue, Arial; background: radial-gradient(1200px 800px at 15% -10%, #121a33 0%, #0b1220 60%); color:var(--text); line-height:1.7; overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{width:92%;max-width:1200px;margin:0 auto}
/* Header */
.header{position:sticky;top:0;z-index:50;background: rgba(11,18,32,.72);border-bottom:1px solid rgba(255,255,255,.06);backdrop-filter: blur(10px)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;align-items:center;gap:12px}
.brand img{width:44px;height:44px;object-fit:contain;border-radius:10px}
.brand .name{font-weight:800;letter-spacing:.3px}
.menu{display:flex;gap:16px;list-style:none;margin:0;padding:0}
.menu a{padding:8px 12px;border-radius:10px;color:var(--muted)}
.menu a:hover{background:rgba(255,255,255,.06);color:var(--text)}
.cta{background:linear-gradient(90deg,var(--primary),var(--primary2));padding:10px 14px;border-radius:12px;color:white;box-shadow:var(--shadow);border:none;cursor:pointer}
/* Hero */
.hero{position:relative;overflow:hidden}
.hero-bg{position:absolute;inset:0;background: radial-gradient(900px 600px at 70% 10%, rgba(91,140,255,.2), transparent 60%), radial-gradient(700px 500px at 20% 20%, rgba(34,211,238,.18), transparent 60%);pointer-events:none}
.hero .wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:36px;align-items:center;padding:86px 0 46px}
h1{font-size:clamp(36px,5vw,56px);line-height:1.06;margin:0}
.sub{color:var(--muted);margin:12px 0 20px}
.badges{display:flex;gap:12px;flex-wrap:wrap}
.badge{padding:8px 12px;border:1px solid rgba(255,255,255,.08);border-radius:999px;color:var(--muted);backdrop-filter: blur(8px)}
.panel{background:linear-gradient(180deg,rgba(17,25,43,.92),rgba(17,25,43,.72));border:1px solid rgba(255,255,255,.06);border-radius:18px;box-shadow:var(--shadow)}
.panel .inner{padding:22px}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.kpi{background:rgba(255,255,255,.04);padding:14px;border-radius:12px;text-align:center}
.kpi b{font-size:22px}
/* Sections */
.section{padding:64px 0}
.section h2{font-size:clamp(26px,3vw,34px);margin:0 0 18px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.card{background:linear-gradient(180deg,rgba(17,25,43,.92),rgba(17,25,43,.72));border:1px solid rgba(255,255,255,.06);border-radius:16px;box-shadow:var(--shadow);transition:transform .25s ease, box-shadow .25s ease}
.card:hover{transform:translateY(-6px)}
.card .inner{padding:20px}
.list{display:grid;gap:8px;color:var(--muted)}
/* Marquee slider */
.marquee{position:relative;overflow:hidden;background:linear-gradient(180deg,rgba(17,25,43,.92),rgba(17,25,43,.72));border:1px solid rgba(255,255,255,.06);border-radius:16px;box-shadow:var(--shadow);padding:12px}
.marquee .track{display:flex;gap:36px;align-items:center;will-change: transform;animation: scroll 28s linear infinite}
.marquee:hover .track{animation-play-state: paused}
.slide{flex:0 0 auto;filter: saturate(0) brightness(.9);transition:filter .25s ease;display:flex;align-items:center;justify-content:center;height:72px}
.slide img{height:64px; width:auto; max-width:220px; object-fit:contain; image-rendering:auto; opacity:.95}
.slide:hover{filter: none}
@keyframes scroll{ from{transform: translateX(0)} to{transform: translateX(-50%)} }
/* Reveal */
.reveal{opacity:0;transform:translateY(22px)}
.reveal.show{opacity:1;transform:none;transition:all .8s cubic-bezier(.2,.8,.2,1)}
/* Footer */
footer{padding:36px 0;border-top:1px solid rgba(255,255,255,.06);color:var(--muted)}
@media (max-width: 900px){ .hero .wrap{grid-template-columns:1fr;gap:22px} .menu{display:none} }


/* Inputs & buttons */
.input{padding:12px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:#0f1626;color:#e6edf7;outline:none}
.input:focus{border-color:var(--ring);box-shadow:0 0 0 4px var(--ring)}
label{font-size:.95rem}
/* Social buttons container on small screens */
@media (max-width:600px){
  .cards{grid-template-columns:1fr!important}
}

/* --- BRAND OVERRIDE: Tek parça logo-isim görseli --- */
.header .brand img{
  height: 80px; /* ihtiyacına göre 80-100 arası oynatabilirsin */
  width: auto;
}
/* === Logo yanına beyaz 'Erencan Elektrik' yazısı (Montserrat) === */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700&display=swap');

/* Logo ve yazıyı aynı hizada tut */
.header .brand{
  display:flex;
  align-items:center;
  gap:14px; /* logo - yazı arası */
}

/* Logo boyutu (mevcut override kalabilir, burada teyit ediyoruz) */
.header .brand img{
  height: 80px;
  width: auto;
  display:block;
}

/* HTML'e dokunmadan yazıyı eklemek için pseudo-element kullanıyoruz */
.header .brand::after{
  content: "Erencan Elektrik";
  font-family: 'Montserrat', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(16px, 2vw, 24px);
  letter-spacing: .2px;
  color: #fff; /* beyaz yazı */
  line-height: 1;
  display: inline-block;
  transform: translateY(2px); /* optik hizalama */
}

/* Mobil uyum: logo ve yazıyı küçült */
@media (max-width: 900px){
  .header .brand img{ height: 56px; }
  .header .brand::after{ font-size: clamp(14px, 4vw, 20px); }
}
/* Mobilde sabit görünen Mağaza butonu */
.mobile-shop{ display:none; }

@media (max-width:900px){
  .menu{ display:none; }          /* mevcut davranış kalsın */
  .header .nav{ gap:16px; }
  .mobile-shop{
    display:inline-flex;
    margin-left:auto;             /* sağa yasla */
    padding:10px 14px;
    border-radius:12px;
    background:linear-gradient(90deg,var(--primary),var(--primary2));
    color:#fff;
  }
}

/* === /Logo yanında yazı === */