@import url(https://fonts.googleapis.com/css?family=Josefin+Sans:300,400);

:root {

    --primary: #59AC77;

    --secondary: #1a1a1a;

    --accent: #333333;

    --light: #f8f9fa;

    --dark: #212529;

    --gray: #6c757d;

    --light-gray: #e9ecef;

    --success: #28a745;

    --warning: #ffc107;

    --transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);

    --shadow: 0 10px 25px rgba(0, 0, 0, 0.1);

    --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.15);

}



* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



body {

    font-family: 'Poppins', sans-serif;

    background-color: var(--light);

    color: var(--dark);

    line-height: 1.6;

    overflow-x: hidden;

}



h1, h2, h3, h4, h5 {

    font-family: 'Montserrat', sans-serif;

    font-weight: 600;

    line-height: 1.3;

}

a {

    color: var(--primary);

    text-decoration: none;

}



.container {

    width: 100%;

    max-width: 1200px;

    margin: 0 auto;

    padding: 0 20px;

}



.padding {

    padding: 80px 0;

}



.section-title {

    text-align: center;

    margin-bottom: 60px;

    position: relative;

}



.section-title h2 {

    font-size: 2.5rem;

    color: var(--secondary);

    margin-bottom: 15px;

}



.section-title p {

    font-size: 1.1rem;

    color: var(--gray);

    max-width: 700px;

    margin: 0 auto;

}



.section-title::after {

    content: '';

    position: absolute;

    bottom: -15px;

    left: 50%;

    transform: translateX(-50%);

    width: 80px;

    height: 4px;

    background: var(--primary);

    border-radius: 2px;

}



/* Navbar */

.navbar {

    background-color: var(--secondary);

    padding: 1rem 0;

    box-shadow: var(--shadow);

    position: sticky;

    top: 0;

    z-index: 1000;

    transition: var(--transition);

}



.navbar.scrolled {

    padding: 0.7rem 0;

    background-color: rgba(26, 26, 26, 0.95);

    backdrop-filter: blur(10px);

}



.nav-container {

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.logo {

    display: flex;

    align-items: center;

    gap: 10px;

    color: white;

    text-decoration: none;

}



.logo-icon {

    width: 50px;

}



.logo-text {

    font-size: 1.9rem;

    font-family:  "Arial Black",Arial, sans-serif;

}



.nav-links {

    display: flex;

    gap: 2rem;

}



.nav-links a {

    color: white;

    text-decoration: none;

    font-weight: 500;

    transition: var(--transition);

    position: relative;

    padding: 5px 0;

}



.nav-links a:hover {

    color: var(--primary);

}



.nav-links a::after {

    content: '';

    position: absolute;

    bottom: 0;

    left: 0;

    width: 0;

    height: 2px;

    background-color: var(--primary);

    transition: var(--transition);

}



.nav-links a:hover::after {

    width: 100%;

}



.menu-toggle {

    display: none;

    background: none;

    border: none;

    color: white;

    font-size: 1.5rem;

    cursor: pointer;

}



/* Hero Section */

.hero {

    height: 60vh;

    display: flex;

    align-items: center;

    background:  url('../images/home/smart-solitions.png') no-repeat center center/cover;

    background-attachment: fixed;

    color: white;

    position: relative;

    overflow: hidden;

}



.hero::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(0, 0, 0, 0.5); /* Siyah overlay */

    opacity: 0.6; /* İstenilen opaklık */

}



.hero-content {

    position: relative;

    z-index: 2;

    max-width: 700px;

}



.hero h1 {

    font-size: 3.5rem;

    margin-bottom: 1.5rem;

    line-height: 1.2;

    text-shadow: 1px 1px 100px rgb(0, 0, 0);

    text-align: center;

}



.hero p {

    font-size: 1.2rem;

    margin-bottom: 2rem;

    opacity: 0.9;

    text-shadow: 1px 1px 100px rgb(0, 0, 0);

    text-align: center;

}



.btn {

    display: inline-block;

    padding: 0.9rem 2rem;

    background-color: var(--primary);

    color: white;

    border: none;

    border-radius: 4px;

    font-weight: 600;

    text-decoration: none;

    transition: var(--transition);

    cursor: pointer;

    box-shadow: var(--shadow);

    font-size: 1rem;

}



.btn:hover {

    background-color: #4a9968;

    transform: translateY(-3px);

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

}



.btn-outline {

    background-color: transparent;

    border: 2px solid white;

    margin-left: 15px;

}



.btn-outline:hover {

    background-color: white;

    color: var(--secondary);

}



/* Selection Section */

.selection-section {

    display: flex;

    height: calc(100vh - 70px);

}



.option {

    flex: 1;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    padding: 2rem;

    cursor: pointer;

    transition: var(--transition);

    position: relative;

    overflow: hidden;

    background-size: cover;

    background-position: center;

    text-align: center;

}



.option::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: linear-gradient(rgba(26, 26, 26, 0.8), rgba(51, 51, 51, 0.7));

    z-index: 1;

    transition: var(--transition);

}



.option:hover::before {

    background: linear-gradient(rgba(26, 26, 26, 0.9), rgba(51, 51, 51, 0.8));

}



.option-content {

    position: relative;

    z-index: 2;

    color: white;

    max-width: 500px;

}



.option i {

    font-size: 4rem;

    margin-bottom: 1.5rem;

    color: var(--primary);

    transition: var(--transition);

}



.option:hover i {

    transform: scale(1.1);

}



.option h2 {

    font-size: 2.5rem;

    margin-bottom: 1rem;

    font-weight: 700;

}



.option p {

    font-size: 1.1rem;

    margin-bottom: 2rem;

    opacity: 0.9;

}

#arrow-down span {

    position: absolute;

    top: 120%;

    left: 50%;

    width: 24px;

    height: 24px;

    margin-left: -12px;

    border-left: 3px solid #ffffff;

    border-bottom: 3px solid #ffffff;

    -webkit-transform: rotate(-45deg);

    transform: rotate(-45deg);

    -webkit-animation: sdb05 3s infinite;

    animation: sdb05 3s infinite;

    box-sizing: border-box;

}

@-webkit-keyframes sdb05 {

    0% {

        -webkit-transform: rotate(-45deg) translate(0, 0);

        opacity: 0;

    }

    50% {

        opacity: 1;

    }

    100% {

        -webkit-transform: rotate(-45deg) translate(-20px, 20px);

        opacity: 0;

    }

}

@keyframes sdb05 {

    0% {

        transform: rotate(-45deg) translate(0, 0);

        opacity: 0;

    }

    50% {

        opacity: 1;

    }

    100% {

        transform: rotate(-45deg) translate(-20px, 20px);

        opacity: 0;

    }

}



/* Journey Section */

.journey-section {

    background-color: var(--light);

    display: none;

    position: relative;

}



.journey-container {

    max-width: 1200px;

    margin: 0 auto;

    display: flex;

    gap: 30px;

}



.journey-sidebar {

    width: 300px;

    position: sticky;

    top: 100px;

    height: fit-content;

    background: white;

    border-radius: 12px;

    box-shadow: var(--shadow);

    padding: 25px;

    transition: var(--transition);

}



.journey-sidebar h3 {

    color: var(--secondary);

    margin-bottom: 20px;

    padding-bottom: 15px;

    border-bottom: 2px solid var(--light-gray);

    font-size: 1.4rem;

}



.journey-menu {

    list-style: none;

}



.journey-menu li {

    margin-bottom: 10px;

}



.journey-menu a {

    display: block;

    padding: 12px 15px;

    color: var(--dark);

    text-decoration: none;

    border-radius: 8px;

    transition: var(--transition);

    position: relative;

    font-weight: 500;

}



.journey-menu a:hover {

    background-color: rgba(89, 172, 119, 0.1);

    color: var(--primary);

}



.journey-menu a.active {

    background-color: var(--primary);

    color: white;

}



.journey-menu a.active::before {

    content: '';

    position: absolute;

    left: 0;

    top: 0;

    height: 100%;

    width: 4px;

    background-color: var(--secondary);

    border-radius: 0 4px 4px 0;

}



.journey-content {

    flex: 1;

}



.journey-header {

    text-align: center;

    margin-bottom: 50px;

}



.journey-header h2 {

    font-size: 2.5rem;

    color: var(--secondary);

    margin-bottom: 15px;

}



.journey-header p {

    font-size: 1.1rem;

    color: var(--gray);

    max-width: 600px;

    margin: 0 auto;

}



.journey-steps {

    position: relative;

}



.journey-step {

    background: white;

    border-radius: 12px;

    padding: 40px;

    margin-bottom: 40px;

    box-shadow: var(--shadow);

    transition: var(--transition);

    opacity: 0;

    transform: translateY(30px);

    position: relative;

    overflow: hidden;

}



.journey-step.active {

    opacity: 1;

    transform: translateY(0);

}



.journey-step:hover {

    transform: translateY(-5px);

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

}



.step-header {

    display: flex;

    align-items: center;

    margin-bottom: 25px;

}



.step-number {

    width: 60px;

    height: 60px;

    border-radius: 50%;

    background-color: var(--primary);

    color: white;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.5rem;

    font-weight: 700;

    margin-right: 20px;

    flex-shrink: 0;

    box-shadow: var(--shadow);

}



.step-title {

    font-size: 1.8rem;

    color: var(--secondary);

}



.step-content {

    margin-bottom: 25px;

    font-size: 1.1rem;

    line-height: 1.7;

    color: var(--gray);

}



.step-image {

    width: 100%;

    border-radius: 10px;

    overflow: hidden;

    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);

    margin-bottom: 25px;

}



.step-image img {

    width: 100%;

    height: auto;

    display: block;

    transition: var(--transition);

}



.step-image:hover img {

    transform: scale(1.03);

}



.step-features {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

    gap: 20px;

    margin-bottom: 25px;

}



.step-feature {

    display: flex;

    align-items: flex-start;

    gap: 15px;

    padding: 15px;

    background: var(--light);

    border-radius: 8px;

    transition: var(--transition);

}



.step-feature:hover {

    background: rgba(89, 172, 119, 0.1);

    transform: translateX(5px);

}



.step-feature i {

    color: var(--primary);

    font-size: 1.3rem;

    margin-top: 3px;

}



.step-feature h4 {

    font-size: 1.1rem;

    margin-bottom: 5px;

    color: var(--secondary);

}



.step-feature p {

    font-size: 0.95rem;

    color: var(--gray);

}



.step-actions {

    display: flex;

    gap: 15px;

    flex-wrap: wrap;

}



.step-btn {

    padding: 10px 25px;

    background-color: var(--primary);

    color: white;

    border: none;

    border-radius: 6px;

    font-weight: 500;

    cursor: pointer;

    transition: var(--transition);

    display: inline-flex;

    align-items: center;

    gap: 8px;

}



.step-btn:hover {

    background-color: var(--secondary);

    transform: translateY(-2px);

}



.step-btn.outline {

    background-color: transparent;

    border: 2px solid var(--primary);

    color: var(--primary);

}



.step-btn.outline:hover {

    background-color: var(--primary);

    color: white;

}



/* About Section */

.about-section {

    background-color: white;

}



.about-container {

    display: flex;

    align-items: center;

    gap: 50px;

    flex-wrap: wrap;

    justify-content: center;

}



.about-image {

    flex: 1;

    min-width: 300px;

    border-radius: 12px;

    overflow: hidden;

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

    position: relative;

}



.about-image img {

    width: 100%;

    height: auto;

    display: block;

    transition: var(--transition);

}



.about-image:hover img {

    transform: scale(1.03);

}



.about-content {

    flex: 1;

    min-width: 300px;

}



.about-content h2 {

    font-size: 2.5rem;

    color: var(--secondary);

    margin-bottom: 20px;

}



.about-content p {

    margin-bottom: 20px;

    color: var(--gray);

}



.about-features {

    justify-content: space-evenly;

    display: flex;

    gap: 20px;

    margin-top: 60px;

}



.about-feature {

    width: max-content;

    height: max-content;

}



.about-feature i {

    color: var(--primary);

    font-size: 4rem;

    margin-top: 5px;

}



/* Mission Vision Section */

.mission-vision-section {

    background-color: var(--light);

}



.mission-vision-container {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));

    gap: 40px;

    margin-top: 40px;

}



.mission-card, .vision-card {

    background: white;

    border-radius: 12px;

    padding: 40px;

    box-shadow: var(--shadow);

    transition: var(--transition);

    position: relative;

    overflow: hidden;

}



.mission-card:hover, .vision-card:hover {

    transform: translateY(-10px);

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

}



.mission-card::before, .vision-card::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 5px;

}



.mission-card::before {

    background: linear-gradient(90deg, var(--primary) 0%, #4a9968 100%);

}



.vision-card::before {

    background: linear-gradient(90deg, var(--secondary) 0%, var(--accent) 100%);

}



.card-icon {

    width: 80px;

    height: 80px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 25px;

    font-size: 2.5rem;

}



.mission-card .card-icon {

    background: rgba(89, 172, 119, 0.1);

    color: var(--primary);

}



.vision-card .card-icon {

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

    color: var(--secondary);

}



.mission-card h3, .vision-card h3 {

    font-size: 1.8rem;

    margin-bottom: 20px;

    color: var(--secondary);

}



.mission-card p, .vision-card p {

    color: var(--gray);

    margin-bottom: 30px;

    line-height: 1.7;

}



.mission-features, .vision-features {

    display: flex;

    flex-wrap: wrap;

    gap: 15px;

}



.feature {

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 8px 15px;

    border-radius: 20px;

    font-size: 0.9rem;

    font-weight: 500;

}



.mission-features .feature {

    background: rgba(89, 172, 119, 0.1);

    color: var(--primary);

}



.vision-features .feature {

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

    color: var(--secondary);

}



.feature i {

    font-size: 0.8rem;

}



/* Services Section */

.services-section {

    background-color: var(--light);

}



.services-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

    gap: 30px;

}



.service-card {

    background: white;

    border-radius: 12px;

    overflow: hidden;

    box-shadow: var(--shadow);

    transition: var(--transition);

    position: relative;

}



.service-card:hover {

    transform: translateY(-10px);

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

}



.service-icon {

    height: 120px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);

    color: white;

    font-size: 3rem;

}



.service-content {

    padding: 25px;

}



.service-content h3 {

    font-size: 1.4rem;

    margin-bottom: 15px;

    color: var(--secondary);

}



.service-content p {

    color: var(--gray);

    margin-bottom: 20px;

}



.service-features {

    list-style: none;

    margin-bottom: 20px;

}



.service-features li {

    margin-bottom: 8px;

    display: flex;

    align-items: center;

    gap: 10px;

}



.service-features li i {

    color: var(--primary);

    font-size: 0.9rem;

}



/* References Section */

.references-section {

    background-color: white;

}



.references-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));

    gap: 30px;

}



.reference-card {

    background: white;

    border-radius: 10px;

    overflow: hidden;

    box-shadow: var(--shadow);

    transition: var(--transition);

}



.reference-card:hover {

    transform: translateY(-5px);

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

}



.reference-logo {

    height: 200px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 20px;

    background-color: white;

}



.reference-logo img {

    max-width: 100%;

    max-height: 200px;

    filter: grayscale(100%);

    transition: var(--transition);

}



.reference-card:hover .reference-logo img {

    filter: grayscale(0);

}



.reference-content {

    padding: 20px;

    text-align: center;

}



.reference-content h3 {

    font-size: 1.2rem;

    margin-bottom: 10px;

    color: var(--secondary);

}



.reference-content p {

    color: var(--gray);

    font-size: 0.9rem;

}



/* Premium Contact Section */

.premium-contact-section {

    background: linear-gradient(135deg, #0c0c0c 0%, #1a1a1a 50%, #0c0c0c 100%);

    color: white;

    position: relative;

    overflow: hidden;

}



.premium-contact-section::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: 

        radial-gradient(circle at 20% 80%, rgba(89, 172, 119, 0.1) 0%, transparent 50%),

        radial-gradient(circle at 80% 20%, rgba(89, 172, 119, 0.05) 0%, transparent 50%);

    z-index: 0;

}



.premium-contact-section .section-title h2 {

    color: white;

}



.premium-contact-section .section-title p {

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

}



.premium-contact-section .section-title::after {

    background: var(--primary);

}



/* Contact Hero Grid */

.contact-hero-grid {

    display: grid;

    grid-template-columns: 1fr 1fr; /* üst satır: 2 sütun */

    gap: 60px;

    position: relative;

    z-index: 1;

    grid-template-rows: auto auto; /* iki satır */

}



/* Contact Info Grid */

.contact-info-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 20px;

    margin-top: 56px;

}



.contact-info-card {

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

    backdrop-filter: blur(10px);

    border: 1px solid rgba(255, 255, 255, 0.1);

    padding: 25px;

    transition: all 0.3s ease;

    position: relative;

    overflow: hidden;

}



.contact-info-card::before {

    content: '';

    position: absolute;

    top: 0;

    left: -100%;

    width: 100%;

    height: 100%;

    background: linear-gradient(90deg, transparent, rgba(89, 172, 119, 0.1), transparent);

    transition: left 0.6s ease;

}



.contact-info-card:hover::before {

    left: 100%;

}



.contact-info-card:hover {

    transform: translateY(-5px);

    border-color: rgba(89, 172, 119, 0.3);

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);

}



.info-icon {

    width: 50px;

    height: 50px;

    background: linear-gradient(135deg, var(--primary) 0%, #4a9968 100%);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 15px;

    font-size: 1.2rem;

}



.info-content h4 {

    font-size: 1.1rem;

    margin-bottom: 8px;

    color: white;

    font-weight: 600;

}



.info-content p {

    color: white;

    margin-bottom: 5px;

    font-weight: 500;

}



.info-content span {

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

    font-size: 0.85rem;

}



/* Alt satır form container tüm sütunları kaplasın */

.premium-form-container {

    grid-column: 1 / -1; /* tüm sütunları kaplar */

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

    backdrop-filter: blur(10px);

    border: 1px solid rgba(255, 255, 255, 0.1);

    padding: 40px;

    margin: 0px 7vw;

}



.premium-form-container h3 {

    font-size: 1.5rem;

    margin-bottom: 30px;

    color: white;

    text-align: center;

}



.premium-contact-form {

    display: flex;

    flex-direction: column;

    gap: 25px;

}



.form-row {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 20px;

}



.input-group {

    position: relative;

    margin-bottom: 10px;

}



.input-group input,

.input-group select,

.input-group textarea {

    width: 100%;

    padding: 16px 0 8px 0;

    border: none;

    border-bottom: 1px solid rgba(255, 255, 255, 0.3);

    background: transparent;

    color: white;

    font-family: 'Poppins', sans-serif;

    font-size: 1rem;

    transition: all 0.3s ease;

    outline: none;

    resize: none;

}



.input-group select {

    appearance: none;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");

    background-repeat: no-repeat;

    background-position: right 0 center;

    background-size: 16px;

}



.input-group textarea::placeholder {

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

}



.input-group label {

    position: absolute;

    top: 16px;

    left: 0;

    font-size: 1rem;

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

    pointer-events: none;

    transition: all 0.3s ease;

    font-weight: 400;

}



.input-group input:focus,

.input-group select:focus,

.input-group textarea:focus,

.input-group input:valid,

.input-group select:valid,

.input-group textarea:valid {

    border-bottom-color: var(--primary);

}



.input-group input:focus + label,

.input-group select:focus + label,

.input-group textarea:focus + label,

.input-group input:valid + label,

.input-group select:valid + label,

.input-group textarea:valid + label {

    top: 0;

    font-size: 0.85rem;

    color: var(--primary);

    font-weight: 500;

}



.focus-border {

    position: absolute;

    bottom: 0;

    left: 0;

    width: 0;

    height: 2px;

    background: linear-gradient(90deg, var(--primary) 0%, #4a9968 100%);

    transition: width 0.3s ease;

}



.input-group input:focus ~ .focus-border,

.input-group select:focus ~ .focus-border,

.input-group textarea:focus ~ .focus-border {

    width: 100%;

}



/* Glow Button */

.glow-button {

    background: linear-gradient(135deg, var(--primary) 0%, #4a9968 100%);

    border: none;

    padding: 16px 32px;

    color: white;

    font-family: 'Montserrat', sans-serif;

    font-weight: 600;

    font-size: 1rem;

    cursor: pointer;

    transition: all 0.3s ease;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    margin: 10px auto;

    border-radius: 8px;

    position: relative;

    overflow: hidden;

    width: 80%;

}



.glow-button::before {

    content: '';

    position: absolute;

    top: 0;

    left: -100%;

    width: 100%;

    height: 100%;

    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);

    transition: left 0.5s ease;

}



.glow-button:hover::before {

    left: 100%;

}



.glow-button:hover {

    transform: translateY(-2px);

    box-shadow: 0 10px 25px rgba(89, 172, 119, 0.4);

}

/* Checkbox Group Stilleri */

.checkbox-group {

    display: flex;

    align-items: flex-start;

    gap: 12px;

    margin-bottom: 15px;

    position: relative;

}



.checkbox-group input[type="checkbox"] {

    appearance: none;

    -webkit-appearance: none;

    width: 20px;

    height: 20px;

    border: 2px solid rgba(255, 255, 255, 0.3);

    border-radius: 4px;

    background: transparent;

    cursor: pointer;

    position: relative;

    transition: all 0.3s ease;

    flex-shrink: 0;

    margin-top: 2px;

}



.checkbox-group input[type="checkbox"]:checked {

    background-color: var(--primary);

    border-color: var(--primary);

}



.checkbox-group input[type="checkbox"]:checked::before {

    content: '✓';

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    color: white;

    font-size: 14px;

    font-weight: bold;

}



.checkbox-group input[type="checkbox"]:hover {

    border-color: var(--primary);

}



.checkbox-group label {

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

    font-size: 0.9rem;

    line-height: 1.4;

    cursor: pointer;

    user-select: none;

    margin: 0;

    font-weight: 400;

}



.checkbox-group input[type="checkbox"]:checked + label {

    color: white;

}



/* Responsive Düzenlemeler */

@media (max-width: 768px) {

    .form-row {

        grid-template-columns: 1fr;

        gap: 0;

    }

    

    .premium-form-container {

        margin: 0px 5vw;

        padding: 30px 25px;

    }

    

    .checkbox-group {

        margin-bottom: 12px;

    }

    

    .checkbox-group label {

        font-size: 0.85rem;

    }

}



/* Form container için ek responsive ayar */

@media (max-width: 480px) {

    .premium-form-container {

        margin: 0px 3vw;

        padding: 25px 20px;

    }

    

    .checkbox-group {

        align-items: flex-start;

    }

    

    .checkbox-group label {

        line-height: 1.3;

    }

}



/* Map Container */

.map-container {

    display: flex;

    flex-direction: column;

    gap: 20px;

}



.map-header {

    text-align: center;

}



.map-header h3 {

    font-size: 1.5rem;

    margin-bottom: 8px;

    color: white;

}



.map-header p {

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

}



.google-map-wrapper {

    position: relative;

    height: 400px;



    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.1);

}







.map-overlay {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: linear-gradient(135deg, rgba(89, 172, 119, 0.1) 0%, transparent 50%);

    pointer-events: none;

    border-radius: 16px;

}



.map-features {

    display: flex;

    justify-content: center;

    gap: 30px;

}



.map-feature {

    display: flex;

    align-items: center;

    gap: 10px;

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

    font-size: 0.9rem;

}



.map-feature i {

    color: var(--primary);

    font-size: 1.1rem;

}



/* Social Media Section */

.social-media-section {

    margin-top: 60px;

    text-align: center;

}



.social-media-section h4 {

    font-size: 1.3rem;

    margin-bottom: 30px;

    color: white;

}



.social-grid {

    display: grid;

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

    gap: 20px;

    max-width: 500px;

    margin: 0 auto;

}



.social-card {

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

    backdrop-filter: blur(10px);

    border: 1px solid rgba(255, 255, 255, 0.1);

    padding: 20px;

    border-radius: 12px;

    text-decoration: none;

    color: white;

    transition: all 0.3s ease;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 10px;

}



.social-card:hover {

    transform: translateY(-5px);

    border-color: var(--primary);

    background: rgba(89, 172, 119, 0.1);

    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);

}



.social-icon {

    width: 50px;

    height: 50px;

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

    border-radius: 10px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.2rem;

    transition: all 0.3s ease;

}



.social-card:hover .social-icon {

    background: var(--primary);

    transform: scale(1.1);

}



.social-card span {

    font-size: 0.9rem;

    font-weight: 500;

}



/* Footer */

footer {

    background-color: var(--secondary);

    color: white;

    padding: 60px 0 30px;

}



.footer-container {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

    gap: 40px;

    margin-bottom: 40px;

}



.footer-col h3 {

    font-size: 1.3rem;

    margin-bottom: 20px;

    position: relative;

    padding-bottom: 10px;

}

.footer-logo-text{

    font-family: "Arial Black", Arial, sans-serif;

     vertical-align: middle;

}

.footer-logo-icon {

    width: 30px;

    vertical-align: middle;

}



.footer-col h3::after {

    content: '';

    position: absolute;

    bottom: 0;

    left: 0;

    width: 40px;

    height: 2px;

    background-color: var(--primary);

}



.footer-col p {

    margin-bottom: 15px;

    opacity: 0.8;

}



.footer-col ul {

    list-style: none;

}



.footer-col ul li {

    margin-bottom: 10px;

}



.footer-col ul li a {

    color: white;

    text-decoration: none;

    transition: var(--transition);

    opacity: 0.8;

}



.footer-col ul li a:hover {

    opacity: 1;

    padding-left: 5px;

}



.social-links {

    display: flex;

    gap: 15px;

    margin-top: 20px;

}



.social-links a {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 40px;

    height: 40px;

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

    border-radius: 50%;

    color: white;

    text-decoration: none;

    transition: var(--transition);

}



.social-links a:hover {

    background-color: var(--primary);

    transform: translateY(-3px);

}



.copyright {

    text-align: center;

    padding-top: 30px;

    border-top: 1px solid rgba(255, 255, 255, 0.1);

    opacity: 0.7;

    font-size: 0.9rem;

}



/* Back to top button */

.back-to-top {

    position: fixed;

    bottom: 30px;

    right: 30px;

    width: 50px;

    height: 50px;

    background-color: var(--primary);

    color: white;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    text-decoration: none;

    box-shadow: var(--shadow);

    transition: var(--transition);

    opacity: 0;

    visibility: hidden;

    z-index: 999;

}



.back-to-top.visible {

    opacity: 1;

    visibility: visible;

}



.back-to-top:hover {

    background-color: var(--secondary);

    transform: translateY(-5px);

}

/* Responsive Design */

@media (max-width: 1200px) {

    .contact-hero-grid {

        gap: 40px;

    }

}

@media (max-width: 992px) {

    .hero h1 {

        font-size: 2.8rem;

    }



    .journey-container {

        flex-direction: column;

    }



    .journey-sidebar {

        width: 100%;

        position: static;

        margin-bottom: 30px;

    }



    .about-container {

        flex-direction: column;

    }



    .selection-section {

        flex-direction: column;

        height: calc(100vh - 80px);

    }



    .option {

        min-height: 30vh;

    }

    .premium-form-container{

        margin: 0;

    }

    .contact-hero-grid {

        grid-template-columns: 1fr;

        gap: 40px;

    }

        

    .contact-info-grid {

        grid-template-columns: 1fr;

    }



    .social-grid {

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

    }

}



@media (max-width: 768px) {

    .hero {

        background-attachment: scroll;

    }

    .menu-toggle {

        display: block;

    }



    .nav-links {

        position: fixed;

        top: 70px;

        left: 0;

        width: 100%;

        background-color: var(--secondary);

        flex-direction: column;

        align-items: center;

        padding: 2rem 0;

        clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);

        transition: var(--transition);

        box-shadow: var(--shadow);

    }



    .nav-links.active {

        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);

    }



    .hero h1 {

        font-size: 2.2rem;

    }

    

    .step-header {

        flex-direction: column;

        align-items: flex-start;

    }

    

    .step-number {

        margin-bottom: 15px;

    }

    

    .about-features {

        grid-template-columns: 1fr;

    }

    

    .step-features {

        grid-template-columns: 1fr;

    }



    .mission-vision-container {

        grid-template-columns: 1fr;

    }

    

    .mission-card, .vision-card {

        padding: 30px;

    }

    

    .mission-features, .vision-features {

        justify-content: center;

    }

    .premium-form-container {

        padding: 30px 25px;

    }

    

    .form-row {

        grid-template-columns: 1fr;

    }

    

    .map-features {

        flex-wrap: wrap;

        gap: 20px;

    }

    

    .google-map-wrapper {

        height: 300px;

    }

}



@media (max-width: 576px) {

    .hero h1 {

        font-size: 1.8rem;

    }

    

    .section-title h2 {

        font-size: 2rem;

    }

    

    .btn {

        padding: 0.8rem 1.5rem;

        font-size: 0.9rem;

    }

    

    .step-actions {

        flex-direction: column;

    }

    

    .journey-step {

        padding: 25px;

    }

    .about-feature i {

    font-size: 2.5rem;

    }

    .glow-button {

        width: 100%;

    }

    .premium-form-container {

        padding: 25px 20px;

    }

    

    .contact-info-card {

        padding: 20px;

    }

    

    .social-grid {

        grid-template-columns: 1fr;

    }

}



@keyframes fadeInUp {

    from {

        opacity: 0;

        transform: translateY(30px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}



.fade-in-up {

    animation: fadeInUp 0.6s ease forwards;

}



.animate-on-scroll {

    opacity: 0;

    transform: translateY(30px);

    transition: var(--transition);

}



.animate-on-scroll.animated {

    opacity: 1;

    transform: translateY(0);

}



/* Floating Elements */

.floating-elements {

    position: absolute;

    width: 100%;

    height: 100%;

    top: 0;

    left: 0;

    overflow: hidden;

    z-index: 1;

}



.floating-element {

    position: absolute;

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

    border-radius: 50%;

    animation: float 15s infinite linear;

}



@keyframes float {

    0% {

        transform: translateY(0) rotate(0deg);

    }

    50% {

        transform: translateY(-20px) rotate(180deg);

    }

    100% {

        transform: translateY(0) rotate(360deg);

    }

}



/* Decorative Elements */

.decorative-shape {

    position: absolute;

    width: 300px;

    height: 300px;

    border-radius: 50%;

    background: rgba(89, 172, 119, 0.1);

    z-index: 0;

}



.shape-1 {

    top: -150px;

    right: -150px;

}



.shape-2 {

    bottom: -150px;

    left: -150px;

}



/* Card Hover Effects */

.card-hover-effect {

    position: relative;

    overflow: hidden;

}



.card-hover-effect::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: linear-gradient(135deg, rgba(89, 172, 119, 0.1) 0%, rgba(26, 26, 26, 0.1) 100%);

    opacity: 0;

    transition: var(--transition);

    z-index: 1;

}



.card-hover-effect:hover::before {

    opacity: 1;

}



/* Glow Effects */

.glow {

    box-shadow: 0 0 20px rgba(89, 172, 119, 0.3);

}



.glow:hover {

    box-shadow: 0 0 30px rgba(89, 172, 119, 0.5);

}



/* Progress Bar */

.progress-container {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 4px;

    background: transparent;

    z-index: 1001;

}



.progress-bar {

    height: 4px;

    background: var(--primary);

    width: 0%;

    transition: width 0.3s ease;

}



/* Genel yazı stili */

.hover-glow {

    transition: all 0.3s ease; /* Yumuşak geçiş */

    display: inline-block; /* scale çalışması için */

}



/* Hover efekti */

.hover-glow:hover {

    color: #1e90ff; /* Mavi renk */

    transform: scale(1.07); /* Hafif büyütme */

    transform: translateY(-1px);

    text-shadow: 0 0 5px #1e90ff, 0 0 10px #1e90ff; /* Parlayan efekt */

}