:root { --font-primary: 'Inter', sans-serif; --font-alt: 'Poppins', sans-serif; --color-bg: #0f172a; --color-surface: #f8fafc; --color-surface-alt: #ffffff; --color-surface-dark: #1e293b; --color-text: #0f172a; --color-text-soft: #64748b; --color-text-muted: #94a3b8; --color-border: #e2e8f0; --color-border-soft: #f1f5f9; --color-primary: #b91c1c; --color-primary-dark: #991b1b; --color-primary-soft: rgba(185, 28, 28, 0.1); --shadow-lg: 0 25px 50px -12px rgba(15, 23, 42, 0.35); --shadow-md: 0 10px 30px rgba(15, 23, 42, 0.12); --shadow-sm: 0 4px 12px rgba(15, 23, 42, 0.08); --radius-xl: 32px; --radius-lg: 20px; --radius-md: 16px; --radius-sm: 12px; --shell-gap: clamp(16px, 2vw, 24px); } body.sa-superadmin-theme { background: radial-gradient(circle at 18% 0%, #23345f 0%, #111a34 45%, #0b1328 100%); color: #d9e5ff; } body.sa-superadmin-theme .phone-wrapper { background: linear-gradient(180deg, #141f3a 0%, #101a32 100%); border-color: rgba(129, 161, 214, 0.2); color: #d9e5ff; } body.sa-superadmin-theme .section-title, body.sa-superadmin-theme .input-group label, body.sa-superadmin-theme .feed-content h5, body.sa-superadmin-theme .union-text h3, body.sa-superadmin-theme .header-title h3 { color: #f4f8ff; } body.sa-superadmin-theme .feed-content p, body.sa-superadmin-theme .union-text p, body.sa-superadmin-theme .header-title p, body.sa-superadmin-theme .empty-state, body.sa-superadmin-theme .metric-label { color: #8ea5cf; } body.sa-superadmin-theme .header, body.sa-superadmin-theme .admin-table-card, body.sa-superadmin-theme .metric-card, body.sa-superadmin-theme .input-field, body.sa-superadmin-theme .input-wrapper input, body.sa-superadmin-theme .input-wrapper select, body.sa-superadmin-theme .admin-textarea, body.sa-superadmin-theme .feed-card, body.sa-superadmin-theme .sa-log-card, body.sa-superadmin-theme .sa-finans-panel, body.sa-superadmin-theme .sa-list-card, body.sa-superadmin-theme .sa-form-card { background: rgba(30, 44, 70, 0.95); border-color: rgba(126, 158, 211, 0.25); color: #dce9ff; } body.sa-superadmin-theme .input-field:focus, body.sa-superadmin-theme .input-wrapper input:focus, body.sa-superadmin-theme .input-wrapper select:focus, body.sa-superadmin-theme .admin-textarea:focus { border-color: rgba(99, 173, 255, 0.7); box-shadow: 0 0 0 3px rgba(56, 127, 209, 0.22); } body.sa-superadmin-theme .admin-table-head, body.sa-superadmin-theme .sa-table-header, body.sa-superadmin-theme .sa-list-head { background: rgba(36, 52, 84, 0.92); color: #cfe0ff; border-color: rgba(126, 158, 211, 0.2); } body.sa-superadmin-theme .admin-table-row, body.sa-superadmin-theme .sa-table-row, body.sa-superadmin-theme .sa-list-row { border-top-color: rgba(126, 158, 211, 0.2); border-bottom-color: rgba(126, 158, 211, 0.2); } * { margin: 0; padding: 0; box-sizing: border-box; } html, body { min-height: 100%; } body { min-height: 100vh; padding: 20px; background: radial-gradient(circle at top left, rgba(185, 28, 28, 0.18), transparent 28%), radial-gradient(circle at bottom right, rgba(59, 130, 246, 0.16), transparent 24%), linear-gradient(180deg, #0b1120 0%, #0f172a 100%); color: var(--color-text); font-family: var(--font-primary); } body.page-finance { font-family: var(--font-alt); color: #f8fafc; } .phone-wrapper { width: min(100%, 1440px); min-height: calc(100vh - 40px); margin: 0 auto; padding: clamp(20px, 3vw, 32px); background: rgba(248, 250, 252, 0.96); border: 1px solid rgba(226, 232, 240, 0.7); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); backdrop-filter: blur(14px); position: relative; display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden; } body.page-finance .phone-wrapper { background: rgba(30, 41, 59, 0.94); border-color: rgba(71, 85, 105, 0.9); } .notch { display: none; } .brand-section { text-align: center; margin: auto 0; max-width: 560px; align-self: center; width: 100%; } .logo-box, .union-logo { background: var(--color-primary); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 20px rgba(185, 28, 28, 0.25); } .logo-box { width: 84px; height: 84px; margin: 0 auto 20px; border-radius: 24px; font-size: 34px; font-weight: 800; } .brand-section h2 { font-size: clamp(28px, 3vw, 42px); font-weight: 800; color: var(--color-text); } .brand-section p, .header-title p, .union-text p, .user-text p, .footer-text, .feed-content p, .deal-info p, .disabled-info, .item-date { color: var(--color-text-soft); } .brand-section p { font-size: 15px; margin-top: 8px; } .login-form { width: min(100%, 560px); margin: 32px auto 0; display: flex; flex-direction: column; gap: 18px; } .input-group { display: flex; flex-direction: column; gap: 6px; } .input-group label, .section-label, .item-title, .deal-info h4, .feed-content h5, .header-title h3, .union-text h3, .user-text h3, .card-top h4, .member-name, .section-title { color: var(--color-text); } .input-group label { font-size: 13px; font-weight: 600; color: #475569; } .input-wrapper, .search-box { position: relative; display: flex; align-items: center; } .input-wrapper i.input-icon, .search-box i { position: absolute; left: 14px; color: var(--color-text-muted); font-size: 14px; } .input-wrapper input, .input-wrapper select, .search-box input { width: 100%; min-height: 48px; padding: 12px 14px 12px 42px; border: 1px solid var(--color-border); background: var(--color-surface-alt); border-radius: var(--radius-sm); font-size: 14px; color: var(--color-text); outline: none; transition: all 0.2s ease; } .input-field { width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid var(--color-border); background: var(--color-surface-alt); border-radius: var(--radius-sm); font-size: 14px; color: var(--color-text); outline: none; transition: all 0.2s ease; } select.input-field { appearance: none; } .input-field:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-soft); } .input-wrapper select { appearance: none; } .input-wrapper input:focus, .input-wrapper select:focus, .search-box input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-soft); } .input-wrapper input:disabled { background-color: #f1f5f9; color: var(--color-text-soft); cursor: not-allowed; } .toggle-password { position: absolute; right: 14px; color: var(--color-text-muted); cursor: pointer; font-size: 14px; } .form-actions { display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 13px; } .remember-me, .terms-group { display: flex; align-items: flex-start; gap: 8px; color: var(--color-text-soft); } .remember-me input, .terms-group input { accent-color: var(--color-primary); cursor: pointer; } .forgot-password, .footer-text a, .terms-group a { color: var(--color-primary); text-decoration: none; font-weight: 600; } .btn-submit, .btn-e-devlet, .get-code-btn, .icon-btn, .notification-btn, .back-btn { transition: 0.2s ease; } .btn-submit { background: var(--color-primary); color: #fff; border: none; min-height: 50px; padding: 12px 16px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 700; cursor: pointer; box-shadow: 0 8px 16px rgba(185, 28, 28, 0.25); width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; } .btn-submit:hover, .get-code-btn:hover { background: var(--color-primary-dark); } .divider { display: flex; align-items: center; text-align: center; color: var(--color-text-muted); font-size: 11px; margin: 10px 0; } .divider::before, .divider::after { content: ''; flex: 1; border-bottom: 1px solid var(--color-border); } .divider span { padding: 0 10px; } .btn-e-devlet { background: #fff; color: var(--color-text); border: 1px solid #cbd5e1; min-height: 48px; padding: 10px 14px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; width: 100%; } .btn-e-devlet:hover, .back-btn:hover, .notification-btn:hover { background: #f1f5f9; } .footer-text { text-align: center; font-size: 13px; line-height: 1.6; margin-top: 18px; } .header, .top-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 4px; } .header { margin-bottom: 24px; } .top-bar { margin-bottom: 18px; } .back-btn, .notification-btn, .icon-btn { width: 44px; height: 44px; border-radius: 12px; background: #e2e8f0; display: flex; align-items: center; justify-content: center; color: #334155; text-decoration: none; flex-shrink: 0; } .header-title { text-align: center; flex-grow: 1; } .header-title h3, .union-text h3, .user-text h3 { font-size: clamp(18px, 2vw, 24px); font-weight: 700; } .header-title p, .union-text p, .user-text p { font-size: 13px; margin-top: 4px; } .union-brand, .user-info, .deal-header, .deal-location, .item-left, .card-top, .member-details { display: flex; align-items: center; gap: 12px; } .union-logo { width: 52px; height: 52px; border-radius: 14px; font-size: 20px; font-weight: 700; } .notification-btn { position: relative; } .notification-badge { width: 8px; height: 8px; background: #ef4444; border-radius: 50%; position: absolute; top: 10px; right: 10px; } .member-card, .card { border-radius: 24px; padding: clamp(20px, 3vw, 28px); margin-bottom: 24px; box-shadow: var(--shadow-md); } .member-card { background: linear-gradient(135deg, #1e293b, #0f172a); border-left: 5px solid var(--color-primary); color: #fff; } .card { background: linear-gradient(135deg, #4f46e5, #7c3aed); color: #fff; } .card-top { justify-content: space-between; align-items: flex-start; margin-bottom: 18px; } .card-top h4 { font-size: 14px; color: #cbd5e1; letter-spacing: 0.5px; } .card-top span { font-size: 10px; background: rgba(185, 28, 28, 0.3); color: #fca5a5; padding: 4px 8px; border-radius: 6px; border: 1px solid rgba(239, 68, 68, 0.3); font-weight: 600; } .member-details { justify-content: space-between; align-items: flex-end; } .member-name { font-size: clamp(22px, 2.2vw, 28px); font-weight: 700; color: #fff; } .member-id { font-size: 13px; color: var(--color-text-muted); margin-top: 4px; } .member-social-card { margin: 12px 0 16px; background: linear-gradient(145deg, #ffffff 0%, #f8fbff 100%); border: 1px solid #dbe4f0; border-radius: 18px; padding: 16px; box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08); } .member-social-header { display: flex; align-items: center; justify-content: center; margin-bottom: 12px; } .member-social-header-centered { flex-direction: column; text-align: center; gap: 4px; } .member-social-title { font-size: 14px; font-weight: 800; color: #0f172a; letter-spacing: 0.2px; } .member-social-subtitle { font-size: 12px; color: #64748b; } .member-social-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .member-social-item { text-decoration: none !important; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 13px 8px; border-radius: 14px; background: #ffffff; border: 1px solid #dbe4f0; color: #0f172a; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .member-social-item:hover { transform: translateY(-2px); border-color: #bfd2ea; box-shadow: 0 8px 16px rgba(15, 23, 42, 0.08); } .member-social-icon { width: 30px; height: 30px; border-radius: 10px; background: #f8fafc; border: 1px solid #e2e8f0; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; line-height: 1; } .member-social-icon svg { width: 15px; height: 15px; fill: currentColor; display: block; } .member-social-x-logo { font-size: 16px; font-weight: 800; line-height: 1; display: inline-block; } .member-social-label { font-size: 11px; font-weight: 700; line-height: 1; color: #334155; } .member-feed-link { display: block; text-decoration: none; color: inherit; } .dashboard-block-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; } .dashboard-section-title { margin: 0; font-size: 18px; line-height: 1.2; } .dashboard-see-all { color: #047857; font-size: 10px; font-weight: 700; text-decoration: none !important; } .dashboard-news-link, .dashboard-ann-link { display: block; text-decoration: none !important; color: inherit; } .dashboard-news-card { border: 1px solid #dbe4f0; border-radius: 16px; background: #fff; padding: 10px; display: flex; gap: 10px; align-items: stretch; } .dashboard-news-thumb { width: 78px; min-width: 78px; height: 78px; border-radius: 12px; overflow: hidden; background: #f1f5f9; } .dashboard-news-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .dashboard-news-thumb-fallback { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #64748b; font-size: 26px; } .dashboard-news-body { min-width: 0; } .dashboard-news-badge { display: inline-block; color: #047857; font-size: 10px; font-weight: 800; letter-spacing: .2px; text-transform: uppercase; } .dashboard-news-title { margin: 4px 0 6px; color: #0f172a; font-size: 14px; font-weight: 800; line-height: 1.25; } .dashboard-news-date { color: #64748b; font-size: 12px; display: inline-flex; align-items: center; gap: 6px; } .dashboard-ann-list { display: flex; flex-direction: column; gap: 10px; } .dashboard-ann-card { border: 1px solid #dbe4f0; border-radius: 16px; background: #fff; padding: 12px 12px 11px 12px; } .dashboard-ann-card.is-red { border-left: 4px solid #dc2626; } .dashboard-ann-card.is-green { border-left: 4px solid #059669; } .dashboard-ann-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; } .dashboard-ann-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 800; text-transform: uppercase; } .dashboard-ann-tag.is-red { color: #dc2626; } .dashboard-ann-tag.is-green { color: #047857; } .dashboard-ann-date { color: #64748b; font-size: 12px; display: inline-flex; align-items: center; gap: 5px; } .dashboard-ann-title { margin: 0; color: #0f172a; font-size: 15px; font-weight: 800; line-height: 1.25; } .dashboard-ann-desc { margin-top: 5px; color: #475569; font-size: 13px; line-height: 1.45; } .qr-code, .avatar, .avatar-img, .deal-logo, .service-icon, .action-icon, .item-icon { display: flex; align-items: center; justify-content: center; } .qr-code { width: 52px; height: 52px; background: #fff; border-radius: 12px; color: var(--color-text); font-size: 30px; } .section-title { font-size: 18px; font-weight: 700; margin-bottom: 12px; margin-top: 24px; } .quick-services, .quick-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 24px; } .service-item, .action-item, .nav-item { display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; text-decoration: none; } .service-icon, .action-icon { width: 64px; height: 64px; border-radius: 18px; font-size: 20px; transition: 0.2s ease; } .service-icon { background: #fef2f2; color: var(--color-primary); box-shadow: var(--shadow-sm); border: 1px solid #fecaca; } .service-item:hover .service-icon { background: #fef2f2; color: var(--color-primary); transform: translateY(-2px); } .service-item span, .action-item span, .nav-item span { font-size: 12px; color: #475569; font-weight: 500; text-align: center; } .feed-list, .profile-content, .register-form-wrapper, .deals-list, .transactions-list { flex-grow: 1; display: flex; flex-direction: column; gap: 16px; padding-right: 4px; } .feed-list::-webkit-scrollbar, .profile-content::-webkit-scrollbar, .register-form-wrapper::-webkit-scrollbar, .deals-list::-webkit-scrollbar, .transactions-list::-webkit-scrollbar { width: 6px; } .feed-list::-webkit-scrollbar-thumb, .profile-content::-webkit-scrollbar-thumb, .register-form-wrapper::-webkit-scrollbar-thumb, .deals-list::-webkit-scrollbar-thumb, .transactions-list::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; } body.page-finance .transactions-list::-webkit-scrollbar-thumb { background: #334155; } .feed-card, .deal-card, .item { border-radius: 18px; } .feed-card { background: #fff; padding: 18px; border: 1px solid var(--color-border-soft); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03); } .feed-tag { display: inline-flex; font-size: 10px; font-weight: 700; text-transform: uppercase; padding: 4px 8px; border-radius: 6px; } .tag-red { background: #fef2f2; color: var(--color-primary); } .tag-blue { background: #eff6ff; color: #1d4ed8; } .feed-content h5 { font-size: 15px; margin: 8px 0 6px; line-height: 1.35; } .feed-content p { font-size: 13px; line-height: 1.55; } .bottom-nav { position: sticky; bottom: calc(-1 * clamp(20px, 3vw, 32px)); margin: 18px calc(-1 * clamp(20px, 3vw, 32px)) calc(-1 * clamp(20px, 3vw, 32px)); padding: 0 20px; min-height: 68px; display: flex; justify-content: space-between; align-items: center; gap: 12px; background: rgba(255, 255, 255, 0.97); border-top: 1px solid var(--color-border); border-radius: 0 0 var(--radius-xl) var(--radius-xl); z-index: 50; } .nav-item { color: var(--color-text-muted); font-size: 18px; flex: 1; } .nav-item.active { color: var(--color-primary); } .avatar-section { display: flex; justify-content: center; margin-bottom: 8px; } .avatar-container { position: relative; width: 96px; height: 96px; } .avatar-img { width: 100%; height: 100%; border-radius: 50%; background: linear-gradient(135deg, #1e293b, #0f172a); color: #fff; font-size: 30px; font-weight: 700; border: 3px solid #fff; } .avatar-edit-btn { position: absolute; right: 0; bottom: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--color-primary); border: 2px solid #fff; color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); } .section-label { font-size: 13px; font-weight: 700; border-left: 3px solid var(--color-primary); padding-left: 8px; margin-top: 6px; } .search-container { margin-top: 8px; } .categories-scroll { display: flex; gap: 8px; overflow-x: auto; margin-top: 14px; padding-bottom: 4px; } .categories-scroll::-webkit-scrollbar { display: none; } .cat-chip { padding: 8px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--color-border); font-size: 12px; font-weight: 600; color: var(--color-text-soft); white-space: nowrap; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; } .cat-chip.active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); } .deal-card { background: #fff; padding: 16px; border: 1px solid var(--color-border-soft); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03); display: flex; flex-direction: column; gap: 12px; } .deal-card:hover { border-color: var(--color-border); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06); } .deal-logo { width: 52px; height: 52px; border-radius: 14px; background: #f8fafc; border: 1px solid var(--color-border); font-size: 22px; color: var(--color-text); flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .deal-info { flex: 1; min-width: 0; } .deal-info h4 { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .deal-info p { font-size: 12px; line-height: 1.4; } .discount-badge { background: #fef2f2; color: var(--color-primary); border: 1px solid #fecaca; font-size: 11px; font-weight: 700; padding: 4px 8px; border-radius: 8px; white-space: nowrap; } .deal-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px dashed var(--color-border); padding-top: 10px; font-size: 11px; color: var(--color-text-muted); } .get-code-btn { background: #1e293b; color: #fff; border: none; padding: 7px 12px; border-radius: 8px; font-size: 11px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; } body.page-finance .header-title h3, body.page-finance .section-title, body.page-finance .user-text h3, body.page-finance .item-title { color: #f8fafc; } body.page-finance .icon-btn { background: #334155; color: #f8fafc; } body.page-finance .icon-btn:hover { background: #475569; } body.page-finance .avatar { width: 54px; height: 54px; border-radius: 50%; background: linear-gradient(135deg, #6366f1, #a855f7); color: #fff; font-weight: 600; } body.page-finance .card p, body.page-finance .card-footer { opacity: 0.9; color: rgba(248, 250, 252, 0.9); } body.page-finance .card h2 { font-size: clamp(30px, 3vw, 38px); margin: 8px 0 15px; } body.page-finance .action-icon { background: #334155; color: #818cf8; } body.page-finance .action-item:hover .action-icon { background: #6366f1; color: #fff; transform: translateY(-3px); } body.page-finance .action-item span, body.page-finance .user-text p, body.page-finance .item-date, body.page-finance .nav-item { color: #94a3b8; } body.page-finance .item { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #0f172a; padding: 14px 16px; border-radius: 16px; } body.page-finance .item-icon { width: 44px; height: 44px; border-radius: 12px; font-size: 16px; } body.page-finance .bottom-nav { background: #0f172a; border-color: #334155; } body.page-finance .nav-item.active, body.page-finance .nav-item:hover { color: #6366f1; } @media (max-width: 991px) { body { padding: 12px; } .phone-wrapper { min-height: calc(100vh - 24px); border-radius: 24px; padding: 18px; } .quick-services, .quick-actions { grid-template-columns: repeat(3, 1fr); } .deal-footer, .form-actions { flex-direction: column; align-items: flex-start; } .member-details { flex-direction: row; align-items: flex-end; justify-content: space-between; } .bottom-nav { padding: 12px; min-height: auto; flex-wrap: wrap; } } @media (max-width: 640px) { body { padding: 0; } .phone-wrapper { width: 100%; min-height: 100vh; border-radius: 0; border: none; padding: 16px; } .brand-section, .login-form { max-width: 100%; } .logo-box { width: 72px; height: 72px; font-size: 28px; } .quick-services, .quick-actions { grid-template-columns: repeat(3, 1fr); } .dashboard-section-title { font-size: 18px; } .dashboard-see-all { font-size: 15px; } } .metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 24px; } .metric-card, .admin-table-card { background: #fff; border: 1px solid var(--color-border); border-radius: 18px; box-shadow: var(--shadow-sm); } .metric-card { padding: 18px; } .metric-label { display: block; font-size: 12px; color: var(--color-text-soft); margin-bottom: 8px; } .metric-value { font-size: 28px; color: var(--color-text); } .admin-toolbar { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; } .admin-toolbar form { margin: 0; } .admin-btn { width: auto; min-width: 160px; text-decoration: none; } .compact-btn { min-width: 0; min-height: 40px; padding: 10px 14px; font-size: 12px; } .admin-list-card { margin-bottom: 0; } .flash-message { padding: 14px 16px; border-radius: 14px; margin-bottom: 18px; font-size: 14px; font-weight: 600; } .flash-success { background: #ecfdf5; color: #166534; border: 1px solid #bbf7d0; } .flash-error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; } .admin-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .input-group-full { grid-column: 1 / -1; } .admin-textarea { width: 100%; min-height: 120px; padding: 14px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); resize: vertical; font: inherit; color: var(--color-text); background: #fff; } .admin-textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-soft); } .checkbox-group { margin-top: -4px; } .admin-table-card { overflow: hidden; } .admin-table-head, .admin-table-row { display: grid; grid-template-columns: 2fr 1fr 1fr 1.4fr; gap: 16px; padding: 16px 18px; align-items: center; } .admin-table-head { background: #f8fafc; color: var(--color-text-soft); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; } .admin-table-row { border-top: 1px solid var(--color-border-soft); font-size: 14px; color: var(--color-text); } .admin-table-row strong { display: block; margin-bottom: 4px; } .admin-table-row small { color: var(--color-text-soft); } /* ── Personel Kartı (Temsilciler & Yönetim Kurulu) ──────────────────── */ .personnel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .personnel-card { background: #fff; border: 1px solid var(--color-border-soft); border-radius: 16px; padding: 18px 10px 14px; display: flex; flex-direction: column; align-items: center; gap: 5px; box-shadow: 0 2px 6px rgba(0,0,0,0.04); } .personnel-avatar { width: 68px; height: 68px; border-radius: 18px; background: #1e293b; display: flex; align-items: center; justify-content: center; font-size: 28px; color: #fff; margin-bottom: 6px; flex-shrink: 0; } .personnel-avatar.avatar-red { background: var(--color-primary); } .personnel-name { font-size: 13px; font-weight: 700; color: #0f172a; text-align: center; line-height: 1.3; } .personnel-role { font-size: 11px; color: var(--color-primary); font-weight: 600; text-align: center; line-height: 1.3; min-height: 14px; } .personnel-phone { font-size: 11px; color: #374151; display: flex; align-items: center; gap: 4px; margin-top: 2px; text-decoration: none; } .personnel-phone i { color: #64748b; font-size: 10px; } .personnel-detay-btn { display: block; width: 100%; padding: 7px 0; background: #fff; border: 1px solid var(--color-border); border-radius: 10px; font-size: 12px; font-weight: 600; color: #374151; text-align: center; text-decoration: none; margin-top: 8px; cursor: pointer; } .personnel-detay-btn:hover { background: #f8fafc; border-color: #cbd5e1; } /* Edit form toggle helper */ .hidden { display: none !important; } .edit-form { margin-top: 4px; } .admin-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-start; } .status-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 76px; padding: 6px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; } .status-pill.is-active { background: #ecfdf5; color: #166534; } .status-pill.is-passive { background: #fef2f2; color: #991b1b; } .empty-state { padding: 28px 18px; text-align: center; color: var(--color-text-soft); } .pagination-wrap { margin-top: 18px; display: flex; justify-content: center; } .pagination-wrap nav { display: flex; justify-content: center; width: 100%; } .pagination-wrap nav > div:first-child { display: none; } .pagination-wrap nav > div:last-child { display: flex; justify-content: center; } .pagination-wrap .pagination, .pagination .pagination { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0; } .pagination-wrap .page-item, .pagination .page-item { list-style: none; } .pagination-wrap .page-link, .pagination .page-link { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 10px; border: 1px solid var(--color-border, #dbe4f2); border-radius: 10px; background: #fff; color: var(--color-text, #0f172a); text-decoration: none; font-size: 13px; font-weight: 700; transition: all 0.2s ease; } .pagination-wrap .page-item.active .page-link, .pagination .page-item.active .page-link { background: var(--color-primary, #0f172a); border-color: var(--color-primary, #0f172a); color: #fff; box-shadow: 0 8px 18px rgba(15, 23, 42, 0.12); } .pagination-wrap .page-item.disabled .page-link, .pagination .page-item.disabled .page-link { opacity: 0.5; pointer-events: none; cursor: default; } .pagination-wrap .page-link:hover, .pagination .page-link:hover { border-color: var(--color-primary, #0f172a); color: var(--color-primary, #0f172a); } .branch-search-box { flex: 1 1 320px; } .admin-table-head-members, .admin-table-row-members { grid-template-columns: 1.4fr 1.1fr 0.8fr 0.8fr; } .detail-hero, .detail-grid { display: grid; gap: 16px; } .detail-hero { grid-template-columns: auto 1fr auto; align-items: center; background: #fff; border: 1px solid var(--color-border); border-radius: 18px; padding: 18px; box-shadow: var(--shadow-sm); margin-bottom: 18px; } .detail-avatar { width: 72px; height: 72px; border-radius: 50%; background: linear-gradient(135deg, #1e293b, #0f172a); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 800; } .detail-hero-text h2 { font-size: 28px; color: var(--color-text); margin-bottom: 6px; } .detail-hero-text p { color: var(--color-text-soft); margin-bottom: 10px; } .detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 18px; } .detail-card { background: #fff; border: 1px solid var(--color-border); border-radius: 18px; padding: 18px; box-shadow: var(--shadow-sm); } .detail-list, .detail-stack { display: flex; flex-direction: column; gap: 12px; } .detail-toolbar { margin-bottom: 14px; } .detail-upload-form { margin-bottom: 16px; } .detail-list div, .detail-item { padding: 12px 14px; background: #f8fafc; border: 1px solid var(--color-border-soft); border-radius: 14px; } .detail-item { display: flex; flex-direction: column; gap: 6px; } .detail-note { color: var(--color-text-soft); line-height: 1.6; } .pagination-wrap svg { width: 16px; height: 16px; } @media (max-width: 991px) { .admin-form-grid, .admin-table-head, .admin-table-row, .detail-grid, .detail-hero { grid-template-columns: 1fr; } .detail-hero .admin-actions, .detail-item .admin-actions { width: 100%; } .admin-table-head { display: none; } .admin-table-row { gap: 10px; } } body.sa-has-unified-nav .phone-wrapper, body.sa-list-body .sa-list-content, body.sa-form-body .sa-form-content, body.sa-neo-body .sa-content { padding-bottom: 96px !important; } .sa-unified-bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 250; border-top: 1px solid rgba(114, 146, 195, 0.28); background: linear-gradient(180deg, rgba(17, 26, 49, 0.98), rgba(13, 20, 38, 0.99)); display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); padding: 9px 8px max(10px, env(safe-area-inset-bottom)); } .sa-unified-bottom-nav a { color: #8fa3c4; text-decoration: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 9px; font-weight: 700; } .sa-unified-bottom-nav a i { font-size: 13px; } .sa-unified-bottom-nav a.active { color: #ff5166; } body.sa-log-theme { background: radial-gradient(circle at 18% 0%, #23345f 0%, #111a34 45%, #0b1328 100%); padding: 0; } body.sa-log-theme .phone-wrapper { max-width: 430px; min-height: 100dvh; margin: 0 auto; background: #151f36; border: 1px solid rgba(123, 154, 205, 0.2); border-radius: 0; box-shadow: none; padding: 16px 14px 98px; } body.sa-log-theme .sa-unified-bottom-nav { width: min(430px, 100%); left: 50%; right: auto; transform: translateX(-50%); border-top: 1px solid rgba(129, 162, 214, 0.2); border-left: 1px solid rgba(129, 162, 214, 0.16); border-right: 1px solid rgba(129, 162, 214, 0.16); border-top-left-radius: 16px; border-top-right-radius: 16px; background: linear-gradient(180deg, rgba(33, 47, 75, 0.98), rgba(26, 38, 62, 0.99)); } .sa-log-topbar { display: grid; grid-template-columns: 40px 1fr 40px; gap: 10px; align-items: center; margin-top: 2px; } .sa-log-icon-btn { width: 38px; height: 38px; border-radius: 11px; background: rgba(38, 53, 84, 0.95); border: 1px solid rgba(122, 157, 212, 0.22); color: #d3e3ff; display: grid; place-items: center; text-decoration: none; } .sa-log-icon-btn.success { color: #4de39f; border-color: rgba(39, 209, 139, 0.4); background: rgba(19, 74, 62, 0.8); } .sa-log-title-wrap { text-align: center; } .sa-log-title-wrap h1 { margin: 0; color: #f5f8ff; font-size: 30px; line-height: 1; } .sa-log-title-wrap p { margin: 4px 0 0; color: #89a4cf; font-size: 12px; } .sa-log-search-form { margin-top: 14px; } .sa-log-search-box { position: relative; } .sa-log-search-box i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #6d86af; font-size: 14px; } .sa-log-search-box input { width: 100%; height: 42px; border-radius: 12px; border: 1px solid rgba(122, 154, 205, 0.24); background: rgba(28, 41, 67, 0.94); color: #dbe8ff; padding: 10px 12px 10px 36px; outline: none; } .sa-log-search-submit { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border: none; border-radius: 9px; background: rgba(255, 82, 104, 0.18); color: #ff7588; display: grid; place-items: center; cursor: pointer; } .sa-log-search-box input:focus { border-color: rgba(99, 173, 255, 0.7); box-shadow: 0 0 0 3px rgba(56, 127, 209, 0.22); } .sa-log-tabs { margin-top: 10px; display: flex; gap: 8px; overflow-x: auto; padding-bottom: 3px; } .sa-log-tabs a { flex: 0 0 auto; text-decoration: none; color: #9bb0d4; font-size: 12px; font-weight: 700; line-height: 1; padding: 8px 12px; border-radius: 999px; border: 1px solid rgba(122, 154, 205, 0.22); background: rgba(36, 51, 82, 0.82); } .sa-log-tabs a.active { color: #fff; border-color: rgba(255, 82, 104, 0.8); background: linear-gradient(135deg, #ff4b5d, #df2f3f); } .sa-log-list { margin-top: 12px; display: grid; gap: 12px; } .sa-log-flash { border-radius: 12px; padding: 11px 12px; font-size: 12px; font-weight: 700; } .sa-log-flash.success { color: #81f8c7; background: rgba(10, 103, 74, 0.5); border: 1px solid rgba(41, 199, 137, 0.35); } .sa-log-flash.error { color: #ff9eab; background: rgba(126, 28, 49, 0.55); border: 1px solid rgba(255, 88, 119, 0.35); } .sa-log-card { border-radius: 15px; border: 1px solid rgba(122, 154, 205, 0.24); background: linear-gradient(180deg, rgba(35, 49, 79, 0.95), rgba(30, 43, 70, 0.95)); padding: 12px; } .sa-log-card.metric { border-color: rgba(74, 183, 255, 0.26); } .sa-log-card-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; } .sa-log-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border-radius: 8px; font-size: 10px; font-weight: 800; letter-spacing: 0.2px; } .sa-log-badge.green { color: #9cf0cc; background: rgba(25, 109, 80, 0.48); border: 1px solid rgba(64, 208, 152, 0.38); } .sa-log-badge.red { color: #ffb2ba; background: rgba(125, 37, 56, 0.55); border: 1px solid rgba(255, 92, 123, 0.35); } .sa-log-badge.blue { color: #9bcfff; background: rgba(24, 78, 136, 0.45); border: 1px solid rgba(81, 155, 239, 0.35); } .sa-log-badge.amber { color: #ffd88c; background: rgba(125, 92, 21, 0.45); border: 1px solid rgba(242, 190, 67, 0.35); } .sa-log-time { color: #7f97c1; font-size: 11px; } .sa-log-card h4 { margin: 0; color: #f4f8ff; font-size: 24px; line-height: 1.35; } .sa-log-card p { margin: 6px 0 0; color: #9eb3d5; font-size: 12px; } .sa-log-card-meta { margin-top: 9px; padding-top: 9px; border-top: 1px dashed rgba(126, 158, 211, 0.22); display: flex; justify-content: space-between; align-items: center; gap: 10px; } .sa-log-card-meta span { color: #cddcff; font-size: 12px; display: inline-flex; gap: 6px; align-items: center; } .sa-log-card-meta code { background: rgba(16, 28, 49, 0.96); border: 1px solid rgba(95, 129, 188, 0.4); color: #8cb6ef; border-radius: 6px; padding: 2px 7px; font-size: 11px; font-family: 'Fira Code', 'Courier New', monospace; } .sa-log-empty { border: 1px dashed rgba(129, 162, 214, 0.32); border-radius: 14px; padding: 16px; text-align: center; color: #8ea6ce; font-size: 12px; } .sa-log-pagination nav { display: flex; justify-content: center; } .sa-log-pagination nav > div:first-child { display: none; } .sa-log-pagination nav > div:last-child { display: flex; justify-content: center; } .sa-log-pagination nav span, .sa-log-pagination nav a { border-radius: 8px; border: 1px solid rgba(118, 151, 206, 0.22); background: rgba(33, 47, 74, 0.92); color: #a5bee4; padding: 6px 9px; font-size: 11px; text-decoration: none; } .sa-system-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .sa-system-grid div { border-radius: 10px; border: 1px solid rgba(108, 149, 211, 0.26); background: rgba(26, 39, 65, 0.9); padding: 8px; } .sa-system-grid small { color: #89a4cf; font-size: 10px; display: block; } .sa-system-grid strong { color: #f3f8ff; font-size: 20px; line-height: 1.1; } .sa-system-action-form { margin: 0; } .sa-system-action-btn { width: 100%; border: 1px solid rgba(118, 151, 206, 0.3); background: rgba(36, 52, 84, 0.94); color: #d6e5ff; border-radius: 12px; min-height: 44px; padding: 10px 12px; font-size: 13px; font-weight: 700; display: flex; justify-content: space-between; align-items: center; cursor: pointer; } .sa-system-action-btn i { color: #ff6b7b; } .sa-danger-btn { border: 1px solid rgba(255, 95, 129, 0.45); border-radius: 9px; background: rgba(145, 33, 58, 0.65); color: #ffd7de; font-size: 11px; font-weight: 700; min-height: 34px; padding: 8px 12px; cursor: pointer; } .sa-finans-panels { margin-top: 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .sa-finans-panel { text-decoration: none; color: inherit; border-radius: 14px; border: 1px solid rgba(122, 154, 205, 0.24); background: linear-gradient(180deg, rgba(35, 49, 79, 0.95), rgba(30, 43, 70, 0.95)); padding: 12px; } .sa-finans-panel-top { display: flex; justify-content: space-between; align-items: center; color: #ff7c8c; margin-bottom: 6px; } .sa-finans-panel h3 { margin: 0; color: #f4f8ff; font-size: 16px; } .sa-finans-panel p { margin: 6px 0 0; color: #9eb3d5; font-size: 11px; line-height: 1.45; } .sa-finans-panel-link { margin-top: 8px; display: inline-block; color: #91d5ff; font-size: 11px; font-weight: 700; } .sa-finans-mini-link { color: #91d5ff; font-size: 11px; font-weight: 700; text-decoration: none; } .sa-finans-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; padding: 10px 0; border-top: 1px dashed rgba(126, 158, 211, 0.22); } .sa-finans-row strong { color: #f4f8ff; font-size: 12px; } .sa-finans-row small { display: block; color: #9eb3d5; font-size: 10px; margin-top: 2px; } .sa-finans-row-right { text-align: right; } .sa-finans-actions { margin-top: 6px; display: flex; gap: 8px; justify-content: flex-end; } .sa-finans-actions form { margin: 0; } .sa-finans-action-btn { min-height: 30px; padding: 6px 10px; border-radius: 9px; border: 1px solid rgba(126, 158, 211, 0.25); background: rgba(21, 34, 58, 0.95); color: #9eb3d5; font-size: 11px; font-weight: 700; text-decoration: none; cursor: pointer; } .sa-finans-action-btn.danger { color: #ff9eab; border-color: rgba(255, 88, 119, 0.35); background: rgba(126, 28, 49, 0.55); } body.sa-finans-theme { background: radial-gradient(circle at 18% 0%, #23345f 0%, #111a34 45%, #0b1328 100%); padding: 0; } body.sa-finans-theme .phone-wrapper { max-width: 430px; min-height: 100dvh; margin: 0 auto; background: linear-gradient(180deg, #141f3a 0%, #101a32 100%) !important; border: 1px solid rgba(129, 161, 214, 0.2); border-radius: 0; box-shadow: none; padding: 16px 14px 98px; } body.sa-finans-theme .sa-log-topbar { display: grid; grid-template-columns: 40px 1fr 40px; gap: 10px; align-items: center; } body.sa-finans-theme .sa-log-icon-btn { width: 34px; height: 34px; border: 1px solid rgba(120, 149, 199, 0.28); background: rgba(34, 49, 78, 0.9); border-radius: 10px; color: #8bc3ff; text-decoration: none; display: grid; place-items: center; } body.sa-finans-theme .sa-log-icon-btn.success { color: #ff7a8a; border-color: rgba(248, 79, 97, 0.45); background: rgba(230, 66, 84, 0.15); } body.sa-finans-theme .sa-log-title-wrap h1 { margin: 0; color: #f8fbff; font-size: 24px; line-height: 1; text-align: center; } body.sa-finans-theme .sa-log-title-wrap p { margin: 4px 0 0; color: #8ea5cf; font-size: 11px; text-align: center; } body.sa-finans-theme .sa-log-flash.success { color: #d8fff1; background: linear-gradient(180deg, rgba(21, 38, 70, 0.9), rgba(21, 31, 58, 0.9)); border: 1px solid rgba(42, 222, 171, 0.25); } body.sa-finans-theme .sa-finans-panel, body.sa-finans-theme .sa-log-card { background: linear-gradient(180deg, #23304f 0%, #202d49 100%); border: 1px solid rgba(126, 158, 211, 0.25); } body.sa-finans-theme .sa-finans-panel h3, body.sa-finans-theme .sa-log-card h4, body.sa-finans-theme .sa-finans-row strong { color: #f4f8ff; } body.sa-finans-theme .sa-finans-panel p, body.sa-finans-theme .sa-finans-row small { color: #89a2cb; } body.sa-finans-theme .sa-finans-panel-top, body.sa-finans-theme .sa-finans-panel-link, body.sa-finans-theme .sa-finans-mini-link { color: #ff5568; } body.sa-finans-theme .sa-log-badge.blue { background: rgba(59, 130, 246, 0.2); border-color: rgba(84, 187, 255, 0.4); color: #84bbff; } body.sa-finans-theme .sa-log-badge.green { background: rgba(16, 185, 129, 0.2); border-color: rgba(57, 216, 172, 0.4); color: #39d8ac; } body.sa-finans-theme .sa-finans-row { border-top: 1px dashed rgba(139, 170, 221, 0.2); } body.sa-finans-theme .sa-log-empty { color: #8ca5ce; border-color: rgba(139, 170, 221, 0.2); background: rgba(30, 44, 70, 0.7); } body.sa-finans-theme .header, body.sa-finans-theme .admin-table-card, body.sa-finans-theme .metric-card, body.sa-finans-theme .admin-textarea, body.sa-finans-theme .input-field, body.sa-finans-theme .input-wrapper input, body.sa-finans-theme .input-wrapper select { background: rgba(30, 44, 70, 0.95); border-color: rgba(126, 158, 211, 0.25); color: #dce9ff; } body.sa-finans-theme .header { border-radius: 14px; padding: 12px; } body.sa-finans-theme .union-text h3, body.sa-finans-theme .union-text p, body.sa-finans-theme .section-title, body.sa-finans-theme .input-group label, body.sa-finans-theme .admin-table-row, body.sa-finans-theme .metric-label, body.sa-finans-theme .admin-table-head { color: #cfe0ff; } body.sa-finans-theme .admin-table-head { background: rgba(36, 52, 84, 0.92); } body.sa-finans-theme .admin-table-row { border-top-color: rgba(126, 158, 211, 0.2); } body.sa-finans-theme .empty-state { color: #8ea6ce; } body.sa-finans-theme .input-wrapper i.input-icon, body.sa-finans-theme .toggle-password { color: #84bbff; } body.sa-finans-theme .input-field:focus, body.sa-finans-theme .input-wrapper input:focus, body.sa-finans-theme .input-wrapper select:focus { border-color: rgba(99, 173, 255, 0.7); box-shadow: 0 0 0 3px rgba(56, 127, 209, 0.22); } body.sa-log-table-theme { background: radial-gradient(circle at 18% 0%, #23345f 0%, #111a34 45%, #0b1328 100%); padding: 0; } body.sa-log-table-theme .phone-wrapper { max-width: 430px; min-height: 100dvh; margin: 0 auto; background: linear-gradient(180deg, #141f3a 0%, #101a32 100%); border: 1px solid rgba(129, 161, 214, 0.2); border-radius: 0; box-shadow: none; padding: 16px 14px 98px; } .sa-table-topbar { display: grid; grid-template-columns: 40px 1fr 40px; gap: 10px; align-items: center; } .sa-table-icon-btn { width: 38px; height: 38px; border-radius: 12px; border: 1px solid rgba(120, 149, 199, 0.28); background: rgba(34, 49, 78, 0.9); color: #8bc3ff; display: grid; place-items: center; text-decoration: none; } .sa-table-icon-btn.success { color: #ff7a8a; border-color: rgba(248, 79, 97, 0.45); background: rgba(230, 66, 84, 0.15); } .sa-table-title-wrap { text-align: center; } .sa-table-title-wrap h1 { margin: 0; color: #f8fbff; font-size: 33px; line-height: 1; } .sa-table-title-wrap p { margin: 4px 0 0; color: #8ea5cf; font-size: 12px; } .sa-table-meta-row { margin-top: 10px; border: 1px solid rgba(126, 158, 211, 0.25); background: rgba(30, 44, 70, 0.95); border-radius: 999px; padding: 8px 12px; display: flex; justify-content: space-between; gap: 8px; color: #8ea5cf; font-size: 12px; } .sa-table-meta-row strong { color: #dce9ff; } .sa-log-tabs.light a { border-color: rgba(126, 158, 211, 0.25); background: rgba(30, 44, 70, 0.95); color: #9eb3d5; } .sa-log-tabs.light a.active { border-color: rgba(248, 79, 97, 0.7); background: linear-gradient(135deg, #ff4b5d, #df2f3f); color: #fff; } .sa-table-filter-form { margin-top: 10px; display: grid; grid-template-columns: 1fr 124px auto; gap: 8px; align-items: center; } .sa-table-search-box { position: relative; } .sa-table-search-box i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #84bbff; font-size: 14px; } .sa-table-search-box input, .sa-table-select { width: 100%; height: 40px; border: 1px solid rgba(126, 158, 211, 0.25); border-radius: 12px; background: rgba(30, 44, 70, 0.95); color: #dce9ff; font-size: 13px; outline: none; } .sa-table-search-box input { padding: 8px 12px 8px 34px; } .sa-table-select { padding: 8px 10px; } .sa-table-filter-btn { height: 40px; border-radius: 12px; border: 1px solid rgba(248, 79, 97, 0.7); background: linear-gradient(135deg, #ff4b5d, #df2f3f); color: #fff; font-size: 12px; font-weight: 700; padding: 0 10px; cursor: pointer; } .sa-table-card { margin-top: 12px; background: rgba(30, 44, 70, 0.95); border: 1px solid rgba(132, 164, 216, 0.24); border-radius: 16px; overflow: hidden; } .sa-table-header, .sa-table-row { display: grid; grid-template-columns: 1.15fr 1fr 0.62fr; gap: 10px; align-items: center; padding: 10px 12px; } .sa-table-header { background: rgba(36, 52, 84, 0.92); border-bottom: 1px solid rgba(126, 158, 211, 0.2); color: #cfe0ff; font-size: 11px; font-weight: 700; } .sa-table-row { border-bottom: 1px solid rgba(126, 158, 211, 0.2); } .sa-table-row:last-of-type { border-bottom: none; } .sa-table-user { display: flex; align-items: center; gap: 8px; min-width: 0; } .sa-table-avatar { width: 30px; height: 30px; border-radius: 9px; background: #223657; color: #fff; font-size: 11px; font-weight: 800; display: grid; place-items: center; flex-shrink: 0; } .sa-table-avatar.warning { background: #ff5568; } .sa-table-user strong, .sa-table-col-mid strong { color: #f4f8ff; font-size: 13px; line-height: 1.2; } .sa-table-user small, .sa-table-col-mid small { color: #89a2cb; font-size: 11px; line-height: 1.2; } .sa-table-col-mid { min-width: 0; } .sa-table-status { justify-self: end; font-size: 12px; font-weight: 800; } .sa-table-status.done { color: #39d8ac; } .sa-table-status.pending { color: #ffcf77; } .sa-table-status.missing { color: #ff7d88; } body.sa-log-table-theme .sa-log-empty { margin: 10px; border: 1px dashed rgba(126, 158, 211, 0.25); background: rgba(30, 44, 70, 0.7); color: #8ea6ce; } body.sa-log-table-theme .sa-log-flash.success { margin: 10px; color: #d8fff1; background: linear-gradient(180deg, rgba(21, 38, 70, 0.9), rgba(21, 31, 58, 0.9)); border: 1px solid rgba(42, 222, 171, 0.25); } body.sa-log-table-theme .sa-log-flash.error { margin: 10px; background: rgba(126, 28, 49, 0.55); border: 1px solid rgba(255, 88, 119, 0.35); color: #ff9eab; } body.sa-log-table-theme .sa-log-pagination { padding: 10px; border-top: 1px solid rgba(126, 158, 211, 0.2); } body.sa-log-table-theme .sa-log-pagination nav span, body.sa-log-table-theme .sa-log-pagination nav a { border-color: rgba(118, 151, 206, 0.22); background: rgba(33, 47, 74, 0.92); color: #a5bee4; } body.sa-log-table-theme .sa-log-pagination nav span[aria-current="page"] { background: #cc2b33; border-color: #cc2b33; color: #ffffff; } body.sa-profile-theme { background: radial-gradient(circle at 18% 0%, #23345f 0%, #111a34 45%, #0b1328 100%); padding: 0; } body.sa-profile-theme .phone-wrapper { max-width: 430px; min-height: 100dvh; margin: 0 auto; background: linear-gradient(180deg, #141f3a 0%, #101a32 100%) !important; border: 1px solid rgba(129, 161, 214, 0.2); border-radius: 0; box-shadow: none; padding: 16px 14px 98px; } .sa-profile-topbar { display: grid; grid-template-columns: 40px 1fr 40px; gap: 10px; align-items: center; } .sa-profile-icon-btn { width: 38px; height: 38px; border-radius: 12px; border: 1px solid rgba(120, 149, 199, 0.28); background: rgba(34, 49, 78, 0.9); color: #8bc3ff; display: grid; place-items: center; text-decoration: none; } .sa-profile-icon-btn.danger { color: #ff7a8a; border-color: rgba(248, 79, 97, 0.45); background: rgba(230, 66, 84, 0.15); } .sa-profile-title-wrap { text-align: center; } .sa-profile-title-wrap h1 { margin: 0; color: #f8fbff; font-size: 28px; line-height: 1; } .sa-profile-title-wrap p { margin: 4px 0 0; color: #8ea5cf; font-size: 12px; } .sa-profile-flash { margin-top: 12px; border-radius: 12px; padding: 11px 12px; font-size: 12px; font-weight: 700; } .sa-profile-flash.success { color: #d8fff1; background: linear-gradient(180deg, rgba(21, 38, 70, 0.9), rgba(21, 31, 58, 0.9)); border: 1px solid rgba(42, 222, 171, 0.25); } .sa-profile-hero { margin-top: 12px; border-radius: 18px; border: 1px solid rgba(126, 158, 211, 0.25); background: linear-gradient(90deg, rgba(27, 40, 66, 0.95), rgba(30, 43, 70, 0.95)); padding: 12px; display: grid; grid-template-columns: 68px 1fr 52px; gap: 10px; align-items: center; } .sa-profile-avatar { width: 68px; height: 68px; border-radius: 18px; background: linear-gradient(135deg, #d62f2e, #b31f1f); border: 1px solid rgba(255, 126, 126, 0.4); color: #fff; display: grid; place-items: center; font-size: 30px; font-weight: 800; } .sa-profile-hero-text h3 { margin: 0; color: #f4f8ff; font-size: 29px; line-height: 1.1; } .sa-profile-hero-text p { margin: 5px 0 0; color: #9eb3d5; font-size: 12px; } .sa-profile-badge { margin-top: 7px; display: inline-block; font-size: 10px; font-weight: 700; color: #ffb5bf; border: 1px solid rgba(255, 94, 118, 0.35); background: rgba(126, 28, 49, 0.5); border-radius: 999px; padding: 4px 8px; } .sa-profile-hero-dot { width: 52px; height: 52px; border-radius: 50%; background: rgba(109, 42, 62, 0.35); justify-self: end; } .sa-profile-stats { margin-top: 10px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .sa-profile-stat-card { border-radius: 14px; border: 1px solid rgba(126, 158, 211, 0.25); background: rgba(30, 44, 70, 0.95); padding: 10px; text-align: center; } .sa-profile-stat-card strong { display: block; color: #ff6578; font-size: 17px; line-height: 1; } .sa-profile-stat-card span { display: block; color: #8ea5cf; font-size: 11px; margin-top: 5px; } .sa-profile-stat-card.success strong { color: #39d8ac; } .sa-profile-section-title { margin: 14px 2px 8px; color: #9fb4d8; text-transform: uppercase; letter-spacing: 0.5px; font-size: 13px; } .sa-profile-menu-card { border-radius: 16px; overflow: hidden; border: 1px solid rgba(126, 158, 211, 0.25); background: rgba(30, 44, 70, 0.95); } .sa-profile-menu-item { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; text-decoration: none; padding: 12px; border-top: 1px solid rgba(126, 158, 211, 0.16); } .sa-profile-menu-item:first-child { border-top: none; } .sa-profile-menu-icon { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; font-size: 13px; } .sa-profile-menu-icon.red { background: rgba(239, 68, 68, 0.2); color: #ff9aa5; } .sa-profile-menu-icon.blue { background: rgba(59, 130, 246, 0.2); color: #84bbff; } .sa-profile-menu-icon.green { background: rgba(16, 185, 129, 0.2); color: #39d8ac; } .sa-profile-menu-icon.amber { background: rgba(245, 158, 11, 0.22); color: #ffcf77; } .sa-profile-menu-icon.violet { background: rgba(168, 85, 247, 0.2); color: #cf90ff; } .sa-profile-menu-icon.cyan { background: rgba(34, 211, 238, 0.2); color: #7fe7ff; } .sa-profile-menu-text strong { display: block; color: #f4f8ff; font-size: 15px; line-height: 1.2; } .sa-profile-menu-text small { display: block; margin-top: 2px; color: #8ea5cf; font-size: 12px; } .sa-profile-menu-item > i { color: #9fb4d8; font-size: 14px; } .sa-mali-topbar { display: grid; grid-template-columns: 40px 1fr 40px; gap: 10px; align-items: center; } .sa-mali-icon-btn { width: 38px; height: 38px; border-radius: 12px; border: 1px solid rgba(120, 149, 199, 0.28); background: rgba(34, 49, 78, 0.9); color: #8bc3ff; display: grid; place-items: center; text-decoration: none; } .sa-mali-icon-btn.danger { color: #ff7a8a; border-color: rgba(248, 79, 97, 0.45); background: rgba(230, 66, 84, 0.15); } .sa-mali-title { text-align: center; } .sa-mali-title h1 { margin: 0; color: #f8fbff; font-size: 28px; line-height: 1; } .sa-mali-title p { margin: 4px 0 0; color: #8ea5cf; font-size: 12px; } .sa-mali-tabs { margin-top: 12px; border-radius: 13px; border: 1px solid rgba(126, 158, 211, 0.25); background: rgba(30, 44, 70, 0.95); padding: 4px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .sa-mali-tabs a { min-height: 36px; border-radius: 10px; border: 1px solid transparent; color: #9eb3d5; text-decoration: none; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 6px; } .sa-mali-tabs a.active { color: #f8fbff; border-color: rgba(126, 158, 211, 0.28); background: #1f2f4b; } .sa-mali-form { margin-top: 10px; border-radius: 16px; border: 1px solid rgba(126, 158, 211, 0.25); background: rgba(30, 44, 70, 0.95); padding: 12px; display: grid; gap: 8px; } .sa-mali-form .input-group { gap: 5px; margin-bottom: 0; } .sa-mali-form .input-group label { font-size: 13px; font-weight: 700; color: #dce9ff; } .sa-mali-form .input-wrapper input, .sa-mali-form .input-wrapper select, .sa-mali-form .input-field { width: 100%; min-height: 42px; border: 1px solid rgba(126, 158, 211, 0.25); background: rgba(21, 34, 58, 0.95); border-radius: 12px; color: #dce9ff; padding: 10px 12px 10px 34px; } .sa-mali-form .input-wrapper .input-icon { color: #84bbff; } .sa-mali-form .input-wrapper input:focus, .sa-mali-form .input-wrapper select:focus, .sa-mali-form .input-field:focus { border-color: rgba(99, 173, 255, 0.7); box-shadow: 0 0 0 3px rgba(56, 127, 209, 0.22); } .sa-mali-summary { border: 1px dashed rgba(126, 158, 211, 0.28); border-radius: 13px; background: rgba(21, 34, 58, 0.78); padding: 10px; display: grid; gap: 6px; } .sa-mali-summary div { display: flex; justify-content: space-between; align-items: center; color: #9eb3d5; font-size: 13px; } .sa-mali-summary div strong { color: #dce9ff; } .sa-mali-summary div.total span, .sa-mali-summary div.total strong { color: #ff6477; font-weight: 800; font-size: 16px; } .sa-mali-submit-btn { margin-top: 6px; width: 100%; min-height: 48px; border: 1px solid rgba(51, 219, 171, 0.32); border-radius: 13px; background: linear-gradient(135deg, #0f8a63, #127f5f); color: #ffffff; font-size: 21px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; } .sa-mali-submit-btn i { font-size: 15px; } body.sa-form-body, body.sa-form-body .sa-form-header, body.sa-form-body .sa-form-card, body.sa-form-body .sa-form-page .input-wrapper input, body.sa-form-body .sa-form-page .input-wrapper select, body.sa-form-body .sa-form-page .admin-textarea, body.sa-form-body .sa-outline-btn { background: #101a32; color: #d9e5ff; } body.sa-form-body { background: linear-gradient(180deg, #101a32 0%, #0b1328 100%); } body.sa-form-body .sa-form-header, body.sa-form-body .sa-form-card, body.sa-form-body .sa-form-page .input-wrapper input, body.sa-form-body .sa-form-page .input-wrapper select, body.sa-form-body .sa-form-page .admin-textarea, body.sa-form-body .sa-outline-btn { border-color: rgba(126, 158, 211, 0.25); } body.sa-form-body .sa-form-header-title h1, body.sa-form-body .sa-form-page .input-group label { color: #f4f8ff; } body.sa-form-body .sa-form-header-title p, body.sa-form-body .sa-form-page .remember-me, body.sa-form-body .sa-form-page .input-wrapper .input-icon { color: #8ea5cf; } body.sa-form-body .sa-form-back, body.sa-form-body .sa-form-refresh { border-color: rgba(120, 149, 199, 0.3); background: rgba(34, 49, 78, 0.95); color: #8bc3ff; } body.sa-form-body .sa-submit-btn { background: linear-gradient(135deg, #ff4b5d, #df2f3f); box-shadow: 0 10px 20px rgba(223, 47, 63, 0.28); } @media (max-width: 520px) { body.sa-finans-theme .phone-wrapper { max-width: 100%; } body.sa-finans-theme .sa-log-title-wrap h1 { font-size: 22px; } .sa-mali-title h1 { font-size: 22px; } .sa-mali-tabs { grid-template-columns: 1fr; } .sa-finans-actions { justify-content: flex-start; flex-wrap: wrap; } .sa-mali-submit-btn { font-size: 18px; } body.sa-log-table-theme .phone-wrapper { max-width: 100%; } .sa-table-title-wrap h1 { font-size: 27px; } .sa-table-filter-form { grid-template-columns: 1fr; } .sa-table-header, .sa-table-row { grid-template-columns: 1fr; gap: 6px; } .sa-table-status { justify-self: start; } } @media (max-width: 520px) { body.sa-log-theme .phone-wrapper { max-width: 100%; } body.sa-log-theme .sa-unified-bottom-nav { width: 100%; border-left: none; border-right: none; border-top-left-radius: 0; border-top-right-radius: 0; } .sa-log-title-wrap h1 { font-size: 22px; } .sa-log-card h4 { font-size: 20px; } .sa-finans-panels { grid-template-columns: 1fr; } } /* ======================================================== BRANCH PANEL REDESIGN � v2 ======================================================== */ /* �� Page shell ������������������������������������������� */ body.page-branch { padding: 0; margin: 0; background: #f1f5f9; width: 100%; } body.page-branch .phone-wrapper { width: 100% !important; max-width: 100% !important; box-shadow: none !important; min-height: 100dvh; border-radius: 0 !important; border: none !important; padding: 0; background: #f1f5f9; backdrop-filter: none !important; } /* Branch header - fixed */ .branch-header { position: fixed; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; background: #fff; border-bottom: 1px solid #e2e8f0; z-index: 200; } .branch-logo { width: 46px; height: 46px; border-radius: 14px; background: var(--color-primary); display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 800; color: #fff; flex-shrink: 0; letter-spacing: -0.5px; } .branch-header-center { flex: 1; min-width: 0; text-align: center; } .branch-header-center h3 { font-size: 15px; font-weight: 700; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .branch-header-center p { font-size: 11px; color: #64748b; margin-top: 1px; } .branch-header-left, .branch-header-right { flex-shrink: 0; display: flex; align-items: center; gap: 6px; } .branch-icon-btn { width: 42px; height: 42px; border-radius: 12px; background: #f1f5f9; display: flex; align-items: center; justify-content: center; color: #334155; text-decoration: none; border: none; cursor: pointer; font-size: 15px; position: relative; } .branch-icon-btn.danger { background: #fef2f2; color: var(--color-primary); } .branch-icon-btn-red { background: var(--color-primary); color: #fff; } .branch-icon-btn .notif-dot { position: absolute; top: 8px; right: 8px; width: 8px; height: 8px; background: var(--color-primary); border-radius: 50%; border: 2px solid #fff; } .member-header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .member-header-actions form { margin: 0; } .member-notif-btn { position: relative; } .member-notif-count { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; border-radius: 999px; background: #dc2626; color: #fff; font-size: 10px; font-weight: 700; line-height: 18px; text-align: center; padding: 0 4px; border: 2px solid #fff; box-shadow: none; } /* Branch content */ .branch-content { padding: 90px 18px 80px; min-height: 100dvh; overflow-x: hidden; } .branch-content::-webkit-scrollbar { width: 4px; } .branch-content::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; } /* Branch bottom nav - fixed */ .branch-bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; display: flex; justify-content: space-around; align-items: flex-end; padding: 0 8px max(8px, env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid #e2e8f0; min-height: 64px; z-index: 200; } .bnav-item { display: flex; flex-direction: column; align-items: center; padding: 8px 12px; gap: 3px; text-decoration: none; color: #94a3b8; flex: 1; min-width: 0; transition: color .2s; } .bnav-item.active { color: var(--color-primary); } .bnav-item i { font-size: 20px; line-height: 1; } .bnav-item span { font-size: 10px; font-weight: 600; white-space: nowrap; } .bnav-sms { position: relative; padding-top: 0; padding-bottom: 8px; } .bnav-sms .bnav-sms-bubble { width: 52px; height: 52px; border-radius: 50%; background: var(--color-primary); display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px rgba(185,28,28,.35); margin-bottom: 3px; margin-top: -20px; border: 3px solid #fff; } .bnav-sms .bnav-sms-bubble i { font-size: 20px; color: #fff; line-height: 1; } .bnav-sms.active span, .bnav-sms span { font-size: 10px; font-weight: 600; color: #94a3b8; } .bnav-sms.active span { color: var(--color-primary); } /* �� Dashboard stat cards ��������������������������������� */ .stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 16px; } .stat-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 14px; box-shadow: 0 2px 6px rgba(0,0,0,.04); display: flex; flex-direction: column; gap: 4px; } .stat-card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 2px; } .stat-badge { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 6px; } .stat-badge-green { background: #ecfdf5; color: #059669; } .stat-badge-orange { background: #fffbeb; color: #d97706; } .stat-badge-blue { background: #eff6ff; color: #2563eb; } .stat-badge-purple { background: #faf5ff; color: #7c3aed; } .stat-badge-red { background: #fef2f2; color: var(--color-primary); } .stat-icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 16px; } .stat-icon-green { background: #ecfdf5; color: #059669; } .stat-icon-orange { background: #fffbeb; color: #d97706; } .stat-icon-blue { background: #eff6ff; color: #2563eb; } .stat-icon-purple { background: #faf5ff; color: #7c3aed; } .stat-value { font-size: 26px; font-weight: 800; color: #0f172a; line-height: 1; } .stat-label { font-size: 11px; color: #64748b; font-weight: 500; } /* �� Quick actions ���������������������������������������� */ .quick-actions-section { margin: 0 0 16px; } .quick-actions-title { font-size: 13px; font-weight: 700; color: #0f172a; margin-bottom: 10px; } .quick-actions-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .quick-action-box { background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 12px 6px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; transition: box-shadow .2s; } .quick-action-box:hover { box-shadow: 0 4px 12px rgba(0,0,0,.08); } .quick-action-icon { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 18px; } .quick-action-icon-red { background: #fef2f2; color: var(--color-primary); } .quick-action-icon-green { background: #ecfdf5; color: #059669; } .quick-action-icon-blue { background: #eff6ff; color: #2563eb; } .quick-action-icon-amber { background: #fffbeb; color: #d97706; } .quick-action-box span { font-size: 10px; font-weight: 600; color: #374151; text-align: center; line-height: 1.3; } /* �� Distribution bar ������������������������������������� */ .dist-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 14px 16px; margin: 0 0 16px; } .dist-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .dist-card-title { font-size: 13px; font-weight: 700; color: #0f172a; } .dist-card-sub { font-size: 11px; color: #64748b; } .dist-bar { height: 10px; border-radius: 999px; background: #f1f5f9; overflow: hidden; display: flex; margin-bottom: 10px; } .dist-bar-seg { height: 100%; transition: width .4s; } .dist-bar-red { background: var(--color-primary); } .dist-bar-blue { background: #3b82f6; } .dist-bar-green { background: #10b981; } .dist-bar-orange { background: #f59e0b; } .dist-legend { display: flex; flex-wrap: wrap; gap: 8px 14px; font-size: 11px; color: #374151; } .dist-legend-item { display: flex; align-items: center; gap: 5px; } .dist-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } /* �� Pending/approval rows �������������������������������� */ .pending-section-header { display: flex; justify-content: space-between; align-items: center; margin: 0 0 10px; } .pending-section-title { font-size: 13px; font-weight: 700; color: #0f172a; } .pending-see-all { font-size: 12px; font-weight: 600; color: var(--color-primary); text-decoration: none; } .pending-list { display: flex; flex-direction: column; } .pending-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid #f1f5f9; } .pending-row:last-child { border-bottom: none; } .pending-avatar { width: 42px; height: 42px; border-radius: 12px; background: #334155; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: #fff; flex-shrink: 0; } .pending-info { flex: 1; min-width: 0; } .pending-name { font-size: 13px; font-weight: 700; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pending-sub { font-size: 11px; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .approve-btn { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; background: #ecfdf5; color: #059669; border: 1px solid #bbf7d0; border-radius: 8px; font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap; text-decoration: none; } /* �� Member list (image 2 style) �������������������������� */ .member-list-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .member-list-count { font-size: 12px; color: #64748b; font-weight: 500; } .branch-search-bar { position: relative; margin-bottom: 12px; } .branch-search-bar i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #94a3b8; font-size: 14px; pointer-events: none; } .branch-search-bar input { width: 100%; height: 46px; padding: 0 16px 0 42px; border: 1.5px solid #e2e8f0; border-radius: 12px; font-size: 14px; color: #0f172a; background: #fff; outline: none; transition: border-color .2s; } .branch-search-bar input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-soft); } .filter-bar { display: flex; gap: 8px; overflow-x: auto; margin-bottom: 14px; padding-bottom: 2px; -webkit-overflow-scrolling: touch; } .filter-bar::-webkit-scrollbar { display: none; } .filter-pill { padding: 7px 14px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; cursor: pointer; border: 1.5px solid #e2e8f0; background: #fff; color: #374151; text-decoration: none; flex-shrink: 0; transition: all .15s; display: inline-block; } .filter-pill.active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); } .member-rows { display: flex; flex-direction: column; } .member-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid #f1f5f9; text-decoration: none; } .member-row:last-child { border-bottom: none; } .member-list-avatar { width: 48px; height: 48px; border-radius: 14px; background: #1e293b; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; color: #fff; flex-shrink: 0; letter-spacing: -0.5px; } .mla-teal { background: #0f766e; } .mla-blue { background: #1d4ed8; } .mla-slate { background: #334155; } .mla-red { background: var(--color-primary); } .mla-green { background: #059669; } .mla-amber { background: #b45309; } .member-row-info { flex: 1; min-width: 0; } .member-row-name { font-size: 14px; font-weight: 700; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .member-row-sub { font-size: 11px; color: #64748b; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .member-row-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; margin-top: 3px; } .mrb-temsilci { color: var(--color-primary); } .mrb-bekliyor { color: #d97706; } .mrb-pasif { color: #64748b; } .mrb-uyelik { color: #64748b; } .member-row-actions { display: flex; gap: 6px; flex-shrink: 0; align-items: center; } .circle-btn { width: 36px; height: 36px; border-radius: 10px; background: #f1f5f9; border: 1px solid #e2e8f0; display: flex; align-items: center; justify-content: center; color: #334155; text-decoration: none; font-size: 14px; cursor: pointer; flex-shrink: 0; transition: background .15s; } .circle-btn:hover { background: #e2e8f0; } .circle-btn.arrow { background: #f8fafc; } /* Avatar status dot */ .member-list-avatar-wrap { position: relative; flex-shrink: 0; } .member-list-avatar-wrap .status-dot { position: absolute; bottom: -2px; right: -2px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #fff; } .status-dot.dot-aktif { background: #22c55e; } .status-dot.dot-beklemede { background: #f59e0b; } .status-dot.dot-pasif { background: #94a3b8; } /* Badge renkleri */ .mrb-isyeri { color: #dc2626; } .mrb-bastemsislci { color: var(--color-primary); } /* member-row hover */ .member-row:hover { background: #fafafa; border-radius: 10px; } .list-footer { text-align: center; font-size: 11px; color: #94a3b8; padding: 12px 0 4px; } /* �� Member detail (image 1 style) ������������������������ */ .member-detail-hero { background: #fff; border: 1px solid #e2e8f0; border-radius: 20px; padding: 22px 16px; display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 14px; text-align: center; } .member-detail-avatar { width: 80px; height: 80px; border-radius: 22px; background: #1e293b; display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 800; color: #fff; margin-bottom: 4px; } .member-detail-name { font-size: 20px; font-weight: 800; color: #0f172a; } .member-detail-unvan { font-size: 13px; color: #64748b; } .member-status-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px; border-radius: 999px; font-size: 12px; font-weight: 600; margin-top: 2px; } .status-aktif { background: #ecfdf5; color: #059669; } .status-aktif::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #10b981; } .status-pasif { background: #fef2f2; color: var(--color-primary); } .status-beklemede { background: #fffbeb; color: #d97706; } .contact-row { display: flex; gap: 8px; margin: 12px 0; width: 100%; } .contact-btn { flex: 1; padding: 10px 6px; border-radius: 12px; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; border: 1.5px solid #e2e8f0; background: #fff; text-decoration: none; cursor: pointer; color: #374151; transition: background .15s; } .contact-btn:hover { background: #f8fafc; } .contact-btn i { font-size: 18px; } .contact-btn-red i { color: var(--color-primary); } .contact-btn-green i { color: #059669; } .info-section { background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 14px 16px; margin-bottom: 12px; } .info-section-title { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; color: #475569; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid #f1f5f9; } .info-section-title i { color: var(--color-primary); } .info-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 8px 0; border-bottom: 1px solid #f8fafc; } .info-row:last-child { border-bottom: none; } .info-key { font-size: 12px; color: #64748b; flex-shrink: 0; } .info-value { font-size: 13px; font-weight: 600; color: #0f172a; text-align: right; word-break: break-word; } .info-value.accent { color: var(--color-primary); } .info-value.tc-masked { letter-spacing: .05em; font-family: monospace; } .basvuru-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 0; border-bottom: 1px solid #f8fafc; } .basvuru-row:last-child { border-bottom: none; } .basvuru-title { font-size: 13px; font-weight: 600; color: #0f172a; } .basvuru-date { font-size: 11px; color: #94a3b8; margin-top: 1px; } .status-chip { padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; } .chip-green { background: #ecfdf5; color: #059669; } .chip-amber { background: #fffbeb; color: #d97706; } .chip-red { background: #fef2f2; color: var(--color-primary); } .chip-blue { background: #eff6ff; color: #2563eb; } /* �� SMS Panel (image 3 style) ���������������������������� */ .sms-panel-label { font-size: 13px; font-weight: 700; color: #0f172a; margin-bottom: 8px; } .sms-select-box { width: 100%; height: 52px; padding: 0 40px 0 14px; border: 1.5px solid #e2e8f0; border-radius: 14px; background: #fff; font-size: 14px; font-weight: 600; color: #0f172a; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; outline: none; margin-bottom: 16px; cursor: pointer; } .sms-select-box:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-soft); } .sms-templates-scroll { display: flex; gap: 8px; overflow-x: auto; margin-bottom: 16px; padding-bottom: 2px; } .sms-templates-scroll::-webkit-scrollbar { display: none; } .sms-tpl-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 10px; background: #f8fafc; border: 1.5px solid #e2e8f0; font-size: 12px; font-weight: 600; color: #374151; white-space: nowrap; cursor: pointer; flex-shrink: 0; transition: all .15s; } .sms-tpl-btn:hover { background: #f1f5f9; border-color: #cbd5e1; } .sms-textarea-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .sms-variable-hint { font-size: 11px; color: var(--color-primary); font-weight: 600; } .sms-textarea { width: 100%; min-height: 130px; padding: 14px; border: 1.5px solid #e2e8f0; border-radius: 14px; font: inherit; font-size: 14px; color: #0f172a; resize: none; background: #fff; outline: none; transition: border-color .2s; } .sms-textarea:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-soft); } .sms-footer-bar { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: #64748b; margin: 6px 0 16px; padding: 0 2px; } .sms-count-badge { display: inline-flex; align-items: center; gap: 6px; background: #fef2f2; color: var(--color-primary); border: 1px solid #fecaca; border-radius: 8px; padding: 4px 10px; font-size: 12px; font-weight: 700; } .sms-timing-row { display: flex; gap: 10px; margin-bottom: 20px; } .timing-option { flex: 1; border: 2px solid #e2e8f0; border-radius: 14px; padding: 12px; display: flex; align-items: center; gap: 10px; cursor: pointer; transition: all .15s; } /* ─── KURUM LIST ROW ─── */ .kurum-list-row { display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 12px; padding: 12px 14px; margin-bottom: 8px; text-decoration: none; color: inherit; box-shadow: 0 1px 3px rgba(0,0,0,.06); border: 1px solid #f1f5f9; transition: background .15s; } .kurum-list-row:hover { background: #f8fafc; } .kurum-list-icon { width: 40px; height: 40px; border-radius: 10px; background: #eff6ff; color: #2563eb; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; } .kurum-list-info { flex: 1; min-width: 0; } .kurum-list-name { font-size: 14px; font-weight: 600; color: #1e293b; } .kurum-list-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 3px; } .kurum-list-meta span { font-size: 11px; color: #64748b; } /* ─── BADGE ─── */ .badge-green { background: #dcfce7; color: #16a34a; padding: 2px 8px; border-radius: 99px; font-size: 11px; font-weight: 700; } .badge-red { background: #fee2e2; color: #b91c1c; padding: 2px 8px; border-radius: 99px; font-size: 11px; font-weight: 700; } /* ─── KURUM DETAIL HERO ─── */ .kurum-detail-hero { text-align: center; background: #fff; border-radius: 14px; padding: 20px 16px 16px; margin-bottom: 12px; box-shadow: 0 1px 3px rgba(0,0,0,.06); } .kurum-detail-icon { width: 60px; height: 60px; border-radius: 14px; background: #eff6ff; color: #2563eb; display: flex; align-items: center; justify-content: center; font-size: 26px; margin: 0 auto 10px; } .kurum-detail-name { font-size: 17px; font-weight: 700; color: #1e293b; } .kurum-detail-sektor { font-size: 13px; color: #64748b; margin-top: 2px; } /* ─── KURUM INDIRIM BADGE ─── */ .kurum-indirim-badge { background: #ecfdf5; color: #16a34a; border-radius: 10px; padding: 10px 14px; display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; margin-bottom: 12px; border: 1px solid #bbf7d0; } /* ─── HEDIYE ICON ─── */ .hediye-icon { width: 40px; height: 40px; border-radius: 10px; background: #fef3c7; color: #d97706; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; } /* ─── UYE SELECT SEARCH ─── */ .uye-select-search { margin-bottom: 4px; } .uye-checkbox-list { max-height: 240px; overflow-y: auto; border: 1px solid #e2e8f0; border-radius: 10px; background: #fff; } .uye-check-all { display: flex; align-items: center; gap: 8px; padding: 10px 12px; font-size: 12px; font-weight: 600; color: #64748b; border-bottom: 1px solid #f1f5f9; cursor: pointer; } .uye-check-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid #f8fafc; cursor: pointer; font-size: 13px; } .uye-check-item:hover { background: #f8fafc; } .uye-check-item input[type=checkbox] { flex-shrink: 0; } /* ─── BRANCH SEARCH BAR ─── */ .branch-search-bar { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 0 12px; height: 42px; } .branch-search-bar i { color: #94a3b8; font-size: 14px; } .branch-search-bar input { flex: 1; border: none; outline: none; font-size: 13px; background: transparent; } .timing-option.active { border-color: var(--color-primary); background: #fef2f2; } .timing-radio { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #cbd5e1; flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: all .15s; } .timing-option.active .timing-radio { border-color: var(--color-primary); background: var(--color-primary); } .timing-option.active .timing-radio::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #fff; } .timing-title { font-size: 13px; font-weight: 700; color: #0f172a; } .timing-sub { font-size: 10px; color: #64748b; margin-top: 1px; } .sms-send-btn { width: 100%; min-height: 54px; background: var(--color-primary); color: #fff; border: none; border-radius: 16px; font-size: 15px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer; box-shadow: 0 8px 20px rgba(185,28,28,.3); text-decoration: none; margin-bottom: 8px; transition: background .2s; } .sms-send-btn:hover { background: var(--color-primary-dark); } /* ─── SMS Variables Panel ─── */ .sms-vars-panel { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 10px 12px; margin-bottom: 12px; } .sms-vars-title { font-size: 11px; font-weight: 700; color: #64748b; margin-bottom: 8px; letter-spacing: 0.03em; display: flex; align-items: center; gap: 6px; } .sms-vars-list { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; } .sms-var-chip { background: #fff; border: 1px solid #cbd5e1; border-radius: 99px; padding: 3px 10px; font-size: 11px; font-weight: 600; color: #334155; cursor: pointer; font-family: monospace; transition: all .15s; } .sms-var-chip:hover { background: #eff6ff; border-color: #93c5fd; color: #1d4ed8; } .sms-vars-hint { font-size: 10px; color: #94a3b8; } /* �� Flash message ���������������������������������������� */ .branch-flash { padding: 12px 14px; border-radius: 12px; margin-bottom: 14px; font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 8px; } .branch-flash-success { background: #ecfdf5; color: #166534; border: 1px solid #bbf7d0; } .branch-flash-error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; } /* �� Empty state ������������������������������������������ */ .branch-empty { text-align: center; padding: 32px 16px; color: #94a3b8; } .branch-empty i { font-size: 32px; margin-bottom: 10px; display: block; } .branch-empty p { font-size: 13px; } /* Duyuru listesi */ .announcement-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 14px 12px; border: 1px solid #e2e8f0; border-radius: 14px; background: #ffffff; box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04); margin-bottom: 10px; } .announcement-main { flex: 1; min-width: 0; } .announcement-topline { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; } .announcement-title { font-size: 15px; font-weight: 700; color: #0f172a; line-height: 1.35; } .announcement-status { display: inline-flex; align-items: center; justify-content: center; padding: 3px 9px; border-radius: 999px; font-size: 10px; font-weight: 700; white-space: nowrap; } .announcement-status.active { background: #dcfce7; color: #166534; } .announcement-status.passive { background: #f1f5f9; color: #64748b; } .announcement-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; } .announcement-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; font-size: 10px; font-weight: 700; } .announcement-chip-green { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; } .announcement-chip-blue { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; } .announcement-chip-neutral { background: #f8fafc; color: #475569; border: 1px solid #e2e8f0; } .announcement-chip-light { background: #f8fafc; color: #64748b; border: 1px solid #e2e8f0; } .announcement-content { color: #475569; font-size: 13px; line-height: 1.55; margin-bottom: 8px; } .announcement-footer { color: #64748b; font-size: 11px; } .announcement-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .announcement-action-btn { width: 32px; height: 32px; font-size: 12px; } .announce-toggle-active { background: #fef9c3; color: #92400e; border-color: #fde68a; } .announce-toggle-passive { background: #f0fdf4; color: #166534; border-color: #bbf7d0; } .announcement-action-edit { background: #eff6ff; color: #2563eb; border-color: #bfdbfe; } .announcement-action-delete { background: #fef2f2; color: #b91c1c; border-color: #fecaca; } @media (max-width: 768px) { .announcement-row { flex-direction: column; padding: 12px; } .announcement-topline { align-items: flex-start; flex-direction: column; } .announcement-actions { width: 100%; justify-content: flex-end; } } /* Ziyaretler sayfasi */ .branch-filter-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 16px; margin-bottom: 16px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06); } .branch-filter-title { font-size: 12px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 12px; display: flex; align-items: center; gap: 6px; } .branch-filter-row { margin-top: 8px; } .branch-filter-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .branch-filter-actions > * { flex: 1 1 180px; min-height: 40px; font-size: 13px; } .branch-visit-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 14px 16px; margin-bottom: 10px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; } .branch-visit-card-main { flex: 1; min-width: 0; } .branch-visit-card-title { font-weight: 700; font-size: 14px; color: #1e293b; margin-bottom: 4px; } .branch-visit-card-meta { font-size: 12px; color: #64748b; margin-bottom: 4px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .branch-visit-badge { background: #eff6ff; color: #2563eb; padding: 1px 8px; border-radius: 6px; font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; } .branch-visit-location { color: #7c3aed; font-size: 11px; } .branch-visit-note { font-size: 12px; color: #475569; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .branch-visit-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; margin-left: auto; flex-shrink: 0; } .branch-visit-link { font-size: 11px; font-weight: 600; color: #2563eb; text-decoration: none; white-space: nowrap; } .branch-visit-delete { background: none; border: none; color: #dc3545; cursor: pointer; font-size: 13px; padding: 0; } @media (max-width: 560px) { .branch-filter-card { padding: 14px; } .branch-filter-card .form-row-2 { grid-template-columns: 1fr; } .branch-filter-actions { flex-direction: column; } .branch-filter-actions > * { width: 100%; flex-basis: auto; } .branch-visit-card { flex-direction: column; } .branch-visit-actions { flex-direction: row; justify-content: flex-end; width: 100%; margin-left: 0; } } /* ====================================================== Uye Paneli - Full Width Override page-dashboard, page-deals, page-profile => tum genislik ====================================================== */ body.page-dashboard, body.page-deals, body.page-profile { padding: 0 !important; background: #f1f5f9 !important; } body.page-dashboard .phone-wrapper, body.page-deals .phone-wrapper, body.page-profile .phone-wrapper { width: 100% !important; max-width: 100% !important; min-height: 100vh !important; border-radius: 0 !important; border: none !important; box-shadow: none !important; backdrop-filter: none !important; overflow-y: visible !important; margin: 0 !important; background: #f8fafc !important; padding-bottom: 80px !important; } body.page-dashboard .bottom-nav, body.page-deals .bottom-nav, body.page-profile .bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; margin: 0; border-radius: 0; z-index: 200; } /* ====================================================== Kullanicilar + Modul ortak komponetler ====================================================== */ .modul-section-card { background: #fff; border-radius: 16px; border: 1px solid #e2e8f0; overflow: hidden; } .modul-section-header { padding: 12px 16px; border-bottom: 1px solid #f1f5f9; } .modul-section-title { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: #0f172a; } .modul-count-badge { background: #ede9fe; color: #7c3aed; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 99px; } /* Kullanici row */ .kullanici-row { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid #f8fafc; } .kullanici-row:last-child { border-bottom: none; } .kullanici-avatar { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; flex-shrink: 0; } .kullanici-info { flex: 1; min-width: 0; } .kullanici-name { font-size: 13px; font-weight: 600; color: #0f172a; } .kullanici-sub { font-size: 11px; color: #64748b; margin-top: 1px; } .kullanici-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .kullanici-status { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 99px; } .ks-aktif { background: #dcfce7; color: #16a34a; } .ks-pasif { background: #fee2e2; color: #dc2626; } /* Form helpers */ .branch-form-card { background: #fff; border-radius: 16px; border: 1px solid #e2e8f0; padding: 18px; } .branch-inline-form { padding: 14px 16px; } .form-group { margin-bottom: 12px; } .form-label { display: block; font-size: 12px; font-weight: 600; color: #475569; margin-bottom: 5px; } .form-input { width: 100%; padding: 10px 12px; border: 1px solid #e2e8f0; border-radius: 10px; font-size: 14px; color: #0f172a; background: #f8fafc; outline: none; transition: border-color .2s; } .form-input:focus { border-color: #b91c1c; background: #fff; } .form-input[disabled] { opacity: .6; cursor: not-allowed; } .form-input.is-error { border-color: #f87171; background: #fef2f2; } .form-hint { display: block; font-size: 11px; color: #94a3b8; margin-top: 4px; } .form-error { display: block; font-size: 11px; color: #b91c1c; margin-top: 4px; font-weight: 600; } .form-group { display: flex; flex-direction: column; } .form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } /* Kurum cards */ .kurum-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 14px; margin-bottom: 10px; } .kurum-card-header { display: flex; align-items: flex-start; gap: 10px; } .kurum-icon { width: 40px; height: 40px; background: #eff6ff; color: #2563eb; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; } .kurum-info { flex: 1; min-width: 0; } .kurum-name { font-size: 14px; font-weight: 700; color: #0f172a; } .kurum-meta { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; } .kurum-tag { font-size: 11px; font-weight: 600; padding: 2px 8px; background: #f1f5f9; color: #475569; border-radius: 99px; } .tag-green { background: #dcfce7; color: #16a34a; } .tag-red { background: #fee2e2; color: #dc2626; } .kurum-actions { display: flex; gap: 6px; flex-shrink: 0; } .kurum-details { margin-top: 8px; } .kurum-detail-row { font-size: 12px; color: #64748b; display: flex; align-items: center; gap: 6px; margin-top: 4px; } .kurum-edit-form { border-top: 1px solid #f1f5f9; padding-top: 12px; margin-top: 10px; } /* Hediye cards */ .hediye-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 14px; margin-bottom: 10px; } .hediye-card-header { display: flex; align-items: flex-start; gap: 10px; } .hediye-icon { width: 40px; height: 40px; background: #fef3c7; color: #d97706; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; } .hediye-info { flex: 1; min-width: 0; } .hediye-name { font-size: 14px; font-weight: 700; color: #0f172a; } .hediye-meta { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; } /* Tabs */ .tab-nav { display: flex; background: #fff; border-radius: 12px; border: 1px solid #e2e8f0; padding: 4px; margin-bottom: 14px; gap: 4px; } .tab-btn { flex: 1; padding: 8px 4px; border: none; border-radius: 9px; background: transparent; font-size: 11px; font-weight: 600; color: #64748b; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 4px; transition: all .2s; } .tab-btn.active { background: var(--color-primary); color: #fff; } .tab-content { display: block; } /* Uye checkbox list for distribution */ .uye-checkbox-list { max-height: 220px; overflow-y: auto; border: 1px solid #e2e8f0; border-radius: 10px; padding: 8px; background: #f8fafc; } .uye-check-all { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: #475569; padding: 6px 4px 8px; border-bottom: 1px solid #e2e8f0; margin-bottom: 6px; cursor: pointer; } .uye-check-item { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #0f172a; padding: 5px 4px; cursor: pointer; border-radius: 6px; } .uye-check-item:hover { background: #e2e8f0; } .uye-check-item input { accent-color: var(--color-primary); } /* branch-search-box compat */ .branch-search-box { flex: 1; display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: #f8fafc; border-radius: 12px; border: 1px solid #e2e8f0; } .branch-search-box input { border: none; background: transparent; font-size: 14px; outline: none; flex: 1; } /* -- Aramal� �ye Se�imi -- */ .uye-search-select { position: relative; } .uye-search-input-row, .search-input-wrap { display: flex; align-items: center; gap: 8px; border: 1.5px solid #e2e8f0; border-radius: 10px; padding: 0 12px; height: 44px; background: #fff; } .uye-search-text, .search-text-input { flex: 1; border: none; outline: none; font-size: 13px; background: transparent; color: #1e293b; } .uye-search-dropdown, .uye-dropdown { display: none; position: absolute; top: 48px; left: 0; right: 0; background: #fff; border: 1.5px solid #e2e8f0; border-radius: 12px; max-height: 220px; overflow-y: auto; z-index: 100; box-shadow: 0 4px 16px rgba(0,0,0,.08); } .uye-search-item, .uye-option { display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; border-bottom: 1px solid #f8fafc; transition: background .12s; } .uye-search-item:hover, .uye-option:hover { background: #f8fafc; } .uye-search-item:last-child, .uye-option:last-child { border-bottom: none; } .uye-search-item-avatar { width: 32px; height: 32px; border-radius: 8px; background: #fef3c7; color: #d97706; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; } .search-icon { color: #94a3b8; font-size: 13px; flex-shrink: 0; } .uye-option-name { font-size: 13px; font-weight: 600; color: #0f172a; } .uye-option-meta { margin-left: auto; font-size: 11px; color: #64748b; } /* ═══════════════════════════════════════════════════════════════ PAGE-SPECIFIC COMPONENT STYLES — BLADE'LERDEN TAŞINDI ═══════════════════════════════════════════════════════════════ */ /* ── Giriş / Auth Sayfası (.page-login) ──────────────────────── */ .page-login .entry { display: grid; min-height: 100dvh; place-items: start center; padding: max(20px, env(safe-area-inset-top)) 16px max(20px, env(safe-area-inset-bottom)); } .page-login .entry-card { position: relative; width: min(100%, 420px); padding: 24px 18px 20px; border-radius: 24px; background: #ffffff; box-shadow: 0 18px 40px rgba(16, 35, 63, 0.12); color: #10233f; } .page-login .brand-wrap { display: grid; width: min(100%, 240px); margin: 0 auto 16px; place-items: center; padding: 8px 10px 0; } .page-login .brand-logo { display: block; width: min(100%, 220px); height: auto; object-fit: contain; filter: drop-shadow(0 10px 24px rgba(16, 35, 63, 0.12)); } .page-login h1 { margin: 0; text-align: center; font-size: clamp(26px, 8vw, 38px); line-height: 1.06; letter-spacing: 0.02em; color: #10233f; } .page-login .subtitle { margin: 2px 0 22px; text-align: center; color: #617087; } .page-login .form { display: grid; gap: 10px; } .page-login .form label { font-weight: 700; color: #1a2f4f; } .page-login .form input { width: 100%; padding: 14px 16px; border: 1px solid #d8deea; border-radius: 12px; color: #1a2f4f; background: #f7f9fc; font: inherit; } .page-login .form input:focus-visible { outline: 2px solid var(--color-primary, #d11f24); outline-offset: 0; } .page-login .form button { margin-top: 8px; padding: 14px; border: 0; border-radius: 12px; color: #ffffff; background: var(--color-primary, #d11f24); font: inherit; font-weight: 700; } .page-login .form button:disabled { opacity: 0.68; } .page-login .status { margin: 12px 0 2px; font-size: 14px; font-weight: 600; text-align: center; } .page-login .status[data-kind='error'] { color: #c31a20; } .page-login .status[data-kind='success'] { color: #177848; } .page-login .status[data-kind='info'] { color: #304968; } .branches-label { font-size: 11px; font-weight: 700; letter-spacing: .1em; color: #94a3b8; text-align: center; text-transform: uppercase; margin: 20px 0 10px; } .branches-grid { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-height: 210px; overflow-y: auto; padding: 2px 0 8px; } .branch-item { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 78px; } .branch-logo-wrap { width: 52px; height: 52px; border-radius: 14px; background: #f0f4fa; border: 1.5px solid #e2e8f0; display: flex; align-items: center; justify-content: center; overflow: hidden; font-size: 15px; font-weight: 700; color: #304968; flex-shrink: 0; } .branch-logo-wrap img { width: 100%; height: 100%; object-fit: cover; } .branch-name { font-size: 10px; font-weight: 600; color: #304968; text-align: center; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .btn-giris { display: block; margin-top: 14px; padding: 14px; border-radius: 12px; color: #ffffff; background: var(--color-primary, #d11f24); font-weight: 700; font-size: 16px; text-align: center; text-decoration: none; font-family: inherit; } .btn-giris:hover { background: var(--color-primary-dark, #b91c1c); } /* ── Branch: Anlaşmalı Kurumlar ─────────────────────────────── */ .kurum-list-row, .kurum-list-row:hover, .kurum-list-row:focus, .branch-kurum-link, .branch-kurum-link:hover, .branch-kurum-link:focus { text-decoration: none !important; border-bottom: 0 !important; } .kurum-card { border: 1px solid #dbe3ef; border-radius: 16px; background: #fff; padding: 14px; margin-bottom: 12px; box-shadow: 0 6px 16px rgba(15, 23, 42, 0.05); } .kurum-link, .kurum-link:hover, .kurum-link:focus, .kurum-card a { text-decoration: none !important; border-bottom: 0 !important; } .kurum-hero-icon { width: 62px; height: 62px; border-radius: 18px; margin: 0 auto; display: flex; align-items: center; justify-content: center; font-size: 28px; background: #ecfdf3; color: #059669; } .kurum-title { margin-top: 10px; text-align: center; font-size: 18px; font-weight: 800; color: #0f172a; line-height: 1.3; overflow-wrap: anywhere; } .kurum-sub { margin-top: 4px; text-align: center; color: #64748b; font-size: 12px; font-weight: 500; line-height: 1.4; } .kurum-discount-banner { margin-top: 12px; border: 1px dashed #fca5a5; background: #fef2f2; color: #dc2626; border-radius: 12px; padding: 10px 12px; display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 800; font-size: 13px; } .kurum-quick-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; } .kurum-quick-btn { border: 1px solid #dbe3ef; border-radius: 12px; height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; color: #0f172a; background: #fff; font-weight: 700; font-size: 14px; text-decoration: none !important; border-bottom: 0 !important; } .kurum-quick-btn:hover, .kurum-quick-btn:focus, .kurum-quick-actions a, .kurum-quick-actions a:hover, .kurum-quick-actions a:focus { text-decoration: none !important; border-bottom: 0 !important; } .kurum-quick-btn i { color: #059669; } .kurum-section-title { display: flex; align-items: center; gap: 8px; color: #0f172a; font-size: 15px; font-weight: 800; margin-bottom: 8px; text-transform: uppercase; } .kurum-section-title i { color: #059669; } .kurum-bullets { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; } .kurum-bullets li { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; color: #0f172a; line-height: 1.35; } .kurum-bullets li i { color: #059669; margin-top: 2px; } .kurum-code-box { margin-top: 10px; border: 1px solid #a7e3cf; background: #dff2ea; border-radius: 12px; text-align: center; padding: 10px; } .kurum-code-box small { display: block; color: #065f46; font-size: 12px; font-weight: 700; text-transform: uppercase; } .kurum-code-box strong { display: block; margin-top: 2px; color: #065f46; font-size: 24px; letter-spacing: 2px; } .kurum-admin-actions { display: flex; gap: 10px; margin-top: 14px; } .kurum-admin-actions .sms-send-btn { flex: 1; text-align: center; padding: 12px; } /* ── Branch: SMS Ayarları ────────────────────────────────────── */ .provider-segment-group { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid #0f766e; border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 1px 2px rgba(15, 118, 110, .08); } .provider-segment { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 54px; padding: 12px 14px; cursor: pointer; font-weight: 700; font-size: 13px; color: #0f766e; background: #fff; transition: .2s ease; user-select: none; border-right: 1px solid rgba(15, 118, 110, .18); } .provider-segment:last-child { border-right: 0; } .provider-segment:hover { background: #f0fdf4; } .provider-segment i { font-size: 15px; } .provider-segment.is-active { background: linear-gradient(135deg, #0f766e, #16a34a); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); } .provider-segment input { position: absolute; opacity: 0; pointer-events: none; } @media (max-width: 640px) { .provider-segment-group { grid-template-columns: 1fr; } .provider-segment { border-right: 0; border-bottom: 1px solid rgba(15,118,110,.18); } .provider-segment:last-child { border-bottom: 0; } } /* ── Branch: SMS Toplu Gönderim ──────────────────────────────── */ .sms-hedef-buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .sms-hedef-btn { border: 1px solid #cbd5e1; background: #fff; color: #334155; border-radius: 10px; min-height: 40px; font-size: 12px; font-weight: 700; cursor: pointer; transition: .15s ease; padding: 0 8px; } .sms-hedef-btn.active { border-color: #10b981; background: #ecfdf3; color: #065f46; } .sms-hedef-btn.disabled { opacity: .45; cursor: not-allowed; } .sms-hedef-extra { margin-top: 10px; } .sms-toplu-status { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 12px; padding: 10px 12px; border-radius: 14px; border: 1px solid #b7e9ce; background: #e9f8ef; color: #065f46; font-size: 13px; font-weight: 700; } .sms-toplu-status.is-missing { border-color: #fecaca; background: #fef2f2; color: #991b1b; } .sms-toplu-status.is-ready { border-color: #b7e9ce; background: #e9f8ef; color: #065f46; } .sms-toplu-status i { margin-right: 4px; } .sms-toplu-status strong { letter-spacing: .2px; } .sms-toplu-alert-note { margin-top: -4px; margin-bottom: 12px; border: 1px solid #fecaca; background: #fff7f7; color: #b91c1c; border-radius: 10px; padding: 8px 10px; font-size: 12px; font-weight: 600; } .sms-toplu-alert-note a { color: #b91c1c; text-decoration: underline; } .sms-toplu-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 18px; padding: 14px; } .sms-toplu-group { margin-bottom: 12px; } .sms-toplu-label-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; } .sms-toplu-label { display: block; font-size: 13px; font-weight: 700; color: #1e293b; } .sms-toplu-count { font-size: 12px; font-weight: 700; color: #16a34a; } .sms-toplu-select, .sms-toplu-textarea { width: 100%; border: 1px solid #d8e1ec; border-radius: 12px; padding: 12px 13px; font-size: 14px; color: #0f172a; background: #fff; } .sms-toplu-textarea { min-height: 106px; resize: vertical; } .sms-toplu-vars { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; } .sms-var-chip { border: 1px solid #9ee7bf; background: #ecfdf3; color: #047857; border-radius: 8px; padding: 4px 9px; font-size: 12px; font-weight: 700; cursor: pointer; } .sms-var-chip:hover { background: #dcfce7; } .sms-toplu-meta { display: flex; justify-content: space-between; align-items: center; border-radius: 10px; background: #f1f5f9; padding: 8px 10px; color: #64748b; font-size: 12px; margin-bottom: 12px; } .sms-toplu-meta strong { color: #334155; } .sms-toplu-submit { width: 100%; min-height: 46px; border: 0; border-radius: 14px; background: linear-gradient(135deg, #059669, #15803d); color: #fff; font-size: 15px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; } /* SMS değişken chip'leri */ .degisken-chip { background: #eff6ff; color: #2563eb; border: 1px solid #bfdbfe; border-radius: 99px; padding: 4px 10px; font-size: 11px; font-weight: 600; cursor: pointer; transition: background .15s; } .degisken-chip:hover { background: #dbeafe; } /* Özel gün sayfasında amber varyant */ .degisken-chip-amber { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; border-radius: 99px; padding: 4px 10px; font-size: 11px; font-weight: 600; cursor: pointer; transition: background .15s; } .degisken-chip-amber:hover { background: #fde68a; } /* ── Branch: Üyeler Listesi ──────────────────────────────────── */ .uye-grid-shell { background: #ffffff; border: 1px solid #d9e2ef; border-radius: 16px; box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06); overflow: hidden; } .uye-grid-summary { display: flex; justify-content: space-between; gap: 12px; padding: 12px 14px; border-bottom: 1px solid #e5edf7; background: linear-gradient(180deg, #f8fbff 0%, #f2f7fd 100%); } .uye-grid-pill { font-size: 12px; color: #475569; font-weight: 600; } .uye-grid-pill b { color: #0f172a; } .uye-grid-pill-green b { color: #059669; } .uye-grid-filter { padding: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; border-bottom: 1px solid #e5edf7; background: #f9fbfe; } .uye-grid-filter .input-wrapper input, .uye-grid-filter .input-wrapper select { min-height: 42px; border-radius: 10px; border-color: #d4dfed; background: #fff; font-size: 13px; } .uye-grid-table-head { display: grid; grid-template-columns: 1.2fr 1fr .7fr; gap: 8px; padding: 10px 12px; background: #f1f5fb; border-bottom: 1px solid #dde7f5; font-size: 12px; font-weight: 700; color: #475569; text-transform: uppercase; } .uye-grid-row { display: grid; grid-template-columns: 1.2fr 1fr .7fr; gap: 8px; padding: 10px 12px; border-bottom: 1px solid #ecf1f8; align-items: center; text-decoration: none; color: inherit; } .uye-grid-row:hover { background: #f8fbff; } .uye-grid-person { display: flex; align-items: center; gap: 9px; min-width: 0; } .uye-grid-avatar { width: 30px; height: 30px; border-radius: 9px; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; flex-shrink: 0; } .uye-grid-name { font-size: 14px; font-weight: 700; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .uye-grid-sicil { font-size: 12px; color: #64748b; } .uye-grid-birim { min-width: 0; } .uye-grid-birim-main { font-size: 13px; color: #1e293b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .uye-grid-birim-sub { font-size: 11px; color: #94a3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .uye-grid-durum { font-size: 13px; font-weight: 700; text-align: right; display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; width: 100%; } .uye-grid-eye { width: 24px; height: 24px; border: 1px solid #d4dfed; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; color: #475569; background: #fff; font-size: 11px; } .uye-grid-eye:hover { border-color: #94a3b8; color: #0f172a; } .uye-grid-durum-aktif { color: #059669; } .uye-grid-durum-beklemede { color: #b45309; } .uye-grid-durum-pasif { color: #b91c1c; } .uye-grid-footer { padding: 10px 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #f8fbff; } .uye-grid-count { font-size: 12px; color: #64748b; } .uye-grid-pages { display: flex; gap: 6px; align-items: center; } .uye-grid-page-link { min-width: 28px; height: 28px; border: 1px solid #d8e2ef; border-radius: 8px; font-size: 12px; color: #334155; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; background: #fff; } .uye-grid-page-link.active { background: var(--color-primary, #c81e1e); border-color: var(--color-primary, #c81e1e); color: #fff; font-weight: 700; } .uye-grid-empty { padding: 34px 16px; text-align: center; color: #64748b; font-size: 13px; } /* ── Branch: Üyeler Toplu Önizleme ───────────────────────────── */ .uyeler-preview-pagination { margin-top: 14px; display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; } .uyeler-preview-pagination-info { font-size: 12px; color: #64748b; } .uyeler-preview-pagination-links { display: flex; gap: 6px; align-items: center; } .uyeler-preview-page-link { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 10px; border-radius: 10px; border: 1px solid #dbe4f0; background: #fff; color: #334155; font-size: 12px; font-weight: 700; text-decoration: none !important; } .uyeler-preview-page-link.active { background: #0f2a47; border-color: #0f2a47; color: #fff; } .uyeler-preview-page-link.disabled { opacity: .45; pointer-events: none; } /* ── Member: Duyuru Detay ────────────────────────────────────── */ .ann-detail-card { background: #ffffff; border: 1px solid #dbe4f0; border-radius: 22px; padding: 18px; box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08); margin-bottom: 14px; } .ann-detail-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 12px; border-bottom: 1px dashed #d7e1ed; margin-bottom: 14px; } .ann-detail-tag { display: inline-flex; align-items: center; gap: 6px; background: var(--color-primary, #e11d2e); color: #fff; border-radius: 8px; padding: 6px 10px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .2px; line-height: 1; } .ann-detail-date { display: inline-flex; align-items: center; gap: 6px; color: #475569; font-size: 13px; font-weight: 700; white-space: nowrap; } .ann-detail-title { margin: 0 0 14px; color: #0b2343; font-size: 22px; line-height: 1.14; font-weight: 800; letter-spacing: -0.3px; } .ann-detail-body { color: #1f3b63; font-size: 16px; line-height: 1.58; font-weight: 500; } .ann-detail-body p { margin: 0 0 14px; } .ann-detail-body p:last-child { margin-bottom: 0; } .ann-detail-meta { margin-top: 14px; padding-top: 12px; border-top: 1px solid #e7eef6; color: #64748b; font-size: 12px; display: inline-flex; align-items: center; gap: 7px; flex-wrap: wrap; } @media (max-width: 420px) { .ann-detail-card { border-radius: 18px; padding: 14px; } .ann-detail-head { padding-bottom: 10px; margin-bottom: 12px; } .ann-detail-tag { font-size: 11px; padding: 5px 8px; } .ann-detail-date { font-size: 12px; } .ann-detail-title { font-size: 20px; margin-bottom: 12px; } .ann-detail-body { font-size: 15px; } } /* ── Member: Duyurular Listesi ───────────────────────────────── */ .ann-search-wrap { margin-bottom: 10px; background: #fff; border: 1px solid #dbe4f0; border-radius: 14px; padding: 10px 12px; display: flex; align-items: center; gap: 8px; } .ann-search-wrap i { color: #64748b; } .ann-search-wrap input { border: 0; outline: 0; width: 100%; font-size: 13px; color: #0f172a; background: transparent; } .ann-filter-chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; margin-bottom: 12px; } .ann-filter-chips::-webkit-scrollbar { display: none; } .ann-chip { display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; min-height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid #dbe4f0; background: #fff; color: #64748b; font-size: 13px; font-weight: 700; text-decoration: none !important; } .ann-chip.active { background: var(--color-primary, #dc2626); border-color: var(--color-primary, #dc2626); color: #fff; } .ann-list { display: flex; flex-direction: column; gap: 10px; } .ann-link { display: block; text-decoration: none !important; color: inherit; } .ann-card { border: 1px solid #dbe4f0; border-radius: 16px; background: #fff; padding: 10px 12px; } .ann-card.is-red { border-left: 4px solid #dc2626; } .ann-card.is-green { border-left: 4px solid #059669; } .ann-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .ann-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 800; text-transform: uppercase; border-radius: 999px; padding: 4px 8px; background: #f8fafc; } .ann-tag.is-red { color: #dc2626; background: #fff1f2; } .ann-tag.is-green { color: #047857; background: #ecfdf5; } .ann-date { color: #64748b; font-size: 12px; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; } .ann-title { margin: 8px 0 6px; font-size: 15px; line-height: 1.2; font-weight: 800; color: #0f172a; } .ann-desc { margin: 0; color: #475569; font-size: 13px; line-height: 1.45; } .ann-footer { margin-top: 9px; border-top: 1px dashed #e2e8f0; padding-top: 8px; display: flex; align-items: center; justify-content: space-between; gap: 8px; } .ann-publish-date { color: #64748b; font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; } .ann-detail-link { color: var(--color-primary, #dc2626); font-size: 13px; font-weight: 800; display: inline-flex; align-items: center; gap: 6px; } .ann-pagination { margin-top: 14px; display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; } .ann-pagination-info { font-size: 12px; color: #64748b; } .ann-pagination-links { display: flex; gap: 6px; align-items: center; } .ann-page-link { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 10px; border-radius: 10px; border: 1px solid #dbe4f0; background: #fff; color: #334155; font-size: 12px; font-weight: 700; text-decoration: none !important; } .ann-page-link.active { background: var(--color-primary, #dc2626); border-color: var(--color-primary, #dc2626); color: #fff; } .ann-page-link.disabled { opacity: .45; pointer-events: none; } /* ── Member: Anlaşmalı Kurum Detay (deal-*) ──────────────────── */ .deal-detail-page a, .deal-detail-page a:hover, .deal-detail-page a:focus { text-decoration: none !important; border-bottom: 0 !important; } .deal-hero-card, .deal-info-card { border: 1px solid #dbe3ef; border-radius: 16px; background: #fff; padding: 14px; margin-bottom: 12px; box-shadow: 0 6px 16px rgba(15, 23, 42, 0.05); } .deal-hero-icon { width: 62px; height: 62px; border-radius: 18px; margin: 0 auto; display: flex; align-items: center; justify-content: center; font-size: 28px; background: #ecfdf3; color: #059669; } .deal-title { margin-top: 10px; text-align: center; font-size: 28px; font-weight: 800; color: #0f172a; line-height: 1.2; } .deal-sub { margin-top: 4px; text-align: center; color: #64748b; font-size: 16px; font-weight: 600; } .deal-discount-banner { margin-top: 12px; border: 1px dashed #fca5a5; background: #fef2f2; color: #dc2626; border-radius: 12px; padding: 10px 12px; display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 800; font-size: 15px; } .deal-quick-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; } .deal-quick-btn { border: 1px solid #dbe3ef; border-radius: 12px; height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; color: #0f172a; background: #fff; font-weight: 700; font-size: 14px; } .deal-quick-btn i { color: #059669; } .deal-section-title { display: flex; align-items: center; gap: 8px; color: #0f172a; font-size: 15px; font-weight: 800; margin-bottom: 8px; text-transform: uppercase; } .deal-section-title i { color: #059669; } .deal-bullets { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; } .deal-bullets li { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; color: #0f172a; line-height: 1.35; } .deal-bullets li i { color: #059669; margin-top: 2px; } /* ── Member: Anlaşmalı Kurumlar Listesi (deals-*) ────────────── */ .deals-table-wrap { margin-top: 10px; border: 1px solid #dbe3ef; border-radius: 16px; background: #ffffff; overflow-x: auto; } .deals-table-wrap a, .categories-scroll a, .deals-filter-actions a, .deals-pagination a, .deals-pagination span { text-decoration: none !important; border-bottom: 0 !important; } .deals-table { width: 100%; min-width: 640px; border-collapse: collapse; } .deals-table thead th { padding: 11px 12px; text-align: left; color: #065f46; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 800; background: #dff2ea; border-bottom: 1px solid #d0e8dc; } .deals-table thead th:first-child { border-top-left-radius: 14px; } .deals-table thead th:last-child { border-top-right-radius: 14px; } .deals-table thead th.t-center { text-align: center; } .deals-table thead th.t-right { text-align: right; } .deals-row { background: #ffffff; cursor: pointer; transition: background-color .15s ease; } .deals-row:hover { background: #f8fbff; } .deals-cell { padding: 12px; border-bottom: 1px solid #e6edf5; vertical-align: middle; } .deals-row:last-child .deals-cell { border-bottom: 0; } .deals-brand { display: flex; align-items: center; gap: 10px; } .deals-logo { width: 34px; height: 34px; min-width: 34px; border-radius: 10px; background: #ecfdf5; color: #059669; display: inline-flex; align-items: center; justify-content: center; } .deals-title { margin: 0; font-size: 13px; font-weight: 700; color: #0f172a; line-height: 1.2; } .deals-sub { margin-top: 2px; font-size: 11px; color: #64748b; line-height: 1.3; } .discount-pill { display: inline-block; background: #fee2e2; color: #dc2626; font-weight: 700; font-size: 12px; padding: 3px 10px; border-radius: 999px; } .deals-arrow-link { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 999px; border: 1px solid #d7e2f1; color: #64748b; background: #fff; font-size: 13px; text-decoration: none !important; } .deals-arrow-link:hover { border-color: #93c5fd; color: #2563eb; background: #eff6ff; } .deals-filter-shell { background: linear-gradient(145deg, #0f2a47 0%, #1f3a5f 100%); border-radius: 16px; padding: 12px; box-shadow: 0 10px 24px rgba(15, 42, 71, 0.2); margin-bottom: 10px; } .deals-filter-shell .filter-input-wrap { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid #dbe4f0; border-radius: 12px; padding: 10px 12px; } .deals-filter-shell .filter-input-wrap i { color: #64748b; } .deals-filter-shell .filter-input-wrap input { width: 100%; border: 0; outline: 0; font-size: 13px; color: #0f172a; background: transparent; } .deals-filter-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; } .deals-filter-row select { width: 100%; border: 1px solid #dbe4f0; background: #fff; border-radius: 12px; padding: 10px 12px; font-size: 13px; color: #0f172a; outline: 0; } .deals-filter-actions { margin-top: 8px; display: flex; gap: 8px; align-items: center; } .deals-filter-actions a, .deals-filter-actions button { text-decoration: none !important; } /* ── Member: Haber Detay ─────────────────────────────────────── */ .news-detail-card { background: #fff; border: 1px solid #dbe4f0; border-radius: 22px; overflow: hidden; box-shadow: 0 16px 36px rgba(15, 23, 42, 0.08); margin-bottom: 14px; } .news-detail-image { width: 100%; height: 240px; object-fit: cover; display: block; } .news-detail-content { padding: 16px; } .news-detail-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 1px dashed #d9e2ee; margin-bottom: 12px; } .news-detail-tag { display: inline-flex; align-items: center; border-radius: 8px; background: #dcfce7; color: #065f46; font-size: 12px; font-weight: 800; letter-spacing: .2px; text-transform: uppercase; line-height: 1; padding: 7px 10px; } .news-detail-meta-row { display: inline-flex; align-items: center; gap: 14px; color: #52657f; font-size: 13px; font-weight: 700; } .news-detail-meta-item { display: inline-flex; align-items: center; gap: 6px; } .news-detail-title { margin: 0 0 10px; color: #0b2343; font-size: 22px; font-weight: 800; letter-spacing: -0.3px; line-height: 1.14; } .news-detail-summary { color: #1e3557; font-size: 15px; line-height: 1.58; margin: 0 0 14px; font-weight: 500; } .news-detail-body { color: #1f3b63; font-size: 16px; line-height: 1.58; font-weight: 500; } .news-detail-body p { margin: 0 0 14px; } .news-detail-body p:last-child { margin-bottom: 0; } @media (max-width: 420px) { .news-detail-card { border-radius: 18px; } .news-detail-image { height: 185px; } .news-detail-content { padding: 13px; } .news-detail-title { font-size: 20px; } .news-detail-summary { font-size: 14px; } .news-detail-body { font-size: 15px; } } /* ── Member: Haberler Listesi ────────────────────────────────── */ .news-list-shell { border: 1px solid #dbe4f0; border-radius: 18px; background: #fff; overflow: hidden; } .news-row-link { display: block; text-decoration: none !important; color: inherit; } .news-row { display: grid; grid-template-columns: 64px 1fr 16px; gap: 12px; align-items: center; padding: 11px 12px; border-bottom: 1px solid #e6edf5; } .news-row:last-child { border-bottom: 0; } .news-thumb { width: 64px; height: 64px; border-radius: 12px; overflow: hidden; background: #f1f5f9; } .news-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .news-thumb-fallback { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #94a3b8; font-size: 12px; font-weight: 700; } .news-title { margin: 0; color: #0f172a; font-size: 15px; font-weight: 800; line-height: 1.2; } .news-date { margin-top: 5px; color: #64748b; font-size: 12px; display: inline-flex; align-items: center; gap: 5px; } .news-arrow { color: #64748b; font-size: 15px; text-align: right; } .news-pagination { margin-top: 14px; display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; } .news-pagination-info { font-size: 12px; color: #64748b; } .news-pagination-links { display: flex; gap: 6px; align-items: center; } .news-page-link { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 10px; border-radius: 10px; border: 1px solid #dbe4f0; background: #fff; color: #334155; font-size: 12px; font-weight: 700; text-decoration: none !important; } .news-page-link.active { background: #0f2a47; border-color: #0f2a47; color: #fff; } .news-page-link.disabled { opacity: .45; pointer-events: none; } /* ── Member: Talep/İletişim Chat ─────────────────────────────── */ .chat-bubble { border-radius: 16px; padding: 10px 14px; max-width: 80%; line-height: 1.5; font-size: 13px; } .bubble-uye { background: #1e293b; color: #f1f5f9; border-bottom-right-radius: 4px; align-self: flex-end; } .bubble-sube { background: #fff; color: #1e293b; border-bottom-left-radius: 4px; align-self: flex-start; border: 1px solid #e2e8f0; } .bubble-time { font-size: 10px; color: #94a3b8; margin-top: 4px; } .chat-list { display: flex; flex-direction: column; gap: 14px; } /* ── Member: Maaş Hesaplama ──────────────────────────────────── */ .calc-content { flex-grow: 1; overflow-y: auto; margin: 15px 0 5px; padding-right: 2px; display: flex; flex-direction: column; gap: 14px; } .calc-content::-webkit-scrollbar { width: 4px; } .calc-content::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; } .calc-card { background: #fff; border-radius: 16px; padding: 12px 14px; border: 1px solid #f1f5f9; box-shadow: 0 2px 6px rgba(0,0,0,0.02); display: flex; flex-direction: column; gap: 10px; } .calc-header { display: flex; align-items: center; justify-content: space-between; font-size: 11px; font-weight: 800; color: #0f172a; text-transform: uppercase; letter-spacing: 0.3px; } .calc-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .calc-group { display: flex; flex-direction: column; gap: 4px; } .calc-group label { font-size: 10px; font-weight: 700; color: #475569; text-transform: uppercase; letter-spacing: 0.3px; } .calc-control { width: 100%; padding: 8px 10px; border-radius: 8px; border: 1px solid #cbd5e1; font-size: 12px; font-weight: 600; color: #0f172a; background: #f8fafc; outline: none; } .calc-control:focus { border-color: var(--color-primary, #b91c1c); background: #fff; } .kpi-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .kpi-card { background: #fff; border-radius: 16px; padding: 12px; border: 1px solid #f1f5f9; box-shadow: 0 2px 6px rgba(0,0,0,0.02); display: flex; flex-direction: column; gap: 6px; } .kpi-top { display: flex; align-items: center; justify-content: space-between; } .kpi-icon { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 13px; } .icon-blue { background: #eff6ff; color: #2563eb; } .icon-amber { background: #fffbeb; color: #d97706; } .icon-green { background: #ecfdf5; color: #059669; } .icon-purple { background: #faf5ff; color: #9333ea; } .kpi-change { font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 4px; } .up { background: #ecfdf5; color: #059669; } .alert { background: #fef2f2; color: #dc2626; } .kpi-value { font-size: 16px; font-weight: 800; color: #0f172a; line-height: 1.1; } .kpi-label { font-size: 10px; color: #64748b; font-weight: 600; } .progress-multi { height: 10px; width: 100%; background: #e2e8f0; border-radius: 6px; overflow: hidden; display: flex; } .progress-bar { height: 100%; transition: width 0.3s ease; } .bg-green { background: #059669; } .bg-blue { background: #3b82f6; } .bg-amber { background: #f59e0b; } .legend-list { display: flex; justify-content: space-between; font-size: 9px; color: #64748b; font-weight: 600; } .legend-item { display: flex; align-items: center; gap: 4px; } .legend-dot { width: 8px; height: 8px; border-radius: 50%; } .bordro-card { background: #fff; border-radius: 16px; padding: 12px 14px; border: 1px solid #f1f5f9; box-shadow: 0 2px 6px rgba(0,0,0,0.02); display: flex; flex-direction: column; gap: 10px; } .bordro-row { display: flex; align-items: center; justify-content: space-between; padding-bottom: 7px; border-bottom: 1px solid #f8fafc; } .bordro-row:last-child { border-bottom: none; padding-bottom: 0; } .bordro-left { display: flex; align-items: center; gap: 8px; } .bordro-avatar { width: 28px; height: 28px; border-radius: 8px; background: #f1f5f9; color: #0f172a; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; } .bordro-details h5 { font-size: 11px; font-weight: 700; color: #0f172a; } .bordro-details p { font-size: 9px; color: #64748b; } .bordro-value { font-size: 11px; font-weight: 700; color: #0f172a; } .bordro-minus { color: #dc2626; } .calc-note { font-size: 11px; color: #64748b; line-height: 1.5; } /* ═══════════════════════════════════════════════════════════════ UTILITY & COMPONENT CLASSES — INLINE STYLE'LARDAN TAŞINDI ═══════════════════════════════════════════════════════════════ */ /* ── Yazı Tipleri ─────────────────────────────────────────────── */ .txt-2xs-pale { font-size:10px; color:#94a3b8; } .txt-xs-pale { font-size:11px; color:#94a3b8; } .txt-xs-muted { font-size:11px; color:#64748b; } .txt-sm-muted { font-size:12px; color:#64748b; } .txt-sm-strong { font-size:13px; font-weight:700; color:#1e293b; } .txt-md-strong { font-size:15px; font-weight:700; color:#1e293b; } .txt-sm-value { font-size:13px; font-weight:500; color:#1e293b; word-break:break-all; } .txt-link-blue { font-size:11px; font-weight:600; color:#2563eb; text-decoration:none; } .txt-link-blue:hover { text-decoration:underline; } .txt-link-red { font-size:11px; font-weight:600; color:#ef4444; text-decoration:none; } /* ── Layout Yardımcılar ───────────────────────────────────────── */ .flex-1-min0 { flex:1; min-width:0; } .top-bar-spacer { width:44px; flex-shrink:0; } .img-cover-full { width:100%; height:100%; object-fit:cover; display:block; } .d-flex-center { display:flex; align-items:center; justify-content:center; } .d-flex-between { display:flex; align-items:center; justify-content:space-between; } .d-flex-gap8 { display:flex; align-items:center; gap:8px; } .d-flex-gap10 { display:flex; align-items:center; gap:10px; } /* ── Bölüm Başlığı (küçük) ────────────────────────────────────── */ .section-mini-header { display: flex; align-items: center; justify-content: space-between; margin: 12px 0 6px; } .section-mini-title { font-size: 12px; font-weight: 700; color: #374151; letter-spacing: .5px; } /* ── Info Row (detay satırları) ───────────────────────────────── */ .info-row { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-bottom: 1px solid #f1f5f9; } .info-row:last-of-type { border-bottom: none; } .info-icon { font-size: 12px; color: #94a3b8; margin-top: 2px; flex-shrink: 0; width: 14px; text-align: center; } .info-body { flex: 1; min-width: 0; } .info-label { font-size: 10px; color: #94a3b8; font-weight: 600; letter-spacing: .3px; } .info-value { font-size: 13px; color: #1e293b; font-weight: 500; word-break: break-all; } /* ── Üye Hero Kartı (Profil başlık) ──────────────────────────── */ .uye-hero-card { background: linear-gradient(135deg, #1e3a5f, #0f2344); border-radius: 20px; padding: 20px; margin-bottom: 16px; text-align: center; } .uye-hero-avatar { width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,.15); display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 700; color: #fff; margin: 0 auto 10px; } .uye-hero-name { color: #fff; font-size: 17px; font-weight: 700; margin-bottom: 3px; } .uye-hero-unvan { color: #93c5fd; font-size: 12px; margin-bottom: 12px; } .uye-hero-stats { display: flex; justify-content: center; gap: 24px; } .uye-hero-stat { text-align: center; } .uye-stat-label { color: #93c5fd; font-size: 10px; font-weight: 600; letter-spacing: .5px; margin-bottom: 2px; } .uye-stat-value { color: #fff; font-size: 14px; font-weight: 700; } /* ── Liste Satırı Avatar (yuvarlak ikon) ──────────────────────── */ .list-avatar { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 14px; } .list-avatar--purple { background: #f3e8ff; color: #7c3aed; } .list-avatar--red { background: #fef2f2; color: #dc2626; } .list-avatar--teal { background: #ecfeff; color: #0891b2; } .list-avatar--green { background: #f0fdf4; color: #16a34a; } .list-avatar--blue { background: #eff6ff; color: #2563eb; } .list-avatar--amber { background: #fffbeb; color: #d97706; } .list-avatar--slate { background: #f1f5f9; color: #475569; } /* ── Mini Rozet ──────────────────────────────────────────────── */ .mini-badge { font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 20px; flex-shrink: 0; display: inline-block; } .mini-badge--green { background: #ecfdf5; color: #047857; } .mini-badge--amber { background: #fef9c3; color: #92400e; } .mini-badge--blue { background: #eff6ff; color: #1d4ed8; } .mini-badge--red { background: #fef2f2; color: #b91c1c; } .mini-badge--slate { background: #f1f5f9; color: #475569; } /* ── Boş Durum (feed-card içinde) ────────────────────────────── */ .feed-card-empty { text-align: center; color: #94a3b8; font-size: 12px; padding: 4px 0; } .feed-card-empty i { display: block; font-size: 20px; margin-bottom: 6px; } /* ── SMS / Branch İstatistik Grid ────────────────────────────── */ .sms-stat-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; } .sms-stat-grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin-bottom: 16px; } .sms-stat-box { border-radius: 12px; padding: 12px 8px; text-align: center; } .sms-stat-box-lg { border-radius: 14px; padding: 16px; text-align: center; } .sms-stat-box--green { background: #f0fdf4; } .sms-stat-box--red { background: #fef2f2; } .sms-stat-box--amber { background: #fffbeb; } .sms-stat-box--blue { background: #eff6ff; } .sms-stat-val-lg { font-size: 28px; font-weight: 800; } .sms-stat-val-sm { font-size: 20px; font-weight: 800; } .sms-stat-val--green { color: #16a34a; } .sms-stat-val--red { color: #dc2626; } .sms-stat-val--amber { color: #d97706; } .sms-stat-val--blue { color: #2563eb; } .sms-stat-lbl { font-size: 11px; font-weight: 600; margin-top: 4px; } .sms-stat-lbl--green { color: #15803d; } .sms-stat-lbl--red { color: #b91c1c; } .sms-stat-lbl--amber { color: #b45309; } .sms-stat-lbl--blue { color: #1d4ed8; } /* ── SMS İlerleme Çubuğu ─────────────────────────────────────── */ .sms-progress-wrap { background: #fff; border-radius: 12px; padding: 12px 14px; margin-bottom: 16px; border: 1px solid #e2e8f0; } .sms-progress-header { display: flex; justify-content: space-between; font-size: 11px; color: #64748b; margin-bottom: 6px; } .sms-progress-pct { font-weight: 700; color: #16a34a; } .sms-progress-bar-bg { height: 8px; background: #e2e8f0; border-radius: 99px; overflow: hidden; } .sms-progress-bar-fill { height: 100%; background: linear-gradient(90deg, #16a34a, #4ade80); border-radius: 99px; } /* ── SMS Log Kartı ───────────────────────────────────────────── */ .sms-log-card { background: #fff; border-radius: 14px; padding: 14px; margin-bottom: 8px; border: 1px solid #e2e8f0; } .sms-log-card--success { border-color: #d1fae5; } .sms-log-card--error { border-color: #fecaca; } .sms-log-card--pending { border-color: #e2e8f0; } .sms-log-header { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 8px; } .sms-log-tur-icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 14px; } .sms-log-body { flex: 1; min-width: 0; } .sms-log-badges { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; } .sms-log-preview { font-size: 12px; color: #475569; background: #f8fafc; border-radius: 8px; padding: 8px 10px; line-height: 1.6; margin-bottom: 8px; } .sms-log-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .sms-log-meta-item { font-size: 10px; color: #94a3b8; } .sms-log-error { margin-top: 8px; background: #fff5f5; border-left: 3px solid #f87171; border-radius: 0 8px 8px 0; padding: 8px 10px; } .sms-log-error-title { font-size: 10px; font-weight: 700; color: #dc2626; margin-bottom: 2px; } .sms-log-error-text { font-size: 11px; color: #b91c1c; word-break: break-all; } .sms-durum-badge { font-size: 10px; padding: 3px 9px; border-radius: 99px; font-weight: 700; } .sms-durum-badge--success { background: #dcfce7; color: #16a34a; } .sms-durum-badge--error { background: #fee2e2; color: #dc2626; } .sms-durum-badge--pending { background: #fef3c7; color: #d97706; } .sms-ref-badge, .sms-deneme-badge { font-size: 10px; padding: 1px 6px; border-radius: 99px; } .sms-ref-badge { color: #64748b; background: #f1f5f9; } .sms-deneme-badge { color: #d97706; background: #fffbeb; } /* ── SMS Son Gönderimler Liste Satırı ────────────────────────── */ .sms-recent-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid #f8fafc; } .sms-recent-row:last-child { border-bottom: none; } .sms-recent-icon { width: 32px; height: 32px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 12px; } .sms-recent-name { font-size: 12px; font-weight: 600; color: #1e293b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sms-recent-time { font-size: 10px; color: #94a3b8; } /* ── SMS Kart Bölümü (beyaz kart başlıkları) ─────────────────── */ .sms-panel-card { background: #fff; border-radius: 14px; padding: 14px 16px; margin-bottom: 20px; border: 1px solid #e2e8f0; } .sms-panel-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .sms-panel-card-title { font-size: 12px; font-weight: 700; color: #64748b; } /* ── SMS Trend Grafiği ───────────────────────────────────────── */ .sms-trend-chart { display: flex; align-items: flex-end; gap: 4px; height: 60px; } .sms-trend-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; height: 100%; } .sms-trend-count { font-size: 9px; color: #94a3b8; font-weight: 600; min-height: 12px; } .sms-trend-bar-wrap { flex: 1; width: 100%; display: flex; align-items: flex-end; } .sms-trend-bar { width: 100%; border-radius: 4px 4px 0 0; transition: height .3s; } .sms-trend-bar--active { background: #2563eb; } .sms-trend-bar--empty { background: #e2e8f0; } .sms-trend-date { font-size: 9px; color: #94a3b8; } /* ── SMS Menü Link Kartları (index sayfası) ──────────────────── */ .sms-menu-link { display: flex; align-items: center; gap: 14px; background: #fff; border-radius: 14px; padding: 16px; text-decoration: none; border: 1px solid #e2e8f0; } .sms-menu-link-dark { display: flex; align-items: center; gap: 14px; border-radius: 14px; padding: 18px; text-decoration: none; } .sms-menu-link-dark--slate { background: linear-gradient(135deg, #1e293b, #334155); } .sms-menu-link-dark--teal { background: linear-gradient(135deg, #0f766e, #0ea5a4); border: 1px solid #0d9488; } .sms-menu-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 20px; } .sms-menu-icon--blue { background: #eff6ff; color: #2563eb; } .sms-menu-icon--green { background: #f0fdf4; color: #16a34a; } .sms-menu-icon--amber { background: #fffbeb; color: #f59e0b; } .sms-menu-icon--purple { background: #faf5ff; color: #7c3aed; } .sms-menu-icon--dark { background: rgba(255,255,255,.12); color: #fff; } .sms-menu-icon--teal { background: rgba(255,255,255,.16); color: #fff; } .sms-menu-body { flex: 1; } .sms-menu-title { font-size: 14px; font-weight: 700; color: #1e293b; } .sms-menu-title--white { font-size: 14px; font-weight: 700; color: #fff; } .sms-menu-sub { font-size: 12px; color: #64748b; } .sms-menu-sub--dark { font-size: 12px; color: #94a3b8; margin-top: 2px; } .sms-menu-sub--teal { font-size: 12px; color: #ccfbf1; margin-top: 2px; } .sms-chevron { color: #cbd5e1; } .sms-chevron--dark { color: #475569; } .sms-chevron--teal { color: #99f6e4; } /* ── Circular SVG Progress ────────────────────────────────────── */ .sms-circle-wrap { position: relative; width: 72px; height: 72px; margin: 0 auto 8px; } .sms-circle-svg { width: 72px; height: 72px; transform: rotate(-90deg); } .sms-circle-pct { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 800; color: #1e293b; } /* ── Tur İstatistik Satırı (bu ay bölümü) ────────────────────── */ .sms-tur-row { display: flex; justify-content: space-between; font-size: 10px; color: #94a3b8; padding: 2px 0; } .sms-tur-val { font-weight: 700; color: #475569; } /* ── Filtre Satırı ───────────────────────────────────────────── */ .gecmis-filtre-row { display: flex; gap: 8px; } .gecmis-filtre-select { flex: 1; height: 38px; font-size: 12px; border-radius: 10px; border: 1px solid #e2e8f0; padding: 0 8px; } .gecmis-filtre-meta { display: flex; align-items: center; justify-content: space-between; } .gecmis-filtre-count { font-size: 11px; color: #64748b; } .gecmis-filtre-hint { font-size: 10px; color: #cbd5e1; } /* ── Özel Gün / Toggle / Log ─────────────────────────────────── */ .stat-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 16px; } .stat-box-3 { border-radius: 12px; padding: 12px; text-align: center; } .stat-box-3--amber { background: linear-gradient(135deg,#fef3c7,#fffbeb); border: 1px solid #fde68a; } .stat-icon-lg { font-size: 18px; display: block; margin-bottom: 4px; } .stat-val-xl { font-size: 20px; font-weight: 800; } .stat-lbl-2xs { font-size: 10px; font-weight: 600; margin-top: 2px; } .status-band { display: flex; align-items: center; gap: 10px; border-radius: 12px; padding: 12px 14px; margin-bottom: 16px; border: 1px solid; } .status-band--green { background: #f0fdf4; border-color: #bbf7d0; } .status-band--neutral { background: #f8fafc; border-color: #e2e8f0; } .status-band-icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .status-band-icon--green { background: #16a34a; color: #fff; } .status-band-icon--neutral { background: #94a3b8; color: #fff; } .status-band-title--green { font-size: 13px; font-weight: 700; color: #15803d; } .status-band-title--neutral { font-size: 13px; font-weight: 700; color: #475569; } .status-band-sub--green { font-size: 11px; color: #16a34a; margin-top: 2px; } .status-band-sub--neutral { font-size: 11px; color: #94a3b8; margin-top: 2px; } .info-box { display: flex; align-items: center; gap: 8px; border-radius: 10px; padding: 10px 12px; margin-bottom: 12px; } .info-box--blue { background: #eff6ff; } .info-box--amber { background: #fffbeb; border: 1px solid #fde68a; } .info-box--red { background: #fef2f2; border: 1px solid #fecaca; } .info-box-text--blue { font-size: 12px; color: #1d4ed8; } .info-box-text--red { font-size: 12px; color: #b91c1c; font-weight: 600; } .preview-box { background: #fffbeb; border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; border: 1px solid #fde68a; } .preview-box-title { font-size: 10px; font-weight: 700; color: #92400e; margin-bottom: 6px; letter-spacing: .5px; } .preview-box-text { font-size: 13px; color: #1e293b; line-height: 1.6; white-space: pre-wrap; } .preview-box-meta { font-size: 11px; color: #64748b; margin-top: 6px; } .log-entry-row { padding: 8px 4px; border-bottom: 1px solid #f1f5f9; display: flex; justify-content: space-between; align-items: center; } .toggle-label-inner { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; padding: 8px 10px; border: 1px solid #e2e8f0; border-radius: 10px; background: #f8fafc; } .toggle-label-text { font-size: 12px; color: #334155; line-height: 1.4; } .toggle-label-hint { display: block; font-size: 11px; color: #94a3b8; margin-top: 2px; } /* ── Toplu Önizleme Tablosu ──────────────────────────────────── */ .preview-table-wrap { overflow-x: auto; background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; } .preview-table { width: 100%; border-collapse: collapse; min-width: 980px; } .preview-table thead tr { background: #f8fafc; border-bottom: 1px solid #e2e8f0; } .preview-th { text-align: left; padding: 12px 14px; font-size: 12px; color: #475569; } .preview-td { padding: 12px 14px; } .preview-td--num { padding: 12px 14px; font-size: 12px; color: #64748b; white-space: nowrap; } .preview-td--fw { padding: 12px 14px; white-space: nowrap; } .preview-td--warn { padding: 12px 14px; font-size: 12px; color: #b45309; min-width: 240px; } .preview-td--error { padding: 12px 14px; font-size: 12px; color: #b91c1c; min-width: 260px; } .preview-tr--clean { border-bottom: 1px solid #eef2f7; background: #fff; } .preview-tr--error { border-bottom: 1px solid #eef2f7; background: #fff7f7; } .preview-row-name { font-size: 13px; font-weight: 700; color: #1e293b; } .preview-row-hint { font-size: 11px; color: #94a3b8; margin-top: 2px; } .preview-cell-txt { font-size: 12px; color: #334155; white-space: nowrap; } .preview-status-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; padding: 4px 8px; border-radius: 999px; font-weight: 700; } .preview-status-badge--ok { background: #dcfce7; color: #16a34a; } .preview-status-badge--error { background: #fee2e2; color: #dc2626; } .preview-uyari-badge { display: inline-flex; align-items: center; gap: 4px; background: #fffbeb; color: #b45309; border: 1px solid #fde68a; border-radius: 999px; padding: 3px 8px; font-size: 10px; font-weight: 700; } .preview-header-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; } .preview-warn-box { background: #fffbeb; border: 1px solid #fde68a; border-radius: 14px; padding: 12px 14px; margin-bottom: 16px; display: flex; align-items: flex-start; gap: 10px; } .preview-warn-title { font-size: 13px; font-weight: 700; color: #92400e; } .preview-warn-text { font-size: 12px; color: #b45309; line-height: 1.5; margin-top: 3px; } .preview-error-box { background: #fef2f2; border-radius: 14px; padding: 16px; margin-bottom: 16px; text-align: center; } /* ── İletişim / Konuşma Kartları ─────────────────────────────── */ .new-request-card { background: linear-gradient(135deg, #1e293b, #0f172a); border-radius: 20px; padding: 20px; margin-bottom: 20px; } .new-request-header { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } .new-request-icon { width: 36px; height: 36px; background: rgba(185,28,28,0.2); border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .new-request-icon i { color: #fca5a5; font-size: 14px; } .new-request-title { color: #f1f5f9; font-size: 13px; font-weight: 700; } .new-request-sub { color: #94a3b8; font-size: 11px; } .new-request-form { display: flex; flex-direction: column; gap: 10px; } .new-request-input { width: 100%; padding: 10px 14px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.08); color: #f1f5f9; font-size: 13px; outline: none; } .new-request-textarea { width: 100%; padding: 10px 14px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.08); color: #f1f5f9; font-size: 13px; outline: none; resize: none; } .new-request-submit { background: var(--color-primary, #b91c1c); color: #fff; border: none; border-radius: 10px; padding: 10px 20px; font-size: 13px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; } .new-request-error { color: #fca5a5; font-size: 11px; margin-top: 4px; } /* ═══════════════════════════════════════════════════ SOSYAL TESİSLER — Liste & Detay ═══════════════════════════════════════════════════ */ /* İl filtre select */ .sosyal-il-select { border: 1.5px solid #e2e8f0; border-radius: 10px; padding: 0 10px; height: 42px; font-size: 13px; background: #fff; color: #334155; cursor: pointer; min-width: 110px; } /* Tesis kartı */ .sosyal-tesis-list { display: flex; flex-direction: column; gap: 14px; padding: 4px 0 20px; } .sosyal-tesis-card { background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); } /* Kart görsel alanı */ .sosyal-tesis-img-wrap { position: relative; width: 100%; height: 160px; overflow: hidden; cursor: pointer; } .sosyal-tesis-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s; } .sosyal-tesis-img-wrap:active .sosyal-tesis-img { transform: scale(1.03); } .sosyal-tesis-img-placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, #e2e8f0, #f8fafc); display: flex; align-items: center; justify-content: center; font-size: 42px; color: #cbd5e1; } /* İndirim badge — üst sol */ .sosyal-indirim-badge { position: absolute; top: 10px; left: 10px; background: #dc2626; color: #fff; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 20px; letter-spacing: 0.3px; } /* Fiyat chip — alt sağ */ .sosyal-fiyat-chip { position: absolute; bottom: 10px; right: 10px; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 20px; backdrop-filter: blur(4px); } /* Kart içerik */ .sosyal-tesis-body { padding: 12px 14px 8px; cursor: pointer; } .sosyal-tesis-title { font-size: 15px; font-weight: 700; color: #1e293b; line-height: 1.3; margin-bottom: 4px; } .sosyal-tesis-lokasyon { font-size: 12px; color: #64748b; display: flex; align-items: center; gap: 5px; margin-bottom: 8px; } .sosyal-tesis-lokasyon i { color: var(--color-primary, #b91c1c); } /* Özellik satırı */ .sosyal-ozellik-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; } .sosyal-ozellik-tag { background: #f1f5f9; color: #475569; font-size: 11px; font-weight: 500; padding: 3px 9px; border-radius: 20px; display: inline-flex; align-items: center; gap: 4px; } .sosyal-ozellik-tag i { color: var(--color-primary, #b91c1c); font-size: 9px; } /* Aksiyon butonları */ .sosyal-tesis-actions { display: flex; gap: 6px; padding: 8px 14px 12px; border-top: 1px solid #f1f5f9; } .sosyal-action-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px; padding: 9px 6px; border-radius: 10px; font-size: 12px; font-weight: 600; text-decoration: none; border: 1.5px solid #e2e8f0; transition: all 0.15s; cursor: pointer; } .sosyal-action-btn--ara { color: #1e293b; background: #f8fafc; } .sosyal-action-btn--ara:active { background: #e2e8f0; } .sosyal-action-btn--harita { color: #0284c7; background: #f0f9ff; border-color: #bae6fd; } .sosyal-action-btn--rezerve { color: #fff; background: var(--color-primary, #b91c1c); border-color: transparent; box-shadow: 0 3px 10px rgba(185, 28, 28, 0.25); } /* ── Detay Sayfası ── */ .sosyal-hero-wrap { position: relative; width: 100%; height: 200px; overflow: hidden; border-radius: 0 0 20px 20px; margin-bottom: 14px; } .sosyal-hero-img { width: 100%; height: 100%; object-fit: cover; display: block; } .sosyal-hero-placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, #e2e8f0, #f8fafc); display: flex; align-items: center; justify-content: center; font-size: 56px; color: #cbd5e1; } .sosyal-detay-baslik-wrap { padding: 0 16px 10px; } .sosyal-detay-ad { font-size: 18px; font-weight: 700; color: #1e293b; line-height: 1.3; margin-bottom: 5px; } .sosyal-detay-adres { font-size: 12px; color: #64748b; display: flex; align-items: flex-start; gap: 5px; } .sosyal-detay-adres i { color: var(--color-primary, #b91c1c); margin-top: 2px; flex-shrink: 0; } /* Fiyat kartı */ .sosyal-fiyat-card { margin: 0 0 10px; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 12px; padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; gap: 8px; } .sosyal-fiyat-etiket { font-size: 13px; color: #15803d; font-weight: 500; } .sosyal-fiyat-tutar { font-size: 17px; font-weight: 800; } /* ──────── WhatsApp Buton Stili ──────── */ .btn-whatsapp, a[href^="https://wa.me/"] { background: #e7f5f1 !important; color: #25D366 !important; border-color: #b8e6dd !important; text-decoration: none; transition: all 0.2s ease; } .btn-whatsapp:hover, a[href^="https://wa.me/"]:hover { background: #d0ebe4 !important; color: #1fa85d !important; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(37, 211, 102, 0.25); } .btn-whatsapp:active, a[href^="https://wa.me/"]:active { transform: translateY(0); color: #14532d; } /* Bilgi kutuları */ .sosyal-info-box { background: #fff; border: 1px solid #f1f5f9; border-radius: 14px; padding: 14px 16px; margin-bottom: 10px; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05); } .sosyal-info-box-baslik { font-size: 12px; font-weight: 700; color: #334155; letter-spacing: 0.5px; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; } .sosyal-info-box-baslik i { color: var(--color-primary, #b91c1c); } .sosyal-info-box-icerik { font-size: 13px; color: #475569; line-height: 1.65; margin: 0; } /* İletişim satırları */ .sosyal-iletisim-satir { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: #475569; padding: 5px 0; border-bottom: 1px solid #f8fafc; } .sosyal-iletisim-satir:last-child { border-bottom: none; } .sosyal-iletisim-satir i { margin-top: 2px; flex-shrink: 0; width: 16px; text-align: center; } .konusma-card { background: #fff; border-radius: 18px; padding: 14px; border: 1px solid #e2e8f0; } .konusma-card--unread { border-color: #fecaca; border-left: 4px solid var(--color-primary, #b91c1c); } .konusma-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 8px; } .konusma-icon-col { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; } .konusma-icon { width: 42px; height: 42px; border-radius: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .konusma-meta { min-width: 0; flex: 1; } .konusma-title { font-size: 14px; font-weight: 700; color: #1e293b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .konusma-time { font-size: 11px; color: #94a3b8; } .konusma-badges { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; } .konusma-unread-dot { min-width: 20px; height: 20px; padding: 0 6px; background: var(--color-primary, #b91c1c); color: #fff; border-radius: 20px; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; } .konusma-preview { font-size: 12px; color: #475569; line-height: 1.5; margin-bottom: 10px; } .konusma-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 8px; border-top: 1px solid #f1f5f9; } .konusma-footer-label { font-size: 11px; color: #64748b; display: flex; align-items: center; gap: 6px; } .konusma-footer-label i { color: #94a3b8; font-size: 10px; } .konusma-open-link { font-size: 12px; font-weight: 700; color: #2563eb; } .konusma-empty { background: #fff; border: 1px solid #e2e8f0; border-radius: 18px; padding: 18px; text-align: center; } .konusma-empty-icon { width: 46px; height: 46px; border-radius: 14px; background: #f8fafc; color: #94a3b8; display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; } .konusma-empty-title { font-size: 14px; font-weight: 700; color: #1e293b; margin-bottom: 4px; } .konusma-empty-text { font-size: 12px; color: #64748b; line-height: 1.5; } /* ── Şube İletişim Bilgileri Satırı ──────────────────────────── */ .contact-row { display: flex; align-items: flex-start; gap: 12px; } .contact-row + .contact-row { border-top: 1px dashed #e2e8f0; padding-top: 12px; margin-top: 0; } .contact-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .contact-icon--blue { background: #eff6ff; color: #2563eb; } .contact-icon--amber { background: #fef3c7; color: #d97706; } .contact-icon--green { background: #f0fdf4; color: #16a34a; } .contact-icon--indigo { background: #eef2ff; color: #4f46e5; } .contact-icon--teal { background: #f0fdfa; color: #0f766e; } .contact-icon--purple { background: #faf5ff; color: #7c3aed; } .contact-label { color: #64748b; font-size: 12px; } .contact-link-blue { color: #2563eb; text-decoration: none; font-weight: 600; } .contact-link-green { color: #16a34a; text-decoration: none; font-weight: 600; } /* ── SMS Ayarlar küçük yardımcılar ──────────────────────────── */ .form-hint { font-size: 11px; color: #94a3b8; margin-top: 4px; } .txt-green-sm { font-size: 12px; color: #15803d; font-weight: 600; } .txt-red-sm { font-size: 12px; color: #b91c1c; font-weight: 600; } /* ── Kullanıcı Limiti İlerleme Barı ─────────────────────────── */ .limit-bar-wrap { height: 6px; background: #f1f5f9; border-radius: 99px; margin-top: 10px; overflow: hidden; } .limit-bar-fill { height: 6px; border-radius: 99px; transition: width .3s; } .limit-bar-fill--ok { background: #16a34a; } .limit-bar-fill--red { background: #b91c1c; } /* ── Destek / Chat Baloncukları ──────────────────────────────── */ .chat-thread { display: flex; flex-direction: column; gap: 10px; } .chat-msg-wrap { display: flex; flex-direction: column; } .chat-msg-wrap--uye { align-items: flex-start; } .chat-msg-wrap--sube { align-items: flex-end; } .chat-msg-sender { font-size: 10px; color: #64748b; margin-bottom: 4px; font-weight: 600; display: flex; align-items: center; gap: 4px; } .chat-msg-sender--sube { flex-direction: row-reverse; } .chat-sender-avatar { width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 8px; font-weight: 700; color: #fff; } .chat-bubble { max-width: 80%; padding: 10px 14px; border-radius: 16px; font-size: 13px; line-height: 1.6; } .chat-bubble--uye { background: #f1f5f9; color: #1e293b; border-bottom-left-radius: 4px; border: 1px solid #e2e8f0; } .chat-bubble--sube { background: #1e293b; color: #f1f5f9; border-bottom-right-radius: 4px; } .chat-msg-time { font-size: 10px; color: #94a3b8; margin-top: 4px; display: flex; align-items: center; gap: 4px; } .chat-msg-time--sube { flex-direction: row-reverse; } /* ── Üye Info Kartı (destek/show) ────────────────────────────── */ .member-info-card { background: #fff; border-radius: 16px; padding: 14px; margin-bottom: 14px; border: 1px solid #e2e8f0; } .member-info-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } .member-info-avatar { width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; color: #fff; flex-shrink: 0; } .member-info-konu-box { background: #f8fafc; border-radius: 10px; padding: 10px 12px; border-left: 3px solid #e2e8f0; } .member-info-konu-title { font-size: 10px; font-weight: 700; color: #94a3b8; letter-spacing: .5px; margin-bottom: 3px; } .member-info-konu-text { font-size: 14px; font-weight: 600; color: #1e293b; } .member-info-time { font-size: 10px; color: #94a3b8; margin-top: 8px; text-align: right; } /* ── Kilitli Konuşma Bandı ───────────────────────────────────── */ .conversation-closed { display: flex; align-items: center; justify-content: center; gap: 8px; background: #f8fafc; border-radius: 12px; padding: 14px; border: 1px solid #e2e8f0; } .conversation-closed-text { font-size: 13px; color: #64748b; font-weight: 600; } /* ── SMS Özet Hero Kartı (yakin, toplu vb) ───────────────────── */ .sms-hero-card { border-radius: 16px; padding: 16px 18px; margin-bottom: 16px; display: flex; align-items: center; gap: 14px; } .sms-hero-card--purple { background: linear-gradient(135deg, #7c3aed, #4f46e5); } .sms-hero-card--blue { background: linear-gradient(135deg, #1d4ed8, #2563eb); } .sms-hero-icon { width: 48px; height: 48px; background: rgba(255,255,255,.15); border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 20px; color: #fff; } .sms-hero-label { font-size: 14px; font-weight: 700; color: #fff; } .sms-hero-count { font-size: 24px; font-weight: 800; color: #fff; line-height: 1.1; } .sms-hero-sub-purple { font-size: 11px; color: #c4b5fd; margin-top: 2px; } .sms-hero-sub-blue { font-size: 11px; color: #bfdbfe; margin-top: 2px; } /* ── SMS Hedef Seçim Etiketi ─────────────────────────────────── */ .sms-hedef-label { display: flex; align-items: flex-start; gap: 12px; padding: 12px; border-radius: 12px; cursor: pointer; border: 1.5px solid #e2e8f0; background: #fff; margin-bottom: 8px; transition: border-color .2s, background .2s; } .sms-hedef-label.is-active { border-color: #7c3aed; background: #faf5ff; } .sms-hedef-label.is-active-blue { border-color: #2563eb; background: #eff6ff; } /* ── Duyuru Durum Banner ─────────────────────────────────────── */ .duyuru-status-bar { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-radius: 12px; margin-bottom: 14px; border: 1px solid; } .duyuru-status-bar--aktif { background: #f0fdf4; border-color: #bbf7d0; } .duyuru-status-bar--pasif { background: #f8fafc; border-color: #e2e8f0; } .duyuru-status-label { display: flex; align-items: center; gap: 10px; } .duyuru-status-text--aktif { font-size: 13px; font-weight: 600; color: #166534; } .duyuru-status-text--pasif { font-size: 13px; font-weight: 600; color: #475569; } .duyuru-toggle-btn { font-size: 12px; font-weight: 600; padding: 5px 14px; border-radius: 20px; border: 1.5px solid; cursor: pointer; } .duyuru-toggle-btn--pasif-yap { background: #fef9c3; color: #92400e; border-color: #fde68a; } .duyuru-toggle-btn--aktif-yap { background: #f0fdf4; color: #166534; border-color: #bbf7d0; } /* ── Dark Hero Kartı (toplu ekle vb) ───────────────────────── */ .dark-hero-card { background: linear-gradient(135deg, #1e293b, #334155); border-radius: 16px; padding: 18px; margin-bottom: 20px; color: #fff; } .dark-hero-row { display: flex; gap: 12px; align-items: flex-start; } .dark-hero-icon { width: 44px; height: 44px; background: rgba(255,255,255,.12); border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 20px; color: #4ade80; } .dark-hero-title { font-size: 14px; font-weight: 700; margin-bottom: 4px; } .dark-hero-body { font-size: 12px; color: #94a3b8; line-height: 1.6; } /* ── İndirme Bağlantısı Kartı ──────────────────────────────── */ .download-link-card { display: flex; align-items: center; gap: 12px; background: #f0fdf4; border: 1.5px solid #bbf7d0; border-radius: 14px; padding: 14px 16px; text-decoration: none; margin-bottom: 20px; } .download-link-icon { width: 40px; height: 40px; background: #dcfce7; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #16a34a; font-size: 16px; } .download-link-title { font-size: 13px; font-weight: 700; color: #15803d; } .download-link-sub { font-size: 11px; color: #16a34a; } /* ── Kural Listesi ─────────────────────────────────────────── */ .rule-card { background: #fff; border-radius: 14px; padding: 14px 16px; margin-bottom: 20px; border: 1px solid #e2e8f0; } .rule-card-title { font-size: 12px; font-weight: 700; color: #64748b; margin-bottom: 10px; } .rule-list { display: flex; flex-direction: column; gap: 7px; } .rule-item { display: flex; align-items: flex-start; gap: 8px; } .rule-item-text { font-size: 12px; color: #475569; } /* ── Dosya Drop Zone ────────────────────────────────────────── */ .drop-zone { border: 2px dashed #cbd5e1; border-radius: 16px; padding: 32px 20px; text-align: center; background: #f8fafc; cursor: pointer; transition: all .2s; margin-bottom: 16px; } .drop-zone-icon { font-size: 40px; color: #94a3b8; margin-bottom: 10px; display: block; } .drop-zone-title { font-size: 14px; font-weight: 600; color: #374151; } .drop-zone-sub { font-size: 12px; color: #94a3b8; margin-top: 4px; } /* ── Dosya Önizleme ─────────────────────────────────────────── */ .file-preview-card { background: #f0fdf4; border: 1.5px solid #bbf7d0; border-radius: 12px; padding: 12px 14px; margin-bottom: 16px; display: none; align-items: center; gap: 10px; } .file-preview-name { font-size: 13px; font-weight: 600; color: #15803d; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .file-preview-size { font-size: 11px; color: #16a34a; } .file-clear-btn { background: none; border: none; color: #dc2626; cursor: pointer; font-size: 16px; padding: 0 4px; } /* ── Destek / Talep Listesi ─────────────────────────────────── */ .talep-card { background: #fff; border-radius: 16px; padding: 14px; margin-bottom: 10px; border: 1px solid #e2e8f0; } .talep-card--unread { border-color: #fecaca; border-left: 3px solid #b91c1c; } .talep-top-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .talep-uye-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .talep-konu { font-size: 14px; font-weight: 600; color: #1e293b; margin-bottom: 10px; line-height: 1.4; } .talep-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 8px; border-top: 1px solid #f1f5f9; } .talep-isyeri { font-size: 11px; color: #64748b; display: flex; align-items: center; gap: 5px; } .talep-detay-btn { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: #2563eb; text-decoration: none; padding: 5px 12px; border-radius: 8px; background: #eff6ff; border: 1px solid #bfdbfe; } .talep-empty { text-align: center; padding: 40px 20px; background: #fff; border-radius: 16px; border: 1px solid #e2e8f0; } .talep-empty-icon { font-size: 32px; color: #cbd5e1; display: block; margin-bottom: 10px; } .talep-empty-text { font-size: 14px; font-weight: 600; color: #64748b; margin-bottom: 4px; } .talep-empty-link { font-size: 12px; color: #2563eb; text-decoration: none; } /* ── Bildirim Rozet (header-right) ─────────────────────────── */ .notif-btn-red { background: #fef2f2; color: #b91c1c; border-color: #fecaca; position: relative; cursor: default; } .notif-badge { position: absolute; top: -5px; right: -5px; background: #b91c1c; color: #fff; border-radius: 50%; width: 16px; height: 16px; font-size: 9px; font-weight: 700; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; } /* ── Filtre Chip Row ────────────────────────────────────────── */ .filtre-chips { display: flex; gap: 8px; margin-bottom: 14px; overflow-x: auto; padding-bottom: 2px; } .filtre-chip-link { display: flex; flex-direction: column; align-items: center; padding: 10px 14px; border-radius: 12px; text-decoration: none; flex-shrink: 0; border: 1.5px solid #e2e8f0; background: #fff; } /* ── Ziyaret Show Sayfası ───────────────────────────────────── */ .ziyaret-hero-card { background: linear-gradient(135deg, #1e3a5f, #0f2544); border-radius: 20px; padding: 20px; margin-bottom: 20px; color: #f1f5f9; } .ziyaret-hero-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: #94a3b8; margin-bottom: 6px; } .ziyaret-hero-name { font-size: 20px; font-weight: 700; margin-bottom: 4px; } .ziyaret-hero-sub { font-size: 13px; color: #94a3b8; } .ziyaret-hero-chips { margin-top: 12px; display: flex; gap: 10px; flex-wrap: wrap; } .ziyaret-hero-chip { background: rgba(255,255,255,0.12); border-radius: 8px; padding: 4px 12px; font-size: 12px; font-weight: 600; } /* ── Ziyaret Detay Kartı ────────────────────────────────────── */ .ziyaret-detail-card { background: #fff; border-radius: 14px; padding: 16px; margin-bottom: 12px; box-shadow: 0 1px 3px rgba(0,0,0,.07); } .ziyaret-detail-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: #64748b; margin-bottom: 12px; } .ziyaret-detail-row-list { display: flex; flex-direction: column; gap: 8px; } .ziyaret-detail-row { display: flex; justify-content: space-between; align-items: center; } .ziyaret-detail-lbl { font-size: 12px; color: #64748b; } .ziyaret-detail-val { font-size: 13px; font-weight: 600; color: #1e293b; } .ziyaret-detail-link { font-size: 13px; font-weight: 600; color: #2563eb; text-decoration: none; } .ziyaret-uye-link { font-size: 12px; font-weight: 600; color: #7c3aed; text-decoration: none; margin-top: 4px; padding-top: 8px; border-top: 1px solid #f1f5f9; display: block; } .ziyaret-note-text { font-size: 14px; color: #374151; line-height: 1.6; margin: 0; } /* ── Ziyaret Kayıt Info & Sil ───────────────────────────────── */ .ziyaret-meta-bar { background: #f8fafc; border-radius: 14px; padding: 14px 16px; margin-bottom: 16px; font-size: 12px; color: #64748b; } .btn-danger-outline { width: 100%; padding: 13px; border-radius: 12px; background: #fef2f2; border: 1.5px solid #fecaca; color: #b91c1c; font-size: 14px; font-weight: 600; cursor: pointer; } /* ── Modul Menü Kart (maas/index vb menu sayfaları) ─────────── */ .modul-menu-list { display: flex; flex-direction: column; gap: 12px; } .modul-menu-card { text-decoration: none; display: flex; align-items: center; gap: 16px; padding: 18px 16px; } .modul-menu-icon-xl { width: 52px; height: 52px; font-size: 22px; flex-shrink: 0; border-radius: 14px; display: flex; align-items: center; justify-content: center; } .modul-menu-icon-xl--blue { background: #eff6ff; color: #2563eb; } .modul-menu-icon-xl--amber { background: #fef3c7; color: #d97706; } .modul-menu-icon-xl--cyan { background: #ecfeff; color: #0891b2; } .modul-menu-icon-xl--purple { background: #f5f3ff; color: #7c3aed; } .modul-menu-icon-xl--green { background: #f0fdf4; color: #16a34a; } .modul-menu-icon-xl--red { background: #fef2f2; color: #b91c1c; } .modul-menu-body { flex: 1; } .modul-menu-card-title { font-size: 15px; font-weight: 700; color: #1e293b; } .modul-menu-card-sub { font-size: 12px; color: #64748b; margin-top: 2px; } .modul-menu-stat { text-align: right; } .modul-menu-stat-num { font-size: 18px; font-weight: 800; } .modul-menu-stat-lbl { font-size: 10px; color: #94a3b8; } .modul-menu-stat-num--blue { color: #2563eb; } .modul-menu-stat-num--amber { color: #d97706; } .modul-menu-stat-num--cyan { color: #0891b2; } .modul-menu-stat-num--purple { color: #7c3aed; } /* ── Taleplerim (member indirim kodu) ──────────────────────── */ .talep-ozet-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; } .talep-ozet-box { border-radius: 14px; padding: 14px; text-align: center; } .talep-ozet-box--green { background: #f0fdf4; } .talep-ozet-box--blue { background: #eff6ff; } .talep-ozet-num { font-size: 24px; font-weight: 800; } .talep-ozet-num--green { color: #16a34a; } .talep-ozet-num--blue { color: #2563eb; } .talep-ozet-lbl { font-size: 11px; font-weight: 600; margin-top: 3px; } .talep-ozet-lbl--green { color: #15803d; } .talep-ozet-lbl--blue { color: #1d4ed8; } /* ── İndirim Kodu Kutusu ────────────────────────────────────── */ .indirim-kod-box { border-radius: 10px; padding: 12px 14px; text-align: center; border: 1px dashed; margin-bottom: 8px; } .indirim-kod-box--active { background: #f0fdf4; border-color: #86efac; } .indirim-kod-box--expired { background: #f8fafc; border-color: #e2e8f0; } .indirim-kod-lbl { font-size: 11px; font-weight: 600; color: #64748b; margin-bottom: 4px; letter-spacing: .5px; } .indirim-kod-val { font-size: 20px; font-weight: 800; font-family: monospace; letter-spacing: 3px; } .indirim-kod-val--active { color: #15803d; } .indirim-kod-val--expired { color: #94a3b8; } /* ── Talep Başlık Satırı ────────────────────────────────────── */ .talep-item-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 8px; } .talep-item-title { font-size: 14px; font-weight: 700; color: #1e293b; margin-bottom: 2px; } .talep-item-kat { font-size: 11px; color: #64748b; } .talep-item-dates { display: flex; justify-content: space-between; font-size: 11px; color: #94a3b8; } /* ── Boş Talep Durumu ───────────────────────────────────────── */ .talep-empty-wrap { text-align: center; padding: 20px; color: #94a3b8; } .talep-empty-icon-lg { font-size: 32px; display: block; margin-bottom: 10px; color: #cbd5e1; } .btn-green-link { background: #16a34a; color: #fff; padding: 10px 20px; border-radius: 10px; font-size: 13px; font-weight: 600; text-decoration: none; display: inline-block; } /* ── Top Bar İkon Buton ─────────────────────────────────────── */ .top-bar-icon-btn { width: 44px; height: 44px; border-radius: 12px; background: #f0fdf4; display: flex; align-items: center; justify-content: center; color: #16a34a; text-decoration: none; font-size: 16px; flex-shrink: 0; } /* ── Form Kapak Görsel ────────────────────────────────────────── */ .kapak-gorsel-preview { width: 100%; max-height: 220px; object-fit: cover; border-radius: 12px; border: 1px solid #e2e8f0; } .kapak-sil-label { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #475569; margin-bottom: 12px; } /* ── Aktif/Pasif Radyo Buton Grubu ─────────────────────────── */ .durum-radio-row { display: flex; gap: 10px; } .durum-radio-label { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 10px; border: 1.5px solid; cursor: pointer; flex: 1; } .durum-radio-label--aktif { border-color: #bfdbfe; background: #eff6ff; } .durum-radio-label--pasif { border-color: #e2e8f0; background: #fff; } .durum-radio-text--aktif { font-size: 13px; font-weight: 600; color: #1e293b; } .durum-radio-text--pasif { font-size: 13px; font-weight: 600; color: #475569; } /* ── Form Alt Buton Satırı ──────────────────────────────────── */ .form-btn-row { display: flex; gap: 10px; } .form-btn-row .btn-e-devlet { flex: 1; min-height: 46px; font-size: 13px; text-decoration: none; display: flex; align-items: center; justify-content: center; } .form-btn-row .sms-send-btn { flex: 2; min-height: 46px; font-size: 14px; } /* ── Profil Hero Kartı ──────────────────────────────────────── */ .profil-hero-card { background: linear-gradient(135deg, #0f172a, #1d4ed8); border-radius: 20px; padding: 18px; color: #fff; margin-bottom: 14px; } .profil-hero-row { display: flex; align-items: flex-start; gap: 14px; } .profil-hero-logo { width: 56px; height: 56px; border-radius: 16px; background: rgba(255,255,255,.14); display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 800; flex-shrink: 0; overflow: hidden; } .profil-hero-name { font-size: 18px; font-weight: 800; line-height: 1.2; } .profil-hero-sub { font-size: 12px; color: #bfdbfe; margin-top: 3px; } .profil-hero-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .profil-hero-nav-link { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 16px; text-decoration: none; } .profil-hero-nav-icon { width: 46px; height: 46px; border-radius: 12px; background: #ede9fe; display: flex; align-items: center; justify-content: center; font-size: 18px; color: #7c3aed; flex-shrink: 0; } .profil-hero-nav-title { font-size: 14px; font-weight: 700; color: #1e293b; } .profil-hero-nav-sub { font-size: 12px; color: #64748b; margin-top: 2px; } /* ── Sayfalama Butonları ────────────────────────────────────── */ .pager-row { display: flex; justify-content: center; gap: 6px; padding: 12px 0 2px; } .pager-btn { width: 32px; height: 32px; } .pager-btn--xl { width: 34px; height: 34px; font-size: 12px; } .pager-btn--inactive { opacity: .45; } .pager-btn--active { background: #7c3aed; color: #fff; border-color: #7c3aed; } .pager-btn--blue { background: #eff6ff; color: #1d4ed8; } .pager-btn--purple { background: #ede9fe; color: #7c3aed; } .pager-btn--edit { background: #eff6ff; color: #2563eb; } /* ── Kullanıcı Listesi Header Row ───────────────────────────── */ .kullanici-list-header { display: flex; justify-content: space-between; gap: 8px; align-items: center; padding: 0 2px 10px; color: #64748b; font-size: 12px; } .kullanici-btn-row { display: flex; gap: 5px; align-items: center; } /* ── Filter Form Grid ───────────────────────────────────────── */ .filter-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; } /* ── Onizleme Hero (yakin-onizleme vb) ────────────────────── */ .preview-hero-card { background: linear-gradient(135deg, #7c3aed, #4f46e5); border-radius: 16px; padding: 18px; margin-bottom: 16px; text-align: center; } .preview-hero-label { font-size: 11px; font-weight: 700; color: #c4b5fd; letter-spacing: .8px; margin-bottom: 6px; } .preview-hero-count { font-size: 44px; font-weight: 800; color: #fff; line-height: 1; } .preview-hero-sub { font-size: 12px; color: #c4b5fd; margin-top: 4px; } /* ── Önizleme Mesaj Kutusu ─────────────────────────────────── */ .preview-mesaj-box { background: #faf5ff; border-radius: 12px; padding: 14px; font-size: 13px; color: #1e293b; line-height: 1.7; border: 1px solid #e9d5ff; white-space: pre-wrap; } .preview-sms-meta { font-size: 11px; color: #94a3b8; margin-top: 8px; display: flex; gap: 14px; } /* ── Önizleme Örnek Alıcı Satırı ────────────────────────────── */ .preview-alici-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid #f8fafc; } .preview-alici-avatar { width: 28px; height: 28px; border-radius: 50%; background: #faf5ff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 11px; color: #7c3aed; } .preview-alici-text { font-size: 12px; color: #374151; } .preview-alici-more { font-size: 11px; color: #94a3b8; padding-top: 8px; text-align: center; } /* ── Uyarı Kutusu (amber) ───────────────────────────────────── */ .uyari-box { background: #fffbeb; border: 1px solid #fde68a; border-radius: 12px; padding: 12px 14px; margin-bottom: 16px; display: flex; gap: 10px; align-items: flex-start; } .uyari-box-text { font-size: 12px; color: #92400e; line-height: 1.6; } /* ── Temsilci Listesi Satırı ────────────────────────────────── */ .temsilci-action-btn { width: 34px; height: 34px; font-size: 12px; } .temsilci-action-btn--view { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; } .temsilci-action-btn--del { background: #fef2f2; color: #b91c1c; }