:root{
    font-family:Inter,"Segoe UI",Arial,sans-serif;
    color:#142033;
    font-synthesis:none;
}

*{
    box-sizing:border-box;
}

html,
body{
    margin:0;
    padding:0;
    width:100%;
    min-height:100%;
}

body{
    min-height:100vh;

    /* MEYER WERFT + CARNIVAL FESTIVALE ARKA PLAN */
    background:
        linear-gradient(
            90deg,
            rgba(5,17,35,.65) 0%,
            rgba(5,17,35,.25) 50%,
            rgba(5,17,35,.60) 100%
        ),
        url("meyer-carnival-background.jpg");

    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;
    background-attachment:fixed;

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

    padding:30px 16px;
}


/* =====================================================
   LOGIN KUTUSU
===================================================== */

main{
    width:100%;
    max-width:460px;

    margin:0;
    padding:38px;

    background:rgba(255,255,255,.90);

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.55);
    border-radius:24px;

    box-shadow:
        0 30px 80px rgba(0,0,0,.32),
        inset 0 1px 0 rgba(255,255,255,.75);

    position:relative;
    overflow:hidden;
}


/* LOGIN KUTUSU ÜST MAVİ ÇİZGİ */

main::before{
    content:"";

    position:absolute;
    top:0;
    left:0;

    width:100%;
    height:4px;

    background:linear-gradient(
        90deg,
        #0d5db8,
        #35a7ff,
        #0d5db8
    );
}


.wide{
    max-width:1050px;
}


/* =====================================================
   DOST GROUP LOGO
===================================================== */

.brand{
    display:flex;
    justify-content:center;
    align-items:center;

    width:100%;

    margin:2px 0 18px;
}


.brand img{
    display:block;

    width:280px !important;
    max-width:100% !important;

    height:auto !important;

    object-fit:contain;
}


/* =====================================================
   MANAGEMENT SYSTEM YAZISI
===================================================== */

.brand + p{
    margin:0 0 29px;

    text-align:center;

    color:#748197;

    font-size:13px;
    font-weight:600;

    line-height:1.5;

    letter-spacing:.15px;
}


/* =====================================================
   BAŞLIK
===================================================== */

h1{
    margin:0 0 8px;

    color:#10213a;

    font-size:27px;
    line-height:1.25;

    font-weight:750;

    letter-spacing:-.3px;
}


h2{
    color:#10213a;

    font-size:18px;
}


/* =====================================================
   NORMAL YAZILAR
===================================================== */

p,
.muted{
    color:#68768b;

    font-size:14px;

    line-height:1.7;
}


/* login.php içerisindeki:
   Anmelden · Giriş yap · Sign in
*/

h1 + p{
    margin-top:5px;
    margin-bottom:22px;
}


/* =====================================================
   FORM
===================================================== */

form{
    margin-top:6px;
}


label{
    display:block;

    margin:18px 0 7px;

    color:#35445a;

    font-size:13px;
    font-weight:650;
}


input,
select,
textarea{
    width:100%;

    padding:13px 14px;

    border:1px solid #d8e0ea;
    border-radius:11px;

    background:rgba(255,255,255,.96);

    color:#142033;

    font:inherit;
    font-size:14px;

    outline:none;

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}


input:hover,
select:hover,
textarea:hover{
    border-color:#bcc9d8;
}


input:focus,
select:focus,
textarea:focus{
    border-color:#1769e0;

    background:#ffffff;

    box-shadow:
        0 0 0 4px rgba(23,105,224,.12);
}


/* =====================================================
   LOGIN BUTONU
===================================================== */

button,
.button{
    display:inline-block;

    width:100%;

    margin-top:24px;

    padding:13px 18px;

    border:0;
    border-radius:11px;

    background:linear-gradient(
        135deg,
        #1769e0,
        #0d5cbd
    );

    color:#ffffff;

    font:inherit;
    font-size:14px;
    font-weight:700;

    cursor:pointer;

    text-decoration:none;

    box-shadow:
        0 10px 25px rgba(23,105,224,.25);

    transition:
        transform .15s ease,
        box-shadow .15s ease,
        background .15s ease;
}


button:hover,
.button:hover{
    transform:translateY(-1px);

    background:linear-gradient(
        135deg,
        #0f5dce,
        #084fa9
    );

    box-shadow:
        0 14px 30px rgba(23,105,224,.35);
}


button:active,
.button:active{
    transform:translateY(0);
}


/* =====================================================
   HATA MESAJI
===================================================== */

.error{
    margin:15px 0;

    padding:12px 14px;

    color:#b4233c;

    background:rgba(255,241,242,.96);

    border:1px solid #ffd3da;
    border-radius:10px;
}


/* =====================================================
   BAŞARILI MESAJ
===================================================== */

.success{
    margin:15px 0;

    padding:12px 14px;

    color:#087f52;

    background:rgba(237,253,244,.96);

    border:1px solid #b9efd4;
    border-radius:10px;
}


/* =====================================================
   LOGIN ALT AÇIKLAMA
===================================================== */

form + p{
    margin-top:22px;
    margin-bottom:0;

    text-align:center;

    color:#7d8999;

    font-size:12px;
}


/* =====================================================
   LOGIN FOOTER
===================================================== */

.auth-footer{
    margin-top:25px;

    padding-top:18px;

    border-top:1px solid rgba(160,175,195,.28);

    text-align:center;

    color:#8a96a7;

    font-size:11px;
    line-height:1.7;

    letter-spacing:.4px;
}


/* =====================================================
   SOL ALT
   MEYER WERFT / PAPENBURG
===================================================== */

.shipyard-label{
    position:fixed;

    left:34px;
    bottom:30px;

    z-index:2;

    color:#ffffff;

    font-size:11px;
    font-weight:600;

    line-height:1.7;

    letter-spacing:2px;

    text-transform:uppercase;

    text-shadow:
        0 2px 12px rgba(0,0,0,.85);
}


.shipyard-label strong{
    display:block;

    margin-bottom:1px;

    color:#ffffff;

    font-size:19px;
    font-weight:750;

    letter-spacing:1.2px;
}


/* =====================================================
   SAĞ ALT
   CARNIVAL FESTIVALE / PROJECT CONTROL
===================================================== */

.project-label{
    position:fixed;

    right:34px;
    bottom:30px;

    z-index:2;

    text-align:right;

    color:#ffffff;

    font-size:11px;
    font-weight:600;

    line-height:1.7;

    letter-spacing:2px;

    text-transform:uppercase;

    text-shadow:
        0 2px 12px rgba(0,0,0,.85);
}


.project-label strong{
    display:block;

    margin-bottom:1px;

    color:#ffffff;

    font-size:18px;
    font-weight:750;

    letter-spacing:1.2px;
}


/* =====================================================
   LINKLER
===================================================== */

a{
    color:#1769e0;

    text-decoration:none;
}


a:hover{
    text-decoration:underline;
}


/* =====================================================
   SETUP / WIDE SAYFALAR
===================================================== */

.grid{
    display:grid;

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

    gap:24px;
}


section{
    padding:20px;

    border:1px solid #e2e8f0;
    border-radius:12px;

    background:rgba(255,255,255,.78);
}


table{
    width:100%;

    border-collapse:collapse;

    font-size:13px;
}


td,
th{
    padding:10px;

    border-bottom:1px solid #e2e8f0;

    text-align:left;
}


code{
    overflow-wrap:anywhere;
}


/* =====================================================
   TABLET
===================================================== */

@media(max-width:850px){

    .shipyard-label,
    .project-label{
        display:none;
    }

}


/* =====================================================
   TELEFON
===================================================== */

@media(max-width:650px){

    body{
        padding:16px 12px;

        background-position:center center;
        background-attachment:scroll;
    }


    main{
        max-width:100%;

        padding:28px 22px;

        border-radius:18px;
    }


    .brand img{
        width:225px !important;
    }


    h1{
        font-size:23px;
    }


    .grid{
        grid-template-columns:1fr;
    }

}