body {
        background: linear-gradient(to top right,
        #f2e0af 0%,
        #FFFFFF 50%,
        #989898 100%
    );
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100vw;
    overflow-x: hidden;
}

.navbar-custom {
    background-color: white;
    padding: 0;
}

.navbar-buttonarea {
    background-image: url("assets/nav.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 80px;
}

.in-button {
    position: relative;
    padding: 4px 12px;
    text-decoration: none;
    color: #e8e8e8;
    font-weight: bold;
    font-family: Arial, sans-serif;
    cursor: pointer;
	font-size: 22px;
    transition: all 0.3s ease;
}

.tr-button,
.eng-button {
    position: relative;
    padding: 2px 10px;
    text-decoration: none;
    color: white;
    font-size: 1.2rem;
    font-weight: 300;
    font-family: Arial, sans-serif;
    cursor: pointer;
    transition: all 0.3s ease;
    background-color: rgba(255, 255, 255, 0);
    border-radius: 15px;
}

.active {
    background-color: #fab900;
    color: #3f4d5b;
}

.lang-buttons {
    display: flex;
    padding: 3px;
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.514);
    box-shadow: 0 2px 5px var(--shadow-color);
    border-radius: 20px;
}

.in-button:hover {
	background-color: rgba(255, 255, 255, 0.2);
	border-color: #ffffff;
}

@media (max-width: 1200px) {
    .logo {
        height: 65px;
        width: 38%;
    }

    .image-next {
        height: 80px;
        width: 62%;
    }

    .nav-buttons {
        right: 15px;
        gap: 15px;
    }

    .in-button,
    .tr-button,
    .eng-button {
        font-size: 18px;
        padding: 6px 12px;
    }
}

@media (max-width: 768px) {
    .navbar-custom .container-fluid {
        flex-direction: column;
        align-items: center;
    }

    .logo {
        height: 60px;
        width: 100%;
        margin-bottom: 10px;
        padding-left: 0;
    }

    .image-next {
        height: 70px;
        width: 100%;
        max-width: 500px;
        order: 2;
        padding-right: 0;
    }

    .nav-buttons {
        position: static;
        transform: none;
        order: 3;
        margin-top: 15px;
        justify-content: center;
        right: auto;
    }

    .in-button,
    .tr-button,
    .eng-button {
        font-size: 16px;
        padding: 6px 12px;
    }

    .microgreens {
        margin-top: 50px !important;
    }

    .plantdry {
        margin-top: 30px !important;
    }

    .endemik {
        margin-top: 30px !important;
    }

    .biyoaktif {
        margin-top: 30px !important;
    }

    .custom-img-5 {
        border-left: 3px solid #333 !important;
    }
}

@media (max-width: 576px) {
    .navbar-custom {
        padding: 0.25rem 0;
    }

    .logo {
        height: 50px;
    }

    .image-next {
        height: 60px;
        max-width: 400px;
    }

    .nav-buttons {
        gap: 12px;
    }

    .in-button,
    .tr-button,
    .eng-button {
        font-size: 14px;
        padding: 5px 10px;
    }
}

p {
    color: #3f4d5b;
}

.sari {
    color: #fbb900;
    font-weight: bold;
}

.fs-xl {
    font-size: 80px;
}

.circle-img {
    width: 250px;
    height: 250px;
    object-fit: cover;
    margin: 20px auto;
    display: block;
}

.img-text {
    text-align: center;
    margin-top: 5px;
    font-weight: bold;
    color: #3f4d5b;
    font-size: 14px;
}

.fs-x {
    color: #3f4d5b;
    font-size: 90px;
}

.pt-l {
    padding-top: 160px;
}

.resim {
    width: 175px;
    height: 175px;
    border: 4px solid #e8e8e8;
    border-radius: 2px;
}

.px {
    padding-left: 55px;
}

.photo-row {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 25px;
}

.custom-img-1 {
    width: 20%;
    /* 5 resim için 100 / 5 = 20% */
    height: 250px;
    object-fit: cover;
    border: 3px solid #333;
}

.custom-img-2 {
    width: 20%;
    /* 5 resim için 100 / 5 = 20% */
    height: 250px;
    object-fit: cover;
    border: 3px solid #333;
    border-left: 0px solid black !important;
}

/* Farklı boyutlar için örnek */
.custom-img-3 {
    width: 20%;
    /* 5 resim için 100 / 5 = 20% */
    height: 250px;
    object-fit: cover;
    border: 3px solid #333;
    border-left: 0px solid black !important;
}

.custom-img-4 {
    width: 20%;
    /* 5 resim için 100 / 5 = 20% */
    height: 250px;
    object-fit: cover;
    border: 3px solid #333;
    border-left: 0px solid black !important;
}

.custom-img-5 {
    width: 20%;
    /* 5 resim için 100 / 5 = 20% */
    height: 250px;
    object-fit: cover;
    border: 3px solid #333;
    border-left: 0px solid black;
}

.link {
    color: #3f4d5bb7;
}

.table1 {
    width: 1050px !important;   /* PC için ölçü */
  max-width: 100% !important;
  height: auto !important;
  display: block;
  margin: 0 auto;
}


.table {
    width: 1100px !important;
    margin: 0 auto; /* tabloyu yatayda ortalar */
    padding: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap;
    box-sizing: border-box;
}


.tesekkurler-grup {
    background-color: rgba(255, 255, 255, 0.4);
    padding-top: 200px;
    padding: 30px;
    margin: 20px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap;
    border-top: 2px solid white;
    border-bottom: 2px solid white;
    margin-top: 50px;
}

.tesekkurler-grup img {
    max-height: 100px;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.tesekkurler-grup-1 {
    background-color: rgba(255, 255, 255, 0.4);
    padding: 20px;
    margin: 20px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap;
    border-top: 2px solid white;
    border-bottom: 2px solid white;
    margin-top: 100px;
}

.tesekkurler-grup-1 img {
    max-height: 80px;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.tesekkur {
    font-size: 70px;
    padding-top: 110px;
}

.footer {
    display: flex;
    align-items: center;
    background-color: #ffffff;
    border-bottom: 7px solid white;
    border-top: 7px solid white;
    position: relative;
}

.footer-buttonarea {
    padding-left: 150px !important;
}

.text {
    padding-left: 88px;
    padding-right: 88px;
}

.carouselimg {
    border: 3px solid #333;
}

footer {
    background-color: white;
    border: 7px solid white;
}

.shadow-custom {
  box-shadow: 0 15px 30px rgba(0,0,0,0.6);  /* altta geniş yayılım */
}

/* Responsive and mobile-friendly adjustments */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

.navbar-custom, footer {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

.navbar-buttonarea {
    min-height: auto;
    padding: 0.25rem 0.5rem;
    background-size: contain;
}

#about .translate-middle-x {
    margin-top: 40px !important;
    margin-left: 0 !important;
    transform: none !important;
}

.fs-xl { font-size: clamp(28px, 6vw, 80px); }
.fs-x  { font-size: clamp(28px, 7vw, 90px); }
.tesekkur { font-size: clamp(24px, 6vw, 70px); }

.pt-l { padding-top: 40px; }

.table img, #table img, .shadow-custom, .carouselimg {
    width: 100% !important;
    height: auto !important;
    max-width: 100%;
}

.resim {
    display: block;
    margin: 0 auto;
    width: 200px;
    height: auto;
}

.custom-img-1, .custom-img-2, .custom-img-3, .custom-img-4, .custom-img-5 {
    width: 20%;
    height: 250px;
}

@media (max-width: 992px) {
    .custom-img-1, .custom-img-2, .custom-img-3, .custom-img-4, .custom-img-5 {
        width: 32%;
        height: auto;
        margin-bottom: 12px;
    }

    /* medium screens: slightly smaller logos */
    .resim { width: 140px; }
}

@media (max-width: 576px) {
    .navbar-buttonarea { background-size: cover; padding: 6px; }
    .navbar-custom .container-fluid { padding: 0 8px; }
    .logo { height: 48px; width: auto; margin-bottom: 6px; }

    

    .fs-xl, .fs-x, .tesekkur { text-align: center; } 
    .fs-xl { font-size: 32px; }
    .fs-x { font-size: 32px; }
    .pt-l { padding-top: 30px; }

    .circle-img { width: 110px; height: 110px; margin: 10px auto; }

    .img-text { font-size: 13px; }

    .photo-row { flex-wrap: wrap; }
    .custom-img-1, .custom-img-2, .custom-img-3, .custom-img-4, .custom-img-5 {
        flex: 1 1 50%;  /* tablet için 2 yan yana */
    max-width: 50%;
    height: 150px;  /* boyunu küçültebilirsin */
    }


    /* small screens: reduce logo size so layout stays clean */
    .resim { width: 110px; }

    section[id] { margin-top: 40px !important; }

    footer .navbar-buttonarea { padding: 8px 6px; }
    /* slightly tighter paddings on very small screens so text can fit */
    .text { padding-left: 12px; padding-right: 12px; }

    /* Footer-specific stacking rules to avoid overlapping */
    footer .navbar-buttonarea .row {
        height: auto !important;
        flex-direction: column !important;
        align-items: center;
        gap: 6px;
        padding: 8px 0;
    }

    footer .navbar-buttonarea .row > div {
        width: 100% !important;
        padding: 4px 8px;
        box-sizing: border-box;
        text-align: center;
    }

    /* Make footer text wrap nicely and use a slightly smaller line-height
       so the same content fits on one/two lines instead of overflowing. */
    footer .navbar-buttonarea p,
    footer .navbar-buttonarea a {
        color: white !important; /* keep original color choice */
        font-size: 12px;         /* smaller so it fits */
        line-height: 1.15;      /* tighter leading */
        margin: 0;
        word-break: break-word;
        white-space: normal;
        overflow-wrap: anywhere;
        max-width: 100%;
    }

    /* Reduce icon size in footer so it doesn't push text */
    footer .navbar-buttonarea img.icon {
        width: 22px;
        height: auto;
        vertical-align: middle;
    }

    footer .navbar-buttonarea .col-2 {
        display: none !important;
    }

    /* Re-enable LinkedIn on mobile and pin its button to the right edge of
       the footer area. Keep the address column hidden. */
    footer .navbar-buttonarea .row > .col:nth-child(2) {
        /* ensure the column is available for layout if needed */
        display: block !important;
        width: auto !important;
        padding: 0 !important;
    }

    footer .navbar-buttonarea .row > .col-3:last-child {
        /* Address column (Teknopark İstanbul ...) */
        display: none !important;
    }

    /* Make the navbar-buttonarea a positioning context and pin the LinkedIn
       anchor (.in-button) to the right so email remains left-aligned. */
    footer .navbar-buttonarea {
        position: relative;
    }

    footer .navbar-buttonarea .in-button {
        position: absolute !important;
        right: 12px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 4px 8px !important;
    }

    /* Stack the footer's left brand column above the navbar area on small screens
       so 'GROWING SOON' appears first and the email block (inside navbar area)
       comes right after. This only affects footer layout. */
    footer > .container-fluid > .row.w-100 {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    footer > .container-fluid > .row.w-100 > .col-3.bg-white {
        order: 0;
        width: 100% !important;
        padding: 8px 12px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: transparent; /* keep original look */
    }

    footer > .container-fluid > .row.w-100 > .col-9.navbar-buttonarea {
        order: 1;
        width: 100% !important;
        padding: 6px 12px;
    }

    /* Make sure the brand text is centered and doesn't overflow */
    footer .navbar-brand .fw-bold {
        margin: 0;
        text-align: center;
        font-size: 1.4rem;
        white-space: pre-line;
    }

    /* Slight spacing so the email block sits visibly under the brand */
    footer .navbar-buttonarea .row > .col-3 {
        margin-top: 6px;
    }

    /* Align the email column to the left on small screens. This targets the
       first .col-3 inside the footer's inner row (the email block) and keeps
       other footer elements unchanged. */
    footer .navbar-buttonarea .row > .col-3:first-child {
        text-align: left !important;
        padding-left: 12px !important;
        display: flex !important;
        justify-content: flex-start !important;
        align-items: center !important;
    }

    footer .navbar-buttonarea .row > .col-3:first-child p,
    footer .navbar-buttonarea .row > .col-3:first-child a {
        margin: 0;
        padding: 0;
        display: inline-block;
    }

    footer .navbar-buttonarea .row > .col-3:first-child .bi {
        margin-right: 8px; /* small gap between icon and email */
    }

    /* Typography tweaks: adjust sizes on mobile only.
       - Email text increased so it reads comfortably.
       - GROWING SOON reduced so it doesn't dominate the footer. */
    footer .navbar-buttonarea .row > .col-3 p,
    footer .navbar-buttonarea .row > .col-3 p a {
        font-size: 14px !important; /* a bit larger for readability */
        line-height: 1.2;
        margin: 0;
    }

    footer .navbar-brand .fw-bold {
        font-size: 1rem !important; /* smaller headline on mobile */
    }

    /* Mobile-specific header background image - applies only to the
       header navbar area (not footer). */
    .navbar-custom .navbar-buttonarea {
        background-image: url("assets/navmobil.jpg") !important;
        background-size: cover !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
    }

        /* Pin the header LinkedIn button to the left edge on mobile; this
           targets the navbar header area specifically so footer buttons
           remain unaffected. */
        .navbar-custom .navbar-buttonarea {
            position: relative !important;
        }

        .navbar-custom .navbar-buttonarea .in-button {
            position: absolute !important;
            left: 12px !important;
            top: 50% !important;
            transform: translateY(-50%) !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            padding: 4px 8px !important;
        }

        /* Header-specific mobile adjustments: further shrink the header
           background area and make the logo larger for better presence on
           small screens. Scoped to the nav element only so footer remains
           unchanged. */
        nav.navbar-custom .navbar-buttonarea {
            min-height: 40px !important;
            background-position: center top !important;
            max-width: 60% !important; /* shrink right area */
            flex: 0 0 60% !important;
        }

        /* Make the logo column take the remaining space (approx 40%) */
        nav.navbar-custom > .container-fluid > .row > .col-3.bg-white {
            flex: 0 0 40% !important;
            max-width: 40% !important;
            padding-right: 20px !important; /* separation */
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* Align the inner header row to center and set a compact height */
        nav.navbar-custom .navbar-buttonarea .container .row {
            height: 40px !important;
            align-items: center !important;
        }

        /* Make header logo larger on mobile */
        nav.navbar-custom .navbar-brand img {
            max-height: 220px !important; /* larger than before */
            width: auto !important;
            height: auto !important;
            display: block;
        }
}