/* Modern minimalist dark theme for mcgdijital */
*{box-sizing:border-box}
:root{
  --bg:#0b0a3d;
  --card:#0f1140;
  --accent:#ff7b00;
  --muted:#bfc3d6;
  --primary:#00bfff;
  --white:#ffffff;
}
body{margin:0;font-family:'Poppins',sans-serif;background:linear-gradient(180deg,var(--bg),#060524);color:var(--muted);-webkit-font-smoothing:antialiased}
.container{width:92%;max-width:1100px;margin:0 auto}
.site-header{background:transparent;padding:18px 0;position:sticky;top:0;z-index:40}
.header-inner{display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:12px}
.brand-logo{width:56px;height:56px;border-radius:50%;background:linear-gradient(45deg,#ff9a3c,#ff7b00)}
.brand-title{color:var(--white);font-weight:700;font-size:14px}
.brand-sub{color:var(--accent);font-weight:600;font-size:12px;margin-top:2px}
.nav{display:flex;gap:18px}
.nav a{color:var(--muted);text-decoration:none;font-weight:500;font-size:14px}
.menu-btn{background:none;border:0;display:none}
.hero{padding:60px 0;display:flex;align-items:center}
.hero-inner{display:flex;align-items:center;gap:40px}
.hero-content{flex:1}
.hero h1{color:var(--primary);font-size:30px;margin:0 0 12px;font-weight:700}
.hero p{color:#dfe7ff;line-height:1.6;margin:0 0 20px;max-width:640px}
.btn{display:inline-block;padding:12px 20px;border-radius:8px;text-decoration:none;font-weight:700}
.btn-primary{background:linear-gradient(90deg,var(--accent),#ff9a3c);color:var(--white);box-shadow:0 6px 18px rgba(255,123,0,0.15)}
.btn-outline{border:1px solid rgba(255,255,255,0.08);color:var(--muted);background:transparent;margin-left:12px}
.hero-visual img{width:420px;max-width:100%;border-radius:12px;box-shadow:0 8px 30px rgba(2,6,23,0.6)}
.sections{padding:50px 0}
.sections.light{background:transparent;color:var(--muted)}
.sections.dark{background:rgba(255,255,255,0.02);border-top:1px solid rgba(255,255,255,0.02);color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:20px}
.card{background:var(--card);padding:18px;border-radius:12px;color:#e6ecff}
.card h3{margin:0 0 8px;color:var(--white)}
.steps{margin:0;padding-left:18px}
.site-footer{padding:18px 0;color:var(--muted);border-top:1px solid rgba(255,255,255,0.03)}
.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:12px}
.socials a{color:var(--muted);text-decoration:none;margin-left:12px}
@media(max-width:900px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .hero-inner{flex-direction:column-reverse;text-align:center}
  .nav{display:none}
  .menu-btn{display:block}
  .hero-visual img{max-width:320px}
}
@media(max-width:520px){
  .grid{grid-template-columns:1fr}
  .hero{padding:36px 0}
  .hero h1{font-size:22px}
  .brand-logo{width:48px;height:48px}
}


/* Hizmetler slider */
.service-slider {
  position: relative;
  width: 100%;
  min-height: 180px;
  margin-top: 20px;
  overflow: hidden;
}
.service-slider .slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  transition: opacity 1s ease;
  background: var(--card);
  color: var(--white);
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
  text-align: center;
}
.service-slider .slide.active {
  opacity: 1;
  position: relative;
}
.service-slider h3 {
  margin: 0 0 10px;
  color: var(--primary);
}

        .whatsapp-fixed {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background-color: #25D366;
            color: white;
            padding: 14px 20px;
            border-radius: 50px;
            text-decoration: none;
            font-weight: bold;
            display: flex;
            align-items: center;
            gap: 10px;
            box-shadow: 0 4px 10px rgba(0,0,0,0.2);
            z-index: 999;
        }

        .whatsapp-fixed:hover {
            background-color: #1ebe5d;
        }

        .whatsapp-fixed img {
            width: 24px;
            height: 24px;
        }
		
		.resim-kapsayici {
  display: flex;              /* yan yana hizala */
  justify-content: center;    /* ortala */
  align-items: center;
  gap: 20px;                  /* aralarına boşluk koy */
  flex-wrap: wrap;            /* ekran daralınca alt alta gelsin */
}

.resim-kapsayici img {
  width: 45%;                 /* her biri genişliğin yaklaşık yarısı kadar */
  max-width: 400px;           /* çok büyümesin */
  border-radius: 10px;        /* köşeleri yumuşat */
  object-fit: cover;          /* orantılı kesim */
}