/* ==========================================================================
   YÖNETİM GİRİŞİ — standalone sayfa (Tabler yok)
   Panelle aynı dil: gri zemin, beyaz 20px köşeli kart, tek mavi vurgu,
   koyu tema sistem tercihine göre.
   ========================================================================== */

:root {
    --g-zemin: #f5f5f7;
    --g-yuzey: #ffffff;
    --g-yuzey-2: #f2f2f7;
    --g-metin: #1d1d1f;
    --g-metin-2: #6e6e73;
    --g-metin-3: #aeaeb2;
    --g-cizgi: rgba(0, 0, 0, .07);
    --g-vurgu: #0a7cff;
    --g-vurgu-koyu: #0066d6;
    --g-vurgu-yumusak: rgba(10, 124, 255, .12);
    --g-kirmizi: #d93025;
    --g-golge: 0 1px 2px rgba(0, 0, 0, .04), 0 24px 60px rgba(0, 0, 0, .08);
}
/* Giriş her zaman açık temada: panel teması çerezle seçiliyor ve giriş
   öncesinde tercih bilinmiyor; sistem tercihine göre koyu açılması
   kullanıcıyı şaşırttı. */

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
    margin: 0;
    background: var(--g-zemin);
    color: var(--g-metin);
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    /* Çok hafif radyal ışık: zemin düz griden bir tık canlı. */
    background-image: radial-gradient(60rem 40rem at 50% -10%, rgba(10, 124, 255, .07), transparent 60%);
}

.giris {
    min-height: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 2rem 1rem calc(2rem + env(safe-area-inset-bottom));
}
.giris__kart {
    width: 100%; max-width: 24rem;
    padding: 2.25rem 2rem 1.75rem;
    background: var(--g-yuzey);
    border: 1px solid var(--g-cizgi);
    border-radius: 20px;
    box-shadow: var(--g-golge);
    animation: giris-gel .35s cubic-bezier(.16, 1, .3, 1);
}
@keyframes giris-gel { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .giris__kart { animation: none; } }

.giris__marka {
    display: inline-flex; align-items: center; gap: .6rem;
    color: var(--g-metin); text-decoration: none; font-size: 1rem; font-weight: 500; letter-spacing: -.01em;
    margin-bottom: 1.6rem;
}
.giris__marka b { font-weight: 700; }
.giris__logo {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.25rem; height: 2.25rem; border-radius: 11px;
    background: linear-gradient(145deg, #0a7cff, #4da3ff);
    color: #fff; font-weight: 800; font-size: 1.15rem;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}

.giris h1 { margin: 0 0 .3rem; font-size: 1.45rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.2; }
.giris__alt { margin: 0 0 1.4rem; font-size: .86rem; color: var(--g-metin-2); line-height: 1.45; }

.giris__hata {
    display: flex; align-items: flex-start; gap: .5rem;
    margin: 0 0 1rem; padding: .7rem .85rem; border-radius: 12px;
    background: rgba(255, 59, 48, .1); color: var(--g-kirmizi);
    font-size: .84rem; font-weight: 500; line-height: 1.4;
}
.giris__hata svg { width: 1rem; height: 1rem; flex: none; margin-top: .1rem; }

.giris__form { display: flex; flex-direction: column; gap: .9rem; }
.giris__alan { display: flex; flex-direction: column; gap: .35rem; }
.giris__alan > span:first-child { font-size: .76rem; font-weight: 500; color: var(--g-metin-2); padding-left: .15rem; }
.giris__alan input,
.giris__alan select {
    width: 100%; min-height: 2.75rem; padding: 0 .9rem;
    border: 1px solid var(--g-cizgi); border-radius: 12px;
    background: var(--g-yuzey-2); color: var(--g-metin);
    font: inherit; font-size: .95rem;
    transition: box-shadow .15s, background .15s, border-color .15s;
    -webkit-appearance: none; appearance: none;
}
.giris__alan input::placeholder { color: var(--g-metin-3); }
.giris__alan input:focus { outline: 0; border-color: var(--g-vurgu); background: var(--g-yuzey); box-shadow: 0 0 0 4px var(--g-vurgu-yumusak); }
.giris__alan input:-webkit-autofill { -webkit-box-shadow: 0 0 0 100px var(--g-yuzey-2) inset; -webkit-text-fill-color: var(--g-metin); }

.giris__sifre { position: relative; display: block; }
.giris__sifre input { padding-right: 2.9rem; }
.giris__goz {
    position: absolute; right: .35rem; top: 50%; transform: translateY(-50%);
    width: 2.1rem; height: 2.1rem; border: 0; border-radius: 50%;
    background: transparent; color: var(--g-metin-3); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .15s, color .15s;
}
.giris__goz:hover { background: var(--g-vurgu-yumusak); color: var(--g-vurgu); }
.giris__goz:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--g-vurgu-yumusak); }
.giris__goz svg { width: 1.1rem; height: 1.1rem; }
.giris__goz .goz-kapali, .giris__goz.acik .goz-acik { display: none; }
.giris__goz.acik .goz-kapali { display: block; }

.giris__dugme {
    position: relative;
    margin-top: .35rem; min-height: 2.85rem; border: 0; border-radius: 999px;
    background: var(--g-vurgu); color: #fff;
    font: inherit; font-size: .95rem; font-weight: 600; letter-spacing: -.01em;
    cursor: pointer; transition: background .15s, transform .1s, box-shadow .15s;
    -webkit-tap-highlight-color: transparent;
}
.giris__dugme:hover { background: var(--g-vurgu-koyu); }
.giris__dugme:active { transform: scale(.985); }
.giris__dugme:focus-visible { outline: 0; box-shadow: 0 0 0 4px var(--g-vurgu-yumusak); }
.giris__dugme:disabled { opacity: .7; cursor: progress; }
.giris__dugme.bekliyor span { visibility: hidden; }
.giris__dugme.bekliyor::after {
    content: ""; position: absolute; left: 50%; top: 50%; width: 1.1rem; height: 1.1rem; margin: -.55rem 0 0 -.55rem;
    border: 2px solid rgba(255, 255, 255, .4); border-top-color: #fff; border-radius: 50%;
    animation: giris-don .7s linear infinite;
}
@keyframes giris-don { to { transform: rotate(360deg); } }

.giris__geri {
    display: inline-block; margin-top: 1.4rem;
    color: var(--g-vurgu); font-size: .84rem; font-weight: 500; text-decoration: none;
}
.giris__geri:hover { text-decoration: underline; }
.giris__telif { margin: 1.5rem 0 0; font-size: .74rem; color: var(--g-metin-3); }

/* reCAPTCHA rozeti köşede durur; formu itmesin. */
.grecaptcha-badge { z-index: 1; }

@media (max-width: 479.98px) {
    .giris { padding: 2.5rem .75rem calc(1rem + env(safe-area-inset-bottom)); justify-content: flex-start; }
    .giris__kart { padding: 1.75rem 1.25rem 1.5rem; border-radius: 18px; }
    .giris h1 { font-size: 1.3rem; }
}

/* reCAPTCHA bildirimi (anahtar verilince _Recaptcha parçası basar). */
.recaptcha-not { margin: -.2rem 0 0; font-size: .7rem; line-height: 1.45; color: var(--g-metin-3); }
.recaptcha-not a { color: var(--g-metin-2); }

.giris__telif a { color: var(--g-metin-2); text-decoration: none; }
.giris__telif a:hover { text-decoration: underline; }

/* ==========================================================================
   BÖLÜNMÜŞ GİRİŞ (giris2): solda marka + ortalanmış sade form, sağda tam
   yükseklik video ve altta alıntı kartı. Ortak parçalar (giris__alan,
   giris__goz, giris__dugme, giris__hata) yukarıdaki kurallardan gelir.
   ========================================================================== */
body.giris-bolunmus { background: #f7f7f7; background-image: none; overflow-x: hidden; }

.giris2 { position: relative; display: grid; grid-template-columns: 1fr 1fr; min-height: 100dvh; }

.giris2__sol {
    position: relative;
    display: flex; flex-direction: column; align-items: center;
    padding: 1.6rem 2rem calc(1.25rem + env(safe-area-inset-bottom));
}
.giris2__marka { position: absolute; left: 2rem; top: 1.6rem; margin: 0; }
.giris2__form-kutu { width: 100%; max-width: 21.5rem; margin: auto 0; padding: 4rem 0 2rem; }
.giris2__baslik { margin: 0 0 1.25rem; font-size: 1.05rem; font-weight: 600; letter-spacing: -.01em; color: var(--g-metin); }
.giris2__alan input {
    min-height: 3.1rem; padding: 0 1rem; border-radius: 12px;
    background: var(--g-yuzey); border: 1px solid var(--g-cizgi); font-size: .92rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .03);
}
.giris2__alan input:focus { background: var(--g-yuzey); }
.gorunmez { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.giris2__dugme { min-height: 3.2rem; margin-top: .9rem; font-size: .95rem; }
.giris2__telif { margin: 0; text-align: center; }

/* Sağ yarı: dosyasız dekor. Açık mavi-lila gradyan zemin, yumuşak renk
   lekeleri ve panelin kendisinin küçültülmüş maketi. Hareket yavaş ve
   döngüsel; prefers-reduced-motion'da tamamen durur. */
.giris2__sag {
    position: relative; overflow: hidden;
    background: linear-gradient(160deg, #eaf1ff 0%, #f1f0fb 45%, #eef6f2 100%);
}
.giris2__leke {
    position: absolute; border-radius: 50%; filter: blur(70px);
    will-change: transform;
}
.giris2__leke--1 { width: 28rem; height: 28rem; left: -8rem; top: -7rem; background: rgba(10, 124, 255, .30); animation: giris-leke1 22s ease-in-out infinite alternate; }
.giris2__leke--2 { width: 24rem; height: 24rem; right: -8rem; top: 26%; background: rgba(175, 82, 222, .22); animation: giris-leke2 26s ease-in-out infinite alternate; }
.giris2__leke--3 { width: 22rem; height: 22rem; left: 12%; bottom: -8rem; background: rgba(52, 199, 89, .20); animation: giris-leke3 30s ease-in-out infinite alternate; }
@keyframes giris-leke1 { from { transform: none; } to { transform: translate(5rem, 4rem) scale(1.12); } }
@keyframes giris-leke2 { from { transform: none; } to { transform: translate(-4rem, -5rem) scale(1.08); } }
@keyframes giris-leke3 { from { transform: none; } to { transform: translate(3rem, -3rem) scale(1.15); } }

/* İnce ızgara: zemine derinlik verir, desen CSS ile üretilir. */
.giris2__izgara {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(10, 30, 70, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(10, 30, 70, .05) 1px, transparent 1px);
    background-size: 3.5rem 3.5rem;
    -webkit-mask-image: radial-gradient(85% 75% at 50% 35%, #000 20%, transparent 100%);
    mask-image: radial-gradient(85% 75% at 50% 35%, #000 20%, transparent 100%);
}

/* ---- Panel maketi (gp) ---------------------------------------------------
   Gerçek panelin küçültülmüş bir kesiti: pencere çubuğu, dar menü, ölçüm
   kartları, alan grafiği ve sipariş satırları. Ölçüler px: maket her ekranda
   aynı oranda kalsın, yazı boyutu ayarından etkilenmesin. */
.gp {
    position: absolute; left: 50%; top: 45%;
    width: 460px; max-width: 88%;
    transform: translate(-50%, -50%);
    border-radius: 18px; overflow: hidden;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .06);
    box-shadow: 0 30px 70px rgba(16, 32, 64, .18), 0 6px 16px rgba(16, 32, 64, .07);
    animation: giris-yuz 9s ease-in-out infinite alternate;
    font-size: 11.5px; line-height: 1.35; color: #1d1d1f;
}
@keyframes giris-yuz { from { transform: translate(-50%, calc(-50% - 7px)); } to { transform: translate(-50%, calc(-50% + 7px)); } }

.gp__ust {
    display: flex; align-items: center; gap: 5px;
    padding: 9px 12px; border-bottom: 1px solid rgba(0, 0, 0, .06);
    background: #fbfbfd;
}
.gp__nokta { width: 7px; height: 7px; border-radius: 50%; background: #e3e3e8; }
.gp__nokta:first-child { background: #ffbdb6; }
.gp__nokta:nth-child(2) { background: #ffe0a8; }
.gp__nokta:nth-child(3) { background: #b9e8c6; }
.gp__adres {
    margin-left: 10px; padding: 3px 12px; border-radius: 999px;
    background: #f2f2f7; color: #6e6e73; font-size: 10px; letter-spacing: -.01em;
}
.gp__adres b { color: #1d1d1f; font-weight: 600; }

.gp__govde { display: flex; min-height: 248px; }
.gp__yan {
    flex: 0 0 46px; display: flex; flex-direction: column; align-items: center; gap: 9px;
    padding: 12px 0; border-right: 1px solid rgba(0, 0, 0, .06); background: #fbfbfd;
}
.gp__logo {
    display: flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 7px; margin-bottom: 3px;
    background: linear-gradient(145deg, #0a7cff, #4da3ff); color: #fff;
    font-size: 11px; font-weight: 800;
}
.gp__menu { width: 22px; height: 7px; border-radius: 4px; background: #e9e9ef; }
.gp__menu--aktif { background: rgba(10, 124, 255, .35); width: 26px; }

.gp__ic { flex: 1 1 auto; min-width: 0; padding: 12px; display: flex; flex-direction: column; gap: 10px; }

.gp__kpiler { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.gp__kpi {
    padding: 9px 10px; border-radius: 12px;
    background: #fff; border: 1px solid rgba(0, 0, 0, .07);
    box-shadow: 0 2px 6px rgba(16, 32, 64, .04);
}
.gp__etiket { display: block; font-size: 8.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #aeaeb2; }
.gp__deger { display: block; margin-top: 3px; font-size: 15px; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.gp__fark { display: inline-block; margin-top: 3px; font-size: 9px; font-weight: 600; color: #1f9d48; }
.gp__fark--nötr { color: #6e6e73; }

.gp__grafik {
    position: relative; padding: 9px 10px 4px; border-radius: 12px;
    background: #fff; border: 1px solid rgba(0, 0, 0, .07);
    box-shadow: 0 2px 6px rgba(16, 32, 64, .04);
}
.gp__grafik-baslik { display: block; font-size: 8.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #aeaeb2; }
.gp__grafik svg { display: block; width: 100%; height: 62px; margin-top: 4px; }
/* Çizgi bir kez soldan sağa çizilir; sonra sabit kalır. */
.gp__cizgi { stroke-dasharray: 340; stroke-dashoffset: 340; animation: gp-ciz 1.6s cubic-bezier(.16, 1, .3, 1) .35s forwards; }
@keyframes gp-ciz { to { stroke-dashoffset: 0; } }
.gp__alan { opacity: 0; animation: gp-belir .8s ease .9s forwards; }
@keyframes gp-belir { to { opacity: 1; } }

.gp__liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.gp__liste li {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 10px; border-radius: 12px;
    background: #fff; border: 1px solid rgba(0, 0, 0, .07);
}
.gp__gorsel { flex: none; width: 22px; height: 22px; border-radius: 7px; background: linear-gradient(145deg, #eef1f6, #dfe4ec); }
.gp__satir-metin { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.gp__satir-metin b { font-size: 10.5px; font-weight: 600; }
.gp__satir-metin small { font-size: 9px; color: #aeaeb2; }
.gp__rozet { flex: none; padding: 3px 8px; border-radius: 999px; font-size: 8.5px; font-weight: 600; }
.gp__rozet--yesil { background: rgba(52, 199, 89, .14); color: #1f9d48; }
.gp__rozet--mavi { background: rgba(10, 124, 255, .12); color: #0a7cff; }
.gp__rozet--sari { background: rgba(255, 159, 10, .16); color: #b36b00; }

@media (prefers-reduced-motion: reduce) {
    .giris2__leke, .gp { animation: none; }
    .gp__cizgi { stroke-dashoffset: 0; animation: none; }
    .gp__alan { opacity: 1; animation: none; }
}

/* Sol/sağ birleşim çizgisinde yüzen marka rozeti */
.giris2__rozet {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2;
    display: inline-flex; align-items: center; justify-content: center;
    width: 3.4rem; height: 3.4rem; border-radius: 50%;
    background: linear-gradient(145deg, #0a7cff, #4da3ff); color: #fff;
    font-weight: 800; font-size: 1.35rem;
    box-shadow: 0 0 0 5px #f7f7f7, 0 10px 26px rgba(10, 124, 255, .30);
}
/* Alıntı kartı: açık zemin üstünde buzlu cam beyaz kart */
.giris2__alinti {
    position: absolute; left: 2.25rem; right: 2.25rem; bottom: 2.25rem; margin: 0;
    max-width: 24rem; padding: 1.15rem 3.4rem 1.05rem 1.35rem;
    border-radius: 16px; color: var(--g-metin);
    background: rgba(255, 255, 255, .72);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, .9);
    box-shadow: 0 12px 30px rgba(16, 32, 64, .10);
    animation: giris-gel .5s cubic-bezier(.16, 1, .3, 1) .15s both;
}
.giris2__alinti blockquote { margin: 0; font-size: .95rem; font-weight: 500; line-height: 1.45; letter-spacing: -.01em; }
.giris2__alinti figcaption { margin-top: .5rem; font-size: .74rem; color: var(--g-metin-2); text-align: right; }
.giris2__tirnak {
    position: absolute; right: 1.1rem; top: .35rem;
    font-size: 3.4rem; line-height: 1; font-weight: 800; color: rgba(10, 124, 255, .35);
    font-family: Georgia, "Times New Roman", serif;
}

@media (max-width: 991.98px) {
    .giris2 { grid-template-columns: 1fr; }
    .giris2__sag, .giris2__rozet { display: none; }
    .giris2__sol { padding-top: 1.25rem; }
    .giris2__marka { position: static; margin-bottom: 0; align-self: flex-start; }
    .giris2__form-kutu { padding: 3rem 0 2rem; }
}
@media (max-width: 479.98px) {
    .giris2__sol { padding-left: 1.25rem; padding-right: 1.25rem; }
}

/* Alıntılar üst üste durur; yalnız .aktif olan görünür, geçiş yumuşak. */
.giris2__alinti { display: grid; }
.giris2__alinti-oge { grid-area: 1 / 1; opacity: 0; transform: translateY(6px); transition: opacity .6s ease, transform .6s cubic-bezier(.16, 1, .3, 1); pointer-events: none; }
.giris2__alinti-oge.aktif { opacity: 1; transform: none; }
.giris2__alinti-oge blockquote { margin: 0; font-size: .95rem; font-weight: 500; line-height: 1.45; letter-spacing: -.01em; }
.giris2__alinti-oge figcaption { margin-top: .5rem; font-size: .74rem; color: var(--g-metin-2); text-align: right; }
@media (prefers-reduced-motion: reduce) { .giris2__alinti-oge { transition: none; } }