@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&family=Roboto:wght@300;400;700&display=swap');
html,body{
width:100%;max-width:100%;margin:0;padding:0;overflow-x:hidden
}
*{
box-sizing:border-box
}
.sticky-wrapper{
position:sticky;
top:0;
z-index:1000;
}
body{
margin:0;
font-family:'Roboto',sans-serif;
background-color:#F9F3F1;
color:#0C182F;
}
.topbar{
background-color:#1A2444;
color:white;
font-size:.9rem;
padding:.5rem 0;
display:flex;
justify-content:center;
}
.topbar .container{
display:flex;
justify-content:center;
gap:2rem;
max-width:1200px;
}
.topbar a{
color:white;
text-decoration:none;
transition:color .3s;
}
.topbar a:hover{
color:#F27F1F
}
.contact-group{
display:flex;
flex-wrap:wrap;
gap:1.5rem;
}
.contact-item{
display:flex;
align-items:center;
gap:.3rem;
}
.contact-item.location{
display:none;
}
.show {
display: flex;
width: 100%;
}

/* HEADER */
header {
background-color: #0C182F;
padding: 1rem 2rem;
color: white;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 0 4px 8px rgba(0, 0, 0, .2);
}

.header-title {
font-family: 'Poppins', sans-serif;
font-size: 1.5rem;
font-weight: 700;
color: white;
}

nav a {
color: white;
text-decoration: none;
margin-left: 1.5rem;
font-weight: 500;
transition: color .3s;
}

nav a:hover:not(.btn) {
color: #F27F1F;
}

.call-btn {
background-color: #F27F1F;
padding: .7rem 1.2rem;
border-radius: 6px;
margin-left: 2rem;
font-weight: 700;
letter-spacing: .5px;
}

.call-btn:hover {
background-color: #e6751c;
}
.menu-toggle {
display: none;
background: none;
border: none;
color: white;
font-size: 2rem;
cursor: pointer;
}

.hero {
background-color: #1A2444;
color: white;
text-align: center;
padding: 5rem 1rem;
}

.hero h1 {
font-family: 'Poppins', sans-serif;
font-size: 3rem;
margin-bottom: .5rem;
font-weight: 700;
}

.hero p {
font-size: 1.3rem;
margin-top: 0;
font-weight: 300;
}

.hero-content-wrapper {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 30px;
margin-top: 40px;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
text-align: center;
}

.hero-left {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
}

.hero-buttons {
display: flex;
flex-direction: column;
align-items: center;
gap: 15px;
margin-top: 25px;
}

.hero-right {
display: none;
}

.btn {
background-color: #F27F1F;
color: white;
padding: 1rem 2.5rem;
border: none;
font-size: 1.1rem;
cursor: pointer;
border-radius: 8px;
font-weight: 600;
text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
transition: background-color .3s;
}

section,
.hizmetlerimiz,
.gallery-section,
.iletisim-section,
.harita-section {
box-sizing: border-box;
max-width: 100%;
}

.section,
.gallery-section,
.harita-section {
padding: 4rem 2rem;
background-color: #F9F3F1;
margin: 0 auto;
}

.hizmetlerimiz,
.gallery-section {
padding-top: 60px;
padding-bottom: 60px;
background-color: #f5f5f5;
}
.harita-section {
background-color: #eef7ff;
padding-top: 60px;
padding-bottom: 60px;
}

h2 {
font-family: 'Poppins', sans-serif;
color: #013580;
font-size: 2.4rem;
margin-bottom: 40px;
font-weight: 700;
position: relative;
letter-spacing: 1px;
text-transform: uppercase;
}

h2::after {
content: '';
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: -10px;
width: 80px;
height: 5px;
background-color: #F27F1F;
border-radius: 2px;
}

.hizmetlerimiz h2,
.gallery-section h2,
.iletisim-section h2,
.harita-section h2,
.hakkimizda-section .text-block h2 {
text-align: left;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
padding-left: 2rem;
padding-right: 2rem;
}

.hizmetlerimiz h2::after,
.gallery-section h2::after,
.iletisim-section h2::after,
.harita-section h2::after {
left: 2rem;
transform: translateX(0);
}

.hizmetler-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 40px;
max-width: 1200px;
width: 100%;
margin: 0 auto;
}

.hizmet-kutu {
width: 100%;
height: 250px;
position: relative;
overflow: hidden;
border-radius: 16px;
background-color: #eef7ff;
cursor: pointer;
box-shadow: 0 8px 20px rgba(0, 53, 128, .1);
border: none;
transition: transform .3s ease, box-shadow .3s ease;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
color: #0C182F;
padding: 20px;
}

.hizmet-kutu:hover {
transform: translateY(-8px);
box-shadow: 0 15px 30px rgba(242, 127, 31, .4);
}

.hizmet-kutu i {
font-size: 3.5rem;
margin-bottom: 20px;
color: #013580;
transition: color .3s ease;
}

.hizmet-kutu:hover i {
color: #F27F1F;
}

.hizmet-yazi {
font-weight: 700;
font-size: 1.2rem;
text-align: center;
}


.hakkimizda-section {
background-color: #0C182F;
padding: 60px 20px;
color: white;
}
.hakkimizda-content {
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
max-width: 1200px;
margin: 0 auto;
flex-wrap: wrap;
}
.text-block {
flex: 1;
text-align: left;
padding: 20px 0;
min-width: 250px;
}
.text-block h2 {
font-size: 2.5rem;
color: #F27F1F;
display: block;
text-transform: none;
text-align: left;
margin-bottom: 1rem;
position: relative;
}
.text-block h2::after {
background-color: #F27F1F;
left: 0;
transform: none;
bottom: -5px;
}
.text-block p {
font-size: 1.1rem;
line-height: 1.6;
color: white;
margin-top: 15px;
}
.hakkimizda-btn {
margin-top: 20px;
padding: .8rem 1.8rem;
font-size: 1rem;
margin-bottom: 20px;
}
.image-block-new {
flex: 1;
min-width: 200px;
max-width: 400px;
margin: 0;
padding: 0;
}
.image-block-new figure {
width: 100%;
height: 100%;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50% 12px 12px 50% / 50% 12px 12px 50%;
overflow: hidden;
}
.image-block-new img {
width: 100%;
height: auto;
object-fit: cover;
display: block;
transition: transform .3s ease;
}
.image-block-new figure:hover img {
transform: scale(1.05);
}


/* GALERI */
.gallery-section {
background-color: #f5f5f5;
}

.slider-container {
overflow: hidden;
max-width: 1200px;
margin: auto;
}

.slider-wrapper {
display: flex;
flex-wrap: nowrap;
gap: 15px;
width: 100%;
}

.slide-group {
width: calc(100%/3 - 10px);
flex-shrink: 0;
position: relative;
overflow: hidden;
height: 450px;
border-radius: 12px;
box-shadow: 0 8px 15px rgba(0, 0, 0, .1);
background-color: #F9F3F1;
}

.slide-group img {
width: 100%;
height: 100%;
object-fit: contain;
background-color: #F9F3F1;
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity 1s ease-in-out;
border-radius: 12px;
}

.slide-group .active {
opacity: 1;
}
.iletisim-section {
background-color: #f0f0f0;
padding: 60px 20px 80px 20px;
}

.contact-info-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
max-width: 700px;
margin: 0 auto 60px auto;
}

.contact-info-grid .contact-item-detail:last-child {
grid-column: 1 / -1;
max-width: 450px;
margin-left: auto;
margin-right: auto;
}

.contact-item-detail {
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 10px rgba(0, 0, 0, .05);
border-top: 3px solid #013580;
}

.contact-item-detail i {
font-size: 1.5rem;
color: #F27F1F;
margin-bottom: 10px;
}

.contact-item-detail h4 {
font-family: 'Poppins', sans-serif;
font-size: 1.1rem;
margin: 0 0 5px 0;
color: #1A2444;
}

.contact-item-detail p {
margin: 0;
font-size: .95rem;
}

.map-wrapper {
position: relative;
max-width: 1000px;
margin: 0 auto;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
transform: none;
}

.map-wrapper .map {
width: 100%;
height: 500px;
border: none;
display: block; 
}

.istanbul-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
box-shadow: 0 0 0 4px #F27F1F, 0 0 40px 10px rgba(255, 0, 0, 0.3) inset;
border-radius: 12px;
z-index: 10;
}

.map-wrapper::after {
content: 'TÜM İSTANBUL';
position: absolute;
top: 20px;
right: 20px;
background-color: #013580;
color: white;
padding: 8px 15px;
border-radius: 4px;
font-size: 1rem;
font-weight: 700;
z-index: 15;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}

footer {
background-color: #0C182F;
color: white;
text-align: center;
padding: 1.5rem;
font-size: .9rem;
}

nav .call-btn {
display: none;
}

.hero-buttons {
display: flex;
flex-direction: column;
align-items: center;
gap: 15px;
margin-top: 25px;
}

.call-now-btn,
.whatsapp-final {
padding: 1rem 2.5rem;
font-size: 1.1rem;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
width: 300px;
max-width: 90%;
border-radius: 8px;
text-decoration: none;
transition: background-color .3s;
color: white;
}

.call-now-btn {
background-color: #013580;
}

.call-now-btn:hover {
background-color: #002353;
}

.whatsapp-final {
background-color: #F27F1F;
}

.whatsapp-final:hover {
background-color: #e6751c;
}

.call-now-btn i,
.whatsapp-final i {
font-size: 1.2rem;
margin-right: 10px;
}

@media (min-width: 1025px) {
.hero-content-wrapper {
flex-wrap: nowrap ;
align-items: flex-start;
}
.hero-left {
flex: none;
width: 100%;
justify-content: center;
}
.hero-right {
display: none;
}
.hero-buttons {
align-items: center;
}
}

@media (max-width: 1024px) {
.section,
.gallery-section,
.hakkimizda-section,
.iletisim-section,
.harita-section {
padding: 3.5rem 1.5rem;
}
.hizmetler-grid {
grid-template-columns: repeat(2, 1fr);
gap: 25px;
padding: 0 1rem;
}
.hizmet-kutu {
height: 220px;
}
.hizmetlerimiz h2,
.gallery-section h2,
.iletisim-section h2,
.harita-section h2 {
text-align: center;
padding-left: 0;
padding-right: 0;
}
.hizmetlerimiz h2::after,
.gallery-section h2::after,
.iletisim-section h2::after,
.harita h2::after {
left: 50%;
transform: translateX(-50%);
}
.hakkimizda-content {
flex-direction: column;
gap: 30px;
}
.text-block {
text-align: center;
}
.text-block h2 {
text-align: center;
}
.text-block h2::after {
left: 50%;
transform: translateX(-50%);
}
.text-block p {
text-align: center;
}
.image-block-new {
display: none;
}
.slide-group {
width: calc(100%/2 - 10px);
flex-shrink: 0;
height: 350px;
}
.contact-info-grid {
grid-template-columns: repeat(2, 1fr);
gap: 30px;
padding: 0 1rem;
max-width: 90%;
margin: 0 auto 60px auto;
}
.contact-item-detail h4 {
font-size: 1rem;
}
.hero-content-wrapper {
flex-direction: column;
gap: 30px;
}
.hero-left { 
min-width: auto;
width: 100%;
flex: none;
justify-content: center;
}
.hero-right {
display: none;
}
.hero-buttons {
align-items: center;
}
.map-wrapper .map {
height: 400px;
}
}

@media (max-width: 768px) {
html,body {
overflow-x: hidden
}
.topbar .container {
gap: 1rem
}
.topbar .contact-item:not(:first-child) {
display: none
}
.contact-item.location {
display: flex
}
.header-title {
font-size: 1.2rem
}
header {
padding: .8rem 1.5rem
}
.menu-toggle {
display: block
}
nav {
top: 61px;
display: none;
width: 100%;
flex-direction: column;
position: absolute;
left: 0;
box-shadow: 0 8px 8px rgba(0, 0, 0, .1);
background-color: #0C182F;
z-index: 999;
align-items: center;
padding-bottom: .5rem
}
nav a {
display: block;
padding: .8rem 1.5rem;
margin: 0;
border-top: 1px solid rgba(255, 255, 255, .1);
text-align: center;
width: 100%
}
.call-btn {
display: block;
margin: 1rem auto
}
.hero {
padding: 4rem 1rem
}
.hero h1 {
font-size: 1.8rem
}
.hero p {
font-size: 1.1rem
}
h2 {
font-size: 1.8rem;
margin-bottom: 30px;
text-align: center;
padding-left: 0;
padding-right: 0
}
h2::after {
left: 50%;
transform: translateX(-50%)
}
.section,
.gallery-section,
.iletisim-section
{
padding: 3rem 1.5rem
}
.hakkimizda-content {
gap: 30px;
padding: 0
}
.text-block h2 {
text-align: center
}
.text-block h2::after {
left: 50%;
transform: translateX(-50%)
}
.text-block p {
text-align: center
}
.image-block-new {
display: none
}
.slider-wrapper {
overflow-x: scroll;
white-space: nowrap;
padding-bottom: 15px
}
.slide-group {
width: calc(100% - 15px);
flex-shrink: 0;
margin-right: 15px;
height: 300px
}
.contact-info-grid {
grid-template-columns: 1fr;
gap: 20px;
max-width: 90%
}
.contact-info-grid .contact-item-detail:last-child {
grid-column: auto;
max-width: 100%;
margin: 0
}
.map-wrapper .map {
height: 300px;
}
.map-wrapper::after {
left: 0;
right: 0;
margin: 0 auto;
text-align: center; 
}

.harita-section h2 {
margin-bottom: 50px; 
}

.harita-section h2::after {
bottom: -5px; 
left: 50%;
transform: translateX(-50%);
}

.harita-section .bolge-aciklama,
.harita-section .haritai-yazi {
margin: 30px auto 40px auto;
text-align: center;
max-width: 1000px;
}
}

@media (max-width: 400px) {
.call-now-btn,
.whatsapp-final {
width: 100%;
max-width: 100%
}
.map-wrapper .map {
height: 250px;
}
}
.harita-section .bolge-aciklama,
.harita-section .harita-yazi {
max-width: 1000px;
margin: 30px auto 40px auto; 
text-align: left; 
padding-left: 2rem; 
}
.fixed-cta-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    display: none; /* Varsayılan olarak gizle */
    justify-content: space-around;
    align-items: center;
    padding: 10px 0;
    background-color: #0C182F; 
    box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.4);
    z-index: 900; 
}

.fixed-cta-bar .btn {
    flex-grow: 1;
    text-align: center;
    padding: 12px 10px;
    font-size: 1rem;
    margin: 0 5px; /* Margin'i 0 yaptık. */
}

/* 768px ve altı için: */
@media (max-width: 768px) {
    .fixed-cta-bar {
        display: flex; /* Çubuğu göster */
    }
    .hero-buttons {
        margin-bottom: 70px; /* Hero'daki butonların sabit çubuktan etkilenmemesi için fazladan boşluk */
    }
    /* Diğer Media Sorgusu Ayarlarınız yerli yerinde: */
    .hizmetler-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .slider-wrapper {
        padding-bottom: 25px;
    }
    .slide-group {
        width: 80%;  
        margin-right: 20px;
    }
}
/* Detaylı Hizmet Bölgeleri Bölümü - SADECE .hizmet-bolgeleri KULLANILDI */
.hizmet-bolgeleri {
    padding: 40px 20px;
    background-color: #f8fcf8; /* Açık yeşilimsi arkaplan */
    margin: 0 auto;
}

/* Konum Gönder Butonunu ve Listeyi Saran Kutu (Flexbox ile yan yana hizalama) */
.hizmet-bolgeleri .list-wrapper {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    align-items: flex-start; /* Elemanları yukarı hizalar */
}

/* Dikey Konum Gönder Butonu Stili */
.konum-gonder-vertical {
    display: flex; /* Dikey metin için flex kullanıyoruz */
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    margin-right: 20px;
    width: 60px; /* Genişliği sabitliyoruz */
    flex-shrink: 0; /* Küçülmesini engelliyoruz */
}

.konum-gonder-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #38c172; /* Yeşil buton rengi */
    color: white;
    text-decoration: none;
    font-weight: bold;
    font-size: 14px;
    padding: 10px 5px;
    border-radius: 5px;
    height: 150px; /* Dikey bir görünüm için yükseklik */
    width: 100%;
    box-sizing: border-box;
}

.konum-icon {
    font-size: 20px;
    margin-bottom: 5px;
    transform: rotate(90deg); /* Simgeler için dikey dönüş */
}

.konum-text {
    /* Metni dikey yapmak için döndürüyoruz */
    writing-mode: vertical-rl; /* Dikey metin */
    transform: rotate(180deg); /* Metni düz okumak için ek dönüş */
}

.yolda-yalniz {
    /* "yolda asla yalnız bırakmaz" metni */
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 12px;
    color: #666;
    margin-top: 10px;
}

/* Liste Alanı Stilleri */
.service-area-list-container {
    flex-grow: 1;
    background-color: white; /* Liste alanını beyaz yapar */
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.service-area-list-container .list-title {
    font-size: 1.5em;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 25px;
    text-align: left;
}

/* Izgara (Grid) Yapısı - İki Sütun (SEO Dostu) */
.regions-grid {
    display: grid;
    /* Masaüstünde iki eşit sütun veya esnek sütun */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
    gap: 15px 30px; /* Satır ve sütunlar arası boşluk */
}

/* Liste Elemanlarının Stili */
.region-item {
    display: flex;
    align-items: center;
    padding: 5px 0;
    font-size: 1.05em;
    color: #34495e; /* Koyu metin rengi */
}

.region-item .icon {
    color: #38c172; /* Yeşil tik işareti */
    font-weight: bold;
    margin-right: 10px;
    line-height: 1;
    font-size: 1.1em;
}

/* MOBİL UYUMLULUK (Responsive) */
@media (max-width: 768px) {
    /* Telefonlarda Dikey Butonu Üste ve Yatay Hale Getiriyoruz */
    .hizmet-bolgeleri .list-wrapper {
        flex-direction: column; /* Dikeyden yataya geçiş */
        align-items: center; /* Ortaya hizalama */
    }

    .konum-gonder-vertical {
        width: 100%;
        margin-right: 0;
        margin-bottom: 20px; /* Liste ile arasına boşluk */
        display: flex;
        flex-direction: row; /* Yatay Hizalama */
        justify-content: center;
    }
    
    .konum-gonder-btn {
        height: auto;
        width: auto;
        padding: 10px 20px;
        flex-direction: row;
    }
    
    .konum-icon, .konum-text {
        writing-mode: initial;
        transform: none;
    }
    
    .konum-icon {
        margin-right: 10px;
        margin-bottom: 0;
    }
    
    .yolda-yalniz {
        display: none; /* Telefonda bu metni gizleyebiliriz */
    }

    /* Listeyi tek sütuna düşür */
    .regions-grid {
        grid-template-columns: 1fr; 
        gap: 10px 0;
    }
    
    .service-area-list-container {
        padding: 15px;
    }
}

nav ul {
  list-style: none;
  display: flex;
  gap: 30px;
}

nav ul li {
  position: relative;
}

nav ul li a {
  text-decoration: none;
  color: white;
  padding: 10px 15px;
  display: block;
}

/* Nav içindeki dropdown için temel konumlandırma */
#navbar, .header, header { position: relative; } /* gerekiyorsa */
#navbar .dropdown { position: relative; display: inline-block; }

/* Alt menü gizli başlar ve dropdown'un altına yapışır */
#navbar .dropdown-content {
  position: absolute;
  top: 100%;          /* tetikleyicinin hemen altı */
  left: 0;
  display: none;
  min-width: 220px;
  background: #fff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 10px 20px rgba(0,0,0,.08);
  z-index: 9999;      /* alttakilere tıklanamama/z-index sorununu önler */
  padding: 6px 0;
}

/* Hover ve klavye odakla açık kalsın */
#navbar .dropdown:hover .dropdown-content,
#navbar .dropdown:focus-within .dropdown-content,
#navbar .dropdown.open .dropdown-content { /* JS ile .open eklenecek */
  display: block;
}

/* Hover boşluğu oluşmasın: tetikleyici ile menü arasında gap kalmasın */
#navbar .dropdown-content { margin-top: 0; }
#navbar .drop-trigger { display: inline-block; padding: 8px 10px; }

/* Link stilleri */
#navbar .dropdown-content a {
  display: block;
  padding: 8px 14px;
  color: #111827;
  text-decoration: none;
  white-space: nowrap;
}
#navbar .dropdown-content a:hover { background: #f3f4f6; }

/* Ebeveynlerde overflow kapalıysa menü kesilmesin */
header, .header, #navbar { overflow: visible; }

.regions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
    margin-top: 20px;
}

.region-item {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    background: #0C182F;
    color: #fff;
    padding: 10px 15px;
    border-radius: 10px;
    transition: all 0.3s ease;
    font-weight: 500;
}

.region-item:hover {
    background: #FFD700;
    color: #0C182F;
    transform: translateY(-3px);
}

.region-item .icon {
    font-size: 18px;
}