html { 
    scroll-behavior: smooth; 
    overflow-x: hidden; 
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Alegreya Sans', sans-serif; /* Default font */
    font-size: 18px;
    line-height: 2em;
    overflow-x: hidden;
}

/* Navbar Flexbox ile Ortalanması */
.navbar {
    display: flex;
    justify-content: center; /* Yatayda ortalar */
    align-items: center;     /* Dikeyde ortalar */
    width: 100%;
    padding: 20px 0;         /* Navbar üst ve alt boşluğu */
}

/* Logo'yu Ortalamak İçin */
.navbar-brand {
    display: flex;
    justify-content: center; /* Yatayda ortalar */
    align-items: center;     /* Dikeyde ortalar */
    width: auto;             /* Logo boyutuna göre */
    margin: 0 auto;
}

/* Logo boyutlandırma */
.navbar-brand img {
    height: 70px;  /* Logonun yüksekliğini ayarlayın */
    max-width: 200%; /* Ekran boyutuna göre uyum sağlar */
}

/* Yazı tipini ve diğer stilleri ayarlamak için */
.zehraca-title {
    font-family: 'Alegreya Sans', sans-serif; /* Yazı tipi */
    font-size: 4rem;  /* Yazı boyutu */
    font-weight: bold; /* Kalın yazı */
    letter-spacing: 0.1em;  /* Harf arası boşluk */
    text-transform: uppercase;  /* Harfleri büyük yapma */
    color: #000;  /* Yazı rengi */
    text-align: center;  /* Ortala */
    margin-top: 150px;  /* Üstten boşluk */
}

.center-text {
    text-align: center;  /* Yazıyı ortalar */
    font-family: 'Source Sans Pro', sans-serif;  /* Yeni yazı tipi */
    font-size: 4rem;  
    font-weight: 600;  
    letter-spacing: 0.1em;  
    text-transform: uppercase;  
    color: #000000;  
    margin-top: 200px;  
}

a {
    transition: all 0.3s ease;
    color: #666;
}

a:hover {
    color: #010304;
    text-decoration: none;
}

h2, p { 
    color: #666666; 
}

/* Site header ve logo container */
.tm-site-header {
    position: absolute;
    z-index: 1000;
    width: 100%;
    top: 0;
    left: 0;
    padding: 40px;
}

.tm-logo-container {
    display: flex;
    justify-content: center; /* Yatayda ortalar */
    align-items: center; /* Dikeyde ortalar */
    width: auto;  /* Logo boyutuna göre */
    margin: 0 auto;
    padding: 30px;
}

.tm-site-logo { 
    font-size: 3rem; 
}

.tm-site-name { 
    font-size: 1.9rem; 
}

#tm-video-container {
    max-height: 720px;
    overflow: hidden;
    background-color: #333;
}

#tm-video {
    width: 100%;
    height: auto;
}

.tm-bg-black {
    background-color: rgba(0,0,0,0.5);
    color: white;
}

.tm-bg-gray { 
    background-color: #F4F4F4; 
}

.tm-text-primary { 
    color: #000000; 
}

.tm-text-secondary { 
    color: #000000; 
}

.tm-nav-link {
    font-family: 'Alegreya Sans', sans-serif;  /* Yazı tipi */
    color: white;
    font-size: 1.4rem;    
}

#tm-main-nav .nav-item .nav-link { 
    border-bottom: 1px solid transparent; 
}

#tm-main-nav .nav-item.active .nav-link,
#tm-main-nav .nav-item:hover .nav-link {
    border-bottom: 1px solid white;
    color: white;
}

.tm-welcome-container {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    z-index: 999;
}

.tm-welcome-container-inner { 
    margin-top: 100px; 
}

.tm-welcome-text { 
    font-size: 1.6rem; 
}

.btn {
    padding: 15px 60px;
    font-size: 1.6rem;
    border: none;
    cursor: pointer;
}

.btn-primary { 
    background-color: #000000; 
}

.btn-primary:hover { 
    background-color: #000000; 
}

.tm-btn-animate {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.tm-btn-animate:before {
    left: 0;
    top: -100%;
    position: absolute;
    height: 100%;
    width: 100%;
    line-height: 2.5;
    transition: all 0.3s;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}

.tm-btn-animate:after {
    content: '';
    position: absolute;
    z-index: -1;
    transition: all 0.3s;
}

.tm-btn-animate:hover:before { 
    top: 13px; 
}

.tm-btn-animate span {
    display: inline-block;
    width: 100%;
    height: 100%;
    transition: all 0.3s;
}

.tm-btn-animate:hover span {
    transform: translateY(300%);
}

.tm-btn-cta {
    color: white;
    background-color: rgba(0,0,0,0.5);
}

.tm-btn-cta:before { 
    font-size: 180%; 
}

.tm-btn-download:before { 
    font-size: 120%; 
}

.tm-btn-submit:before { 
    font-size: 120%; 
}

.tm-icon-down:before { 
    content: '\f078'; 
}

.tm-icon-download:before { 
    content: '\f019'; 
}

.tm-icon-submit:before { 
    content: '\f1d8'; 
}

.tm-btn-cta:hover { 
    color: white; 
}

.tm-btn-download:hover,
.tm-btn-download:focus,
.tm-btn-submit:hover,
.tm-btn-submit:focus {
    color: white;
    background-color: #3399CC;
}

.tm-btn-small { 
    padding: 10.5px 35px;
    font-size: 1.2rem; 
}

#tm-video-control-button {
    position: absolute;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
}

.tm-content-container {
    max-width: 1422px;
    padding-top: 80px;
    padding-bottom: 35px;
}

.tm-page-title { 
    font-size: 2.5rem; 
}

.tm-catalog-item-list { 
    justify-content: space-between; 
}

.tm-catalog-item {
    max-width: 462px;
    display: flex;
    flex-direction: column;
    margin-bottom: 64px;
}

.tm-thumbnail-container { 
    overflow: hidden; 
}

.tm-thumbnail-container img { 
    transition: all 0.3s ease; 
}

.tm-thumbnail-container:hover img { 
    transform: scale(1.2) rotate(5deg); 
}

.tm-img-overlay {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0,0,0,0.4);
    cursor: pointer;
    transition: all 0.3s ease;
}

.tm-overlay-icon {
    color: #a7a7a7;
    opacity: 1;
    font-size: 2rem;
    padding: 10px 15px;
    background-color: rgba(0,0,0,0.5);
    border-radius: 50%;
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-right: 8px;
    z-index: 1002;
    transition: all 0.3s ease;  
}

.tm-img-overlay:hover { 
    background-color: transparent; 
}

.tm-img-overlay:hover .tm-overlay-icon { 
    opacity: 0; 
}

.tm-catalog-item-description { 
    flex: 1; 
}

.tm-categories-container {
    display: flex;
    align-items: center;
}

.tm-categories-text { 
    margin-right: 16px; 
}

.tm-category-list { 
    font-size: 1.75rem; 
}

.tm-category-item { 
    margin: 16px; 
}

.tm-category-link {
    color: #000000;
    padding: 10px;
    border-bottom: 3px solid transparent;
}

.tm-category-link.active,
.tm-category-link:hover {
    border-bottom: 3px solid #000000;
    color: #000000;
}

.tm-paging-link {
    background-color: #F4F4F4;
    margin-right: 12px;
    font-size: 1.5rem;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-item.active > .tm-paging-link,
.nav-item:hover > .tm-paging-link {
    background-color: #CCC;
    color: #666666;
}

.tm-subscribe-form { 
    display: flex; 
    align-items: center;
}

.tm-subscribe-form > input {
    padding: 5px 15px;
    margin-right: 20px;
    flex: 1;
    max-width: 382px;
}

.tm-footer-links > li { 
    margin-bottom: 10px; 
}

/* Video detail page */
.tm-video-title { 
    font-size: 2.5rem; 
}

.tm-share-box { 
    font-size: 1.4rem; 
    padding: 3rem;
}

.tm-share-box-title { 
    font-size: 1.4rem; 
}

.tm-bg-white {
    background-color: white;
    border: 1px solid #CDCECF;
    border-radius: 5px;
}

.tm-share-button {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 24px;
}

.tm-share-button:last-child { 
    margin-right: 0; 
}

.tm-text-link { 
    color: #000000; 
}

.tm-likes-box,
.tm-btn-download {
    width: 280px;
    height: 60px;
}

.tm-likes-box { 
    padding-top: 12px; 
}

.tm-video-description-box { 
    max-width: 920px; 
}

.tm-text-gray { 
    color: #6F7071; 
}

.tm-fixed-header {
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;    
    background-color: #666;
}

#tm-fixed-header-bg { 
    height: 450px; 
}

.tm-fixed-header-1 { 
    background-image: url(../img/video-detail-1.jpg); 
}

.tm-fixed-header-2 { 
    background-image: url(../img/about-1.jpg); 
}

.tm-fixed-header-3 { 
    background-image: url(../img/contact-1.jpg); 
}

video {
    width: 100%;
    height: auto;
}

.fa-facebook { 
    color: #141a29; 
}

.fa-twitter { 
    color: #030607; 
}

.fa-pinterest { 
    color: #c8232c; 
}

.tm-liked-icon { 
    display: none; 
}

.tm-not-liked-icon { 
    display: inline-block; 
}

.tm-liked-icon, .tm-not-liked-icon { 
    margin-top: 3px; 
}

.tm-liked .tm-liked-icon { 
    display: inline-block; 
}

.tm-liked .tm-not-liked-icon { 
    display: none; 
}

.tm-welcome-text-2 { 
    max-width: 575px; 
}

.tm-share-button:hover { 
    background-color: #e9ecef; 
}

/* About */
.tm-about-text-container { 
    max-width: 920px; 
}

.parallax-window {
    min-height: 270px;
    background: transparent;
}

.parallax-window-2 {
    min-height: 360px;
}

.tm-about-icon {
    color: #999;
}

/* Contact */
.mapouter {
    position: relative;
    text-align: right;
    height: 540px;
    width: 100%;
}

.gmap_canvas {
    overflow: hidden;
    background: none!important;
    height: 540px;
    width: 100%;
}

.form-control {
    font-size: 1.2rem;
    padding: 21px 25px;
}

.form-group {
    margin-bottom: 35px;
}

#contact-select {
    height: 60px;
    border-radius: 0;
}

#contact-select:not([multiple]) {
    -webkit-appearance: none;
    -moz-appearance: none;
    background-position: right 15px center;
    background-repeat: no-repeat;
    background-image: url(../img/select-arrow.png);
    padding: 14px 20px;
    padding-right: 20px;
    color: #666;
}

.tm-testimonial-text {
    max-width: 500px;
    font-style: italic;
}

@media (min-width: 992px) {
    #tm-main-nav .nav-item { 
        margin: 20px 40px; 
    }

    .navbar-expand-lg .navbar-nav .nav-link { 
        padding: 8px 0px; 
    }

    .navbar-expand-lg .navbar-collapse { 
        justify-content: flex-end; 
    }
}

@media (max-width: 1419px) {
    .tm-catalog-item { 
        margin-bottom: 30px; 
    }
}

@media (max-width: 991px) {
    /* Navbar ortalama */
    .navbar {
        display: flex;
        justify-content: center;  /* Yatayda ortalar */
        align-items: center;      /* Dikeyde ortalar */
        width: 100%;
        padding: 20px 0; /* Navbar üst ve alt boşluğu */
    }

    .navbar-collapse {
        background-color: rgba(0,0,0,0.5);
        border-radius: 5px;
        border-top-right-radius: 0;
        padding: 10px 15px;
    }

    .nav-item { margin-bottom: 10px; }

    .navbar-toggler {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        width: 52px;
        height: 40px;
    }

    .navbar-toggler.collapsed {
        border-bottom-left-radius: .25rem;
        border-bottom-right-radius: .25rem;   
    }

    .navbar-toggler i.tm-menu-opened-icon { display: block; }
    .navbar-toggler i.tm-menu-closed-icon { display: none; }
    .navbar-toggler.collapsed i.tm-menu-opened-icon { display: none; }
    .navbar-toggler.collapsed i.tm-menu-closed-icon { display: block; }

    .tm-logo-container {
        height: 160px;
        width: 250px;
    }

    .tm-site-header { 
        padding: 20px; 
    }

    .tm-catalog-item-list { 
        max-width: 924px; 
    }

    .tm-share-box { 
        max-width: 400px; 
    }
}

@media (max-width: 879px) {
    .tm-categories-container {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 640px) {
    .tm-subscribe-form { 
        flex-direction: column; 
        align-items: stretch;
    }

    .tm-subscribe-form > input {
       max-width: 100%;
    }

    .tm-subscribe-form input {
        margin-right: 0;
        margin-bottom: 15px;
    }

    .tm-share-box {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

@media (max-width: 419px) {
    .tm-testimonial {
        flex-direction: column;
    }
}

.parallax-window[data-image-src="img/about-3.jpg"] {
    min-height: 20px !important;
  }
  
  /* 2) Footer kabındaki gereksiz alt padding'i kaldır */
  .container-fluid.tm-content-container.mx-auto.pt-1 {
    padding-bottom: 0 !important;
  }
  
  /* 3) Footer'ın üst boşluğunu da kıs */
  footer.row {
    margin-top: 0 !important;
    padding-top: .25rem !important;
  }
  
/* Custom: enlarge about-2 parallax */
.parallax-window[data-image-src="img/about-2.jpg"] { min-height: 520px; }

/* Tighten spacing below parallax on about page */
.parallax-window + .mx-auto.tm-content-container { margin-top: 1rem; }

/* Reduce extra spacing before footer in about page containers */
.tm-content-container + .tm-content-container { padding-top: 0.75rem; }

/* Tighter spacing adjustments */
.parallax-window + .mx-auto.tm-content-container { margin-top: 0.5rem; }
.tm-content-container + .tm-content-container { padding-top: 0.5rem; }
footer.row { margin-top: 0.75rem; }


/* coder fırdy — Instagram kartı */
.social-link{
    display:flex; align-items:center; gap:12px;
    padding:14px 16px; border:1px solid #e9ecef; border-radius:14px;
    text-decoration:none; font-weight:600; line-height:1.2;
    background:#fff; transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  }
  .social-link:hover{
    transform:translateY(-1px);
    box-shadow:0 6px 18px rgba(0,0,0,.06);
    border-color:#dfe3e7;
  }
  .social-link i{ font-size:28px; }
  .social-link.instagram i{ color:#E1306C; }               /* Instagram marka rengi */
  .social-link.instagram span{ color:#111; }               /* yazı rengi */
  /* coder fırdy — nav'ı biraz daha yukarı taşı */

/* Header'ın tepedeki iç boşluğunu küçült (40px -> 8px) */
.tm-site-header{
    padding: 3px 10px 0 !important;
  }
  
  /* Büyük ekranlarda nav'ı hafifçe yukarı it (ince ayar) */
  @media (min-width: 992px){
    #tm-main-nav{ transform: translateY(-14px); }
  }
  
  /* (İsteğe bağlı) Hero yüksekliği çoksa bir tık kıs: 450 -> 380 */
  #tm-fixed-header-bg{ height: 380px !important; }
  
  /* coder fırdy — alt-ortada SABİT logo (büyük) */
:root{
    --fb-logo-size: 300px;                                  /* ← boyut: büyütmek/küçültmek için değiştir */
    --fb-logo-bottom: calc(env(safe-area-inset-bottom, 0px) + 14px);
  }
  
  body::after{
    content: "";
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: var(--fb-logo-bottom);
    width: var(--fb-logo-size);
    height: var(--fb-logo-size);
    background: url("../img/FBLogo.png") no-repeat center / contain; /* css/ → img/ yolu */
    z-index: 3000;
    opacity: 1;
    pointer-events: none;                                   /* dekoratif: tıklanmasın; tıklanabilir olsun istersen 'auto' yap */
    filter: drop-shadow(0 4px 12px rgba(0,0,0,.18));        /* hafif gölge */
  }
  
  /* Video kontrol butonu logoyla çakışmasın (index sayfası) */
  #tm-video-control-button{
    bottom: calc(var(--fb-logo-size) + 32px);               /* logonun üstünde kalsın */
  }
  
  /* Küçük ekranlarda biraz küçült */
  @media (max-width: 480px){
    :root{ --fb-logo-size: 72px; }
  }
  /* coder fırdy — logo sağ-alt sabit */
:root{
    --fb-logo-size: 300px;  /* sende neyse kalsın */
    --fb-logo-gap:  calc(env(safe-area-inset-bottom, 0px) + 7px);
    --fb-logo-right: calc(env(safe-area-inset-right, 0px) + 7px);
  }
  
  /* Daha önce body::after ile alt-ortaya koymuştuk; şimdi sağ-alta taşıyoruz */
  body::after{
    left: auto;                    /* ortalama kuralını iptal et */
    transform: none;               /* translateX(-50%) iptal */
    right: var(--fb-logo-right);   /* sağdan boşluk */
    bottom: var(--fb-logo-gap);    /* alttan boşluk */
  }
  /* coder fırdy — önceki viewport-fixed logoyu kapat */
body::after{ content: none !important; }

/* coder fırdy — logo footer'ın SAĞ-ALTINDA, sayfa dibinde sabit */
:root{ --fb-logo-size: 300px; } /* boyutu buradan değiştir */

footer.row{ position: relative; } /* referans kap */

footer.row::after{
  content:"";
  position: absolute;
  right: 1px;                /* sağ boşluk */
  bottom: 2px;               /* alt boşluk */
  width: var(--fb-logo-size);
  height: var(--fb-logo-size);
  background: url("../img/FBLogo.png") no-repeat center/contain; /* css/ → ../img/ */
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.18));
  opacity: 1;
  pointer-events: none;       /* dekoratif; tıklanmasın */
}

/* coder fırdy — footer logosunu DAHA AŞAĞI indir */
:root{
    --fb-logo-size: 250px;   /* sende ne ise bırak */
    --fb-logo-push: 90px;   /* ↓ logoyu kaç px daha aşağı itelim? artır/azalt */
  }
  
  footer.row{
    position: relative;
    overflow: visible; 
    /* Logoyu aşağı taşırken görünür kalması için ekstra alt boşluk ekle */
    padding-bottom: calc(1px + var(--fb-logo-push));
  }
  
  footer.row::after{
    /* Logoyu footer sınırının da altına indiriyoruz */
    bottom: calc(-1 * var(--fb-logo-push));
  }
  /* coder fırdy — footer içinde sağa yaklaştır */
footer.row::after{
    right: -30px;   /* 16px idi; 8 / 4 / 0 yaparak daha da sağa al */
  }