/* SEKO Sustainability Page Styles */

/* Permanent Marker Font */
.permenant-marker {
    font-family: 'Permanent Marker', cursive;
}

/* Draw Underline Effect */
.draw-underline {
    position: relative;
    display: inline-block;
}

.draw-underline::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #10b981 0%, #34d399 100%);
    transform: scaleX(0);
    transform-origin: left;
    animation: drawLine 0.8s ease-out forwards;
    animation-delay: 0.3s;
}

@keyframes drawLine {
    to {
        transform: scaleX(1);
    }
}

/* Hero Section */
.sustainability-hero {
    min-height: 600px;
    padding-top: 6rem;
    padding-bottom: 4rem;
}

.hero-image-1 {
    height: 550px;
    background-size: cover;
    background-position: center;
    border-radius: 8px;
    transition: transform 0.3s ease;
}

.hero-image-1:hover {
    transform: scale(1.02);
}

.hero-image-2 {
    height: 200px;
    background-size: cover;
    background-position: center;
    border-radius: 8px;
    transition: transform 0.3s ease;
}

.hero-image-2:hover {
    transform: scale(1.05);
}

.hero-image-3 {
    height: 400px;
    background-size: cover;
    background-position: right;
    border-radius: 8px;
    transition: transform 0.3s ease;
}

.hero-image-3:hover {
    transform: scale(1.05);
}

.hero-bg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: contain;
    background-position: bottom;
    background-repeat: no-repeat;
    opacity: 0.2;
    z-index: -1;
}

/* Sustainable Plan Section */
.sustainable-plan-wrapper {
    position: relative;
    padding: 80px 0;
}

.paper-rip-top,
.paper-rip-bottom {
    position: absolute;
    left: 0;
    width: 100%;
    height: auto;
    z-index: 10;
}

.paper-rip-top {
    top: 0;
}

.paper-rip-bottom {
    bottom: 0;
}

/* Sustainability Cards */
.sustainability-card {
    display: flex;
    flex-direction: column;
    gap: 24px;
    animation: fadeIn 0.8s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.card-image {
    height: 300px;
    background-size: cover;
    background-position: center;
    border-radius: 8px;
    transition: transform 0.3s ease;
}

.sustainability-card:hover .card-image {
    transform: scale(1.05);
}

.card-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.card-icon {
    width: 48px;
    height: 48px;
}

.card-title {
    font-size: 2.5rem;
    line-height: 1.2;
    color: #16324D;
    margin: 0;
}

.card-description {
    color: #5F6E7D;
    font-weight: 300;
    line-height: 1.6;
}

/* Sustainable Grid - 8 columns, 6 rows */
.sustainable-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(6, minmax(50px, auto));
    gap: 16px;
    max-width: 950px;
    margin: 0 auto;
}

.grid-box {
    position: relative;
    border-radius: 8px;
    padding: 28px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    min-height: 150px;
    display: flex;
    flex-direction: column;
}

.grid-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

/* Grid Box Positioning */
/* Box 1: Sol Üst - 3 col wide, 2 row high */
.box-1 {
    grid-column: 1 / 4;
    grid-row: 1 / 3;
    background: rgba(16, 185, 129, 0.1);
}

/* Box 2: Orta Üst - 3 col wide, 2 row high */
.box-2 {
    grid-column: 4 / 7;
    grid-row: 1 / 3;
    background-size: cover;
    background-position: center;
    padding: 0;
}

.box-2 .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(22, 50, 77, 0.31);
    border-radius: 8px;
    z-index: 1;
}

/* Box 3: Sağ Üst - 2 col wide, 4 row high */
.box-3 {
    grid-column: 7 / 9;
    grid-row: 1 / 5;
    background: rgba(217, 224, 240, 0.3);
}

/* Box 4: İkinci Sıra - 6 col wide, 2 row high */
.box-4 {
    grid-column: 1 / 7;
    grid-row: 3 / 5;
    background: #E5E7EB;
}

/* Box 5: Alt Sıra 1 - 2 col wide, 2 row high */
.box-5 {
    grid-column: 1 / 3;
    grid-row: 5 / 7;
    background: #E5E7EB;
}

/* Box 6: Alt Sıra 2 - 2 col wide, 2 row high */
.box-6 {
    grid-column: 3 / 5;
    grid-row: 5 / 7;
    background: #F3F4F6;
}

/* Box 7: Alt Sıra 3 - 2 col wide, 2 row high */
.box-7 {
    grid-column: 5 / 7;
    grid-row: 5 / 7;
    background: rgba(16, 185, 129, 0.1);
}

/* Box 8: Alt Sıra 4 - 2 col wide, 2 row high */
.box-8 {
    grid-column: 7 / 9;
    grid-row: 5 / 7;
    background: #F3F4F6;
}

/* Special Box Styles */
.carbon-neutral-box {
    position: relative;
    padding: 28px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: rgba(16, 185, 129, 0.1);
    border-radius: 8px;
    overflow: hidden;

    White Underline for Dark Backgrounds */ .draw-underline-white {
        position: relative;
        display: inline-block;
    }

    .draw-underline-white::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: -5px;
        width: 100%;
        height: 3px;
        background: linear-gradient(90deg, #ffffff 0%, #e5e7eb 100%);
        transform: scaleX(0);
        transform-origin: left;
        animation: drawLine 0.8s ease-out forwards;
        animation-delay: 0.3s;
    }

    /* Decorative Arrows */
    .arrow-1 {
        position: absolute;
        top: 15%;
        left: 35%;
        width: 80px;
        height: auto;
        pointer-events: none;
        z-index: 10;
    }

    .arrow-2 {
        position: absolute;
        top: 60%;
        left: 2000%;
        height: 100%;
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        opacity: 0.5;
        z-index: 0;
    }

    .grid-box>* {
        position: relative;
        z-index: 1;
    }

    /* Decorative Arrows */
    .arrow-1 {
        position: absolute;
        top: 12%;
        left: 30%;
        width: 80px;
        height: auto;
        pointer-events: none;
        z-index: 10;
    }

    .arrow-2 {
        position: absolute;
        top: 65%;
        left: ,
            .box-868%;
        width: 80px;
        height: auto;
        pointer-events: none;
        z-index: 10;
    }

    /* Mobile Responsive */
    @media (max-width: 1024px) {
        .sustainable-grid {
            grid-template-columns: 1fr;
            grid-template-rows: auto;
        }

        .box-1,
        .box-2,
        .box-3,
        .box-4,
        .box-5,
        .box-6,
        .box-7 {
            grid-column: 1 / -1;
            grid-row: auto;
            min-height: 250px;
        }

        .box-1 .flex {
            flex-direction: column;
        }

        .arrow-1,
        .arrow-2 {
            display: none;
        }

        .card-title {
            font-size: 2rem;
        }

        .hero-image-1 {
            height: 400px;
        }

        .hero-image-3 {
            height: 300px;
        }
    }

    @media (max-width: 640px) {

        .hero-image-2,
        .hero-image-3 {
            height: 200px;
        }

        .card-image {
            height: 200px;
        }
    }