html, body{
  font-size: 14px;
    font-family: "Hanken Grotesk", sans-serif;
  font-optical-sizing: auto; 
  font-style: normal;
  color:var(--renk-siyah);
  cursor:default;
  font-display:swap;
}
  
.bgzemin{background: #F1F9FE;
background: linear-gradient(164deg, rgba(241, 249, 254, 1) 0%, rgba(241, 249, 254, 1) 600px, rgba(230, 245, 250, 1) 600px, rgba(230, 245, 250, 1) 100%);}


#slider
{width: 100%;overflow: hidden;margin: auto;height: 100vh;position: relative;}
#slider img{position: absolute;max-height: 90%;left: 50%; top: 50%; }
#slider img.vector{  animation-duration:3s; animation-delay:.3s; transform: translate(-100%, -50%);top: 35%;z-index: 1;}
#slider img.home{animation-duration:2s; transform: translate(-50%, -50%) ; z-index:2;}
#slider .logo{top: 30px;right: 80px;left: auto;width: 200px;}

 
#slider .scroll-indicator {
    position: absolute;
    bottom: 30px;
    right: 5%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center; 
    z-index: 10;
    cursor: pointer;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

#slider .scroll-indicator:hover {
    transform: translateX(-50%) translateY(-5px);
    opacity: 0.8;
}

#slider .scroll-indicator .mouse {
    width: 26px;
    height: 40px;
    border: 2px solid #222;
    border-radius: 13px;
    position: relative;
    box-shadow: 0 0 20px rgba(111, 111, 111, 0.7);
}

#slider .scroll-indicator .wheel {
    width: 3px;
    height: 8px;
    background:#222;
    border-radius: 2px;
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    animation: scroll-wheel 2s ease-in-out infinite;
}

#slider .scroll-indicator .down-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px; 
    animation: arrow-bounce 2s ease-in-out infinite;
}

#slider .scroll-indicator .down-arrow svg {
    animation: arrow-pulse 2s ease-in-out infinite;
    stroke:#222;
}

#slider .scroll-indicator .arrow {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 5px;
}

#slider .scroll-indicator .arrow span {
    display: block;
    width: 12px;
    height: 2px;
    background: #222;
    transform: rotate(45deg);
    animation: arrow-move 2s ease-in-out infinite;
}

#slider .scroll-indicator .arrow span:nth-child(1) {
    margin-left: -6px;
    animation-delay: 0s;
}

#slider .scroll-indicator .arrow span:nth-child(2) {
    animation-delay: 0.15s;
}

#slider .scroll-indicator .arrow span:nth-child(3) {
    margin-left: 6px;
    animation-delay: 0.3s;
}

@keyframes arrow-bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(10px);
    }
}

@keyframes arrow-pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

@keyframes scroll-wheel {
    0% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
    50% {
        opacity: 0.5;
        transform: translateX(-50%) translateY(12px);
    }
    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(16px);
    }
}


@keyframes arrow-move {
    0%, 100% {
        opacity: 0;
        transform: rotate(45deg) translateY(-10px);
    }
    50% {
        opacity: 1;
        transform: rotate(45deg) translateY(0);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .scroll-indicator {
        bottom: 20px;
        transform: translateX(-50%) scale(0.8);
    }
}



header
{
    position: absolute;
    top: 0;
    z-index: 3;
    right: 0;
    bottom: 0;
}
.backVector
{
    background-size: auto 50vh !important;
    background-position: left center;
    background-repeat: no-repeat;
    position: absolute;
    width: 80vw;
    height: 90vh;
    top: 0;
    left: 0;
    opacity: 1;
    pointer-events: none;
    z-index: 0;
}

header .logo{    width: 200px;
    display: block;
    margin: 20px;}

header .menu{font-size:15px;   position: absolute;width: 145px;right: 0;top: 25%;padding:51px 0;display: flex; flex-direction: column;}
header .menu::after,
header .menu::before{width: 100%;height: 100px;content: "";background-image: url(/images/menuback.webp);position: absolute; background-size: contain;background-repeat: no-repeat;}
header .menu::before {background-position: top right;top:0;}
header .menu::after {   bottom: 0;background-position: bottom right;transform: scaleY(-1);  }
header .menu a{display: flex;align-items: center;color: #fff;position: relative;font-weight:500;height: 42px;width: 122px;justify-content: center;text-align: center;z-index:1;}
header .menu a:hover{color:#fd9b03;}
header .menu a:first-child{margin-bottom:1px;}
header .menu a:last-child{margin-top:8px;}
header .menu a.link{ height: 45px; margin: 7px 0 0 0;background: transparent url('/images/menulinkback.webp')no-repeat center;background-size: contain;transform-origin: top center;  transition: transform 0.2s ease;} 
header .menu a.link:hover {animation: boardSwing 2.6s ease-in-out infinite;}
header .menu a.link::before,
header .menu a.link::after,
header .menu a:last-child::before,
header .menu a:last-child::after{content: "";position: absolute;top: -10px;transform: translateX(-50%);width: 3px;height: 12px;background: repeating-linear-gradient(to bottom, #999 0, #999 1px, #786c6c 1px, #786c6c 3px);transform-origin: top center;}
header .menu a.link::before,
header .menu a:last-child::before{left: 23px;}
header .menu a.link::after,
header .menu a:last-child::after{right: 23px;} 
header .menu a.link:hover::before,
header .menu a.link:hover::after{animation: chainSwing 4.6s ease-in-out infinite;}

/* Zincir hafif sallansın */
@keyframes chainSwing {
0%   { transform: translateX(-50%) rotate(0deg); }
25%  { transform: translateX(-50%) rotate(5deg); }
50%  { transform: translateX(-50%) rotate(-5deg); }
75%  { transform: translateX(-50%) rotate(3deg); }
100% { transform: translateX(-50%) rotate(0deg); }
}

/* Tabela daha geniş açıyla sallansın */
@keyframes boardSwing {
0%   { transform: rotate(0deg); }
25%  { transform: rotate(1deg); }
50%  { transform: rotate(-1deg); }
75%  { transform: rotate(1deg); }
100% { transform: rotate(0deg); }
}
 
#pageHome h1{font-weight:bold;}

#pageHome #homeSunum{width: 100%;position:relative;height:450px;background-color: #63c2d04a;padding: 20px 25px;border-radius: 15px;}
#pageHome #homeSunum .item{ height: 100%;background-size: auto;}
#pageHome #homeSunum .item p{padding: 5px 0 0 3px;width: 75%;text-align:justify;}
#pageHome #homeSunum .item a{position: absolute;background-color: var(--ana-renk);color: #fff;padding: 4px 15px 6px;border-radius: 20px;right:15px; bottom: 20px;}
#pageHome #homeSunum .item .icon{position: absolute;bottom: 20px;right:25px;}
#pageHome #homeSunum .item .image{position: absolute;width: 65%;bottom: 25px;left: 3px;height: 60%;background-size: contain;background-position: left bottom;}
#pageHome #homeSunumDots{ position: absolute;
    top: 25px;
    right: 25px;} 
#pageHome #homeSunumDots .dot-item{border:none;background:none;cursor:pointer;}
#pageHome #homeSunumDots .dot-item .circle {position: relative;width: 32px;height: 32px;}
#pageHome #homeSunumDots .dot-item span {position: absolute;width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;font-weight: bold;z-index: 2;}
#pageHome #homeSunumDots .dot-item svg {width: 32px;height: 32px;transform: rotate(-90deg);}
#pageHome #homeSunumDots .dot-item circle {fill: none;stroke: var(--ana-renk);stroke-width: 2;stroke-dasharray: 88;   /* dairenin çevresi */stroke-dashoffset: 88;  /* %0 → boş */transition: stroke-dashoffset 0s;}
#pageHome #homeSunumDots .dot-item circle.animate {animation: fillCircle 3s linear forwards; /* autoplayTimeout ile aynı süre */}
#pageHome #homeSunumDots .dot-item circle.paused {
    animation-play-state: paused !important;
}
@keyframes fillCircle {
from {
stroke-dashoffset: 88; /* %0 */
}
to {
stroke-dashoffset: 0;  /* %100 */
}
}




#pageHome #nelerYapariz .cont{max-width:445px;margin:auto;}
#pageHome #nelerYapariz .links{}
#pageHome #nelerYapariz .links .link
{
color: var(--ana-renk);
font-size: 23px;  transition: .3s;
font-weight: 500;
display: flex;cursor:default;
align-items: center;
border-bottom: 1px solid var(--ana-renk-gri);
position: relative;
margin:15px 0;
}
#pageHome #nelerYapariz .links .link:before,
#pageHome #nelerYapariz .links .link:after{position: absolute;content: "";opacity:0;}
#pageHome #nelerYapariz .links .link:before{width: 12px;
height: 12px;
box-shadow: 2px -2px 0px var(--ana-renk-gri);
right: 2px;
top: 24px;}
#pageHome #nelerYapariz .links .link:after{
background: var(--ana-renk-gri);
width: 12px;
transform: rotate(315deg);
height: 2px;
top: 26.9px;
right: 0px;}
#pageHome #nelerYapariz .links .link .no{font-weight: 600;font-size: 37px;margin-right:15px;} 
#pageHome #nelerYapariz .links .link .progress{transition: width 10s linear;position: absolute;bottom: -2px;left: 0;height: 4px;background: var(--ana-renk);width: 0%;}



#pageHome #nelerYapariz .links .link:not(.active):hover{opacity: 0.4;}
#pageHome #nelerYapariz .links .link.active{color:var(--ana-renk-gri);}
#pageHome #nelerYapariz .links .link.active::after,
#pageHome #nelerYapariz .links .link.active::before{opacity:1;}

#pageHome #nelerYapariz #nelerYaparizOwl{background-color: #d9def1;
padding: 40px;
border-radius: 30px;width:510px;max-width:100%;margin:auto;
height: 100%;}
#pageHome #nelerYapariz #nelerYaparizOwl .item h3{font-weight: 600;margin-bottom: 15px;}
#pageHome #nelerYapariz #nelerYaparizOwl .item p{height:120px;}
#pageHome #nelerYapariz #nelerYaparizOwl .item img{border-radius:15px;}





#pageHome #markalarimiz{}
#pageHome #markalarimiz .markaImg{
    height:500px;  
    background-size: contain;
    background-position:top left;
}
#pageHome #markalarimiz .title,
#pageHome #markalarimiz .desc {
}

/* Marka geçiş animasyonları */
#pageHome #markalarimiz .markaImg,
#pageHome #markalarimiz .title,
#pageHome #markalarimiz .desc {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#pageHome #markalarimiz .markaImg.fade-out,
#pageHome #markalarimiz .title.fade-out,
#pageHome #markalarimiz .desc.fade-out {
    opacity: 0;
    transform: translateY(20px);
}
#pageHome #markalarimiz .links{display: flex;
width: 88%;
align-items: center;
justify-content: space-between;
margin-left: 15px;}
#pageHome #markalarimiz .links span{
filter: grayscale(1);
border: 1px solid #a8a8a8;
width: 155px;
display: flex;
justify-content: center;
align-items: center;
height: 73px;
padding: 10px;
border-radius: 10px;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
transform: scale(1);
}
#pageHome #markalarimiz .links span img{
    max-height:100%;
    transition: transform 0.3s ease;
}
#pageHome #markalarimiz .links span:hover{
    filter:grayscale(0);
    border-color:var(--ana-renk);
    transform: scale(1.05) translateY(-3px);
    box-shadow: 0 8px 20px rgba(99, 194, 208, 0.3);
}
#pageHome #markalarimiz .links span:hover img {
    transform: scale(1.1);
}
#pageHome #markalarimiz .links span.active{
    filter:grayscale(0);
    border-color:var(--ana-renk);
    cursor:default;
    transform: scale(1.05);
    box-shadow: 0 5px 15px rgba(99, 194, 208, 0.4);
    background: linear-gradient(135deg, rgba(99, 194, 208, 0.05), rgba(99, 194, 208, 0.02));
}
#pageHome #markalarimiz .links span:active {
    transform: scale(0.98);
}

#pageHome #markalarimiz .links a{background-color: var(--ana-renk);
color: #fff;transform: translate(-25px, -165px);
padding: 8px 20px;
border-radius: 23px;
position: relative;}
#pageHome #markalarimiz .links a:before{border: 2px solid var(--ana-renk);
position: absolute;
content: "";
height: 145px;
width: 90px;
top: 36px;
right: 18px;
border-top: none;
border-left: 0;
border-bottom-right-radius: 73px; }
#pageHome #markalarimiz .links a:after{
top: 176px;
position: absolute;
background-color: var(--ana-renk);
width: 8px;
height: 8px;
content: "";
left: 19px;
border-radius: 50%;}



footer{background-color:#fff;margin-top:50px;}
footer .logo{display:flex;align-items:center;}
footer .logo .adres{  }
footer .logo .adres strong{padding-left:31px;display:block; }
footer .logo .adres p{display:flex;margin:0;padding:0; align-items:center;   font-size: 14.6px;}
footer .logo .adres p i{width: 32px;}
footer a{  color:var(--renk-siyah); }

footer .footerSag{display: flex;
flex-direction: column;
text-align: end;}
footer .footerSag .tel{font-size:30px;}
footer .footerSag .tel i{font-size: 20px;margin-right: 5px;}
footer .footerSag .tel span{   font-weight:bold;}

footer .footerSag .social a{background-color: #e2e2e2;
padding: 5px;
border-radius: 50%;margin-left: 7px;width:37px;text-align:center;
font-size: 18px;}

footer .footer-bottom{display: flex;
align-items: end;}
footer .footer-bottom a:hover{color: #009688;}



/*
header .cont{display: inline-flex;
background-color: #ffffff91;
width: auto;
padding: 5px 18px;align-items:center;
border-radius: 50px;}
header .cont .logo img{height:50px;}
header .cont .menu{margin:0 0 0 20px;padding:0;}
header .cont .menu a{color: var(--renk-siyah);
font-weight: 700;font-size:15px;
padding: 0 5px;
margin: 0 4px;}

header .cont .menu a:not(.active):hover{ color: #312783;}
header .cont .menu a.active{color: #312783;
text-decoration: underline;}
header .cont .menu li{list-style-type:none;float:left;position:relative;padding:8px 0;}

header .cont .menu li .submenu{display: none;
position: absolute;z-index:2;
width: 440px;
flex-direction: column;
top: 32px;
left: 0;
background-color: #f9fcff;
padding: 11px;
box-shadow: 10px 14px 20px 2px #00000012;
border: 1px solid #b7b7b74d;
border-radius: 5px 5px 70px 5px;

background-image:url('/images/icon-large2.webp');background-size: 165px;
background-repeat: no-repeat;
background-position: 300px 140px;
}
header .cont .menu li:hover .submenu{display:inline-flex ;}
header .cont .menu li:hover .submenu a{margin:5px 0;transition-duration:.3s;}
header .cont .menu li:hover .submenu a:hover{text-indent: 7px;}
*/




#pageMarkalarimiz a{width: 100%;
    height: 175px;
    display: inline-block;border: 1px solid #d8e8ed;
    background-size: auto;
    background-color: #f6fdffa8;
    border-radius: 12px;}
#pageMarkalarimiz a:hover
{
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transform: translateY(-3px); 
    transition-duration: .3s;
}

#contentWrap{margin-top:65px;position:relative;z-index:1;min-height:70vh; }
#contentWrap .content{ 
padding: 15px;
border-radius: 5px;
width: 100%;}
#contentWrap .content h1{font-size:22px;}
#contentWrap .content h2{font-size:18px;}



#belgeveSertifikalar a[data-fancybox="belge"]{  border: 1px solid #f2f2f2;
border-radius: 5px;
color: var(--renk-siyah);
font-weight: 600;
padding: 5px;
height: 100%;
background-color: #f9fcff8a;}
#belgeveSertifikalar a[data-fancybox="belge"] span {
height: 250px;background-size: contain;
}

#iletisim{min-height:80vh;}
#iletisim .ititle{font-weight: 600; 
color: #999;
display: inline-block;
width: 100%;}
#iletisim .item p{font-size: 15px;
font-weight: 500;}
#iletisim .btn{background-color:var(--ana-renk);color:#fff;font-weight:500;}
#iletisim #form_mailgonder{background: #fff;
padding: 20px;
position: relative;
border-radius: 8px;
border: 1px solid #63c2d0;}
#iletisim iframe
{
    border: 1px solid #63c2d0;
    border-radius: 8px;
}

#pageMekanlar .mekan{}
#pageMekanlar .mekan .photo{    height: 400px;
    border-radius: 29px;}
#pageMekanlar .mekan .info{}


/* ========================================
   MEKANLAR - Bootstrap Grid + Parallax
   ======================================== */

.mekanlar-item {
    position: relative;    display: flex;
    align-items: center;
}

.mekanlar-image-wrapper
{
    position: relative;
    height:230px;transform:translateX(-10px);
    width: 60%;
    min-width: 60%;
    overflow: hidden;
    border-radius: 15px; 
}



.mekanlar-card
{
    background: white;
    width: 212px; 
    padding: 15px 20px;
    border-radius: 10px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease-out; /* Parallax için geçiş */
    will-change: transform; /* Performans */
}

.mekanlar-card h2 {
    font-size:16px;
    font-weight: 600;
    color: var(--renk-siyah);
    margin-bottom: 0;
    line-height: 1.3;
}

.mekanlar-buttons { 
    transition-duration:.5s;
    gap: 10px;
    flex-wrap: wrap; opacity: 0;
    max-height: 0;
    overflow: hidden;  
    transition: opacity 1s ease, max-height 1s ease;
}
.mekanlar-item:hover .mekanlar-buttons {
       opacity: 1;
    max-height: 210px;
}

.btn-mekan {
    padding:5px;
    border-radius:5px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-block;
    font-size: 13px;
}

.btn-yol {
    background: var(--ana-renk);
    color: white;
}

.btn-yol:hover {
    background: #4da8b8;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(99, 194, 208, 0.3);
}

.btn-web
{
    background: transparent;
    color: var(--ana-renk);
    outline: 2px solid var(--ana-renk);
    outline-offset: -2px;
}

.btn-web:hover {
    background: var(--ana-renk);
    color: white;
    transform: translateY(-2px);
}



#pageYayinlar{}
#pageYayinlar .product{}
#pageYayinlar .product .link{    display: flex;
    width: 100%;
    height: 187px;
    justify-content: center;}
#pageYayinlar .product h2{    font-size: 15px;
    text-align: center;
    font-weight: 500;
    margin-top: 3px;}