/* ========================================
CSS VARIABLES & RESET
======================================== */
:root {
--color-primary: #0d1b2a;
--color-accent: #ffe371;
--color-accent-hover: #f5d842;
--color-bg-light: #e6f2ff;
--color-bg-cream: #f9f4e6;
--color-text-dark: #333;
--color-text-light: #666;
--color-border: #e1e5e9;
--color-white: #ffffff;
--color-success: #00a400;
--color-success-hover: #03c74bc4;
--color-error: #ef4444;
--color-info: #3b82f6;
--color-dark-navy: #0d1b2a;
/* Added for request management */
--font-heading: "Montserrat", sans-serif;
--font-body: "Roboto", sans-serif;
--border-radius: 8px;
--border-radius-lg: 12px;
--border-radius-xl: 20px;
--border-radius-full: 25px;
--transition: all 0.3s ease;
--shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.1);
--shadow-md: 0 8px 30px rgba(0, 0, 0, 0.15);
--shadow-lg: 0 12px 30px rgba(0, 0, 0, 0.2);
/* Added spacing variables for consistency */
--spacing-xs: 0.25rem;
--spacing-sm: 0.5rem;
--spacing-md: 1rem;
--spacing-lg: 1.5rem;
--spacing-xl: 2rem;
/* Added button sizes for touch-friendly interfaces */
--button-height: 44px;
--button-height-sm: 36px;
--button-height-lg: 52px;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: var(--color-accent);
font-family: var(--font-body);
line-height: 1.6;
color: var(--color-text-dark);
}
h1,
h2,
h3,
h4,
h5,
h6,
.nav-btn,
.language-btn,
.tab-btn,
.submit-btn,
.apply-btn,
.view-all-btn {
font-family: var(--font-heading);
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* ========================================
HEADER & NAVIGATION
======================================== */
.header {
background-color: var(--color-primary);
color: var(--color-white);
padding: 1rem 0;
position: relative;
}
.header-content {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
font-size: 2rem;
font-weight: bold;
color: var(--color-accent);
z-index: 1001;
}
.logo img {
height: 40px;
width: auto;
}
.burger-menu {
display: none;
flex-direction: column;
gap: 5px;
background: none;
border: none;
cursor: pointer;
padding: 5px;
z-index: 1001;
}
.burger-menu span {
width: 25px;
height: 3px;
background-color: var(--color-accent);
transition: var(--transition);
border-radius: 2px;
}
.burger-menu.active span:nth-child(1) {
transform: rotate(45deg) translate(8px, 8px);
}
.burger-menu.active span:nth-child(2) {
opacity: 0;
}
.burger-menu.active span:nth-child(3) {
transform: rotate(-45deg) translate(7px, -7px);
}
.nav {
display: flex;
gap: 1rem;
align-items: center;
}
/* Consolidated button styles - merged nav-btn and language-btn */
.nav-btn,
.language-btn {
background-color: var(--color-accent);
color: var(--color-primary);
border: none;
/* Reduced horizontal padding from 2rem to 1.25rem for better fit */
padding: 0.75rem 1.25rem;
border-radius: var(--border-radius);
font-weight: 600;
font-size: 1rem;
cursor: pointer;
transition: var(--transition);
position: relative;
overflow: hidden;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
white-space: nowrap;
width: 100%;
}
.nav-btn::before,
.language-btn::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 227, 113, 0.2), transparent);
transition: left 0.5s;
}
.nav-btn:hover::before,
.language-btn:hover::before {
left: 100%;
}
.nav-btn:hover,
.language-btn:hover {
background-color: var(--color-accent-hover);
transform: translateY(-2px);
}
.nav-btn:focus,
.nav-btn:active,
.language-btn:focus,
.language-btn:active {
outline: none;
text-decoration: none;
}
.language-selector,
.login-dropdown-container {
position: relative;
display: inline-block;
width: 100%;
}
.language-btn {
gap: 0.5rem;
/* Reduced horizontal padding from 1.5rem to 1rem for consistency */
padding: 0.75rem 1rem;
}
.language-btn i.fa-chevron-down,
.login-dropdown-btn i.fa-chevron-down {
margin-left: 2px;
font-size: 0.7rem;
transition: transform 0.3s ease;
}
.language-selector.active .language-btn i.fa-chevron-down,
.login-dropdown-container.active .login-dropdown-btn i.fa-chevron-down {
transform: rotate(180deg);
}
.language-dropdown,
.login-dropdown {
position: absolute;
top: 100%;
right: 0;
background-color: var(--color-primary);
border: 2px solid var(--color-accent);
border-radius: var(--border-radius);
box-shadow: var(--shadow-sm);
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: var(--transition);
z-index: 1000;
min-width: 150px;
margin-top: 0.5rem;
}
.language-selector.active .language-dropdown,
.login-dropdown-container.active .login-dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.language-option,
.login-option {
width: 100%;
padding: 0.75rem 1rem;
border: none;
background: none;
display: flex;
align-items: center;
gap: 0.75rem;
cursor: pointer;
transition: background-color 0.3s ease;
font-size: 0.9rem;
color: var(--color-white);
text-decoration: none;
}
.language-option:hover,
.login-option:hover {
background-color: rgba(255, 227, 113, 0.1);
}
.language-option:first-child,
.login-option:first-child {
border-radius: 6px 6px 0 0;
}
.language-option:last-child,
.login-option:last-child {
border-radius: 0 0 6px 6px;
}
.language-option img {
width: 20px;
height: auto;
border-radius: 2px;
}
.login-option i {
color: var(--color-accent);
font-size: 1rem;
}
.login-dropdown {
min-width: 180px;
}
.profile-icon {
background-color: var(--color-accent);
color: var(--color-primary);
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
transition: var(--transition);
text-decoration: none;
flex-shrink: 0; /* ADD THIS - prevents flex container from shrinking it */
aspect-ratio: 1 / 1; /* ADD THIS - ensures it stays square/circular */
overflow: hidden;
}
.profile-icon:hover {
background-color: var(--color-accent-hover);
transform: translateY(-2px);
}
.logout-btn {
background-color: var(--color-accent);
color: var(--color-primary);
}
.logout-btn:hover {
background-color: var(--color-accent-hover);
transform: translateY(-2px);
}
/* ========================================
HERO SECTION
======================================== */
.hero {
background-color: var(--color-accent);
padding: 4rem 0;
}
.hero-yellow {
background-color: var(--color-accent);
padding: 4rem 0;
min-height: calc(100vh - 80px);
display: flex;
align-items: center;
}
.hero-yellow-dashboard {
background-color: var(--color-accent);
padding: 2rem 0;
min-height: 40vh;
display: flex;
align-items: center;
}
.hero-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
align-items: start;
}
.hero-title {
color: var(--color-accent);
background-color: var(--color-primary);
font-size: 2rem;
font-weight: 600;
margin-bottom: 0.5rem;
line-height: 1.2;
letter-spacing: 0.5px;
padding: 0.5rem 1rem;
border-radius: 10px;
display: inline-block;
}
.hero-subtitle {
color: var(--color-primary);
font-size: 0.8rem;
margin-bottom: 1rem;
line-height: 1.4;
letter-spacing: 1px;
}
.world-map {
background-image: url("public/general/background.jpg");
background-size: cover;
background-position: center;
border-radius: var(--border-radius-lg);
padding: 2rem;
position: relative;
overflow: hidden;
min-height: 450px;
}
/* Removed old #pinsContainer and .pin styles - no longer used */
.search-bar {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 1rem;
right: 1rem;
background-color: var(--color-white);
border-radius: var(--border-radius-full);
padding: 0.75rem 1rem;
display: flex;
align-items: center;
box-shadow: var(--shadow-sm);
z-index: 999;
}
.search-icon {
color: #999;
margin-right: 0.75rem;
}
.search-input {
flex: 1;
border: none;
outline: none;
font-size: 0.9rem;
}
/* ========================================
FORMS
======================================== */
.form-container {
background-color: var(--color-white);
border-radius: var(--border-radius-lg);
padding: 2rem;
box-shadow: var(--shadow-md);
}
.form-title {
text-align: center;
font-size: 1.5rem;
font-weight: bold;
margin-bottom: 1.5rem;
color: var(--color-primary);
}
.tabs,
.login-tabs {
display: flex;
margin-bottom: 1.5rem;
gap: 0.5rem;
}
.tab-btn {
flex: 1;
padding: 0.75rem 1rem;
border: none;
font-weight: 600;
font-size: 0.8rem;
cursor: pointer;
transition: var(--transition);
border-radius: var(--border-radius);
}
.tab-btn.active {
background-color: var(--color-accent);
color: var(--color-primary);
}
.tab-btn:not(.active) {
background-color: var(--color-primary);
color: var(--color-white);
}
.registration-form,
.login-form {
display: flex;
flex-direction: column;
gap: 1rem;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.form-group {
display: flex;
flex-direction: column;
}
.form-label {
font-size: 0.9rem;
color: var(--color-text-light);
margin-bottom: 0.5rem;
font-weight: 500;
}
/* Consolidated form input styles */
.form-input,
.form-textarea,
.form-select,
.contact-form-input,
.contact-form-textarea {
padding: 0.6rem;
border: 2px solid var(--color-border);
border-radius: var(--border-radius);
font-size: 0.9rem;
transition: var(--transition);
font-family: var(--font-body);
}
.form-input:focus,
.form-textarea:focus,
.form-select:focus,
.contact-form-input:focus,
.contact-form-textarea:focus {
outline: none;
border-color: var(--color-accent);
box-shadow: 0 0 0 3px rgba(255, 227, 113, 0.1);
}
.form-input.full-width {
grid-column: 1 / -1;
}
.form-textarea,
.contact-form-textarea {
resize: vertical;
min-height: 150px;
}
.form-select {
background-color: var(--color-white);
appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 16px;
}
.checkbox-label {
display: flex;
align-items: center;
cursor: pointer;
font-size: 0.9rem;
gap: 0.5rem;
}
.checkbox-label input[type="checkbox"] {
accent-color: var(--color-accent);
}
/* Consolidated submit button styles */
.submit-btn,
.contact-submit-btn,
.login-btn,
.profile-submit-btn {
background-color: var(--color-success);
color: var(--color-white);
border: none;
padding: 0.5rem;
border-radius: var(--border-radius);
font-size: 1rem;
font-weight: 400;
cursor: pointer;
transition: var(--transition);
width: 25%;
display: block;
margin: 0 auto;
}
.submit-btn:hover,
.contact-submit-btn:hover,
.login-btn:hover,
.profile-submit-btn:hover {
background-color: var(--color-accent-hover);
transform: translateY(-2px);
}
.contact-submit-btn {
padding: 1rem 2.5rem;
font-size: 1.1rem;
align-self: flex-end;
margin-top: 0.5rem;
width: auto;
}
.login-btn {
background-color: #00a400;
padding: 0.9rem;
margin-top: 0.5rem;
width: 100%;
}
.login-btn:hover {
background-color: #008800;
}
.profile-submit-btn {
width: 50%;
background-color: #289717;
padding: 1rem 2rem;
margin-top: 1.5rem;
}
.profile-submit-btn:hover {
background-color: #1f7512;
box-shadow: 0 6px 20px rgba(40, 151, 23, 0.3);
}
.login-link {
text-align: center;
font-size: 0.9rem;
color: var(--color-text-light);
}
.login-link a,
.forgot-password {
color: var(--color-primary);
text-decoration: none;
font-weight: 600;
}
.login-link a:hover,
.forgot-password:hover {
text-decoration: underline;
}
/* ========================================
STATS SECTION
======================================== */
.stats {
background-color: var(--color-accent);
padding: 3rem 0;
border-top: 3px solid var(--color-primary);
border-bottom: 50px solid var(--color-primary);
}
.stats-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
text-align: center;
max-width: 1200px;
margin: 0 auto;
}
.stat-item {
padding: 1.5rem;
position: relative;
}
.stat-item:not(:last-child)::after {
content: "";
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 2px;
height: 60%;
background-color: var(--color-primary);
}
.stat-number {
font-size: 4rem;
font-weight: bold;
color: var(--color-primary);
margin-bottom: 0.5rem;
line-height: 1;
}
.stat-label {
color: var(--color-primary);
font-weight: 600;
font-size: 1.1rem;
}
/* ========================================
SERVICES SECTION
======================================== */
.services {
background-color: var(--color-primary);
padding: 4rem 0;
}
.services .section-title {
background-color: var(--color-accent);
color: var(--color-primary);
padding: 1.5rem 0;
margin-top: -4rem;
margin-bottom: 8rem;
text-align: center;
font-size: 2rem;
font-weight: 700;
}
.services-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.service-card {
background-color: var(--color-accent);
border-radius: var(--border-radius-xl);
padding: 3rem 2rem 2rem;
height: 220px;
max-width: 270px;
width: 100%;
margin: 0 auto;
text-align: center;
position: relative;
transition: var(--transition);
overflow: visible;
}
/* Adding missing service-icon-circle class for icon containers */
.service-icon-circle {
width: 200px;
height: 100px;
background-color: var(--color-accent);
border-radius: 160px 160px 0 0;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: -70px;
left: 50%;
transform: translateX(-50%);
}
.service-icon-circle img {
width: 70%;
height: auto;
max-height: 80px;
object-fit: contain;
}
.service-card:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-lg);
}
.service-title {
font-size: 1.2rem;
font-weight: 700;
color: var(--color-primary);
}
.underline {
width: 90px;
height: 2px;
background-color: var(--color-primary);
margin: 0.5rem auto 1rem;
border-radius: 2px;
}
.service-description {
font-size: 0.7rem;
color: var(--color-primary);
line-height: 1.6;
}
/* ========================================
PARTNERS SECTION
======================================== */
.partners {
background-color: var(--color-primary);
padding: 4rem 0 2rem;
overflow: hidden;
}
.partners .partner-section-title {
color: var(--color-accent);
text-align: center;
font-size: 2rem;
font-weight: 700;
margin-bottom: 3rem;
text-decoration: underline;
text-decoration-color: var(--color-accent);
text-decoration-thickness: 3px;
text-underline-offset: 10px;
}
.partners-container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
overflow: hidden;
padding: 0 1rem;
}
.partners-track {
display: flex;
gap: 0.5rem;
cursor: grab;
align-items: center;
}
.partner-card {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
min-width: 160px;
height: 140px;
transition: transform 0.3s ease;
background: white;
border-radius: 5px;
border: 2px solid var(--color-border);
}
.partner-card img {
max-width: 160px;
max-height: 120px;
object-fit: contain;
pointer-events: none; /* ADD THIS */
user-select: none;
}
.partners-track:active {
cursor: grabbing; /* ADD THIS */
}
/* Mobile Responsive - Show one logo at a time */
/* Mobile Responsive - Show one logo at a time */
@media (max-width: 768px) {
.partners-container {
max-width: 100%;
padding: 0 1rem;
}
.partners-track {
gap: 1rem;
}
.partner-card {
min-width: 100%;
height: 120px;
}
.partner-card img {
max-width: 90%;
max-height: 100px;
width: auto;
height: auto;
object-fit: contain;
}
}
/* ========================================
FOOTER
======================================== */
.footer {
border-top: 2px solid rgba(255, 255, 255, 0.544);
background-color: var(--color-accent);
padding: 2rem 0;
}
.footer-content {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 1.5rem;
font-size: 0.9rem;
color: var(--color-primary);
}
.footer-link {
font-weight: 300;
color: var(--color-primary);
text-decoration: none;
transition: color 0.3s ease;
text-decoration: underline;
}
.footer-text {
color: var(--color-primary);
font-size: none;
font-weight: 300;
text-decoration: underline;
}
.social-icons {
display: flex;
gap: 0.5rem;
}
.social-icons i {
font-size: 1.2rem;
cursor: pointer;
transition: transform 0.3s ease;
}
.social-icons i:hover {
transform: scale(1.2);
}
.fa-facebook {
color: #1877f2;
}
.fa-twitter {
color: #1da1f2;
}
.fa-instagram {
color: #e4405f;
}
.copyright {
font-weight: 500;
}
@media (min-width: 768px) {
.footer .footer-link:not(:last-child)::after {
content: "|";
color: var(--font-primary);
margin-left: 1rem;
}
}
/* Mobil: dikey çizgi gizle */
@media (max-width: 767px) {
.footer .footer-link:not(:last-child)::after {
content: "";
}
}
/* ========================================
PAGE-SPECIFIC STYLES
======================================== */
.breadcrumb {
background-color: var(--color-primary);
padding: 1.5rem 0;
border-top: 1px solid rgba(255, 227, 113, 0.4);
box-shadow: 0 -2px 8px rgba(255, 227, 113, 0.4), 0 2px 8px rgba(255, 227, 113, 0.4);
}
.breadcrumb-title {
color: var(--color-accent);
font-size: 1rem;
font-weight: 400;
margin: 0;
}
.breadcrumb-light {
background-color: var(--color-accent);
padding: 1.5rem 0;
border-top: 1px solid rgba(255, 227, 113, 0.4);
box-shadow: 0 -2px 8px rgba(255, 227, 113, 0.4), 0 2px 8px rgba(255, 227, 113, 0.4);
}
.breadcrumb-title-dark {
color: var(--color-primary);
font-size: 1rem;
font-weight: 400;
margin: 0;
}
/* About Page */
.about-content {
background-color: var(--color-accent);
padding: 4rem 0;
min-height: 70vh;
}
.about-card {
background-color: var(--color-white);
border-radius: var(--border-radius-lg);
margin-bottom: 2rem;
box-shadow: var(--shadow-md);
overflow: hidden;
transition: var(--transition);
}
.about-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
}
.card-header {
background-color: var(--color-primary);
color: var(--color-accent);
padding: 1rem 2rem;
text-align: center;
}
.card-header h2,
.card-header h3 {
margin: 0;
font-size: 1.2rem;
font-weight: 600;
}
.card-content {
padding: 1rem;
line-height: 1.8;
color: var(--color-text-dark);
}
.card-content p {
margin-bottom: 1rem;
font-size: 0.95rem;
}
.card-content p:last-child {
margin-bottom: 0;
}
.card-content strong {
color: var(--color-primary);
font-weight: 600;
}
.main-card {
max-width: 12 00px;
margin: 0 auto 3rem;
}
.vision-mission-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
max-width: 1200px;
margin: 0 auto;
}
.vision-card,
.mission-card {
height: fit-content;
}
/* FAQ Page */
.faq-content {
background-color: var(--color-accent);
padding: 4rem 0;
min-height: 70vh;
}
.faq-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(45%, 1fr));
gap: 2rem;
margin: 0 auto;
}
.faq-card {
background-color: var(--color-accent);
border: 2px solid var(--color-primary);
padding: 2rem;
display: flex;
align-items: flex-start;
gap: 1.5rem;
transition: var(--transition);
cursor: pointer;
position: relative;
overflow: hidden;
}
.faq-card::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 227, 113, 0.1), transparent);
transition: left 0.5s ease;
}
.faq-card:hover::before {
left: 100%;
}
.faq-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-md);
border-color: var(--color-accent);
}
.faq-icon {
width: 3rem;
height: 3rem;
border-radius: var(--border-radius);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: var(--transition);
}
.faq-card:hover .faq-icon {
background-color: var(--color-accent);
transform: scale(1.1);
}
.faq-icon i {
color: var(--color-primary);
font-size: 3rem;
transition: color 0.3s ease;
}
.faq-card:hover .faq-icon i {
color: var(--color-primary);
}
.faq-text {
flex: 1;
}
.faq-question {
color: var(--color-primary);
font-size: 1.1rem;
font-weight: 700;
margin-bottom: 0.75rem;
line-height: 1.4;
}
.faq-answer {
color: var(--color-text-dark);
font-size: 0.9rem;
line-height: 1.6;
margin: 0;
}
.fade-in {
opacity: 0;
transform: translateY(30px);
animation: fadeInUp 0.6s ease forwards;
}
.faq-card:nth-child(1) {
animation-delay: 0.1s;
}
.faq-card:nth-child(2) {
animation-delay: 0.2s;
}
.faq-card:nth-child(3) {
animation-delay: 0.3s;
}
.faq-card:nth-child(4) {
animation-delay: 0.4s;
}
.faq-card:nth-child(5) {
animation-delay: 0.5s;
}
.faq-card:nth-child(6) {
animation-delay: 0.6s;
}
.faq-card:nth-child(7) {
animation-delay: 0.7s;
}
.faq-card:nth-child(8) {
animation-delay: 0.8s;
}
@keyframes fadeInUp {
to {
opacity: 1;
transform: translateY(0);
}
}
/* KVKK Disclosure Page */
.kvkk-section-title {
color: var(--color-primary);
font-size: 1.2rem;
font-weight: 700;
margin-top: 2rem;
margin-bottom: 1rem;
font-family: var(--font-heading);
}
.kvkk-section-title:first-of-type {
margin-top: 0;
}
/* Contact Page */
.contact-content {
background-color: var(--color-accent);
padding: 4rem 0;
min-height: 70vh;
}
.contact-description {
max-width: 1100px;
margin: 0 auto 3rem;
padding: 0 20px;
}
.contact-description p {
color: var(--color-primary);
font-size: 1rem;
line-height: 1.8;
text-align: justify;
}
.contact-container {
background-color: var(--color-primary);
border-radius: var(--border-radius-lg);
padding: 3rem;
max-width: 1100px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1.5fr;
gap: 4rem;
box-shadow: var(--shadow-lg);
}
.contact-info {
padding-left: 4rem;
display: flex;
flex-direction: column;
gap: 2rem;
}
.contact-info-item {
color: var(--color-white);
}
.contact-info-title {
font-family: var(--font-heading);
font-size: 1.3rem;
font-weight: 600;
margin-bottom: 0.5rem;
color: var(--color-white);
}
.contact-info-underline {
width: 120px;
height: 1px;
background-color: var(--color-accent);
margin-bottom: 0.75rem;
}
.contact-info-text {
font-size: 0.95rem;
line-height: 1.6;
color: #e0e0e0;
}
.contact-link {
color: var(--color-accent);
text-decoration: none;
transition: color 0.3s ease;
}
.contact-link:hover {
color: var(--color-accent-hover);
text-decoration: underline;
}
.contact-social-icons {
display: flex;
gap: 1rem;
margin-top: 1rem;
}
.contact-social-icon {
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
transition: var(--transition);
text-decoration: none;
color: white;
}
.contact-social-icon.telegram {
background-color: #0088cc;
color: var(--color-white);
}
.contact-social-icon.whatsapp {
background-color: #25d366;
color: var(--color-white);
}
.contact-social-icon:hover {
transform: scale(1.1);
box-shadow: 0 4px 15px rgba(255, 227, 113, 0.3);
}
.contact-form-wrapper {
display: flex;
flex-direction: column;
}
.contact-form {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.contact-form-group {
display: flex;
flex-direction: column;
}
.contact-form-input,
.contact-form-textarea {
padding: 0.9rem 1.2rem;
background-color: var(--color-white);
color: var(--color-text-dark);
}
.contact-form-input::placeholder,
.contact-form-textarea::placeholder {
color: #999;
}
/* Login Page */
.login-page-content {
background-color: var(--color-accent);
padding: 4rem 0;
min-height: 70vh;
}
.login-page-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
align-items: center;
}
.login-hero {
display: flex;
flex-direction: column;
gap: 2rem;
}
.login-hero-title {
color: var(--color-primary);
font-size: 2.5rem;
font-weight: 700;
line-height: 1.2;
background-color: var(--color-primary);
color: var(--color-accent);
padding: 1rem 2rem;
border-radius: var(--border-radius-lg);
display: inline-block;
}
.login-hero-subtitle {
color: var(--color-primary);
font-size: 0.95rem;
line-height: 1.6;
}
.login-map-container {
position: relative;
border-radius: var(--border-radius-lg);
overflow: hidden;
box-shadow: var(--shadow-md);
}
.login-map-container img {
width: 100%;
height: auto;
display: block;
}
.login-map-search {
position: absolute;
bottom: 1.5rem;
left: 1.5rem;
right: 1.5rem;
background-color: var(--color-white);
border-radius: var(--border-radius-full);
padding: 0.75rem 1.5rem;
display: flex;
align-items: center;
box-shadow: var(--shadow-sm);
}
.login-map-search input {
flex: 1;
border: none;
outline: none;
font-size: 0.9rem;
margin-left: 0.75rem;
}
.login-form-container {
background-color: var(--color-white);
border-radius: var(--border-radius-lg);
padding: 2.5rem;
box-shadow: var(--shadow-md);
}
.login-form-title {
text-align: center;
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 1rem;
color: var(--color-primary);
}
.forgot-password {
text-align: center;
display: block;
margin-top: 0.5rem;
font-size: 0.9rem;
}
/* Terms and Conditions Page */
.terms-container {
max-width: 1100px;
margin: 0 auto;
padding: 0 20px;
}
.terms-card {
background-color: var(--color-white);
border-radius: var(--border-radius-lg);
overflow: hidden;
box-shadow: var(--shadow-lg);
}
.terms-header {
background-color: var(--color-primary);
padding: 1.5rem 2rem;
text-align: center;
}
.terms-title {
color: var(--color-accent);
font-size: 1.2rem;
font-weight: 700;
margin: 0;
}
.terms-content {
padding: 3rem;
color: var(--color-text-dark);
line-height: 1.8;
}
.terms-section {
margin-bottom: 0.5rem;
}
.terms-section h3 {
color: var(--color-primary);
font-size: 1.1rem;
font-weight: 700;
margin-bottom: 0.75rem;
font-family: var(--font-heading);
}
.terms-section p {
margin-bottom: 0.5rem;
font-size: 0.95rem;
text-align: justify;
}
.terms-section p:last-child {
margin-bottom: 0;
}
.terms-content strong {
color: var(--color-primary);
font-weight: 700;
}
/* ========================================
DASHBOARD PAGE STYLES
======================================== */
.dashboard-hero {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 3rem;
align-items: center;
margin-bottom: 3rem;
}
.welcome-section {
display: flex;
align-items: center;
flex-direction: column;
align-items: flex-start;
gap: 1rem;
}
.welcome-title {
color: var(--color-primary);
font-size: 2.5rem;
font-weight: 700;
line-height: 1.3;
margin: 0;
}
.action-icons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2rem;
}
.action-icon-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
cursor: pointer;
transition: var(--transition);
}
.action-icon-item:hover {
transform: translateY(-5px);
}
.action-icon-circle {
width: 80px;
height: 80px;
background-color: var(--color-primary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 15px rgba(13, 27, 42, 0.3);
transition: var(--transition);
}
.action-icon-item:hover .action-icon-circle {
background-color: #1a2f47;
box-shadow: 0 6px 20px rgba(13, 27, 42, 0.4);
}
.action-icon-circle i {
font-size: 2rem;
color: var(--color-accent);
}
.action-label {
color: var(--color-primary);
font-size: 0.9rem;
font-weight: 600;
text-align: center;
margin: 0;
}
.feature-cards-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
margin-top: 3rem;
}
.feature-card {
border-radius: 30px 30px 0 0;
padding: 2.8rem 1.8rem 1.5rem;
position: relative;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
transition: var(--transition);
min-height: 330px;
display: flex;
flex-direction: column;
justify-content: space-between;
clip-path: polygon(0 0,
100% 0,
100% 100%,
75% calc(100% - 20px),
50% calc(100% - 40px),
25% calc(100% - 20px),
0 100%);
}
.feature-card-blue:hover {
transform: translateY(-8px);
box-shadow: 0 12px 35px rgba(113, 196, 228, 0.4);
background: linear-gradient(135deg, #71c4e4 0%, #b8e5f5 100%);
border: 3px solid #71c4e4;
}
.feature-card-green:hover {
transform: translateY(-8px);
box-shadow: 0 12px 35px rgba(40, 151, 23, 0.4);
background: linear-gradient(135deg, #289717 0%, #c5f5b0 100%);
border: 3px solid #289717;
}
.feature-card-yellow:hover {
transform: translateY(-8px);
box-shadow: 0 12px 35px rgba(235, 138, 30, 0.4);
background: linear-gradient(135deg, #eb8a1e 0%, #fff5a8 100%);
border: 3px solid #eb8a1e;
}
.feature-card-blue {
background: linear-gradient(135deg, #d2effa 0%, #b8e5f5 100%);
}
.feature-card-green {
background: linear-gradient(135deg, #dbffc7 0%, #c5f5b0 100%);
}
.feature-card-yellow {
background: linear-gradient(135deg, #ffffc3 0%, #fff5a8 100%);
}
.feature-diamond {
width: 90px;
height: 90px;
position: absolute;
top: 10px;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
justify-content: center;
}
.diamond-img {
width: 100%;
height: 100%;
object-fit: contain;
filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.2));
max-width: 90px;
max-height: 90px;
}
.feature-card-title {
color: var(--color-primary);
font-size: 1rem;
font-weight: 600;
text-align: center;
margin: 4rem 0 1.5rem;
line-height: 1.5;
}
.feature-card-subtitle {
color: var(--color-primary);
font-size: 1.1rem;
font-weight: 700;
text-align: center;
margin: 3rem 0 0;
}
.feature-card-text {
color: var(--color-primary);
font-size: 0.85rem;
text-align: center;
margin-bottom: 0.3rem;
line-height: 1.5;
}
.feature-list {
list-style: none;
padding: 0;
margin: 0.7rem 0;
flex-grow: 1;
}
.feature-list li {
color: var(--color-primary);
font-size: 0.85rem;
font-weight: 600;
padding: 0.2rem 0;
position: relative;
padding-left: 1.5rem;
}
.feature-list li::before {
content: "•";
position: absolute;
left: 0.5rem;
font-size: 1.2rem;
font-weight: bold;
}
.feature-card-footer {
color: #32a81d;
font-size: 0.9rem;
font-weight: 700;
text-align: center;
margin: 0.1rem 0 1.5rem;
}
.feature-card-footer-orange {
color: #eb8a1e;
font-size: 0.9rem;
font-weight: 700;
text-align: center;
margin: 1rem 0 1.5rem;
}
.feature-btn {
background-color: var(--color-accent);
color: var(--color-primary);
border: none;
margin-bottom: 2rem;
padding: 0.75rem 1rem;
border-radius: 20px;
font-size: 0.9rem;
font-weight: 700;
cursor: pointer;
transition: var(--transition);
align-self: center;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.feature-btn:hover {
background-color: var(--color-accent-hover);
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}
/* ========================================
PROFILE STRENGTHEN PAGE
======================================== */
.page-title-section {
background-color: var(--color-primary);
padding: 2rem 0;
}
.page-title {
color: var(--color-accent);
font-size: 1.8rem;
font-weight: 700;
margin: 0;
}
.profile-strengthen-section {
background-color: var(--color-accent);
padding: 3rem 0;
min-height: 100vh;
}
.profile-strengthen-grid {
display: grid;
grid-template-columns: 400px 1fr;
gap: 2rem;
align-items: start;
}
.profile-form-card {
max-width: 900px;
background-color: var(--color-white);
border-radius: var(--border-radius-lg);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
overflow: hidden;
}
.profile-form-header {
background: linear-gradient(135deg, #dbffc7 0%, #c5f5b0 100%);
padding: 0.75rem 1.5rem;
display: flex;
align-items: center;
gap: 0.8rem;
justify-content: center;
border: 2px solid #1c211b1d;
border-radius: var(--border-radius);
width: 90%;
margin: 1rem auto 0.5rem auto;
font-weight: 700;
}
.form-header-diamond {
width: 40px;
height: 40px;
object-fit: contain;
}
.profile-form-header span {
color: #289717;
font-size: 1.1rem;
font-weight: 700;
}
.profile-form-content {
padding: 1.5rem;
}
.form-grid {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 2rem;
align-items: flex-start;
}
.form-field-group {
margin-bottom: 1.5rem;
}
.add-field-row {
position: relative;
}
.profile-input.with-icon {
padding-right: 3rem;
}
.inside-icon {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
color: #888;
font-size: 1.1rem;
cursor: pointer;
transition: 0.2s;
}
.inside-icon:hover {
color: #289717;
}
.profile-input,
.profile-select {
width: 100%;
padding: 0.9rem 1rem;
border: 2px solid #e0e0e0;
border-radius: var(--border-radius);
font-size: 0.7rem;
font-family: var(--font-body);
transition: var(--transition);
}
.profile-input:focus,
.profile-select:focus {
outline: none;
border-color: #289717;
box-shadow: 0 0 0 3px rgba(40, 151, 23, 0.1);
}
.profile-select {
background-color: var(--color-white);
appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 16px;
cursor: pointer;
}
.add-btn {
background-color: var(--color-white);
border: 2px solid #e0e0e0;
border-radius: var(--border-radius);
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: var(--transition);
flex-shrink: 0;
}
.add-btn:hover {
background-color: #289717;
border-color: #289717;
color: var(--color-white);
}
.add-btn i {
font-size: 1.2rem;
}
.location-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}
.location-field {
display: flex;
flex-direction: column;
}
.field-label {
font-size: 0.85rem;
font-weight: 600;
color: var(--color-text);
margin-bottom: 0.5rem;
}
.calendar-photo-section {
margin: 0;
display: flex;
justify-content: center;
}
.calendar-widget {
background-color: var(--color-white);
border: 2px solid #e0e0e0;
border-radius: var(--border-radius);
padding: 1.5rem;
max-width: 320px;
width: 100%;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.calendar-month-year {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1rem;
padding: 0.5rem 0;
}
.current-month-year {
font-size: 0.9rem;
font-weight: 700;
color: var(--color-text);
text-align: center;
flex: 1;
}
.calendar-nav-btn {
background: none;
border: none;
color: var(--color-text);
cursor: pointer;
padding: 0.5rem;
font-size: 1rem;
transition: var(--transition);
display: flex;
align-items: center;
justify-content: center;
}
.calendar-nav-btn:hover {
color: #289717;
transform: scale(1.1);
}
.calendar-nav-btn:active {
transform: scale(0.95);
}
.calendar-header {
display: flex;
justify-content: center;
margin-bottom: 1rem;
}
.calendar-upload-btn {
background-color: var(--color-accent);
color: var(--color-primary);
border: none;
padding: 0.6rem 1.5rem;
border-radius: var(--border-radius);
font-weight: 600;
font-size: 0.9rem;
cursor: pointer;
transition: var(--transition);
}
.calendar-upload-btn:hover {
background-color: #f5d84a;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(255, 227, 113, 0.4);
}
.calendar-title {
font-size: 0.85rem;
font-weight: 600;
color: var(--color-text);
text-align: center;
margin-bottom: 1rem;
}
.calendar-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 0.3rem;
}
.calendar-day-header {
font-size: 0.75rem;
font-weight: 700;
color: var(--color-text);
text-align: center;
padding: 0.4rem 0;
}
.calendar-day {
aspect-ratio: 1;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.8rem;
border: 1px solid #e0e0e0;
border-radius: 4px;
cursor: pointer;
transition: var(--transition);
background-color: var(--color-white);
}
.calendar-day:hover {
background-color: var(--color-accent);
border-color: var(--color-accent);
font-weight: 600;
}
.calendar-day.selected {
background-color: #289717;
color: var(--color-white);
border-color: #289717;
font-weight: 600;
}
.work-preference-title {
font-size: 0.95rem;
font-weight: 600;
color: var(--color-text);
margin-bottom: 1rem;
}
.checkbox-group {
display: flex;
flex-direction: column;
gap: 0.8rem;
}
.profile-checkbox {
width: 20px;
height: 20px;
cursor: pointer;
accent-color: #289717;
}
.form-submit-container {
display: flex;
justify-content: center;
margin-top: 2rem;
}
.dark-spacer {
background-color: var(--color-primary);
height: 80px;
width: 100%;
}
/* About Person Page */
.about-person-section {
background-color: var(--color-accent);
padding: 3rem 0;
min-height: calc(100vh - 200px);
}
.about-person-grid {
display: grid;
grid-template-columns: 420px 1fr;
gap: 2.5rem;
align-items: start;
max-width: 1400px;
margin: 0 auto;
}
.about-info-card {
background: linear-gradient(135deg, #ffffc3 0%, #fff5a8 100%);
border-radius: 30px 30px 0 0;
padding: 3rem 2rem 2rem;
position: relative;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
min-height: 500px;
display: flex;
flex-direction: column;
clip-path: polygon(0 0,
100% 0,
100% 100%,
75% calc(100% - 20px),
50% calc(100% - 40px),
25% calc(100% - 20px),
0 100%);
}
.about-info-title {
color: var(--color-primary);
font-size: 1.1rem;
font-weight: 700;
text-align: center;
margin: 5rem 0 1.5rem;
line-height: 1.5;
}
.about-info-subtitle {
color: var(--color-primary);
font-size: 0.95rem;
text-align: center;
margin-bottom: 1.5rem;
line-height: 1.6;
}
.about-info-list {
list-style: none;
padding: 0;
margin: 1rem 0 2rem;
}
.about-info-list li {
color: var(--color-primary);
font-size: 0.9rem;
font-weight: 600;
padding: 0.4rem 0;
position: relative;
padding-left: 1.5rem;
}
.about-info-list li::before {
content: "•";
position: absolute;
left: 0.5rem;
font-size: 1.2rem;
font-weight: bold;
}
.about-info-footer {
color: #eb8a1e;
font-size: 1rem;
font-weight: 700;
text-align: center;
margin: auto 0 1.5rem;
}
.about-info-btn {
background-color: var(--color-accent);
color: var(--color-primary);
border: none;
padding: 0.8rem 2rem;
border-radius: var(--border-radius);
font-size: 1rem;
font-weight: 700;
cursor: pointer;
transition: var(--transition);
align-self: center;
margin-bottom: 2rem;
}
.about-info-btn:hover {
background-color: #ffe371;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.about-form-card {
background-color: #f5f5f7;
border-radius: var(--border-radius-lg);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
overflow: hidden;
max-width: 900px;
}
.about-form-banner {
background: linear-gradient(135deg, #ffe8c1 0%, #ffd9a8 100%);
padding: 1rem 1.5rem;
display: flex;
align-items: center;
gap: 1rem;
justify-content: center;
margin: 1.5rem 1.5rem 0;
border-radius: var(--border-radius);
}
.banner-diamond {
width: 35px;
height: 35px;
object-fit: contain;
}
.about-form-banner span {
color: #e66e17;
font-size: 1rem;
font-weight: 700;
}
.about-form-content {
padding: 2rem;
}
.about-form-layout {
display: flex;
gap: 1.5rem;
}
.about-textarea-wrapper {
flex: 1;
display: flex;
flex-direction: column;
position: relative;
}
.about-textarea {
width: 100%;
min-height: 200px;
padding: 1rem;
border: 2px solid hsl(0, 0%, 47%);
border-radius: var(--border-radius);
font-size: 0.95rem;
font-family: inherit;
resize: vertical;
margin-bottom: 1rem;
transition: var(--transition);
}
.about-textarea:focus {
outline: none;
border-color: #289717;
}
.about-action-buttons {
display: flex;
flex-direction: column;
gap: 1rem;
min-width: 220px;
}
.about-action-btn {
padding: 1rem 1.5rem;
border: none;
border-radius: var(--border-radius);
font-size: 1rem;
font-weight: 700;
cursor: pointer;
transition: var(--transition);
color: white;
text-align: center;
white-space: nowrap;
}
.btn-peach {
background-color: #ff9b7a;
}
.btn-peach:hover {
background-color: #ff8560;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(255, 155, 122, 0.4);
}
.btn-blue {
background-color: #5ba3d9;
}
.btn-blue:hover {
background-color: #4a8fc7;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(91, 163, 217, 0.4);
}
.btn-gray {
background-color: #4a4a4a;
}
.btn-gray:hover {
background-color: #363636;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(74, 74, 74, 0.4);
}
.btn-orange {
background-color: #ee5622;
}
.btn-orange:hover {
background-color: #d64a1e;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(238, 86, 34, 0.4);
}
.about-submit-btn {
align-self: flex-end;
padding: 0.6rem 1.3rem;
background-color: #289717;
color: white;
border: none;
border-radius: var(--border-radius);
font-size: 0.8rem;
font-weight: 500;
cursor: pointer;
transition: var(--transition);
box-shadow: 0 4px 12px rgba(40, 151, 23, 0.4);
}
.about-submit-btn:hover {
background-color: #1f7a12;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(40, 151, 23, 0.4);
}
/* Account Profile Page */
.profile-section {
background-color: var(--color-accent);
padding: 3rem 0;
min-height: 100vh;
}
.account-profile-card {
max-width: 1200px;
margin: 0 auto;
background-color: #ffffff;
border-radius: var(--border-radius-lg);
padding: 2rem;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}
.account-form-grid {
display: grid;
grid-template-columns: 1fr 320px;
gap: 2rem;
align-items: flex-start;
}
.account-form-left {
display: flex;
flex-direction: column;
gap: 1rem;
}
.photo-about-row {
display: grid;
grid-template-columns: 150px 1fr;
gap: 1rem;
margin-bottom: 0.5rem;
}
.profile-photo-box {
width: 150px;
height: 120px;
border: 2px solid #e0e0e0;
border-radius: var(--border-radius);
background-color: var(--color-white);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: var(--transition);
background-size: cover;
background-position: center;
}
.profile-photo-box:hover {
border-color: #289717;
}
.photo-placeholder-text {
color: #999;
font-size: 0.9rem;
}
.name-row,
.birth-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.account-save-btn {
display: block;
margin-left: auto;
width: 150px;
background-color: #289717;
color: white;
border: none;
padding: 0.7rem 1rem;
border-radius: var(--border-radius);
font-size: 1rem;
font-weight: 700;
cursor: pointer;
transition: var(--transition);
margin-top: 1rem;
box-shadow: 0 4px 12px rgba(40, 151, 23, 0.4);
}
.account-save-btn:hover {
background-color: #1f7512;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(40, 151, 23, 0.4);
}
.account-form-right {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.account-action-buttons {
display: flex;
flex-direction: column;
gap: 1rem;
}
.account-action-btn {
padding: 1rem 1.5rem;
border: none;
border-radius: var(--border-radius);
font-size: 1rem;
font-weight: 700;
cursor: pointer;
transition: var(--transition);
color: white;
text-align: center;
text-decoration: none;
/* alt çizgiyi kaldırır */
display: inline-block
}
.btn-dark {
background-color: #3f4045;
}
.btn-dark:hover {
background-color: #2a2b2e;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(63, 64, 69, 0.4);
}
.work-preferences {
background-color: var(--color-white);
border: 2px solid #e0e0e0;
border-radius: var(--border-radius);
padding: 1.5rem;
}
.work-pref-title {
font-size: 1rem;
font-weight: 700;
margin-bottom: 1rem;
color: var(--color-text);
}
.profile-checkbox {
width: 18px;
height: 18px;
cursor: pointer;
}
.calendar-update-btn {
width: 100%;
background-color: var(--color-accent);
color: var(--color-primary);
border: none;
padding: 0.75rem;
border-radius: var(--border-radius);
font-weight: 700;
font-size: 0.9rem;
cursor: pointer;
transition: var(--transition);
margin-top: 1rem;
}
.calendar-update-btn:hover {
background-color: #f5d84a;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(255, 227, 113, 0.4);
}
/* Detaylı CV Page */
.cv-section {
background-color: var(--color-accent);
padding: 3rem 0;
min-height: calc(100vh - 200px);
}
.cv-grid {
display: grid;
grid-template-columns: 1fr 1.5fr;
gap: 2rem;
align-items: start;
}
.cv-form-card {
background-color: var(--color-white);
border-radius: var(--border-radius-lg);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
position: relative;
overflow: hidden;
display: flex;
}
.cv-form-content {
flex: 1;
padding: 2rem;
display: flex;
flex-direction: column;
gap: 1rem;
}
.cv-prs-stripe {
width: 80px;
background-color: #000;
display: flex;
align-items: flex-end;
justify-content: center;
padding: 2rem 1rem;
}
.cv-prs-logo {
width: 60px;
height: auto;
object-fit: contain;
}
.cv-top-section {
display: grid;
grid-template-columns: 150px 1fr;
gap: 1rem;
}
.cv-photo-box {
width: 150px;
height: 150px;
border: 2px solid #ddd;
border-radius: var(--border-radius);
overflow: hidden;
cursor: pointer;
background-color: #f9f9f9;
position: relative;
}
.cv-photo-placeholder {
width: 100%;
height: 100%;
background-color: #f0f0f0;
background-size: cover;
background-position: center;
}
.cv-photo-box:hover {
border-color: var(--color-primary);
}
.cv-textarea {
width: 100%;
min-height: 150px;
padding: 0.75rem;
border: 1px solid #ddd;
border-radius: var(--border-radius);
font-family: inherit;
font-size: 0.95rem;
resize: vertical;
transition: var(--transition);
}
.cv-textarea:focus {
outline: none;
border-color: var(--color-primary);
}
.cv-input {
width: 100%;
padding: 0.75rem;
border: 1px solid #ddd;
border-radius: var(--border-radius);
font-family: inherit;
font-size: 0.95rem;
}
.cv-input:focus {
outline: none;
border-color: var(--color-primary);
}
.cv-input.cv-full {
width: 100%;
}
.cv-row-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.cv-row-3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}
.cv-input-group {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.cv-label {
font-size: 0.85rem;
font-weight: 600;
color: #333;
}
.cv-actions {
display: flex;
gap: 1rem;
justify-content: flex-end;
margin-top: 1.5rem;
align-self: flex-end;
}
.cv-btn {
padding: 0.75rem 2rem;
border-radius: var(--border-radius);
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: var(--transition);
border: 2px solid transparent;
}
.cv-btn-share {
background-color: var(--color-accent);
color: #000;
border-color: #000;
}
.cv-btn-share:hover {
background-color: #ffe371;
transform: translateY(-2px);
}
.cv-btn-print {
background-color: #000;
color: var(--color-accent);
border-color: #000;
}
.cv-btn-print:hover {
background-color: #1a1a1a;
transform: translateY(-2px);
}
/* ============================================
JOB PLANS PAGE
============================================ */
.job-plans-section {
background-color: var(--color-accent);
padding: 3rem 0;
min-height: 80vh;
}
.job-plans-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
}
.job-plans-column {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.job-filter-card {
background-color: rgba(255, 255, 255, 0.9);
border-radius: var(--border-radius-lg);
padding: 1.5rem;
box-shadow: var(--shadow-sm);
text-align: right;
}
.filter-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
}
.filter-title {
font-size: 1rem;
font-weight: 600;
color: var(--color-text-dark);
margin: 0 0 0.5rem 0;
}
.date-placeholder {
font-size: 0.85rem;
color: #999;
}
.filter-inputs {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
margin-bottom: 1rem;
}
.filter-input {
padding: 0.75rem;
border: 2px solid var(--color-border);
border-radius: var(--border-radius);
font-size: 0.9rem;
transition: var(--transition);
font-family: var(--font-body);
}
.filter-input:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(13, 27, 42, 0.1);
}
.filter-input::placeholder {
color: #999;
}
.filter-btn {
background-color: var(--color-primary);
color: var(--color-white);
border-radius: 20px;
font-size: 0.95rem;
font-weight: 500;
cursor: pointer;
transition: var(--transition);
width: 110px;
height: 30px;
display: inline-block;
}
.filter-btn:hover {
background-color: #1a3a52;
transform: translateY(-2px);
}
.job-plans-section-title {
background-color: var(--color-primary);
border-radius: var(--border-radius-lg);
padding: 1rem 1.5rem;
text-align: center;
}
.job-plans-section-title h2 {
color: var(--color-white);
font-size: 1.2rem;
font-weight: 600;
margin: 0;
}
.job-plan-card {
background-color: rgba(255, 255, 255, 0.95);
border-radius: var(--border-radius-lg);
padding: 1.25rem;
box-shadow: var(--shadow-sm);
transition: var(--transition);
border: 2px solid transparent;
display: flex;
flex-direction: column;
justify-content: space-between;
flex: 1 1 150px;
}
.job-plan-card:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-md);
border-color: var(--color-primary);
}
.job-plan-content {
display: flex;
justify-content: space-between;
gap: 2rem;
flex-wrap: wrap;
}
.job-plan-left {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.job-plan-right {
display: flex;
flex-direction: column;
gap: 0.5rem;
align-items: flex-end;
}
.job-plan-date {
font-size: 0.9rem;
font-weight: 600;
color: var(--color-text-dark);
}
.job-status-badge {
width: 110px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 20px;
font-size: 0.85rem;
font-weight: 400;
color: var(--color-primary);
}
.status-approved {
background-color: #9ced91;
}
.status-pending {
background-color: #fdf1c0;
}
.status-completed {
background-color: #00a400;
}
.job-plan-info {
font-size: 0.95rem;
color: var(--color-text-dark);
margin: 0;
}
.job-remove-btn {
background-color: #d62828;
color: var(--color-white);
border: none;
width: 110px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 20px;
font-size: 0.85rem;
font-weight: 600;
cursor: pointer;
transition: var(--transition);
align-self: flex-start;
}
.job-remove-btn:hover {
background-color: #b91f1f;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(214, 40, 40, 0.3);
}
/* ========================================
BUSINESS CARD STYLES
======================================== */
.business-card-section {
background: var(--color-accent);
padding: 4rem 0;
min-height: calc(100vh - 300px);
display: flex;
align-items: center;
justify-content: center;
}
.business-card-wrapper {
display: flex;
justify-content: center;
align-items: center;
padding: 1rem 0;
}
.business-card {
display: grid;
grid-template-columns: 1fr 2fr;
max-width: 1000px;
width: 100%;
background-color: var(--color-white);
border-radius: 0;
border: 1px solid #686868;
overflow: hidden;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}
.business-card-left {
background-color: var(--color-primary);
padding: 3rem 2rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.business-card-photo {
width: 200px;
height: 200px;
border-radius: var(--border-radius-xl);
overflow: hidden;
background-color: rgba(255, 255, 255, 0.1);
}
.business-card-photo img {
width: 100%;
height: 100%;
object-fit: cover;
}
.business-card-stars {
display: flex;
gap: 0.5rem;
}
.business-card-stars i {
color: var(--color-accent);
font-size: 1.5rem;
}
.business-card-diamond img {
height: 60px;
width: auto;
display: flex;
align-items: center;
justify-content: center;
}
.business-card-logo img {
height: 50px;
width: auto;
}
.business-card-right {
background: linear-gradient(to bottom,
var(--color-primary) 0,
var(--color-primary) 4.5rem,
var(--color-accent) 3rem,
var(--color-accent) 100%);
padding: 2rem 4rem;
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.business-card-badge {
background-color: var(--color-primary);
color: var(--color-accent);
padding: 1rem 1.5rem;
border-radius: 25px;
text-align: center;
align-self: flex-start;
margin-left: auto;
margin-right: auto;
}
.business-card-badge span {
font-size: 0.9rem;
font-weight: 700;
letter-spacing: 0.5px;
}
.business-card-name {
color: var(--color-primary);
font-size: 2rem;
font-weight: 700;
margin: 0;
text-align: left;
}
.business-card-info {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.business-card-info-item {
display: flex;
align-items: flex-start;
gap: 1rem;
}
.business-card-icon {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.business-card-icon i {
color: var(--color-primary);
font-size: 1.5rem;
}
.business-card-text {
flex: 1;
}
.business-card-label {
color: var(--color-primary);
font-size: 0.9rem;
margin: 0 0 0.25rem 0;
font-weight: 400;
}
.business-card-value {
color: var(--color-primary);
font-size: 1rem;
font-weight: 700;
margin: 0;
}
/* ========================================
JOB DETAIL PAGE
======================================== */
.job-detail-section {
background-color: var(--color-accent);
padding: 3rem 0;
min-height: 50vh;
}
.job-detail-card {
background-color: rgba(255, 255, 255, 0.95);
border-radius: var(--border-radius-lg);
padding: 2rem;
box-shadow: var(--shadow-md);
display: grid;
grid-template-columns: auto 1fr 2fr;
gap: 2rem;
border: 2px solid #e0e0e0;
}
.job-detail-left {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
padding-right: 2rem;
border-right: 2px solid #e0e0e0;
}
.job-detail-logo {
width: 150px;
height: 150px;
border-radius: var(--border-radius);
overflow: hidden;
border: 3px solid #e0e0e0;
}
.job-detail-logo img {
width: 100%;
height: 100%;
object-fit: cover;
}
.job-publish-date {
font-size: 0.85rem;
color: var(--color-primary);
text-align: center;
font-weight: 500;
}
.job-detail-middle {
display: flex;
flex-direction: column;
justify-content: center;
padding-right: 2rem;
border-right: 2px solid #e0e0e0;
}
.job-detail-info {
display: flex;
flex-direction: column;
gap: 1.2rem;
}
.job-detail-label {
font-size: 1rem;
color: var(--color-primary);
font-weight: 500;
line-height: 1.4;
}
.job-detail-right {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 1.5rem;
}
.job-note-container {
flex: 1;
display: flex;
flex-direction: column;
}
.job-note-label {
font-size: 1rem;
color: var(--color-primary);
font-weight: 600;
margin-bottom: 0.75rem;
display: block;
}
.job-note-content {
flex: 1;
background-color: #f5f5f5;
border: 2px solid #e0e0e0;
border-radius: var(--border-radius);
padding: 1.25rem;
min-height: 150px;
overflow-y: auto;
}
.job-note-content p {
font-size: 0.95rem;
color: var(--color-primary);
line-height: 1.6;
margin: 0;
}
.job-detail-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 1rem;
}
.job-social-share {
display: flex;
gap: 0.75rem;
}
.job-social-btn {
width: 45px;
height: 45px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
transition: var(--transition);
text-decoration: none;
color: white;
}
.job-social-btn.facebook {
background-color: #1877f2;
}
.job-social-btn.instagram {
background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}
.job-social-btn.telegram {
background-color: #0088cc;
}
.job-social-btn.whatsapp {
background-color: #25d366;
}
.job-social-btn:hover {
transform: translateY(-3px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.job-apply-btn {
background-color: var(--color-success);
color: white;
border: none;
padding: 0.85rem 2.5rem;
border-radius: var(--border-radius);
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: var(--transition);
white-space: nowrap;
}
.job-apply-btn:hover {
background-color: #008800;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 164, 0, 0.3);
}
/* ========================================
RECOMMENDED JOBS SECTION
======================================== */
.recommended-jobs-section {
background-color: var(--color-accent);
padding: 0 0 4rem 0;
}
.recommended-jobs-header {
background-color: var(--color-primary);
padding: 1.5rem 0;
margin-bottom: 3rem;
}
.recommended-jobs-header h2 {
color: var(--color-accent);
text-align: center;
font-size: 1.5rem;
font-weight: 600;
margin: 0;
}
.recommended-jobs-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
}
.recommended-job-card {
background-color: var(--color-primary);
border-radius: 30px;
padding: 2rem 1.5rem;
text-align: center;
transition: var(--transition);
display: flex;
flex-direction: column;
align-items: center;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.recommended-job-card:hover {
transform: translateY(-8px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}
.recommended-job-logo {
width: 120px;
height: 120px;
border-radius: 50%;
overflow: hidden;
margin-bottom: 1.5rem;
border: 4px solid var(--color-accent);
}
.recommended-job-logo img {
width: 100%;
height: 100%;
object-fit: cover;
}
.recommended-job-position {
color: var(--color-accent);
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 0.5rem;
text-transform: uppercase;
}
.recommended-job-company {
color: var(--color-accent);
font-size: 1rem;
margin-bottom: 1rem;
font-weight: 500;
}
.recommended-job-divider {
width: 100%;
height: 2px;
background-color: var(--color-accent);
margin: 1rem 0;
}
.recommended-job-details {
width: 100%;
text-align: left;
margin-bottom: 1.5rem;
}
.recommended-job-details p {
color: var(--color-accent);
font-size: .85rem;
margin-bottom: 0.75rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.recommended-job-details i {
font-size: 1rem;
min-width: 20px;
}
.recommended-job-details strong {
font-weight: 700;
}
.recommended-apply-btn {
background-color: var(--color-success);
color: white;
border: none;
padding: 0.75rem 2rem;
border-radius: var(--border-radius);
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: var(--transition);
width: 100%;
margin-bottom: 0.75rem;
}
.recommended-apply-btn:hover {
background-color: #008800;
transform: translateY(-2px);
}
.recommended-details-link {
color: var(--color-accent);
font-size: 0.85rem;
text-decoration: none;
font-weight: 500;
transition: var(--transition);
}
.recommended-details-link:hover {
text-decoration: underline;
opacity: 0.8;
}
/* New job listings page styles */
.jobs-listing-section {
background-color: var(--color-primary);
padding: 4rem 0 2rem 0;
min-height: 70vh;
}
.jobs-listing-section-light {
background-color: var(--color-accent);
padding: 4rem 0 6rem 0;
min-height: 100vh;
}
.jobs-listing-section .section-title {
background-color: var(--color-accent);
color: var(--color-primary);
padding: 1.5rem 0;
margin-top: -4rem;
margin-bottom: 8rem;
text-align: center;
font-size: 2rem;
font-weight: 700;
}
.jobs-listing-search {
max-width: 700px;
margin: 0 auto 4rem auto;
position: relative;
}
.jobs-listing-search-input {
width: 100%;
padding: 1rem 3rem 1rem 1.5rem;
border-radius: var(--border-radius-full);
border: none;
outline: none;
font-size: 1rem;
background-color: var(--color-white);
box-shadow: var(--shadow-md);
}
.jobs-listing-search-input::placeholder {
color: #999;
}
.jobs-listing-search-icon {
position: absolute;
right: 1.5rem;
top: 50%;
transform: translateY(-50%);
color: #999;
font-size: 1.2rem;
pointer-events: none;
}
.jobs-listing-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
margin-bottom: 3rem;
}
.jobs-listing-card {
background-color: var(--color-accent);
border-radius: 30px;
padding: 2rem 1.5rem;
text-align: center;
transition: var(--transition);
display: flex;
flex-direction: column;
align-items: center;
box-shadow: var(--shadow-sm);
}
.jobs-listing-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
}
.jobs-listing-logo {
width: 120px;
height: 120px;
border-radius: 50%;
overflow: hidden;
margin-bottom: 1.5rem;
border: 4px solid var(--color-primary);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.jobs-listing-logo img {
width: 100%;
height: 100%;
object-fit: cover;
}
.jobs-listing-position {
font-size: 1.25rem;
font-weight: 700;
color: var(--color-text-dark);
margin: 0 0 0.5rem 0;
text-transform: uppercase;
}
.jobs-listing-company {
font-size: 0.95rem;
color: var(--color-text-dark);
margin: 0 0 1rem 0;
}
.jobs-listing-divider {
width: 100%;
height: 2px;
background-color: var(--color-text-dark);
margin: 1rem 0;
}
.jobs-listing-details {
width: 100%;
text-align: left;
margin-bottom: 1.5rem;
}
.jobs-listing-details p {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.9rem;
color: var(--color-text-dark);
margin: 0.75rem 0;
}
.jobs-listing-details i {
color: var(--color-text-dark);
font-size: 1rem;
}
.jobs-listing-apply-btn {
padding: 0.5rem 1rem;
background-color: var(--color-success);
color: var(--color-white);
border: none;
border-radius: var(--border-radius);
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: var(--transition);
margin-bottom: 0.75rem;
}
.jobs-listing-apply-btn:hover {
background-color: var(--color-success-hover);
transform: translateY(-2px);
}
.jobs-listing-details-link {
color: var(--color-text-dark);
font-size: 0.85rem;
text-decoration: none;
transition: var(--transition);
}
.jobs-listing-details-link:hover {
text-decoration: underline;
color: var(--color-primary);
}
.jobs-listing-separator {
height: 3px;
background-color: var(--color-accent);
border-radius: 2px;
margin: 3rem 0;
box-shadow: 0 2px 8px rgba(255, 227, 113, 0.3);
}
.jobs-listing-separator-dark {
height: 3px;
background-color: var(--color-primary);
border-radius: 2px;
margin: 3rem 0;
box-shadow: 0 2px 8px rgba(255, 227, 113, 0.3);
}
.jobs-footer {
text-align: center;
margin-bottom: 3rem;
}
.view-all-btn {
background-color: var(--color-success);
color: var(--color-white);
border: none;
padding: 1rem 2rem;
border-radius: var(--border-radius);
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: var(--transition);
}
.view-all-btn:hover {
background-color: var(--color-success-hover);
transform: translateY(-2px);
}
.basket-card-actions {
flex: 1;
display: flex;
flex-direction: column;
align-items: end;
justify-content: start;
gap: .5rem;
}
/* ========================================
RESPONSIVE DESIGN - CONSOLIDATED
======================================== */
/* Consolidated all media queries by breakpoint */
@media (max-width: 1200px) {
.jobs-listing-grid {
grid-template-columns: repeat(auto-fit, minmax(100px,1fr));
}
.recommended-jobs-grid {
grid-template-columns: repeat(auto-fit, minmax(100px,1fr));
}
.feature-cards-grid {
grid-template-columns: 1fr;
gap: 4rem;
}
.feature-card {
max-width: 400px;
margin: 0 auto;
}
/* Responsive adjustments for smaller screens */
.personnel-results-grid {
grid-template-columns: 45% 55%;
}
.job-plans-grid {
grid-template-columns: 1fr;
gap: 2.5rem;
}
.job-detail-card {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.job-detail-left,
.job-detail-middle {
border-right: none;
border-bottom: 2px solid #e0e0e0;
padding-right: 0;
padding-bottom: 1.5rem;
}
.job-detail-left {
flex-direction: row;
justify-content: flex-start;
}
.job-detail-logo {
width: 100px;
height: 100px;
}
.account-form-grid {
grid-template-columns: 1fr;
}
.account-form-right {
max-width: 500px;
margin: 0 auto;
}
.cv-grid {
grid-template-columns: 1fr;
}
.about-info-card {
max-width: 600px;
margin: 0 auto;
}
.cv-form-card {
max-width: 100%;
}
.about-person-grid {
grid-template-columns: 1fr;
gap: 2rem;
}
/* Responsive adjustments for smaller screens */
.personnel-search-grid {
grid-template-columns: 1fr;
gap: 2rem;
}
.personnel-world-map {
min-height: 400px;
}
.management-panel-grid {
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
}
.request-management-grid {
grid-template-columns: 1fr;
}
.personnel-results-grid {
grid-template-columns: 40% 60%;
}
}
@media (max-width: 1024px) and (min-width: 769px) {
.feature-diamond {
width: 80px;
height: 80px;
top: 8px;
}
.diamond-img {
max-width: 80px;
max-height: 80px;
}
}
@media (max-width: 1024px) {
/* ... existing code ... */
}
/* Enhanced mobile menu styles for better responsiveness */
@media (max-width: 768px) {
.burger-menu {
display: flex;
}
/* Dashboard Hero Section - Mobile */
.dashboard-hero {
grid-template-columns: 1fr;
gap: 2rem;
}
.welcome-section {
align-items: center;
text-align: center;
}
.welcome-title {
font-size: 1.75rem;
text-align: center;
}
.action-icons {
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
.action-icon-circle {
width: 70px;
height: 70px;
}
.action-icon-circle i {
font-size: 1.75rem;
}
.action-label {
font-size: 0.85rem;
}
.call-btn {
width: 50px;
height: 50px;
font-size: 1.25rem;
margin: 0 auto;
display: flex;
}
/* Jobs Listing Grid - Mobile */
.jobs-listing-grid {
grid-template-columns: repeat(auto-fit, minmax(100px,1fr));
gap: 1.5rem;
}
.jobs-listing-card {
max-width: 100%;
}
.jobs-listing-position {
font-size: 1rem; /* smaller from 1.25rem */
}
.jobs-listing-company {
font-size: 0.85rem; /* smaller from 0.95rem */
}
.jobs-listing-details p {
font-size: 0.8rem; /* smaller from 0.9rem */
}
.jobs-listing-apply-btn {
font-size: 0.9rem; /* smaller from 1rem */
}
/* Services Grid - Mobile */
.services-grid {
grid-template-columns: 1fr;
gap: 4rem;
padding: 0 1rem;
}
.service-card {
max-width: 100%;
width: 100%;
height: auto;
min-height: 200px;
padding: 3.5rem 1.5rem 1.5rem;
}
.service-icon-circle {
width: 150px;
height: 75px;
top: -50px;
}
.service-icon-circle img {
width: 65%;
max-height: 60px;
}
.service-title {
font-size: 1.1rem;
margin-top: 0.5rem;
}
.service-description {
font-size: 0.85rem;
line-height: 1.5;
}
.nav {
position: fixed;
top: 0;
right: -100%;
width: 280px;
height: 100vh;
background-color: var(--color-primary);
flex-direction: column;
padding: 80px 20px 20px;
gap: 1rem;
transition: right 0.3s ease;
z-index: 1000;
box-shadow: -5px 0 15px rgba(0, 0, 0, 0.3);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.nav.active {
right: 0;
}
.nav-btn,
.dropdown-container,
.language-selector {
width: 100%;
justify-content: flex-start;
}
/* Fixed profile icon for mobile menu - make it rectangular with text */
.profile-icon {
width: 100% !important; /* ADD !important to override desktop */
min-width: unset !important; /* ADD THIS - remove desktop min-width */
min-height: unset !important; /* ADD THIS - remove desktop min-height */
aspect-ratio: unset !important;
border-radius: 8px;
height: auto;
padding: 1rem;
justify-content: flex-start;
gap: 0.75rem;
font-size: 1rem;
background-color: var(--color-accent);
color: var(--color-primary);
text-decoration: none;
display: flex;
align-items: center;
transition: var(--transition);
}
.profile-icon i {
font-size: 1.25rem;
}
/* Add text label after icon in mobile */
.profile-icon::after {
content: "Profilim";
font-weight: 500;
}
.profile-icon:hover {
background-color: var(--color-accent-hover);
transform: none;
}
/* Improved mobile container padding */
.container {
padding-left: 1rem;
padding-right: 1rem;
}
/* Better section spacing on mobile */
section {
padding: 2rem 0;
}
/* Ensure all buttons are touch-friendly */
button,
.btn,
.nav-btn,
.dropdown-btn {
min-height: 44px;
min-width: 44px;
}
/* Better form input sizing on mobile */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="url"],
select,
textarea {
font-size: 16px;
/* Prevents zoom on iOS */
padding: 0.75rem;
}
/* Improved table responsiveness */
table {
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* Better breadcrumb on mobile */
.breadcrumb {
padding: 1.5rem 0;
}
.breadcrumb-title {
font-size: 1.5rem;
}
/* Ensure cards stack properly on mobile */
.card,
.panel,
.form-card {
margin-bottom: 1rem;
}
/* Ensure dropdowns work properly in mobile menu */
.dropdown-container {
flex-direction: column;
align-items: stretch;
}
.dropdown-menu {
position: static;
width: 100%;
box-shadow: none;
margin-top: 0.5rem;
background-color: rgba(255, 255, 255, 0.1);
}
.dropdown-container.active .dropdown-menu {
display: flex;
flex-direction: column;
}
.language-dropdown {
position: static;
width: 100%;
box-shadow: none;
margin-top: 0.5rem;
background-color: rgba(255, 255, 255, 0.1);
}
.language-selector.active .language-dropdown {
display: flex;
flex-direction: column;
}
/* Better mobile menu button styling */
.nav-btn {
padding: 0.75rem 1rem;
border-radius: 8px;
transition: background-color 0.2s ease;
}
/* Responsive adjustments for smaller screens */
.personnel-results-grid {
grid-template-columns: 1fr;
gap: 2rem;
}
.personnel-basket {
position: relative;
top: 0;
max-height: none;
}
.basket-content {
max-height: 400px;
}
/* Stack basket actions vertically on smaller screens */
.basket-actions {
flex-direction: column;
}
.basket-actions-left,
.basket-actions-right {
width: 100%;
}
.page-title {
font-size: 1.5rem;
}
.personnel-result-card {
display: flex;
gap: 1rem;
}
.personnel-result-left {
flex-direction: row;
width: 100%;
justify-content: space-between;
}
.personnel-result-actions {
flex-direction: row;
width: 100%;
}
.personnel-action-btn {
flex: 1;
}
.basket-personnel-grid {
grid-template-columns: 1fr;
}
.basket-title {
font-size: 1rem;
}
.member-detail-grid {
grid-template-columns: 1fr;
gap: 2rem;
}
.member-detail-left {
position: static;
}
/* Stack photo and buttons on smaller screens */
.member-top-section {
flex-direction: column;
align-items: center;
}
.member-action-buttons {
width: 100%;
}
.member-detail-section {
padding: 2rem 0;
}
.member-management-panel {
padding: 1.5rem;
}
.member-photo-placeholder {
width: 200px;
height: 200px;
}
.member-photo-placeholder i {
font-size: 3rem;
}
.photo-actions-row {
flex-direction: column;
}
.member-action-buttons {
width: 100%;
}
.member-action-btn {
font-size: 0.875rem;
padding: 0.75rem 1rem;
}
.member-info-form .form-row {
grid-template-columns: 1fr;
}
/* Stack location inputs on mobile */
.member-info-form .form-row-three {
grid-template-columns: 1fr;
}
.reference-input-wrapper .reference-input {
padding-right: 4px;
}
.add-reference-btn-inline {
position: static;
width: 100%;
margin-top: 0.5rem;
}
.reference-input-wrapper {
flex-direction: column;
}
.open-request-panel {
padding: 2rem;
}
.open-request-grid {
grid-template-columns: 1fr;
gap: 1rem;
}
.open-request-bottom {
flex-direction: column;
align-items: stretch;
gap: 1.5rem;
}
.open-request-bottom-left {
max-width: 100%;
}
.open-request-bottom-right {
align-items: stretch;
}
.open-request-action-btn {
width: 100%;
}
.print-request-btn {
min-width: auto;
}
.open-request-section {
padding: 2rem 0;
}
.open-request-panel {
padding: 1.5rem;
}
.open-request-card-header {
flex-direction: column;
align-items: center;
text-align: center;
}
.open-request-photo {
width: 100px;
height: 100px;
}
.open-request-footer {
flex-direction: column;
gap: 1rem;
align-items: stretch;
}
.open-request-actions {
width: 100%;
}
.open-request-btn {
flex: 1;
}
.open-request-bottom-left {
gap: 0.5rem;
}
.open-request-action-btn {
padding: 0.65rem 1rem;
font-size: 0.85rem;
}
.signature-list-wrapper {
padding: 1rem;
border-radius: 8px;
}
.signature-header-row {
flex-direction: column;
align-items: flex-start;
gap: 0.25rem;
}
.signature-header-label {
min-width: auto;
}
.attendance-list-section {
padding: 2rem 0;
}
.attendance-search-panel {
margin: 0 1rem 2rem;
}
.attendance-search-row {
grid-template-columns: 1fr;
gap: 1rem;
}
.attendance-table-wrapper {
padding: 1rem;
border-radius: 8px;
margin: 0 1rem;
}
.attendance-table-container {
overflow-x: scroll;
}
.print-attendance-btn {
width: 100%;
}
.stats-grid {
grid-template-columns: 1fr;
}
.stat-item:not(:last-child)::after {
width: 0 !important;
}
}
@media (max-width: 480px) {
.jobs-listing-grid {
grid-template-columns: repeat(2, 1fr);
gap: 0.5rem;
}
.personnel-panel-content {
padding: 1.5rem;
}
.personnel-panel-title {
font-size: 1.1rem;
}
.management-panel-title {
font-size: 1.2rem;
padding: 0.5rem 2rem;
}
.personnel-result-card {
flex-direction: column;
align-items: center;
text-align: center;
}
.personnel-result-actions {
width: 100%;
}
.basket-personnel-card {
flex-direction: column;
}
.basket-card-header {
width: 100%;
}
.basket-card-actions {
width: 100%;
}
}
/* Personnel Request Management Styles */
.request-management-section {
background-color: var(--color-accent);
padding: 3rem 0;
min-height: calc(100vh - 200px);
}
.request-management-grid {
display: grid;
grid-template-columns: 570px 1fr;
gap: 2rem;
align-items: start;
}
/* Left Panel - Form */
.request-form-panel {
background-color: white;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.request-form-header {
background-color: var(--color-dark-navy);
padding: 1rem 1.5rem;
text-align: center;
}
.request-form-header h2 {
color: white;
font-size: 1.1rem;
font-weight: 600;
margin: 0;
}
.request-form {
padding: 2rem;
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.request-form .form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.request-form-actions {
display: flex;
flex-direction: column;
gap: 0.75rem;
margin-top: 1rem;
}
.request-action-btn {
padding: 0.875rem 1.5rem;
border: none;
border-radius: 8px;
font-size: 0.95rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
text-align: center;
width: 100%;
}
.save-new-btn {
background-color: var(--color-success);
color: white;
}
.save-new-btn:hover {
background-color: #059669;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(16, 185, 129, 0.3);
}
.manage-saved-btn {
background-color: #f97316;
color: white;
}
.manage-saved-btn:hover {
background-color: #ea580c;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(249, 115, 22, 0.3);
}
.attendance-list-btn {
background-color: #3b82f6;
color: white;
}
.attendance-list-btn:hover {
background-color: #2563eb;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(59, 130, 246, 0.3);
}
/* Right Panel - Table */
.request-table-panel {
background-color: white;
border-radius: 12px;
padding: 2rem;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
min-height: 600px;
}
.request-table-wrapper {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.request-table {
width: 100%;
border-collapse: collapse;
font-size: 0.9rem;
}
.request-table thead {
background-color: #f3f4f6;
}
.request-table th {
padding: 1rem;
text-align: left;
font-weight: 600;
color: var(--color-text);
border: 1px solid #e5e7eb;
}
.request-table td {
padding: 1rem;
border: 1px solid #e5e7eb;
color: var(--color-text);
}
.request-table tbody tr:hover {
background-color: #f9fafb;
}
.detail-link {
color: #3b82f6;
text-decoration: none;
font-weight: 500;
}
.detail-link:hover {
text-decoration: underline;
}
/* Responsive Design */
@media (max-width: 1200px) {
.request-management-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 768px) {
.request-management-section {
padding: 2rem 0;
}
.request-form {
padding: 1.5rem;
}
.request-form .form-row {
grid-template-columns: 1fr;
}
.request-table-panel {
padding: 1rem;
}
.request-table {
font-size: 0.85rem;
}
.request-table th,
.request-table td {
padding: 0.75rem 0.5rem;
}
}
@media (max-width: 480px) {
.request-form-header h2 {
font-size: 1rem;
}
.request-action-btn {
font-size: 0.9rem;
padding: 0.75rem 1rem;
}
.request-table {
font-size: 0.8rem;
}
.request-table th,
.request-table td {
padding: 0.5rem 0.25rem;
}
}
/* Consolidated all dropdown styles into reusable classes */
.dropdown-base,
.language-dropdown,
.login-dropdown,
.dropdown-menu {
position: absolute;
top: 100%;
right: 0;
background-color: var(--color-primary);
border: 2px solid var(--color-accent);
border-radius: var(--border-radius);
box-shadow: var(--shadow-sm);
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: var(--transition);
z-index: 1000;
/* Completed the incomplete z-index property */
}
.language-selector.active .language-dropdown,
.login-dropdown-container.active .login-dropdown,
.dropdown-container.active .dropdown-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.dropdown-item-base,
.language-option,
.login-option,
.dropdown-item {
width: 100%;
padding: 0.75rem 1rem;
border: none;
background: none;
display: flex;
align-items: center;
gap: 0.75rem;
cursor: pointer;
transition: var(--transition);
font-size: 0.9rem;
color: var(--color-white);
text-align: left;
min-height: var(--button-height);
text-decoration: none;
/* Touch-friendly size */
}
.dropdown-item-base:hover,
.language-option:hover,
.login-option:hover,
.dropdown-item:hover {
background-color: rgba(255, 227, 113, 0.1);
}
.dropdown-item:hover {
background-color: var(--color-accent);
color: var(--color-primary);
}
.dropdown-container {
position: relative;
display: inline-block;
}
.dropdown-btn {
gap: var(--spacing-sm);
min-height: var(--button-height);
/* Touch-friendly size */
}
.dropdown-btn i.fa-chevron-down {
margin-left: 2px;
font-size: 0.7rem;
transition: transform 0.3s ease;
}
.dropdown-container.active .dropdown-btn i.fa-chevron-down {
transform: rotate(180deg);
}
/* Added vendor prefixes for better browser compatibility */
@supports (-webkit-appearance: none) or (-moz-appearance: none) {
select,
input[type="date"],
input[type="time"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
}
/* Improved mobile table handling */
@media (max-width: 768px) {
.dropdown-base,
.language-dropdown,
.dropdown-menu {
position: static;
opacity: 1;
visibility: visible;
transform: none;
margin-top: var(--spacing-sm);
width: 100%;
display: none;
}
.language-selector.active .language-dropdown,
.login-dropdown-container.active .login-dropdown,
.dropdown-container.active .dropdown-menu {
display: flex;
flex-direction: column;
}
/* Better table overflow handling on mobile */
.signature-list-table,
.attendance-list-table,
.request-list-table {
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
/* Smooth scrolling on iOS */
white-space: nowrap;
}
.signature-list-table::-webkit-scrollbar,
.attendance-list-table::-webkit-scrollbar,
.request-list-table::-webkit-scrollbar {
height: 8px;
}
.signature-list-table::-webkit-scrollbar-thumb,
.attendance-list-table::-webkit-scrollbar-thumb,
.request-list-table::-webkit-scrollbar-thumb {
background-color: var(--color-accent);
border-radius: 4px;
}
}
/* Added utility classes for common patterns */
.flex-center {
display: flex;
align-items: center;
justify-content: center;
}
.flex-between {
display: flex;
align-items: center;
justify-content: space-between;
}
.text-ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
/* ========================================
PERSONNEL SHOWCASE SECTION
======================================== */
.personnel-showcase-section {
background-color: var(--color-accent);
padding: 3rem 0;
}
.personnel-showcase-title {
font-family: var(--font-primary);
font-size: 2rem;
font-weight: 700;
color: var(--color-text);
text-align: center;
margin-bottom: 2rem;
}
.personnel-showcase-slider {
position: relative;
max-width: 1200px;
margin: 0 auto;
padding: 0 1rem;
}
.personnel-showcase-track {
display: flex;
gap: 1.5rem;
overflow-x: auto;
scroll-behavior: smooth;
scrollbar-width: none;
-ms-overflow-style: none;
padding: 1rem 0;
}
.personnel-showcase-track::-webkit-scrollbar {
display: none;
}
.personnel-showcase-card {
flex-shrink: 0;
width: 190px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 1.5rem;
padding: 1.5rem;
cursor: pointer;
text-align: center;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.personnel-showcase-card:hover {
transform: translateY(-5px);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}
.personnel-showcase-image {
flex-shrink: 0;
width: 80px;
height: 80px;
border-radius: 50%;
overflow: hidden;
border: 3px solid var(--color-primary);
}
.personnel-showcase-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.personnel-showcase-info {
flex: 1;
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.personnel-showcase-name {
font-family: var(--font-primary);
font-size: 1.125rem;
font-weight: 700;
color: var(--color-primary);
margin: 0;
}
.personnel-showcase-title-text {
font-family: var(--font-secondary);
font-size: 0.95rem;
font-weight: 500;
color: var(--color-text);
margin: 0;
}
.personnel-showcase-location {
font-family: var(--font-secondary);
font-size: 0.875rem;
color: var(--color-text);
margin: 0;
display: flex;
align-items: center;
gap: 0.5rem;
}
.personnel-showcase-location i {
color: var(--color-primary);
font-size: 0.75rem;
}
/* Removed slider button styles as buttons are removed */
/* Responsive Design */
/* Adding company account page styles */
/* Company Account Page */
.company-account-section {
background-color: var(--color-accent);
padding: 3rem 0;
min-height: calc(100vh - 200px);
}
.company-account-card {
max-width: 900px;
margin: 0 auto;
background-color: #f7f7ff;
border-radius: var(--border-radius-lg);
padding: 2.5rem;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
display: flex;
flex-direction: column;
gap: 2rem;
}
/* 1. satır: logo + 3 input yan yana */
.company-form-row-1 {
display: grid;
margin-bottom: 1rem;
grid-template-columns: 200px 1fr;
gap: 2rem;
align-items: start;
}
/* Sağdaki 3 input alt alta */
.company-top-inputs {
display: flex;
flex-direction: column;
gap: 1rem;
}
/* 2. satır: tam genişlikte inputlar */
.company-form-row-2 {
display: flex;
flex-direction: column;
gap: 1rem;
}
/* Logo alanı */
.company-logo-upload {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
}
.logo-upload-box {
width: 150px;
height: 150px;
border: 2px solid #d0d0d0;
border-radius: var(--border-radius);
background-color: var(--color-white);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: var(--transition);
background-size: cover;
background-position: center;
}
.logo-upload-box:hover {
border-color: var(--color-primary);
box-shadow: 0 4px 12px rgba(13, 27, 42, 0.2);
}
.logo-placeholder-icon {
font-size: 3rem;
color: #d0d0d0;
}
.logo-upload-text {
font-size: 0.9rem;
color: var(--color-text);
font-weight: 500;
text-align: center;
}
/* Inputlar */
.company-input {
width: 100%;
padding: 0.85rem 1rem;
border: 2px solid #d0d0d0;
border-radius: var(--border-radius);
font-size: 0.9rem;
background-color: var(--color-white);
transition: var(--transition);
}
.company-input:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(13, 27, 42, 0.1);
}
/* Buton */
.company-update-btn {
background-color: #00a400;
color: white;
border: none;
padding: 0.9rem 2rem;
border-radius: var(--border-radius);
font-size: 1rem;
font-weight: 700;
cursor: pointer;
transition: var(--transition);
align-self: flex-start;
min-width: 250px;
align-self: center;
box-shadow: 0 6px 20px rgba(0, 164, 0, 0.4);
}
.company-update-btn:hover {
background-color: #008800;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0, 164, 0, 0.4);
}
/* Responsive Design */
@media (max-width: 768px) {
.company-account-card {
padding: 1.5rem;
}
/* Stack logo and inputs vertically on mobile */
.company-form-row-1 {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.company-logo-upload {
margin: 0 auto;
}
.company-update-btn {
width: 100%;
min-width: auto;
}
}
@media (max-width: 480px) {
.company-account-section {
padding: 2rem 0;
}
.company-account-card {
padding: 1rem;
}
.logo-upload-box {
width: 120px;
height: 120px;
}
.company-input {
padding: 0.75rem;
font-size: 0.85rem;
}
}
/* Adding Personnel Results and Basket Styles */
/* Page Title Section */
.page-title-section {
background-color: var(--color-primary);
padding: 2rem 0;
}
.page-title {
color: var(--color-accent);
font-size: 2rem;
font-weight: 700;
margin: 0;
font-family: var(--font-primary);
}
/* Personnel Results Section */
.personnel-results-section {
background-color: var(--color-accent);
padding: 3rem 0;
min-height: 100vh;
}
.personnel-results-grid {
display: grid;
grid-template-columns: 45% 55%;
gap: 2rem;
align-items: start;
}
/* Personnel Listing (Left Side) */
.personnel-listing {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.personnel-result-card {
background-color: white;
border-radius: 8px;
padding: 0.875rem;
display: flex;
gap: 0.875rem;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
margin-bottom: 1rem;
border-left: 4px solid var(--color-success);
transition: all 0.3s ease;
}
.personnel-result-card:hover {
transform: translateY(-3px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.personnel-result-card.in-basket {
border-color: var(--color-success);
}
.personnel-result-left {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
}
.personnel-result-photo {
width: 92px;
height: 128px;
border-radius: 8px;
overflow: hidden;
border: 3px solid var(--color-primary);
}
.personnel-result-photo img {
width: 100%;
height: 100%;
object-fit: cover;
}
.personnel-result-rating {
display: flex;
gap: 0.25rem;
}
/* Making diamonds green with filter and adding hover effects */
.diamond-icon {
width: 16px;
height: 16px;
object-fit: contain;
filter: brightness(0) saturate(100%) invert(35%) sepia(98%) saturate(3091%) hue-rotate(104deg) brightness(98%) contrast(101%);
transition: filter 0.3s ease;
cursor: pointer;
}
.diamond-icon.diamond-empty {
filter: brightness(0) saturate(100%) invert(35%) sepia(98%) saturate(3091%) hue-rotate(104deg) brightness(98%) contrast(101%);
opacity: 0.3;
}
.diamond-icon:hover {
filter: brightness(0) saturate(100%) invert(35%) sepia(98%) saturate(3091%) hue-rotate(104deg) brightness(110%) contrast(101%);
}
.diamond-icon.diamond-empty:hover {
filter: brightness(0) saturate(100%) invert(35%) sepia(98%) saturate(3091%) hue-rotate(104deg) brightness(98%) contrast(101%);
opacity: 0.5;
}
.personnel-result-rating i {
color: #3793f5;
font-size: 1rem;
}
.personnel-result-info {
flex: 1;
display: flex;
flex-direction: column;
}
.personnel-result-name {
font-size: 1rem;
font-weight: 700;
color: var(--color-text-dark);
margin: 0 0 0.25rem 0;
font-family: var(--font-primary);
}
.personnel-result-phone {
font-size: 0.85rem;
color: var(--color-text-dark);
display: flex;
align-items: center;
gap: 0.5rem;
}
.whatsapp-icon {
color: #25d366;
font-size: 1.25rem;
}
.personnel-result-detail {
font-size: 0.75rem;
color: var(--color-text);
margin: 0.1rem 0;
line-height: 1.4;
}
.personnel-result-actions {
display: flex;
flex-direction: column;
gap: 0.75rem;
justify-content: center;
}
.personnel-action-btn {
padding: 0.5rem 0.875rem;
border: none;
border-radius: 6px;
font-size: 0.85rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
font-family: var(--font-primary);
width: 100%;
}
.add-to-list-btn {
background-color: #3b82f6;
color: white;
}
.add-to-list-btn:hover {
background-color: #2563eb;
transform: translateY(-2px);
}
.add-to-list-btn.added {
background-color: var(--color-success);
}
.add-to-list-btn.added:hover {
background-color: #008800;
}
.details-btn {
background-color: var(--color-success);
color: white;
}
.details-btn:hover {
background-color: #008800;
transform: translateY(-2px);
}
/* Personnel Basket (Right Side) */
.personnel-basket {
position: sticky;
top: 2rem;
background-color: white;
border-radius: 12px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
overflow: hidden;
max-height: calc(100vh - 4rem);
display: flex;
flex-direction: column;
}
.basket-header {
background-color: var(--color-primary);
padding: 1.5rem;
}
.basket-title {
color: var(--color-accent);
font-size: 1.125rem;
font-weight: 700;
margin: 0;
text-align: center;
font-family: var(--font-primary);
line-height: 1.4;
}
.basket-content {
flex: 1;
padding: 1.5rem;
overflow-y: auto;
max-height: 700px;
}
.basket-empty-message {
text-align: center;
color: var(--color-text);
font-size: 1rem;
padding: 2rem 0;
}
.basket-personnel-grid {
display: grid;
gap: 1rem;
}
/* Modernized basket personnel card design for better coherence */
.basket-personnel-card {
background-color: white;
border-radius: 8px;
padding: 1rem;
border: 2px solid #e5e7eb;
border-left: 4px solid var(--color-success);
display: flex;
gap: 0.75rem;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
}
.basket-personnel-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
border-color: var(--color-success);
}
/* Better photo styling with better proportions */
.basket-personnel-photo {
width: 84px;
height: 102px;
border-radius: 8px;
overflow: hidden;
border: 2px solid var(--color-primary);
flex-shrink: 0;
}
.basket-personnel-photo img {
width: 100%;
height: 100%;
object-fit: cover;
}
.basket-card-info {
flex: 1;
display: flex;
flex-direction: column;
gap: 0.35rem;
}
/* Better typography hierarchy */
.basket-personnel-name {
font-size: 0.9rem;
font-weight: 700;
color: var(--color-text-dark);
margin: 0;
font-family: var(--font-primary);
line-height: 1.3;
}
.basket-personnel-phone {
font-size: 0.75rem;
color: var(--color-text);
margin: 0;
display: flex;
align-items: center;
gap: 0.35rem;
font-weight: 500;
}
.basket-personnel-phone .whatsapp-icon {
font-size: 0.9rem;
color: #25d366;
}
.basket-personnel-details {
font-size: 0.7rem;
color: var(--color-text);
margin: 0;
line-height: 1.5;
}
.basket-personnel-details strong {
color: var(--color-text-dark);
font-weight: 600;
}
/* Improved rating display with better spacing */
.basket-personnel-rating {
display: flex;
gap: 0.25rem;
margin-top: 0.5rem;
}
.basket-personnel-rating .diamond-icon {
width: 14px;
height: 14px;
}
/* Modern button styling for basket card actions */
.basket-card-buttons {
display: flex;
gap: 0.5rem;
margin-top: 0.25rem;
}
.basket-card-btn {
padding: 0.5rem 0.75rem;
border: none;
border-radius: 6px;
font-size: 0.75rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
font-family: var(--font-primary);
white-space: nowrap;
flex: 1;
text-align: center;
}
.write-details-btn {
background-color: var(--color-success);
color: white;
}
.write-details-btn:hover {
background-color: #008800;
transform: translateY(-1px);
box-shadow: 0 2px 6px rgba(0, 164, 0, 0.3);
}
.remove-from-list-btn {
background-color: #ef4444;
color: white;
}
.remove-from-list-btn:hover {
background-color: #dc2626;
transform: translateY(-1px);
box-shadow: 0 2px 6px rgba(239, 68, 68, 0.3);
}
.basket-actions {
padding: 1.5rem;
border-top: 2px solid #e5e7eb;
display: flex;
justify-content: space-between;
align-items: stretch;
gap: 1rem;
}
.basket-actions-left {
display: flex;
flex-direction: column;
gap: 0.5rem;
flex: 0 0 auto;
}
.basket-actions-right {
display: flex;
align-items: stretch;
flex: 0 0 auto;
}
.basket-action-btn {
padding: 0.625rem 1rem;
border: none;
border-radius: 6px;
font-size: 0.8rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
font-family: var(--font-secondary);
white-space: nowrap;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
}
.save-request-btn {
background-color: #3b82f6;
color: white;
}
.save-request-btn:hover {
background-color: #2563eb;
transform: translateY(-2px);
}
.print-list-btn {
background-color: var(--color-success);
color: white;
}
.print-list-btn:hover {
background-color: #008800;
transform: translateY(-2px);
}
.saved-requests-btn {
background-color: var(--color-accent);
color: var(--color-text-dark);
border: 2px solid var(--color-primary);
}
.saved-requests-btn:hover {
background-color: #f5e84d;
transform: translateY(-2px);
}
/* Responsive Design */
@media (max-width: 1200px) {
.personnel-results-grid {
grid-template-columns: 40% 60%;
}
}
@media (max-width: 992px) {
.personnel-results-grid {
grid-template-columns: 1fr;
}
.personnel-basket {
position: relative;
top: 0;
max-height: none;
}
.basket-content {
max-height: none;
}
/* Stack basket actions vertically on smaller screens */
.basket-actions {
flex-direction: column;
}
.basket-actions-left,
.basket-actions-right {
width: 100%;
}
}
@media (max-width: 768px) {
.page-title {
font-size: 1.5rem;
}
.personnel-result-card {
flex-direction: column;
gap: 1rem;
}
.personnel-result-left {
flex-direction: row;
width: 100%;
justify-content: space-between;
}
.personnel-result-actions {
flex-direction: row;
width: 100%;
}
.personnel-action-btn {
flex: 1;
}
.basket-personnel-grid {
grid-template-columns: 1fr;
}
.basket-title {
font-size: 1rem;
}
}
@media (max-width: 480px) {
.personnel-results-section {
padding: 1.5rem 0;
}
.personnel-result-name {
font-size: 1.25rem;
}
.personnel-result-photo {
width: 100px;
height: 100px;
}
.basket-card-actions {
flex-direction: column;
}
}
/* Member Detail / Management Page */
.member-detail-section {
background-color: var(--color-accent);
padding: 3rem 0;
min-height: calc(100vh - 200px);
}
.member-detail-grid {
display: grid;
grid-template-columns: 480px 1fr;
gap: 2rem;
align-items: start;
}
.member-detail-left {
top: 2rem;
}
.member-detail-right {
width: 100%;
}
.member-management-panel {
background-color: white;
border-radius: 12px;
padding: 2rem;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
/* Photo Upload Section */
.member-photo-section {
display: flex;
gap: 1.5rem;
margin-bottom: 1.5rem;
align-items: flex-start;
}
.member-photo-upload {
flex-shrink: 0;
}
.member-photo-placeholder {
width: 280px;
height: 280px;
border: 3px dashed #d1d5db;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
background-color: #f9fafb;
}
.member-photo-placeholder:hover {
border-color: var(--color-primary);
background-color: #f3f4f6;
}
.member-photo-placeholder i {
font-size: 4rem;
color: #9ca3af;
}
.member-photo-placeholder img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 6px;
}
.member-warning {
flex: 1;
display: flex;
align-items: center;
}
.warning-text {
color: #dc2626;
font-size: 0.95rem;
line-height: 1.5;
margin: 0;
}
.warning-text strong {
display: block;
margin-bottom: 0.25rem;
}
/* Action Buttons */
.member-action-buttons {
flex: 1;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.member-action-btn {
padding: 0.875rem 1.25rem;
border: none;
border-radius: 8px;
font-size: 0.95rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
.saved-list-btn {
background-color: #3b82f6;
color: white;
}
.saved-list-btn:hover {
background-color: #2563eb;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(59, 130, 246, 0.3);
}
.open-list-btn {
background-color: var(--color-primary);
color: white;
}
.open-list-btn:hover {
background-color: #1a1f2e;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(13, 27, 42, 0.3);
}
.member-rating-section {
display: flex;
gap: 0.5rem;
align-items: center;
}
.rating-select {
padding: 0.625rem 0.75rem;
border: 2px solid #e5e7eb;
border-radius: 6px;
font-size: 0.875rem;
font-weight: 600;
cursor: pointer;
background-color: white;
width: 65px;
transition: all 0.3s ease;
}
.rating-select:focus {
outline: none;
border-color: var(--color-success);
}
.give-rating-btn {
flex: 1;
padding: 0.625rem 1rem;
background-color: var(--color-success);
color: white;
border: none;
border-radius: 6px;
font-size: 0.875rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.give-rating-btn:hover {
background-color: #008a00;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 164, 0, 0.3);
}
/* Member Information Form */
.member-info-form {
display: flex;
flex-direction: column;
gap: 1rem;
}
.member-info-form .form-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
}
/* Three-column layout for location inputs */
.member-info-form .form-row-three {
grid-template-columns: repeat(3, 1fr);
}
/* Reference input with inline button */
.reference-input-wrapper {
position: relative;
display: flex;
align-items: center;
}
.reference-input-wrapper .reference-input {
flex: 1;
padding-right: 140px;
}
/* Adding styles for Open Personnel Request page */
/* Open Personnel Request Section */
.open-request-section {
padding: 3rem 0;
background-color: var(--color-accent);
min-height: calc(100vh - 200px);
}
.open-request-panel {
background-color: white;
border-radius: 16px;
padding: 2.5rem;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
/* Personnel Grid - 2 columns */
.open-request-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
margin-bottom: 2rem;
}
/* Personnel Card */
.open-request-card {
background-color: white;
border: 2px solid #e5e7eb;
border-left: 4px solid var(--color-success);
border-radius: 12px;
padding: 1.25rem;
display: grid;
grid-template-columns: 120px 1fr auto; /* Left: 120px, Middle: flexible, Right: auto */
gap: 1.5rem;
align-items: start; /* Align to top */
transition: all 0.3s ease;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.open-request-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
border-color: var(--color-success);
}
/* Alternate border colors for visual variety */
.open-request-card:nth-child(4n + 2) {
border-left-color: #3b82f6;
}
.open-request-card:nth-child(4n + 3) {
border-left-color: #f59e0b;
}
.open-request-card:nth-child(4n + 4) {
border-left-color: #8b5cf6;
}
.open-request-left {
display: flex;
flex-direction: column;
gap: 0.75rem;
align-items: center;
}
.open-request-photo {
width: 120px;
height: 170px;
border-radius: 10px;
overflow: hidden;
border: 2px solid var(--color-primary);
}
.open-request-photo img {
width: 100%;
height: 100%;
object-fit: cover;
}
.open-request-info {
flex: 1;
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.open-request-name {
font-size: 1.25rem;
font-weight: 600;
color: var(--color-primary);
margin-bottom: 0.25rem;
}
.open-request-detail {
font-size: 0.9rem;
color: #4b5563;
margin: 0;
}
.open-request-phone {
font-size: 0.85rem;
color: var(--color-text);
margin: 0;
display: flex;
align-items: center;
gap: 0.4rem;
font-weight: 500;
}
.open-request-phone .whatsapp-icon {
font-size: 1rem;
color: #25d366;
}
.open-request-detail {
font-size: 0.8rem;
color: var(--color-text);
margin: 0;
line-height: 1.5;
}
.open-request-detail strong {
color: var(--color-text-dark);
font-weight: 600;
}
.open-request-rating {
display: flex;
gap: 0.25rem;
justify-content: center;
}
.open-request-rating .diamond-icon {
width: 18px;
height: 18px;
}
/* Middle Column: Info */
.open-request-info {
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.open-request-actions {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.open-request-btn {
padding: 0.5rem 0.85rem;
border: none;
border-radius: 6px;
font-size: 0.75rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
font-family: var(--font-primary);
white-space: nowrap;
}
.write-details-btn {
background-color: var(--color-success);
color: white;
}
.write-details-btn:hover {
background-color: #008800;
transform: translateY(-1px);
box-shadow: 0 2px 6px rgba(0, 164, 0, 0.3);
}
.remove-btn {
background-color: #ef4444;
color: white;
}
.remove-btn:hover {
background-color: #dc2626;
transform: translateY(-1px);
box-shadow: 0 2px 6px rgba(239, 68, 68, 0.3);
}
/* Bottom Actions */
.open-request-bottom {
display: flex;
justify-content: space-between;
align-items: flex-start;
padding-top: 1.5rem;
margin-top: 1.5rem;
border-top: 2px solid #e5e7eb;
gap: 2rem;
}
.open-request-bottom-left {
display: flex;
flex-direction: column;
gap: 0.75rem;
flex: 1;
max-width: 400px;
}
.request-name-label {
font-size: 1rem;
color: var(--color-text-dark);
font-weight: 600;
margin: 0 0 0.5rem 0;
}
.request-name-value {
color: var(--color-text);
font-weight: 400;
}
.open-request-bottom-right {
display: flex;
align-items: flex-start;
}
.open-request-action-btn {
padding: 0.85rem 1.75rem;
border: none;
border-radius: 8px;
font-size: 0.95rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
font-family: var(--font-secondary);
white-space: nowrap;
min-height: 48px;
display: flex;
align-items: center;
justify-content: center;
}
.save-new-request-btn {
background-color: #3b82f6;
color: white;
width: 100%;
}
.save-new-request-btn:hover {
background-color: #2563eb;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}
.edit-request-btn {
background-color: var(--color-accent);
color: var(--color-text-dark);
width: 100%;
}
.edit-request-btn:hover {
background-color: #ffd54f;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(255, 227, 113, 0.4);
}
.print-request-btn {
background-color: var(--color-success);
color: white;
min-width: 280px;
}
.print-request-btn:hover {
background-color: #008800;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 164, 0, 0.3);
}
/* Responsive Design */
@media (max-width: 1200px) {
.open-request-grid {
gap: 1.25rem;
}
.open-request-card {
padding: 1rem;
}
}
@media (max-width: 992px) {
.open-request-panel {
padding: 2rem;
}
.open-request-grid {
grid-template-columns: 1fr;
gap: 1rem;
}
.open-request-bottom {
flex-direction: column;
align-items: stretch;
gap: 1.5rem;
}
.open-request-bottom-left {
max-width: 100%;
}
.open-request-bottom-right {
align-items: stretch;
}
.open-request-action-btn {
width: 100%;
}
.print-request-btn {
min-width: auto;
}
}
@media (max-width: 768px) {
.open-request-section {
padding: 2rem 0;
}
.open-request-panel {
padding: 1.5rem;
}
.open-request-card {
grid-template-columns: 1fr; /* Stack on mobile */
gap: 1rem;
}
.open-request-left {
margin: 0 auto;
}
.open-request-photo {
width: 100px;
height: 100px;
}
.open-request-footer {
flex-direction: column;
gap: 1rem;
align-items: stretch;
}
.open-request-actions {
width: 100%;
}
.open-request-btn {
flex: 1;
}
.open-request-bottom-left {
gap: 0.5rem;
}
.open-request-action-btn {
padding: 0.65rem 1rem;
font-size: 0.85rem;
}
}
@media (max-width: 480px) {
.open-request-panel {
padding: 1rem;
}
.open-request-card {
padding: 0.85rem;
}
.open-request-name {
font-size: 1rem;
}
.open-request-phone,
.open-request-detail {
font-size: 0.75rem;
}
.open-request-btn {
font-size: 0.75rem;
padding: 0.45rem 0.65rem;
}
}
/* Adding signature list page styles */
/* Signature List Styles */
.signature-list-section {
background-color: var(--color-accent);
min-height: calc(100vh - 200px);
padding: 3rem 0;
}
.signature-list-wrapper {
background-color: white;
border-radius: 12px;
padding: 2rem;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
.signature-list-header {
margin-bottom: 2rem;
border-bottom: 2px solid #e5e7eb;
padding-bottom: 1rem;
}
.signature-header-row {
display: flex;
align-items: center;
padding: 0.75rem 0;
border-bottom: 1px solid #f3f4f6;
}
.signature-header-row:last-child {
border-bottom: none;
}
.signature-header-label {
font-weight: 600;
color: var(--color-text-dark);
min-width: 100px;
font-size: 1rem;
}
.signature-header-value {
color: var(--color-text);
font-size: 1rem;
}
.signature-table-container {
overflow-x: auto;
}
.signature-table {
width: 100%;
border-collapse: collapse;
background-color: white;
}
.signature-table thead {
background-color: var(--color-accent);
}
.signature-table th {
padding: 1rem 0.75rem;
text-align: left;
font-weight: 600;
color: var(--color-text-dark);
border: 1px solid #d1d5db;
font-size: 0.95rem;
}
.signature-table td {
padding: 1rem 0.75rem;
border: 1px solid #d1d5db;
vertical-align: middle;
}
.signature-table tbody tr {
transition: background-color 0.2s ease;
}
.signature-table tbody tr:hover {
background-color: #f9fafb;
}
.export-signature-list-btn {
background-color: var(--color-success);
color: var(--color-white);
border: none;
padding: 0.75rem 2rem;
border-radius: var(--border-radius);
font-size: 1rem;
font-weight: 600;
cursor: pointer;
margin-bottom: 1rem;
}
/* Column Widths */
.col-number {
width: 80px;
}
.col-photo {
width: 100px;
}
.col-contact {
width: 200px;
}
.col-signature {
width: 150px;
}
.col-work-area {
width: 150px;
}
.col-reference {
width: 150px;
}
/* Cell Styles */
.text-center {
text-align: center;
font-weight: 600;
font-size: 1.1rem;
color: var(--color-text-dark);
}
.photo-cell {
text-align: center;
padding: 0.5rem;
}
.photo-cell img {
width: 60px;
height: 60px;
object-fit: cover;
border-radius: 4px;
border: 2px solid #e5e7eb;
}
.contact-cell {
padding: 0.75rem;
}
.contact-name {
font-weight: 600;
color: var(--color-text-dark);
margin-bottom: 0.25rem;
font-size: 0.95rem;
}
.contact-phone {
color: var(--color-text);
font-size: 0.85rem;
line-height: 1.4;
}
.signature-cell {
background-color: #f9fafb;
min-height: 80px;
}
.work-area-cell {
background-color: #f9fafb;
}
/* Changed reference cell background to primary color (yellow) */
.reference-cell {
padding: 0.5rem;
background-color: var(--color-primary);
text-align: center;
vertical-align: middle;
}
/* Added styles for PRS logo image in reference column */
.reference-logo-img {
max-width: 100px;
height: auto;
display: block;
margin: 0 auto;
}
/* Removed old text-based reference logo styles */
.reference-logo {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 0.5rem;
}
/* Print Styles */
@media print {
/* Hide export button when printing */
.signature-list-actions {
display: none;
}
body {
background-color: white;
}
.signature-list-section {
background-color: white;
padding: 0;
}
.signature-list-wrapper {
box-shadow: none;
padding: 1rem;
}
.signature-table {
page-break-inside: auto;
}
.signature-table tr {
page-break-inside: avoid;
page-break-after: auto;
}
.signature-table thead {
display: table-header-group;
}
/* Ensure reference cell prints with yellow background */
.reference-cell {
background-color: #ffe371 !important;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
}
/* Responsive Design */
@media (max-width: 1200px) {
.signature-table {
font-size: 0.9rem;
}
.signature-table th,
.signature-table td {
padding: 0.75rem 0.5rem;
}
/* Adjust logo size for smaller screens */
.reference-logo-img {
max-width: 80px;
}
}
@media (max-width: 992px) {
.signature-list-wrapper {
padding: 1.5rem;
}
.signature-header-label {
min-width: 80px;
font-size: 0.9rem;
}
.signature-header-value {
font-size: 0.9rem;
}
}
@media (max-width: 768px) {
.signature-list-wrapper {
padding: 1rem;
border-radius: 8px;
}
.signature-header-row {
flex-direction: column;
align-items: flex-start;
gap: 0.25rem;
}
.signature-header-label {
min-width: auto;
}
}
/* Attendance List Styles */
.attendance-list-section {
background-color: var(--color-accent);
min-height: calc(100vh - 200px);
padding: 3rem 0;
}
.attendance-search-panel {
max-width: 600px;
margin: 0 0 3rem 0;
/* <-- Ortalamayı kaldırdık, sola yasladık */
background-color: white;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
.attendance-search-header {
background-color: var(--color-primary);
color: white;
padding: 1rem 1.5rem;
font-size: 1.1rem;
font-weight: 600;
text-align: center;
}
.attendance-search-content {
padding: 2rem 1.5rem;
}
.attendance-search-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
margin-bottom: 1.5rem;
}
.attendance-search-field {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.attendance-search-field label {
font-weight: 600;
color: var(--color-text-dark);
font-size: 0.95rem;
}
.attendance-select {
padding: 0.75rem 1rem;
border: 1px solid #d1d5db;
border-radius: 8px;
font-size: 0.95rem;
color: var(--color-text);
background-color: white;
cursor: pointer;
transition: all 0.3s ease;
}
.attendance-select:focus {
outline: none;
border-color: var(--color-success);
box-shadow: 0 0 0 3px rgba(0, 164, 0, 0.1);
}
.show-attendance-btn {
width: 100%;
background-color: var(--color-success);
color: white;
border: none;
padding: 0.875rem 1.5rem;
border-radius: 8px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 2px 8px rgba(0, 164, 0, 0.2);
}
.show-attendance-btn:hover {
background-color: var(--color-success-hover);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 164, 0, 0.3);
}
/* Attendance Table */
.attendance-table-wrapper {
background-color: white;
border-radius: 12px;
padding: 2rem;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
.attendance-table-container {
overflow-x: auto;
margin-bottom: 2rem;
}
.attendance-table {
width: 100%;
border-collapse: collapse;
background-color: white;
min-width: 1800px;
}
.attendance-table thead {
background-color: #f3f4f6;
}
.attendance-table th {
padding: 0.75rem 0.5rem;
text-align: center;
font-weight: 600;
color: var(--color-text-dark);
border: 1px solid #d1d5db;
font-size: 0.9rem;
white-space: nowrap;
}
.attendance-table td {
padding: 0.75rem 0.5rem;
border: 1px solid #d1d5db;
text-align: center;
min-height: 50px;
background-color: white;
}
.attendance-table tbody tr:hover {
background-color: #f9fafb;
}
/* Column Widths */
.col-order {
width: 80px;
min-width: 80px;
}
.col-name {
width: 200px;
min-width: 200px;
text-align: left;
}
.col-day {
width: 40px;
min-width: 40px;
}
.col-total {
width: 80px;
min-width: 80px;
background-color: #f3f4f6;
font-weight: 600;
}
/* Actions */
.attendance-actions {
display: flex;
justify-content: flex-end;
}
.print-attendance-btn {
background-color: white;
color: var(--color-text-dark);
border: 2px solid var(--color-text-dark);
padding: 0.75rem 2rem;
border-radius: 8px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.print-attendance-btn:hover {
background-color: var(--color-text-dark);
color: white;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
/* Print Styles */
@media print {
.attendance-search-panel,
.attendance-actions {
display: none;
}
body {
background-color: white;
}
.attendance-list-section {
background-color: white;
padding: 0;
}
.attendance-table-wrapper {
box-shadow: none;
padding: 1rem;
}
.attendance-table {
page-break-inside: auto;
}
.attendance-table tr {
page-break-inside: avoid;
page-break-after: auto;
}
.attendance-table thead {
display: table-header-group;
}
}
/* Responsive Design */
@media (max-width: 768px) {
.attendance-list-section {
padding: 2rem 0;
}
.attendance-search-panel {
margin: 0 1rem 2rem;
}
.attendance-search-row {
grid-template-columns: 1fr;
gap: 1rem;
}
.attendance-table-wrapper {
padding: 1rem;
border-radius: 8px;
margin: 0 1rem;
}
.attendance-table-container {
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
}
.print-attendance-btn {
width: 100%;
}
}
@media (max-width: 480px) {
.attendance-search-content {
padding: 1.5rem 1rem;
}
.attendance-search-header {
font-size: 1rem;
padding: 0.875rem 1rem;
}
.show-attendance-btn {
padding: 0.75rem 1rem;
font-size: 0.95rem;
}
}
/* ========================================
PERSONNEL SEARCH SECTION
======================================== */
/* Adding complete personnel search section styles that were missing */
.personnel-search-section {
background-color: var(--color-accent);
padding: 2rem 0 4rem 0;
min-height: 600px;
}
.personnel-search-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
align-items: start;
}
.personnel-map-container {
position: relative;
}
.personnel-world-map {
z-index: 999;
min-height: 500px;
background-image: url("public/general/background.jpg");
background-size: cover;
background-position: center;
border-radius: var(--border-radius-lg);
position: relative;
overflow: hidden;
}
#personnelPinsContainer {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
}
.personnel-pin {
position: absolute;
width: 40px;
height: 40px;
border-radius: 50%;
border: 3px solid var(--color-white);
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
animation: pulse 2s infinite;
cursor: pointer;
pointer-events: auto;
}
.personnel-pin img {
width: 100%;
height: 100%;
object-fit: cover;
}
@keyframes pulse {
0%,
100% {
transform: scale(1);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
50% {
transform: scale(1.1);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
}
.personnel-search-panel {
background-color: var(--color-white);
border-radius: var(--border-radius-lg);
overflow: hidden;
box-shadow: var(--shadow-lg);
}
.personnel-panel-header {
background-color: var(--color-primary);
padding: 1.5rem;
text-align: center;
}
.personnel-panel-title {
color: var(--color-white);
font-size: 1.3rem;
font-weight: 600;
margin: 0;
line-height: 1.4;
}
.personnel-panel-content {
padding: 2rem;
}
.personnel-toggle-buttons {
display: flex;
gap: 1rem;
margin-bottom: 2rem;
}
.personnel-toggle-btn {
flex: 1;
padding: 0.75rem 1.5rem;
border: none;
border-radius: var(--border-radius);
font-weight: 600;
font-size: 1rem;
cursor: pointer;
transition: var(--transition);
text-decoration: none; /* Add this */
display: inline-block;
}
.personnel-toggle-btn.active {
background-color: var(--color-accent);
color: var(--color-primary);
}
.personnel-toggle-btn:not(.active) {
background-color: var(--color-primary);
color: var(--color-white);
}
.personnel-toggle-btn:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-sm);
}
.personnel-search-form {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.personnel-form-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}
.personnel-form-row-2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
.personnel-form-group {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.personnel-form-label {
font-size: 0.9rem;
font-weight: 500;
color: var(--color-text);
}
.personnel-form-select {
padding: 0.75rem;
border: 1px solid #ddd;
border-radius: var(--border-radius);
font-size: 0.9rem;
background-color: var(--color-white);
cursor: pointer;
transition: var(--transition);
}
.personnel-form-select:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(13, 27, 42, 0.1);
}
.personnel-search-btn {
background-color: var(--color-success);
color: var(--color-white);
border: none;
padding: 1rem 2rem;
border-radius: var(--border-radius);
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: var(--transition);
margin-top: 0.5rem;
width: 60%;
max-width: 250px;
margin-left: auto;
margin-right: auto;
display: block;
}
.personnel-search-btn:hover {
background-color: #008800;
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.personnel-info-note {
background-color: #f8f9fa;
padding: 1rem;
border-radius: var(--border-radius);
font-size: 0.85rem;
line-height: 1.5;
color: #666;
margin-top: 1.5rem;
}
.personnel-info-note strong {
color: var(--color-primary);
}
/* Management Panel Section */
.management-panel-section {
background-color: var(--color-accent);
padding: 0 0 4rem 0;
}
.management-panel-header {
background-color: var(--color-primary);
padding: 1.5rem 0;
text-align: center;
margin-bottom: 3rem;
}
.management-panel-title {
color: var(--color-accent);
display: inline-block;
padding: 0.75rem 3rem;
border-radius: var(--border-radius);
font-size: 2rem;
font-weight: 700;
margin: 0;
}
.management-panel-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 3rem;
max-width: 1000px;
margin: 0 auto;
}
.management-panel-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 1.5rem;
}
.management-icon-circle {
width: 200px;
height: 200px;
border-radius: 50%;
background-color: var(--color-accent);
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--shadow-lg);
transition: var(--transition);
}
.management-icon-circle:hover {
transform: translateY(-5px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}
.management-icon-img {
width: 140px;
height: 140px;
object-fit: contain;
}
.management-icon {
width: 140px;
height: 140px;
color: var(--color-primary);
}
.management-panel-btn {
background-color: var(--color-accent);
color: var(--color-primary);
border: none;
padding: 0.75rem 2rem;
border-radius: var(--border-radius);
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: var(--transition);
white-space: nowrap;
}
.management-panel-btn:hover {
background-color: #ffd84d;
transform: translateY(-2px);
box-shadow: var(--shadow-sm);
}
/* Added passive jobs section with yellow background */
.passive-jobs-section {
background-color: var(--color-accent) !important;
padding: 4rem 0 6rem 0;
}
.passive-jobs-section .section-title {
background-color: var(--color-primary);
color: var(--color-accent);
}
.h-100 {
height: 100% !important;
}
.w-100 {
width: 100% !important;
}
/* Added responsive styles for ilan-islemleri page */
/* Personnel Search Section - Mobile */
@media (max-width: 768px) {
.burger-menu {
display: flex;
}
/* Personnel Search Page - Mobile Responsive */
.personnel-search-section {
padding: 1.5rem 0 2rem 0;
min-height: auto;
}
.personnel-search-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.personnel-search-panel {
order: 1;
}
.personnel-world-map {
min-height: 300px;
}
.search-input {
font-size: 0.9rem;
padding: 0.75rem 1rem 0.75rem 2.5rem;
}
.personnel-panel-header {
padding: 1.25rem;
}
.personnel-panel-title {
font-size: 1.1rem;
line-height: 1.3;
}
.personnel-panel-content {
padding: 1.5rem;
}
.personnel-form-row {
grid-template-columns: 1fr;
gap: 1rem;
}
.personnel-form-group {
margin-bottom: 0;
}
.personnel-form-label {
font-size: 0.9rem;
}
.personnel-form-select,
.personnel-date-picker {
font-size: 0.9rem;
padding: 0.75rem;
}
.personnel-toggle-buttons {
flex-direction: column;
gap: 0.75rem;
margin-bottom: 1.5rem;
}
.personnel-toggle-btn {
padding: 0.875rem 1.5rem;
font-size: 0.95rem;
}
.personnel-search-btn {
width: 100%;
max-width: 100%;
padding: 1rem;
font-size: 1rem;
}
.personnel-info-note {
font-size: 0.8rem;
padding: 0.875rem;
line-height: 1.5;
}
/* FAQ Page - Mobile Responsive */
.faq-content {
padding: 2rem 0;
}
.faq-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.faq-card {
padding: 1.5rem;
flex-direction: column;
gap: 1rem;
}
.faq-icon {
width: 2.5rem;
height: 2.5rem;
}
.faq-icon i {
font-size: 2.5rem;
}
.faq-question {
font-size: 1rem;
margin-bottom: 0.5rem;
}
.faq-answer {
font-size: 0.85rem;
line-height: 1.5;
}
/* Contact Page - Mobile Responsive */
.contact-content {
padding: 2rem 0;
}
.contact-description {
padding: 0 1rem;
margin-bottom: 2rem;
}
.contact-description p {
font-size: 0.9rem;
line-height: 1.6;
text-align: left;
}
.contact-container {
grid-template-columns: 1fr;
gap: 2rem;
padding: 2rem 1.5rem;
margin: 0 1rem;
}
.contact-info {
padding-left: 0;
gap: 1.5rem;
}
.contact-info-title {
font-size: 1.1rem;
}
.contact-info-underline {
width: 80px;
}
.contact-info-text {
font-size: 0.9rem;
}
.contact-social-icons {
justify-content: flex-start;
}
.contact-social-icon {
width: 45px;
height: 45px;
font-size: 1.3rem;
}
.contact-form {
gap: 1rem;
}
.contact-form-input,
.contact-form-textarea {
padding: 0.75rem 1rem;
font-size: 0.95rem;
}
.contact-submit-btn {
padding: 0.875rem 1.5rem;
font-size: 0.95rem;
}
}
/* ====== PROFILE STRENGTHEN PAGE RESPONSIVE STYLES ====== */
/* Adding comprehensive responsive styles for profile strengthen page */
@media (max-width: 768px) {
.profile-strengthen-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.feature-card {
width: 400px;
}
.profile-form-card {
max-width: 100%;
}
.profile-form-header {
width: 95%;
padding: 0.6rem 1rem;
font-size: 0.9rem;
}
.form-header-diamond {
width: 30px;
height: 30px;
}
.profile-form-header span {
font-size: 0.95rem;
}
.form-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.form-left {
order: 2;
}
.form-right {
order: 1;
}
.location-row {
grid-template-columns: 1fr;
gap: 1rem;
}
.calendar-widget {
max-width: 100%;
}
.calendar-grid {
gap: 0.2rem;
}
.calendar-day {
font-size: 0.75rem;
}
.profile-input,
.profile-select {
font-size: 0.85rem;
padding: 0.8rem;
}
.work-preference-title {
font-size: 0.9rem;
}
.checkbox-label {
font-size: 0.85rem;
}
.profile-submit-btn {
width: 100%;
padding: 0.9rem;
font-size: 0.95rem;
}
}
@media (max-width: 480px) {
.profile-strengthen-section {
padding: 1.5rem 0;
}
.profile-form-content {
padding: 1rem;
}
.form-field-group {
margin-bottom: 1rem;
}
.profile-form-header {
padding: 0.5rem 0.8rem;
font-size: 0.85rem;
}
.form-header-diamond {
width: 25px;
height: 25px;
}
.profile-form-header span {
font-size: 0.85rem;
}
.profile-input,
.profile-select {
font-size: 0.8rem;
padding: 0.7rem;
}
.calendar-widget {
padding: 1rem;
}
.calendar-upload-btn {
padding: 0.5rem 1rem;
font-size: 0.85rem;
}
.calendar-title {
font-size: 0.8rem;
}
.calendar-day {
font-size: 0.7rem;
}
.calendar-day-header {
font-size: 0.7rem;
}
.current-month-year {
font-size: 0.85rem;
}
.work-preference-title {
font-size: 0.85rem;
}
.checkbox-label {
font-size: 0.8rem;
}
.profile-checkbox {
width: 18px;
height: 18px;
}
.photo-placeholder {
min-height: 150px;
font-size: 0.85rem;
}
}
/* */
/* Job Plans Page - Enhanced Mobile Responsive */
@media (max-width: 768px) {
.job-plans-grid {
grid-template-columns: 1fr;
gap: 2rem;
}
.job-filter-card {
padding: 1.25rem;
}
.filter-inputs {
grid-template-columns: 1fr;
}
.filter-btn {
width: 100%;
height: 40px;
}
.job-plan-card {
padding: 1rem;
}
.job-plan-content {
flex-direction: column;
gap: 1rem;
}
.job-plan-left,
.job-plan-right {
width: 100%;
}
.job-plan-right {
align-items: flex-start;
}
.job-remove-btn {
width: 100%;
margin-top: 0.5rem;
}
}
/* Business Card Page - Enhanced Mobile Responsive */
@media (max-width: 768px) {
.business-card {
grid-template-columns: 1fr;
}
.business-card-left {
padding: 2rem 1.5rem;
}
.business-card-photo {
width: 150px;
height: 150px;
}
.business-card-right {
padding: 2rem 1.5rem;
}
.business-card-name {
font-size: 1.5rem;
text-align: center;
}
.business-card-badge {
margin: 0 auto;
}
}
@media (max-width: 480px) {
.business-card-section {
padding: 2rem 0;
}
.business-card-left {
padding: 1.5rem 1rem;
}
.business-card-photo {
width: 120px;
height: 120px;
}
.business-card-right {
padding: 1.5rem 1rem;
}
.business-card-name {
font-size: 1.25rem;
}
.business-card-info-item {
flex-direction: column;
gap: 0.5rem;
}
.business-card-icon {
width: 30px;
height: 30px;
}
.business-card-icon i {
font-size: 1.25rem;
}
}
/* CV Section - Enhanced Mobile Responsive */
@media (max-width: 768px) {
.cv-grid {
grid-template-columns: 1fr;
gap: 2rem;
}
.about-info-card {
max-width: 100%;
}
.cv-form-card {
flex-direction: column;
}
.cv-prs-stripe {
width: 100%;
height: 60px;
flex-direction: row;
padding: 1rem;
}
.cv-top-section {
grid-template-columns: 1fr;
gap: 1rem;
}
.cv-photo-box {
width: 120px;
height: 120px;
margin: 0 auto;
}
.cv-row-2,
.cv-row-3 {
grid-template-columns: 1fr;
}
.cv-actions {
flex-direction: column;
width: 100%;
}
.cv-btn {
width: 100%;
}
}
/* Job Detail Page - Enhanced Mobile Responsive */
@media (max-width: 768px) {
.job-detail-card {
grid-template-columns: 1fr;
padding: 1.5rem;
}
.job-detail-left {
flex-direction: row;
border-right: none;
border-bottom: 2px solid #e0e0e0;
padding-right: 0;
padding-bottom: 1.5rem;
}
.job-detail-logo {
width: 80px;
height: 80px;
}
.job-detail-middle {
border-right: none;
border-bottom: 2px solid #e0e0e0;
padding-right: 0;
padding-bottom: 1.5rem;
}
.job-detail-actions {
flex-direction: column;
gap: 1rem;
}
.job-social-share {
justify-content: center;
width: 100%;
}
.job-apply-btn {
width: 100%;
}
.recommended-jobs-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 480px) {
.job-detail-section {
padding: 2rem 0;
}
.job-detail-card {
padding: 1rem;
}
.job-detail-logo {
width: 60px;
height: 60px;
}
.job-publish-date {
font-size: 0.75rem;
}
.job-detail-label {
font-size: 0.9rem;
}
.job-note-content {
padding: 1rem;
font-size: 0.85rem;
}
.job-social-btn {
width: 40px;
height: 40px;
font-size: 1.1rem;
}
}
/* FAQ Page - Enhanced Mobile Responsive */
@media (max-width: 768px) {
.faq-content {
padding: 2rem 0;
}
.faq-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.faq-card {
padding: 1.5rem;
}
.faq-icon {
width: 2.5rem;
height: 2.5rem;
}
.faq-icon i {
font-size: 2.5rem;
}
.faq-question {
font-size: 1rem;
}
.faq-answer {
font-size: 0.85rem;
}
}
@media (max-width: 480px) {
.faq-card {
padding: 1.25rem;
flex-direction: column;
align-items: center;
text-align: center;
}
.faq-icon {
width: 2rem;
height: 2rem;
}
.faq-icon i {
font-size: 2rem;
}
.faq-question {
font-size: 0.95rem;
}
.faq-answer {
font-size: 0.8rem;
}
}
/* Contact Page - Enhanced Mobile Responsive */
@media (max-width: 768px) {
.contact-content {
padding: 2rem 0;
}
.contact-description {
padding: 0 1rem;
margin-bottom: 2rem;
}
.contact-description p {
font-size: 0.9rem;
}
.contact-container {
grid-template-columns: 1fr;
gap: 2rem;
padding: 2rem 1.5rem;
margin: 0 1rem;
}
.contact-info {
padding-left: 0;
}
.contact-info-title {
font-size: 1.1rem;
}
.contact-info-text {
font-size: 0.9rem;
}
.contact-social-icons {
justify-content: center;
}
.contact-form-input,
.contact-form-textarea {
padding: 0.75rem 1rem;
font-size: 0.9rem;
}
.contact-submit-btn {
width: 100%;
}
}
@media (max-width: 480px) {
.contact-container {
padding: 1.5rem 1rem;
border-radius: var(--border-radius);
}
.contact-info-title {
font-size: 1rem;
}
.contact-info-text {
font-size: 0.85rem;
}
.contact-social-icon {
width: 45px;
height: 45px;
font-size: 1.25rem;
}
.contact-form-input,
.contact-form-textarea {
padding: 0.65rem 0.875rem;
font-size: 0.85rem;
}
}
/* Dark Ilanlar Page - Enhanced Mobile Responsive */
@media (max-width: 768px) {
.jobs-listing-section-light {
padding: 2rem 0;
}
.jobs-listing-search {
margin: 0 1rem 2rem;
}
.jobs-listing-search-input {
padding: 0.875rem 1rem 0.875rem 3rem;
font-size: 0.9rem;
}
.recommended-jobs-grid {
grid-template-columns: repeat(auto-fit, minmax(100px,1fr));
gap: 1.5rem;
padding: 0 1rem;
}
.jobs-listing-separator-dark {
margin: 2rem 1rem;
}
}
@media (max-width: 480px) {
.jobs-listing-search-input {
padding: 0.75rem 0.875rem 0.75rem 2.75rem;
font-size: 0.85rem;
}
.jobs-listing-search-icon {
left: 1rem;
font-size: 1rem;
}
.recommended-job-card {
padding: 1.25rem;
}
.recommended-job-logo {
width: 60px;
height: 60px;
}
.recommended-job-position {
font-size: 1.1rem;
}
.recommended-apply-btn {
padding: 0.65rem 1.5rem;
font-size: 0.9rem;
}
.recommended-details-link {
font-size: 0.85rem;
}
}
/* ====== PROFILE STRENGTHEN PAGE RESPONSIVE STYLES ====== */
/* Adding comprehensive responsive styles for profile strengthen page */
@media (max-width: 768px) {
.profile-strengthen-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.feature-card {
width: 400px;
}
.profile-form-card {
max-width: 100%;
}
.profile-form-header {
width: 95%;
padding: 0.6rem 1rem;
font-size: 0.9rem;
}
.form-header-diamond {
width: 30px;
height: 30px;
}
.profile-form-header span {
font-size: 0.95rem;
}
.form-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.form-left {
order: 2;
}
.form-right {
order: 1;
}
.location-row {
grid-template-columns: 1fr;
gap: 1rem;
}
.calendar-widget {
max-width: 100%;
}
.calendar-grid {
gap: 0.2rem;
}
.calendar-day {
font-size: 0.75rem;
}
.profile-input,
.profile-select {
font-size: 0.85rem;
padding: 0.8rem;
}
.work-preference-title {
font-size: 0.9rem;
}
.checkbox-label {
font-size: 0.85rem;
}
.profile-submit-btn {
width: 100%;
padding: 0.9rem;
font-size: 0.95rem;
}
}
@media (max-width: 480px) {
.profile-strengthen-section {
padding: 1.5rem 0;
}
.profile-form-content {
padding: 1rem;
}
.form-field-group {
margin-bottom: 1rem;
}
.profile-form-header {
padding: 0.5rem 0.8rem;
font-size: 0.85rem;
}
.form-header-diamond {
width: 25px;
height: 25px;
}
.profile-form-header span {
font-size: 0.85rem;
}
.profile-input,
.profile-select {
font-size: 0.8rem;
padding: 0.7rem;
}
.calendar-widget {
padding: 1rem;
}
.calendar-upload-btn {
padding: 0.5rem 1rem;
font-size: 0.85rem;
}
.calendar-title {
font-size: 0.8rem;
}
.calendar-day {
font-size: 0.7rem;
}
.calendar-day-header {
font-size: 0.7rem;
}
.current-month-year {
font-size: 0.85rem;
}
.work-preference-title {
font-size: 0.85rem;
}
.checkbox-label {
font-size: 0.8rem;
}
.profile-checkbox {
width: 18px;
height: 18px;
}
.photo-placeholder {
min-height: 150px;
font-size: 0.85rem;
}
}
/* */
/* Job Plans Page - Enhanced Mobile Responsive */
@media (max-width: 768px) {
.job-plans-grid {
grid-template-columns: 1fr;
gap: 2rem;
}
.job-filter-card {
padding: 1.25rem;
}
.filter-inputs {
grid-template-columns: 1fr;
}
.filter-btn {
width: 100%;
height: 40px;
}
.job-plan-card {
padding: 1rem;
}
.job-plan-content {
flex-direction: column;
gap: 1rem;
}
.job-plan-left,
.job-plan-right {
width: 100%;
}
.job-plan-right {
align-items: flex-start;
}
.job-remove-btn {
width: 100%;
margin-top: 0.5rem;
}
}
/* Business Card Page - Enhanced Mobile Responsive */
@media (max-width: 768px) {
.business-card {
grid-template-columns: 1fr;
}
.business-card-left {
padding: 2rem 1.5rem;
}
.business-card-photo {
width: 150px;
height: 150px;
}
.business-card-right {
padding: 2rem 1.5rem;
}
.business-card-name {
font-size: 1.5rem;
text-align: center;
}
.business-card-badge {
margin: 0 auto;
}
}
@media (max-width: 480px) {
.business-card-section {
padding: 2rem 0;
}
.business-card-left {
padding: 1.5rem 1rem;
}
.business-card-photo {
width: 120px;
height: 120px;
}
.business-card-right {
padding: 1.5rem 1rem;
}
.business-card-name {
font-size: 1.25rem;
}
.business-card-info-item {
flex-direction: column;
gap: 0.5rem;
}
.business-card-icon {
width: 30px;
height: 30px;
}
.business-card-icon i {
font-size: 1.25rem;
}
}
/* CV Section - Enhanced Mobile Responsive */
@media (max-width: 768px) {
.cv-grid {
grid-template-columns: 1fr;
gap: 2rem;
}
.about-info-card {
max-width: 100%;
}
.cv-form-card {
flex-direction: column;
}
.cv-prs-stripe {
width: 100%;
height: 60px;
flex-direction: row;
padding: 1rem;
}
.cv-top-section {
grid-template-columns: 1fr;
gap: 1rem;
}
.cv-photo-box {
width: 120px;
height: 120px;
margin: 0 auto;
}
.cv-row-2,
.cv-row-3 {
grid-template-columns: 1fr;
}
.cv-actions {
flex-direction: column;
width: 100%;
}
.cv-btn {
width: 100%;
}
}
/* Job Detail Page - Enhanced Mobile Responsive */
@media (max-width: 768px) {
.job-detail-card {
grid-template-columns: 1fr;
padding: 1.5rem;
}
.job-detail-left {
flex-direction: row;
border-right: none;
border-bottom: 2px solid #e0e0e0;
padding-right: 0;
padding-bottom: 1.5rem;
}
.job-detail-logo {
width: 80px;
height: 80px;
}
.job-detail-middle {
border-right: none;
border-bottom: 2px solid #e0e0e0;
padding-right: 0;
padding-bottom: 1.5rem;
}
.job-detail-actions {
flex-direction: column;
gap: 1rem;
}
.job-social-share {
justify-content: center;
width: 100%;
}
.job-apply-btn {
width: 100%;
}
.recommended-jobs-grid {
grid-template-columns:repeat(auto-fit, minmax(100px,1fr));
}
}
@media (max-width: 480px) {
.job-detail-section {
padding: 2rem 0;
}
.job-detail-card {
padding: 1rem;
}
.job-detail-logo {
width: 60px;
height: 60px;
}
.job-publish-date {
font-size: 0.75rem;
}
.job-detail-label {
font-size: 0.9rem;
}
.job-note-content {
padding: 1rem;
font-size: 0.85rem;
}
.job-social-btn {
width: 40px;
height: 40px;
font-size: 1.1rem;
}
}
/* FAQ Page - Enhanced Mobile Responsive */
@media (max-width: 768px) {
.faq-content {
padding: 2rem 0;
}
.faq-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.faq-card {
padding: 1.5rem;
}
.faq-icon {
width: 2.5rem;
height: 2.5rem;
}
.faq-icon i {
font-size: 2.5rem;
}
.faq-question {
font-size: 1rem;
}
.faq-answer {
font-size: 0.85rem;
}
}
@media (max-width: 480px) {
.faq-card {
padding: 1.25rem;
flex-direction: column;
align-items: center;
text-align: center;
}
.faq-icon {
width: 2rem;
height: 2rem;
}
.faq-icon i {
font-size: 2rem;
}
.faq-question {
font-size: 0.95rem;
}
.faq-answer {
font-size: 0.8rem;
}
}
/* Contact Page - Enhanced Mobile Responsive */
@media (max-width: 768px) {
.contact-content {
padding: 2rem 0;
}
.contact-description {
padding: 0 1rem;
margin-bottom: 2rem;
}
.contact-description p {
font-size: 0.9rem;
}
.contact-container {
grid-template-columns: 1fr;
gap: 2rem;
padding: 2rem 1.5rem;
margin: 0 1rem;
}
.contact-info {
padding-left: 0;
}
.contact-info-title {
font-size: 1.1rem;
}
.contact-info-text {
font-size: 0.9rem;
}
.contact-social-icons {
justify-content: center;
}
.contact-form-input,
.contact-form-textarea {
padding: 0.75rem 1rem;
font-size: 0.9rem;
}
.contact-submit-btn {
width: 100%;
}
}
@media (max-width: 480px) {
.contact-container {
padding: 1.5rem 1rem;
border-radius: var(--border-radius);
}
.contact-info-title {
font-size: 1rem;
}
.contact-info-text {
font-size: 0.85rem;
}
.contact-social-icon {
width: 45px;
height: 45px;
font-size: 1.25rem;
}
.contact-form-input,
.contact-form-textarea {
padding: 0.65rem 0.875rem;
font-size: 0.85rem;
}
}
/* Dark Ilanlar Page - Enhanced Mobile Responsive */
@media (max-width: 768px) {
.jobs-listing-section-light {
padding: 2rem 0;
}
.jobs-listing-search {
margin: 0 1rem 2rem;
}
.jobs-listing-search-input {
padding: 0.875rem 1rem 0.875rem 3rem;
font-size: 0.9rem;
}
.recommended-jobs-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
padding: 0 1rem;
}
.jobs-listing-separator-dark {
margin: 2rem 1rem;
}
}
@media (max-width: 480px) {
.jobs-listing-search-input {
padding: 0.75rem 0.875rem 0.75rem 2.75rem;
font-size: 0.85rem;
}
.jobs-listing-search-icon {
left: 1rem;
font-size: 1rem;
}
.recommended-job-card {
padding: 1.25rem;
}
.recommended-job-logo {
width: 60px;
height: 60px;
}
.recommended-job-position {
font-size: 1.1rem;
}
.recommended-apply-btn {
padding: 0.65rem 1.5rem;
font-size: 0.9rem;
}
.recommended-details-link {
font-size: 0.85rem;
}
}
/* ====== PROFILE STRENGTHEN PAGE RESPONSIVE STYLES ====== */
/* Adding comprehensive responsive styles for profile strengthen page */
@media (max-width: 768px) {
.profile-strengthen-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.feature-card {
width: 400px;
}
.profile-form-card {
max-width: 100%;
}
.profile-form-header {
width: 95%;
padding: 0.6rem 1rem;
font-size: 0.9rem;
}
.form-header-diamond {
width: 30px;
height: 30px;
}
.profile-form-header span {
font-size: 0.95rem;
}
.form-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.form-left {
order: 2;
}
.form-right {
order: 1;
}
.location-row {
grid-template-columns: 1fr;
gap: 1rem;
}
.calendar-widget {
max-width: 100%;
}
.calendar-grid {
gap: 0.2rem;
}
.calendar-day {
font-size: 0.75rem;
}
.profile-input,
.profile-select {
font-size: 0.85rem;
padding: 0.8rem;
}
.work-preference-title {
font-size: 0.9rem;
}
.checkbox-label {
font-size: 0.85rem;
}
.profile-submit-btn {
width: 100%;
padding: 0.9rem;
font-size: 0.95rem;
}
}
@media (max-width: 480px) {
.profile-strengthen-section {
padding: 1.5rem 0;
}
.profile-form-content {
padding: 1rem;
}
.form-field-group {
margin-bottom: 1rem;
}
.profile-form-header {
padding: 0.5rem 0.8rem;
font-size: 0.85rem;
}
.form-header-diamond {
width: 25px;
height: 25px;
}
.profile-form-header span {
font-size: 0.85rem;
}
.profile-input,
.profile-select {
font-size: 0.8rem;
padding: 0.7rem;
}
.calendar-widget {
padding: 1rem;
}
.calendar-upload-btn {
padding: 0.5rem 1rem;
font-size: 0.85rem;
}
.calendar-title {
font-size: 0.8rem;
}
.calendar-day {
font-size: 0.7rem;
}
.calendar-day-header {
font-size: 0.7rem;
}
.current-month-year {
font-size: 0.85rem;
}
.work-preference-title {
font-size: 0.85rem;
}
.checkbox-label {
font-size: 0.8rem;
}
.profile-checkbox {
width: 18px;
height: 18px;
}
.photo-placeholder {
min-height: 150px;
font-size: 0.85rem;
}
}
/* === YAZDIRMA MODU === */
@media print {
/* Scroll'u kapat, tabloyu tam göster */
.signature-table-container {
overflow: visible !important;
height: auto !important;
}
.signature-list-section,
.signature-list-wrapper {
height: auto !important;
overflow: visible !important;
}
/* Sayfa taşsa bile bölerek yazdır */
table,
tr,
td,
th {
page-break-inside: avoid !important;
}
/* Gereksiz öğeleri gizle */
.export-signature-list-btn,
#header-placeholder,
.breadcrumb {
display: none !important;
}
/* PDF arka planı temiz */
body {
background: #fff;
}
}
.member-top-section {
display: flex;
/* iç elemanları yatayda yan yana yerleştir */
gap: 20px;
/* sol ve sağ arasına boşluk */
align-items: flex-start;
/* üstten hizala */
flex-wrap: wrap;
/* ekran daralırsa alt satıra düşmesini sağlar */
}
/* Fotoğraf sol taraf */
.member-photo-upload {
flex: 0 0 200px;
margin-bottom: 1rem;
/* genişlik ayarla, shrink/grow yok */
}
/* Butonlar sağ taraf */
.member-action-buttons {
flex: 1;
/* kalan alanı kaplasın */
display: flex;
/* butonları dikey veya yatay hizalamak için */
flex-direction: column;
gap: 10px;
}
/* Member Detail Section Responsive */
@media (max-width: 768px) {
.member-detail-grid {
display: flex;
flex-direction: column;
/* sol-sağ alt alta */
}
.member-detail-left,
.member-detail-right {
flex: 1 1 100%;
/* tam genişlik */
margin-bottom: 15px;
/* alt satıra biraz boşluk */
}
}
/* --- Form Responsive --- */
@media (max-width: 768px) {
.member-detail-right {
width: 100%;
/* tam genişlik */
margin-top: 20px;
/* üstteki karttan boşluk */
padding: 0 10px;
/* kenarlardan biraz boşluk */
box-sizing: border-box;
}
/* Form satırları alt alta */
.member-info-form .form-row,
.member-info-form .form-row-three {
flex-direction: column;
/* inputlar alt alta */
gap: 10px;
}
/* Input ve select full width */
.member-info-form input,
.member-info-form select {
width: 100%;
}
/* Referans input ve buton alt alta */
.reference-input-wrapper {
flex-direction: column;
gap: 10px;
}
.reference-input-wrapper button {
width: 100%;
}
}
.add-reference-btn-inline {
margin-left: 0.2rem;
background-color: #e53935;
/* kırmızı ton */
color: #fff;
/* yazı beyaz */
font-size: 0.85rem;
/* küçük boyut */
padding: 5px 10px;
/* küçük iç boşluk */
border: none;
/* kenarlık yok */
border-radius: 5px;
/* köşeler yuvarlak */
cursor: pointer;
/* fare ile üzerine gelince pointer */
}
.header-box {
background: var(--color-accent-hover);
padding: 5% 10px;
text-align: center;
border-radius: 16px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
margin-bottom: 40px;
}
.header-box {
text-align: center;
margin-bottom: 20px;
}
.feature-card {
width: 350px;
margin: 0 auto;
}
/* Tablet ve küçük ekranlar */
@media (max-width: 1024px) {
.personnel-map-container,
.search-form-container,
.personnel-search-panel {
flex: 1 1 100%;
/* Üst üste gelsin */
}
}
/* Mobil ekranlar */
@media (max-width: 768px) {
/* Map container yüksekliği mobilde artırılabilir */
.personnel-map-container .world-map {
height: 300px;
/* Mobilde daha kısa map */
}
/* Breadcrumb ve başlıklar font küçültme */
.breadcrumb-title,
.personnel-panel-title,
.header-box h2 {
font-size: 1.5rem;
}
.feature-card-text,
.feature-card-footer {
font-size: 0.9rem;
}
/* Buttonlar ve inputlar tam genişlik */
.search-input,
.personnel-form-select,
.personnel-search-btn,
.feature-btn {
width: 100%;
}
}
@media (max-width: 480px) {
.breadcrumb-title {
font-size: 1.2rem;
}
.feature-card-subtitle {
font-size: 1rem;
}
.personnel-panel-title {
font-size: 1.2rem;
}
}
@media (max-width: 1024px) {
.management-panel-grid {
grid-template-columns: repeat(2, 1fr);
/* 2 ikon yan yana */
}
}
/* Mobil ekranlar */
@media (max-width: 768px) {
.management-panel-grid {
grid-template-columns: 1fr;
/* Tüm ikonlar alt alta */
}
.management-icon-img {
width: 80px;
/* ikon boyutu mobilde küçültüldü */
height: 80px;
}
.management-panel-btn {
width: 100%;
/* button full width */
}
}
@media (max-width: 768px) {
.hero .hero-content,
.hero-yellow .hero-content {
display: flex;
flex-direction: column;
/* Alt alta */
gap: 20px;
}
.hero-left,
.form-container {
width: 100%;
}
/* Map yüksekliği mobilde daha küçük */
.personnel-map-container {
min-height: 250px;
}
.hero-title {
font-size: 22px;
line-height: 28px;
}
.hero-subtitle {
font-size: 14px;
line-height: 20px;
}
.form-container {
padding: 20px;
}
.form-input,
.form-select,
.submit-btn {
width: 100%;
}
.form-row {
flex-direction: column;
gap: 15px;
}
.radio-group {
flex-direction: row;
gap: 20px;
}
.checkbox-label {
font-size: 14px;
}
}
/* -------- Küçük mobil -------- */
@media (max-width: 480px) {
.hero-title {
font-size: 18px;
line-height: 24px;
}
.hero-subtitle {
font-size: 12px;
line-height: 18px;
}
.form-container {
padding: 15px;
}
}
/* ========================================
MEMBER-MANAGEMENT
======================================== */
.member-management-section {
background-color: var(--color-accent);
padding: 3rem 0;
min-height: 100vh;
}
.container-wide {
max-width: 100%; /* Don't exceed viewport width */
margin: 0 auto;
padding: 0 20px;
box-sizing: border-box;
}
.member-management-grid {
display: grid;
grid-template-columns: 1.857fr 1fr;
gap: 3rem;
align-items: flex-start;
}
/* ========================================
CV CARD (LEFT SIDE)
======================================== */
.member-cv-card {
background-color: white;
border-radius: 0;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
overflow: hidden;
}
/* CV Tab */
.cv-card-tab {
background-color: var(--color-primary);
color: var(--color-accent);
padding: 0.75rem 2rem;
text-align: center;
transition: var(--transition);
font-family: var(--font-heading);
font-size: 0.95rem;
font-weight: 600;
}
/* CV Header */
.cv-card-header {
text-align: center;
padding: 1.5rem 2rem 1rem;
background-color: white;
}
.cv-card-name {
font-size: 1.75rem;
font-weight: 700;
color: var(--color-primary);
margin: 0 0 0.25rem 0;
letter-spacing: 1px;
font-family: var(--font-heading);
}
.cv-card-title {
font-size: 1rem;
color: var(--color-text-dark);
margin: 0;
font-weight: 400;
}
/* CV Profile Section */
.cv-profile-section {
display: grid;
grid-template-columns: 240px 1fr;
gap: 0;
background-color: var(--color-primary);
padding: 0;
}
.cv-profile-photo {
width: 180px; /* Make it square first */
height: 180px; /* Same as width */
overflow: hidden;
border-radius: 50%; /* Makes it circular */
border: 4px solid white; /* White border around circle */
position: relative; /* For positioning adjustments */
z-index: 10; /* Place above about section */
margin:2rem;
}
.cv-profile-photo img {
width: 100%;
height: 100%;
object-fit: cover;
}
.cv-profile-about {
padding: 1.5rem;
color: white;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.cv-about-title {
font-size: 1.25rem;
font-weight: 700;
margin: 0 0 0.75rem 0;
color: white;
font-family: var(--font-heading);
}
.cv-about-text {
font-size: 0.875rem;
line-height: 1.6;
color: rgba(255, 255, 255, 0.95);
margin: 0;
}
/* CV Body Grid */
.cv-body-grid {
grid-auto-rows: 1fr;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
background-color: white;
padding: 2rem;
}
.cv-section {
min-height: 0; /* Allow grid to control height */
overflow: auto;
overflow-y: auto;
padding: 0 1rem 0.75rem;
margin-bottom: 0.75rem;
border: 2px solid var(--color-primary); /* Blue border */
border-radius: 8px;
margin-bottom: 0.75rem; /* Space between boxes */
background-color: white;
margin-right: 2rem;
}
.cv-section-title {
background-color: var(--color-primary);
color: white;
text-align: center;
padding: 0.5rem 1rem;
margin: 0 -1rem 0.6rem;
font-size: 0.95rem;
font-weight: 600;
font-family: var(--font-heading);
}
.cv-section-content {
font-size: 0.875rem;
line-height: 1.6;
color: var(--color-text-dark);
}
/* Experience Items */
.cv-experience-item,
.cv-education-item {
margin-bottom: 0.5rem;
}
.cv-experience-title,
.cv-education-title {
font-size: 0.95rem;
font-weight: 700;
color: var(--color-primary);
margin: 0 0 0.25rem 0;
}
.cv-experience-company,
.cv-education-details {
font-size: 0.85rem;
color: var(--color-text-light);
margin: 0 0 0.5rem 0;
}
.cv-experience-list,
.cv-education-list {
margin: 0;
padding-left: 1.25rem;
list-style-type: disc;
}
.cv-experience-list li,
.cv-education-list li {
font-size: 0.85rem;
line-height: 1.5;
margin-bottom: 0.25rem;
color: var(--color-text-dark);
}
/* Reference Items */
.cv-reference-item {
margin-bottom: 1rem;
}
.cv-reference-name {
font-size: 0.9rem;
font-weight: 700;
color: var(--color-primary);
margin: 0 0 0.25rem 0;
}
.cv-reference-details,
.cv-reference-email {
font-size: 0.85rem;
color: var(--color-text-dark);
margin: 0 0 0.15rem 0;
}
/* Contact Items */
.cv-contact-item {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 0.75rem;
font-size: 0.875rem;
}
.cv-contact-icon {
width: 20px;
color: var(--color-primary);
font-size: 1rem;
}
/* CV Footer */
.cv-card-footer {
background-color: var(--color-primary);
padding: 1rem 2rem;
display: flex;
align-items: center;
justify-content: space-between;
}
.cv-footer-text {
color: var(--color-accent);
font-size: 0.7rem;
font-weight: 700;
line-height: 1.2;
text-transform: uppercase;
font-family: var(--font-heading);
}
.cv-footer-logo {
height: 40px;
width: auto;
}
/* ========================================
ACTION PANEL (RIGHT SIDE)
======================================== */
.member-action-panel {
display: flex;
flex-direction: column;
gap: 1.5rem;
background-color: white;
padding: 1rem 2rem;
border-radius: var(--border-radius);
}
/* Warning Alert */
.member-alert-warning {
background-color: white;
border-left: 4px solid #d62828;
padding: 1rem 1.25rem;
border-radius: 4px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
font-size: 0.9rem;
color: #d62828;
line-height: 1.5;
}
.member-alert-warning strong {
font-weight: 700;
}
/* Date Select with Button */
.member-date-select-wrapper {
display: flex;
flex-direction: column;
gap: 1rem;
}
.member-date-select {
width: 100%;
padding: 0.875rem 1rem;
border: 2px solid var(--color-primary);
border-radius: 6px;
font-size: 0.95rem;
font-weight: 500;
color: var(--color-primary);
background-color: white;
cursor: pointer;
transition: var(--transition);
font-family: var(--font-body);
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%230d1b2a' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 1rem center;
padding-right: 3rem;
}
.member-date-select:hover {
border-color: var(--color-accent);
}
.member-add-list-btn {
background-color: #3793f5;
color: white;
border: none;
padding: 1rem 1.5rem;
border-radius: 6px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: var(--transition);
font-family: var(--font-heading);
box-shadow: 0 4px 12px rgba(55, 147, 245, 0.3);
}
.member-add-list-btn:hover {
background-color: #2b7dd4;
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(55, 147, 245, 0.4);
}
/* Expandable Button */
.member-expand-btn {
background-color: #3f4045;
color: white;
border: none;
padding: 1rem 1.5rem;
border-radius: 6px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: var(--transition);
font-family: var(--font-heading);
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
.member-expand-btn:hover {
background-color: #2d2e32;
transform: translateX(4px);
}
.member-expand-btn i {
font-size: 0.9rem;
transition: transform 0.3s ease;
}
.member-expand-btn:hover i {
transform: translateX(4px);
}
/* Reference Input with Score */
.member-reference-score-wrapper {
display: flex;
flex-direction: column;
gap: 1rem;
}
.member-reference-input-group {
position: relative;
width: 100%;
}
.member-reference-input {
width: 100%;
padding: 0.875rem 140px 0.875rem 1rem;
border: 2px solid #e0e0e0;
border-radius: 6px;
font-size: 0.9rem;
color: var(--color-text-dark);
transition: var(--transition);
font-family: var(--font-body);
}
.member-reference-input:focus {
outline: none;
border-color: var(--color-primary);
}
.member-reference-add-btn {
position: absolute;
right: 4px;
top: 50%;
transform: translateY(-50%);
background-color: #d62828;
color: white;
border: none;
padding: 0.5rem 1rem;
border-radius: 4px;
font-size: 0.875rem;
font-weight: 600;
cursor: pointer;
transition: var(--transition);
font-family: var(--font-heading);
white-space: nowrap;
}
.member-reference-add-btn:hover {
background-color: #b91f1f;
}
/* Score Group */
.member-score-group {
display: flex;
gap: 0.75rem;
align-items: center;
}
.member-score-select {
width: 80px;
padding: 0.75rem 1rem;
border: 2px solid #e0e0e0;
border-radius: 6px;
font-size: 1rem;
font-weight: 600;
color: var(--color-primary);
background-color: white;
cursor: pointer;
transition: var(--transition);
font-family: var(--font-heading);
text-align: center;
}
.member-score-select:focus {
outline: none;
border-color: var(--color-primary);
}
.member-score-btn {
flex: 1;
background-color: #00a400;
color: white;
border: none;
padding: 0.75rem 1.5rem;
border-radius: 6px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: var(--transition);
font-family: var(--font-heading);
box-shadow: 0 4px 12px rgba(0, 164, 0, 0.3);
}
.member-score-btn:hover {
background-color: #008a00;
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(0, 164, 0, 0.4);
}
@media print {
/* Hide header, navigation, breadcrumb */
#header-placeholder-company,
.breadcrumb,
nav,
.nav {
display: none !important;
}
/* Hide footer */
#footer-container {
display: none !important;
}
/* Make the grid only show left column */
.member-management-grid {
grid-template-columns: 1fr !important; /* Only one column */
gap: 0;
}
.member-action-panel,
.member-actions-panel {
display: none !important;
}
/* Make CV display full width for printing */
.member-cv-display {
max-width: 100%;
width: 100%;
box-shadow: none;
}
/* Remove page breaks inside CV sections */
.member-cv-section-box,
.cv-profile-header {
page-break-inside: avoid;
}
/* Remove container width limits */
.container {
max-width: 100%;
padding: 0;
}
/* Ensure clean print */
body {
background: white;
}
}
/* Mobile: 768px and below - STACK VERTICALLY */
@media (max-width: 768px) {
.member-management-section {
padding: 2rem 0;
}
/* IMPORTANT: Change from grid to flex for proper stacking */
.member-management-grid {
display: flex;
flex-direction: column;
gap: 2rem;
}
/* Reverse order: actions first, CV second */
.member-actions-container {
order: 1;
width: 100%;
}
.member-cv-display {
order: 2;
width: 100%;
}
/* CV sections grid to single column */
.member-cv-sections-grid {
grid-template-columns: 1fr;
}
.member-cv-section-box {
min-height: auto;
}
/* Profile box: center photo above text */
.member-cv-profile-box {
flex-direction: column;
align-items: center;
text-align: center;
padding: 2rem 1.5rem;
}
.member-cv-photo-circle {
width: 150px;
height: 150px;
}
.member-cv-header-box {
padding: 1.5rem;
}
.member-cv-name {
font-size: 1.5rem;
}
.member-cv-position {
font-size: 1rem;
}
/* Reduce actions container padding */
.member-actions-container {
padding: 1.5rem;
}
.member-cv-footer-box {
flex-direction: column;
gap: 1rem;
text-align: center;
}
}