/* Override Bootstrap primary color with our brand color */
:root {
--bs-primary: rgb(201, 30, 36);
--bs-primary-rgb: 201, 30, 36;
--primary-color: rgb(201, 30, 36);
}
/* Floating Contact Widget (Desktop) - outside mobile query */
/* Mobile Navigation and General Mobile Improvements */
@media (max-width: 768px) {
body {
font-size: 0.9rem;
line-height: 1.5;
}
.container {
padding-left: 1rem;
padding-right: 1rem;
}
.container-fluid {
padding-left: 0.75rem;
padding-right: 0.75rem;
}
/* Navbar improvements */
.navbar {
padding: 0.5rem 1rem;
}
.navbar-brand {
font-size: 1.1rem;
}
.navbar-brand img {
max-height: 35px;
}
.navbar-toggler {
padding: 0.25rem 0.5rem;
font-size: 0.9rem;
border: 1px solid rgba(0,0,0,0.1);
}
.navbar-nav .nav-link {
padding: 0.75rem 1rem;
font-size: 0.9rem;
}
.dropdown-menu {
font-size: 0.85rem;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.dropdown-item {
padding: 0.5rem 1rem;
}
/* Button improvements */
.btn {
font-size: 0.9rem;
padding: 0.6rem 1.2rem;
border-radius: 8px;
}
.btn-lg {
font-size: 1rem;
padding: 0.75rem 1.5rem;
}
.btn-sm {
font-size: 0.8rem;
padding: 0.4rem 0.8rem;
}
/* Section padding improvements */
.py-5 {
padding-top: 2.5rem !important;
padding-bottom: 2.5rem !important;
}
.py-4 {
padding-top: 2rem !important;
padding-bottom: 2rem !important;
}
.py-3 {
padding-top: 1.5rem !important;
padding-bottom: 1.5rem !important;
}
/* Typography improvements */
h1 {
font-size: 1.8rem;
line-height: 1.2;
margin-bottom: 1rem;
}
h2 {
font-size: 1.5rem;
line-height: 1.3;
margin-bottom: 0.8rem;
}
h3 {
font-size: 1.3rem;
line-height: 1.3;
margin-bottom: 0.75rem;
}
h4 {
font-size: 1.1rem;
line-height: 1.3;
margin-bottom: 0.5rem;
}
h5 {
font-size: 1rem;
line-height: 1.3;
margin-bottom: 0.5rem;
}
h6 {
font-size: 0.9rem;
line-height: 1.3;
margin-bottom: 0.4rem;
}
.lead {
font-size: 1rem;
line-height: 1.4;
}
/* Card improvements */
.card {
border-radius: 10px;
border: 1px solid rgba(0,0,0,0.1);
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.card-header {
padding: 0.75rem 1rem;
font-size: 0.9rem;
}
.card-body {
padding: 1rem;
}
.card-footer {
padding: 0.75rem 1rem;
font-size: 0.85rem;
}
/* Badge improvements */
.badge {
font-size: 0.7rem;
padding: 0.35rem 0.5rem;
}
/* Alert improvements */
.alert {
padding: 0.75rem 1rem;
font-size: 0.9rem;
border-radius: 8px;
}
/* List group improvements */
.list-group-item {
padding: 0.75rem 1rem;
font-size: 0.9rem;
}
}
@media (max-width: 576px) {
body {
font-size: 0.85rem;
}
.container {
padding-left: 0.75rem;
padding-right: 0.75rem;
}
.container-fluid {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
/* Navbar extra small screens */
.navbar {
padding: 0.4rem 0.75rem;
}
.navbar-brand {
font-size: 1rem;
}
.navbar-brand img {
max-height: 30px;
}
.navbar-nav .nav-link {
padding: 0.6rem 0.75rem;
font-size: 0.85rem;
}
/* Button extra small screens */
.btn {
font-size: 0.85rem;
padding: 0.5rem 1rem;
}
.btn-lg {
font-size: 0.9rem;
padding: 0.65rem 1.25rem;
}
.btn-sm {
font-size: 0.75rem;
padding: 0.35rem 0.7rem;
}
/* Section padding extra small screens */
.py-5 {
padding-top: 2rem !important;
padding-bottom: 2rem !important;
}
.py-4 {
padding-top: 1.5rem !important;
padding-bottom: 1.5rem !important;
}
.py-3 {
padding-top: 1.25rem !important;
padding-bottom: 1.25rem !important;
}
/* Typography extra small screens */
h1 {
font-size: 1.5rem;
margin-bottom: 0.75rem;
}
h2 {
font-size: 1.3rem;
margin-bottom: 0.6rem;
}
h3 {
font-size: 1.1rem;
margin-bottom: 0.5rem;
}
h4 {
font-size: 1rem;
margin-bottom: 0.4rem;
}
h5 {
font-size: 0.9rem;
margin-bottom: 0.4rem;
}
h6 {
font-size: 0.85rem;
margin-bottom: 0.3rem;
}
.lead {
font-size: 0.9rem;
line-height: 1.3;
}
/* Card extra small screens */
.card-header {
padding: 0.6rem 0.75rem;
font-size: 0.85rem;
}
.card-body {
padding: 0.75rem;
}
.card-footer {
padding: 0.6rem 0.75rem;
font-size: 0.8rem;
}
/* Badge extra small screens */
.badge {
font-size: 0.65rem;
padding: 0.3rem 0.4rem;
}
/* Alert extra small screens */
.alert {
padding: 0.6rem 0.75rem;
font-size: 0.85rem;
}
/* List group extra small screens */
.list-group-item {
padding: 0.6rem 0.75rem;
font-size: 0.85rem;
}
}
/* Custom Modal Styles */
.modal-content {
border: none;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}
.modal-header {
border: none;
padding: 2rem;
text-align: center;
}
.modal-header h4 {
color: white;
font-weight: 700;
margin: 0;
}
.modal-body {
padding: 0;
background: #f8f9fa;
}
.quiz-section {
background: white;
padding: 2rem;
margin: 1rem;
border-radius: 16px;
box-shadow: 0 5px 20px rgba(0,0,0,0.1);
max-width: 600px;
margin: 1rem auto;
}
.modal-info-panel {
background: linear-gradient(135deg, #1e3c72, #2a5298);
color: white;
padding: 2rem;
min-height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
.benefit-item {
display: flex;
align-items: center;
padding: 0.75rem 0;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.benefit-item:last-child {
border-bottom: none;
}
.benefit-item i {
color: #ffd700;
margin-right: 1rem;
font-size: 1.2rem;
}
.consultation-highlight {
background: rgba(255,255,255,0.1);
padding: 1.5rem;
border-radius: 12px;
margin-top: 2rem;
}
.consultation-highlight h6 {
color: #ffd700;
margin-bottom: 1rem;
}
.consultation-highlight li {
color: rgba(0, 0, 0, 0.9);
margin-bottom: 0.5rem;
}
.quiz-navigation {
background: white;
padding: 1.5rem 2rem;
margin-top: 0;
border-top: 1px solid #e9ecef;
display: flex;
justify-content: space-between;
align-items: center;
}
.text-primary {
color: var(--primary-color) !important;
}
.bg-primary {
background-color: var(--primary-color) !important;
}
.citizenship-hero {
background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://images.unsplash.com/photo-1541432901042-2d8bd64b4a9b?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80');
background-size: cover;
background-position: center;
min-height: 100vh;
display: flex;
align-items: center;
color: white;
}
.quiz-form {
margin-bottom: 1rem !important;
margin-top: 1rem !important;
background: rgba(255,255,255,0.96);
border-radius: 16px;
padding: 2.5rem;
box-shadow: 0 20px 60px rgba(0,0,0,0.15);
backdrop-filter: blur(20px);
border: 1px solid rgba(255,255,255,0.2);
border-top: 4px solid var(--primary-color);
color: #2c3e50;
position: relative;
}
.quiz-step,
.package-quiz-step {
display: none;
opacity: 0;
transform: translateX(20px) scale(0.98);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.quiz-step.active,
.package-quiz-step.active {
display: block;
opacity: 1;
transform: translateX(0) scale(1);
animation: slideInQuiz 0.4s ease-out;
}
.quiz-step.exit-left {
animation: slideOutLeft 0.4s ease-in forwards;
}
.quiz-step.exit-right {
animation: slideOutRight 0.4s ease-in forwards;
}
@keyframes slideInQuiz {
from {
opacity: 0;
transform: translateX(30px) scale(0.98);
}
to {
opacity: 1;
transform: translateX(0) scale(1);
}
}
@keyframes slideOutLeft {
from {
opacity: 1;
transform: translateX(0) scale(1);
}
to {
opacity: 0;
transform: translateX(-30px) scale(0.98);
}
}
@keyframes slideOutRight {
from {
opacity: 1;
transform: translateX(0) scale(1);
}
to {
opacity: 0;
transform: translateX(30px) scale(0.98);
}
}
/* Quiz form specific styling */
.quiz-form .form-control,
.quiz-form .form-select {
border: 1px solid #dee2e6;
border-radius: 8px;
padding: 0.75rem;
font-size: 0.875rem;
transition: all 0.3s ease;
}
.quiz-form .form-control:focus,
.quiz-form .form-select:focus {
border-color: var(--primary-color);
box-shadow: 0 0 0 2px rgba(201, 30, 36, 0.15);
}
.quiz-form .form-label {
font-weight: 600;
color: #2c3e50;
margin-bottom: 0.5rem;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.quiz-option {
background: white;
border: 2px solid #e9ecef;
border-radius: 8px;
padding: 1rem 1rem 1rem 3.5rem;
margin-bottom: 0.75rem;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
text-align: left;
position: relative;
display: flex;
align-items: center;
min-height: 60px;
opacity: 0;
transform: translateX(30px);
animation: optionSlideFromRight 0.5s ease-out forwards;
}
.quiz-option:nth-child(1) { animation-delay: 0.1s; }
.quiz-option:nth-child(2) { animation-delay: 0.2s; }
.quiz-option:nth-child(3) { animation-delay: 0.3s; }
.quiz-option:nth-child(4) { animation-delay: 0.4s; }
.quiz-option:nth-child(5) { animation-delay: 0.5s; }
@keyframes optionSlideFromRight {
from {
opacity: 0;
transform: translateX(30px) scale(0.95);
}
to {
opacity: 1;
transform: translateX(0) scale(1);
}
}
/* Hover animation for quiz options */
.quiz-option:hover,
.modal-quiz-option:hover {
transform: translateY(-2px) scale(1.02);
}
.quiz-option::before {
content: '';
position: absolute;
left: 1rem;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 20px;
border: 2px solid #dee2e6;
border-radius: 50%;
background: white;
transition: all 0.3s ease;
z-index: 1;
}
.quiz-option:hover {
border-color: var(--primary-color);
background: rgba(201, 30, 36, 0.02);
transform: translateX(4px);
box-shadow: 0 4px 15px rgba(201, 30, 36, 0.1);
}
.quiz-option:hover::before {
border-color: var(--primary-color);
transform: translateY(-50%) scale(1.05);
}
.quiz-option.selected {
border-color: var(--primary-color);
background: rgba(201, 30, 36, 0.05);
transform: translateX(4px);
box-shadow: 0 4px 15px rgba(201, 30, 36, 0.2);
}
.quiz-option.selected::before {
background: var(--primary-color);
border-color: var(--primary-color);
transform: translateY(-50%);
}
.quiz-option.selected::after {
content: '';
position: absolute;
left: 1.35rem;
top: 50%;
transform: translateY(-50%);
width: 8px;
height: 8px;
background: white;
border-radius: 50%;
z-index: 2;
}
.quiz-option i {
margin-right: 1rem;
font-size: 1.5rem;
color: #6c757d;
transition: all 0.3s ease;
flex-shrink: 0;
}
.quiz-option:hover i {
color: var(--primary-color);
}
.quiz-option.selected i {
color: var(--primary-color);
}
.quiz-option h6 {
margin: 0;
font-size: 0.95rem;
font-weight: 600;
color: #2c3e50;
}
.step-indicator {
display: flex;
justify-content: center;
margin-bottom: 2rem;
position: relative;
}
.step-indicator::before {
content: '';
position: absolute;
top: 50%;
left: 20%;
right: 20%;
height: 2px;
background: #dee2e6;
z-index: 1;
}
.step-dot {
width: 40px;
height: 40px;
border-radius: 50%;
background: #e9ecef;
color: #6c757d;
display: flex;
align-items: center;
justify-content: center;
margin: 0 1rem;
font-weight: 700;
font-size: 0.875rem;
position: relative;
z-index: 2;
transition: all 0.3s ease;
border: 3px solid #fff;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.step-dot.active {
background: var(--primary-color);
color: white;
transform: scale(1.1);
box-shadow: 0 4px 15px rgba(201, 30, 36, 0.3);
}
.step-dot.completed {
background: #28a745;
color: white;
transform: scale(1.05);
}
.faq-item {
border: 1px solid #dee2e6;
border-radius: 8px;
margin-bottom: 1rem;
overflow: hidden;
transition: all 0.3s ease;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.faq-item:hover {
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
transform: translateY(-1px);
}
.faq-header {
background: #f8f9fa;
padding: 1.25rem 1.5rem;
cursor: pointer;
border: none;
width: 100%;
text-align: left;
font-weight: 600;
color: #2c3e50;
transition: all 0.3s ease;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 1rem;
}
.faq-header:hover {
background: rgba(201, 30, 36, 0.08);
color: var(--primary-color);
}
.faq-header[aria-expanded="true"] {
background: var(--primary-color);
color: white;
}
.faq-header i {
transition: transform 0.3s ease;
font-size: 0.875rem;
}
.faq-header[aria-expanded="true"] i {
transform: rotate(180deg);
}
.faq-content {
padding: 1.5rem;
background: white;
color: #4a5568;
line-height: 1.6;
border-top: 1px solid rgba(201, 30, 36, 0.1);
}
.country-grid {
margin-top: 2rem;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
}
/* Country grid responsive */
@media (max-width: 768px) {
.country-grid {
grid-template-columns: 1fr 1fr;
gap: 0.5rem;
}
}
@media (max-width: 480px) {
.country-grid {
grid-template-columns: 1fr;
gap: 0.5rem;
}
}
.country-item {
background: linear-gradient(135deg, #f8f9fa, #e9ecef);
border: 1px solid #dee2e6;
border-radius: 6px;
padding: 0.875rem 0.75rem;
text-align: center;
font-size: 0.825rem;
font-weight: 500;
color: #2c3e50;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.country-item::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(201, 30, 36, 0.1), transparent);
transition: left 0.5s ease;
}
.country-item:hover {
border-color: var(--primary-color);
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(201, 30, 36, 0.15);
background: linear-gradient(135deg, rgba(201, 30, 36, 0.05), rgba(201, 30, 36, 0.02));
color: var(--primary-color);
}
.country-item:hover::before {
left: 100%;
}
/* Country Grid Modal Specific Styles */
.country-grid-modal {
margin-top: 1rem;
max-height: 450px;
overflow-y: auto;
border: 1px solid #e9ecef;
border-radius: 12px;
background: #f8f9fa;
padding: 1rem;
position: relative;
}
.country-grid-modal::-webkit-scrollbar {
width: 8px;
}
.country-grid-modal::-webkit-scrollbar-track {
background: #e9ecef;
border-radius: 4px;
}
.country-grid-modal::-webkit-scrollbar-thumb {
background: linear-gradient(135deg, #667eea, #764ba2);
border-radius: 4px;
}
.country-grid-modal::-webkit-scrollbar-thumb:hover {
background: linear-gradient(135deg, #5a67d8, #6b46c1);
}
.country-grid-modal::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, #667eea, #764ba2, #667eea);
border-radius: 12px 12px 0 0;
z-index: 1;
}
.country-grid-modal .row {
margin: 0;
padding-top: 0.5rem;
}
.country-grid-modal .country-item {
background: linear-gradient(135deg, #ffffff, #f8f9fa);
border: 1px solid #e9ecef;
border-radius: 10px;
padding: 0.875rem 0.75rem;
text-align: center;
font-size: 0.85rem;
font-weight: 600;
color: #2c3e50;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
min-height: 60px;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
margin-bottom: 0.75rem;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
cursor: default;
}
.country-grid-modal .country-item::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.15), transparent);
transition: left 0.6s ease;
}
.country-grid-modal .country-item:hover {
border-color: #667eea;
transform: translateY(-3px) scale(1.02);
box-shadow: 0 8px 25px rgba(102, 126, 234, 0.2);
background: linear-gradient(135deg, rgba(102, 126, 234, 0.08), rgba(118, 75, 162, 0.08));
color: #667eea;
z-index: 10;
}
.country-grid-modal .country-item:hover::before {
left: 100%;
}
.country-grid-modal .country-item i {
font-size: 1.1rem;
flex-shrink: 0;
margin-right: 0.25rem;
}
.country-grid-modal .country-item .text-success {
color: #28a745 !important;
text-shadow: 0 1px 2px rgba(40, 167, 69, 0.2);
}
.country-grid-modal .country-item .text-info {
color: #17a2b8 !important;
text-shadow: 0 1px 2px rgba(23, 162, 184, 0.2);
}
/* Country sections styling */
.countries-section h6 {
position: sticky;
top: -1rem;
background: linear-gradient(135deg, #f8f9fa, #e9ecef);
padding: 0.75rem 1rem;
margin: 0 -1rem 1rem;
border-radius: 8px;
border: 1px solid rgba(102, 126, 234, 0.1);
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
z-index: 5;
}
.countries-section h6 i {
margin-right: 0.5rem;
font-size: 1.1rem;
}
/* Loading state for country grid */
.country-grid-modal.loading {
position: relative;
overflow: hidden;
}
.country-grid-modal.loading::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.1), transparent);
animation: countryLoading 1.5s infinite;
}
@keyframes countryLoading {
0% { left: -100%; }
100% { left: 100%; }
}
/* Mobile responsive for country grid modal */
@media (max-width: 768px) {
.country-grid-modal {
max-height: 350px;
padding: 0.75rem;
}
.country-grid-modal .country-item {
padding: 0.625rem 0.5rem;
font-size: 0.8rem;
min-height: 50px;
margin-bottom: 0.5rem;
}
.country-grid-modal .country-item i {
font-size: 1rem;
}
.countries-section h6 {
padding: 0.5rem 0.75rem;
margin: 0 -0.75rem 0.75rem;
font-size: 0.95rem;
}
}
/* Enhanced benefits grid in countries modal */
.benefits-grid .benefit-card {
transition: all 0.3s ease;
border-radius: 12px;
overflow: hidden;
position: relative;
}
.benefits-grid .benefit-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, currentColor, transparent);
opacity: 0.7;
}
.benefits-grid .benefit-card:hover {
transform: translateY(-5px) scale(1.02);
box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}
.benefits-grid .benefit-card i {
margin-bottom: 0.5rem;
transition: transform 0.3s ease;
}
.benefits-grid .benefit-card:hover i {
transform: scale(1.1);
}
/* Enhanced floating label activation */
.floating-input.filled label,
.floating-input input.filled + label,
.floating-input input:focus + label,
.floating-input input:not(:placeholder-shown) + label {
transform: translateY(-1.2rem) scale(0.85);
color: var(--primary-color);
font-weight: 600;
}
.floating-input input.filled,
.floating-input input:focus,
.floating-input input:not(:placeholder-shown) {
border-color: var(--primary-color);
box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
}
/* intlTelInput integration styles */
.iti {
width: 100% !important;
position: relative;
display: flex;
align-items: center;
}
.iti input {
width: 100% !important;
padding-left: 60px !important;
line-height: 1.5;
}
.floating-input .iti input {
padding-left: 70px !important;
padding-right: 2.5rem !important;
height: 58px !important;
display: flex;
align-items: center;
}
/* Contact form telefon label düzeltmesi */
.contact-card-body .floating-input .iti input + label {
left: 70px !important;
}
.contact-card-body .floating-input .iti input:not(:placeholder-shown) + label,
.contact-card-body .floating-input .iti input:focus + label {
left: 2.5rem !important;
}
.iti__flag-container {
position: absolute;
top: 0;
left: 1rem;
height: 100%;
display: flex;
align-items: center;
z-index: 10;
}
.iti__selected-flag {
padding: 0 8px 0 12px;
border-right: 1px solid #dee2e6;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.floating-input .iti__selected-flag {
border-right-color: rgba(0,0,0,0.1);
}
.iti__dropdown {
border: 1px solid #dee2e6;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
z-index: 9999;
}
.iti__country:hover {
background-color: rgba(102, 126, 234, 0.1);
}
.iti__country.iti__highlight {
background-color: rgba(102, 126, 234, 0.2);
}
/* Phone validation error styles */
.phone-error,
.is-invalid.phone-error {
border-color: #dc3545 !important;
box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
animation: phoneErrorShake 0.5s ease-in-out;
}
.floating-input.has-error {
position: relative;
}
.floating-input.has-error label {
color: #dc3545 !important;
}
.floating-input.has-error .iti__selected-flag {
border-right-color: #dc3545;
}
.phone-error-message {
display: block !important;
color: #dc3545;
font-size: 0.875rem;
margin-top: 0.5rem;
padding: 0.5rem 0.75rem;
background: rgba(220, 53, 69, 0.1);
border: 1px solid rgba(220, 53, 69, 0.2);
border-radius: 6px;
animation: phoneErrorSlideIn 0.3s ease-out;
position: absolute;
top: 100%;
left: 0;
right: 0;
z-index: 1000;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Phone error container için extra space */
.floating-input.has-phone-error {
margin-bottom: 3rem !important;
position: relative;
}
.phone-error-message i {
color: #dc3545;
}
/* Phone validation success styles */
.is-valid.phone-success {
border-color: #198754 !important;
box-shadow: 0 0 0 0.2rem rgba(25, 135, 84, 0.25) !important;
}
.floating-input.has-success label {
color: #198754 !important;
}
.floating-input.has-success .iti__selected-flag {
border-right-color: #198754;
}
/* Phone validation animations */
@keyframes phoneErrorShake {
0%, 100% { transform: translateX(0); }
10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
20%, 40%, 60%, 80% { transform: translateX(5px); }
}
@keyframes phoneErrorSlideIn {
0% {
opacity: 0;
transform: translateY(-10px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
/* intlTelInput error state styling */
.iti.has-error input {
border-color: #dc3545 !important;
}
.iti.has-error .iti__selected-flag {
border-right-color: #dc3545 !important;
}
.iti.has-success input {
border-color: #198754 !important;
}
.iti.has-success .iti__selected-flag {
border-right-color: #198754 !important;
}
/* Form submission notification styles */
.form-notification {
position: fixed;
top: 20px;
right: 20px;
z-index: 9999;
max-width: 400px;
padding: 1rem 1.5rem;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
animation: notificationSlideIn 0.3s ease-out;
}
.form-notification.error {
background: linear-gradient(135deg, #dc3545, #c82333);
color: white;
border: 1px solid #b21e2c;
}
.form-notification.success {
background: linear-gradient(135deg, #198754, #157347);
color: white;
border: 1px solid #146c43;
}
.form-notification.warning {
background: linear-gradient(135deg, #ffc107, #e0a800);
color: #000;
border: 1px solid #d39e00;
}
@keyframes notificationSlideIn {
0% {
opacity: 0;
transform: translateX(100%);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
/* Mobile responsive phone validation */
@media (max-width: 768px) {
.phone-error-message {
font-size: 0.8rem;
padding: 0.4rem 0.6rem;
margin-top: 0.4rem;
}
.form-notification {
top: 10px;
right: 10px;
left: 10px;
max-width: none;
font-size: 0.9rem;
}
}
/* Focus states for phone validation */
.phone-error:focus {
border-color: #dc3545 !important;
box-shadow: 0 0 0 0.3rem rgba(220, 53, 69, 0.4) !important;
}
.is-valid:focus {
border-color: #198754 !important;
box-shadow: 0 0 0 0.3rem rgba(25, 135, 84, 0.4) !important;
}
.visa-free-map {
width: 100%;
height: auto;
border-radius: 12px;
box-shadow: 0 15px 40px rgba(0,0,0,0.12);
border: 1px solid rgba(255,255,255,0.2);
}
.countries-collapsed {
max-height: 280px;
overflow: hidden;
position: relative;
}
.countries-collapsed::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 60px;
background: linear-gradient(transparent, white);
pointer-events: none;
}
/* Countries Modal Styling */
.countries-modal .modal-dialog {
max-width: 900px;
}
.countries-modal .modal-content {
border: none;
border-radius: 15px;
overflow: hidden;
}
.countries-modal .modal-header {
color: white;
border: none;
padding: 1.5rem 2rem;
}
/* Visa info note styling */
.visa-info-note {
display: flex;
align-items: flex-start;
gap: 1rem;
background: linear-gradient(135deg, #e3f2fd 0%, #f1f8e9 100%);
border: 1px solid #2196f3;
border-radius: 12px;
padding: 1rem 1.5rem;
margin-right: 1rem;
flex: 1;
position: relative;
}
.visa-info-note::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
background: linear-gradient(to bottom, #2196f3, #4caf50);
border-radius: 0 2px 2px 0;
}
.note-icon {
color: #2196f3;
font-size: 1.5rem;
flex-shrink: 0;
margin-top: 0.2rem;
}
.note-content {
flex: 1;
}
.note-content .modal-title {
font-size: 1.1rem;
font-weight: 600;
color: #1976d2;
}
.note-text {
font-size: 0.9rem;
color: #666;
font-style: italic;
}
.countries-modal .modal-body {
padding: 15px;
}
.countries-modal .country-list {
max-height: 400px;
overflow-y: auto;
padding: 1.5rem;
}
.countries-modal .contact-form {
background: #f8f9fa;
padding: 1.5rem 2rem;
border-left: 1px solid #dee2e6;
}
/* Premium Contact Section */
.premium-contact-section {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
position: relative;
overflow: hidden;
}
.premium-contact-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
pointer-events: none;
}
.premium-contact-card {
border-radius: 20px;
overflow: hidden;
box-shadow: 0 25px 80px rgba(0,0,0,0.15);
background: white;
position: relative;
}
.contact-card-header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
padding: 2rem;
position: relative;
overflow: hidden;
}
.contact-card-header::before {
content: '';
position: absolute;
top: -50%;
right: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
animation: shimmer 3s linear infinite;
}
@keyframes shimmer {
0% { transform: translate(-50%, -50%) rotate(0deg); }
100% { transform: translate(-50%, -50%) rotate(360deg); }
}
.consultation-badge {
background: linear-gradient(45deg, #28a745, #20c997);
color: white;
padding: 0.5rem 1rem;
border-radius: 25px;
font-weight: bold;
font-size: 0.875rem;
box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
position: relative;
overflow: hidden;
}
.consultation-badge::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
animation: badge-shine 2s linear infinite;
}
@keyframes badge-shine {
0% { left: -100%; }
100% { left: 100%; }
}
.contact-card-body {
padding: 2rem;
text-align: center;
}
.contact-card-body .premium-form {
text-align: left;
}
/* Contact Section Form Specific Styles */
#contactSectionForm .floating-input {
position: relative;
display: flex;
align-items: center;
}
#contactSectionForm .floating-input .iti {
width: 100% !important;
display: flex;
align-items: center;
}
#contactSectionForm .floating-input .iti input {
height: 58px !important;
line-height: 1.5 !important;
padding-top: 1rem !important;
padding-bottom: 1rem !important;
display: flex;
align-items: center;
}
#contactSectionForm .floating-input input,
#contactSectionForm .floating-input select {
height: 58px !important;
line-height: 1.5 !important;
padding-top: 1rem !important;
padding-bottom: 1rem !important;
}
/* Contact Section Form Input Icons & Check Alignment */
#contactSectionForm .floating-input .input-icon {
position: absolute;
right: 1rem;
top: 50%;
transform: translateY(-50%);
color: #6c757d;
pointer-events: none;
}
#contactSectionForm .floating-input .input-check {
position: absolute;
right: 2.5rem;
top: 50%;
transform: translateY(-50%);
background: var(--success-color, #28a745);
color: white;
border-radius: 50%;
width: 20px;
height: 20px;
display: none;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: bold;
}
/* Contact Section Form Phone Input Specific */
#contactSectionForm .floating-input .iti__flag-container {
position: absolute;
top: 0;
left: 1rem;
height: 58px;
display: flex;
align-items: center;
z-index: 10;
}
#contactSectionForm .floating-input .iti__selected-flag {
height: 58px;
display: flex;
align-items: center;
justify-content: center;
padding: 0 8px 0 12px;
border-right: 1px solid #dee2e6;
}
/* Contact Section Form Phone Error Handling */
#contactSectionForm .floating-input.has-phone-error {
margin-bottom: 3.5rem !important;
}
#contactSectionForm .phone-error-message {
position: absolute;
top: calc(100% + 0.25rem);
left: 0;
right: 0;
z-index: 1001;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
font-size: 0.75rem;
margin-top: 0;
padding: 0.35rem 0.5rem;
}
/* Mobile phone error spacing */
@media (max-width: 768px) {
#contactSectionForm .floating-input.has-phone-error {
margin-bottom: 4.5rem !important;
}
#contactSectionForm .col-md-6 {
min-height: 100px;
margin-bottom: 0rem;
}
#contactSectionForm .floating-input {
margin-bottom: 0rem;
}
#contactSectionForm .row {
gap: 1.5rem;
}
}
/* Form container padding adjustment */
#contactSectionForm .row {
position: relative;
}
#contactSectionForm .col-md-6 {
position: relative;
min-height: 80px;
}
.contact-card-body h4 {
color: var(--primary-color);
margin-bottom: 1.5rem;
font-weight: 600;
}
.contact-card-body p.lead {
color: #6c757d;
margin-bottom: 2rem;
line-height: 1.6;
}
.trust-indicators {
background: linear-gradient(135deg, #f8f9fa, #e9ecef);
border-radius: 15px;
padding: 1.5rem;
border: 1px solid rgba(201, 30, 36, 0.1);
}
.trust-item {
transition: all 0.3s ease;
}
.trust-item:hover {
transform: translateY(-3px);
}
/* Premium Form Styling */
.floating-input {
position: relative;
margin-bottom: 0.5rem;
}
.floating-input .form-control,
.floating-input .form-select {
padding: 1rem 1rem 1rem 3rem;
border: 2px solid #e9ecef;
border-radius: 12px;
font-size: 1rem;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
background: white;
height: auto;
}
.floating-input .form-control:focus,
.floating-input .form-select:focus {
border-color: var(--primary-color);
box-shadow: 0 0 0 4px rgba(201, 30, 36, 0.1);
transform: translateY(-2px);
}
.floating-input .form-control:not(:placeholder-shown),
.floating-input .form-control:focus,
.floating-input .form-select:not([value=""]),
.floating-input .form-select:focus {
padding-top: 1.5rem;
padding-bottom: 0.5rem;
}
.floating-input label {
position: absolute;
top: 1rem;
left: 3rem;
color: #6c757d;
font-size: 1rem;
font-weight: 500;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
pointer-events: none;
background: white;
padding: 0 0.5rem;
z-index: 2;
}
.floating-input .form-control:not(:placeholder-shown) + label,
.floating-input .form-control:focus + label,
.floating-input .form-select:not([value=""]) + label,
.floating-input .form-select:focus + label {
top: -0.5rem;
left: 2.5rem;
font-size: 0.75rem;
color: var(--primary-color);
font-weight: 600;
}
.floating-input .input-icon {
position: absolute;
left: 1rem;
top: 50%;
transform: translateY(-50%);
color: #6c757d;
font-size: 1.1rem;
z-index: 1;
transition: all 0.3s ease;
}
.floating-input .form-control:focus ~ .input-icon,
.floating-input .form-select:focus ~ .input-icon {
color: var(--primary-color);
}
/* Mobile responsive improvements for floating inputs */
@media (max-width: 768px) {
.floating-input {
margin-bottom: 1.25rem;
}
.floating-input .form-control,
.floating-input .form-select {
padding: 0.9rem 0.9rem 0.9rem 2.75rem;
font-size: 0.9rem;
border-radius: 10px;
}
.floating-input label {
font-size: 0.9rem;
left: 2.75rem;
}
.floating-input .form-control:not(:placeholder-shown) + label,
.floating-input .form-control:focus + label,
.floating-input .form-select:not([value=""]) + label,
.floating-input .form-select:focus + label {
font-size: 0.7rem;
left: 2.25rem;
}
.floating-input .input-icon {
left: 0.9rem;
font-size: 1rem;
}
/* Contact form telefon label mobil düzeltmesi */
.contact-card-body .floating-input .iti input + label {
left: 60px !important;
}
.contact-card-body .floating-input .iti input:not(:placeholder-shown) + label,
.contact-card-body .floating-input .iti input:focus + label {
left: 2.25rem !important;
}
/* Contact card mobil düzenlemesi */
.contact-card-body {
padding: 1.5rem;
}
.contact-card-body .floating-input .input-check {
right: 0.75rem;
font-size: 1.1rem;
}
}
@media (max-width: 576px) {
.floating-input {
margin-bottom: 1rem;
}
.floating-input .form-control,
.floating-input .form-select {
padding: 0.8rem 0.8rem 0.8rem 2.5rem;
font-size: 0.85rem;
border-radius: 8px;
}
.floating-input label {
font-size: 0.85rem;
left: 2.5rem;
}
.floating-input .form-control:not(:placeholder-shown) + label,
.floating-input .form-control:focus + label,
.floating-input .form-select:not([value=""]) + label,
.floating-input .form-select:focus + label {
font-size: 0.65rem;
left: 2rem;
}
.floating-input .input-icon {
left: 0.8rem;
font-size: 0.95rem;
}
/* Contact form telefon label 576px düzeltmesi */
.contact-card-body .floating-input .iti input + label {
left: 50px !important;
}
.contact-card-body .floating-input .iti input:not(:placeholder-shown) + label,
.contact-card-body .floating-input .iti input:focus + label {
left: 2rem !important;
}
/* Contact card 576px düzenlemesi */
.contact-card-body {
padding: 1rem;
}
.contact-card-body h4 {
font-size: 1.25rem;
}
.contact-card-body p.lead {
font-size: 0.9rem;
}
.contact-card-body .floating-input .input-check {
right: 0.5rem;
font-size: 1rem;
}
}
.premium-submit-btn {
background: linear-gradient(135deg, var(--primary-color) 0%, #e74c3c 100%);
border: none;
color: white;
padding: 1rem 2rem;
border-radius: 12px;
font-size: 1.1rem;
font-weight: 600;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
}
.premium-submit-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
transition: left 0.5s ease;
}
.premium-submit-btn:hover {
transform: translateY(-3px);
box-shadow: 0 12px 35px rgba(102, 126, 234, 0.4);
}
.premium-submit-btn:hover::before {
left: 100%;
}
.premium-submit-btn:active {
transform: translateY(-1px);
}
/* Process Steps Section */
.process-steps-section {
background: linear-gradient(135deg, #f8f9fa 0%, white 50%, #f8f9fa 100%);
position: relative;
}
.process-timeline {
position: relative;
margin: 3rem 0 2rem 0;
padding-top: 1rem;
}
.process-container {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 1rem;
}
.process-step {
position: relative;
}
.step-card {
background: white;
border-radius: 15px;
padding: 2rem 1.5rem;
text-align: center;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
border: 2px solid #f8f9fa;
height: 320px;
width: 200px;
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
}
.step-card::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.1), transparent);
transition: left 0.6s ease;
}
.step-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 50px rgba(102, 126, 234, 0.15);
border-color: #667eea;
}
.step-card:hover::before {
left: 100%;
}
.step-number {
margin-top: 5px;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 45px;
height: 45px;
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 1.2rem;
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
z-index: 2;
}
.step-icon {
font-size: 2.5rem;
color: var(--primary-color);
margin: 1rem 0;
transition: all 0.3s ease;
}
.step-card:hover .step-icon {
color: #764ba2;
transform: scale(1.1);
}
.step-title {
color: #2c3e50;
font-weight: 700;
margin-bottom: 1rem;
font-size: 1.1rem;
height: 2.5rem;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.2;
}
.step-description {
color: #6c757d;
font-size: 0.9rem;
line-height: 1.4;
margin: 0;
flex: 1;
display: -webkit-box;
-webkit-line-clamp: 4;
line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.success-step {
background: linear-gradient(135deg, #28a745, #20c997);
color: white;
border-color: #28a745;
}
.success-step .step-number {
background: linear-gradient(135deg, #ffd700, #ffed4e);
color: #2c3e50;
}
.success-step .step-icon {
color: #ffd700;
}
.success-step .step-title {
color: white;
}
.success-step .step-description {
color: rgba(255,255,255,0.9);
}
.success-step:hover {
transform: translateY(-10px) scale(1.05);
box-shadow: 0 20px 50px rgba(40, 167, 69, 0.3);
}
.process-arrow {
font-size: 1.5rem;
color: var(--primary-color);
animation: pulse-arrow 2s infinite;
margin: 0 0.5rem;
}
@keyframes pulse-arrow {
0%, 100% {
transform: scale(1);
opacity: 0.7;
}
50% {
transform: scale(1.1);
opacity: 1;
}
}
.process-cta {
background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
border-radius: 20px;
padding: 3rem 2rem;
border: 1px solid rgba(102, 126, 234, 0.2);
position: relative;
overflow: hidden;
z-index: 10;
}
.process-cta::before {
content: '';
position: absolute;
top: -50%;
right: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(102, 126, 234, 0.1) 0%, transparent 70%);
animation: rotate 10s linear infinite;
}
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* Mobile Responsive */
@media (max-width: 768px) {
/* Process timeline wrapper için mobil düzenlemeler */
.process-timeline .row.g-4 {
margin-bottom: 0 !important;
}
.process-timeline .row.g-4.mt-3 {
margin-top: 0 !important;
}
.process-container {
flex-direction: column;
align-items: center;
gap: 1.5rem;
margin-bottom: 0 !important;
}
/* İkinci process container'ın üst boşluğunu kaldır */
.process-container:last-child {
margin-top: 0 !important;
padding-top: 0 !important;
}
.process-arrow {
display: none !important;
}
.step-card {
width: 100%;
max-width: 300px;
height: 280px;
margin-bottom: 0;
}
/* Mobilde tüm step-card'ları aynı stilde yap */
.success-step {
background: white !important;
color: #2c3e50 !important;
border-color: #f8f9fa !important;
}
.success-step .step-number {
background: linear-gradient(135deg, #667eea, #764ba2) !important;
color: white !important;
}
.success-step .step-icon {
color: var(--primary-color) !important;
}
.success-step .step-title {
color: #2c3e50 !important;
}
.success-step .step-description {
color: #6c757d !important;
}
.success-step:hover {
transform: translateY(-10px) !important;
box-shadow: 0 20px 50px rgba(102, 126, 234, 0.15) !important;
}
}
/* Property Packages Section */
.property-packages-section {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 50%, #f8f9fa 100%);
}
.package-card {
background: white;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 15px 35px rgba(0,0,0,0.1);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
border: 1px solid rgba(102, 126, 234, 0.1);
position: relative;
height: 100%;
}
.package-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(135deg, #667eea, #764ba2);
transform: scaleX(0);
transition: transform 0.3s ease;
}
.package-card:hover {
transform: translateY(-15px);
box-shadow: 0 25px 50px rgba(102, 126, 234, 0.15);
}
.package-card:hover::before {
transform: scaleX(1);
}
.premium-package {
position: relative;
}
.premium-package::after {
content: 'MOST POPULAR';
position: absolute;
top: 20px;
right: -35px;
background: linear-gradient(135deg, #ffd700, #ffed4e);
color: #2c3e50;
padding: 5px 40px;
font-size: 0.75rem;
font-weight: bold;
transform: rotate(45deg);
box-shadow: 0 2px 10px rgba(255, 215, 0, 0.3);
z-index: 2;
}
.package-header {
padding: 2rem 2rem 1rem;
text-align: center;
background: linear-gradient(135deg, rgba(102, 126, 234, 0.05), rgba(118, 75, 162, 0.05));
}
.package-badge {
display: inline-block;
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
padding: 0.5rem 1rem;
border-radius: 25px;
font-size: 0.8rem;
font-weight: 600;
margin-bottom: 1rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.package-badge.standard {
background: linear-gradient(135deg, #6c757d, #495057);
}
.package-title {
color: #2c3e50;
font-weight: 700;
margin-bottom: 0.5rem;
}
.package-subtitle {
color: #6c757d;
font-size: 0.95rem;
margin: 0;
}
.property-gallery {
padding: 1rem 2rem;
}
.property-image {
position: relative;
border-radius: 10px;
overflow: hidden;
height: 150px;
transition: transform 0.3s ease;
}
.property-image:hover {
transform: scale(1.05);
}
.property-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.property-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(transparent, rgba(0,0,0,0.8));
color: white;
padding: 0.5rem;
text-align: center;
}
.property-details {
font-size: 0.8rem;
font-weight: 600;
}
.package-features {
padding: 0 2rem 1rem;
}
.feature-row {
display: flex;
align-items: center;
margin-bottom: 0.75rem;
font-size: 0.9rem;
}
.feature-row i {
color: #667eea;
margin-right: 0.75rem;
width: 20px;
flex-shrink: 0;
}
.package-pricing {
padding: 1.5rem 2rem 2rem;
background: #f8f9fa;
border-top: 1px solid #e9ecef;
}
.price-breakdown {
margin-bottom: 1rem;
}
.price-item {
display: flex;
justify-content: space-between;
margin-bottom: 0.5rem;
font-size: 0.9rem;
}
.price-item.total-price {
border-top: 2px solid #667eea;
padding-top: 0.75rem;
margin-top: 0.75rem;
font-weight: 700;
font-size: 1.1rem;
color: #2c3e50;
}
.price-item.total-price span:last-child {
color: #667eea;
font-size: 1.3rem;
}
.package-guarantee {
background: linear-gradient(135deg, rgba(40, 167, 69, 0.1), rgba(32, 201, 151, 0.1));
border: 1px solid rgba(40, 167, 69, 0.2);
border-radius: 15px;
padding: 2rem;
max-width: 800px;
margin: 0 auto;
}
.guarantee-badge {
display: flex;
flex-direction: column;
align-items: center;
padding: 1rem;
background: white;
border-radius: 10px;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
min-width: 120px;
}
.guarantee-badge i {
font-size: 1.5rem;
color: #28a745;
margin-bottom: 0.5rem;
}
.guarantee-badge span {
font-size: 0.85rem;
font-weight: 600;
color: #2c3e50;
text-align: center;
}
/* Testimonials Section */
.testimonials-section {
background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://images.unsplash.com/photo-1564013799919-ab600027ffc6?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80');
background-size: cover;
background-position: center;
background-attachment: fixed;
color: white;
position: relative;
overflow: hidden;
}
.testimonials-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(ellipse at 20% 10%, rgba(102, 126, 234, 0.15) 0%, transparent 40%),
radial-gradient(ellipse at 80% 90%, rgba(118, 75, 162, 0.15) 0%, transparent 40%),
radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, 0.03) 0%, transparent 60%);
}
.testimonials-section::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
}
.testimonials-section .container {
position: relative;
z-index: 2;
}
.testimonials-slider {
position: relative;
max-width: 1000px;
margin: 0 auto;
/* Touch/swipe disabled on mobile */
touch-action: none;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
padding: 0 4rem;
}
.testimonial-track {
position: relative;
overflow: hidden;
border-radius: 20px;
}
.testimonial-card {
background: linear-gradient(145deg, #ffffff 0%, #f8f9fa 100%);
color: #2c3e50;
padding: 3rem 2rem;
border-radius: 25px;
box-shadow:
0 25px 60px rgba(0,0,0,0.15),
0 10px 30px rgba(102, 126, 234, 0.1),
inset 0 1px 0 rgba(255,255,255,0.8);
position: relative;
display: none;
animation: slideIn 0.6s ease-out;
border: 1px solid rgba(255,255,255,0.2);
backdrop-filter: blur(10px);
}
.testimonial-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #667eea, #764ba2, #667eea);
border-radius: 25px 25px 0 0;
}
.testimonial-card.active {
display: block;
overflow: hidden;
}
@keyframes slideIn {
from {
opacity: 0;
transform: translateX(30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.client-profile {
text-align: center;
}
.client-image {
margin-bottom: 1.5rem;
}
.client-image img {
width: 130px;
height: 130px;
object-fit: cover;
border: 5px solid transparent;
background: linear-gradient(white, white) padding-box,
linear-gradient(45deg, #667eea, #764ba2, #667eea) border-box;
border-radius: 50%;
box-shadow:
0 15px 35px rgba(102, 126, 234, 0.3),
0 5px 15px rgba(0,0,0,0.1);
transition: all 0.3s ease;
}
.client-image:hover img {
transform: scale(1.05);
box-shadow:
0 20px 40px rgba(102, 126, 234, 0.4),
0 10px 20px rgba(0,0,0,0.15);
}
.client-name {
font-weight: 700;
color: #2c3e50;
margin-bottom: 0.5rem;
}
.client-location {
color: #6c757d;
margin-bottom: 1.5rem;
font-style: italic;
}
.citizenship-details {
text-align: left;
}
.detail-item {
display: flex;
align-items: center;
margin-bottom: 0.75rem;
font-size: 0.9rem;
}
.detail-item i {
color: #667eea;
margin-right: 0.75rem;
width: 16px;
flex-shrink: 0;
}
.testimonial-content {
position: relative;
}
.quote-icon {
position: absolute;
top: -20px;
left: -10px;
font-size: 3rem;
color: #667eea;
opacity: 0.3;
}
.testimonial-text {
font-size: 1.1rem;
line-height: 1.8;
margin: 0 0 2rem 0;
padding-left: 2rem;
font-style: italic;
color: #495057;
position: relative;
}
.testimonial-rating {
display: flex;
align-items: center;
gap: 1rem;
padding-left: 2rem;
}
.stars {
display: flex;
gap: 0.25rem;
}
.stars i {
color: #ffd700;
font-size: 1.2rem;
}
.rating-text {
font-weight: 600;
color: #667eea;
}
.testimonial-navigation {
position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translateY(-50%);
display: flex;
align-items: center;
justify-content: space-between;
pointer-events: none;
z-index: 10;
}
.nav-btn {
background: rgba(255,255,255,0.2);
border: 2px solid rgba(255,255,255,0.3);
color: white;
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
pointer-events: auto;
margin: 0 2rem;
}
.nav-btn:hover {
background: rgba(255,255,255,0.3);
border-color: rgba(255,255,255,0.5);
transform: scale(1.1);
}
.testimonial-dots {
display: flex;
gap: 0.75rem;
justify-content: center;
margin-top: 2rem;
}
.dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: rgba(255,255,255,0.3);
cursor: pointer;
transition: all 0.3s ease;
}
.dot.active {
background: white;
transform: scale(1.3);
}
.success-stats {
background: rgba(255,255,255,0.1);
border-radius: 20px;
padding: 2rem;
backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.2);
}
.stat-item {
text-align: center;
}
.stat-number {
font-size: 2.5rem;
font-weight: 800;
color: white;
margin-bottom: 0.5rem;
text-shadow: 0 2px 10px rgba(0,0,0,0.2);
}
.stat-label {
color: rgba(255,255,255,0.9);
font-size: 0.9rem;
margin: 0;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Mobile Responsive for Testimonials */
@media (max-width: 768px) {
.testimonials-section {
padding: 3rem 0;
}
.testimonials-slider {
padding: 0 1rem;
}
.testimonial-card {
padding: 1.5rem 1rem;
margin: 0 0.5rem;
}
.client-image img {
width: 80px;
height: 80px;
}
.client-name {
font-size: 1rem;
}
.client-location {
font-size: 0.85rem;
}
.testimonial-text {
font-size: 0.95rem;
padding-left: 1rem;
line-height: 1.6;
}
.testimonial-rating {
padding-left: 1rem;
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
}
.quote-icon {
font-size: 1.8rem;
left: -5px;
top: -15px;
}
.stat-number {
font-size: 1.8rem;
}
.stat-label {
font-size: 0.8rem;
}
.testimonial-navigation {
margin-top: 2rem;
gap: 1rem;
}
.nav-btn {
width: 40px;
height: 40px;
margin: 0 1rem;
}
.success-stats {
padding: 1.5rem 1rem;
}
.success-stats .row {
gap: 0.5rem;
}
/* Mobilde 2x2 düzen için */
.success-stats .col-6 {
flex: 0 0 48% !important;
max-width: 48% !important;
margin-bottom: 1rem;
}
.stat-item {
padding: 1rem 0.5rem;
}
.stat-number {
font-size: 1.8rem !important;
}
.stat-label {
font-size: 0.85rem !important;
}
}
@media (max-width: 576px) {
.testimonials-section {
padding: 2rem 0;
}
.testimonial-card {
padding: 1.25rem 0.75rem;
border-radius: 15px;
}
.client-image {
margin-bottom: 1rem;
}
.client-image img {
width: 70px;
height: 70px;
}
.client-name {
font-size: 0.95rem;
margin-bottom: 0.25rem;
}
.client-location {
font-size: 0.8rem;
margin-bottom: 1rem;
}
.testimonial-text {
font-size: 0.9rem;
padding-left: 0.75rem;
line-height: 1.5;
margin-bottom: 1.5rem;
}
.testimonial-rating {
padding-left: 0.75rem;
}
.quote-icon {
font-size: 1.5rem;
left: 0;
top: -10px;
}
/* Success stats ekstra küçük ekranlar için */
.success-stats {
padding: 1rem 0.5rem;
}
.success-stats .col-6 {
flex: 0 0 48% !important;
max-width: 48% !important;
margin-bottom: 0.75rem;
}
.stat-item {
padding: 0.75rem 0.25rem;
}
.stat-number {
font-size: 1.5rem !important;
margin-bottom: 0.25rem;
}
.stat-label {
font-size: 0.75rem !important;
line-height: 1.3;
}
.stars i {
font-size: 1rem;
}
.rating-text {
font-size: 0.85rem;
}
.stat-number {
font-size: 1.5rem;
}
.stat-label {
font-size: 0.75rem;
}
.detail-item {
font-size: 0.8rem;
margin-bottom: 0.5rem;
}
.detail-item i {
width: 14px;
font-size: 0.9rem;
}
}
/* Modal Quiz Styles */
#processQuizModal .modal-header {
color: white;
border-bottom: none;
}
.quiz-container {
padding: 2rem;
min-height: 500px;
}
.quiz-progress {
margin-bottom: 2rem;
}
#modalProgressBar {
width: 100%;
height: 8px;
background: #e9ecef;
border-radius: 10px;
overflow: hidden;
position: relative;
}
#modalProgressBar .progress-fill {
height: 100%;
background: linear-gradient(90deg, var(--primary-color), #c1932e);
border-radius: 10px;
transition: width 0.5s ease;
width: 25%;
}
.progress-text {
display: block;
text-align: center;
margin-top: 0.5rem;
font-weight: 600;
color: var(--primary-color);
}
.modal-quiz-step {
display: none;
opacity: 0;
transform: translateX(20px) scale(0.98);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.modal-quiz-step.active {
display: block;
opacity: 1;
transform: translateX(0) scale(1);
animation: slideInQuiz 0.4s ease-out;
}
.modal-quiz-option {
background: white;
border: 2px solid #e9ecef;
border-radius: 8px;
padding: 1rem 1rem 1rem 3.5rem;
margin-bottom: 0.75rem;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
text-align: left;
position: relative;
display: flex;
align-items: center;
min-height: 60px;
opacity: 0;
transform: translateX(30px);
animation: optionSlideFromRight 0.5s ease-out forwards;
}
.modal-quiz-option:nth-child(1) { animation-delay: 0.05s; }
.modal-quiz-option:nth-child(2) { animation-delay: 0.1s; }
.modal-quiz-option:nth-child(3) { animation-delay: 0.15s; }
.modal-quiz-option:nth-child(4) { animation-delay: 0.2s; }
.modal-quiz-option:nth-child(5) { animation-delay: 0.25s; }
.modal-quiz-option::before {
content: '';
position: absolute;
left: 1rem;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 20px;
border: 2px solid #dee2e6;
border-radius: 50%;
background: white;
transition: all 0.3s ease;
z-index: 1;
}
.modal-quiz-option:hover {
border-color: var(--primary-color);
background: rgba(201, 30, 36, 0.02);
transform: translateX(4px);
box-shadow: 0 4px 15px rgba(201, 30, 36, 0.1);
}
.modal-quiz-option:hover::before {
border-color: var(--primary-color);
transform: translateY(-50%) scale(1.05);
}
.modal-quiz-option.selected {
border-color: var(--primary-color);
background: rgba(201, 30, 36, 0.05);
transform: translateX(4px);
box-shadow: 0 4px 15px rgba(201, 30, 36, 0.2);
}
.modal-quiz-option.selected::before {
background: var(--primary-color);
border-color: var(--primary-color);
transform: translateY(-50%);
}
.modal-quiz-option.selected::after {
content: '';
position: absolute;
left: 1.35rem;
top: 50%;
transform: translateY(-50%);
width: 8px;
height: 8px;
background: white;
border-radius: 50%;
z-index: 2;
}
.modal-quiz-option i {
margin-right: 1rem;
font-size: 1.5rem;
color: #6c757d;
transition: all 0.3s ease;
flex-shrink: 0;
}
.modal-quiz-option:hover i {
color: var(--primary-color);
}
.modal-quiz-option.selected i {
color: var(--primary-color);
}
.modal-info-panel {
background: linear-gradient(135deg, #f8f9fa, #e9ecef);
padding: 2rem;
height: 100%;
min-height: 500px;
}
.info-benefits .benefit-item {
display: flex;
align-items: center;
margin-bottom: 1rem;
padding: 0.75rem;
background: white;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
color: #2a2a2a;
}
.benefit-item i {
color: #28a745;
margin-right: 0.75rem;
font-size: 1.2rem;
}
.consultation-highlight {
background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
border: 1px solid rgba(102, 126, 234, 0.2);
border-radius: 10px;
padding: 1.5rem;
}
/* Premium Form Input Green Focus and Valid */
.premium-contact-form .floating-input input:focus,
.premium-contact-form .floating-input input:valid:not(:placeholder-shown),
.premium-contact-form .floating-input input[value]:not([value=""]),
.premium-contact-form .floating-input select:focus,
.premium-contact-form .floating-input select:valid:not([value=""]),
.premium-contact-form .floating-input textarea:focus,
.premium-contact-form .floating-input textarea:valid:not(:placeholder-shown) {
border-color: #28a745 !important;
box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25) !important;
background-color: rgba(40, 167, 69, 0.05) !important;
}
.premium-contact-form .floating-input input:focus + label,
.premium-contact-form .floating-input input:valid:not(:placeholder-shown) + label,
.premium-contact-form .floating-input input[value]:not([value=""]) + label,
.premium-contact-form .floating-input select:focus + label,
.premium-contact-form .floating-input select:valid:not([value=""]) + label,
.premium-contact-form .floating-input textarea:focus + label,
.premium-contact-form .floating-input textarea:valid:not(:placeholder-shown) + label {
color: #28a745 !important;
transform: translateY(-0.8rem) scale(0.85);
}
/* Green check icon for filled inputs */
.premium-contact-form .floating-input input:valid:not(:placeholder-shown)::after,
.premium-contact-form .floating-input input[value]:not([value=""])::after,
.premium-contact-form .floating-input select:valid:not([value=""])::after,
.premium-contact-form .floating-input textarea:valid:not(:placeholder-shown)::after {
content: '✓';
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
color: #28a745;
font-weight: bold;
font-size: 1.2rem;
pointer-events: none;
}
.premium-contact-form .floating-input {
position: relative;
}
.premium-contact-form .floating-input .input-check {
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
color: #28a745;
font-weight: bold;
font-size: 1.2rem;
pointer-events: none;
opacity: 0;
transition: opacity 0.3s ease;
}
/* Contact card body input check düzeltmesi */
.contact-card-body .floating-input .input-check {
position: absolute;
right: 1rem;
top: 50%;
transform: translateY(-50%);
color: #28a745;
font-weight: bold;
font-size: 1.2rem;
pointer-events: none;
opacity: 0;
transition: opacity 0.3s ease;
z-index: 10;
}
.contact-card-body .floating-input input:valid:not(:placeholder-shown) ~ .input-check,
.contact-card-body .floating-input input[value]:not([value=""]) ~ .input-check,
.contact-card-body .floating-input select:valid:not([value=""]) ~ .input-check,
.contact-card-body .floating-input textarea:valid:not(:placeholder-shown) ~ .input-check {
opacity: 1;
}
.premium-contact-form .floating-input input:valid:not(:placeholder-shown) ~ .input-check,
.premium-contact-form .floating-input input[value]:not([value=""]) ~ .input-check,
.premium-contact-form .floating-input select:valid:not([value=""]) ~ .input-check,
.premium-contact-form .floating-input textarea:valid:not(:placeholder-shown) ~ .input-check {
opacity: 1;
}
/* Quiz Navigation Animations */
.quiz-navigation {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
}
.quiz-navigation .btn {
opacity: 0;
transform: translateY(20px);
animation: buttonSlideUp 0.6s ease-out forwards;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.quiz-navigation .btn:nth-child(1) {
animation-delay: 0.1s;
}
.quiz-navigation .btn:nth-child(2) {
animation-delay: 0.2s;
}
.quiz-navigation .btn:nth-child(3) {
animation-delay: 0.3s;
}
@keyframes buttonSlideUp {
to {
opacity: 1;
transform: translateY(0);
}
}
.quiz-navigation .btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}
/* Process Timeline Fixes */
.process-container {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: nowrap;
gap: 1rem;
overflow-x: auto;
padding: 1rem 0;
}
.process-step {
position: relative;
flex-shrink: 0;
}
.step-number {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 45px;
height: 45px;
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 1.2rem;
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
z-index: 3;
border: 3px solid white;
}
.process-timeline {
position: relative;
margin: 3rem 0 2rem 0;
padding-top: 2rem;
}
/* General Form Control Green Validation */
.form-control:valid:not(:placeholder-shown),
.form-control[value]:not([value=""]),
.form-select:valid:not([value=""]),
textarea.form-control:valid:not(:placeholder-shown) {
border-color: #28a745 !important;
box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25) !important;
background-color: rgba(40, 167, 69, 0.05) !important;
}
.form-control:focus {
border-color: #667eea !important;
box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25) !important;
}
.form-control:valid:not(:placeholder-shown):focus,
.form-control[value]:not([value=""]):focus,
.form-select:valid:not([value=""]):focus,
textarea.form-control:valid:not(:placeholder-shown):focus {
border-color: #28a745 !important;
box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.35) !important;
}
/* Form floating labels green color */
.form-floating .form-control:valid:not(:placeholder-shown) ~ label,
.form-floating .form-control[value]:not([value=""]) ~ label,
.form-floating .form-select:valid:not([value=""]) ~ label {
color: #28a745 !important;
}
/* Modal form check icons */
.input-check-modal {
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
color: #28a745;
font-weight: bold;
font-size: 1.2rem;
pointer-events: none;
opacity: 0;
transition: opacity 0.3s ease;
z-index: 4;
}
.form-floating .form-control:valid:not(:placeholder-shown) ~ .input-check-modal,
.form-floating .form-control[value]:not([value=""]) ~ .input-check-modal,
.form-floating .form-select:valid:not([value=""]) ~ .input-check-modal {
opacity: 1;
}
/* E-book Section */
.ebook-section {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}
.ebook-preview {
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.ebook-cover {
position: relative;
display: inline-block;
border-radius: 15px;
transition: all 0.4s ease;
}
.ebook-cover:hover {
transform: scale(1.1);
}
.ebook-image {
max-width: 500px;
object-fit: cover;
}
.ebook-badge {
position: absolute;
top: -10px;
right: -10px;
background: linear-gradient(135deg, #28a745, #20c997);
color: white;
padding: 0.5rem 1rem;
border-radius: 50px;
font-weight: bold;
box-shadow: 0 4px 15px rgba(40, 167, 69, 0.4);
z-index: 2;
}
.ebook-badge i {
margin-right: 0.5rem;
color: #ffd700;
}
.ebook-title {
color: #2c3e50;
font-weight: 700;
margin-bottom: 1rem;
}
.feature-list {
padding-left: 0;
}
.feature-item {
display: flex;
align-items: center;
margin-bottom: 0.75rem;
padding: 0.5rem 0;
}
.feature-item i {
margin-right: 0.75rem;
font-size: 1.1rem;
}
.stat-box {
background: white;
padding: 1rem;
border-radius: 10px;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
transition: transform 0.3s ease;
}
.stat-box:hover {
transform: translateY(-5px);
}
.stat-number {
color: var(--primary-color);
font-weight: 800;
margin-bottom: 0.25rem;
}
/* Citizenship Options Section */
.citizenship-options-section {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 50%, #f8f9fa 100%);
}
.option-card {
background: white;
border-radius: 15px;
padding: 2rem;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
border: 2px solid transparent;
position: relative;
height: 100%;
}
.option-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 50px rgba(201, 30, 36, 0.15);
border-color: var(--primary-color);
}
.featured-option {
border: 3px solid var(--primary-color);
background: linear-gradient(145deg, #ffffff 0%, #f8f9fa 100%);
position: relative;
overflow: hidden;
}
.featured-option::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--primary-color), #e74c3c, var(--primary-color));
}
.option-badge {
position: absolute;
top: 20px;
right: -35px;
background: linear-gradient(135deg, #ffd700, #ffed4e);
color: #2c3e50;
padding: 5px 40px;
font-size: 0.75rem;
font-weight: bold;
transform: rotate(45deg);
box-shadow: 0 2px 10px rgba(255, 215, 0, 0.3);
z-index: 2;
}
.option-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 1.5rem;
}
.option-title {
color: #2c3e50;
font-weight: 700;
margin-bottom: 0.5rem;
}
.option-amount {
background: linear-gradient(135deg, var(--primary-color), #e74c3c);
color: white;
padding: 0.5rem 1rem;
border-radius: 25px;
font-weight: bold;
font-size: 1.1rem;
}
.option-subtitle {
color: #28a745;
font-weight: 600;
margin-bottom: 1rem;
}
.option-description p {
margin-bottom: 1rem;
line-height: 1.6;
color: #495057;
}
.expense-table {
background: #f8f9fa;
padding: 1.5rem;
border-radius: 10px;
margin-top: 1.5rem;
}
.expense-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem 0;
border-bottom: 1px solid #e9ecef;
}
.expense-row:last-child {
border-bottom: none;
}
.option-features {
margin-top: 1rem;
}
.option-features .feature {
margin-bottom: 0.5rem;
color: #495057;
font-size: 0.9rem;
}
.option-visual img {
border-radius: 15px;
box-shadow: 0 15px 35px rgba(0,0,0,0.1);
}
.cta-section {
background: linear-gradient(135deg, rgba(201, 30, 36, 0.1), rgba(231, 76, 60, 0.1));
border-radius: 20px;
padding: 3rem 2rem;
border: 1px solid rgba(201, 30, 36, 0.2);
}
/* Mobile Swipe for Testimonials - DISABLED */
@media (max-width: 768px) {
.testimonials-slider {
touch-action: none;
pointer-events: none;
}
.testimonial-track {
overflow-x: hidden;
}
.process-container {
flex-direction: column;
align-items: center;
gap: 2rem;
}
.process-arrow {
display: none !important;
}
.ebook-image {
max-width: 500px;
}
.ebook-cover {
transform: none;
}
.ebook-cover:hover {
transform: scale(1.02);
}
.option-badge {
font-size: 0.65rem;
padding: 3px 30px;
}
/* CTA section mobil düzenlemesi */
.cta-section {
padding: 2rem 1.5rem;
}
.cta-section .btn {
display: block;
width: 100%;
margin-bottom: 1rem;
margin-right: 0 !important;
}
.cta-section .btn:last-child {
margin-bottom: 0;
}
}
/* Quiz Success Card Styles */
.quiz-success-card {
background: linear-gradient(145deg, #ffffff 0%, #f8f9fa 100%);
border-radius: 20px;
padding: 3rem 2rem;
box-shadow:
0 25px 60px rgba(40, 167, 69, 0.15),
0 10px 30px rgba(40, 167, 69, 0.1),
inset 0 1px 0 rgba(255,255,255,0.8);
border: 2px solid rgba(40, 167, 69, 0.1);
position: relative;
overflow: hidden;
margin-top: 1rem;
}
.quiz-success-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #28a745, #20c997, #28a745);
}
.success-icon {
position: relative;
z-index: 2;
}
.success-icon i {
font-size: 4rem;
color: #28a745;
animation: successPulse 2s ease-in-out infinite;
}
@keyframes successPulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
}
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.success-features {
display: flex;
flex-direction: column;
gap: 1rem;
margin: 2rem 0;
}
.success-features .feature-item {
display: flex;
align-items: center;
padding: 1rem;
background: rgba(40, 167, 69, 0.05);
border-radius: 10px;
border-left: 4px solid #28a745;
transition: all 0.3s ease;
position: relative;
z-index: 2;
}
.success-features .feature-item:hover {
transform: translateX(5px);
background: rgba(40, 167, 69, 0.1);
}
.success-features .feature-item i {
margin-right: 1rem;
font-size: 1.3rem;
width: 25px;
text-align: center;
}
.success-features .feature-item span {
font-weight: 600;
color: #2c3e50;
}
/* Mobile responsive for success card */
@media (max-width: 768px) {
.quiz-success-card {
padding: 1.5rem 1rem;
margin: 1rem 0;
}
.success-icon i {
font-size: 2.5rem;
}
.success-features {
gap: 0.5rem;
}
.success-features .feature-item {
padding: 0.75rem 1rem;
font-size: 0.9rem;
}
/* Modal responsive improvements */
.modal-dialog {
margin: 0.5rem !important;
max-width: calc(100% - 1rem) !important;
}
.quiz-section {
padding: 1rem 0.75rem !important;
margin: 0.5rem !important;
}
.modal-quiz-option {
padding: 0.75rem 0.75rem 0.75rem 2.75rem !important;
min-height: 50px !important;
margin-bottom: 0.5rem !important;
}
.modal-quiz-option h6 {
font-size: 0.85rem !important;
line-height: 1.3 !important;
}
.modal-quiz-option i {
font-size: 1.2rem !important;
margin-right: 0.75rem !important;
}
.form-floating .phone-label {
font-size: 0.85rem !important;
}
/* Hero section mobile fixes */
.citizenship-hero {
min-height: 120vh !important;
padding: 70px 0 20px 0 !important;
}
.citizenship-hero .container {
padding-top: 10px !important;
padding-left: 1rem !important;
padding-right: 1rem !important;
}
.quiz-form {
margin-bottom: 1rem !important;
margin-top: 1rem !important;
padding: 1.25rem 0.75rem !important;
border-radius: 12px !important;
}
.hero-badge {
padding: 0.4rem 0.8rem !important;
font-size: 0.75rem !important;
margin-bottom: 0.75rem !important;
}
.citizenship-hero h1 {
font-size: 1.6rem !important;
line-height: 1.2 !important;
margin-bottom: 1rem !important;
padding: 0 0.5rem !important;
}
.citizenship-hero .lead {
font-size: 0.95rem !important;
margin-bottom: 1.25rem !important;
padding: 0 0.5rem !important;
line-height: 1.4 !important;
}
.step-indicator {
margin-bottom: 1rem !important;
padding: 0 0.5rem !important;
}
.step-dot {
width: 32px !important;
height: 32px !important;
font-size: 0.75rem !important;
margin: 0 0.5rem !important;
}
/* Form controls mobile adjustments */
.quiz-form .form-control,
.quiz-form .form-select {
padding: 0.75rem !important;
font-size: 0.9rem !important;
border-radius: 8px !important;
}
.quiz-form .form-label {
font-size: 0.85rem !important;
margin-bottom: 0.4rem !important;
}
/* Quiz options mobile improvements */
.quiz-option {
padding: 0.75rem 0.75rem 0.75rem 2.75rem !important;
min-height: 50px !important;
margin-bottom: 0.5rem !important;
font-size: 0.85rem !important;
}
.quiz-option h6 {
font-size: 0.85rem !important;
line-height: 1.3 !important;
}
.quiz-option i {
font-size: 1.2rem !important;
margin-right: 0.75rem !important;
}
/* Quiz navigation mobile */
.quiz-navigation {
padding: 1rem !important;
flex-direction: column !important;
gap: 0.75rem !important;
}
.quiz-navigation .btn {
width: 100% !important;
padding: 0.75rem 1rem !important;
font-size: 0.9rem !important;
}
}
@media (max-width: 576px) {
.modal-dialog {
margin: 0.25rem !important;
max-width: calc(100% - 0.5rem) !important;
}
.quiz-section {
padding: 0.75rem 0.5rem !important;
margin: 0.25rem !important;
}
.citizenship-hero {
padding: 60px 0 10px 0 !important;
min-height: 120vh !important;
}
.quiz-form {
margin-top: 1rem !important;
padding: 1rem 0.5rem !important;
border-radius: 10px !important;
}
.citizenship-hero h1 {
font-size: 1.4rem !important;
margin-bottom: 0.75rem !important;
padding: 0 0.25rem !important;
}
.citizenship-hero .lead {
font-size: 0.85rem !important;
margin-bottom: 1rem !important;
padding: 0 0.25rem !important;
}
.hero-badge {
font-size: 0.65rem !important;
padding: 0.3rem 0.6rem !important;
}
.floating-input .iti input[type=tel] {
padding: 0.75rem 0.75rem 0.75rem 50px !important;
font-size: 0.85rem !important;
}
.form-floating .iti input[type=tel] {
padding-left: 50px !important;
}
.iti__selected-flag {
padding: 0 6px 0 8px !important;
}
.step-indicator {
padding: 0 !important;
}
.step-dot {
width: 28px !important;
height: 28px !important;
font-size: 0.7rem !important;
margin: 0 0.25rem !important;
}
/* Country grid modal improvements */
.country-grid-modal {
max-height: 300px !important;
padding: 0.5rem !important;
}
.country-grid-modal .country-item {
padding: 0.5rem 0.4rem !important;
font-size: 0.75rem !important;
min-height: 40px !important;
margin-bottom: 0.4rem !important;
}
.country-grid-modal .country-item i {
font-size: 0.9rem !important;
}
.countries-section h6 {
padding: 0.4rem 0.5rem !important;
margin: 0 -0.5rem 0.5rem !important;
font-size: 0.85rem !important;
}
/* Modal header improvements */
.modal-header {
padding: 1rem !important;
text-align: center !important;
}
.modal-header h4 {
font-size: 1.1rem !important;
}
/* Visa info note mobil */
.visa-info-note {
flex-direction: column !important;
gap: 0.75rem !important;
padding: 0.75rem 1rem !important;
margin-right: 0.5rem !important;
}
.note-icon {
font-size: 1.2rem !important;
align-self: flex-start;
}
.note-content .modal-title {
font-size: 1rem !important;
}
.note-text {
font-size: 0.8rem !important;
}
/* Form floating inputs improvements */
.floating-input {
margin-bottom: 1rem !important;
}
.floating-input .form-control,
.floating-input .form-select {
padding: 0.75rem 0.75rem 0.75rem 2.5rem !important;
font-size: 0.85rem !important;
border-radius: 8px !important;
}
.floating-input label {
font-size: 0.8rem !important;
left: 2.5rem !important;
}
.floating-input .input-icon {
left: 0.75rem !important;
font-size: 1rem !important;
}
/* Quiz options extra small screens */
.quiz-option,
.modal-quiz-option {
padding: 0.6rem 0.6rem 0.6rem 2.5rem !important;
min-height: 45px !important;
font-size: 0.8rem !important;
}
.quiz-option h6,
.modal-quiz-option h6 {
font-size: 0.8rem !important;
line-height: 1.2 !important;
}
.quiz-option i,
.modal-quiz-option i {
font-size: 1.1rem !important;
margin-right: 0.5rem !important;
}
/* Process steps mobile improvements */
.process-timeline .row.g-4 {
margin-bottom: 0 !important;
}
.process-timeline .row.g-4.mt-3 {
margin-top: 0 !important;
}
.process-container {
flex-direction: column !important;
gap: 1.25rem !important;
margin-bottom: 0 !important;
}
/* İkinci process container'ın üst boşluğunu kaldır */
.process-container:last-child {
margin-top: 0 !important;
padding-top: 0 !important;
}
.process-arrow {
display: none !important;
}
.step-card {
width: 100% !important;
max-width: 280px !important;
height: 250px !important;
padding: 1.5rem 1rem !important;
margin-bottom: 0 !important;
}
/* Extra küçük ekranlarda da tüm step-card'ları aynı stilde yap */
.success-step {
background: white !important;
color: #2c3e50 !important;
border-color: #f8f9fa !important;
}
.success-step .step-number {
background: linear-gradient(135deg, #667eea, #764ba2) !important;
color: white !important;
}
.success-step .step-icon {
color: var(--primary-color) !important;
}
.success-step .step-title {
color: #2c3e50 !important;
}
.success-step .step-description {
color: #6c757d !important;
}
.step-number {
width: 35px !important;
height: 35px !important;
font-size: 1rem !important;
}
.step-icon {
font-size: 2rem !important;
}
.step-title {
font-size: 1rem !important;
}
.step-description {
font-size: 0.85rem !important;
}
/* Package cards mobile */
.package-card {
margin-bottom: 1.5rem !important;
}
.package-header {
padding: 1.5rem 1rem 0.75rem !important;
}
.package-title {
font-size: 1.1rem !important;
}
.package-subtitle {
font-size: 0.85rem !important;
}
.property-gallery {
padding: 0.75rem 1rem !important;
}
.property-image {
height: 100px !important;
}
.package-features {
padding: 0 1rem 0.75rem !important;
}
.feature-row {
font-size: 0.8rem !important;
margin-bottom: 0.5rem !important;
}
.package-pricing {
padding: 1rem !important;
}
.price-item {
font-size: 0.8rem !important;
}
.price-item.total-price {
font-size: 0.95rem !important;
}
.price-item.total-price span:last-child {
font-size: 1.1rem !important;
}
/* CTA section extra küçük ekranlar */
.cta-section {
padding: 1.5rem 1rem;
}
.cta-section .btn {
display: block;
width: 100%;
margin-bottom: 0.75rem;
margin-right: 0 !important;
font-size: 0.9rem;
padding: 0.75rem 1rem;
}
.cta-section .btn:last-child {
margin-bottom: 0;
}
}
/* YouTube Video Play Button Styles */
.video-thumbnail-container {
position: relative;
cursor: pointer;
overflow: hidden;
border-radius: 12px;
transition: all 0.3s ease;
background: #000;
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}
.video-thumbnail-container:hover {
transform: scale(1.02);
box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}
.video-thumbnail-container img {
transition: all 0.3s ease;
width: 100%;
height: 100%;
object-fit: cover;
}
.video-thumbnail-container:hover img {
opacity: 0.8;
transform: scale(1.05);
}
.video-play-overlay {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: all 0.3s ease;
z-index: 20;
opacity: 1 !important;
}
.video-thumbnail-container:hover .video-play-overlay {
transform: translate(-50%, -50%) scale(1.1);
}
.play-button {
width: 80px;
height: 80px;
border-radius: 50%;
background: linear-gradient(135deg, #ff0000 0%, #cc0000 100%);
border: 4px solid rgba(255,255,255,0.9);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer;
box-shadow:
0 8px 25px rgba(255, 0, 0, 0.4),
0 4px 10px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
position: relative;
overflow: hidden;
}
.play-button::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.3) 0%, transparent 50%);
border-radius: 50%;
opacity: 0.7;
}
.play-button:hover {
transform: scale(1.15);
background: linear-gradient(135deg, #ff1a1a 0%, #e60000 100%);
border-color: rgba(255,255,255,1);
box-shadow:
0 15px 35px rgba(255, 0, 0, 0.6),
0 8px 20px rgba(0, 0, 0, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.play-button i {
color: white !important;
font-size: 28px;
margin-left: 3px;
position: relative;
z-index: 10;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.video-duration {
position: absolute;
bottom: 12px;
right: 12px;
background: rgba(0,0,0,0.85) !important;
color: white;
padding: 4px 8px;
border-radius: 6px;
font-size: 0.85rem;
font-weight: 600;
z-index: 15;
backdrop-filter: blur(4px);
}
.video-thumbnail-container::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at center, transparent 0%, rgba(0,0,0,0.1) 100%);
z-index: 5;
}
.video-thumbnail-container:hover::before {
background: radial-gradient(circle at center, transparent 0%, rgba(0,0,0,0.2) 100%);
}
/* Pulse animation for play button */
@keyframes pulse {
0% {
box-shadow:
0 8px 25px rgba(255, 0, 0, 0.4),
0 4px 10px rgba(0, 0, 0, 0.3),
0 0 0 0 rgba(255, 0, 0, 0.7);
}
70% {
box-shadow:
0 8px 25px rgba(255, 0, 0, 0.4),
0 4px 10px rgba(0, 0, 0, 0.3),
0 0 0 15px rgba(255, 0, 0, 0);
}
100% {
box-shadow:
0 8px 25px rgba(255, 0, 0, 0.4),
0 4px 10px rgba(0, 0, 0, 0.3),
0 0 0 0 rgba(255, 0, 0, 0);
}
}
.play-button {
animation: pulse 2s infinite;
}
.play-button:hover {
animation: none;
}
/* Mobile responsive for video player */
@media (max-width: 768px) {
.video-thumbnail-container {
border-radius: 10px;
margin: 1rem 0;
}
.play-button {
width: 60px;
height: 60px;
border-width: 3px;
}
.play-button i {
font-size: 20px;
margin-left: 2px;
}
.video-duration {
bottom: 8px;
right: 8px;
padding: 3px 6px;
font-size: 0.75rem;
}
.video-thumbnail-container:hover {
transform: scale(1.01);
}
.video-thumbnail-container:hover .video-play-overlay {
transform: translate(-50%, -50%) scale(1.05);
}
}
@media (max-width: 576px) {
.video-thumbnail-container {
border-radius: 8px;
margin: 0.75rem 0;
}
.play-button {
width: 50px;
height: 50px;
border-width: 2px;
}
.play-button i {
font-size: 16px;
margin-left: 1px;
}
.video-duration {
bottom: 6px;
right: 6px;
padding: 2px 4px;
font-size: 0.7rem;
}
.play-button:hover {
transform: scale(1.08);
}
}
/* Ebook section mobile improvements */
@media (max-width: 768px) {
.ebook-section {
padding: 2rem 0;
}
/* Ebook preview mobilde ortaya hizala */
.ebook-preview {
display: flex !important;
justify-content: center !important;
align-items: center !important;
text-align: center;
margin-bottom: 2rem;
}
.ebook-cover {
margin: 0 auto 2rem auto;
display: block;
}
.ebook-image {
max-width: 300px;
width: 100%;
}
.ebook-badge {
top: -8px;
right: -8px;
padding: 0.4rem 0.8rem;
font-size: 0.75rem;
}
.ebook-title {
font-size: 1.3rem;
margin-bottom: 0.75rem;
}
.feature-item {
margin-bottom: 0.5rem;
padding: 0.4rem 0;
font-size: 0.9rem;
}
.feature-item i {
font-size: 1rem;
margin-right: 0.6rem;
}
.stat-box {
padding: 0.75rem;
margin-bottom: 1rem;
}
.stat-box .stat-number {
font-size: 1.2rem;
}
}
@media (max-width: 576px) {
.ebook-section {
padding: 1.5rem 0;
}
/* Extra küçük ekranlarda da ortaya hizala */
.ebook-preview {
display: flex !important;
justify-content: center !important;
align-items: center !important;
text-align: center;
margin-bottom: 1.5rem;
}
.ebook-cover {
margin: 0 auto 1.5rem auto;
display: block;
}
.ebook-image {
max-width: 250px;
}
.ebook-badge {
top: -6px;
right: -6px;
padding: 0.3rem 0.6rem;
font-size: 0.7rem;
}
.ebook-title {
font-size: 1.1rem;
margin-bottom: 0.5rem;
}
.feature-item {
font-size: 0.85rem;
margin-bottom: 0.4rem;
}
.feature-item i {
font-size: 0.9rem;
margin-right: 0.5rem;
}
.stat-box {
padding: 0.6rem;
}
.stat-box .stat-number {
font-size: 1.1rem;
}
}
/* Team Selection Styles */
.team-selection-section {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
position: relative;
}
.language-sort-container {
background: white;
border-radius: 15px;
padding: 1.5rem;
box-shadow: 0 4px 15px rgba(0,0,0,0.08);
margin-bottom: 2rem;
}
.language-sort {
border: 2px solid #e9ecef;
border-radius: 10px;
transition: all 0.3s ease;
}
.language-sort:focus {
border-color: var(--primary-color);
box-shadow: 0 0 0 0.2rem rgba(201, 30, 36, 0.25);
}
.language-sort option {
padding: 8px;
}
.language-buttons {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
justify-content: center;
}
.language-sort-btn {
border: 2px solid #e9ecef;
border-radius: 8px;
padding: 0.5rem 1rem;
font-size: 0.9rem;
font-weight: 500;
transition: all 0.3s ease;
white-space: nowrap;
}
.language-sort-btn:hover {
border-color: var(--primary-color);
background-color: var(--primary-color);
color: white;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(201, 30, 36, 0.3);
}
.language-sort-btn.active {
border-color: var(--primary-color);
background-color: var(--primary-color);
color: white;
box-shadow: 0 4px 12px rgba(201, 30, 36, 0.3);
}
.team-card {
background: white;
border-radius: 20px;
padding: 2rem 1.5rem;
box-shadow: 0 10px 30px rgba(0,0,0,0.08);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
border: 2px solid transparent;
position: relative;
overflow: hidden;
text-align: center;
opacity: 1;
transform: scale(1);
}
#agentsContainer {
display: flex;
flex-wrap: wrap;
}
#agentsContainer .col-lg-3 {
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.team-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--primary-color), #667eea, var(--primary-color));
transform: scaleX(0);
transition: transform 0.3s ease;
}
.team-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 50px rgba(201, 30, 36, 0.15);
border-color: var(--primary-color);
}
.team-card:hover::before {
transform: scaleX(1);
}
.team-image {
position: relative;
margin-bottom: 1.5rem;
display: inline-block;
}
.team-image img {
width: 150px;
height: 150px;
object-fit: cover;
border: 4px solid white;
box-shadow: 0 8px 25px rgba(0,0,0,0.15);
transition: all 0.3s ease;
}
.team-card:hover .team-image img {
transform: scale(1.05);
box-shadow: 0 12px 35px rgba(201, 30, 36, 0.2);
}
.language-flag {
position: absolute;
top: -5px;
right: -5px;
font-size: 1.5rem;
background: white;
border-radius: 50%;
width: 35px;
height: 35px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
border: 2px solid #f8f9fa;
z-index: 1;
}
.team-info {
text-align: center;
}
.team-name {
color: #2c3e50;
font-weight: 700;
margin-bottom: 0.5rem;
font-size: 1.2rem;
}
.team-title {
color: #6c757d;
font-size: 0.9rem;
margin-bottom: 1rem;
font-weight: 500;
}
.team-languages {
margin-bottom: 1.5rem;
}
.team-languages .badge {
margin: 0.25rem;
padding: 0.5rem 0.75rem;
font-size: 0.8rem;
font-weight: 600;
position: relative;
overflow: hidden;
transition: all 0.3s ease;
}
.team-languages .badge::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
transition: left 0.5s ease;
}
.team-languages .badge:hover::before {
left: 100%;
}
.team-languages .badge:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.team-stats {
display: flex;
justify-content: space-around;
margin-bottom: 1.5rem;
padding: 1rem;
background: #f8f9fa;
border-radius: 10px;
}
.stat-item {
text-align: center;
}
.stat-item strong {
display: block;
color: var(--primary-color);
font-size: 1.1rem;
font-weight: 700;
}
.stat-item small {
color: #6c757d;
font-size: 0.8rem;
}
.contact-expert-btn {
transition: all 0.3s ease;
border-radius: 10px;
font-weight: 600;
padding: 0.75rem 1.5rem;
}
.contact-expert-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(201, 30, 36, 0.3);
}
/* Priority Expert Styling */
.team-card.priority-expert {
border: 2px solid #007bff;
background: linear-gradient(135deg, #f8f9ff 0%, #ffffff 100%);
position: relative;
box-shadow: 0 8px 25px rgba(0, 123, 255, 0.15);
}
.team-card.priority-expert:hover {
border-color: #0056b3;
box-shadow: 0 15px 35px rgba(0, 123, 255, 0.25);
transform: translateY(-12px);
}
/* Priority Badge */
.priority-badge {
position: absolute;
top: -8px;
left: 50%;
transform: translateX(-50%);
background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
color: white;
padding: 4px 12px;
border-radius: 15px;
font-size: 11px;
font-weight: 600;
z-index: 2;
white-space: nowrap;
box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3);
animation: priorityBadgePulse 2s ease-in-out infinite;
}
.priority-badge i {
color: #ffd700;
margin-right: 4px;
animation: starTwinkle 1.5s ease-in-out infinite;
}
@keyframes priorityBadgePulse {
0%, 100% { transform: translateX(-50%) scale(1); }
50% { transform: translateX(-50%) scale(1.05); }
}
@keyframes starTwinkle {
0%, 100% { opacity: 1; }
50% { opacity: 0.7; }
}
/* Current Language Badge Styling */
.badge.current-language {
border: 2px solid #ffd700 !important;
box-shadow: 0 0 8px rgba(255, 215, 0, 0.4) !important;
font-weight: 700 !important;
position: relative;
animation: languageBadgeGlow 2s ease-in-out infinite;
}
.badge.current-language::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: linear-gradient(45deg, #ffd700, #ffed4e, #ffd700);
border-radius: inherit;
z-index: -1;
opacity: 0.3;
}
@keyframes languageBadgeGlow {
0%, 100% { box-shadow: 0 0 8px rgba(255, 215, 0, 0.4); }
50% { box-shadow: 0 0 15px rgba(255, 215, 0, 0.7); }
}
/* Enhanced team card for priority experts */
.team-card.priority-expert .team-image {
position: relative;
}
.team-card.priority-expert .team-image::after {
content: '';
position: absolute;
inset: 0;
border-radius: 50%;
padding: 3px;
background: linear-gradient(135deg, #007bff, #0056b3);
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask-composite: subtract;
-webkit-mask-composite: source-out;
}
.team-card.priority-expert .contact-expert-btn {
background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
border: none;
font-weight: 600;
box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);
transition: all 0.3s ease;
}
.team-card.priority-expert .contact-expert-btn:hover {
background: linear-gradient(135deg, #0056b3 0%, #004085 100%);
box-shadow: 0 6px 20px rgba(0, 123, 255, 0.4);
transform: translateY(-2px);
}
/* Expert Modal Styles */
.expert-info {
background: linear-gradient(135deg, #f8f9fa, #e9ecef);
border-radius: 15px;
padding: 2rem;
}
.expert-stats .stat-card {
border-radius: 8px;
text-align: center;
transition: transform 0.3s ease;
}
.expert-stats .stat-card:hover {
transform: translateY(-3px);
}
.expert-stats .stat-card div {
font-size: 1.1rem;
}
/* Details Modal Styles (2-Step Form) */
.details-progress {
margin: 2rem 0;
}
.progress-step-indicator {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
margin-bottom: 2rem;
}
.step-circle {
width: 90px;
height: 60px;
border-radius: 15%;
background: #e9ecef;
color: #6c757d;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 0.9rem;
transition: all 0.3s ease;
border: 3px solid #fff;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
position: relative;
text-align: center;
}
.step-circle i {
font-size: 1.2rem;
margin-bottom: 0.25rem;
}
.step-circle span {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.step-circle.active {
background: var(--primary-color);
color: white;
transform: scale(1.1);
box-shadow: 0 6px 20px rgba(201, 30, 36, 0.3);
}
.step-circle.completed {
background: #28a745;
color: white;
transform: scale(1.05);
}
.step-line {
width: 80px;
height: 3px;
background: #e9ecef;
border-radius: 2px;
position: relative;
}
.step-circle.completed ~ .step-line {
background: #28a745;
}
.details-step {
display: none;
opacity: 0;
transform: translateX(20px);
transition: all 0.3s ease;
min-height: 400px;
}
.details-step.active {
display: block;
opacity: 1;
transform: translateX(0);
animation: slideIn 0.4s ease-out;
}
@keyframes slideIn {
from {
opacity: 0;
transform: translateX(30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.topic-checkboxes {
background: #f8f9fa;
border-radius: 10px;
padding: 1.5rem;
border: 1px solid #e9ecef;
}
.topic-checkboxes .form-check {
background: white;
margin-bottom: 0.5rem;
padding: 0.75rem 1rem;
border-radius: 8px;
border: 1px solid #e9ecef;
transition: all 0.3s ease;
}
.topic-checkboxes .form-check:hover {
background: rgba(201, 30, 36, 0.05);
border-color: var(--primary-color);
}
.topic-checkboxes .form-check-input:checked {
background-color: var(--primary-color);
border-color: var(--primary-color);
}
.topic-checkboxes .form-check-input:checked ~ .form-check-label {
color: var(--primary-color);
font-weight: 600;
}
.topic-checkboxes .form-check-label {
margin-bottom: 0;
cursor: pointer;
transition: color 0.3s ease;
}
.get-details-btn {
transition: all 0.3s ease;
border-radius: 8px;
font-weight: 600;
}
.get-details-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(13, 110, 253, 0.25);
}
/* Message Input Container Styles */
.message-input-container {
position: relative;
}
.message-input-container .form-control {
border: 2px solid #e9ecef;
border-radius: 10px;
padding: 1rem;
font-size: 1rem;
transition: all 0.3s ease;
resize: vertical;
min-height: 120px;
}
.message-input-container .form-control:focus {
border-color: var(--primary-color);
box-shadow: 0 0 0 4px rgba(201, 30, 36, 0.1);
outline: none;
}
.message-input-container .form-control:valid:not(:placeholder-shown) {
border-color: #28a745;
background-color: rgba(40, 167, 69, 0.05);
}
.input-help-text {
margin-top: 0.75rem;
padding: 0.75rem;
background: rgba(102, 126, 234, 0.05);
border-radius: 8px;
border-left: 4px solid #667eea;
}
.input-help-text small {
color: #495057;
font-weight: 500;
}
.input-help-text i {
color: #667eea;
}
/* Mobile responsive for team and details */
@media (max-width: 768px) {
.team-selection-section {
padding: 2rem 0;
}
.team-card {
margin-bottom: 1.5rem;
padding: 1.5rem 1rem;
border-radius: 15px;
}
.team-image img {
width: 150px;
height: 150px;
}
.team-name {
font-size: 1.1rem;
}
.team-title {
font-size: 0.85rem;
}
.team-languages .badge {
font-size: 0.7rem;
padding: 0.35rem 0.5rem;
margin: 0.15rem;
}
.team-stats {
flex-direction: row;
gap: 0.75rem;
padding: 0.75rem;
margin-bottom: 1rem;
}
.team-stats .stat-item {
flex: 1;
}
.team-stats .stat-item strong {
font-size: 1rem;
}
.team-stats .stat-item small {
font-size: 0.7rem;
}
.contact-expert-btn {
font-size: 0.9rem;
padding: 0.6rem 1.25rem;
}
.priority-badge {
font-size: 10px;
padding: 3px 8px;
top: -6px;
}
.language-flag {
width: 28px;
height: 28px;
font-size: 1.2rem;
top: -3px;
right: -3px;
}
.step-line {
width: 3px;
height: 30px;
}
.step-circle {
width: 70px;
height: 50px;
}
.step-circle i {
font-size: 1rem;
}
.step-circle span {
font-size: 0.6rem;
}
.details-step {
min-height: 300px;
}
.topic-checkboxes {
padding: 1rem 0.75rem;
}
.topic-checkboxes .form-check {
padding: 0.6rem 0.75rem;
margin-bottom: 0.4rem;
}
.topic-checkboxes .form-check-label {
font-size: 0.9rem;
}
.expert-info {
margin-bottom: 1.5rem;
padding: 1.5rem 1rem;
}
.expert-stats .stat-card {
margin-bottom: 0.75rem;
}
.get-details-btn {
font-size: 0.9rem;
padding: 0.75rem 1.25rem;
}
.message-input-container .form-control {
min-height: 100px;
padding: 0.75rem;
font-size: 0.9rem;
}
.input-help-text {
padding: 0.5rem 0.75rem;
margin-top: 0.5rem;
}
.input-help-text small {
font-size: 0.8rem;
}
}
@media (max-width: 576px) {
.team-selection-section {
padding: 1.5rem 0;
}
.team-card {
padding: 1.25rem 0.75rem;
margin-bottom: 1.25rem;
border-radius: 12px;
}
.team-image img {
width: 150px;
height: 150px;
}
.team-name {
font-size: 1rem;
margin-bottom: 0.25rem;
}
.team-title {
font-size: 0.8rem;
margin-bottom: 0.75rem;
}
.team-languages {
margin-bottom: 1rem;
}
.team-languages .badge {
font-size: 0.65rem;
padding: 0.3rem 0.4rem;
margin: 0.1rem;
}
.team-stats {
flex-direction: column;
gap: 0.5rem;
padding: 0.6rem;
}
.team-stats .stat-item strong {
font-size: 0.95rem;
}
.team-stats .stat-item small {
font-size: 0.65rem;
}
.contact-expert-btn {
font-size: 0.85rem;
padding: 0.55rem 1rem;
}
.priority-badge {
font-size: 9px;
padding: 2px 6px;
top: -5px;
}
.language-flag {
width: 25px;
height: 25px;
font-size: 1.1rem;
}
.step-circle {
width: 65px;
height: 45px;
}
.step-circle i {
font-size: 0.9rem;
}
.step-circle span {
font-size: 0.55rem;
}
.step-line {
height: 25px;
}
.topic-checkboxes {
padding: 0.75rem 0.5rem;
}
.topic-checkboxes .form-check {
padding: 0.5rem 0.6rem;
margin-bottom: 0.35rem;
}
.topic-checkboxes .form-check-label {
font-size: 0.85rem;
}
.expert-info {
padding: 1.25rem 0.75rem;
}
.message-input-container .form-control {
min-height: 90px;
padding: 0.65rem;
font-size: 0.85rem;
}
.get-details-btn {
font-size: 0.85rem;
padding: 0.65rem 1rem;
}
}
/* Professional Footer Styles */
.professional-footer {
background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
position: relative;
}
.professional-footer::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--primary-color), #764ba2, #667eea);
}
.footer-main .row {
align-items: flex-start;
}
.footer-main .col-lg-4 {
text-align: left;
}
.footer-main .col-lg-2 {
text-align: left;
}
.footer-brand {
text-align: left;
}
.footer-brand img {
filter: brightness(1.1);
}
.footer-description {
line-height: 1.6;
font-size: 0.95rem;
}
.footer-stats .stat-item {
text-align: center;
padding: 1rem 0.5rem;
background: rgba(255,255,255,0.05);
border-radius: 8px;
transition: all 0.3s ease;
}
.footer-stats .stat-item:hover {
background: rgba(255,255,255,0.1);
transform: translateY(-2px);
}
.footer-stats .stat-number {
font-size: 1.5rem;
font-weight: 700;
margin: 0;
}
.footer-title {
font-weight: 600;
position: relative;
padding-bottom: 0.5rem;
}
.footer-title::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 30px;
height: 2px;
background: var(--primary-color);
}
.footer-links li {
margin-bottom: 0.5rem;
transition: all 0.3s ease;
}
.footer-links li:hover {
transform: translateX(5px);
}
.footer-links a {
transition: all 0.3s ease;
display: block;
padding: 0.25rem 0;
}
.footer-links a:hover {
color: var(--primary-color) !important;
}
.contact-item {
display: flex;
align-items: flex-start;
justify-content: flex-start;
text-align: start;
transition: all 0.3s ease;
padding: 0.5rem;
border-radius: 6px;
}
.contact-item:hover {
background: rgba(255,255,255,0.05);
}
.contact-item i {
width: 20px;
flex-shrink: 0;
text-align: start;
}
.social-links {
display: flex;
gap: 0.75rem;
justify-content: flex-start;
}
.social-link {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background: rgba(255,255,255,0.1);
color: #fff;
text-decoration: none;
border-radius: 50%;
transition: all 0.3s ease;
border: 2px solid transparent;
}
.social-link:hover {
background: var(--primary-color);
color: white;
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(201, 30, 36, 0.3);
}
.footer-bottom {
background: rgba(0,0,0,0.3);
}
.footer-bottom .row {
align-items: center;
}
.footer-bottom .col-md-6:first-child {
text-align: left !important;
}
.footer-bottom .col-md-6:last-child {
text-align: right !important;
}
.footer-bottom .col-md-6:last-child .footer-legal {
display: flex;
justify-content: flex-end;
gap: 1rem;
}
/* Desktop'ta text-md-end class'ını destekle */
@media (min-width: 768px) {
.footer-bottom .text-md-end {
text-align: right !important;
}
}
.footer-legal a:hover {
color: var(--primary-color) !important;
}
/* RTL Support for Arabic and Persian */
[dir="rtl"] .floating-input .input-icon {
left: 1rem;
right: auto;
}
[dir="rtl"] .floating-input .input-check {
left: 2.5rem;
right: auto;
}
[dir="rtl"] .btn i.me-2 {
margin-left: 0.5rem;
margin-right: 0;
}
[dir="rtl"] .btn i.ms-2 {
margin-right: 0.5rem;
margin-left: 0;
}
[dir="rtl"] .d-flex.align-items-center {
flex-direction: row-reverse;
}
[dir="rtl"] .me-3 {
margin-left: 1rem;
margin-right: 0;
}
/* Force LTR for contact info */
.ltr-content {
direction: ltr !important;
text-align: left !important;
}
/* Footer Mobile Responsive */
@media (max-width: 768px) {
.professional-footer .footer-main {
padding: 3rem 0;
}
/* Footer main mobil ortalama */
.footer-main .col-lg-4,
.footer-main .col-lg-2,
.footer-main .col-md-6 {
text-align: center !important;
margin-bottom: 2rem;
}
.footer-brand {
text-align: center !important;
}
.footer-stats .row {
gap: 0.5rem;
}
.footer-stats .stat-item {
padding: 0.75rem 0.25rem;
}
.footer-stats .stat-number {
font-size: 1.2rem;
}
.contact-item {
flex-direction: row;
align-items: center;
justify-content: flex-start;
text-align: start;
}
.social-links {
justify-content: flex-start;
margin-top: 1rem;
}
/* Footer bottom mobil düzenleme */
.footer-bottom .row {
text-align: center;
}
.footer-bottom .col-md-6:first-child {
text-align: center !important;
margin-bottom: 1rem;
}
.footer-bottom .col-md-6:last-child {
text-align: center !important;
}
.footer-legal {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
justify-content: center !important;
}
.footer-legal a {
margin: 0;
}
}
@media (max-width: 576px) {
.professional-footer .footer-main {
padding: 2rem 0;
}
.footer-description {
font-size: 0.9rem;
}
.contact-item {
padding: 0.25rem;
margin-bottom: 0.75rem;
}
.social-link {
width: 35px;
height: 35px;
font-size: 0.9rem;
}
}
/* Why Turkey Section Mobile Spacing */
@media (max-width: 768px) {
/* Why Turkey section ikinci column için üst boşluk */
section .row.align-items-center .col-lg-6:last-child {
margin-top: 2rem;
}
}
/* Mobile and Medium Screen Navbar Collapse Professional Styling */
@media (max-width: 991.98px) {
.navbar-collapse {
background: rgba(255, 255, 255, 0.98);
backdrop-filter: blur(10px);
border-radius: 0 0 15px 15px;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
margin-top: 0;
padding: 1.5rem;
border: 1px solid rgba(0, 0, 0, 0.05);
}
/* Mobile Footer Bar */
.mobile-footer-bar {
position: fixed;
left: 8px; right: 8px; bottom: 8px;
background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
border-radius: 20px;
box-shadow: 0 8px 30px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.05);
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
z-index: 1040;
padding: 8px;
backdrop-filter: blur(10px);
}
.mobile-footer-bar .mfb-btn {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 12px 8px;
gap: 6px;
font-size: 11px;
font-weight: 600;
color: #333;
border: none;
background: linear-gradient(135deg, #f8f9fa, #e9ecef);
text-decoration: none;
border-radius: 14px;
transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
position: relative;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.mobile-footer-bar .mfb-btn::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: linear-gradient(135deg, rgba(255,255,255,0.8), rgba(255,255,255,0.4));
opacity: 0;
transition: opacity 0.2s ease;
}
.mobile-footer-bar .mfb-btn:active::before {
opacity: 1;
}
.mobile-footer-bar .mfb-btn i {
font-size: 22px;
margin-bottom: 2px;
position: relative;
z-index: 2;
transition: transform 0.2s ease;
}
.mobile-footer-bar .mfb-btn:active {
transform: scale(0.95);
}
.mobile-footer-bar .mfb-btn:active i {
transform: scale(1.1);
}
.mobile-footer-bar .mfb-whatsapp {
background: linear-gradient(135deg, #25D366, #128C7E);
color: #fff;
}
.mobile-footer-bar .mfb-form {
background: linear-gradient(135deg, var(--primary-color), #a71e23);
color: #fff;
}
.mobile-footer-bar .mfb-btn span {
position: relative;
z-index: 2;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Extra space for bottom bar */
@media (max-width: 991.98px) {
body { padding-bottom: 75px; }
}
.navbar-nav .nav-item {
margin-bottom: 0.5rem;
}
.navbar-nav .nav-link {
padding: 0.75rem 1rem !important;
border-radius: 8px;
transition: all 0.2s ease;
font-weight: 500 !important;
color: #333 !important;
background: transparent;
border: 1px solid transparent;
position: relative;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus,
.navbar-nav .nav-link:active {
background: var(--primary-color);
color: white !important;
transform: translateX(3px);
border-color: var(--primary-color);
}
/* Touch/Click responsive styling */
.navbar-nav .nav-link:active {
transform: translateX(1px);
transition: all 0.1s ease;
}
/* Language dropdown mobilde daha compact */
.dropdown {
margin: 1rem 0 !important;
}
.dropdown .btn {
width: 100%;
padding: 0.75rem;
border-radius: 8px;
font-size: 0.9rem;
}
.dropdown-menu {
width: 100%;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(0, 0, 0, 0.05);
}
.dropdown-item {
padding: 0.75rem 1rem;
transition: all 0.3s ease;
}
.dropdown-item:hover {
background: var(--primary-color);
color: white;
}
/* CTA Button mobilde full width */
.navbar-collapse .btn-primary {
width: 100%;
padding: 1rem;
border-radius: 8px;
font-weight: 600;
margin-top: 1rem;
box-shadow: 0 4px 15px rgba(52, 144, 220, 0.3);
}
.navbar-collapse .btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(52, 144, 220, 0.4);
}
}
/* Floating Contact Widget (Desktop) */
.floating-contact-widget {
position: fixed;
right: 18px;
bottom: 24px;
z-index: 1040;
}
.floating-contact-widget .fcw-notification {
position: absolute;
top: -50px;
right: -15px;
background: linear-gradient(135deg, #25D366, #25D366dd);
color: white;
padding: 10px 14px;
border-radius: 25px;
font-size: 13px;
font-weight: 600;
white-space: nowrap;
box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
opacity: 0;
transform: translateY(10px) scale(0.8);
animation: notificationPop 4s ease-in-out infinite;
pointer-events: auto;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
max-width: 250px;
backdrop-filter: blur(10px);
}
.floating-contact-widget .fcw-notification-icon {
font-size: 14px;
margin-right: 2px;
}
.floating-contact-widget .fcw-notification::after {
content: '';
position: absolute;
bottom: -6px;
right: 25px;
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid #25D366;
}
.floating-contact-widget .fcw-toggle {
width: 56px;
height: 56px;
border-radius: 50%;
border: none;
background: linear-gradient(135deg, var(--primary-color), #e74c3c);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 8px 25px rgba(0,0,0,0.3);
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
cursor: pointer;
position: relative;
overflow: visible;
}
.floating-contact-widget .fcw-pulse {
position: absolute;
top: -4px;
left: -4px;
right: -4px;
bottom: -4px;
border-radius: 50%;
background: inherit;
opacity: 0.7;
animation: pulse 2s ease-in-out infinite;
z-index: -1;
}
.floating-contact-widget .fcw-toggle:hover {
transform: scale(1.1);
box-shadow: 0 12px 35px rgba(0,0,0,0.4);
}
.floating-contact-widget .fcw-toggle:active {
transform: scale(0.95);
}
.floating-contact-widget .fcw-toggle i {
font-size: 20px;
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
position: relative;
z-index: 2;
}
.floating-contact-widget .fcw-menu {
opacity: 0;
visibility: hidden;
transform: translateY(20px) scale(0.8);
flex-direction: column;
gap: 12px;
position: absolute;
right: 0;
bottom: 70px;
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.floating-contact-widget.open .fcw-menu {
opacity: 1;
visibility: visible;
transform: translateY(0) scale(1);
display: flex;
}
.floating-contact-widget .fcw-item {
width: 48px;
height: 48px;
border-radius: 50%;
border: none;
background: #fff;
color: #333;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 6px 20px rgba(0,0,0,0.15);
transition: all 0.2s ease;
cursor: pointer;
transform: scale(0);
animation: itemPop 0.3s ease forwards;
}
.floating-contact-widget .fcw-item:nth-child(1) { animation-delay: 0.1s; }
.floating-contact-widget .fcw-item:nth-child(2) { animation-delay: 0.15s; }
.floating-contact-widget .fcw-item:nth-child(3) { animation-delay: 0.2s; }
.floating-contact-widget .fcw-item:nth-child(4) { animation-delay: 0.25s; }
.floating-contact-widget .fcw-item:hover {
transform: scale(1.1);
box-shadow: 0 8px 25px rgba(0,0,0,0.25);
}
.floating-contact-widget .fcw-item[data-channel="whatsapp"] {
background: #25D366;
color: #fff;
}
.floating-contact-widget .fcw-item[data-channel="telegram"] {
background: #0088cc;
color: #fff;
}
.floating-contact-widget .fcw-item[data-channel="call"] {
background: #ff6b6b;
color: #fff;
}
.floating-contact-widget .fcw-item[data-channel="form"] {
background: var(--primary-color);
color: #fff;
}
@keyframes itemPop {
0% { transform: scale(0) rotate(180deg); opacity: 0; }
50% { transform: scale(1.2) rotate(90deg); }
100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
@keyframes pulse {
0% { transform: scale(1); opacity: 0.7; }
50% { transform: scale(1.1); opacity: 0.4; }
100% { transform: scale(1.2); opacity: 0; }
}
@keyframes notificationPop {
0%, 70% { opacity: 0; transform: translateY(10px) scale(0.8); }
10%, 60% { opacity: 1; transform: translateY(0) scale(1); }
15%, 55% { transform: translateY(-2px) scale(1.05); }
20%, 50% { transform: translateY(0) scale(1); }
}
/* Contact Method Selector */
.contact-method-selector {
margin-top: 0.5rem;
}
.contact-methods-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
.contact-method-radio {
display: block;
cursor: pointer;
position: relative;
}
.contact-method-radio input[type="radio"] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.contact-method-content {
display: flex;
flex-direction: column;
align-items: center;
padding: 16px 12px;
border: 2px solid #e9ecef;
border-radius: 12px;
background: #fff;
transition: all 0.2s ease;
text-align: center;
position: relative;
overflow: hidden;
}
.contact-method-content::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: linear-gradient(135deg, rgba(201, 30, 36, 0.05), rgba(201, 30, 36, 0.1));
opacity: 0;
transition: opacity 0.2s ease;
}
.contact-method-radio:hover .contact-method-content::before {
opacity: 1;
}
.contact-method-radio input[type="radio"]:checked + .contact-method-content {
border-color: var(--primary-color);
background: linear-gradient(135deg, rgba(201, 30, 36, 0.1), rgba(201, 30, 36, 0.15));
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(201, 30, 36, 0.3);
}
.contact-method-radio input[type="radio"]:checked + .contact-method-content::after {
content: '✓';
position: absolute;
top: 8px;
right: 8px;
width: 20px;
height: 20px;
background: var(--primary-color);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: bold;
z-index: 3;
}
.contact-method-content i {
font-size: 20px;
margin-bottom: 8px;
color: #6c757d;
transition: color 0.2s ease;
position: relative;
z-index: 2;
}
.contact-method-radio input[type="radio"]:checked + .contact-method-content i {
color: var(--primary-color);
}
.contact-method-content span {
font-weight: 600;
font-size: 13px;
color: #333;
margin-bottom: 4px;
position: relative;
z-index: 2;
}
.contact-method-content small {
font-size: 11px;
color: #6c757d;
position: relative;
z-index: 2;
}
.contact-method-radio input[value="whatsapp"]:checked + .contact-method-content i {
color: #25D366;
}
.contact-method-radio input[value="whatsapp"]:checked + .contact-method-content::after {
background: #25D366;
}
.contact-method-radio input[value="telegram"]:checked + .contact-method-content i {
color: #0088cc;
}
.contact-method-radio input[value="telegram"]:checked + .contact-method-content::after {
background: #0088cc;
}
.contact-method-radio input[value="email"]:checked + .contact-method-content i {
color: #17a2b8;
}
.contact-method-radio input[value="email"]:checked + .contact-method-content::after {
background: #17a2b8;
}
@media (max-width: 576px) {
.contact-methods-grid {
grid-template-columns:repeat(2, 1fr);
}
.contact-method-radio {
padding: 4px 2px;
}
}