/*
Theme Name: Fastenfix
Theme URI: https://www.fastenfix.com.tr
Description: Fastenfix.com.tr için hazırlanmıştır
Version: 1.0
Text Domain: fastenfix
*/


@import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@300;400;700&display=swap');


html, body {position: relative;height: 100%;  }
body {background: #fefefe;font-family: 'Sarabun', sans-serif;margin: 0;padding: 0; color:#040405; position: relative;
  overflow-x: hidden; font-size: 16px; }
a {text-decoration: none;}
h1,h2,h3,h4,h5,h6 {margin:0px;}
ul,ol {margin:0px;padding:0px;}
.clearfix {width: 100%;height: auto;display: block;}
.container {max-width: 1110px;}
.container-fluid {padding-left: 50px;padding-right: 50px;}
.only-mobile {display: none;}
.img-fluid,.img-fluid img {width: 100%;height: auto;}
::placeholder {   color: #b1b1b1;  opacity: 1;  font-size: 18px;}
:-ms-input-placeholder {   color: #b1b1b1;}
::-ms-input-placeholder {  color: #b1b1b1;}


.header-dis {position: relative;padding-left: 0px;padding-right: 0px;background-color:#000000;}
.home .header-dis {;position: absolute;z-index: 2;background-color: transparent;}
.header-ust {background-color:#000000;display: flex;}
.header-ust-ic {display: flex;justify-content: space-between;width: 100%;align-items: center;height: 40px;}
/*.sosyal-menu li {display: inline-block;    margin-left: 10px;}
.sosyal-menu li a {color: #ffffff;    border: 1px solid #ffffff;    border-radius: 50%;    display: block;    width: 23px;    text-align: center;      font-size: 13px;}*/

/* ================================================================
   1. SOSYAL MEDYA SİSTEMİ (Sadece .sosyal-menu sınıfını hedefler)
   ================================================================ */
/* Genel liste yapısı */
ul.sosyal-menu {
    
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    align-items: center !important;
}

ul.sosyal-menu li {
    display: inline-block !important;
    width: auto !important;
    margin: 0 !important; /* Diğer li'lerle çakışmaması için */
}

ul.sosyal-menu li a {
    color: #ffffff !important;
    border: 1px solid #ffffff !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
}

ul.sosyal-menu li a:hover {
    background-color: #f7c600 !important;
    border-color: #f7c600 !important;
    color: #1b1b1b !important;
}

/* ================================================================
   2. HEADER VE FOOTER ÖZEL AYARLAR
   ================================================================ */
/* Header (Masaüstü için sağa yaslar) */
.header-ust-ic ul.sosyal-menu {
    justify-content: flex-end;
}

.header-ust-ic ul.sosyal-menu li {
    margin-left: 8px !important;
}

.header-ust-ic ul.sosyal-menu li a {
    width: 26px;
    height: 26px;
    font-size: 11px;
    border-color: rgba(255, 255, 255, 0.4) !important;
}

/* Footer (Hizalama ve Boyut) */
.footer-dis ul.sosyal-menu {
    margin: 25px 0 !important;
    justify-content: center !important;
}

.footer-dis ul.sosyal-menu li {
    margin: 0 8px !important;
}

.footer-dis ul.sosyal-menu li a {
    width: 35px;
    height: 35px;
    font-size: 15px;
}

/* ================================================================
   3. MOBİL AYARLAR (Hamburger Menüyü Bozmadan)
   ================================================================ */
@media (max-width: 991px) { /* Genelde mobil menü 991px'de başlar */
    
    /* Sadece Header içindeki sosyal medyayı gizle (Menüyü değil!) */
    .header-ust-ic ul.sosyal-menu {
        display: none !important;
    }

    /* Footer sosyal medyayı yan yana ve ortalı tutmaya devam et */
    .footer-dis ul.sosyal-menu {
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
    }
}

.adres-menu li {display: inline-block;    margin-right: 10px;}
.adres-menu li a {color:#ffffff;font-size: 13px;}
.adres-menu li a i {margin-right: 10px;}
.header-alt {display: flex;border-bottom: 1px solid #cccccc;}
.header-alt-ic {display: flex;justify-content: space-between;width: 100%;align-items: center;height: 79px;}


.menu-area { border-top:1px solid #e6e6e7; border-bottom: 1px solid #e6e6e7;display: flex;flex-wrap: wrap;justify-content: space-between;height: 64px;align-items: center;margin-bottom: 30px;}
.menu-area .container {display: flex;justify-content: space-between;}

.main-menu li {display: inline-block;list-style: none;height: 80px;    line-height: 80px;}
.main-menu li {margin-left: 30px;}
@media (max-width: 1500px) {
    .main-menu li {margin-left: 10px;}
}
.main-menu li a {       font-weight: 700;    letter-spacing: -.01em;    color: #ffffff;    font-size: 17px;    line-height: 1.294em;}
.main-menu li a:hover {color:#f7c600;}
.main-menu li.current-menu-item a,.main-menu li.current-menu-ancestor a {color:#f7c600;}
.main-menu li.current-menu-item,.main-menu li.current-menu-parent {border-top: 2px solid #f7c600;line-height: 78px;height: 78px;}
.main-menu li .sub-menu li.current-menu-item {border-top: none;}


/* Alt Menü Ana Konteynırı */
.main-menu li .sub-menu {
    display: none;
    position: absolute;
    background-color: #ffffff;
    z-index: 9999;
    margin-left: -20px;
    padding: 15px 0; /* Üst ve alt boşluk dengelendi */
    min-width: 240px; /* Alataş/Onurfix tarzı genişlik stabilitesi */
    
    /* Modern Dokunuşlar */
    border-radius: 8px;
    box-shadow: 0 12px 35px rgba(0,0,0,0.1); 
    border: 1px solid #f1f1f1;
    transition: all 0.3s ease;
}

/* Alt Menü Liste Elemanları */
.main-menu li .sub-menu li {
    margin: 0;
    height: auto; /* Sabit 45px yerine esnek yapı daha moderndiz */
    display: block;
}

/* Alt Menü Linkleri */
.main-menu li .sub-menu li a {
    display: block;
    padding: 12px 25px; /* Daha ferah bir tıklama alanı */
    color: #333333;
    font-size: 16px;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    position: relative;
}

/* Hover Efekti (Kayma Yapmayan Modern Yaklaşım) */
.main-menu li .sub-menu li a:hover {
    color: #f7c600; /* Fastenfix Sarı/Turuncu tonu */
    background-color: #fcfcfc;
    padding-left: 30px; /* Sadece iç boşluğu artırarak soft bir kayma efekti */
}

/* Ok İşareti (Dropdown Indicator) */
.main-menu li.menu-item-has-children::after {
    content: "";
    position: relative;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 5px solid #f7c600;
    right: -5px;
    display: inline-block;
    transform: rotate(180deg);
    top: -2px;
    transition: transform 0.3s ease;
}

/* Hover Durumunda Okun Dönmesi */
.main-menu li.menu-item-has-children:hover::after {
    transform: rotate(0deg); /* Modern bir detay: hoverda ok yukarı döner */
}

.main-menu li.menu-item-has-children:hover .sub-menu {
    display: block;
    animation: fadeInSlide 0.3s ease forwards; /* Yumuşak açılış animasyonu */
}

/* Sayfa Aktifken Ok Rengi */
.main-menu li.current-menu-ancestor::after {
    border-bottom: 5px solid #f7c600; 
}

/* Yumuşak Açılış Animasyonu */
@keyframes fadeInSlide {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.header-arama-kutu {    border-left: 1px solid #cccccc;
    padding-left: 20px;}
.header-arama-kutu input {background-color: transparent;
    border: none;
    border: 1px solid #cccccc;
    font-size: 16px;
    height: 41px;
    line-height: 40px;
    padding-left: 15px;
    padding-right: 15px;
    margin-right: 10px;}
.header-arama-kutu-buton {background-color: #f7c600;
    border: none;
    color: #ffffff;
    height: 40px;
    width: 40px;
    cursor: pointer;
    transition: all 0.3s ease;
}
.header-arama-kutu-buton:hover {
    background-color: #d4aa00;
    color: #ffffff;
}
.header-arama-kutu input {color:#ffffff;}
::placeholder {
  color: #ffffff;
  opacity: 1; /* Firefox */
	font-size: 16px;
}

::-ms-input-placeholder { /* Edge 12 -18 */
  color: #ffffff;
}

.anasayfaslide {padding-left: 0px;padding-right: 0px;}
.anasayfaslide .swiper-slide {min-height: 100vh;display: flex;    align-items: end;background-size: cover;background-position: center;}
.anasayfaslide .swiper-slide h3 {    border-bottom: 3px solid #f7c600;
    height: 50px;
    display: inline-block;}
.anasayfaslide .swiper-slide h3 a {font-size: 24px;font-weight: bold;color:#ffffff;}
.anasayfaslide .container-fluid {padding-bottom: 50px;}
.anasayfaslide .swiper-button-prev {
    color: #ffffff !important;
	margin-left: 50px;
}
.anasayfaslide .swiper-button-next {
    color: #ffffff !important;
	margin-right: 50px;
}

.anasayfa-kategoriler {padding-top: 50px;padding-bottom: 50px;}
.anasayfa-kategoriler h3 {margin-bottom: 30px;font-size: 34px;font-weight: bold;}

.nav-link {   
    font-weight: 900;
    letter-spacing: -.01em;
    color: #1b1b1b;
    font-size: 16px;

    }
.nav-tabs .nav-link {border:none;}
.nav-link.active {border:none;border-bottom: 3px solid #f7c600;border-color:#f7c600!important;background-color:transparent!important;}
.nav-link:hover {border:none;color:#000000!important;border-bottom: 3px solid #f7c600;border-color:#000000!important;}
.nav-tabs {margin-bottom: 30px;}

.cizgi {width: 100%;height: 1px;background-color:#000000;margin-bottom: 30px;margin-top: 30px;}
.tumunu-gor i {background-color:#f7c600;width: 30px;height: 30px;line-height: 30px;text-align: center;color:#000000;border-radius: 50%;}
.tumunu-gor {color:#000000;font-size: 17px;font-weight: bold;text-align: center;margin-left: auto;margin-right: auto;}


.anasayfa-hizmetler {background-color:#DFDFDF;padding-top: 50px;padding-bottom: 50px;}
.anasayfa-hizmetler h3 {margin-bottom: 15px;margin-top: 15px;}
.anasayfa-hizmetler p {font-size: 17px;}

.anasayfa-markalar {padding-top: 50px;padding-bottom: 50px;}
.anasayfa-markalar .swiper {height: 250px;}


.anasayfa-markalar .swiper-slide {border:2px solid #f7c600;}
@media (max-width: 1400px) {
.anasayfa-markalar .swiper-slide {height: 205px;}
}
@media (max-width: 800px) {
.anasayfa-markalar .swiper-slide {height: 169px;}
}
.footer-dis {background-color:#1b1b1b;color:#979797;padding-top: 50px;padding-bottom: 50px;}

.footer-dis h3 {font-size: 18px;font-weight: bold;color:#ffffff;margin-bottom: 30px;}


.footer-menu li {list-style: none;}
.footer-menu li a {color:#979797;text-decoration: none;transition: all 0.3s ease;display: inline-flex;align-items: center;position: relative;}
.footer-menu li a:hover {color:#f7c600;padding-left: 20px;}
.footer-menu li a::before {
    content: "»"; /* İstediğin ok işaretini buraya koyabilirsin */
    position: absolute;
    left: 0;
    opacity: 0; /* Başlangıçta görünmez */
    transition: all 0.3s ease;
    font-weight: bold;
}
.footer-menu li a:hover::before {
    opacity: 1;
    left: 0;
}
.footer-alt {background-color:#1b1b1b;color:#979797;padding-top: 15px;padding-bottom: 15px;text-align: center;}


.footer-dis .sosyal-menu li {margin-left: 0px;margin-right: 15px;}

.footer-alt a {color:#f7c600;}

.sayfa {padding-top: 30px;padding-bottom: 30px;}

.alt-kategori-kutu-oge {padding: 15px;border:1px solid #cccccc;margin-bottom: 30px;border-style: solid;
    border-width: 2px 2px 2px 2px;
    border-color: #B7B3B3;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);}
.alt-kategori-kutu-oge h3 a {text-align: center; font-size: 18px;font-weight: bold;color:#000000;margin-bottom: 15px;margin-top: 15px;display: block;min-height: 44px;}

.arsiv-header {background-color:#000000;color:#ffffff;padding-top: 15px;padding-bottom: 15px;}
.arsiv-header a {color:#ffffff;}

.urun-filtresi {margin-bottom: 30px;}
.urun-filtresi h3 {margin-bottom: 15px;font-weight: bold;}

.urun-filtresi select {background-color:#f7c600;border: none;    padding: 10px;    border-radius: 10px;    margin-right: 15px;}


.filtrele-buton {background-color:#000000;border: none;   padding: 10px;    color: #ffffff;    border-radius: 10px;    width: 100px;
    height: 43px;}

.single-post h1 {font-weight: bold;font-size: 40px;margin-bottom: 15px;}
.single-post h3 {margin-bottom: 15px;font-weight: bold;}
.single-post .wp-video {margin-bottom: 15px;margin-top: 15px;}


/* Sidebar Genel Kutu Yapısı */
.sidebar-kutu {
    padding: 25px;
    border: 1px solid #f0f0f0;
    background-color: #ffffff;
    border-radius: 12px;
    margin-bottom: 30px;
    margin-top: 0px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.04); /* Hafif modern gölge */
    transition: all 0.3s ease;
}

/* Başlık Tasarımı */
.widget-baslik {
    font-size: 19px !important;
    font-weight: 800 !important;
    color: #1a1a1a;
    margin-bottom: 20px;
    padding-bottom: 12px;
    position: relative;
    border-bottom: 1px solid #eee;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Başlığın altındaki sarı vurgu çizgisi */
.widget-baslik::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 50px;
    height: 3px;
    background-color: #ffc107; /* Fastenfix Sarı */
}

/* Liste Yapısı */
.sidebar-kutu ul {
    margin-left: 0;
    padding-left: 0;
}

.sidebar-kutu li {
    list-style: none;
    margin-bottom: 0;
    border-bottom: 1px solid #f9f9f9;
    transition: all 0.2s ease;
}

.sidebar-kutu li:last-child {
    border-bottom: none;
}

/* Linklerin Normal Hali */
.sidebar-kutu a {
    color: #444;
    text-decoration: none;
    display: flex;
    align-items: center;
    padding: 12px 0;
    font-size: 15px;
    font-weight: 500;
    transition: all 0.3s ease;
}

/* Linklerin Üzerine Gelince (Hover) */
.sidebar-kutu li:hover a {
    color: #ffc107;
    padding-left: 8px; /* Sağa kayma efekti */
}

/* Aktif Sayfa / Menü Öğesi */
.sidebar-kutu .current-menu-item a {
    font-weight: 700;
    color: #000;
    background-color: #fff9e6; /* Hafif sarı arka plan vurgusu */
    padding-left: 10px;
    border-radius: 4px;
}

/* Linklerin başına küçük bir ikon simgesi (Opsiyonel) */
.sidebar-kutu li a::before {
    content: "»";
    color: #ccc;
    margin-right: 10px;
    font-size: 18px;
    transition: color 0.3s ease;
}

.sidebar-kutu li:hover a::before {
    color: #ffc107;
}


.gallery-columns-2 {width: 100%;}
.gallery-item {width: 50%;display: inline-block;padding: 10px;border:1px solid #cccccc;}
.gallery-item img {width: 100%;height: auto;}


.page h1 {font-weight: bold;font-size: 40px;margin-bottom: 15px;}
.page h3 {margin-bottom: 15px;font-weight: bold;}




.wpcf7 ::placeholder { color: #000000;  opacity: 1;}



.wpcf7 input,.wpcf7 textarea {margin-bottom: 15px;padding: 10px;width: 100%;}

.wpcf7-submit {width: 100px;background-color:#f7c600;border:none;}

.scrolltop {  display: none;  position: fixed;  bottom: 15px;  right: 15px;  z-index: 99;  font-size: 70px;  border: none;
  outline: none;  background-color: #f7c600;  color: #ffffff;  cursor: pointer;  border-radius: 4px;  width: 40px;
  height: 40px;  padding: 0;  text-align: center;  line-height: 66px;  font-weight: lighter;}
.scrolltop:hover {  background-color: #000000;  color:#ffffff;}

.btn-wa{
    position: fixed;
    bottom: 75px;
    right: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #25d366;
    width: 40px;
    height: 40px;
    color: #ffff;
    font-size: 30px;
    border-radius: 50px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
    cursor: pointer;
    z-index: 1;
    transition: left 2s, width 1s, height 1s;
}
.text-404{
    position: static;
    font-size: 20px;
    border: none;
    outline: none;
    background-color: #f7c600;
    color: #ffffff;
    cursor: pointer;
    border-radius: 4px;
    padding: 15px 15px;
    text-align: center;
    line-height: 75px;
    font-weight: normal;
}
.text-404:hover{
    background-color: #000000;
    color:#ffffff;
    
}

.urun-sol ,.urun-sag {padding: 15px;border:1px solid #dedede;}

.urun-tablosu {margin-top: 30px;margin-bottom: 30px;}
.urun-tablosu table {border:1px solid #dedede;width: 100%;}
.urun-tablosu table img {text-align: center;}



.ekstra-ozellikler p {margin-bottom: 5px;}
.term-13 label {display: block;margin-bottom: 5px;}
.filtre-kutular {display: flex;justify-content: space-between;align-items: end;}
.filtre-kutu {}



table {
    width: 100%;
    vertical-align: middle;
    border: medium none;
    border-collapse: collapse;
    border-spacing: 0;
    font-size: inherit;
    color: inherit;
    line-height: inherit
}

table tr {
    border: 1px solid #a6a6a6
}

table th {
    padding: 5px 7px;
    text-align: left;
    border-right: 1px solid #a6a6a6
}

table td {
    padding: 5px 10px;
    text-align: left;
    border: 0;
    border-right: 1px solid #a6a6a6
}

table td br {
    display: none
}


.ekstra-ozellikler {margin-top: 15px;text-align: center;}

.alt-kategori-kutu-oge .tumunu-gor {background-color: #f7c600;
    display: block;}



.accordion-button:not(.collapsed) {background-color:#ffffff;color:#000000;font-size:16px;}




.content {
   width: 50%;
   margin: 0px auto;
}

.embed-container {
   height: 0;
   width: 100%;
   padding-bottom: 56.25%; /* play with this until right */
   overflow: hidden;
   position: relative;
}

.embed-container iframe {
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
}


.adres a {color:#f7c600;}
.accordion-body,.accordion-item {border: 0px;padding: 0px;}
.grecaptcha-badge{display:none !important;}

/* FF SSS Tasarımı */
.ff-faq-wrapper { max-width: 1000px; margin: 50px auto; color: #333; padding: 0 15px; }
.ff-main-title { font-size: 32px; font-weight: 800; text-align: center; margin-bottom: 40px; text-transform: uppercase; border-bottom: 4px solid #f7c600; display: table; margin: 0 auto 40px auto; padding-bottom: 10px; }
.ff-section-title { background: #f4f4f4; padding: 15px 25px; font-size: 20px; font-weight: 700; margin-top: 40px; border-left: 6px solid #f7c600; color: #1a1a1a; text-align: left; }
.ff-faq-item { border-bottom: 1px solid #eee; background: #fff; text-align: left; }
.ff-faq-question { padding: 20px 25px; cursor: pointer; font-weight: 600; font-size: 17px; position: relative; display: flex; align-items: center; justify-content: space-between; transition: 0.3s; }
.ff-faq-question::after { content: '\002B'; font-size: 24px; color: #f7c600; transition: 0.3s; }
.ff-faq-item.open .ff-faq-question::after { content: '\2212'; }
.ff-faq-question:hover { color: #f7c600; background: #fafafa; }
.ff-faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease-in-out; background: #fff; }
.ff-faq-answer p { padding: 0 25px 25px 25px !important; margin: 0; line-height: 1.8; color: #666; font-size: 16px; }
.ff-faq-item.open .ff-faq-answer { max-height: 1000px; }

/* Sadece SSS, Teknik Servis yazısındaki (ID: 12747,12771) başlığı gizle */
body.postid-12747 .col-md-9 h1:first-of-type,
body.postid-12747 h1.entry-title, 
body.postid-12747 .single-post h1,
body.postid-12771 .col-md-9 h1:first-of-type,
body.postid-12771 h1.entry-title,
body.postid-12771 .single-post h1{
    display: none !important;
}

/* TEKNİK SERVİS ÖZEL CSS */
.ff-service-page { width: 100%; color: #333; line-height: 1.6; }
.ff-service-intro { margin-bottom: 40px; text-align: left; }
.ff-service-intro h2 { font-size: 28px; font-weight: 800; border-bottom: 5px solid #f7c600; display: inline-block; padding-bottom: 10px; margin-bottom: 20px; color: #000; }
.ff-service-intro p { font-size: 17px; }

.ff-service-row { margin-bottom: 50px; }
.ff-service-card { background: #fff; border: 1px solid #eee; padding: 30px; border-radius: 8px; height: 100%; transition: 0.3s; border-bottom: 4px solid #eee; }
.ff-service-card:hover { border-bottom-color: #f7c600; transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.05); }
.ff-service-icon { font-size: 40px; margin-bottom: 15px; }
.ff-service-card h3 { font-size: 20px; font-weight: 700; margin-bottom: 15px; color: #000; }
.ff-service-card p { font-size: 15px; color: #666; }

.ff-why-us { background: #f4f4f4; padding: 40px; border-radius: 10px; margin-bottom: 50px; border-left: 8px solid #f7c600; }
.ff-why-us h3 { font-weight: 800; margin-bottom: 30px; color: #000; }
.ff-why-item { margin-bottom: 20px; }
.ff-why-item strong { display: block; font-size: 18px; margin-bottom: 5px; color: #000; }
.ff-why-item p { font-size: 15px; margin: 0; }

.ff-service-cta { text-align: center; padding: 40px 0; border-top: 1px solid #eee; }
.ff-service-cta p { font-size: 18px; font-weight: 600; margin-bottom: 25px; }
.ff-service-btn { background: #f7c600; color: #000; padding: 15px 40px; font-weight: 800; text-decoration: none !important; border-radius: 5px; display: inline-block; transition: 0.3s; font-size: 18px; }
.ff-service-btn:hover { background: #000; color: #f7c600; }

/* Mobil Arama - Şeffaf Arka Plan & Siyah Detaylar (iPhone Fix) */
.mobile-search-wrapper-transparent {
    padding: 15px 20px;
    background: transparent !important; /* Arka planın şeffaf olduğundan emin olalım */
}

.search-input-group-transparent {
    display: flex;
    align-items: center;
    background: transparent !important;
    border: 1px solid #000000; /* 2px yerine 1px daha zarif durabilir */
    border-radius: 8px;
    padding: 2px 5px; /* Dikey boşluğu biraz azalttık */
    transition: all 0.3s ease;
    /* iPhone iç gölgeyi kaldırır */
    -webkit-appearance: none;
}

.search-icon-black {
    color: #000000 !important;
    font-size: 18px;
    margin-left: 5px;
}

.modern-search-input-black {
    background: transparent !important;
    border: none !important;
    color: #000000 !important; /* Yazı Rengi Siyah */
    font-size: 16px !important; /* iPhone'da zoom yapmaması için en az 16px */
    font-weight: 600 !important;
    width: 100%;
    outline: none !important;
    padding: 10px 5px !important;
    /* iPhone varsayılan stillerini sıfırla */
    -webkit-appearance: none;
    appearance: none;
    border-radius: 0;
}

/* Placeholder (İpucu metni) - iPhone'da gri kalmaması için */
.modern-search-input-black::placeholder {
    color: #000000 !important;
    opacity: 0.6;
}

/* MAVİ BUTONU SARIYA ÇEVİREN KISIM */
.modern-search-btn-yellow {
    background: #f8b400 !important; /* Zorunlu Sarı */
    color: #000000 !important; /* Yazı Siyah */
    border: none !important;
    border-radius: 6px !important;
    padding: 8px 15px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    cursor: pointer;
    margin-left: 5px;
    text-transform: uppercase;
    /* iPhone'daki mavi/gri buton rengini tamamen yok eder */
    -webkit-appearance: none;
    appearance: none;
}

/* Arama kutusuna tıklandığında çerçeveyi sarı yapalım */
.search-input-group-transparent:focus-within {
    border-color: #f8b400;
}
/* ==========================================================================
   1. GENEL ALAN VE KONTEYNER
   ========================================================================== */
.video-gallery-area { 
    padding: 60px 0; 
    background: #fdfdfd; 
    min-height: 80vh; 
    position: relative; /* Üst katman kontrolü için */
}

/* MODAL AÇIKKEN DROPDOWN'IN ÜSTE ÇIKMASINI ÖNLEMEK VEYA KARTLARIN ÜSTÜNDE TUTMAK İÇİN */
.fnx-select-container {
    position: relative;
    width: 100%;
    max-width: 450px;
    margin: 0 auto 50px auto;
    /* iOS'ta z-index'in düzgün çalışması için zorunlu: */
    z-index: 1001; 
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

/* ==========================================================================
   2. MODERN CUSTOM DROPDOWN (Tetikleyici)
   ========================================================================== */
.fnx-select-trigger {
    background: #fff;
    border: 2px solid #f8b400;
    padding: 15px 25px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    font-weight: 700;
    color: #222;
    transition: 0.3s;
    box-shadow: 0 5px 15px rgba(248, 180, 0, 0.1);
    
    /* iOS FIX: Tıklama alanını belirginleştirir ve mavi gölgeyi kaldırır */
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation; 
}

.fnx-select-trigger:hover {
    box-shadow: 0 8px 25px rgba(248, 180, 0, 0.2);
}

.fnx-select-trigger i {
    color: #f8b400;
    transition: transform 0.3s;
    pointer-events: none; /* İkonun tıklamayı engellemesini önler */
}

.fnx-select-container.open .fnx-select-trigger i {
    transform: rotate(180deg);
}

/* ==========================================================================
   3. SEÇENEKLER LİSTESİ (Açılan Menü)
   ========================================================================== */
.fnx-options-list {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
    border: 1px solid #eee;
    overflow: hidden;
    display: none; /* JS ile block yapılacak */
    max-height: 350px;
    overflow-y: auto;
    
    /* iOS FIX: Kaydırma ve Katmanlama */
    -webkit-overflow-scrolling: touch;
    z-index: 999999; 
    -webkit-transform: translateZ(10px);
    transform: translateZ(10px);
}

.fnx-option {
    padding: 15px 25px;
    font-weight: 600;
    color: #555;
    cursor: pointer;
    transition: 0.2s;
    border-bottom: 1px solid #f9f9f9;
    
    /* iOS FIX: Tıklama kararlılığı */
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}

.fnx-option:last-child { border-bottom: none; }

.fnx-option:hover {
    background: #fffbeb;
    color: #f8b400;
}

.fnx-option.active {
    background: #f8b400;
    color: #fff;
}

/* ==========================================================================
   4. VİDEO KARTLARI
   ========================================================================== */
.v-item { 
    transition: all 0.4s ease; 
    /* iOS'ta dropdown'un altına girmesi için z-index düşük tutulmalı */
    position: relative; 
    z-index: 1; 
}

.v-item.is-hidden { display: none !important; }

.video-card-item { 
    background: #fff; border-radius: 15px; overflow: hidden; 
    box-shadow: 0 8px 25px rgba(0,0,0,0.06); transition: 0.4s; 
    cursor: pointer; border: 1px solid #eee; height: 100%; 
    -webkit-tap-highlight-color: transparent;
}

.video-card-item:hover { 
    transform: translateY(-5px); 
    border-color: #f8b400; 
    box-shadow: 0 15px 40px rgba(0,0,0,0.12); 
}

.video-thumb-box { position: relative; aspect-ratio: 16/9; background: #000; overflow: hidden; }
.video-thumb-box img { width: 100%; height: 100%; object-fit: cover; opacity: 0.9; transition: 0.5s; }
.video-card-item:hover img { opacity: 1; transform: scale(1.05); }

.play-btn-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.1); }
.play-btn-overlay i { color: #f8b400; font-size: 50px; text-shadow: 0 0 15px rgba(0,0,0,0.4); }

.video-text-box { padding: 20px; text-align: center; border-top: 1px solid #f5f5f5; }
.video-text-box h3 { font-size: 16px; font-weight: 700; color: #222; margin: 0; line-height: 1.4; }

/* ==========================================================================
   5. MODAL (Video Oynatıcı)
   ========================================================================== */
#fnxVideoModal {
    display: none;
    position: fixed;
    /* Her şeyin en üstünde olmalı */
    z-index: 9999999; 
    inset: 0;
    background: rgba(0,0,0,0.95);
    align-items: center;
    justify-content: center;
    -webkit-overflow-scrolling: touch;
}

.modal-content-wrap { width: 92%; max-width: 900px; position: relative; }

.close-modal-x { 
    position: absolute; 
    top: -50px; 
    right: 0; 
    color: #fff; 
    font-size: 40px; 
    cursor: pointer; 
    -webkit-tap-highlight-color: transparent; 
}

.responsive-video-ratio { 
    position: relative; 
    padding-bottom: 56.25%; 
    height: 0; 
    background: #000; 
    border-radius: 12px; 
    overflow: hidden; 
    box-shadow: 0 0 30px rgba(0,0,0,0.5);
}

.responsive-video-ratio iframe, 
.responsive-video-ratio video { 
    position: absolute; 
    inset: 0; 
    width: 100%; 
    height: 100%; 
    border: none; 
}
/* ============================================================
   FASTENFIX HAKKIMIZDA - DENGELİ & RESİM HOVER EFEKTLİ
   ============================================================ */

/* 1. GENEL KONTEYNER VE HERO */
.about-section {
    font-family: 'Inter', sans-serif;
    color: #333;
    line-height: 1.6;
    background: #fff;
    overflow: hidden;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.about-hero {
    background: #222;
    color: #fff;
    padding: 80px 0;
    text-align: center;
    margin-bottom: 60px;
}

.about-hero h1 {
    font-size: 45px;
    font-weight: 900;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.about-hero p {
    font-size: 18px;
    color: #f7c600;
}

/* 2. ÜST ALAN: YAZI VE GÖRSEL (FLEX DÜZENİ) */
.about-content {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 50px !important;
    margin-bottom: 80px !important;
}

.about-text {
    flex: 1.2 !important;
}

.about-text h2 {
    font-size: 32px;
    font-weight: 850;
    color: #111;
    margin-bottom: 25px;
    line-height: 1.2;
}

.about-text p {
    font-size: 16px;
    margin-bottom: 20px;
    color: #444;
}

/* GÖRSEL ALANI VE ZOOM EFEKTİ */
.about-image {
    flex: 0.8 !important;
    overflow: hidden; /* Resim büyüdüğünde dışarı taşmasın */
    border-radius: 20px; /* Köşeleri burada sabitliyoruz */
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

.about-image img {
    width: 100% !important;
    height: auto !important;
    display: block;
    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) !important; /* Yumuşak yakınlaşma */
}

/* RESİM HOVER - YAKINLAŞTIRMA */
.about-image:hover img {
    transform: scale(1.1); /* %10 oranında yakınlaştırır */
}

/* 3. İSTATİSTİKLER (COUNTER ALANI) */
.fastenfix-stats-container {
    margin: 60px 0;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.stat-card {
    background: #ffffff;
    padding: 40px 20px;
    text-align: center;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    border-bottom: 5px solid #f7c600;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

.stat-card:hover {
    transform: translateY(-10px) scale(1.03);
    box-shadow: 0 25px 50px rgba(0,0,0,0.12) !important;
}

.stat-number, .symbol {
    font-size: 42px;
    font-weight: 800;
    color: #111;
}

.stat-label {
    display: block;
    margin-top: 12px;
    font-size: 13px;
    font-weight: 700;
    color: #666;
    letter-spacing: 1px;
}

/* 4. VİZYON VE MİSYON */
.vision-mission-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-bottom: 100px;
}

.info-box {
    padding: 50px;
    border-radius: 25px;
    background: #f9f9f9;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

.info-box.yellow-bg {
    background: #f7c600;
    color: #111;
}

.info-box:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0,0,0,0.1) !important;
}

.info-box h3 {
    font-size: 28px;
    font-weight: 900;
    margin-bottom: 20px;
}

.info-box p {
    font-size: 16px;
    line-height: 1.7;
}

/* 5. RESPONSIVE (MOBİL UYUM) */
@media (max-width: 992px) {
    .about-content {
        flex-direction: column !important;
        text-align: center !important;
    }
    
    .about-image {
        order: -1;
        width: 100%;
        margin-bottom: 30px;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .vision-mission-container {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .stats-grid {
        grid-template-columns: 1fr;
    }
    
    .about-hero h1 {
        font-size: 32px;
    }
}
/* Breadcrumb içindeki son öğeyi (Hakkımızda yazısını) gizle */
.yoast-breadcrumbs .breadcrumb_last {
    display: none !important;
}

/* Sondaki ayırıcı işareti ( > ) gizlemek için */
.yoast-breadcrumbs span:last-child {
    display: none !important;
}

/* Eğer kapsayıcı alanın tamamen boş kalmasını istemiyorsan yüksekliği koru */
.ff-breadcrumb-container {
    margin-bottom: 20px;
    min-height: 20px;
}