/* INTRO VIDEO - Genel */
  #intro-video{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:white;
    z-index:99999;
    display:flex;
    align-items:center;
    justify-content:center;
 }

   #intro-video video{
    width:100%;
    height:100%;
    object-fit:cover;
 }

   /* MOBILE - ekran genişliği 900px'den küçükse */
  @media (max-width: 900px){
    #intro-video video{
        width: 90%;       /* biraz küçük yapıyoruz */
        height: auto;     /* orantılı küçültme */
        max-height: 80%;  /* dikeyde taşmayı önler */
        border-radius: 10px; /* opsiyonel, güzel görünür */
    }
  }

/* ///////////////////////////////////////////////////////////////////////// */
/* -------------------------------------------------------------------------- */


  /* ! HAKKIMIZDA SAYFASI  */

/* Container reset */
.about .container {
  max-width: 900px;
  margin: 40px auto;
  padding: 0 20px;
}

/* Ana Başlık */
.about h2 {
  font-size: 36px;
  color: #1f7be0;
  text-align: center;
  margin-bottom: 30px;
  font-weight: 700;
  position: relative;
}

/* Başlık altına modern çizgi */
.about h2::after {
  content: '';
  display: block;
  width: 60px;
  height: 4px;
  background: linear-gradient(90deg, #1f7be0, #25d366);
  margin: 12px auto 0 auto;
  border-radius: 2px;
}

/* Paragraflar */
.about p {
  font-size: 17px;
  line-height: 1.8;
  color: #444;
  margin-bottom: 22px;
  text-align: justify;
}

/* Alt başlık */
.about h3 {
  font-size: 24px;
  color: #25d366;
  margin-top: 40px;
  margin-bottom: 15px;
  text-align: center;
  font-weight: 600;
}

/* Kutulu vurgular (opsiyonel modern kutular) */
.about p.highlight {
  background: #f0f8ff;
  border-left: 4px solid #1f7be0;
  padding: 14px 20px;
  border-radius: 8px;
}

/* Responsive ayarlar */
@media (max-width: 768px) {
  .about h2 { font-size: 28px; }
  .about h2::after { width: 50px; height: 3px; }
  .about h3 { font-size: 20px; }
  .about p { font-size: 16px; line-height: 1.6; }
}



/* ///////////////////////////////////////////////////////////////////////// */
/* -------------------------------------------------------------------------- */

/* ! HİZMETLER SAYFASI  */

/* HİZMET SAYFASI GENEL */

.hizmet-page{
padding:60px 20px;
background:#f7f9fc;
}

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

/* HERO */

.hizmet-hero{
text-align:center;
margin-bottom:50px;
}

.hizmet-hero h1{
font-size:38px;
color:#0b60c8;
margin-bottom:10px;
}

.hizmet-hero p{
font-size:18px;
color:#555;
}


/* GİRİŞ ALANI */

.hizmet-intro{
display:flex;
align-items:center;
gap:40px;
margin-bottom:50px;
}

.hizmet-intro img{
width:420px;
border-radius:14px;
box-shadow:0 10px 25px rgba(0,0,0,0.1);
}

.hizmet-intro h2{
margin-bottom:15px;
color:#111;
}

.hizmet-intro p{
line-height:1.7;
color:#444;
}


/* SECTION */

.hizmet-section{
margin-bottom:50px;
}

.hizmet-section h2{
margin-bottom:20px;
color:#0b60c8;
font-size:26px;
}


/* GRID */

.hizmet-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:20px;
}

.hizmet-card{
background:white;
padding:25px;
border-radius:12px;
box-shadow:0 6px 16px rgba(0,0,0,0.08);
transition:0.3s;
}

.hizmet-card:hover{
transform:translateY(-5px);
box-shadow:0 12px 24px rgba(0,0,0,0.12);
}

.hizmet-card h3{
margin-bottom:10px;
color:#111;
}

.hizmet-card p{
color:#555;
line-height:1.6;
}


/* LİSTE */

.hizmet-list{
padding-left:20px;
}

.hizmet-list li{
margin-bottom:10px;
line-height:1.6;
color:#444;
}


/* BÜYÜK RESİM */

.hizmet-image{
text-align:center;
margin-bottom:50px;
}

.hizmet-image img{
width:100%;
max-width:700px;
border-radius:14px;
box-shadow:0 10px 25px rgba(0,0,0,0.12);
}


/* CTA */

.hizmet-cta{
background:linear-gradient(135deg,#0b60c8,#1f7be0);
color:white;
padding:40px;
border-radius:14px;
text-align:center;
}

.hizmet-cta h2{
margin-bottom:10px;
}

.hizmet-cta p{
margin-bottom:20px;
}

.cta-btn{
display:inline-block;
background:white;
color:#0b60c8;
padding:12px 28px;
border-radius:8px;
text-decoration:none;
font-weight:bold;
transition:0.3s;
}

.cta-btn:hover{
background:#f1f1f1;
}


/* MOBİL UYUMLU */

@media (max-width:900px){

.hizmet-intro{
flex-direction:column;
text-align:center;
}

.hizmet-intro img{
width:100%;
max-width:420px;
}

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

.hizmet-hero h1{
font-size:30px;
}

}


/* ///////////////////////////////////////////////////////////////////////// */
/* -------------------------------------------------------------------------- */

/* ! İLETİŞİM SAYFASI  */



.brand{
  display:flex;
  align-items:center;
  gap:15px;
}

.logo{
  width:80px;
  height:auto;
}

.brand-text h1{
  font-size:1.8rem;
  color:#1a1a1a;
}

.brand-text .tag{
  font-size:.9rem;
  color:#555;
  margin-top:2px;
}

.main-nav{
  display:flex;
  gap:20px;
  margin-top:15px;
  flex-wrap:wrap;
}

.main-nav a{
  text-decoration:none;
  color:#1a1a1a;
  font-weight:500;
  padding:5px 10px;
  border-radius:5px;
  transition:all .3s;
}

.main-nav a:hover{
  background:#0078d7;
  color:#fff;
}

/* İletişim Kartları */
.contact-container{
  max-width:900px;
  margin:50px auto;
  display:flex;
  flex-direction:column;
  gap:20px;
  padding:0 15px;
}

.contact-container h2{
  color:#0078d7;
  text-align:center;
  margin-bottom:30px;
}

.contact-card{
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:#fff;
  padding:20px 25px;
  border-radius:10px;
  box-shadow:0 6px 12px rgba(0,0,0,.05);
  transition:all .3s;
}

.contact-card:hover{
  transform:translateY(-3px);
  box-shadow:0 8px 18px rgba(0,0,0,.12);
}

.contact-card div{
  display:flex;
  align-items:center;
  gap:15px;
  font-weight:500;
}

.card-actions a{
  margin-left:10px;
  text-decoration:none;
  padding:6px 12px;
  border-radius:5px;
  font-weight:500;
  transition:all .3s;
}

.btn-call{
  background:#0078d7;
  color:#fff;
}

.btn-call:hover{
  background:#005ea1;
}

.btn-whatsapp{
  background:#25D366;
  color:#fff;
  display:flex;
  align-items:center;
  gap:5px;
}

.btn-whatsapp:hover{
  background:#1ebe57;
}

/* Footer */
.site-footer{
  background:#4b4b4b;
  color:#fff;
  text-align:center;
  padding:20px 15px;
  margin-top:50px;
}

.site-footer a{
  color:#0078d7;
  text-decoration:none;
}

.site-footer a:hover{
  text-decoration:underline;
}



/* Responsive */
@media(max-width:768px){
  .brand{
    flex-direction:column;
    align-items:center;
  }
  .main-nav{
    flex-direction:column;
    align-items:center;
  }
  .contact-card{
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
  }
}



/* ///////////////////////////////////////////////////////////////////////// */
/* -------------------------------------------------------------------------- */

/* ! HOME SAYFASI  */


/* home.css - ana sayfa özel stiller */

.container{max-width:1180px;margin:0 auto;padding:36px 20px}
.hero{display:grid;grid-template-columns: 1fr 420px;gap:28px;align-items:start;margin-top:10px}
.hero-left .hero-frame{background:linear-gradient(180deg,#eaf1fb,#f8fbff);border-radius:14px;padding:14px;box-shadow:0 12px 40px rgba(2,6,23,.08)}
.hero-media img{width:100%;height:420px;object-fit:cover;border-radius:8px;border:6px solid #0f2b49}
.hero-thumbs{display:flex;gap:10px;margin-top:12px;justify-content:flex-start}
.hero-thumbs .thumb{border-radius:10px;border:none;overflow:hidden;padding:0;background:transparent;cursor:pointer;opacity:.9}
.hero-thumbs .thumb img{width:84px;height:58px;object-fit:cover;display:block}
.hero-thumbs .thumb.active{outline:3px solid var(--accent);transform:translateY(-4px)}

/* hero-info */
.hero-info{background:rgba(255,255,255,0.95);padding:20px;border-radius:14px;box-shadow:0 12px 30px rgba(6,12,30,.06)}
.hero-info h2{margin:0 0 8px;color:var(--dark)}
.hero-info p{color:var(--muted);line-height:1.6}
.hero-features{list-style:none;padding:0;margin:14px 0 0 0;display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.hero-features li{font-weight:600;color:#214059}

/* trust mini */
.trust{display:flex;gap:10px;margin-top:16px}
.trust-item{background:linear-gradient(180deg,#fff,#f9fbff);padding:10px;border-radius:10px;text-align:center;flex:1;box-shadow:0 6px 20px rgba(4,8,20,0.04)}
.trust-item strong{display:block;font-size:18px;color:var(--dark)}

/* Hizmet kartları - oval/yuvarlak alt */
.services{margin-top:40px}
.section-title{font-size:22px;margin-bottom:18px;color:var(--dark)}
.service-row{display:flex;gap:18px;flex-wrap:wrap;justify-content:space-between;margin-bottom:22px}
.service-pill{flex:1 1 30%;min-width:260px;background:#0f1724;color:#fff;border-radius:0 0 120px 120px;padding:12px 18px 40px;position:relative;overflow:visible;box-shadow:0 12px 30px rgba(2,6,23,.12)}
.service-pill .top-img{position:absolute;top:-40px;left:50%;transform:translateX(-50%);width:84%;height:120px;border-radius:18px;overflow:hidden;border:8px solid rgba(255,255,255,0.06)}
.service-pill .top-img img{width:100%;height:100%;object-fit:cover}
.service-pill h4{margin-top:90px;margin-bottom:6px;font-size:18px}
.service-pill p{color:rgba(255,255,255,0.85);font-size:13px}
.service-pill .btn.small{margin-top:10px;background:rgba(255,255,255,0.12);color:#fff;padding:8px 12px;border-radius:8px}

/* renk varyasyonları */
.service-pill.blue{background:linear-gradient(180deg,#0f1724,#0b2236)}
.service-pill.orange{background:linear-gradient(180deg,#2b1b08,#3b2b12)}
.service-pill.red{background:linear-gradient(180deg,#3b0b0b,#581010)}
.service-pill.maroon{background:linear-gradient(180deg,#2c1016,#40191f)}
.service-pill.blue-light{background:linear-gradient(180deg,#102034,#16334a)}
.service-pill.orange-light{background:linear-gradient(180deg,#2f1606,#4b280a)}

/* ADVANTAGES (grid-2) */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center;margin-top:36px}
.adv-gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.adv-gallery img{width:100%;height:150px;object-fit:cover;border-radius:10px}
.adv-text h3{margin:0 0 8px}
.adv-list{list-style:disc;margin-left:18px;color:var(--muted)}

/* testimonials */
.testimonials{margin-top:36px;background:linear-gradient(180deg,#fff,#fbfdff);padding:28px;border-radius:14px;box-shadow:0 12px 30px rgba(2,6,23,.04)}
.testi-slider{position:relative;overflow:hidden;padding:8px}
.testi{opacity:0;transform:translateY(8px);transition:all .45s ease;padding:12px 20px}
.testi.active{opacity:1;transform:none;background:#fff;padding:18px;border-radius:10px;box-shadow:0 10px 30px rgba(6,12,30,.04)}

/* faq */
.faq-list details{background:#fff;padding:12px;border-radius:10px;margin-bottom:8px;box-shadow:0 8px 20px rgba(6,12,30,.03)}
.faq-list summary{cursor:pointer;font-weight:700}

/* contact-summary */
.contact-summary .big-line{display:inline-block;background:linear-gradient(90deg,#fff,#f7fbff);padding:10px 12px;border-radius:8px;text-decoration:none;color:var(--dark);font-weight:700}

/* floating contact styles (overrides) */
.floating-contact.desktop{left:18px;bottom:18px}
.fc-btn{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:12px;color:white;text-decoration:none;font-weight:700;box-shadow:0 10px 30px rgba(3,8,20,.12)}
.fc-btn.call{background:linear-gradient(180deg,#0f7be0,#0a60c8)}
.fc-btn.wa{background:linear-gradient(180deg,#2bd67a,#15a84b)}

/* responsive */
@media (max-width:1100px){ .hero{grid-template-columns:1fr 360px} .hero-media img{height:360px} }
@media (max-width:900px){
  .hero{grid-template-columns:1fr;gap:18px}
  .hero-media img{height:300px}
  .service-pill{min-width:100%;border-radius:18px;padding-bottom:20px}
  .service-pill .top-img{position:relative;transform:none;left:auto;top:auto;width:100%;height:160px;border-radius:12px;margin-bottom:8px;border:6px solid rgba(0,0,0,0.05)}
  .floating-contact.desktop{display:none}
  /* NOTE: mobil .floating-contact ve .mobile-* kuralları kaldırıldı */

}

/* küçük ekranlar için ekstra padding */
@media (max-width:420px){
  .hero-media img{height:220px}
  .hero-info{padding:14px}
  .brand-text h1{font-size:16px}
}



/* HERO */

.hero{

display:grid;
grid-template-columns:2fr 1fr;

gap:30px;

align-items:center;

}

/* SLIDER */

.hero-slider{

position:relative;

overflow:hidden;

border-radius:12px;

}

.slide{

display:none;

}

.slide img{

width:100%;
height:420px;
object-fit:cover;

}

.slide.active{

display:block;

}

/* SLIDER BUTTON */

.slider-controls{

display:flex;
justify-content:space-between;

margin-top:10px;

}

.slider-controls button{

background:#0f3c68;
color:white;
border:none;

font-size:20px;

width:40px;
height:40px;

border-radius:6px;

cursor:pointer;

}

/* HERO INFO */

.hero-info{

background:white;

padding:30px;

border-radius:12px;

box-shadow:0 10px 30px rgba(0,0,0,0.08);

}

.hero-info h2{

font-size:26px;

margin-bottom:10px;

color:#0f3c68;

}

.hero-info p{

margin-bottom:20px;

}

/* BUTTON */

.btn{

display:inline-block;

padding:12px 20px;

border-radius:6px;

text-decoration:none;

font-weight:600;

margin-right:10px;

}

.btn-primary{

background:#ff6b00;
color:white;

}

.btn-outline{

border:2px solid #ff6b00;
color:#ff6b00;

}

.btn.small{

padding:8px 14px;

font-size:14px;

}

.btn.big{

padding:15px 30px;

font-size:18px;

}

/* QUICK CONTACT */

.quick-contacts{

margin-top:20px;

display:flex;

gap:10px;

}

.quick-call{

background:#0f3c68;
color:white;

padding:10px 16px;

border-radius:6px;

text-decoration:none;

}

.quick-wa{

background:#25D366;
color:white;

padding:10px 16px;

border-radius:6px;

text-decoration:none;

}

/* SERVICES */

.service-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

gap:30px;

}

.service-card{

background:white;

padding:20px;

border-radius:14px;

box-shadow:0 10px 30px rgba(0,0,0,0.08);

text-align:center;

transition:0.3s;

}

.service-card:hover{

transform:translateY(-8px);

}

.service-hero img{

width:100%;
height:180px;

object-fit:cover;

border-radius:10px;

margin-bottom:15px;

}

.service-card h4{

margin-bottom:10px;

}

/* RENKLER */

.service-card.blue{border-top:4px solid #2a6df4;}
.service-card.orange{border-top:4px solid #ff7a00;}
.service-card.red{border-top:4px solid #e53935;}
.service-card.wine{border-top:4px solid #8e2b2b;}
.service-card.teal{border-top:4px solid #009688;}
.service-card.yellow{border-top:4px solid #fbc02d;}

/* HIGHLIGHTS */

.grid-3{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

gap:25px;

}

.highlight{

background:white;

padding:30px;

border-radius:12px;

text-align:center;

box-shadow:0 6px 20px rgba(0,0,0,0.08);

}

/* TESTIMONIALS */

.testimonials{

text-align:center;

}

.testi{

display:none;

background:white;

padding:30px;

border-radius:12px;

box-shadow:0 6px 20px rgba(0,0,0,0.08);

max-width:700px;

margin:auto;

}

.testi.active{

display:block;

}

/* GALERİ */

.gallery-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(200px,1fr));

gap:15px;

}

.gallery-grid img{

width:100%;

border-radius:10px;

transition:0.3s;

}

.gallery-grid img:hover{

transform:scale(1.05);

}

/* FAQ */

.faq-list{

max-width:800px;

margin:auto;

}

.faq details{

background:white;

margin-bottom:10px;

padding:15px;

border-radius:8px;

}

/* CTA */

.cta-split{

display:flex;

justify-content:space-between;

align-items:center;

background:#00adb5;

color:white;

padding:40px;

border-radius:12px;

}

.cta-right a{

margin-left:10px;

}

/* FLOATING CONTACT */

.floating-contact{

position:fixed;

bottom:25px;

left:25px;

display:flex;

flex-direction:column;

gap:10px;

}

.fc-btn{

padding:12px 16px;

border-radius:30px;

text-decoration:none;

color:white;

}

.fc-btn.call{

background:#0f3c68;

}

.fc-btn.wa{

background:#25D366;

}

/* MOBILE BAR */

/* NOTE: mobil .floating-contact ve .mobile-* kuralları kaldırıldı */

/* RESPONSIVE */

@media(max-width:900px){

.hero{

grid-template-columns:1fr;

}

.cta-split{

flex-direction:column;

gap:20px;

text-align:center;

}

.main-nav{

display:none;

}

.floating-contact.desktop{

display:none;

}



}


/* MOBILE BOTTOM HORIZONTAL BAR - sadece mobil */
@media (max-width: 900px) {
  /* container: hafif yukarıda, tam genişlikte kenarlardan boşluklu yatay bar */
  .ekran-ustu-arama-mobile {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    height: 56px;              /* sabit yükseklik */
    display: flex;
    gap: 8px;
    border-radius: 12px;
    padding: 6px;
    align-items: center;
    justify-content: center;
    background:rgba(250, 245, 245, 0.288); 
    box-shadow: 0 10px 30px rgba(2,6,23,0.12);
    backdrop-filter: blur(2px);
    z-index: 9999;
  }

  /* İçindeki her buton eşit genişlik alır; ileriye dönük dinamik eklemeye uygun */
  .ekran-ustu-arama-mobile > a {
    flex: 1 1 0;
    height: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-decoration: none;
    color: white;
    font-weight: 700;
    border-radius: 8px;
    padding: 0 12px;
    transition: transform .12s ease, box-shadow .12s ease;
    box-shadow: none;
  }

  /* ikon boyutu */
  .ekran-ustu-arama-mobile > a i {
    font-size: 18px;
    line-height: 1;
  }

  /* buton renkleri (mevcut sınıflarla uyumlu) */
  .ekran-ustu-arama-mobile .btn-mobile-call {
    background: linear-gradient(180deg,#1f7be0,#0b60c8);
  }

  .ekran-ustu-arama-mobile .btn-mobile-wa {
    background: linear-gradient(180deg,#2bd67a,#15a84b);
  }

  /* etiket (ikonun yanındaki metin) */
  .ekran-ustu-arama-mobile .label {
    display: inline-block;
    font-size: 15px;
    line-height: 1;
  }

  /* küçük ekranlarda metin çok uzarsa kısaltma: gerekli değilse kaldır */
  @media (max-width: 360px) {
    .ekran-ustu-arama-mobile .label {
      display: none; /* çok dar ekranlarda sadece ikon göster */
    }
  }

  /* buton etkileşimi */
  .ekran-ustu-arama-mobile > a:active,
  .ekran-ustu-arama-mobile > a:focus {
    transform: translateY(1px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.12);
    outline: none;
  }

  /* sayfa içeriğinin bar tarafından kapatılmaması için alt boşluk ekle */
  /* Bu satırı body'ye zaten eklenmişse kullanma; yoksa ekle */
  body {
    padding-bottom: calc(56px + 24px + env(safe-area-inset-bottom));
  }
}




/* VIDEO SECTION */

.video-section {
  margin-top: 40px;
}

.video-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

/* video kart */
.video-card {
  background: #000;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}

/* video boyutu */
.video-card video {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
  border-radius: 10px;
}

/* hover efekti (masaüstü) */
.video-card:hover {
  transform: translateY(-3px);
  transition: 0.2s;
}

/* MOBİL */
@media (max-width: 520px) {
  .video-grid {
    grid-template-columns: 1fr; /* tek sütun */
  }

  .video-card video {
    height: 200px;
  }
}


/* ///////////////////////////////////////////////////////////////////////// */
/* -------------------------------------------------------------------------- */

/* ! İNFO SAYFASI  */

/* css/oz-info.css - final */

/* temel container */
.oz-info{
  position: fixed !important;
  right: 18px !important;
  bottom: 18px !important;
  z-index: 99999 !important;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  pointer-events: none;
}

/* overlay (görünür sadece root.open olduğunda) */
.oz-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0);
  opacity: 0;
  visibility: hidden;
  transition: background .18s ease, opacity .18s ease, visibility .18s;
  z-index: 99990;
  pointer-events: none;
}
.oz-info.open .oz-overlay{
  background: rgba(0,0,0,0.45);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* popup (başlangıçta gizli; .open ile görünür) */
.oz-info-popup{
  position: absolute;
  right: 78px;
  bottom: 18px;
  width: 720px;
  max-width: calc(100vw - 140px);
  min-height: 56px;
  max-height: 60vh;
  overflow: hidden;
  background: #ffffff;
  color: #222;
  border-radius: 10px;
  box-shadow: 0 18px 48px rgba(2,8,23,0.18);
  padding: 12px 14px;
  transform-origin: right center;
  opacity: 0;
  visibility: hidden;
  transform: translateX(10px) translateY(6px) scale(.995);
  transition: opacity .20s cubic-bezier(.2,.9,.3,1), transform .22s cubic-bezier(.2,.9,.3,1), visibility .18s;
  pointer-events: auto;
  z-index: 99992;
  box-sizing: border-box;
}

/* görünürlük kontrolü */
.oz-info.open .oz-info-popup{
  opacity: 1;
  visibility: visible;
  transform: translateX(0) translateY(0) scale(1);
}

/* içerik düzeni */
.oz-info-inner{
  display:flex;
  gap:12px;
  align-items:flex-start;
  width:100%;
  box-sizing: border-box;
}
.oz-info-text{
  flex: 1 1 auto;
  font-size:15px;
  line-height:1.35;
  color:#222;
  white-space: normal;
  word-break: break-word;
  overflow: visible;
}
.oz-info-paragraph{ margin:0 0 6px 0; }

/* isim butonu */
.oz-info-name{
  display:inline-block;
  margin:0 6px;
  padding:4px 8px;
  border-radius:6px;
  background: linear-gradient(180deg,#f6f9ff,#eef6ff);
  border:1px solid rgba(11,99,206,0.08);
  color:#0b63ce;
  font-weight:600;
  cursor:pointer;
  font-size:13px;
  vertical-align: middle;
}

/* mini-contact (popup içinde, varsayılan gizli) */
.oz-mini-contact{
  display:flex;
  gap:8px;
  margin-top:6px;
  align-items:center;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .12s ease, transform .12s ease, visibility .12s;
}
.oz-info.show-mini .oz-mini-contact{
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

/* mini butonlar */
.oz-mini-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  border-radius:8px;
  background:#fff;
  box-shadow: 0 8px 18px rgba(0,0,0,0.12);
  color:#0b63ce;
  text-decoration:none;
  border:1px solid rgba(0,0,0,0.04);
}

/* sağdaki buton sütunu */
.oz-contact-row{
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:center;
  justify-content:flex-start;
  width:80px;
  flex: 0 0 80px;
  margin-left:12px;
}
.oz-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:46px;
  height:40px;
  border-radius:8px;
  text-decoration:none;
  font-weight:700;
  border:1px solid rgba(0,0,0,0.04);
  background:#f7fbff;
  color:#0b63ce;
  transition: transform .12s;
}
.oz-btn:hover{ transform: translateY(-2px); }

/* fab: küçük, saydam gri, i siyah */
.oz-floating-stack{ display:flex; flex-direction:column; gap:12px; align-items:flex-end; pointer-events: auto; z-index: 99993; }
.oz-fab{ pointer-events: auto; }
.oz-fab-info{
  width:40px; height:40px; border-radius:8px;
  background: rgba(0,0,0,0.06); color:#111; border:none;
  display:inline-flex; align-items:center; justify-content:center; box-shadow:none; font-size:14px;
}
.oz-fab-info i{ font-size:15px; }

/* --- responsive: mobil ayarları (BU KISIM görünüme müdahale etmez; JS kontrolü ile açılır) --- */
@media (max-width:520px){
  .oz-info { bottom: 120px !important; right: 12px !important; left: auto !important; pointer-events: auto; }
  .oz-floating-stack { position: fixed !important; right: 14px !important; bottom: 14px !important; z-index: 999999 !important; }

  /* popup görünürlük hala .open ile kontrol edilsin; mobilde pozisyon JS ile ayarlanacak */
  .oz-info-popup{
    width: auto;
    left: 12px;
    right: 12px;
    max-width: calc(100vw - 24px);
    padding: 10px;
    border-radius: 10px;
    max-height: calc(100vh - 180px);
    overflow: auto;
  }

  .oz-info-inner { display:block; }
  .oz-contact-row { flex-direction: row; gap:8px; width: auto; margin-left:0; justify-content:flex-end; }
  .oz-mini-contact { margin-top:8px; } /* görünmesi click ile kontrol edilecek */
  .oz-info-text { font-size:13px; line-height:1.25; max-height: calc(100vh - 240px); overflow:auto; -webkit-overflow-scrolling:touch; }
}

/* sadece mobilde info butonunu yukarı taşı */
@media (max-width:520px){

  .oz-floating-stack{
    bottom: 90px !important; 
  }

  
}

/* mobile: fab sadece sayfanın en altındayken görünür olsun */
@media (max-width:520px){
  .oz-floating-stack{
    transition: opacity .18s ease, transform .18s ease;
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none; /* görünmezken tıklanmasın */
  }

  /* root (oz-info) altında at-bottom sınıfı varsa fab görünür olsun */
  .oz-info.at-bottom .oz-floating-stack,
  /* ayrıca popup açıkken de görünür kalsın (kullanıcı zaten açtıysa) */
  .oz-info.open .oz-floating-stack {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
}



/* ///////////////////////////////////////////////////////////////////////// */
/* -------------------------------------------------------------------------- */


/* ! MAİN.CSS - genel stiller */

/* HERO */
.hero{
grid-template-columns:1fr 360px;
align-items:center;
padding:40px 20px
}

@media (max-width:980px){
.hero{
grid-template-columns:1fr;
padding:18px 12px
}
}

/* slider */
.hero-slider{
border-radius:16px;
box-shadow:0 18px 50px rgba(12,24,40,0.08)
}

.hero-slider .slide{
position:absolute;
inset:0;
opacity:0;
transition:opacity .5s ease;
display:flex;
align-items:center;
justify-content:center
}

.hero-slider .slide img{
width:100%;
height:420px;
object-fit:cover;
display:block
}

.hero-slider .slide.active{
opacity:1;
position:relative
}

/* slider controls */
.slider-controls{
position:relative;
gap:6px;
justify-content:center
}

.slider-controls button{
background:rgba(0,0,0,0.35);
padding:8px 12px;
border-radius:8px;
}

/* hero info */
.hero-info{
background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);
padding:22px
}

/* BUTTONS */
.quick-contacts{
margin-top:16px;
flex-direction:column;
gap:8px;
}

/* Butonlar */
.quick-call, .quick-wa{
display:flex;
align-items:center;
gap:8px;
padding:10px 14px;
border-radius:10px;
font-weight:500;
max-width:fit-content;
}

/* İkonlar */
.quick-call .icon, .quick-wa .icon{
height:24px;
width:auto;
object-fit:contain;
display:block;
flex-shrink:0;
}

/* SERVICE CARDS */
.service-grid{
grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
gap:22px;
}

.service-card{
background:#0f1724;
color:rgb(217, 12, 12);
border-radius:28px;
padding:0;
overflow:visible;
position:relative;
box-shadow:0 12px 30px rgba(8,20,40,0.15)
}

.service-card .service-hero img{
width:100%;
height:160px;
object-fit:cover;
border-radius:18px;
display:block
}

.service-card h4{
margin:12px 18px 0 18px;
color:rgb(255, 255, 255)
}

.service-card p{
margin:8px 18px 18px 18px;
color:rgba(96, 93, 93, 0.85);
font-size:14px
}

.service-card .btn.small{
margin:0 18px 22px 18px;
align-self:flex-start
}

/* SERVİCE CARD: Detay buton */
.service-card .btn.small{
background:rgba(0, 87, 248, 0.953);
color:#ffffff;
border:none;
padding:6px 14px;
border-radius:8px;
cursor:pointer;
transition:background 0.2s
}

.service-card .btn.small:hover{
background:rgba(0,0,0,0.2)
}

/* renk temaları */
.service-card.blue{
border:4px solid #235be0
}

.service-card.orange{
border:4px solid #ff7a00
}

.service-card.red{
border:4px solid #d93a2f
}

.service-card.wine{
border:4px solid #a32b2b
}

.service-card.teal{
border:4px solid #1aa39a
}

.service-card.yellow{
border:4px solid #f4b400
}

/* advantage grid */
.grid-3{
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:25px
}

.highlight{
background:white;
border-radius:12px;
padding:18px;
box-shadow:0 8px 22px rgba(6,10,20,0.06)
}

.highlight h4{
margin:0 0 8px 0
}

/* testimonials */
.testi-slider{
position:relative;
overflow:hidden
}

.testi{
opacity:0;
transform:translateY(8px);
transition:all .4s ease;
padding:22px;
background:white;
border-radius:12px;
box-shadow:0 8px 30px rgba(8,20,40,0.06)
}

.testi.active{
opacity:1;
transform:none
}

/* gallery grid */
.gallery-grid{
grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
gap:12px
}

.gallery-grid img{
height:110px;
object-fit:cover;
border-radius:8px;
display:block
}

/* FAQ */
.faq-list{
max-width:800px;
margin:auto
}

.faq details{
background:white;
margin-bottom:10px;
padding:15px;
border-radius:8px
}

/* CTA split */
.cta-split{
padding:26px;
background:linear-gradient(90deg,#fff,#f7f9fb);
margin:40px 0
}

.cta-right{
display:flex;
gap:12px
}

/* Desktop Floating Contact */
.floating-contact.desktop{
z-index:90;
}

.fc-btn{
display:inline-flex;
align-items:center;
justify-content:center;
padding:10px 14px;
border-radius:12px;
text-decoration:none;
font-weight:800;
box-shadow:0 8px 18px rgba(4,8,20,0.12);
}

.fc-btn.call{
background:linear-gradient(180deg,#1f7be0,#0b60c8);
}

.fc-btn.wa{
background:linear-gradient(180deg,#2bd67a,#15a84b);
}

/* Mobile buton renkleri */
.mobile-call{
background:#1f7be0;
}

.mobile-wa{
background:#25d366;
}



@media (max-width:980px){
.floating-contact.desktop{
display:none;
}

}

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

body{
font-family:Arial, Helvetica, sans-serif;
background:#f5f7fb;
color:#333;
line-height:1.6;
}

.container{
max-width:1200px;
margin:auto;
padding:40px 20px;
}

.section-title{
font-size:32px;
margin-bottom:40px;
text-align:center;
font-weight:700;
}

/* HEADER */
.site-header{
display:flex;
align-items:center;
justify-content:space-between;
transition:transform 0.3s ease;
padding:15px 40px;
background:white;
box-shadow:0 4px 20px rgba(0,0,0,0.08);
position:sticky;
top:0;
z-index:999;
}

/* LOGO */
.brand{
display:flex;
align-items:center;
gap:12px;
}

.logo{
height:55px;
}

.brand-text h1{
font-size:20px;
font-weight:700;
color:#0f3c68;
}

.tag{
font-size:12px;
color:#777;
}

/* NAV */
.main-nav{
display:flex;
gap:25px;
}

.main-nav a{
text-decoration:none;
font-weight:600;
color:#333;
padding:8px 10px;
border-radius:6px;
transition:0.2s;
}

.main-nav a:hover{
background:#0f3c68;
color:white;
}

/* SEARCH */
.site-search{
display:flex;
gap:6px;
}

.site-search input{
padding:8px 12px;
border-radius:6px;
border:1px solid #ddd;
}

.site-search button{
background:#0f3c68;
color:white;
border:none;
padding:8px 16px;
border-radius:6px;
cursor:pointer;
}

.site-search button:hover{
background:#09263f;
}

/* FOOTER */
.site-footer{
background:#00adb5;
color:white;
text-align:center;
padding:30px;
margin-top:40px;
}

/* Mobil İçin Header */
/* =========================== Premium Mobile Slide Menu (only mobile, <=768px) =========================== */
.menu-backdrop{ display:none; }
/* common hidden by default - desktop unaffected */
.mobile-menu{ display:none; }
@media (max-width:768px){ /* header small */ .site-header{ position:fixed; top:0; left:0; right:0; padding:10px 14px; display:flex; align-items:center; justify-content:space-between; background:rgba(255,255,255,0.95); z-index:11000; transition:transform .28s ease, background .2s ease; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .brand-text{ display:none; } .logo{ height:40px; } /* hamburger */ .menu-toggle{ display:block; background:transparent; border:0; font-size:22px; color:var(--dark, #0f172a); } /* hide the old main-nav on mobile */ .main-nav{ display:none !important; } /* backdrop (blur + dark layer) */ .menu-backdrop{ display:block; position:fixed; inset:0; z-index:10990; background:rgba(0,0,0,0.45); backdrop-filter: blur(4px); opacity:0; pointer-events:none; transition:opacity .28s ease; } .menu-backdrop.active{ opacity:1; pointer-events:auto; } /* slide menu (right side) */ .mobile-menu{ background: rgba(255, 255, 255, 0.25); /* yarı saydam beyaz */ backdrop-filter: blur(12px); /* cam efekti için blur */ -webkit-backdrop-filter: blur(12px); /* Safari uyumluluğu */ border-left: 1px solid rgba(255, 255, 255, 0.2); /* isteğe bağlı hafif sınır */ display:block; position:fixed; top:0; right:0; height:100vh; width:82%; max-width:360px; box-shadow: -20px 0 40px rgba(8,20,40,0.18); z-index:11000; transform:translateX(110%); transition:transform .36s cubic-bezier(.22,.9,.2,1); padding:22px; overflow-y:auto; } .mobile-menu.open{ transform:translateX(0); } /* close button */ .mobile-close{ background:transparent; border:0; font-size:20px; position:absolute; top:12px; right:12px; cursor:pointer; } /* search */ .mobile-search{ display:flex; gap:8px; margin:38px 6px 18px 6px; } .mobile-search input{ flex:1; padding:10px 12px; border-radius:8px; border:1px solid #e6e6e6; font-size:15px; } .mobile-search button{ background:#0b60c8; color:white; padding:10px 12px; border-radius:8px; border:0; font-size:16px; cursor:pointer; } /* nav items */ .mobile-nav{ display:flex; flex-direction:column; gap:8px; margin:8px 6px 18px 6px; border-radius:8px; } } .mobile-nav a{ display:flex; gap:12px; align-items:center; padding:12px 14px; border-radius:10px; text-decoration:none; color:#0f172a; font-weight:600; border:1px solid rgba(8,20,40,0.03); background: rgba(255, 255, 255, 0.25); /* yarı saydam */ backdrop-filter: blur(18px); /* blur değerini artırdık */ -webkit-backdrop-filter: blur(18px); /* Safari uyumluluğu */ } .mobile-nav a i{ width:22px; text-align:center; font-size:16px; color:#1f7be0; } /* CTAs */ .mobile-cta{ display:flex; gap:10px; margin:18px 6px; } .wa-btn, .call-btn{ flex:1; padding:12px 14px; border-radius:10px; text-decoration:none; display:inline-flex; gap:8px; align-items:center; justify-content:center; font-weight:700; } .wa-btn{ background:linear-gradient(90deg,#2bd67a,#15a84b); color:white; } .call-btn{ background:#0b60c8; color:white; } /* ensure page content not hidden under fixed header */ body{ padding-top:64px; } /* Masaüstü için (992px ve üstü) */ @media screen and (min-width: 992px) { .menu-toggle { display: none !important; } .menu-backdrop { display: none !important; pointer-events: none !important; opacity: 0 !important; } .mobile-menu { display: none !important; transform: translateX(110%) !important; pointer-events: none !important; } /* Desktop ana nav görünür olsun */ .main-nav { display: flex !important; position: static !important; max-height: none !important; } }

/* Mobil: hero içindeki resimleri karta sığdır (sadece mobil için) */
@media (max-width:900px) {
  /* container'ların yüksekliğini esnek yap, böylece resim kart içine sığar */
  .hero-media,
  .hero-slider,
  .hero-left .hero-frame {
    height: auto !important;
  }

  /* Görselleri kırpmak yerine karta sığdır */
  .hero-media img,
  .hero-slider .slide img,
  .hero-left .hero-frame .hero-media img {
    width: 100% !important;
    height: auto !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    display: block !important;
  }
}




/* CTA Banner */
.cta-banner {
  display: block;
  max-width: 1100px;
  margin: 28px auto;
  text-align: center;
  padding: 8px;
  box-sizing: border-box;
}

/* görsel link */
.cta-image-link {
  display: block;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(2,8,23,0.14);
  transition: transform .28s cubic-bezier(.2,.9,.3,1), box-shadow .28s;
  will-change: transform;
  text-decoration: none;
}

/* hover hafif yükselme */
.cta-image-link:hover { transform: translateY(-6px); box-shadow: 0 26px 60px rgba(2,8,23,0.20); }

/* resim */
.cta-image {
  width: 100%;
  height: 320px;
  object-fit: cover;
  display: block;
}

/* overlay üstüne metin */
.cta-overlay{
  position: absolute;
  top: 6px;         /* üstten boşluk */
  left: 6px;        /* soldan boşluk */
  right: 16px;
  bottom: auto;      /* alttan kaldır */
  
  padding: 10px 14px;

  
  color: #030303;
  border-radius: 10px;
  max-width: 80%;
}
.cta-title{
  margin: 0;
  font-size: clamp(16px, 3vw, 24px);
  font-weight: 800;
  line-height: 1.2;
}

.cta-sub{
  margin-top: 4px;
  font-size: 13px;
  opacity: 0.95;
}

/* actions (buton) */
.cta-actions{
  margin-top: 12px;
  display:flex;
  justify-content:center;
}
.cta-button{
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:12px 18px;
  border-radius:12px;
  text-decoration:none;
  background: linear-gradient(90deg,#0b63ce,#5aa8ff);
  color:#fff;
  font-weight:700;
  font-size:16px;
  box-shadow: 0 10px 32px rgba(11,99,206,0.18);
  transform: translateZ(0);
  transition: transform .16s ease, box-shadow .16s ease, opacity .12s;
  position: relative;
  overflow: visible;
}

/* telefon numarasını küçük göster */
.cta-button .cta-phone{
  display:block;
  font-size:13px;
  opacity:0.92;
  font-weight:600;
  margin-left:6px;
}

/* hover / active */
.cta-button:hover{ transform: translateY(-3px); box-shadow: 0 16px 40px rgba(11,99,206,0.22); }
.cta-button:active{ transform: translateY(-1px); }

/* pulse dikkat çekme efekti (arka plan) */
.cta-button::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  box-shadow: 0 0 0 0 rgba(90,168,255,0.28);
  animation: pulse 2.8s infinite;
  z-index: -1;
  pointer-events: none;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(90,168,255,0.28); }
  70% { box-shadow: 0 0 0 18px rgba(90,168,255,0.0); }
  100% { box-shadow: 0 0 0 0 rgba(90,168,255,0); }
}

/* ikon stili (fa varsa) */
.cta-button i{ font-size:18px; display:inline-block; min-width:18px; }

/* responsive */
@media (max-width: 720px){
  .cta-image { height: 220px; }
  .cta-title { font-size: clamp(16px, 5.2vw, 22px); }
  .cta-button { width: calc(100% - 40px); max-width: 420px; padding:12px; font-size:15px; }
}

/* erişilebilir kontrast için odak stili */
.cta-button:focus{
  outline: 3px solid rgba(11,99,206,0.18);
  outline-offset: 3px;
  box-shadow: 0 16px 40px rgba(11,99,206,0.26);
}


/* ///////  //////////////////////////////////////////////////////////////// */
/* -------------------------------------------------------------------------- */


/* ! VİDEO.CSS - video bölümü için özel stiller */

/* SAYFA İÇİ INTRO VIDEO */

.page-intro-video{
width:100%;
max-width:760px;
margin:30px auto;
aspect-ratio:16/9;
overflow:hidden;
background:#000;
border-radius:12px;
box-shadow:0 10px 25px rgba(0,0,0,0.25);
}

.page-intro-player{
width:100%;
height:100%;
object-fit:contain;
display:block;
}

/* tablet */

@media(max-width:1024px){

.page-intro-video{
max-width:640px;
}

}

/* mobil */

@media(max-width:768px){

.page-intro-video{
max-width:94%;
margin:20px auto;
}

}



/* /////////////////////////////////////////////////////////////////////////// */
/* -------------------------------------------------------------------------- */

/* ! VİDEO.CSS */

/* SAYFA İÇİ INTRO VIDEO */

.page-intro-video{
width:100%;
max-width:760px;
margin:30px auto;
aspect-ratio:16/9;
overflow:hidden;
background:#000;
border-radius:12px;
box-shadow:0 10px 25px rgba(0,0,0,0.25);
}

.page-intro-player{
width:100%;
height:100%;
object-fit:contain;
display:block;
}

/* tablet */

@media(max-width:1024px){

.page-intro-video{
max-width:640px;
}

}

/* mobil */

@media(max-width:768px){

.page-intro-video{
max-width:94%;
margin:20px auto;
}

}