@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&display=swap");

 :root {
   --sg-primary: #2dc8a0;
   --sg-primary-rgb: 45, 200, 160;
   --sg-primary-hover: #24b088;
   --sg-primary-dark: #1e9e7a;
   --sg-primary-light: #4db896;

   --sg-dark: #1a1d29;
   --sg-dark-alt: #2d3548;
   --sg-dark-blue: #0d2847;

   --sg-navbar-from: #1a2d25;
   --sg-navbar-to: #2d4840;
   --sg-molekul-bg: #1a4d38;

   --sg-overlay-dark: rgba(80, 150, 120, 0.4);
   --sg-overlay-black: rgba(0, 0, 0, 0.12);

   --sg-overlay-dark-darker: rgba(40, 75, 60, 0.6);
   --sg-overlay-black-darker: rgba(0, 0, 0, 0.32);

   --sg-white: #fff;
   --sg-gray-50: #f5f5f7;
   --sg-gray-100: #f8f9fa;
   --sg-gray-200: #e9ecef;
   --sg-gray-300: #dee2e6;
   --sg-gray-500: #6c757d;
   --sg-footer-dark: #0a294c;
   --sg-footer-muted: #cbd2db;

   --sg-white-90: rgba(255, 255, 255, 0.9);
   --sg-white-25: rgba(255, 255, 255, 0.25);
   --sg-white-20: rgba(255, 255, 255, 0.2);
   --sg-white-10: rgba(255, 255, 255, 0.1);
   --sg-white-08: rgba(255, 255, 255, 0.08);
   --sg-white-faded: #ffffff8f;
   --sg-primary-alpha-06: rgba(var(--sg-primary-rgb), 0.06);
   --sg-primary-alpha-15: rgba(var(--sg-primary-rgb), 0.15);
   --sg-primary-alpha-20: rgba(var(--sg-primary-rgb), 0.2);

   --sg-black-alpha-075: rgba(0, 0, 0, 0.075);
   --sg-black-alpha-20: rgba(0, 0, 0, 0.2);
   --sg-black-alpha-25: rgba(0, 0, 0, 0.25);
   --sg-black-alpha-30: rgba(0, 0, 0, 0.3);
   --sg-black-alpha-35: rgba(0, 0, 0, 0.35);
   --sg-black-alpha-80: rgba(0, 0, 0, 0.8);
   --sg-white-30: rgba(255, 255, 255, 0.3);
   --sg-white-40: rgba(255, 255, 255, 0.4);
   --sg-white-60: rgba(255, 255, 255, 0.6);

   --bs-primary: var(--sg-primary);
   --bs-primary-rgb: var(--sg-primary-rgb);

   --sg-nav-accent: #4fe0b4;
   --sg-nav-dark: #223d47;

   --swiper-navigation-size: 30px;
 }

 * {
   font-family: "IBM Plex Sans", sans-serif;
 }

 html {
   scrollbar-gutter: stable;
   scroll-behavior: smooth;
 }

 .navbar-supergaz {
   --bs-navbar-padding-y: 0;
   min-height: 100px;
   max-height: 100px;
   height: 100px;
   padding-top: 0;
   padding-bottom: 0;
   background: linear-gradient(90deg, rgba(34, 61, 71, 0.8) 0%, rgba(83, 244, 197, 0.4) 100%) !important;
   backdrop-filter: blur(5px);
   box-shadow: none;
   border-bottom: none;
   transition: background 0.6s ease, box-shadow 0.6s ease;
   z-index: 1030;
 }

 @media (min-width: 992px) {

   .navbar-supergaz>.container,
   .navbar-supergaz .navbar-brand,
   .navbar-supergaz .navbar-toggler,
   .navbar-supergaz .navbar-collapse {
     height: 100px;
     min-height: 100px;
   }

   .navbar-supergaz .navbar-nav,
   .navbar-supergaz .nav-with-indicator,
   .navbar-supergaz .nav-item,
   .navbar-supergaz .nav-link,
   .navbar-supergaz .lang-dropdown,
   .navbar-supergaz .lang-dropdown .lang-btn {
     height: 100%;
   }

   .navbar-supergaz .navbar-nav-actions {
     min-height: 100px;
     display: flex;
     align-items: center;
     gap: 0.75rem;
     margin-left: 0.75rem;
   }

   .navbar-supergaz .nav-login-wrap,
   .navbar-supergaz .navbar-nav-actions .lang-dropdown {
     height: 100%;
     display: flex;
     align-items: center;
   }

   .navbar-supergaz .nav-login-wrap .nav-login-btn,
   .navbar-supergaz .navbar-nav-actions .lang-dropdown .lang-btn {
     display: flex;
     align-items: center;
     justify-content: center;
   }
 }

 .navbar-supergaz .container {
   display: flex;
   align-items: center;
 }

 .navbar-supergaz .navbar-collapse {
   align-items: center;
 }

 .navbar-supergaz .navbar-brand {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 0;
   font-weight: 700;
   letter-spacing: 1px;
   transition: transform 0.6s ease, color 0.6s ease;
 }

 .navbar-supergaz .nav-link {
   white-space: nowrap;
 }

 .navbar-supergaz .navbar-brand:hover {
   transform: scale(1.05);
   color: var(--sg-primary) !important;
 }

 .navbar-supergaz .navbar-brand img {
   height: 70px !important;
   object-fit: contain;
 }

 .navbar-supergaz .navbar-brand-text {
   font-size: 0.85rem;
   letter-spacing: 0.5px;
 }

 .navbar-supergaz .nav-search-form {
   align-items: stretch;
   gap: 0;
 }

 .navbar-supergaz .nav-search-form .form-control {
   background: var(--sg-white);
   border: none;
   border-radius: 8px 0 0 8px;
   padding: 0.5rem 1rem;
   min-width: 180px;
   box-shadow: none;
 }

 .navbar-supergaz .nav-search-form .form-control::placeholder {
   color: var(--sg-gray-500);
 }

 .navbar-supergaz .nav-search-form .btn-search {
   background: var(--sg-nav-dark);
   border: 1px solid var(--sg-nav-accent);
   color: var(--sg-white);
   border-radius: 0 8px 8px 0;
   padding: 0.5rem 0.85rem;
 }

 .navbar-supergaz .nav-search-form .btn-search:hover {
   background: var(--sg-dark-alt);
   border-color: var(--sg-nav-accent);
   color: var(--sg-white);
 }

 .nav-search-wrap {
   position: relative;
 }

 .nav-search-results {
   position: absolute;
   top: 100%;
   left: 0;
   right: 0;
   margin-top: 4px;
   max-height: 320px;
   overflow-y: auto;
   display: none;
   padding: 0;
   border-radius: 8px;
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
   border: 1px solid var(--sg-gray-300);
 }

 .nav-search-results.show {
   display: block;
 }

 .nav-search-item {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   padding: 0.6rem 1rem;
   white-space: normal;
   border-bottom: 1px solid var(--sg-gray-200);
   color: var(--sg-dark);
 }

 .nav-search-item:last-child {
   border-bottom: none;
 }

 .nav-search-item:hover {
   background: var(--sg-primary-alpha-06);
   color: var(--sg-molekul-bg);
 }

 .nav-search-item-cat {
   font-size: 0.7rem;
   color: var(--sg-gray-500);
   text-transform: uppercase;
   letter-spacing: 0.5px;
 }

 .nav-search-item-name {
   font-weight: 600;
   font-size: 0.9rem;
 }

 .nav-search-empty {
   font-size: 0.875rem;
   color: var(--sg-gray-500);
 }

 .nav-with-indicator {
   position: relative;
 }

 #nav_slide_hover,
 .nav-indicator {
   position: absolute;
   bottom: 0;
   left: 0;
   width: 0;
   height: 3px;
   background: var(--sg-nav-accent);
   transition: width 0.6s ease, margin-left 0.6s ease;
   pointer-events: none;
   margin: 0;
   padding: 0;
   list-style: none;
 }

 .navbar-supergaz .nav-link {
   position: relative;
   display: flex;
   align-items: center;
   padding: 0 20px !important;
   color: white !important;
   margin: 0 0.15rem;
   transition: color 0.6s ease;
 }

 .navbar-supergaz .nav-link::after {
   display: none;
 }

 .navbar-supergaz .nav-link:hover,
 .navbar-supergaz .nav-link.active {
   color: var(--sg-nav-accent) !important;
 }

 .navbar-supergaz .dropdown-menu {
   border: 1px solid rgba(0, 0, 0, 0.06);
   border-radius: 12px;
   box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06);
   padding: 0.5rem 0;
   transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
   background: var(--sg-white);
 }

 .navbar-supergaz .dropdown-item {
   padding: 0.6rem 1.25rem;
   transition: background 0.2s ease, padding-left 0.2s ease;
 }

 .navbar-supergaz .dropdown-item:hover {
   background: linear-gradient(90deg,
       var(--sg-primary-alpha-15) 0%,
       transparent 100%);
 }

 .dropdown-mega-menu {
   left: 50% !important;
   right: auto !important;
   transform: translateX(-50%);
   min-width: max-content;
   max-width: 95vw;
   padding: 1.25rem 1.75rem !important;
   margin-top: -4px;
   padding-top: calc(1.25rem + 4px) !important;
 }

 .full-menu.products {
   display: flex;
   flex-wrap: wrap;
   gap: 1.5rem 2.25rem;
   list-style: none;
   margin: 0;
   padding: 0;
 }

 .full-menu.products>li {
   flex: 1 1 170px;
   min-width: 170px;
 }

 .full-menu.products .menu-title {
   display: block;
   font-weight: 600;
   color: var(--sg-dark);
   padding-bottom: 0.5rem;
   margin-bottom: 0.5rem;
   border-bottom: 2px solid var(--sg-primary);
   font-size: 0.95rem;
   transition: color 0.2s ease;
 }

 .full-menu.products .menu-title:hover {
   color: var(--sg-primary);
 }

 .full-menu.products .products-menu {
   list-style: none;
   margin: 0;
   padding: 0;
 }

 .full-menu.products .products-menu li {
   margin: 0;
 }

 .full-menu.products .menu-item {
   display: block;
   padding: 0.4rem 0;
   padding-left: 0.5rem;
   margin-left: -0.5rem;
   margin-right: -0.5rem;
   border-radius: 6px;
   color: var(--sg-dark-alt);
   font-size: 0.875rem;
   text-decoration: none;
   transition: color 0.2s ease, background 0.2s ease, padding-left 0.2s ease;
 }

 .full-menu.products .menu-item:hover {
   color: var(--sg-primary);
   background: var(--sg-primary-alpha-06);
   padding-left: 0.75rem;
 }

 @media (max-width: 991px) {
   .navbar-supergaz .container {
     flex-wrap: wrap;
   }

   .navbar-supergaz {
     min-height: 64px;
     max-height: none;
     height: auto;
     padding-top: 0.5rem;
     padding-bottom: 0.5rem;
   }

   .navbar-supergaz .navbar-brand img {
     height: 48px !important;
   }

   .navbar-supergaz .nav-search-form {
     margin-bottom: 0.5rem;
     width: 100%;
   }

   .navbar-supergaz .navbar-toggler {
     padding: 0.5rem 0.75rem;
     font-size: 1.1rem;
   }

   .navbar-supergaz .navbar-collapse {
     margin-top: 0.75rem;
     padding: 1rem 0;
     max-height: min(70vh, 450px);
     overflow-y: auto;
     -webkit-overflow-scrolling: touch;
     background: rgba(26, 45, 37, 0.95);
     border-radius: 8px;
     margin-left: -0.75rem;
     margin-right: -0.75rem;
     padding-left: 1rem;
     padding-right: 1rem;
   }

   #nav_slide_hover,
   .navbar-supergaz .nav-indicator {
     display: none !important;
   }

   .navbar-supergaz .nav-link {
     padding: 0.75rem 1rem !important;
     margin: 0.15rem 0;
     min-height: 44px;
     align-items: center;
   }

   .navbar-supergaz .navbar-nav {
     margin-right: 0;
     margin-left: 0;
   }

   .navbar-supergaz .nav-item {
     border-bottom: 1px solid rgba(255, 255, 255, 0.08);
   }

   .navbar-supergaz .nav-item:last-of-type {
     border-bottom: none;
   }

   .navbar-supergaz .dropdown-mega-menu {
     position: static !important;
     float: none;
     width: 100%;
     margin: 0.5rem 0 1rem;
     margin-top: 0.5rem;
     padding-top: 1rem !important;
   }

   .full-menu.products>li {
     min-width: 0;
     flex: 1 1 100%;
   }

   .navbar-supergaz .dropdown-menu {
     background: rgba(15, 61, 42, 0.98);
     margin-left: 0.5rem;
     margin-right: 0.5rem;
     border-radius: 8px;
     border: 1px solid rgba(255, 255, 255, 0.08);
   }

   .navbar-supergaz .dropdown-item,
   .navbar-supergaz .menu-item {
     color: rgba(255, 255, 255, 0.9) !important;
     min-height: 44px;
     display: flex;
     align-items: center;
   }

   .navbar-supergaz .dropdown-item:hover,
   .navbar-supergaz .menu-item:hover {
     color: var(--sg-primary) !important;
     background: rgba(255, 255, 255, 0.06) !important;
   }

   .full-menu.products .menu-title {
     color: var(--sg-primary-light) !important;
     padding: 0.6rem 0;
   }

   .full-menu.products .products-menu {
     padding-left: 0.75rem;
   }

   .full-menu.products .products-menu .menu-item {
     padding: 0.5rem 0;
   }

   .navbar-supergaz .navbar-nav-actions {
     border-top: 1px solid rgba(255, 255, 255, 0.15);
   }

   .navbar-supergaz .navbar-nav-actions .lang-dropdown {
     display: none !important;
   }

   .navbar-supergaz .lang-dropdown-mobile {
     display: flex !important;
     align-items: center;
     margin-right: 0.5rem;
     margin-left: auto;
   }

   .dropdown-mega-menu {
     min-width: auto;
     left: 0 !important;
     right: 0 !important;
     transform: none;
   }

   .full-menu.products {
     flex-direction: column;
   }
 }

 @media (min-width: 992px) {
   .navbar-supergaz .nav-item.dropdown .dropdown-menu {
     display: block;
     opacity: 0;
     visibility: hidden;
     transform: translateX(-50%) translateY(-8px);
     pointer-events: none;
   }

   .navbar-supergaz .nav-item.dropdown:hover .dropdown-menu {
     opacity: 1;
     visibility: visible;
     transform: translateX(-50%) translateY(0);
     pointer-events: auto;
   }

   .navbar-supergaz .nav-item.dropdown:hover>.nav-link {
     color: var(--sg-nav-accent) !important;
   }

   .navbar-supergaz .nav-item.dropdown .dropdown-toggle::after {
     transition: transform 0.25s ease;
   }

   .navbar-supergaz .nav-item.dropdown:hover .dropdown-toggle::after {
     transform: rotate(180deg);
   }

   .navbar-supergaz .lang-dropdown-mobile {
     display: none !important;
   }
 }

 .navbar-supergaz .navbar-toggler {
   border-color: var(--sg-white-30);
   transition: background 0.6s ease;
 }

 .navbar-supergaz .navbar-toggler:hover {
   background: var(--sg-white-10);
 }

 .nav-login-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 0.55rem 1.25rem;
   font-size: 0.8rem;
   font-weight: 600;
   letter-spacing: 0.5px;
   color: var(--sg-white);
   background: var(--sg-primary);
   border: 2px solid var(--sg-primary);
   border-radius: 50px;
   text-decoration: none;
   white-space: nowrap;
   transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease,
     box-shadow 0.25s ease, transform 0.2s ease;
 }

 .nav-login-btn:hover {
   background: var(--sg-primary-hover);
   border-color: var(--sg-primary-hover);
   color: var(--sg-white);
   box-shadow: 0 4px 16px rgba(52, 190, 146, 0.4);
   transform: translateY(-1px);
 }

 .nav-login-btn:focus-visible {
   outline: 2px solid var(--sg-primary-light);
   outline-offset: 2px;
 }

 .nav-login-btn i {
   font-size: 1rem;
   opacity: 0.95;
 }

 @media (max-width: 991px) {
   .navbar-supergaz .navbar-nav-actions {
     flex-direction: column;
     align-items: stretch;
     height: auto;
     min-height: auto;
     margin-left: 0;
     margin-top: 0.5rem;
   }

   .nav-login-btn {
     width: 100%;
     justify-content: center;
     padding: 0.65rem 1.5rem;
     font-size: 0.85rem;
   }
 }

 .lang-dropdown-mobile {
   display: none;
 }

 .lang-dropdown .lang-btn {
   display: inline-flex;
   align-items: center;
   padding: 0.5rem 1rem;
   font-size: 0.875rem;
   font-weight: 500;
   color: var(--sg-white-90);
   background: var(--sg-white-08);
   border: 1px solid var(--sg-white-25);
   border-radius: 8px;
   transition: background 0.2s, border-color 0.2s;
 }

 .lang-dropdown .lang-btn:hover {
   background: rgba(255, 255, 255, 0.12);
   border-color: var(--sg-white-40);
   color: var(--sg-white);
 }

 .navbar-supergaz .navbar-nav-actions .lang-dropdown .lang-btn,
 .navbar-supergaz .lang-dropdown-mobile .lang-btn {
   background: var(--sg-molekul-bg) !important;
   border-color: var(--sg-white-20) !important;
 }

 .lang-dropdown .lang-btn::after {
   margin-left: 0.5rem;
 }

 .lang-dropdown .lang-current {
   min-width: 1.75rem;
 }

 .lang-dropdown .lang-menu {
   min-width: 160px;
   border-radius: 10px;
   overflow: hidden;
 }

 .lang-dropdown .lang-item {
   display: flex;
   align-items: center;
   padding: 0.65rem 1rem;
   font-size: 0.9rem;
 }

 .lang-dropdown .lang-item .fi {
   width: 1.25em;
   height: 1em;
   border-radius: 2px;
 }

 .border-lg-start {
   border-inline-start: none;
 }

 @media (min-width: 768px) {
   .border-lg-start {
     border-inline-start-width: 1px;
     border-inline-start-style: solid;
   }
 }

 .footer {
   padding-top: 7rem !important;
 }

 footer::after {
   position: absolute;
   bottom: -20px;
   width: 100%;
   height: 350px;
   content: "";
   background-image: url("../images/bulut.png");
   background-size: cover;
   z-index: 0;
 }

 .footer-color {
   color: var(--sg-footer-dark);
 }

 .footer-link-color {
   color: var(--sg-footer-muted);
 }

 .footerCol {
   justify-items: center;
 }

 .hero-swiper {
   height: 100vh;
   min-height: 480px;
   width: 100%;
   overflow: hidden;
 }

 .hero-swiper .swiper-slide {
   position: relative;
   display: flex;
   align-items: stretch;
 }

 .hero-swiper .hero-slide-inner {
   position: relative;
   width: 100%;
   display: flex;
   flex-direction: column;
 }

 .hero-swiper .slide-bg {
   position: absolute;
   inset: 0;
   background-size: cover;
   background-position: center;
 }

 .hero-counter-circle {
   position: absolute;
   right: 1.5rem;
   bottom: 1.5rem;
   z-index: 10;
   width: 72px;
   height: 72px;
   display: flex;
   align-items: center;
   justify-content: center;
   background: rgba(0, 0, 0, 1);
   border-radius: 50%;
 }

 .hero-counter-circle .hero-counter-progress {
   position: absolute;
   width: 100%;
   height: 100%;
   transform: rotate(-90deg);
 }

 .hero-counter-circle .hero-counter-bg {
   stroke: rgba(255, 255, 255, 0.2);
 }

 .hero-counter-circle .hero-counter-ring {
   stroke: var(--sg-primary);
   stroke-linecap: round;
   transition: stroke-dashoffset 0.1s linear;
 }

 .hero-counter-circle .hero-counter-text {
   position: relative;
   z-index: 1;
   font-size: 0.75rem;
   font-weight: 600;
   color: var(--sg-white);
 }

 .hero-counter-circle .hero-counter-current {
   color: var(--sg-primary);
 }

 @media (max-width: 991px) {
   .hero-counter-circle {
     right: 1rem;
     bottom: 1rem;
     width: 60px;
     height: 60px;
   }

   .hero-counter-circle .hero-counter-text {
     font-size: 0.65rem;
   }

   .hero-counter-circle .hero-counter-bg,
   .hero-counter-circle .hero-counter-ring {
     stroke-width: 3;
   }
 }

 @media (min-width: 992px) {
   .hero-swiper .hero-slide-inner {
     flex-direction: row;
   }

   .hero-swiper .hero-slide-container {
     position: relative;
     z-index: 2;
     width: 100%;
     padding-top: 100px;
     min-height: calc(100vh - 0px);
   }

   .hero-swiper .hero-center-image {
     position: relative;
     min-height: 100%;
   }

   .hero-swiper .slide-bg-center {
     position: absolute;
     inset: 0;
     background-size: cover;
     background-position: left;
   }

   .hero-swiper .hero-right-panel {
     background: rgba(10, 22, 40, 0.8);
     padding: 2rem 1.75rem;
     display: flex;
     flex-direction: column;
     justify-content: center;
     position: relative;
   }

   .hero-swiper .hero-right-panel::before {
     content: "";
     position: absolute;
     left: 0;
     top: 0;
     bottom: 0;
     width: 1px;
     background: rgba(255, 255, 255, 0.08);
   }

   .hero-swiper .hero-right-content {
     color: var(--sg-white);
   }

   .hero-swiper .hero-headline {
     font-size: clamp(1.5rem, 2vw, 2.25rem);
     font-weight: 700;
     line-height: 1.2;
     margin-bottom: 1.25rem;
     color: var(--sg-white);
   }

   .hero-swiper .hero-cta-btn {
     display: inline-flex;
     align-items: center;
     padding: 0.65rem 1.5rem;
     background: var(--sg-primary);
     color: var(--sg-white);
     border: none;
     border-radius: 6px;
     font-weight: 600;
     text-decoration: none;
     transition: background 0.25s, transform 0.2s;
   }

   .hero-swiper .hero-cta-btn:hover {
     background: var(--sg-primary-hover);
     color: var(--sg-white);
     transform: translateY(-1px);
   }

   .hero-swiper .hero-sidebar-title {
     font-size: 0.75rem;
     font-weight: 600;
     letter-spacing: 0.12em;
     color: var(--sg-white);
     margin-bottom: 0.75rem;
     margin-top: 0.5rem;
   }

   .hero-swiper .hero-sidebar-text {
     font-size: 16px;
     line-height: 1.6;
     color: rgba(255, 255, 255, 0.85);
     margin-bottom: 0.75rem;
   }

   .hero-swiper .hero-sidebar-thumbs {
     display: flex;
     gap: 0.75rem;
     margin-top: 1rem;
   }

   .hero-swiper .hero-thumb-btn {
     flex: 1;
     padding: 0;
     border: 2px solid rgba(255, 255, 255, 0.2);
     border-radius: 4px;
     background: none;
     cursor: pointer;
     overflow: hidden;
     transition: border-color 0.2s, opacity 0.2s;
   }

   .hero-swiper .hero-thumb-btn:hover,
   .hero-swiper .hero-thumb-btn.active {
     border-color: var(--sg-primary);
   }

   .hero-swiper .hero-thumb {
     width: 100%;
     height: 70px;
     object-fit: cover;
     display: block;
   }

   .hero-swiper .hero-mobile-content {
     display: none !important;
   }
 }

 @media (max-width: 991px) {
   .hero-swiper .hero-slide-inner {
     position: absolute;
     inset: 0;
   }

   .hero-swiper .hero-center-image,
   .hero-swiper .hero-right-panel {
     display: none !important;
   }

   .hero-swiper .hero-mobile-content {
     position: absolute;
     inset: 0;
     z-index: 2;
     display: flex;
     flex-direction: column;
     justify-content: center;
     padding: 100px 1.5rem 2rem;
     background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.2) 50%, transparent 100%);
   }

   .hero-swiper .hero-mobile-headline {
     font-size: clamp(1.5rem, 5vw, 2.25rem);
     font-weight: 700;
     color: var(--sg-white);
     margin-bottom: 1rem;
     text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
   }

   .hero-swiper .hero-mobile-desc {
     font-size: 0.95rem;
     line-height: 1.5;
     color: rgba(255, 255, 255, 0.95);
     margin-bottom: 1.25rem;
     text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
   }

   .hero-swiper .hero-mobile-btn {
     display: inline-flex;
     align-items: center;
     align-self: flex-start;
     padding: 0.6rem 1.25rem;
     background: var(--sg-primary);
     color: var(--sg-white);
     border: none;
     border-radius: 6px;
     font-weight: 600;
     text-decoration: none;
     transition: background 0.25s;
   }

   .hero-swiper .hero-mobile-btn:hover {
     background: var(--sg-primary-hover);
     color: var(--sg-white);
   }

   .hero-swiper .slide-bg {
     background-size: cover;
     background-position: center;
   }

   /* Mobil görseller - heroswiper */
   .hero-swiper .swiper-slide[data-slide="1"] .hero-slide-inner>.slide-bg {
     background-image: url('/images/HeroSwiper/1mobile.png') !important;
   }

   .hero-swiper .swiper-slide[data-slide="2"] .hero-slide-inner>.slide-bg {
     background-image: url('/images/HeroSwiper/2mobile.png') !important;
   }

   .hero-swiper .swiper-slide[data-slide="3"] .hero-slide-inner>.slide-bg {
     background-image: url('/images/HeroSwiper/3mobile.png') !important;
   }
 }

 .hero-swiper .hero-pagination {
   display: none;
 }

 .home-about {
   background: linear-gradient(180deg, var(--sg-gray-50) 0%, var(--sg-white) 15%);
 }

 .home-about .about-section-header {
   margin-bottom: 2.5rem;
 }

 .home-about .about-badge {
   display: inline-block;
   font-size: 0.75rem;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.12em;
   color: var(--sg-primary);
   margin-bottom: 0.5rem;
 }

 .home-about .about-section-title {
   font-size: clamp(1.5rem, 3vw, 2rem);
   font-weight: 700;
   color: var(--sg-dark);
   margin-bottom: 0;
 }

 .home-about .about-image-wrap {
   border-radius: 16px;
   overflow: hidden;
   box-shadow: 0 16px 48px rgba(0, 0, 0, 0.08);
 }

 .home-about .about-image {
   width: 100%;
   height: 100%;
   min-height: 380px;
   object-fit: cover;
   display: block;
 }

 @media (max-width: 991px) {
   .home-about .about-image {
     min-height: 300px;
   }
 }

 .home-about .about-main-card {
   background: var(--sg-white);
   border-radius: 16px;
   padding: 2rem 2.25rem;
   box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
   border: 1px solid var(--sg-gray-200);
   height: 100%;
   display: flex;
   flex-direction: column;
 }

 .home-about .about-top-side {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 1rem;
   margin-bottom: 1.25rem;
   padding-bottom: 1.25rem;
   border-bottom: 2px solid var(--sg-primary-alpha-15);
 }

 .home-about .about-titles {
   display: flex;
   flex-direction: column;
   gap: 0.15rem;
 }

 .home-about .about-title-1 {
   font-size: 0.8rem;
   color: var(--sg-gray-500);
   text-transform: uppercase;
   letter-spacing: 0.08em;
 }

 .home-about .about-title-2 {
   font-size: 1.5rem;
   font-weight: 700;
   color: var(--sg-dark);
 }

 .home-about .about-title-2 span {
   color: var(--sg-primary);
 }

 .home-about .about-title-3 {
   font-size: 1rem;
   font-weight: 600;
   color: var(--sg-dark-alt);
 }

 .home-about .about-arrow-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 44px;
   height: 44px;
   background: var(--sg-primary);
   border: none;
   border-radius: 12px;
   color: var(--sg-white);
   font-size: 1rem;
   flex-shrink: 0;
   text-decoration: none;
   transition: background 0.25s, transform 0.2s;
 }

 .home-about .about-arrow-btn:hover {
   background: var(--sg-primary-hover);
   color: var(--sg-white);
   transform: translateX(4px);
 }

 .home-about .about-exp {
   font-size: 0.95rem;
   line-height: 1.75;
   color: var(--sg-dark-alt);
   margin-bottom: 0.75rem;
 }

 .home-about .about-exp:last-of-type {
   margin-bottom: 0;
 }

 .home-about .about-doc-card {
   display: flex;
   align-items: center;
   gap: 1rem;
   padding: 1rem 1.25rem;
   background: var(--sg-white);
   border-radius: 12px;
   border: 1px solid var(--sg-gray-200);
   text-decoration: none;
   transition: border-color 0.25s, box-shadow 0.25s, transform 0.2s;
 }

 .home-about .about-doc-card:hover {
   border-color: var(--sg-primary);
   box-shadow: 0 8px 24px var(--sg-primary-alpha-15);
   transform: translateY(-2px);
 }

 .home-about .about-doc-icon {
   width: 48px;
   height: 48px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 12px;
   font-size: 1.4rem;
   flex-shrink: 0;
   transition: background 0.25s, color 0.25s;
 }

 .home-about .about-doc-icon-pdf {
   background: rgba(220, 53, 69, 0.12);
   color: #dc3545;
 }

 .home-about .about-doc-card:hover .about-doc-icon-pdf {
   background: #dc3545;
   color: var(--sg-white);
 }

 .home-about .about-doc-icon-msds {
   background: var(--sg-primary-alpha-15);
   color: var(--sg-primary);
 }

 .home-about .about-doc-card:hover .about-doc-icon-msds {
   background: var(--sg-primary);
   color: var(--sg-white);
 }

 .home-about .about-doc-content {
   flex: 1;
   display: flex;
   flex-direction: column;
   gap: 0.15rem;
 }

 .home-about .about-doc-title {
   font-weight: 600;
   color: var(--sg-dark);
   font-size: 1rem;
 }

 .home-about .about-doc-desc {
   font-size: 0.8rem;
   color: var(--sg-gray-500);
 }

 .home-about .about-doc-arrow {
   font-size: 0.9rem;
   color: var(--sg-primary);
   opacity: 0.7;
   transition: opacity 0.25s, transform 0.25s;
 }

 .home-about .about-doc-card:hover .about-doc-arrow {
   opacity: 1;
   transform: translateY(2px);
 }

 .home-about .about-stats-section {
   margin-top: 4rem;
   padding-top: 3rem;
   border-top: 1px solid var(--sg-gray-200);
 }

 .home-about .about-stats-title {
   font-size: 1.5rem;
   font-weight: 700;
   color: var(--sg-dark);
   margin-bottom: 1.5rem;
   text-align: center;
 }

 .home-about .about-stats-title span {
   display: block;
   font-size: 0.8rem;
   font-weight: 500;
   color: var(--sg-gray-500);
   text-transform: uppercase;
   letter-spacing: 0.1em;
   margin-bottom: 0.25rem;
 }

 .home-about .about-stats-wrapper {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 1.25rem;
 }

 @media (max-width: 991px) {
   .home-about .about-stats-wrapper {
     grid-template-columns: repeat(2, 1fr);
   }
 }

 @media (max-width: 576px) {
   .home-about .about-stats-wrapper {
     grid-template-columns: 1fr;
   }

   .home-about .about-stats-section {
     margin-top: 3rem;
     padding-top: 2.5rem;
   }
 }

 .home-about .about-stat-item {
   text-align: center;
   padding: 1.75rem 1.25rem;
   background: var(--sg-white);
   border-radius: 16px;
   border: 1px solid var(--sg-gray-200);
   box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
   transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
 }

 .home-about .about-stat-item:hover {
   background: var(--sg-white);
   border-color: var(--sg-primary);
   box-shadow: 0 12px 32px var(--sg-primary-alpha-15);
   transform: translateY(-6px);
 }

 .home-about .about-stat-item .about-stat-number {
   font-size: 2.25rem;
   font-weight: 700;
   color: var(--sg-primary);
   margin-bottom: 0.35rem;
   transition: color 0.3s ease;
 }

 .home-about .about-stat-item:hover .about-stat-number {
   color: var(--sg-primary-dark);
 }

 .home-about .about-stat-item .about-stat-label {
   font-weight: 600;
   color: var(--sg-dark);
   font-size: 1rem;
   transition: color 0.3s ease;
 }

 .home-about .about-stat-item:hover .about-stat-label {
   color: var(--sg-primary);
 }

 .home-about .about-stat-item .about-stat-sublabel {
   font-size: 0.85rem;
   color: var(--sg-gray-500);
   transition: color 0.3s ease;
 }

 .home-about .about-stat-item:hover .about-stat-sublabel {
   color: var(--sg-primary-light);
 }

 .molekul-bar {
   background: var(--sg-molekul-bg);
 }

 .molekul-item {
   padding: 0.5rem 1rem;
   min-width: 90px;
 }

 .bg-light .nav-pills .nav-link,
 #productsSection .nav-pills .nav-link {
   color: var(--sg-gray-500);
 }

 .bg-light .nav-pills .nav-link.active,
 #productsSection .nav-pills .nav-link.active {
   background-color: var(--sg-primary) !important;
   color: var(--sg-white) !important;
   border-color: var(--sg-primary);
 }

 .bg-light .nav-pills .nav-link:not(.active),
 #productsSection .nav-pills .nav-link:not(.active) {
   background: var(--sg-gray-100);
   border: 1px solid var(--sg-gray-300);
 }

 #productsSection .nav-pills .nav-link:hover:not(.active) {
   background: var(--sg-primary-alpha-15);
   border-color: var(--sg-primary);
   color: var(--sg-primary);
 }

 .products-overlay {
   background: linear-gradient(to top,
       var(--sg-black-alpha-80) 0%,
       transparent 50%);
 }

 .products-overlay::before {
   content: "";
   position: absolute;
   inset: 0;
   z-index: 0;
   background: linear-gradient(135deg,
       var(--sg-overlay-dark-darker) 0%,
       var(--sg-overlay-black-darker) 100%);
 }

 .products-overlay>* {
   position: relative;
   z-index: 1;
 }

 .tab-content .card .card-img {
   height: 240px;
   object-fit: cover;
 }

 @media (min-width: 768px) {
   .tab-content .card .card-img {
     height: 280px;
   }
 }

 .product-detail-tabs-box {
   border: 1px solid var(--sg-gray-300);
   border-radius: 8px;
   overflow: hidden;
   background: var(--sg-white);
 }

 .product-detail-tabs-box .product-detail-tabs {
   margin: 0;
   border: none;
   border-bottom: 1px solid var(--sg-gray-300);
   padding: 0;
   background: var(--sg-gray-100);
   gap: 0;
 }

 .product-detail-tabs-box .product-detail-tabs .nav-item {
   margin: 0;
 }

 .product-detail-tabs-box .product-detail-tabs .nav-link {
   margin: 0;
   border: none;
   border-radius: 0;
   padding: 0.75rem 1.5rem;
   color: var(--sg-dark-alt);
   background: var(--sg-gray-200);
   border-top: 1px solid var(--sg-gray-300);
   border-right: 1px solid var(--sg-gray-300);
   border-bottom: 1px solid var(--sg-gray-300);
   font-weight: 500;
 }

 .product-detail-tabs-box .product-detail-tabs .nav-item:first-child .nav-link {
   border-left: 1px solid var(--sg-gray-300);
 }

 .product-detail-tabs-box .product-detail-tabs .nav-link:hover {
   background: var(--sg-gray-200);
   color: var(--sg-dark);
   border-color: var(--sg-gray-300);
 }

 .product-detail-tabs-box .product-detail-tabs .nav-link.active {
   background: var(--sg-white);
   color: var(--sg-molekul-bg);
   font-weight: 600;
   border-bottom: 2px solid var(--sg-molekul-bg);
   margin-bottom: -1px;
   position: relative;
   z-index: 1;
 }

 .product-detail-tabs-box .product-detail-tab-content {
   padding: 1.5rem;
   border: none;
 }

 .product-detail-tabs-box .product-detail-tab-content .card {
   border: 1px solid var(--sg-gray-300);
   border-radius: 6px;
 }

 .product-detail-tabs-box .product-detail-tab-content .card-header {
   border-bottom: 1px solid var(--sg-gray-300);
   color: var(--sg-molekul-bg);
   font-weight: 600;
 }

 .product-detail-tabs-box .product-detail-tab-content .row .col-lg-4 {
   border-left: 1px solid var(--sg-gray-300);
   padding-left: 1.5rem;
 }

 @media (max-width: 991px) {
   .product-detail-tabs-box .product-detail-tab-content .row .col-lg-4 {
     border-left: none;
     border-top: 1px solid var(--sg-gray-300);
     padding-left: 1rem;
     padding-top: 1.5rem;
     margin-top: 1rem;
   }
 }

 #greenWorld.green-world {
   position: relative;
   margin: -3rem 3rem;
   padding: 5rem 0;
   min-height: 480px;
   border-radius: 25px;
   overflow: hidden;
   background-image: url("../images/forest.jpg");
   background-size: cover;
   background-position: center;
 }

 .green-world-overlay {
   position: absolute;
   inset: 0;
   background: linear-gradient(135deg,
       rgba(13, 50, 40, 0.75) 0%,
       rgba(0, 0, 0, 0.5) 100%);
   z-index: 0;
 }

 #greenWorld.green-world .container {
   z-index: 1;
 }

 .green-world-btn {
   padding: 0.5rem 1.25rem;
   border: 2px solid var(--sg-white);
   border-radius: 8px;
   color: var(--sg-white);
   background: transparent;
   font-weight: 600;
   text-decoration: none;
   transition: background 0.25s, color 0.25s;
 }

 .green-world-btn:hover {
   background: var(--sg-white);
   color: var(--sg-molekul-bg);
 }

 .green-world-icon {
   width: 64px;
   height: 64px;
   font-size: 1.1rem;
 }

 .green-world-item p {
   font-size: 0.95rem;
   line-height: 1.5;
 }

 @media (max-width: 768px) {
   #greenWorld.green-world {
     margin: -2rem 1rem;
     padding: 3.5rem 1rem;
     min-height: 420px;
   }
 }

 #serviceProcess.service-process {
   background: linear-gradient(180deg, var(--sg-white) 0%, var(--sg-gray-50) 50%, var(--sg-white) 100%);
 }

 .service-process-title {
   font-size: clamp(1.5rem, 3vw, 2rem);
   font-weight: 700;
   color: var(--sg-dark);
 }

 .service-process-desc {
   font-size: 1rem;
   max-width: 560px;
   margin-left: auto;
   margin-right: auto;
 }

 .service-process-card {
   position: relative;
   background: var(--sg-white);
   border-radius: 20px;
   padding: 2rem 2.5rem;
   box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.04);
   overflow: hidden;
 }

 .service-process-card::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 4px;
   height: 100%;
   background: linear-gradient(180deg, var(--sg-primary) 0%, var(--sg-primary-dark) 100%);
   border-radius: 4px 0 0 4px;
 }

 .service-process-card a[data-fancybox] {
   display: block;
   text-decoration: none;
   cursor: zoom-in;
 }

 .service-process-img {
   width: 100%;
   height: auto;
   display: block;
   border-radius: 12px;
 }

 @media (max-width: 768px) {
   .service-process-card {
     padding: 1.5rem 1.25rem;
   }
 }

 .custom-form-floating {
   position: relative;
 }

 .custom-form-control {
   font-size: 1rem;
   border: 0;
   border-bottom: 1.6px solid var(--sg-gray-300);
   border-radius: 0;
   background: transparent;
   outline: none;
   box-shadow: none;
   width: 100%;
   padding: 1.05rem 0 0.45rem 0;
   transition: border-color 0.18s;
 }

 .custom-form-control:focus {
   border-bottom: 1.6px solid var(--sg-primary);
 }

 textarea.custom-form-control {
   min-height: 44px;
   resize: none;
   height: 70px;
   padding-top: 1.05rem;
   padding-bottom: 0.45rem;
 }

 .custom-floating-label {
   color: var(--sg-molekul-bg);
   font-size: 0.98rem;
   padding-left: 0.25rem;
   pointer-events: none;
   position: absolute;
   left: 0;
   top: 0.18rem;
   transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
   background: transparent;
 }

 .custom-form-control:focus~.custom-floating-label,
 .custom-form-control:not(:placeholder-shown)~.custom-floating-label {
   top: -1rem;
   left: 0;
   font-size: 0.85rem;
   color: var(--sg-molekul-bg);
   background: var(--sg-gray-100);
   padding: 0 0.18em;
   z-index: 2;
 }

 .contact-page h4,
 .contact-page .custom-floating-label,
 .contact-page label.form-label {
   color: var(--sg-molekul-bg);
 }

 .contact-info-card {
   background: var(--sg-white);
   border-radius: 12px;
   overflow: hidden;
   box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
   border: 1px solid var(--sg-gray-200);
 }

 .contact-info-header {
   background: linear-gradient(135deg, var(--sg-molekul-bg) 0%, #1a4d38 100%);
   padding: 1rem 1.25rem;
 }

 .contact-info-title {
   font-size: 1.15rem;
   font-weight: 600;
   color: var(--sg-white);
   letter-spacing: 0.02em;
 }

 .contact-info-body {
   display: flex;
   flex-wrap: wrap;
   gap: 0;
 }

 .contact-info-item {
   flex: 1 1 100%;
   display: flex;
   align-items: center;
   gap: 1rem;
   padding: 1rem 1.25rem;
   color: var(--sg-dark-alt);
   transition: background 0.2s ease, color 0.2s ease;
   border-bottom: 1px solid var(--sg-gray-200);
 }

 .contact-info-item:last-child {
   border-bottom: none;
 }

 .contact-info-item:hover {
   background: var(--sg-primary-alpha-06);
   color: var(--sg-primary);
 }

 .contact-info-icon {
   width: 44px;
   height: 44px;
   min-width: 44px;
   display: flex;
   align-items: center;
   justify-content: center;
   background: var(--sg-primary-alpha-15);
   color: var(--sg-primary);
   border-radius: 10px;
   font-size: 1.1rem;
   transition: background 0.2s ease, color 0.2s ease;
 }

 .contact-info-item:hover .contact-info-icon {
   background: var(--sg-primary);
   color: var(--sg-white);
 }

 .contact-info-text {
   display: flex;
   flex-direction: column;
   gap: 0.15rem;
 }

 .contact-info-label {
   font-size: 0.75rem;
   color: var(--sg-gray-500);
   text-transform: uppercase;
   letter-spacing: 0.04em;
 }

 .contact-info-value {
   font-size: 0.95rem;
   font-weight: 500;
   color: inherit;
 }

 @media (min-width: 576px) {
   .contact-info-item {
     flex: 1 1 calc(50% - 0px);
     border-bottom: 1px solid var(--sg-gray-200);
     border-right: 1px solid var(--sg-gray-200);
   }

   .contact-info-item:nth-child(2n) {
     border-right: none;
   }
 }

 @media (min-width: 768px) {
   .contact-info-body {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
   }

   .contact-info-item {
     flex: none;
     border-right: 1px solid var(--sg-gray-200);
     border-bottom: none;
   }

   .contact-info-item:nth-child(2n) {
     border-right: 1px solid var(--sg-gray-200);
   }

   .contact-info-item:last-child {
     border-right: none;
   }
 }

 .contact-page .contact-info-col {
   background: var(--sg-white);
   padding: 1.5rem;
   border-radius: 0.5rem;
 }

 .contact-page .contact-form-col {
   background: var(--sg-gray-50);
   padding: 1.5rem;
   border-radius: 0.5rem;
 }

 .contact-page .contact-form-card {
   background: var(--sg-gray-50);
   border-radius: 18px;
   box-shadow: 0 4px 16px rgba(44, 62, 80, 0.06);
 }

 .contact-page .contact-form-col .custom-form-control:focus~.custom-floating-label,
 .contact-page .contact-form-col .custom-form-control:not(:placeholder-shown)~.custom-floating-label {
   background: var(--sg-gray-50);
 }

 .contact-form-info {
   display: flex;
   align-items: center;
 }

 .contact-form-info-icon {
   width: 30px;
   height: 30px;
   min-width: 30px;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-right: 10px;
   border-radius: 50%;
   background: var(--sg-primary-alpha-15);
   color: var(--sg-primary);
   font-size: 1.2rem;
 }

 .contact-form-info-text {
   color: var(--sg-primary-dark);
   font-weight: 500;
 }

 .contact-form-kvkk-link {
   color: var(--sg-primary) !important;
   text-decoration: underline !important;
   transition: color 0.2s ease;
 }

 .contact-form-kvkk-link:hover {
   color: var(--sg-primary-hover) !important;
 }

 .contact-form-submit-btn {
   background: var(--sg-primary) !important;
   border-color: var(--sg-primary) !important;
 }

 .contact-form-submit-btn:hover {
   background: var(--sg-primary-hover) !important;
   border-color: var(--sg-primary-hover) !important;
 }

 .side-menu {
   background: var(--sg-white);
   border-radius: 0;
   padding: 0;
   box-shadow: 0 0 12px rgba(0, 0, 0, 0.07);
 }

 .side-menu-header {
   padding: 1.75rem 1.5rem 1.5rem;
   border-bottom: none;
 }

 .side-menu-title {
   font-size: 1.5rem;
   font-weight: 700;
   color: var(--sg-dark-alt);
   margin: 0 0 0.25rem 0;
   letter-spacing: -0.02em;
 }

 .side-menu-section {
   border-top: 1px solid var(--sg-gray-200);
 }

 .side-menu-section .side-menu-header {
   padding: 1rem 1.5rem 0.75rem;
 }

 .side-menu-subtitle {
   font-size: 0.9rem;
   font-weight: 400;
   color: var(--sg-gray-500);
   margin: 0;
   line-height: 1.4;
 }

 .side-menu-nav {
   display: flex;
   flex-direction: column;
 }

 .side-menu-item {
   display: flex;
   align-items: center;
   padding: 0.95rem 1.5rem;
   font-size: 1rem;
   color: var(--sg-dark-alt);
   text-decoration: none;
   border: none;
   border-top: 1px solid var(--sg-gray-200);
   margin: 0 1rem;
   background: transparent;
   transition: color 0.2s ease, transform 0.2s ease;
 }

 .side-menu-item::before {
   content: "";
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: transparent;
   margin-right: 12px;
   flex-shrink: 0;
   transition: background 0.2s ease;
 }

 .side-menu-item:hover {
   color: var(--sg-molekul-bg);
   transform: translateX(6px);
 }

 .side-menu-item:hover::before {
   background: var(--sg-molekul-bg);
 }

 .side-menu-item.active {
   color: var(--sg-molekul-bg);
   font-weight: 600;
 }

 .side-menu-item.active::before {
   background: var(--sg-molekul-bg);
 }

 .product-recommendations .card {
   min-height: 320px;
 }

 .product-recommendations .card-body {
   display: flex;
   flex-direction: column;
   flex: 1;
 }

 .product-recommendations .product-rec-title {
   font-size: 1rem;
   font-weight: 600;
   min-height: 1.5rem;
   max-height: 2.5rem;
   margin: 0 0 0.5rem 0;
   overflow: hidden;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   line-clamp: 2;
   line-height: 1.25;
 }

 .product-recommendations .product-rec-desc {
   flex: 1;
   min-height: 3rem;
   max-height: 3.75rem;
   margin: 0 0 0.75rem 0;
   overflow: hidden;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 3;
   line-clamp: 3;
   line-height: 1.25;
   font-size: 0.875rem;
 }

 .product-rec-nav-wrap .product-rec-prev,
 .product-rec-nav-wrap .product-rec-next {
   position: relative !important;
   top: auto !important;
   left: auto !important;
   right: auto !important;
   margin: 0 !important;
   min-width: 40px;
   width: 40px;
   height: 40px;
   flex-shrink: 0;
   border: 1px solid var(--sg-gray-300);
   border-radius: 12px;
   background: var(--sg-white);
   color: var(--sg-molekul-bg);
   transition: background 0.2s, border-color 0.2s, color 0.2s;
 }

 .product-rec-nav-wrap .product-rec-prev:hover,
 .product-rec-nav-wrap .product-rec-next:hover {
   background: var(--sg-molekul-bg);
   border-color: var(--sg-molekul-bg);
   color: var(--sg-white);
 }

 .product-rec-nav-wrap .product-rec-prev.swiper-button-disabled,
 .product-rec-nav-wrap .product-rec-next.swiper-button-disabled {
   opacity: 0.4;
   cursor: not-allowed;
   pointer-events: none;
 }

 .scroll-to-top {
   position: fixed;
   right: 1.5rem;
   bottom: 1.5rem;
   width: 44px;
   height: 44px;
   display: flex;
   align-items: center;
   justify-content: center;
   background: var(--sg-molekul-bg);
   color: var(--sg-white);
   border: none;
   border-radius: 50%;
   cursor: pointer;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
   opacity: 0;
   visibility: hidden;
   transform: translateY(10px);
   transition: opacity 0.6s ease, visibility 0.6s ease, transform 0.6s ease,
     background 0.2s ease;
   z-index: 999;
 }

 .scroll-to-top:hover {
   background: var(--sg-primary);
   color: var(--sg-white);
 }

 .scroll-to-top.scroll-to-top--visible {
   opacity: 1;
   visibility: visible;
   transform: translateY(0);
 }

 .contact-banner {
   width: 100%;
   height: 200px;
   background: linear-gradient(180deg, #0f3d2a 0%, #2a5c48 100%);
   display: flex;
   align-items: center;
 }

 @media (min-width: 992px) {
   .contact-banner {
     height: 250px;
   }
 }

 .msds-banner-card {
   background: var(--sg-white);
   border-top-right-radius: 12px;
   border-top-left-radius: 12px;
   padding: 18px 40px 18px 24px;
   min-width: 220px;
   max-width: 400px;
 }

 .msds-banner-icon {
   width: 44px;
   height: 44px;
   margin-right: 14px;
   display: flex;
   align-items: center;
   justify-content: center;
 }

 .msds-banner-icon i {
   font-size: 2.2rem;
   color: var(--sg-molekul-bg);
 }

 .msds-breadcrumb {
   font-size: 0.85rem;
   color: var(--sg-gray-500);
 }

 .msds-breadcrumb a {
   color: var(--sg-gray-500);
 }

 .msds-breadcrumb a:hover {
   color: var(--sg-primary);
 }

 .msds-section {
   background: linear-gradient(180deg, var(--sg-gray-100) 0%, var(--sg-white) 20%);
 }

 .msds-card {
   background: var(--sg-white);
   border: 1px solid var(--sg-gray-200);
   transition: box-shadow 0.6s ease;
 }

 .msds-card:hover {
   box-shadow: 0 24px 56px rgba(0, 0, 0, 0.08) !important;
 }

 .msds-hero {
   position: relative;
   min-height: 320px;
   overflow: hidden;
 }

 .msds-hero-img {
   width: 100%;
   height: 100%;
   min-height: 320px;
   object-fit: cover;
 }

 .msds-hero-overlay {
   position: absolute;
   inset: 0;
   background: linear-gradient(135deg, rgba(15, 61, 42, 0.15) 0%, transparent 60%);
   pointer-events: none;
 }

 .msds-content {
   padding: 2.5rem 2.5rem 2.5rem 2rem;
 }

 .msds-title {
   font-size: clamp(1.75rem, 3vw, 2.25rem);
   font-weight: 700;
   color: var(--sg-dark);
   margin-bottom: 0.25rem;
   letter-spacing: -0.02em;
 }

 .msds-subtitle {
   font-size: 1.15rem;
   font-weight: 600;
   color: var(--sg-primary-dark);
   margin-bottom: 1.75rem;
   padding-bottom: 0.75rem;
   border-bottom: 2px solid var(--sg-primary-alpha-15);
 }

 .msds-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 1.5rem 2rem;
   margin-bottom: 1.75rem;
 }

 .msds-list {
   list-style: none;
   margin: 0;
   padding: 0;
   font-size: 0.9rem;
   color: var(--sg-dark-alt);
   line-height: 1.9;
 }

 .msds-list li {
   position: relative;
   padding-left: 1rem;
 }

 .msds-list li::before {
   content: "";
   position: absolute;
   left: 0;
   top: 0.65em;
   width: 5px;
   height: 5px;
   background: var(--sg-primary);
   border-radius: 50%;
 }

 .msds-list a {
   color: inherit;
   text-decoration: none;
   transition: color 0.2s;
 }

 .msds-list a:hover {
   color: var(--sg-primary);
 }

 .msds-cta {
   font-size: 0.95rem;
   color: var(--sg-dark-alt);
   margin-bottom: 0;
 }

 .msds-cta a {
   color: var(--sg-primary);
   font-weight: 600;
   text-decoration: none;
   transition: color 0.2s;
 }

 .msds-cta a:hover {
   color: var(--sg-primary-hover);
 }

 @media (max-width: 991px) {
   .msds-hero {
     min-height: 240px;
   }

   .msds-hero-img {
     min-height: 240px;
   }

   .msds-content {
     padding: 1.75rem 1.5rem;
   }

   .msds-grid {
     grid-template-columns: 1fr;
     gap: 0.5rem;
   }
 }

 @media (min-width: 576px) and (max-width: 991px) {
   .msds-grid {
     grid-template-columns: repeat(2, 1fr);
   }
 }

 /* Product list cards */
 .product-card {
   transition: box-shadow 0.3s ease;
 }

 .product-card:hover {
   box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15) !important;
 }

 .product-card .product-card-img {
   transition: transform 0.3s ease;
 }

 .product-card:hover .product-card-img {
   transform: scale(1.03);
 }

 .product-card-detail-btn {
   transform: translateY(24px);
   opacity: 0;
   transition: transform 0.3s ease, opacity 0.3s ease;
 }

 .product-card:hover .product-card-detail-btn {
   transform: translateY(0);
   opacity: 1;
 }

 .swiper-pagination-bullet-active {
   background: var(--sg-primary-hover) !important;
 }

 .product-gallery-thumbs .swiper-slide {
   opacity: 0.5;
   transition: opacity 0.2s ease;
 }

 .product-gallery-thumbs .swiper-slide-thumb-active {
   opacity: 1;
 }

 .product-gallery-thumbs .swiper-slide-thumb-active img {
   border-color: var(--sg-primary, #0f3d2a) !important;
 }