:root {
    scroll-behavior: auto !important;
    --main-color: #052659;
    --secondary-color: #8099bf;
    --gray-color: #d2d5d8;
    --orange-color: #ff772c;


}

/* Fonts */

@font-face {
    font-family: Aceh_Black;
    src: url('../fonts/aceh/Aceh-Black.ttf') format('truetype');
}

@font-face {
    font-family: Aceh_Light;
    src: url('../fonts/aceh/Aceh-Light.ttf') format('truetype');
}.thumbnail-inner

@font-face {
    font-family: Aceh_Medium;
    src: url('../fonts/aceh/Aceh-Medium.ttf') format('truetype');
}

@font-face {
    font-family: Aceh_Regular;
    src: url('../fonts/aceh/Aceh-Regular.ttf') format('truetype');
}

@font-face {
    font-family: Aceh_SemiBold;
    src: url('../fonts/aceh/Aceh-SemiBold.ttf') format('truetype');
}

@font-face {
    font-family: Aceh_Thin;
    src: url('../fonts/aceh/Aceh-Thin.ttf') format('truetype');
}


@font-face {
    font-family: Merriweather_Light;
    src: url('../fonts/Merriweather/Merriweather-Light.otf') format('opentype');
}

@font-face {
    font-family: Merriweather_Regular;
    src: url('../fonts/Merriweather/Merriweather-Regular.otf') format('opentype');
}

@font-face {
    font-family: Merriweather_Bold;
    src: url('../fonts/Merriweather/Merriweather-Bold.otf') format('opentype');
}

.aceh-black {
    font-family: Aceh_Black;
}

.aceh-light {
    font-family: Aceh_Light;
}

.aceh-medium {
    font-family: Aceh_Medium;
}

.aceh-regular {
    font-family: Aceh_Regular;
}

.aceh-semibold {
    font-family: Aceh_SemiBold;
}

.aceh-thin {
    font-family: Aceh_Thin;
}

.merriweather-light {
    font-family: Merriweather_Light;
}

.merriweather-regular {
    font-family: Merriweather_Regular;
}

.merriweather-bold {
    font-family: Merriweather_Bold;
}

.orange-color {
    color: var(--orange-color);
}

.main-color {
    color: var(--main-color)!important;
}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.container-fluid {
    padding-right: 0 !important;
    padding-left: 0 !important;
}

.boyutlandirma-logo{
    width:50px;
    height:50px;
    object-fit:contain;
}
/******** Header ***********/
.default-header {
    height: 100%;
    background: #8099BF;
    background: linear-gradient(180deg, rgba(128, 153, 191, 1) 0%, rgba(5, 38, 89, 1) 100%);
}

.market-header{
    height: 100%;
    background: #8099BF;
}

.logo img {
    width: 120px;
    object-fit: contain;
}


.nav li {
    list-style-type: none;
    font-family: Aceh_Regular;
    color: #ffff;
    font-size: 1vw;
}


/*** Toggle Switch***/


.checkbox_item .checkbox_wrap {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    width: 100%;
    max-width: 150px;
    height: 100%;
}

.checkbox_item .checkbox_wrap .checkbox_inp {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    z-index: 1;
}

.checkbox_item .checkbox_wrap .checkbox_mark {
    display: inline-block;
    border-radius: 25px;
    width: 100%;
    height: 35px;
    background: #D2D5D8;
    position: relative;
}

.checkbox_item .checkbox_wrap .checkbox_mark:before,
.checkbox_item .checkbox_wrap .checkbox_mark:after {
    content: "";
    position: absolute;
    transition: all 0.5s ease;
}

/* flat styles */
.checkbox_item.citem_2 .checkbox_wrap .checkbox_mark {
    width: 150px;
    height: 35px;
    background: #D2D5D8;
}

.checkbox_item.citem_2 .checkbox_wrap .checkbox_mark:before {
    width: 50%;
    height: 35px;
    left: 0;
    background: #FF772C;
    border-radius: 25px;
}


.checkbox_item.citem_2 .checkbox_wrap .checkbox_inp:checked~.checkbox_mark:before {
    left: 50%;
    background: #FF772C;
}


.icons {
    width: 100%;
    position: absolute;
    z-index: 5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 2vw;
    pointer-events: none;
}

.icons .icon i {
    color: var(--main-color);
}

h1.header-title,
.header-title-container span {
    color: #ffffffba;
    font-size: 18.5vw;
    line-height: 31.5vh;
    display: inline-block;
}

.header-title-container span {
    line-height: 42.5vh !important;
}

.header-title-container {
    width: 100%;
    overflow: hidden;
}

.header-title-container::before,
.header-title-container::after {
    content: "";
    display: flex;
    position: absolute;
    width: 100%;
    margin: auto;
    height: 1px;
    background-color: #fff6ea40;
}

.header-title-container::before {
    bottom: 0;
}

.header-title-container::after {
    top: 0;
}


.mobil-tg{
    display:none;
}


@media (max-width: 768px) {
    .checkbox_item.citem_2 {
        width: 100%;
    }

    .checkbox_item.citem_2 .checkbox_wrap .checkbox_mark,
    .checkbox_item.citem_2 .checkbox_wrap .checkbox_mark:before {
        height: 30px;
    }
    .kumanda-gorsel{
        aspect-ratio:12/12!important;
    }
    
    .brosur-tg{
        font-size: calc(1.3rem + .6vw) !important;
    }
    
    .masaustu-tg{
        display:none;
    }
    .mobil-tg{
        display:block;
    }
    
}


/***** Banner  *************/

.banner-img button img {
    pointer-events: none;
}

.banner-img button:hover img {
    transform: rotate(180deg);
    transform-origin: center;
    transition: transform 0.7s ease;
}

.banner .banner-img img.main-banner-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
}


.banner .box {
    position: relative;
    height: fit-content;
    left: 9vw;
    bottom: -11vh;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.25);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    backdrop-filter: blur(13px);
    -webkit-backdrop-filter: blur(13px);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
}


.banner .box p {
    font-family: Merriweather_Regular;
    font-size: 14px;
}


.banner .box2 {
    display: flex;
    flex-wrap: nowrap;
    height: fit-content;
    justify-content: center;
    align-items: center;
    position: relative;
    right: 8vw;
    top: 45vh;
}

.banner .box2 p {
    font-family: Aceh_SemiBold;
    padding: 1rem 4rem;
    background: rgba(255, 255, 255, 0.25);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    backdrop-filter: blur(13px);
    -webkit-backdrop-filter: blur(13px);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.banner .box2 i {
    padding: 2rem;
    font-size: xx-large;
    background: rgba(255, 255, 255, 0.25);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    backdrop-filter: blur(13px);
    -webkit-backdrop-filter: blur(13px);
    border-radius: 70px;
    border: 1px solid rgba(255, 255, 255, 0.18);
}


@media(max-width : 768px) {

    .banner .box,
    .banner .box2 {
        left: 0 !important;
        right: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
    }
}

/**** Brand İnfo *****/

.bg-main {
    background-color: var(--main-color);
}

.bg-second {
    background-color: var(--secondary-color);
}

.bg-gray {
    background-color: var(--gray-color);
}

.bg-orange {
    background-color: var(--orange-color);
}


.slider-product {
    background: rgb(2 32 77);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    backdrop-filter: blur(13px);
    -webkit-backdrop-filter: blur(13px);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.slider-product .carousel-item{
    aspect-ratio: 16/10;
}


.slider-product .carousel-inner {
  height: 400px; /* İstediğin sabit yükseklik */
  overflow: hidden;
}

.slider-product .carousel-inner .carousel-item img {
  height: 100%;
  width: 100%;
  object-fit: contain; /* veya 'cover' ihtiyaca göre */
}


.mision-box,
.vision-box {
    padding: 3rem;
    background: rgba(255, 255, 255, 0.25);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    backdrop-filter: blur(13px);
    -webkit-backdrop-filter: blur(13px);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
}

.mision-box h1,
.vision-box h1 {
    font-family: Aceh_SemiBold;
    color: #fff;
    font-size: clamp(1.5rem, 5vw, 2rem);
}

.mision-box p,
.vision-box p {
    font-family: Merriweather_Light;
    color: #fff;
    font-size: clamp(1rem, 2.5vw, 1rem);
}


/***** Product Area ***/



button.product-button {
    background-color: #FF772C;
    border: none;
    padding: .5rem 1.5rem;
    color: #fff;
    border-radius: 35px;

}

button.product-button i {
    font-size: 18px;
}


/** Main Product ***/

.main-product .product-box {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    background: #fff;
    border-radius: 15px;
    padding: 2rem;
    align-items: flex-start;

}

.main-product .product-box .titles .title,
.main-product .product-box .titles .subtitle {
    font-family: Aceh_Regular;
}

.main-product .product-box .titles {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}


.main-product .info{
    font-size:1vw!important;
}

.main-product .info span{
    font-size:small!important;
}

.main-product .product-box .titles .subtitle {
    display: inline-block;
    width: 100%;
}

.images {
    width: 90%;
    height: auto;
    margin: auto;
}

.images img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bottom-area {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5vw;
}

.bottom-area .info {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 1vh;
}

.bottom-area button {
    width: 70px;
    height: 70px;
    border-radius: 50px;
    background-color: var(--main-color);
    border: none;
}

.bottom-area button i {
    color: #fff;
}

.bottom-area .info li {
    font-family: Merriweather_Light;
    list-style-type: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.bg-benefit {
    background-color: #001F4E;
}

.benefit-box i {
    font-size: 4vw;
}

@media (min-width: 1200px) {
    h1.product-choose-title {
        font-size: 2rem !important;
    }
}

#map {
    height: 500px;
    width: 100%;
    margin-top: 15px;
}

#il,
#ilce {
    height: fit-content;
}

.search {
    width: 50px;
    height: 50px;
}

.help-center {
    transition: all .5s ease-in-out;
}

.help-center:hover {
    border: 1px solid;
    background-color: #141414 !important;
    color: white !important;
}



.footer-bg {
    position: absolute;
    opacity: .1;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform: rotate(45deg) translate(6vh, 21vh);
    /* Burada döndürüyorsun */
    transform-origin: center center;
}

.hotspot {
    position: absolute;
    /*top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);*/
    cursor: pointer;
    background: rgba(48, 47, 47, 0.25);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(13px);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    animation: pulse 1.5s infinite;
}

.hotspot1 {
    top: 35%;
    left: 0%;
}

.hotspot2 {
    bottom: 35%;
    right: 0%;
}

.hotspot3 {
    top: 50%;
    left: 50%;
}


.hotspot:focus {
    border: none;
}

@keyframes pulse {
    from {
        box-shadow: 0 0 0 0px rgba(31, 38, 135, 0.618);
        ;
    }

    to {
        box-shadow: 0 0 0 15px rgba(0, 0, 0, 0);
    }
}

.slider-banner .carousel-item {
    aspect-ratio: 16/6;
}

/*
@media (max-width: 768px) {
    .slider-banner .carousel-item {
    aspect-ratio: 16/16;
}

}*/


@media (max-width: 990px) {
    .slider-banner .carousel-item {
        aspect-ratio: 6/10!important;
    }
    #bayiCarousel .carousel-inner .carousel-item img{
        aspect-ratio: 16/19!important;
    }

}

@media (max-height: 400px) {
    .slider-banner .carousel-item {
        aspect-ratio: 12/16;
    }
}




/*

.slider-banner .carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

.slider-banner .carousel-item .carousel-caption {
    background-color: rgba(255, 255, 255, 0.405);
}

.carousel-control-next {

    justify-content: end !important;
}

.carousel-control-prev {

    justify-content: start !important;
}
*/


/****************************************/
/***************************************/


/*
.slider-banner .carousel-item .carousel-caption {
    background-color: transparent !important;
}

.carousel-caption {
    position: absolute;
    right: 0;
    top: 0;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
}

.carousel-text {
    width: fit-content;
    height: fit-content;
}*/
/*
.slider-banner .slide1 {
    background-image: url(/images/bg-image.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
*/
.slider-banner .slide2 {
    background-image: url(/images/slide-home-bg.webp);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.carousel-caption p {
    width: 60%;
}

.slide2-image {
    position: relative;
    width: fit-content;
    height: fit-content;
}





@media (max-width: 990px) {
    .slide2-image::after {
        width: 15vw;
    }
}

.wp-button {
    position: fixed;
    width: fit-content;
    height: fit-content;
    right: 2vw;
    bottom: 3vw;
    z-index: 1001;
}

.wp-button a {
    text-decoration: none;
}

.wp-button button i {
    color: #25D366;
    font-size: large;
}

.object-position-top {
    object-position: top;
}

.slider-banner .slide3 {
    background-image: url(/images/slide-nature-bg.webp);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}




@media (max-width: 768px) {
    .w-md-100 {
        width: 100% !important;
    }
    
    .bottom-area {
        flex-direction:column;
    }
}

.p-size {
    font-size: clamp(1rem, 2.5vw, 1.3rem);
}

.tel-size {
    font-size: clamp(1rem, 2.5vw, 1.7rem);
}

.h-size {
    font-size: clamp(1.5rem, 5vw, 2.5rem);
}

.main-bg-color {
    background-color: var(--main-color)!important;
}

.orange-bg-color {
    background-color: var(--orange-color);
}

.orange-bg-color:hover {
    background-color: var(--orange-color)!important;
}


.slide5 {
    background: #8099BF;
    background: linear-gradient(59deg, rgba(128, 153, 191, 1) 0%, rgba(240, 240, 240, 1) 100%);
}

.slide5 .contact span {
    background: #052659;
    background: linear-gradient(59deg, rgba(5, 38, 89, 1) 0%, rgba(5, 38, 89, 0) 100%);
}

.slide6{
    background: linear-gradient(135deg, #8099bf 50%, #052659 45%);
}

.carousel-control-next, .carousel-control-prev{
    width: 5%!important;
}

/*********************Video **************************/
.video-bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: -1;
    }

    .content {
      position: relative;
      z-index: 1;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      color: white;
      text-shadow: 1px 1px 5px rgba(0,0,0,0.7);
    }


    .slider-banner .carousel-item {
      position: relative;
      width: 100%;
      aspect-ratio: 16 / 7; /* 👈 Video yüksekliğini oranlı yapar */
      overflow: hidden;
    }

    .carousel-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center; /* 👈 Videoyu yukarıdan hizala */
    z-index: -1;
  }

  .slide1.carousel-item::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:  rgba(5, 39, 89, 0.789); /* 👈 Siyah %50 saydamlık */
  z-index: 0;
}


  

@keyframes fadeUp {
  0% {
    opacity: 0;
    transform: translateY(50px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-up {
  animation: fadeUp 1s ease-out forwards;
  opacity: 0; /* Başlangıçta görünmesin */
}


/******************* Kurumsal ***************************/

.kurumsal-banner {
    aspect-ratio: 16/8;
}



.kurumsal-banner div img {

    border-radius: 30px;
}

.kurumsal-banner .image2 {
    right: 0;
    bottom: 0;
    outline: 1.5vw solid white;
    width: 30vw;
    height: 30vh;
    border-radius: 30px;
}

.kurumsal-banner .image2::before {
    content: "";
    position: absolute;
    top: -4.7vw;
    right: 0;
    display: flex;
    width: 50px;
    height: 50px;
    border-bottom-right-radius: 30px;
    box-shadow: 20px 11px white;
}

.kurumsal-banner .image2::after {
    content: "";
    position: absolute;
    bottom: 0px;
    left: -4.7vw;
    display: flex;
    width: 50px;
    height: 50px;
    border-bottom-right-radius: 30px;
    box-shadow: 20px 11px white;
}


.about-content::before {
    content: "\275D";
    position: absolute;
    top: -1rem;
    left: -3rem;
    font-size: 20vw;
    line-height: .5;
    color: #05265930;
}

.brand-info-kurumsal {
    background-image: url(/images/slider1.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.brand-info-kurumsal::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(5, 39, 89, 0.789);
    z-index: 0;
}


/************************Ürünlerimiz* *********************************/

.product-page-banner {
    background: #052659;
    background: linear-gradient(90deg, rgba(5, 38, 89, 1) 0%, rgba(128, 153, 191, 1) 100%);
}

.blue-bg-color{
    background-color: #EEF5FF!important;
}


/*********************** Ürün Detay *********************************/

       .main-image {
           
            aspect-ratio: 16 / 11;
            max-height: fit-content;
            object-fit: contain;
            border: 4px solid #052659;
            border-radius: 30px;
        }

        .thumbnail-img {
            width: 100%;
            height: 100px;
            border-radius: 10px;
            background-color: #052659;
            border: 2px solid transparent;
            cursor: pointer;
            transition: border-color 0.3s;
            object-fit: contain;
        }

        .thumbnail-img.active {
            border-color: #0d6efd;
        }

        .thumbnail-carousel {
            position: relative;
            overflow: hidden;
            max-width: 100%;
        }

        .thumbnail-inner {
            display: flex;
            transition: transform 0.5s ease;
            gap: 10px;
            width: auto;
        }

        .carousel-btn {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            z-index: 2;
            background-color: rgba(255, 255, 255, 0.8);
            border: none;
            padding: 0.3rem 0.6rem;
            font-weight: bold;
            cursor: pointer;
            border-radius: 50%;
        }

        .carousel-btn.left {
            left: 0;
        }

        .carousel-btn.right {
            right: 0;
        }

        .thumbnail-slide {
            flex: 0 0 calc(33.33% - 6.7px);
            /* 3 görsel */
        }

        .wp-siparis {
            background-color: #4FCE5D;
        }

        .tel-siparis {
            background-color: #ff772c;
        }
        
        
        
        .bgblur{
              background: rgb(2 32 77);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    backdrop-filter: blur(13px);
    -webkit-backdrop-filter: blur(13px);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
        }
        
        
        
        /***************** Contact Form ********************************/
.contact-form {
      max-width: 500px;

      text-align: center;
    }

    .contact-form h4 {
      font-weight: bold;
      margin-bottom: 10px;
    }

    .form-control {
      background-color: #f0f6ff;
      border: none;
      border-radius: 20px;
      padding: 12px 20px;
      margin-bottom: 15px;
    }

    textarea.form-control {
      border-radius: 25px;
      min-height: 150px;
      resize: none;
    }

    .form-row {
      display: flex;
      gap: 15px;
    }

    .btn-submit {
      background-color: #00205b;
      color: white;
      border-radius: 25px;
      padding: 12px 50px;
      font-weight: bold;
      border: none;
      transition: background-color 0.3s ease;
    }

    .btn-submit:hover {
      background-color: #001743;
    }
    
    
    /*******************************************/
    
    
    .li-style-contact{
        background: var(--orange-color);
        color: white;
        padding: 1rem;
        border-radius: 5px;
    }
    
    
    .popover-img{
        width:32px;
    }
    
    /********************** Mobil Menu ****************************/
    
    
    .nav-button {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .2rem;
    border: 1px solid #000000;
    border-radius: 25px;
    height: fit-content;
    padding: .2rem .5rem;
}

.nav-button p {
    font-family: Aceh_Regular;
    color: #00000;
}

.nav-button:hover {
    cursor: pointer;
}

.nav-button .line {
    width: 20px;
    height: auto;
}

.nav-button .line i {
    font-size: 12px;
    color: #00000;
}


    
    
    .mobile-menu {
    position: fixed;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: #8099bf;
    z-index: 9999;
    transition: left 0.4s ease;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .mobile-menu.active {
    left: 0;
  }

  .menu-list li {
    color: #fff;
    font-size: 1.8rem;
    margin: 10px 0;
    opacity: 0;
    animation: fadeIn 0.5s ease forwards;
    animation-delay: calc(var(--i) * 0.2s);
  }

  @keyframes fadeIn {
    to {
      opacity: 1;
      transform: translateY(0);
    }
    from {
      opacity: 0;
      transform: translateY(20px);
    }
  }
  
  /************************ Bayi ************************************/
  
  .bayi-container{
      display:flex;
      flex-direction:column;
      justify-content:center;
      align-items:center;
      position:relative;
  }
  
  #bayiCarousel .carousel-inner .carousel-item img {
    aspect-ratio: 16 / 6;
    object-fit: cover;
  }
  
    #bayiCarousel .carousel-inner .carousel-item:before{
         content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:  rgb(5 39 89 / 52%);
    }
  




/***********************************************************************/



.defaultpage-header, .marketpage-header{
    height: 100%;
    background: white;
}


/********************Küçük ekrn başlıklar***************************/

@media (max-width: 767.98px) {
  .sm-kucuk-baslik {
    font-size: 1.1rem !important;
  }
  
  .about-content::before{
      left:0!important;
      font-size:50vw!important;
  }
  
  .thumbnail-img{
      object-fit:cover!important;
  }
  
  .mobil-logo-img{
      width:100%!important;
  }
}

/*****************************************************************/

#araBtnServis{
    transition: .2s ease-in-out;
}

#araBtnServis:hover{
    background-color:#FF772C;
    
}
/* ---- KK FLIP (unique prefix: kk-) ---- */
.kk-flip-group{ display:inline-flex;  align-items:center; vertical-align:middle; }
.kk-flip-digit{ display:inline-block; width:1.2ch; height:1.2em; position:relative; perspective:700px; }
.kk-inner{ position:absolute; inset:0; transform-style:preserve-3d; transition: transform .45s cubic-bezier(.2,.8,.2,1); transform: rotateX(0deg); }
.kk-face{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; backface-visibility:hidden; font-weight:700; line-height:1; font-size:0.95rem; color:var(--main-color); }
.kk-front{ transform: rotateX(0deg); }
.kk-back{ transform: rotateX(180deg); color:#FF772C; }

/* reduced motion tercihi */
@media (prefers-reduced-motion: reduce){
  .kk-inner{ transition:none !important; }
}

/* link/numara görünümü (isteğe göre değiştir) */
a.kk-num{ text-decoration:none; color:inherit; display:inline-block; display: flex; gap: 5px;}

/*****************************************************************************************************/

#liste-baslik{
    display:none;
}