/* =========================================================================== Giriş pop-up'ı — xGate / onepage teması --------------------------------------------------------------------------- Kullanıldığı yerler: Views/Login/Login.cshtml, FastLoginOnePage.cshtml, SifreyleOturumOnePage.cshtml, SMSLogin.cshtml Bu dosya Login.css'ten SONRA yüklenir (bkz. Login.cshtml). Altyapı notları — Ebelediye projesindeki eşdeğer dosyadan farkları: * Bootstrap 5.3.3 (Bootstrap 3 değil): sekmeler data-bs-toggle ile çalışır, kapatma düğmesi .btn-close, alanlar .form-control, -ms-flexbox ön ekleri gerekmez. * Ölçüler rem cinsinden; temanın 16px gövde ölçüsüne göre. * Yazı tipleri ve renkler temanın assets/css/main.css içindeki değişkenlerinden gelir; sabit değerler yalnızca yedek olarak yazılmıştır: --heading-font Raleway → başlıklar --default-font Roboto → gövde metni --nav-font Poppins → sekmeler (menü diliyle aynı his) --heading-color #124265 → üst bant, kart başlıkları --accent-color #a4206d → düğmeler, bağlantılar, odak, aktif sekme Tüm kurallar .gm-wrap altında toplanmıştır; böylece pop-up dışındaki Bootstrap bileşenlerine dokunulmaz. =========================================================================== */ .gm-wrap { --gm-baslik-renk: var(--heading-color, #124265); /* Eski pop-up'ın düğme renkleri: Login.css içindeki .btnRegister (#a4206d) ve .btnRegister:hover (#841259). Bunlar zaten temanın --accent-color'ı olduğu için değişken üzerinden alınır, sabit değer yalnızca yedektir. Renk yalnızca düğmeler, aktif sekme, üstteki 4px şerit ve küçük ikon zeminlerinde görünür; üst bant ve gövde açık kalır. */ --gm-vurgu: var(--accent-color, #a4206d); --gm-vurgu-koyu: #841259; --gm-vurgu-zemin: #f7eaf2; /* Gölge ve odak halkası için aynı tonun rgb bileşenleri. CSS'te hex'ten rgb üretilemediği için bu değer --gm-vurgu ile elle eşlenir; vurgu değiştirilirse burası da güncellenmeli. */ --gm-vurgu-rgb: 164, 32, 109; --gm-metin: #3f4b57; --gm-metin-silik: #6b7885; --gm-cizgi: #e2e8ee; --gm-zemin: #f6f8fa; --gm-yuvarlak: 0.7rem; font-family: var(--default-font, "Roboto", sans-serif); color: var(--gm-metin); font-size: 0.95rem; line-height: 1.5; } /* ------------------------------------------------------------- Kabuk ------ */ /* Bu görünüm iki farklı bağlamda basılıyor: 1) AJAX ile #login modalının içine (normal kullanım), 2) /Giris/Index adresine doğrudan girildiğinde sayfanın tamamı olarak (LoginController.Login, ViewBag.Layout'u yalnızca returnUrl varken atıyor; yoksa Layout null kalıyor ve bu blok 'nin tek çocuğu oluyor). İkinci durumda ortalama ve dış boşluk .modal'dan gelmediği için burada veriliyor; birinci durumda da Bootstrap'ın kendi 1.75rem'iyle aynı sonucu verdiğinden bir fark yaratmıyor. */ .gm-wrap.gm-dialog { max-width: 62rem; margin: 1.75rem auto; } /* overflow:hidden bilerek YOK: takvim açılır penceresi kutunun dışına taştığı için kırpılmamalı. Üst bandın köşeleri bu yüzden kendi yarıçapını taşır. Marka rengi tüm bandı boyamak yerine yalnızca üstteki ince şeritte durur; doygun eflatun geniş alanda gözü yoruyordu. */ .gm-wrap .gm-modal { border: 0; border-top: 4px solid var(--gm-vurgu); border-radius: 1rem; box-shadow: 0 1.25rem 3rem rgba(30, 36, 45, .18); } /* ----------------------------------------------------------- Üst bant ----- */ .gm-wrap .gm-head { position: relative; display: flex; align-items: center; padding: 1.15rem 3.5rem 1.15rem 1.4rem; border-top-left-radius: 1rem; border-top-right-radius: 1rem; border-bottom: 1px solid var(--gm-cizgi); /* Neredeyse beyaz, vurguya hafifçe çalan bir fon: gövdeden ayrılır ama ağırlık yapmaz. */ background: linear-gradient(180deg, #fdf8fb 0%, #ffffff 100%); color: var(--gm-baslik-renk); } /* Logo koyu renkli ve açık zeminde durduğu için levhaya gerek yok; sağında ince bir ayırıcıyla başlığa bağlanır. */ .gm-wrap .gm-head-logo { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; height: 2.9rem; margin-right: 1rem; padding-right: 1rem; border-right: 1px solid var(--gm-cizgi); } .gm-wrap .gm-head-logo > img { display: block; width: auto; max-width: 11rem; max-height: 2.5rem; object-fit: contain; } /* Logo tanımlı değilse bunun yerine genel bir simge gösterilir. */ .gm-wrap .gm-head-ico { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 2.9rem; height: 2.9rem; margin-right: 0.9rem; border-radius: 0.85rem; background: var(--gm-vurgu-zemin); color: var(--gm-vurgu); font-size: 1.35rem; } .gm-wrap .gm-head-text { flex: 1 1 auto; min-width: 0; } .gm-wrap .gm-head-text h4 { margin: 0; color: var(--gm-baslik-renk); font-family: var(--heading-font, "Raleway", sans-serif); font-size: 1.35rem; font-weight: 700; line-height: 1.25; } .gm-wrap .gm-head-text p { margin: 0.15rem 0 0; color: var(--gm-metin-silik); font-size: 0.85rem; } /* Bant açık olduğu için Bootstrap 5'in varsayılan (koyu) .btn-close'u kullanılır; .btn-close-white'a gerek yok. */ .gm-wrap .gm-close { position: absolute; top: 0.9rem; right: 0.9rem; padding: 0.5rem; opacity: .55; } .gm-wrap .gm-close:hover, .gm-wrap .gm-close:focus { opacity: 1; box-shadow: none; } /* --------------------------------------------------------------- Gövde ---- */ .gm-wrap .gm-body { padding: 1.15rem; background: #fff; } .gm-wrap .gm-row { --bs-gutter-x: 1rem; --bs-gutter-y: 1rem; } /* Sütunlar eşit yükseklikte olsun ki iki kart alt kenarda hizalansın. */ .gm-wrap .gm-col { display: flex; } /* --------------------------------------------------------------- Kart ----- */ .gm-wrap .gm-card { display: flex; flex-direction: column; width: 100%; border: 1px solid var(--gm-cizgi); border-radius: var(--gm-yuvarlak); background: #fff; overflow: hidden; } .gm-wrap .gm-card-head { display: flex; align-items: center; padding: 0.85rem 1rem; border-bottom: 1px solid var(--gm-cizgi); background: var(--gm-zemin); } .gm-wrap .gm-card-ico { flex: 0 0 auto; width: 2rem; height: 2rem; margin-right: 0.7rem; border-radius: 0.55rem; background: var(--gm-vurgu-zemin); color: var(--gm-vurgu); font-size: 0.95rem; line-height: 2rem; text-align: center; } .gm-wrap .gm-card-title { flex: 1 1 auto; min-width: 0; color: var(--gm-baslik-renk); font-family: var(--heading-font, "Raleway", sans-serif); font-size: 1.15rem; font-weight: 700; } .gm-wrap .gm-card-body { flex: 1 1 auto; padding: 1rem; } /* ------------------------------------------------------------ Sekmeler ---- */ .gm-wrap .gm-seg-wrap { padding: 0.85rem 1rem 0; } .gm-wrap .gm-seg { display: flex; flex-wrap: wrap; gap: 0.25rem; margin: 0; padding: 0.25rem; border: 1px solid var(--gm-cizgi); border-radius: 0.8rem; background: var(--gm-zemin); list-style: none; } .gm-wrap .gm-seg > .nav-item { flex: 1 1 0; min-width: 0; } .gm-wrap .gm-seg .nav-link { display: flex; align-items: center; justify-content: center; gap: 0.35rem; width: 100%; padding: 0.45rem 0.5rem; border: 1px solid transparent; border-radius: 0.6rem; background: transparent; color: var(--gm-metin-silik); font-family: var(--nav-font, "Poppins", sans-serif); font-size: 0.85rem; font-weight: 500; line-height: 1.25; text-align: center; transition: background-color .15s ease, color .15s ease; } .gm-wrap .gm-seg .nav-link:hover { background: rgba(255, 255, 255, .7); color: var(--gm-baslik-renk); } .gm-wrap .gm-seg .nav-link.active { border-color: var(--gm-vurgu); background: #fff; color: var(--gm-vurgu); font-weight: 600; box-shadow: 0 1px 3px rgba(16, 42, 67, .14); } .gm-wrap .gm-seg .nav-link > img { height: 1.15rem; width: auto; } /* -------------------------------------------------------- Form alanları --- */ /* Kart içindeki ikincil başlık (örneğin "Abone No ile Sorgulama") */ .gm-wrap .gm-sub { display: flex; align-items: center; gap: 0.4rem; margin: 0 0 0.75rem; color: var(--gm-baslik-renk); font-family: var(--heading-font, "Raleway", sans-serif); font-size: 1rem; font-weight: 700; } .gm-wrap .gm-sub > .bi { color: var(--gm-vurgu); } .gm-wrap .gm-field { margin-bottom: 0.8rem; } /* Geniş kartlarda etiket solda, alan sağda; dar kartlarda (.gm-field-stack) ve telefonda alt alta. */ @media (min-width: 768px) { .gm-wrap .gm-field:not(.gm-field-stack) { display: flex; align-items: flex-start; } .gm-wrap .gm-field:not(.gm-field-stack) > .gm-label { flex: 0 0 7.5rem; max-width: 7.5rem; padding-top: 0.55rem; padding-right: 0.6rem; margin-bottom: 0; } .gm-wrap .gm-field:not(.gm-field-stack) > .gm-field-body { flex: 1 1 auto; min-width: 0; } /* Alan olmayan satırlar (yardımcı bağlantılar) etiket sütunu kadar içeriden başlar; böylece kutuların soluyla aynı hizada dururlar. Değer yukarıdaki .gm-label genişliğiyle aynı olmalı. */ .gm-wrap .gm-inline-offset { margin-left: 7.5rem; } } /* Etiketler kart başlığıyla aynı ağırlıkta olunca birbirine karışıyordu. */ .gm-wrap .gm-label { display: block; margin-bottom: 0.3rem; color: var(--gm-metin-silik); font-size: 0.85rem; font-weight: 500; } .gm-wrap .gm-field-body { min-width: 0; } /* Kutunun solundaki ikon için yer açan sarmalayıcı */ .gm-wrap .gm-input-wrap { position: relative; } .gm-wrap .gm-input-wrap > .gm-input-ico { position: absolute; top: 50%; left: 0.8rem; transform: translateY(-50%); color: #9aa9b8; font-size: 0.95rem; pointer-events: none; } .gm-wrap .gm-input.form-control, .gm-wrap select.gm-input.form-select { height: 2.65rem; padding: 0 0.75rem 0 2.35rem; border: 1px solid #dbe3ec; border-radius: var(--gm-yuvarlak); background-color: #fff; color: var(--gm-metin); font-family: var(--default-font, "Roboto", sans-serif); font-size: 0.95rem; box-shadow: none; } /* İkon taşımayan kutular (örneğin açılır listeler) solda boşluk bırakmaz */ .gm-wrap .gm-input.gm-input-plain { padding-left: 0.75rem; } .gm-wrap .gm-input.form-control:focus, .gm-wrap select.gm-input.form-select:focus { border-color: var(--gm-vurgu); box-shadow: 0 0 0 0.2rem rgba(var(--gm-vurgu-rgb), .15); } .gm-wrap .gm-input.form-control::placeholder { color: #9aa9b8; opacity: 1; } /* Tarayıcının sayı alanlarındaki artır/azalt okları kutuyu daraltıyordu. */ .gm-wrap .gm-input[type="number"] { -moz-appearance: textfield; appearance: textfield; } .gm-wrap .gm-input[type="number"]::-webkit-outer-spin-button, .gm-wrap .gm-input[type="number"]::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; appearance: none; } /* Alan altındaki küçük açıklama satırı (yer tutucuya sığmayan yönlendirmeler) */ .gm-wrap .gm-hint { display: block; margin-top: 0.3rem; color: var(--gm-metin-silik); font-size: 0.8rem; } .gm-wrap .text-danger { display: block; margin-top: 0.3rem; font-size: 0.8rem; } /* ------------------------------------------------------ Şifre göster/gizle */ .gm-wrap .gm-pass { position: relative; } .gm-wrap .gm-pass > .gm-input { padding-right: 2.6rem; } .gm-wrap .gm-pass-toggle { position: absolute; top: 50%; right: 0.35rem; transform: translateY(-50%); width: 2rem; height: 2rem; padding: 0; border: 0; border-radius: 0.5rem; background: transparent; color: var(--gm-metin-silik); line-height: 2rem; text-align: center; cursor: pointer; } .gm-wrap .gm-pass-toggle:hover, .gm-wrap .gm-pass-toggle:focus { background: var(--gm-vurgu-zemin); color: var(--gm-vurgu); outline: none; } /* ------------------------------------------------------------ Tarih alanı - */ /* DİKKAT: sarmalayıcıdaki "input-group" sınıfı kaldırılamaz. Takvim eklentisi (bootstrap-datetimepicker) simgeye ancak element .input-group ise tıklama bağlar (bkz. Scripts/bootstrap-datetimepicker.js ~2317). Bunun bedeli, Login.css'teki genel ".input-group > :not(:first-child)" kuralının buraya da uygulanması; aşağıda !important ile geri alınıyor. */ .gm-wrap .gm-date { /* Takvim penceresinin tutunacağı konumlandırma bağlamı. */ position: relative; display: flex; flex-wrap: nowrap; align-items: stretch; border: 1px solid #dbe3ec; border-radius: var(--gm-yuvarlak); background: #fff; transition: border-color .15s ease, box-shadow .15s ease; } .gm-wrap .gm-date:focus-within { border-color: var(--gm-vurgu); box-shadow: 0 0 0 0.2rem rgba(var(--gm-vurgu-rgb), .15); } /* Ebelediye'deki gibi: dolgulu gri bir düğme değil, kutunun solunda sessizce duran bir simge — alan tek parça görünür. */ .gm-wrap .gm-date > .gm-date-ico { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 2.4rem; border: 0; /* .gm-date'te overflow:hidden olmadığı için köşeler burada kırpılır */ border-top-left-radius: calc(var(--gm-yuvarlak) - 1px); border-bottom-left-radius: calc(var(--gm-yuvarlak) - 1px); background: transparent; color: #8a9bad; font-size: 1rem; cursor: pointer; transition: color .15s ease; } .gm-wrap .gm-date > .gm-date-ico:hover { color: var(--gm-vurgu); } .gm-wrap .gm-date > .gm-input.form-control { flex: 1 1 auto; width: auto; min-width: 0; /* Login.css'teki .input-group kuralı buraya max-width:80% ve sol köşe yuvarlaması bastığı için ikisi de geri alınır. */ max-width: none !important; padding-left: 0.75rem; border: 0; border-radius: 0 !important; box-shadow: none !important; } /* Takvim açılır penceresi, eklenti tarafından .input-group'un İÇİNE eklenir. Konumlandırılmazsa flex çocuğu olarak akışa girip tarih kutusunu daraltıyor (ölçüldü: 312px -> 127px). Mutlak konumlandırılıp akıştan çıkarılır. */ .gm-wrap .gm-date > .bootstrap-datetimepicker-widget { position: absolute; top: calc(100% + 4px); left: 0; z-index: 1060; /* modal içeriğinin üstünde kalsın */ width: auto; max-width: none !important; border-radius: 0.5rem; } /* ------------------------------------------------------- Seçim düğmeleri -- */ /* Hızlı girişte "Sicil No / T.C. Kimlik No / Vergi No" seçimi. İç boşluklar bilerek dar: üç çip dar kartın tek satırına sığsın diye. */ .gm-wrap .gm-radios { display: flex; flex-wrap: wrap; margin-bottom: 0.5rem; } .gm-wrap .gm-radio { display: flex; align-items: center; margin: 0 0.25rem 0.4rem 0; padding: 0.3rem 0.55rem; border: 1px solid #dbe3ec; border-radius: 999px; background: #fff; color: var(--gm-metin); font-size: 0.85rem; font-weight: 400; white-space: nowrap; cursor: pointer; transition: border-color .15s ease, background .15s ease; } /* Son çipin sağındaki boşluk satırın genişliğine ekleniyor ve üçünü tek satıra sığmaktan alıkoyuyordu. */ .gm-wrap .gm-radio:last-child { margin-right: 0; } .gm-wrap .gm-radio:hover { border-color: var(--gm-vurgu); background: var(--gm-vurgu-zemin); } .gm-wrap .gm-radio input[type="radio"] { width: auto; height: auto; margin: 0 0.35rem 0 0; accent-color: var(--gm-vurgu); } /* ----------------------------------------------------------- Düğmeler ----- */ .gm-wrap .gm-btn { display: flex; align-items: center; justify-content: center; gap: 0.45rem; width: 100%; min-height: 2.75rem; padding: 0.5rem 1rem; border: 0; border-radius: var(--gm-yuvarlak); /* Temanın .btnRegister'ı ile aynı: düz vurgu rengi. Geçişli hâli fazla koyu duruyordu; vurgu hover'da brightness ile açılıyor. */ background: var(--gm-vurgu); color: #fff; font-family: var(--default-font, "Roboto", sans-serif); font-size: 1rem; font-weight: 600; line-height: 1.25; text-align: center; box-shadow: 0 0.3rem 0.8rem rgba(var(--gm-vurgu-rgb), .18); transition: filter .15s ease, box-shadow .15s ease, transform .15s ease; } .gm-wrap .gm-btn:hover, .gm-wrap .gm-btn:focus { color: #fff; filter: brightness(1.08); box-shadow: 0 0.45rem 1rem rgba(var(--gm-vurgu-rgb), .26); transform: translateY(-1px); } .gm-wrap .gm-btn:active { transform: translateY(0); box-shadow: 0 0.15rem 0.5rem rgba(var(--gm-vurgu-rgb), .22); } .gm-wrap .gm-btn:focus-visible { outline: 3px solid rgba(var(--gm-vurgu-rgb), .35); outline-offset: 2px; } .gm-wrap .gm-btn[disabled] { opacity: .6; cursor: not-allowed; } /* İkincil (çerçeveli) düğme — örneğin SMS gönder */ .gm-wrap .gm-btn-ghost { background: #fff; border: 1px solid #e0cada; color: var(--gm-vurgu); box-shadow: none; } .gm-wrap .gm-btn-ghost:hover, .gm-wrap .gm-btn-ghost:focus { background: var(--gm-vurgu-zemin); color: var(--gm-vurgu-koyu); box-shadow: none; transform: none; } /* e-Devlet düğmesi kurumsal kırmızı kalır; logosu beyaz olduğu için koyu zemin şart. */ .gm-wrap .gm-btn-edevlet { max-width: 22rem; margin: 0 auto; background: #b71c1c; background: linear-gradient(135deg, #c62828 0%, #a01818 100%); box-shadow: 0 0.35rem 0.9rem rgba(183, 28, 28, .22); } .gm-wrap .gm-btn-edevlet:hover, .gm-wrap .gm-btn-edevlet:focus { box-shadow: 0 0.5rem 1.1rem rgba(183, 28, 28, .3); } .gm-wrap .gm-btn-edevlet:focus-visible { outline-color: rgba(183, 28, 28, .35); } .gm-wrap .gm-btn-edevlet > img { height: 1.5rem; width: auto; } /* -------------------------------------------------- Yardımcı bağlantılar -- */ /* "Şifremi Unuttum" solda, "Yeni Kullanıcı" sağda; aradaki boşluk alan sütununun genişliğine yayılır. */ .gm-wrap .gm-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem; /* Kısayol "margin" kullanılmaz: sol boşluk .gm-inline-offset'e bırakılır, aksi hâlde onu sıfırlayıp satırı etiket sütununa kaydırıyor. */ margin-top: -0.15rem; margin-bottom: 0.9rem; } .gm-wrap .gm-links a { padding: 0.25rem 0.5rem; border-radius: 0.4rem; color: var(--gm-vurgu); /* Gövde metniyle aynı ölçü (Ebelediye'deki gibi); küçültülünce kutularla arasındaki hiyerarşi kopuyordu. */ font-size: inherit; white-space: nowrap; text-decoration: none; transition: background-color .15s ease, color .15s ease; } /* Kenardaki iç boşluk hizayı bozmasın diye aynı miktar geri çekilir. */ .gm-wrap .gm-links a:first-child { margin-left: -0.5rem; } .gm-wrap .gm-links a:last-child { margin-right: -0.5rem; } .gm-wrap .gm-links a:hover, .gm-wrap .gm-links a:focus { background-color: var(--gm-vurgu-zemin); color: var(--gm-vurgu-koyu); text-decoration: none; } .gm-wrap .gm-links a > .bi { margin-right: 0.375rem; opacity: .75; } /* ------------------------------------------------------ Bilgi kutucukları - */ .gm-wrap .gm-note { display: flex; margin-top: 0.8rem; padding: 0.7rem 0.9rem; border: 1px solid #d9e6f0; border-radius: var(--gm-yuvarlak); background: #f1f6fa; color: #2b5877; font-size: 0.8rem; line-height: 1.5; text-align: left; } .gm-wrap .gm-note > .bi { flex: 0 0 auto; margin-right: 0.55rem; line-height: 1.5; } .gm-wrap .gm-note > span { min-width: 0; } .gm-wrap .gm-note-warn { border-color: #f0e0bd; background: #fdf8ee; color: #7a5a17; } .gm-wrap .gm-note-danger { border-color: #f3c6c6; background: #fdf4f4; color: #a22222; } /* Uzun e-Devlet açıklaması için kaydırılabilir alan */ .gm-wrap .gm-note-scroll { max-height: 11.5rem; overflow-y: auto; } /* ====================== Sekme yüksekliği eşitleme ========================= */ /* Sekme değiştikçe pop-up boyutu oynamasın diye Login.cshtml içindeki betik #myTabContent'e min-height verir. Pasif sekmeler display:none olduğundan ölçülemez; aşağıdaki geçici sınıfla akıştan çıkarılıp görünmez şekilde açılırlar. Senkron eklenip kaldırıldığı için ekrana hiç yansımaz. */ .gm-wrap .tabOlcumModu { display: block !important; visibility: hidden !important; opacity: 1 !important; pointer-events: none !important; } /* ============================== Duyarlılık =============================== */ @media (max-width: 991.98px) { .gm-wrap.gm-dialog { max-width: none; } } @media (max-width: 767.98px) { .gm-wrap .gm-head { padding: 1rem 3rem 1rem 1rem; } .gm-wrap .gm-head-ico { width: 2.5rem; height: 2.5rem; margin-right: 0.7rem; font-size: 1.15rem; } .gm-wrap .gm-head-logo { height: 2.5rem; margin-right: 0.7rem; padding-right: 0.7rem; } .gm-wrap .gm-head-logo > img { max-width: 7.5rem; max-height: 2.1rem; } .gm-wrap .gm-head-text h4 { font-size: 1.2rem; } .gm-wrap .gm-body { padding: 0.9rem; } .gm-wrap .gm-card-body, .gm-wrap .gm-card-head { padding-left: 0.85rem; padding-right: 0.85rem; } .gm-wrap .gm-seg { flex-direction: column; } .gm-wrap .gm-seg .nav-link { justify-content: flex-start; } /* Telefonda sekme yükseklikleri eşitlenmesin; içerik ne kadarsa o kadar. */ .gm-wrap .tab-content { min-height: 0 !important; } } /* Kullanıcı hareket azaltma istediyse geçişleri kapat */ @media (prefers-reduced-motion: reduce) { .gm-wrap .gm-btn, .gm-wrap .gm-seg .nav-link, .gm-wrap .gm-radio, .gm-wrap .gm-date { transition: none; } .gm-wrap .gm-btn:hover, .gm-wrap .gm-btn:focus { transform: none; } }