:root {
       --gap: 16px;
       --card-w: 640px;
     }

     body {
       background-color: #FFFFFF;
       font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     }

     a {
       text-decoration: none;
     }

     /* ====== TOP BAR ====== */
     .site-navbar {
       background: #FFFFFF;
       height: 100px;
     }

     .brand-two-line {
       line-height: 1;
       font-weight: 500;
       letter-spacing: .4px;
       display: inline-flex;
       flex-direction: column;
       font-size: 1.35rem;
     }

     .brand-two-line small {
       font-size: .65rem;
       color: #a7a7a7;
       letter-spacing: .2em;
       text-transform: lowercase;
       margin-top: .15rem;
     }

     /* orta menü */
     .navbar-nav .nav-link {
       letter-spacing: .02em;
       opacity: .9;
       color: black;
     }

     /* sağ taraf */
     .btn-catalog {
       background: #F2F2F2 !important;
       color: #111 !important;
       border-radius: 999px !important;
       padding: .5rem 1.1rem !important;
       border: 0 !important;
     }

     .btn-catalog:hover {
       background: #111 !important;
       color: #F2F2F2 !important;
     }



     .icon-btn {
       width: 40px;
       height: 40px;
       border-radius: 50%;
       background: #2f3132;
       display: inline-grid;
       place-items: center;
       border: 1px solid rgba(255, 255, 255, .08);
     }

     .icon-btn:hover {
       filter: brightness(1.05);
     }

     /* hamburger çizgileri */
     .burger {
       width: 18px;
       height: 12px;
       position: relative;
     }

     .burger span {
       position: absolute;
       left: 0;
       right: 0;
       height: 2px;
       background: #fff;
       border-radius: 2px;
     }

     .burger span:nth-child(1) {
       top: 0;
     }

     .burger span:nth-child(2) {
       top: 5px;
       width: 70%;
       right: auto;
     }

     .burger span:nth-child(3) {
       bottom: 0;
     }

     /* ====== OFFCANVAS TOP (Mobil Menü) ====== */
     .offcanvas-top.custom-off {
       height: 480px !important;
       /* büyük bir üst çekmece */
       background: #2a2c2d;
       color: #fff;
       border-bottom-left-radius: 100px;
       border-bottom-right-radius: 100px;
       box-shadow: 0 20px 40px rgba(0, 0, 0, .35);
     }

     /* altta küçük yuvarlak tutmaç */
     .offcanvas-top.custom-off::after {
       content: "";
       position: absolute;
       left: 50%;
       bottom: -16px;
       transform: translateX(-50%);
       width: 64px;
       height: 16px;
       background: radial-gradient(60px 24px at 50% -10px, #2a2c2d 60%, transparent 61%);
     }

     .drag-handle {
       position: absolute;
       left: 50%;
       bottom: 10px;
       transform: translateX(-50%);
       width: 46px;
       height: 6px;
       border-radius: 999px;
       background: #3a3c3d;
     }

     /* offcanvas iç link listesi */
     .menu-list .list-group-item {
       background: transparent;
       color: #fff;
       border-color: rgba(255, 255, 255, .06);
       padding: .95rem 0;
       font-size: 20px;
       display: flex;
       align-items: center;
       justify-content: space-between;
     }

     .menu-list .list-group-item svg {
       opacity: .7;
     }

     /* orta menünün masaüstünde ortalanması */
     @media (min-width:992px) {
       .navbar-center {
         position: absolute;
         left: 54%;
         transform: translateX(-50%);
       }
       
     
     }

     /* ====== DESKTOP QUICK PANEL ====== */
     .quick-panel {
       position: fixed;
       right: 100px;
       color: #fff;
       padding: 12px 16px;
       min-width: 260px;
       /* border: 1px solid rgba(255, 255, 255, .08); */
       display: none;
       /* JS ile gösterilecek */
       z-index: 1060;
       /* navbar ve offcanvas üstü */
     }

     .quick-panel .qp-item {
       padding: 10px 2px;
     }

     .quick-panel .qp-item.border-top {
       border-top: 1px solid rgba(255, 255, 255, .08);
     }



     /* Yalnızca lg ve üstünde kullanılacak */
     @media (max-width: 991.98px) {
       .quick-panel {
         display: none !important;
       }
     }

     .flag-img {
       border-radius: 15px;
       object-fit: cover;
     }

     /* ==== MOBILE NAVBAR (lg altı) ==== */
     @media (max-width: 991.98px) {
       .site-navbar {
         background: #ffffff;
         color: #111;
         /* metin varsayılan rengi */
         border-bottom: 1px solid rgba(0, 0, 0, .06);
       }

       /* marka (SVG logo) koyu olsun */
       .site-navbar .navbar-brand svg path {
         fill: #111 !important;
       }

       /* hamburger butonunun çizgilerini koyulaştır */
       .site-navbar #menuBtn svg line,
       .site-navbar #menuBtn svg rect {
         stroke: #111 !important;
       }

       /* yuvarlak ikon buton arka planını aç ve kenarlığı koyulaştır */
       .icon-btn {
         background: #f2f2f2;
         border-color: rgba(0, 0, 0, .08);
       }

       /* orta menü linkleri (mobilde görünmüyor ama güvence) */
       .navbar-nav .nav-link {
         color: #111;
       }
     }

     /* Eski tutamaç artık yoksa bunları silebilirsin: */
     /* .drag-handle { ... } */
     .offcanvas-top.custom-off::after {
       display: none;
     }

     /* Yeni tutamaç butonu */
     .drag-handle-btn {
       position: absolute;
       left: 50%;
       bottom: -18px;
       /* offcanvas altından yarım taşsın */
       transform: translateX(-50%);
       width: 34px;
       height: 34px;
       padding: 0;
       border: 0;
       background: transparent;
     }

     /* Sadece mobilde görünsün */
     @media (min-width: 992px) {
       #mobileLangBtn {
         display: none !important;
       }

       /* offcanvas zaten mobilde */
     }

     /* Dil paneli: butonun ALTINA doğru açılan mini kutu */
     #mobileLangCollapse {
       position: absolute;
       right: 10px;
       /* sağ üst butonun altına hizala */
       top: calc(100% + 8px);
       /* header’ın altına indir */
       z-index: 2000;
       /* içerik üstünde dursun */
     }

     #mobileLangCollapse .lang-panel-inner {
       background: #2f3132;
       border: 1px solid rgba(255, 255, 255, .08);
       border-radius: 12px;
       padding: 8px 10px;
       box-shadow: 0 10px 24px rgba(0, 0, 0, .28);
     }

     /* küçük bir üçgen kuyruk */
     #mobileLangCollapse .lang-panel-inner::before {
       content: "";
       position: absolute;
       top: -8px;
       right: 18px;
       /* butonun altına yakın */
       width: 12px;
       height: 12px;
       background: #2f3132;
       transform: rotate(45deg);
       border-left: 1px solid rgba(255, 255, 255, .08);
       border-top: 1px solid rgba(255, 255, 255, .08);
     }

     /* Sadece mobilde göster (lg ve üstünde gizle) */
     @media (min-width: 992px) {
       #mobileLangCollapse {
         display: none !important;
       }
     }

     .menu-list .list-group-item {
       border: 0;
       /* bootstrap default’u kapat */
       border-bottom: 1px solid #FFFFFF;
       /* ince beyaz çizgi */
     }

     .menu-list .list-group-item:last-child {
       border-bottom: 0;
       /* son itemde çizgi olmasın */
     }

     .offcanvas-backdrop {
       background-color: #FFFFFF !important;
     }

        .sub-bar {
       background: #303031;
       color: #fff;
       font-size: 16px;
       font-weight: 600;
       padding: 8px 0;
       text-align: center;
     }

     .sub-bar .container {
       display: inline-flex;
       justify-content: center;
       align-items: center;
       gap: 8px;
     }

     .sub-bar-texts {
       text-align: center;
     }

     .sub-bar-texts span {
       display: none;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
       max-width: 450px;
     }

     .sub-bar-texts span.active {
       display: inline-block;
     }

     .sub-bar svg {
       cursor: pointer;
       transition: opacity 0.2s ease;
     }

     .sub-bar svg:hover {
       opacity: 0.7;
     }


     /* ========== BASE ========== */
     .ph-section {
       position: relative;
     }

     .ph-bg {
       position: relative;
       /* mobilde sayıları altına sabitlemek için */
       background: #D9D9D9;
       border-radius: 0 0 0 105px;
       min-height: 720px;
       display: flex;
       align-items: center;
       overflow: hidden;
     }

     /* Sol numaralar */
     .ph-numbers .ph-nbtn {
       width: 76px;
       height: 76px;
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       color: #fff;
       font-weight: 700;
       cursor: pointer;
       user-select: none;
       transition: .2s;
       font-size: 24px;
       background: transparent;
     }

     .ph-numbers .ph-nbtn.active {
       background: #1B1B1D;
       color: #fff;
       font-size: 36px;
     }

     .ph-numbers .ph-nbtn:hover {
       transform: translateY(-2px);
     }

     /* Yazı (desktop) */
     .ph-copy .ph-title {
       font-weight: 800;
       letter-spacing: .06em;
       text-transform: uppercase;
       color: #b9aea8;
     }

     .ph-copy .ph-sub {
       letter-spacing: .18em;
       color: rgba(0, 0, 0, .6);
     }

     /* Dots */
     .ph-dot {
       width: 10px;
       height: 10px;
       border-radius: 50%;
       background: #d1c3bd;
       opacity: .6;
     }

     .ph-dot.active {
       opacity: 1;
     }

     .ph-dot:nth-child(2) {
       background: #c8a99b;
     }

     .ph-dot:nth-child(3) {
       background: #9fa2a6;
     }

     /* Orta görsel */
     .ph-main {
       position: relative;
       text-align: center;
     }

     .ph-main img {
       max-height: 420px;
       width: 80%;
       margin: 0 auto;
       object-fit: contain;
       filter: drop-shadow(0 14px 28px rgba(0, 0, 0, .12));
       display: none;
       position: relative;
       z-index: 1;
     }

     .ph-main img.active {
       display: block;
     }

     /* Mobilde görsel arkasındaki büyük başlık */
     .ph-hero-mobile {
       position: absolute;
       top: -10px;
       left: 50%;
       transform: translateX(-50%);
       font-size: 56px;
       font-weight: 800;
       letter-spacing: .06em;
       color: rgba(0, 0, 0, .08);
       text-transform: uppercase;
       pointer-events: none;
       display: none;
       z-index: 0;
     }

     /* Thumbnails (desktop) */
     .ph-thumb {
       width: 214px;
       height: 123px;
       border-radius: 45px;
       overflow: hidden;
       cursor: pointer;
       transition: .2s;
       opacity: .85;
     }

     .ph-thumb img {
       width: 214px;
       height: 123px;
     }

     .ph-thumb:hover {
       transform: translateY(-2px);
     }

     /* ========== MOBILE ========== */
     @media (max-width:991.98px) {
       .ph-bg {
         overflow: visible;
         /* sayılar biraz dışarı taşabilsin */
         padding: 74px 0 18px;
         /* altta sayılar için boşluk */
         min-height: auto;
       }

       .ph-copy {
         display: none !important;
       }

       /* yazı bloğunu gizle */
       .ph-thumbs {
         display: none !important;
       }

       /* thumbnails gizle */

       .ph-main img {
         max-height: 320px;
         width: 85%;
       }

       .ph-hero-mobile {
         display: block;
         top: -74px;
         /* başlığın düşey konumu */
         color: #BAB2AF;
         font-size: 64px;
       }

       /* SAYILAR: görselin ALTINDA, ARKA PLAN YOK */
       .ph-numbers {
         position: absolute;
         left: 50%;
         bottom: -28px;
         transform: translateX(-50%);
         display: flex;
         justify-content: center;
         gap: 12px;
         padding: 0;
         background: transparent;
         border-radius: 0;
         box-shadow: none;
         width: auto;
       }

       .ph-numbers .ph-nbtn {
         width: 56px;
         height: 56px;
         font-size: 16px;
         background: #EFEFF1;
         color: #8A8A90;
       }

       .ph-numbers .ph-nbtn.active {
         background: #1B1B1D;
         color: #fff;
         font-size: 18px;
       }
     }

     /* Sağ thumbnail sütunu: 4 kart görünür, alt ok ile kay */
     .ph-thumbs {
       position: relative;
       --thumb-h: 123px;
       --thumb-gap: 1rem;
       max-height: calc(4 * var(--thumb-h) + 3 * var(--thumb-gap));
       /* overflow: hidden; */
       padding-right: 0;
       align-items: flex-end;
     }

     .ph-thumbs-track {
       display: flex;
       flex-direction: column;
       align-items: flex-end;
       gap: var(--thumb-gap);
       transition: transform .35s ease;
       will-change: transform;
     }

     .ph-thumb {
       flex: 0 0 var(--thumb-h);
     }

     /* her satır sabit yükseklik */

     /* Alttaki ok butonu */
     .ph-thumbs-next {
       position: absolute;
       left: 50%;
       bottom: -22px;
       /* gerekirse -18 / -26 ile ince ayar */
       transform: translateX(-50%);
       width: 44px;
       height: 44px;
       border-radius: 50%;
       background: #fff;
       border: 0;
       box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
       display: flex;
       align-items: center;
       justify-content: center;
       cursor: pointer;
     }

     .ph-thumbs-next:active {
       transform: translateX(-50%) scale(.98);
     }

     /* Sağ thumbnails — kolona sığsın */
     .ph-thumbs {
       align-items: stretch;
     }

     /* genişliği kolona yay */
     .ph-thumb {
       width: 100%;
       max-width: 214px;
       /* büyük ekranda sınır */
       height: var(--thumb-h);
       flex: 0 0 var(--thumb-h);
       margin-left: auto;
       /* sağa yasla (istersen kaldır) */
     }

     .ph-thumb img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       display: block;
     }

     .scroll-row {
       display: grid;
       grid-auto-flow: column;
       grid-auto-columns: clamp(220px, 20vw, 240px);
       /* 5 kart sığacak şekilde */
       gap: 20px;
       overflow-x: auto;
       scroll-snap-type: x mandatory;
       padding: 10px 0 20px 40px;
       -ms-overflow-style: none;
       scrollbar-width: none;
     }

     @media (max-width: 768px) {
       .scroll-row {
         grid-auto-columns: clamp(370px, 20vw, 240px);
       }
          /* sağ taraf */
     .btn-catalog {
     
         padding: 10px !important;
    font-size: 14px;
       
     }
     }

     .scroll-row::-webkit-scrollbar {
       display: none;
     }

     /* Kart */
     .product-card {
       position: relative;
       scroll-snap-align: start;
       border-radius: 22px;
       overflow: hidden;
       transition: transform .2s ease, box-shadow .2s ease;
       height: 460px;
     }

     .product-card:hover {
       transform: translateY(-2px);
       box-shadow: 0 14px 40px rgba(0, 0, 0, .12);
     }

     /* Görsel + oran */
     .card-media {
       position: relative;
       /* aspect-ratio: 3/4; */
       width: 100%;
       height: 460px;
       background-size: cover;
       background-position: center;
     }

     /* Üst-Alt gradient: yazıyı okunur kılar */
     .card-media::before,
     .card-media::after {
       content: "";
       position: absolute;
       left: 0;
       right: 0;
       height: 40%;
       pointer-events: none;
     }

     .card-media::before {
       /* üst */
       top: 0;
       background: linear-gradient(180deg, rgba(0, 0, 0, .35), rgba(0, 0, 0, 0));
     }

     .card-media::after {
       /* alt */
       bottom: 0;
       background: linear-gradient(0deg, rgba(0, 0, 0, .45), rgba(0, 0, 0, 0));
     }

     /* Üst chip */
     .chip {
       position: absolute;
       top: 12px;
       left: 12px;
       font-size: 12px;
       padding: 6px 10px;
       border-radius: 999px;
       backdrop-filter: blur(6px);
       background: #EEEEEE;
       color: #959595;
       font-weight: 600;
     }

     /* Başlık artık üstte chip altında */
     .card-title-overlay {
       position: absolute;
       top: 44px;
       /* chip ile araya biraz boşluk */
       left: 14px;
       right: 14px;
       color: #F5F5F7;
       font-weight: 700;
       line-height: 1.3;
       font-size: clamp(16px, 2vw, 20px);
       text-shadow: 0 2px 8px rgba(0, 0, 0, .35);
     }

     /* Sağ alttaki + butonu */
     .plus-btn {
       position: absolute;
       right: 10px;
       bottom: 10px;
       width: 34px;
       height: 34px;
       border-radius: 50%;
       border: 0;
       background: #333336;
       display: grid;
       place-items: center;
       font-weight: 900;
       line-height: 1;
     }

     /* Ok tuşları */
     .scroll-controls {
       display: flex;
       gap: 10px;
       justify-content: center;
       margin-top: 10px;
     }

     /* Mobil görünüm: ortala */
     @media (max-width: 768px) {
       .scroll-controls {
         justify-content: center;
       }
     }

     .scroll-btn {
       width: 44px;
       height: 44px;
       border-radius: 50%;
       border: none;
       background: #fff;
       display: flex;
       align-items: center;
       justify-content: center;
     }

     .scroll-btn:hover {
       background: #f7f7f7;
     }


     .underline-svg {
       display: block;
       position: absolute;
       bottom: -24px;
       right: 0;
       /* desktop: sağa hizalı */
     }

     @media (max-width: 991.98px) {

       /* Bootstrap lg altı */
       .underline-svg {
         right: auto;
         left: 50%;
         transform: translateX(-50%);
         /* mobil: ortala */
       }
     }

     .about-bg {
       background-color: #F9F9F9;
       border-radius: 111px 111px 0 0;
       overflow: hidden;
       /* radius taşmaları kes */
     }

     /* Bölüm içi dikey boşluk */
     .about-wrap {
       padding: 48px 0;
     }

     @media (max-width: 991.98px) {
       .about-wrap {
         padding: 32px 0;
       }
     }

     /* Görsel stil */
     .about-img {
       width: 100%;
       height: auto;
       border-radius: 24px;
       display: block;
     }

     .about-h1 {
       font-size: 32px;
     }

     .about-p {
       font-size: 24px;
       font-weight: 500;
       text-align: justify;
     }

     /* === KART – TEMİZ VE NİHAİ === */
     .cat-stack {
       position: relative;
       display: block;
       width: 100%;
       height: 320px;
       /* ihtiyaca göre değiştir */
       isolation: isolate;
       overflow: hidden;
     }

     /* Siyah arka plan (hover ile gelsin) */
     .cat-bg {
       position: absolute;
       left: 0;
       right: 0;
       bottom: 0;
       top: 20%;
       /* alt bölüm */
       background: #1a1a1a;
       border-radius: 24px;
       z-index: 1;
       opacity: 0;
       transform: translateY(20px);
       transition: opacity .35s ease, transform .35s ease;
     }

     /* Ürün görseli (her zaman en üstte) */
     .cat-img {
       position: relative;
       z-index: 3;
       text-align: center;
       pointer-events: none;
       /* tıklama linke geçsin */
     }

     .cat-img img {
       /*max-height: 200px;*/
       /*width: 80%;*/
       width: 161px;
       height: 202px;
       object-fit: contain;
       transition: transform .35s ease, box-shadow .35s ease;
     }

     /* Başlık + buton (siyah zeminin üzerinde) */
     .cat-content {
       position: absolute;
       left: 50%;
       transform: translateX(-50%);
       bottom: 26px;
       z-index: 2;
       width: 85%;
       text-align: center;
     }

     .cat-title {
       color: #1A1A1A;
       font-weight: 700;
       font-size: 1.15rem;
       transition: color .25s ease;
     }

     .cat-cta {
       display: inline-block;
       margin-top: .6rem;
       opacity: 0;
       transform: translateY(6px);
       transition: opacity .25s ease, transform .25s ease;
     }

     /* Hover durumları */
     .cat-stack:hover .cat-bg {
       opacity: 1;
       transform: translateY(0);
     }

     .cat-stack:hover .cat-title {
       color: #fff;
     }

     .cat-stack:hover .cat-cta {
       opacity: 1;
       transform: translateY(0);
     }

     .cat-stack:hover .cat-img img {
       transform: scale(1.05);
       box-shadow: 0 10px 25px rgba(0, 0, 0, .3);
     }

     /* Dokunmatik cihazlarda basılı tutma */
     @media (hover: none) {
       .cat-stack:active .cat-bg {
         opacity: 1;
         transform: translateY(0);
       }

       .cat-stack:active .cat-cta {
         opacity: 1;
         transform: translateY(0);
       }

       .cat-stack:active .cat-img img {
         transform: scale(1.05);
       }
     }

     /* Mobil için daha da küçült */
     @media (max-width: 576px) {
       .cat-stack {
         height: 220px;
         /* mobilde daha kısa kart */
       }

       .cat-img img {
         max-height: 120px;
         /* görsel daha küçük */
       }

       .cat-content {
         bottom: 16px;
         /* başlık + buton biraz yukarı */
       }

       .cat-title {
         font-size: 1rem;
         /* başlık biraz küçülür */
       }
     }



     .blog-section {
       padding: 56px 0;
     }

     .blog-lead h2 {
       font-weight: 800;
       letter-spacing: -.3px;
       color: #2c3e50;
     }

     .blog-lead h3 {
       color: #34495e;
     }

     .blog-lead p {
       color: #555;
       max-width: 46ch;
     }

     .scroller-wrap {
       position: relative;
       padding-bottom: 72px;
     }

     .blog-scroller {
       display: grid;
       grid-auto-flow: column;
       grid-auto-columns: var(--card-w);
       gap: var(--gap);
       overflow-x: auto;
       scroll-snap-type: x mandatory;
       scroll-padding-inline: calc((100% - var(--card-w))/2);
       padding-inline: calc((100% - var(--card-w) - 120px)/2);
       /* Sol tarafta kart görünsün diye padding ayarı */
       -ms-overflow-style: none;
       scrollbar-width: none;
     }

     .blog-scroller::-webkit-scrollbar {
       display: none;
     }

     .blog-card {
       position: relative;
       height: 340px;
       border-radius: 16px;
       overflow: hidden;
       background: #e9ecef;
       box-shadow: 0 8px 22px rgba(0, 0, 0, .08);
       scroll-snap-align: center;
       opacity: 0.5;
       transform: scale(0.95);
       transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
     }

     .blog-card.is-active {
       opacity: 1;
       transform: scale(1.05);
       box-shadow: 0 18px 42px rgba(0, 0, 0, 0.25);
       z-index: 2;
     }

     .blog-card .media {
       position: absolute;
       inset: 0;
       background-size: cover;
       background-position: center;
       filter: saturate(.98);
       transition: filter 0.3s ease;
     }

     .blog-card.is-active .media {
       filter: saturate(1.2);
     }

     .blog-card::after {
       content: "";
       position: absolute;
       inset: 0;
       background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .65) 100%);
       transition: background 0.3s ease;
     }

     .blog-card.is-active::after {
       background: linear-gradient(180deg, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, .75) 100%);
     }

     .blog-card .title {
       position: absolute;
       left: 24px;
       right: 70px;
       bottom: 60px;
       color: #fff;
       font-weight: 700;
       line-height: 1.3;
       font-size: clamp(18px, 2.3vw, 24px);
       z-index: 2;
       text-shadow: 0 2px 4px rgba(0, 0, 0, .45);
       transition: all 0.3s ease;
     }

     .blog-card.is-active .title {
       bottom: 70px;
       font-size: clamp(20px, 2.5vw, 26px);
     }

     .blog-card .plus {
       position: absolute;
       right: 20px;
       bottom: 20px;
       z-index: 2;
       width: 40px;
       height: 40px;
       border-radius: 50%;
       display: grid;
       place-items: center;
       background: none !important;
       color: #111;
       border: 0;
       box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
       transition: all 0.3s ease;
     }

     .blog-card.is-active .plus {
       transform: scale(1.1);
       background: #3498db;
       color: white;
     }

     .scroll-controls.bottom-right {
       /* position: absolute; */
       right: 10px;
       bottom: 14px;
       display: flex;
       gap: 12px;
       z-index: 10;
     }


     .scroll-btn[disabled] {
       opacity: .35;
       pointer-events: none;
     }

     .edge-fade {
       position: absolute;
       top: 0;
       bottom: 0;
       width: 60px;
       z-index: 4;
       pointer-events: none;
     }

     .edge-fade.left {
       left: 0;
       /* background: linear-gradient(90deg, #f8f9fa 0%, rgba(248, 249, 250, 0) 100%); */
     }

     .edge-fade.right {
       right: 0;
       /* background: linear-gradient(270deg, #f8f9fa 0%, rgba(248, 249, 250, 0) 100%); */
     }

     @media (max-width: 991.98px) {
       :root {
         --card-w: 60vw;
       }

       .blog-scroller {
         padding-inline: calc((100% - var(--card-w) - 60px)/2);
         /* Mobil için padding ayarı */
       }

       .blog-card {
         height: 300px;
       }
     }

     @media (max-width: 575.98px) {
       .blog-scroller {
         padding-inline: calc((100% - var(--card-w) - 30px)/2);
         /* Küçük mobil için padding ayarı */
       }

       .blog-card {
         height: 260px;
       }

       .blog-card .title {
         left: 18px;
         right: 60px;
         bottom: 50px;
       }
     }

     .card-counter {
       position: absolute;
       top: 20px;
       right: 20px;
       background: rgba(0, 0, 0, 0.7);
       color: white;
       padding: 4px 10px;
       border-radius: 12px;
       font-size: 12px;
       z-index: 3;
     }

     /* ====== ABOUT / INTRO ====== */
     .about-intro {
       position: relative;
       padding-block: 56px;
       /* üst-alt boşluk */
       background: #fff;
     }



     /* Başlık tipografisi */
     .about-title {
       font-weight: 800;
       line-height: 1.05;
       letter-spacing: -.3px;
       margin: 0 0 12px 0;
       text-wrap: balance;
       /* daha dengeli kırılım (destekleyen tarayıcılar için) */
       font-size: clamp(1.9rem, 3.2vw, 3rem);
     }

     /* Paragraf: dar sütun ve daha küçük metin */
     .about-lead {
       color: #555;
       max-width: 52ch;
       /* satır uzunluğu kontrolü */
       font-size: clamp(.95rem, 1.2vw, 1.05rem);
       line-height: 1.5;

     }

     /* Daha geniş ekranlarda solda toparla, sağda boşluk bırak */
     @media (max-width: 992px) {
       .about-intro {
         padding-block: 72px;
       }

       .about-lead {
         margin-top: 8px;
         text-align: center;

       }
     }

     /* Mobilde ortala */
     @media (max-width: 768px) {
       .scroll-controls.bottom-right {
         right: 50%;
         bottom: 12px;
         justify-content: center;
       }
     }

     .footer-hr {
       stroke-width: 2px;
       stroke: #000;
     }

     /* ====== FOOTER STYLE ====== */
     .owb-footer {
       background: #fff;
       color: #2c3e50;
       padding: 48px 0 16px;
     }

     .footer-lead {
       color: #6c757d;
       max-width: 50ch;
       margin: 0;
     }

     .footer-title {
       font-weight: 700;
       letter-spacing: -.2px;
       margin-bottom: .5rem;
       color: #2c3e50;
     }

     .footer-list {
       list-style: none;
       padding: 0;
       margin: 0;
     }

     .footer-list li {
       margin-bottom: .35rem;
     }

     .footer-list a {
       text-decoration: none;
       color: #4a5568;
       line-height: 30px;
     }

     .footer-list a:hover {
       color: #000;
     }

     .footer-list.contact .label {
       font-weight: 600;
       color: #2c3e50;
     }

     /* Request card */
     .request-card {
       background: #fff;
       border-radius: 20px;
       padding: 16px;
       box-shadow: 0 8px 32px rgba(0, 0, 0, .06);
     }

     .request-head strong {
       display: block;
     }

     .request-head small {
       display: block;
       color: #6c757d;
       margin: .25rem 0 .75rem;
       line-height: 1.3;
     }

     .request-form .form-control {
       border-radius: 12px;
       background: #f7f7f7;
       border: 1px solid #eee;
       margin-bottom: .5rem;
     }

     .request-form .btn {
       width: 100%;
     }

     /* Separator */
     .footer-sep {
       border: 0;
       height: 1px;
       background: #eee;
       margin: 28px 0 18px;
     }

     /* Waves */
     .footer-waves {
       position: absolute;
       inset: 0;
       pointer-events: none;
     }



     /* mobilde tamamen kapansın */
     @media (max-width: 768px) {
       .footer-waves {
         display: none;
       }
     }


     /* mobilde (<= 768px) tüm svg'leri kapat */
     @media (max-width: 768px) {
       .footer-waves {
         display: none;
       }
     }

     /* mobilde gerekirse açarız */

     /* Social */
     .social {
       color: #2c3e50;
       opacity: .85;
     }

     .social:hover {
       opacity: 1;
     }

     /* To top */
     .to-top {
       position: fixed;
       right: 18px;
       bottom: 22px;
       width: 44px;
       height: 44px;
       border-radius: 50%;
       border: 1px solid #F0F0F0;
       background: #F0F0F0;
       box-shadow: 0 8px 20px rgba(0, 0, 0, .08);
       display: grid;
       place-items: center;
       z-index: 999;
     }

     @media (max-width: 991.98px) {
       .owb-footer {
         padding-top: 36px;
       }

       .footer-lead {
         max-width: unset;
         margin-bottom: 16px;
       }


     }

     /* İnce dikey çizgi */
     .stick {
       width: 1px;
       /* şerit kalınlığı */
       height: 54px;
       /* şerit boyu */
       background: #000;
       /* renk */
       opacity: .35;
       /* görseldeki gibi hafif */
     }

     /* Mobilde biraz kısaltmak istersen */
     @media (max-width: 768px) {
       .stick {
         height: 36px;
       }
     }

     /* Mobilde formu gizle */
     @media (max-width: 767.98px) {
       .request-card {
         display: none;
       }
     }

     /* Akordeon başlık butonu (sadece mobilde görünür) */
     .footer-acc-btn {
       width: 100%;
       padding: .35rem 0;
       border: 0;
       background: transparent;
       display: flex;
       align-items: center;
       justify-content: space-between;
     }

     .footer-acc-btn .chev {
       transition: transform .2s ease;
     }

     .footer-acc-btn[aria-expanded="true"] .chev {
       transform: rotate(180deg);
     }

     /* Masaüstünde collapse'ları hep açık göster */
     @media (min-width: 768px) {
       .collapse.footer-acc {
         display: block !important;
         height: auto !important;
         visibility: visible !important;
       }

       .footer-acc-btn {
         display: none !important;
       }
     }



     @media (max-width: 767.98px) {
       .stick {
         display: none;
       }

       /* Mobilde yazılar ortalı */
       .intro-text {
         text-align: center;
       }

       /* Logoyu da ortalamak istersen */
       .intro-logo {
         text-align: center;
         margin-bottom: 1rem;
       }
     }

     /* Mobilde legal alanı göster */
     .legal {
       display: none;
       /* masaüstünde gizli */
     }

     @media (max-width: 767.98px) {
       .legal {
         display: flex;
         justify-content: center;
         align-items: center;
         gap: 10px;
         color: #9aa0a6;
         font-size: 0.9rem;
         margin-top: 12px;
       }

       .legal .pipe {
         width: 1px;
         height: 14px;
         background: #cfcfcf;
       }
     }

     /* Mobilde logoyu siyah yap */
     @media (max-width: 991.98px) {
       .brand-logo {
         content: url("../images/black-logo.png");
       }
     }

     .font-size-42 {
       font-size: 42px;
     }

     .product-scene {
       max-width: 1200px;
       margin: 0 auto;
     }

     .product-scene .back-img {
       position: relative;
       z-index: 1;
       height: 400px;
     }

     .product-scene .girl-img {
       position: absolute;
       bottom: 0;
       left: 40%;
       transform: translateX(-50%);
       z-index: 2;
       max-width: 60%;
       /* kadının boyutu */
     }

     .product-scene .cloud {
       position: absolute;
       bottom: 0;
       z-index: 3;
       width: 30%;
       /* bulut boyutu */
       max-width: 260px;
     }

     .product-scene .cloud-left {
       left: 34%;
       transform: translateY(20%);
     }

     .product-scene .cloud-right {
       right: 26%;
       transform: translateY(20%);
     }

     /* Mobil uyum */
     @media (max-width: 768px) {
       .product-scene .girl-img {
         max-width: 80%;
         left: 28%;
       }

       .product-scene .cloud {
         width: 40%;
       }

       .product-scene .cloud-left {
         left: 16%;
       }

       .product-scene .cloud-right {
         right: 12%;
       }

       .product-scene .back-img {
         height: 250px;
       }
     }

     @media (max-width: 576px) {
       .product-scene .girl-img {
         max-width: 100%;
         left: 28%;
       }


     }

     .product-page-card h5 {
       background: #fff;
       display: inline-block;
       padding: 6px 16px;
       border-radius: 999px;
       margin-bottom: 10px;
       font-size: 14px;
     }

     /* Özel oklar */
     .custom-prev,
     .custom-next {
       background: #F6F6F6;
       border-radius: 50%;
       width: 50px;
       height: 50px;
       display: flex;
       align-items: center;
       justify-content: center;
       box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
     }

     .custom-prev {
       left: 20px;
     }

     .custom-next {
       right: 20px;
     }

     .swiper-button-prev:after {
       content: none !important;
     }

     .swiper-button-next:after {
       content: none !important;

     }

     .swiper-button-prev svg {
       width: auto !important;
       height: auto !important;
     }

     .swiper-button-next svg {
       width: auto !important;
       height: auto !important;
     }

     .swiper-slide {
       opacity: 0.4;
       transform: scale(0.85);
       transition: all .3s ease;
       text-align: center;
     }

     .swiper-slide-active {
       opacity: 1 !important;
       transform: scale(1) !important;
       z-index: 5;
     }

     /* Başlık üstte kutu halinde */
     .product-page-card .product-page-title {
       position: absolute;
       top: 10px;
       left: 50%;
       transform: translateX(-50%);
       background: #fff;
       padding: 6px 18px;
       border-radius: 999px;
       font-size: 14px;
       font-weight: 500;
       z-index: 5;
       box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
     }

     /* Kart genel */
     .product-page-card {
       position: relative;
       border-radius: 16px;
       overflow: hidden;
       transition: all .3s ease;
       aspect-ratio: 16/9;
     }

     /* Görseller */
     .product-page-card img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       border-radius: 16px;
     }

     /* Başlık */
     .product-page-title {
       display: inline-block;
       margin: 0 auto 12px;
       background: #EEE;
       padding: 10px 28px;
       border-radius: 999px;
       font-size: 15px;
       font-weight: 500;
       box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
       text-align: center;
     }

     /* Alt buton */
     .product-page-card .overlay {
       position: absolute;
       bottom: 15px;
       right: 15px;
       z-index: 5;
     }

     /* Mobilde biraz daha orantılı ve küçük başlık */
     @media (max-width: 768px) {
       .product-page-card {
         aspect-ratio: 4/3;
         /* mobilde daha dikey görünsün */
       }

       .product-page-title {
         font-size: 13px;
         padding: 8px 20px;
       }
     }

     /* Masaüstü: aynı kalsın, sadece mobilde değiştiriyoruz */
     @media (max-width: 768px) {

       .custom-prev,
       .custom-next {
         position: absolute;
         bottom: -60px;
         /* sliderın altına */
         z-index: 10;
       }

       .custom-prev {
         left: 50%;
         transform: translateX(-120%);
         top: 86%;
       }

       .custom-next {
         right: 50%;
         transform: translateX(120%);
         top: 86%;
       }
     }

     .scroller-wrap {
       overflow: hidden;
       position: relative;
       width: 100%;
       background: #fff;
       padding: 20px 0;
     }

     .scroller {
       display: flex;
       gap: 20px;
       animation: scroll 20s linear infinite;
     }

     .scroller img {
       height: 180px;
       border-radius: 45px;
       flex-shrink: 0;
     }

     /* Normal sağa doğru kayan */
     @keyframes scroll {
       0% {
         transform: translateX(0);
       }

       100% {
         transform: translateX(-50%);
       }
     }

     /* Tersine kayan */
     .reverse {
       animation: reverse-scroll 22s linear infinite;
     }

     @keyframes reverse-scroll {
       0% {
         transform: translateX(-50%);
       }

       100% {
         transform: translateX(0);
       }
     }

     /* Mobilde daha küçük */
     @media (max-width: 768px) {
       .scroller img {
         height: 120px;
       }
     }

     .border-radius-product-inside-page {
       border-radius: 45px;
     }

     /* Kart resmi */
     .card-img-top {
       height: 250px;
       object-fit: cover;
       border-radius: 14px !important;
     }

     /* Mobil düzen */
     @media (max-width: 768px) {
       .card-body {
         flex-direction: column !important;
         text-align: center;
       }

       .card-body .btn {
         margin-top: 10px;
       }

       .border-radius-product-inside-page {
         border-radius: 4px !important;
       }

     }



     /* Load more butonu */
     .load-more-btn {
       background: #f6f6f6;
       border-radius: 50%;
       width: 60px;
       height: 60px;
       display: flex;
       align-items: center;
       justify-content: center;
       margin: 30px auto 0;
       cursor: pointer;
       transition: background .3s ease;
     }

     .load-more-btn:hover {
       background: #e0e0e0;
     }

     .form-bg {
       background-color: #191919;
       /* min-height: 100vh; */
       padding: 60px;
       display: flex;
       flex-direction: column;
       justify-content: center;
     }

     .form-label {
       color: #CCC6C6;
       margin-top: 15px;
       margin-bottom: 5px;
     }

     .btn-send {
       background-color: #EEEEEE !important;
       border-radius: 25px;
       padding: 10px;
       font-weight: 600;
     }

     .form-quest {
       border: 1px solid #FFFFFF;
       border-radius: 25px;
       padding: 10px 20px;
       color: #fff;
       margin-left: 15px;
     }

     .contact-logo-text {
       display: flex;
       align-items: center;
       margin: 30px 0;
     }

     /* Input & textarea stilleri */
     .form-control-contact {
       border-radius: 15px;
       padding: 12px 16px;
       margin-bottom: 15px;
       background-color: #343333;
       color: #fff;
       border: 1px solid #8D8D8D;
     }

     .form-control-contact:focus {
       outline: none;
       box-shadow: 0 0 0 2px #555;
       background-color: #343333;
       color: #fff;
     }

     /* Harita siyah tema */
     .map-wrapper iframe {
       width: 100%;
       height: 100%;
       min-height: 100vh;
       filter: grayscale(100%) invert(100%) contrast(70%);
       border: none;
     }

     /* Mobilde logo + yazı gizle */
     @media (max-width: 991.98px) {
       .contact-logo-text {
         display: none;
       }
     }

     @media (max-width: 767px) {

       .form-bg h1,
       .form-bg p {
         text-align: center;
       }
     }

     .fair-section .hero-video {
       width: 100%;
       height: 360px;
       object-fit: cover;
       display: block;
     }

     @media (max-width: 767px) {
       .fair-section .hero-video {
         height: 250px;
       }
     }

     .fair-section .btn-fairs {
       background-color: #212121 !important;
       color: #EEE;
       border-radius: 45px;
     }

     .fair-section .btn-fairs:hover {
       background-color: #EEE !important;
       color: #212121;
     }

     .fair-section .fairs-img {
       border-radius: 45px;
       width: 100%;
       height: 450px;
       object-fit: cover;
     }

     /* Mobilde düzenleme */
     @media (max-width: 767px) {
       .fair-section .fair-row {
         flex-direction: column-reverse;
       }

       .fair-section .fairs-img {
         border-radius: 0;
         height: auto;
       }

       .fair-section .fair-text {
         margin-bottom: 20px;
         text-align: center;
       }
     }

     /* Mobilde logo + yazı + buton yan yana */
     @media (max-width: 767px) {
       .fair-section .fair-info {
         display: flex;
         align-items: center;
         justify-content: space-between;
         gap: 15px;
         text-align: left;
       }

       .fair-section .fair-info img {
         max-height: 50px;
         width: auto;
       }

       .fair-section .fair-info h2 {
         font-size: 16px;
         margin: 0;
         line-height: 1.2;
       }

       .fair-section .fair-info .btn-fairs {
         white-space: nowrap;
         padding: 6px 14px;
         font-size: 14px;
       }
     }

     .fairs-detail-info .fairs-detail-img {
       max-width: 200px;
       margin-bottom: 20px;
     }

     .fairs-detail-info h2 {
       font-size: 28px;
       font-weight: 700;
       margin-bottom: 20px;
     }

     .fairs-detail-main-img {
       border-radius: 45px;
       width: 100%;
       height: 420px;
       object-fit: cover;
     }

  

     .fairs-detail-stick {
       width: 100%;
       height: 1px;
       background-color: #000;
       /* color yerine background-color */
       margin: 15px 0;
     }

     .fairs-detail-icon-size {
       width: 24px;
       height: 24px;
       margin-right: 4px;
     }

     /* Mobil düzenleme */
     @media (max-width: 767px) {
       .fairs-detail-info {
         text-align: center;
       }

       .fairs-detail-info .fairs-detail-img {
         display: none;
       }

       .fairs-detail-info h2 {
         font-size: 24px;
       }

       .fairs-detail-main-img {
         height: 280px;
         margin-top: 15px;
         border-radius: 0px;
       }

  
       .fairs-detail-stick {
         display: none;
       }
     }

     .font-size-product {
       font-size: 42px;
     }


     @media (max-width: 767px) {
       .none-svg {
         display: none;
       }

       .font-size-product {
         font-size: 32px;
       }

       .btn-product-inside {
         background-color: #FFFFFF !important;
       }

     }

     .btn-product-inside {
       background-color: #EEEEEE;
     }

     .btn-product-inside:hover {
       background-color: #000;
       color: #FFFFFF;
     }

     .news-top-banner {
       background-color: #d9d9d961;
       border-radius: 25px;
       padding: 60px 30px;
       text-align: center;
     }

     .news-top-banner h1 {
       font-size: 42px;
       margin-bottom: 20px;
       color: #121212;
     }

     .news-top-banner p {
       font-size: 22px;
       max-width: 600px;
       margin: 0 auto;
       color: #777;
     }

     /* Mobil */
     @media (max-width: 576px) {
       .news-top-banner {
         border-radius: 0;
         padding: 40px 15px;
       }

       .news-top-banner h1 {
         font-size: 28px;
       }

       .news-top-banner p {
         font-size: 16px;
       }
     }

     .news-item {
       border-radius: 20px;
     }

     .news-img {
       width: 100%;
       object-fit: cover;
       border-radius: 20px;
     }

     .news-content {
       padding: 40px 30px;
       display: flex;
       flex-direction: column;
       justify-content: center;
     }

     .news-content h1 {
       font-size: 26px;
       font-weight: 700;
       margin-bottom: 15px;
       color: #121212;
     }

     .news-content p {
       font-size: 16px;
       color: #555;
       margin-bottom: 20px;
       line-height: 1.6;
     }

     .news-meta {
       font-size: 14px;
       color: #888;
       margin-bottom: 15px;
     }

     .btn-read {
       background-color: #f3f3f3;
       color: #121212;
       border-radius: 50px;
       padding: 10px 10px;
       font-size: 15px;
       font-weight: 500;
       border: none;
       transition: all 0.3s ease;
     }

     .btn-read:hover {
       background-color: #ddd;
     }

     /* Mobil */
     @media (max-width: 768px) {
       .news-img {
         border-radius: 20px 20px 0 0;
         height: 220px;
       }

       .news-content {
         padding: 20px;
         text-align: center;
         align-items: center;
       }

       .news-content h1 {
         font-size: 20px;
       }
     }

     /* Meta kontrolleri */
     .mobile-meta {
       display: none;
       margin: 10px 0;
       padding-left: 10px;
     }

     @media (max-width: 768px) {
       .mobile-meta {
         display: block;
       }

       .desktop-meta {
         display: none;
       }
     }

     .new-title {
       font-size: 28px;
       font-weight: 700;
       margin-bottom: 40px;
     }

     .new-card {
       border-radius: 20px;
       overflow: hidden;
       transition: all 0.4s ease;
       cursor: pointer;
     }

     .new-card img {
       width: 100%;
       height: 380px;
       object-fit: inherit;
     }

     .new-card-body {
       padding: 20px;
     }

     .new-card-body h5 {
       font-size: 18px;
       font-weight: 700;
       margin-bottom: 12px;
       color: #121212;
     }

     .new-card-body p {
       font-size: 15px;
       color: #555;
       line-height: 1.5;
     }

     /* Hover efekti */
     .new-card:hover {
       background: #f5f5f5;
       transform: rotate(-4deg) scale(1.01);
     }

     .navbar {
       position: relative;
       z-index: 999;
     }

     .nav-item.dropdown {
       position: relative;
       z-index: 1000;
     }

     .dropdown-menu-custom {
       display: none;
       position: absolute;
       top: 100%;
       left: 0;
       background: white;
       min-width: 220px;
       list-style: none;
       margin: 0;
       padding: 10px 0;
       box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
       z-index: 2000;
     }

     .nav-item.dropdown:hover .dropdown-menu-custom {
       display: block;
     }

     .dropdown-menu-custom li a {
       display: flex;
       justify-content: space-between;
       align-items: center;
       padding: 10px 20px;
       color: #888;
       text-decoration: none;
       transition: all 0.2s ease;
     }

     /* Hover efekti */
     .dropdown-menu-custom li a:hover {
       color: black;
       background-color: #f5f5f5;
       border-radius: 4px;
     }

     .dropdown-menu-custom li a::after {
       content: "";
       display: inline-block;
       width: 15px;
       height: 15px;
       background-image: url("../images/dropdown-icon.png");
       background-size: contain;
       background-repeat: no-repeat;
       background-position: center;
       margin-left: 8px;
       transition: transform 0.2s ease, filter 0.2s ease;
     }

     .dropdown-menu-custom li a:hover::after {
       filter: brightness(0);
       transform: translateX(3px);
     }

     .nav-link {
       position: relative;
       display: inline-flex;
       align-items: center;
       gap: 6px;
     }

     .nav-link .nav-arrow {
       display: inline-block;
       width: 10px;
       height: 10px;
       background-image: url("../images/arrow-up.png");
       background-size: contain;
       background-repeat: no-repeat;
       background-position: center;
       transition: transform 0.3s ease;
     }

     .nav-link:hover .nav-arrow {
       transform: rotate(180deg);
     }

     .menu-list {
       display: flex;
       flex-direction: column;
     }

     .list-group-item {
       display: flex;
       justify-content: space-between;
       align-items: center;
       padding: 12px 16px;
       color: #fff;
       text-decoration: none;
     }

     .submenu {
       max-height: 0;
       overflow: hidden;
       background: rgba(255, 255, 255, 0.05);
       transition: max-height 0.3s ease;
     }

     .submenu.open {
       max-height: 200px;
       /* yeterli bir yükseklik */
     }

     .submenu-item {
       display: block;
       padding: 10px 24px;
       font-size: 14px;
       color: #ddd;
       text-decoration: none;
     }

     .submenu-item:hover {
       color: #fff;
     }

     /* Ok animasyonu */
     .menu-arrow {
       transition: transform 0.3s ease;
     }

     .menu-arrow.rotate {
       transform: rotate(90deg);
     }


     .product-section {
       position: relative;
       max-width: 1200px;
       margin: 0 auto;
       border-radius: 20px;
       overflow: hidden;
     }
         @media (max-width: 768px) {
       .product-section {
         overflow: visible !important;
       }
     }


     .product-image {
       display: block;
       width: 100%;
       border-radius: 20px;
     }

     /* Marker */
     .marker {
       position: absolute;
       transform: translate(-50%, -50%);
       width: 28px;
       height: 28px;
       border-radius: 50%;
       background: white;
       border: 3px solid #666;
       display: flex;
       align-items: center;
       justify-content: center;
       cursor: pointer;
       z-index: 2;
       box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
     }

     .marker::after {
       content: "";
       width: 10px;
       height: 10px;
       background: #666;
       border-radius: 50%;
     }

     /* Açılan kart */
     .marker-card {
       position: absolute;
       top: calc(50% + 40px);
       left: 50%;
       transform: translateX(-50%) scale(0.9);
       background: white;
       border-radius: 10px;
       padding: 10px;
       width: 160px;
       box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
       text-align: center;
       opacity: 0;
       pointer-events: none;
       transition: all 0.3s ease;
       z-index: 3;
     }

     .marker-card img {
       width: 100%;
       border-radius: 6px;
     }

     .marker-card a {
       display: block;
       margin-top: 6px;
       font-size: 14px;
       font-weight: 600;
       text-decoration: none;
       color: #333;
     }

     /* Hover olunca görünür */
     .product-section:hover .marker-card,
     .marker:hover+.marker-card,
     .marker-card:hover {
       opacity: 1;
       transform: translateX(-50%) scale(1);
       pointer-events: auto;
     }

     @media (max-width: 768px) {
       .marker {
         width: 22px;
         height: 22px;
         border-width: 2px;
       }

       .marker::after {
         width: 8px;
         height: 8px;
       }

   

       .marker-card a {
         font-size: 13px;
       }
     }

     /* Show Products Butonu */
     .show-products-btn {
       position: absolute;
       bottom: 15px;
       left: 15px;
       display: flex;
       align-items: center;
       gap: 8px;
       background: white;
       padding: 8px 14px;
       border-radius: 30px;
       box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
       font-size: 14px;
       font-weight: 500;
       text-decoration: none;
       color: #000;
       transition: all 0.3s ease;
       z-index: 4;
     }

     .show-products-btn:hover {
       box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
       transform: translateY(-2px);
     }

     .show-products-btn img {
       width: 18px;
       height: 18px;
     }


     .banner-title {
       font-size: 34px;
       width: 800px;
       font-weight: 400;
     }

     @media (max-width: 768px) {
       .show-products-btn {
         bottom: 10px;
         left: 10px;
         padding: 6px 12px;
         font-size: 13px;
       }

       .show-products-btn img {
         width: 16px;
         height: 16px;
       }

       .banner-title {
         font-size: 18px;
         width: auto;
         font-weight: 400;
       }
     }

     .hero-section {
       position: relative;
       width: 100%;
       height: 80vh;
       overflow: hidden;
     }

     /* SLIDE WRAPPER for sliding effect */
     .hero-slides-wrapper {
       display: flex;
       width: 100%;
       height: 100%;
       transition: transform 1s ease-in-out;
     }

     .hero-slide {
       flex: 0 0 100%;
       height: 100%;
       position: relative;
     }

     .hero-background img {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       object-fit: cover;
     }



     .hero-indicators span {
       position: relative;
       width: 36px;
       height: 36px;
       border-radius: 50%;
       background: rgba(255, 255, 255, 0.4);
       display: flex;
       align-items: center;
       justify-content: center;
       font-weight: bold;
       font-size: 14px;
       cursor: pointer;
       color: #fff;
     }

     /* Progress circle effect */
     .hero-indicators span::after {
       content: "";
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       border: 3px solid transparent;
       border-radius: 50%;
       box-sizing: border-box;
       border-top-color: #007bff;
       transform: rotate(-90deg);
       transform-origin: center;
     }

     .hero-indicators span.active::after {
       animation: spin 5s linear forwards;
     }

     @keyframes spin {
       from {
         transform: rotate(-90deg);
       }

       to {
         transform: rotate(270deg);
       }
     }


     .hero-content {
       position: relative;
       z-index: 2;
       display: flex;
       justify-content: space-between;
       align-items: center;
       height: 100%;
       padding: 0 80px;
     }

     .hero-text {
       color: white;
     }

     .hero-title {
       font-size: 72px;
       font-weight: 700;
       margin: 0;
     }

     .hero-subtitle {
       font-size: 24px;
       opacity: 0.8;
       margin: 0;
       text-transform: uppercase;
       letter-spacing: 8px;
     }

     /* Wrapper ve slide düzeni (translateX ile kaydırma için) */
     .hero-section {
       overflow: hidden;
     }

     .hero-slides-wrapper {
       display: flex;
       width: 100%;
       transition: transform 0.6s ease;
       /* slider geçiş süresi */
       will-change: transform;
     }

     .hero-slide {
       flex: 0 0 100%;
       min-width: 100%;
       box-sizing: border-box;
       position: relative;
     }

     /* Buton başlangıç durumu ve animasyon sınıfı */
     .hero-button {
       opacity: 0;
       transform: translateX(-50px);
       /* dikkat: display: none kullanma — animasyon çalışmaz */
     }

     .hero-button.animate {
       animation: slideInLeft 3s ease-out forwards;
     }

     @keyframes slideInLeft {
       from {
         opacity: 0;
         transform: translateX(-50px);
       }

       to {
         opacity: 1;
         transform: translateX(0);
       }
     }

     /* İsteğe bağlı: indicator aktif görünümü */
     .hero-indicators button.active {
       /* örnek */
       font-weight: 700;
     }


     .hero-button a {
       background: rgba(255, 255, 255, 0.7);
       border: none;
       padding: 12px 20px;
       border-radius: 30px;
       cursor: pointer;
       font-weight: 500;
       display: flex;
       align-items: center;
       gap: 8px;
       box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
       transition: background 0.3s ease;
       backdrop-filter: blur(5px);
       color: #000;
     }

     .hero-button button:hover {
       background: #f5f5f5;
     }

     @media (max-width: 768px) {
       .hero-section {
         height: 750px;
         display: flex;
         flex-direction: column;
       }

       .hero-content {
         flex: 1;
         flex-direction: column;
         justify-content: flex-end;
         align-items: center;
         padding: 0 20px 200px;
         text-align: center;
         gap: 14px;
       }

       .hero-title {
         font-size: 42px;
       }

       .hero-subtitle {
         font-size: 16px;
         letter-spacing: 4px;
       }

       .hero-button button {
         padding: 10px 16px;
         font-size: 14px;
       }

       .hero-indicators {
         top: 10px;
         left: 50%;
         transform: translateX(-50%);
       }

       .hero-indicators {
         left: 50% !important;
       }
     }

     /* @media (max-width: 480px) {
       .hero-section {
         height: 320px;
       }

       .hero-title {
         font-size: 32px;
       }

       .hero-subtitle {
         font-size: 14px;
         letter-spacing: 3px;
       }

       .hero-button button {
         font-size: 13px;
         padding: 8px 14px;
       }

       .hero-indicators {
         left: 50% !important;
       }
     } */

     .hero-indicators {
       position: absolute;
       left: 20px;
       top: 20px;
       display: flex;
       gap: 12px;
       z-index: 10;
     }

     .hero-indicators button {
       position: relative;
       width: 36px;
       height: 36px;
       border: none;
       background: rgba(255, 255, 255, 0.4);
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       font-weight: bold;
       font-size: 14px;
       color: #fff;
       cursor: pointer;
       overflow: hidden;
     }

     .progress-ring {
       position: absolute;
       top: 0;
       left: 0;
       width: 36px;
       height: 36px;
       transform: rotate(-90deg);
       pointer-events: none;
     }

     .progress-ring circle {
       fill: none;
       stroke: #FFFFFF;
       stroke-width: 6;
       stroke-dasharray: 113;
       /* 2πr, r = 18px -> 2π*18 ≈ 113 */
       stroke-dashoffset: 113;
       transition: stroke-dashoffset linear;
     }

     .hero-indicators button.active .progress-ring circle {
       stroke-dashoffset: 0;
       transition: stroke-dashoffset 5s linear;
     }

     /* Başlangıç durumu */
     .scroll-animate {
       opacity: 0;
       transform: translateY(30px);
       transition: opacity 0.8s ease-out, transform 0.8s ease-out;
     }

     /* Göründüğünde animasyon başlar */
     .scroll-animate.visible {
       opacity: 1;
       transform: translateY(0);
     }

     /* Soldan giriş */
     .scroll-animate.slide-in-left {
       transform: translateX(-50px);
     }

     .scroll-animate.slide-in-left.visible {
       transform: translateX(0);
     }

     /* Sağdan giriş */
     .scroll-animate.slide-in-right {
       transform: translateX(-50px);
     }

     .scroll-animate.slide-in-right.visible {
       transform: translateX(0);
     }

     /* Thumbnail görseller */
     .product-thumbs {
       margin-top: 15px;
       display: flex;
       gap: 12px;
       flex-wrap: wrap;
       justify-content: center;
     }

     .product-thumbs img {
       width: auto;
       height: 80px;
       object-fit: cover;
       border-radius: 12px;
       cursor: pointer;
       transition: transform 0.2s ease, border 0.2s ease;
       border: 2px solid transparent;
     }

     @media (max-width: 768px) {
       .product-thumbs img {
         width: 80px;
         height: 80px;
         object-fit: contain;
       }

       .font-size-product-title {
         font-size: 40px !important;
         font-weight: 700;
       }
     }

     .product-thumbs img:hover {
       transform: scale(1.05);
       border-color: #ddd;
     }

     .product-thumbs img.active {
       border-color: #000;
     }

     .product-main img {
       border-radius: 24px;
       cursor: pointer;
       width: 100%;
       max-width: 100%;
     }

     .font-size-product-title {
       font-size: 60px;
       color: #1D1D1F;
     }

     .font-size-24 {
       font-size: 24px;
     }

     .btn-custom {
       background-color: #D9D9D9;
       color: #000;
       font-weight: 500;
       transition: all 0.2s ease;
     }

     .btn-custom.active {
       background-color: #2C2C2C;
       color: #fff;
     }

     .btn-custom:hover {
       background-color: #bfbfbf;
       color: #000;
     }

     .hero-title,
     .hero-subtitle {
       opacity: 0;
       transform: translateX(-50px);
     }

     .hero-title.animate {
       animation: slideInLeft 1s ease-out forwards;
       animation-delay: 0.2s;
     }

     .hero-subtitle.animate {
       animation: slideInLeft 1s ease-out forwards;
       animation-delay: 0.8s;
     }



     @keyframes slideInLeft {
       from {
         opacity: 0;
         transform: translateX(-50px);
       }

       to {
         opacity: 1;
         transform: translateX(0);
       }
     }

     #menuBtn {
       border-radius: 50%;
       /* dairesel olsun */
       padding: 10px;
       transition: background-color 0.3s ease;
     }

     #menuBtn:hover {
       background-color: #000 !important;
       /* arka plan dark */
     }

     #menuBtn #menu-icon {
       content: url("../images/menu-icon-black.svg");
       transition: content 0.3s ease;
     }

     #menuBtn:hover #menu-icon {
       content: url("../images/menu-icon-white.svg");
     }

     .modal {
       display: none;
       position: fixed;
       z-index: 9999;
       left: 0;
       top: 0;
       width: 100%;
       height: 1080px;
       overflow: auto;
       background-color: rgba(0, 0, 0, 0.6);
     }

     .modal-content {
       background-color: #fff;
       margin: 10% auto;
       padding: 30px;
       border-radius: 8px;
       width: 100%;
       max-width: 480px;
       position: relative;
       box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
     }

     .modal h3 {
       margin-bottom: 20px;
       font-size: 22px;
       text-align: center;
     }

     .modal input,
     .modal textarea {
       width: 100%;
       padding: 12px;
       margin-bottom: 15px;
       border-radius: 5px;
       border: 1px solid #ccc;
       font-size: 14px;
       box-sizing: border-box;
     }

     .modal textarea {
       resize: none;
       height: 80px;
     }

     .modal button {
       width: 100%;
       padding: 12px;
       border: none;
       background-color: #333a42;
       color: #fff;
       font-size: 14px;
       border-radius: 5px;
       cursor: pointer;
     }

     .modal button:hover {
       background-color: #555;
     }

     .close {
       position: absolute;
       top: 12px;
       right: 15px;
       font-size: 20px;
       font-weight: bold;
       cursor: pointer;
     }


     .carousel-item-new img {
       height: 400px;
       object-fit: cover;
     }

     .product-title-new {
       font-weight: 700;
       margin-bottom: 10px;
       color: #6C6B67;
       font-size: 42px;
     }

     .product-category-new {
       font-weight: 400;
       color: #6C6B67;
       font-size: 24px;
       border-left: 1px solid;
     }

     .product-description-new {
       font-size: 15px;
       line-height: 1.6;
       color: #555;
       margin-bottom: 20px;
     }

     .product-btn-new {
       background: #6C6B67;
       color: #fff;
       border: none;
       padding: 12px 25px;
       border-radius: 6px;
       font-weight: 500;
       transition: background 0.3s;
     }

     .product-btn-new:hover {
       background: #111;
     }


     @media (max-width: 768px) {
       .carousel-item-new img {
         height: 300px;
       }

       .product-title-new {
         font-size: 24px;
       }
     }

     @media (max-width: 576px) {
       .carousel-item-new img {
         height: 250px;
       }

       .product-title-new {
         font-size: 22px;
       }
     }

     .myProductSlider .swiper-slide {
       opacity: 0.4;
       transition: opacity 0.3s ease;
     }

     .myProductSlider .swiper-slide-active {
       opacity: 1;
     }

     /* Video arka plan */
     #background-video {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       object-fit: cover;
       z-index: -1;
       /* Kartın arkasında kalması için */
     }

     /* Modal Arka Plan */
     .custom-modal {
       display: none;
       /* Başlangıçta gizli */
       position: fixed;
       inset: 0;
       background: rgba(0, 0, 0, 0.7);
       z-index: 9999;
       justify-content: center;
       align-items: center;
       padding: 20px;
     }

     /* Modal İçerik */
     .custom-modal-content {
       background: #000;
       border-radius: 16px;
       max-width: 900px;
       width: 100%;
       box-shadow: 0 10px 40px rgba(0, 0, 0, 0.7);
       position: relative;
       overflow: hidden;
     }

     /* Video Alanı */
     .custom-video-wrapper {
       position: relative;
       width: 100%;
       padding-bottom: 56.25%;
       /* 16:9 oranı */
       height: 0;
     }

     .custom-video-wrapper iframe {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       border: none;
     }

     /* Kapatma Butonu */
     .custom-close-btn {
       position: absolute;
       top: 12px;
       right: 12px;
       background: rgba(255, 255, 255, 0.8);
       border: none;
       border-radius: 50%;
       width: 32px;
       height: 32px;
       font-size: 20px;
       cursor: pointer;
       z-index: 10;
       transition: background 0.3s ease;
     }

     .custom-close-btn:hover {
       background: #fff;
     }

     /* Ana içerik */
     .blog-detail-page-content {
       padding: 60px 0;
     }

     .blog-detail-page-article {
       background: #fff;
       border-radius: 12px;
       overflow: hidden;
       box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
       margin-bottom: 40px;
     }

     .blog-detail-page-image-wrapper {
       position: relative;
     }

     .blog-detail-page-image-wrapper img {
       width: 100%;
       display: block;
     }

     .blog-detail-page-date {
       position: absolute;
       bottom: 15px;
       left: 15px;
       background: #ff4444;
       color: #fff;
       padding: 8px 12px;
       border-radius: 8px;
       text-align: center;
       font-weight: bold;
     }

     .blog-detail-page-date .day {
       display: block;
       font-size: 18px;
     }

     .blog-detail-page-date .month {
       font-size: 12px;
     }

     /* Blog gövdesi */
     .blog-detail-page-body {
       padding: 25px;
     }

     .blog-detail-page-meta {
       display: flex;
       gap: 20px;
       font-size: 14px;
       color: #666;
       margin-bottom: 20px;
     }

     .blog-detail-page-meta i {
       margin-right: 5px;
       color: #ff4444;
     }

     .blog-detail-page-description {
       font-size: 16px;
       line-height: 1.7;
       color: #333;
     }

     /* Sidebar */
     .blog-detail-page-sidebar .blog-detail-page-widget {
       background: #fff;
       padding: 20px;
       border-radius: 12px;
       box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
       margin-bottom: 25px;
     }

     .blog-detail-page-search form {
       display: flex;
       gap: 10px;
     }

     .blog-detail-page-search input {
       flex: 1;
       padding: 10px;
       border-radius: 8px;
       border: 1px solid #ddd;
     }

     .blog-detail-page-search button {
       background: #ff4444;
       border: none;
       color: #fff;
       padding: 0 15px;
       border-radius: 8px;
       cursor: pointer;
     }

     .blog-detail-page-recent ul {
       list-style: none;
       padding: 0;
       margin: 0;
     }

     .blog-detail-page-recent li {
       display: flex;
       gap: 10px;
       margin-bottom: 15px;
     }

     .blog-detail-page-recent img {
       width: 60px;
       height: 60px;
       object-fit: cover;
       border-radius: 8px;
     }

     .blog-detail-page-recent a {
       font-size: 14px;
       font-weight: 600;
       color: #333;
       text-decoration: none;
     }

     .blog-detail-page-tags .tags {
       display: flex;
       flex-wrap: wrap;
       gap: 8px;
     }

     .blog-detail-page-tags a {
       display: inline-block;
       background: #f4f4f4;
       padding: 6px 12px;
       border-radius: 20px;
       font-size: 13px;
       color: #333;
       text-decoration: none;
       transition: background 0.3s;
     }

     .blog-detail-page-tags a:hover {
       background: #2C2C2C;
       color: #fff;
     }

     /* Related Products */
     .related-products {
       background: #f9f9f9;
       border-top: 1px solid #eee;
     }

     .related-products-title {
       font-size: 28px;
       font-weight: 700;
       color: #333;
     }

     .related-product-card {
       background: #fff;
       border-radius: 16px;
       overflow: hidden;
       box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
       transition: transform 0.3s ease, box-shadow 0.3s ease;
     }

     .related-product-card:hover {
       transform: translateY(-6px);
       box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
     }

     .related-product-img-wrapper {
       position: relative;
       padding-top: 70%;
       /* kareye yakın oran */
       overflow: hidden;
     }

     .related-product-img {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       object-fit: cover;
       transition: transform 0.4s ease;
     }

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

     .related-product-body {
       padding: 15px;
     }

     .related-product-name a {
       font-size: 18px;
       font-weight: 600;
       color: #222;
       text-decoration: none;
     }

     .related-product-name a:hover {
       color: #2C2C2C;
     }

     .related-product-category {
       font-size: 14px;
     }

     .btn-related {
       display: inline-block;
       padding: 8px 18px;
       border-radius: 30px;
       background: #2C2C2C;
       color: #fff;
       font-size: 14px;
       font-weight: 500;
       text-decoration: none;
       transition: background 0.3s ease;
     }

     .btn-related:hover {
       background: #FFFFFF;
       color: #2C2C2C;
       border: 1px solid #2C2C2C
     }

     .btn-download {
       background-color: #343a40;
       border: 1px solid #343a40;
     }

     .btn-download:hover {
       background-color: #23272b;
       box-shadow: 0 4px 15px rgba(0, 0, 0, .4);
       transform: translateY(-2px);
     }