/* =====================================================================================================
   ARTUKBEY PORTAL — GİRİŞ (giriş, ilk kurulum, yetkisiz, zorunlu şifre değişimi)
   Masaüstü: solda çerçeveli vitrin (resim / video / kampanya), sağda kraft zeminli giriş paneli.
   Telefon: üstte vitrin, giriş formu alttan açılan kart gibi vitrinin üstüne biner.
   Ölçü portalın geri kalanıyla aynı dil: başlık 28 px Young Serif + altın çift çizgi, kontrol 40 px.
   ===================================================================================================== */

.ap-giris-govde { min-height: 100vh; min-height: 100svh; background: var(--ap-zemin); }
.ap-giris { min-height: 100vh; min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(400px, 1fr); }

.ap-giris-vitrin {
    position: sticky; top: 12px; margin: 12px; margin-inline-end: 0;
    height: calc(100vh - 24px); height: calc(100svh - 24px); min-height: 520px;
    border-radius: var(--ap-r-s); overflow: hidden; isolation: isolate;
    box-shadow: 0 1px 2px rgba(23, 17, 14, .2);
}
.ap-giris-vitrin > .ap-vitrin { position: absolute; inset: 0; }
.ap-giris-kilit { position: absolute; z-index: 5; top: 24px; inset-inline-start: clamp(20px, 5%, 48px); color: #fff8f0; }
.ap-giris-kilit:hover { color: #fff; }
.ap-giris-kilit .ap-kilit-ad { font-size: 20px; }
.ap-giris-kilit .ap-kilit-alt { color: var(--ap-altin-marka); opacity: .9; }

.ap-giris-panel { position: relative; display: flex; flex-direction: column; padding: 24px clamp(24px, 5vw, 64px) 20px; isolation: isolate; }
.ap-giris-panel::before {
    /* sağ üstte soluk altın Artuklu yıldız dokusu */
    content: ""; position: absolute; top: 0; inset-inline-end: 0; width: 300px; height: 300px; z-index: -1; pointer-events: none;
    background-color: color-mix(in srgb, var(--ap-altin) 22%, transparent);
    -webkit-mask: var(--ap-desen) 0 0 / 64px 64px repeat, radial-gradient(circle at 100% 0%, #000 0%, transparent 70%);
    -webkit-mask-composite: source-in;
    mask: var(--ap-desen) 0 0 / 64px 64px repeat, radial-gradient(circle at 100% 0%, #000 0%, transparent 70%);
    mask-composite: intersect;
}
.ap-giris-ust { display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
.ap-giris-ic { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; width: 100%; max-width: 360px; margin: 0 auto; padding: 24px 0; }
.ap-giris-dip { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; font-size: 12px; color: var(--ap-metin-3); text-align: center; }

.ap-giris-kutu { width: 100%; }
.ap-giris-kutu h1 {
    font-family: var(--ap-baslik); font-weight: 400; font-synthesis: none;
    font-size: 28px; line-height: 34px; letter-spacing: -.01em; margin: 0 0 8px;
}
.ap-giris-kutu h1::after { content: ""; display: block; width: 40px; height: 4px; margin-top: 10px; border-top: 1px solid var(--ap-altin); border-bottom: 1px solid var(--ap-altin); opacity: .8; }
.ap-giris-alt { color: var(--ap-metin-2); font-size: 13px; margin: 0 0 20px; }
.ap-giris-kutu .ap-girdi { height: var(--ap-kontrol-buyuk); font-size: 14px; }
@media (pointer: coarse) { .ap-giris-kutu .ap-girdi { font-size: 16px; } }
.ap-giris-kutu .ap-alan { margin-bottom: 14px; }
.ap-giris-kutu .ap-dugme-ana { height: var(--ap-kontrol-buyuk); font-size: 14px; margin-top: 4px; }
.ap-giris-dugme-ok { transition: transform var(--ap-sure-1) var(--ap-egri-gir); }
.ap-giris-kutu .ap-dugme-ana:hover .ap-giris-dugme-ok { transform: translateX(3px); }
.ap-giris-not { display: flex; gap: 8px; align-items: flex-start; margin: 20px 0 0; padding: 10px 12px; border-radius: var(--ap-r-k); background: var(--ap-yuzey-2); color: var(--ap-metin-2); font-size: 12px; line-height: 18px; }   /* bilgi notu: kraft zemin uyarı gibi okunuyordu → nötr */
.ap-giris-not .ap-i { color: var(--ap-metin-3); font-size: 16px; margin-top: 1px; }
.ap-giris-cikis { margin-top: 12px; text-align: center; }

/* ilk kurulum, şifre değiştirme gibi uzun formlar */
.ap-giris-kutu .ap-alan-izgara { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }

@media (max-width: 991.98px) {
    .ap-giris { display: block; }
    .ap-giris-vitrin {
        position: relative; top: auto; margin: 0; border-radius: 0; box-shadow: none;
        height: 48vh; height: 48svh; min-height: 320px; max-height: 560px;
    }
    .ap-giris-vitrin .ap-vitrin { --ap-vitrin-alt: 52px; }
    .ap-giris-vitrin .ap-vitrin-metin { inset-inline-start: 20px; inset-inline-end: 20px; gap: 8px; }
    .ap-giris-vitrin .ap-vitrin-metin h2 { font-size: 26px; line-height: 32px; }
    .ap-giris-vitrin .ap-vitrin-metin p { font-size: 13px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .ap-giris-vitrin .ap-vitrin-cubuklar { top: calc(env(safe-area-inset-top, 0px) + 10px); bottom: auto; inset-inline-start: 14px; inset-inline-end: 14px; max-width: none; }
    .ap-giris-vitrin .ap-vitrin-denetim { top: calc(env(safe-area-inset-top, 0px) + 32px); bottom: auto; inset-inline-end: 12px; }
    .ap-giris-vitrin .ap-vitrin-denetim [data-ap-vitrin-onceki], .ap-giris-vitrin .ap-vitrin-denetim [data-ap-vitrin-sonraki] { display: none; }
    .ap-giris-vitrin .ap-vitrin-dugme { width: 32px; height: 32px; }
    .ap-giris-kilit { top: calc(env(safe-area-inset-top, 0px) + 36px); inset-inline-start: 18px; }
    .ap-giris-kilit .ap-kilit-ad { font-size: 18px; }
    .ap-giris-vitrin .ap-vitrin-sahne::after {
        background:
            linear-gradient(180deg, rgba(23, 17, 14, .6) 0%, rgba(23, 17, 14, 0) 30%),
            linear-gradient(0deg, rgba(23, 17, 14, .92) 0%, rgba(23, 17, 14, .6) 30%, rgba(23, 17, 14, 0) 64%);
    }

    .ap-giris-panel {
        margin-top: -20px; z-index: 2; border-radius: var(--ap-r-s) var(--ap-r-s) 0 0; background: var(--ap-zemin);
        padding: 24px 20px calc(20px + env(safe-area-inset-bottom, 0px));
        min-height: calc(52svh + 20px);
    }
    .ap-giris-panel::after { content: ""; position: absolute; top: 8px; inset-inline-start: 50%; width: 36px; height: 4px; margin-inline-start: -18px; border-radius: 4px; background: var(--ap-cizgi-guclu); }
    .ap-giris-panel::before { width: 200px; height: 180px; border-start-end-radius: var(--ap-r-s); }
    .ap-giris-ust { position: absolute; top: 14px; inset-inline-end: 14px; }
    .ap-giris-ic { justify-content: flex-start; padding: 8px 0 20px; max-width: 440px; }
    .ap-giris-kutu h1 { font-size: 24px; line-height: 30px; }
    .ap-giris-alt { margin-bottom: 18px; }
    .ap-giris-kutu .ap-alan-izgara { grid-template-columns: 1fr; }
}
@media (max-width: 991.98px) and (max-height: 700px) {
    .ap-giris-vitrin { height: 40svh; min-height: 280px; }
    .ap-giris-vitrin .ap-vitrin-metin p { display: none; }
}