@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap');

*{
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
    margin:0; padding:0;
    box-sizing: border-box;
    outline: none; border: none;
    text-decoration: none;
}

.container{
    min-height: 100vh;
    background: #eee;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column;
    padding-bottom: 60px;
}

.container form{
    border-radius: 5px;
    box-shadow: 0 10px 15px rgba(0,0,0,.1);
    padding: 20px;
    width: 600px;
    padding-top: 160px;
}

.container form .inputBox{
    margin-top: 20px;
}

.container form .inputBox span{
    display: block;
    color:#999;
    padding-bottom: 5px;
}

.container form .inputBox input,
.container form .inputBox select{
    width: 100%;
    padding: 10px;
    border-radius: 10px;
    border:1px solid rgba(0,0,0,.3);
    color:#444;
}

.container form .flexbox{
    display: flex;
    gap:15px;
}

.container form .flexbox .inputBox{
    flex:1 1 150px;
}

.container form .submit-btn{
    width: 100%;
    background:linear-gradient(45deg, blueviolet, deeppink);
    margin-top: 20px;
    padding: 10px;
    font-size: 20px;
    color:#fff;
    border-radius: 10px;
    cursor: pointer;
    transition: .2s linear;
}

.container form .submit-btn:hover{
    letter-spacing: 2px;
    opacity: .8;
}

.container .card-container{
    margin-bottom: -150px;
    position: relative;
    height: 250px;
    width: 400px;
}

.container .card-container .front{
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0; left: 0;
    background:linear-gradient(45deg, blueviolet, deeppink);
    border-radius: 5px;
    backface-visibility: hidden;
    box-shadow: 0 15px 25px rgba(0,0,0,.2);
    padding:20px;
    transform:perspective(1000px) rotateY(0deg);
    transition:transform .4s ease-out;
}

.container .card-container .front .image{
    display: flex;
    align-items:center;
    justify-content: space-between;
    padding-top: 10px;
}

.container .card-container .front .image img{
    height: 50px;
}

.container .card-container .front .card-number-box{
    padding:30px 0;
    font-size: 22px;
    color:#fff;
}

.container .card-container .front .flexbox{
    display: flex;
}

.container .card-container .front .flexbox .box:nth-child(1){
    margin-right: auto;
}

.container .card-container .front .flexbox .box{
    font-size: 15px;
    color:#fff;
}

.container .card-container .back{
    position: absolute;
    top:0; left: 0;
    height: 100%;
    width: 100%;
    background:linear-gradient(45deg, blueviolet, deeppink);
    border-radius: 5px;
    padding: 20px 0;
    text-align: right;
    backface-visibility: hidden;
    box-shadow: 0 15px 25px rgba(0,0,0,.2);
    transform:perspective(1000px) rotateY(180deg);
    transition:transform .4s ease-out;
}

.container .card-container .back .stripe{
    background: #000;
    width: 100%;
    margin: 10px 0;
    height: 50px;
}

.container .card-container .back .box{
    padding: 0 20px;
}

.container .card-container .back .box span{
    color:#fff;
    font-size: 15px;
}

.container .card-container .back .box .cvv-box{
    height: 50px;
    padding: 10px;
    margin-top: 5px;
    color:#333;
    background: #fff;
    border-radius: 5px;
    width: 100%;
}

.container .card-container .back .box img{
    margin-top: 30px;
    height: 30px;
}

/* 2026 theme overrides (appended) - modern dark variables and component overrides
     Appended to preserve original layout and classes while updating visuals */
:root{
    --bg:#f4f6f8; /* page background */
    --card:#ffffff;
    --muted:#6c757d;
    --text:#0f1724;
    --accent:#0d6efd; /* bootstrap primary */
    --accent-2:#0b5ed7;
    --radius:10px;
    --container-max:1100px;
}

/* Reset aggressive uppercase from earlier rules for readable UI */
body, input, select, textarea, button, .container, .card-container{ text-transform: none; }

/* Base */
*{box-sizing:border-box}
html,body{height:100%;}
body{
    margin:0;
    font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    background:var(--bg);
    color:var(--text);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

/* Page layout */
#page{max-width:var(--container-max);margin:28px auto;padding:22px;background:transparent;border-radius:var(--radius);} 
#header{padding:14px 20px 8px;border-bottom:1px solid rgba(0,0,0,0.06);}
#branding table{width:100%;}
#branding img{width:56px;height:auto}
#branding h1{margin:0;font-size:20px;font-weight:600;line-height:1;color:var(--text)}
#branding h1 a{color:var(--text);text-decoration:none}

/* Content */
#content{padding:20px}
#main h1{font-size:26px;margin:6px 0 18px;color:var(--accent-2)}

/* Forms and tables */
table.table{width:100%;border-collapse:collapse;background:transparent}
table.table td, table.table th{padding:10px;vertical-align:middle;color:var(--text)}
.infologin{font-weight:600;color:var(--muted);width:260px}

input, select, textarea, button{font-family:inherit;font-size:15px}
select, input[type="text"], input[type="password"], textarea{
    background:var(--card);
    border:1px solid rgba(0,0,0,0.08);
    color:var(--text);
    padding:10px 12px;border-radius:8px;outline:none;transition:all .14s ease-in-out;box-shadow:0 1px 2px rgba(16,24,40,0.04);
}
select:focus, input:focus, textarea:focus{box-shadow:0 6px 18px rgba(13,110,253,0.08);border-color:var(--accent)}

/* Buttons */
button, .btn{display:inline-block;padding:10px 16px;background:var(--accent);color:#fff;border:none;border-radius:8px;font-weight:600;cursor:pointer}
button.secondary, .btn.secondary{background:transparent;border:1px solid rgba(0,0,0,0.06);color:var(--text)}
button:active{transform:translateY(1px)}

/* Notices */
[id$="warning"]{padding:10px;border-radius:8px;background:var(--card);border:1px solid rgba(0,0,0,0.06);color:var(--muted)}

/* Table responsive for small screens */
@media (max-width:720px){
    #page{margin:12px;padding:14px}
    table.table td{display:block;width:100%;padding:8px 0}
    .infologin{display:block;margin-bottom:6px}
    #branding img{width:44px}
}

/* Utility helpers */
.text-muted{color:var(--muted)}
.center{display:flex;align-items:center;justify-content:center}

/* Accessibility: reduce motion */
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* Login page specific styles (to match randevu.tmo.gov.tr look) */
.login-wrapper{min-height:60vh;display:flex;align-items:center;justify-content:center;padding:30px}
.login-card{width:420px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:28px;border-radius:12px;box-shadow:0 12px 40px rgba(2,6,23,0.6);}
.login-card h1{margin:8px 0 6px;font-size:22px;color:var(--text)}
.login-card .lead{font-size:13px;color:var(--muted);margin-bottom:12px}
.login-card .form-group{margin-bottom:14px;text-align:left}
.login-card label{display:block;margin-bottom:6px;color:var(--muted);font-weight:600}
.form-control{width:100%;padding:10px 12px;border-radius:8px;border:1px solid rgba(255,255,255,0.06);background:rgba(0,0,0,0.04);color:var(--text)}
.btn-primary{background:var(--accent-2);border:none;color:#fff;padding:10px 14px;border-radius:8px}
.btn-block{display:block;width:100%}
.login-card .help,.login-card .important{margin-top:12px;color:var(--muted);font-size:13px}
.login-card a{color:var(--accent);text-decoration:none}

/* Restored formbutton style (legacy) */
.formbutton{display:inline-block;padding:10px 14px;background:var(--accent);color:#fff;border-radius:8px;font-weight:600;cursor:pointer;border:none}
.submitButton{min-width:120px}

/* Mobile adjustments */
@media (max-width:576px){
    .login-wrapper{padding:18px}
    .login-card{width:100%;max-width:420px;padding:16px;border-radius:10px}
    #page{padding:12px;margin:8px}
    .login-card h2{font-size:18px}
    .login-card .lead{font-size:13px}
    .form-group.d-flex{flex-direction:row;gap:8px}
    .formbutton, .btn{flex:1 1 auto}
}

@media (max-width:420px){
    .form-group.d-flex{flex-direction:column}
    .formbutton, .btn{width:100%}
}