@import url("https://fonts.googleapis.com/css2?family=Moulpali&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Fredoka:wght@300..700&family=Moulpali&display=swap");
:root {
    --main-color: rgb(255, 255, 255);
    --secondary-color: rgb(154, 161, 168);
    --accent-color: rgb(52, 211, 153);
}
body {
    box-sizing: border-box;
    background-color: rgb(0, 0, 0);
    color: var(--main-color);
    font-family: Inter, Helvetica, -apple-system, BlinkMacSystemFont, Segoe UI,
        Roboto, Helvetica Neue, Noto Sans, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 128px;
}
nav,
section {
    width: 85vw;
}
section {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 50vh;
}
a {
    text-decoration: none;
    color: inherit;
}
img {
    width: 50px;
}

/*
    ------------------
        NAV START     
    ------------------

    */
.hero-section {
    width: 100%;
    /* background-image: url(mesh-45.png);
    background-repeat: no-repeat;
    background-size: cover; */
    background-color: hsla(0, 0%, 0%, 1);
    background-image: radial-gradient(
            at 85% 18%,
            hsla(172, 0%, 0%, 1) 0px,
            transparent 50%
        ),
        radial-gradient(at 18% 16%, hsla(86, 0%, 0%, 1) 0px, transparent 50%),
        radial-gradient(at 83% 85%, hsla(142, 0%, 0%, 1) 0px, transparent 50%),
        radial-gradient(at 9% 65%, hsla(157, 0%, 0%, 1) 0px, transparent 50%),
        radial-gradient(at 52% 34%, hsla(240, 0%, 0%, 1) 0px, transparent 50%),
        radial-gradient(at 28% 41%, hsla(158, 64%, 51%, 1) 0px, transparent 50%),
        radial-gradient(at 67% 59%, hsla(158, 64%, 51%, 1) 0px, transparent 50%),
        radial-gradient(at 91% 42%, hsla(158, 64%, 51%, 1) 0px, transparent 50%);
}
nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.logo {
    display: flex;
    align-items: center;

    flex-grow: 2;
}
.logo-text.hovered,
.logo-text:hover,
.logo-img:hover {
    color: var(--accent-color);
    cursor: pointer;
}
.logo svg path,
.logo svg circle,
.logo-text {
    transition: all 0.25s ease-in-out;
}
.logo svg.hovered path,
.logo svg.hovered circle:nth-of-type(-n + 4) {
    fill: var(--accent-color);
}
.logo svg.hovered circle:nth-of-type(5) {
    stroke: var(--accent-color);
}

.logo-img {
    width: 56px;
    height: 56px;
}

.logo-text {
    padding-left: 8px;
    font-size: 24px;
    font-family: "Fredoka", "Trebuchet MS", Helvetica, sans-serif;
    font-weight: 600;
    letter-spacing: 2px;
}

nav ul {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 20px;
    flex-grow: 1;
    gap: 8px;
    max-width: 350px;
}
nav ul li a {
    transition: all 0.25s ease-in-out;
}
nav ul li a:hover {
    color: var(--accent-color);
}
@media screen and (max-width: 600px) {
    nav ul {
        position: absolute;
        display: none;
    }
    nav {
        justify-content: center;
    }
    .logo {
        flex-grow: 0;
    }
    .hero-text {
        font-size: 2.5rem !important;
    }
    .hero-img {
        width: 150px !important;
    }
    .watering,
    .monitoring {
        flex-direction: column;
    }
    .hero-logo {
        display: none !important;
    }

    .logo-text {
        font-size: 2em;
    }
    .tagline > p {
        margin-top: 10px;
    }
    .logo-img {
        width: 75px;
        height: 75px;
    }
    body {
        gap: 75px !important;
    }
}

/*
    ---------------
        NAV END     
    ---------------

    */

/*
    ---------------
        HERO START     
    ---------------

    */
.hide-message {
    display: none;
}

.hero-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}
.hero-img {
    width: 200px;
}
.hero-text {
    font-size: 4rem;
    font-family: "Fredoka", "Ubuntu", "Segoe UI", Tahoma, Geneva, Verdana,
        sans-serif;
    letter-spacing: calc(1em / 4.5);
    font-weight: 500;
    margin: 0;
}
.tagline {
    font-family: "Times New Roman", Times, serif;
    color: var(--accent-color);
    font-style: italic;
    text-align: center;
    font-size: 2rem;
}
.tagline span {
    font-weight: 900;
}

.email-form {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
form#emailForm {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    width: 75%;
}
form#emailForm input {
    width: 100%;
    height: 44px;
    border: var(--accent-color) solid 1px;
    border-radius: 10px;
    background-color: black;
    color: rgb(255, 255, 255);
    text-indent: 8px;
    font-size: 1.25rem;
    transition: all 0.2s ease-in-out;
}
form#emailForm input:focus-visible {
    outline: none;
    box-shadow: 5px 5px 2px 1px rgba(52, 211, 153, 0.253);
}
form#emailForm button {
    border: none;
    background-color: rgba(52, 211, 153, 0.85);
    border-radius: 48px;
    color: var(--main-color);
    height: 48px;
    width: 168px;
    font-size: 1.25rem;
    outline: 1px black;
    transition: all 0.2s ease-in-out;
}
form#emailForm button:hover {
    cursor: pointer;
    box-shadow: 5px 5px 2px 1px rgba(52, 211, 153, 0.253);
}

/*
    ---------------
        HERO END   
    ---------------

    */

/*
    ---------------
        BENEFITS START     
    ---------------

    */

.benefits-section h1 {
    font-size: 2rem;
}
.benefits-section .title-paragraph {
    color: var(--secondary-color) !important;
    font-weight: 600;
    max-width: 800px;
    margin-top: 0;
}

#benefits-cards-container:hover > .benefits-card::after {
    opacity: 1;
}
.card:hover::before {
    opacity: 1;
}

.benefits-card::before,
.benefits-card::after {
    border-radius: inherit;
    content: "";
    height: 100%;
    left: 0px;
    opacity: 0;
    position: absolute;
    top: 0px;
    transition: opacity 500ms;
    width: 100%;
}

.benefits-card::before {
    background: radial-gradient(
        800px circle at var(--mouse-x) var(--mouse-y),
        var(--accent-color),
        transparent 40%
    );
    z-index: 3;
}

.benefits-card::after {
    background: radial-gradient(
        600px circle at var(--mouse-x) var(--mouse-y),
        var(--accent-color),
        transparent 40%
    );
    z-index: 1;
}

.benefits-card > .card-content {
    background-color: rgb(23, 23, 23);
    border-radius: inherit;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    inset: 3px;
    padding: 10px;
    position: absolute;
    z-index: 2;
}

#benefits-cards-container {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: center;
    margin-top: 100px;
}
.benefits-card {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    display: flex;
    height: 260px;
    flex-direction: column;
    position: relative;
    width: 300px;
    transition: transform ease-in-out 0.15s;
}
.benefits-card:hover {
    transform: scale(1.05);
}
.card-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.card-title > h2 {
    margin: 0;
    flex-basis: 60%;
}
.card-icon {
    margin-right: 15px;
}
.fa-droplet {
    color: rgb(56, 136, 255);
}
.fa-temperature-low {
    color: rgb(255, 85, 7);
}
.fa-seedling {
    color: greenyellow;
}
.fa-mound {
    color: rgb(134, 72, 1);
}
/*
    ---------------
        BENEFITS END     
    ---------------

    */

/*
    ---------------
        FEATURES START     
    ---------------

    */
.features-section {
    display: flex;
    flex-direction: column;
    gap: 128px;
}
.watering,
.monitoring {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.watering-content,
.monitoring-content {
    flex-basis: 40%;
    padding-block: 48px;
}

.watering-content > h2,
.monitoring-content > h2 {
    color: var(--accent-color);
    font-weight: 600;
    font-size: 1.2rem;
    margin-bottom: 0;
}
.watering-content > h1,
.monitoring-content > h1 {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 2.5rem;
}
.watering-content > p,
.monitoring-content > p {
    color: var(--secondary-color);
    margin-top: 0.5rem;
}
.watering-content > ul,
.monitoring-content > ul {
    list-style: none;
    padding: 0;
    color: var(--secondary-color);
}
ul li {
    margin-block: 0.75rem;
}
ul i {
    color: rgb(11, 137, 255);
    font-size: 1.5rem;
    margin-right: 0.75rem;
}
.watering-img,
.monitoring-img {
    flex-basis: 40%;
    display: flex;
    justify-content: center;
    height: 100%;
}
.watering-img > .img,
.monitoring-img > .img {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;

    width: calc(442px * 0.7);
    height: calc(772px * 0.7);
    border-radius: 10%;
}
.watering-img > .img {
    background-image: linear-gradient(
            45deg,
            rgba(0, 0, 0, 0.7) 35%,
            rgba(0, 255, 166, 0.1) 50%,
            rgba(0, 0, 0, 0.7) 65%
        ),
        url(photob.jpg);
    filter: brightness(65%);
}
.monitoring-img > .img {
    background-image: linear-gradient(
            -45deg,
            rgba(0, 0, 0, 0.7) 35%,
            rgba(0, 255, 166, 0.1) 50%,
            rgba(0, 0, 0, 0.7) 65%
        ),
        url(photo2b.jpg);
    filter: brightness(60%);
}

/*
    ---------------
        FEATURES END     
    ---------------

    */

/*
    ---------------
        VISION START     
    ---------------

    */

.vision-section > h1 {
    font-size: 2rem;
}

/* 🌍 Dil Seçimi Butonları */
.lang-switch {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 10px;
  }
  
  .lang-switch button {
    padding: 4px 10px;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    background-color: #fff;
    color: #333;
    cursor: pointer;
    transition: background 0.3s ease;
  }
  
  .lang-switch button:hover {
    background-color: #eee;
  }
  
/* 🌱 Sensör Kartları */
.sensor-card {
    padding: 30px;
    border-radius: 20px;
    font-size: 24px;
    font-weight: bold;
    color: white;
    margin-bottom: 16px;
    transition: all 0.3s ease;
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.5);
  }

  .language-switch {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: bold;
    margin-left: 20px;
}

.language-switch a {
    color: white;
    text-decoration: none;
    padding: 6px 10px;
    border-radius: 8px;
    transition: background-color 0.3s;
    background-color: #2c3e50;
}

.language-switch a:hover {
    background-color: #16a085;
}