/* Major visual redesign for Muğla Çilingir */
:root{
  --primary-1: #ff4da6; /* vivid pink */
  --primary-2: #6a0dad; /* deep purple */
  --accent: #ffd166; /* warm yellow */
  --muted: #f8fafc;
  --card-shadow: 0 20px 40px rgba(106,13,173,0.12);
}

/* Global resets */
*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background: linear-gradient(180deg, #fffaf6 0%, #fff5fb 100%);
  color: #0f172a;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Header */
.site-header{
  position: sticky; top:0; z-index:60;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(10,10,10,0.04);
}
.site-brand{ display:flex; align-items:center; gap:12px; }
.site-brand img{ width:56px; height:56px; object-fit:contain; border-radius:12px; box-shadow: 0 8px 20px rgba(106,13,173,0.08); }
.site-title{ font-weight:800; letter-spacing:0.6px; color:var(--primary-2); }

/* Navigation */
.nav-links a{ color:#0f172a; padding:10px 14px; border-radius:8px; font-weight:600; }
.nav-links a:hover{ background:linear-gradient(90deg,var(--primary-1),var(--primary-2)); color:white; transform:translateY(-3px); transition:all .25s ease; }

/* Hero - split layout */
.hero-split{ 
  display:grid; 
  grid-template-columns: 1fr 520px; 
  gap:48px; 
  align-items:center; 
  padding:6rem 0;
  position: relative;
  z-index: 1;
}
.hero-left{ 
  position: relative;
  z-index: 10;
}
.hero-left h1{ font-size:clamp(34px,6vw,64px); line-height:1.02; margin:0 0 18px; }
.hero-left p{ color:#334155; font-size:18px; margin-bottom:24px; }

/* Hero CTA buttons */
.hero-cta{ 
  position: relative;
  z-index: 20;
  display: flex;
  gap: 16px;
  margin-top: 32px;
}
.hero-cta a{ 
  display:inline-flex; 
  gap:12px; 
  align-items:center; 
  padding:14px 22px; 
  border-radius:14px; 
  font-weight:700;
  position: relative;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cta-phone{ 
  background:linear-gradient(90deg,var(--accent),#ffb703); 
  color:#0b1220;
}
.cta-whatsapp{ 
  background:linear-gradient(90deg,var(--primary-1),var(--primary-2)); 
  color:white;
}
.hero-cta a:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

/* Hero right card visuals */
.hero-card{ background:linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.8)); border-radius:18px; padding:28px; box-shadow:var(--card-shadow); transform: rotate(-3deg); }
.hero-card img{ width:100%; border-radius:12px; display:block; }

/* Services - rotated cards */
.services-grid{ display:grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap:22px; margin-top:2rem; }
.service-card{ background:white; padding:18px; border-radius:16px; box-shadow:0 18px 36px rgba(15,23,42,0.06); transform: rotate(-2deg); transition: transform .35s ease, box-shadow .35s ease; }
.service-card:hover{ transform: rotate(0deg) translateY(-8px); box-shadow:0 30px 60px rgba(106,13,173,0.08); }
.service-icon{ width:56px; height:56px; display:flex; align-items:center; justify-content:center; border-radius:12px; color:white; font-size:20px; }
.service-icon.pink{ background:linear-gradient(90deg,var(--primary-1),#ff7ab6); }
.service-icon.purple{ background:linear-gradient(90deg,var(--primary-2),#8b3fe6); }

/* Testimonials */
.testimonials{ display:grid; grid-template-columns: repeat(3,1fr); gap:18px; margin-top:2rem; }
.testimonial{ background:linear-gradient(180deg,#fff,#fff7fb); padding:20px; border-radius:14px; box-shadow:0 10px 28px rgba(124,58,237,0.06); }

/* Footer - bold & clean */
.site-footer{ background:linear-gradient(180deg,#0b1220 0%, #0b0b12 100%); color:white; padding:48px 0; }
.footer-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:28px; }
.footer-brand{ display:flex; gap:12px; align-items:center; }
.footer-links a{ color:rgba(255,255,255,0.85); display:block; margin-bottom:8px; }

/* Utility */
.rounded-xl{ border-radius:14px; }

@media (max-width:1024px){ .hero-split{ grid-template-columns: 1fr; padding:4rem 0; } .testimonials{ grid-template-columns:1fr; } .footer-grid{ grid-template-columns:1fr 1fr; } }