/* İEO Kimlik giriş sayfaları. Bileşenler css/site-pages.css'ten (site-page-columns/-brand/-form--lg, ieo-btn);
   burada yalnız iki düzenin kabuğu ve girişe özgü parçalar. */

/* Site içi (layout-site): ana alan ekranı doldurur, footer kaydırınca görünür. */
.giris-site {
    --giris-scene-h: clamp(140px, 23vh, 240px);
    position: relative;
    overflow: hidden;
    min-height: calc(100vh - 64px);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: clamp(12px, 2.5vh, 28px) 20px calc(var(--giris-scene-h) * .85);
    background: var(--site-page-ui-surface);
    font-family: var(--site-page-font);
}

.giris-site__inner { position: relative; z-index: 1; width: 100%; max-width: 993px; display: flex; flex-direction: column; gap: 8px; }

/* Alt sahne: dalga + İstanbul silueti (images/giris/istanbul-siluet.webp, beyaz zeminli çizim → multiply). */
.giris-scene { position: absolute; left: 0; right: 0; bottom: 0; height: var(--giris-scene-h); pointer-events: none; }
.giris-scene__wave { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 80%; display: block; }
.giris-scene__wave path:first-child { fill: var(--site-page-ui-primary-tint); }
.giris-scene__wave path:last-child { fill: #e3f2fb; }
.giris-scene__skyline {
    position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
    height: 100%; max-width: 96vw; aspect-ratio: 1280 / 316;
    background: url(/images/giris/istanbul-siluet.webp) center / 100% auto no-repeat;
    mix-blend-mode: multiply; opacity: .9;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.giris-site__inner > .site-page-back { align-self: flex-start; }

.giris-app {
    display: flex;
    flex-direction: column;
    gap: 3px;

    margin: 0 0 24px;
    padding: 12px 16px;

    background: var(--site-page-ui-primary-tint);
    border: 1px solid var(--site-page-ui-highlight-border);
    border-radius: var(--site-page-ui-radius-card);

    box-shadow: var(--site-page-ui-shadow-card);

    transition:
        border-color 180ms ease,
        box-shadow 180ms ease;
}

.giris-app__label {
    margin: 0;

    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.04em;
    text-transform: uppercase;

    color: var(--site-page-ui-text-muted);
}

.giris-app__name {
    margin: 0;

    font-size: 15px;
    font-weight: 650;
    line-height: 1.45;
    letter-spacing: -0.01em;

    color: var(--site-page-ui-heading-strong);
}

/* Bağımsız kart (layout): başka uygulamadan gelen giriş. */
body:not(.is-site) {
    margin: 0;
    background: var(--site-page-ui-neutral-bg);
    color: var(--site-page-ui-text);
    font: 16px/1.5 var(--site-page-font);
}
body:not(.is-site) *, .giris-site * { box-sizing: border-box; }
.giris {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding: 32px 16px;
}
.giris-card {
    width: 100%;
    max-width: 460px;
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: 40px;
    background: var(--site-page-ui-surface);
    border: 1px solid var(--site-page-ui-border-soft);
    border-radius: 16px;
    box-shadow: var(--site-page-ui-shadow-card);
}
.giris-card .site-page-back { align-self: flex-start; margin: 0; }
.giris-logo { align-self: center; line-height: 0; }
.giris-logo img { width: 190px; height: auto; }
.giris-footer { display: flex; gap: 24px; flex-wrap: wrap; justify-content: center; font-size: 14px; }
.giris-footer a { color: var(--site-page-ui-subtle); text-decoration: none; }

/* Girişe özgü parçalar */
.giris-caps { display: flex; gap: 6px; align-items: center; margin: 0; color: var(--site-page-ui-warning-text); }
.giris-captcha-row { display: flex; align-items: center; gap: 12px; }
.giris-captcha-row .form-control { flex: 1 1 auto; min-width: 0; }
.giris-captcha-row img { flex: 0 0 auto; width: 120px; height: 41px; image-rendering: pixelated; border: 1px solid var(--site-page-ui-border-strong); border-radius: 6px; }
.giris-captcha-row .ieo-btn-link { flex: none; min-height: 44px; }
[hidden] { display: none !important; }

/* Hesap türü değişince içerik solup yeni metinle belirir (giris.js [data-realm-swap]). */
[data-realm-swap] { transition: opacity .15s cubic-bezier(.4, 0, 1, 1), transform .15s cubic-bezier(.4, 0, 1, 1); }
[data-realm-swap].is-out { opacity: 0; transform: translateY(-4px); }
[data-realm-swap].is-in { animation: giris-swapin .3s cubic-bezier(.22, 1, .36, 1); }
.giris-shake { animation: giris-shake .35s cubic-bezier(.22, 1, .36, 1); }
@keyframes giris-swapin { from { opacity: 0; transform: translateY(6px); } }
@keyframes giris-shake { 20% { transform: translateX(-5px); } 45% { transform: translateX(4px); } 70% { transform: translateX(-2px); } }

@media (min-width: 901px) and (max-height: 820px) {
    .giris-site { --giris-scene-h: clamp(110px, 17vh, 140px); padding-top: 12px; }
    .giris-hint { display: none; }
}
@media (max-width: 900px) {
    .giris-site { --giris-scene-h: 120px; padding: 16px 16px var(--giris-scene-h); min-height: calc(100vh - 56px); }
    .giris-site__inner { max-width: 520px; gap: 16px; }
    .giris-scene__wave { height: 100%; }
    .giris-scene__skyline { display: none; }
}
@media (max-width: 480px) {
    body:not(.is-site) { background: var(--site-page-ui-surface); }
    .giris { justify-content: flex-start; padding: 0; gap: 16px; }
    .giris-card { border: 0; border-radius: 0; box-shadow: none; padding: 32px 20px 24px; max-width: none; }
    .giris-footer { padding-bottom: 24px; }
}
@media (prefers-reduced-motion: reduce) {
    [data-realm-swap], [data-realm-swap].is-in, .giris-shake { animation: none !important; transition: none !important; }
}