/* ============================
   PALET (renk değişkenleri)
   ============================ */
:root{
  --turquoise:#26C6DA;
  --teal:#00897B;
  --navy:#0D47A1;
  --purple:#6A1B9A;
  --fuchsia:#D81B60;
  --pink:#F48FB1;
  --yellow:#FDD835;
  --lilac:#B39DDB;
  --mint:#B2EBF2;
  --greytext:#334;
  --muted:#667;
  --white:#fff;
  --shadow:0 10px 24px rgba(0,0,0,.08);
  --radius:12px;
}

/* ============================
   GENEL
   ============================ */
body{
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  background: #ffffff;
  color:var(--greytext);
  line-height:1.6;
}

a{ color:var(--purple); text-decoration:none; }
a:hover{ color:var(--fuchsia); text-decoration:underline; }

/* ============================
   NAVBAR
   ============================ */
header{
  background:linear-gradient(90deg,var(--turquoise),var(--navy));
  color:#fff; padding:10px 0; position:sticky; top:0; z-index:1000; box-shadow:var(--shadow);
}
nav{ width:90%; margin:auto; display:flex; justify-content:space-between; align-items:center; }
.logo a{ color:#fff; font-size:24px; font-weight:bold; }
.nav-links{ list-style:none; display:flex; gap:20px; }
.nav-links li a{ color:#fff; font-weight:600; }
.nav-links li a:hover{ color:var(--yellow); }

/* ============================
   HERO
   ============================ */
.hero{
  text-align:center; padding:60px 20px;
  background:
    radial-gradient(900px 420px at 15% -10%, var(--mint) 0%, transparent 60%),
    radial-gradient(700px 380px at 85% -8%, #ffe0f0 0%, transparent 60%),
    #fff;
}
.hero h1{ font-size:36px; margin-bottom:20px; color:var(--navy); }
.hero p{ font-size:18px; margin-bottom:20px; color:var(--muted); }

.btn{
  background:var(--fuchsia); color:#fff; padding:12px 24px; border-radius:10px; display:inline-block;
  transition:transform .2s ease, background .2s ease; box-shadow:var(--shadow);
}
.btn:hover{ background:var(--yellow); color:#222; transform:translateY(-2px); }
.btn:focus{ outline:3px solid rgba(216,27,96,.35); outline-offset:2px; }

/* ============================
   HAKKIMIZDA / HİZMETLER KUTULARI
   ============================ */
.about,.services{
  width:80%; margin:40px auto; text-align:center; background:#fff; padding:30px;
  border-radius:var(--radius); box-shadow:var(--shadow);
}
.about h2,.services h2{ color:var(--purple); margin-bottom:20px; }

/* ============================
   FOOTER
   ============================ */
footer{
  background:linear-gradient(90deg,var(--navy),var(--purple));
  color:#fff; text-align:center; padding:20px 0; margin-top:40px;
}

/* ============================
   HİZMETLER KARTLARI
   ============================ */
.service-list{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:20px; margin-top:20px;
}
.service-item{
  background:#fff; padding:20px; border-radius:var(--radius); box-shadow:var(--shadow);
  text-align:left; border:2px solid transparent; transition:transform .15s ease,border-color .15s ease;
}
.service-item h3{ margin:0 0 10px; color:var(--navy); }
.service-item:nth-child(6n+1){ border-top:6px solid var(--turquoise); }
.service-item:nth-child(6n+2){ border-top:6px solid var(--purple); }
.service-item:nth-child(6n+3){ border-top:6px solid var(--yellow); }
.service-item:nth-child(6n+4){ border-top:6px solid var(--fuchsia); }
.service-item:nth-child(6n+5){ border-top:6px solid var(--lilac); }
.service-item:nth-child(6n+6){ border-top:6px solid var(--teal); }
.service-item:hover{ transform:translateY(-2px); border-color:var(--turquoise); }

/* ============================
   İLETİŞİM
   ============================ */
.contact-top-photo{ margin:24px auto 8px; width:100%; max-width:980px; padding:0 12px; }
.contact-top-photo img{
  display:block; margin:0 auto; width:100%; max-width:820px; height:auto;
  border-radius:16px; box-shadow:0 8px 24px rgba(0,0,0,0.15);
}
.contact-section{
  width:80%; margin:40px auto; background:#630f87;
  padding:30px; border-radius:10px; box-shadow:0 4px 12px rgba(0,0,0,0.1);
  text-align:center; color:#ffffff;
}
.contact-photo{ width:200px; border-radius:10px; margin-bottom:20px; }
.contact-section h2{ font-size:50px; font-family:Verdana, Geneva, Tahoma, sans-serif; color:#f7b3ef; margin-bottom:20px; }
.contact-section h3{ font-size:22px; color:#ffffff; margin:25px 0 10px; }
.contact-section p{ font-size:18px; margin:5px 0; }
.contact-section .kapali{ color:rgb(253, 220, 3); font-weight:bold; }

.icon-text{ display:flex; align-items:center; justify-content:center; gap:10px; font-size:18px; margin:8px 0; }
.icon-text img{ width:28px; height:28px; }
.icon-text a{ color:#ffffff; font-size:18px; text-decoration:none; transition:color .3s; }
.icon-text a:hover{ color:#FDB913 }

.social-media{ margin-top:25px; }
.social-icon{ width:40px; transition:transform .3s; }
.social-icon:hover{ transform:scale(1.2); }

/* ============================
   EKİBİMİZ – Sol yuvarlak foto, sağda gölgeli kare
   ============================ */
.team{ width:80%; max-width:1100px; margin:40px auto 60px; }
.team-rows{ display:flex; flex-direction:column; gap:32px; }

/* Her satır: sol foto kutusu + sağ alıntı kutusu */
.team-row{
  display:grid;
  grid-template-columns: minmax(260px, 380px) 1fr;
  gap:24px;
  align-items:center;
}

/* Sol: foto+isim+rol kutusu (beyaz arka plan ve gölge) */
.team-photo-box{
  background:#fff; border-radius:var(--radius); box-shadow:var(--shadow);
  text-align:center; padding:24px;
}
.team-photo{
  width:180px; height:180px; object-fit:cover;
  border-radius:50%; border:5px solid #FDB913;
  margin:0 auto 15px; display:block;
}
.team-name{ font-size:22px; color:#A90432; font-weight:bold; margin:8px 0 6px; }
.team-role{ font-size:16px; color:#555; margin:0; }

/* Sağ: alıntı kutusu (beyaz + gölge) */
.quote-card{
  background:#fff; border-radius:var(--radius); box-shadow:var(--shadow);
  padding:30px; display:flex; align-items:center; justify-content:center; text-align:center;
  border-left:6px solid var(--turquoise);
}
.quote-text{ font-size:16px; line-height:1.8; color:var(--greytext); margin:0; }

/* Renk şeridi sırayla değişsin (opsiyonel) */
.team-row:nth-child(6n+2) .quote-card{ border-left-color: var(--purple); }
.team-row:nth-child(6n+3) .quote-card{ border-left-color: var(--yellow); }
.team-row:nth-child(6n+4) .quote-card{ border-left-color: var(--fuchsia); }
.team-row:nth-child(6n+5) .quote-card{ border-left-color: var(--lilac); }
.team-row:nth-child(6n+6) .quote-card{ border-left-color: var(--teal); }

/* Hover mikro animasyon */
.team-row:hover .quote-card{ transform:translateY(-2px); transition:transform .15s ease; }

/* ============================
   Responsive
   ============================ */
@media (max-width:992px){
  .about,.services,.contact-section{ width:92%; padding:22px; }
}
@media (max-width:720px){
  .team-row{ grid-template-columns:1fr; }
}



/* Sağdaki alıntı kutusunu sol kutu ile aynı boyda tut */
.team-row {
  align-items: stretch; /* her iki sütun aynı yükseklikte */
}

.team-photo-box,
.quote-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Sağdaki kutu tam yükseklikte olsun */
.quote-card {
  height: 100%;
}


/* Ekibimiz kutularını biraz küçült */
.team-row {
  align-items: stretch;
  grid-template-columns: minmax(220px,320px) 1fr; /* sol kutu daraldı */
  gap: 20px;
}

.team-photo-box {
  padding: 18px;
}

.team-photo-box .team-photo {
  width: 150px;
  height: 150px;
  margin-bottom: 12px;
}

.team-photo-box .team-name {
  font-size: 20px;
  margin: 6px 0 4px;
}

.team-photo-box .team-role {
  font-size: 15px;
}

.quote-card {
  height: 100%;
  padding: 24px;          /* önceki 35px yerine */
}

.quote-text {
  font-size: 16px;
  line-height: 1.7;
}



/* Sağdaki alıntı kutusunu küçült ve sabitle */
.quote-card {
  max-width: 500px;      /* genişliği daralt */
  padding: 20px 24px;    /* iç boşluğu azalt */
  margin-left: auto;     /* sol kutudan uzaklığı koru */
  margin-right: auto;
  transform: none !important; /* hareket iptal */
}

/* Hover efektini tamamen kaldır */
.team-row:hover .quote-card {
  transform: none;
  transition: none;
}



/* Sol ve sağ kutular aynı boyda olsun */
.team-row {
  display: grid;
  grid-template-columns: minmax(260px,380px) 1fr;
  gap: 24px;
  align-items: stretch; /* yükseklikleri eşitle */
}

/* her iki kutu eşit yükseklikte */
.team-photo-box,
.quote-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

/* sağdaki kutu aynı boy ve daha dar boşluklu */
.quote-card {
  padding: 20px 28px;
  box-sizing: border-box;
  transform: none !important;   /* hover hareketi tamamen kapat */
  transition: none !important;
}




/* Sol ve sağ kartların tamamen eşit yükseklikte olması için */
.team-row {
  display: grid;
  grid-template-columns: minmax(260px,380px) 1fr;
  gap: 24px;
  align-items: stretch;   /* iki kolonun yüksekliğini eşitle */
}

/* her iki kutu tam eşit boy */
.team-photo-box,
.quote-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;           /* satırın tam yüksekliği */
  box-sizing: border-box; /* padding dahil hesaplansın */
}

/* soldaki fotoğraf kutusundaki iç boşluğu sabitle */
.team-photo-box {
  padding: 24px;
  margin: 0;              /* fazladan boşluk bırakmasın */
}

/* sağdaki yazı kutusunun hover hareketini tamamen kapat */
.team-row:hover .quote-card {
  transform: none !important;
  transition: none !important;
}



/* ============================
   Hakkımızda – Foto solda/sağda + hover efekti
   ============================ */
.about-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  width: 85%;
  margin: 40px auto;
}

.about-row.reverse {
  flex-direction: row-reverse; /* Fotoğrafı sağa alır */
}

.about-image img {
  width: 280px;             /* Küçük fotoğraf */
  height: auto;
  border-radius: 12px;
  object-fit: cover;
  box-shadow: var(--shadow);
}

/* Metin kutusu */
.about-text {
  flex: 1;
  background: #fff;
  padding: 30px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  color: var(--greytext);
  transition: background 0.3s ease, color 0.3s ease;
}

/* Başlık ve paragraf düzeni */
.about-text h2 {
  color: var(--greytext);
  margin-top: 0;
  margin-bottom: 15px;
}

.about-text p {
  font-size: 16px;
  line-height: 1.8;
  margin: 0;
}

/* Hover efekti: arka plan mor, yazılar beyaz */
.hover-box:hover {
  background: var(--purple);
  color: #fff;
}

.hover-box:hover h2,
.hover-box:hover p {
  color: #fff;
}

/* Küçük ekran uyumu */
@media (max-width: 720px) {
  .about-row {
    flex-direction: column;
    text-align: center;
  }
  .about-row.reverse {
    flex-direction: column;
  }
  .about-image img {
    width: 90%;
  }
}





:root{
  --turquoise:#26C6DA;
  --lilac:#B39DDB;
  --yellow:#FDD835;
  --purple:#6A1B9A;
  --fuchsia:#D81B60;
  --greytext:#333;
  --white:#fff;
  --shadow:0 10px 24px rgba(0,0,0,.08);
  --radius:14px;
}

/* GENEL */
body{ margin:0; font-family:Arial,Helvetica,sans-serif; background:var(--white); color:var(--greytext); }
a{ color:var(--purple); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* NAVBAR */
header{ background:linear-gradient(90deg,var(--turquoise),var(--purple)); box-shadow:var(--shadow); }
nav{ width:90%; margin:auto; display:flex; justify-content:space-between; align-items:center; }
.logo img{ height:60px; }
.nav-links{ list-style:none; display:flex; gap:20px; }
.nav-links a{ color:var(--white); font-weight:600; padding:10px; transition:.3s; }
.nav-links a:hover,.nav-links a.active{ background:var(--fuchsia); border-radius:var(--radius); }

/* HERO */
.hero{ background:linear-gradient(135deg,var(--turquoise),var(--lilac)); padding:80px 20px; text-align:center; color:#fff; }
.hero h1{ font-size:48px; margin-bottom:20px; }
.hero p{ font-size:20px; margin-bottom:30px; }
.btn{ background:var(--fuchsia); color:#fff; padding:12px 28px; border-radius:var(--radius); font-weight:bold; transition:.3s; }
.btn:hover{ background:var(--yellow); color:#000; }

/* RENKLİ GEÇİŞ BLOKLARI */
.color-block{ padding:60px 20px; text-align:center; color:#fff; }
.color-block .content{ max-width:800px; margin:auto; }
.color-block h2{ font-size:34px; margin-bottom:15px; }
.color-block p{ font-size:18px; line-height:1.7; }
.color-block.turquoise{ background:var(--turquoise); }
.color-block.lilac{ background:var(--lilac); }
.color-block.yellow{ background:var(--yellow); color:#333; }

/* FOTO GALERİ */
.photo-gallery{ display:flex; justify-content:center; gap:20px; padding:50px 20px; background:var(--white);}
.photo-gallery img{ width:30%; border-radius:var(--radius); box-shadow:var(--shadow); transition:.3s; }
.photo-gallery img:hover{ transform:scale(1.05); }

/* FOOTER */
footer{ background:linear-gradient(90deg,var(--purple),var(--fuchsia)); color:#fff; padding:30px 20px; text-align:center; }
footer a{ color:#fff; font-weight:bold; }
footer a:hover{ text-decoration:underline; }

/* Responsive */
@media(max-width:768px){
  .nav-links{ flex-direction:column; }
  .photo-gallery{ flex-direction:column; }
  .photo-gallery img{ width:80%; }
}





/* ========= PALET ========= */
:root{
  --purple:#4B1975;
  --purple-2:#6A1B9A;
  --fuchsia:#D81B60;
  --yellow:#FDD835;
  --orange:#F05423;
  --lilac:#B39DDB;
  --turquoise:#26C6DA;
  --ink:#222;
  --muted:#556;
  --white:#fff;
  --shadow:0 16px 40px rgba(0,0,0,.10);
  --radius:18px;
}

/* ========= GENEL ========= */
*{ box-sizing:border-box }
body{ margin:0; font-family:Inter, system-ui, -apple-system, Arial, Helvetica, sans-serif; color:var(--ink); background:#fff; }
img{ max-width:100%; display:block; }
.container{ width:90%; max-width:1200px; margin:0 auto; }
.container.narrow{ max-width:980px; }
a{ color:var(--purple-2); text-decoration:none }
a:hover{ text-decoration:underline }

/* ========= NAVBAR ========= */
.site-header{ background:#fff; box-shadow:var(--shadow); position:sticky; top:0; z-index:40; }
.nav{ width:90%; max-width:1200px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; padding:10px 0; }
.menu{ list-style:none; display:flex; gap:18px; margin:0; padding:0; }
.menu a{ display:inline-block; padding:10px 14px; border-radius:12px; color:#333; font-weight:600; }
.menu a.active, .menu a:hover{ background:var(--purple); color:#fff; }

/* ========= HERO ========= */
.hero-giant{
  background:
    linear-gradient(0deg, rgba(75,25,117,.65), rgba(75,25,117,.65)),
    var(--hero) center/cover no-repeat;
  color:#fff; padding:80px 0 30px; position:relative;
}
.hero-inner{ width:90%; max-width:1200px; margin:0 auto; }
.hero-giant h1{ font-size:48px; margin:60px 0 10px; font-weight:800; }
.breadcrumb{
  background:var(--purple); display:inline-flex; gap:12px; align-items:center;
  padding:14px 26px; border-radius:16px; box-shadow:var(--shadow);
  font-weight:700;
}
.breadcrumb a{ color:#fff; text-decoration:none }

/* ========= GİRİŞ ========= */
.intro{ padding:40px 0 10px; }
.display{ font-size:42px; text-align:center; margin:0 0 10px; }
.lead{ text-align:center; color:#444; font-size:18px; line-height:1.8; margin:0; }
.light{ color:#fff }

/* ========= İKİ KART ========= */
.two-cards{ display:grid; grid-template-columns:1fr 1fr; gap:28px; margin:40px auto; }
.pill-card{
  background:#fff; border-radius:26px; box-shadow:var(--shadow); position:relative; overflow:hidden;
  display:flex; flex-direction:column;
}
.pill-photo{
  height:280px;
  background:var(--photo) center/cover no-repeat;
}
.pill-icon{
  position:absolute; left:26px; top:210px; width:84px; height:84px; border-radius:22px;
  background:#fff; display:grid; place-items:center; font-size:38px; box-shadow:var(--shadow);
}
.pill-body{
  background:var(--pill); color:#fff; margin:0 16px 16px; border-radius:30px 30px 22px 22px;
  padding:22px 22px 28px; text-align:center;
}
.pill-body h3{ margin:6px 0 10px; font-size:26px }
.pill-body p{ margin:0; line-height:1.8; font-size:16px }

/* ========= YÖNTEMLER (mor zemin + sarı kemer) ========= */
.methods{
  background:var(--purple); color:#fff; padding:70px 0; position:relative; overflow:hidden;
}
.eyebrow{ letter-spacing:.15em; text-align:center; opacity:.9; margin:0 0 6px; }
.methods-sub{ text-align:center; max-width:760px; margin:10px auto 30px; opacity:.95; }
.arches{
  position:relative; margin-top:20px;
  display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start;
}
.arches::before{
  content:""; position:absolute; left:5%; right:5%; top:15px; height:180px;
  background:
    radial-gradient(400px 140px at 25% 100%, var(--yellow) 64%, transparent 65%),
    radial-gradient(400px 140px at 75% 100%, var(--yellow) 64%, transparent 65%);
  opacity:.95;
}
.method{ position:relative; z-index:1; text-align:center; padding-top:40px; }
.shape{ width:290px; height:210px; margin:0 auto 14px; overflow:hidden; border:8px solid #fff; box-shadow:var(--shadow); }
.shape img{ width:100%; height:100%; object-fit:cover; }
.shape.tri{ clip-path:polygon(50% 0, 100% 100%, 0 100%); border-radius:16px; }
.shape.hex{ clip-path:polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); border-radius:16px; }
.method h3{ margin:10px 0 8px; font-size:24px; }
.method p{ margin:0; opacity:.95; line-height:1.8; }

/* ========= HİZMET DAİRELER ========= */
.service-circles{
  margin:60px auto 50px;
  display:grid; grid-template-columns:repeat(4,1fr); gap:34px;
}
.service-col{ text-align:center; }
.circle{
  width:210px; height:210px; border-radius:50%; margin:0 auto 14px; padding:6px;
  background:
    radial-gradient(circle at 70% 30%, rgba(255,255,255,.45), rgba(255,255,255,0) 40%),
    #E53E3E;
  box-shadow:var(--shadow); border:4px dashed #ff8e8e;
  display:grid; place-items:center;
}
.circle img{ width:100%; height:100%; object-fit:cover; border-radius:50%; }
.circle.purple{ background:#6a1b9a; border-color:#d4b3ff; }
.circle.dotted{ background:#26C6DA; border-color:#a9f3ff; }
.circle.orange{ background:#F05423; border-color:#ffd2bf; }
.service-title{ font-size:26px; margin:10px 0 6px; }
.bullets{ list-style:none; padding:0; margin:0; color:#555; line-height:1.9; }

/* ========= FOOTER ========= */
.site-footer{ background:linear-gradient(90deg, var(--purple), var(--fuchsia)); color:#fff; padding:40px 0 20px; }
.footer-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:24px; align-items:start;
}
.footer-logo{ height:52px; margin-bottom:8px; filter:drop-shadow(0 6px 18px rgba(0,0,0,.2)); }
.site-footer h4{ margin:0 0 10px; }
.copy{ text-align:center; margin:24px 0 0; opacity:.9; }

/* ========= RESPONSIVE ========= */
@media (max-width:1024px){
  .two-cards{ grid-template-columns:1fr; }
  .arches{ grid-template-columns:1fr; }
  .service-circles{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:680px){
  .menu{ display:none } /* basit: mobilde menüyü gizle (istersen hamburger ekleriz) */
  .hero-giant h1{ font-size:36px }
  .display{ font-size:34px }
  .service-circles{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
}





/*****  NAVBAR: açık-mor arka plan ve okunaklı linkler  *****/
header,
.site-header{
  background: #b399d4 !important;            /* açık mor */
  box-shadow: var(--shadow);
}

/* Üst menüdeki linkler (koyu metin, hover’da mor) */
.nav-links a,
.menu a{
  color:#2b1444 !important;                  /* koyu mor */
  font-weight:700;
  border-radius:12px;
}
.nav-links a:hover,
.nav-links a.active,
.menu a:hover,
.menu a.active{
  background:#6A1B9A !important;             /* koyu mor */
  color:#fff !important;
}

/*****  SAYFA BANNER’I: mor örtülü + arkaplan fotoğraflı  *****/
/* Bu sınıfı HTML’de ilgili bölümüne ver:  <section class="page-hero"> ... */
.page-hero{
  /* Burayı kendi görsel yolunla güncelle */
  --page-photo: url('img/ekrans/gri-duvar-gulucukler.jpg');

  background:
    linear-gradient(0deg, rgba(106,27,154,.55), rgba(106,27,154,.55)),
    var(--page-photo) center/cover no-repeat;
  color:#fff;
  min-height: 360px;                          /* ekran yüksekliği örnek */
  display:flex;
  flex-direction:column;
  justify-content:flex-end;                   /* başlık ve kırıntıyı alta getir */
  padding: 90px 5% 48px;                      /* soldan boşluk + alttan nefes */
}

/* Başlık boyutu ve ağırlığı (görsel üstünde net dursun) */
.page-hero h1{
  margin:0 0 18px;
  font-size: clamp(30px, 6vw, 64px);
  line-height:1.05;
  font-weight: 800;
  text-shadow: 0 2px 6px rgba(0,0,0,.25);
}

/* Mor “kırıntı/crumb” buton grubu */
.page-crumb{
  display:inline-flex;
  gap:12px;
  align-items:center;
  background:#3b1c65;                        /* koyu mor kapsül */
  padding: 14px 22px;
  border-radius: 14px;
  box-shadow: var(--shadow);
  font-weight:700;
}
.page-crumb a,
.page-crumb span{
  color:#fff;
  text-decoration:none;
}

/* Daha küçük ekran ayarı */
@media (max-width: 720px){
  .page-hero{ min-height: 280px; padding: 64px 6% 34px; }
  .page-hero h1{ font-size: clamp(26px, 7vw, 40px); }
}

/*****  “Eğitimlerimiz” bölümündeki mor alanı resimli yapmak istiyorsan
       o bölüme .page-hero sınıfını ver yeter. Örnek HTML:
       <section class="page-hero">
         <h1>Eğitimlerimiz</h1>
         <div class="page-crumb"><a href="index.html">Home</a><span>•</span><span>Eğitimlerimiz</span></div>
       </section>
*****/




/* Fotoğraflı banner */
.page-hero{
  position: relative;
  min-height: 380px;            /* yüksekliği buradan ayarlayabilirsin */
  display: flex;
  align-items: flex-end;
  padding: 70px 0 40px;
  background: #b892d6;          /* görsel yüklenmezse mor arka plan */
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* Mor yarı saydam örtü */
.page-hero.has-photo::before{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(75,25,117,.55);
  pointer-events: none;
}

/* İçerik görünür kalsın */
.page-hero > .container{
  position: relative;
  z-index: 1;
}




/* ==== FOTOĞRAFLI RENKLİ KARTLAR ==== */
/* Her iki kartın dış çerçevesi */
.two-cards{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin: 40px auto;
  width: 90%;
  max-width: 1200px;
}

/* Kartın tamamı */
.pill-card{
  background: #fff;
  border-radius: 26px;
  box-shadow: 0 16px 40px rgba(0,0,0,.10);
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}

/* Üstteki fotoğraf alanı */
.pill-photo{
  height: 280px;                          /* Kart fotoğrafının yüksekliği */
  background: var(--photo) center/cover no-repeat;
}

/* Fotoğrafın üzerinde sol alt köşedeki simge kutusu */
.pill-icon{
  position: absolute;
  left: 26px;
  top: 210px;                              /* Fotoğrafın alt kısmına taşır */
  width: 84px;
  height: 84px;
  border-radius: 22px;
  background: #fff;
  display: grid;
  place-items: center;
  font-size: 38px;
  box-shadow: 0 10px 24px rgba(0,0,0,.15);
  z-index: 2;
}

/* Alttaki renkli gövde bölümü */
.pill-body{
  background: var(--pill);
  color: #fff;
  margin: 0 16px 16px;
  border-radius: 30px 30px 22px 22px;
  padding: 22px 22px 28px;
  text-align: center;
}

.pill-body h3{
  margin: 6px 0 10px;
  font-size: 26px;
  font-weight: 700;
}

.pill-body p{
  margin: 0;
  line-height: 1.8;
  font-size: 16px;
}

/* Küçük ekran için tek kolon */
@media (max-width: 768px){
  .two-cards{
    grid-template-columns: 1fr;
  }
}





/* Kart üst görseli kesin görünsün */
.pill-photo{
  height: 280px;            /* istersen 320px yapabilirsin */
  overflow: hidden;
  position: relative;
  background: #f7f7fb;      /* foto yüklenmezse açık arka plan */
  border-top-left-radius: 26px;
  border-top-right-radius: 26px;
}

.pill-photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;        /* fotoğraf alanı taşmadan kırpılsın */
  display: block;
}




/* ==== LOGO %200 BÜYÜTME (override) ==== */
/* Eski değer: 56px/60px. Yeni: 112px. */
.site-header .brand img,
.logo img {
  height: 175px !important;   /* 56px x 2 = 112px */
  width: auto;
  display: block;
}

/* Menü hizası için satır yüksekliğini koru (gerekirse) */
.nav { align-items: center; }

/* Mobilde çok yer kaplamasın */
@media (max-width: 768px){
  .site-header .brand img,
  .logo img { height: 72px !important; }  /* rahat okunur mobil ölçü */
}




/* Küçük ekranlarda taşmayı azalt */
@media (max-width: 768px){
  .site-header .brand img {
    transform: scale(1.4);
  }
}







/* ==== NAV & LOGO: aynı yükseklik, tam hizalama ==== */
/* Tek yerden kontrol için bir değişken tanımlıyoruz */
:root{
  --nav-item-h: 64px;              /* 'Ana Sayfa' kapsül yüksekliği (isteğe göre 60–72 arası oynatabilirsiniz) */
}

.site-header { padding: 10px 0; }  /* header yüksekliği dengeli kalsın */
.nav{
  width: 90%;
  margin: 0 auto;
  display: flex;
  align-items: center;             /* dikeyde hepsi ortalansın */
  justify-content: space-between;
  gap: 20px;
}


/* Menü butonları: sabit yükseklikli kapsül */
.menu{ display: flex; gap: 24px; margin: 0; padding: 0; list-style: none; }
.menu a{
  display: flex;
  align-items: center;
  height: var(--nav-item-h);
  padding: 0 22px;                  /* yatay iç boşluk */
  border-radius: 18px;
  font-weight: 700;
}

/* Aktif/hover renkleri sizde zaten var; burada görünümü bozmayalım */





/* Footer tıklanabilir butonlar */
.footer-btn {
  display: inline-block;
  padding: 8px 14px;
  margin: 4px 0;
  /*background: #6A1B9A;      */ /* koyu mor arka plan */
  color: #fff;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  transition: background 0.3s ease;
}
.footer-btn:hover {
  background: #ffd000;      /* fuşya hover */
  color: #fff;
}


/* Footer başlıklarının altına sarı çizgi */
.site-footer h4 {
  position: relative;            /* çizgiyi başlığa göre konumlandırmak için */
  padding-bottom: 8px;           /* başlık ile çizgi arasında biraz boşluk */
  margin-bottom: 18px;           /* altındaki yazıya boşluk bırak */
}

.site-footer h4::after {
  content: "";
  position: absolute;
  left: 50%;                     /* ortala */
  bottom: 0;
  transform: translateX(-50%);
  width: 60%;                    /* çizgi genişliği (isteğe göre) */
  height: 3px;                   /* çizgi kalınlığı */
  background-color: #FDD835;     /* sarı renk */
  border-radius: 2px;
}






/* Ortadaki ve en alttaki geniş fotoğraf alanları */
.between-photo,
.bottom-photo{
  width:100%;
  overflow:hidden;
}

.between-photo img,
.bottom-photo img{
  display:block;
  width:100%;         /* Tüm genişliği kaplasın */
  height:auto;        /* Oranını korusun */
  object-fit:cover;   /* Taşma olursa kırparak doldurur */
}



.between-photo img,
.bottom-photo img{
  display:block;
  width:100%;
  max-height:300px;    /* Maksimum 300 piksel yükseklik */
  height:auto;
  object-fit:cover;    /* Gerekirse kırparak sığdır */
}



.between-photo img,
.bottom-photo img{
  display:block;
  width:70%;
  height:auto;
  margin:0 auto;       /* Ortalar */
  border-radius:12px;  /* İsteğe bağlı köşe yumuşatma */
  box-shadow:0 8px 20px rgba(0,0,0,.15);
}





/* ==== NAVBAR – tüm sayfalarda aynı yükseklik ==== */
.site-header{
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #b399d4;                 /* açık mor (anasayfa ile aynı) */
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
}

/* İç layout + sabit yükseklik */
.nav.container{
  display: flex;
  align-items: center;                  /* logo ve linkler dikey ortalı */
  justify-content: space-between;
  gap: 24px;
  height: 96px;                         /* <<< TÜM SAYFALARDA SABİT */
  padding: 0 24px;
}


/* Masaüstü menü */
.menu{
  list-style: none;
  display: flex;
  align-items: center;
  gap: 48px;
  margin: 0;
  padding: 0;
}
.menu a{
  display: inline-block;
  padding: 10px 14px;
  border-radius: 14px;
  font-weight: 700;
  color: #2b1444;                       /* koyu mor */
  text-decoration: none;
  transition: background .2s ease, color .2s ease, transform .1s ease;
}
.menu a:hover,
.menu a.active{
  background: #6A1B9A;                 /* koyu mor */
  color: #ffffff;
}

/* ==== MOBİL (hamburger) ==== */
.nav-toggle{
  display: none;                        /* masaüstünde gizli */
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 0;
  background: #5d377e;                  /* kırmızı – istediğin tarz */
  box-shadow: 0 10px 24px rgba(169, 115, 129, 0.35);
  cursor: pointer;
  position: relative;
}
.nav-toggle span{
  position: absolute;
  left: 50%;
  width: 36px;
  height: 3px;
  background: #ffffff;
  border-radius: 2px;
  transform: translateX(-50%);
}
.nav-toggle span:nth-child(1){ top: 24px; }
.nav-toggle span:nth-child(2){ top: 34px; }
.nav-toggle span:nth-child(3){ top: 44px; }

/* 960px ve altı: hamburger görünür, menü aç/kapa */
@media (max-width: 960px){
  .nav.container{
    height: 84px;                       /* mobilde biraz daha kompakt */
  }

  .nav-toggle{ display: inline-block; }

  .menu{
    position: fixed;
    inset: 84px 12px auto 12px;         /* header’ın altında açılan panel */
    background: #e9d6f9;
    border-radius: 18px;
    box-shadow: 0 18px 40px rgba(0,0,0,.18);
    padding: 14px;
    display: none;                      /* başlangıçta kapalı */
    flex-direction: column;
    gap: 8px;
    z-index: 1001;
  }
  .menu a{
    color: #2b1444;
    padding: 16px 14px;
    border-radius: 12px;
  }
  .menu a:hover,
  .menu a.active{
    background: #6A1B9A;
    color: #fff;
  }

  /* Açık durum */
  .menu.open{ display: flex; }

  /* Toggle açıkken ikon X’e dönüşsün (isteğe bağlı) */
  .nav-toggle[aria-expanded="true"] span:nth-child(1){
    transform: translateX(-50%) rotate(45deg);
    top: 34px;
  }
  .nav-toggle[aria-expanded="true"] span:nth-child(2){
    opacity: 0;
  }
  .nav-toggle[aria-expanded="true"] span:nth-child(3){
    transform: translateX(-50%) rotate(-45deg);
    top: 34px;
  }
}




/* Mobil menü açıldığında sarı alan (fullscreen menü) */
.menu.open {
  width: 40%;               /* önce 100% idi, %85'e çektik */
  margin: 0 auto;           /* ortalamak için */
  border-radius: 20px;      /* mevcut köşe yumuşatma */
}


/* Mobil menü açıldığında sarı alan */
.menu.open {
  position: absolute;
  top: 80px;         /* menü butonunun altından başlat */
  right: 80px;       /* X butonunun biraz solunda olacak */
  width: 260px;      /* kutunun genişliği */
  margin: 0;         /* ortalamayı kaldır */
  border-radius: 20px;
}




/* Mobil menü açıldığında sağda X butonunun altında gözüksün */
.menu.open {
  position: absolute;
  top: 80px;          /* navbar yüksekliği kadar aşağıdan başlat */
  right: 10px;        /* X butonuna göre hizala, gerekirse 30–50px arasında ayarla */
  width: 260px;       /* kutu genişliği */
  margin: 0;          /* ortalamayı kaldır */
  border-radius: 20px;
}


/* Mobil menü açıldığında sağda X butonunun altında gözüksün */
.menu.open {
  position: absolute;
  top: 80px;          /* navbar yüksekliği kadar aşağıdan başlat */
  right: 40px;        /* X butonuna göre hizala, gerekirse 30–50px arasında ayarla */
  width: 260px;       /* kutu genişliği */
  margin: 0;          /* ortalamayı kaldır */
  border-radius: 20px;
}





/* === Mobil menüyü sağdan açtır === */
@media (max-width: 900px) {
  /* Menü kutusu */
  .nav-links {
    position: fixed;
    top: 80px;                 /* header'ın altı */
    right: 16px;               /* SAĞDA */
    left: auto !important;     /* soldan konumları iptal et */
    width: min(86vw, 360px);   /* genişlik */
    max-height: calc(100dvh - 100px);
    overflow: auto;

    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    background: #efddff;       /* senin açık lila benzeri */
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(0,0,0,.18);

    z-index: 1200;

    /* kapalıyken sağın dışında dursun */
    transform: translateX(120%);
    opacity: 0;
    pointer-events: none;
    transition: transform .25s ease, opacity .25s ease;
  }

  /* Açık durum */
  .nav-links[data-state="open"] {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
  }

  /* Menü linkleri */
  .nav-links li a {
    display: block;
    padding: 14px 12px;
    border-radius: 12px;
    color: #2b2b2b;
    font-weight: 700;
  }
  .nav-links li a:hover {
    background: rgba(0,0,0,.05);
  }

  /* Hamburger butonu görünür kalsın ve üstte olsun */
  .nav-toggle {
    position: relative;
    z-index: 1300;
  }
}







/* === MOBİL MENÜ: Sağdan açılan panel (override) === */
@media (max-width: 960px){

  /* Panel kutusu: .menu kullanan sayfalar + .nav-links kullanan sayfalar */
  .menu,
  .nav-links{
    position: fixed !important;
    top: calc( (var(--nav-item-h, 84px)) + 12px ) !important;  /* header’ın hemen altı */
    right: 16px !important;          /* SAĞDA */
    left: auto !important;           /* soldan konumu iptal */
    width: min(86vw, 360px) !important;
    max-height: calc(100dvh - 120px) !important;
    overflow: auto !important;

    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding: 16px !important;
    background: #efddff !important;  /* açık lila */
    border-radius: 18px !important;
    box-shadow: 0 24px 60px rgba(0,0,0,.18) !important;
    z-index: 1300 !important;

    /* kapalı başlangıç */
    transform: translateX(120%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: transform .25s ease, opacity .25s ease !important;
  }

  /* Açık durum – iki deseni de destekle (.open veya data-state="open") */
  .menu.open,
  .nav-links[data-state="open"]{
    transform: translateX(0) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* Menü öğeleri */
  .menu a,
  .nav-links li a{
    display: block !important;
    padding: 14px 12px !important;
    border-radius: 12px !important;
    color: #2b1444 !important;
    font-weight: 700 !important;
  }
  .menu a:hover,
  .nav-links li a:hover{
    background: rgba(0,0,0,.05) !important;
  }

  /* Hamburger/X butonu panelin üstünde kalsın */
  .nav-toggle{ position: relative; z-index: 1400 !important; }
}

/* Masaüstünde panel davranışını iptal (gerekirse) */
@media (min-width: 961px){
  .menu,
  .nav-links{
    position: static !important;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    background: transparent !important;
    box-shadow: none !important;
    width: auto !important;
    max-height: none !important;
    padding: 0 !important;
    gap: 20px !important;
    flex-direction: row !important;
  }
}



/* ==== HİZMETLER DIŞ SÜS FOTOĞRAFLAR ==== */
.services-section{
  position: relative;
  width: 90%;
  max-width: 1200px;
  margin: 60px auto 120px; /* alta boşluk: alttaki fotoğraf taşmasın */
}

.services-box{
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 12px 32px rgba(0,0,0,.10);
  padding: 40px 28px;
  text-align: center;
  position: relative;
  z-index: 2; /* dekor fotoğrafların altında kaybolmasın */
}

/* Kenarlara yerleşen küçük süs fotoğraflar */
.decor-photo{
  position: absolute;
  width: 110px;
  height: 110px;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(0,0,0,.20);
  z-index: 1;
}

/* Konumlar */
.top-center    { top: -70px;   left: 50%; transform: translateX(-50%); }
.bottom-center { bottom: -70px; left: 50%; transform: translateX(-50%); }

.right-top     { top: 10px;    right: -130px; }
.right-bottom  { bottom: 10px; right: -130px; }

.left-top      { top: 10px;    left: -130px; }
.left-bottom   { bottom: 10px; left: -130px; }

/* Küçük ekran ayarı */
@media (max-width: 900px){
  .decor-photo{
    width: 80px;
    height: 80px;
    border-radius: 12px;
  }
  .right-top, .right-bottom { right: -90px; }
  .left-top,  .left-bottom  { left:  -90px; }
  .top-center { top: -50px; }
  .bottom-center { bottom: -50px; }
}

/* Çok küçük cihazlarda dekorları biraz daha içeri al */
@media (max-width: 600px){
  .services-section{ margin-bottom: 90px; }
  .decor-photo{ width: 70px; height: 70px; }
  .right-top, .right-bottom { right: -70px; }
  .left-top,  .left-bottom  { left:  -70px; }
  .top-center { top: -40px; }
  .bottom-center { bottom: -40px; }
}




.highlight-text {
  color: #a1edf3; /* Altın sarısı */
  font-size: 20px;
  font-weight: 600;
  text-align: center;
  margin-bottom: 20px;
}




.footer-logo {
  height: 156px;   /* 52px x 3 = 156px */
  width: auto;
  display: block;
  margin: 0 auto 12px;  /* ortalı kalsın */
}
 




/* Orta ekranlarda (tablet) biraz büyüt */
@media (min-width: 768px) {
  .brand img {
    height: 90px;   /* tablet için */
  }
}

/* Büyük ekranlarda (laptop & masaüstü) daha da büyüt */
@media (min-width: 1200px) {
  .brand img {
    height: 130px;   /* geniş ekran için */
  }
}



.pill-photo {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}

.pill-photo img {
  width: 100%;
  display: block;
  border-radius: 12px;
}

.pill-photo .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,0.6); /* beyaz yarı saydam */
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: 12px;
}

.pill-photo:hover .overlay {
  opacity: 1;
}



.shape {
  position: relative;
  overflow: hidden;
}

.shape img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px; /* istersen köşe yumuşatma */
}

.shape .overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,0.6);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.shape:hover .overlay {
  opacity: 1;
}
 
.circle {
  position: relative;
  overflow: hidden;
  border-radius: 50%; /* zaten yuvarlak */
}

.circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

.circle .overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: rgba(255,255,255,0.6); /* beyaz saydam */
  opacity: 0;
  transition: opacity 0.3s ease;
}

.circle:hover .overlay {
  opacity: 1;
}




/* ============================
   HİZMETLER KARTLARI
   ============================ */
.services {
  width: 90%;
  max-width: 1200px;
  margin: 50px auto;
  text-align: center;
}

.services h2 {
  font-size: 32px;
  color: #4B1975; /* Mor ton */
  margin-bottom: 10px;
}

.services p {
  color: #444;
  margin-bottom: 40px;
  font-size: 18px;
}

/* Kart ızgara düzeni */
.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 25px;
}

/* Kart */
.service-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,0.1);
  transition: transform 0.3s, box-shadow 0.3s;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.service-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.15);
}

/* Fotoğraf */
.card-photo img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

/* Başlık */
.service-card h3 {
  font-size: 20px;
  margin: 20px 15px 10px;
  color: #A90432; /* Koyu kırmızı */
}

/* Açıklama */
.service-card p {
  font-size: 15px;
  margin: 0 15px 20px;
  color: #555;
  line-height: 1.6;
  flex-grow: 1;
}

/* Buton */
.service-card .btn {
  display: inline-block;
  margin: 0 15px 20px;
  padding: 10px 18px;
  background: #4B1975; /* Mor */
  color: #fff;
  border-radius: 6px;
  font-size: 14px;
  font-weight: bold;
  text-decoration: none;
  transition: background 0.3s, color 0.3s;
}

.service-card .btn:hover {
  background: #FDB913; /* Sarı */
  color: #000;
}



/* Hizmet Kartları */
.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(280px,1fr));
  gap: 24px;
  margin-top: 24px;
}
.service-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
  padding: 20px;
  text-align: center;
  transition: transform .2s ease;
}
.service-card:hover { transform: translateY(-5px); }
.card-photo img {
  width: 100%; height: 180px; object-fit: cover;
  border-radius: 10px; margin-bottom: 15px;
}
.service-card h3 { color:#6A1B9A; margin:10px 0; }
.service-card p { color:#444; font-size:15px; }

/* Neden Biz */
.why-us { text-align:center; padding:60px 20px; background:#f9f7ff; }
.why-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:20px; margin-top:30px;
}
.why-card {
  background:#fff; padding:20px; border-radius:12px; box-shadow:0 6px 16px rgba(0,0,0,.08);
}
.why-card img { width:60px; margin-bottom:12px; }

/* FAQ */
.faq { width:90%; max-width:800px; margin:50px auto; }
.faq-question {
  width:100%; text-align:left; background:#6A1B9A; color:#fff;
  padding:14px 18px; border:none; border-radius:8px; cursor:pointer;
  font-weight:600; margin-bottom:8px;
}
.faq-answer { display:none; padding:12px; background:#f5f0fa; border-radius:6px; }
.faq-item.active .faq-answer { display:block; }

/* Testimonials */
.testimonials { background:#f5f5f5; padding:60px 20px; text-align:center; }
.testimonial-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:20px;
  margin-top:30px;
}
.testimonial-card {
  background:#fff; padding:20px; border-radius:12px; box-shadow:0 6px 16px rgba(0,0,0,.08);
  font-style:italic;
}
.testimonial-card h4 { margin-top:12px; font-style:normal; color:#6A1B9A; }

/* Stats */
.stats { background:#6A1B9A; color:#fff; padding:50px 20px; }
.stats-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:20px; text-align:center;
}
.stat-box h3 { font-size:32px; margin:0; }
.stat-box p { margin:6px 0 0; }

/* CTA */
.cta { text-align:center; padding:60px 20px; background:#f9f7ff; }
.cta h2 { color:#6A1B9A; margin-bottom:12px; }
.cta p { margin-bottom:20px; }
.cta .btn {
  background:#D81B60; color:#fff; padding:12px 28px;
  border-radius:10px; text-decoration:none; font-weight:600;
}
.cta .btn:hover { background:#FDD835; color:#222; }























































































/* ===== Ekibimiz Mobil Düzeltme ===== */
@media (max-width: 768px) {

  .team-row{
    flex-direction: column !important;
    gap: 14px;
    align-items: stretch;
  }

  .team-photo-box,
  .quote-card{
    width: 100%;
    max-width: 100%;
  }

  .team-photo{
    width: 100%;
    height: auto;
    display: block;
  }

  .quote-text{
    overflow-wrap: break-word;
    word-break: break-word;
    line-height: 1.5;
  }
}
































/* ===== Ekibimiz Mobil Düzeltme (Kesin) ===== */
@media (max-width: 768px){

  /* dış kapsayıcı */
  .team,
  .team-rows{
    width: 100% !important;
    max-width: 100% !important;
  }

  /* satır: mobilde alt alta */
  .team-row{
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    align-items: stretch !important;
  }

  /* KUTULAR: mobilde tam genişlik */
  .team-photo-box,
  .quote-card{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;

    /* En kritik: üst üste bindiren şeyler genelde bunlar */
    position: static !important;
    float: none !important;
    transform: none !important;
  }

  /* Eğer quote kartı masaüstünde sağa itiliyorsa */
  .quote-card{
    left: auto !important;
    right: auto !important;
    top: auto !important;
  }

  /* Foto taşmasın */
  .team-photo{
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }

  /* Yazı taşması/dikeyleşme olmasın */
  .quote-text{
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    line-height: 1.5 !important;
  }
}