/* Home page only (loaded from Views/Home/Index.cshtml).
   Full-screen hero slider under a transparent header with white text;
   once the page is scrolled (or the menu is hovered) the header turns bone (--c0) with black text. */

/* ---------- Header ---------- */
body.home:not(.mobile-menu-active) .header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 80;
    background-color: transparent;
    color: #fff;
    transition: background-color .3s, color .3s;
}

body.home .topbar {
    background-color: transparent;
    transition: background-color .3s;
}

body.home:not(.mobile-menu-active) .header.is-scrolled,
body.home:not(.mobile-menu-active) .header:hover {
    background-color: var(--c0);
    color: var(--c1);
}

/* The dropdown submenus open inside .topbar, below the 100rem header bar: give the whole topbar the
   same background, otherwise the submenu is transparent over the slider. */
body.home:not(.mobile-menu-active) .header.is-scrolled .topbar,
body.home:not(.mobile-menu-active) .header:hover .topbar {
    background-color: var(--c0);
}

/* Logo paths carry their own fill; make them follow the header text color. */
body.home .topbar-logo svg,
body.home .topbar-logo svg * {
    fill: currentColor;
}

body.home .topbar-nav-runner::after {
    background-color: currentColor;
}

/* ---------- Hero slider ---------- */
/* On mobile the layout pushes .main below the fixed header; on home the slider goes under it. */
body.home .main {
    margin-top: 0;
}

body.home .s17 {
    position: relative;
    height: var(--app-height);
    min-height: 560px;
    padding: 0;
    overflow: hidden;
    color: #fff;
    display: flex;
    align-items: stretch;
}

body.home .s17 > .wrapper {
    position: static;
    width: 100%;
    display: flex;
}

body.home .s17-1 {
    position: static;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-top: 140rem;
    padding-bottom: 80rem;
}

/* Background images fill the whole section */
body.home .s17-3 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    z-index: 0;
    order: 0;
}

body.home .s17-3::before {
    display: none;
}

body.home .s17-3 .follow {
    transform: none !important;
}

/* Only sizes here: the swiper wrapper must keep its own display:flex or slides after the first disappear. */
body.home .s17-3 .carousel,
body.home .s17-3 .swiper-wrapper,
body.home .s17-3 .swiper-slide {
    width: 100%;
    height: 100%;
}

body.home .s17-3 picture {
    display: block;
    width: 100%;
    height: 100%;
}

body.home .s17-3 img {
    object-fit: cover;
}

body.home .s17-3 .s17-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-color: #000;
}

/* Darken top (menu) and bottom (texts) so white text stays readable */
body.home .s17-3::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .6) 100%);
}

/* Prev / next arrows at the vertical middle */
body.home .s17-11 {
    position: absolute;
    top: 50%;
    left: var(--wr);
    right: var(--wr);
}

body.home .s17-2,
body.home .s17-4,
body.home .s17-5,
body.home .s17-11,
body.home .s17-8 {
    z-index: 3;
}

/* The big headline blocks are full-width and sat on top of the arrows; let clicks pass through them. */
body.home .s17-2,
body.home .s17-4 {
    pointer-events: none;
}

body.home .s17-11 {
    z-index: 6;
}

body.home .s17-11 .carousel-button {
    width: max(30px, 40rem);
    height: max(50px, 60rem);
}

/* Counter: the current slide number is large, " / 5" stays small and dim */
body.home .s17-9 {
    opacity: 1;
    display: flex;
    align-items: baseline;
    gap: max(6px, 8rem);
    color: rgba(255, 255, 255, .6);
}

body.home .s17-9 .swiper-pagination-current {
    font-family: var(--altfont);
    font-size: max(30px, 44rem);
    line-height: 1;
    color: #fff;
}

/* ---------- Slide progress line (under the "1 / 5" counter) ---------- */
body.home .s17-9 {
    margin-bottom: max(10px, 14rem);
}

.s17-line {
    position: relative;
    width: max(120px, 220rem);
    height: 1px;
    margin-bottom: max(20px, 30rem);
    overflow: hidden;
    background-color: rgba(255, 255, 255, .3);
}

.s17-line i {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    transform: scaleX(0);
    transform-origin: left center;
}

/* Slide titles hidden for now, so the description needs no top gap */
body.home .s17-7-1 {
    display: none;
}

body.home .s17-7-2 {
    margin-top: 0;
}

/* Video sound toggle: a small borderless icon in the rotated "Scroll" bar (.s17-8), just above the text.
   The bar is rotated 90deg, so the button is rotated back to stay upright. Only shown on video slides. */
.s17-sound {
    flex: none;
    width: 32px;
    height: 32px;
    margin-right: max(14px, 20rem);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: rotate(-90deg);
    transition: opacity .4s, visibility 0s .4s;
}

.s17-sound.is-visible {
    opacity: .85;
    visibility: visible;
    transition: opacity .4s;
}

.s17-sound.is-visible:hover {
    opacity: 1;
}

.s17-sound:focus-visible {
    outline: 1px solid currentColor;
    outline-offset: 2px;
}

.s17-sound-icon {
    width: 28px;
    height: 28px;
    fill: none;
    stroke: currentColor;
    stroke-width: .85;
    stroke-linecap: round;
    stroke-linejoin: round;
    overflow: visible;
}

/* Muted: speaker + cross. Sound on: speaker + waves that pulse softly. */
.s17-sound-icon .on,
.s17-sound.is-on .s17-sound-icon .off {
    display: none;
}

.s17-sound.is-on .s17-sound-icon .on {
    display: inline;
    animation: s17-wave 1.6s ease-in-out infinite;
}

@keyframes s17-wave {
    0%, 100% { opacity: 1; }
    50% { opacity: .45; }
}
/* ---------- Ceramica Konsept (section s16): eyebrow, motto, thin line, description, "Keşfet" button ---------- */
.ck {
    max-width: 820px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.ck-eyebrow {
    font-size: var(--f-xxs);
    letter-spacing: .24em;
    text-transform: uppercase;
    opacity: .5;
}

.ck-motto {
    margin-top: max(18px, 28rem);
    font-size: var(--f-xl2);
    line-height: 1.02;
}

.ck-motto i {
    display: inline-block;
    padding-left: 1.2em;     /* the italic line steps in, like the site's split headings */
}

.ck-line {
    display: block;
    width: 1px;
    height: max(50px, 80rem);
    margin: max(28px, 44rem) 0;
    background: linear-gradient(to bottom, transparent, var(--c2));
}

.ck .aciklama {
    max-width: 640px;
    font-size: var(--f-m);
    line-height: 1.65;
    opacity: .8;
}

.ck-button {
    margin-top: max(36px, 54rem);
    min-width: 220px;
    gap: 16px;
    background-color: transparent;
    color: var(--c1);
}

.ck-button .icon {
    position: relative;
    z-index: 1;
    transition: transform .3s;
}

.ck-button:hover {
    background-color: var(--c1);
    color: var(--c0);
}

.ck-button:hover .icon {
    transform: translateX(4px);
}

/* Reveal: the parts fade up one after another when the section scrolls into view */
.ck.ck-ready > * {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .9s ease, transform .9s ease;
}

.ck.ck-ready > .ck-line {
    transform: scaleY(0);
    transform-origin: top;
}

.ck.ck-in > *,
.ck.ck-in > .ck-line {
    opacity: 1;
    transform: none;
}

.ck.ck-in > .ck-eyebrow { transition-delay: 0s; }
.ck.ck-in > .ck-motto { transition-delay: .15s; }
.ck.ck-in > .ck-line { transition-delay: .4s; }
.ck.ck-in > .aciklama { transition-delay: .6s; }
.ck.ck-in > .ck-button { transition-delay: .8s; }

.ck.ck-in > .ck-eyebrow { opacity: .5; }
.ck.ck-in > .aciklama { opacity: .8; }

@media (prefers-reduced-motion: reduce) {
    .ck.ck-ready > * {
        transition: none;
    }
}
/* Equal spacing between all home page sections (except the full-screen slider) */
body.home .main .section:not(.s17) {
    padding-top: max(45px, 70rem);
    padding-bottom: max(45px, 70rem);
}

/* Press logos: continuous, slow marquee at every screen size (see Index.cshtml) */
body.home .s14-1 .swiper-wrapper {
    transition-timing-function: linear !important;
}
/* Spaces panels (s15): title always visible over a soft gradient, description appears when the panel widens */
.s15-cap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: max(60px, 90rem) max(18px, 28rem) max(20px, 30rem);
    color: #fff;
    pointer-events: none;
    background: linear-gradient(to top, rgba(22, 22, 1, .62), rgba(22, 22, 1, 0));
}

.s15-cap-title {
    font-size: var(--f-b);
    font-weight: 300;
    line-height: 1.1;
    white-space: nowrap;
}

.s15-cap-text {
    max-width: 360px;
    margin-top: max(8px, 10rem);
    font-size: var(--f-xs);
    line-height: 1.55;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transform: translateY(8px);
    transition: opacity .4s .1s, transform .4s .1s, max-height .4s;
}

.s15-2:hover .s15-cap-text {
    opacity: .9;
    max-height: 120px;
    transform: none;
}

/* Phones / tablets: panels are stacked, so the description is always shown */
@media screen and (max-width: 1023.98px) {
    .s15-cap-text {
        opacity: .9;
        max-height: none;
        transform: none;
    }
}
/* ---------- Brand logos marquee (s14): black logos, own colours on hover ---------- */
.s14-kicker {
    margin-bottom: max(18px, 28rem);
    text-align: center;
    font-size: var(--f-xs);
    letter-spacing: .16em;
    text-transform: uppercase;
    opacity: .55;
}

.s14-brand {
    align-items: center;
    justify-content: center;
    height: max(56px, 84rem);
    padding: 0 max(10px, 20rem);
}

.s14-brand::before {
    display: none;
}

.s14-brand img {
    width: 100%;
    height: 100%;
    max-width: 220px;
    object-fit: contain;
    /* Colours become black, white parts take the background colour: the logo reads as black ink */
    filter: grayscale(1) contrast(4) brightness(.85);
    mix-blend-mode: multiply;
    opacity: .82;
    transition: filter .5s ease, opacity .5s ease, transform .5s ease;
}

.s14-brand:hover img,
.s14-brand:focus-visible img {
    filter: none;
    mix-blend-mode: normal;
    opacity: 1;
    transform: scale(1.06);
}

/* ---------- Services (sv) ---------- */
.sv .section-title {
    margin-bottom: max(14px, 20rem);
}

.sv-lead {
    max-width: 520px;
    margin: 0 auto max(34px, 56rem);
    text-align: center;
    font-size: var(--f-s);
    line-height: 1.6;
    opacity: .7;
}

.sv-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: var(--sl) solid var(--c3);
    border-left: var(--sl) solid var(--c3);
}

.sv-item {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: max(14px, 18rem);
    padding: max(28px, 46rem) max(22px, 40rem) max(30px, 44rem);
    border-right: var(--sl) solid var(--c3);
    border-bottom: var(--sl) solid var(--c3);
    overflow: hidden;
    transition: background-color .5s ease;
}

.sv-item:hover {
    background-color: rgba(255, 255, 255, .35);
}

/* Big outlined number in the corner */
.sv-no {
    position: absolute;
    top: max(10px, 16rem);
    right: max(14px, 24rem);
    font-size: max(64px, 110rem);
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px rgba(22, 22, 1, .16);
    transition: -webkit-text-stroke-color .5s ease, transform .6s ease;
    pointer-events: none;
}

.sv-item:hover .sv-no {
    -webkit-text-stroke-color: rgba(22, 22, 1, .4);
    transform: translateY(-4px);
}

.sv-icon {
    width: max(46px, 64rem);
    height: max(46px, 64rem);
    color: var(--c1);
    fill: none;
    transition: transform .6s ease;
}

.sv-item:hover .sv-icon {
    transform: translateY(-3px);
}

/* The icon lines draw in once the section is on screen (js in Home/Index) */
.sv.sv-ready .sv-icon * {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
}

.sv.sv-in .sv-icon * {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 1.6s cubic-bezier(.65, 0, .35, 1);
    transition-delay: calc(var(--sv-i, 0) * .14s);
}

.sv-title {
    margin-top: max(6px, 10rem);
    font-size: var(--f-l);
    line-height: 1.05;
    font-weight: 400;
}

.sv-text {
    font-size: var(--f-s);
    line-height: 1.7;
    opacity: .75;
}

.sv-tag {
    align-self: flex-start;
    margin-top: auto;
    padding: 7px 14px;
    border: var(--sl) solid rgba(22, 22, 1, .3);
    border-radius: 999px;
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    transition: background-color .4s, color .4s, border-color .4s;
}

.sv-item:hover .sv-tag {
    background-color: var(--c1);
    border-color: var(--c1);
    color: var(--c0);
}

@media screen and (max-width: 1023.98px) {
    .sv-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media screen and (max-width: 639.98px) {
    .sv-grid {
        grid-template-columns: 1fr;
    }

    .sv-no {
        font-size: 56px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sv.sv-ready .sv-icon * {
        stroke-dashoffset: 0;
    }
}