:root {
    --bg: #f7f4ef;
    --surface: #ffffff;
    --soft: #eee8e0;

    --text: #1c1c1a;
    --muted: #6d6861;

    --accent: #9a7f67;
    --accent-dark: #6f5947;

    --green: #738d77;
    --green-dark: #586d5c;

    --dark: #191917;
    --border: #ddd5cb;

    --radius: 18px;
    --container: 1200px;

    --shadow:
        0 24px 70px rgba(25, 25, 23, 0.08);

    --shadow-hover:
        0 34px 85px rgba(25, 25, 23, 0.14);

    --ease:
        cubic-bezier(.22, .61, .36, 1);

    --transition-fast:
        0.35s var(--ease);

    --transition:
        0.65s var(--ease);

    --transition-slow:
        0.9s var(--ease);
}

/* =========================
   RESET
========================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Manrope", Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.65;
    overflow-x: hidden;
}

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

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

button,
input,
textarea {
    font: inherit;
}

button {
    cursor: pointer;
}

.container {
    width: min(90%, var(--container));
    margin-inline: auto;
}

/* =========================
   HEADER
========================= */

.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;

    z-index: 1000;

    background: #ffffff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    transition:
        border-color var(--transition),
        box-shadow var(--transition),
        background-color var(--transition);
}

.header.scrolled {
    background: #ffffff;
    border-bottom-color: rgba(0, 0, 0, 0.08);
    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.06);
}

/* =========================
   NAVBAR
========================= */

.navbar {
    min-height: 92px;

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

    transition:
        min-height var(--transition),
        padding var(--transition);
}

.header.scrolled .navbar {
    min-height: 72px;
}

/* =========================
   LOGO
========================= */
.logo {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    
}

.logo img {
    display: block;
    width: auto;
    height: 100px;

    transition:
        height var(--transition),
        transform var(--transition),
        opacity var(--transition);
}

.logo:hover img {
    opacity: 0.8;
}

.header.scrolled .logo img {
    height: 75px;
}

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

.nav-menu {
    display: flex;
    align-items: center;
    gap: 1.7rem;

    transition:
        gap var(--transition),
        transform var(--transition),
        opacity var(--transition);
}

.header.scrolled .nav-menu {
    gap: 1.5rem;
}

.nav-menu a {
    position: relative;

    font-size: 0.9rem;
    font-weight: 700;

    transform: translateY(0);

    transition:
        color var(--transition),
        background-color var(--transition),
        transform var(--transition),
        box-shadow var(--transition),
        opacity var(--transition);
}

.nav-menu a:not(.nav-contact)::after {
    content: "";

    position: absolute;
    left: 0;
    bottom: -6px;

    width: 0;
    height: 1px;

    background: var(--accent);

    transition:
        width var(--transition);
}

.nav-menu a:not(.nav-contact):hover {
    color: var(--accent-dark);
    transform: translateY(-1px);
}

.nav-menu a:not(.nav-contact):hover::after {
    width: 100%;
}

/* =========================
   NAV CONTACT
========================= */

.nav-contact {
    padding: 0.8rem 1.25rem;

    border-radius: 14px;

    background: var(--green);
    color: #ffffff !important;

    box-shadow:
        0 10px 28px rgba(88, 109, 92, 0.18);

    transition:
        padding var(--transition),
        border-radius var(--transition),
        background-color var(--transition),
        color var(--transition),
        transform var(--transition),
        box-shadow var(--transition);
}

.header.scrolled .nav-contact {
    padding: 0.68rem 1.15rem;
}

.nav-contact:hover {
    background: var(--green-dark);

    transform: translateY(-2px);

    box-shadow:
        0 16px 36px rgba(88, 109, 92, 0.24);
}

/* =========================
   MOBILE MENU BUTTON
========================= */

.menu-button {
    display: none;

    width: 36px;

    border: 0;
    background: transparent;
}

.menu-button span {
    display: block;

    height: 2px;
    margin: 6px 0;

    background: var(--text);

    transition:
        transform var(--transition),
        opacity var(--transition),
        background-color var(--transition);
}

.menu-button.active span:nth-child(1) {
    transform:
        translateY(8px)
        rotate(45deg);
}

.menu-button.active span:nth-child(2) {
    opacity: 0;
}

.menu-button.active span:nth-child(3) {
    transform:
        translateY(-8px)
        rotate(-45deg);
}

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

.hero {
    position: relative;

    min-height: 100vh;

    display: flex;
    align-items: center;

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

    transition:
        background-position var(--transition-slow),
        filter var(--transition-slow);
}

.hero::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(18, 16, 14, 0.85),
            rgba(18, 16, 14, 0.48),
            rgba(18, 16, 14, 0.14)
        );

    transition:
        opacity var(--transition-slow),
        background var(--transition-slow);
}

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

    padding-top: 5rem;

    color: #ffffff;
}

/* =========================
   TYPOGRAPHY
========================= */

.eyebrow,
.section-label {
    margin-bottom: 1rem;

    color: var(--accent);

    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;

    transition:
        color var(--transition),
        letter-spacing var(--transition),
        transform var(--transition);
}

.hero .eyebrow {
    color: #ead8c5;
}

.hero h1 {
    max-width: 950px;

    font-size:
        clamp(3.2rem, 7vw, 6.4rem);

    font-weight: 500;
    line-height: 1.01;
    letter-spacing: -0.06em;

    transition:
        color var(--transition),
        transform var(--transition-slow),
        opacity var(--transition-slow);
}

.hero-text {
    max-width: 660px;

    margin-top: 1.6rem;

    color:
        rgba(255, 255, 255, 0.8);

    transition:
        color var(--transition),
        transform var(--transition-slow),
        opacity var(--transition-slow);
}

/* =========================
   ACTIONS
========================= */

.actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;

    margin-top: 2rem;

    transition:
        gap var(--transition),
        transform var(--transition);
}

/* =========================
   BUTTONS
========================= */

.button {
    min-height: 54px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;

    padding: 0 1.5rem;

    border: 1px solid transparent;
    border-radius: 14px;

    font-weight: 800;

    transform:
        translateY(0)
        scale(1);

    transition:
        background-color var(--transition),
        color var(--transition),
        border-color var(--transition),
        border-radius var(--transition),
        transform var(--transition),
        box-shadow var(--transition),
        letter-spacing var(--transition);
}

.button:hover {
    transform:
        translateY(-3px)
        scale(1.01);

    letter-spacing: 0.015em;
}

.button:active {
    transform:
        translateY(-1px)
        scale(0.99);

    transition-duration: 0.18s;
}

.button-accent {
    background: var(--accent);
    color: #ffffff;

    box-shadow:
        0 12px 30px
        rgba(111, 89, 71, 0.2);
}

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

    box-shadow:
        0 18px 40px
        rgba(111, 89, 71, 0.25);
}

.button-dark {
    background: var(--dark);
    color: #ffffff;
}

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

.button-outline-light {
    border-color:
        rgba(255, 255, 255, 0.55);

    background:
        rgba(255, 255, 255, 0.1);

    color: #ffffff;
}

.button-outline-light:hover {
    background: #ffffff;
    color: var(--text);
}

.button-contact {
    background: var(--green);
    color: #ffffff;

    box-shadow:
        0 12px 30px
        rgba(88, 109, 92, 0.2);
}

.button-contact:hover {
    background: var(--green-dark);

    box-shadow:
        0 18px 40px
        rgba(88, 109, 92, 0.28);
}

/* =========================
   SECTIONS
========================= */

.section {
    padding: 7rem 0;
}

.section-heading {
    display: grid;
    grid-template-columns:
        1.2fr 0.8fr;

    gap: 4rem;

    align-items: end;

    margin-bottom: 3rem;

    transition:
        gap var(--transition),
        transform var(--transition);
}

.section-heading h2,
.contact-hero h1 {
    font-size:
        clamp(2.2rem, 4.5vw, 4rem);

    font-weight: 500;
    line-height: 1.12;
    letter-spacing: -0.045em;

    transition:
        color var(--transition),
        transform var(--transition);
}

.section-heading > p {
    color: var(--muted);

    transition:
        color var(--transition),
        transform var(--transition);
}

/* =========================
   GRIDS
========================= */

.services-grid,
.featured-products,
.products-grid {
    display: grid;

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

    gap: 1.5rem;

    transition:
        gap var(--transition);
}

/* =========================
   CARDS
========================= */

.service-card,
.product-card {
    overflow: hidden;

    border-radius: var(--radius);

    background: var(--surface);

    box-shadow: var(--shadow);

    transform:
        translateY(0)
        scale(1);

    transition:
        transform var(--transition),
        box-shadow var(--transition),
        background-color var(--transition),
        border-radius var(--transition);
}

.service-card:hover,
.product-card:hover {
    transform:
        translateY(-8px)
        scale(1.005);

    box-shadow: var(--shadow-hover);
}

.service-card img,
.product-image img {
    transition:
        transform var(--transition-slow),
        filter var(--transition-slow);
}

.service-card:hover img,
.product-card:hover img {
    transform: scale(1.04);
}

.service-content,
.product-content {
    padding: 1.45rem;

    transition:
        padding var(--transition),
        background-color var(--transition);
}

.service-content p,
.product-content p {
    color: var(--muted);
    font-size: 0.9rem;

    transition:
        color var(--transition);
}

.service-content a {
    display: inline-block;

    margin-top: 1rem;

    color: var(--accent-dark);

    font-weight: 800;

    transition:
        color var(--transition),
        letter-spacing var(--transition),
        transform var(--transition);
}

.service-content a:hover {
    color: var(--accent);
    letter-spacing: 0.02em;
    transform: translateX(3px);
}

/* =========================
   FEATURED
========================= */

.featured-section {
    background: var(--soft);

    transition:
        background-color var(--transition-slow);
}

.center-action {
    margin-top: 2.5rem;
    text-align: center;
}

/* =========================
   PROJECTS
========================= */

.projects-grid {
    display: grid;

    grid-template-columns:
        1.4fr 1fr;

    grid-template-rows:
        repeat(2, 320px);

    gap: 1.2rem;

    transition:
        gap var(--transition);
}

.project {
    position: relative;

    overflow: hidden;

    border-radius: var(--radius);

    transform: translateY(0);

    transition:
        transform var(--transition),
        border-radius var(--transition),
        box-shadow var(--transition);
}

.project:first-child {
    grid-row: span 2;
}

.project:hover {
    transform: translateY(-5px);

    box-shadow: var(--shadow-hover);
}

.project img {
    height: 100%;
    object-fit: cover;

    transition:
        transform var(--transition-slow),
        filter var(--transition-slow);
}

.project:hover img {
    transform: scale(1.035);
}

.project::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(0, 0, 0, 0.7),
            transparent 60%
        );

    opacity: 1;

    transition:
        opacity var(--transition),
        background var(--transition);
}

.project:hover::after {
    opacity: 0.9;
}

.project-info {
    position: absolute;
    left: 1.5rem;
    bottom: 1.5rem;

    z-index: 2;

    color: #ffffff;

    transform: translateY(0);

    transition:
        transform var(--transition),
        opacity var(--transition);
}

.project:hover .project-info {
    transform: translateY(-4px);
}

/* =========================
   CONTACT STRIP
========================= */

.contact-strip {
    padding: 6rem 0;

    background: #c8b6a4;

    transition:
        background-color var(--transition-slow);
}

.contact-strip .container {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 3rem;

    transition:
        gap var(--transition);
}

.contact-strip h2 {
    max-width: 780px;

    font-size:
        clamp(2.2rem, 4vw, 3.7rem);

    font-weight: 500;
    line-height: 1.12;
    letter-spacing: -0.04em;

    transition:
        color var(--transition),
        transform var(--transition);
}

/* =========================
   PAGE TOP SPACING
========================= */

.catalog-page,
.contact-page,
.detail-page {
    padding-top: 82px;
}

/* =========================
   PAGE HERO
========================= */

.catalog-hero,
.contact-hero {
    padding: 7rem 0 4rem;

    background: var(--soft);

    transition:
        background-color var(--transition-slow),
        padding var(--transition);
}

.catalog-hero h1 {
    font-size:
        clamp(3rem, 7vw, 5.6rem);

    font-weight: 500;
    line-height: 1.03;
    letter-spacing: -0.055em;

    transition:
        color var(--transition),
        transform var(--transition);
}

.catalog-hero p,
.contact-hero p {
    max-width: 700px;

    margin-top: 1rem;

    color: var(--muted);

    transition:
        color var(--transition),
        transform var(--transition);
}

/* =========================
   CATALOG
========================= */

.catalog-section {
    padding: 4rem 0 8rem;
}

.catalog-toolbar {
    display: flex;
    align-items: end;
    justify-content: space-between;

    gap: 2rem;

    margin-bottom: 1.5rem;

    transition:
        gap var(--transition),
        margin var(--transition);
}

.search-box {
    width: min(100%, 520px);
}

.search-box span {
    display: block;

    margin-bottom: 0.45rem;

    font-size: 0.8rem;
    font-weight: 800;

    transition:
        color var(--transition);
}

/* =========================
   INPUTS
========================= */

.search-box input,
.contact-form input,
.contact-form textarea {
    width: 100%;

    padding: 1rem 1.1rem;

    border:
        1px solid var(--border);

    border-radius: 12px;

    outline: none;

    background: #ffffff;

    transition:
        border-color var(--transition),
        box-shadow var(--transition),
        background-color var(--transition),
        color var(--transition),
        transform var(--transition);
}

.search-box input:hover,
.contact-form input:hover,
.contact-form textarea:hover {
    border-color: #c7bdb2;
}

.search-box input:focus,
.contact-form input:focus,
.contact-form textarea:focus {
    border-color: var(--accent);

    box-shadow:
        0 0 0 4px
        rgba(154, 127, 103, 0.12);

    transform: translateY(-1px);
}

.search-box input::placeholder,
.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: #9a958f;

    transition:
        color var(--transition);
}

.search-box input:focus::placeholder,
.contact-form input:focus::placeholder,
.contact-form textarea:focus::placeholder {
    color: #bbb4ac;
}

/* =========================
   FILTERS
========================= */

.filters {
    display: flex;
    flex-wrap: wrap;

    gap: 0.7rem;

    margin-bottom: 2rem;

    transition:
        gap var(--transition);
}

.filter-button {
    padding: 0.78rem 1.1rem;

    border:
        1px solid var(--border);

    border-radius: 999px;

    background: transparent;

    transform: translateY(0);

    transition:
        background-color var(--transition),
        color var(--transition),
        border-color var(--transition),
        transform var(--transition),
        box-shadow var(--transition);
}

.filter-button:hover,
.filter-button.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #ffffff;

    transform: translateY(-2px);

    box-shadow:
        0 10px 24px
        rgba(111, 89, 71, 0.14);
}

/* =========================
   PRODUCTS
========================= */

.product-image {
    position: relative;

    overflow: hidden;

    aspect-ratio: 4 / 5;
}

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

.product-category {
    position: absolute;
    top: 1rem;
    left: 1rem;

    padding: 0.4rem 0.65rem;

    border-radius: 999px;

    background:
        rgba(25, 25, 23, 0.78);

    color: #ffffff;

    font-size: 0.68rem;

    transform: translateY(0);

    transition:
        background-color var(--transition),
        color var(--transition),
        transform var(--transition);
}

.product-card:hover .product-category {
    transform: translateY(-2px);

    background:
        rgba(25, 25, 23, 0.92);
}

.product-code {
    color: var(--accent) !important;

    font-size: 0.72rem !important;
    font-weight: 800;

    transition:
        color var(--transition);
}

.product-content h2,
.product-content h3 {
    margin: 0.4rem 0;

    font-size: 1.13rem;

    transition:
        color var(--transition),
        transform var(--transition);
}

/* =========================
   PRODUCT ACTIONS
========================= */

.product-actions {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 0.7rem;

    padding:
        0 1.4rem 1.4rem;

    transition:
        gap var(--transition),
        padding var(--transition);
}

.product-actions a {
    padding: 0.8rem;

    border:
        1px solid var(--accent);

    border-radius: 12px;

    text-align: center;

    font-size: 0.8rem;
    font-weight: 800;

    transform: translateY(0);

    transition:
        background-color var(--transition),
        color var(--transition),
        border-color var(--transition),
        transform var(--transition),
        box-shadow var(--transition);
}

.product-actions a:hover {
    transform: translateY(-2px);
}

.product-actions a:first-child {
    color: var(--accent-dark);
}

.product-actions a:first-child:hover {
    background: var(--accent);
    color: #ffffff;

    box-shadow:
        0 10px 25px
        rgba(111, 89, 71, 0.16);
}

.product-actions a:last-child {
    border-color: var(--green);

    background: var(--green);
    color: #ffffff;
}

.product-actions a:last-child:hover {
    background: var(--green-dark);

    box-shadow:
        0 10px 25px
        rgba(88, 109, 92, 0.18);
}

/* =========================
   CONTACT
========================= */

.contact-grid {
    display: grid;

    grid-template-columns:
        0.8fr 1.2fr;

    gap: 4rem;

    padding: 6rem 0;

    transition:
        gap var(--transition);
}

.contact-card {
    padding: 2rem;

    border-radius: var(--radius);

    background: #ffffff;

    box-shadow: var(--shadow);

    transform: translateY(0);

    transition:
        transform var(--transition),
        box-shadow var(--transition),
        background-color var(--transition),
        border-radius var(--transition);
}

.contact-card:hover {
    transform: translateY(-4px);

    box-shadow: var(--shadow-hover);
}

.contact-list {
    display: grid;

    gap: 1.2rem;

    margin-top: 2rem;

    transition:
        gap var(--transition);
}

.contact-list div {
    padding-bottom: 1rem;

    border-bottom:
        1px solid var(--border);

    transform: translateX(0);

    transition:
        border-color var(--transition),
        transform var(--transition);
}

.contact-list div:hover {
    transform: translateX(4px);
    border-color: var(--accent);
}

.contact-list span {
    display: block;

    color: var(--muted);

    font-size: 0.82rem;

    transition:
        color var(--transition);
}

.contact-form {
    display: grid;

    gap: 1rem;

    transition:
        gap var(--transition);
}

.contact-form textarea {
    min-height: 160px;
    resize: vertical;
}

.contact-form button {
    cursor: pointer;
}

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

.map-section {
    padding: 0 0 7rem;
}

.map-heading {
    margin-bottom: 2rem;
}

.map-heading h2 {
    font-size:
        clamp(2rem, 4vw, 3.4rem);

    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -0.04em;

    transition:
        color var(--transition),
        transform var(--transition);
}

.map-heading p {
    max-width: 700px;

    margin-top: 0.8rem;

    color: var(--muted);

    transition:
        color var(--transition);
}

.map-wrapper {
    overflow: hidden;

    border-radius: 24px;

    box-shadow: var(--shadow);

    transform: translateY(0);

    transition:
        transform var(--transition),
        box-shadow var(--transition),
        border-radius var(--transition);
}

.map-wrapper:hover {
    transform: translateY(-5px);

    box-shadow: var(--shadow-hover);
}

.map-wrapper iframe {
    width: 100%;
    height: 540px;

    display: block;

    border: 0;
}

.map-actions {
    margin-top: 1.5rem;
}

/* =========================
   DETAIL
========================= */

.detail-layout {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 4rem;

    align-items: center;

    padding: 6rem 0;

    transition:
        gap var(--transition);
}

.detail-image img {
    border-radius: var(--radius);

    transition:
        border-radius var(--transition),
        transform var(--transition-slow),
        box-shadow var(--transition);
}

.detail-image img:hover {
    transform: scale(1.01);

    box-shadow: var(--shadow);
}

.detail-card {
    padding: 2rem;

    border-radius: var(--radius);

    background: #ffffff;

    box-shadow: var(--shadow);

    transform: translateY(0);

    transition:
        transform var(--transition),
        box-shadow var(--transition),
        background-color var(--transition),
        border-radius var(--transition);
}

.detail-card:hover {
    transform: translateY(-4px);

    box-shadow: var(--shadow-hover);
}

.detail-card h1 {
    margin: 0.5rem 0 1rem;

    font-size:
        clamp(2.5rem, 5vw, 4.6rem);

    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.05em;

    transition:
        color var(--transition),
        transform var(--transition);
}

.detail-card ul {
    margin: 2rem 0;

    padding-left: 1.2rem;
}

/* =========================
   FOOTER
========================= */

.footer {
    width: 100%;
    padding: 3rem 0;

    background: #151513;
    color: rgba(255, 255, 255, 0.7);
}

/* ANA YAPI */

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

    gap: 3rem;
}

/* =========================
   SOL - LOGO
========================= */

.footer-brand {
    flex: 1;

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

    gap: 0.65rem;
}

.footer-logo {
    display: inline-block;

    color: #ffffff;

    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: 0.13em;

    transition:
        color var(--transition),
        transform var(--transition),
        opacity var(--transition);
}

.footer-logo span {
    color: var(--accent);
}

.footer-logo:hover {
    opacity: 0.85;
    transform: translateY(-2px);
}

.footer-brand p {
    margin: 0;

    max-width: 280px;

    color: rgba(255, 255, 255, 0.48);

    font-size: 0.84rem;
    line-height: 1.6;
}

/* =========================
   ORTA - MENÜ
========================= */

.footer-links {
    flex: 1;

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

    gap: 1.6rem;
}

.footer-links a {
    position: relative;

    color: rgba(255, 255, 255, 0.65);

    font-size: 0.86rem;
    font-weight: 600;

    transition:
        color var(--transition),
        transform var(--transition);
}

.footer-links a:hover {
    color: #ffffff;
    transform: translateY(-2px);
}

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

    position: absolute;
    left: 0;
    bottom: -5px;

    width: 0;
    height: 1px;

    background: var(--accent);

    transition: width var(--transition);
}

.footer-links a:hover::after {
    width: 100%;
}

/* =========================
   SAĞ - COPYRIGHT
========================= */

.footer-copyright {
    flex: 1;

    margin: 0;

    text-align: right;

    color: rgba(255, 255, 255, 0.4);

    font-size: 0.8rem;

    white-space: nowrap;
}

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

@media (max-width: 900px) {

    .footer-content {
        flex-wrap: wrap;
    }

    .footer-brand {
        flex: 1 1 45%;
    }

    .footer-links {
        flex: 1 1 45%;

        justify-content: flex-end;
    }

    .footer-copyright {
        flex: 1 1 100%;

        text-align: center;
    }
}

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

@media (max-width: 600px) {

    .footer {
        padding: 2.5rem 0;
    }

    .footer-content {
        flex-direction: column;

        align-items: center;

        gap: 1.5rem;

        text-align: center;
    }

    .footer-brand {
        width: 100%;

        align-items: center;
    }

    .footer-links {
        width: 100%;

        justify-content: center;

        flex-wrap: wrap;

        gap: 1.1rem;
    }

    .footer-copyright {
        width: 100%;

        text-align: center;
    }
}
/* =========================
   WHATSAPP
========================= */

.whatsapp-button {
    position: fixed;
    right: 1.4rem;
    bottom: 1.4rem;

    z-index: 900;

    width: 58px;
    height: 58px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: var(--green);
    color: #ffffff;

    font-weight: 800;

    box-shadow:
        0 12px 28px
        rgba(0, 0, 0, 0.18);

    transform:
        translateY(0)
        scale(1);

    transition:
        background-color var(--transition),
        color var(--transition),
        transform var(--transition),
        box-shadow var(--transition);
}

.whatsapp-button:hover {
    background: var(--green-dark);

    transform:
        translateY(-3px)
        scale(1.03);

    box-shadow:
        0 18px 40px
        rgba(0, 0, 0, 0.22);
}

/* =========================
   REVEAL ANIMATION
========================= */

/*
   JS eklediğinde .visible sınıfı verilecek.
   JS olmasa bile içerikler görünür kalır.
*/

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

.js .reveal {
    opacity: 0;

    transform: translateY(22px);

    transition:
        opacity var(--transition-slow),
        transform var(--transition-slow);
}

.js .reveal.visible,
.js .hero .reveal,
.js .catalog-hero .reveal,
.js .contact-hero .reveal {
    opacity: 1;

    transform: translateY(0);
}

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

@media (max-width: 900px) {
    .header {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;

        background: #ffffff;
    }

    .navbar {
        min-height: 70px;
    }

    .header.scrolled .navbar {
        min-height: 64px;
    }

    .menu-button {
        display: block;
    }

    .nav-menu {
        position: fixed;
        top: 70px;
        right: 0;
        left: auto;

        width: 46vw;
        max-width: 300px;
        height: calc(100dvh - 70px);

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

        gap: 0;

        max-height: none;

        padding: 1rem;

        overflow-x: hidden;
        overflow-y: auto;

        opacity: 0;
        visibility: hidden;
        pointer-events: none;

        transform: translateX(105%);

        background: var(--bg);

        border-left: 1px solid var(--border);
        box-shadow: -18px 18px 42px rgba(47, 39, 33, 0.12);

        transition:
            opacity var(--transition-fast),
            visibility var(--transition-fast),
            transform var(--transition);
    }

    .nav-menu.active {
        padding: 1rem;

        opacity: 1;
        visibility: visible;
        pointer-events: auto;

        transform: translateX(0);
    }

    .nav-menu a {
        padding: 0.9rem 0;

        opacity: 0;

        transform: translateX(8px);

        transition:
            color var(--transition),
            background-color var(--transition),
            transform var(--transition),
            opacity var(--transition);
    }

    .nav-menu.active a {
        opacity: 1;

        transform: translateX(0);
    }

    .nav-menu.active a:nth-child(1) {
        transition-delay: 0.04s;
    }

    .nav-menu.active a:nth-child(2) {
        transition-delay: 0.08s;
    }

    .nav-menu.active a:nth-child(3) {
        transition-delay: 0.12s;
    }

    .nav-menu.active a:nth-child(4) {
        transition-delay: 0.16s;
    }

    .nav-menu.active a:nth-child(5) {
        transition-delay: 0.20s;
    }

    .nav-menu.active a:nth-child(6) {
        transition-delay: 0.24s;
    }

    .nav-contact {
        margin-top: 0.5rem;

        text-align: center;
    }

    .section-heading,
    .contact-grid,
    .detail-layout {
        grid-template-columns: 1fr;

        gap: 2rem;
    }

    .services-grid,
    .featured-products,
    .products-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

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

        grid-template-rows:
            420px 320px;
    }

    .project:first-child {
        grid-column: span 2;
        grid-row: auto;
    }

    .contact-strip .container,
    .footer-content {
        flex-direction: column;

        align-items: flex-start;
    }

    .hero {
        min-height: 100vh;
        min-height: 100svh;

        background-color: #6d5a4b;
    }
}

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

@media (max-width: 600px) {
    .hero h1 {
        font-size: 3rem;
    }

    .actions {
        flex-direction: column;
    }

    .button {
        width: 100%;
    }

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

    .section {
        padding: 5rem 0;
    }

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

        grid-template-rows:
            repeat(3, 330px);
    }

    .project:first-child {
        grid-column: auto;
    }

    .catalog-toolbar {
        flex-direction: column;

        align-items: stretch;
    }

    .filters {
        flex-wrap: nowrap;

        overflow-x: auto;

        padding-bottom: 0.4rem;

        scroll-behavior: smooth;
    }

    .filter-button {
        flex-shrink: 0;
    }

    .map-wrapper iframe {
        height: 420px;
    }

    .footer-links {
        flex-wrap: wrap;
    }
}

/* =========================
   CONTACT PAGE LAYOUT
========================= */

.contact-layout-section {
    padding: 6rem 0 7rem;
}

.contact-layout {
    display: grid;
    grid-template-columns: minmax(340px, 430px) minmax(0, 1fr);
    gap: 2rem;
    align-items: stretch;
}

/* =========================
   CONTACT INFORMATION CARD
========================= */

.contact-main-card {
    height: 100%;

    display: flex;
    flex-direction: column;

    padding: 2rem;

    border-radius: var(--radius);

    background: var(--surface);

    box-shadow: var(--shadow);

    transform: translateY(0);

    transition:
        transform var(--transition),
        box-shadow var(--transition),
        background-color var(--transition),
        border-radius var(--transition);
}

.contact-main-card:hover {
    transform: translateY(-5px);

    box-shadow: var(--shadow-hover);
}

.contact-card-image {
    width: 100%;
    height: 280px;

    object-fit: cover;

    border-radius: 14px;

    transition:
        transform var(--transition-slow),
        border-radius var(--transition),
        filter var(--transition-slow);
}

.contact-main-card:hover .contact-card-image {
    transform: scale(1.01);
}

.contact-main-card .contact-list {
    flex: 1;
}

/* =========================
   CONTACT LIST
========================= */

.contact-list {
    display: grid;
    gap: 1.2rem;

    margin-top: 2rem;

    transition:
        gap var(--transition);
}

.contact-list div {
    padding-bottom: 1rem;

    border-bottom: 1px solid var(--border);

    transform: translateX(0);

    transition:
        border-color var(--transition),
        transform var(--transition);
}

.contact-list div:hover {
    transform: translateX(4px);

    border-color: var(--accent);
}

.contact-list span {
    display: block;

    margin-bottom: 0.25rem;

    color: var(--muted);

    font-size: 0.82rem;

    transition:
        color var(--transition);
}

.contact-list strong {
    display: block;

    color: var(--text);

    line-height: 1.55;

    transition:
        color var(--transition);
}

.contact-list a {
    display: inline-block;

    color: var(--text);

    transition:
        color var(--transition),
        transform var(--transition);
}

.contact-list a:hover {
    color: var(--green-dark);

    transform: translateX(3px);
}

/* =========================
   CONTACT ACTIONS
========================= */

.contact-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.8rem;

    margin-top: 2rem;

    transition:
        gap var(--transition);
}

.contact-actions .button {
    width: 100%;
    min-width: 0;

    padding-inline: 1rem;
}

/* Ara butonu tema renginde kalır */

.button-call {
    border-color: var(--accent);

    background: var(--accent);
    color: #ffffff;

    box-shadow:
        0 12px 30px
        rgba(111, 89, 71, 0.18);

    transition:
        background-color var(--transition),
        border-color var(--transition),
        color var(--transition),
        transform var(--transition),
        box-shadow var(--transition);
}

.button-call:hover {
    border-color: var(--accent-dark);

    background: var(--accent-dark);

    transform:
        translateY(-3px)
        scale(1.01);

    box-shadow:
        0 18px 40px
        rgba(111, 89, 71, 0.24);
}

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

.map-card {
    height: 100%;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    border-radius: var(--radius);

    background: var(--surface);

    box-shadow: var(--shadow);

    transform: translateY(0);

    transition:
        transform var(--transition),
        box-shadow var(--transition),
        border-radius var(--transition),
        background-color var(--transition);
}

.map-card:hover {
    transform: translateY(-5px);

    box-shadow: var(--shadow-hover);
}

.map-card-heading {
    padding: 1.8rem 1.8rem 1.5rem;
}

.map-card-heading h2 {
    font-size:
        clamp(1.8rem, 3vw, 2.8rem);

    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -0.04em;

    transition:
        color var(--transition),
        transform var(--transition);
}

.map-card-heading p:last-child {
    max-width: 620px;

    margin-top: 0.8rem;

    color: var(--muted);

    transition:
        color var(--transition);
}

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

.map-card .map-wrapper {
    flex: 1;

    min-height: 430px;

    overflow: hidden;

    border-radius: 0;

    box-shadow: none;

    transform: none;

    transition:
        filter var(--transition-slow);
}

.map-card .map-wrapper:hover {
    transform: none;

    box-shadow: none;
}

.map-card .map-wrapper iframe {
    width: 100%;
    height: 100%;
    min-height: 430px;

    display: block;

    border: 0;
}

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

.map-card .map-actions {
    margin: 0;

    padding: 1.3rem 1.8rem 1.8rem;

    background: var(--surface);
}

.map-card .map-actions .button {
    width: 100%;
}

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

@media (max-width: 950px) {
    .contact-layout {
        grid-template-columns: 1fr;
    }

    .contact-main-card,
    .map-card {
        height: auto;
    }

    .contact-card-image {
        height: 340px;
    }

    .map-card .map-wrapper,
    .map-card .map-wrapper iframe {
        min-height: 430px;
    }
}

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

@media (max-width: 600px) {
    .contact-layout-section {
        padding: 4rem 0 5rem;
    }

    .contact-layout {
        gap: 1.4rem;
    }

    .contact-main-card {
        padding: 1.3rem;
    }

    .contact-card-image {
        height: 240px;
    }

    .contact-actions {
        grid-template-columns: 1fr 1fr;
        gap: 0.7rem;
    }

    .contact-actions .button {
        padding-inline: 0.6rem;

        font-size: 0.8rem;
    }

    .map-card-heading {
        padding: 1.4rem;
    }

    .map-card .map-wrapper,
    .map-card .map-wrapper iframe {
        min-height: 360px;
    }

    .map-card .map-actions {
        padding: 1.2rem 1.4rem 1.4rem;
    }
}

@media (max-width: 380px) {
    .contact-actions {
        grid-template-columns: 1fr;
    }
}


/* PDF katalog kartları — mevcut katalog tasarım diline ek */
.pdf-catalogs{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;margin-bottom:2.5rem}.pdf-catalog-card{overflow:hidden;border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow);transition:transform var(--transition),box-shadow var(--transition)}.pdf-catalog-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-hover)}.pdf-catalog-preview{display:grid;grid-template-columns:1fr 1fr;aspect-ratio:16/10;overflow:hidden;background:#eee9e3}.pdf-catalog-preview img{width:100%;height:100%;object-fit:cover;min-width:0;transition:transform var(--transition-slow)}.pdf-catalog-card:hover .pdf-catalog-preview img{transform:scale(1.035)}.pdf-catalog-content{padding:1.45rem}.pdf-catalog-content h2{margin:.35rem 0 .5rem;font-size:1.35rem}.pdf-catalog-content>p:not(.product-code){color:var(--muted);font-size:.9rem}.pdf-catalog-button{width:100%;margin-top:1rem;padding:.9rem 1rem;border:1px solid var(--accent);border-radius:10px;background:var(--accent);color:#fff;font-weight:800;cursor:pointer;transition:transform var(--transition),background-color var(--transition),box-shadow var(--transition)}.pdf-catalog-button:hover{transform:translateY(-2px);background:var(--accent-dark);box-shadow:0 10px 24px rgba(111,89,71,.14)}.pdf-catalog-button:disabled{opacity:.65;cursor:wait}.product-image img{width:100%}
@media(max-width:1100px){.pdf-catalogs{grid-template-columns:1fr 1fr}}@media(max-width:640px){.pdf-catalogs{grid-template-columns:1fr}.pdf-catalog-preview{aspect-ratio:16/9}}


/* =========================
   ÖRNEK İŞLER - BOŞ GÖRSEL ALANLARI
========================= */
.work-placeholder-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
}

.work-placeholder-card {
    min-width: 0;
}

.work-placeholder-frame {
    aspect-ratio: 4 / 3;
    display: grid;
    place-items: center;
    border: 1px dashed rgba(111, 89, 71, 0.32);
    border-radius: var(--radius);
    background: linear-gradient(145deg, rgba(255,255,255,.56), rgba(235,228,220,.48));
    overflow: hidden;
    transition: border-color var(--transition), transform var(--transition), background-color var(--transition);
}

.work-placeholder-frame span {
    color: var(--text-muted);
    font-size: 0.84rem;
    font-weight: 600;
    letter-spacing: .01em;
}

.work-placeholder-card:hover .work-placeholder-frame {
    transform: translateY(-2px);
    border-color: rgba(111, 89, 71, 0.52);
}

.work-placeholder-frame img,
.work-placeholder-card > img {
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    border-radius: var(--radius);
}

.product-image img.product-image-unavailable,
.detail-image img.product-image-unavailable {
    visibility: hidden;
}

@media (max-width: 900px) {
    .work-placeholder-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
    }
}

@media (max-width: 520px) {
    .work-placeholder-grid {
        grid-template-columns: 1fr;
    }

    .nav-menu {
        width: 46vw;
        max-width: 280px;
    }

    .nav-menu a {
        font-size: .88rem;
    }
}

/* =========================
   ÖRNEK İŞLER - GÖRSEL BÜYÜTME
========================= */
.work-placeholder-card img {
    cursor: zoom-in;
    -webkit-tap-highlight-color: transparent;
}

.work-placeholder-card img:focus-visible {
    outline: 3px solid rgba(111, 89, 71, .42);
    outline-offset: 4px;
}

body.work-lightbox-open {
    overflow: hidden;
}

.work-lightbox {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(20, 18, 16, .88);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--transition), visibility var(--transition);
}

.work-lightbox.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.work-lightbox-stage {
    width: min(1180px, 94vw);
    height: min(86dvh, 920px);
    display: grid;
    place-items: center;
}

.work-lightbox-image {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 14px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .32);
    transform: scale(.975);
    transition: transform var(--transition);
    touch-action: pinch-zoom;
}

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

.work-lightbox-close {
    position: fixed;
    top: max(14px, env(safe-area-inset-top));
    right: max(14px, env(safe-area-inset-right));
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 50%;
    background: rgba(255,255,255,.12);
    color: #fff;
    font: 400 34px/1 Arial, sans-serif;
    cursor: pointer;
    z-index: 1;
    transition: background-color var(--transition), transform var(--transition);
}

.work-lightbox-close:hover,
.work-lightbox-close:focus-visible {
    background: rgba(255,255,255,.22);
    transform: scale(1.04);
    outline: none;
}

@media (max-width: 600px) {
    .work-lightbox {
        padding: 14px;
    }

    .work-lightbox-stage {
        width: 100%;
        height: 88dvh;
    }

    .work-lightbox-image {
        max-width: 100%;
        max-height: 88dvh;
        border-radius: 10px;
    }

    .work-lightbox-close {
        width: 42px;
        height: 42px;
        font-size: 30px;
    }
}