/* ==========================================================================
   DAYMIX KİMYA — Özel Tasarım Sistemi
   ---------------------------------------------------------------------
   Bu dosya eski "Flexin" temasının üzerine, sanayi/kimya sektörüne uygun
   kompakt ve profesyonel bir görsel kimlik uygular. style.css'ten SONRA
   yüklenmelidir (bkz. header.php).

   Tasarım mantığı: bu bir teknik kimya/kaplama üreticisi. İçerik zaten
   teknik veri fişleri (Uygulama / Sarfiyat / Ambalaj / Depolama) —
   imza öğesi bu veri fişlerini bir "varil etiketi" / teknik fiş estetiğiyle
   sunmaktır. Renk paleti: çelik/grafit + amber uyarı rengi (endüstriyel
   varil/etiket renklerinden ilham), 3 ürün grubunun kendi kimlik renkleri
   korunur.
   ========================================================================== */

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

:root{
  /* --- Renk jetonları --- */
  --dx-ink:        #14181e;   /* ana metin / en koyu zemin */
  --dx-steel:       #202b38;  /* header / footer zemini */
  --dx-steel-2:     #2c3a4a;  /* hover / ikincil koyu */
  --dx-paper:       #eef0f1;  /* açık zemin (krem DEĞİL, soğuk gri) */
  --dx-paper-2:     #ffffff;
  --dx-line:        #d7dce0;  /* çizgi / kenarlık */
  --dx-muted:       #5b6673;  /* ikincil metin */
  --dx-accent:      #3158fd;  /* SİTE ANA RENGİ */
  --dx-accent-dark: #1f3fd6;
  --dx-accent-text: #ffffff;  /* accent zemin üzerindeki metin rengi */

  /* --- Ürün grubu kimlik renkleri (korunuyor) --- */
  --dx-grp-sanayi:  #c31627;
  --dx-grp-zemin:   #0356a3;
  --dx-grp-izolasyon:#6b7680;

  /* --- Tipografi --- */
  /* NOT: "Korolev Condensed" ücretli/lisanslı bir fonttur, Google Fonts'ta yok.
     Font dosyalarınız varsa assets/fonts/ içine ekleyip aşağıdaki @font-face'i
     açın; o zamana kadar "Oswald" (ücretsiz, benzer karakterli condensed sans)
     yedek olarak kullanılıyor. */
  /*
  @font-face{
    font-family: "Korolev Condensed";
    src: url("assets/fonts/KorolevCondensed-Regular.woff2") format("woff2");
    font-weight: 400 700; font-display: swap;
  }
  */
  --dx-font-display: "Korolev Condensed", "Oswald", sans-serif;
  --dx-font-body:     "Urbanist", sans-serif;
  --dx-font-mono:     "IBM Plex Mono", ui-monospace, monospace;

  --dx-radius: 3px;
}

/* ==========================================================================
   1) TEMEL / GENEL
   ========================================================================== */
body{
  font-family: var(--dx-font-body) !important;
  color: var(--dx-ink);
  background: var(--dx-paper-2);
}

h1, h2, h3, h4, h5, h6,
.hs-title-1, .sec-title, .sec-sub-title{
  font-family: var(--dx-font-display) !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
  color: var(--dx-ink);
}

a{ transition: color .15s ease, background-color .15s ease, border-color .15s ease; }

/* Kompakt bölüm boşlukları (eski şablon çok cömert boşluk bırakıyordu) */
.page-padding{
  padding-top: 64px !important;
  padding-bottom: 64px !important;
}
@media (max-width: 991px){
  .page-padding{ padding-top: 44px !important; padding-bottom: 44px !important; }
}

/* Eski temanın dekoratif petek/pattern görselleri — yeni kimlikte kullanılmıyor */
.pattern-1, .pattern-2{ display: none !important; }

/* ==========================================================================
   2) ÜST BİLGİ ÇUBUĞU / NAVİGASYON
   ========================================================================== */
.header{
  background: var(--dx-steel) !important;
  padding: 0 !important;
  border-bottom: 3px solid var(--dx-accent);
  position: sticky !important;
  top: 0;
  z-index: 999;
}
.header.header-transparent{ background: var(--dx-steel) !important; }
.header .navigation{ padding: 10px 0; }

.nav-brand.text-logo img{ max-height: 48px; width: auto; }

.nav-menu > li > a{
  font-family: var(--dx-font-body) !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #fff !important;
  padding: 8px 14px !important;
}
.nav-menu > li > a:hover,
.nav-menu > li.active > a{
  color: var(--dx-accent) !important;
}
.nav-menu .submenu-indicator{ opacity: .6; }

.nav-dropdown, .nav-dropdown.mega-menu{
  background: #fff !important;
  border-radius: var(--dx-radius) !important;
  border: 1px solid var(--dx-line) !important;
  box-shadow: 0 12px 28px rgba(20,24,30,.14) !important;
}
.nav-dropdown li a{
  font-family: var(--dx-font-body) !important;
  font-size: 14px !important;
  color: var(--dx-ink) !important;
  font-weight: 500 !important;
}
.nav-dropdown li a:hover{ color: var(--dx-accent-dark) !important; }

.mega-menu .img-caret{ border-radius: var(--dx-radius) !important; }

.language .current{
  font-family: var(--dx-font-mono) !important;
  font-size: 12px;
  color: #fff;
  border: 1px solid rgba(255,255,255,.35);
  padding: 3px 8px;
  border-radius: var(--dx-radius);
}
.language .other a{ color: var(--dx-ink) !important; }

.add-listing.light a{
  background: var(--dx-accent) !important;
  color: var(--dx-accent-text) !important;
  font-weight: 700 !important;
  font-size: 12.5px !important;
  letter-spacing: .03em;
  border-radius: 100px !important;
  padding: 8px 14px !important;
}
.add-listing.light a svg path{ stroke: var(--dx-accent-text) !important; }
.add-listing.light a:hover{ background: var(--dx-accent-dark) !important; }

/* ==========================================================================
   3) HERO / SAYFA BAŞLIĞI (breadcrumb bölümü — tüm iç sayfalarda kullanılıyor)
   ========================================================================== */
.home-section.bg-dark-1{
  background-color: var(--dx-steel) !important;
  background-blend-mode: multiply;
  padding-top: 0 !important;
}
.home-section .position-absolute.opacity-07,
.home-section .bg-gradient-dark{
  background: linear-gradient(100deg, rgba(20,24,30,.92) 0%, rgba(32,43,56,.75) 55%, rgba(32,43,56,.35) 100%) !important;
  opacity: 1 !important;
}
.home-section .home-content{
  text-align: left !important;
  padding: 46px 0 !important;
}
.home-section .row .col-md-8.offset-md-2{
  margin: 0 !important;
  max-width: 100%;
  flex: 0 0 100%;
}
.home-section .hs-title-1{
  font-size: clamp(22px, 1vw, 36px) !important;
  text-transform: none;
  letter-spacing: .01em;
  border-left: 4px solid var(--dx-accent);
  padding-left: 12px;
  margin: 0 !important;
}
.home-section .hs-title-1 span{ color: #fff !important; }

/* ==========================================================================
   4) DÜĞMELER
   ========================================================================== */
.btn, .primary-btn2, .theme-btn{
  border-radius: var(--dx-radius) !important;
  font-family: var(--dx-font-body) !important;
  font-weight: 700 !important;
  letter-spacing: .02em;
  text-transform: uppercase;
  font-size: 13px !important;
}
.btn-white{
  background: #fff0 !important;
    color: #ffffff !important;
    border: 2px solid #fff !important;
    border-radius: 45px !important;
}
.btn-white:hover{
  background: var(--dx-accent) !important;
  border-color: var(--dx-accent) !important;
  color: var(--dx-accent-text) !important;
}
.primary-btn2{
  background: var(--dx-steel) !important;
  color: #fff !important;
  border: none !important;
}
.primary-btn2:hover{ background: var(--dx-accent) !important; color: var(--dx-accent-text) !important; }

/* ==========================================================================
   5) ÜRÜN GRUBU / ALT KATEGORİ KARTLARI (service-block-two)
   ========================================================================== */
.service-block-two .inner-box{
  background: #fff;
  border: 1px solid var(--dx-line);
  border-top: 3px solid var(--dx-steel);
  border-radius: var(--dx-radius);
  box-shadow: none !important;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.service-block-two .inner-box:hover{
  transform: translateY(-3px);
  border-top-color: var(--dx-accent);
  box-shadow: 0 14px 26px rgba(20,24,30,.10) !important;
}
.service-block-two .image-box{
  border-radius: 0 !important;
  overflow: hidden;
}
.service-block-two .image-box figure.image img{
  filter: saturate(.96);
}
.service-block-two .icon-box{
  background: var(--dx-paper) !important;
  border: 1px solid var(--dx-line);
  border-radius: 50% !important;
}
.service-block-two .overlay-icon a{
  background: var(--dx-ink) !important;
}
.service-block-two .lower-content{
  padding: 16px 18px 20px !important;
}
.service-block-two .lower-content h3{
  font-size: 17px !important;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.service-block-two .lower-content h3 a{ color: var(--dx-ink) !important; }
.service-block-two .lower-content p{
  font-size: 13.5px;
  color: var(--dx-muted);
  margin-top: 6px;
}

/* Ürün grubu / kategori filtre şeridi (list-detail) — geliştirilmiş sekme çubuğu */
.list-detail{
  background: #fff;
  border-bottom: 1px solid var(--dx-line);
  padding: 14px 0;
  box-shadow: 0 2px 10px rgba(20,24,30,.04);
}
.list-d.urunlers{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.list-d.urunlers li a{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--dx-font-body);
  font-size: 12.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--dx-muted);
  background: var(--dx-paper);
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 8px 16px;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.list-d.urunlers li a img{ height: 16px; width: auto; }
.list-d.urunlers li a:hover{
  background: #fff;
  border-color: var(--dx-accent);
  color: var(--dx-ink);
}
.list-d.urunlers li a.active{
  background: var(--dx-ink);
  border-color: var(--dx-ink);
  color: #fff;
}
.list-d.urunlers li a.active::after{
  content: "";
  position: absolute;
  left: 50%;
  bottom: -9px;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid var(--dx-ink);
}

@media (max-width: 767px){
  .list-detail{
    padding: 10px 0;
    position: static;
  }
  .list-detail .container{
    padding-left: 0;
    padding-right: 0;
  }
  .list-d.urunlers{
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 8px;
    padding: 0 16px;
    scroll-snap-type: x proximity;
  }
  .list-d.urunlers::-webkit-scrollbar{ display: none; }
  .list-d.urunlers li{ flex: 0 0 auto; }
  .list-d.urunlers li a{
    font-size: 11.5px;
    padding: 7px 13px;
    white-space: nowrap;
    scroll-snap-align: start;
  }
  .list-d.urunlers li a.active::after{ display: none; }
}

/* ==========================================================================
   6) ÜRÜN VERİ FİŞİ (single-urun-box) — İMZA ÖĞESİ
   ---------------------------------------------------------------------
   Bu site esasen teknik veri fişleridir (Uygulama / Sarfiyat / Ambalaj /
   Depolama). Bu bölüm bunu jenerik bir "kart" değil, gerçek bir ürün /
   varil etiketi gibi sunar: koyu başlık şeridi + monospace teknik gövde.
   ========================================================================== */
.single-urun-box{
  background: #fff;
  border: 1px solid var(--dx-line);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 32px;
  display: grid;
  grid-template-columns: 300px 1fr;
  box-shadow: 0 4px 18px rgba(20,24,30,.05);
  transition: box-shadow .2s ease, transform .2s ease;
}
.single-urun-box:hover{
  box-shadow: 0 16px 34px rgba(20,24,30,.10);
}
@media (max-width: 767px){
  .single-urun-box{ grid-template-columns: 1fr; }
}

.single-urun-box .title-urun{
  grid-column: 1 / -1;
  background: var(--dx-ink);
  color: #fff;
  font-family: var(--dx-font-mono) !important;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 14px 20px;
  border-left: 6px solid var(--dx-accent);
  display: flex;
  align-items: center;
  gap: 10px;
}
.single-urun-box .title-urun{
  border-left-color: var(--data-color, var(--dx-accent));
}
.single-urun-box .title-urun::before{
  content: "";
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--data-color, var(--dx-accent));
  flex: 0 0 auto;
}
.single-urun-box .dxv-urun-altbaslik{
  font-family: var(--dx-font-body);
  font-weight: 500;
  font-size: 11px;
  text-transform: none;
  letter-spacing: 0;
  color: rgba(255,255,255,.6);
  background: rgba(255,255,255,.1);
  padding: 3px 10px;
  border-radius: 999px;
  margin-left: auto;
}

.single-urun-box .left-box{
  position: relative;
  background: var(--dx-paper);
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid var(--dx-line);
}
.single-urun-box .urun-img-box{
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--dx-line);
}
.single-urun-box .urun-img-box img{
  max-width: 100%;
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: contain;
  display: block;
  transition: transform .4s ease;
}
.single-urun-box:hover .urun-img-box img{ transform: scale(1.05); }

.single-urun-box .right-box{
  padding: 24px 26px;
}
.single-urun-box .right-box .type.big{
  font-family: var(--dx-font-body);
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--dx-ink);
}
.single-urun-box .right-box .type.big > p:first-of-type{
  font-size: 15px;
  color: var(--dx-ink);
}
.single-urun-box .right-box .type.big p{ margin-bottom: 10px; }

/* Teknik veri listesi (Uygulama / Sarfiyat / Ambalaj / Depolama) — spec-chip ızgarası */
.single-urun-box .right-box .type.big ul{
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 16px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--dx-line);
}
@media (max-width: 560px){
  .single-urun-box .right-box .type.big ul{ grid-template-columns: 1fr; }
}
.single-urun-box .right-box .type.big ul li{
 
  font-size: 14px;
  padding: 12px 14px;
  background: var(--dx-paper);
  
  border-radius: 6px;
  border-left: 3px solid var(--data-color, var(--dx-accent));
  position: static;
  transition: background .15s ease, border-color .15s ease;
}
.single-urun-box .right-box .type.big ul li:hover{
  background: #fff;
  border-color: var(--data-color, var(--dx-accent));
}
.single-urun-box .right-box .type.big ul li::before{ content: none; }
.single-urun-box .right-box .type.big ul li strong{
  font-family: var(--dx-font-body);
  text-transform: uppercase;
  font-size: 10.5px;
  letter-spacing: .05em;
  color: var(--dx-muted);
  display: block;
  margin-bottom: 3px;
}

/* ==========================================================================
   7) İLETİŞİM / FORMLAR
   ========================================================================== */
.form-control, textarea, select{
  border-radius: var(--dx-radius) !important;
  border: 1px solid var(--dx-line) !important;
  font-family: var(--dx-font-body) !important;
}
.form-control:focus{
  border-color: var(--dx-accent) !important;
  box-shadow: 0 0 0 3px rgba(226,137,42,.18) !important;
}

.contact-information .ul-contact li .icon{
  filter: none;
}
.contact-information .ul-contact li .link,
.contact-information .ul-contact li .text{
  font-family: var(--dx-font-body) !important;
  color: var(--dx-ink) !important;
}

/* ==========================================================================
   8) FOOTER
   ========================================================================== */
.footer{
  background: var(--dx-ink) !important;
}
.footer-heading{
  font-family: var(--dx-font-display) !important;
  color: #fff !important;
  text-transform: uppercase;
  font-size: 13px !important;
  letter-spacing: .06em;
  border-bottom: 2px solid var(--dx-accent);
  display: inline-block;
  padding-bottom: 6px;
}
.footer-menu_item, .footer a{
  font-family: var(--dx-font-body) !important;
  color: rgba(255,255,255,.72) !important;
  font-size: 13.5px !important;
}
.footer-menu_item:hover, .footer a:hover{ color: var(--dx-accent) !important; }
.footer-bottom{
  border-top: 1px solid rgba(255,255,255,.12) !important;
  background: var(--dx-steel) !important;
}

/* ==========================================================================
   9) ANA SAYFA — KISA "HAKKIMIZDA" / VİDEO BÖLÜMÜ
   ========================================================================== */
.tp-video-area{ background-color: var(--dx-ink) !important; }
.tp-hero-it-bigtext{ color: rgba(255,255,255,.06) !important; }
.type.about p{
  font-family: var(--dx-font-body) !important;
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255,255,255,.82);
}

/* ==========================================================================
   11) ANA SAYFA SLIDER (üst banner)
   ========================================================================== */
.slider.slider-layout2 .slide-item{
  min-height: 62vh !important;
}
.slider.slider-layout2 .bg-img::after{
  background: linear-gradient(90deg, rgba(58,56,255,.55) 0%, rgba(20,24,30,.72) 35%, rgba(32,43,56,.38) 70%, rgba(32,43,56,.08) 100%) !important;
}
.slide-subtitle{
  font-family: var(--dx-font-mono) !important;
  font-size: 12.5px !important;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dx-accent) !important;
  border-left: 3px solid var(--dx-accent);
  padding-left: 10px;
  display: inline-block;
}
.slide-title{
  font-family: var(--dx-font-display) !important;
  font-weight: 700 !important;
  font-size: clamp(30px, 2vw, 52px) !important;
  line-height: 1.12 !important;
  letter-spacing: -.01em;
  margin: 14px 0 12px !important;
}
.slide-desc{
  font-family: var(--dx-font-body) !important;
  font-size: 15.5px;
  color: rgba(255,255,255,.82);
  max-width: 560px;
}
.slick-dots{ bottom: 26px !important; }
.slick-dots li{
  width: 12px !important;
  height: 12px !important;
  margin: 0 6px !important;
}
.slick-dots li button{
  width: 12px !important;
  height: 12px !important;
  border-radius: 50% !important;
  background-color: rgba(255,255,255,.45) !important;
  border: 2px solid rgba(255,255,255,.7) !important;
  box-sizing: border-box !important;
  transition: all .25s ease !important;
}
.slick-dots li:hover button{
  background-color: rgba(255,255,255,.75) !important;
}
.slick-dots li.slick-active{
  width: 14px !important;
}
.slick-dots li.slick-active button{
  width: 14px !important;
  height: 14px !important;
  background-color: var(--dx-accent) !important;
  border-color: #fff !important;
  box-shadow: 0 0 0 3px rgba(49,88,253,.35) !important;
}

@media (max-width: 767px){
  .slider.slider-layout2 .slide-item{ min-height: 52vh !important; }
  .slide-subtitle{ font-size: 10.5px !important; padding-left: 8px; }
  .slide-title{ font-size: 22px !important; margin: 10px 0 8px !important; line-height: 1.2 !important; }
  .slide-desc{ font-size: 13px !important; }
}

/* ==========================================================================
   12) ETİKET / BADGE — EYEBROW başlıklar (sec-title-wrapper span.sub-title)
   ========================================================================== */
.sub-title{
  font-family: var(--dx-font-mono) !important;
  font-size: 12px !important;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dx-accent-dark) !important;
  border: 1px solid var(--dx-accent);
  border-radius: var(--dx-radius);
  padding: 3px 10px;
  display: inline-block;
}