body {
    background-color: #11151a;
}

* {
    -webkit-tap-highlight-color: transparent;
}


.header h1{
    font-family: 'Poppins', sans-serif;
    font-size: 64px;
    color: #fff;
    position: absolute;
    top: 120px;
    left: 15%;
    z-index: 3;
}

.space-light-glow {
    position: absolute;
    top: 100px;
    left: 50%;
    transform: translateX(-50%);
    width: 1800px;
    height: 1500px;
    background: radial-gradient(ellipse at right,
            rgba(0, 217, 255, 0.4),
            rgba(0, 0, 0, 0) 70%);
    filter: blur(150px);
    opacity: 0.8;
    border-radius: 50%;
    animation: glowPulse 8s ease-in-out infinite;
    z-index: 1;
    pointer-events: none;
}

@keyframes glowPulse {

    0%,
    100% {
        opacity: 0.6;
        transform: translateX(-50%) scale(1);
    }

    50% {
        opacity: 1;
        transform: translateX(-50%) scale(1.05);
    }
}

.text h1 {
    font-family: 'Poppins', sans-serif;
    font-size: 36px;
    color: #fff;
    position: absolute;
    top: 260px;
    width: 50%;
    left: 15%;
    z-index: 1;
    text-align: left;
}

.text p {
    font-family: 'Poppins', sans-serif;
    font-size: 22px;
    color: #e2e2e2;
    position: absolute;
    top: 390px;
    width: 40%;
    left: 15%;
    z-index: 1;
    text-align: left;
}

.create-website button {
    background-color: #fff;
    color: #000;
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    border: none;
    border-radius: 10px;
    position: absolute;
    top:  960px;
    left: 15%;
    width: 24%;
    height: 55px;
    cursor: pointer;
    transition: all .3s ease-in-out;
    z-index: 3;
}

.create-website button:hover {
    background-color: #dddddd;
}

.scene {
            width: 20%;
            height: 400px;
            position: relative;
            top: 250px;
            left: 61%;
        }
        
        #plant-svg {
            width: 100%;
            height: 100%;
            overflow: visible;
        }
        
        path {
            fill: none;
            stroke-linecap: round;
            stroke-width: 4;
        }
        
        /* 1. Kılavuz (Çok silik arka plan izi) */
        .guide {
            stroke: #000;
            opacity: 0.05;
        }
        
#flow-line {
    stroke: #4CAF50;
    stroke-dasharray: 60 340; 
    stroke-dashoffset: 400; 
    animation: flow-effect 1.5s linear infinite; 
    opacity: 1;
    transition: opacity 0.3s;
}

@keyframes flow-effect {
    to {
        stroke-dashoffset: 0; 
    }
}

#flow-line.hide {
    opacity: 0;
}

#fill-line {
    stroke: #4CAF50;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000; 
    transition: stroke-dashoffset 2s ease-out, opacity 0.3s; 
    opacity: 0; 
}


#fill-line.done {
    stroke-dashoffset: 0; 
    opacity: 1;
}

.leaf {
    fill: #66BB6A;
}

.leaf-group {
    transform: translate(var(--x), var(--y)) rotate(var(--aci)) scale(0);
    transform-origin: 0 0;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.leaf-group.opening {
    transform: translate(var(--x), var(--y)) rotate(var(--aci)) scale(1);
}
        
        
        /* --- Buton --- */
        #grow-plant {
            padding: 16px 60px;
            background-color: #2e7d32;
            color: white;
            border: none;
            border-radius: 50px;
            font-size: 1rem;
            font-weight: bold;
            cursor: pointer;
            box-shadow: 0 4px 15px rgba(46, 125, 50, 0.3);
            transition: transform 0.1s;
            outline: none;
            display: block; 
            position: absolute;
            left: 65.5%;
            top: 750px;
            transition: all .3s ease-in-out;
            z-index: 2;
        }
        
        #grow-plant:active {
            transform: scale(0.95);
        }

        #grow-plant:hover {
            background-color: #35943a;
            box-shadow: #35943a;
            transform: scale(1.05);
        }

.card{
    background-color: #fff;
    border-radius: 20px;
    padding: 28px;
    min-width: 300px;
    box-shadow: 0 10px 30px rgba(2,6,23,0.6);
    display:flex;
    gap:20px;
    align-items:center;
    position: absolute;
    top: 850px;
    left: 61.7%;
    z-index: 2;
  }

  .seed {
    width:86px;
    height:86px;
    border-radius:16px;
    display:flex;
    align-items:center;
    justify-content:center;
    background-color: #4CAF50;
    flex-shrink:0;
  }

  .seed svg{
     width: 100px; 
     height: 100px; 
     transform-origin:center; 
     animation: float 3.6s ease-in-out infinite; 
    }
  @keyframes float{
    0%{ transform: translateY(0) rotate(-2deg); }
    50%{ transform: translateY(-6px) rotate(2deg); }
    100%{ transform: translateY(0) rotate(-2deg); }
  }

  .info{
    display:flex;
    flex-direction:column;
    gap:6px;
  }

  .count{
    font-family: 'Poppins', sans-serif;
    font-size:40px;
    font-weight:700;
    letter-spacing: -0.02em;
    display:flex;
    align-items:baseline;
    gap:12px;
  }

  .count .num{
    font-family: 'Poppins', sans-serif;
    color: #66BB6A;
    font-feature-settings: "tnum";
  }

  .label{
    font-family: 'Poppins', sans-serif;
    font-size:14px;
    color: #94aabb;
    opacity:0.9;
  }

  .sub{
    font-family: 'Poppins', sans-serif;
    margin-top:6px;
    font-size:13px;
    color:#94aabb;
  }

.footer {
    position: absolute;
    top: 1200px;
    left: 0%;
}

/*RESPONSIVE*/
@media (min-width: 240px) and (max-width: 359.98px) and (orientation: portrait)  {
body {
    background-color: #11151a;
}

.header h1{ 
    font-family: 'Poppins', sans-serif;
    font-size: 32px;
    color: #fff;
    position: absolute;
    top: 100px;
    left: 0%;
    z-index: 3;
    width: 100%;
    text-align: center;
}

.space-light-glow { 
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 600px;
    background: radial-gradient(ellipse at right,
            rgba(0, 217, 255, 0.4),
            rgba(0, 0, 0, 0) 70%);
    filter: blur(150px);
    opacity: 0.8;
    border-radius: 50%;
    animation: glowPulse 8s ease-in-out infinite;
    z-index: 1;
    pointer-events: none;
}

@keyframes glowPulse {

    0%,
    100% {
        opacity: 0.6;
        transform: translateX(-50%) scale(1);
    }

    50% {
        opacity: 1;
        transform: translateX(-50%) scale(1.05);
    }
}

.text h1 {  
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    color: #fff;
    position: absolute;
    top: 800px;
    width: 88%;
    left: 6%;
    z-index: 1;
    text-align: left;
}

.text p { 
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    color: #e2e2e2;
    position: absolute;
    top: 890px;
    width: 88%;
    left: 6%;
    z-index: 1;
    text-align: left;
}

.create-website button { 
    background-color: #fff;
    color: #000;
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    border: none;
    border-radius: 10px;
    position: absolute ;
    top:  1700px;
    left: 6%;
    width: 88%;
    height: 55px;
    cursor: pointer;
    transition: all .3s ease-in-out;
    z-index: 3;
}

.create-website button:hover {
    background-color: #dddddd;
}

.scene { 
            width: 88%;
            height: 400px;
            position: relative;
            top: 200px;
            left: 6%;
        }
        
        #plant-svg {
            width: 100%;
            height: 100%;
            overflow: visible;
        }
        
        path {
            fill: none;
            stroke-linecap: round;
            stroke-width: 4;
        }
        
        /* 1. Kılavuz (Çok silik arka plan izi) */
        .guide {
            stroke: #000;
            opacity: 0.05;
        }
        
#flow-line { 
    stroke: #4CAF50;
    stroke-dasharray: 60 340; 
    stroke-dashoffset: 400; 
    animation: flow-effect 1.5s linear infinite; 
    opacity: 1;
    transition: opacity 0.3s;
}

@keyframes flow-effect {
    to {
        stroke-dashoffset: 0; 
    }
}

#flow-line.hide {
    opacity: 0;
}

#fill-line {
    stroke: #4CAF50;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000; 
    transition: stroke-dashoffset 2s ease-out, opacity 0.3s; 
    opacity: 0; 
}


#fill-line.done {
    stroke-dashoffset: 0; 
    opacity: 1;
}

.leaf {
    fill: #66BB6A;
}

.leaf-group {
    transform: translate(var(--x), var(--y)) rotate(var(--aci)) scale(0);
    transform-origin: 0 0;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.leaf-group.opening {
    transform: translate(var(--x), var(--y)) rotate(var(--aci)) scale(1);
}
        
        
/*BUTTON*/
        #grow-plant { 
            padding: 16px 60px;
            background-color: #2e7d32;
            color: white;
            border: none;
            border-radius: 50px;
            font-size: 1rem;
            font-weight: bold;
            cursor: pointer;
            box-shadow: 0 4px 15px rgba(46, 125, 50, 0.3);
            transition: transform 0.1s;
            outline: none;
            display: block; 
            width: 50%;
            position: absolute;
            left: 25%;
            top: 630px;
            transition: all .3s ease-in-out;
            z-index: 2;
        }
        
        #grow-plant:active {
            transform: scale(0.95);
        }

        #grow-plant:hover {
            background-color: #35943a;
            box-shadow: #35943a;
            transform: scale(1.05);
        }

.card {   
    display: block;
    background-color: #fff;
    border-radius: 20px;
    width: 88%;
    height: 140px;
    box-shadow: 0 10px 30px rgba(2,6,23,0.6);
    gap: 0px;
    padding: 0px;
    align-items:center;
    position: absolute;
    top: 1500px;
    left: 6%;
    z-index: 2;
  }

  .seed { 
    width: 100px;
    height: 100px;
    border-radius:16px;
    display:block;
    position: absolute;
    top: 20px;
    left: 5%;
    align-items:center;
    justify-content:center;
    background-color: #4CAF50;
    flex-shrink:0;
  }

  .seed svg{
     width: 100px; 
     height: 100px; 
     transform-origin:center; 
     animation: float 3.6s ease-in-out infinite; 
    }
  @keyframes float{
    0%{ transform: translateY(0) rotate(-2deg); }
    50%{ transform: translateY(-6px) rotate(2deg); }
    100%{ transform: translateY(0) rotate(-2deg); }
  }

  .info{
    width: 50%;
    display: block;
    flex-direction:column;
    gap:6px;
    position: relative;
    left: 40%;
    top: 10px;
  }

  .count{
    font-family: 'Poppins', sans-serif;
    font-size:40px;
    font-weight:700;
    letter-spacing: -0.02em;
    display:flex;
    align-items:baseline;
    gap:12px;
  }

  .count .num{
    font-family: 'Poppins', sans-serif;
    color: #66BB6A;
    font-feature-settings: "tnum";
  }

  .label{
    font-family: 'Poppins', sans-serif;
    font-size:14px;
    color: #94aabb;
    opacity:0.9;
  }

  .sub{
    font-family: 'Poppins', sans-serif;
    margin-top:6px;
    font-size:13px;
    color:#94aabb;
  }

.mobile-footer {
    position: absolute;
    top: 1850px;
    left: 0%;
}  
}
  
@media (min-width: 360px) and (max-width: 575.98px) and (orientation: portrait) {
body {
    background-color: #11151a;
}

.header h1{ 
    font-family: 'Poppins', sans-serif;
    font-size: 32px;
    color: #fff;
    position: absolute;
    top: 100px;
    left: 0%;
    z-index: 3;
    width: 100%;
    text-align: center;
}

.space-light-glow { 
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
    width: 350px;
    height: 1000px;
    background: radial-gradient(ellipse at right,
            rgba(0, 217, 255, 0.4),
            rgba(0, 0, 0, 0) 70%);
    filter: blur(150px);
    opacity: 0.8;
    border-radius: 50%;
    animation: glowPulse 8s ease-in-out infinite;
    z-index: 1;
    pointer-events: none;
}

@keyframes glowPulse {

    0%,
    100% {
        opacity: 0.6;
        transform: translateX(-50%) scale(1);
    }

    50% {
        opacity: 1;
        transform: translateX(-50%) scale(1.05);
    }
}

.text h1 {  
    font-family: 'Poppins', sans-serif;
    font-size: 22px;
    color: #fff;
    position: absolute;
    top: 800px;
    width: 88%;
    left: 6%;
    z-index: 1;
    text-align: left;
}

.text p { 
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    color: #e2e2e2;
    position: absolute;
    top: 890px;
    width: 88%;
    left: 6%;
    z-index: 1;
    text-align: left;
}

.create-website button { 
    background-color: #fff;
    color: #000;
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    border: none;
    border-radius: 10px;
    position: absolute ;
    top:  1700px;
    left: 6%;
    width: 88%;
    height: 55px;
    cursor: pointer;
    transition: all .3s ease-in-out;
    z-index: 3;
}

.create-website button:hover {
    background-color: #dddddd;
}

.scene { 
            width: 88%;
            height: 400px;
            position: relative;
            top: 200px;
            left: 6%;
        }
        
        #plant-svg {
            width: 100%;
            height: 100%;
            overflow: visible;
        }
        
        path {
            fill: none;
            stroke-linecap: round;
            stroke-width: 4;
        }
        
        /* 1. Kılavuz (Çok silik arka plan izi) */
        .guide {
            stroke: #000;
            opacity: 0.05;
        }
        
#flow-line { 
    stroke: #4CAF50;
    stroke-dasharray: 60 340; 
    stroke-dashoffset: 400; 
    animation: flow-effect 1.5s linear infinite; 
    opacity: 1;
    transition: opacity 0.3s;
}

@keyframes flow-effect {
    to {
        stroke-dashoffset: 0; 
    }
}

#flow-line.hide {
    opacity: 0;
}

#fill-line {
    stroke: #4CAF50;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000; 
    transition: stroke-dashoffset 2s ease-out, opacity 0.3s; 
    opacity: 0; 
}


#fill-line.done {
    stroke-dashoffset: 0; 
    opacity: 1;
}

.leaf {
    fill: #66BB6A;
}

.leaf-group {
    transform: translate(var(--x), var(--y)) rotate(var(--aci)) scale(0);
    transform-origin: 0 0;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.leaf-group.opening {
    transform: translate(var(--x), var(--y)) rotate(var(--aci)) scale(1);
}
        
        
/*BUTTON*/
        #grow-plant { 
            padding: 16px 60px;
            background-color: #2e7d32;
            color: white;
            border: none;
            border-radius: 50px;
            font-size: 1rem;
            font-weight: bold;
            cursor: pointer;
            box-shadow: 0 4px 15px rgba(46, 125, 50, 0.3);
            transition: transform 0.1s;
            outline: none;
            display: block; 
            width: 50%;
            position: absolute;
            left: 25%;
            top: 630px;
            transition: all .3s ease-in-out;
            z-index: 2;
        }
        
        #grow-plant:active {
            transform: scale(0.95);
        }

        #grow-plant:hover {
            background-color: #35943a;
            box-shadow: #35943a;
            transform: scale(1.05);
        }

.card {   
    display: block;
    background-color: #fff;
    border-radius: 20px;
    width: 88%;
    height: 140px;
    box-shadow: 0 10px 30px rgba(2,6,23,0.6);
    gap: 0px;
    padding: 0px;
    align-items:center;
    position: absolute;
    top: 1500px;
    left: 6%;
    z-index: 2;
  }

  .seed { 
    width: 100px;
    height: 100px;
    border-radius:16px;
    display:block;
    position: absolute;
    top: 20px;
    left: 5%;
    align-items:center;
    justify-content:center;
    background-color: #4CAF50;
    flex-shrink:0;
  }

  .seed svg{
     width: 100px; 
     height: 100px; 
     transform-origin:center; 
     animation: float 3.6s ease-in-out infinite; 
    }
  @keyframes float{
    0%{ transform: translateY(0) rotate(-2deg); }
    50%{ transform: translateY(-6px) rotate(2deg); }
    100%{ transform: translateY(0) rotate(-2deg); }
  }

  .info{
    width: 50%;
    display: block;
    flex-direction:column;
    gap:6px;
    position: relative;
    left: 40%;
    top: 10px;
  }

  .count{
    font-family: 'Poppins', sans-serif;
    font-size:40px;
    font-weight:700;
    letter-spacing: -0.02em;
    display:flex;
    align-items:baseline;
    gap:12px;
  }

  .count .num{
    font-family: 'Poppins', sans-serif;
    color: #66BB6A;
    font-feature-settings: "tnum";
  }

  .label{
    font-family: 'Poppins', sans-serif;
    font-size:14px;
    color: #94aabb;
    opacity:0.9;
  }

  .sub{
    font-family: 'Poppins', sans-serif;
    margin-top:6px;
    font-size:13px;
    color:#94aabb;
  }

.mobile-footer {
    position: absolute;
    top: 1850px;
    left: 0%;
}
}

@media (min-width: 576px) and (max-width: 767.98px) and (orientation: portrait)  {
body {
    background-color: #11151a;
}

.header h1{ 
    font-family: 'Poppins', sans-serif;
    font-size: 34px;
    color: #fff;
    position: absolute;
    top: 100px;
    left: 6%;
    z-index: 3;
    width: 88%;
    text-align: left;
}

.space-light-glow { 
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
    width: 350px;
    height: 1000px;
    background: radial-gradient(ellipse at right,
            rgba(0, 217, 255, 0.4),
            rgba(0, 0, 0, 0) 70%);
    filter: blur(150px);
    opacity: 0.8;
    border-radius: 50%;
    animation: glowPulse 8s ease-in-out infinite;
    z-index: 1;
    pointer-events: none;
}

@keyframes glowPulse {

    0%,
    100% {
        opacity: 0.6;
        transform: translateX(-50%) scale(1);
    }

    50% {
        opacity: 1;
        transform: translateX(-50%) scale(1.05);
    }
}

.scene { 
            width: 88%;
            height: 400px;
            position: relative;
            top: 200px;
            left: 6%;
        }
        
        #plant-svg {
            width: 100%;
            height: 100%;
            overflow: visible;
        }
        
        path {
            fill: none;
            stroke-linecap: round;
            stroke-width: 4;
        }
        
        /* 1. Kılavuz (Çok silik arka plan izi) */
        .guide {
            stroke: #000;
            opacity: 0.05;
        }
        
#flow-line { 
    stroke: #4CAF50;
    stroke-dasharray: 60 340; 
    stroke-dashoffset: 400; 
    animation: flow-effect 1.5s linear infinite; 
    opacity: 1;
    transition: opacity 0.3s;
}

@keyframes flow-effect {
    to {
        stroke-dashoffset: 0; 
    }
}

#flow-line.hide {
    opacity: 0;
}

#fill-line {
    stroke: #4CAF50;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000; 
    transition: stroke-dashoffset 2s ease-out, opacity 0.3s; 
    opacity: 0; 
}


#fill-line.done {
    stroke-dashoffset: 0; 
    opacity: 1;
}

.leaf {
    fill: #66BB6A;
}

.leaf-group {
    transform: translate(var(--x), var(--y)) rotate(var(--aci)) scale(0);
    transform-origin: 0 0;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.leaf-group.opening {
    transform: translate(var(--x), var(--y)) rotate(var(--aci)) scale(1);
}
        
        
/*BUTTON*/
        #grow-plant { 
            padding: 16px 60px;
            background-color: #2e7d32;
            color: white;
            border: none;
            border-radius: 50px;
            font-size: 1rem;
            font-weight: bold;
            cursor: pointer;
            box-shadow: 0 4px 15px rgba(46, 125, 50, 0.3);
            transition: transform 0.1s;
            outline: none;
            display: block; 
            width: 50%;
            position: absolute;
            left: 25%;
            top: 650px;
            transition: all .3s ease-in-out;
            z-index: 2;
        }
        
        #grow-plant:active {
            transform: scale(0.95);
        }

        #grow-plant:hover {
            background-color: #35943a;
            box-shadow: #35943a;
            transform: scale(1.05);
        }

.text h1 {  
    font-family: 'Poppins', sans-serif;
    font-size: 24px;
    color: #fff;
    position: absolute;
    top: 800px;
    width: 88%;
    left: 6%;
    z-index: 1;
    text-align: left;
}

.text p { 
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    color: #e2e2e2;
    position: absolute;
    top: 890px;
    width: 88%;
    left: 6%;
    z-index: 1;
    text-align: left;
}

.create-website button {
    background-color: #2e7d32;
    color: #fff;
    font-size: 18px;
    border: none;
    border-radius: 30px;
    position: absolute ;
    top:  1650px;
    left: 20%;
    width: 60%;
    height: 55px;
    cursor: pointer;
    transition: all .3s ease-in-out;
    z-index: 3;
}

.create-website button:hover {
    background-color: #dddddd;
}


.card {   
    display: block;
    background-color: #fff;
    border-radius: 20px;
    width: 60%;
    height: 140px;
    box-shadow: 0 10px 30px rgba(2,6,23,0.6);
    gap: 0px;
    padding: 0px;
    align-items:center;
    position: absolute;
    top: 1460px;
    left: 20%;
    z-index: 2;
  }

  .seed { 
    width: 100px;
    height: 100px;
    border-radius:16px;
    display:block;
    position: absolute;
    top: 20px;
    left: 5%;
    align-items:center;
    justify-content:center;
    background-color: #4CAF50;
    flex-shrink:0;
  }

  .seed svg{
     width: 100px; 
     height: 100px; 
     transform-origin:center; 
     animation: float 3.6s ease-in-out infinite; 
    }
  @keyframes float{
    0%{ transform: translateY(0) rotate(-2deg); }
    50%{ transform: translateY(-6px) rotate(2deg); }
    100%{ transform: translateY(0) rotate(-2deg); }
  }

  .info{
    width: 50%;
    display: block;
    flex-direction:column;
    gap:6px;
    position: relative;
    left: 40%;
    top: 10px;
  }

  .count{
    font-family: 'Poppins', sans-serif;
    font-size:40px;
    font-weight:700;
    letter-spacing: -0.02em;
    display:flex;
    align-items:baseline;
    gap:12px;
  }

  .count .num{
    font-family: 'Poppins', sans-serif;
    color: #66BB6A;
    font-feature-settings: "tnum";
  }

  .label{
    font-family: 'Poppins', sans-serif;
    font-size:14px;
    color: #94aabb;
    opacity:0.9;
  }

  .sub{
    font-family: 'Poppins', sans-serif;
    margin-top:6px;
    font-size:13px;
    color:#94aabb;
  }

.mobile-footer {
    position: absolute;
    top: 1800px;
    left: 0%;
}
}
     
@media  (min-width: 768px) and (max-width: 991.98px) and (orientation: portrait) {
body {
    background-color: #11151a;
}

.header h1{ 
    font-family: 'Poppins', sans-serif;
    font-size: 34px;
    color: #fff;
    position: absolute;
    top: 100px;
    left: 6%;
    z-index: 3;
    width: 88%;
    text-align: left;
}

.space-light-glow { 
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
    width: 730px;
    height: 1000px;
    background: radial-gradient(ellipse at right,
            rgba(0, 217, 255, 0.4),
            rgba(0, 0, 0, 0) 70%);
    filter: blur(150px);
    opacity: 0.8;
    border-radius: 50%;
    animation: glowPulse 8s ease-in-out infinite;
    z-index: 1;
    pointer-events: none;
}

@keyframes glowPulse {

    0%,
    100% {
        opacity: 0.6;
        transform: translateX(-50%) scale(1);
    }

    50% {
        opacity: 1;
        transform: translateX(-50%) scale(1.05);
    }
}

.scene { 
            width: 88%;
            height: 400px;
            position: relative;
            top: 200px;
            left: 6%;
        }
        
        #plant-svg {
            width: 100%;
            height: 100%;
            overflow: visible;
        }
        
        path {
            fill: none;
            stroke-linecap: round;
            stroke-width: 4;
        }
        
        /* 1. Kılavuz (Çok silik arka plan izi) */
        .guide {
            stroke: #000;
            opacity: 0.05;
        }
        
#flow-line { 
    stroke: #4CAF50;
    stroke-dasharray: 60 340; 
    stroke-dashoffset: 400; 
    animation: flow-effect 1.5s linear infinite; 
    opacity: 1;
    transition: opacity 0.3s;
}

@keyframes flow-effect {
    to {
        stroke-dashoffset: 0; 
    }
}

#flow-line.hide {
    opacity: 0;
}

#fill-line {
    stroke: #4CAF50;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000; 
    transition: stroke-dashoffset 2s ease-out, opacity 0.3s; 
    opacity: 0; 
}


#fill-line.done {
    stroke-dashoffset: 0; 
    opacity: 1;
}

.leaf {
    fill: #66BB6A;
}

.leaf-group {
    transform: translate(var(--x), var(--y)) rotate(var(--aci)) scale(0);
    transform-origin: 0 0;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.leaf-group.opening {
    transform: translate(var(--x), var(--y)) rotate(var(--aci)) scale(1);
}
        
        
/*BUTTON*/
        #grow-plant { 
            padding: 16px 60px;
            background-color: #2e7d32;
            color: white;
            border: none;
            border-radius: 50px;
            font-size: 1rem;
            font-weight: bold;
            cursor: pointer;
            box-shadow: 0 4px 15px rgba(46, 125, 50, 0.3);
            transition: transform 0.1s;
            outline: none;
            display: block; 
            width: 50%;
            position: absolute;
            left: 25%;
            top: 650px;
            transition: all .3s ease-in-out;
            z-index: 2;
        }
        
        #grow-plant:active {
            transform: scale(0.95);
        }

        #grow-plant:hover {
            background-color: #35943a;
            box-shadow: #35943a;
            transform: scale(1.05);
        }

.text h1 {  
    font-family: 'Poppins', sans-serif;
    font-size: 24px;
    color: #fff;
    position: absolute;
    top: 800px;
    width: 88%;
    left: 6%;
    z-index: 1;
    text-align: left;
}

.text p { 
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    color: #e2e2e2;
    position: absolute;
    top: 890px;
    width: 88%;
    left: 6%;
    z-index: 1;
    text-align: left;
}

.create-website button {
    background-color: #2e7d32;
    color: #fff;
    font-size: 18px;
    border: none;
    border-radius: 30px;
    position: absolute ;
    top:  1650px;
    left: 20%;
    width: 60%;
    height: 55px;
    cursor: pointer;
    transition: all .3s ease-in-out;
    z-index: 3;
}

.create-website button:hover {
    background-color: #dddddd;
}


.card {   
    display: block;
    background-color: #fff;
    border-radius: 20px;
    width: 60%;
    height: 140px;
    box-shadow: 0 10px 30px rgba(2,6,23,0.6);
    gap: 0px;
    padding: 0px;
    align-items:center;
    position: absolute;
    top: 1460px;
    left: 20%;
    z-index: 2;
  }

  .seed { 
    width: 100px;
    height: 100px;
    border-radius:16px;
    display:block;
    position: absolute;
    top: 20px;
    left: 5%;
    align-items:center;
    justify-content:center;
    background-color: #4CAF50;
    flex-shrink:0;
  }

  .seed svg{
     width: 100px; 
     height: 100px; 
     transform-origin:center; 
     animation: float 3.6s ease-in-out infinite; 
    }
  @keyframes float{
    0%{ transform: translateY(0) rotate(-2deg); }
    50%{ transform: translateY(-6px) rotate(2deg); }
    100%{ transform: translateY(0) rotate(-2deg); }
  }

  .info{
    width: 50%;
    display: block;
    flex-direction:column;
    gap:6px;
    position: relative;
    left: 40%;
    top: 10px;
  }

  .count{
    font-family: 'Poppins', sans-serif;
    font-size:40px;
    font-weight:700;
    letter-spacing: -0.02em;
    display:flex;
    align-items:baseline;
    gap:12px;
  }

  .count .num{
    font-family: 'Poppins', sans-serif;
    color: #66BB6A;
    font-feature-settings: "tnum";
  }

  .label{
    font-family: 'Poppins', sans-serif;
    font-size:14px;
    color: #94aabb;
    opacity:0.9;
  }

  .sub{
    font-family: 'Poppins', sans-serif;
    margin-top:6px;
    font-size:13px;
    color:#94aabb;
  }

.mobile-footer {
    position: absolute;
    top: 1800px;
    left: 0%;
}
}
     
@media (min-width: 992px) and (max-width: 1199.98px) and (orientation: portrait)  {
body {
    background-color: #11151a;
}

.header h1{ 
    font-family: 'Poppins', sans-serif;
    font-size: 42px;
    color: #fff;
    position: absolute;
    top: 140px;
    left: 6%;
    z-index: 3;
    width: 88%;
    text-align: left;
}

.space-light-glow { 
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
    width: 960px;
    height: 1000px;
    background: radial-gradient(ellipse at right,
            rgba(0, 217, 255, 0.4),
            rgba(0, 0, 0, 0) 70%);
    filter: blur(150px);
    opacity: 0.8;
    border-radius: 50%;
    animation: glowPulse 8s ease-in-out infinite;
    z-index: 1;
    pointer-events: none;
}

@keyframes glowPulse {

    0%,
    100% {
        opacity: 0.6;
        transform: translateX(-50%) scale(1);
    }

    50% {
        opacity: 1;
        transform: translateX(-50%) scale(1.05);
    }
}

.scene { 
            width: 88%;
            height: 400px;
            position: relative;
            top: 260px;
            left: 6%;
        }
        
        #plant-svg {
            width: 100%;
            height: 100%;
            overflow: visible;
        }
        
        path {
            fill: none;
            stroke-linecap: round;
            stroke-width: 4;
        }
        
        /* 1. Kılavuz (Çok silik arka plan izi) */
        .guide {
            stroke: #000;
            opacity: 0.05;
        }
        
#flow-line { 
    stroke: #4CAF50;
    stroke-dasharray: 60 340; 
    stroke-dashoffset: 400; 
    animation: flow-effect 1.5s linear infinite; 
    opacity: 1;
    transition: opacity 0.3s;
}

@keyframes flow-effect {
    to {
        stroke-dashoffset: 0; 
    }
}

#flow-line.hide {
    opacity: 0;
}

#fill-line {
    stroke: #4CAF50;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000; 
    transition: stroke-dashoffset 2s ease-out, opacity 0.3s; 
    opacity: 0; 
}


#fill-line.done {
    stroke-dashoffset: 0; 
    opacity: 1;
}

.leaf {
    fill: #66BB6A;
}

.leaf-group {
    transform: translate(var(--x), var(--y)) rotate(var(--aci)) scale(0);
    transform-origin: 0 0;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.leaf-group.opening {
    transform: translate(var(--x), var(--y)) rotate(var(--aci)) scale(1);
}
        
        
/*BUTTON*/
        #grow-plant { 
            padding: 24px 60px;
            background-color: #2e7d32;
            color: white;
            border: none;
            border-radius: 50px;
            font-size: 1.2rem;
            font-weight: bold;
            cursor: pointer;
            box-shadow: 0 4px 15px rgba(46, 125, 50, 0.3);
            transition: transform 0.1s;
            outline: none;
            display: block; 
            width: 30%;
            position: absolute;
            left: 35%;
            top: 720px;
            transition: all .3s ease-in-out;
            z-index: 2;
        }
        
        #grow-plant:active {
            transform: scale(0.95);
        }

        #grow-plant:hover {
            background-color: #35943a;
            box-shadow: #35943a;
            transform: scale(1.05);
        }

.text h1 {  
    font-family: 'Poppins', sans-serif;
    font-size: 34px;
    color: #fff;
    position: absolute;
    top: 900px;
    width: 88%;
    left: 6%;
    z-index: 1;
    text-align: left;
}

.text p { 
    font-family: 'Poppins', sans-serif;
    font-size: 22px;
    color: #e2e2e2;
    position: absolute;
    top: 1050px;
    width: 88%;
    left: 6%;
    z-index: 1;
    text-align: left;
}

.create-website button {
    background-color: #2e7d32;
    color: #fff;
    font-size: 22px;
    border: none;
    border-radius: 20px;
    position: absolute ;
    top:  1600px;
    left: 48%;
    width: 46%;
    height: 140px;
    cursor: pointer;
    transition: all .3s ease-in-out;
    z-index: 3;
}

.create-website button:hover {
    background-color: #dddddd;
}


.card {   
    display: block;
    background-color: #fff;
    border-radius: 20px;
    width: 40%;
    height: 140px;
    box-shadow: 0 10px 30px rgba(2,6,23,0.6);
    gap: 0px;
    padding: 0px;
    align-items:center;
    position: absolute;
    top: 1600px;
    left: 6%;
    z-index: 2;
  }

  .seed { 
    width: 100px;
    height: 100px;
    border-radius:16px;
    display:block;
    position: absolute;
    top: 20px;
    left: 5%;
    align-items:center;
    justify-content:center;
    background-color: #4CAF50;
    flex-shrink:0;
  }

  .seed svg{
     width: 100px; 
     height: 100px; 
     transform-origin:center; 
     animation: float 3.6s ease-in-out infinite; 
    }
  @keyframes float{
    0%{ transform: translateY(0) rotate(-2deg); }
    50%{ transform: translateY(-6px) rotate(2deg); }
    100%{ transform: translateY(0) rotate(-2deg); }
  }

  .info{
    width: 50%;
    display: block;
    flex-direction:column;
    gap:6px;
    position: relative;
    left: 40%;
    top: 10px;
  }

  .count{
    font-family: 'Poppins', sans-serif;
    font-size:40px;
    font-weight:700;
    letter-spacing: -0.02em;
    display:flex;
    align-items:baseline;
    gap:12px;
  }

  .count .num{
    font-family: 'Poppins', sans-serif;
    color: #66BB6A;
    font-feature-settings: "tnum";
  }

  .label{
    font-family: 'Poppins', sans-serif;
    font-size:14px;
    color: #94aabb;
    opacity:0.9;
  }

  .sub{
    font-family: 'Poppins', sans-serif;
    margin-top:6px;
    font-size:13px;
    color:#94aabb;
  }

.mobile-footer {
    position: absolute;
    top: 2000px;
    left: 0%;
}
}

@media  (min-width: 1200px) and (max-width: 1399.98px)  {
body {
    background-color: #11151a;
}

.header h1{
    font-family: 'Poppins', sans-serif;
    font-size: 42px;
    color: #fff;
    position: absolute;
    top: 100px;
    left: 15%;
    z-index: 3;
}

.space-light-glow {
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
    width: 1100px;
    height: 1200px;
    background: radial-gradient(ellipse at right,
            rgba(0, 217, 255, 0.4),
            rgba(0, 0, 0, 0) 70%);
    filter: blur(150px);
    opacity: 0.8;
    border-radius: 50%;
    animation: glowPulse 8s ease-in-out infinite;
    z-index: 1;
    pointer-events: none;
}

@keyframes glowPulse {

    0%,
    100% {
        opacity: 0.6;
        transform: translateX(-50%) scale(1);
    }

    50% {
        opacity: 1;
        transform: translateX(-50%) scale(1.05);
    }
}

.text h1 {
    font-family: 'Poppins', sans-serif;
    font-size: 26px;
    color: #fff;
    position: absolute;
    top: 190px;
    width: 50%;
    left: 15%;
    z-index: 1;
    text-align: left;
}

.text p {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    color: #e2e2e2;
    position: absolute;
    top: 300px;
    width: 38%;
    left: 15%;
    z-index: 1;
    text-align: left;
}

.create-website button {
    background-color: #fff;
    color: #000;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    border: none;
    border-radius: 10px;
    position: absolute;
    top:  780px;
    left: 15%;
    width: 30%;
    height: 55px;
    cursor: pointer;
    transition: all .3s ease-in-out;
    z-index: 3;
}

.create-website button:hover {
    background-color: #dddddd;
}

.scene {
            width: 20%;
            height: 400px;
            position: relative;
            top: 100px;
            left: 63%;
        }
        
        #plant-svg {
            width: 100%;
            height: 100%;
            overflow: visible;
        }
        
        path {
            fill: none;
            stroke-linecap: round;
            stroke-width: 4;
        }
        
        /* 1. Kılavuz (Çok silik arka plan izi) */
        .guide {
            stroke: #000;
            opacity: 0.05;
        }
        
#flow-line {
    stroke: #4CAF50;
    stroke-dasharray: 60 340; 
    stroke-dashoffset: 400; 
    animation: flow-effect 1.5s linear infinite; 
    opacity: 1;
    transition: opacity 0.3s;
}

@keyframes flow-effect {
    to {
        stroke-dashoffset: 0; 
    }
}

#flow-line.hide {
    opacity: 0;
}

#fill-line {
    stroke: #4CAF50;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000; 
    transition: stroke-dashoffset 2s ease-out, opacity 0.3s; 
    opacity: 0; 
}


#fill-line.done {
    stroke-dashoffset: 0; 
    opacity: 1;
}

.leaf {
    fill: #66BB6A;
}

.leaf-group {
    transform: translate(var(--x), var(--y)) rotate(var(--aci)) scale(0);
    transform-origin: 0 0;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.leaf-group.opening {
    transform: translate(var(--x), var(--y)) rotate(var(--aci)) scale(1);
}
        
        
        /* --- Buton --- */
        #grow-plant {
            padding: 16px 60px;
            background-color: #2e7d32;
            color: white;
            border: none;
            border-radius: 50px;
            font-size: 1rem;
            font-weight: bold;
            cursor: pointer;
            box-shadow: 0 4px 15px rgba(46, 125, 50, 0.3);
            transition: transform 0.1s;
            outline: none;
            display: block; 
            position: absolute;
            left: 65.5%;
            top: 520px;
            transition: all .3s ease-in-out;
            z-index: 2;
        }
        
        #grow-plant:active {
            transform: scale(0.95);
        }

        #grow-plant:hover {
            background-color: #35943a;
            box-shadow: #35943a;
            transform: scale(1.05);
        }

.card {   
    display: block;
    background-color: #fff;
    border-radius: 20px;
    width: 28%;
    height: 140px;
    box-shadow: 0 10px 30px rgba(2,6,23,0.6);
    gap: 0px;
    padding: 0px;
    align-items:center;
    position: absolute;
    top: 630px;
    left: 61%;
    z-index: 2;
  }

  .seed { 
    width: 100px;
    height: 100px;
    border-radius:16px;
    display:block;
    position: absolute;
    top: 20px;
    left: 5%;
    align-items:center;
    justify-content:center;
    background-color: #4CAF50;
    flex-shrink:0;
  }

  .seed svg{
     width: 100px; 
     height: 100px; 
     transform-origin:center; 
     animation: float 3.6s ease-in-out infinite; 
    }
  @keyframes float{
    0%{ transform: translateY(0) rotate(-2deg); }
    50%{ transform: translateY(-6px) rotate(2deg); }
    100%{ transform: translateY(0) rotate(-2deg); }
  }

  .info{
    width: 50%;
    display: block;
    flex-direction:column;
    gap:6px;
    position: relative;
    left: 40%;
    top: 10px;
  }

  .count{
    font-family: 'Poppins', sans-serif;
    font-size:40px;
    font-weight:700;
    letter-spacing: -0.02em;
    display:flex;
    align-items:baseline;
    gap:12px;
  }

  .count .num{
    font-family: 'Poppins', sans-serif;
    color: #66BB6A;
    font-feature-settings: "tnum";
  }

  .label{
    font-family: 'Poppins', sans-serif;
    font-size:14px;
    color: #94aabb;
    opacity:0.9;
  }

  .sub{
    font-family: 'Poppins', sans-serif;
    margin-top:6px;
    font-size:13px;
    color:#94aabb;
  }

.footer {
    position: absolute;
    top: 1000px;
    left: 0%;
}  
}
     
@media  (min-width: 1400px) and (max-width: 1599.98px)  {
body {
    background-color: #11151a;
}

.header h1{
    font-family: 'Poppins', sans-serif;
    font-size: 42px;
    color: #fff;
    position: absolute;
    top: 100px;
    left: 15%;
    z-index: 3;
}

.space-light-glow {
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
    width: 1100px;
    height: 1200px;
    background: radial-gradient(ellipse at right,
            rgba(0, 217, 255, 0.4),
            rgba(0, 0, 0, 0) 70%);
    filter: blur(150px);
    opacity: 0.8;
    border-radius: 50%;
    animation: glowPulse 8s ease-in-out infinite;
    z-index: 1;
    pointer-events: none;
}

@keyframes glowPulse {

    0%,
    100% {
        opacity: 0.6;
        transform: translateX(-50%) scale(1);
    }

    50% {
        opacity: 1;
        transform: translateX(-50%) scale(1.05);
    }
}

.text h1 {
    font-family: 'Poppins', sans-serif;
    font-size: 28px;
    color: #fff;
    position: absolute;
    top: 190px;
    width: 50%;
    left: 15%;
    z-index: 1;
    text-align: left;
}

.text p {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    color: #e2e2e2;
    position: absolute;
    top: 300px;
    width: 38%;
    left: 15%;
    z-index: 1;
    text-align: left;
}

.create-website button {
    background-color: #fff;
    color: #000;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    border: none;
    border-radius: 10px;
    position: absolute;
    top:  740px;
    left: 15%;
    width: 30%;
    height: 55px;
    cursor: pointer;
    transition: all .3s ease-in-out;
    z-index: 3;
}

.create-website button:hover {
    background-color: #dddddd;
}

.scene {
            width: 20%;
            height: 400px;
            position: relative;
            top: 100px;
            left: 63%;
        }
        
        #plant-svg {
            width: 100%;
            height: 100%;
            overflow: visible;
        }
        
        path {
            fill: none;
            stroke-linecap: round;
            stroke-width: 4;
        }
        
        /* 1. Kılavuz (Çok silik arka plan izi) */
        .guide {
            stroke: #000;
            opacity: 0.05;
        }
        
#flow-line {
    stroke: #4CAF50;
    stroke-dasharray: 60 340; 
    stroke-dashoffset: 400; 
    animation: flow-effect 1.5s linear infinite; 
    opacity: 1;
    transition: opacity 0.3s;
}

@keyframes flow-effect {
    to {
        stroke-dashoffset: 0; 
    }
}

#flow-line.hide {
    opacity: 0;
}

#fill-line {
    stroke: #4CAF50;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000; 
    transition: stroke-dashoffset 2s ease-out, opacity 0.3s; 
    opacity: 0; 
}


#fill-line.done {
    stroke-dashoffset: 0; 
    opacity: 1;
}

.leaf {
    fill: #66BB6A;
}

.leaf-group {
    transform: translate(var(--x), var(--y)) rotate(var(--aci)) scale(0);
    transform-origin: 0 0;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.leaf-group.opening {
    transform: translate(var(--x), var(--y)) rotate(var(--aci)) scale(1);
}
        
        
        /* --- Buton --- */
        #grow-plant {
            padding: 16px 60px;
            background-color: #2e7d32;
            color: white;
            border: none;
            border-radius: 50px;
            font-size: 1rem;
            font-weight: bold;
            cursor: pointer;
            box-shadow: 0 4px 15px rgba(46, 125, 50, 0.3);
            transition: transform 0.1s;
            outline: none;
            display: block; 
            position: absolute;
            left: 65.5%;
            top: 520px;
            transition: all .3s ease-in-out;
            z-index: 2;
        }
        
        #grow-plant:active {
            transform: scale(0.95);
        }

        #grow-plant:hover {
            background-color: #35943a;
            box-shadow: #35943a;
            transform: scale(1.05);
        }

.card {   
    display: block;
    background-color: #fff;
    border-radius: 20px;
    width: 26%;
    height: 140px;
    box-shadow: 0 10px 30px rgba(2,6,23,0.6);
    gap: 0px;
    padding: 0px;
    align-items:center;
    position: absolute;
    top: 660px;
    left: 61%;
    z-index: 2;
  }

  .seed { 
    width: 100px;
    height: 100px;
    border-radius:16px;
    display:block;
    position: absolute;
    top: 20px;
    left: 5%;
    align-items:center;
    justify-content:center;
    background-color: #4CAF50;
    flex-shrink:0;
  }

  .seed svg{
     width: 100px; 
     height: 100px; 
     transform-origin:center; 
     animation: float 3.6s ease-in-out infinite; 
    }
  @keyframes float{
    0%{ transform: translateY(0) rotate(-2deg); }
    50%{ transform: translateY(-6px) rotate(2deg); }
    100%{ transform: translateY(0) rotate(-2deg); }
  }

  .info{
    width: 50%;
    display: block;
    flex-direction:column;
    gap:6px;
    position: relative;
    left: 40%;
    top: 10px;
  }

  .count{
    font-family: 'Poppins', sans-serif;
    font-size:40px;
    font-weight:700;
    letter-spacing: -0.02em;
    display:flex;
    align-items:baseline;
    gap:12px;
  }

  .count .num{
    font-family: 'Poppins', sans-serif;
    color: #66BB6A;
    font-feature-settings: "tnum";
  }

  .label{
    font-family: 'Poppins', sans-serif;
    font-size:14px;
    color: #94aabb;
    opacity:0.9;
  }

  .sub{
    font-family: 'Poppins', sans-serif;
    margin-top:6px;
    font-size:13px;
    color:#94aabb;
  }

.footer {
    position: absolute;
    top: 1000px;
    left: 0%;
}       
}
     



/* LANDSCAPE RESPONSIVE*/
@media (min-width: 500px) and (max-width: 639.98px) and (orientation: landscape) {
body {
    background-color: #11151a;
}

.header h1{ 
    font-family: 'Poppins', sans-serif;
    font-size: 32px;
    color: #fff;
    position: absolute;
    top: 100px;
    left: 0%;
    z-index: 3;
    width: 100%;
    text-align: center;
}

.space-light-glow { 
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
    width: 350px;
    height: 1000px;
    background: radial-gradient(ellipse at right,
            rgba(0, 217, 255, 0.4),
            rgba(0, 0, 0, 0) 70%);
    filter: blur(150px);
    opacity: 0.8;
    border-radius: 50%;
    animation: glowPulse 8s ease-in-out infinite;
    z-index: 1;
    pointer-events: none;
}

@keyframes glowPulse {

    0%,
    100% {
        opacity: 0.6;
        transform: translateX(-50%) scale(1);
    }

    50% {
        opacity: 1;
        transform: translateX(-50%) scale(1.05);
    }
}

.text h1 {  
    font-family: 'Poppins', sans-serif;
    font-size: 22px;
    color: #fff;
    position: absolute;
    top: 800px;
    width: 88%;
    left: 6%;
    z-index: 1;
    text-align: left;
}

.text p { 
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    color: #e2e2e2;
    position: absolute;
    top: 890px;
    width: 88%;
    left: 6%;
    z-index: 1;
    text-align: left;
}

.create-website button { 
    background-color: #fff;
    color: #000;
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    border: none;
    border-radius: 10px;
    position: absolute ;
    top:  1700px;
    left: 6%;
    width: 88%;
    height: 55px;
    cursor: pointer;
    transition: all .3s ease-in-out;
    z-index: 3;
}

.create-website button:hover {
    background-color: #dddddd;
}

.scene { 
            width: 88%;
            height: 400px;
            position: relative;
            top: 200px;
            left: 6%;
        }
        
        #plant-svg {
            width: 100%;
            height: 100%;
            overflow: visible;
        }
        
        path {
            fill: none;
            stroke-linecap: round;
            stroke-width: 4;
        }
        
        /* 1. Kılavuz (Çok silik arka plan izi) */
        .guide {
            stroke: #000;
            opacity: 0.05;
        }
        
#flow-line { 
    stroke: #4CAF50;
    stroke-dasharray: 60 340; 
    stroke-dashoffset: 400; 
    animation: flow-effect 1.5s linear infinite; 
    opacity: 1;
    transition: opacity 0.3s;
}

@keyframes flow-effect {
    to {
        stroke-dashoffset: 0; 
    }
}

#flow-line.hide {
    opacity: 0;
}

#fill-line {
    stroke: #4CAF50;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000; 
    transition: stroke-dashoffset 2s ease-out, opacity 0.3s; 
    opacity: 0; 
}


#fill-line.done {
    stroke-dashoffset: 0; 
    opacity: 1;
}

.leaf {
    fill: #66BB6A;
}

.leaf-group {
    transform: translate(var(--x), var(--y)) rotate(var(--aci)) scale(0);
    transform-origin: 0 0;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.leaf-group.opening {
    transform: translate(var(--x), var(--y)) rotate(var(--aci)) scale(1);
}
        
        
/*BUTTON*/
        #grow-plant { 
            padding: 16px 60px;
            background-color: #2e7d32;
            color: white;
            border: none;
            border-radius: 50px;
            font-size: 1rem;
            font-weight: bold;
            cursor: pointer;
            box-shadow: 0 4px 15px rgba(46, 125, 50, 0.3);
            transition: transform 0.1s;
            outline: none;
            display: block; 
            width: 50%;
            position: absolute;
            left: 25%;
            top: 630px;
            transition: all .3s ease-in-out;
            z-index: 2;
        }
        
        #grow-plant:active {
            transform: scale(0.95);
        }

        #grow-plant:hover {
            background-color: #35943a;
            box-shadow: #35943a;
            transform: scale(1.05);
        }

.card {   
    display: block;
    background-color: #fff;
    border-radius: 20px;
    width: 88%;
    height: 140px;
    box-shadow: 0 10px 30px rgba(2,6,23,0.6);
    gap: 0px;
    padding: 0px;
    align-items:center;
    position: absolute;
    top: 1500px;
    left: 6%;
    z-index: 2;
  }

  .seed { 
    width: 100px;
    height: 100px;
    border-radius:16px;
    display:block;
    position: absolute;
    top: 20px;
    left: 5%;
    align-items:center;
    justify-content:center;
    background-color: #4CAF50;
    flex-shrink:0;
  }

  .seed svg{
     width: 100px; 
     height: 100px; 
     transform-origin:center; 
     animation: float 3.6s ease-in-out infinite; 
    }
  @keyframes float{
    0%{ transform: translateY(0) rotate(-2deg); }
    50%{ transform: translateY(-6px) rotate(2deg); }
    100%{ transform: translateY(0) rotate(-2deg); }
  }

  .info{
    width: 50%;
    display: block;
    flex-direction:column;
    gap:6px;
    position: relative;
    left: 40%;
    top: 10px;
  }

  .count{
    font-family: 'Poppins', sans-serif;
    font-size:40px;
    font-weight:700;
    letter-spacing: -0.02em;
    display:flex;
    align-items:baseline;
    gap:12px;
  }

  .count .num{
    font-family: 'Poppins', sans-serif;
    color: #66BB6A;
    font-feature-settings: "tnum";
  }

  .label{
    font-family: 'Poppins', sans-serif;
    font-size:14px;
    color: #94aabb;
    opacity:0.9;
  }

  .sub{
    font-family: 'Poppins', sans-serif;
    margin-top:6px;
    font-size:13px;
    color:#94aabb;
  }

.mobile-footer {
    position: absolute;
    top: 1850px;
    left: 0%;
}
}

@media (min-width: 640px) and (max-width: 811.98px) and (orientation: landscape) {
body {
    background-color: #11151a;
}

.header h1{ 
    font-family: 'Poppins', sans-serif;
    font-size: 34px;
    color: #fff;
    position: absolute;
    top: 100px;
    left: 6%;
    z-index: 3;
    width: 88%;
    text-align: left;
}

.space-light-glow { 
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
    width: 350px;
    height: 1000px;
    background: radial-gradient(ellipse at right,
            rgba(0, 217, 255, 0.4),
            rgba(0, 0, 0, 0) 70%);
    filter: blur(150px);
    opacity: 0.8;
    border-radius: 50%;
    animation: glowPulse 8s ease-in-out infinite;
    z-index: 1;
    pointer-events: none;
}

@keyframes glowPulse {

    0%,
    100% {
        opacity: 0.6;
        transform: translateX(-50%) scale(1);
    }

    50% {
        opacity: 1;
        transform: translateX(-50%) scale(1.05);
    }
}

.scene { 
            width: 88%;
            height: 400px;
            position: relative;
            top: 200px;
            left: 6%;
        }
        
        #plant-svg {
            width: 100%;
            height: 100%;
            overflow: visible;
        }
        
        path {
            fill: none;
            stroke-linecap: round;
            stroke-width: 4;
        }
        
        /* 1. Kılavuz (Çok silik arka plan izi) */
        .guide {
            stroke: #000;
            opacity: 0.05;
        }
        
#flow-line { 
    stroke: #4CAF50;
    stroke-dasharray: 60 340; 
    stroke-dashoffset: 400; 
    animation: flow-effect 1.5s linear infinite; 
    opacity: 1;
    transition: opacity 0.3s;
}

@keyframes flow-effect {
    to {
        stroke-dashoffset: 0; 
    }
}

#flow-line.hide {
    opacity: 0;
}

#fill-line {
    stroke: #4CAF50;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000; 
    transition: stroke-dashoffset 2s ease-out, opacity 0.3s; 
    opacity: 0; 
}


#fill-line.done {
    stroke-dashoffset: 0; 
    opacity: 1;
}

.leaf {
    fill: #66BB6A;
}

.leaf-group {
    transform: translate(var(--x), var(--y)) rotate(var(--aci)) scale(0);
    transform-origin: 0 0;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.leaf-group.opening {
    transform: translate(var(--x), var(--y)) rotate(var(--aci)) scale(1);
}
        
        
/*BUTTON*/
        #grow-plant { 
            padding: 16px 60px;
            background-color: #2e7d32;
            color: white;
            border: none;
            border-radius: 50px;
            font-size: 1rem;
            font-weight: bold;
            cursor: pointer;
            box-shadow: 0 4px 15px rgba(46, 125, 50, 0.3);
            transition: transform 0.1s;
            outline: none;
            display: block; 
            width: 50%;
            position: absolute;
            left: 25%;
            top: 650px;
            transition: all .3s ease-in-out;
            z-index: 2;
        }
        
        #grow-plant:active {
            transform: scale(0.95);
        }

        #grow-plant:hover {
            background-color: #35943a;
            box-shadow: #35943a;
            transform: scale(1.05);
        }

.text h1 {  
    font-family: 'Poppins', sans-serif;
    font-size: 24px;
    color: #fff;
    position: absolute;
    top: 800px;
    width: 88%;
    left: 6%;
    z-index: 1;
    text-align: left;
}

.text p { 
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    color: #e2e2e2;
    position: absolute;
    top: 890px;
    width: 88%;
    left: 6%;
    z-index: 1;
    text-align: left;
}

.create-website button {
    background-color: #2e7d32;
    color: #fff;
    font-size: 18px;
    border: none;
    border-radius: 30px;
    position: absolute ;
    top:  1650px;
    left: 20%;
    width: 60%;
    height: 55px;
    cursor: pointer;
    transition: all .3s ease-in-out;
    z-index: 3;
}

.create-website button:hover {
    background-color: #dddddd;
}


.card {   
    display: block;
    background-color: #fff;
    border-radius: 20px;
    width: 60%;
    height: 140px;
    box-shadow: 0 10px 30px rgba(2,6,23,0.6);
    gap: 0px;
    padding: 0px;
    align-items:center;
    position: absolute;
    top: 1460px;
    left: 20%;
    z-index: 2;
  }

  .seed { 
    width: 100px;
    height: 100px;
    border-radius:16px;
    display:block;
    position: absolute;
    top: 20px;
    left: 5%;
    align-items:center;
    justify-content:center;
    background-color: #4CAF50;
    flex-shrink:0;
  }

  .seed svg{
     width: 100px; 
     height: 100px; 
     transform-origin:center; 
     animation: float 3.6s ease-in-out infinite; 
    }
  @keyframes float{
    0%{ transform: translateY(0) rotate(-2deg); }
    50%{ transform: translateY(-6px) rotate(2deg); }
    100%{ transform: translateY(0) rotate(-2deg); }
  }

  .info{
    width: 50%;
    display: block;
    flex-direction:column;
    gap:6px;
    position: relative;
    left: 40%;
    top: 10px;
  }

  .count{
    font-family: 'Poppins', sans-serif;
    font-size:40px;
    font-weight:700;
    letter-spacing: -0.02em;
    display:flex;
    align-items:baseline;
    gap:12px;
  }

  .count .num{
    font-family: 'Poppins', sans-serif;
    color: #66BB6A;
    font-feature-settings: "tnum";
  }

  .label{
    font-family: 'Poppins', sans-serif;
    font-size:14px;
    color: #94aabb;
    opacity:0.9;
  }

  .sub{
    font-family: 'Poppins', sans-serif;
    margin-top:6px;
    font-size:13px;
    color:#94aabb;
  }

.mobile-footer {
    position: absolute;
    top: 1800px;
    left: 0%;
}
}

@media (min-width: 812px) and (max-width: 999.98px) and (orientation: landscape) {
body {
    background-color: #11151a;
}

.header h1{ 
    font-family: 'Poppins', sans-serif;
    font-size: 34px;
    color: #fff;
    position: absolute;
    top: 100px;
    left: 6%;
    z-index: 3;
    width: 88%;
    text-align: left;
}

.space-light-glow { 
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
    width: 730px;
    height: 1000px;
    background: radial-gradient(ellipse at right,
            rgba(0, 217, 255, 0.4),
            rgba(0, 0, 0, 0) 70%);
    filter: blur(150px);
    opacity: 0.8;
    border-radius: 50%;
    animation: glowPulse 8s ease-in-out infinite;
    z-index: 1;
    pointer-events: none;
}

@keyframes glowPulse {

    0%,
    100% {
        opacity: 0.6;
        transform: translateX(-50%) scale(1);
    }

    50% {
        opacity: 1;
        transform: translateX(-50%) scale(1.05);
    }
}

.scene { 
            width: 88%;
            height: 400px;
            position: relative;
            top: 200px;
            left: 6%;
        }
        
        #plant-svg {
            width: 100%;
            height: 100%;
            overflow: visible;
        }
        
        path {
            fill: none;
            stroke-linecap: round;
            stroke-width: 4;
        }
        
        /* 1. Kılavuz (Çok silik arka plan izi) */
        .guide {
            stroke: #000;
            opacity: 0.05;
        }
        
#flow-line { 
    stroke: #4CAF50;
    stroke-dasharray: 60 340; 
    stroke-dashoffset: 400; 
    animation: flow-effect 1.5s linear infinite; 
    opacity: 1;
    transition: opacity 0.3s;
}

@keyframes flow-effect {
    to {
        stroke-dashoffset: 0; 
    }
}

#flow-line.hide {
    opacity: 0;
}

#fill-line {
    stroke: #4CAF50;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000; 
    transition: stroke-dashoffset 2s ease-out, opacity 0.3s; 
    opacity: 0; 
}


#fill-line.done {
    stroke-dashoffset: 0; 
    opacity: 1;
}

.leaf {
    fill: #66BB6A;
}

.leaf-group {
    transform: translate(var(--x), var(--y)) rotate(var(--aci)) scale(0);
    transform-origin: 0 0;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.leaf-group.opening {
    transform: translate(var(--x), var(--y)) rotate(var(--aci)) scale(1);
}
        
        
/*BUTTON*/
        #grow-plant { 
            padding: 16px 60px;
            background-color: #2e7d32;
            color: white;
            border: none;
            border-radius: 50px;
            font-size: 1rem;
            font-weight: bold;
            cursor: pointer;
            box-shadow: 0 4px 15px rgba(46, 125, 50, 0.3);
            transition: transform 0.1s;
            outline: none;
            display: block; 
            width: 50%;
            position: absolute;
            left: 25%;
            top: 650px;
            transition: all .3s ease-in-out;
            z-index: 2;
        }
        
        #grow-plant:active {
            transform: scale(0.95);
        }

        #grow-plant:hover {
            background-color: #35943a;
            box-shadow: #35943a;
            transform: scale(1.05);
        }

.text h1 {  
    font-family: 'Poppins', sans-serif;
    font-size: 24px;
    color: #fff;
    position: absolute;
    top: 800px;
    width: 88%;
    left: 6%;
    z-index: 1;
    text-align: left;
}

.text p { 
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    color: #e2e2e2;
    position: absolute;
    top: 890px;
    width: 88%;
    left: 6%;
    z-index: 1;
    text-align: left;
}

.create-website button {
    background-color: #2e7d32;
    color: #fff;
    font-size: 18px;
    border: none;
    border-radius: 30px;
    position: absolute ;
    top:  1650px;
    left: 20%;
    width: 60%;
    height: 55px;
    cursor: pointer;
    transition: all .3s ease-in-out;
    z-index: 3;
}

.create-website button:hover {
    background-color: #dddddd;
}


.card {   
    display: block;
    background-color: #fff;
    border-radius: 20px;
    width: 60%;
    height: 140px;
    box-shadow: 0 10px 30px rgba(2,6,23,0.6);
    gap: 0px;
    padding: 0px;
    align-items:center;
    position: absolute;
    top: 1460px;
    left: 20%;
    z-index: 2;
  }

  .seed { 
    width: 100px;
    height: 100px;
    border-radius:16px;
    display:block;
    position: absolute;
    top: 20px;
    left: 5%;
    align-items:center;
    justify-content:center;
    background-color: #4CAF50;
    flex-shrink:0;
  }

  .seed svg{
     width: 100px; 
     height: 100px; 
     transform-origin:center; 
     animation: float 3.6s ease-in-out infinite; 
    }
  @keyframes float{
    0%{ transform: translateY(0) rotate(-2deg); }
    50%{ transform: translateY(-6px) rotate(2deg); }
    100%{ transform: translateY(0) rotate(-2deg); }
  }

  .info{
    width: 50%;
    display: block;
    flex-direction:column;
    gap:6px;
    position: relative;
    left: 40%;
    top: 10px;
  }

  .count{
    font-family: 'Poppins', sans-serif;
    font-size:40px;
    font-weight:700;
    letter-spacing: -0.02em;
    display:flex;
    align-items:baseline;
    gap:12px;
  }

  .count .num{
    font-family: 'Poppins', sans-serif;
    color: #66BB6A;
    font-feature-settings: "tnum";
  }

  .label{
    font-family: 'Poppins', sans-serif;
    font-size:14px;
    color: #94aabb;
    opacity:0.9;
  }

  .sub{
    font-family: 'Poppins', sans-serif;
    margin-top:6px;
    font-size:13px;
    color:#94aabb;
  }

.mobile-footer {
    position: absolute;
    top: 1800px;
    left: 0%;
}
}

@media (min-width: 1000px) and (max-width: 1200px) and (orientation: landscape) {
body {
    background-color: #11151a;
}

.header h1{ 
    font-family: 'Poppins', sans-serif;
    font-size: 42px;
    color: #fff;
    position: absolute;
    top: 140px;
    left: 6%;
    z-index: 3;
    width: 88%;
    text-align: left;
}

.space-light-glow { 
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
    width: 960px;
    height: 1000px;
    background: radial-gradient(ellipse at right,
            rgba(0, 217, 255, 0.4),
            rgba(0, 0, 0, 0) 70%);
    filter: blur(150px);
    opacity: 0.8;
    border-radius: 50%;
    animation: glowPulse 8s ease-in-out infinite;
    z-index: 1;
    pointer-events: none;
}

@keyframes glowPulse {

    0%,
    100% {
        opacity: 0.6;
        transform: translateX(-50%) scale(1);
    }

    50% {
        opacity: 1;
        transform: translateX(-50%) scale(1.05);
    }
}

.scene { 
            width: 88%;
            height: 400px;
            position: relative;
            top: 260px;
            left: 6%;
        }
        
        #plant-svg {
            width: 100%;
            height: 100%;
            overflow: visible;
        }
        
        path {
            fill: none;
            stroke-linecap: round;
            stroke-width: 4;
        }
        
        /* 1. Kılavuz (Çok silik arka plan izi) */
        .guide {
            stroke: #000;
            opacity: 0.05;
        }
        
#flow-line { 
    stroke: #4CAF50;
    stroke-dasharray: 60 340; 
    stroke-dashoffset: 400; 
    animation: flow-effect 1.5s linear infinite; 
    opacity: 1;
    transition: opacity 0.3s;
}

@keyframes flow-effect {
    to {
        stroke-dashoffset: 0; 
    }
}

#flow-line.hide {
    opacity: 0;
}

#fill-line {
    stroke: #4CAF50;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000; 
    transition: stroke-dashoffset 2s ease-out, opacity 0.3s; 
    opacity: 0; 
}


#fill-line.done {
    stroke-dashoffset: 0; 
    opacity: 1;
}

.leaf {
    fill: #66BB6A;
}

.leaf-group {
    transform: translate(var(--x), var(--y)) rotate(var(--aci)) scale(0);
    transform-origin: 0 0;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.leaf-group.opening {
    transform: translate(var(--x), var(--y)) rotate(var(--aci)) scale(1);
}
        
        
/*BUTTON*/
        #grow-plant { 
            padding: 24px 60px;
            background-color: #2e7d32;
            color: white;
            border: none;
            border-radius: 50px;
            font-size: 1.2rem;
            font-weight: bold;
            cursor: pointer;
            box-shadow: 0 4px 15px rgba(46, 125, 50, 0.3);
            transition: transform 0.1s;
            outline: none;
            display: block; 
            width: 30%;
            position: absolute;
            left: 35%;
            top: 720px;
            transition: all .3s ease-in-out;
            z-index: 2;
        }
        
        #grow-plant:active {
            transform: scale(0.95);
        }

        #grow-plant:hover {
            background-color: #35943a;
            box-shadow: #35943a;
            transform: scale(1.05);
        }

.text h1 {  
    font-family: 'Poppins', sans-serif;
    font-size: 34px;
    color: #fff;
    position: absolute;
    top: 900px;
    width: 88%;
    left: 6%;
    z-index: 1;
    text-align: left;
}

.text p { 
    font-family: 'Poppins', sans-serif;
    font-size: 22px;
    color: #e2e2e2;
    position: absolute;
    top: 1050px;
    width: 88%;
    left: 6%;
    z-index: 1;
    text-align: left;
}

.create-website button {
    background-color: #2e7d32;
    color: #fff;
    font-size: 22px;
    border: none;
    border-radius: 20px;
    position: absolute ;
    top:  1600px;
    left: 48%;
    width: 46%;
    height: 140px;
    cursor: pointer;
    transition: all .3s ease-in-out;
    z-index: 3;
}

.create-website button:hover {
    background-color: #dddddd;
}


.card {   
    display: block;
    background-color: #fff;
    border-radius: 20px;
    width: 40%;
    height: 140px;
    box-shadow: 0 10px 30px rgba(2,6,23,0.6);
    gap: 0px;
    padding: 0px;
    align-items:center;
    position: absolute;
    top: 1600px;
    left: 6%;
    z-index: 2;
  }

  .seed { 
    width: 100px;
    height: 100px;
    border-radius:16px;
    display:block;
    position: absolute;
    top: 20px;
    left: 5%;
    align-items:center;
    justify-content:center;
    background-color: #4CAF50;
    flex-shrink:0;
  }

  .seed svg{
     width: 100px; 
     height: 100px; 
     transform-origin:center; 
     animation: float 3.6s ease-in-out infinite; 
    }
  @keyframes float{
    0%{ transform: translateY(0) rotate(-2deg); }
    50%{ transform: translateY(-6px) rotate(2deg); }
    100%{ transform: translateY(0) rotate(-2deg); }
  }

  .info{
    width: 50%;
    display: block;
    flex-direction:column;
    gap:6px;
    position: relative;
    left: 40%;
    top: 10px;
  }

  .count{
    font-family: 'Poppins', sans-serif;
    font-size:40px;
    font-weight:700;
    letter-spacing: -0.02em;
    display:flex;
    align-items:baseline;
    gap:12px;
  }

  .count .num{
    font-family: 'Poppins', sans-serif;
    color: #66BB6A;
    font-feature-settings: "tnum";
  }

  .label{
    font-family: 'Poppins', sans-serif;
    font-size:14px;
    color: #94aabb;
    opacity:0.9;
  }

  .sub{
    font-family: 'Poppins', sans-serif;
    margin-top:6px;
    font-size:13px;
    color:#94aabb;
  }

.mobile-footer {
    position: absolute;
    top: 2000px;
    left: 0%;
}
}