*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: "Inter", sans-serif; }
img, iframe { max-width: 100%; height: auto; }

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html{
  font-size: 16px; /* temel ölçü */
}

body{
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  color: #333;
  line-height: 1.6;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
}

/* ================= HEADER ================= */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;

  padding: 18px 0;
  background: transparent;

  transition:
    background 0.35s ease,
    padding 0.35s ease,
    box-shadow 0.35s ease;
}


/* SCROLL OLUNCA */
.header.scrolled {
  background: #fff;
  padding: 14px 0; /* 👈 SCROLL'DA BİRAZ KÜÇÜLSÜN */
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}


/* ================= CONTAINER ================= */
.container {
  width: 90%;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

/* ÜSTTEYKEN HEADER ALTINDA KISALTILMIŞ BEYAZ ÇİZGİ */
.container::after {
  content: "";
  position: absolute;
  bottom: -12px;
  left: 0;
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.85);
  transition: opacity 0.3s ease;
}

/* Scroll olunca bu çizgi kaybolsun */
.header.scrolled .container::after {
  opacity: 0;
}

/* ================= LOGO ================= */
.logo {
  display: flex;
  align-items: center;
}

.logo img {
  max-height: 110px;
  width: auto;
  object-fit: contain;
  transition: all 0.3s ease;
}

/* Scroll sonrası logo küçülsün */
.header.scrolled .logo img {
  max-height: 70px;
}

/* ================= NAV ================= */
.nav a {
  margin-left: 25px;
  padding-bottom: 6px;
  text-decoration: none;
  font-size: 20px;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.3px;
  opacity: 0.9;
  position: relative;
  transition: color 0.25s ease, opacity 0.25s ease;
}

/* Hover + Active (yazı vurgusu) */
.nav a:hover,
.nav a.active {
  opacity: 1;
}

/* ALT ÇİZGİ – SABİT, YUMUŞAK FADE */
.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  opacity: 0;
  transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hover + Active çizgiyi göster */
.nav a:hover::after,
.nav a.active::after {
  opacity: 1;
}

/* Scroll'da yazılar siyah */
.header.scrolled .nav a {
  color: #000;
}

/* Scroll'da alt çizgi rengi */
.header.scrolled .nav a::after {
  background: rgba(0, 0, 0, 0.25);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* ================= HERO VIDEO ================= */
.hero {
  height: 100vh;
  position: relative;
}

.hero video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ================= CONTENT ================= */
.content {
  padding: 150px 10%;
  background: #f5f5f5;
}
/* ================= ABOUT (BOX + SHAPE) ================= */
.about-sec{
  padding: 110px 10%;
  background: #f5f6f8;
}

.about-wrap{
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 70px;
  align-items: center;
}

/* SOL: Yazı kutusu */
.about-card{
  background: #fff;
  border-radius: 22px;
  padding: 42px 42px;
  box-shadow: 0 18px 45px rgba(0,0,0,0.08);
}

.about-pill{
  display: inline-block;
  padding: 8px 14px;
  border-radius: 999px;
  background: #eef2f6;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .5px;
  margin-bottom: 16px;
}

.about-card h2{
  font-size: 46px;
  margin-bottom: 18px;
  color: #111;
}

.about-card p{
  font-size: 16px;
  line-height: 1.75;
  color: #5b5b5b;
  margin-bottom: 14px;
}

/* Butonlar */
.about-actions{
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 26px;
  flex-wrap: wrap;
}

.about-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 26px;
  border-radius: 999px;
  background: #111;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
  box-shadow: 0 14px 30px rgba(0,0,0,0.14);
}

.about-btn:hover{
  background:#000;
  transform: translateY(-1px);
}

.about-call{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: #111;
  padding: 10px 14px;
  border-radius: 14px;
  background: #f3f4f6;
}

.about-call small{
  display: block;
  font-size: 11px;
  opacity: .7;
  font-weight: 700;
  letter-spacing: .4px;
}

.about-call strong{
  display:block;
  font-size: 18px;
}

.call-ico{
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: #e7ebf2;
}

/* SAĞ: Görseller + geometrik şekil */
.about-media{
  position: relative;
  min-height: 440px;
}

/* Arkadaki geometrik şekil (blob) */
.about-blob{
  position: absolute;
  inset: 30px 30px 30px 30px;

  /* Görsele en yakın organik form */
  border-radius: 62% 38% 58% 42% / 48% 58% 42% 52%;

  /* Soft, dikkat çekmeyen arka plan */
  background: linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.06),
    rgba(0, 0, 0, 0.03)
  );

  filter: blur(0px);
}


/* Görsel kartları */
.about-img{
  position: absolute;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 18px 45px rgba(0,0,0,0.18);
  background: #fff;
}

.about-img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}

/* Üst görsel */
.about-img.top{
  right: 0;
  top: 0;
  width: 50%;
  height: 220px;
}

/* Alt görsel */
.about-img.bottom{
  left: 0;
  bottom: 0;
  width: 50%;
  height: 300px;
}

/* Responsive */
@media (max-width: 980px){
  .about-wrap{
    grid-template-columns: 1fr;
    gap: 34px;
  }
  .about-media{
    min-height: 380px;
  }
  .about-img.top{ width: 90%; }
  .about-img.bottom{ width: 95%; }
}

@media (max-width: 520px){
  .about-card{ padding: 28px; }
  .about-card h2{ font-size: 36px; }
  .about-img.top{ height: 200px; }
  .about-img.bottom{ height: 240px; }
}
/* ================= İKON + YAZI BÖLÜMÜ ================= */
.features-inline {
  background: #dedfdf;          /* hafif grimtrak arka plan */
  padding: 80px 10%;
}

.features-inline-container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

/* Tek satır (ikon + yazı) */
.feature-inline {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

/* İkon arkası blob */
.feature-icon {
  width: 90px;
  height: 90px;
  display: grid;
  place-items: center;
  background: #e9edf2;

  /* FOTOĞRAFA EN YAKIN 4-LOB SHAPE */
  border-radius:
    45% 55% 50% 50% /
    55% 45% 55% 45%;

  flex-shrink: 0;
}

/* ikon boyutu */
.feature-icon img {
  width: 50px;
  height: 50px;
  object-fit: contain;
}

/* Yazı alanı */
.feature-text h3 {
  font-size: 18px;
  font-weight: 600;
  color: #111;
  margin-bottom: 6px;
}

.feature-text p {
  font-size: 15px;
  line-height: 1.65;
  color: #666;
  margin: 0;
}

/* Responsive */
@media (max-width: 980px) {
  .features-inline-container {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}
/* ================= COFFEE BOX SECTION ================= */
.coffee-sec{
  background: #fff;              /* üstteki griyle devam etmesin */
  padding: 120px 10%;
}

/* ANA BOX */
.coffee-box{
  max-width: 1100px;        /* sağa kadar gitmesin */
  margin-left: 0;           /* soldan başlasın */
  margin-right: auto;       /* sağda boşluk kalsın */

  background: #fff;
  border-radius: 26px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.12);

  padding: 60px;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 50px;
  align-items: center;
}

/* METİN */
.coffee-text h2{
  font-size: 40px;
  color: #111;
  margin-bottom: 18px;
}

.coffee-text p{
  font-size: 16px;
  line-height: 1.75;
  color: #555;
  max-width: 520px;
}

/* FOTO */
.coffee-image{
  border-radius: 18px;
  overflow: hidden;
}

.coffee-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Responsive */
@media (max-width: 980px){
  .coffee-box{
    grid-template-columns: 1fr;
    padding: 40px;
  }

  .coffee-text h2{
    font-size: 32px;
  }

  .coffee-text p{
    max-width: 100%;
  }
}
/* ================= GREETING (SAĞA YASLI BOX) ================= */
.greeting-sec{
  background: #fff;           /* üstteki griden devam etmesin */
  padding: 120px 10%;
}

/* BOX sağa yaslı */
.greeting-box{
  max-width: 1100px;          /* sola kadar gitmesin */
  margin-left: auto;          /* sağa yasla */
  margin-right: 0;

    /* ⬅️ BOX SOLA DOĞRU UZASIN */
  width: calc(100% + 80px);     /* sola doğru +80px */
  max-width: 1180px;            /* kontrol */
  

  background: #fff;
  border-radius: 26px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.12);

  padding: 60px;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;  /* foto solda, metin sağda */
  gap: 50px;
  align-items: center;
}

/* FOTO */
.greeting-image{
  border-radius: 18px;
  overflow: hidden;
}

.greeting-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* METİN */
.greeting-text h2{
  font-size: 40px;
  color: #111;
  margin-bottom: 18px;
}

.greeting-text p{
  font-size: 16px;
  line-height: 1.75;
  color: #555;
  max-width: 520px;
}

/* Responsive */
@media (max-width: 980px){
  .greeting-box{
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 40px;
    grid-template-columns: 1fr;
    gap: 35px;
  }

  .greeting-text h2{
    font-size: 34px;
  }

  .greeting-text p{
    max-width: 100%;
  }
}
/* ================= CLEANING (SOLDAN BAŞLAYAN BOX) ================= */
.cleaning-sec{
  background: #fff;
  padding: 120px 10%;
}

/* Box soldan başlasın, sağda boşluk kalsın */
.cleaning-box{
  max-width: 1100px;
  margin-left: 0;
  margin-right: auto;

  background: #fff;
  border-radius: 26px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.12);

  padding: 60px;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr; /* foto solda, metin sağda */
  gap: 50px;
  align-items: center;
}

/* FOTO */
.cleaning-image{
  width: 100%;
  height: 100%;
  border-radius: 18px;
  overflow: hidden;
}

.cleaning-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  
}

/* METİN */
.cleaning-text h2{
  font-size: 40px;
  color: #111;
  margin-bottom: 18px;
}

.cleaning-text p{
  font-size: 16px;
  line-height: 1.75;
  color: #555;
  max-width: 520px;
}

/* Responsive */
@media (max-width: 980px){
  .cleaning-box{
    grid-template-columns: 1fr;
    padding: 40px;
    gap: 35px;
  }

  .cleaning-text h2{
    font-size: 34px;
  }

  .cleaning-text p{
    max-width: 100%;
  }
}


/* ================= HİZMETLERİMİZ (MAVİ ARKA PLAN) ================= */
.services-sec{
  background: #2f5687;            /* eski mavi */
  padding: 90px 10%;
}

.services-title{
  text-align: center;
  color: #fff;
  font-size: 42px;
  margin-bottom: 55px;
  font-weight: 700;
}

/* 4'lü grid */
.services-grid{
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}

/* Kart */
.service-box{
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(0,0,0,0.18);
  transition: transform .25s ease, box-shadow .25s ease;
  cursor: pointer;               /* tıklanabilir */
}

.service-box:hover{
  transform: translateY(-6px);
  box-shadow: 0 28px 60px rgba(0,0,0,0.25);
}

/* Foto */
.service-image{
  height: 170px;
  overflow: hidden;
}

.service-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}

.service-box:hover .service-image img{
  transform: scale(1.05);
}

/* İçerik */
.service-content{
  padding: 20px 20px 26px;
}

.service-tag{
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: #111;
  padding: 6px 10px;
  border-radius: 6px;
  margin-bottom: 10px;
}

.service-content h3{
  font-size: 17px;
  margin-bottom: 10px;
  color: #111;
  line-height: 1.25;
}

/* Kart içinde yazı çok uzamasın (3 satır) */
.service-content p{
  font-size: 14px;
  line-height: 1.6;
  color: #666;
  margin: 0;

  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* GRID (2 KART ORTALI) */
.services-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 420px));
  justify-content: center; /* 2 kartı ortalar */
  gap: 60px;
}

/* Responsive */
@media (max-width: 1200px){
  .services-grid{
    grid-template-columns: repeat(2, minmax(260px, 1fr));
    justify-content: center;
  }
}

@media (max-width: 600px){
  .services-sec{
    padding: 70px 6%;
  }

  .services-title{
    font-size: 32px;
    margin-bottom: 35px;
  }

  .services-grid{
    grid-template-columns: 1fr;
  }
}

/* ================= SERVICE MODAL ================= */
.service-modal{
  position: fixed;
  inset: 0;
  display: none;
  z-index: 99999;
}

.service-modal.active{
  display: block;
}

.service-modal-overlay{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.65);
}

.service-modal-content{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: min(960px, 92vw);
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 30px 90px rgba(0,0,0,0.4);

  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
}


.service-modal-image{
  min-height: 320px;
}

.service-modal-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.service-modal-text{
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;   /* dikey ortalama */
}


.service-modal-close{
  position: absolute;
  top: 14px;
  right: 14px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 12px;
  background: rgba(0,0,0,0.08);
  font-size: 28px;
  cursor: pointer;
  z-index: 2;
}

@media (max-width: 900px){
  .service-modal-content{
    grid-template-columns: 1fr;
  }
  .service-modal-image{
    min-height: 240px;
  }
}
.service-modal-text h2{
  font-size: 28px;
  margin-bottom: 18px;   /* BAŞLIK → YAZI BOŞLUĞU */
  color: #111;
}

.service-modal-text p{
  font-size: 16px;
  line-height: 1.75;
  color: #555;
  margin: 0;
}
/* ================= İSTASYONLAR (YUMUŞAK GEÇİŞ) ================= */
.stations-sec{
  position: relative;
  padding: 95px 10%;
  background: #ffffff;         /* mavi burada bitiyor */
}

/* ÜSTTE MAVİDEN BEYAZA SOFT GEÇİŞ BANDI */
.stations-sec::before{
  content: "";
  position: absolute;
  left: 0;
  top: -70px;                  /* bir önceki section'ın üstüne taşsın */
  width: 100%;
  height: 70px;
  background: linear-gradient(
    to bottom,
    rgba(47, 86, 135, 1),      /* senin mavi */
    rgba(47, 86, 135, 0)
  );
  pointer-events: none;
}

.stations-wrap{
  max-width: 1200px;
  margin: 0 auto;
}

/* KISA AÇIKLAMA */
.stations-intro{
  max-width: 760px;
  margin-bottom: 45px;
}

.stations-intro h2{
  font-size: 34px;
  font-weight: 800;
  color: #444242;
  margin-bottom: 14px;
}

.stations-intro p{
  font-size: 16px;
  line-height: 1.75;
  color: #555;
  margin: 0;   
}

/* GRID */
.stations-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px;
}

/* KART */
.station-card{
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  text-align: center;
  box-shadow: 0 16px 40px rgba(0,0,0,0.12);
  transition: transform .25s ease, box-shadow .25s ease;
}

.station-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 26px 65px rgba(0,0,0,0.18);
}

/* FOTO */
.station-img{
  height: 190px;
  overflow: hidden;
  background: #eef2f6;
}

.station-img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}

.station-card:hover .station-img img{
  transform: scale(1.05);
}

/* İSİM */
.station-name{
  font-size: 18px;
  font-weight: 800;
  color: #2f5687;
  margin: 18px 0 10px;
  text-transform: uppercase;
}

/* ADRES */
.station-address{
  font-size: 14px;
  line-height: 1.7;
  color: #333;
  padding: 0 18px;
  margin: 0 0 18px;
}

/* TEL */
.station-contact{
  padding: 14px 18px 22px;
  font-size: 14px;
  color: #2f5687;
  border-top: 1px solid rgba(0,0,0,0.08);
}

/* RESPONSIVE */
@media (max-width: 1100px){
  .stations-grid{
    grid-template-columns: 1fr;
  }
  .station-img{
    height: 240px;
  }
}
.station-link{
  text-decoration: none;
  color: inherit;
}
/* ================= TOPTAN AKARYAKIT (B2B) ================= */
.bulk-sec{
  padding: 100px 10%;
  background: #f6f7f9;                 /* mavi sonrası ferah geçiş */
  border-top: 1px solid rgba(0,0,0,0.08);
}

.bulk-wrap{
  max-width: 1200px;
  margin: 0 auto;
}

.bulk-head{
  max-width: 900px;
  margin-bottom: 45px;
}

.bulk-head h2{
  font-size: 36px;
  font-weight: 900;
  color: #4e5153;
  letter-spacing: .6px;
  margin-bottom: 16px;
}

.bulk-head p{
  font-size: 16px;
  line-height: 1.85;
  color: #555;
  margin: 0;
}

/* 3 avantaj */
.bulk-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 20px;
}

.bulk-item{
  background: #fff;
  border-radius: 18px;
  padding: 22px 22px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.10);
  display: flex;
  gap: 14px;
  align-items: flex-start;
  transition: transform .25s ease, box-shadow .25s ease;
}

.bulk-item:hover{
  transform: translateY(-5px);
  box-shadow: 0 26px 60px rgba(0,0,0,0.14);
}

.bulk-ico{
  width: 65px;
  height: 65px;
  border-radius: 16px;
  background: rgba(47, 86, 135, 0.10);
  display: grid;
  place-items: center;
  font-size: 40px;
  flex-shrink: 0;
}

.bulk-text h3{
  font-size: 18px;
  margin: 2px 0 8px;
  color: #111;
  font-weight: 800;
}

.bulk-text p{
  font-size: 14px;
  line-height: 1.7;
  color: #666;
  margin: 0;
}

/* CTA */
.bulk-cta{
  margin-top: 34px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
}

.bulk-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 22px;
  border-radius: 999px;
  background: #2f5687;
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  box-shadow: 0 16px 35px rgba(47, 86, 135, 0.25);
  transition: transform .2s ease, background .2s ease;
}

.bulk-btn:hover{
  transform: translateY(-2px);
  background: #274a74;
}

.bulk-link{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 999px;
  background: #fff;
  color: #2f5687;
  text-decoration: none;
  font-weight: 800;
  box-shadow: 0 10px 22px rgba(0,0,0,0.08);
}

.bulk-link span{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: rgba(47, 86, 135, 0.10);
  display: grid;
  place-items: center;
}

/* Responsive */
@media (max-width: 1050px){
  .bulk-grid{
    grid-template-columns: 1fr;
  }
}
/* ================= FOOTER  ================= */
.footerx{
  background: #ffffff;
  border-top: 1px solid rgba(0,0,0,0.08);
  margin-top: 90px;
}

/* Footer içindeki tüm linkler mavi olmasın */
.footerx a{
  color: inherit;
  text-decoration: none;
}
.footerx a:hover{
  color: #111;
}

/* Footer genelini biraz sola kaydır */
.footerx-wrap{
  max-width: 1200px;
  margin: 0 auto;

  padding-top: 55px;
  padding-bottom: 35px;

  padding-left: 0%;   /* ⬅️ SOL DAHA AZ */
  padding-right: 10%; /* ⬅️ SAĞ AYNI */

  display: grid;
  grid-template-columns: 1.2fr 1fr 1.3fr 3.2fr;
  gap: 70px;
  align-items: start;
}

/* Kolonlar aynı hizadan başlasın */
.footerx-col{
  justify-self: start;
}

/* LOGO */
.footerx-logo{
  max-width: 400px;
  height: auto;
  margin: 0;
  display: block;
}

/* Başlıklar */
.footerx-title{
  font-size: 18px;
  font-weight: 700;
  color: #111;
  margin-bottom: 18px;
}

/* Sosyal menü: alt alta */
.fw-menu{
  list-style: none;
  margin: 0;
  padding: 0;

  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ⬇️ SOSYAL MEDYA KOLONU AŞAĞI */
.footerx-wrap > .footerx-col:nth-child(2){
  margin-top: 20px; /* sosyal medya aşağı */
}

.fw-menu li{
  margin: 0;
  padding: 0;
}

/* Sosyal link satırları */
.footerx-item{
  display: flex;
  align-items: center;
  gap: 10px;
  color: #666;
  font-size: 15px;
  transition: color .2s ease;
}

.footerx-item:hover{
  color: #111;
}

/* Sosyal ikon kutusu */
.footerx-ico{
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: rgba(0,0,0,0.06);
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 800;
  color: #555;
}

/* Font Awesome ikonunu kutuya uydur */
.footerx-ico i{
  font-size: 14px;
  line-height: 1;
  color: inherit;
}

/* İletişim satırları */
.footerx-row{
  display: flex;
  align-items: flex-start; 
  gap: 14px;
  font-size: 17px;
  color: #444;
  margin-bottom: 16px;
}
.footerx-ico2{
  width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;

  color: #777;
  font-size: 14px;

  flex-shrink: 0;
  margin-top: 3px;   /* 🔑 HİZALAMA ANA NOKTASI */
}


.footerx-row a{
  color: #666;
  transition: color .2s ease;
}

.footerx-row a:hover{
  color: #111;
}

/* İletişim ikonları */
.footerx-ico2{
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  color: #777;
  font-size: 14px;
}

/* Adres satırı */
.footerx-row-address{
  align-items: flex-start;
}

.footerx-row-address span:last-child{
  line-height: 1.6;
}

/* Alt copyright */
.footerx-bottom{
  text-align: center;
  padding: 22px 10%;
  color: #6f6f6f;
  font-size: 20px;
  font-weight: 500;
  margin-top: -10px;
  border-top: 1px solid rgba(0,0,0,0.06);
}

/* MAP */
.footerx-map-box{
  width: 100%;
  aspect-ratio: 1.5 / 1;
  max-height: 40000px !important;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 12px 28px rgba(0,0,0,0.15);
}

.footerx-map-box iframe{
  width: 100% !important;
  height: 100% !important;
  border: 0;
}

/* Responsive */
@media (max-width: 950px){
  .footerx-wrap{
    grid-template-columns: 1fr;
    gap: 35px;
    transform: none; /* mobilde ortalı */
  }

  /* mobilde sosyal medya ekstra kaymasın */
  .footerx-wrap > .footerx-col:nth-child(2){
    margin-top: 0;
  }

  .footerx-logo{
    max-width: 220px;
  }
}
.footerx-wrap{
  margin-left: calc(-1 * (100vw - 2950px) / 2);
  margin-right: auto;
}



/* yazı boyutları*/
h1, h2, h3, h4, h5{
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  color: #111;
  line-height: 1.25;
  margin-bottom: 14px;
}
h1{ font-size: 48px; }
h2{ font-size: 40px; }
h3{ font-size: 24px; }
h4{ font-size: 20px; }
h5{ font-size: 18px; }
/*alt merinler*/
p{

  color: #555;
  line-height: 1.75;
  margin-bottom: 16px;
}
/*küçük metinler*/
small,
.service-tag,
.about-pill{
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.4px;
}
/* linkler*/
a{
  font-family: 'Inter', sans-serif;
  color: #2f5687;
  text-decoration: none;
  transition: color .2s ease;
}

a:hover{
  color: #111;
}

/* === GLOBAL METİN FORCE === */
p{
  font-size: 17px !important;
  line-height: 1.8 !important;
  color: #444 !important;
}
/* ================= TYPOGRAPHY (RENKLERE DOKUNMADAN) ================= */
:root{
  --font-main: 'Inter', sans-serif;

  /* Başlık ölçüleri */
  --h1: 48px;
  --h2: 40px;
  --h3: 24px;
  --h4: 20px;
  --h5: 18px;

  /* Metin ölçüleri */
  --p: 18px;        /* genel metin */
  --p-big: 19px;    /* önemli / açıklama metni */
  --small: 13px;    /* küçük yazılar */
}

/* Başlıklar */
h1, h2, h3, h4, h5{
  font-family: var(--font-main) !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  margin-bottom: 14px !important;
}
h1{ font-size: var(--h1) !important; }
h2{ font-size: var(--h2) !important; }
h3{ font-size: var(--h3) !important; }
h4{ font-size: var(--h4) !important; }
h5{ font-size: var(--h5) !important; }

/* Tüm paragraf metinleri */
p{
  font-family: var(--font-main) !important;
  font-size: var(--p) !important;
  line-height: 1.85 !important;
  margin-bottom: 16px !important;
}

/* Büyük açıklama metinleri */
.stations-intro p,
.bulk-head p{
  font-size: var(--p-big) !important;
  line-height: 1.9 !important;
}

/* Küçük metinler (etiket vs.) */
small,
.service-tag,
.about-pill{
  font-family: var(--font-main) !important;
  font-size: var(--small) !important;
  font-weight: 600 !important;
  letter-spacing: 0.4px !important;
}

/* Linkler & butonlar RENKLERİNE DOKUNMADAN */
a,
button{
  font-family: var(--font-main) !important;
}

.footerx-map-box{
 
  height: 240px !important;  /* büyümesi zorunlu */
}
.footerx-map-box iframe{
  width: 100% !important;
  height: 100% !important;
}
.fw-menu li a{
  display: flex;
  align-items: center;
  gap: 10px;
}

.fw-menu i{
  font-size: 18px;
}
/* HAKKIMIZDA PAGE*/
/* HAKKIMIZDA PAGE */
.about-hero {
  height: 45vh;              /* desktop */
  margin-bottom: 0;
  position: relative;
  overflow: hidden;
}

.about-hero-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 80%;   /* 👈 desktop: altı daha çok göster */
  display: block;
}

/* MOBİL */
@media (max-width: 768px) {
  .about-hero {
    height: 35vh;            /* mobilde daha kısa hero */
    min-height: 280px;
  }

  .about-hero-bg {
    object-fit: cover;       /* tekrar zorla */
    object-position: center 90%; /* 👈 mobilde ALT kadraj */
  }
}


/* hakkımızda conteinerbox*/
.about-section {
  padding: 40px 0;
}

.about-card {
  background: #fff;
  border-radius: 50px;
  padding: 42px;
  box-shadow: 0 18px 45px rgba(0,0,0,0.08);

  max-width: 900px;     /* 👈 YANLARDAN DARALTIYOR */
  margin: 0 auto;       /* 👈 ORTALIYOR */
}

.section-title {
  font-size: 2rem;
  margin-bottom: 24px;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: center;   /* 👈 BAŞLIK ORTALI */
}

.about-card p {
  line-height: 1.9;
  color: #444;
  margin-bottom: 18px;
}
.about-section {
  padding: 0;
}

.about-card {
  margin-top: 100px;   /* boşluk istiyorsan buradan */
}
/* iletişim syf*/
.contact-page {
  padding: 60px 16px;
  display: flex;
  justify-content: center;
}

.contact-box {
  width: 100%;
  max-width: 1100px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
  overflow: hidden;

  display: grid;
  grid-template-columns: 1fr 1.2fr;
  min-height: 520px;
}

/* SOL */
.contact-info {
  padding: 40px;
}

.contact-info h1 {
  font-size: 32px;
  margin-bottom: 25px;
}

.info-item {
  margin-bottom: 18px;
}

.info-item strong {
  display: block;
  margin-bottom: 6px;
}

.info-item a {
  color: #000;
  text-decoration: none;
}

.info-item small {
  opacity: 0.6;
}

/* SAĞ */
.contact-box{
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  min-height: 520px;
  align-items: stretch;            /* önemli */
}

.contact-map{
  display: flex;                   /* önemli */
  align-items: stretch;
  overflow: hidden;
}

.contact-map iframe{
  flex: 1;                         /* önemli: yüksekliği doldurur */
  width: 100%;
  border: 0;
  display: block;
}




/* MOBİL */
@media (max-width: 768px) {
  .contact-box {
    grid-template-columns: 1fr;
  }

  .contact-info {
    padding: 24px;
  }

  .contact-map {
    height: 320px;
  }
}
/*faaliyetler*/
.faaliyetler-header{
  max-width: 1200px;
  margin: 0 auto 40px auto;  /* ⬅️ TAM ORTALAMA */
  text-align: center;        /* ⬅️ METİNLER ORTADA */
}


.faaliyetler-sec {
  padding: 80px 20px;
  background: #f5f5f5;
}

.faaliyetler-container {
  max-width: 1000px;
  margin: auto;
  display: flex;
  gap: 30px;
}
@media (max-width: 640px){
  .faaliyetler-header h2{
    font-size: 28px;
  }
}


.faaliyet-card {
  flex: 1;
  background: #fff;
  border-radius: 40px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 10px 25px rgba(0,0,0,0.08);
  transition: transform .3s, box-shadow .3s;
    min-height: 250px;  /* istediğin kadar artır */
}

.faaliyet-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 35px rgba(0,0,0,0.15);
}

.faaliyet-card img {
  width: 100%;
  height: 230px;
  object-fit: cover;
}

.faaliyet-card h3 {
  padding: 20px 20px 10px;
  font-size: 22px;
}

.faaliyet-card p {
  padding: 0 20px 25px;
  color: #666;
}

/* MODAL */
.faaliyet-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

.faaliyet-modal.active {
  display: flex;
}

.modal-content {
  background: #fff;
  width: 90%;
  max-width: 900px;
  border-radius: 14px;
  padding: 30px;
  position: relative;
  animation: zoomIn .3s ease;
}

@keyframes zoomIn {
  from { transform: scale(.85); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.modal-close {
  position: absolute;
  top: 15px;
  right: 20px;
  font-size: 32px;
  cursor: pointer;
}

.modal-body {
  display: flex;
  gap: 30px;
}
.modal-image {
  display: none;
}




.modal-text h2 {
  margin-bottom: 15px;
}

.modal-text p {
  color: #555;
  line-height: 1.6;
}

/* MOBİL */
@media (max-width: 768px) {
  .faaliyetler-container {
    flex-direction: column;
  }

  .modal-body {
    flex-direction: column;
  }
}

/*istasyolarımız*/
:root{
  --bg: #f4f6f8;
  --card: #ffffff;
  --text: #0f172a;
  --muted: #64748b;
  --line: rgba(15, 23, 42, .10);
  --shadow: 0 18px 45px rgba(15, 23, 42, .12);
  --shadow2: 0 25px 65px rgba(15, 23, 42, .16);

}

.istasyonlar-sec{
  padding: 80px 20px;
  background: radial-gradient(1200px 600px at 20% 0%, rgba(225,29,46,.08), transparent 55%),
              radial-gradient(1200px 600px at 80% 10%, rgba(245,158,11,.10), transparent 55%),
              var(--bg);
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
}

.istasyonlar-container{
  max-width: 1200px;
  margin: 0 auto;
}

.istasyonlar-head{
  margin-bottom: 26px;
}

.istasyonlar-title{
  margin: 0 0 8px;
  font-size: clamp(26px, 3vw, 36px);
  letter-spacing: -.3px;
}

.istasyonlar-subtitle{
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

/* GRID */
.istasyonlar-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

/* CARD */
.istasyon-card{
  background: var(--card);
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  transition: transform .25s ease, box-shadow .25s ease;
}

.istasyon-card:hover{
  transform: translateY(-8px);
  box-shadow: var(--shadow2);
}

/* HERO IMAGE */
.istasyon-hero{
  position: relative;
  height: 200px;
  overflow: hidden;
}

.istasyon-hero img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1);
  transition: transform .35s ease;
}

.istasyon-card:hover .istasyon-hero img{
  transform: scale(1.06);
}

/* overlay: yazıları daha net yapar */
.istasyon-hero-overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
              rgba(0,0,0,.10),
              rgba(0,0,0,.25));
}



/* Badge */
.istasyon-badge{
  position: absolute;
  top: 14px;
  left: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.45);
  backdrop-filter: blur(6px);
  font-weight: 700;
  font-size: 13px;
  color: #111;
}

/* BODY */
.istasyon-body{
  padding: 18px 18px 14px;
}

.istasyon-name{
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.2px;
}

.istasyon-desc{
  margin: 0 0 14px;
  color: var(--muted);
  line-height: 1.7;
  font-size: 14px;
}

/* Address chip */
.istasyon-address{
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 12px;
  border-radius: 14px;
  background: #f8fafc;
  border: 1px solid rgba(2,6,23,.06);
}

.istasyon-address i{
  margin-top: 2px;
  color: var(--accent);
}

.istasyon-address span{
  font-size: 13px;
  color: #334155;
  line-height: 1.55;
}

/* Actions */
.istasyon-actions{
  display: flex;
  gap: 10px;
  margin-top: 14px;
}

.btn-primary{
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 14px;
  background:  #1f2933;
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  border: 1px solid rgba(0,0,0,.06);
  transition: transform .2s ease, filter .2s ease;
}

.btn-primary:hover{
  transform: translateY(-1px);
  filter: brightness(1.03);
}

.btn-ghost{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 14px;
  background: #fff;
  color: #111827;
  text-decoration: none;
  font-weight: 800;
  border: 1px solid rgba(2,6,23,.12);
  transition: transform .2s ease, background .2s ease;
  white-space: nowrap;
}

.btn-ghost:hover{
  transform: translateY(-1px);
  background: #f8fafc;
}

/* MAP */
.istasyon-map{
  padding: 12px 12px 14px;
}

.istasyon-map iframe{
  width: 100%;
  height: 170px;
  border: 0;
  border-radius: 16px;
}

/* RESPONSIVE */
@media (max-width: 980px){
  .istasyonlar-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 640px){
  .istasyonlar-grid{ grid-template-columns: 1fr; }
  .istasyon-hero{ height: 220px; }
  .istasyon-map iframe{ height: 190px; }
  .istasyon-actions{ flex-direction: column; }
  .btn-ghost{ width: 100%; }
}
/*mobil uyum*/
/* =========================
   MOBILE RESPONSIVE PATCH
   (CSS'in EN ALTINA ekle)
   Resim boyutlarına dokunmaz
   ========================= */

@media (max-width: 900px){
  html, body{ overflow-x: hidden; }

  /* Footer'daki negatif margin hack mobilde taşır: kapat */
  .footerx-wrap{
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 16px !important;
    padding-right: 16px !important;

    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  .footerx-wrap > .footerx-col:nth-child(2){
    margin-top: 0 !important;
  }

  .footerx-bottom{
    padding-left: 16px !important;
    padding-right: 16px !important;
    font-size: 16px !important;
  }

  /* Stations: 3 -> 1 */
  .stations-sec{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .stations-grid{
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  /* Bulk: 3 -> 1 */
  .bulk-sec{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .bulk-grid{
    grid-template-columns: 1fr !important;
  }

  /* Services: 2 -> 1 */
  .services-sec{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .services-grid{
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  /* Coffee / Greeting / Cleaning: taşmayı önle */
  .coffee-sec,
  .greeting-sec,
  .cleaning-sec{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .coffee-box,
  .greeting-box,
  .cleaning-box{
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Greeting'deki calc(100% + 80px) mobilde taşır */
  .greeting-box{
    width: 100% !important;
  }
}

@media (max-width: 600px){
  /* Header nav taşmasın */
  .container{
    flex-wrap: wrap;
    gap: 10px 12px;
  }

  .nav{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
  }

  .nav a{
    margin-left: 0 !important;
    font-size: 14px !important;
    padding: 8px 10px;
    white-space: nowrap;
  }

  /* Genel section padding */
  .content,
  .about-sec{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* Mobil tipografi (sadece yazı, resme dokunmaz) */
@media (max-width: 600px){
  :root{
    --h1: 34px;
    --h2: 28px;
    --h3: 20px;
    --h4: 18px;
    --h5: 16px;
    --p: 16px;
    --p-big: 16.5px;
    --small: 12.5px;
  }

  p, h1, h2, h3, h4, h5{ overflow-wrap: anywhere; }
}
@media (max-width: 640px){
  section{
    margin-bottom: 20px;
  }
}
/* HERO (ABOUT) - kadraj aşağı */
.hero.about-hero .about-hero-bg{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 100%; /* altı daha çok gösterir */
  display: block;
}
.footerx {
  width: 100%;
}

.footerx-wrap {
  max-width: 1200px;   /* sitenin ana genişliği */
  margin: 0 auto;      /* ← asıl center yapan satır */
  padding: 0 24px;     /* küçük ekranlar için */
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
   transform: translateX(-80px); /* 👈 ÇOK AZ sola kaydır */
  
}
@media (max-width: 768px) {
  .footerx-wrap {
    flex-direction: column;
    align-items: center;
    text-align: center;
    transform: translateX(12px);
  }

  .footerx-col {
    width: 100%;
  }
}