/* ==========================================================================
   ADEM GÜNER - DEDICATED CONDITIONAL MOBILE RESPONSIVE SYSTEM
   Strictly active on screens <= 768px (Mobile & Small Tablets)
   Desktop layout (min-width: 769px) is 100% UNTOUCHED & PROTECTED.
   ========================================================================== */

@media (max-width: 768px) {

  /* 1. Global Viewport Fit & Horizontal Overflow Elimination */
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    position: relative;
    -webkit-overflow-scrolling: touch;
  }

  * {
    box-sizing: border-box;
  }

  /* 2. Immediate Opacity & Elimination of White Blank Screen Flashes on Scroll */
  .fadeinandslideup,
  .fadeinandslideup-on-point,
  .check-in-viewport .fadeinandslideup,
  .check-in-viewport.fadeinandslideup-on-point {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* Tightened Section Padding - Excludes Dedicated 1-Height Flex Sections */
  .ag-ba-section,
  .ag-video-section,
  .ag-recognition-section,
  .ag-archive-section,
  .section-contact-page-form {
    padding-top: 28px !important;
    padding-bottom: 28px !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  /* Subpages First section under fixed header: exact clearance without empty void */
  .section.section-projectpage.section-1,
  .section.section-aboutintro.section-1,
  .section.section-contactpage.section-1 {
    padding-top: 68px !important;
    padding-bottom: 24px !important;
  }

  /* ==========================================================================
     SECTION 1 HERO: Mobile 1-Height Architecture (Tam 1 Ekran Yüksekliği - 100dvh)
     Tüm içerik tek mobil ekrana sığar, aşağıya taşma yapmaz.
     ========================================================================== */
  .section-topbannerhome {
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    padding-top: max(54px, env(safe-area-inset-top)) !important;
    padding-bottom: max(14px, env(safe-area-inset-bottom)) !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    box-sizing: border-box !important;
  }

  /* Dark Gradient Overlay for 100% Crisp Legibility */
  .section-topbannerhome::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 72%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.90) 0%, rgba(0, 0, 0, 0.65) 50%, rgba(0, 0, 0, 0) 100%);
    z-index: 2;
    pointer-events: none;
  }

  .section-topbannerhome .homepage_top_swiper {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1 !important;
  }

  .section-topbannerhome .top-banner-home {
    position: relative !important;
    z-index: 3 !important;
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    gap: 7px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .section-topbannerhome .top-banner-home__heading-wrap {
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    opacity: 1 !important;
  }

  .section-topbannerhome .top-banner-home__heading,
  .section-topbannerhome h1.top-banner-home__heading.h2 {
    font-size: clamp(13.5px, 3.8vw, 17px) !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #FFFFFF !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.95) !important;
  }

  .section-topbannerhome .latest-work {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    opacity: 1 !important;
    width: 100% !important;
  }

  /* Özel Kategorilerimiz - Yatay Kompakt Butonlar (Köşeli) */
  .section-topbannerhome .latest-work-links {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 4px 6px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .section-topbannerhome .latest-work-links > .heading {
    width: 100% !important;
    flex: 0 0 100% !important;
    font-family: "PPFraktionMono", monospace !important;
    font-size: 9px !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    margin: 0 0 2px 0 !important;
    padding: 0 !important;
    border: none !important;
    color: rgba(255, 255, 255, 0.75) !important;
  }

  .section-topbannerhome .latest-work-links .label-style {
    display: inline-flex !important;
    align-items: center !important;
    padding: 4px 8px !important;
    font-family: "PPFraktionMono", monospace !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    letter-spacing: 0.03em !important;
    text-transform: uppercase !important;
    border-radius: 0px !important; /* KÖŞELİ */
    background: rgba(18, 18, 18, 0.75) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    color: #FFFFFF !important;
    white-space: nowrap !important;
    line-height: 1 !important;
    margin: 0 !important;
  }

  /* Öne Çıkan Çalışmalar - Yatay Swipe Kartlar (Köşeli & 1-Height) */
  .section-topbannerhome .latest-work-slider {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .section-topbannerhome .latest-work-slider > .heading {
    font-family: "PPFraktionMono", monospace !important;
    font-size: 9px !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    margin: 0 0 2px 0 !important;
    padding: 0 !important;
    border: none !important;
    color: rgba(255, 255, 255, 0.75) !important;
  }

  .section-topbannerhome .latest-work-slides-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .section-topbannerhome .latest-work-slides-wrap::-webkit-scrollbar {
    display: none !important;
  }

  .section-topbannerhome .latest-work-slides {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    width: max-content !important;
  }

  .section-topbannerhome .latest-work-slides ul {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
  }

  .section-topbannerhome .latest-work-slides li {
    display: block !important;
    flex: 0 0 auto !important;
    width: min(220px, 66vw) !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .section-topbannerhome .latest-work-slide {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 5px 8px !important;
    background: rgba(18, 18, 18, 0.8) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    border-radius: 0px !important; /* KÖŞELİ */
    text-decoration: none !important;
    box-sizing: border-box !important;
  }

  .section-topbannerhome .latest-work-slide .media {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    margin: 0 !important;
    overflow: hidden !important;
    border-radius: 0px !important;
    flex: 0 0 38px !important;
  }

  .section-topbannerhome .latest-work-slide .media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  .section-topbannerhome .latest-work-slide .content {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .section-topbannerhome .latest-work-slide .content p.heading {
    font-family: "PPFraktionMono", monospace !important;
    font-size: 8px !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    margin: 0 0 2px 0 !important;
    padding: 0 !important;
    color: #B9B36D !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .section-topbannerhome .latest-work-slide .content h3.h5 {
    font-family: "PPFraktionMono", monospace !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #FFFFFF !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* ==========================================================================
     SECTION 2: Animated Intro (200vh Scroll Maratonunu Mobilde Kompakt Yap)
     ========================================================================== */
  .animated-intro {
    height: auto !important;
    min-height: auto !important;
  }

  /* ==========================================================================
     SECTION 2: About / Intro - 100dvh (1 Height)
     ========================================================================== */
  .section-intro {
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    padding: max(54px, env(safe-area-inset-top)) 14px max(18px, env(safe-area-inset-bottom)) !important;
    box-sizing: border-box !important;
    background-color: var(--color-background-grey) !important;
  }

  .section-intro .animated-intro {
    height: auto !important;
    min-height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .section-intro .animated-intro .content {
    position: relative !important;
    top: auto !important;
    margin: 0 !important;
  }

  .section-intro .animated-intro .content .word {
    opacity: 1 !important;
  }

  .section-intro .homepage-intro__intro {
    padding: 0 !important;
    margin: 0 0 4px 0 !important;
    font-size: clamp(12.5px, 3.6vw, 15px) !important;
    line-height: 1.3 !important;
    max-width: 100% !important;
    font-weight: 500 !important;
  }

  .section-intro .homepage-intro__heading {
    padding-top: 4px !important;
    margin: 2px 0 4px !important;
    font-size: 9.5px !important;
    display: flex !important;
    justify-content: space-between !important;
    gap: 4px !important;
  }

  .section-intro .homepage-intro__heading span {
    margin-right: 0 !important;
  }

  .section-intro .homepage-intro__heading:before {
    width: 100% !important;
  }

  .section-intro .spread {
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    justify-content: space-between !important;
  }

  .section-intro .homepage-intro__body p {
    font-size: clamp(9.5px, 2.8vw, 11px) !important;
    line-height: 1.35 !important;
    margin-bottom: 3px !important;
  }

  .section-intro .homepage-intro__body .buttons {
    display: flex !important;
    gap: 6px !important;
    margin-top: 3px !important;
  }

  .section-intro .homepage-intro__body .buttons .btn-with-arrow {
    flex: 1 !important;
    padding: 6px 8px !important;
    font-size: 9.5px !important;
    border-radius: 0px !important;
    text-align: center !important;
    justify-content: center !important;
  }

  .section-intro .homepage-intro__media {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: 24vh !important;
    overflow: hidden !important;
    margin: 2px 0 0 0 !important;
    border-radius: 0px !important;
  }

  .section-intro .homepage-intro__media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 0px !important;
  }

  /* ==========================================================================
     SECTION 3: Efor, Radisson Blu & Kurumsal Spread - 100dvh (1 Height)
     Dark luxury gradient overlay + Atakum Villa 4K + Crisp White Typography
     ========================================================================== */
  .section-spread.layout-background-media {
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    padding: max(56px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom)) !important;
    box-sizing: border-box !important;
    background-color: #0c0c0c !important;
    color: #FFFFFF !important;
  }

  .section-spread.layout-background-media .media {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1 !important;
    opacity: 0.55 !important;
  }

  .section-spread.layout-background-media .media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  .section-spread.layout-background-media::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(12, 12, 12, 0.45) 0%, rgba(12, 12, 12, 0.88) 60%, rgba(12, 12, 12, 0.98) 100%);
    z-index: 2;
    pointer-events: none;
  }

  .section-spread.layout-background-media .column_1,
  .section-spread.layout-background-media .column_2 {
    position: relative !important;
    z-index: 3 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .section-spread.layout-background-media .column_1 .spread__heading {
    font-size: clamp(15px, 4.4vw, 19px) !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    color: #FFFFFF !important;
    max-width: 100% !important;
    margin: 0 0 8px 0 !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9) !important;
  }

  .section-spread.layout-background-media .column_2 .spread__body p {
    font-size: clamp(10.5px, 3.1vw, 12px) !important;
    line-height: 1.45 !important;
    color: rgba(255, 255, 255, 0.9) !important;
    margin: 0 0 6px 0 !important;
  }

  /* ==========================================================================
     SECTION 4: İlkadım Showroom Spread - 100dvh (1 Height)
     ========================================================================== */
  .section-spread.layout-media-left-23 {
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    padding: max(56px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom)) !important;
    box-sizing: border-box !important;
    background-color: #FFFFFF !important;
    color: #141414 !important;
  }

  .section-spread.layout-media-left-23 .column_1 {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
  }

  .section-spread.layout-media-left-23 .spread__heading {
    font-size: clamp(15px, 4.4vw, 19px) !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    color: #141414 !important;
    margin: 0 0 4px 0 !important;
  }

  .section-spread.layout-media-left-23 .lead {
    font-size: 11px !important;
    line-height: 1.35 !important;
    color: #444444 !important;
    margin: 0 0 6px 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  .section-spread.layout-media-left-23 .spread__body p {
    font-size: 10.5px !important;
    line-height: 1.35 !important;
    color: #333333 !important;
    margin: 0 0 4px 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  .section-spread.layout-media-left-23 .column_2 {
    width: 100% !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: 38vh !important;
    margin: 6px 0 0 0 !important;
    overflow: hidden !important;
  }

  .section-spread.layout-media-left-23 .column_2 .media {
    width: 100% !important;
    height: 100% !important;
    border-radius: 0px !important;
  }

  .section-spread.layout-media-left-23 .column_2 .media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 0px !important;
  }

  /* ==========================================================================
     SECTION 5: Gerçek Projelerimiz & Referanslarımız - 100dvh (1 Height)
     Yatay Swipeable Swiper + Başlık & Filtreler Tek Ekranda
     ========================================================================== */
  .section-projectscroll {
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    padding: max(56px, env(safe-area-inset-top)) 14px max(20px, env(safe-area-inset-bottom)) !important;
    box-sizing: border-box !important;
    background-color: var(--color-background-grey) !important;
  }

  .section-projectscroll .project-scroll-intro {
    flex: 0 0 auto !important;
    margin: 0 0 6px 0 !important;
    padding: 0 !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
  }

  .section-projectscroll .project-scroll__heading {
    font-size: clamp(15px, 4.3vw, 18.5px) !important;
    line-height: 1.25 !important;
    margin: 0 !important;
    font-weight: 700 !important;
  }

  .section-projectscroll .project-scroll__footer.lead {
    font-size: 11px !important;
    line-height: 1.35 !important;
    margin: 0 !important;
    max-width: 100% !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  .section-projectscroll .buttons {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 5px !important;
    margin: 3px 0 !important;
    padding: 0 0 2px 0 !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .section-projectscroll .buttons::-webkit-scrollbar {
    display: none !important;
  }

  .section-projectscroll .buttons .label-style {
    flex: 0 0 auto !important;
    padding: 4px 8px !important;
    font-family: "PPFraktionMono", monospace !important;
    font-size: 10px !important;
    letter-spacing: 0.03em !important;
    text-transform: uppercase !important;
    border-radius: 0px !important;
    background: #FFFFFF !important;
    color: #141414 !important;
    border: 1px solid rgba(20, 20, 20, 0.3) !important;
    white-space: nowrap !important;
    margin: 0 !important;
  }

  .section-projectscroll .project-scroll-intro .btn-with-arrow {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-top: 2px !important;
    padding: 6px 12px !important;
    font-size: 10px !important;
    font-family: "PPFraktionMono", monospace !important;
    border-radius: 0px !important;
    background: #141414 !important;
    color: #FFFFFF !important;
    border: 1px solid #141414 !important;
    width: 100% !important;
    text-align: center !important;
  }

  .section-projectscroll .project-cards {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .section-projectscroll .project-scroll-cards-swiper {
    width: 100% !important;
    height: 100% !important;
    max-height: 48vh !important;
    overflow: visible !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .section-projectscroll .project-scroll-cards-swiper .swiper-wrapper {
    height: 100% !important;
    display: flex !important;
    align-items: stretch !important;
  }

  .section-projectscroll .project-scroll-cards-swiper .swiper-slide {
    height: 100% !important;
    flex: 0 0 auto !important;
    box-sizing: border-box !important;
  }

  .section-projectscroll .project-card {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    background: #FFFFFF !important;
    border: 1px solid rgba(20, 20, 20, 0.2) !important;
    border-radius: 0px !important;
    padding: 8px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  .section-projectscroll .project-card .heading.h4 {
    font-size: 11.5px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    margin: 0 0 6px 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    height: 29px !important;
  }

  .section-projectscroll .project-card .media-wrap {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    width: 100% !important;
    padding-bottom: 0 !important;
    position: relative !important;
    overflow: hidden !important;
  }

  .section-projectscroll .project-card .media-wrap .media {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 0px !important;
  }

  .section-projectscroll .project-card .media-wrap .media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 0px !important;
  }

  .section-projectscroll .project-card .media-wrap .btn-with-arrow {
    opacity: 1 !important;
    position: absolute !important;
    bottom: 6px !important;
    right: 6px !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    background: rgba(18, 18, 18, 0.88) !important;
    color: #FFFFFF !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    border-radius: 0px !important;
    padding: 4px 8px !important;
    font-size: 9.5px !important;
    font-family: "PPFraktionMono", monospace !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
  }

  /* ==========================================================================
     SECTION 6: Kurumsal Referans Feature Banner (100dvh - 1 Height)
     ========================================================================== */
  .section-featureproject {
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 24px 14px !important;
    box-sizing: border-box !important;
  }

  .section-featureproject .media-link__content {
    position: relative !important;
    top: auto !important;
    width: 100% !important;
    margin: 0 !important;
  }

  .section-featureproject .media-link__content .media-link__heading {
    font-size: clamp(17px, 5.2vw, 22px) !important;
    line-height: 1.25 !important;
    margin-bottom: 10px !important;
  }

  .section-featureproject .media-link__content .media-link__body {
    font-size: 12px !important;
    line-height: 1.5 !important;
  }

  /* ==========================================================================
     SECTION 7: Contact CTA Section (100dvh - 1 Height)
     ========================================================================== */
  .section-cta {
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    padding: max(56px, env(safe-area-inset-top)) 14px max(24px, env(safe-area-inset-bottom)) !important;
    box-sizing: border-box !important;
  }

  /* Subpages 1-Height Hero Sections (about, company, etc.) */
  .section-topbanner,
  .section-medialink {
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  /* Eliminate 9em margin inside CTA section on mobile */
  .section-cta .content {
    margin: 0 !important;
  }

  .section-cta .block-heading {
    margin-top: 0 !important;
    margin-bottom: 14px !important;
  }

  .section-cta .left,
  .section-cta .cta-intro {
    margin-top: 14px !important;
    margin-bottom: 16px !important;
  }

  .section-cta .home-cta-lead {
    margin-bottom: 20px !important;
  }

  .section-contact-page-form .section-title {
    margin-bottom: 16px !important;
  }

  .project-page-block__intro {
    margin-bottom: 14px !important;
  }

  .project-page-body {
    margin-top: 12px !important;
  }

  /* 3. Mobile Top Navigation Header Fix (Köşeli & Mimari Tasarım) */
  .mobile-top {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 9990 !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.28);
  }

  .mobile-top .top {
    padding-top: max(8px, env(safe-area-inset-top)) !important;
    padding-bottom: 6px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    background-color: #0d0d0d !important;
    height: auto !important;
    min-height: 36px !important;
  }

  .mobile-top .top .marque {
    flex: 1 1 auto !important;
    width: auto !important;
    font-size: 10px !important;
    margin-right: 10px !important;
  }

  .mobile-top .top .contact-us {
    flex: 0 0 auto !important;
    width: auto !important;
    font-size: 10.5px !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
  }

  .mobile-top .top .contact-us i {
    width: 1.2em !important;
    height: 0.8em !important;
  }

  /* Solid Background for Mobile Nav to Stop Page Content Bleeding Through */
  .mobile-top .mobile-nav {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 8px 12px !important;
    background: rgba(20, 20, 20, 0.96) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
    height: 52px !important;
  }

  .mobile-top .mobile-nav .logo {
    width: 44px !important;
    height: auto !important;
    flex: 0 0 auto !important;
    filter: invert(1) !important;
  }

  .mobile-top .mobile-nav .logo img {
    width: 44px !important;
    height: auto !important;
    display: block !important;
  }

  .mobile-top .mobile-nav .top-buttons {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    width: auto !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
  }

  /* Mobile Top Buttons - Köşeli / Sharp Architectural */
  .mobile-top .mobile-nav .top-buttons .btn {
    min-width: unset !important;
    padding: 7px 14px !important;
    font-family: "PPFraktionMono", monospace !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    border-radius: 0px !important; /* KÖŞELİ */
    height: 35px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    background-color: #141414 !important;
    color: #FFFFFF !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
  }

  .mobile-top .mobile-nav .top-buttons .btn.projects-btn {
    background-color: #1f8e4d !important;
    color: #FFFFFF !important;
    border: 1px solid #1f8e4d !important;
  }

  /* 4. Offscreen Fullscreen Navigation Drawer: Zero Horizontal Scroll Leaks */
  .mobile-nav-full {
    visibility: hidden !important;
    pointer-events: none !important;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.4s !important;
    transform: translateX(100%) !important;
    z-index: 99999 !important;
  }

  .menu-open .mobile-nav-full {
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateX(0%) !important;
  }

  /* 5. Typography on Mobile - Compact, Readable & No Overflow */
  .h1.block-heading,
  h1.block-heading {
    font-size: clamp(21px, 6.2vw, 27px) !important;
    line-height: 1.25 !important;
  }

  .h2.block-heading,
  h2.block-heading {
    font-size: clamp(17px, 5.2vw, 23px) !important;
    line-height: 1.25 !important;
  }

  .block-heading > span {
    padding: 4px 8px !important;
    margin: 2px 2px !important;
    border-radius: 0px !important; /* KÖŞELİ */
  }

  .lead,
  p.lead,
  .project-page-block__intro {
    font-size: 13.5px !important;
    line-height: 1.55 !important;
  }

  /* 6. Projects Page: Category Filter Buttons - Köşeli & Mimari */
  .project-page-body .vertical-nav-wrap {
    margin-bottom: 16px !important;
  }

  .project-page-body .vertical-nav {
    width: 100% !important;
  }

  .project-page-body .vertical-nav .change-category {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 6px !important;
    padding-bottom: 6px !important;
    margin: 8px 0 0 0 !important;
  }

  .project-page-body .vertical-nav .change-category::-webkit-scrollbar {
    display: none !important;
  }

  .project-page-body .vertical-nav .change-category li {
    flex: 0 0 auto !important;
    margin: 0 !important;
  }

  .project-page-body .vertical-nav .change-category li a {
    display: inline-block !important;
    padding: 8px 14px !important;
    background: #FFFFFF !important;
    color: #141414 !important;
    border: 1px solid rgba(20, 20, 20, 0.35) !important;
    border-radius: 0px !important; /* KÖŞELİ / ARCHITECTURAL RECTANGULAR */
    font-family: "PPFraktionMono", monospace !important;
    font-size: 11px !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    transition: all 0.15s ease !important;
  }

  .project-page-body .vertical-nav .change-category li.current a {
    background: #141414 !important;
    color: #FFFFFF !important;
    border-color: #141414 !important;
    font-weight: 700 !important;
  }

  /* Main Featured Projects List */
  .project-page-body .main-project-gallery[data-style=grid-style] {
    margin-left: 0 !important;
    border-left: none !important;
    padding-left: 0 !important;
  }

  .project-page-body .main-project-gallery[data-style=grid-style] ul li {
    width: 100% !important;
    margin-bottom: 20px !important;
  }

  .project-page-body .main-project-gallery[data-style=grid-style] h4 {
    font-size: 15.5px !important;
    line-height: 1.35 !important;
    margin: 10px 0 14px !important;
  }

  .project-page-body .main-project-gallery[data-style=grid-style] .label-style {
    border-radius: 0px !important; /* KÖŞELİ */
    font-size: 10px !important;
    padding: 3px 7px !important;
  }

  /* 7. Interactive Before / After Sliders on Mobile */
  .ag-ba-section {
    padding: 32px 14px !important;
  }

  .ag-ba-header {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-bottom: 20px !important;
  }

  .ag-ba-header__eyebrow {
    font-size: 10.5px !important;
  }

  .ag-ba-header__title {
    font-size: 19px !important;
    line-height: 1.25 !important;
  }

  .ag-ba-header__desc {
    font-size: 12px !important;
    line-height: 1.5 !important;
  }

  .ag-ba-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .ag-ba-card {
    border-radius: 0px !important; /* KÖŞELİ */
  }

  .ag-ba-viewport {
    aspect-ratio: 16 / 11 !important;
  }

  /* Badges - Köşeli & Compact */
  .ag-ba-badge {
    font-size: 9.5px !important;
    padding: 4px 8px !important;
    top: 8px !important;
    letter-spacing: 0.04em !important;
    border-radius: 0px !important; /* KÖŞELİ */
  }

  .ag-ba-badge--before {
    left: 8px !important;
  }

  .ag-ba-badge--after {
    right: 8px !important;
  }

  .ag-ba-handle {
    width: 38px !important;
    height: 38px !important;
    font-size: 11px !important;
  }

  .ag-ba-info {
    padding: 14px 12px !important;
    gap: 8px !important;
  }

  .ag-ba-meta {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
  }

  .ag-ba-cat {
    font-size: 10px !important;
  }

  .ag-ba-toggles {
    gap: 4px !important;
  }

  /* Toggle Buttons - Köşeli & Mimari */
  .ag-ba-toggle-btn {
    font-size: 10px !important;
    padding: 4px 8px !important;
    border-radius: 0px !important; /* KÖŞELİ */
    font-family: "PPFraktionMono", monospace !important;
    text-transform: uppercase !important;
    background: transparent !important;
    border: 1px solid rgba(185, 179, 109, 0.45) !important;
    color: inherit !important;
  }

  .ag-ba-toggle-btn.active {
    background: #B9B36D !important;
    color: #141414 !important;
    border-color: #B9B36D !important;
    font-weight: 700 !important;
  }

  .ag-ba-info h3 {
    font-size: 15.5px !important;
    line-height: 1.35 !important;
  }

  .ag-ba-info p {
    font-size: 11.5px !important;
    line-height: 1.5 !important;
  }

  /* 8. 4K Videos Section on Mobile */
  .ag-video-section {
    padding: 32px 14px !important;
  }

  .ag-video-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    margin-top: 18px !important;
  }

  .ag-video-card {
    border-radius: 0px !important; /* KÖŞELİ */
    margin-bottom: 0 !important;
  }

  .ag-video-card--featured {
    grid-column: span 1 !important;
  }

  .ag-video-body {
    padding: 14px 12px !important;
  }

  .ag-video-body h3 {
    font-size: 15.5px !important;
    line-height: 1.35 !important;
  }

  .ag-video-body p {
    font-size: 11.5px !important;
  }

  .ag-video-brand-overlay {
    bottom: 38px !important;
    font-size: 9px !important;
    padding: 3px 7px !important;
    border-radius: 0px !important; /* KÖŞELİ */
  }

  /* 9. Samsun'da Tanınırlık (Recognition Section) */
  .ag-recognition-section {
    padding: 32px 14px !important;
  }

  .ag-recognition-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    margin-top: 18px !important;
  }

  .ag-recognition-card {
    border-radius: 0px !important; /* KÖŞELİ */
  }

  .ag-recognition-card__body {
    padding: 12px 12px !important;
  }

  .ag-recognition-card__body h3 {
    font-size: 15.5px !important;
  }

  /* 10. 108+ Photo Archive: 2-Column App Grid on Mobile (Köşeli Butonlar) */
  .ag-archive-section {
    padding: 32px 14px 56px !important;
  }

  .ag-archive-filter-bar {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 6px !important;
    margin: 12px 0 18px !important;
    padding-bottom: 6px !important;
  }

  .ag-archive-filter-bar::-webkit-scrollbar {
    display: none !important;
  }

  /* Archive Filter Buttons - Köşeli & Mimari */
  .ag-archive-filter-btn {
    flex: 0 0 auto !important;
    padding: 7px 12px !important;
    font-family: "PPFraktionMono", monospace !important;
    font-size: 10.5px !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    border-radius: 0px !important; /* KÖŞELİ / RECTANGULAR */
    background: #FFFFFF !important;
    color: #141414 !important;
    border: 1px solid rgba(20, 20, 20, 0.3) !important;
  }

  .ag-archive-filter-btn.active {
    background: #141414 !important;
    color: #FFFFFF !important;
    border-color: #141414 !important;
    font-weight: 700 !important;
  }

  .ag-archive-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  .ag-archive-item {
    aspect-ratio: 1 / 1 !important;
    border-radius: 0px !important; /* KÖŞELİ */
  }

  .ag-archive-caption {
    padding: 16px 8px 6px !important;
    font-size: 10px !important;
    line-height: 1.3 !important;
  }

  .ag-archive-caption span {
    font-size: 8.5px !important;
    margin-bottom: 2px !important;
  }

  .ag-archive-loadmore-wrap {
    margin-top: 20px !important;
  }

  .ag-archive-loadmore-btn {
    width: 100% !important;
    padding: 12px 16px !important;
    font-family: "PPFraktionMono", monospace !important;
    font-size: 11.5px !important;
    letter-spacing: 0.06em !important;
    border-radius: 0px !important; /* KÖŞELİ */
    background-color: #141414 !important;
    color: #FFFFFF !important;
    border: 1.5px solid #141414 !important;
  }

  /* 11. Direct Contact Hub Cards on Mobile - Köşeli & Mimari */
  .ag-direct-hub,
  .ag-direct-hub__grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    margin-top: 16px !important;
  }

  .ag-direct-card {
    padding: 16px 14px 14px !important;
    gap: 10px !important;
    border-radius: 0px !important; /* KÖŞELİ */
    border: 1.5px solid rgba(20, 20, 20, 0.28) !important;
  }

  .ag-direct-card__value {
    font-size: 17px !important;
  }

  .ag-direct-card__sub {
    font-size: 11.5px !important;
    line-height: 1.5 !important;
  }

  .ag-direct-card__cta {
    padding: 11px 14px !important;
    font-size: 11px !important;
    border-radius: 0px !important; /* KÖŞELİ */
    margin-top: 6px !important;
  }

  /* 12. Contact Details in contact.html */
  .section-contact-page-form .contact-details {
    width: 100% !important;
    margin-bottom: 16px !important;
  }

  .section-contact-page-form .nf-form-cont {
    width: 100% !important;
  }

  /* ==========================================================================
     15. SUBPAGE: About & Company Pages Responsive System
     ========================================================================== */
  .section-aboutintro {
    padding: 24px 14px !important;
    box-sizing: border-box !important;
  }

  .about-intro__heading {
    margin: 10px 0 !important;
    font-size: clamp(16px, 4.8vw, 21px) !important;
    line-height: 1.3 !important;
  }

  .about-intro__body {
    padding-top: 8px !important;
    padding-bottom: 12px !important;
  }

  .about-intro__body p {
    font-size: 12px !important;
    line-height: 1.5 !important;
    margin-bottom: 8px !important;
  }

  .about-intro__media {
    margin: 12px 0 0 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  .about-intro__media img {
    width: 100% !important;
    height: 200px !important;
    object-fit: cover !important;
    border-radius: 0px !important;
  }

  /* Feature Grid (4 Avantajımız / Şeffaf Maliyet) */
  .section-featuregrid {
    padding: 24px 14px !important;
    box-sizing: border-box !important;
  }

  .section-featuregrid .header {
    margin-top: 0 !important;
    padding-right: 0 !important;
  }

  .section-featuregrid .header .h2 {
    font-size: clamp(16px, 4.8vw, 21px) !important;
    line-height: 1.25 !important;
    margin-bottom: 8px !important;
  }

  .section-featuregrid .lead {
    font-size: 12px !important;
    line-height: 1.45 !important;
    margin-bottom: 12px !important;
  }

  .feature-grid__items {
    padding-top: 10px !important;
  }

  .feature-grid__items ul {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  .feature-grid__items ul li {
    border-top: 1px solid rgba(20, 20, 20, 0.2) !important;
    border-right: none !important;
    padding-top: 10px !important;
    width: 100% !important;
  }

  .feature-grid__items .block-heading {
    margin-bottom: 6px !important;
    font-size: 13px !important;
  }

  .feature-grid__items p {
    font-size: 11.5px !important;
    line-height: 1.45 !important;
    margin: 0 !important;
  }

  /* Journal / Hizmet Alanları Kartları */
  .section-journalcards {
    padding: 24px 14px !important;
    box-sizing: border-box !important;
  }

  .section-journalcards .journal-cards__intro {
    padding-bottom: 10px !important;
    width: 100% !important;
  }

  .section-journalcards .journal-cards__intro .content {
    position: relative !important;
    top: auto !important;
    width: 100% !important;
  }

  .section-journalcards .journal-cards__intro .content > :first-child {
    margin-top: 0 !important;
    margin-bottom: 8px !important;
  }

  .section-journalcards .journal-cards__heading {
    max-width: 100% !important;
    font-size: clamp(16px, 4.8vw, 21px) !important;
    line-height: 1.25 !important;
  }

  .section-journalcards .journal-cards__footer.lead {
    font-size: 12px !important;
    line-height: 1.45 !important;
    max-width: 100% !important;
  }

  .section-journalcards .journal-cards__grid {
    width: 100% !important;
    padding: 0 !important;
    border-left: none !important;
  }

  .journal-card-wrap {
    border-top: 1px solid rgba(20, 20, 20, 0.18) !important;
  }

  .journal-card {
    padding: 8px 0 !important;
    margin: 4px 0 !important;
  }

  .journal-card .media {
    width: 100% !important;
    padding-bottom: 50% !important;
    margin-bottom: 8px !important;
    border-radius: 0px !important;
  }

  .journal-card .media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 0px !important;
  }

  .journal-card .h4 {
    font-size: 14px !important;
    line-height: 1.3 !important;
    margin: 4px 0 !important;
  }

  .journal-card p {
    font-size: 11.5px !important;
    line-height: 1.45 !important;
  }

  /* ==========================================================================
     16. SUBPAGE: Contact Page Responsive System
     ========================================================================== */
  .section-contactpage {
    padding-top: max(56px, env(safe-area-inset-top)) !important;
    padding-bottom: 20px !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    box-sizing: border-box !important;
  }

  .section-contactpage .contact-page__lead {
    font-size: clamp(15px, 4.4vw, 19px) !important;
    line-height: 1.3 !important;
    max-width: 100% !important;
    margin-bottom: 8px !important;
  }

  .section-contactpage .contact-page__paragraph {
    font-size: 12px !important;
    line-height: 1.45 !important;
    max-width: 100% !important;
    margin-bottom: 12px !important;
  }

  .section-contactpage .block-heading {
    font-size: clamp(20px, 6vw, 26px) !important;
    line-height: 1.2 !important;
    margin-top: 8px !important;
  }

  .section-contact-page-form {
    padding: 24px 14px !important;
    box-sizing: border-box !important;
  }

  .section-contact-page-form .contact-details {
    margin-bottom: 16px !important;
  }

  .section-contact-page-form .contact-details h5 {
    font-size: 11px !important;
    margin-bottom: 2px !important;
    letter-spacing: 0.05em !important;
  }

  .section-contact-page-form .contact-details p {
    font-size: 12.5px !important;
    margin-bottom: 12px !important;
  }

  /* ==========================================================================
     17. SUBPAGE: Projects Page Responsive System
     ========================================================================== */
  .section-projectpage {
    padding-top: max(56px, env(safe-area-inset-top)) !important;
    padding-bottom: 20px !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    box-sizing: border-box !important;
  }

  .section-projectpage .top h1.block-heading {
    font-size: clamp(18px, 5.5vw, 24px) !important;
    line-height: 1.2 !important;
    margin-bottom: 8px !important;
  }

  .section-projectpage .top p.lead {
    font-size: 12px !important;
    line-height: 1.45 !important;
    margin-bottom: 10px !important;
  }

  /* iOS Safari Auto-Zoom Prevention on Inputs */
  input, select, textarea {
    font-size: 16px !important;
    border-radius: 0px !important;
  }

  /* 13. Mobile Footer Adjustments */
  .main-footer,
  .section.section-footer {
    padding: 28px 14px 76px !important;
  }

  .main-footer .footer-links {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
  }

  .main-footer .logo {
    width: 100% !important;
    max-width: 200px !important;
    margin: 16px 0 !important;
  }

  /* 14. Mobile Sticky Bottom Action Bar - Köşeli & Mimari */
  .ag-mobile-thumb-bar {
    display: flex !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9999 !important;
    background: rgba(18, 18, 18, 0.96) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.14) !important;
    padding: 8px 10px !important;
    padding-bottom: max(8px, env(safe-area-inset-bottom)) !important;
    gap: 8px !important;
    box-shadow: 0 -6px 22px rgba(0, 0, 0, 0.35) !important;
  }

  .ag-mobile-thumb-bar__btn {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    height: 44px !important;
    border-radius: 0px !important; /* KÖŞELİ / RECTANGULAR */
    font-family: "PPFraktionMono", monospace !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
  }

  .ag-mobile-thumb-bar__btn--whatsapp {
    background-color: #1f8e4d !important;
    color: #FFFFFF !important;
    border: 1px solid #1f8e4d !important;
  }

  .ag-mobile-thumb-bar__btn--call {
    background-color: #141414 !important;
    color: #FFFFFF !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
  }

  body {
    padding-bottom: 60px !important;
  }

  .ag-floating-contact {
    display: none !important;
  }
}