
@font-face {
      font-family: Inter;
      font-weight: 400;
      font-style: normal;
      font-display: swap;
      src: url("/panel/home/fonts/inter_n4.b2a3f24c19b4de56e8871f609e73ca7f6d2e2bb9.woff2") format("woff2"),
           url("/panel/home/fonts/inter_n4.af8052d517e0c9ffac7b814872cecc27ae1fa132.woff") format("woff");
    }
                     
          @font-face {
      font-family: Inter;
      font-weight: 700;
      font-style: normal;
      font-display: swap;
      src: url("/panel/home/fonts/inter_n7.02711e6b374660cfc7915d1afc1c204e633421e4.woff2") format("woff2"),
           url("/panel/home/fonts/inter_n7.6dab87426f6b8813070abd79972ceaf2f8d3b012.woff") format("woff");
    }
    
        
          :root {
          
            --font-heading-family: Inter, sans-serif;
            --font-heading-style: normal;
            --font-heading-style: capitalize;
            --font-heading-weight: bold;
            --h1-font-size: 50px;
            --h2-font-size: 42px;
            --h3-font-size: 34px;
            --h4-font-size: 26px;
            --h5-font-size: 22px;
            --h6-font-size: 18px;
            --heading-letter-spacing:0px;
            --heading-line-height:1.3;
    
    
            --font-body-family: Inter, sans-serif;
            --font-body-style: normal;
            --font-body-weight: 400;
            --font-body-weight-bold: 700;
            --body-letter-spacing:0px;
            --body-line-height:1.6;
            --body_font-size:16px;
    
             
            --color-base-text: 0, 0, 0;
            --color-outline-text: 0, 0, 0;
         
            --color-shadow: 0, 0, 0;
            --color-base-background-1: 27, 27, 27;
            --color-base-background-2: 37, 37, 37;
            --color-base-background-3: 37, 37, 37;
            --color-base-background-4: 70, 70, 70;
            --color-base-background-5: 255, 255, 255;
            --color-base-solid-button-labels: 45, 255, 40;
            --color-base-outline-button-labels: 255, 255, 255;
            --color-base-accent-1: 255, 255, 255;
            --color-base-accent-2: 255, 255, 255;
            --color-base-accent-3: 193, 193, 193;
            --color-base-accent-4: 255, 255, 255;
            --color-base-accent-5: 27, 27, 27;
            --color-overlay: 27, 27, 27;
            --color-text: 193, 193, 193;
            --color-base-link: 190, 190, 190;
            --color-border: 255, 255, 255;
            --payment-terms-background-color: #1b1b1b;
    
          
            --gradient-base-background-1: #1b1b1b;
            --gradient-base-background-2: #252525;
            --gradient-base-background-3: #252525;
            --gradient-base-background-4: linear-gradient(90deg, rgba(70, 70, 70, 0.9), rgba(193, 193, 193, 1) 49.71%, rgba(70, 70, 70, 0.9) 99.46%);
            --gradient-base-background-5: #ffffff;
    
    
            --media-padding: px;
            --media-border-opacity: 0.0;
            --media-border-width: 0px;
            --media-radius: 0px;
            --media-shadow-opacity: 0.0;
            --media-shadow-horizontal-offset: 0px;
            --media-shadow-vertical-offset: 0px;
            --media-shadow-blur-radius: 0px;
    
            --page-width: 164rem;
            --page-full-width-spacing: 8%;
            --page-width-margin: 0rem;
            
            --card-image-padding: 0.0rem;
            --card-corner-radius: 0.0rem;
            --card-text-alignment: left;
            --card-border-width: 0.0rem;
            --card-border-opacity: 1.0;
            --card-shadow-opacity: 0.0;
            --card-shadow-horizontal-offset: 0.0rem;
            --card-shadow-vertical-offset: 0.0rem;
            --card-shadow-blur-radius: 0.0rem;
    
            --badge-corner-radius: 0.0rem;
    
        
            --popup-background: 27, 27, 27;
            --popup-border-width: 1px;
            --popup-border-opacity: 0.15;
            --popup-corner-radius: 0px;
            --popup-shadow-opacity: 0.25;
            --popup-shadow-horizontal-offset: 0px;
            --popup-shadow-vertical-offset: 0px;
            --popup-shadow-blur-radius: 15px;
    
            --drawer-border-width: 0px;
            --drawer-border-opacity: 0.45;
            --drawer-shadow-opacity: 0.0;
            --drawer-shadow-horizontal-offset: 0px;
            --drawer-shadow-vertical-offset: 4px;
            --drawer-shadow-blur-radius: 0px;
    
            --spacing-sections-desktop: 0px;
            --spacing-sections-mobile: 0px;
    
            --grid-desktop-vertical-spacing: 40px;
            --grid-desktop-horizontal-spacing: 40px;
            --grid-mobile-vertical-spacing: 20px;
            --grid-mobile-horizontal-spacing: 20px;
            --sidebar-width:400px;
    
          
            --text-boxes-border-opacity: 1.0;
            --text-boxes-border-width: 0px;
            --text-boxes-radius: 0px;
            --text-boxes-shadow-opacity: 0.0;
            --text-boxes-shadow-horizontal-offset: 0px;
            --text-boxes-shadow-vertical-offset: 0px;
            --text-boxes-shadow-blur-radius: 0px;
            --button_style:none;
            --button_font-family:var(--font-body-family);
            --button-height:44px;
            --buttons-radius: 22px;
            --buttons-radius-outset: 22px;
            --buttons-border-width: 0px;
            --buttons-border-opacity: 0.0;
            --buttons-shadow-opacity: 1.0;
            --buttons-shadow-horizontal-offset: 0px;
            --buttons-shadow-vertical-offset: 0px;
            --buttons-shadow-blur-radius: 15px;
            --buttons-border-offset: 0.3px;
    
            --inputs-height:50px;
            --inputs-radius: 0px;
            --inputs-border-width: 1px;
            --inputs-border-opacity: 0.1;
            --inputs-shadow-opacity: 0.05;
            --inputs-shadow-horizontal-offset: 0px;
            --inputs-margin-offset: 0px;
            --inputs-shadow-vertical-offset: 0px;
            --inputs-shadow-blur-radius: 15px;
            --inputs-radius-outset: 0px;
    
            --variant-pills-radius: 10px;
            --variant-pills-border-width: 1px;
            --variant-pills-border-opacity: 0.3;
            --variant-pills-shadow-opacity: 0.0;
            --variant-pills-shadow-horizontal-offset: 0px;
            --variant-pills-shadow-vertical-offset: 0px;
            --variant-pills-shadow-blur-radius: 0px;
          }
    
          #preloader, .dT_loading {
          position: fixed;
          display:block;
          z-index: 2000;
          width: 100%;
          height: 100%;
          top:0;
          bottom:0;
          left:0;
          right: 0;
          margin: auto;
          
          background-repeat: no-repeat;
          background-position:center;
          background-color: rgb(var(--color-background));
          }
        .alert-overlay-wrapper {position:relative; width: 100%; height: 100%;}
          .alert-overlay{
          display: none; 
          position: fixed; 
          z-index: 1; 
          padding-top: 100px; 
          left: 0;
          top: 0;
          width: 100%; 
          height: 100%; 
          overflow: auto; 
          background-color: rgb(var(--color-base-accent-1)); 
          background-color:rgba(var(--color-base-accent-1), 0.4); 
          } 
          .alert-overlay .main-content {
          position: absolute;
          left: 50%;
          right: 0;
          top: 50%;
          background-color:var(--gradient-background);    
          bottom: 0;
          z-index: 99;
          width: 500px;
          height: 200px;
          padding: 10px;
          transform: translate(-50%, -50%);
          align-items: center;
          display: flex;
          flex-direction: column;
          justify-content: center;
          }
        .closebtn {
        margin-left: 15px;
        color: var(--gradient-base-accent-1);
        font-weight: bold;
        float: right;
        font-size: 22px;
        line-height: 20px;
        cursor: pointer;
        transition: 0.3s;
        position:absolute;
        right:10px;
        top:10px;  
        }
        .closebtn svg{width:1.8rem; height:1.8rem;}
        .closebtn:hover {
        color: var(--gradient-base-background-3);
        }
        .overflow-hidden.filter-clicked .shopify-section-header-sticky { z-index: 1;}
          html{
                scroll-behavior: smooth;
          }
@media (max-width: 749px) {
  #Banner-template--24949130854675__a05f89ae-e114-4160-bb77-f8781a0f6d1b .banner__product-overlay {
    display: none !important;
  }
}
/* Mobilde hero ürün görselini yeniden konumlandır ve küçült */
@media (max-width: 749px) {
  /* Ürün overlay boyut ve konumu */
  #Banner-template--24949130854675__a05f89ae-e114-4160-bb77-f8781a0f6d1b .banner__product-overlay {
    width: 70vw !important;      /* ekranın %70’i kadar */
    height: auto !important;     /* oranı koru */
    left: 50% !important;
    top: 65% !important;         /* banner ortalarına yakın */
    margin-left: 0 !important;
    transform: translate(-50%, -50%) !important;
  }
  /* Offitec Genel Bilgi başlığını sadece mobilde gizle */
@media (max-width: 749px) {
  #Banner-template--24949130854675__a05f89ae-e114-4160-bb77-f8781a0f6d1b h2.banner__heading {
    display: none !important;
  }
}


  /* Kartlar ekrana daha iyi otursun */
  #Banner-template--24949130854675__a05f89ae-e114-4160-bb77-f8781a0f6d1b .banner__top-cards {
    max-width: 100vw;
    padding: 0 16px 8px;
    margin-top: -98px;
  }
}
/* Grid banner ikililerini mobilde alt alta göster */
@media (max-width: 749px) {
  .grid-banner-section.two-column {
    display: flex;
    flex-direction: column;
  }

  .grid-banner-section.two-column .grid-banner-wrapper {
    width: 100%;
  }
}
/* 1) Bu section'ın default padding'ini sıfırla */
        .section-template--24949130854675__59465bb7-49b9-4f59-b0bc-ea2da5042c89-padding{
          padding-top: 0 !important;
        }
        
        /* 2) Bölümü yukarı çek + stacking ver */
        #shopify-section-template--24949130854675__59465bb7-49b9-4f59-b0bc-ea2da5042c89{
          position: relative;
          z-index: 3;             /* Banner altındaki gradient z-index:2 idi; bunun üstüne çık */
          margin-top: -120px;     /* Masaüstü için ne kadar yukarı istiyorsan büyüt/küçült */
        }
        
        /* 3) Kapsayıcıların kesmesini engelle */
        .page-width,
        .number-counter,
        .number-counter .number-counter-section-wrapper,
        .number-counter .number-counter-wrapper{
          overflow: visible !important;
        }
        
        /* Tablet/Masaüstü ayrı ince ayar */
        @media (min-width: 750px){
          #shopify-section-template--24949130854675__59465bb7-49b9-4f59-b0bc-ea2da5042c89{
            margin-top: -160px;  /* daha da yukarı istersen arttır */
          }
        }
        
        /* Mobilde daha az bindir (ekran küçük) */
        @media (max-width: 749px){
          #shopify-section-template--24949130854675__59465bb7-49b9-4f59-b0bc-ea2da5042c89{
            margin-top: -60px;
          }
        }
        
        /* İsteğe bağlı: Banner altındaki gradient çok bastırıyorsa kısaltabilirsin */
        @media (min-width: 990px){
          .slide-main-section:before{
            height: 140px; /* 210px'ti; gerekirse daha da düşür */
          }
        }


       @media screen and (max-width: 749px) {
                  #Banner-template--24949130854675__a05f89ae-e114-4160-bb77-f8781a0f6d1b::before,
                  #Banner-template--24949130854675__a05f89ae-e114-4160-bb77-f8781a0f6d1b .banner__media::before,
                  #Banner-template--24949130854675__a05f89ae-e114-4160-bb77-f8781a0f6d1b:not(.banner--mobile-bottom) .banner__content::before {
                    padding-bottom: 49.4791666667%;
                    content: '';
                    display: block;
                  }
                }
                @media screen and (min-width: 750px) {
                  #Banner-template--24949130854675__a05f89ae-e114-4160-bb77-f8781a0f6d1b::before,
                  #Banner-template--24949130854675__a05f89ae-e114-4160-bb77-f8781a0f6d1b .banner__media::before {
                    padding-bottom: 49.4791666667%;
                    content: '';
                    display: block;
                  }
                }
                
                .section-template--24949130854675__a05f89ae-e114-4160-bb77-f8781a0f6d1b-padding {
                  margin-top: 0; margin-bottom: 0;
                }
                @media screen and (min-width: 750px) {
                  .section-template--24949130854675__a05f89ae-e114-4160-bb77-f8781a0f6d1b-padding {
                    margin-top: 0; margin-bottom: 0;
                  }
                }
                
                /* Demo loader vs. ile ilgili olan kısım, dokunmuyoruz */
                @media screen and (min-width: 990px){
                  .slide-main-section { position: relative; }
                  .slide-main-section:before{
                    content:""; position:absolute; width:100%; height:210px; bottom:0;
                    background: linear-gradient(180deg, transparent 0%, #1b1b1b 100%);
                    z-index:2; pointer-events:none;
                  }
                }
                .next-thumb-preview .main-slider{
                  background:transparent url('//greenshift-road.myshopify.com/cdn/shop/t/12/assets/loading-icon.gif?v=163282550740301235861754053713') center center no-repeat;
                  height: 100vh; overflow: hidden;
                }
                .next-thumb-preview .thumbnail-slider{ height:60vh; overflow:hidden; }
                .next-thumb-preview .banner, .next-thumb-preview .desktop-slider, .next-thumb-preview .thumbnail-slider{ visibility:hidden; }
                .next-thumb-preview .slick-initialized{ background:none; height:auto; overflow:auto; }
                .next-thumb-preview .slick-initialized .banner,
                .next-thumb-preview .slick-initialized .desktop-slider,
                .next-thumb-preview .thumbnail-slider.slick-initialized{ visibility:visible; }
                
                .banner{ position: relative; }
                .banner__media{ position: relative; z-index: 1; }        /* arka plan fotoğrafı */
                .banner__content{ position: relative; z-index: 4; }      /* başlık/metin/buton */
                .banner__product-overlay{
                  position:absolute; left:54%; top:68%;
                  transform: translate(-50%,-50%);
                  /* scroll animasyonu kullansan da default güvenli değerler: */
                  --scale: 1; --ty: 0px; --opacity: 1;
                  transform: translate(-50%, -50%) translateY(var(--ty)) scale(var(--scale));
                  opacity: var(--opacity);
                  z-index: 8;                                            /* ÜRÜN: fotoğraf ve içerik üstünde */
                  pointer-events: none;
                }
                
                /* ---- ÜST 3 KART ---- */
                .banner__top-cards{
                  position: absolute; left:50%; transform: translateX(-50%);
                  top: clamp(72px, 10vh, 120px);
                  width: min(1200px, 92vw);
                  z-index: 10;                  /* kartlar ürünün de üstünde (istersen 6 yapıp ürün üstte bırak) */
                  display: grid; grid-template-columns: repeat(3, 1fr);
                  gap: clamp(14px, 2vw, 24px);
                  margin-top: 21px;
                  pointer-events: none;
                }
                .banner__card{
                  pointer-events: auto;
                  border-radius: 22px;
                  padding: clamp(16px, 2.4vw, 28px);
                  background: rgba(255,255,255,0.08);
                  border: 1px solid rgba(255,255,255,0.18);
                  backdrop-filter: blur(10px);
                  -webkit-backdrop-filter: blur(10px);
                  color:#fff;
                  box-shadow: 0 10px 30px rgba(0,0,0,.25);
                  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
                }
                .banner__card:hover{ transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,.35); background: rgba(255,255,255,0.10); }
                .banner__card h3{ margin:0 0 8px; font-size: clamp(18px, 1.6vw, 22px); line-height:1.25; font-weight:700; }
                .banner__card p{ margin:0 0 16px; font-size: clamp(13px, 1.2vw, 15px); line-height:1.5; color: rgba(255,255,255,.85); }
                
                /* Butonlar */
                .btn-ghost, .btn-solid{
                  display:inline-flex; align-items:center; justify-content:center;
                  height:40px; padding:0 16px; border-radius:999px;
                  font-size:14px; font-weight:600; text-decoration:none;
                  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s;
                  border:1px solid rgba(255,255,255,.35);
                }
                .btn-ghost{ color:#fff; background:transparent; }
                .btn-ghost:hover{ background: rgba(255,255,255,.12); }
                .btn-solid{ color:#111; background:#fff; border-color:#fff; }
                .btn-solid:hover{ background:#eaeaea; transform: translateY(-1px); }
                
                /* Tablet */
                @media (max-width: 1024px){
                  .banner__top-cards{ grid-template-columns: 1fr 1fr; }
                }
                
                /* ---- Mobil: kartlar görselin ÜSTÜNDE, yatay kayar ---- */
                @media (max-width: 720px){
                  .banner{ position: relative; }
                  .banner__top-cards{
                    position: absolute; z-index: 10;
                    left:50%; transform: translateX(-50%);
                    top: var(--cards-top, clamp(56px, 12vh, 120px));
                    width: 100vw; max-width: 100%;
                    padding: 0 16px 8px;
                
                    display:flex; gap:12px; overflow-x:auto;
                    overscroll-behavior-x: contain;
                    -webkit-overflow-scrolling: touch;
                    scroll-snap-type: x mandatory;
                    pointer-events: auto;
                  }
                  .banner__top-cards::-webkit-scrollbar{ display:none; }
                  .banner__card{
                    flex:0 0 86%; scroll-snap-align:start; scroll-snap-stop:always;
                    border-radius: 18px; padding:16px;
                  }
                  .banner__card h3{ font-size:18px; } .banner__card p{ font-size:14px; }
                
                  /* Görsel ve ürün z-indexleri mobilde de doğru kalsın */
                  .banner__media{ z-index:1; }
                  .banner__product-overlay{ z-index:8; } /* ürün kartların altında kalsın istersen 6 yap */
                }
                  .drawer {
          visibility: hidden;
        }
      .cart-group{
          display: flex;
          align-items: center;
          flex-direction: row;
          justify-content: space-between;
      }
        .cart-drawer .cart-item ul.discounts.list-unstyled .discounts__discount{ display: none; }