/*
 * Hide extra slick slides before init to avoid a one-frame stack flash.
 */
#banner {
    /*
     * Same overlap as yakco.net: the banner stays pinned and the white
     * advantage block scrolls up over it. Height is reserved up front
     * so the first paint does not jump when the image arrives.
     */
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 0;
    aspect-ratio: 1921 / 893;
    width: 100%;
}

.init-1,
.our-about,
.i-ohter,
.lpk_pc,
.lpk_phone,
.i-category,
.our-news,
.our-service {
    position: relative;
    z-index: 1;
}

#banner ul:not(.slick-initialized):not(.slick-dots) > li + li,
.init-1 ul:not(.slick-initialized):not(.slick-dots) > li + li,
.i-category .list ul:not(.slick-initialized):not(.slick-dots) > li + li,
.our-news .list ul:not(.slick-initialized):not(.slick-dots) > li + li,
.our-service .list ul:not(.slick-initialized):not(.slick-dots) > li + li {
    display: none !important;
}

#banner > ul,
#banner .slick-list,
#banner .slick-track,
#banner .slick-slide,
#banner li {
    height: 100%;
}

#banner > ul > li > img,
#banner > ul > li > picture.responsive-image > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

#banner > ul > li > picture.responsive-image,
#banner li > picture.responsive-image {
    display: block;
    width: 100%;
    height: 100%;
}

/*
 * Fixed header spacer: reserve height in CSS so content does not start
 * under the header and then jump when main.js sets #nav-height.
 * (main.js still updates on resize; value matches measured desktop header.)
 */
#nav-height {
    height: 74px;
}

@media (max-width: 1200px) {
    #nav-height {
        height: 0;
    }
}

/*
 * Banner text load — same timing as www.yakco.net, but pure CSS so WOW/Slick
 * don't restart the animation (which left text at opacity 0 / "double load").
 *
 * Before Slick adds .slick-active, show the first slide's content so the
 * hero copy is not missing on the first paint frame.
 */
#banner > ul:not(.slick-initialized) > li:first-child > .content {
    display: block;
}

#banner .slick-slide .content {
    display: none;
}

#banner .slick-active .content {
    display: block;
}

#banner h1 {
    margin-bottom: 20px;
    font-size: 64px;
    font-weight: bold;
    color: #FFFFFF;
    text-transform: uppercase;
}
@media (max-width: 1650px) {
    #banner h1 { font-size: 48px; }
}
@media (max-width: 1400px) {
    #banner h1 { font-size: 36px; }
}
@media (max-width: 1000px) {
    #banner h1 { font-size: 24px; }
}
@media (max-width: 700px) {
    #banner h1 { margin-bottom: 10px; }
    #banner h1 br { display: none; }
}

#banner .slick-active .content h1,
#banner .slick-active .content h2,
#banner .slick-active .content p {
    -webkit-animation: none;
    -moz-animation: none;
    animation: none;
    opacity: 1;
}

.inner-banner .content {
    -webkit-animation: fadeIn 1.5s ease 0.2s both;
    -moz-animation: fadeIn 1.5s ease 0.2s both;
    animation: fadeIn 1.5s ease 0.2s both;
}

.inner-banner h1 {
    margin-bottom: 20px;
    font-size: 64px;
    font-weight: bold;
    color: #FFFFFF;
    text-transform: uppercase;
}
@media (max-width: 1650px) {
    .inner-banner h1 { font-size: 48px; }
}
@media (max-width: 1400px) {
    .inner-banner h1 { font-size: 36px; }
}
@media (max-width: 1000px) {
    .inner-banner h1 { font-size: 24px; }
}
@media (max-width: 700px) {
    .inner-banner h1 { margin-bottom: 10px; }
    .inner-banner h1 br { display: none; }
}

.inner-banner .content h2 {
    -webkit-animation: fadeInUp 1.5s ease 0.4s both;
    -moz-animation: fadeInUp 1.5s ease 0.4s both;
    animation: fadeInUp 1.5s ease 0.4s both;
}

.inner-banner .content p {
    -webkit-animation: fadeInUp 1.5s ease 0.5s both;
    -moz-animation: fadeInUp 1.5s ease 0.5s both;
    animation: fadeInUp 1.5s ease 0.5s both;
}

/* Intrinsic size for near-fold images that Lighthouse flagged as unsized */
.our-about .left > div > img,
.our-about .left > div > picture.responsive-image,
.our-about .left > div > picture.responsive-image > img {
    width: 100%;
    height: auto;
    aspect-ratio: 567 / 850;
    display: block;
}

.our-about .right .img img {
    width: 100%;
    height: auto;
    aspect-ratio: 852 / 568;
    display: block;
}

.init-1 .Tit img {
    width: 36px;
    height: 36px;
    margin-right: 10px;
    vertical-align: middle;
}

/*
 * <picture> sits between the old direct-child selectors and the img.
 * Keep the banner fill, the ken-burns animation, and inline icons.
 */
#banner .slick-current li > picture.responsive-image > img {
    -webkit-animation: sca 5s linear forwards;
    -moz-animation: sca 5s linear forwards;
    animation: sca 5s linear forwards;
}

@media (max-width: 500px) {
    #banner li > picture.responsive-image > img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

.inner-banner > picture.responsive-image,
.inner-banner > picture.responsive-image > img {
    display: block;
    width: 100%;
    height: auto;
}

@media (max-width: 700px) {
    .inner-banner > picture.responsive-image,
    .inner-banner > picture.responsive-image > img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

.baseBtn picture.responsive-image,
.baseBtn picture.responsive-image > img {
    width: 28px;
    height: 13px;
}

.baseBtn picture.responsive-image,
.logo picture.responsive-image,
.m-logo picture.responsive-image,
.h-search picture.responsive-image,
.m-search-toggle picture.responsive-image,
.play picture.responsive-image,
.init-1 .Tit picture.responsive-image {
    display: inline-block;
    vertical-align: middle;
    line-height: 0;
}

.product-image picture.responsive-image,
.product-image picture.responsive-image > img,
.prodet-page .prodet-1 .left picture.responsive-image,
.prodet-page .prodet-1 .left picture.responsive-image > img,
.story-page .story-1 .right .img1 picture.responsive-image,
.story-page .story-1 .right .img1 picture.responsive-image > img {
    display: block;
    width: 100%;
    height: auto;
}

.story-page .story-1 .right .img1 picture.responsive-image,
.story-page .story-1 .right .img1 picture.responsive-image > img {
    height: 100%;
    object-fit: cover;
}

/*
 * Contact QR codes reuse .codes, but the 70px rule only lived under
 * #footer and #menuContent. Without it the pictures fill the column.
 */
.contact-page .codes .item {
    display: inline-block;
    vertical-align: top;
    text-align: center;
}

.contact-page .codes .item + .item {
    margin-left: 15px;
}

.contact-page .codes .item > div:first-child {
    width: 70px;
    margin: auto;
}

.contact-page .codes .item picture.responsive-image,
.contact-page .codes .item picture.responsive-image > img {
    display: block;
    width: 100%;
    height: auto;
}

@media (min-width: 769px) {
    .contact-page .contact-1 .left {
        padding-left: 90px;
    }
}

/*
 * Arabic sets dir=rtl on <html>. Slick's stylesheet then floats every
 * slide right, and its JS still offsets them as if they floated left,
 * so the active slide jumps off-screen. The header, mobile bar, and
 * footer are an LTR flex row; RTL reverses it and slides the logo
 * and tools apart. Headings inside a slide stay rtl.
 */
[dir="rtl"] #banner,
[dir="rtl"] .init-1,
[dir="rtl"] .i-category,
[dir="rtl"] .our-news,
[dir="rtl"] .our-service,
[dir="rtl"] .prodet-page .big,
[dir="rtl"] .prodet-page .small,
[dir="rtl"] .prodet-page .prodet-3,
[dir="rtl"] .slick-slider,
[dir="rtl"] .slick-list,
[dir="rtl"] .slick-track,
[dir="rtl"] .slick-slide {
    direction: ltr;
}

[dir="rtl"] .slick-slide {
    float: left;
}

[dir="rtl"] .slick-slide .content,
[dir="rtl"] .slick-slide .text,
[dir="rtl"] .slick-slide .Tit,
[dir="rtl"] .slick-slide h2,
[dir="rtl"] .slick-slide h3,
[dir="rtl"] .slick-slide p {
    direction: rtl;
}

[dir="rtl"] #header,
[dir="rtl"] #mobile,
[dir="rtl"] #footer {
    direction: ltr;
}

/*
 * Jost @font-face lives in layouts/site.blade.php so the preload href and
 * the font-face src are the same versioned URL (HTML → CSS → font chain).
 */
@font-face {
    font-family: FontAwesome;
    font-display: swap;
}

html[lang="tr"] body,
html[lang="tr"] button,
html[lang="tr"] input,
html[lang="tr"] select,
html[lang="tr"] textarea,
html[lang="tr"] textarea.input100 {
    font-family: "Jost", sans-serif;
}

.skip-link {
    position: absolute;
    left: 12px;
    top: -48px;
    z-index: 10000;
    background: #111;
    color: #fff;
    padding: 8px 14px;
    font-size: 14px;
}
.skip-link:focus {
    top: 12px;
}

button.h-search,
button.menu-btn,
button.m-btn,
button#gotop,
button#goback {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

ul.support-lists li button#goback {
    font-size: 16px;
    height: 50px;
    line-height: 50px;
    display: block;
    width: 100%;
}

.baseBtn,
.baseBtn span {
    color: #1b1b1b;
}
.baseBtn:hover,
.baseBtn:hover span {
    color: #fff;
}

#footer .footer-copy {
    opacity: 1;
    color: #c8c8c8;
}

#footer .foot-top .foot-content .foot-block h2 {
    font-size: 25px;
    margin-bottom: 40px;
    font-weight: inherit;
}

p.header-phone {
    font-size: inherit;
    font-weight: inherit;
    margin: 0;
}

p.menu-contact-title {
    font-size: inherit;
    font-weight: inherit;
    margin: 0 0 0.5em;
}

#banner .slides:not(.slick-initialized) > .slide + .slide,
.init-1 .slides:not(.slick-initialized) > .slide + .slide,
.i-category .list .grid-box:not(.slick-initialized) > .column + .column,
.our-news .list .grid-box:not(.slick-initialized) > .column + .column,
.our-service .list .grid-box:not(.slick-initialized) > .column + .column {
    display: none !important;
}

#banner > .slides,
#banner .slides {
    height: 100%;
}

#banner .slide,
#banner .slide > picture.responsive-image,
#banner .slide > picture.responsive-image > img {
    width: 100%;
    height: 100%;
    display: block;
}

#banner .slide > picture.responsive-image > img {
    object-fit: cover;
}

.init-1 .Tit picture.responsive-image {
    height: 36px;
    width: auto;
    display: inline-block;
    flex: 0 0 auto;
}
.init-1 .Tit picture.responsive-image > img {
    height: 36px;
    width: auto;
    object-fit: contain;
    display: block;
}

.inner-page .mbx a {
    color: #6e6e6e;
}