/*
Theme Name: MEÇ OTO EDC Landing
Theme URI: https://mecoto.com
Author: MEÇ OTO EDC
Description: Renault EDC (çift kavrama) odaklı, hızlı ve SEO uyumlu landing tema
Version: 1.4
*/

/* === Temel Değişkenler & Reset === */
:root {
  --bg:#0f1216; --card:#151a21; --ink:#e7edf3; --muted:#9aa6b2; --line:#2a2f36;
  --accent:#00d18f; --accent2:#00c786; --ring:rgba(0, 209, 143, .35);
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  line-height: 1.6;
}
a { color: inherit; text-decoration: none; }
.wrapper { max-width: 1180px; margin: 0 auto; padding: 0 18px; }

/* === Header / Footer === */
.site-header, .site-footer { background:#0b0f13; }
.site-header { border-bottom: 1px solid #000; }
.site-footer { border-top: 1px solid #000; padding: 18px; color:#9aa6b2; }

.site-header-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
}
.brand { display:flex; gap:10px; align-items:center; font-weight:900; }
.nav { display:flex; gap:14px; flex-wrap:wrap; }

.btn {
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 14px; border-radius:12px;
  border:1px solid var(--line); background:#0f141a; font-weight:800;
}
.btn:hover { box-shadow: 0 0 0 6px var(--ring); }
.btn.primary { background: linear-gradient(180deg, #00e6a0, #00c786); border-color: transparent; color:#08221a; }

/* === Hero === */
.hero {
  padding: 48px 0;
  background:
    radial-gradient(1200px 800px at 15% -10%, #1a212b 0%, transparent 60%),
    radial-gradient(1200px 800px at 120% 120%, #162029 0%, transparent 60%),
    var(--bg);
}
.hero-grid { display:grid; gap:18px; grid-template-columns: 1fr; }
@media (min-width: 940px) { .hero-grid { grid-template-columns: 1.1fr .9fr; } }

.card {
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)), var(--card);
  border:1px solid rgba(255,255,255,.06);
  border-radius:22px; padding:20px;
}
.badge {
  display:inline-block; border:1px solid rgba(255,255,255,.18); border-radius:999px;
  padding:6px 12px; background: rgba(0,209,143,.12); color:#b8ffe5; font-weight:700;
}
.hero h1 { margin:10px 0 8px; font-size: clamp(28px, 4.6vw, 44px); font-weight:900; }
.lead { color: var(--muted); margin: 6px 0 14px; }
.buttons { display:flex; gap:10px; flex-wrap:wrap; }

/* === Bölümler === */
.section { padding: 28px 0; }
.section h2 { margin: 0 0 12px; font-size: 24px; }

/* Hizmet kartları */
.grid { display:grid; gap:14px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .grid { grid-template-columns: repeat(3, 1fr); } }
.svc { border:1px solid var(--line); border-radius:18px; padding:16px; background:#0f141a; }
.svc h3 { margin:8px 0 6px; }
.svc p  { margin:0; color:var(--muted); }

/* “Neden Biz” kutuları */
.kv { display:grid; gap:12px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .kv { grid-template-columns: repeat(3, 1fr); } }
.kv .item { border:1px solid var(--line); border-radius:16px; padding:16px; background:#10161c; }

/* Süreç */
.process { display:grid; gap:12px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .process { grid-template-columns: repeat(4, 1fr); } }
.step { border:1px solid var(--line); border-radius:14px; padding:14px; background:#0f141a; }

/* Harita */
.map { border:1px solid var(--line); border-radius:18px; padding:16px; background:#0f141a; }
.map-wrap { position:relative; width:100%; aspect-ratio:16/11; border-radius:14px; overflow:hidden; }
.map-wrap iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }

/* SSS */
.faq details { border:1px solid var(--line); border-radius:14px; padding:12px 14px; background:#0f141a; }
.faq details + details { margin-top:10px; }
.faq summary { cursor:pointer; font-weight:700; }
/* ==== Hızlı İletişim – premium kart ==== */
.contact-card{
  position: relative;
  border-radius: 24px;
  padding: 24px;
  background:
    radial-gradient(1200px 600px at 0% -20%, rgba(0,209,143,.12), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)),
    var(--card);
  border:1px solid rgba(255,255,255,.08);
  box-shadow: 0 12px 30px rgba(0,0,0,.35), inset 0 0 0 8px rgba(0,209,143,.03);
}
.contact-head h2{ margin:0 0 6px; font-size:22px; font-weight:900; }
.contact-head .lead{ margin:0 0 16px; color:var(--muted); }

/* CTA düğmeleri */
.contact-actions{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:12px;
  margin-bottom:14px;
}
@media (max-width: 720px){
  .contact-actions{ grid-template-columns: 1fr; }
}
.cta{
  display:flex; align-items:center; gap:10px;
  padding:14px 16px; border-radius:14px;
  font-weight:800; text-decoration:none;
  border:1px solid rgba(255,255,255,.12);
  background:#10161c; color:var(--ink);
  transition: transform .05s ease, box-shadow .2s ease, background .2s;
}
/* === CTA ikon boyut & renk düzeltme === */
.cta{ gap:8px; font-size:15px; padding:10px 14px; border-radius:12px; }
.cta .ico{ width:20px; height:20px; flex:0 0 20px; display:inline-flex; align-items:center; justify-content:center; }
.cta .ico svg{ width:100%; height:100%; display:block; }

/* SVG içindeki path'leri metin rengiyle doldur */
.cta .ico svg, 
.cta .ico svg * { fill: currentColor !important; stroke: none !important; }

/* Varyant renkleri */
.cta.call { color:#ffffff; }              /* Beyaz */
.cta.wa   { color:#25D366; }              /* WhatsApp yeşili */
.cta.map  { color:#ff5a5f; }              /* konum kırmızısı */

/* CTA metinleri tek satırda kalsın */
.cta {
  white-space: nowrap;
}
/* === CTA taşma/hiza düzeltmesi === */

/* Karttaki kolonlar ekrana göre akıllı dağılsın */
.contact-actions{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); /* gerekince genişlesin/daralsın */
  gap: 10px;
}

/* Buton tek satır, taşarsa kes ve üç nokta göster */
.cta{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 10px 12px;
  font-size: 15px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  max-width: 100%;
}

/* İkon sabit; metin kalan alanı kullansın */
.cta .ico{
  width: 20px; height: 20px; flex: 0 0 20px;
  display: inline-flex; align-items: center; justify-content: center;
}
.cta .ico svg, .cta .ico svg *{ width: 100%; height: 100%; fill: currentColor; }

/* Metin kısmı esnesin ve taşmayı kontrol etsin */
.cta > span:not(.ico){
  flex: 1 1 auto;
  min-width: 0;                 /* flexbox’ta ellipsis için şart */
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

/* Küçük ekranlarda daha kompakt */
@media (max-width: 520px){
  .cta{ font-size: 14px; min-height: 42px; }
  .contact-actions{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 380px){
  .contact-actions{ grid-template-columns: 1fr; }
}