/* ═══════════════════════════════════════════════════
   Responsive CSS — Pozitif Roi
   Breakpoints:
     Mobil   : max-width: 767px
     Tablet  : 768px – 1023px
     Desktop : min-width: 1200px
═══════════════════════════════════════════════════ */

/* ── Global (breakpoint dışı) ───────────────────── */
.alert-success { color:#155724; background-color:#d4edda; border-color:#c3e6cb; }
.alert-success hr { border-top-color:#b1dfbb; }
.alert-success .alert-link { color:#0b2e13; }
.alert-danger { color:#721c24; background-color:#f8d7da; border-color:#f5c6cb; }
.alert { position:relative; padding:.3rem 1.25rem; margin-bottom:1rem; border:1px solid transparent; border-radius:.25rem; width:100%; top:-23px !important; }
.linkler li { margin-bottom:10px; }
.linkler li a { color:#fff; }

/* Kurumsal hero arka plan — tüm ekran boyutları */
#page-about .section-hero .background img {
  width: 100% !important;
  height: 100% !important;
  min-width: unset !important;
  min-height: unset !important;
  object-fit: cover !important;
  left: 0 !important;
  bottom: 0 !important;
  -webkit-transform: none !important;
  transform: none !important;
}

/* ═══════════════════════════════════════════════════
   MOBİL — max-width: 767px
═══════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* ── Yardımcı ──────────────────────────────────── */
  .mobildegizle { display:none !important; }

  /* ── Genel arkaplan görselleri ─────────────────── */
  .section .background img,
  .content-wrapper-background img,
  .section-segments .background img { width:100%; max-width:100%; overflow:hidden; }
  .section-segments .image img { max-width:100%; overflow:hidden; }

  /* ── col-md-6 ───────────────────────────────────── */
  .col-md-6 {
    width: 100% !important;
    float: none !important;
    flex: none !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  /* ══════════════════════════════════════════════════
     SORUN 1 — Hero başlık ve buton büyüklüğü
     headline-text: 72px → 36px
     headline-content: 24px → 15px
  ══════════════════════════════════════════════════ */
  #page-home .section-hero .headline-text {
    font-size: 36px !important;
  }
  #page-home .section-hero .headline-content p {
    font-size: 15px !important;
  }
  #page-home .section-hero .item-content .button {
    margin-top: 8px !important;
  }
  #page-home .section-hero .item-content .button .btn {
    font-size: 11px !important;
    padding: 10px 18px !important;
    letter-spacing: 2px !important;
  }

  /* ══════════════════════════════════════════════════
     SORUN 2 — scroll line + slide-navigation + slide-next
     İstenen: [◀ 04 ▶] SOL | [SONRAKİ→|resim] SAĞ — aynı satır
              Bunların ALTINDA scroll çizgisi, merkezde.
     Çözüm:
       - dots-list ve total-count gizle (navigation sola sığsın)
       - navigation ve slide-next aynı bottom değerinde
       - scroll line: left:50% (merkez), bottom:0
  ══════════════════════════════════════════════════ */

  /* Scroll çizgisi: merkez, en altta */
  #page-home .section-hero::before,
  #page-home .section-hero::after {
    left: 50% !important;
    bottom: 0 !important;
  }

  /* navigation + slide-next: aynı satırda, scroll line'ın üstünde */
  #page-home .section-hero .slide-navigation {
    bottom: 100px !important;
  }
  #page-home .section-hero .slide-next {
    bottom: 100px !important;
  }

  /* slide-next önizleme boyutu: scroll line için yer bırak */
  #page-home .section-hero .slide-next .container .wrapper {
    width: 160px !important;
    height: 88px !important;
  }

  /* slide-next başlık/konum yazıları: önizleme altında taşmasın */
  #page-home .section-hero .slide-next .item-title,
  #page-home .section-hero .slide-next .item-content {
    display: none !important;
  }

  /* Navigation compact: sadece oklar + numara kalsın */
  #page-home .section-hero .slide-navigation .dots-list,
  #page-home .section-hero .slide-navigation .total-count {
    display: none !important;
  }
  #page-home .section-hero .slide-navigation .container {
    justify-content: flex-start !important;
  }

  /* ══════════════════════════════════════════════════
     SORUN 3 — Öne Çıkan Projeler: galeri önce, dikey görseller
     HTML'de .left (proje bilgi) önce geliyor; order ile sırayı değiştir.
     Görseller 240px yükseklikte kare göründü → 300px dikey yap.
  ══════════════════════════════════════════════════ */
  .section-projects { padding: 60px 0 120px !important; }

  .section-projects .container {
    flex-direction: column !important;
  }
  .section-projects .container .right {
    order: 1;
    width: 100% !important;
    max-width: 100% !important;
  }
  .section-projects .container .left {
    order: 2;
    width: 100% !important;
    margin-right: 0 !important;
    padding-top: 40px !important;
  }

  /* Dikey portrait görseller; padding-left koruyarak gallery-slide-link görünsün */
  .gallery-slide {
    height: 300px !important;
    padding-left: 46px !important;
    margin-top: 0 !important;
  }
  .gallery-slide-items .item {
    width: 180px !important;
    height: 300px !important;
  }

  /* ══════════════════════════════════════════════════
     SORUN 4 — Hakkımızda: metin + video
     Metin üstte, video tam genişlik bölümün altına sabitlendi.
     padding-bottom = video yüksekliği → metin videoyla örtüşmez.
  ══════════════════════════════════════════════════ */
  .section-about {
    padding: 40px 0 230px !important;
  }
  .section-about .background { position: absolute !important; }
  .section-about .background .left { top: 40px !important; }

  /* Video: display:none kaldırıldı — alt bölge, tam genişlik */
  .section-about .background .right {
    display: block !important;
    position: absolute !important;
    width: 100% !important;
    height: 210px !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
  }

  .section-about .container .content {
    padding: 30px 20px !important;
    max-width: 100% !important;
    display: block !important;
  }
  .section-about .container .content-text {
    width: auto !important;
    max-width: 100% !important;
    font-size: 16px !important;
    line-height: 140% !important;
    left: 0 !important;
    margin-bottom: 20px !important;
  }
  .section-about .container .content .button {
    padding-left: 0 !important;
  }

  /* ══════════════════════════════════════════════════
     SORUN 5 — Zincir Şirketler (section-selected)
     padding-top:250px çok fazla → arka zemin küçük görünüyor.
     block: 920px sabit genişlik → taşıyor.
  ══════════════════════════════════════════════════ */
  .section-selected {
    padding-top: 60px !important;
    margin-top: 0 !important;
  }
  .section-selected .block {
    width: 100% !important;
    padding: 40px 20px 50px !important;
    box-sizing: border-box;
  }
  .section-selected .block-link {
    transform: none !important;
    right: 16px !important;
    top: 20px !important;
  }
  .section-selected .block-link .plus-btn-medium {
    width: 70px !important;
    height: 70px !important;
  }
  .section-selected .block-content .title {
    font-size: 22px !important;
    margin-bottom: 12px !important;
  }
  .section-selected .block-content .subtitle {
    margin-bottom: 25px !important;
  }
  .section-selected .block-content .logo ul {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
  }

  /* ── section-contact-information (İletişim/İK) ─── */
  .section-contact-information {
    padding: 40px 0 40px !important;
    margin-top: 0 !important;
  }
  .section-contact-information .container {
    width: 100% !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
  }
  .section-contact-information .section-title { margin-bottom: 30px !important; }
  .section-contact-information .columns {
    flex-direction: column !important;
    margin-bottom: 30px !important;
    gap: 24px !important;
  }

  /* ── İletişim / İK ─────────────────────────────── */
  #page-contact .section-contact { margin-bottom: 20px !important; }
  /* .tab position:absolute + JS height:0 → harita footer altına düşüyordu */
  #page-contact .tabs-items {
    position: relative !important;
    height: auto !important;
    overflow: visible !important;
  }
  #page-contact .tabs-items .tab {
    position: relative !important;
    top: auto !important; right: auto !important;
    bottom: auto !important; left: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    height: auto !important;
  }
  #page-contact .section-contact { padding-bottom: 40px !important; }
  #page-contact .section-contact .tabs-items .tab .form .left {
    width: 100% !important;
    float: none !important;
    margin-bottom: 30px !important;
  }
  #page-contact .section-contact .tabs-items .tab .form .right {
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  #page-contact iframe { height: 260px !important; }

  /* ── Video Modal ────────────────────────────────── */
  /* Modal overflow:hidden olmadığı için wrapper taşıyor */
  .modal-video {
    overflow: hidden !important;
    align-items: center !important;
  }
  .modal .wrapper {
    width: 100% !important;
    max-width: calc(100vw - 32px) !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    margin: 0 16px !important;
  }
  .modal-video .wrapper {
    width: 100% !important;
    max-width: calc(100vw - 32px) !important;
    margin: 0 16px !important;
  }
  /* iframe 16:9 responsive aspect ratio */
  .modal-video .video-wrapper {
    position: relative !important;
    padding-bottom: 56.25% !important;
    height: 0 !important;
    overflow: hidden !important;
    width: 100% !important;
  }
  .modal-video .video-wrapper iframe {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }

  /* ── Proje Detay (page-buildings-internal) ─────── */

  /* 0: section-hero — building-information sol boşluk (100px → 20px) */
  #page-buildings-internal .section-hero .building-information {
    padding-left: 20px !important;
  }
  #page-buildings-internal .section-hero .building-information .location {
    margin-left: 0 !important;
  }
  #page-buildings-internal .section-hero .building-information .type {
    margin-bottom: 20px !important;
  }
  #page-buildings-internal .section-hero .building-information .location {
    font-size: 22px !important;
  }

  /* 1: section-intro — görsel üstte, metin altta */
  #page-buildings-internal .section-intro { padding: 30px 0 !important; }
  #page-buildings-internal .section-intro::before { display: none !important; }
  #page-buildings-internal .section-intro .container {
    flex-direction: column !important;
    padding: 0 20px !important;
    justify-content: flex-start !important;
  }
  #page-buildings-internal .section-intro .container .left {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    -webkit-transform: none !important;
    transform: none !important;
    width: 100% !important;
    height: 240px !important;
    margin-bottom: 20px !important;
  }
  #page-buildings-internal .section-intro .container .right {
    width: 100% !important;
  }
  #page-buildings-internal .section-intro .content {
    padding: 25px 20px !important;
    box-shadow: none !important;
  }

  /* 2: section-gallery — başlık üstte, galeri altta */
  #page-buildings-internal .section-gallery { padding: 30px 0 50px !important; }
  #page-buildings-internal .section-gallery::before { display: none !important; }
  #page-buildings-internal .section-gallery .dots { display: none !important; }
  #page-buildings-internal .section-gallery .slide {
    flex-direction: column !important;
  }
  #page-buildings-internal .section-gallery .slide-navigation {
    display: none !important;
  }
  #page-buildings-internal .section-gallery .slide-wrapper {
    width: 100% !important;
  }
  #page-buildings-internal .section-gallery .slide-items .item-image {
    height: 260px !important;
  }

  /* 3: section-video — overlap (-315px margin) + beyaz kutu (::before) + container 770px */
  #page-buildings-internal .section-video {
    margin-top: 0 !important;
    padding: 40px 0 !important;
  }
  #page-buildings-internal .section-video::before { display: none !important; }
  #page-buildings-internal .section-video .container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
  }
  #page-buildings-internal .section-video .video { height: 240px !important; }

  /* 4: section-location — bloklar alta inin, başlık küçüsün */
  #page-buildings-internal .section-location { padding: 40px 0 !important; }
  #page-buildings-internal .section-location .top {
    flex-direction: column !important;
    padding: 0 20px !important;
    gap: 16px !important;
  }
  #page-buildings-internal .section-location .top .block {
    max-width: 100% !important;
    width: 100% !important;
  }
  #page-buildings-internal .section-location .top .block-title {
    font-size: 20px !important;
  }
  #page-buildings-internal .section-location .top .block-1 .block-content .address {
    font-size: 13px !important;
  }

  /* ── Projeler (page-opportunities) ─────────────── */
  /* page-description: calc(50% - 115px) → ~80px oluyor, tam genişliğe çek */
  #page-opportunities .section-hero .section-header {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* section-listing: 4 sütun → 2 sütun, taşma önle */
  #page-opportunities .section-listing { margin-top: 0 !important; padding: 40px 0 60px !important; }
  #page-opportunities .section-listing .listing {
    grid-template-columns: repeat(2, 1fr) !important;
    grid-column-gap: 16px !important;
    grid-row-gap: 40px !important;
  }

  /* ── Markalar — sektör kartları ────────────────── */
  #page-selected .section-buildings .main-wrapper { gap: 16px !important; }

  /* section-opportunities: desktop'ta 300px+150px padding var → mobilde gizle */
  .section-opportunities { padding: 30px 0 !important; margin: 0 !important; }

  /* ══════════════════════════════════════════════════
     KURUMSAL SAYFASI (#page-about) — 7 Sorun Düzeltmesi
  ══════════════════════════════════════════════════ */

  /* Sorun 1+2: Hero wrapper padding (100px→20px) + başlık font (48px→28px) */
  #page-about .section-hero { padding-top: 40px !important; }
  #page-about .section-hero .page-title {
    font-size: 28px !important;
    margin-bottom: 16px !important;
  }
  #page-about .section-hero .wrapper { padding: 28px 20px 20px !important; }

  /* Sorun 3: wrapper-background img min-width:100vw → overflow açıyor */
  #page-about .section-hero .wrapper-background img {
    min-width: 100% !important;
    left: 0 !important;
    -webkit-transform: none !important;
    transform: none !important;
  }

  /* wrapper-content subtitle küçült */
  #page-about .section-hero .wrapper-content .subtitle {
    font-size: 18px !important;
    margin-bottom: 24px !important;
  }

  /* Sorun 4: Tanıtım Filmi — padding (300px→100px), dots gizle, video yüksekliği */
  #page-about .section-video .container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
  }
  #page-about .section-video { padding: 50px 0 !important; }
  #page-about .section-video .dots { display: none !important; }
  #page-about .section-video .video { height: 240px !important; }
  #page-about .section-video .section-title {
    font-size: 20px !important;
    margin-bottom: 20px !important;
  }

  /* Sorun 5: Deneyim .background sağda sabit 200px boşluk → kaldır */
  #page-about .section-quality .background { right: 0 !important; }

  /* Sorun 6: .container sabit 640px → tam genişlik */
  #page-about .section-quality .container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
  }

  /* Sorun 7: .dots sabit konumu viewport dışına taşıyor → gizle */
  #page-about .section-quality .dots { display: none !important; }

  /* Genel: section-quality padding + başlık */
  #page-about .section-quality { padding: 50px 0 !important; }
  #page-about .section-quality .section-title { margin-bottom: 30px !important; }
  #page-about .section-quality .section-title .text { font-size: 22px !important; }

  /* section-snd boş bölüm (150px padding) → gizle */
  #page-about .section-snd { display: none !important; }

  /* ══════════════════════════════════════════════════
     FOOTER — turkuaz panel solda dar, lacivert sağda
     "turkuaz dikdörtgenin lacivert üzerine binmiş" stili.
     flex-direction ROW kalıyor, sosyal + logo aynı satırda.
  ══════════════════════════════════════════════════ */
  #main-footer {
    flex-direction: row !important;
    margin-top: 0 !important;
    align-items: stretch !important;
  }

  /* Turkuaz logo paneli: dar, sol kenarda */
  #main-footer .left {
    width: 130px !important;
    min-width: 130px !important;
    flex-shrink: 0 !important;
    padding: 25px 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  #main-footer .left picture,
  #main-footer .left img { max-width: 110px !important; height: auto !important; }

  /* Lacivert içerik: kalan alan */
  #main-footer .right {
    flex-grow: 1 !important;
    min-width: 0 !important;
    margin-top: 0 !important;
    padding: 25px 15px 35px !important;
    overflow: hidden;
  }

  /* Sütun satırları: dikey yığılsın */
  #main-footer .row {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  #main-footer .row:not(:last-child) { margin-bottom: 24px !important; }
  #main-footer .row .column { flex-grow: 0 !important; }
  #main-footer .row .column:not(:last-child) {
    margin-right: 0 !important;
    margin-bottom: 20px !important;
  }
  /* Telefon sütunu iç content: dikey */
  #main-footer .row .column-1 .column-content { flex-direction: column !important; }

  /* 2. satır: sektör logoları + sosyal ikonlar YAN YANA kalsın */
  #main-footer .row:nth-child(2) {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
  }
  #main-footer .row .segments ul {
    flex-wrap: wrap !important;
    gap: 12px !important;
  }
  #main-footer .row .segments .item:not(:last-child) { margin-right: 0 !important; }
}

/* ═══════════════════════════════════════════════════
   TABLET — 768px – 1023px
═══════════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1023px) {

  .col-md-6 {
    width: 50% !important;
    float: left !important;
    box-sizing: border-box;
  }

  #page-contact iframe { height: 350px !important; }

  .section-selected .block {
    width: 100% !important;
    padding: 60px 30px !important;
    box-sizing: border-box;
  }
  .section-selected .block-link {
    transform: none !important;
    right: 20px !important;
  }
}

/* ═══════════════════════════════════════════════════
   GENİŞ DESKTOP — min-width: 1200px
═══════════════════════════════════════════════════ */
@media (min-width: 1200px) {
  #page-contact .section-contact { margin-bottom: 540px !important; }
}