:root {
    --navy: #07151b;
    --navy-2: #0d2027;
    --cream: #f2eee5;
    --white: #ffffff;
    --copper: #b68b63;
    --text: #18262b;
    --muted: #748086;

    --serif: "Playfair Display", serif;
    --sans: "DM Sans", sans-serif;
}


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


html {
    scroll-behavior: smooth;
}


body {
    font-family: var(--sans);
    color: var(--text);
    background: var(--cream);
    overflow-x: hidden;
}


img {
    display: block;
    width: 100%;
}


a {
    color: inherit;
    text-decoration: none;
}


.container {
    width: min(1240px, calc(100% - 80px));
    margin: auto;
}


.section {
    padding: 140px 0;
}


/* HEADER */

.header {
    height: 92px;
    padding: 0 50px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    position: absolute;
    top: 0;
    left: 0;
    width: 100%;

    z-index: 100;

    color: white;
}


.logo img {
    width: 145px;
    max-height: 55px;
    object-fit: contain;
}


.desktop-nav {
    display: flex;
    align-items: center;
    gap: 38px;
}


.desktop-nav a {
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .12em;

    opacity: .7;

    transition: .3s;
}


.desktop-nav a:hover,
.desktop-nav a.active {
    opacity: 1;
}


.header-button {
    display: flex;
    gap: 15px;
    align-items: center;

    border: 1px solid rgba(255,255,255,.35);

    padding: 13px 18px;

    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .1em;

    transition: .3s;
}


.header-button:hover {
    background: white;
    color: var(--navy);
}


.menu-toggle {
    display: none;

    background: none;
    border: 0;

    width: 40px;
    height: 40px;

    cursor: pointer;
}


.menu-toggle span {
    width: 25px;
    height: 1px;

    background: white;

    display: block;

    margin: 7px auto;
}


/* MOBILE MENU */

.mobile-menu {
    position: fixed;

    inset: 0;

    background: var(--navy);

    z-index: 90;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 25px;

    opacity: 0;
    visibility: hidden;

    transition: .4s;
}


.mobile-menu.open {
    opacity: 1;
    visibility: visible;
}


.mobile-menu a {
    color: white;

    font-family: var(--serif);

    font-size: 34px;
}


/* HERO */

.hero {
    min-height: 100vh;

    position: relative;

    background: var(--navy);

    color: white;

    display: flex;
    align-items: center;
}


.hero-image {
    position: absolute;
    inset: 0;

    background:
        url("../images/hero.jpg")
        center/cover no-repeat;

    transform: scale(1.02);
}


.hero-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(3,15,20,.94) 0%,
            rgba(3,15,20,.68) 45%,
            rgba(3,15,20,.20) 100%
        );
}


.hero-content {
    position: relative;

    width: min(1240px, calc(100% - 80px));

    margin: auto;

    padding-top: 100px;
}


.eyebrow {
    display: block;

    font-size: 11px;

    font-weight: 600;

    letter-spacing: .22em;

    text-transform: uppercase;

    color: rgba(255,255,255,.65);

    margin-bottom: 25px;
}


.eyebrow.dark {
    color: var(--copper);
}


.hero h1 {
    font-family: var(--serif);

    font-weight: 500;

    font-size: clamp(65px, 8vw, 125px);

    line-height: .9;

    letter-spacing: -.06em;

    max-width: 850px;
}


h1 em,
h2 em {
    font-style: italic;
    font-weight: 400;
}


.hero-description {
    max-width: 480px;

    margin-top: 35px;

    font-size: 17px;

    line-height: 1.7;

    color: rgba(255,255,255,.72);
}


.hero-buttons {
    display: flex;

    align-items: center;

    gap: 30px;

    margin-top: 40px;
}


.button {
    display: inline-flex;

    align-items: center;
    gap: 25px;

    padding: 17px 23px;

    text-transform: uppercase;

    font-size: 11px;

    letter-spacing: .14em;

    font-weight: 600;

    transition: .3s;
}


.button-light {
    background: white;
    color: var(--navy);
}


.button-light:hover {
    background: var(--copper);
    color: white;
}


.button-dark {
    background: var(--navy);
    color: white;
}


.button-dark:hover {
    background: var(--copper);
}


.text-button {
    font-size: 12px;

    text-transform: uppercase;

    letter-spacing: .12em;

    border-bottom: 1px solid rgba(255,255,255,.5);

    padding-bottom: 7px;
}


.hero-bottom {
    position: absolute;

    bottom: 40px;
    left: 50px;

    display: flex;

    align-items: center;

    gap: 15px;

    font-size: 9px;

    letter-spacing: .2em;

    opacity: .55;
}


.scroll-line {
    width: 60px;
    height: 1px;

    background: white;
}


/* INTRO */

.intro-grid {
    display: grid;

    grid-template-columns: 25% 1fr;

    gap: 50px;
}


.section-label {
    display: flex;

    gap: 15px;

    color: var(--copper);

    font-size: 10px;

    letter-spacing: .15em;
}


.intro h2,
.section-heading h2 {
    font-family: var(--serif);

    font-size: clamp(50px, 6vw, 90px);

    font-weight: 500;

    line-height: .95;

    letter-spacing: -.05em;
}


.large-text {
    max-width: 650px;

    font-size: 19px;

    line-height: 1.8;

    color: #647075;

    margin-top: 40px;
}


.underlined-link {
    display: inline-flex;

    gap: 25px;

    margin-top: 35px;

    border-bottom: 1px solid #18262b;

    padding-bottom: 8px;

    font-size: 12px;

    text-transform: uppercase;

    letter-spacing: .12em;
}


/* FEATURE */

.feature-image {
    height: 80vh;

    position: relative;

    overflow: hidden;
}


.feature-image img {
    height: 100%;

    object-fit: cover;
}


.feature-caption {
    position: absolute;

    bottom: 45px;
    left: 50px;

    color: white;
}


.feature-caption span {
    display: block;

    font-size: 10px;

    letter-spacing: .2em;

    margin-bottom: 10px;
}


.feature-caption strong {
    font-family: var(--serif);

    font-size: 35px;

    font-weight: 500;
}


/* MENU PREVIEW */

.menu-preview {
    background: #e9e5dc;
}


.section-heading {
    display: flex;

    justify-content: space-between;

    align-items: end;

    margin-bottom: 65px;
}


.menu-grid {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 25px;
}


.menu-card {
    background: var(--cream);
}


.menu-card-image {
    height: 420px;

    overflow: hidden;
}


.menu-card-image img {
    height: 100%;

    object-fit: cover;

    transition: transform .7s;
}


.menu-card:hover img {
    transform: scale(1.05);
}


.menu-card-content {
    padding: 25px;
}


.menu-card-content > span {
    font-size: 10px;

    color: var(--copper);
}


.menu-card h3 {
    font-family: var(--serif);

    font-size: 32px;

    font-weight: 500;

    margin: 15px 0 10px;
}


.menu-card p {
    color: #737b7d;

    line-height: 1.6;
}


/* QUOTE */

.quote-section {
    background: var(--navy);

    color: white;

    padding: 170px 0;
}


.quote-section h2 {
    font-family: var(--serif);

    font-size: clamp(60px, 8vw, 115px);

    line-height: .9;

    letter-spacing: -.06em;
}


/* LOCATION */

.location-section {
    display: grid;

    grid-template-columns: 1fr 1fr;
}


.location-image {
    min-height: 700px;
}


.location-image img {
    height: 100%;

    object-fit: cover;
}


.location-content {
    padding: 100px 10%;

    display: flex;

    flex-direction: column;

    justify-content: center;
}


.location-content h2 {
    font-family: var(--serif);

    font-size: 80px;

    line-height: .9;

    font-weight: 500;
}


.location-content > p {
    max-width: 430px;

    line-height: 1.8;

    color: #667276;

    margin: 30px 0;
}


.location-info {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 30px;

    margin-bottom: 35px;
}


.location-info span,
.contact-item span {
    display: block;

    color: var(--copper);

    font-size: 9px;

    letter-spacing: .15em;

    margin-bottom: 10px;
}


.location-info strong,
.contact-item strong {
    font-size: 13px;

    line-height: 1.7;
}


/* FOOTER */

.footer {
    background: #041015;

    color: white;

    padding: 80px 0 30px;
}


.footer-top {
    display: flex;

    justify-content: space-between;

    padding-bottom: 70px;
}


.footer-brand img {
    width: 150px;

    margin-bottom: 25px;
}


.footer-brand p {
    color: rgba(255,255,255,.5);

    max-width: 220px;

    line-height: 1.6;
}


.footer-links {
    display: flex;

    gap: 100px;
}


.footer-links div {
    display: flex;

    flex-direction: column;

    gap: 12px;
}


.footer-links span {
    color: var(--copper);

    font-size: 9px;

    letter-spacing: .2em;

    margin-bottom: 10px;
}


.footer-links a {
    color: rgba(255,255,255,.65);

    font-size: 13px;
}


.footer-bottom {
    border-top: 1px solid rgba(255,255,255,.12);

    padding-top: 25px;

    display: flex;

    justify-content: space-between;

    font-size: 9px;

    letter-spacing: .14em;

    color: rgba(255,255,255,.35);
}


/* PAGE HERO */

.page-hero {
    min-height: 70vh;

    background: var(--navy);

    color: white;

    display: flex;

    align-items: end;

    padding: 150px 0 100px;
}


.page-hero > div {
    width: min(1240px, calc(100% - 80px));

    margin: auto;
}


.page-hero h1 {
    font-family: var(--serif);

    font-size: clamp(65px, 8vw, 120px);

    line-height: .88;

    font-weight: 500;

    letter-spacing: -.06em;
}


.page-hero p {
    max-width: 500px;

    margin-top: 30px;

    color: rgba(255,255,255,.6);

    line-height: 1.7;
}


/* FOOD MENU */

.food-menu {
    background: var(--cream);
}


.menu-category {
    display: grid;

    grid-template-columns: 35% 1fr;

    gap: 60px;

    padding: 80px 0;

    border-bottom: 1px solid #d2cec5;
}


.category-title > span {
    color: var(--copper);

    font-size: 11px;
}


.category-title h2 {
    font-family: var(--serif);

    font-size: 65px;

    font-weight: 500;

    margin: 15px 0;
}


.category-title p {
    color: var(--muted);

    max-width: 300px;

    line-height: 1.6;
}


.food-item {
    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 25px 0;

    border-bottom: 1px solid #d2cec5;
}


.food-item h3 {
    font-family: var(--serif);

    font-size: 27px;

    font-weight: 500;
}


.food-item p {
    font-size: 12px;

    color: var(--muted);

    margin-top: 5px;
}


.food-item strong {
    font-family: var(--serif);

    font-size: 25px;
}


/* STORY */

.story-hero {
    min-height: 90vh;

    background: var(--navy);

    color: white;

    display: grid;

    grid-template-columns: 1fr 1fr;
}


.story-hero-image img {
    height: 90vh;

    object-fit: cover;
}


.story-hero-content {
    display: flex;

    justify-content: center;

    flex-direction: column;

    padding: 80px;
}


.story-hero-content h1 {
    font-family: var(--serif);

    font-size: clamp(60px, 7vw, 100px);

    line-height: .9;

    font-weight: 500;

    letter-spacing: -.06em;
}


.story-grid {
    display: grid;

    grid-template-columns: 25% 1fr;

    gap: 60px;
}


.story-grid h2 {
    font-family: var(--serif);

    font-size: 70px;

    font-weight: 500;

    line-height: .95;

    letter-spacing: -.05em;
}


.story-grid h2 strong {
    font-style: italic;

    font-weight: 400;
}


.story-text {
    max-width: 700px;

    margin-top: 35px;

    line-height: 1.9;

    color: #697579;

    font-size: 17px;
}


.story-photo {
    height: 70vh;
}


.story-photo img {
    height: 100%;

    object-fit: cover;
}


.values {
    background: #e9e5dc;
}


.values-grid {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 60px;

    margin-top: 80px;
}


.values-grid span {
    color: var(--copper);

    font-size: 11px;
}


.values-grid h3 {
    font-family: var(--serif);

    font-size: 35px;

    font-weight: 500;

    margin: 20px 0;
}


.values-grid p {
    line-height: 1.7;

    color: #697579;
}


/* GALLERY */

.gallery-grid {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    grid-auto-rows: 300px;

    gap: 15px;
}


.gallery-item {
    overflow: hidden;
}


.gallery-item.large {
    grid-row: span 2;
}


.gallery-item img {
    height: 100%;

    object-fit: cover;

    transition: .6s;
}


.gallery-item:hover img {
    transform: scale(1.05);
}


/* CONTACT */

.contact-hero {
    padding: 220px 0 120px;

    background: var(--navy);

    color: white;
}


.contact-hero h1 {
    font-family: var(--serif);

    font-size: clamp(65px, 8vw, 120px);

    line-height: .88;

    letter-spacing: -.06em;

    font-weight: 500;
}


.contact-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 100px;
}


.contact-details h2 {
    font-family: var(--serif);

    font-size: 80px;

    line-height: .9;

    font-weight: 500;

    margin-bottom: 60px;
}


.contact-item {
    padding: 25px 0;

    border-bottom: 1px solid #d2cec5;
}


.contact-item a {
    transition: .3s;
}


.contact-item a:hover {
    color: var(--copper);
}


.contact-details .button {
    margin-top: 40px;
}


.map-container {
    min-height: 600px;
}


.map-container iframe {
    width: 100%;

    height: 100%;

    min-height: 600px;

    border: 0;

    filter: grayscale(1);
}


/* RESPONSIVE */

@media(max-width: 900px) {

    .container,
    .hero-content,
    .page-hero > div {
        width: min(100% - 40px, 700px);
    }


    .header {
        padding: 0 20px;
    }


    .desktop-nav,
    .header-button {
        display: none;
    }


    .menu-toggle {
        display: block;
    }


    .hero h1 {
        font-size: clamp(60px, 16vw, 90px);
    }


    .hero-description {
        font-size: 15px;
    }


    .hero-bottom {
        left: 20px;
    }


    .section {
        padding: 90px 0;
    }


    .intro-grid,
    .story-grid,
    .menu-category,
    .contact-grid {
        grid-template-columns: 1fr;

        gap: 40px;
    }


    .intro h2,
    .section-heading h2 {
        font-size: 60px;
    }


    .feature-image {
        height: 60vh;
    }


    .menu-grid {
        grid-template-columns: 1fr;
    }


    .menu-card-image {
        height: 350px;
    }


    .section-heading {
        align-items: start;

        flex-direction: column;

        gap: 30px;
    }


    .location-section {
        grid-template-columns: 1fr;
    }


    .location-image {
        min-height: 500px;
    }


    .location-content {
        padding: 80px 30px;
    }


    .location-content h2 {
        font-size: 65px;
    }


    .footer-top {
        flex-direction: column;

        gap: 60px;
    }


    .footer-links {
        gap: 60px;
    }


    .story-hero {
        grid-template-columns: 1fr;
    }


    .story-hero-image img {
        height: 55vh;
    }


    .story-hero-content {
        min-height: 500px;

        padding: 50px 30px;
    }


    .story-grid h2 {
        font-size: 58px;
    }


    .values-grid {
        grid-template-columns: 1fr;

        gap: 45px;
    }


    .gallery-grid {
        grid-template-columns: 1fr 1fr;

        grid-auto-rows: 230px;
    }


    .contact-details h2 {
        font-size: 65px;
    }

}


@media(max-width: 550px) {

    .hero-buttons {
        flex-direction: column;

        align-items: flex-start;
    }


    .gallery-grid {
        grid-template-columns: 1fr;
    }


    .gallery-item.large {
        grid-row: span 1;
    }


    .gallery-item {
        height: 350px;
    }


    .location-info {
        grid-template-columns: 1fr;
    }


    .footer-bottom {
        flex-direction: column;

        gap: 12px;
    }

}

/* =========================================
   PREMIUM EXPERIENCE
========================================= */

body {
    background: #f3efe6;
}


/* SCROLL REVEAL */

.reveal {
    opacity: 0;
    transform: translateY(45px);
    transition:
        opacity .9s cubic-bezier(.22,1,.36,1),
        transform 1s cubic-bezier(.22,1,.36,1);
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}


/* =========================================
   MENU
========================================= */

.menu-section-title {
    display: flex;
    align-items: flex-start;
    gap: 30px;

    margin-top: 100px;
    margin-bottom: 45px;
}

.menu-section-title > span {
    color: #b68b63;
    font-size: 11px;
    padding-top: 10px;
}

.menu-section-title small {
    color: #9b8d7d;
    font-size: 9px;
    letter-spacing: .2em;
}

.menu-section-title h2 {
    font-family: "Playfair Display", serif;
    font-size: clamp(50px, 6vw, 80px);
    font-weight: 500;
    line-height: .9;
    margin-top: 12px;
}


.products-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 55px 25px;
}


.product-card {
    background: #ebe6dc;

    transition:
        transform .5s cubic-bezier(.22,1,.36,1),
        box-shadow .5s ease;
}

.product-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 70px rgba(5,25,30,.12);
}


.product-image {
    position: relative;
    height: 470px;
    overflow: hidden;
}


.product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;

    transition:
        transform 1s cubic-bezier(.22,1,.36,1);
}


.product-card:hover .product-image img {
    transform: scale(1.075);
}


.product-badge {
    position: absolute;
    left: 20px;
    top: 20px;

    background: #f3efe6;
    color: #07151b;

    padding: 9px 13px;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: .15em;
}


.product-plus {
    position: absolute;

    right: 20px;
    bottom: 20px;

    width: 48px;
    height: 48px;

    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.6);

    background: rgba(5,20,25,.55);
    color: white;

    font-size: 24px;

    backdrop-filter: blur(10px);

    transition: .3s;
}


.product-card:hover .product-plus {
    background: white;
    color: #07151b;
    transform: rotate(90deg);
}


.product-info {
    padding: 27px;
}


.product-title {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 20px;
}


.product-title h3 {
    font-family: "Playfair Display", serif;
    font-size: 30px;
    font-weight: 500;
}


.product-title strong {
    font-size: 17px;
    font-weight: 600;
}


.product-info > p {
    color: #737d7f;
    line-height: 1.7;
    font-size: 14px;

    max-width: 500px;

    margin-top: 12px;
}


.product-meta {
    display: flex;
    gap: 20px;

    margin-top: 22px;

    font-size: 9px;
    letter-spacing: .14em;

    color: #a07a59;
}


.menu-note {
    display: flex;
    align-items: center;
    gap: 20px;

    margin-top: 100px;

    padding: 25px;

    border: 1px solid #d8d1c5;
}


.menu-note span {
    width: 30px;
    height: 30px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: #07151b;
    color: white;
}


.menu-note p {
    color: #777;
    font-size: 12px;
    line-height: 1.6;
}


/* =========================================
   FISH
========================================= */

.fish {
    position: fixed;

    z-index: 80;

    pointer-events: none;

    font-size: 32px;

    opacity: 0;

    filter: drop-shadow(0 8px 10px rgba(0,0,0,.15));
}


.fish-one {
    top: 38%;

    left: -100px;

    animation: swimOne 18s linear infinite;
}


.fish-two {
    top: 68%;

    right: -100px;

    animation: swimTwo 24s linear infinite 7s;
}


@keyframes swimOne {

    0% {
        transform: translateX(0) scaleX(1);
        opacity: 0;
    }

    8% {
        opacity: .45;
    }

    48% {
        opacity: .45;
    }

    55% {
        opacity: 0;
    }

    100% {
        transform: translateX(calc(100vw + 200px)) scaleX(1);
        opacity: 0;
    }
}


@keyframes swimTwo {

    0% {
        transform: translateX(0) scaleX(-1);
        opacity: 0;
    }

    10% {
        opacity: .35;
    }

    50% {
        opacity: .35;
    }

    60% {
        opacity: 0;
    }

    100% {
        transform: translateX(calc(-100vw - 200px)) scaleX(-1);
        opacity: 0;
    }
}


/* =========================================
   WAVES
========================================= */

.page-waves {
    position: fixed;
    left: 0;
    bottom: -5px;

    width: 100%;
    height: 90px;

    pointer-events: none;

    z-index: 70;

    overflow: hidden;

    opacity: .08;
}


.page-waves span {
    position: absolute;

    width: 120%;
    height: 80px;

    left: -10%;

    border-radius: 50% 50% 0 0;

    border-top: 1px solid #ffffff;

    animation: waveMove 9s ease-in-out infinite alternate;
}


.page-waves span:nth-child(1) {
    bottom: -45px;
}


.page-waves span:nth-child(2) {
    bottom: -55px;
    animation-duration: 12s;
}


.page-waves span:nth-child(3) {
    bottom: -65px;
    animation-duration: 15s;
}


@keyframes waveMove {

    from {
        transform: translateX(-3%) rotate(-1deg);
    }

    to {
        transform: translateX(3%) rotate(1deg);
    }

}


/* =========================================
   BACK TO TOP
========================================= */

.back-top {
    position: fixed;

    right: 25px;
    bottom: 25px;

    width: 48px;
    height: 48px;

    border-radius: 50%;

    border: 1px solid rgba(255,255,255,.15);

    background: #07151b;

    color: white;

    z-index: 95;

    cursor: pointer;

    font-size: 18px;

    opacity: 0;
    visibility: hidden;

    transform: translateY(20px);

    transition: .4s;
}


.back-top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}


.back-top:hover {
    background: #b68b63;
    transform: translateY(-4px);
}


/* =========================================
   GALLERY
========================================= */

.gallery-section {
    background: #f3efe6;
}


.gallery-intro {
    margin-bottom: 80px;
}


.gallery-intro > span {
    color: #b68b63;

    font-size: 10px;

    letter-spacing: .2em;
}


.gallery-intro h2 {
    font-family: "Playfair Display", serif;

    font-size: clamp(55px, 7vw, 100px);

    font-weight: 500;

    line-height: .88;

    letter-spacing: -.06em;

    margin-top: 20px;
}


.gallery-intro strong {
    font-style: italic;
    font-weight: 400;
}


.pro-gallery {

    display: grid;

    grid-template-columns: repeat(12, 1fr);

    grid-auto-rows: 90px;

    gap: 15px;
}


.gallery-photo {
    position: relative;

    overflow: hidden;

    cursor: pointer;

    background: #07151b;
}


.gallery-photo img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 1s cubic-bezier(.22,1,.36,1),
        filter .5s ease;
}


.gallery-photo:hover img {
    transform: scale(1.08);
    filter: brightness(.72);
}


.photo-large {
    grid-column: span 7;
    grid-row: span 7;
}


.photo-small {
    grid-column: span 5;
    grid-row: span 5;
}


.photo-wide {
    grid-column: span 12;
    grid-row: span 6;
}


.gallery-hover {
    position: absolute;

    inset: 0;

    padding: 25px;

    display: flex;

    flex-direction: column;

    justify-content: flex-end;

    color: white;

    opacity: 0;

    transform: translateY(15px);

    transition: .5s;
}


.gallery-photo:hover .gallery-hover {
    opacity: 1;
    transform: translateY(0);
}


.gallery-hover span {
    color: #d4b18e;

    font-size: 10px;

    margin-bottom: 8px;
}


.gallery-hover strong {
    font-family: "Playfair Display", serif;

    font-size: 35px;

    font-weight: 500;
}


/* =========================================
   LIGHTBOX
========================================= */

.lightbox {

    position: fixed;

    inset: 0;

    background: rgba(3,12,16,.96);

    z-index: 1000;

    display: flex;

    align-items: center;
    justify-content: center;

    opacity: 0;
    visibility: hidden;

    transition: .4s;
}


.lightbox.open {
    opacity: 1;
    visibility: visible;
}


.lightbox-image-wrap {
    width: min(85vw, 1200px);
    height: min(80vh, 800px);

    display: flex;
    justify-content: center;
    align-items: center;
}


.lightbox-image {
    max-width: 100%;
    max-height: 100%;

    object-fit: contain;

    border-radius: 3px;

    transform: scale(.92);

    transition: .5s cubic-bezier(.22,1,.36,1);
}


.lightbox.open .lightbox-image {
    transform: scale(1);
}


.lightbox-close,
.lightbox-prev,
.lightbox-next {

    position: absolute;

    border: 0;

    color: white;

    background: rgba(255,255,255,.08);

    width: 52px;
    height: 52px;

    border-radius: 50%;

    cursor: pointer;

    font-size: 22px;

    transition: .3s;
}


.lightbox-close {
    top: 30px;
    right: 30px;
}


.lightbox-prev {
    left: 30px;
}


.lightbox-next {
    right: 30px;
}


.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover {
    background: #b68b63;
}


.lightbox-counter {

    position: absolute;

    bottom: 30px;

    color: rgba(255,255,255,.5);

    font-size: 11px;

    letter-spacing: .2em;
}


/* =========================================
   PROFESSIONAL MAP
========================================= */

.contact-map-section {
    background: #07151b;

    padding: 120px 5vw;
}


.map-card {

    max-width: 1350px;

    margin: auto;

    background: #10262d;

    color: white;

    overflow: hidden;

    box-shadow: 0 40px 100px rgba(0,0,0,.25);
}


.map-top {

    padding: 50px;

    display: flex;

    justify-content: space-between;

    align-items: flex-start;
}


.map-top span {
    color: #b68b63;

    font-size: 9px;

    letter-spacing: .2em;
}


.map-top h2 {

    font-family: "Playfair Display", serif;

    font-size: 60px;

    line-height: .9;

    font-weight: 500;

    margin-top: 15px;
}


.map-location-icon {

    width: 55px;
    height: 55px;

    border: 1px solid rgba(255,255,255,.2);

    border-radius: 50%;

    display: grid;

    place-items: center;

    color: #b68b63;
}


.map-frame {

    height: 550px;

    position: relative;

    overflow: hidden;
}


.map-frame iframe {

    width: 100%;
    height: 100%;

    border: 0;

    filter:
        grayscale(.9)
        contrast(1.15)
        brightness(.72);

    transform: scale(1.03);
}


.map-overlay {

    position: absolute;

    left: 50%;
    top: 50%;

    transform: translate(-50%,-50%);

    display: flex;

    align-items: center;

    gap: 15px;

    pointer-events: none;
}


.map-pin {

    position: relative;

    width: 55px;
    height: 55px;

    border-radius: 50%;

    background: #b68b63;

    display: grid;

    place-items: center;

    color: white;

    box-shadow: 0 0 0 10px rgba(182,139,99,.15);
}


.pin-pulse {

    position: absolute;

    inset: -12px;

    border: 1px solid #b68b63;

    border-radius: 50%;

    animation: pulsePin 2s ease-out infinite;
}


@keyframes pulsePin {

    0% {
        transform: scale(.7);
        opacity: 1;
    }

    100% {
        transform: scale(1.5);
        opacity: 0;
    }

}


.map-label {

    background: rgba(7,21,27,.9);

    backdrop-filter: blur(12px);

    padding: 15px 20px;

    min-width: 210px;
}


.map-label strong {
    display: block;

    font-family: "Playfair Display", serif;

    font-size: 18px;
}


.map-label small {

    display: block;

    color: rgba(255,255,255,.5);

    margin-top: 5px;
}


.map-bottom {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 22px 50px;

    border-top: 1px solid rgba(255,255,255,.1);

    font-size: 9px;

    letter-spacing: .16em;
}


.map-bottom a {
    color: #d2ad89;

    transition: .3s;
}


.map-bottom a:hover {
    color: white;
}


/* =========================================
   SMOOTH SECTION DIVIDER
========================================= */

.section-wave {
    height: 100px;

    position: relative;

    overflow: hidden;

    margin-top: -1px;
}


.section-wave::before {

    content: "";

    position: absolute;

    width: 120%;

    height: 130px;

    left: -10%;
    top: -70px;

    background: #f3efe6;

    border-radius: 50% 50% 0 0;

}


/* =========================================
   MOBILE
========================================= */

@media(max-width: 800px) {

    .products-grid {
        grid-template-columns: 1fr;
    }

    .product-image {
        height: 370px;
    }

    .pro-gallery {
        grid-template-columns: 1fr;
        grid-auto-rows: 330px;
    }

    .photo-large,
    .photo-small,
    .photo-wide {
        grid-column: span 1;
        grid-row: span 1;
    }

    .gallery-hover {
        opacity: 1;
        transform: none;
        background: linear-gradient(
            transparent,
            rgba(0,0,0,.6)
        );
    }

    .map-frame {
        height: 420px;
    }

    .map-top {
        padding: 35px 25px;
    }

    .map-top h2 {
        font-size: 48px;
    }

    .map-bottom {
        padding: 20px 25px;
    }

    .lightbox-prev {
        left: 15px;
    }

    .lightbox-next {
        right: 15px;
    }

    .lightbox-close {
        right: 15px;
        top: 15px;
    }

}

/* =========================================================
   HERO VIDEO
========================================================= */

.hero {

    position: relative;

    min-height: 820px;

    overflow: hidden;

    background: #062f46;

}


/* =========================================================
   VIDEO
========================================================= */

.hero-video {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    z-index: 0;

    /*
       Video başlangıçta çok soluk.
       Daha sonra istersek burayı açabiliriz.
    */

    opacity: .42;

    filter:
        saturate(.75)
        contrast(.9)
        brightness(.72);

}


/* =========================================================
   KOYU MAVİ FİLTRE
========================================================= */

.hero-video-overlay {

    position: absolute;

    inset: 0;

    z-index: 1;

    background:

        linear-gradient(
            90deg,
            rgba(3,31,48,.96) 0%,
            rgba(3,42,62,.86) 35%,
            rgba(3,49,70,.72) 65%,
            rgba(3,38,57,.82) 100%
        );

}


/* Hafif sinematik karartma */

.hero-video-overlay::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to bottom,
            rgba(2,25,39,.25),
            transparent 35%,
            rgba(2,25,39,.55)
        );

}


/* =========================================================
   HERO YAZILARI
========================================================= */

.hero-content {

    position: relative;

    z-index: 3;

}


/* =========================================================
   HERO DALGASI
========================================================= */

.hero-wave {

    position: absolute;

    left: 0;
    bottom: -2px;

    width: 100%;
    height: 150px;

    z-index: 5;

    pointer-events: none;

}


.hero-wave svg {

    width: 100%;
    height: 100%;

    display: block;

}


.hero-wave path {

    fill: #ffffff;

}


/* =========================================================
   MOBİL
========================================================= */

@media (max-width: 768px) {

    .hero {

        min-height: 720px;

    }

    .hero-video {

        opacity: .32;

        filter:
            saturate(.7)
            brightness(.65);

    }

    .hero-video-overlay {

        background:
            linear-gradient(
                90deg,
                rgba(3,31,48,.93),
                rgba(3,43,63,.78)
            );

    }

    .hero-wave {

        height: 100px;

    }

}

/* =========================================================
   FINAL HERO
   FULL SCREEN + SHARP OCEAN WAVE
========================================================= */

.hero {

    position: relative !important;

    width: 100%;

    /*
       Tüm cihazlarda ekran yüksekliğine uyum
    */
    height: 100vh;
    height: 100svh;
    height: 100dvh;

    min-height: 620px;

    overflow: hidden;

    display: flex;

    align-items: center;

    background:
        linear-gradient(
            135deg,
            #062f46 0%,
            #073b55 48%,
            #062d43 100%
        );

    color: #ffffff;

}


/* =========================================================
   ESKİ HERO GÖRSELİ / VİDEO / OVERLAY VARSA GİZLE
========================================================= */




/* =========================================================
   HERO CONTENT
========================================================= */

.hero-content {

    position: relative;

    z-index: 10;

    width: min(1180px, 90%);

    margin: 0 auto;

    padding-top: 30px;

}


/* =========================================================
   ÜST ETİKET
========================================================= */

.hero .eyebrow {

    margin-bottom: 25px;

    color: rgba(255,255,255,.72);

    font-family:
        "DM Sans",
        sans-serif;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: .25em;

}


/* =========================================================
   BAŞLIK
========================================================= */

.hero h1 {

    margin: 0;

    max-width: 800px;

    color: #ffffff;

    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(
            58px,
            7.5vw,
            112px
        );

    font-weight: 500;

    line-height: .91;

    letter-spacing: -.055em;

}


.hero h1 em {

    color: #c7e8ed;

    font-style: italic;

    font-weight: 500;

}


/* =========================================================
   AÇIKLAMA
========================================================= */

.hero-description {

    max-width: 560px;

    margin-top: 32px;

    color:
        rgba(255,255,255,.72);

    font-family:
        "DM Sans",
        sans-serif;

    font-size:
        clamp(
            14px,
            1.1vw,
            17px
        );

    line-height: 1.7;

}


/* =========================================================
   BUTONLAR
========================================================= */

.hero-buttons {

    display: flex;

    align-items: center;

    gap: 25px;

    margin-top: 34px;

}


.hero .button-light {

    display: inline-flex;

    align-items: center;

    gap: 25px;

    padding:
        16px
        22px;

    background: #ffffff;

    color: #073b54;

    border: none;

    border-radius: 0;

    font-family:
        "DM Sans",
        sans-serif;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: .05em;

    text-decoration: none;

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}


.hero .button-light:hover {

    transform: translateY(-3px);

    box-shadow:
        0 15px 35px rgba(0,0,0,.22);

}


.hero .button-light span {

    font-size: 17px;

}


.hero .text-button {

    color:
        rgba(255,255,255,.9);

    font-family:
        "DM Sans",
        sans-serif;

    font-size: 12px;

    font-weight: 600;

    text-decoration: none;

    border-bottom:
        1px solid
        rgba(255,255,255,.45);

    padding-bottom: 6px;

    transition:
        color .3s ease,
        border-color .3s ease;
}


.hero .text-button:hover {

    color: #ffffff;

    border-color: #ffffff;

}


/* =========================================================
   SCROLL
========================================================= */

.hero-bottom {

    position: absolute;

    z-index: 10;

    left: 50%;

    bottom: 105px;

    transform:
        translateX(-50%);

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 12px;

    color:
        rgba(255,255,255,.55);

}


.hero-bottom span {

    font-family:
        "DM Sans",
        sans-serif;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: .2em;

}


.scroll-line {

    width: 1px;

    height: 35px;

    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,.7),
            transparent
        );

}


/* =========================================================
   ANA DALGA
========================================================= */

.hero-wave {

    position: absolute;

    z-index: 8;

    left: 0;

    bottom: -1px;

    width: 100%;

    height: 155px;

    pointer-events: none;

}


.hero-wave svg {

    display: block;

    width: 100%;

    height: 100%;

}


.hero-wave path {

    fill: #f5f0e7;

}


/* =========================================================
   DAHA KESKİN DALGA İÇİN İNCE İKİNCİ KATMAN
========================================================= */

.hero-wave::before {

    content: "";

    position: absolute;

    left: 0;

    bottom: 8px;

    width: 100%;

    height: 2px;

    background:
        rgba(255,255,255,.45);

    z-index: 2;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1024px) {

    .hero-content {

        width: 86%;

    }

    .hero h1 {

        font-size:
            clamp(
                58px,
                9vw,
                88px
            );

    }

    .hero-wave {

        height: 130px;

    }

}


/* =========================================================
   TELEFON
========================================================= */

@media (max-width: 768px) {

    .hero {

        min-height: 600px;

    }


    .hero-content {

        width: 86%;

        padding-top: 0;

    }


    .hero .eyebrow {

        font-size: 9px;

        margin-bottom: 20px;

    }


    .hero h1 {

        font-size:
            clamp(
                52px,
                15vw,
                76px
            );

        line-height: .94;

    }


    .hero-description {

        max-width: 390px;

        margin-top: 25px;

        font-size: 14px;

        line-height: 1.65;

    }


    .hero-buttons {

        gap: 18px;

        margin-top: 28px;

    }


    .hero .button-light {

        padding:
            14px
            17px;

        font-size: 10px;

    }


    .hero .text-button {

        font-size: 10px;

    }


    .hero-bottom {

        bottom: 82px;

    }


    .hero-wave {

        height: 105px;

    }

}


/* =========================================================
   KÜÇÜK TELEFON
========================================================= */

@media (max-width: 420px) {

    .hero {

        min-height: 580px;

    }


    .hero-content {

        width: 88%;

    }


    .hero h1 {

        font-size:
            clamp(
                47px,
                14vw,
                64px
            );

    }


    .hero-description {

        font-size: 13px;

    }


    .hero-buttons {

        align-items: flex-start;

        flex-direction: column;

        gap: 16px;

    }


    .hero-bottom {

        display: none;

    }


    .hero-wave {

        height: 85px;

    }

}


/* =========================================================
   YATAY TELEFON
========================================================= */

@media (
    max-height: 600px
) and (
    orientation: landscape
) {

    .hero {

        min-height: 520px;

    }


    .hero-content {

        padding-top: 20px;

    }


    .hero h1 {

        font-size: 54px;

    }


    .hero-description {

        margin-top: 15px;

    }


    .hero-buttons {

        margin-top: 18px;

    }


    .hero-wave {

        height: 75px;

    }

}

/* =========================================================
   HERO - DÜZ KESKİN ALT SINIR
========================================================= */

.hero {
    position: relative !important;

    width: 100% !important;

    height: 100vh !important;
    height: 100svh !important;
    height: 100dvh !important;

    min-height: 600px;

    overflow: hidden;

    display: flex;
    align-items: center;

    background: #062f46 !important;

    color: #fff;

    border-radius: 0 !important;
}


/* Eski dalga tamamen kapalı */

.hero-wave {
    display: none !important;
}


/* Eski hero görsel/video da yok */

.hero-image,
.hero-video,
.hero-overlay,
.hero-video-overlay {
    display: none !important;
}


/* İçerik */

.hero-content {
    position: relative;
    z-index: 10;

    width: min(1180px, 90%);

    margin: 0 auto;

    padding: 0;
}


/* Alt taraf kesinlikle düz */

.hero::after {
    display: none !important;
}


/* Scroll göstergesi */

.hero-bottom {
    position: absolute;

    left: 50%;
    bottom: 35px;

    transform: translateX(-50%);

    z-index: 20;
}


/* Mobil */

@media (max-width: 768px) {

    .hero {
        height: 100svh !important;
        min-height: 600px;
    }

    .hero-content {
        width: 88%;
    }

    .hero-bottom {
        bottom: 25px;
    }
}


/* =========================================================
   HERO BACKGROUND VIDEO
========================================================= */

.hero {
    position: relative !important;

    width: 100% !important;

    height: 100vh !important;
    height: 100svh !important;
    height: 100dvh !important;

    min-height: 600px;

    overflow: hidden;

    display: flex;
    align-items: center;

    background: #062f46 !important;
}


/* VIDEO */

.hero-video {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    z-index: 0;

    opacity: .55;

    filter:
        brightness(.65)
        saturate(.75);

}


/* MAVİ FİLTRE */

.hero-video-overlay {
    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(3, 35, 52, .82),
            rgba(3, 55, 76, .58),
            rgba(3, 39, 58, .70)
        );

}


/* İÇERİK VİDEONUN ÜSTÜNDE */

.hero-content {
    position: relative;

    z-index: 5;

    width: min(1180px, 90%);

    margin: 0 auto;
}


/* SCROLL */

.hero-bottom {
    position: absolute;

    z-index: 5;

    left: 50%;
    bottom: 35px;

    transform: translateX(-50%);
}


/* ESKİ GÖRSEL KULLANILMASIN */

.hero-image {
    display: none !important;
}


/* MOBİL */

@media (max-width: 768px) {

    .hero {
        height: 100svh !important;
    }

    .hero-video {
        opacity: .45;

        filter:
            brightness(.60)
            saturate(.70);
    }

    .hero-video-overlay {
        background:
            linear-gradient(
                90deg,
                rgba(3, 35, 52, .88),
                rgba(3, 55, 76, .70)
            );
    }

}

/* HERO VIDEO - AKTİF */

.hero-video {
    display: block !important;

    position: absolute !important;
    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    object-fit: cover !important;

    z-index: 0 !important;

    opacity: 0.55;

    filter:
        brightness(0.65)
        saturate(0.8);
}

.hero-video-overlay {
    display: block !important;

    position: absolute !important;
    inset: 0 !important;

    width: 100%;
    height: 100%;

    z-index: 1 !important;

    background:
        linear-gradient(
            90deg,
            rgba(3, 35, 52, 0.80),
            rgba(3, 55, 76, 0.55),
            rgba(3, 39, 58, 0.72)
        );
}

.hero-content {
    position: relative !important;
    z-index: 5 !important;
}

.hero-bottom {
    position: absolute !important;
    z-index: 5 !important;
}

/* =========================================================
   HERO BUTTON HOVER ANIMATIONS
========================================================= */

/* MENÜYÜ KEŞFET */

.hero .button-light {
    position: relative;
    overflow: hidden;

    isolation: isolate;

    transition:
        color .45s cubic-bezier(.22,1,.36,1),
        transform .35s cubic-bezier(.22,1,.36,1),
        border-color .45s ease;
}


/* İçeriden kayan lacivert katman */

.hero .button-light::before {
    content: "";

    position: absolute;

    inset: 0;

    background: #062f46;

    transform: translateX(-101%);

    transition:
        transform .45s cubic-bezier(.77,0,.18,1);

    z-index: -1;
}


/* Yazı ve ok */

.hero .button-light span,
.hero .button-light {
    position: relative;
}


/* Hover */

.hero .button-light:hover {
    color: #ffffff;

    transform: translateY(-3px);

    box-shadow:
        0 14px 35px rgba(0,0,0,.18);
}


.hero .button-light:hover::before {
    transform: translateX(0);
}


/* Ok da hafif hareket etsin */

.hero .button-light span {
    display: inline-block;

    transition:
        transform .4s cubic-bezier(.22,1,.36,1);
}


.hero .button-light:hover span {
    transform: translateX(5px);
}


/* =========================================================
   BİZE ULAŞIN
========================================================= */

.hero .text-button {
    position: relative;

    display: inline-flex;

    padding-bottom: 7px;

    border-bottom: none !important;

    transition:
        color .3s ease;
}


/* Eski çizgiyi kaldırıp kendi çizgimizi oluşturuyoruz */

.hero .text-button::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 1px;

    background: rgba(255,255,255,.55);

    transform-origin: left;

    transform: scaleX(1);

    transition:
        transform .45s cubic-bezier(.22,1,.36,1),
        background .3s ease;
}


/* Hover'da çizgi önce küçülüp tekrar açılsın */

.hero .text-button:hover::after {

    transform: scaleX(0);

    background: #ffffff;

}


/* Yazı hafif sağa */

.hero .text-button:hover {

    color: #ffffff;

}


/* =========================================================
   ÇİZGİNİN YENİDEN GELEN İKİNCİ EFEKTİ
========================================================= */

.hero .text-button::before {

    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 1px;

    background: #ffffff;

    transform-origin: right;

    transform: scaleX(0);

    transition:
        transform .5s cubic-bezier(.22,1,.36,1) .08s;

}


/* Hover */

.hero .text-button:hover::before {

    transform: scaleX(1);

}

/* =========================================================
   SCROLL TO EXPLORE - PREMIUM ANIMATION
========================================================= */

.hero-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 11px;

    cursor: pointer;

    animation: scrollFloat 2.4s ease-in-out infinite;
}


/* Yazı */

.hero-bottom span {
    display: block;

    color: rgba(255,255,255,.72);

    font-family: "DM Sans", sans-serif;

    font-size: 8px;
    font-weight: 700;

    letter-spacing: .22em;

    white-space: nowrap;
}


/* Çizgi */

.hero-bottom .scroll-line {
    position: relative;

    width: 1px;
    height: 42px;

    overflow: hidden;

    background: rgba(255,255,255,.20);
}


/* Hareket eden ışık */

.hero-bottom .scroll-line::after {
    content: "";

    position: absolute;

    top: -100%;
    left: 0;

    width: 1px;
    height: 55%;

    background: #ffffff;

    animation: scrollLine 1.7s ease-in-out infinite;
}


/* Yazı + çizginin hafif aşağı hareketi */

@keyframes scrollFloat {

    0%,
    100% {
        transform: translate(-50%, 0);
    }

    50% {
        transform: translate(-50%, 8px);
    }

}


/* Çizginin içindeki hareket */

@keyframes scrollLine {

    0% {
        top: -60%;
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    70% {
        opacity: 1;
    }

    100% {
        top: 110%;
        opacity: 0;
    }

}


/* =========================================================
   TEXT SELECTION
========================================================= */

/* Site genelinde klasik mavi seçimi değiştir */

::selection {
    background: #f8f7f5;
    color: #062f46;
}

::-moz-selection {
    background: #f7f6f6;
    color: #062f46;
}

/* =========================================
   INTRO / MARKA MESAJI
   ========================================= */

.intro-section {
    position: relative;
    padding: 150px 0 160px;
    background: #f3eee4;
    overflow: hidden;
}

.intro-inner {
    width: min(1180px, 88%);
    margin: 0 auto;
}

/* ÜST ETİKET */

.intro-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;

    margin-bottom: 42px;

    color: #0b526f;
    font-family: "DM Sans", sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .28em;
}

.intro-label span {
    width: 34px;
    height: 1px;
    background: #c89b63;
}

/* ANA BAŞLIK */

.intro-title {
    max-width: 900px;
    margin: 0 auto;

    text-align: center;

    color: #062f46;

    font-family: "Playfair Display", serif;
    font-size: clamp(52px, 7vw, 104px);
    font-weight: 500;
    line-height: .98;
    letter-spacing: -.045em;
}

.intro-title em {
    color: #0b526f;
    font-weight: 400;
    font-style: italic;
}

/* ALT ALAN */

.intro-bottom {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: end;

    margin-top: 65px;
}

.intro-text {
    grid-column: 1;

    max-width: 370px;
    margin: 0;

    color: rgba(6, 47, 70, .68);

    font-family: "DM Sans", sans-serif;
    font-size: 14px;
    line-height: 1.8;
}

/* ORTA DEKOR */

.intro-mark {
    grid-column: 2;

    width: 58px;
    height: 58px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(11, 82, 111, .25);
    border-radius: 50%;

    color: #c89b63;

    font-size: 18px;

    transition:
        transform .6s cubic-bezier(.22,1,.36,1),
        background .4s ease;
}

.intro-mark span {
    display: block;
    transition: transform .6s cubic-bezier(.22,1,.36,1);
}

.intro-mark:hover {
    transform: rotate(90deg);
    background: rgba(200,155,99,.08);
}

.intro-mark:hover span {
    transform: rotate(-90deg);
}

/* SAĞDA BOŞLUK / DENGELEME */

.intro-bottom::after {
    content: "";
    grid-column: 3;
}

/* =========================================
   HOVER / GİRİŞ HİSSİ
   ========================================= */

.intro-title em {
    display: inline-block;
    transition:
        transform .5s cubic-bezier(.22,1,.36,1),
        color .4s ease;
}

.intro-title:hover em {
    transform: translateY(-4px);
    color: #c89b63;
}


/* =========================================
   MOBİL
   ========================================= */

@media (max-width: 768px) {

    .intro-section {
        padding: 100px 0 110px;
    }

    .intro-inner {
        width: 88%;
    }

    .intro-label {
        margin-bottom: 30px;
        font-size: 8px;
        letter-spacing: .22em;
    }

    .intro-label span {
        width: 22px;
    }

    .intro-title {
        font-size: clamp(48px, 14vw, 72px);
        line-height: 1;
    }

    .intro-bottom {
        display: flex;
        flex-direction: column;
        align-items: center;

        margin-top: 45px;
    }

    .intro-text {
        max-width: 330px;
        text-align: center;
        font-size: 13px;
    }

    .intro-mark {
        margin-top: 35px;
    }
}

/* =========================================
   FEATURE IMAGE - MAVİ OVERLAY
   ========================================= */

.feature-image {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

/* FOTOĞRAF */

.feature-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;

    transition: transform 1.2s cubic-bezier(.22, 1, .36, 1);
}

/* MAVİ KATMAN */

.feature-image::after {
    content: "";
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(3, 35, 52, .78) 0%,
            rgba(5, 55, 76, .55) 50%,
            rgba(3, 39, 58, .68) 100%
        );

    z-index: 1;
    pointer-events: none;

    transition: opacity .6s ease;
}

/* YAZILAR OVERLAY'İN ÜSTÜNDE */

.feature-caption {
    position: absolute;
    z-index: 2;
}

/* HOVER */

.feature-image:hover img {
    transform: scale(1.035);
}

.feature-image:hover::after {
    opacity: .88;
}

.feature-caption span {
    color: rgba(255, 255, 255, .65);
    font-family: "DM Sans", sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .25em;
}

.feature-caption strong {
    display: block;
    margin-top: 8px;

    color: #ffffff;
    font-family: "Playfair Display", serif;
    font-size: clamp(28px, 4vw, 52px);
    font-weight: 500;
    line-height: 1.05;
}

/* =========================================
   CUSTOM SCROLLBAR - SITE COLORS
   ========================================= */

/* Firefox */
html {
    scrollbar-width: thin;
    scrollbar-color: #0b526f #f3eee4;
    scroll-behavior: smooth;
}

/* Chrome / Edge / Safari */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #f3eee4;
}

::-webkit-scrollbar-thumb {
    background: #062f46;
    border-radius: 20px;
    border: 2px solid #f3eee4;
}

::-webkit-scrollbar-thumb:hover {
    background: #0b526f;
}

::-webkit-scrollbar-button {
    display: none;
}

/* =========================================
   HEADER LOGO SIZE
   ========================================= */

.nav-logo img,
.logo img,
header .logo img {
    width: auto;
    height: 72px;
    max-width: 220px;
    object-fit: contain;
    display: block;
}

/* Mobil */
@media (max-width: 768px) {
    .nav-logo img,
    .logo img,
    header .logo img {
        height: 58px;
        max-width: 180px;
    }
}

header nav,
.navbar {
    min-height: 88px;
    display: flex;
    align-items: center;
}

/* HEADER LOGO - FORCE SIZE */

header .logo,
.navbar .logo,
.nav-logo {
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    overflow: visible !important;
}

header .logo img,
.navbar .logo img,
.nav-logo img {
    display: block !important;

    width: 190px !important;
    height: auto !important;

    max-width: none !important;
    max-height: none !important;

    object-fit: contain !important;
}

/* MOBİL */
@media (max-width: 768px) {
    header .logo img,
    .navbar .logo img,
    .nav-logo img {
        width: 150px !important;
        height: auto !important;
    }
}

/* HEADER LOGO - FORCE SIZE */

header .logo,
.navbar .logo,
.nav-logo {
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    overflow: visible !important;
}

header .logo img,
.navbar .logo img,
.nav-logo img {
    display: block !important;

    width: 190px !important;
    height: auto !important;

    max-width: none !important;
    max-height: none !important;

    object-fit: contain !important;
}

/* MOBİL */
@media (max-width: 768px) {
    header .logo img,
    .navbar .logo img,
    .nav-logo img {
        width: 150px !important;
        height: auto !important;
    }
}

header .logo img,
.navbar .logo img,
.nav-logo img {
    transform: translateY(10px) !important;
}


/* =========================================================
   MENU HERO
========================================================= */

.menu-hero {
    position: relative;

    width: 100%;

    /* EKRANI TAM KAPLA */
    height: 100vh;
    height: 100svh;
    height: 100dvh;

    min-height: 620px;

    display: flex;
    align-items: center;

    overflow: hidden;

    background: #062f46;
    color: #ffffff;
}


/* VIDEO */

.menu-hero-video {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    z-index: 0;

    opacity: .55;

    filter:
        brightness(.65)
        saturate(.8);

    transform: scale(1.01);
}


/* MAVİ OVERLAY */

.menu-hero-overlay {
    position: absolute;
    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(3, 35, 52, .90) 0%,
            rgba(3, 50, 70, .68) 48%,
            rgba(3, 39, 58, .72) 100%
        );
}


/* HAFİF ALT KARARTMA */

.menu-hero-overlay::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to bottom,
            rgba(3, 31, 48, .15) 0%,
            transparent 45%,
            rgba(3, 31, 48, .55) 100%
        );
}


/* CONTENT */

.menu-hero-content {
    position: relative;

    z-index: 5;

    width: min(1180px, 90%);
    margin: 0 auto;

    padding-top: 80px;
}


/* KÜÇÜK ÜST YAZI */

.menu-hero-eyebrow {
    margin-bottom: 24px;

    color: rgba(255,255,255,.65);

    font-family: "DM Sans", sans-serif;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: .25em;
}


/* ANA BAŞLIK */

.menu-hero h1 {
    max-width: 900px;

    margin: 0;

    color: #ffffff;

    font-family: "Playfair Display", serif;

    font-size: clamp(65px, 8vw, 120px);

    font-weight: 500;

    line-height: .88;

    letter-spacing: -.055em;
}


.menu-hero h1 em {
    color: #c7e8ed;

    font-style: italic;
    font-weight: 400;
}


/* AÇIKLAMA */

.menu-hero-description {
    max-width: 510px;

    margin-top: 30px;

    color: rgba(255,255,255,.70);

    font-family: "DM Sans", sans-serif;

    font-size: 15px;

    line-height: 1.75;
}


/* ALT SCROLL */

.menu-hero-bottom {
    position: absolute;

    z-index: 5;

    left: 50%;
    bottom: 30px;

    transform: translateX(-50%);

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 10px;
}


.menu-hero-bottom span {
    color: rgba(255,255,255,.60);

    font-family: "DM Sans", sans-serif;

    font-size: 8px;
    font-weight: 700;

    letter-spacing: .22em;
}


/* HAREKETLİ ÇİZGİ */

.menu-scroll-line {
    position: relative;

    width: 1px;
    height: 35px;

    overflow: hidden;

    background: rgba(255,255,255,.18);
}


.menu-scroll-line::after {
    content: "";

    position: absolute;

    left: 0;
    top: -60%;

    width: 1px;
    height: 55%;

    background: #ffffff;

    animation: menuScrollLine 1.7s ease-in-out infinite;
}


@keyframes menuScrollLine {

    0% {
        top: -60%;
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    70% {
        opacity: 1;
    }

    100% {
        top: 110%;
        opacity: 0;
    }

}


/* =========================================================
   TABLET / MOBILE
========================================================= */

@media (max-width: 768px) {

    .menu-hero {
        height: 100vh;
        height: 100svh;
        height: 100dvh;

        min-height: 600px;
    }

    .menu-hero-video {
        opacity: .45;

        filter:
            brightness(.58)
            saturate(.7);
    }

    .menu-hero-overlay {
        background:
            linear-gradient(
                90deg,
                rgba(3,35,52,.92),
                rgba(3,50,70,.72)
            );
    }

    .menu-hero-content {
        width: 86%;
        padding-top: 65px;
    }

    .menu-hero-eyebrow {
        font-size: 8px;
    }

    .menu-hero h1 {
        font-size: clamp(55px, 16vw, 80px);
        line-height: .92;
    }

    .menu-hero-description {
        max-width: 380px;

        font-size: 13px;
        line-height: 1.65;
    }

    .menu-hero-bottom {
        bottom: 25px;
    }

}


/* =========================================================
   FRESH STATS
========================================================= */

.fresh-stats-section {
    position: relative;

    padding: 150px 0;

    background: #f3eee4;

    overflow: hidden;
}


.fresh-stats-container {
    width: min(1180px, 88%);
    margin: 0 auto;

    display: grid;

    grid-template-columns: 1.15fr 1fr;

    gap: 100px;

    align-items: center;
}


/* SOL TARAF */

.fresh-stats-label {
    display: block;

    margin-bottom: 28px;

    color: #0b526f;

    font-family: "DM Sans", sans-serif;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: .25em;
}


.fresh-stats-title h2 {
    margin: 0;

    color: #062f46;

    font-family: "Playfair Display", serif;

    font-size: clamp(58px, 6vw, 92px);

    font-weight: 500;

    line-height: .93;

    letter-spacing: -.05em;
}


.fresh-stats-title h2 em {
    color: #0b526f;

    font-weight: 400;
    font-style: italic;
}


/* =========================================================
   İSTATİSTİKLER
========================================================= */

.fresh-stats-grid {
    display: grid;

    grid-template-columns: repeat(2, 1fr);

    border-top: 1px solid rgba(6,47,70,.18);
    border-left: 1px solid rgba(6,47,70,.18);
}


.stat-item {
    position: relative;

    min-height: 190px;

    padding: 35px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    border-right: 1px solid rgba(6,47,70,.18);
    border-bottom: 1px solid rgba(6,47,70,.18);

    transition:
        background .4s ease,
        transform .4s cubic-bezier(.22,1,.36,1);
}


/* SAYI */

.stat-item strong {
    display: flex;
    align-items: baseline;
    gap: 6px;

    color: #062f46;

    font-family: "Playfair Display", serif;

    font-size: clamp(42px, 4vw, 65px);

    font-weight: 500;

    line-height: 1;
}


.stat-item strong small {
    color: #0b526f;

    font-family: "DM Sans", sans-serif;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: .15em;
}


/* ALT YAZI */

.stat-item p {
    margin: 25px 0 0;

    color: rgba(6,47,70,.58);

    font-family: "DM Sans", sans-serif;

    font-size: 11px;
    font-weight: 600;

    letter-spacing: .12em;

    text-transform: uppercase;
}


/* HOVER */

.stat-item:hover {
    background: #062f46;

    transform: translateY(-4px);
}


.stat-item:hover strong,
.stat-item:hover p,
.stat-item:hover strong small {
    color: #ffffff;
}


/* KÜÇÜK DEKORATİF NOKTA */

.stat-item::before {
    content: "";

    position: absolute;

    top: 18px;
    right: 18px;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #c89b63;

    opacity: 0;

    transform: scale(0);

    transition: .35s ease;
}


.stat-item:hover::before {
    opacity: 1;
    transform: scale(1);
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 850px) {

    .fresh-stats-section {
        padding: 100px 0;
    }

    .fresh-stats-container {
        grid-template-columns: 1fr;

        gap: 60px;
    }

    .fresh-stats-title h2 {
        font-size: clamp(52px, 14vw, 76px);
    }

}


@media (max-width: 520px) {

    .fresh-stats-grid {
        grid-template-columns: 1fr 1fr;
    }

    .stat-item {
        min-height: 150px;

        padding: 25px 18px;
    }

    .stat-item strong {
        font-size: 38px;
    }

    .stat-item p {
        font-size: 8px;

        line-height: 1.5;
    }

}

/* =========================================================
   FRESH STATS - BLUE VERSION
========================================================= */

.fresh-stats-section {
    background: #062F46;;
    color: #ffffff;
}


/* SOL KÜÇÜK YAZI */

.fresh-stats-label {
    color: #c7e8ed;
}


/* ANA BAŞLIK */

.fresh-stats-title h2 {
    color: #ffffff;
}

.fresh-stats-title h2 em {
    color: #c7e8ed;
}


/* İSTATİSTİK TABLOSU */

.fresh-stats-grid {
    border-top: 1px solid rgba(255,255,255,.16);
    border-left: 1px solid rgba(255,255,255,.16);
}


/* KUTULAR */

.stat-item {
    border-right: 1px solid rgba(255,255,255,.16);
    border-bottom: 1px solid rgba(255,255,255,.16);
}


/* SAYILAR */

.stat-item strong {
    color: #ffffff;
}

.stat-item strong small {
    color: #c7e8ed;
}


/* ALT AÇIKLAMALAR */

.stat-item p {
    color: rgba(255,255,255,.55);
}


/* HOVER */

.stat-item:hover {
    background: rgba(255,255,255,.08);
    transform: translateY(-4px);
}


/* HOVER YAZILARI */

.stat-item:hover strong {
    color: #ffffff;
}

.stat-item:hover p {
    color: rgba(255,255,255,.85);
}

.stat-item:hover strong small {
    color: #c7e8ed;
}


/* KÜÇÜK NOKTA */

.stat-item::before {
    background: #c89b63;
}


/* =========================================================
   MEC STUDIO FOOTER CREDIT
========================================================= */

.footer-credit {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    color: #ffffff;

    font-family: "DM Sans", sans-serif;
    font-size: 10px;
    font-weight: 700;

    letter-spacing: .10em;
}


/* MEC STUDIO */

.footer-credit a {
    position: relative;
    display: inline-block;

    color: #c7e8ed;

    font-weight: 800;

    transition:
        color .35s ease,
        transform .35s cubic-bezier(.22,1,.36,1),
        text-shadow .35s ease;
}


/* ALT ÇİZGİ */

.footer-credit a::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -5px;

    width: 100%;
    height: 1px;

    background: #c7e8ed;

    transform: scaleX(0);
    transform-origin: right;

    transition:
        transform .4s cubic-bezier(.22,1,.36,1);
}


/* HOVER */

.footer-credit a:hover {
    color: #C89B63;

    transform: translateY(-2px);

    text-shadow:
        0 0 15px rgba(199,232,237,.45);
}


.footer-credit a:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}


/* =========================================================
   HIKAYEMIZ - PHOTO HERO
========================================================= */

.story-photo-hero {
    position: relative;

    width: 100%;

    height: 100vh;
    height: 100svh;
    height: 100dvh;

    min-height: 620px;

    display: flex;
    align-items: center;

    overflow: hidden;

    background: #062f46;
    color: #ffffff;
}


/* FOTOĞRAF */

.story-hero-bg {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    z-index: 0;

    transform: scale(1.02);

    transition: transform 8s ease;
}


/* ÇOK HAFİF SİNEMATİK HAREKET */

.story-photo-hero:hover .story-hero-bg {
    transform: scale(1.06);
}


/* MAVİ FİLTRE */

.story-photo-overlay {
    position: absolute;
    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(3,35,52,.94) 0%,
            rgba(3,47,67,.76) 45%,
            rgba(3,39,58,.50) 100%
        );
}


/* ÜST / ALT SİNEMATİK KARARTMA */

.story-photo-overlay::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to bottom,
            rgba(3,20,30,.20) 0%,
            transparent 40%,
            rgba(3,25,38,.58) 100%
        );
}


/* =========================================================
   YAZILAR
========================================================= */

.story-hero-content-new {
    position: relative;

    z-index: 5;

    width: min(1180px, 88%);

    margin: 0 auto;

    padding-top: 70px;
}


.story-hero-label {
    display: block;

    margin-bottom: 28px;

    color: rgba(255,255,255,.65);

    font-family: "DM Sans", sans-serif;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: .25em;
}


.story-hero-content-new h1 {
    max-width: 1000px;

    margin: 0;

    color: #ffffff;

    font-family: "Playfair Display", serif;

    font-size: clamp(65px, 8vw, 120px);

    font-weight: 500;

    line-height: .89;

    letter-spacing: -.055em;
}


.story-hero-content-new h1 em {
    color: #c7e8ed;

    font-style: italic;
    font-weight: 400;
}


/* ALT AÇIKLAMA */

.story-hero-sub {
    display: flex;
    align-items: flex-start;

    gap: 22px;

    margin-top: 38px;
}


.story-hero-line {
    width: 55px;
    height: 1px;

    margin-top: 11px;

    flex-shrink: 0;

    background: rgba(255,255,255,.45);
}


.story-hero-sub p {
    max-width: 430px;

    margin: 0;

    color: rgba(255,255,255,.70);

    font-family: "DM Sans", sans-serif;

    font-size: 14px;

    line-height: 1.75;
}


/* =========================================================
   SCROLL
========================================================= */

.story-scroll {
    position: absolute;

    z-index: 5;

    left: 50%;
    bottom: 30px;

    transform: translateX(-50%);

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 11px;
}


.story-scroll > span {
    color: rgba(255,255,255,.60);

    font-family: "DM Sans", sans-serif;

    font-size: 8px;
    font-weight: 700;

    letter-spacing: .22em;

    white-space: nowrap;
}


.story-scroll-line {
    position: relative;

    width: 1px;
    height: 38px;

    overflow: hidden;

    background: rgba(255,255,255,.18);
}


.story-scroll-line::after {
    content: "";

    position: absolute;

    left: 0;
    top: -60%;

    width: 1px;
    height: 55%;

    background: #ffffff;

    animation: storyScroll 1.7s ease-in-out infinite;
}


@keyframes storyScroll {

    0% {
        top: -60%;
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    70% {
        opacity: 1;
    }

    100% {
        top: 110%;
        opacity: 0;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

    .story-photo-hero {
        height: 100vh;
        height: 100svh;
        height: 100dvh;

        min-height: 600px;
    }

    .story-hero-bg {
        object-position: center;
    }

    .story-photo-overlay {
        background:
            linear-gradient(
                90deg,
                rgba(3,35,52,.94),
                rgba(3,47,67,.72)
            );
    }

    .story-hero-content-new {
        width: 86%;
        padding-top: 50px;
    }

    .story-hero-label {
        font-size: 8px;
    }

    .story-hero-content-new h1 {
        font-size: clamp(54px, 15vw, 78px);
        line-height: .92;
    }

    .story-hero-sub {
        margin-top: 30px;
    }

    .story-hero-line {
        width: 30px;
    }

    .story-hero-sub p {
        font-size: 13px;
    }

    .story-scroll {
        bottom: 25px;
    }
}



/* =========================
   MOBILE
========================= */

@media (max-width: 768px) {

    .story-journey {
        height: 400vh;
    }


    .journey-top {
        top: 90px;

        left: 7%;
        right: 7%;
    }


    .journey-panel {
        padding: 0 7%;
    }


    .journey-number {
        top: 43%;

        left: -2%;

        font-size: 45vw;
    }


    .journey-panel-content {
        margin-top: 20px;
    }


    .journey-tag {
        margin-bottom: 18px;

        font-size: 8px;
    }


    .journey-panel h2 {
        font-size: clamp(52px, 15vw, 76px);

        line-height: .92;
    }


    .journey-panel p {
        max-width: 330px;

        margin-top: 28px;

        padding-left: 0;

        font-size: 12px;

        line-height: 1.7;
    }


    .journey-panel p::before {
        display: none;
    }


    .journey-panel::after {
        display: none;
    }


    .journey-index {
        right: 7%;

        bottom: 80px;

        font-size: 16px;
    }


    .journey-bottom {
        left: 7%;
        right: 7%;

        bottom: 35px;
    }

}

/* =========================================================
   HIKAYEMIZ - STORY PHOTO BLUE EFFECT
========================================================= */

.story-photo {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}


/* FOTOĞRAF */

.story-photo img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 1.2s cubic-bezier(.22,1,.36,1),
        filter .6s ease;
}


/* MAVİ FİLTRE */

.story-photo::after {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 2;

    pointer-events: none;

    background: linear-gradient(
        90deg,
        rgba(3,35,52,.78) 0%,
        rgba(5,55,76,.55) 50%,
        rgba(3,39,58,.68) 100%
    );

    transition: opacity .6s ease;
}


/* HOVER */

.story-photo:hover img {
    transform: scale(1.035);
}


/* ÜZERİNE GELİNCE FİLTRE HAFİF AÇILSIN */

.story-photo:hover::after {
    opacity: .82;
}

/* =========================================================
   HIKAYEMIZ — PREMIUM TIMELINE
========================================================= */

.story-timeline-section {
    position: relative;
    padding: 110px 0 130px;
    background: #f3eee4;
    overflow: hidden;
}

.story-timeline-container {
    width: min(1280px, 90%);
    margin: 0 auto;
}


/* =========================================================
   BAŞLIK
========================================================= */

.story-timeline-heading {
    max-width: 950px;
    margin: 0 auto 90px;
}

.story-timeline-heading > span {
    display: block;
    margin-bottom: 18px;

    color: #0b526f;

    font-family: "DM Sans", sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .28em;
}

.story-timeline-heading h2 {
    margin: 0;

    color: #062f46;

    font-family: "Playfair Display", serif;
    font-size: clamp(45px, 5vw, 75px);
    font-weight: 500;

    line-height: .98;
    letter-spacing: -.045em;
}

.story-timeline-heading h2 em {
    color: #0b526f;
    font-weight: 400;
    font-style: italic;
}


/* =========================================================
   TIMELINE
========================================================= */

.story-timeline {
    position: relative;
}


/* ORTADAKİ UZUN ÇİZGİ */

.story-timeline::before {
    content: "";

    position: absolute;

    top: 0;
    bottom: 0;

    left: 50%;

    width: 1px;

    background: rgba(6, 47, 70, .20);

    transform: translateX(-50%);
}


/* =========================================================
   SATIR
========================================================= */

.timeline-row {
    position: relative;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        110px
        minmax(0, 1fr);

    align-items: center;

    min-height: 190px;

    margin-bottom: 30px;
}

.timeline-row:last-child {
    margin-bottom: 0;
}


/* =========================================================
   ORTA NOKTA + TARİH
========================================================= */

.timeline-center {
    position: relative;
    z-index: 5;

    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;
}


.timeline-dot {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 9px;
    height: 9px;

    border-radius: 50%;

    background: #0b526f;

    border: 3px solid #f3eee4;

    box-shadow:
        0 0 0 1px rgba(11,82,111,.30);

    transform: translate(-50%, -50%);

    transition:
        transform .4s cubic-bezier(.22,1,.36,1),
        box-shadow .4s ease,
        background .4s ease;
}


/* TARİH */

.timeline-year {
    position: absolute;

    top: 50%;

    color: #0b526f;

    font-family: "DM Sans", sans-serif;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: .08em;

    transform: translateY(-50%);

    transition:
        color .35s ease,
        transform .4s cubic-bezier(.22,1,.36,1);
}


/* SOL KUTUDA TARİH ÇİZGİNİN SAĞINDA */

.timeline-left .timeline-year {
    left: calc(50% + 20px);
}


/* SAĞ KUTUDA TARİH ÇİZGİNİN SOLUNDA */

.timeline-right .timeline-year {
    right: calc(50% + 20px);
}


/* =========================================================
   KARTLAR
========================================================= */

.timeline-card {
    position: relative;

    padding: 30px 34px;

    background: rgba(255,255,255,.72);

    border: 1px solid rgba(6,47,70,.06);

    box-shadow:
        0 10px 35px rgba(6,47,70,.06);

    transition:
        transform .45s cubic-bezier(.22,1,.36,1),
        box-shadow .45s ease,
        background .45s ease,
        border-color .45s ease;
}


/* SOL KARTIN OKU */

.timeline-left .timeline-card::after {
    content: "";

    position: absolute;

    top: 50%;
    right: -7px;

    width: 14px;
    height: 14px;

    background: rgba(255,255,255,.72);

    border-top: 1px solid rgba(6,47,70,.06);
    border-right: 1px solid rgba(6,47,70,.06);

    transform:
        translateY(-50%)
        rotate(45deg);
}


/* SAĞ KARTIN OKU */

.timeline-right .timeline-card::after {
    content: "";

    position: absolute;

    top: 50%;
    left: -7px;

    width: 14px;
    height: 14px;

    background: rgba(255,255,255,.72);

    border-left: 1px solid rgba(6,47,70,.06);
    border-bottom: 1px solid rgba(6,47,70,.06);

    transform:
        translateY(-50%)
        rotate(45deg);
}


/* =========================================================
   KART YAZILARI
========================================================= */

.timeline-card-label {
    display: block;

    margin-bottom: 10px;

    color: #0b526f;

    font-family: "DM Sans", sans-serif;

    font-size: 8px;
    font-weight: 800;

    letter-spacing: .20em;
}


.timeline-card h3 {
    margin: 0 0 10px;

    color: #062f46;

    font-family: "Playfair Display", serif;

    font-size: 25px;
    font-weight: 500;

    line-height: 1.1;
}


.timeline-card p {
    max-width: 520px;

    margin: 0;

    color: rgba(6,47,70,.62);

    font-family: "DM Sans", sans-serif;

    font-size: 12px;

    line-height: 1.75;
}


/* =========================================================
   GÖRSELDEKİ GİBİ HİZALAMA
========================================================= */

.timeline-left .timeline-card {
    text-align: right;
}

.timeline-left .timeline-card p {
    margin-left: auto;
}


/* =========================================================
   HOVER
========================================================= */

.timeline-row:hover .timeline-card {
    background: #ffffff;

    transform: translateY(-5px);

    border-color: rgba(11,82,111,.12);

    box-shadow:
        0 18px 45px rgba(6,47,70,.11);
}


.timeline-row:hover .timeline-dot {
    background: #c89b63;

    transform:
        translate(-50%, -50%)
        scale(1.35);

    box-shadow:
        0 0 0 6px rgba(200,155,99,.12);
}


.timeline-row:hover .timeline-year {
    color: #c89b63;
}


.timeline-left:hover .timeline-year {
    transform:
        translate(4px, -50%);
}


.timeline-right:hover .timeline-year {
    transform:
        translate(-4px, -50%);
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

    .story-timeline-section {
        padding: 85px 0 95px;
    }

    .story-timeline-container {
        width: 86%;
    }

    .story-timeline-heading {
        margin-bottom: 60px;
    }

    .story-timeline-heading h2 {
        font-size: 43px;
    }


    /* ÇİZGİ SOLA */

    .story-timeline::before {
        left: 12px;
        transform: none;
    }


    .timeline-row {
        display: block;

        min-height: auto;

        margin-bottom: 35px;

        padding-left: 48px;
    }


    .timeline-empty {
        display: none;
    }


    .timeline-center {
        position: absolute;

        left: 0;
        top: 0;

        width: 25px;
        height: 100%;
    }


    .timeline-dot {
        left: 12px;
        top: 34px;
    }


    .timeline-year,
    .timeline-left .timeline-year,
    .timeline-right .timeline-year {
        left: 31px;
        right: auto;

        top: 29px;

        transform: none;

        font-size: 8px;
    }


    .timeline-card,
    .timeline-left .timeline-card {
        text-align: left;

        padding: 28px 24px;
    }


    .timeline-left .timeline-card p {
        margin-left: 0;
    }


    /* MOBİLDE OKLARI KALDIR */

    .timeline-card::after {
        display: none;
    }


    .timeline-card h3 {
        font-size: 23px;
    }


    .timeline-row:hover .timeline-year,
    .timeline-left:hover .timeline-year,
    .timeline-right:hover .timeline-year {
        transform: none;
    }

}

/* =========================================================
   TIMELINE SCROLL PROGRESS
========================================================= */

.timeline-progress-line {
    position: absolute;

    top: 0;
    left: 50%;

    width: 2px;
    height: 0%;

    z-index: 3;

    background: #0b526f;

    transform: translateX(-50%);

    box-shadow:
        0 0 12px rgba(11, 82, 111, .18);

    pointer-events: none;
}


/* NOKTALARIN NORMAL HALİ */

.timeline-dot {
    transition:
        background .4s ease,
        transform .4s cubic-bezier(.22,1,.36,1),
        box-shadow .4s ease;
}


/* ÇİZGİ NOKTAYA ULAŞINCA */

.timeline-dot.timeline-active {
    background: #0b526f;

    transform:
        translate(-50%, -50%)
        scale(1.4);

    box-shadow:
        0 0 0 6px rgba(11,82,111,.10);
}


/* TARİH DE AKTİFLEŞSİN */

.timeline-row.timeline-active .timeline-year {
    color: #0b526f;
    font-weight: 800;
}


/* KART ÇOK HAFİF CANLANSIN */

.timeline-row.timeline-active .timeline-card {
    border-color: rgba(11,82,111,.13);
}


/* MOBİL */

@media (max-width: 768px) {

    .timeline-progress-line {
        left: 12px;
        transform: none;
    }

}


/* =========================================================
   TIMELINE - BLUE THEME
========================================================= */

/* TÜM TARİHÇE ALANI */

.story-timeline-section {
    background: #062F46 !important;
}


/* ÜST KÜÇÜK BAŞLIK */

.story-timeline-heading > span {
    color: #c7e8ed;
}


/* ANA BAŞLIK */

.story-timeline-heading h2 {
    color: #ffffff;
}

.story-timeline-heading h2 em {
    color: #c7e8ed;
}


/* ARKADAKİ SABİT ÇİZGİ */

.story-timeline::before {
    background: rgba(255, 255, 255, .15);
}


/* SCROLL İLE AŞAĞI İNEN ÇİZGİ */

.timeline-progress-line {
    background: #c7e8ed;

    box-shadow:
        0 0 14px rgba(199, 232, 237, .25);
}


/* =========================================================
   KARTLAR
========================================================= */

.timeline-card {
    background: rgba(255, 255, 255, .07);

    border: 1px solid rgba(255, 255, 255, .12);

    box-shadow:
        0 12px 35px rgba(0, 0, 0, .08);

    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}


/* KARTLARIN KÜÇÜK OKLARI */

.timeline-left .timeline-card::after {
    background: #0d3c50;

    border-top-color: rgba(255,255,255,.12);
    border-right-color: rgba(255,255,255,.12);
}

.timeline-right .timeline-card::after {
    background: #0d3c50;

    border-left-color: rgba(255,255,255,.12);
    border-bottom-color: rgba(255,255,255,.12);
}


/* KÜÇÜK KATEGORİ */

.timeline-card-label {
    color: #c7e8ed;
}


/* KART BAŞLIĞI */

.timeline-card h3 {
    color: #ffffff;
}


/* AÇIKLAMA */

.timeline-card p {
    color: rgba(255,255,255,.58);
}


/* =========================================================
   TARİHLER
========================================================= */

.timeline-year {
    color: rgba(255,255,255,.48);
}


/* NOKTALAR */

.timeline-dot {
    background: #062F46;

    border-color: #062F46;

    box-shadow:
        0 0 0 1px rgba(199,232,237,.45);
}


/* SCROLL NOKTAYA ULAŞTIĞINDA */

.timeline-dot.timeline-active {
    background: #c7e8ed;

    box-shadow:
        0 0 0 6px rgba(199,232,237,.12);

    transform:
        translate(-50%, -50%)
        scale(1.4);
}


.timeline-row.timeline-active .timeline-year {
    color: #c7e8ed;
}


/* =========================================================
   HOVER
========================================================= */

.timeline-row:hover .timeline-card {
    background: rgba(255,255,255,.11);

    border-color: rgba(199,232,237,.25);

    transform: translateY(-5px);

    box-shadow:
        0 18px 45px rgba(0,0,0,.13);
}


.timeline-row:hover .timeline-card h3 {
    color: #c7e8ed;
}


.timeline-row:hover .timeline-card p {
    color: rgba(255,255,255,.82);
}


.timeline-row:hover .timeline-dot {
    background: #c7e8ed;

    box-shadow:
        0 0 0 6px rgba(199,232,237,.12);
}


.timeline-row:hover .timeline-year {
    color: #c7e8ed;
}

/* HIKAYEMIZ - FOOTER ARASI BOSLUGU KALDIR */

.values-section {
    margin-bottom: 0 !important;
}

.values {
    margin-bottom: 0 !important;
}

footer,
.footer {
    margin-top: 0 !important;
}

/* HIKAYEMIZ - FOOTER ARASI BEYAZ BOSLUK FIX */

.values-section,
.values,
.values-grid {
    margin-bottom: 0 !important;
}

main {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

main + .footer,
main + footer {
    margin-top: 0 !important;
}

.footer {
    margin-top: 0 !important;
}

/* HIKAYEMIZ - VALUES / FOOTER BOSLUK FIX */

.values.section {
    margin-bottom: 0 !important;
}

.values.section + * {
    margin-top: 0 !important;
}

/* =========================================================
   GALERI HERO - PHOTO BACKGROUND
========================================================= */

.gallery-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}


/* ARKA PLAN FOTOĞRAFI */

.gallery-hero-bg {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    z-index: 0;

    transform: scale(1.02);

    transition:
        transform 8s cubic-bezier(.22,1,.36,1);
}


/* MAVİ FİLTRE */

.gallery-hero-overlay {
    position: absolute;
    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(3,35,52,.94) 0%,
            rgba(6,47,70,.78) 48%,
            rgba(3,39,58,.64) 100%
        );

    pointer-events: none;
}


/* HAFİF ALT KARARTMA */

.gallery-hero-overlay::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to bottom,
            rgba(3,20,30,.12) 0%,
            transparent 45%,
            rgba(3,25,38,.42) 100%
        );
}


/* YAZILAR FOTOĞRAFIN ÜSTÜNDE */

.gallery-hero-content {
    position: relative;
    z-index: 5;
}


/* HAFİF SİNEMATİK ZOOM */

.gallery-hero:hover .gallery-hero-bg {
    transform: scale(1.06);
}


@media (max-width: 768px) {

    .gallery-hero-bg {
        object-position: center;
    }

    .gallery-hero-overlay {
        background:
            linear-gradient(
                90deg,
                rgba(3,35,52,.94),
                rgba(6,47,70,.72)
            );
    }

}

/* =========================================================
   CONTACT PAGE 2026
========================================================= */

.contact-pro-section {
    padding: 140px 0;
    background: #f2eee5;
}

.contact-pro-container {
    width: min(1240px, calc(100% - 80px));
    margin: 0 auto;

    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 120px;

    align-items: start;
}


/* =========================
   SOL TARAF
========================= */

.contact-kicker {
    display: block;

    margin-bottom: 24px;

    color: #b68b63;

    font-family: "DM Sans", sans-serif;
    font-size: 9px;
    font-weight: 700;

    letter-spacing: .25em;
}


.contact-pro-info h2,
.contact-location-heading h2 {
    margin: 0;

    color: #062f46;

    font-family: "Playfair Display", serif;

    font-size: clamp(55px, 5.5vw, 82px);
    font-weight: 500;

    line-height: .92;
    letter-spacing: -.05em;
}


.contact-pro-info h2 em,
.contact-location-heading h2 em {
    color: #0b526f;

    font-weight: 400;
    font-style: italic;
}


.contact-intro {
    max-width: 480px;

    margin: 35px 0 55px;

    color: rgba(6,47,70,.58);

    font-size: 14px;
    line-height: 1.8;
}


/* =========================
   İLETİŞİM SATIRLARI
========================= */

.contact-info-list {
    border-top: 1px solid rgba(6,47,70,.15);
}


.contact-info-row {
    position: relative;

    display: grid;
    grid-template-columns: 45px 1fr 30px;

    gap: 15px;

    padding: 25px 0;

    border-bottom: 1px solid rgba(6,47,70,.15);

    transition:
        padding .4s cubic-bezier(.22,1,.36,1),
        background .4s ease;
}


.contact-number {
    padding-top: 3px;

    color: #b68b63;

    font-size: 9px;
    font-weight: 700;
}


.contact-info-row small {
    display: block;

    margin-bottom: 7px;

    color: rgba(6,47,70,.45);

    font-size: 8px;
    font-weight: 700;

    letter-spacing: .18em;
}


.contact-info-row a,
.contact-info-row p {
    margin: 0;

    color: #062f46;

    font-family: "Playfair Display", serif;

    font-size: 18px;

    line-height: 1.4;
}


.contact-arrow {
    color: #0b526f;

    font-size: 16px;

    transition: transform .35s ease;
}


.contact-info-row:hover {
    padding-left: 10px;
}


.contact-info-row:hover .contact-arrow {
    transform: translate(4px, -4px);
}


/* WHATSAPP */

.contact-whatsapp {
    display: flex;

    align-items: center;
    justify-content: space-between;

    width: 100%;

    margin-top: 35px;
    padding: 19px 22px;

    background: #062f46;

    color: #fff;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: .12em;

    transition:
        background .35s ease,
        transform .35s ease;
}


.contact-whatsapp:hover {
    background: #0b526f;

    transform: translateY(-3px);
}


/* =========================================================
   FORM
========================================================= */

.contact-form-wrap {
    padding: 45px;

    background: #062f46;

    color: #fff;

    box-shadow:
        0 30px 80px rgba(6,47,70,.14);
}


.contact-form-top {
    display: flex;

    align-items: center;
    justify-content: space-between;

    margin-bottom: 50px;

    padding-bottom: 20px;

    border-bottom:
        1px solid rgba(255,255,255,.14);

    color: rgba(255,255,255,.55);

    font-size: 8px;
    font-weight: 700;

    letter-spacing: .22em;
}


.contact-form-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #c7e8ed;

    box-shadow:
        0 0 0 6px rgba(199,232,237,.08);
}


.contact-form-row {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 30px;
}


.contact-field {
    margin-bottom: 35px;
}


.contact-field label {
    display: block;

    margin-bottom: 12px;

    color: rgba(255,255,255,.45);

    font-size: 8px;
    font-weight: 700;

    letter-spacing: .18em;
}


.contact-field input,
.contact-field select,
.contact-field textarea {
    width: 100%;

    padding: 12px 0 14px;

    border: 0;
    border-bottom:
        1px solid rgba(255,255,255,.25);

    outline: none;

    border-radius: 0;

    background: transparent;

    color: #fff;

    font-family: "DM Sans", sans-serif;

    font-size: 14px;

    transition: border-color .3s ease;
}


.contact-field input::placeholder,
.contact-field textarea::placeholder {
    color: rgba(255,255,255,.32);
}


.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
    border-color: #c7e8ed;
}


.contact-field select {
    cursor: pointer;
}


.contact-field select option {
    color: #062f46;
}


.contact-field textarea {
    min-height: 110px;

    resize: vertical;
}


.contact-message {
    margin-top: 5px;
}


.contact-submit {
    width: 100%;

    display: flex;

    align-items: center;
    justify-content: space-between;

    padding: 18px 20px;

    border: 0;

    background: #fff;

    color: #062f46;

    cursor: pointer;

    font-family: "DM Sans", sans-serif;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: .12em;

    text-transform: uppercase;

    transition:
        background .35s ease,
        transform .35s ease;
}


.contact-submit:hover {
    background: #c7e8ed;

    transform: translateY(-3px);
}


/* =========================================================
   LOCATION
========================================================= */

.contact-location {
    padding: 130px 0 0;

    background: #062f46;

    color: #fff;
}


.contact-location-heading {
    width: min(1240px, calc(100% - 80px));

    margin: 0 auto 70px;

    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 80px;
}


.contact-location .contact-kicker {
    color: #c7e8ed;
}


.contact-location-heading h2 {
    color: #fff;
}


.contact-location-heading h2 em {
    color: #c7e8ed;
}


.contact-location-text {
    width: 340px;

    padding-bottom: 8px;
}


.contact-location-text p {
    margin: 0 0 25px;

    color: rgba(255,255,255,.55);

    font-size: 12px;

    line-height: 1.8;
}


.contact-location-text a {
    display: inline-block;

    padding-bottom: 6px;

    border-bottom:
        1px solid rgba(199,232,237,.5);

    color: #c7e8ed;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: .15em;
}


/* =========================================================
   MAP
========================================================= */

.contact-map-pro {
    position: relative;

    width: 100%;
    height: 650px;

    overflow: hidden;

    background: #07151b;
}


.contact-map-pro iframe {
    width: 100%;
    height: 100%;

    border: 0;

    filter:
        grayscale(.85)
        saturate(.55)
        contrast(1.05);

    transform: scale(1.01);
}


.contact-map-shade {
    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            to bottom,
            rgba(6,47,70,.32),
            transparent 35%,
            rgba(6,47,70,.16)
        );
}


/* MARKER */

.contact-map-marker {
    position: absolute;

    left: 50%;
    top: 50%;

    display: flex;

    align-items: center;

    transform: translate(-50%, -50%);

    pointer-events: none;
}


.contact-marker-dot {
    position: relative;

    z-index: 3;

    width: 52px;
    height: 52px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background: #062f46;

    color: #c7e8ed;

    box-shadow:
        0 15px 40px rgba(0,0,0,.25);
}


.contact-marker-pulse {
    position: absolute;

    left: 26px;
    top: 26px;

    width: 52px;
    height: 52px;

    border:
        1px solid #062f46;

    border-radius: 50%;

    transform: translate(-50%, -50%);

    animation:
        contactMapPulse 2.2s ease-out infinite;
}


@keyframes contactMapPulse {

    0% {
        transform:
            translate(-50%, -50%)
            scale(.8);

        opacity: .8;
    }

    100% {
        transform:
            translate(-50%, -50%)
            scale(2);

        opacity: 0;
    }

}


.contact-marker-label {
    position: relative;

    z-index: 4;

    min-width: 210px;

    margin-left: 12px;

    padding: 17px 20px;

    background: rgba(6,47,70,.94);

    color: #fff;

    box-shadow:
        0 15px 40px rgba(0,0,0,.18);

    backdrop-filter: blur(10px);
}


.contact-marker-label small {
    display: block;

    margin-bottom: 7px;

    color: #c7e8ed;

    font-size: 7px;
    font-weight: 700;

    letter-spacing: .18em;
}


.contact-marker-label strong {
    display: block;

    font-family: "Playfair Display", serif;

    font-size: 18px;
    font-weight: 500;

    line-height: 1.15;
}


.contact-marker-label span {
    display: block;

    margin-top: 7px;

    color: rgba(255,255,255,.48);

    font-size: 9px;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 900px) {

    .contact-pro-section {
        padding: 90px 0;
    }

    .contact-pro-container {
        width: min(100% - 40px, 700px);

        grid-template-columns: 1fr;

        gap: 70px;
    }


    .contact-form-wrap {
        padding: 35px 25px;
    }


    .contact-location {
        padding-top: 90px;
    }


    .contact-location-heading {
        width: min(100% - 40px, 700px);

        margin-bottom: 50px;

        flex-direction: column;

        align-items: flex-start;

        gap: 35px;
    }


    .contact-location-text {
        width: 100%;
    }


    .contact-map-pro {
        height: 500px;
    }

}


@media (max-width: 600px) {

    .contact-pro-info h2,
    .contact-location-heading h2 {
        font-size: 52px;
    }


    .contact-form-row {
        grid-template-columns: 1fr;

        gap: 0;
    }


    .contact-form-wrap {
        padding: 30px 22px;
    }


    .contact-map-pro {
        height: 450px;
    }


    .contact-map-marker {
        left: 43%;
    }


    .contact-marker-dot {
        width: 44px;
        height: 44px;
    }


    .contact-marker-label {
        min-width: 175px;

        padding: 14px 16px;
    }

}

.story-photo-overlay {
    position: absolute;
    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(3,35,52,.94) 0%,
            rgba(3,47,67,.76) 45%,
            rgba(3,39,58,.50) 100%
        );
}

/* =========================================================
   MENU CATEGORY SELECT
========================================================= */

.menu-category-select {
    padding: 20px 0 40px;
}


/* BAŞLIK */

.menu-category-head {
    max-width: 750px;
    margin-bottom: 65px;
}

.menu-category-head > span {
    display: block;

    margin-bottom: 18px;

    color: #b68b63;

    font-family: "DM Sans", sans-serif;
    font-size: 9px;
    font-weight: 700;

    letter-spacing: .28em;
}

.menu-category-head h2 {
    margin: 0;

    color: #062f46;

    font-family: "Playfair Display", serif;

    font-size: clamp(55px, 6vw, 90px);
    font-weight: 500;

    line-height: .92;
    letter-spacing: -.05em;
}

.menu-category-head h2 em {
    color: #0b526f;

    font-weight: 400;
    font-style: italic;
}

.menu-category-head p {
    margin-top: 25px;

    color: #748086;

    font-size: 13px;
}


/* =========================================================
   4 KART
========================================================= */

.menu-category-cards {
    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 18px;
}


/* KART */

.menu-category-card {
    position: relative;

    height: 430px;

    padding: 0;

    border: 0;

    overflow: hidden;

    background: #062f46;

    cursor: pointer;

    text-align: left;

    color: #fff;
}


/* FOTOĞRAF */

.menu-category-card img {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .9s cubic-bezier(.22,1,.36,1),
        filter .6s ease;
}


/* MAVİ FİLTRE */

.category-overlay {
    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            180deg,
            rgba(3,35,52,.08) 0%,
            rgba(3,35,52,.25) 40%,
            rgba(3,35,52,.90) 100%
        );

    transition: background .5s ease;
}


/* NUMARA */

.category-number {
    position: absolute;

    z-index: 3;

    top: 25px;
    left: 27px;

    color: rgba(255,255,255,.65);

    font-family: "DM Sans", sans-serif;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: .15em;
}


/* ALT YAZILAR */

.category-content {
    position: absolute;

    z-index: 3;

    left: 30px;
    right: 30px;
    bottom: 30px;
}


.category-content small {
    display: block;

    margin-bottom: 10px;

    color: #c7e8ed;

    font-family: "DM Sans", sans-serif;

    font-size: 8px;
    font-weight: 700;

    letter-spacing: .20em;
}


.category-content strong {
    display: block;

    font-family: "Playfair Display", serif;

    font-size: clamp(38px, 4vw, 58px);
    font-weight: 500;

    line-height: 1;
}


.category-content i {
    display: block;

    margin-top: 22px;

    color: rgba(255,255,255,.65);

    font-family: "DM Sans", sans-serif;

    font-size: 9px;
    font-weight: 600;

    font-style: normal;

    letter-spacing: .12em;

    transform: translateY(8px);

    opacity: 0;

    transition:
        opacity .4s ease,
        transform .4s ease;
}


/* HOVER */

.menu-category-card:hover img {
    transform: scale(1.06);
}

.menu-category-card:hover .category-overlay {
    background:
        linear-gradient(
            180deg,
            rgba(3,35,52,.15),
            rgba(3,47,67,.38),
            rgba(3,35,52,.94)
        );
}

.menu-category-card:hover .category-content i {
    opacity: 1;

    transform: translateY(0);
}


/* =========================================================
   CATEGORY CONTENT
========================================================= */

.menu-category-panel {
    display: none;

    animation: menuCategoryIn .6s cubic-bezier(.22,1,.36,1);
}


.menu-category-panel.active {
    display: block;
}


.menu-category-select.hidden {
    display: none;
}


@keyframes menuCategoryIn {

    from {
        opacity: 0;
        transform: translateY(25px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* GERİ BUTONU */

.menu-back {
    display: inline-flex;

    align-items: center;

    margin-bottom: 55px;

    padding: 0 0 8px;

    border: 0;
    border-bottom: 1px solid rgba(6,47,70,.3);

    background: transparent;

    color: #062f46;

    cursor: pointer;

    font-family: "DM Sans", sans-serif;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: .15em;

    text-transform: uppercase;

    transition:
        color .3s ease,
        border-color .3s ease;
}


.menu-back:hover {
    color: #b68b63;

    border-color: #b68b63;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

    .menu-category-head {
        margin-bottom: 45px;
    }

    .menu-category-cards {
        grid-template-columns: 1fr;

        gap: 12px;
    }

    .menu-category-card {
        height: 300px;
    }

    .category-content {
        left: 22px;
        right: 22px;
        bottom: 23px;
    }

    .category-content i {
        opacity: 1;

        transform: none;
    }

    .category-number {
        top: 20px;
        left: 22px;
    }

}


/* =========================================================
   MENU CATEGORY CARDS - FINAL SIZE
========================================================= */

.menu-category-select {
    width: min(1240px, calc(100% - 80px));
    margin: 0 auto;
    padding: 100px 0 120px;
}

.menu-category-cards {
    width: 100%;

    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 18px;
}

.menu-category-card {
    position: relative;

    width: 100%;
    height: 390px;

    padding: 0;

    overflow: hidden;

    border: none;
    border-radius: 0;

    background: #062f46;

    cursor: pointer;
}


/* FOTOĞRAF */

.menu-category-card > img {
    display: block;

    position: absolute;
    inset: 0;

    width: 100% !important;
    height: 100% !important;

    object-fit: cover;

    z-index: 0;

    transition: transform .8s cubic-bezier(.22,1,.36,1);
}


/* MAVİ / LACİVERT FİLTRE */

.menu-category-card .category-overlay {
    position: absolute;
    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            to bottom,
            rgba(3,35,52,.08) 0%,
            rgba(3,35,52,.20) 40%,
            rgba(3,35,52,.90) 100%
        );
}


/* NUMARA */

.menu-category-card .category-number {
    position: absolute;

    top: 25px;
    left: 28px;

    z-index: 3;

    color: rgba(255,255,255,.70);

    font-family: "DM Sans", sans-serif;
    font-size: 10px;
    font-weight: 700;

    letter-spacing: .18em;
}


/* ALT İÇERİK */

.menu-category-card .category-content {
    position: absolute;

    left: 30px;
    right: 30px;
    bottom: 30px;

    z-index: 3;
}


.menu-category-card .category-content small {
    display: block;

    margin-bottom: 10px;

    color: #c7e8ed;

    font-family: "DM Sans", sans-serif;
    font-size: 9px;
    font-weight: 700;

    letter-spacing: .20em;
}


.menu-category-card .category-content strong {
    display: block;

    color: #ffffff;

    font-family: "Playfair Display", serif;

    font-size: clamp(38px, 3.2vw, 55px);
    font-weight: 500;

    line-height: .95;
}


/* MENÜYÜ GÖR */

.menu-category-card .category-content i {
    display: block;

    margin-top: 18px;

    color: rgba(255,255,255,.65);

    font-family: "DM Sans", sans-serif;
    font-size: 9px;
    font-weight: 600;
    font-style: normal;

    letter-spacing: .13em;

    opacity: 0;

    transform: translateY(8px);

    transition:
        opacity .35s ease,
        transform .35s ease;
}


/* HOVER */

.menu-category-card:hover > img {
    transform: scale(1.055);
}

.menu-category-card:hover .category-content i {
    opacity: 1;
    transform: translateY(0);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .menu-category-select {
        width: min(100% - 40px, 1240px);
        padding: 75px 0 90px;
    }

    .menu-category-card {
        height: 330px;
    }

}


/* =========================================================
   TELEFON
========================================================= */

@media (max-width: 600px) {

    .menu-category-select {
        width: calc(100% - 30px);

        padding: 65px 0 75px;
    }

    .menu-category-cards {
        grid-template-columns: 1fr;

        gap: 12px;
    }

    .menu-category-card {
        height: 280px;
    }

    .menu-category-card .category-content {
        left: 22px;
        right: 22px;
        bottom: 22px;
    }

    .menu-category-card .category-number {
        top: 20px;
        left: 22px;
    }

    .menu-category-card .category-content i {
        opacity: 1;
        transform: none;
    }

}

/* =========================================================
   MENU - OPEN CATEGORY
========================================================= */

/* GERİ BUTONU */

.menu-category-back {
    align-items: center;
    gap: 12px;

    margin: 10px 0 55px;

    padding: 12px 0;

    border: 0;
    border-bottom: 1px solid rgba(6,47,70,.22);

    background: transparent;

    color: #062f46;

    font-family: "DM Sans", sans-serif;
    font-size: 10px;
    font-weight: 700;

    letter-spacing: .15em;

    cursor: pointer;

    text-transform: uppercase;

    transition: .3s ease;
}

.menu-category-back span {
    font-size: 18px;

    transition: transform .3s ease;
}

.menu-category-back:hover {
    color: #b68b63;
    border-color: #b68b63;
}

.menu-category-back:hover span {
    transform: translateX(-5px);
}


/* =========================================================
   AÇILAN KATEGORİ BAŞLIĞI
========================================================= */

.food-menu > .container > .menu-section-title {
    margin-bottom: 50px;
}

.menu-section-title {
    position: relative;

    padding-bottom: 28px;

    border-bottom: 1px solid rgba(6,47,70,.15);
}

.menu-section-title > span {
    color: #b68b63;

    font-family: "DM Sans", sans-serif;
    font-size: 10px;
    font-weight: 700;

    letter-spacing: .20em;
}

.menu-section-title small {
    display: block;

    margin-bottom: 9px;

    color: #748086;

    font-family: "DM Sans", sans-serif;
    font-size: 9px;
    font-weight: 700;

    letter-spacing: .20em;
}

.menu-section-title h2 {
    color: #062f46;

    font-family: "Playfair Display", serif;

    font-size: clamp(48px, 6vw, 80px);
    font-weight: 500;

    line-height: .95;
}


/* =========================================================
   ÜRÜNLER
========================================================= */

.products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 22px;

    max-width: 1050px;

    margin-left: auto;
    margin-right: auto;
}


/* ÜRÜN FOTOĞRAFI */

.product-image {
    height: 340px;
}


/* ÜRÜN BİLGİLERİ */

.product-info {
    padding: 24px 4px 30px;
}


.product-title h3 {
    color: #062f46;

    font-family: "Playfair Display", serif;

    font-size: 25px;
    font-weight: 500;
}


.product-title strong {
    color: #062f46;

    font-family: "DM Sans", sans-serif;

    font-size: 15px;
}


.product-info > p {
    max-width: 420px;

    margin-top: 10px;

    color: #748086;

    font-size: 12px;

    line-height: 1.7;
}


/* =========================================================
   TELEFON
========================================================= */

@media (max-width: 700px) {

    .menu-category-back {
        margin-bottom: 35px;
    }

    .products-grid {
        grid-template-columns: 1fr;

        gap: 30px;
    }

    .product-image {
        height: 300px;
    }

}


/* =========================================================
   MENU CATEGORY TRANSITIONS
========================================================= */

.menu-category-select {
    opacity: 1;
    transform: translateY(0);

    transition:
        opacity .35s ease,
        transform .45s cubic-bezier(.22,1,.36,1);
}


/* ÜRÜNLER AÇILIRKEN */

.menu-section-title.menu-opening,
.products-grid.menu-opening {
    animation: menuContentOpen .65s cubic-bezier(.22,1,.36,1) both;
}


.products-grid.menu-opening {
    animation-delay: .08s;
}


@keyframes menuContentOpen {

    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* ÜRÜNLER DE HAFİF SIRALI GELSİN */

.products-grid.menu-opening .product-card {
    animation: menuProductOpen .6s cubic-bezier(.22,1,.36,1) both;
}

.products-grid.menu-opening .product-card:nth-child(1) {
    animation-delay: .10s;
}

.products-grid.menu-opening .product-card:nth-child(2) {
    animation-delay: .17s;
}

.products-grid.menu-opening .product-card:nth-child(3) {
    animation-delay: .24s;
}

.products-grid.menu-opening .product-card:nth-child(4) {
    animation-delay: .31s;
}

.products-grid.menu-opening .product-card:nth-child(5) {
    animation-delay: .38s;
}

.products-grid.menu-opening .product-card:nth-child(6) {
    animation-delay: .45s;
}


@keyframes menuProductOpen {

    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}

/* =========================================================
   MENU BACK BUTTON - POSITION FIX
========================================================= */

.menu-category-back {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    /* Ana container ile aynı hizada */
    margin-left: max(40px, calc((100vw - 1240px) / 2));

    /* Balıklar başlığına yaklaştır */
    margin-top: 45px;
    margin-bottom: 20px;

    padding: 12px 0;

    width: auto;

    border: 0;
    border-bottom: 1px solid rgba(6, 47, 70, .25);

    background: transparent;

    color: #062f46;

    font-family: "DM Sans", sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;

    cursor: pointer;
}

.menu-category-back span {
    font-size: 17px;
    line-height: 1;
}

.menu-category-back:hover {
    color: #b68b63;
    border-color: #b68b63;
}


/* TABLET */

@media (max-width: 900px) {

    .menu-category-back {
        margin-left: 30px;
        margin-top: 30px;
        margin-bottom: 15px;
    }

}


/* MOBİL */

@media (max-width: 600px) {

    .menu-category-back {
        margin-left: 20px;
        margin-top: 25px;
        margin-bottom: 10px;

        font-size: 9px;
    }

}

/* Menü alt bilgilendirme yazısı */

.menu-note {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 750px;
}

.menu-note p {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

@media (max-width: 600px) {
    .menu-note {
        width: calc(100% - 40px);
        padding: 0;
    }
}

/* =========================================================
   MENU CATEGORY TITLES - ALIGNMENT FIX
   Tüm kategori başlıklarını Balıklar ile aynı hizaya getirir
========================================================= */

.food-menu .menu-section-title {
    width: min(1240px, calc(100% - 80px)) !important;
    margin-left: auto !important;
    margin-right: auto !important;

    margin-top: 35px !important;
    margin-bottom: 45px !important;

    box-sizing: border-box !important;
}

/* Başlığın altındaki çizgi de aynı genişlikte */
.food-menu .menu-section-title::after {
    width: 100% !important;
}


/* TABLET */
@media (max-width: 900px) {
    .food-menu .menu-section-title {
        width: calc(100% - 60px) !important;
        margin-top: 30px !important;
        margin-bottom: 35px !important;
    }
}


/* MOBİL */
@media (max-width: 600px) {
    .food-menu .menu-section-title {
        width: calc(100% - 40px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        margin-top: 25px !important;
        margin-bottom: 30px !important;
    }
}


/* BALIK ALT KATEGORİ GERİ BUTONU */
.fish-category-back {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    width: fit-content !important;

    margin: 25px 0 35px max(40px, calc((100vw - 1240px) / 2)) !important;
    padding: 11px 18px !important;

    background: #062F46 !important;
    color: #fff !important;

    border: 1px solid #062F46 !important;
    border-radius: 50px;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;

    cursor: pointer;
    transition: .25s ease;
}

.fish-category-back:hover {
    background: transparent !important;
    color: #062F46 !important;
}

.fish-category-back span {
    font-size: 16px;
}

@media (max-width: 900px) {
    .fish-category-back {
        margin-left: 30px !important;
    }
}

@media (max-width: 600px) {
    .fish-category-back {
        margin: 20px 20px 30px !important;
    }
}

/* =========================================================
   BALIK ALT KATEGORİ KARTLARI
========================================================= */

.fish-subcategories {
    width: 100%;
    margin: 0 0 50px;

    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.fish-subcategory-card {
    position: relative;
    display: block;

    width: 100%;
    height: 250px;

    padding: 0;
    border: 0;
    overflow: hidden;

    background: #062F46;
    cursor: pointer;
    text-align: left;

    font-family: "DM Sans", sans-serif;
}

/* FOTOĞRAF */
.fish-subcategory-card > img {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;
    object-fit: cover;

    transition: transform .6s ease;
}

/* FOTOĞRAF ÜZERİ FİLTRE */
.fish-subcategory-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;

    background: linear-gradient(
        180deg,
        rgba(6, 47, 70, .08) 0%,
        rgba(6, 47, 70, .35) 45%,
        rgba(4, 25, 36, .92) 100%
    );
}

/* 01 - 02 - 03 - 04 */
.fish-subcategory-number {
    position: absolute;
    top: 20px;
    left: 22px;
    z-index: 2;

    color: rgba(255,255,255,.8);

    font-size: 10px;
    font-weight: 700;
    letter-spacing: .16em;
}

/* ALT YAZILAR */
.fish-subcategory-content {
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: 22px;
    z-index: 2;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.fish-subcategory-content small {
    margin-bottom: 5px;

    color: #d5b18c;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: .17em;
}

.fish-subcategory-content strong {
    color: #fff;

    font-family: "Playfair Display", serif;
    font-size: 32px;
    font-weight: 500;
    line-height: 1.05;
}

.fish-subcategory-content i {
    margin-top: 12px;

    color: rgba(255,255,255,.7);

    font-size: 9px;
    font-weight: 600;
    font-style: normal;
    letter-spacing: .08em;

    transition: .25s ease;
}

/* HOVER */
.fish-subcategory-card:hover > img {
    transform: scale(1.05);
}

.fish-subcategory-card:hover .fish-subcategory-content i {
    color: #fff;
    transform: translateX(4px);
}


/* TABLET */
@media (max-width: 768px) {

    .fish-subcategories {
        gap: 12px;
    }

    .fish-subcategory-card {
        height: 220px;
    }

}


/* TELEFON */
@media (max-width: 550px) {

    .fish-subcategories {
        grid-template-columns: 1fr;
        gap: 10px;
        margin-bottom: 35px;
    }

    .fish-subcategory-card {
        height: 190px;
    }

    .fish-subcategory-content strong {
        font-size: 28px;
    }
}


/* =========================================================
   MOBİL — BALIKLAR HARİÇ DİĞER MENÜ KATEGORİLERİ
========================================================= */

@media (max-width: 600px) {

    /* Ara Sıcaklar */
    #arasicaklar + .products-grid,

    /* Mezeler & Salatalar */
    #mezeler + .products-grid,

    /* Çorbalar */
    #corbalar + .products-grid,

    /* Tatlılar */
    #tatlilar + .products-grid,

    /* İçecekler */
    #icecekler + .products-grid {
        width: calc(100% - 40px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }

    #arasicaklar + .products-grid .product-card,
    #mezeler + .products-grid .product-card,
    #corbalar + .products-grid .product-card,
    #tatlilar + .products-grid .product-card,
    #icecekler + .products-grid .product-card {
        width: 100% !important;
        min-width: 0 !important;
    }
}


/* LOGO BOYUTU - FINAL */
.header .logo {
    width: 230px !important;
    max-width: none !important;
    flex-shrink: 0 !important;
}

.header .logo img {
    display: block !important;
    width: 230px !important;
    max-width: none !important;
    height: auto !important;
}