:root {
    --turkuaz: #4FBDB8;
    --turkuaz-koyu: #368f8b;
    --turkuaz-acik: #E8F7F6;
    --turkuaz-orta: #A8E0DC;
    --lacivert: #1F2D3D;
    --gri-zemin: #F5F7F8;
    --gri-metin: #6B7785;
    --gri-cizgi: #E7EBEE;
    --beyaz: #ffffff;
    --kirmizi: #E24B4A;
    --kirmizi-acik: #FDECEA;
    --sari: #E0A800;
    --sari-acik: #FDF3DC;
    --yesil: #3B9B63;
    --yesil-acik: #EAF6EE;
    --golge-hafif: 0 1px 3px rgba(31,45,61,0.06), 0 1px 2px rgba(31,45,61,0.04);
    --golge-orta: 0 4px 14px rgba(31,45,61,0.08);
    --golge-guclu: 0 12px 32px rgba(31,45,61,0.16);
}

* { box-sizing: border-box; }

html { scrollbar-color: #cfd8dc transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #d3dade; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #b8c2c7; }

body {
    margin: 0;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Tahoma, Arial, sans-serif;
    background: var(--gri-zemin);
    color: var(--lacivert);
    -webkit-font-smoothing: antialiased;
}

.giris-sayfasi {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(160deg, #EFFBFA 0%, #F5F7F8 55%);
}

.giris-kutusu {
    background: var(--beyaz);
    padding: 44px 40px;
    border-radius: 18px;
    box-shadow: var(--golge-guclu);
    width: 100%;
    max-width: 370px;
    text-align: center;
}

.giris-kutusu img { max-width: 190px; margin-bottom: 26px; }

.giris-kutusu input[type="text"],
.giris-kutusu input[type="password"] {
    width: 100%;
    padding: 13px 16px;
    margin-bottom: 14px;
    border: 1.5px solid var(--gri-cizgi);
    border-radius: 10px;
    font-size: 15px;
    transition: border-color 0.15s, box-shadow 0.15s;
    background: #FBFCFC;
}

.giris-kutusu input:focus {
    outline: none;
    border-color: var(--turkuaz);
    box-shadow: 0 0 0 3px var(--turkuaz-acik);
    background: white;
}

.giris-kutusu button {
    width: 100%;
    padding: 13px;
    background: var(--turkuaz);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
    box-shadow: 0 2px 8px rgba(79,189,184,0.35);
}

.giris-kutusu button:hover { background: var(--turkuaz-koyu); }
.giris-kutusu button:active { transform: scale(0.98); }

.hata-mesaji {
    background: var(--kirmizi-acik);
    color: #a02f2e;
    padding: 11px 14px;
    border-radius: 10px;
    margin-bottom: 14px;
    font-size: 13.5px;
    text-align: left;
}

.ust-bar {
    background: var(--beyaz);
    padding: 14px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: var(--golge-hafif);
}
.ust-bar img { height: 40px; }
.ust-bar .kullanici-bilgi { font-size: 14px; color: var(--gri-metin); }
.ust-bar a.cikis { color: var(--turkuaz-koyu); text-decoration: none; font-weight: 600; margin-left: 16px; }

.kullanici-bilgi {
    font-size: 13.5px;
    color: var(--gri-metin);
    background: var(--beyaz);
    padding: 7px 14px;
    border-radius: 20px;
    box-shadow: var(--golge-hafif);
}

.uygulama-izgara {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 20px;
    padding: 20px 30px 40px;
    max-width: 920px;
    margin: 0 auto;
}

.uygulama-kart {
    background: var(--beyaz);
    border-radius: 16px;
    padding: 34px 20px;
    text-align: center;
    text-decoration: none;
    color: var(--lacivert);
    box-shadow: var(--golge-hafif);
    border: 1px solid var(--gri-cizgi);
    transition: transform 0.16s, box-shadow 0.16s, border-color 0.16s;
}

.uygulama-kart:hover {
    transform: translateY(-4px);
    box-shadow: var(--golge-orta);
    border-color: var(--turkuaz-orta);
}

.uygulama-kart .ikon {
    font-size: 34px;
    margin-bottom: 12px;
    width: 60px;
    height: 60px;
    line-height: 60px;
    margin-left: auto;
    margin-right: auto;
    background: var(--turkuaz-acik);
    border-radius: 16px;
}

.uygulama-kart .baslik { font-weight: 600; font-size: 14.5px; }

.uygulama-kart.pasif { opacity: 0.45; cursor: not-allowed; pointer-events: none; }

.btn-birincil { background: var(--turkuaz); color: white; box-shadow: 0 2px 6px rgba(79,189,184,0.3); }
.btn-birincil:hover { background: var(--turkuaz-koyu); }
.btn-ikincil { background: #EEF1F2; color: #445; }
.btn-ikincil:hover { background: #E4E8EA; }
.btn-tehlike { background: var(--kirmizi-acik); color: #a02f2e; }

.modal-arkaplan { display:none; position:fixed; inset:0; background:rgba(20,30,40,0.45); align-items:center; justify-content:center; z-index:100; backdrop-filter: blur(2px); }
.modal-arkaplan.acik { display:flex; animation: modalFadeIn 0.15s ease-out; }
.modal-kutu { background:white; border-radius:16px; padding:28px; width:100%; max-width:420px; max-height:88vh; overflow-y:auto; box-shadow: var(--golge-guclu); }
.modal-kutu h3 { margin-top:0; font-size: 18px; }
.modal-kutu label { font-size:12.5px; color: var(--gri-metin); display:block; margin-bottom:5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; }
.modal-kutu input, .modal-kutu select, .modal-kutu textarea {
    width:100%; padding:11px 13px; margin-bottom:16px; border:1.5px solid var(--gri-cizgi); border-radius:9px; font-size:14px; font-family:inherit; transition: border-color 0.15s;
    background: #FBFCFC;
}
.modal-kutu input:focus, .modal-kutu select:focus, .modal-kutu textarea:focus { outline: none; border-color: var(--turkuaz); background: white; }
.modal-kutu input[type="checkbox"] { width: auto; padding: 0; margin: 0; flex-shrink: 0; }
.kisi-secim-item { display: flex; align-items: center; gap: 11px; padding: 9px 6px; border-radius: 9px; transition: background 0.12s; }
.kisi-secim-item:hover { background: var(--gri-zemin); }
.kisi-secim-item label { flex: 1; font-size: 14px; cursor: pointer; margin-bottom: 0; text-transform: none; font-weight: 400; letter-spacing: normal; color: var(--lacivert); }
.modal-butonlar { display:flex; gap:10px; }
.modal-butonlar button { flex:1; padding:12px; border-radius:9px; border:none; font-weight:600; cursor:pointer; font-size:14px; transition: background 0.15s, transform 0.1s; }
.modal-butonlar button:active { transform: scale(0.98); }
.modal-hata { background: var(--kirmizi-acik); color:#a02f2e; padding:9px 12px; border-radius:8px; margin-bottom:12px; font-size:13px; display:none; }

@keyframes modalFadeIn { from { opacity: 0; } to { opacity: 1; } }