/* Define primary color CSS variables at the root level */
:root {
--primary-color: #da2025;
--primary-light-color: #da2025;
--primary-dark-color: #E06B00;
--primary-darker-color: #B25500;
--secondary-color: #F59E0B;
/* New Hero Slider Variables */
--hero-overlay-color: rgba(26, 26, 26, 0.7);
--hero-text-color: #ffffff;
--hero-accent-color: #da2025;
--hero-duration: 0.8s;
--hero-transition: cubic-bezier(0.16, 1, 0.3, 1);
}
body, h1, h2, h3, h4, h5, h6, p, a, span, div, ul, ol, li, input, textarea, button {
font-family: 'Quicksand', sans-serif !important;
}
/* Basic styles for mobile nav */
.mobile-nav {
transform: translateX(-100%);
transition: transform 0.3s ease-in-out;
visibility: visible; /* Ensure visibility */
will-change: transform; /* Optimize performance */
}
.mobile-nav.open {
transform: translateX(0);
}
/* Fixed body when menu is open to prevent content shifting */
body.menu-open {
overflow: hidden;
position: fixed;
width: 100%;
}
/* Slider Alanı Yükseklik */
.swiper-container-hero {
height: 60vh;
min-height: 320px;
max-height: 600px;
}
@media (min-width: 480px) {
.swiper-container-hero {
height: 65vh;
min-height: 350px;
max-height: 700px;
}
}
@media (min-width: 768px) {
.swiper-container-hero {
height: 70vh;
min-height: 400px;
max-height: 800px;
}
}
@media (min-width: 1024px) {
.swiper-container-hero {
height: 75vh;
min-height: 450px;
max-height: 900px;
}
}
@media (min-width: 1280px) {
.swiper-container-hero {
height: 80vh;
min-height: 500px;
max-height: 1000px;
}
}
@media (min-width: 1440px) {
.swiper-container-hero {
height: 75vh;
min-height: 600px;
max-height: 1100px;
}
}
/* Basic styling for Swiper slides */
.swiper-slide {
display: flex;
justify-content: flex-start; /* Changed from center to flex-start to align left */
align-items: center;
background-size: cover;
background-position: center;
color: white;
text-align: center;
}
/* Modern Navbar styling */
.main-header {
background-color: rgba(255, 255, 255, 0.95);
transition: background-color 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
border-bottom: 1px solid transparent;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
.main-header.scrolled {
background-color: white;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.07);
border-bottom-color: #e5e7eb;
}
/* Nav item and link styling */
.nav-item {
position: relative;
}
.nav-link {
position: relative;
transition: all 0.3s ease;
}
.nav-link::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 3px;
background: var(--primary-color);
transition: width 0.3s ease;
border-radius: 3px 3px 0 0;
}
.nav-link:hover::after,
.nav-link.active::after {
width: 100%;
}
/* Mobile Menu Styling */
.mobile-nav-link {
display: flex;
align-items: center;
color: #4b5563; /* Changed from #e5e7eb to gray-600 */
font-weight: 500;
padding: 0.75rem 1rem;
border-radius: 0.5rem;
transition: all 0.2s ease;
position: relative;
}
/* Fixed positioning for icon and text in mobile menu */
.mobile-nav-link i.w-8 {
flex: 0 0 2rem; /* Fixed width for icons */
text-align: center;
margin-right: 0.5rem;
}
.mobile-nav-link span {
flex: 1;
}
.mobile-nav-link:hover,
.mobile-nav-link.active {
background-color: rgba(252, 136, 22, 0.1); /* Primary color with 10% opacity */
color: var(--primary-color); /* Changed from white to primary color */
}
.mobile-nav-link.active {
background-color: rgba(218, 32, 37, 0.45); /* Primary color with 15% opacity */
color: var(--primary-color); /* Changed from white to primary color */
font-weight: 600;
}
.mobile-dropdown-menu {
transition: all 0.3s ease;
border-left: 1px dashed rgba(252, 136, 22, 0.3); /* Changed to primary color */
}
.slide-content {
position: relative;
/* Modern glass-like effect */
background: linear-gradient(135deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5));
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
padding: 3rem 4rem;
border-radius: 1rem;
width: 800px;
margin-left: 10%;
/* Premium shadow effect */
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5),
0 0 0 1px rgba(255, 255, 255, 0.1),
inset 0 2px 1px rgba(255, 255, 255, 0.07);
text-align: left;
overflow: hidden;
/* Border and decorative elements */
border: 1px solid rgba(255, 255, 255, 0.1);
/* Smooth entrance animation */
opacity: 0;
transform: translateY(30px);
transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Decorative accent line on the side */
.slide-content::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 6px;
height: 100%;
background: linear-gradient(to bottom,
var(--primary-color),
var(--primary-dark-color),
var(--primary-color));
opacity: 0.9;
border-radius: 3px 0 0 3px;
}
/* Decorative corner accent */
.slide-content::after {
content: '';
position: absolute;
top: -20px;
right: -20px;
width: 100px;
height: 100px;
background: radial-gradient(circle,
rgba(255, 255, 255, 0.15) 0%,
rgba(255, 255, 255, 0) 70%);
border-radius: 50%;
z-index: -1;
}
/* Make slide content responsive */
@media (max-width: 1280px) {
.slide-content {
width: 700px;
}
}
@media (max-width: 1024px) {
.slide-content {
width: 85vw !important;
padding: 2.5rem 3rem;
}
}
@media (max-width: 992px) {
.slide-content {
min-width: 85vw !important;
padding: 2rem 2.5rem;
}
}
@media (max-width: 768px) {
.swiper-slide {
justify-content: center; /* Center on mobile */
}
.slide-content {
min-width: 85vw !important;
margin-left: auto; /* Center instead of left alignment */
margin-right: auto;
padding: 1.75rem 2rem;
}
.slide-content::before {
width: 4px; /* Smaller accent on mobile */
}
}
@media (max-width: 576px) {
.slide-content {
width: 90vw !important;
margin-left: auto;
margin-right: auto;
padding: 1.5rem;
border-radius: 0.75rem;
}
}
.swiper-slide-active .slide-content {
opacity: 1;
transform: translateY(0);
}
/* Content Element Animation */
.slide-content > * {
opacity: 0;
transform: translateX(-20px);
transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Staggered Animations for Active Slide */
.swiper-slide-active .slide-content h2 {
opacity: 1;
transform: translateX(0);
transition-delay: 0.4s;
}
.swiper-slide-active .slide-content p {
opacity: 1;
transform: translateX(0);
transition-delay: 0.6s;
}
.swiper-slide-active .slide-content .hero-button {
opacity: 1;
transform: translateX(0);
transition-delay: 0.8s;
}
/* Heading Styles */
.slide-content h2 {
font-weight: 700;
line-height: 1.25;
color: #ffffff;
text-shadow: 1px 1px 3px rgba(0,0,0,0.4);
margin-bottom: 1.25rem;
}
/* Paragraph Styles */
.slide-content p {
color: #e5e7eb;
font-weight: 300;
line-height: 1.7;
margin-bottom: 2rem;
}
/* ... [Mevcut diğer stiller kalıyor] ... */
/* Basic styling for Swiper slides */
.swiper-slide {
display: flex;
justify-content: flex-start; /* Changed from center to flex-start to align left */
align-items: center;
background-size: cover;
background-position: center;
color: white;
text-align: center;
}
.slide-content {
position: relative; /* For absolute positioning of pseudo-elements */
background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5)); /* Base gradient */
padding: 3rem 4rem;
border-radius: 0.5rem; /* Slightly less rounded */
max-width: 60%; /* Smaller max width */
box-shadow: 0 20px 40px rgba(0,0,0,0.3); /* Stronger shadow */
text-align: left;
border: 1px solid rgba(255, 255, 255, 0.1);
overflow: hidden; /* Ensure pseudo-elements don't overflow */
/* Base Animation */
opacity: 0;
transform: translateY(30px);
transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}
.swiper-slide-active .slide-content {
opacity: 1;
transform: translateY(0);
}
/* Content Element Base Animation */
.slide-content > * {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
/* Staggered Animations for Active Slide */
.swiper-slide-active .slide-content h2 {
opacity: 1; transform: translateY(0); transition-delay: 0.4s;
}
.swiper-slide-active .slide-content p{
opacity: 1; transform: translateY(0); transition-delay: 0.6s;
}
.swiper-slide-active .slide-content.hero-button {
opacity: 1; transform: translateY(0); transition-delay: 0.8s;
}
/* Staggered Animations for Left Layout */
.swiper-slide-active .slide-content h2 {
opacity: 1; transform: translateX(0); transition-delay: 0.4s; transform: translateY(0); /* Reset X */
}
.swiper-slide-active .slide-content p {
opacity: 1; transform: translateX(0); transition-delay: 0.6s; transform: translateY(0); /* Reset X */
}
.swiper-slide-active .slide-content .hero-button {
opacity: 1; transform: translateX(0); transition-delay: 0.8s; transform: translateY(0); /* Reset X */
}
/* Initial state for left layout animation */
.slide-content > * {
transform: translateX(-20px); /* Start from left */
}
/* Heading Styles */
.slide-content h2 {
font-weight: 700; /* Bold */
line-height: 1.25; /* Slightly adjusted */
color: #ffffff;
text-shadow: 1px 1px 3px rgba(0,0,0,0.4);
}
.layout-left h2 {
/* Optional: slightly smaller heading for left align? */
}
/* Paragraph Styles */
.slide-content p {
color: #e5e7eb; /* gray-200 */
font-weight: 300; /* Lighter weight */
line-height: 1.6;
}
/* Decorative Elements */
.slide-content.layout-left::after {
content: '';
position: absolute;
top: 2rem;
bottom: 2rem;
left: 1.5rem;
width: 4px;
background: linear-gradient(to bottom, rgba(59, 130, 246, 0), var(--primary-color), rgba(59, 130, 246, 0));
border-radius: 2px;
}
/* Custom transition for nav links */
.nav-link::after {
content: '';
display: block;
width: 0;
height: 2px;
background: var(--primary-color); /* Was Blue-600 */
transition: width .3s;
}
.nav-link:hover::after {
width: 100%;
}
/* Style for the active nav link */
.nav-link.active::after {
width: 100%;
}
.nav-link.active {
color: var(--primary-color); /* Was blue-700 */
font-weight: 600; /* semibold */
}
/* Dropdown positioning */
.dropdown-menu {
display: block; /* Keep block for layout, control visibility with opacity/transform */
opacity: 0;
transform: translateY(10px);
visibility: hidden;
transition: opacity 0.2s ease-out, transform 0.2s ease-out, visibility 0s linear 0.2s;
pointer-events: none;
}
.dropdown:hover .dropdown-menu,
.dropdown .dropdown-toggle[aria-expanded="true"] + .dropdown-menu {
opacity: 1;
transform: translateY(0);
visibility: visible;
transition-delay: 0s;
pointer-events: auto;
}
/* Ken Burns Effect for Slider Backgrounds */
@keyframes kenburns {
0% {
transform: scale(1.1) translate(0, 0);
}
100% {
transform: scale(1) translate(-5px, 5px); /* Subtle movement */
}
}
.swiper-slide-bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
animation: kenburns 15s ease-out infinite alternate; /* Adjust duration as needed */
z-index: -1; /* Place behind content */
}
/* Reset animation on interaction or slide change if needed - handled by swiper usually */
/* Enhanced Button Style */
.hero-button {
display: inline-flex; /* For icon alignment */
align-items: center;
background-image: linear-gradient(to right, var(--primary-color), var(--primary-dark-color)); /* Was Blue gradient */
color: white;
padding: 0.75rem 1.5rem; /* Adjust padding */
border-radius: 0.375rem; /* rounded-md */
font-weight: 500; /* medium */
transition: all 0.3s ease;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.hero-button:hover {
background-image: linear-gradient(to right, var(--primary-dark-color), var(--primary-darker-color)); /* Was Darker gradient */
box-shadow: 0 6px 12px rgba(0,0,0,0.15);
transform: translateY(-2px);
}
.hero-button i {
margin-left: 0.5rem; /* Space between text and icon */
}
/* --- General Enhancements --- */
/* Enhanced Card Base Style */
.enhanced-card {
background-color: white;
border-radius: 0.5rem; /* rounded-lg */
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03); /* Softer shadow */
transition: transform 0.3s ease, box-shadow 0.3s ease;
overflow: hidden;
}
.enhanced-card:hover {
transform: translateY(-4px);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.07), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* Slightly larger shadow on hover */
}
.enhanced-card img {
transition: transform 0.3s ease;
}
.enhanced-card:hover img {
transform: scale(1.03);
}
/* Section Separator Example (Angled Top) */
.section-separator-top {
position: relative;
}
.section-separator-top::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 50px; /* Adjust height */
background-color: inherit; /* Match the section background */
clip-path: polygon(0 0, 100% 100%, 100% 0); /* Simple angle */
transform: translateY(-100%);
}
/* Need to ensure content below separator has enough padding-top */
/* Faydali Linkler Card Enhancement */
/* Removed previous .faydali-link-card styles */
/* Removed previous .faydali-link-icon-wrapper styles */
/* Removed previous .faydali-link-card:hover styles */
/* Testimonial Card Enhancement */
.testimonial-card {
background-color: #f9fafb; /* gray-50 */
padding: 2rem;
border-radius: 0.5rem;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
text-align: center;
position: relative;
border-top: 4px solid var(--primary-color); /* Was blue-500 accent */
}
.testimonial-card::before {
content: '\f10d'; /* Font Awesome quote-left */
font-family: 'Font Awesome 6 Free';
font-weight: 900;
position: absolute;
top: 1rem;
left: 1.5rem;
font-size: 2.5rem;
color: var(--primary-light-color);
opacity: 0.8;
z-index: 0;
}
.testimonial-card img {
border-width: 4px;
border-color: var(--primary-light-color); /* Was blue-200 (#bfdbfe) */
margin-top: 1rem; /* Space below quote icon */
position: relative; /* Ensure image is above quote */
z-index: 1;
}
.testimonial-card p.quote {
font-style: italic;
color: #4b5563; /* gray-600 */
margin-bottom: 1.5rem;
position: relative; /* Ensure text is above quote */
z-index: 1;
}
/* --- End General Enhancements --- */
/* --- Navbar Enhancements --- */
/* Base Header Style (Transparent) */
header.main-header {
background-color: rgba(255, 255, 255, 0.9); /* Semi-transparent white */
transition: background-color 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
border-bottom: 1px solid transparent; /* Start with transparent border */
backdrop-filter: blur(5px); /* Optional: Add blur effect */
-webkit-backdrop-filter: blur(5px);
}
/* Scrolled Header Style */
header.main-header.scrolled {
background-color: white;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* shadow-md */
border-bottom-color: #e5e7eb; /* border-gray-200 */
}
/* Dropdown Animation */
.dropdown-menu {
display: block; /* Keep block for layout, control visibility with opacity/transform */
opacity: 0;
transform: translateY(10px);
visibility: hidden;
transition: opacity 0.2s ease-out, transform 0.2s ease-out, visibility 0s linear 0.2s;
pointer-events: none;
/* ... other dropdown styles ... */
}
.dropdown:hover .dropdown-menu,
.dropdown .dropdown-toggle[aria-expanded="true"] + .dropdown-menu {
opacity: 1;
transform: translateY(0);
visibility: visible;
transition-delay: 0s;
pointer-events: auto;
}
/* --- End Navbar Enhancements --- */
/* --- Haberler Section Enhancements --- */
.news-card {
position: relative;
border-radius: 0.75rem; /* rounded-xl */
overflow: hidden;
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
display: block; /* Make it behave like a link */
background-color: #e5e7eb; /* Fallback bg */
}
.news-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 30px rgba(0,0,0,0.15);
}
.news-card-image {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
transition: transform 0.4s ease;
}
.news-card:hover .news-card-image {
transform: scale(1.05);
}
.news-card-content {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 1.5rem;
background: linear-gradient(to top, rgba(0,0,0,0.85) 20%, rgba(0,0,0,0));
color: white;
transition: background 0.3s ease;
}
.news-card:hover .news-card-content {
background: linear-gradient(to top, rgba(0,0,0,0.95) 30%, rgba(0,0,0,0));
}
.news-card-title {
font-size: 1.25rem; /* text-xl */
font-weight: 700; /* bold */
line-height: 1.4;
margin-bottom: 0.75rem; /* Adjusted margin */
transition: transform 0.3s ease;
}
.news-card:hover .news-card-title {
transform: translateY(-3px);
}
.news-card-date {
font-size: 0.8rem;
color: rgba(255, 255, 255, 0.7);
}
/* Specific heights for grid layout */
.news-card-featured {
min-height: 400px; /* Reduced from 450px to balance with 3 news items */
}
.news-card-standard {
min-height: 200px; /* Reduced from 213px to fit 3 items better */
}
/* For the vertical slider layout */
.swiper-slide .news-card-standard {
min-height: 180px; /* Shorter to fit 3 items vertically */
margin-bottom: 0; /* Remove bottom margin since swiper handles spacing */
}
/* For mobile, adjust the swiper-container-news */
@media (max-width: 767px) {
.news-card-featured {
min-height: 350px; /* Even smaller on mobile */
}
.swiper-slide .news-card-standard {
min-height: 200px;
margin-bottom: 1.5rem;
}
}
/* --- End Haberler Section Enhancements --- */
/* --- Duyurular Section Enhancements (v6 - Minimalist + Image) --- */
#duyurular {
background-color: #f3f4f6; /* gray-100 */
}
.announcement-card-v6 {
background-color: white;
background-image: url('data:image/svg+xml;utf8,');
border-radius: 0.5rem; /* rounded-lg */
position: relative;
border-left: 5px solid #d1d5db; /* gray-300 */
transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
box-shadow: 0 2px 4px rgba(0,0,0,0.04);
overflow: hidden; /* Needed for rounded corners on image */
}
.announcement-card-v6:hover {
border-left-color: var(--primary-color); /* Was blue-500 */
transform: translateY(-4px);
box-shadow: 0 8px 20px rgba(0,0,0,0.06);
}
.announcement-image-v6 {
height: 160px; /* Fixed height for the image area */
overflow: hidden;
}
.announcement-image-v6 img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.announcement-card-v6:hover .announcement-image-v6 img {
transform: scale(1.05);
}
.announcement-content-wrapper-v6 {
padding: 1.5rem 1.75rem; /* Padding for content area */
}
.announcement-date-v6 {
margin-bottom: 1rem;
display: flex;
align-items: baseline;
}
.announcement-date-day-v6 {
font-size: 2rem; /* text-3xl */
font-weight: 800; /* extrabold */
color: var(--primary-color); /* Was blue-500 (#3b82f6) */
line-height: 1;
margin-right: 0.5rem;
}
.announcement-date-monthyear-v6 {
font-size: 0.875rem; /* text-sm */
font-weight: 500; /* medium */
color: #6b7280; /* gray-500 */
line-height: 1.2;
}
.announcement-date-monthyear-v6 span {
display: block;
}
.announcement-card-title-v6 {
font-size: 1.25rem; /* text-xl */
font-weight: 600; /* semibold */
color: #1f2937; /* gray-800 */
line-height: 1.4;
margin-bottom: 0.75rem;
text-align: left;
}
.announcement-card-description-v6 {
font-size: 0.9rem;
color: #4b5563; /* gray-600 */
margin-bottom: 1.5rem;
line-height: 1.6;
text-align: left;
}
.announcement-card-link-v6 {
display: inline-flex;
align-items: center;
font-size: 0.9rem;
font-weight: 600; /* semibold */
color: #4b5563; /* gray-600 */
text-decoration: none;
transition: color 0.2s ease;
}
.announcement-card-link-v6:hover {
color: var(--primary-color); /* Was blue-500 */
}
.announcement-card-link-v6 i {
margin-left: 0.4rem;
transition: transform 0.2s ease;
font-size: 0.8em;
}
.announcement-card-link-v6:hover i {
transform: translateX(4px);
}
/* --- End Duyurular Section Enhancements (v6) --- */
/* --- Oda Üyelerimiz Section Enhancements (v4 - House Clip) --- */
#oda-uyelerimiz {
/* ... background styles ... */
background: linear-gradient(135deg, #f0f9ff 0%, #e0e7ff 100%);
position: relative;
overflow: hidden;
}
#oda-uyelerimiz::before, #oda-uyelerimiz::after {
/* ... abstract background shape styles ... */
content: '';
position: absolute;
z-index: 0;
}
#oda-uyelerimiz::before { top: 10%; left: -50px; width: 300px; height: 300px; background: radial-gradient(circle, rgba(191, 219, 254, 0.4) 0%, rgba(191, 219, 254, 0) 70%); border-radius: 50%; }
#oda-uyelerimiz::after { bottom: 5%; right: -80px; width: 400px; height: 200px; background: linear-gradient(45deg, rgba(165, 180, 252, 0.0) 0%, rgba(165, 180, 252, 0.3) 100%); transform: rotate(-30deg); border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }
.member-info-content {
/* ... existing styles ... */
background-color: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
padding: 3rem 3.5rem;
border-radius: 1rem;
box-shadow: 0 15px 35px rgba(0,0,0,0.1);
position: relative;
z-index: 2;
border: 1px solid rgba(255, 255, 255, 0.5);
border-bottom: 3px solid var(--primary-color);
}
.member-info-image-wrapper {
position: relative;
z-index: 1;
/* aspect-ratio: 4 / 3; */
max-width: 500px;
margin: auto;
/* filter: drop-shadow(0 10px 10px rgba(0, 0, 0, 0.2)); */
}
.member-info-image-wrapper img {
border-radius: 0;
/* box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); */ /* Shadow applied to wrapper or via filter */
box-shadow: none;
width: 100%;
height: 100%;
display: block;
object-fit: cover; /* Use if needed with aspect-ratio */
}
/* ... h2, p, button styles ... */
.member-info-content h2 { font-size: 1.875rem; line-height: 1.3; font-weight: 700; color: black; margin-bottom: 1.5rem; }
.member-info-content p { color: #374151; margin-bottom: 2.5rem; line-height: 1.7; }
.member-cta-button { display: inline-flex; align-items: center; background-image: linear-gradient(to right, #10b981, #059669); color: white; padding: 0.8rem 1.75rem; border-radius: 9999px; font-weight: 600; transition: all 0.3s ease; box-shadow: 0 5px 15px rgba(16, 185, 129, 0.3); text-decoration: none; }
.member-cta-button:hover { background-image: linear-gradient(to right, #059669, #047857); box-shadow: 0 8px 20px rgba(16, 185, 129, 0.4); transform: translateY(-2px); }
.member-cta-button i { margin-left: 0.6rem; }
/* --- End Oda Üyelerimiz Section Enhancements (v4) --- */
/* --- Blog Section Enhancements (v2 - Creative) --- */
.blog-card {
/* background-color: white; */ /* Replaced with texture */
background-image: url('data:image/svg+xml;utf8,');
background-color: white; /* Fallback */
border-radius: 0.75rem; /* rounded-xl */
overflow: hidden;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
transition: transform 0.3s ease, box-shadow 0.3s ease, border-top-color 0.3s ease;
display: flex;
flex-direction: column;
border-top: 4px solid transparent; /* For hover effect */
}
.blog-card:hover {
transform: translateY(-6px);
box-shadow: 0 10px 20px -3px rgba(0, 0, 0, 0.08), 0 4px 8px -2px rgba(0, 0, 0, 0.06);
border-top-color: var(--primary-color); /* Was blue-500 */
}
/* ... .blog-card-image-wrapper styles remain the same ... */
.blog-card-image-wrapper {
height: 200px; /* Adjust height as needed */
overflow: hidden;
}
.blog-card-image-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.blog-card:hover .blog-card-image-wrapper img {
transform: scale(1.05);
}
.blog-card-content {
padding: 1.5rem;
flex-grow: 1; /* Allow content to grow */
display: flex;
flex-direction: column;
background-color: white; /* Ensure content area is solid white over texture */
}
.blog-card-title {
font-size: 1.25rem; /* text-xl */
font-weight: 700; /* bold */
color: #1f2937; /* gray-800 */
line-height: 1.4;
margin-bottom: 0.75rem;
text-align: left;
/* transition: transform 0.3s ease; */ /* Removed hover effect */
}
.blog-card-description {
font-size: 0.9rem;
color: #4b5563; /* gray-600 */
line-height: 1.6;
margin-bottom: 1.5rem;
flex-grow: 1; /* Push meta/button to bottom */
text-align: left;
}
.blog-card-meta {
/* display: flex; */ /* No longer needed */
/* align-items: center; */
margin-bottom: 1.25rem; /* Space before button */
padding-top: 1rem;
border-top: 1px solid #f3f4f6; /* gray-100 */
}
/* Removed .blog-card-meta img */
/* Removed .blog-card-meta-text */
/* Removed .blog-card-author */
.blog-card-date {
display: block;
font-size: 0.85rem; /* Slightly larger */
color: #6b7280; /* gray-500 */
font-weight: 500; /* medium */
/* Maybe add icon? */
}
.blog-card-date i {
margin-right: 0.35rem;
color: #9ca3af; /* gray-400 */
}
/* Style for the "Read More" Button */
.blog-card-button {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.5rem 1.25rem; /* Button padding */
font-size: 0.875rem; /* text-sm */
font-weight: 600; /* semibold */
border-radius: 9999px; /* rounded-full */
border: 1px solid var(--primary-light-color); /* Was blue-400 */
color: var(--primary-color); /* Was blue-500 */
text-decoration: none;
transition: all 0.2s ease;
background-color: transparent;
align-self: flex-start; /* Align button to start */
}
.blog-card-button:hover {
background-color: var(--primary-color); /* Was blue-500 */
color: white;
border-color: var(--primary-color);
}
.blog-card-button i {
margin-left: 0.35rem; /* Space before icon */
font-size: 0.8em;
transition: transform 0.2s ease;
}
.blog-card-button:hover i {
transform: translateX(3px);
}
/* --- End Blog Section Enhancements (v2) --- */
/* --- Üyelerimizin İlanları Section Enhancements (v9 - Clean Standard Cards) --- */
#uyelerimizin-ilanlari {
background-color: #f9fafb; /* gray-50 */
}
/* Remove previous styles */
/* .category-split-card-wrapper, .category-split-card, etc. */
.category-clean-card-wrapper {
display: block;
text-decoration: none;
height: 100%; /* Ensure wrapper takes full height for grid */
}
.category-clean-card {
background-color: white;
border-radius: 0.5rem; /* rounded-lg */
border: 1px solid #e5e7eb; /* gray-200 */
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05); /* shadow-md */
overflow: hidden;
display: flex;
flex-direction: column;
height: 100%;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.category-clean-card-wrapper:hover .category-clean-card {
transform: translateY(-4px);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.07), 0 4px 6px -4px rgba(0, 0, 0, 0.07); /* shadow-lg */
}
.category-clean-image {
height: 192px; /* h-48 */
overflow: hidden;
}
.category-clean-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.category-clean-card-wrapper:hover .category-clean-image img {
transform: scale(1.05);
}
.category-clean-content {
padding: 1.5rem; /* p-6 */
flex-grow: 1;
display: flex;
flex-direction: column;
}
.category-clean-icon {
font-size: 1.75rem; /* text-3xl */
color: #3b82f6; /* blue-500 */
margin-bottom: 0.75rem; /* mb-3 */
width: 32px; /* Fixed width for alignment */
}
.category-clean-title {
font-size: 1.25rem; /* text-xl */
font-weight: 600; /* semibold */
color: #1f2937; /* gray-800 */
line-height: 1.4;
margin-bottom: 1rem; /* mb-4 */
flex-grow: 1; /* Push link down */
}
.category-clean-link {
display: inline-flex;
align-items: center;
align-self: flex-start;
margin-top: auto; /* Push to bottom */
font-size: 0.9rem;
font-weight: 500; /* medium */
color: var(--primary-color); /* Was blue-600 */
text-decoration: none;
}
.category-clean-link span {
border-bottom: 1px solid transparent;
transition: border-color 0.2s ease;
}
.category-clean-card-wrapper:hover .category-clean-link span {
border-color: var(--primary-color);
}
.category-clean-link i {
margin-left: 0.3rem;
font-size: 0.8em;
transition: transform 0.2s ease;
}
.category-clean-card-wrapper:hover .category-clean-link i {
transform: translateX(3px);
}
/* --- End Üyelerimizin İlanları Section Enhancements (v9) --- */
/* --- Üyelerimizin İlanları Section Enhancements (v10 - Tilted Pattern Cards) --- */
#uyelerimizin-ilanlari {
background-color: #f1f5f9; /* slate-100 */
}
/* Remove previous styles */
/* .category-clean-card-wrapper, .category-clean-card, etc. */
.category-tilt-card-wrapper {
display: block;
text-decoration: none;
perspective: 1000px; /* For potential 3D effects on hover, though not used initially */
}
.category-tilt-card {
border-radius: 1rem; /* rounded-xl */
padding: 2rem 1.75rem; /* p-8ish */
box-shadow: 0 10px 20px rgba(0,0,0,0.08);
transition: transform 0.35s ease, box-shadow 0.35s ease;
color: white;
min-height: 200px; /* Ensure decent height */
display: flex;
flex-direction: column;
position: relative;
overflow: hidden; /* Clip patterns/gradients */
/* Initial Tilt */
/* transform: rotate(-2deg); */ /* Apply tilt via wrapper/group hover later if preferred */
}
/* Unique Backgrounds with Patterns */
.tilt-bg-konut {
background-color: #4ade80; /* green-400 */
background-image: linear-gradient(135deg, #86efac 0%, #4ade80 100%),
url('data:image/svg+xml;utf8,');
background-size: cover, 26px 13px;
transform: rotate(-1.5deg);
}
.tilt-bg-arsa {
background-color: #2dd4bf; /* teal-400 */
background-image: linear-gradient(135deg, #5eead4 0%, #2dd4bf 100%),
url('data:image/svg+xml;utf8,');
background-size: cover, 50px 50px;
transform: rotate(1.5deg);
}
.tilt-bg-proje {
background-color: #fbbf24; /* amber-400 */
background-image: linear-gradient(135deg, #fcd34d 0%, #fbbf24 100%),
url('data:image/svg+xml;utf8,');
background-size: cover, 15px 15px;
transform: rotate(-1deg);
}
.tilt-bg-ticari {
background-color: #818cf8; /* indigo-400 */
background-image: linear-gradient(135deg, #a5b4fc 0%, #818cf8 100%),
url('data:image/svg+xml;utf8,');
background-size: cover, 30px 30px;
transform: rotate(1deg);
}
/* Hover Effects */
.category-tilt-card-wrapper:hover .category-tilt-card {
transform: translateY(-8px) rotate(0deg) scale(1.02);
box-shadow: 0 15px 30px rgba(0,0,0,0.12);
}
.category-tilt-icon {
font-size: 2.5rem; /* Larger icon */
opacity: 0.7;
margin-bottom: 1rem;
}
.category-tilt-title {
font-size: 1.8rem; /* Larger title */
font-weight: 800; /* Extrabold */
line-height: 1.3;
margin-bottom: 0.75rem;
text-shadow: 1px 1px 3px rgba(0,0,0,0.15);
flex-grow: 1;
}
.category-tilt-desc {
font-size: 0.9rem;
font-weight: 500;
opacity: 0.8;
margin-bottom: 1.5rem;
}
.category-tilt-link {
display: inline-flex;
align-items: center;
align-self: flex-start;
margin-top: auto;
font-size: 1rem;
font-weight: 600;
color: white;
text-decoration: none;
opacity: 0.9;
transition: opacity 0.2s ease;
}
.category-tilt-link:hover {
opacity: 1;
}
.category-tilt-link i {
margin-left: 0.5rem;
transition: transform 0.2s ease;
}
.category-tilt-link:hover i {
transform: translateX(5px);
}
/* --- End Üyelerimizin İlanları Section Enhancements (v10) --- */
/* --- Üyelerimizin İlanları Section Enhancements (v11 - Refined Masonry Overlay) --- */
#uyelerimizin-ilanlari {
background-color: #f3f4f6; /* gray-100 */
}
/* Remove previous styles (tilted card v10) */
/* .category-tilt-card-wrapper, .category-tilt-card, etc. */
.listing-card-overlay {
position: relative;
display: block;
overflow: hidden;
border-radius: 0.75rem; /* rounded-xl */
box-shadow: 0 6px 12px rgba(0,0,0,0.08);
transition: transform 0.3s ease, box-shadow 0.3s ease;
background-color: #e5e7eb; /* Fallback bg */
}
.listing-card-overlay::after { /* Subtle inner highlight on hover - Keep from v5? */
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 5px;
background: linear-gradient(to bottom, rgba(255,255,255,0.2), transparent);
opacity: 0;
transition: opacity 0.3s ease;
z-index: 2;
}
.listing-card-overlay:hover {
transform: translateY(-6px);
box-shadow: 0 10px 25px rgba(0,0,0,0.09);
}
.listing-card-overlay:hover::after {
opacity: 1;
}
.listing-card-overlay img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.listing-card-overlay:hover img {
transform: scale(1.07);
}
.listing-card-overlay-content {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 1.5rem 1.75rem; /* Refined padding */
/* Refined gradient */
background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.7) 45%, rgba(0,0,0,0) 85%);
color: white;
display: flex;
align-items: flex-end; /* Align items to bottom */
transition: background 0.3s ease;
min-height: 80px; /* Ensure some space */
z-index: 1;
}
.listing-card-overlay:hover .listing-card-overlay-content {
/* Optional: Darker/Taller gradient on hover */
background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.75) 55%, rgba(0,0,0,0) 95%);
}
.listing-card-overlay-content i {
margin-right: 0.85rem; /* Space */
font-size: 1.5rem; /* Icon size */
opacity: 0.95;
transition: transform 0.3s ease;
color: #e0e7ff; /* Icon color */
flex-shrink: 0;
/* Remove hover glow/color change from v5 if simplifying */
}
.listing-card-overlay:hover .listing-card-overlay-content i {
transform: scale(1.1); /* Subtle icon scale */
}
.listing-card-overlay-title {
font-size: 1.35rem; /* Title size */
font-weight: 700;
line-height: 1.35;
text-shadow: 1px 1px 0px rgba(0,0,0,0.4), 2px 2px 5px rgba(0,0,0,0.7); /* Refined shadow */
transition: transform 0.3s ease, text-shadow 0.3s ease;
display: block;
/* No underline needed */
}
.listing-card-overlay:hover .listing-card-overlay-title {
transform: translateY(-4px); /* Lift title slightly */
text-shadow: 1px 1px 0px rgba(0,0,0,0.5), 3px 3px 8px rgba(0,0,0,0.8); /* Enhance shadow */
}
/* Grid Specific Heights */
.h-listing-large { height: 350px; }
.h-listing-tall { height: 480px; }
.h-listing-small { height: 225px; }
@media (min-width: 768px) {
.h-listing-large { height: 450px; }
.h-listing-tall { height: calc(450px + 225px + 1.5rem); } /* Adjust gap as needed (gap-6 -> 1.5rem) */
.h-listing-small { height: 225px; }
}
/* --- End Üyelerimizin İlanları Section Enhancements (v11) --- */
/* --- Üyelerimizin İlanları Section Enhancements (v12 - Skewed Masonry Cards) --- */
#uyelerimizin-ilanlari {
background-color: #f3f4f6; /* gray-100 */
}
/* Remove previous styles if necessary */
.listing-card-overlay {
position: relative;
display: block;
overflow: hidden;
border-radius: 0.75rem; /* rounded-xl */
box-shadow: 0 8px 16px rgba(0,0,0,0.07); /* Slightly increased base shadow */
/* Apply initial skew */
transform: skewY(-2deg); /* Adjust angle as desired */
transition: transform 0.35s ease, box-shadow 0.35s ease; /* Smoother transition */
background-color: #e5e7eb; /* Fallback bg */
}
/* Inner highlight - might look odd with skew, consider removing or adjusting */
/* .listing-card-overlay::after { ... } */
.listing-card-overlay:hover {
/* Lift, remove skew, slightly scale */
transform: translateY(-8px) skewY(0deg) scale(1.01);
box-shadow: 0 12px 28px rgba(0,0,0,0.11);
}
/* .listing-card-overlay:hover::after { opacity: 1; } */
.listing-card-overlay img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
/* Counter-skew the image? Or let it skew? Let it skew for simplicity first. */
/* transform: skewY(2deg); */
/* Apply scale directly for zoom */
transform-origin: center center;
transition: transform 0.5s ease; /* Keep image transition */
}
.listing-card-overlay:hover img {
/* Counteract parent scale slightly? Or let it inherit? Inherit first. */
transform: scale(1.1); /* Increased zoom factor */
/* transform: skewY(0deg) scale(1.1); */ /* If counter-skewing */
}
.listing-card-overlay-content {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 1.5rem 1.75rem;
background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.7) 45%, rgba(0,0,0,0) 85%);
color: white;
display: flex;
align-items: flex-end;
transition: background 0.3s ease;
min-height: 80px;
z-index: 1;
/* Content doesn't need separate transform if parent is skewed */
}
.listing-card-overlay:hover .listing-card-overlay-content {
background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.75) 55%, rgba(0,0,0,0) 95%);
}
/* Text styles remain largely the same, might need minor tweaks */
.listing-card-overlay-content i {
margin-right: 0.85rem;
font-size: 1.5rem;
opacity: 0.95;
transition: transform 0.3s ease;
color: #e0e7ff;
flex-shrink: 0;
}
.listing-card-overlay:hover .listing-card-overlay-content i {
transform: scale(1.1);
}
.listing-card-overlay-title {
font-size: 1.35rem;
font-weight: 700;
line-height: 1.35;
text-shadow: 1px 1px 0px rgba(0,0,0,0.4), 2px 2px 5px rgba(0,0,0,0.7);
transition: transform 0.3s ease, text-shadow 0.3s ease;
display: block;
}
.listing-card-overlay:hover .listing-card-overlay-title {
/* Lift relative to the already lifted card is tricky, maybe just enhance shadow */
/* transform: translateY(-4px); */
text-shadow: 1px 1px 0px rgba(0,0,0,0.5), 3px 3px 8px rgba(0,0,0,0.8);
}
/* Grid Specific Heights - Keep as is */
.h-listing-large { height: 350px; }
.h-listing-tall { height: 480px; }
.h-listing-small { height: 225px; }
@media (min-width: 768px) {
.h-listing-large { height: 450px; }
.h-listing-tall { height: calc(450px + 225px + 1.5rem); }
.h-listing-small { height: 225px; }
}
/* --- End Üyelerimizin İlanları Section Enhancements (v12) --- */
/* --- Üyelerimizin İlanları Section Enhancements (v13 - Blend Mode Masonry) --- */
#uyelerimizin-ilanlari {
background-color: #f1f5f9; /* slate-100 - Slightly different background */
}
/* Remove previous styles (v12 skewed overlay) */
/* .listing-card-overlay, .listing-card-overlay-content, etc. */
.listing-card-blend {
position: relative;
display: block;
overflow: hidden;
border-radius: 0.75rem; /* rounded-xl */
box-shadow: 0 8px 16px rgba(0,0,0,0.07);
transition: transform 0.35s ease, box-shadow 0.35s ease;
background-color: #6b7280; /* Fallback bg - gray */
}
.listing-card-blend:hover {
transform: translateY(-8px) scale(1.02);
box-shadow: 0 12px 28px rgba(0,0,0,0.11);
}
.listing-card-blend img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transform-origin: center center;
transition: transform 0.5s ease;
}
.listing-card-blend:hover img {
transform: scale(1.12); /* Slightly more zoom */
}
.listing-card-blend-content {
position: absolute;
inset: 0; /* Cover the entire card */
padding: 1.5rem; /* Padding for content */
color: white;
/* Centering styles */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
/* Blend Mode */
mix-blend-mode: multiply; /* Key property! try: overlay, screen, hard-light */
/* Unique Background Color per card - MUST BE SET ON ELEMENT */
transition: opacity 0.35s ease; /* For hover effect */
z-index: 1;
opacity: 1;
}
.listing-card-blend:hover .listing-card-blend-content {
opacity: 0.9; /* Reveal image slightly more on hover */
/* Or change blend mode? e.g., mix-blend-mode: normal; */
}
/* Unique Background Colors */
/* Apply these classes to the .listing-card-blend-content div */
.blend-bg-konut { background-color: #22c55e; } /* green-500 */
.blend-bg-arsa { background-color: #14b8a6; } /* teal-500 */
.blend-bg-proje { background-color: #f97316; } /* orange-500 */
.blend-bg-ticari { background-color: #6366f1; } /* indigo-500 */
.listing-card-blend-icon {
font-size: 2.5rem; /* Larger Icon */
margin-bottom: 1rem;
opacity: 0.9;
text-shadow: 1px 1px 3px rgba(0,0,0,0.2);
}
.listing-card-blend-title {
font-size: 1.6rem; /* Larger title */
font-weight: 800; /* Extrabold */
line-height: 1.3;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
letter-spacing: 0.01em;
/* No transitions needed if overlay opacity changes */
}
/* Grid Specific Heights - Keep as is */
.h-listing-large { height: 350px; }
.h-listing-tall { height: 480px; }
.h-listing-small { height: 225px; }
@media (min-width: 1024px) {
.h-listing-large { height: 450px; }
.h-listing-tall { height: calc(450px + 225px + 1.5rem); }
.h-listing-small { height: 225px; }
}
/* --- End Üyelerimizin İlanları Section Enhancements (v13) --- */
/* --- Testimonial Slider Navigation --- */
.swiper-navigation-wrapper {
/* Adjust top/right positioning if needed based on heading height */
/* Example: mt-[-55px] md:mt-[-65px] might be better */
}
.swiper-button-prev-testimonials,
.swiper-button-next-testimonials,
.swiper-button-prev-blog,
.swiper-button-next-blog,
.swiper-button-prev-announcements,
.swiper-button-next-announcements {
background-color: #e5e7eb; /* gray-200 */
color: #4b5563; /* gray-600 */
width: 36px; /* Fixed size */
height: 36px;
border-radius: 50%; /* Circular */
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.swiper-button-prev-testimonials:hover,
.swiper-button-next-testimonials:hover,
.swiper-button-prev-blog:hover,
.swiper-button-next-blog:hover,
.swiper-button-prev-announcements:hover,
.swiper-button-next-announcements:hover {
background-color: var(--primary-color); /* Using primary color for consistency */
color: white;
transform: scale(1.05);
}
.swiper-button-prev-testimonials.swiper-button-disabled,
.swiper-button-next-testimonials.swiper-button-disabled,
.swiper-button-prev-blog.swiper-button-disabled,
.swiper-button-next-blog.swiper-button-disabled,
.swiper-button-prev-announcements.swiper-button-disabled,
.swiper-button-next-announcements.swiper-button-disabled {
opacity: 0.5;
cursor: default;
background-color: #e5e7eb; /* Keep bg on disabled */
color: #9ca3af; /* gray-400 */
transform: scale(1);
}
/* Remove default Tailwind styles applied inline previously if conflicting */
/* The Tailwind classes on the divs might need removal if they override these styles */
/* ... other existing styles ... */
/* --- End Testimonial Slider Navigation --- */
/* --- Quick Links Section Enhancements --- */
#quick-links {
background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%); /* Light blue gradient */
color: #075985; /* Darker cyan for text */
}
.quick-link-card {
display: block; /* Make the whole card clickable */
background-color: white;
padding: 1.75rem; /* p-7 */
border-radius: 0.75rem; /* rounded-xl */
border: 1px solid #e0f2fe; /* Subtle border matching gradient */
box-shadow: 0 4px 10px rgba(0, 82, 133, 0.05); /* Soft shadow */
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
text-decoration: none;
}
.quick-link-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 20px rgba(0, 82, 133, 0.08);
border-color: #7dd3fc; /* Lighter blue border on hover */
}
.quick-link-content {
display: flex;
align-items: center;
}
.quick-link-icon-wrapper {
flex-shrink: 0;
width: 50px;
height: 50px;
margin-right: 1rem; /* space between icon and text */
border-radius: 0.5rem; /* rounded-lg */
background-color: #ecfeff; /* Very light cyan bg */
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.3s ease, transform 0.3s ease;
}
.quick-link-card:hover .quick-link-icon-wrapper {
background-color: #22d3ee; /* Cyan-400 */
transform: rotate(-10deg) scale(1.05);
}
.quick-link-icon-wrapper i {
font-size: 1.5rem; /* text-2xl */
color: #0891b2; /* Cyan-600 */
transition: color 0.3s ease;
}
.quick-link-card:hover .quick-link-icon-wrapper i {
color: white;
}
.quick-link-text {
font-size: 1.1rem; /* Slightly larger text */
font-weight: 600; /* semibold */
color: #0369a1; /* Cyan-700 */
line-height: 1.4;
transition: color 0.3s ease;
}
.quick-link-card:hover .quick-link-text {
color: #0ea5e9; /* Sky-500 */
}
/* --- End Quick Links Section Enhancements --- */
/* --- Faydalı Linkler (Useful Links) Creative Enhancements --- */
#faydali-linkler {
/* Subtle pattern + gradient */
background-color: #f9fafb; /* gray-50 fallback */
background-image:
linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(240, 248, 255, 0.95) 100%), /* Soft white -> alice blue overlay */
url('data:image/svg+xml;utf8,'); /* Subtle checker pattern */
}
.faydali-link-card-creative {
display: flex; /* Changed from block to flex */
/* align-items: center; */ /* Replaced by column layout alignment */
flex-direction: column; /* Vertical layout */
align-items: center; /* Center items horizontally */
text-align: center; /* Center text */
text-decoration: none;
/* background-color: white; */ /* Replaced with gradient */
background-image: linear-gradient(135deg, white 0%, #fdfdff 100%),
url('data:image/svg+xml;utf8,'); /* Subtle noise texture */
padding: 2rem 1.5rem; /* Adjusted padding for vertical */
border-radius: 0.75rem; /* rounded-xl */
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.04),
inset 0 1px 3px rgba(0,0,0,0.03); /* Added inner shadow */
border: 1px solid #e5e7eb; /* gray-200 */
transition: transform 0.3s ease, box-shadow 0.3s ease, border-left-color 0.3s ease, background-image 0.3s ease;
/* border-left: 5px solid transparent; */ /* Removed left border */
position: relative; /* Needed for pseudo-elements */
overflow: hidden; /* Hide overflowing pseudo-elements */
}
.faydali-link-card-creative::before { /* Decorative Corner - Ribbon Style */
content: '';
position: absolute;
/* top: -15px; */ /* Changed */
/* right: -15px; */ /* Changed */
top: 0;
right: 0;
/* width: 30px; */ /* Changed */
/* height: 30px; */ /* Changed */
width: 35px; /* Adjust size as needed */
height: 45px; /* Adjust size as needed */
background-color: var(--card-accent-light);
/* border-radius: 0 0 0 10px; */ /* Removed */
/* transform: rotate(45deg); */ /* Removed */
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 50% 80%, 0% 100%); /* Ribbon shape */
transition: background-color 0.3s ease, opacity 0.3s ease, transform 0.3s ease; /* Refined transition */
opacity: 0.9; /* Slightly less opaque initially */
z-index: 0;
}
.faydali-link-card-creative:hover {
transform: translateY(-6px) translateX(0px); /* Keep lift, remove shift */
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06),
inset 0 1px 2px rgba(0,0,0,0.02);
/* background-image: linear-gradient(135deg, white 0%, #f8faff 100%); */ /* Removed gradient change on hover */
}
.faydali-link-card-creative:hover::before {
/* top: -10px; */ /* Removed */
/* right: -10px; */ /* Removed */
/* width: 40px; */ /* Removed */
/* height: 40px; */ /* Removed */
/* transform: rotate(45deg) scale(1.05); */ /* Simplified hover */
transform: scale(1.03); /* Subtle scale up */
background-color: var(--card-accent-dark);
opacity: 1;
}
.faydali-link-icon-wrapper-creative {
flex-shrink: 0;
width: 60px; /* Slightly larger again */
height: 60px;
/* margin-right: 1.25rem; */ /* Changed to margin-bottom */
margin-bottom: 1.25rem;
border-radius: 50%; /* Circular */
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.3s ease, background-color 0.3s ease;
background-color: var(--card-accent-light); /* Use CSS variable */
position: relative; /* Ensure icon is above pseudo-element */
z-index: 1;
}
.faydali-link-card-creative:hover .faydali-link-icon-wrapper-creative {
transform: scale(1.15) rotate(-15deg); /* Adjusted hover transform */
transform: scale(1.1) rotate(-10deg); /* Reduced scale slightly, reduced rotation */
background-color: var(--card-accent-dark); /* Darken bg on hover */
}
.faydali-link-icon-wrapper-creative i {
font-size: 1.8rem; /* Adjusted icon size */
color: var(--card-accent-dark); /* Use CSS variable */
transition: color 0.3s ease;
}
.faydali-link-card-creative:hover .faydali-link-icon-wrapper-creative i {
color: white;
}
.faydali-link-text-creative {
font-size: 1.1rem;
font-weight: 600; /* semibold */
color: #374151; /* gray-700 */
line-height: 1.4;
transition: color 0.3s ease;
position: relative; /* Ensure text is above pseudo-element */
z-index: 1;
}
.faydali-link-card-creative:hover .faydali-link-text-creative {
color: var(--card-accent-dark); /* Use accent color for text hover */
}
/* Color Themes */
.faydali-link-card-creative.theme-blue {
--card-accent-light: #e0f2fe; /* sky-100 */
--card-accent-dark: #0ea5e9; /* sky-500 */
}
.faydali-link-card-creative.theme-teal {
--card-accent-light: #ccfbf1; /* teal-100 */
--card-accent-dark: #14b8a6; /* teal-500 */
}
.faydali-link-card-creative.theme-purple {
--card-accent-light: #f3e8ff; /* purple-100 */
--card-accent-dark: #a855f7; /* purple-500 */
}
.faydali-link-card-creative.theme-rose {
--card-accent-light: #ffe4e6; /* rose-100 */
--card-accent-dark: #f43f5e; /* rose-500 */
}
/* Apply border color on hover */
/* .faydali-link-card-creative:hover {
border-left-color: var(--card-accent-dark);
} */ /* Removed */
/* --- End Faydalı Linkler Creative Enhancements --- */
/* ... other existing styles ... */
/* --- Faydalı Linkler Creative Enhancements V3 (Vertical) --- */
.faydali-link-card-creative.theme-blue {
--card-accent-light: #e0f2fe; /* sky-100 */
--card-accent-dark: #0ea5e9; /* sky-500 */
}
.faydali-link-card-creative.theme-teal {
--card-accent-light: #ccfbf1; /* teal-100 */
--card-accent-dark: #14b8a6; /* teal-500 */
}
.faydali-link-card-creative.theme-purple {
--card-accent-light: #f3e8ff; /* purple-100 */
--card-accent-dark: #a855f7; /* purple-500 */
}
.faydali-link-card-creative.theme-rose {
--card-accent-light: #ffe4e6; /* rose-100 */
--card-accent-dark: #f43f5e; /* rose-500 */
}
/* --- Footer Enhancements --- */
footer.main-footer {
background-color: #000000; /* slate-900 */
position: relative;
/* padding-top: 6rem; */ /* Reduced padding after removing curve */
padding-top: 3.5rem; /* Adjust as needed */
padding-bottom: 2rem;
}
/* Curved Top Border Effect */
/* footer.main-footer::before { */
/* ... removed styles ... */
/* } */
.footer-content-wrapper {
position: relative; /* Ensure content is above the curve SVG */
z-index: 2;
}
.footer-column h5 {
font-size: 1rem; /* text-base */
font-weight: 600; /* semibold */
color: #cbd5e1; /* slate-300 */
margin-bottom: 1.25rem; /* mb-5 */
text-transform: uppercase;
letter-spacing: 0.05em;
border-bottom: 1px solid #334155; /* slate-700 */
padding-bottom: 0.5rem;
}
.footer-column ul li a {
/* color: #94a3b8; */ /* slate-400 */
color: #cbd5e1; /* slate-300 - Lighter default color */
transition: color 0.3s ease, padding-left 0.3s ease;
}
.footer-column ul li a:hover {
/* color: #e2e8f0; */ /* slate-200 */
color: #f1f5f9; /* slate-100 - Even lighter hover */
padding-left: 4px; /* Slight indent on hover */
}
.footer-description {
font-size: 0.875rem; /* text-sm */
color: #94a3b8; /* slate-400 */
line-height: 1.6;
}
.footer-social-links a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
background-color: #334155; /* slate-700 */
color: #94a3b8; /* slate-400 */
border-radius: 50%;
transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
.footer-social-links a:hover {
background-color: var(--primary-color); /* Was blue-500 */
color: white;
transform: translateY(-2px);
}
.footer-contact-list li {
display: flex;
align-items: flex-start; /* Align icon with first line of text */
margin-bottom: 0.75rem; /* Reduced space */
}
.footer-contact-list li i {
margin-top: 4px; /* Adjust icon vertical position */
margin-right: 0.75rem; /* mr-3 */
/* color: #60a5fa; */ /* blue-400 */
color: #94a3b8; /* slate-400 - Match other icons/text */
width: 16px; /* Fixed width for alignment */
text-align: center;
}
.footer-contact-list li span { /* Style plain text spans */
color: #cbd5e1; /* slate-300 - Lighter default color */
}
.footer-contact-list li a {
/* color: #94a3b8; */ /* slate-400 */
color: #cbd5e1; /* slate-300 - Lighter default color */
transition: color 0.3s ease;
}
.footer-contact-list li a:hover {
/* color: #e2e8f0; */ /* slate-200 */
color: #f1f5f9; /* slate-100 - Even lighter hover */
}
.footer-bottom {
border-top: 1px solid #334155; /* slate-700 */
padding-top: 2rem; /* pt-8 */
margin-top: 2.5rem; /* mt-10 */
text-align: center;
font-size: 0.875rem; /* text-sm */
color: #64748b; /* slate-500 */
}
.footer-bottom a {
color: #94a3b8; /* slate-400 */
text-decoration: underline;
text-decoration-color: #64748b; /* slate-500 */
transition: color 0.3s ease, text-decoration-color 0.3s ease;
}
.footer-bottom a:hover {
color: #e2e8f0; /* slate-200 */
text-decoration-color: #94a3b8; /* slate-400 */
}
/* --- End Footer Enhancements --- */
/* ... other existing styles ... */
/* Define theme-primary for faydali-link-card-creative */
.faydali-link-card-creative.theme-primary {
--card-accent-light: rgba(218, 32, 37, 0.45);
--card-accent-dark: #da2025;
background-color: white;
border-color: rgba(218, 32, 37, 0.45);
position: relative;
z-index: 1;
}
.faydali-link-card-creative.theme-primary::before {
background-color: var(--card-accent-light);
}
.faydali-link-card-creative.theme-primary .faydali-link-icon-wrapper-creative {
background-color: var(--card-accent-light);
}
.faydali-link-card-creative.theme-primary .faydali-link-icon-wrapper-creative i {
color: var(--card-accent-dark);
}
.faydali-link-card-creative.theme-primary .faydali-link-text-creative {
color: #374151; /* Default text color */
}
.faydali-link-card-creative.theme-primary:hover {
background-color: white;
border-color: var(--card-accent-dark);
transform: translateY(-6px);
}
.faydali-link-card-creative.theme-primary:hover::before {
background-color: var(--card-accent-dark);
}
.faydali-link-card-creative.theme-primary:hover .faydali-link-text-creative {
color: var(--card-accent-dark);
}
.faydali-link-card-creative.theme-primary:hover .faydali-link-icon-wrapper-creative {
background-color: var(--card-accent-dark);
}
.faydali-link-card-creative.theme-primary:hover .faydali-link-icon-wrapper-creative i {
color: white;
}
/* These custom utility classes fix hover transition issues */
.hover\:text-primary:hover {
color: var(--primary-color);
}
.hover\:bg-primary:hover {
background-color: var(--primary-color);
}
.hover\:border-primary:hover {
border-color: var(--primary-color);
}
/* Replace static blue colors with primary color variables */
.nav-link::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 3px;
background: var(--primary-color);
transition: width 0.3s ease;
border-radius: 3px 3px 0 0;
}
/* Custom transition for nav links */
.nav-link::after {
content: '';
display: block;
width: 0;
height: 2px;
background: var(--primary-color); /* Was Blue-600 */
transition: width .3s;
}
/* Style for the active nav link */
.nav-link.active {
color: var(--primary-color); /* Was blue-700 */
font-weight: 600; /* semibold */
}
/* Enhanced Button Style */
.hero-button {
display: inline-flex; /* For icon alignment */
align-items: center;
background-image: linear-gradient(to right, var(--primary-color), var(--primary-dark-color)); /* Was Blue gradient */
color: white;
padding: 0.75rem 1.5rem; /* Adjust padding */
border-radius: 0.375rem; /* rounded-md */
font-weight: 500; /* medium */
transition: all 0.3s ease;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.hero-button:hover {
background-image: linear-gradient(to right, var(--primary-dark-color), var(--primary-darker-color)); /* Was Darker gradient */
box-shadow: 0 6px 12px rgba(0,0,0,0.15);
transform: translateY(-2px);
}
/* Testimonial Card Enhancement */
.testimonial-card {
background-color: #f9fafb; /* gray-50 */
padding: 2rem;
border-radius: 0.5rem;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
text-align: center;
position: relative;
border-top: 4px solid var(--primary-color); /* Was blue-500 accent */
}
/* Announcement card hover */
.announcement-card-v6:hover {
border-left-color: var(--primary-color); /* Was blue-500 */
transform: translateY(-4px);
box-shadow: 0 8px 20px rgba(0,0,0,0.06);
}
/* Blog Card */
.blog-card:hover {
transform: translateY(-6px);
box-shadow: 0 10px 20px -3px rgba(0, 0, 0, 0.08), 0 4px 8px -2px rgba(0, 0, 0, 0.06);
border-top-color: var(--primary-color); /* Was blue-500 */
}
/* Style for the "Read More" Button */
.blog-card-button {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.5rem 1.25rem; /* Button padding */
font-size: 0.875rem; /* text-sm */
font-weight: 600; /* semibold */
border-radius: 9999px; /* rounded-full */
border: 1px solid var(--primary-light-color); /* Was blue-400 */
color: var(--primary-color); /* Was blue-500 */
text-decoration: none;
transition: all 0.2s ease;
background-color: transparent;
align-self: flex-start; /* Align button to start */
}
.blog-card-button:hover {
background-color: var(--primary-color); /* Was blue-500 */
color: white;
border-color: var(--primary-color);
}
/* Category link */
.category-clean-link {
display: inline-flex;
align-items: center;
align-self: flex-start;
margin-top: auto; /* Push to bottom */
font-size: 0.9rem;
font-weight: 500; /* medium */
color: var(--primary-color); /* Was blue-600 */
text-decoration: none;
}
.category-clean-card-wrapper:hover .category-clean-link span {
border-color: var(--primary-color);
}
/* Footer social links */
.footer-social-links a:hover {
background-color: var(--primary-color); /* Was blue-500 */
color: white;
transform: translateY(-2px);
}
/* Back to top button */
#back-to-top {
background-color: var(--primary-color); /* Was blue-600 */
}
#back-to-top:hover {
background-color: var(--primary-dark-color); /* Was blue-700 */
}
/* Add the same background as oda-uyelerimiz to the teknoloji section */
.bg-gradient-to-r.from-primary-dark.to-primary-darker {
background: linear-gradient(135deg, #f0f9ff 0%, #e0e7ff 100%) !important;
position: relative;
overflow: hidden;
color: #1f2937 !important; /* Change text color to dark since background is light now */
}
.bg-gradient-to-r.from-primary-dark.to-primary-darker::before,
.bg-gradient-to-r.from-primary-dark.to-primary-darker::after {
content: '';
position: absolute;
z-index: 0;
}
.bg-gradient-to-r.from-primary-dark.to-primary-darker::before {
top: 10%;
left: -50px;
width: 300px;
height: 300px;
background: radial-gradient(circle, rgba(191, 219, 254, 0.4) 0%, rgba(191, 219, 254, 0) 70%);
border-radius: 50%;
}
.bg-gradient-to-r.from-primary-dark.to-primary-darker::after {
bottom: 5%;
right: -80px;
width: 400px;
height: 200px;
background: linear-gradient(45deg, rgba(165, 180, 252, 0.0) 0%, rgba(165, 180, 252, 0.3) 100%);
transform: rotate(-30deg);
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}
/* Update text colors for this section */
.bg-gradient-to-r.from-primary-dark.to-primary-darker h2,
.bg-gradient-to-r.from-primary-dark.to-primary-darker .text-white {
color: #1f2937 !important;
}
.bg-gradient-to-r.from-primary-dark.to-primary-darker .text-primary-light\/90 {
color: #4b5563 !important;
}
/* Yaratıcı Pagination Stili */
.pagination-dots {
display: flex;
align-items: center;
justify-content: center;
margin: 0 20px;
gap: 8px;
}
.pagination-dot {
position: relative;
width: 45px;
height: 45px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: white;
color: #4B5563;
font-weight: 600;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
transition: all 0.3s ease;
overflow: hidden;
border: 2px solid transparent;
}
@media (max-width: 1024px) {
.pagination-dots {
gap: 5px;
}
.pagination-dot {
width: 30px;
height: 30px;
}
.pagination-arrow-text {
display: none; /* Hide text on smaller screens for arrow buttons */
}
.pagination-arrow-icon {
margin: 0 !important; /* Hide text on smaller screens for arrow buttons */
padding: 8px;
}
.pagination-arrow-button {
width: 35px;
height: 35px;
justify-content: center;
padding: 8px !important; /* Adjust padding for icon-only buttons */
}
.pagination-arrow-button.prev-button {
}
.pagination-arrow-button.next-button {
}
.pagination-dots {
margin: 0 10px; /* Reduce margin for smaller screens */
}
}
.pagination-dot:hover {
transform: translateY(-3px);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
color: var(--primary-color);
}
.pagination-dot.active {
background: linear-gradient(135deg, var(--primary-color), var(--primary-dark-color));
color: white;
transform: scale(1.1);
border: 2px solid #EFF6FF;
}
.pagination-dot.active .dot-number {
animation: pulse 2s infinite;
}
.pagination-arrow-button {
display: flex;
align-items: center;
padding: 10px 16px;
background: white;
border-radius: 9999px;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
color: #4B5563;
font-weight: 600;
transition: all 0.3s ease;
}
.pagination-arrow-button:hover {
transform: translateY(-3px);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
color: var(--primary-color);
}
.pagination-arrow-button.prev-button {
padding-left: 14px;
}
.pagination-arrow-button.next-button {
padding-right: 14px;
}
.pagination-arrow-icon {
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 50%;
background-color: #F3F4F6;
transition: all 0.3s ease;
}
.pagination-arrow-button:hover .pagination-arrow-icon {
background-color: var(--primary-color);
color: white;
}
.pagination-arrow-text {
margin: 0 10px;
}
.prev-button .pagination-arrow-icon {
margin-right: 5px;
}
.next-button .pagination-arrow-icon {
margin-left: 5px;
}
.pagination-dot-separator {
opacity: 0.5;
}
/* Pulse animation for active dot */
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
100% {
transform: scale(1);
}
}
/* News Slider Styles - Both Horizontal and Vertical */
.swiper-container-news {
height: 100%;
max-height: 100%;
overflow: hidden;
}
.swiper-container-news .swiper-wrapper {
height: 100%;
}
/* Default for all screens under 1024px (horizontal layout) */
.swiper-container-news .swiper-slide {
height: auto !important;
width: 100%;
margin-bottom: 0;
}
/* Desktop - vertical layout */
@media (min-width: 1024px) {
.swiper-container-news .swiper-slide {
height: calc((100% - 40px) / 3) !important; /* 3 slide için yükseklik (2 boşluk için -40px) */
}
.swiper-container-news .swiper-wrapper {
height: 600px;
}
}
/* For the slider layout */
.swiper-slide .news-card-standard {
height: 100%;
min-height: 170px; /* Minimum yükseklik */
height: 170px;
margin-bottom: 0;
width: 100%;
position: relative;
}
/* Specific heights for grid layout */
.news-card-featured {
height: 600px;
min-height: 400px; /* Featured card height */
}
.news-card-standard {
min-height: 125px; /* Standard card height */
}
/* Başlık yanındaki navigasyon butonları */
.swiper-button-prev-news,
.swiper-button-next-news {
position: static !important; /* Static pozisyon */
margin: 0 !important; /* Margin'i kaldır */
width: 36px !important; /* Sabit genişlik */
height: 36px !important; /* Sabit yükseklik */
color: #4b5563 !important; /* Gri renk */
background-color: #f3f4f6; /* Açık gri arkaplan */
border-radius: 50%; /* Yuvarlak butonlar */
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.swiper-button-prev-news:hover,
.swiper-button-next-news:hover {
background-color: var(--primary-color); /* Hover durumunda primary renk */
color: white !important;
}
.swiper-button-prev-news:after,
.swiper-button-next-news:after {
content: none !important; /* Varsayılan okları kaldır */
}
/* Mobile & Tablet (tüm 1024px altı cihazlar) - Horizontal Layout */
@media (max-width: 1023px) {
/* Yatay navigasyon için okları değiştir */
.swiper-button-prev-news i,
.swiper-button-next-news i {
transform: rotate(0) !important; /* Normal hali */
}
/* Mobil ve tablet için kart boyutları */
.news-card-featured {
min-height: 300px;
}
.news-card-standard {
min-height: 240px !important;
}
}
/* Desktop - Vertical Layout */
@media (min-width: 1024px) {
/* Dikey navigasyon için okları doğru yöne çevir */
.swiper-button-prev-news i,
.swiper-button-next-news i {
transform: rotate(90deg); /* Normal hali */
}
}
/* ============================
NEW HERO SLIDER STYLES
============================ */
/* Main Hero Container */
#hero-slider {
height: calc(85vh - 80px);
position: relative;
color: var(--hero-text-color);
overflow: hidden;
}
/* Mobile Media Query */
@media (max-width: 1024px) {
#hero-slider {
height: calc(100vh - 64px);
}
}
/* Background Animation */
.hero-background-animation {
position: absolute;
top: -50%;
left: -50%;
right: -50%;
bottom: -50%;
width: 200%;
height: 200%;
background: transparent;
opacity: 0;
animation: bganimation 50s linear infinite;
z-index: 1;
}
@keyframes bganimation {
0% { transform: translate(0, 0); }
100% { transform: translate(-25%, -25%); }
}
/* Slide Background Elements */
.hero-slide {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
display: flex;
align-items: center;
}
.hero-slide-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.hero-slide-bg-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
transform: scale(1.2);
transition: transform 6s var(--hero-transition);
z-index: 1;
}
.swiper-slide-active .hero-slide-bg-image {
transform: scale(1);
}
.hero-slide-bg-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
}
.hero-slide-shape {
position: absolute;
top: 0;
right: -5%;
width: 60%;
height: 100%;
background: linear-gradient(135deg, rgba(252, 136, 22, 0.1), rgba(252, 136, 22, 0.05), transparent);
clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 0% 100%);
z-index: 3;
opacity: 0;
transform: translateX(100px);
transition: all 1.5s var(--hero-transition) 0.3s;
}
.swiper-slide-active .hero-slide-shape {
opacity: 1;
transform: translateX(0);
}
/* Slide Content Styling */
.hero-slide-content {
position: relative;
width: 100%;
margin: 0 auto;
padding: 0 2rem;
z-index: 5;
display: flex;
align-items: center;
justify-content: flex-start; /* Sola yaslama */
}
.hero-slide-content-inner {
width: 100%;
max-width: 700px;
margin-left: 5%;
}
.hero-slide-title {
font-size: 2.5rem;
line-height: 1.1;
font-weight: 700;
color: var(--hero-text-color);
margin-bottom: 1.5rem;
position: relative;
transform: translateY(0);
opacity: 0;
transition: opacity 0.8s var(--hero-transition), transform 0.8s var(--hero-transition);
z-index: 10;
}
.swiper-slide-active .hero-slide-title {
opacity: 1;
transform: translateY(0);
}
.hero-title-accent {
color: var(--hero-accent-color);
}
.hero-slide-description {
font-size: 1.25rem;
line-height: 1.6;
color: var(--hero-text-color);
margin-bottom: 2rem;
max-width: 700px;
opacity: 0;
transform: translateY(20px);
transition: opacity 0.8s var(--hero-transition) 0.2s, transform 0.8s var(--hero-transition) 0.2s;
}
.swiper-slide-active .hero-slide-description {
opacity: 1;
transform: translateY(0);
}
/* Hero Button */
.hero-btn-wrapper {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.8s var(--hero-transition) 0.4s, transform 0.8s var(--hero-transition) 0.4s;
}
.swiper-slide-active .hero-btn-wrapper {
opacity: 1;
transform: translateY(0);
}
.hero-btn {
display: inline-flex;
align-items: center;
background: var(--hero-accent-color);
color: white;
font-weight: 600;
padding: 1vh 2vh;
border-radius: 3rem;
position: relative;
overflow: hidden;
transition: all 0.3s ease;
border: 2px solid rgba(218, 32, 37, 0.45);
}
.hero-btn::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.2), rgba(255,255,255,0));
transform: translateX(-100%);
transition: transform 0.6s ease;
}
.hero-btn:hover {
background: rgba(218, 32, 37, 0.45);
transform: translateY(-5px);
color: white;
}
.hero-btn:hover::before {
transform: translateX(100%);
}
.hero-btn-text {
position: relative;
z-index: 2;
}
.hero-btn-icon {
position: relative;
display: flex;
align-items: center;
justify-content: center;
margin-left: 0.75rem;
z-index: 2;
transition: transform 0.3s ease;
}
.hero-btn:hover .hero-btn-icon {
transform: translateX(5px);
}
.hero-btn-arrow {
width: 20px;
height: 20px;
stroke: currentColor;
stroke-width: 2;
fill: none;
}
/* Custom Navigation */
.hero-navigation {
position: absolute;
bottom: 3rem;
right: 3rem;
display: flex;
gap: 1rem;
z-index: 20;
}
.hero-prev,
.hero-next {
width: 3.5rem;
height: 3.5rem;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
transform: scale(0.9);
}
.hero-prev:hover,
.hero-next:hover {
background: var(--hero-accent-color);
transform: scale(1);
}
.hero-prev svg,
.hero-next svg {
width: 1.5rem;
height: 1.5rem;
stroke: white;
stroke-width: 2;
fill: none;
}
/* Custom Pagination */
.hero-custom-pagination {
position: absolute;
top: 50%;
right: 3rem;
transform: translateY(-50%);
z-index: 20;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.hero-pagination-wrapper {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.hero-pagination-line {
position: relative;
width: 2px;
height: 120px;
background: rgba(255, 255, 255, 0.3);
overflow: hidden;
}
.hero-pagination-progress {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 0;
background-color: var(--hero-accent-color);
}
/* When animated class is added, start animation */
.hero-pagination-progress.animated {
transform: scaleY(1);
}
/* Swiper container üzerindeyken animasyonu durdur */
.swiper-container-hero:hover .hero-pagination-progress {
/* Animasyonu durdur ama konumunu koru */
transition: none;
}
.swiper-slide-active[data-swiper-slide-index="0"] ~ .hero-custom-pagination .hero-pagination-line::after {
transform: translateY(0%);
}
.swiper-slide-active[data-swiper-slide-index="1"] ~ .hero-custom-pagination .hero-pagination-line::after {
transform: translateY(100%);
}
.swiper-slide-active[data-swiper-slide-index="2"] ~ .hero-custom-pagination .hero-pagination-line::after {
transform: translateY(200%);
}
.hero-pagination-numbers {
margin-top: 1rem;
font-size: 1.25rem;
font-weight: 700;
color: rgba(255, 255, 255, 0.7);
}
/* Scroll Indicator */
.hero-scroll-indicator {
position: absolute;
bottom: 3rem;
left: 3rem;
z-index: 20;
display: flex;
flex-direction: column;
align-items: center;
opacity: 0;
transform: translateY(20px);
animation: fadeInUp 1s var(--hero-transition) 1.5s forwards;
}
@keyframes fadeInUp {
to {
opacity: 1;
transform: translateY(0);
}
}
.scroll-text {
font-size: 0.875rem;
font-weight: 500;
letter-spacing: 1px;
margin-bottom: 0.75rem;
opacity: 0.7;
}
.scroll-line {
width: 2px;
height: 60px;
background: rgba(255, 255, 255, 0.2);
position: relative;
overflow: hidden;
}
.scroll-dot {
width: 4px;
height: 4px;
background: var(--hero-accent-color);
border-radius: 50%;
position: absolute;
left: -1px;
animation: scrollAnim 2s ease-in-out infinite;
}
@keyframes scrollAnim {
0% { top: -5px; }
50% { top: 65px; }
100% { top: -5px; }
}
/* Particles.js Container */
#particles-js {
pointer-events: none;
}
/* Responsive Styles */
@media (max-width: 1280px) {
.hero-slide-title {
font-size: 3.5rem;
}
.hero-custom-pagination {
right: 2rem;
}
.hero-navigation {
right: 2rem;
bottom: 2rem;
}
.hero-scroll-indicator {
left: 2rem;
bottom: 2rem;
}
}
@media (max-width: 1024px) {
.hero-slide-title {
font-size: 3rem;
}
.hero-slide-content-inner {
margin-left: 0;
}
.hero-custom-pagination {
display: none;
}
}
@media (max-width: 768px) {
.hero-slide-title {
font-size: 2.5rem;
}
.hero-slide-content {
justify-content: center;
text-align: center;
}
.hero-slide-content-inner {
max-width: 600px;
}
.hero-slide-title {
align-items: center;
}
.hero-navigation {
bottom: 1.5rem;
right: 1.5rem;
}
.hero-scroll-indicator {
display: none;
}
.hero-prev,
.hero-next {
width: 3rem;
height: 3rem;
}
}
@media (max-width: 640px) {
.hero-slide-title {
font-size: 2rem;
margin-bottom: 1.5rem;
}
.hero-slide-description {
font-size: 1rem;
margin-bottom: 1.5rem;
}
.hero-btn {
padding: 0.75rem 1.5rem;
font-size: 0.9rem;
}
}
@media (max-width: 480px) {
.hero-slide-content {
padding: 0 1.5rem;
}
.hero-navigation {
bottom: 1rem;
right: 1rem;
}
.hero-prev,
.hero-next {
width: 2.5rem;
height: 2.5rem;
}
}
/* End of Hero Slider Styles */
/* Progress bar for hero slider - bottom position */
.hero-progress-container {
position: absolute;
bottom: 0;
left: 0;
right: 0;
z-index: 20;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.hero-pagination-numbers {
margin-bottom: 0.75rem;
font-size: 1.25rem;
font-weight: 700;
color: rgba(255, 255, 255, 0.7);
text-align: center;
position: absolute;
bottom: 1.5rem;
left: 50%;
transform: translateX(-50%);
}
.hero-pagination-line {
position: relative;
width: 100%;
height: 4px;
background: rgba(255, 255, 255, 0.2);
overflow: hidden;
border-radius: 0;
}
.hero-pagination-progress {
position: absolute;
left: 0;
top: 0;
width: 0; /* Will be controlled by JS */
height: 100%;
background-color: var(--hero-accent-color);
border-radius: 0;
transition: width 0s linear; /* Will be set dynamically by JS */
}
/* Adjust navigation position to avoid overlap with progress bar */
.hero-navigation {
bottom: 1.5rem !important;
}
/* No need for responsive media queries since it's 100% width and attached to bottom */
/* Glass effect container for slide content */
.hero-slide-content-inner {
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: 12px;
padding: 2.5rem 3rem;
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
max-width: 650px; /* İçerik genişliği azaltıldı */
width: 100%;
margin-left: 0; /* Sola yaslamak için margin kaldırıldı */
}
/* Update title to be horizontal instead of vertical */
.hero-slide-title {
font-size: 2.5rem;
font-weight: 700;
line-height: 1.2;
margin-bottom: 1.5rem;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
}
.hero-title-word {
position: relative;
overflow: hidden;
padding-right: 0.5rem;
opacity: 0;
transform: translateY(30px);
transition: transform var(--hero-duration) var(--hero-transition),
opacity var(--hero-duration) var(--hero-transition);
display: inline;
}
/* Responsive adjustments */
@media (max-width: 1280px) {
.hero-slide-title {
font-size: 2.5rem;
}
.hero-slide-content-inner {
padding: 2rem 2.5rem;
max-width: 600px;
}
}
@media (max-width: 1024px) {
.hero-slide-title {
font-size: 2.5rem;
}
.hero-slide-content-inner {
max-width: 550px;
padding: 2rem;
}
}
@media (max-width: 768px) {
.hero-slide-title {
font-size: 2rem;
}
.hero-slide-content {
justify-content: center; /* Mobilde ortalama */
}
.hero-slide-content-inner {
margin: 0;
max-width: 90%;
padding: 1.75rem;
}
}
@media (max-width: 640px) {
.hero-slide-title {
font-size: 1.75rem;
}
.hero-slide-content-inner {
padding: 1.5rem;
}
}
.swiper-container-hero .swiper-slide {
opacity: 0 !important;
transition: opacity 0.8s ease;
}
.swiper-container-hero .swiper-slide-active {
opacity: 1 !important;
}
/* Ensure content transitions as one unit rather than line by line */
.hero-slide-content-inner {
transition: opacity 0.8s ease, transform 0.8s ease;
}
/* Remove all element-by-element transitions */
.hero-slide-title,
.hero-slide-description,
.hero-btn-wrapper {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
/* Ensure slide content inner has no transition effects */
.hero-slide-content-inner {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
/* Improve the fade transition between slides */
.swiper-container-hero .swiper-slide {
opacity: 0 !important;
transition: opacity 0.8s ease !important;
z-index: 1;
}
.swiper-container-hero .swiper-slide-active {
opacity: 1 !important;
z-index: 2;
}
/* Ensure no lingering transition effects */
.swiper-slide-active .hero-slide-title,
.swiper-slide-active .hero-slide-description,
.swiper-slide-active .hero-btn-wrapper {
opacity: 1 !important;
transform: none !important;
}
/* These custom transitions can cause the line-by-line effect - remove them */
.hero-slide-shape {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
.swiper-slide-active .hero-slide-shape {
opacity: 1 !important;
transform: none !important;
}
/* Simplified background transitions */
.hero-slide-bg-image {
transform: none !important;
transition: none !important;
}
.swiper-slide-active .hero-slide-bg-image {
transform: none !important;
}
/* Override any lingering individual element animations */
.hero-title-word,
.hero-title-accent {
opacity: 1 !important;
transform: none !important;
transition: none !important;
overflow: visible !important;
}
/* Override any lingering content animations */
.slide-content > *,
.hero-slide-content-inner > * {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
/* Ensure clean slide transition */
.swiper-container-hero .swiper-wrapper {
transition-timing-function: ease !important;
}
/* Ensure all slide transitions are simple fades */
.swiper-container-hero .swiper-slide-active .hero-slide-title,
.swiper-container-hero .swiper-slide-active .hero-slide-description,
.swiper-container-hero .swiper-slide-active .hero-btn-wrapper,
.swiper-container-hero .swiper-slide-active .hero-slide-content-inner,
.swiper-container-hero .swiper-slide-active .slide-content {
transition: none !important;
transform: none !important;
}
/* Remove any transition delays */
.swiper-slide-active .hero-slide-title,
.swiper-slide-active .hero-slide-description,
.swiper-slide-active .hero-btn-wrapper,
.swiper-slide-active .hero-slide-content-inner,
.swiper-slide-active .slide-content {
transition-delay: 0s !important;
}
/* Custom styles for the header */
.top-bar {
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.top-bar a {
font-size: 14px;
transition: color 0.2s;
}
.social-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 15%;
font-size: 1.25em;
color: #fff;
margin-right: 4px;
transition: transform 0.18s, box-shadow 0.18s, filter 0.18s;
border: none;
position: relative;
overflow: hidden;
}
.social-icon i {
color: #fff;
position: relative;
z-index: 1;
font-size: 25px !important;
}
.nav-link {
font-size: 17px;
font-weight: bold;
color: #22292f;
letter-spacing: 0.01em;
transition: color 0.3s, background 0.3s;
}
.dropdown-menu a {
font-size: 1.08rem;
}
.mobile-nav-link {
display: flex;
align-items: center;
transition: all 0.3s ease;
}
.mobile-nav-link:hover {
color: var(--primary-color);
}
/* Animation for mobile menu */
@keyframes slideIn {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
.mobile-nav.active {
animation: slideIn 0.3s ease forwards;
}
/* Mobilde sosyal medya ve CRM butonu menüye taşınacak */
@media (max-width: 1023px) {
/* .top-bar .social-icon, .main-header .social-icon, .main-header .ml-4 { display: none !important; } */
.top-bar .hide-mobile { display: none !important; }
.top-bar .container {
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.top-bar .mobile-phone {
margin-right: 0;
}
.top-bar .flex.items-center.space-x-4 {
flex: 1;
justify-content: flex-start;
}
.top-bar .flex.items-center.space-x-2 {
flex: 1;
justify-content: flex-end;
}
.social-icon i {
font-size: 22px !important;
}
}
@media (max-width: 639px) {
.social-icon i {
font-size: 18px !important;
}
.social-icon {
width: 30px !important;
height: 30px !important;
}
.mobile-social-icons .social-icon {
background: #da2025 !important;
color: #fff !important;
box-shadow: 0 2px 8px rgba(252, 136, 22, 0.25);
border-radius: 15%;
width: 30px !important;
height: 30px !important;
display: inline-flex;
align-items: center;
justify-content: center;
transition: transform 0.18s, box-shadow 0.18s, filter 0.18s;
}
.mobile-social-icons .social-icon i {
color: #fff !important;
font-size: 20px !important;
}
.mobile-social-icons .social-icon:hover, .mobile-social-icons .social-icon:focus {
transform: scale(1.18) rotate(-3deg);
box-shadow: 0 4px 16px 0 rgba(252, 136, 22, 0.35), 0 1.5px 4px 0 rgba(252, 136, 22, 0.18);
filter: brightness(1.08) saturate(1.2);
z-index: 2;
}
}
@media (max-width: 768px) {
#hero-slider,
.swiper-container-hero,
.swiper-slide.hero-slide {
min-height: 75vh !important;
height: 75vh !important;
max-height: 100vh !important;
padding: 0 !important;
margin: 0 !important;
box-sizing: border-box;
}
.hero-slide-bg-image,
.hero-slide-bg,
.hero-slide-content.container {
min-height: 100vh !important;
height: 100vh !important;
max-height: 100vh !important;
}
}
.footer-heading {
font-size: 1.18rem;
font-weight: 700;
letter-spacing: 0.03em;
color: #fff;
position: relative;
z-index: 1;
}
.footer-underline {
height: 4px;
width: 44px;
border-radius: 2px;
margin-bottom: 1.2rem;
background: linear-gradient(90deg, #f43f5e 0%, #feec01 100%);
animation: underline-glow 2.5s infinite alternate;
}
@keyframes underline-glow {
0% { filter: brightness(1) drop-shadow(0 0 2px #38bdf8); }
100% { filter: brightness(1.3) drop-shadow(0 0 8px #f43f5e); }
}
.footer-heading-icon {
font-size: 1.3em;
display: flex;
align-items: center;
justify-content: center;
}
.footer-social {
width: 44px;
height: 44px;
background: #1e293b;
color: #da2025;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.3rem;
box-shadow: 0 2px 8px 0 #0002;
transition: color 0.2s;
position: relative;
border: 2px solid #1e293b;
}
.footer-social:hover {
color: #fff;
background: #38bdf8;
border-color: #f43f5e;
}
.footer-link {
display: flex;
align-items: center;
gap: 0.7rem;
color: #fff;
font-weight: 500;
font-size: 1.07rem;
position: relative;
transition: color 0.2s, font-size 0.2s;
text-decoration: none;
padding-bottom: 2px;
}
.footer-link i {
color: #da2025;
min-width: 22px;
text-align: center;
font-size: 1.13em;
transition: color 0.2s;
}
.footer-link:hover {
color: #da2025;
font-size: 1.18rem;
}
.footer-link:hover i {
color: #f43f5e;
}
@media (max-width: 1024px) {
footer .container > div.grid {
gap: 2.5rem;
}
}
@media (max-width: 768px) {
footer .container > div.grid {
grid-template-columns: 1fr 1fr;
}
.footer-link {
font-size: 0.97rem;
}
}
@media (max-width: 600px) {
footer .container > div.grid {
grid-template-columns: 1fr;
}
.footer-link {
font-size: 0.95rem;
}
.footer-social {
width: 36px;
height: 36px;
font-size: 1.05rem;
}
.footer-heading {
font-size: 1.05rem;
}
.footer-agency-simple {
font-size: 0.95rem;
padding: 0.3rem 0.1rem;
flex-direction: column;
align-items: center;
gap: 0.2rem;
}
.footer-agency-name-simple {
font-size: 1em;
margin: 0.2em 0;
}
.footer-agency-simple span {
display: block;
width: 100%;
text-align: center;
}
}
@keyframes fade-in {
from { opacity: 0; transform: scale(0.95) translateY(30px); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
.animate-fade-in { animation: fade-in 1.2s cubic-bezier(.4,0,.2,1) both; }
.footer-agency-simple {
background: none;
box-shadow: none;
margin-top: 1.5rem;
margin-bottom: 0.5rem;
font-size: 1.08rem;
font-weight: 500;
letter-spacing: 0.01em;
justify-content: center;
flex-wrap: wrap;
text-align: center;
}
.footer-agency-name-simple {
color: var(--primary-color, #da2025);
font-weight: 700;
font-size: 1.1em;
cursor: pointer;
transition: color 0.2s, text-decoration 0.2s;
display: inline-block;
}
.footer-agency-name-simple:hover {
text-decoration: underline;
}
.news-section {
position: relative;
width: min(90rem, 90%);
margin: 0 auto;
min-height: 100vh;
padding-block: min(20vh, 3rem);
display: flex;
flex-direction: column;
gap: 3rem;
}
.news-header {
text-align: center;
max-width: 100%;
margin: 0 auto;
}
.news-subtitle {
text-transform: uppercase;
letter-spacing: 1.5px;
font-size: 1rem;
color: black;
display: block;
/* margin-bottom: 1rem; */
font-weight: 600;
}
.news-title {
text-transform: capitalize;
letter-spacing: 0.8px;
font-family: "Roboto", sans-serif;
font-weight: 900;
font-size: clamp(3.4375rem, 3.25rem + 0.75vw, 4rem);
background: #ea1824;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 1.5rem;
font-size: 5vh;
}
.news-divider {
width: 6.25rem;
height: 0.25rem;
background: black;
margin: 1.125rem auto 1.875rem;
}
.news-description {
color: #666;
font-size: 1.1rem;
margin-bottom: 2rem;
}
.news-link {
display: inline-flex;
align-items: center;
padding: 0.75rem 2rem;
background: white;
color: #ea1824;
border-radius: 50px;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
border: 1px solid #ea1824;
}
.news-swiper {
width: 100%;
padding-top: 3.125rem;
height: 65vh;
}
.news-slide {
width: 18.75rem;
height: 28.125rem;
border-radius: 20px;
overflow: hidden;
position: relative;
transition: transform 0.3s ease;
}
.news-slide-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 1;
}
.news-content {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 1rem;
color: white;
transform: translateY(0);
z-index: 2;
backdrop-filter: blur(2px);
}
.news-category {
position: absolute;
top: 1rem;
right: 1rem;
background: #ea1824;
color: black;
padding: 0.5rem 1.25rem;
border-radius: 20px;
font-size: 0.875rem;
font-weight: 600;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
z-index: 2;
}
.news-slide h2 {
font-size: 14px;
font-weight: 700;
margin-bottom: 1rem;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
position: relative;
padding-bottom: 0.5rem;
}
.news-slide h2::after {
content: '';
position: absolute;
bottom: 0;
left: 45%;
width: 50px;
height: 3px;
background: #ea1824;
border-radius: 2px;
}
.news-slide p {
font-size: 1rem;
line-height: 1.6;
margin-bottom: 1.5rem;
opacity: 0.9;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
text-transform: lowercase;
}
.news-explore {
display: inline-flex;
align-items: center;
color: white;
text-decoration: none;
font-weight: 600;
padding: 10px;
background: #ea1824;
color: white;
border-radius: 30px;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
position: relative;
overflow: hidden;
font-size: 12px;
}
.news-explore::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(45deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
transform: translateX(-100%);
transition: transform 0.3s ease;
}
.news-explore:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}
.news-explore:hover::before {
transform: translateX(100%);
}
.news-explore i {
margin-left: 0.75rem;
transition: transform 0.3s ease;
font-size: 1.1rem;
}
.news-explore:hover i {
transform: translateX(5px);
}
.news-bg {
position: absolute;
top: -4rem;
left: -12rem;
opacity: 0.1;
}
.news-bg2 {
position: absolute;
bottom: -2rem;
right: -3rem;
width: 9.375rem;
opacity: 0.1;
}
.swiper-pagination-bullet {
background: #005baa !important;
}
.swiper-horizontal>.swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom,
.swiper-pagination-fraction {
top: 60vh !important;
}
@media screen and (min-width: 48rem) {
.news-section {
display: flex;
align-items: center;
}
}
@media screen and (min-width: 93.75rem) {
.news-swiper {
width: 100%;
height: 65vh;
}
}
.news-date-badge {
position: absolute;
top: 1rem;
right: 1rem;
background: #fff;
color: #ea1824;
font-weight: bold;
font-size: 0.95rem;
border-radius: 1rem;
padding: 0.3rem 1rem;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
z-index: 3;
}
.hero-slide-bg-video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
}