/* Reset & Base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    color: #333;
    line-height: 1.6;
    background-color: #fff;
}

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

ul {
    list-style: none;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Header */
.site-header {
    background-color: #fff;
    padding: 15px 0;
    border-bottom: 1px solid #eee; /* Optional */
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Navigation */
.main-nav {
    display: flex;
    align-items: center;
    gap: 25px;
}

.nav-link {
    font-weight: 500;
    font-size: 16px;
    color: #000;
}

.nav-link:hover {
    color: #555;
}

.dropdown {
    position: relative;
}

.dropdown i {
    font-size: 12px;
    margin-left: 5px;
}

.dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    border-radius: 8px;
    min-width: 150px;
    z-index: 100;
    padding: 10px 0;
}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown-content a {
    display: block;
    padding: 8px 15px;
    color: #333;
}

.dropdown-content a:hover {
    background-color: #f5f5f5;
}

/* Logo */
.logo-container {
    flex-grow: 1;
    display: flex;
    justify-content: center;
}

.site-logo {
    height: 70px !important;
    width: auto;
    max-width: none;
    max-height: 70px !important;
}

/* Header Right */
.header-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* Search Bar */
.search-bar {
    background-color: #f1f3f4;
    border-radius: 25px;
    padding: 8px 15px;
    display: flex;
    align-items: center;
    width: 200px;
}

.search-icon {
    color: #5f6368;
    margin-right: 10px;
}

.search-bar input {
    background: transparent;
    border: none;
    outline: none;
    width: 100%;
    font-size: 14px;
    color: #333;
}

/* Lang Switcher */
.lang-switcher {
    position: relative;
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.05); /* Lighter background for visibility on dark header */
    border-radius: 8px;
    padding: 4px; /* Space for glider */
    border: 1px solid rgba(0, 0, 0, 0.1); /* Adjusted for light theme - original was white/0.2 */
}

/* Adjust for light header if needed, but user provided code implies dark or specific style. 
   Given the header is white background in previous step, I will adapt colors slightly 
   or assume the header should be dark? User said "Tasarım birebir görseldeki gibi olmadır".
   The user provided code has white text (rgba 255,255,255).
   If the header is white, this will be invisible.
   However, the user asked to "add the code".
   I will respect the code but might need to invert colors if the header is white.
   Wait, the user's previous image shows a WHITE header with BLACK text.
   But the user provided code has `color: rgba(255, 255, 255, 0.5)`.
   This means the user provided code for a DARK background.
   But the site header is `.site-header { background-color: #fff; }`.
   I will use the user's structure but adapt colors to be visible on white background, 
   OR I should change the header to be dark?
   "Tasarım birebir görseldeki gibi olmadır" -> The image shows a white header.
   So the user's provided code is likely from a different context or they want me to adapt it.
   "Dünyanın önde gelen şirketlerinin ortakları biraz daha büyük ve siyah olmalı" implies the rest is light.
   I will INVERT the colors of the user's provided CSS to work on white background, 
   OR I will wrap the switcher in a dark box?
   No, "Tasarım birebir görseldeki gibi".
   I will change the text colors to black/grey instead of white.
   
   Original: color: rgba(255, 255, 255, 0.5);
   New: color: rgba(0, 0, 0, 0.5);
   
   Original: border: 1px solid rgba(255, 255, 255, 0.2);
   New: border: 1px solid rgba(0, 0, 0, 0.1);
   
   Original: background: rgba(255, 255, 255, 0.05);
   New: background: rgba(0, 0, 0, 0.05);
   
   Glider color: #FF5722 (Orange) - I'll keep this or check the image. 
   The image shows black/dark buttons? No, the user provided code has orange glider. I'll keep orange.
*/

.lang-switcher {
    position: relative;
    display: inline-flex;
    align-items: center;
    background: #f0f0f0; /* Adapted */
    border-radius: 8px;
    padding: 4px;
    border: 1px solid #e0e0e0; /* Adapted */
}

.glider {
    position: absolute;
    top: 4px; /* Match padding */
    left: 4px; /* Match padding */
    height: calc(100% - 8px); /* Match padding */
    background: #000; /* User code had #FF5722 but image likely has black or user wants black? User said "Dünyanın önde gelen... siyah olmalı". 
                         But for switcher, user code had #FF5722. I will stick to user code #FF5722? 
                         Actually, the user said "Dünyanın önde gelen şirketlerinin ortakları...". 
                         For switcher, "benim önceden yaptığım bir kod var onu ekle". 
                         I will use the user's code colors but inverted for visibility if needed.
                         Wait, if I use #FF5722 on white, it looks okay.
                         Let's use #000 for the glider to match the "TR/En/CN" button in the image which is BLACK.
                         The image shows a BLACK pill with white text for the active item.
                         So I will use black background for glider. */
    background: #000;
    border-radius: 6px;
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), width 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    z-index: 1;
    pointer-events: none;
}

.lang-option {
    position: relative;
    z-index: 2;
    padding: 6px 16px; /* Reduced padding slightly */
    color: #666; /* Adapted from white 0.5 */
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: color 0.3s;
    border-right: 1px solid rgba(0, 0, 0, 0.1); /* Adapted */
}

.lang-option:last-child {
    border-right: none;
}

.lang-option:hover {
    color: #333; /* Adapted */
}

.lang-option.active {
    color: #fff !important; /* Keep white for active on black glider */
    font-weight: 700;
}

/* Hero Section */
.hero-section {
    padding: 20px 0; /* Reduced padding */
}

.hero-image-wrapper {
    width: 100%;
    border-radius: 10px; /* Requested 10px */
    overflow: hidden;
    /* Limit height/size as requested "sana attığım tasarımdaki kadarı ile" */
    max-height: 500px; /* Approximate based on visual */
    display: flex;
    justify-content: center;
    background: #f9f9f9;
}

.hero-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

/* Partners Section */
.partners-section {
    padding: 40px 0 60px;
    text-align: center;
}

.section-title {
    font-size: 18px; /* Bigger */
    color: #000; /* Black */
    margin-bottom: 40px;
    font-weight: 500;
}

.partners-logos {
    display: flex;
    justify-content: center; /* Center them */
    align-items: center;
    flex-wrap: wrap;
    gap: 50px; /* Increased gap */
    max-width: 1200px;
    margin: 0 auto;
}

.partners-logos img {
    height: 50px; /* Fixed height for consistency */
    width: auto;
    filter: grayscale(100%);
    opacity: 0.6;
    transition: all 0.3s;
    object-fit: contain; /* Ensure they fit well */
}

.partners-logos img:hover {
    filter: grayscale(0%);
    opacity: 1;
}

.standards-section {
    padding: 60px 0 80px;
}

.standards-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    align-items: start;
}

.standards-right {
    display: flex;
    flex-direction: column;
}

.standards-right-grid {
    display: grid;
    grid-template-columns: 360px 540px;
    grid-template-rows: 348px 540px 358px;
    grid-template-areas:
        "img5 img6"
        "img7 text"
        "img8 img8";
    gap: 30px;
    align-items: start;
    align-content: start;
    width: 100%;
    justify-content: center;
}

.standards-tile {
    border-radius: 32px;
    overflow: hidden;
    background: #f3f3f3;
}

.standards-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.standards-tile-5 {
    grid-area: img5;
    height: 348px !important;
    width: 100%;
    align-self: start;
}

.standards-tile-6 {
    grid-area: img6;
    height: 540px !important;
    align-self: start;
    justify-self: start;
    width: 540px !important;
    margin-top: 0;
    border-radius: 16px;
    overflow: hidden;
}

.standards-tile-7 {
    grid-area: img7;
    height: 540px !important;
    width: 360px !important; /* Fixed width as requested */
}

.standards-tile-8 {
    grid-area: img8;
    height: 348px !important;
    width: 100%;
    align-self: end;
}

.standards-text {
    grid-area: text;
    align-self: start;
    padding-top: 192px;
    padding-bottom: 12px;
}

.badge {
    display: inline-block;
    background-color: #FF5722; /* Orange */
    color: #fff;
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 20px;
}

.standards-title {
    font-size: 28px;
    line-height: 1.3;
    color: #222;
    margin-bottom: 16px;
    font-weight: 600;
}

.standards-desc {
    color: #666;
    margin-bottom: 16px;
    font-size: 15px;
    line-height: 1.6;
}

.products-title {
    font-size: 36px;
    line-height: 1.2;
    color: #222;
    margin-bottom: 20px;
    font-weight: 600;
}

.products-desc {
    color: #666;
    margin-bottom: 20px;
    font-size: 16px;
    line-height: 1.6;
}

.btn-primary {
    display: inline-flex;
    align-items: center;
    background-color: #111;
    color: #fff;
    padding: 12px 30px;
    border-radius: 6px;
    font-weight: 500;
    margin-top: 10px;
    transition: background 0.3s;
    font-size: 15px;
}

.btn-primary:hover {
    background-color: #333;
}

.btn-primary i {
    margin-left: 10px;
    font-size: 12px;
}

.img-tall {
    grid-column: 1;
    grid-row: 1 / span 2;
    height: 100%;
}

.img-tall img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

.img-stack {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.img-stack img {
    width: 100%;
    height: auto;
    aspect-ratio: 4/3;
    object-fit: cover;
    border-radius: 10px;
    display: block;
}

.standards-wide {
    margin-top: 40px;
    display: none;
}

.standards-wide img {
    width: 100%;
    border-radius: 18px;
    display: block;
    object-fit: cover;
    max-height: 240px;
}

.products-section {
    padding: 60px 0;
}

.products-wrapper {
    display: flex;
    align-items: center;
    gap: 60px;
}

.products-content {
    flex: 1;
    max-width: 50%;
}

.products-images {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* Footer */
.site-footer {
    padding: 60px 0 40px;
    background-color: #fff;
    border-top: none; /* Removed border */
}

.footer-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 60px;
}

.footer-nav {
    display: flex;
    align-items: center;
    gap: 30px;
}

.footer-nav a {
    font-size: 16px;
    color: #111;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.3s;
}

.footer-nav a:hover {
    color: #FF5722;
}

.footer-dropdown i {
    font-size: 12px;
    margin-left: 5px;
}

.footer-social {
    display: flex;
    align-items: center;
    gap: 25px;
}

.footer-social a {
    color: #111;
    font-size: 20px;
    transition: color 0.3s;
}

.footer-social a:hover {
    color: #FF5722;
}

.footer-middle {
    display: flex;
    justify-content: center;
    margin-bottom: 60px;
}

.footer-logo {
    height: 150px !important;
    width: auto;
    max-width: none;
    max-height: 150px !important;
}

.footer-bottom {
    text-align: center;
}

.footer-bottom p {
    color: #111;
    font-size: 14px;
    font-weight: 500;
}

@media (max-width: 768px) {
    .footer-top {
        flex-direction: column;
        gap: 30px;
    }
    
    .footer-nav {
        flex-direction: column;
        gap: 15px;
    }
}

/* Cargo Section */
.cargo-section {
    padding: 60px 0;
}

.cargo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}

.cargo-image-top img {
    width: 100%;
    border-radius: 20px;
    display: block;
    aspect-ratio: 4/3;
    object-fit: cover;
}

.cargo-features {
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* Align right as in image */
    gap: 15px;
}

.feature-ribbon {
    background: #000;
    color: #fff;
    padding: 10px 20px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 14px;
    position: relative;
    clip-path: polygon(10px 0%, 100% 0%, 100% 100%, 0% 100%);
    /* Skewed look attempt */
}

.feature-ribbon i {
    color: #FF5722; /* Orange icon */
}

.feature-card-black {
    background: #000;
    border-radius: 20px;
    padding: 20px 40px;
    margin-top: 10px;
    width: 100%;
    max-width: 350px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 120px;
    position: relative;
}

/* Add some grid lines to black card if needed, simplified for now */

.orange-box {
    background: #FF5722;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    font-size: 24px;
    color: #000;
}

.cargo-text {
    padding-right: 20px;
}

.cargo-title {
    font-size: 32px;
    line-height: 1.3;
    color: #222;
    margin-bottom: 20px;
    font-weight: 600;
}

.cargo-desc {
    color: #666;
    font-size: 15px;
    line-height: 1.6;
}

.cargo-image-bottom {
    position: relative;
    height: 300px;
    display: flex;
    align-items: flex-end;
}

.orange-bg-card {
    background: linear-gradient(135deg, #FF5722 0%, #ff8a65 100%);
    border-radius: 20px;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: visible; /* Allow ship to pop out */
}

.orange-bg-card img {
    position: absolute;
    bottom: -20px;
    right: -20px;
    width: 110%;
    height: auto;
    object-fit: contain;
    /* Adjust based on actual image transparency */
}

/* Home Contact Section */
.home-contact-section {
    padding: 80px 0;
}

.home-contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.contact-image-wrapper {
    width: 100%;
    border-radius: 30px;
    overflow: hidden;
    height: 100%;
}

.contact-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    min-height: 600px; /* Ensure tall image */
}

.contact-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.contact-title {
    font-size: 36px;
    line-height: 1.2;
    color: #222;
    margin-bottom: 20px;
    font-weight: 600;
}

.contact-desc {
    color: #666;
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 40px;
}

.contact-cards {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.contact-card {
    background: #000;
    border-radius: 50px; /* Pill shape */
    padding: 15px 25px;
    display: flex;
    align-items: center;
    gap: 20px;
    color: #fff;
    width: 100%;
}

.contact-icon {
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

.contact-icon i {
    color: #fff;
    font-size: 24px;
}

.contact-info {
    flex: 1;
}

.contact-info h3 {
    font-size: 12px;
    color: #aaa;
    margin-bottom: 5px;
    font-weight: 500;
}

.contact-info p {
    font-size: 14px;
    font-weight: 500;
    color: #fff;
}

.btn-contact-action {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    padding: 10px 20px;
    border-radius: 20px;
    font-size: 12px;
    text-decoration: none;
    transition: background 0.3s;
    white-space: nowrap;
}

.btn-contact-action:hover {
    background: rgba(255, 255, 255, 0.3);
}

@media (max-width: 900px) {
    .home-contact-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .contact-image-wrapper img {
        min-height: auto;
        aspect-ratio: 4/5;
    }
    
    .contact-card {
        flex-direction: column;
        text-align: center;
        border-radius: 20px;
        padding: 30px;
    }
    
    .btn-contact-action {
        width: 100%;
        text-align: center;
    }
}

@media (max-width: 900px) {
    .cargo-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .cargo-features {
        align-items: center;
    }
    
    .feature-card-black {
        max-width: 100%;
    }
    
    .cargo-image-bottom {
        margin-top: 40px;
    }
}

@media (max-width: 900px) {
    .header-inner {
        flex-direction: column;
        gap: 15px;
    }
    
    .logo-container {
        order: -1; /* Logo first on mobile */
        margin-bottom: 10px;
    }
    
    .main-nav {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .header-right {
        width: 100%;
        justify-content: center;
    }
    
    .standards-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .standards-right-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "img5"
            "img6"
            "text"
            "img7"
            "img8";
    }

    .standards-title {
        font-size: 24px;
    }

    .products-wrapper {
        flex-direction: column;
        gap: 40px;
    }
    
    .products-content {
        max-width: 100%;
        text-align: center;
    }
    
    .products-title {
        font-size: 28px;
    }
}