/* ===================================================
   REFERANSLAR PAGE - PIXEL PERFECT STYLES
   =================================================== */

   .refs-page-body { background: #FFFFFF; overflow-x: hidden; }

   /* Hero Section - Hizmetler Mockup'ı ile Birebir Uyumlu */
   .about-hero-section,
   .services-hero-section,
   .refs-hero-adjustment {
       height: 320px !important;
       position: relative;
       width: 100%;
       max-width: 1920px;
       margin: 0 auto;
       background: #FFFFFF;
   }
   
   .about-hero-container,
   .services-hero-container {
       position: relative;
       width: 100%;
       height: 100%;
   }
   
   .refs-hero-bg,
   .services-hero-section.refs-hero-adjustment .services-hero-bg {
       position: absolute;
       width: 1880px;
       height: 304px;
       left: calc(50% - 1880px / 2);
       top: 70px;
       margin: 0 auto;
       box-sizing: border-box;
   }
   
   .about-hero-bg,
   .services-hero-bg,
   .refs-hero-bg {
       width: 100%;
       height: 100%;
       border-radius: 16px;
       background-size: cover;
       background-position: center;
       background-repeat: no-repeat;
       display: flex;
       justify-content: center;
       align-items: center;
       overflow: hidden;
       box-sizing: border-box;
       position: relative;
   }
   
   .about-hero-bg::before,
   .services-hero-bg::before,
   .refs-hero-bg::before {
       content: '';
       position: absolute;
       inset: 0;
       background: linear-gradient(0deg, rgba(0, 0, 0, 0.67) 0%, rgba(0, 0, 0, 0) 130.05%);
       z-index: 1;
       pointer-events: none;
   }
   
   /* Hero Title */
   .about-hero-title,
   .services-hero-title,
   .refs-hero-title {
       font-family: 'Radio Canada Big';
       font-weight: 700;
       font-size: 46px;
       line-height: 100%;
       letter-spacing: 0.5%;
       color: #FFFFFF;
       margin: 0;
       text-align: left;
       width: 1460px;
       max-width: calc(100% - 40px);
       padding: 0 20px;
       box-sizing: border-box;
       position: relative;
       z-index: 5;
   }
   
   /* Social Icons - Banner İçinde Sağda */
   .hero-social-frame {
       display: flex;
       flex-direction: row;
       align-items: center;
       gap: 15px;
       position: absolute;
       right: 40px;
       bottom: 30px;
       z-index: 10;
   }
   
   .hero-social-circle {
       width: 42px;
       height: 42px;
       border: 1px solid rgba(255, 255, 255, 0.1);
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       transition: background 0.3s ease;
       background: rgba(255, 255, 255, 0.05);
   }
   
   .hero-social-circle:hover {
       background: #658004;
   }
   
   .hero-social-circle img {
       width: 20px;
       height: 20px;
   }
   
   @media (max-width: 1880px) {
       .about-hero-container,
       .services-hero-container {
           width: 100%;
           left: auto;
       }
   
       .refs-hero-bg,
       .services-hero-section.refs-hero-adjustment .services-hero-bg {
           width: calc(100% - 40px);
           max-width: 1880px;
           left: 20px;
           right: 20px;
       }
   }
   
   /* İçerik Düzeni */
   .refs-main-section,
   .custom-page-container {
       padding-top: 80px;
       padding-bottom: 100px;
   }
   
   /* Banner ile logo grid'i arasında nefes (çok yapışmasın) */
   body .custom-page-container.refs-page-content {
       padding-top: 96px !important;
   }
   
   .refs-main-section .container-1460,
   .custom-page-container .container {
       width: 1460px;
       max-width: calc(100% - 40px);
       margin: 0 auto;
       box-sizing: border-box;
   }
   
   .page-content-padding {
       padding: 20px 0;
   }
   
   /* Referanslar: dört yönde 20px nefes */
   .refs-page-inner.page-content-padding {
       box-sizing: border-box;
   }
   
   /* Logo alanı — çerçevesiz; kartlar da kutusuz */
   .refs-logos-panel {
       padding: 0;
       box-sizing: border-box;
       background: transparent;
       border: none;
       border-radius: 0;
   }
   
   /* Kart Grid Düzeni — 2 kolon, kartlar arası boşluk yok (tek blok gibi) */
   .refs-pixel-grid {
       display: grid;
       grid-template-columns: repeat(2, minmax(0, 1fr));
       align-items: start;
       gap: 0;
       row-gap: 0;
       column-gap: 0;
       justify-content: initial;
   }
   
   .refs-grid-item {
       margin: 0;
       padding: 0;
   }
   
   .refs-grid-item.is-hidden {
       display: none !important;
   }
   
   /* Legacy markup safety: if old col classes remain, let grid control width */
   .refs-pixel-grid > [class*="col-"] {
       width: auto !important;
       max-width: none !important;
       flex: initial !important;
   }
   
   /* Referans Kartları — sabit en-boy kutusu yok; görsel doğal yükseklikte (ara beyaz şerit oluşmaz) */
   .ref-card,
   .reference-card {
       box-sizing: border-box;
       width: 100%;
       min-height: 0;
       height: auto;
       background: transparent;
       border: none;
       border-radius: 0;
       display: block;
       padding: 0;
       transition: opacity 0.25s ease;
       margin-bottom: 0;
       box-shadow: none;
   }
   
   .ref-card:hover,
   .reference-card:hover {
       opacity: 0.92;
   }
   
   .reference-card-link {
       text-decoration: none;
       display: block;
       margin: 0;
       padding: 0;
   }
   
   .ref-img-wrap,
   .reference-card-image {
       width: 100%;
       display: block;
       line-height: 0;
   }
   
   .ref-img-wrap img,
   .reference-card-image img,
   .reference-card-img {
       width: 100%;
       height: auto;
       max-width: 100%;
       display: block;
       object-fit: contain;
   }
   
   .reference-card-placeholder {
       display: block;
       width: 100%;
       min-height: 140px;
       border-radius: 8px;
       background: repeating-linear-gradient(
           -45deg,
           #eceee9,
           #eceee9 8px,
           #f5f6f3 8px,
           #f5f6f3 16px
       );
   }
   
   /* "Daha Fazla" butonu — grid ile alt görseller arasında gereksiz boşluk olmasın */
   .refs-load-more {
       display: flex;
       justify-content: center;
       margin-top: 28px;
   }
   
   .btn-more-refs {
       min-width: 224px;
       height: 62px;
       background: #658004;
       border: none;
       border-radius: 90px;
       font-family: 'Urbanist', sans-serif;
       font-weight: 600;
       font-size: 20px;
       line-height: 1;
       color: #FFFFFF;
       cursor: pointer;
       transition: opacity 0.3s;
       display: inline-flex;
       align-items: center;
       justify-content: center;
       padding: 0 28px;
       white-space: nowrap;
   }
   
   .btn-more-refs:hover {
       opacity: 0.9;
   }
   
   .ref-card.hidden {
       display: none;
   }
   
   /* ===================================================
      1500px BREAKPOINT - Ana sayfa ile hizalama
      =================================================== */
   
   @media (max-width: 1500px) {
       .refs-main-section .container-1460,
       .custom-page-container .container {
           max-width: 100%;
       }
   }
   
   /* ===================================================
      MOBİL RESPONSIVE (Diğer sayfalarla uyumlu)
      =================================================== */
   
   @media (max-width: 992px) {
       .refs-page-body .figma-header {
           top: 0 !important;
       }
   
       .refs-page-body .mobile-sidebar.active {
           transform: translateX(0) !important;
           visibility: visible !important;
           margin: 0 !important;
           padding: 0 !important;
           top: 0 !important;
           left: auto !important;
           right: 0 !important;
       }
       
       /* Overlay Fix */
       .sidebar-overlay {
           top: -50px !important;
       }
   
       .hero-section.refs-hero-adjustment,
       .services-hero-section.refs-hero-adjustment {
           width: 100% !important;
           max-width: 100% !important;
           height: auto !important;
           min-height: auto !important;
           padding-top: 0 !important;
           padding-bottom: 0 !important;
           margin: 0 !important;
           margin-bottom: 0 !important;
       }
   
       .services-hero-section.refs-hero-adjustment .services-hero-container {
           width: 100% !important;
           max-width: 100% !important;
           left: 0 !important;
           top: 0 !important;
           transform: none !important;
       }
   
       .refs-hero-bg {
           height: 200px;
           width: 100%;
           left: 0;
           top: 0;
           border-radius: 0;
       }
   
       .refs-hero-title {
           font-family: 'Radio Canada Big' !important;
           font-weight: 700 !important;
           font-size: 32px !important;
           text-align: left !important;
           width: 100% !important;
           max-width: 100% !important;
           left: 0 !important;
           position: relative !important;
           z-index: 2;
           margin: 0 !important;
           padding: 0 24px !important;
           top: 0 !important;
       }
   
       /* Banner Type1: .services-hero-container — gap style.css GLOBAL MOBILE */
       .hero-container .hero-social-frame,
       .services-hero-section.refs-hero-adjustment .services-hero-container > .hero-social-frame {
           position: absolute;
           left: 50%;
           transform: translateX(-50%);
           right: auto;
           top: 100px;
           width: auto;
           margin: 0;
           justify-content: center;
           z-index: 10;
       }
   
       .hero-container .hero-social-circle {
           width: 40px;
           height: 40px;
       }
   
       .hero-container .hero-social-circle img {
           width: 20px;
           height: 20px;
       }
   
       .refs-main-section,
       .custom-page-container {
           padding-top: 40px;
       }
   
       .refs-main-section .container-1460 {
           width: 100% !important;
           max-width: 100% !important;
           margin: 0 auto;
           padding: 0 20px;
       }
   
       .refs-pixel-grid {
           grid-template-columns: minmax(0, 1fr);
           gap: 0;
           row-gap: 0;
           column-gap: 0;
           max-width: 100%;
       }
   
       .ref-card,
       .reference-card {
           padding: 0;
       }
   
       .refs-logos-panel {
           padding: 0;
       }
   
   }
   
   @media (max-width: 480px) {
       .refs-page-inner.page-content-padding {
           padding: 20px 16px;
       }
   
       .refs-logos-panel {
           padding: 0;
       }
   
       .refs-hero-title { 
           font-family: 'Radio Canada Big' !important;
           font-weight: 700 !important;
           font-size: 26px !important; 
       }
   
       .hero-container .hero-social-frame,
       .services-hero-section.refs-hero-adjustment .services-hero-container > .hero-social-frame {
           top: 100px;
       }
   
       .hero-container .hero-social-circle {
           width: 36px;
           height: 36px;
           padding: 8px;
       }
   
       .hero-container .hero-social-circle img {
           width: 18px;
           height: 18px;
       }
   
       .refs-pixel-grid {
           grid-template-columns: minmax(0, 1fr);
       }
   
       .btn-more-refs {
           width: calc(100% - 40px);
           max-width: 300px;
           min-width: 0;
           height: 56px;
           font-size: 18px;
       }
   }