/* Grundlayout */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{

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

    background:#faf8f6;

    color:#333;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    

}

/* Hero */

.hero{

    position: relative;

    width:100%;
    height:420px;

    background-image:
        linear-gradient(
            to bottom,
            rgba(255,255,255,0) 45%,
            rgba(250,248,246,.55) 70%,
            #faf8f6 100%
        ),
        url("../images/Cansel_Umut_HD.jpeg");

    background-size:cover;
    background-position:center 25%;
    background-repeat:no-repeat;

}
@media (max-width: 480px) {

    .hero{
        height:320px;
        background-position:center;
    }

}

/* Inhalt */

.content{

    position:relative;

    margin-top:-10px;

    max-width:420px;

    margin-left:auto;
    margin-right:auto;

    padding:0 28px 70px;

    text-align:center;

}

.content h1{

    font-family:'Cormorant Garamond', serif;

    font-size:32px;

    font-style:italic;

    font-weight:500;

    line-height:1.08;

    color:#5f5f5f;

    margin-bottom:30px;

}
@media (max-width:480px){

.content h1{
    font-size:24px;
    line-height:1.15;
}

}
.content p{

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

    font-size:20px;

    line-height:1.7;

    font-weight:400;

    color:#2f2f2f;

    margin-bottom:20px;

}
@media (max-width:480px){

.content p{
    font-size:15px;
    line-height:1.55;
}

}
/* ===========================
   Upload Button
=========================== */

.upload-button{

    display:flex;
    justify-content:center;
    align-items:center;

    width:100%;
    max-width:270px;
    height:62px;

    margin:0 auto;

    position:relative;
    overflow:hidden;

    background:#769575;

    color:#ffffff;

    text-decoration:none;

    border-radius:50px;

    font-family:'Poppins', sans-serif;
    font-size:18px;
    font-weight:500;
    letter-spacing:1px;

    cursor:pointer;

    transition:all .35s ease;

    box-shadow:
        0 10px 25px rgba(118,149,117,.28);
outline: none;
border: none;
margin-bottom: 8px;
animation: breathe 2s ease-in-out infinite;

}

@keyframes breathe{

    0%,100%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.04);
    }
}
@media (max-width:480px){

.upload-button{

    height:58px;

    font-size:17px;
    animation: breathe 2s ease-in-out infinite;

}

@keyframes breathe{

    0%,100%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.04);
    }

}

}

/* Hover */

.upload-button:hover{

    transform:translateY(-2px);

    box-shadow:
        0 0 14px rgba(118,149,117,.45),
        0 0 30px rgba(118,149,117,.25),
        0 12px 28px rgba(118,149,117,.35);

}

/* Klick */

.content .upload-button:active{

    transform:translateY(1px) scale(.98);

}

.content .upload-button:focus{
    outline:none;
}

.content .upload-button:hover::before{

    left:130%;

}

.secondary-button{

    margin-top:20px;

    background:#ffffff;

    color:#769575;

    border:2px solid #769575;

    box-shadow:none;

}

.secondary-button:hover{

    background:#769575;

    color:#ffffff;

}

.content small{

    display:block;

    margin-top:8px;

    color:#769575;

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

    font-size:15px;

}

.right-leaf{

    position:fixed;

    top:290px;
    right:-45px;

    width:150px;

    opacity:.30;

    pointer-events:none;

    z-index:1;

}

.left-leaf{

    position:fixed;

    bottom:-35px;
    left:-45px;

    width:150px;

    opacity:.30;

    pointer-events:none;

    z-index:1;

}
















/* Vorschau */

.preview-wrapper{

    position:relative;

    height:155px;

    overflow:hidden;

    margin-top:10px;

}

#preview{

    display:grid;

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

    gap:10px;

}

.preview-image{

    width:100%;

    aspect-ratio:1/1;

    object-fit:cover;

    border-radius:16px;

}

.preview-fade{

    position:absolute;

    left:0;
    right:0;
    bottom:0;

    height:90px;

    background:linear-gradient(
        to bottom,
        rgba(250,248,246,0),
        rgba(250,248,246,.75),
        #faf8f6
    );

    opacity:0;

    transition:.35s;

    pointer-events:none;

}

.file-counter{

    margin-top:18px;

    text-align:center;

    font-size:17px;

    color:#769575;

    font-weight:500;

}

.upload-hidden{

    opacity:0;

    transform:translateY(15px);

    pointer-events:none;

    transition:.35s;

}

.upload-visible{

    opacity:1;

    transform:translateY(0);

    pointer-events:auto;

}

.upload-preview{
    display:none;
}

.upload-preview.visible{
    display:block;
}

/* ===========================
   Upload Screen
=========================== */

.upload-screen{

    position:fixed;
    inset:0;

    display:none;

    justify-content:center;
    align-items:center;

    background:#faf8f6;

    z-index:9999;

}

.upload-screen.active{

    display:flex;

}

.upload-content{

    display:flex;

    flex-direction:column;

    align-items:center;

}

.progress-wrapper{

    position:relative;

    width:180px;

    height:180px;

    margin:0 auto;

}

.progress-ring{

    display:block;

    margin:0 auto;

    transform:rotate(-90deg);

}

.progress-ring-bg{

    fill:none;

    stroke:#d9dfd5;

    stroke-width:10;

}

.progress-ring-circle{

    fill:none;

    stroke:#769575;

    stroke-width:10;

    stroke-linecap:round;

    stroke-dasharray:490;

    stroke-dashoffset:490;

}

.progress-text{

     position:absolute;

    inset:0;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:36px;

    font-weight:600;

    color:#769575;

}

.upload-content h2{

    margin-top:45px;

    font-size:34px;

    font-weight:500;

    color:#769575;

}

.upload-content p{

     max-width:300px;

    margin:20px auto 0;

    text-align:center;

    font-size:18px;

    line-height:1.7;

    color:#666;

}














/* ===========================
   Success Screen
=========================== */

.success-screen{

    position:fixed;

    inset:0;

    display:none;

    justify-content:center;

    align-items:center;

    background:#faf8f6;

    z-index:9999;

    padding:40px;

}

.success-screen.active{

    display:flex;

}

.success-box{

    text-align:center;

    max-width:340px;

}

.success-icon{

    width:120px;

    height:120px;

    margin:0 auto 30px;

    border-radius:50%;

    background:#769575;

    color:#fff;

    font-size:72px;

    display:flex;

    align-items:center;

    justify-content:center;

}

.success-box h2{

    font-size:34px;

    color:#769575;

    margin-bottom:20px;

}

.success-box p{

    font-size:22px;

    line-height:1.6;

    color:#333;

}

.success-button{

    margin:40px auto 0;

    max-width:280px;

}

/* ===========================
   Admin Gallery
=========================== */

.gallery-grid{

    display:grid;

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

    gap:14px;

    margin-top:35px;

}

.gallery-item{

    aspect-ratio:1/1;

    overflow:hidden;

    border-radius:18px;

    background:#eee;

    box-shadow:0 5px 15px rgba(0,0,0,.08);

}

.gallery-item img,
.gallery-item video{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}

/* ===========================
   Admin Header
=========================== */

.admin-header{
    margin-top:40px;
    margin-bottom:30px;
    text-align:center;
}
.admin-header h1{

    margin:0;

    font-size:34px;

    color:#333;

}

.admin-header p{
    margin-top:10px;
    color:#777;
    font-size:15px;
    font-weight:400;
}
/* ===========================
   Image Modal
=========================== */

.image-modal{

    position:fixed;

    inset:0;

    display:none;

    justify-content:center;

    align-items:center;

    background:rgba(0,0,0,.92);

    z-index:99999;

}

.image-modal.active{

    display:flex;

}

#modalImage{

    max-width:95%;

    max-height:90vh;

    border-radius:12px;

}

.close-modal{

    position:absolute;

    top:25px;

    right:30px;

    color:#fff;

    font-size:40px;

    cursor:pointer;

}
/* ===========================
   Auswahl
=========================== */



.gallery-item{

    cursor:pointer;

    transition:.2s;

}