:root{
  --electric-600:#007BFF;   /* ana elektrik mavisi */
  --electric-500:#00A6FF;   /* vurgu/hover */
  --electric-800:#0056B3;   /* koyu */
  --bg-950:#0E121A;         /* arka plan */
  --bg-900:#151A24;         /* kart/section */
  --text-100:#F5F9FF;       /* metin */
  --text-300:#C9D7FF;       /* ikincil metin */
  --accent-amber:#FFC107;   /* çağrı butonu */
  --radius:16px;
}

*{box-sizing:border-box} html,body{margin:0;padding:0}
body{
  font-family:system-ui, Segoe UI, Roboto, Arial;
  background:linear-gradient(180deg,var(--bg-950),#0b0f17);
  color:var(--text-100);
}
.container{width:min(1100px,92%);margin:auto}

/* NAV */
.nav{position:sticky;top:0;z-index:50;background:rgba(10,14,22,.78);backdrop-filter:blur(10px);border-bottom:1px solid #1c2130}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.brand{text-decoration:none;color:#fff;font-weight:800;font-size:1.2rem}
.brand span{color:var(--electric-500)}
#menu a{color:var(--text-300);text-decoration:none;margin-left:16px}
#menu a:hover{color:#fff}
.hamb{display:none;background:transparent;border:0;color:#fff;font-size:1.4rem}

/* BUTTONS */
.btn{padding:12px 18px;border-radius:999px;border:1px solid transparent;font-weight:600;display:inline-block}
.btn-primary{background:linear-gradient(90deg,var(--electric-600),var(--electric-500));color:#fff}
.btn-primary:hover{filter:brightness(1.05)}
.btn-outline{border-color:var(--electric-600);color:#fff}
.btn-outline:hover{background:rgba(0,123,255,.08)}
.btn-amber{background:var(--accent-amber);color:#222}
.btn-amber:hover{filter:brightness(1.05)}

/* HERO — foto üstte, metin ayrı; yüzü korumak için odak sola yakın */
.hero{position:relative}
.hero-media{position:relative}
.hero-media img{
  width:100%;
  height:clamp(340px,48vh,460px);
  object-fit:cover;
  object-position: 30% center; /* yüz sol tarafta ise odak sola kaydırılır */
  display:block;
  border-bottom-left-radius:18px;border-bottom-right-radius:18px;
  filter:saturate(1.05);
}
/* altta yumuşak karartma */
.hero-fade{
  position:absolute;left:0;right:0;bottom:0;height:85px;
  background:linear-gradient(180deg,rgba(14,18,26,0),#0E121A 80%);
  pointer-events:none;
}
.hero-content{background:#0E121A;padding:28px 0 14px}
.hero-content h1{font-size:clamp(28px,5vw,46px);margin:0 0 8px}
.hero-content p{color:var(--text-300);margin:0 0 16px}
.note{opacity:.85}
.cta{display:flex;gap:12px;margin-bottom:10px}
.badges{display:flex;gap:12px;flex-wrap:wrap;margin:0;padding:0;list-style:none}
.badges li{background:var(--bg-900);border:1px solid #1e2635;padding:8px 12px;border-radius:999px;color:var(--text-300)}

/* SERVICES */
.services{padding:40px 0}
.services h2{margin:0 0 16px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.card{background:var(--bg-900);border:1px solid #1e2635;border-radius:var(--radius);padding:12px}
.card img{width:100%;height:150px;object-fit:cover;border-radius:12px}
.card h3{margin:10px 0 6px}
.card p{margin:0;color:var(--text-300)}
.card img{ aspect-ratio: 4/3; }

/* ABOUT */
.about{display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:center;padding:40px 0}
.about-media img{width:100%;border-radius:var(--radius);border:1px solid #1e2635}
.tag{display:inline-block;border:1px solid #26406b;background:#0f1622;color:#bcd3ff;border-radius:10px;padding:8px 12px;margin-left:8px}

/* FAQ */
.faq{padding:30px 0}
.faq details{background:var(--bg-900);border:1px solid #1e2635;border-radius:12px;margin:10px 0;padding:12px}
.faq summary{cursor:pointer;font-weight:600}
.faq p{color:var(--text-300);margin:8px 0 0}

/* FOOTER + FABs */
.footer{border-top:1px solid #1e2635;background:#0b1018}
.footer-inner{padding:18px 0;display:flex;justify-content:space-between;align-items:center}
.fab-wrap{
  position:fixed;right:16px;bottom:var(--fab-bottom,16px);
  display:flex;gap:10px;z-index:9999;pointer-events:none;
}
.btn-fab{
  pointer-events:auto;background:var(--accent-amber);color:#000;
  width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  text-decoration:none;box-shadow:0 10px 30px rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.08);
}
.btn-fab.whats{background:linear-gradient(90deg,var(--electric-600),var(--electric-500));color:#fff}

/* COOKIE */
.cookie-banner{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:#151A24;color:#fff;border-top:1px solid #1e2635;
  display:flex;gap:12px;justify-content:space-between;align-items:center;
  padding:12px 16px;
}
.cookie-banner a{color:var(--electric-500);text-decoration:underline}

/* Smooth anchor offset (sticky navbar için) */
[id]{scroll-margin-top:90px}

.brand{display:flex;align-items:center;gap:10px;font-weight:800}
.brand-text{color:#fff}.brand-text .volt{color:#16B4FF}
.brand-mark{width:50px;height:50px}
.brand-mark{ image-rendering:auto; filter:none; }
.brand{ transform:none; }         /* ölçek blur’u olmasın */


/* RESPONSIVE */
@media (max-width:960px){ .about{grid-template-columns:1fr} }
@media (max-width:760px){
  #menu{position:absolute;right:4%;top:56px;background:#0e121a;border:1px solid #1e2635;border-radius:12px;padding:10px 12px;display:none}
  #menu a{display:block;margin:8px 0}
  .hamb{display:block}
}
@media (max-width:520px){
  .btn-fab{width:52px;height:52px}
  .fab-wrap{right:12px}
}

.icon-link{ display:block; line-height:0; }
:root{ --ico:44px; }
.icon-link img{ width:var(--ico); height:var(--ico); display:block; }
/* Tıklanabilirlik on */
.fab-wrap{
  pointer-events:auto !important;
  position:fixed; right:16px; bottom:var(--safe-bottom,16px);
  z-index: 9999;
}

/* Hangi sınıfı kullanıyorsan onu tıklanabilir yap */
.btn-fab, .icon-link{ 
  pointer-events:auto; 
  display:block; 
  line-height:0;
}

/* Her ihtimale karşı üstteki katmanların taşmasını engelle */
.cookie-banner{ z-index: 60; }  /* fab-wrap bundan büyük already */


/* === Index intro (sadece ana sayfa) === */
.index-intro{
  position:relative; overflow:hidden;
  padding:clamp(32px,6vw,72px) 0;
  background:#0E121A; border-bottom:1px solid #1e2635;
}
.index-intro .bg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:30% center;
  opacity:.28; filter:saturate(1.05) contrast(1.05) blur(0.5px);
}
.index-intro .scrim{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(60% 80% at 15% 20%, rgba(22,180,255,.18), transparent 60%),
    linear-gradient(180deg, rgba(14,18,26,.0) 0%, #0E121A 85%);
}
.index-intro .container{ position:relative; z-index:1; }
.index-intro h1{ margin:0 0 10px; font-size:clamp(28px,5vw,46px); }
.index-intro .accent{ color:var(--electric-500); }
.index-intro p{ margin:0 0 14px; color:var(--text-300); max-width:62ch; }

/* link çipleri */
.local-links{ display:flex; gap:10px; flex-wrap:wrap; margin-top:6px; }
.chip{
  display:inline-block; padding:8px 12px; border-radius:999px;
  background:#0f1622; border:1px solid #26406b; color:#bcd3ff;
  text-decoration:none; font-weight:600;
}
.chip:hover{ border-color:var(--electric-500); color:#fff; }
/* visited mor olmasın */
.chip:link, .chip:visited{ color:#bcd3ff; }


@media (min-width:1024px){/* Ana sayfa intro ayarı */
.index-intro{
  min-height: clamp(340px,48vh,520px);
  padding: clamp(24px,5vw,56px) 0 clamp(18px,3.5vw,36px);
  border-bottom: 0;
}
.index-intro .bg{
  opacity:.34;
  filter:saturate(1.05) contrast(1.05) blur(.3px);
}
.index-intro .scrim{
  background:
    radial-gradient(60% 80% at 15% 20%, rgba(22,180,255,.16), transparent 60%),
    linear-gradient(180deg, rgba(14,18,26,0) 0%, rgba(14,18,26,.85) 65%, #0E121A 100%);
}
/* Alt kenarı yumuşat */
.index-intro::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:28px;
  background:linear-gradient(180deg, rgba(14,18,26,0), #0E121A);
  pointer-events:none;
}
/* Hizmetler başlangıcını sıkı tut */
.services{ margin-top:0; padding-top:22px; }
.index-intro::before{
    content:"";
    position:absolute; left:48px; top:24px;
    width:120px; height:120px; opacity:.06;
    background:url("/assets/brand/anadoluvolt-512.png") center/contain no-repeat;
    pointer-events:none;
  }
  .index-intro .container{ position:relative; z-index:1; }
}
/* Varsayılan gizli */
.mobile-callbar{ display:none; }

@media (max-width:760px){
  /* İçerik barın altında kalmasın */
  body{ padding-bottom: calc(64px + env(safe-area-inset-bottom)); }

  .mobile-callbar{
    position:fixed; left:0; right:0; bottom:0; z-index:9998;
    display:grid; padding:8px 12px calc(8px + env(safe-area-inset-bottom));
    background:rgba(11,16,24,.85); backdrop-filter:blur(8px);
    border-top:1px solid #1e2635;
  }
  .mobile-callbar .callbtn{
    display:block; text-align:center; text-decoration:none; font-weight:800;
    padding:12px 16px; border-radius:999px;
    background:var(--accent-amber); color:#181818;
    box-shadow:0 8px 20px rgba(0,0,0,.35);
  }

  /* Sağ alttaki ikonlar çakışmasın */
   .fab-wrap{ display:none !important; }
}
/* Çerez barı ikonların ÜSTÜNDE olsun */
.cookie-banner{ z-index:10010; }

/* İkonları biraz aşağıda tutmak istersen: */
:root{ --fab-offset:16px; }               /* varsayılan */
.fab-wrap{ bottom: var(--fab-offset); }   /* mevcut kullanım */

/* Çerez barı açıkken ikonları yukarı it (yaklaşık 80–100px) */
body.cookie-open .fab-wrap{ bottom:96px; }

#acil.cta-acil{padding:48px 16px;margin:32px auto;border-radius:16px;
  background:#101820; color:#eaf2ff; text-align:center; max-width:960px}
#acil .cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:12px}
#acil .btn{padding:12px 20px;border-radius:999px;font-weight:600;text-decoration:none;display:inline-block}
#acil .btn-call{background:#ffb000;color:#111}
#acil .btn-wa{background:#25D366;color:#111}