@charset "UTF-8"; /* OptilaPlus Kargo & Kurye — dört panelin ortak giriş ekranı tasarımı (firma, yönetim, aktarma merkezi, kurye). Yalnızca görünüm: form alanlarının adları, action'ı ve POST akışı değişmez. style.bundle.css'ten SONRA yüklenir. Panel rengi sınıfıyla seçilir: og-firma (mavi) · og-yonetim (mor) · og-depo (turkuaz) · og-kurye (yeşil). */ :root { --og-gece: #0a1424; --og-gece-2: #122a4d; --og-vurgu: #2563eb; --og-vurgu-2: #3b82f6; --og-vurgu-koyu: #1d4ed8; --og-metin: #0f172a; --og-soluk: #64748b; --og-cizgi: #e2e8f0; --og-alan: #f1f5f9; } body.og-giris.og-firma { --og-vurgu:#2563eb; --og-vurgu-2:#3b82f6; --og-vurgu-koyu:#1d4ed8; } body.og-giris.og-yonetim { --og-vurgu:#7c3aed; --og-vurgu-2:#a855f7; --og-vurgu-koyu:#6d28d9; } body.og-giris.og-depo { --og-vurgu:#0891b2; --og-vurgu-2:#06b6d4; --og-vurgu-koyu:#0e7490; } body.og-giris.og-kurye { --og-vurgu:#15803d; --og-vurgu-2:#22c55e; --og-vurgu-koyu:#166534; } /* ---- zemin ---- */ body.og-giris { background: radial-gradient(900px 520px at 88% -10%, color-mix(in srgb, var(--og-vurgu) 42%, transparent), transparent 62%), radial-gradient(760px 480px at 6% 4%, rgba(37, 99, 235, .30), transparent 58%), linear-gradient(155deg, var(--og-gece) 0%, var(--og-gece-2) 58%, #0d1d38 100%) !important; background-attachment: fixed !important; min-height: 100vh; min-height: 100dvh; color: var(--og-metin); font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } body.og-giris #kt_app_root, body.og-giris > .d-flex.flex-column.flex-root, body.og-giris .flex-column-fluid { min-height: 100vh; min-height: 100dvh; } /* v2'nin iki sütunlu düzenindeki koyu yan panel bu tasarımda gizlenir */ body.og-giris.og-firma .flex-lg-row-auto.justify-content-lg-end, body.og-giris .d-none.d-lg-flex.flex-lg-row-auto { display: none !important; } /* ---- kart ---- */ body.og-giris .bg-body, body.og-giris .card-body { background: #fff !important; width: 100%; max-width: 440px; margin: 0 auto !important; border-radius: 20px !important; padding: 36px 34px 30px !important; box-shadow: 0 30px 80px rgba(3, 12, 30, .48), 0 2px 6px rgba(3, 12, 30, .18) !important; border: 1px solid rgba(255, 255, 255, .6) !important; } @media (max-width: 575px) { body.og-giris .bg-body, body.og-giris .card-body { padding: 26px 20px 22px !important; max-width: 100%; border-radius: 16px !important; } } /* ---- marka bloğu ---- */ .og-brand { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-bottom: 20px; } .og-kimlik { display: inline-flex; align-items: center; gap: 10px; } .og-mark { width: 42px; height: 42px; border-radius: 13px; flex: 0 0 42px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(140deg, var(--og-vurgu-2), var(--og-vurgu-koyu)); color: #fff; font-weight: 800; font-size: 21px; line-height: 1; box-shadow: 0 8px 20px color-mix(in srgb, var(--og-vurgu) 38%, transparent); } .og-ad { font-size: 22px; font-weight: 800; letter-spacing: -.02em; color: #0b1628; } .og-ad em { font-style: normal; color: var(--og-vurgu); } .og-urun { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--og-soluk); } .og-panel-rozet { display: inline-block; margin: 10px auto 0; padding: 5px 14px; border-radius: 999px; background: color-mix(in srgb, var(--og-vurgu) 12%, #fff); color: var(--og-vurgu-koyu); font-size: 12.5px; font-weight: 700; letter-spacing: .02em; border: 1px solid color-mix(in srgb, var(--og-vurgu) 22%, #fff); } /* ---- başlık ---- */ body.og-giris h1 { font-size: 25px !important; font-weight: 800 !important; letter-spacing: -.02em; color: #0b1628 !important; margin: 0 0 6px !important; text-align: center; text-wrap: balance; } body.og-giris .text-gray-500, body.og-giris .text-gray-400 { color: var(--og-soluk) !important; text-align: center; font-size: 14px !important; } body.og-giris .text-start { text-align: center !important; } /* ---- alanlar ---- */ body.og-giris .form-control { height: 52px; border-radius: 12px; background: var(--og-alan) !important; border: 1.5px solid var(--og-cizgi) !important; color: var(--og-metin) !important; font-size: 15px; padding: 0 16px; transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease; } body.og-giris .form-control::placeholder { color: #94a3b8 !important; opacity: 1; } body.og-giris .form-control:focus { background: #fff !important; border-color: var(--og-vurgu) !important; box-shadow: 0 0 0 4px color-mix(in srgb, var(--og-vurgu) 16%, transparent) !important; outline: none; } body.og-giris .fv-row { margin-bottom: 14px !important; } /* ---- düğme ---- */ body.og-giris .btn.btn-primary, body.og-giris .btn.btn-success { width: 100%; height: 52px; border: 0 !important; border-radius: 12px !important; background: linear-gradient(135deg, var(--og-vurgu-2), var(--og-vurgu-koyu)) !important; color: #fff !important; font-size: 16px; font-weight: 700; letter-spacing: .01em; box-shadow: 0 10px 24px color-mix(in srgb, var(--og-vurgu) 34%, transparent); transition: filter .15s ease, transform .15s ease, box-shadow .15s ease; } body.og-giris .btn.btn-primary .indicator-label, body.og-giris .btn.btn-success .indicator-label { color: #fff !important; } body.og-giris .btn.btn-primary:hover, body.og-giris .btn.btn-success:hover { filter: brightness(1.06); } body.og-giris .btn.btn-primary:active, body.og-giris .btn.btn-success:active { transform: translateY(1px); box-shadow: 0 6px 16px color-mix(in srgb, var(--og-vurgu) 30%, transparent); } body.og-giris .btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--og-vurgu) 45%, transparent); outline-offset: 2px; } body.og-giris .d-flex.flex-stack { display: block !important; } body.og-giris .btn.me-2 { margin-right: 0 !important; } /* ---- uyarılar ---- */ body.og-giris .alert { border-radius: 12px !important; border: 1px solid #fecaca !important; background: #fef2f2 !important; color: #991b1b !important; padding: 12px 14px !important; margin-bottom: 16px; } body.og-giris .alert h4 { font-size: 14.5px !important; color: #991b1b !important; } body.og-giris .alert span { font-size: 13px; } body.og-giris .alert i { display: none !important; } /* ---- alt bilgi ---- */ body.og-giris .og-alt { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--og-cizgi); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; font-size: 12.5px; color: var(--og-soluk); } body.og-giris .og-alt a { color: var(--og-vurgu); font-weight: 600; text-decoration: none; } body.og-giris .og-alt a:hover { text-decoration: underline; } /* eski markanın kalıntıları ve tasarıma girmeyen parçalar */ body.og-giris .okc-brand, body.og-giris .m-0 .btn-flex, body.og-giris .menu-sub { display: none !important; } body.og-giris .d-flex.flex-stack.px-lg-10 { display: none !important; } @media (prefers-reduced-motion: reduce) { body.og-giris .btn { transition: none; } }