:root {
    --surface-container-lowest: #ffffff;
    --on-surface: #1a1c1c;
    --primary: #7b5800;
    --on-primary: #ffffff;
    --surface-container-low: #f3f3f4;
    --on-surface-variant: #504532;
    --background: #f9f9f9;
    --surface-container: #eeeeee;
    --on-secondary: #ffffff;
    --font-montserrat: 'Montserrat', sans-serif;
}

body {
    background-color: var(--surface-container-lowest);
    color: var(--on-surface);
    font-family: var(--font-montserrat);
    -webkit-font-smoothing: antialiased;
}
a{
  text-decoration: none!important;
}
/* Typography Custom Classes */
.text-headline-md { font-size: 24px; line-height: 32px; font-weight: 700; }
.text-display-lg { font-size: 64px; line-height: 72px; letter-spacing: -0.02em; font-weight: 700; }
.text-display-lg-mobile { font-size: 40px; line-height: 48px; letter-spacing: -0.01em; font-weight: 700; }
.text-label-lg { font-size: 14px; line-height: 20px; letter-spacing: 0.05em; font-weight: 600; }
.text-label-sm { font-size: 12px; line-height: 16px; letter-spacing: 0.02em; font-weight: 500; }
.text-body-lg { font-size: 18px; line-height: 28px; font-weight: 400; }
.text-body-md { font-size: 16px; line-height: 24px; font-weight: 400; }

/* Custom Colors & Utilities */
.text-primary { color: var(--primary) !important; }
.bg-primary { background-color: var(--primary) !important; }
.text-on-surface { color: var(--on-surface) !important; }
.text-on-surface-variant { color: var(--on-surface-variant) !important; }
.text-on-secondary { color: var(--on-secondary) !important; }
.bg-surface-container-low { background-color: var(--surface-container-low) !important; }
.bg-background { background-color: var(--background) !important; }
.section-padding { padding: 120px 0; }

/* Navbar */
.udm-navbar { 
    border-bottom: 1px solid rgba(26, 28, 28, 0.1); 
    padding: 0.5rem 0; 
    background: var(--surface-container-lowest); 
    transition: 0.3s;
}
.nav-link { 
    color: var(--on-surface); 
    text-transform: uppercase; 
    padding: 0.5rem 0 !important; 
    margin: 0 1rem; 
    transition: color 0.3s; 
}
.nav-link:hover, .nav-link.active { color: var(--primary); }
.nav-link.active { border-bottom: 2px solid var(--primary); }

/* Buttons */
.btn-udm-primary { 
    background-color: var(--on-surface); 
    color: var(--on-primary); 
    padding: 0.75rem 1.5rem; 
    text-transform: uppercase; 
    font-weight: 600; 
    border: none; 
    border-radius: 0; 
    transition: 0.3s; 
}
.btn-udm-primary:hover { background-color: var(--primary); color: var(--on-primary); }
.btn-udm-outline { 
    background-color: transparent; 
    border: 1px solid var(--on-surface); 
    color: var(--on-surface); 
    padding: 0.75rem 1.5rem; 
    text-transform: uppercase; 
    font-weight: 600; 
    border-radius: 0; 
    transition: 0.3s; 
}
.btn-udm-outline:hover { background-color: var(--surface-container); color: var(--on-surface); }

/* Hero Section */
.hero-section { position: relative; height: 90vh; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: 1; }
.image-overlay-light { position: absolute; inset: 0; z-index: 2; background: linear-gradient(to top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.4) 100%); }
.hero-content { position: relative; z-index: 3; }

/* Bento Grid */
.bento-cell { 
    position: relative; 
    overflow: hidden; 
    background-color: var(--surface-container-low); 
    border: 1px solid rgba(26, 28, 28, 0.05); 
    transition: border-color 0.3s; 
}
.bento-cell:hover { border-color: rgba(123, 88, 0, 0.5); }
.bento-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s ease-in-out; }
.bento-cell:hover .bento-img { transform: scale(1.05); }
/* main.css - Eklemeler */
.project-card { position: relative; overflow: hidden; display: block; background-color: var(--surface-container-low); }
.project-card img { transition: transform 0.7s ease-in-out; object-fit: cover; width: 100%; height: 100%; }
.project-card:hover img { transform: scale(1.05); }
.project-overlay {
    position: absolute; inset: 0; background-color: rgba(26, 28, 28, 0.4);
    opacity: 0; transition: opacity 0.5s ease-in-out;
    display: flex; flex-direction: column; justify-content: flex-end; padding: 2rem;
}
.project-card:hover .project-overlay { opacity: 1; }

/* =========================================
   Portfolio Grid
========================================= */

.portfolio-container{
    display:grid;
    grid-template-columns:repeat(12,minmax(0,1fr));
    gap:24px;
}

.portfolio-item{
    opacity:0;
    transform:translateY(40px);
    transition:
        opacity .55s ease,
        transform .55s cubic-bezier(.22,.61,.36,1);
    will-change:transform,opacity;
}

.portfolio-item.show{
    opacity:1;
    transform:translateY(0);
}

.portfolio-item.hide{
    opacity:0;
    transform:translateY(25px);
}

.portfolio-item.layout-wide{
    grid-column:span 8;
}

.portfolio-item.layout-small{
    grid-column:span 4;
}

.portfolio-item.layout-half{
    grid-column:span 6;
}

.portfolio-item.layout-full{
    grid-column:span 12;
}

.project-card{
    position:relative;
    display:block;
    overflow:hidden;
    width:100%;
    border-radius:8px;
}

.portfolio-item.layout-wide .project-card{
    height:500px;
}

.portfolio-item.layout-small .project-card{
    height:500px;
}

.portfolio-item.layout-half .project-card{
    height:400px;
}

.portfolio-item.layout-full .project-card{
    height:450px;
}

.project-card img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .7s ease;
}

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

.project-overlay{
    position:absolute;
    inset:0;
    background:rgba(26,28,28,.45);
    opacity:0;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding:2rem;
    transition:.35s;
}

.project-card:hover .project-overlay{
    opacity:1;
}

.service-card { transition: all 0.5s; border-color: rgba(26, 28, 28, 0.1); }
.service-card:hover { background-color: var(--surface-container-low); border-color: var(--primary); }
.service-icon-wrapper { transition: border-color 0.3s; }
.service-card:hover .service-icon-wrapper { border-color: var(--primary); }
.service-divider { transition: background-color 0.3s; }
.service-card:hover .service-divider { background-color: rgba(123, 88, 0, 0.2); }

.img-grayscale { filter: grayscale(100%); transition: filter 0.7s ease-in-out; }
.img-grayscale-hover:hover .img-grayscale { filter: grayscale(0%); }

/* Contact Form 7 - UDM Premium Styles */
.udm-contact-form input[type="text"],
.udm-contact-form input[type="email"],
.udm-contact-form input[type="tel"],
.udm-contact-form textarea {
    width: 100%;
    background-color: var(--surface-container-low);
    border: 1px solid rgba(26, 28, 28, 0.1);
    color: var(--on-surface);
    padding: 1rem 1.25rem;
    font-size: 16px;
    border-radius: 4px;
    transition: all 0.3s;
    margin-bottom: 1rem;
    outline: none;
}

.udm-contact-form input:focus,
.udm-contact-form textarea:focus {
    background-color: var(--surface-container-lowest);
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(123, 88, 0, 0.1);
}

.udm-contact-form input[type="submit"] {
    background-color: var(--on-surface);
    color: var(--on-primary);
    padding: 1rem 2rem;
    border: none;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all 0.3s;
    border-radius: 0;
    width: auto;
}

.udm-contact-form input[type="submit"]:hover {
    background-color: var(--primary);
}

.wpcf7-not-valid-tip {
    color: #ba1a1a !important; /* Theme error color */
    font-size: 12px;
    margin-top: -10px;
    margin-bottom: 10px;
}


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

.project-gallery{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
}

.gallery-item{
    display:block;
    position:relative;
    overflow:hidden;
    aspect-ratio:1/1;
    border-radius:8px;
}

.gallery-item img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:transform .6s ease;
}

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

@media(max-width:991px){
    .project-gallery{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:576px){
    .project-gallery{
        grid-template-columns:1fr;
    }
}

/* ======================================================
Project Navigation
====================================================== */

.project-nav-card{

    display:block;

    padding:40px;

    border:1px solid rgba(26,28,28,.08);

    transition:.35s;

    color:inherit;

    height:100%;

    background:#fff;

}

.project-nav-card:hover{

    border-color:var(--primary);

    transform:translateY(-4px);

}

.project-nav-label{

    display:block;

    text-transform:uppercase;

    font-size:12px;

    letter-spacing:.12em;

    color:var(--primary);

    margin-bottom:14px;

}

.project-nav-card h3{

    margin:0;

    font-size:30px;

    line-height:1.3;

    color:var(--on-surface);

}

/* Mobile */

@media(max-width:768px){

    .project-nav-card{

        padding:30px;

        text-align:left !important;

    }

}