/* === GENEL AYARLAR === */
:root {
    --primary-color: #2f75b3;
    --text-color: #4f4f4f;
    --light-gray: #f8f8f8;
    --border-color: #e9ecef;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "Red Hat Display", sans-serif;
    background-color: #ffffff;
    overflow-x: hidden;
}

body.mobile-nav-active {
    overflow: hidden;
}

.container {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 0 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

/* === HEADER STİLLERİ === */
.top-bar-primary {
    padding: 13px 0;
    font-size: 14px;
    border-bottom: 1px solid black;
}

.main-header-content {
    padding: 25px 0;
}

.logo a {
    font-size: 2.5rem;
    font-weight: bold;
    line-height: 1;
}

.logo span {
    font-size: 0.9rem;
    font-weight: 400;
    color: #666;
}

.top-contact-details {
    display: flex;
    align-items: center;
}

.top-contact-details a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 20px;
}

.top-contact-details a+a {
    border-left: 1px solid black;
}

.top-social-links a {
    font-size: 1rem;
    margin-left: 20px;
}

.desktop-nav {
    display: flex;
    align-items: center;
    gap: 30px;
}

.desktop-nav .main-nav-links ul {
    display: flex;
    align-items: center;
    gap: 28px;
}

.desktop-nav .main-nav-links a {
    font-size: 1rem;
    color: #000000;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 0;
    font-weight: 500;
}

.desktop-nav .main-nav-links a:hover {
    color: var(--primary-color);
}

.desktop-nav .main-nav-links a .fa-chevron-down {
    font-size: 0.7em;
}

.desktop-nav .dropdown {
    position: relative;
}

.desktop-nav .dropdown-menu {
    display: none;
    position: absolute;
    top: 90%;
    left: -15px;
    background-color: #ffffff;
    border: 1px solid var(--border-color);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.09);
    min-width: 220px;
    z-index: 1001;
    padding: 10px 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s, top 0.25s;
}

.desktop-nav .dropdown-menu a {
    display: block;
    padding: 10px 20px;
}

.desktop-nav .dropdown-menu a:hover {
    background-color: var(--light-gray);
}

.desktop-nav .dropdown:hover>.dropdown-menu {
    display: block;
    opacity: 1;
    visibility: visible;
    top: 100%;
}

.whatsapp-button a {
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: #b31515;
    color: #ffffff;
    padding: 12px 22px;
    border-radius: 50px;
    transition: background-color 0.3s;
    font-weight: 500;
}

.whatsapp-button a:hover {
    background-color: #245a8a;
}

.mobile-menu-toggle,
.mobile-nav-menu {
    display: none;
}

/* === MODERN "SOFT" SLIDER STİLLERİ === */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modern-slider {
    width: 100%;
    height: 80vh;
    position: relative;
    overflow: hidden;
    background-color: #ddd;
}

.slider-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
}

.slide {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-size: cover;
    background-position: center;
    color: white;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1), visibility 1.2s;
}

.slide.active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}

.slide::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, transparent 100%);
    pointer-events: none;
    z-index: 1;
}

.slide-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    padding: 20px;
}

.slide.active .slide-content>* {
    opacity: 0;
    animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.slide-content h2 {
    font-size: 3.5rem;
    margin-bottom: 15px;
    font-weight: 800;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.4);
    animation-delay: 0.3s;
}

.slide-content p {
    font-size: 1.2rem;
    margin-bottom: 25px;
    animation-delay: 0.5s;
}

.slide-content .slide-button {
    display: inline-block;
    background-color: transparent;
    border: 2px solid white;
    color: white;
    padding: 12px 25px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 500;
    transition: background-color 0.3s, transform 0.3s;
    animation-delay: 0.7s;
}

.slide-content .slide-button:hover {
    background-color: white;
    color: #333;
    transform: translateY(-2px);
}

.slider-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    background-color: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    cursor: pointer;
    width: 50px;
    height: 50px;
    font-size: 1.2rem;
    border-radius: 50%;
    transition: background-color 0.3s, transform 0.3s;
    display: flex;
    justify-content: center;
    align-items: center;
}

.slider-nav:hover {
    background-color: rgba(0, 0, 0, 0.6);
    transform: translateY(-50%) scale(1.05);
}

#prev-slide {
    left: 30px;
}

#next-slide {
    right: 30px;
}

.slider-dots {
    position: absolute;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
    z-index: 3;
}

.dot {
    width: 12px;
    height: 12px;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s;
}

.dot.active {
    background-color: white;
    transform: scale(1.2);
}

/* === HAKKIMIZDA BÖLÜMÜ STİLLERİ === */
.about-us-section {
    padding: 80px 0;
    background-color: #fdfdfd;
    overflow: hidden;
}

.about-us-container {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 0 15px;
    display: flex;
    align-items: center;
    gap: 60px;
}

.about-image-wrapper {
    flex: 0 0 45%;
    position: relative;
    border-radius: 15px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    transform: translateX(-50px);
    opacity: 0;
    transition: transform 1s, opacity 1s;
}

.about-us-section.in-view .about-image-wrapper {
    transform: translateX(0);
    opacity: 1;
}

.about-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 15px;
    max-height: 500px;
}

.about-image-wrapper::before {
    content: '';
    position: absolute;
    top: -20px;
    left: -20px;
    right: 20px;
    bottom: 20px;
    border: 3px solid var(--primary-color);
    border-radius: 15px;
    z-index: -1;
    transition: all 0.5s ease;
}

.about-content {
    flex: 1;
    transform: translateY(50px);
    opacity: 0;
    transition: transform 1s, opacity 1s;
    transition-delay: 0.2s;
}

.about-us-section.in-view .about-content {
    transform: translateY(0);
    opacity: 1;
}

.about-content .section-subtitle {
    font-size: 1rem;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.about-content h2 {
    font-size: 2.8rem;
    font-weight: 800;
    color: #222;
    margin-bottom: 20px;
    line-height: 1.2;
}

.about-content .separator {
    width: 80px;
    height: 4px;
    background-color: var(--primary-color);
    margin-bottom: 25px;
    border-radius: 2px;
}

.about-content p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--text-color);
    margin-bottom: 30px;
}

.about-features {
    display: flex;
    gap: 30px;
    margin-top: 20px;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 15px;
}

.feature-item .icon {
    font-size: 2rem;
    color: var(--primary-color);
}

.feature-item h4 {
    font-size: 1.2rem;
    font-weight: 600;
    color: #333;
}

/* === SHOWCASE KARTLAR (GRİ-KIRMIZI-BEYAZ) === */
.solutions-section {
    padding: 120px 0;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 50%, #dee2e6 100%);
    position: relative;
}

.solutions-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 25% 25%, rgba(220, 53, 69, 0.03) 0%, transparent 50%),
        radial-gradient(circle at 75% 75%, rgba(108, 117, 125, 0.05) 0%, transparent 50%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, transparent 100%);
    pointer-events: none;
    z-index: 1;
}

.solutions-header {
    text-align: center;
    max-width: 600px;
    margin: 0 auto 80px auto;
    position: relative;
    z-index: 2;
}

.solutions-header h2 {
    font-size: 3.2rem;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 20px;
    letter-spacing: -2px;
    text-shadow: 0 2px 10px rgba(220, 53, 69, 0.1);
}

.solutions-header p {
    font-size: 1.3rem;
    line-height: 1.6;
    color: #495057;
    font-weight: 300;
}

.solutions-showcase {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: repeat(3, 260px);
    gap: 25px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 2;
}

.showcase-card {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: block;
    text-decoration: none;
    color: inherit;
}

/* Hero Kart - Sol büyük alan */
.hero-card {
    grid-column: 1;
    grid-row: 1 / 3;
}

/* Standard Kartlar - Sağ taraf üst üste */
.standard-card:nth-of-type(2) {
    grid-column: 2;
    grid-row: 1;
}

.standard-card:nth-of-type(3) {
    grid-column: 2;
    grid-row: 2;
}

/* Wide Kart - Alt tam genişlik */
.wide-card {
    grid-column: 1 / 3;
    grid-row: 3;
}

.card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg,
            rgba(33, 37, 41, 0.8) 0%,
            rgba(33, 37, 41, 0.6) 50%,
            rgba(220, 53, 69, 0.7) 100%);
    transition: all 0.4s ease;
}

.showcase-card:hover .card-overlay {
    background: linear-gradient(135deg,
            rgba(33, 37, 41, 0.6) 0%,
            rgba(33, 37, 41, 0.4) 50%,
            rgba(220, 53, 69, 0.5) 100%);
}

.card-content-dynamic {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    color: white;
    z-index: 2;
    gap: 20px;
}

.card-icon {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    backdrop-filter: blur(10px);
    border: 2px solid rgba(220, 53, 69, 0.3);
    transition: all 0.3s ease;
    color: #dc3545;
    box-shadow: 0 4px 15px rgba(220, 53, 69, 0.1);
}

.showcase-card:hover .card-icon {
    background: #dc3545;
    color: white;
    border-color: #dc3545;
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(220, 53, 69, 0.3);
}

.card-content-dynamic h3 {
    font-size: 1.8rem;
    font-weight: 600;
    margin: 0;
    line-height: 1.3;
}

/* Hero Kart - En büyük, detaylı içerik */
.hero-card h3 {
    font-size: 2.6rem;
    margin-bottom: 10px;
    line-height: 1.2;
}

.hero-card p {
    font-size: 1.2rem;
    line-height: 1.6;
}

/* Standard Kartlar - Orta boy, odaklanmış içerik */
.standard-card h3 {
    font-size: 1.6rem;
    line-height: 1.3;
}

.standard-card p {
    font-size: 1rem;
    line-height: 1.5;
}

.standard-card .card-content-dynamic {
    gap: 15px;
    padding: 30px;
}

.standard-card .card-icon {
    width: 50px;
    height: 50px;
    font-size: 1.2rem;
}

/* Wide Kart - Geniş, kapsamlı içerik */
.wide-card h3 {
    font-size: 2rem;
    line-height: 1.2;
}

.wide-card p {
    font-size: 1.1rem;
    line-height: 1.6;
}

.wide-card .card-content-dynamic {
    padding: 40px;
    max-width: 600px;
}

.card-content-dynamic p {
    font-size: 1.1rem;
    line-height: 1.6;
    opacity: 0.9;
    margin: 0;
    flex-grow: 1;
}

.card-stats {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
}

.stat {
    font-size: 0.85rem;
    background: rgba(255, 255, 255, 0.85);
    padding: 6px 12px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    backdrop-filter: blur(5px);
    border: 1px solid rgba(220, 53, 69, 0.2);
    width: fit-content;
    color: #495057;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.stat i {
    color: #dc3545;
}

.project-features {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
}

.feature-tag {
    font-size: 0.8rem;
    background: rgba(255, 255, 255, 0.85);
    padding: 4px 10px;
    border-radius: 12px;
    backdrop-filter: blur(5px);
    border: 1px solid rgba(220, 53, 69, 0.2);
    color: #495057;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.showcase-card .card-action {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
    font-size: 1rem;
    transition: all 0.3s ease;
    margin-top: auto;
    padding: 12px 20px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50px;
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    width: fit-content;
}

.showcase-card .card-action i {
    font-size: 1rem;
    transition: transform 0.3s ease;
}

.showcase-card:hover .card-action {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
}

.showcase-card:hover .card-action i {
    transform: translateX(5px);
}

.showcase-card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow:
        0 25px 50px rgba(33, 37, 41, 0.2),
        0 10px 25px rgba(220, 53, 69, 0.15);
}

.showcase-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 24px;
    padding: 2px;
    background: linear-gradient(45deg,
            rgba(220, 53, 69, 0.4),
            rgba(255, 255, 255, 0.3),
            rgba(220, 53, 69, 0.4));
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.showcase-card:hover::before {
    opacity: 1;
}

/* === KOMPAKT ÜRÜN KATALOğU === */
.products-section {
    background: linear-gradient(135deg, #f8fafc 0%, #e7f3ff 50%, #f0f7ff 100%);
    padding: 100px 0 80px 0;
    position: relative;
    overflow: hidden;
}

.products-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 20% 80%, rgba(47, 117, 179, 0.03) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(99, 179, 237, 0.05) 0%, transparent 50%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, transparent 100%);
    pointer-events: none;
    z-index: 1;
}

.products-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 70px auto;
    position: relative;
    z-index: 2;
    padding: 0 20px;
}

.products-subtitle {
    display: inline-block;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--primary-color);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 15px;
    position: relative;
    padding: 8px 20px;
    background: rgba(47, 117, 179, 0.08);
    border-radius: 25px;
    border: 1px solid rgba(47, 117, 179, 0.15);
}

.products-header h2 {
    font-size: 2.8rem;
    font-weight: 700;
    color: #1e293b;
    margin: 25px 0 20px 0;
    line-height: 1.2;
    letter-spacing: -1px;
}

.products-header p {
    font-size: 1.2rem;
    line-height: 1.6;
    color: #64748b;
    font-weight: 400;
    margin: 0;
}

.products-section-inner {
    position: relative;
    overflow: hidden;
    z-index: 2;
}

.products-navigation-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding: 0 15%;
    gap: 10px;
}

.products-nav-left {
    flex: 1;
}

.products-nav-buttons {
    display: flex;
    gap: 10px;
}

.all-products-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: black;
    color: white;
    padding: 12px 20px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(47, 117, 179, 0.2);
}

.all-products-link:hover {
    background: black;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(47, 117, 179, 0.3);
    text-decoration: none;
    color: white;
}

.all-products-link i:first-child {
    font-size: 1rem;
}

.all-products-link i:last-child {
    font-size: 0.8rem;
    transition: transform 0.3s ease;
}

.all-products-link:hover i:last-child {
    transform: translateX(3px);
}

.products-catalog {
    display: flex;
    gap: 28px;
    transition: transform 0.5s ease;
}

.products-nav {
    background-color: white;
    border: 1px solid #e0e0e0;
    color: #333;
    cursor: pointer;
    width: 48px;
    height: 48px;
    font-size: 1.2rem;
    border-radius: 50%;
    transition: all 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.products-nav:hover {
    background-color: #f5f5f5;
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.products-nav:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}

.products-nav:disabled:hover {
    background-color: white;
    color: #333;
    transform: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

#next-products {
    background-color: #000;
    color: white;
    border: 1px solid #000;
}

#next-products:hover {
    background-color: #333;
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.product-item {
    display: flex;
    padding: 20px 25px;
    flex-direction: column;
    gap: 15px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    align-items: center;
    justify-content: flex-start;
    aspect-ratio: 250 / 320;
    margin-bottom: 12px;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    cursor: pointer;
    min-width: 350px;
    flex-shrink: 0;
    position: relative;
    box-shadow: 0 8px 32px rgba(47, 117, 179, 0.08);
    overflow: hidden;
}

.product-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg,
            rgba(47, 117, 179, 0.02) 0%,
            rgba(99, 179, 237, 0.03) 50%,
            rgba(47, 117, 179, 0.02) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}


.product-item:hover::before {
    opacity: 1;
}

.product-image {
    width: 100%;
    height: 140px;
    overflow: hidden;
    border-radius: 12px;
    flex-shrink: 0;
    position: relative;
    box-shadow: 0 4px 20px rgba(47, 117, 179, 0.08);
}

.product-image img {
    width: 100%;
    height: 100%;
    object-fit: contain !important;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    filter: saturate(1.1) brightness(1.05);
}



.product-item:hover .product-image {
    box-shadow: 0 8px 30px rgba(47, 117, 179, 0.15);
}

.product-item h4 {
    font-size: 1rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
    line-height: 1.3;
    text-align: center;
    position: relative;
    z-index: 2;
    transition: color 0.3s ease;
}

.product-item:hover h4 {
    color: var(--primary-color);
}

/* Ürün bilgi alanı */
.product-info {
    width: 100%;
    text-align: center;
    z-index: 2;
    position: relative;
    margin-top: 12px;
}

.product-description {
    font-size: 0.8rem;
    color: #64748b;
    margin: 6px 0;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-model {
    display: inline-block;
    font-size: 0.75rem;
    color: var(--primary-color);
    font-weight: 500;
    background: rgba(47, 117, 179, 0.1);
    padding: 3px 6px;
    border-radius: 4px;
    margin: 3px 0;
}

.product-category {
    display: inline-block;
    font-size: 0.7rem;
    color: #64748b;
    background: rgba(100, 116, 139, 0.1);
    padding: 2px 5px;
    border-radius: 3px;
    margin-left: 4px;
}

/* === İLETİŞİM BÖLÜMÜ STİLLERİ === */
.contact-section {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 50%, #dee2e6 100%);
    padding: 100px 0;
}

.contact-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.contact-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
}

/* Sol Taraf - İletişim Bilgileri */
.contact-info-side {

    height: fit-content;
}

.contact-info-side h2 {
    font-size: 2.5rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 20px;
    line-height: 1.2;
}

.contact-info-side>p {
    font-size: 1.1rem;
    color: #475569;
    line-height: 1.6;
    margin-bottom: 40px;
}

.contact-details {
    margin-bottom: 40px;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
}

.contact-icon {
    width: 50px;
    height: 50px;
    background: var(--primary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.contact-text h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 5px;
}

.contact-text p {
    font-size: 1rem;
    color: #475569;
    margin: 0;
}

/* Sosyal Medya */
.social-follow h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 15px;
}

.social-icons {
    display: flex;
    gap: 15px;
}

.social-icons a {
    width: 45px;
    height: 45px;
    background: var(--primary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.1rem;
    transition: all 0.3s ease;
}

.social-icons a:hover {
    background: #245a8a;
    transform: translateY(-3px);
}

/* Sağ Taraf - Form Kartı */
.contact-form-card {
    padding: 0;
    height: fit-content;
}

.contact-form-card h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 24px;
    text-align: left;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.input-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.input-group.full-width {
    grid-column: 1 / -1;
}

.input-group label {
    font-size: 0.9rem;
    font-weight: 500;
    color: #374151;
    margin-bottom: 2px;
}

.input-group input,
.input-group textarea,
.input-group select {
    padding: 12px 0;
    border: none;
    border-bottom: 1px solid #d1d5db;
    border-radius: 0;
    font-size: 1rem;
    font-family: inherit;
    transition: border-color 0.2s ease;
    background: transparent;
}

.input-group input:focus,
.input-group textarea:focus,
.input-group select:focus {
    outline: none;
    border-bottom-color: var(--primary-color);
}

.input-group textarea {
    resize: vertical;
    min-height: 100px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    padding: 12px;
}

.input-group textarea:focus {
    border-color: var(--primary-color);
}

.submit-btn {
    background: var(--primary-color);
    color: white;
    border: none;
    padding: 14px 24px;
    border-radius: 4px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
    width: 100%;
}

.submit-btn:hover {
    background: #1f4c7a;
}

/* KVKK ve Gizlilik Bölümü */
.privacy-section {
    margin: 20px 0 16px 0;
}

.checkbox-group {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.checkbox-group input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    cursor: pointer;
    flex-shrink: 0;
    margin-top: 2px;
}

.checkbox-group label {
    font-size: 0.9rem;
    color: #374151;
    line-height: 1.4;
    cursor: pointer;
    margin: 0;
}

.kvkk-link {
    background: none;
    border: none;
    color: var(--primary-color);
    text-decoration: underline;
    cursor: pointer;
    font-size: inherit;
    font-family: inherit;
    padding: 0;
    transition: color 0.2s ease;
}

.kvkk-link:hover {
    color: #1f4c7a;
}

/* === BLOG BÖLÜMÜ STİLLERİ === */
.blog-section {
    background-color: #f9fafb;
    padding: 6rem 0; /* Adjusting padding for overall section */
}

.blog-container {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

@media (min-width: 1024px) {
    .blog-container {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

.text-center.mb-16 {
    margin-bottom: 4rem; /* Adjusting margin for header section */
}

.read-our-blog-tag {
    background-color: #e0f2fe;
    color: #2563eb;
    font-weight: 500;
    font-size: 0.875rem;
    display: inline-block;
    padding: 0.25rem 1rem;
    border-radius: 9999px;
    margin-bottom: 1rem;
}

.blog-section h2 {
    font-size: 3.5rem; /* Adjusting font size to match image */
    font-weight: 800;
    color: #111827;
    line-height: 1.2;
    margin-bottom: 1rem;
}

.blog-section p {
    font-size: 1.25rem;
    color: #4b5563;
    max-width: 48rem;
    margin-left: auto;
    margin-right: auto;
}

.blog-content-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem; /* gap-x-12 */
}

@media (min-width: 1024px) {
    .blog-content-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.blog-sidebar {
    grid-column: span 1 / span 1;
}

.sidebar-widget {
    background-color: #fff;
    padding: 1.5rem;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
    margin-bottom: 2rem;
    border: 1px solid #e5e7eb; /* Added border */
}

.sidebar-widget label {
    display: block;
    color: #374151;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.sidebar-widget input[type="text"],
.sidebar-widget select {
    width: 100%;
    padding: 0.5rem 1rem 0.5rem 2.5rem;
    border: 1px solid #e5e7eb; /* Changed border color */
    border-radius: 0.5rem;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.sidebar-widget select {
    padding: 0.5rem 2.5rem 0.5rem 1rem;
}

.sidebar-widget input[type="text"]:focus,
.sidebar-widget select:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.sidebar-widget .relative .fa-search {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
}

.sidebar-widget .relative .fa-question-circle {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    cursor: pointer;
}

.sidebar-widget .relative .fa-chevron-down {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    pointer-events: none;
}

.category-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.category-list li {
    margin-bottom: 0.5rem;
}

.category-list li:last-child {
    margin-bottom: 0;
}

.category-list li a {
    color: #374151;
    transition: color 0.2s ease;
    display: block;
    padding: 0.25rem 0;
}

.category-list li a:hover {
    color: #2563eb;
}

.blog-main-content {
    grid-column: span 3 / span 3;
}

/* Featured Posts Section */
.featured-posts {
    display: grid;
    grid-template-columns: 1fr; /* grid-cols-1 */
    gap: 2rem; /* gap-8 */
    margin-bottom: 3rem; /* mb-12 */
}

@media (min-width: 768px) {
    .featured-posts {
        grid-template-columns: repeat(2, 1fr); /* md:grid-cols-2 */
    }
}

.featured-blog-card {
    background-color: #fff;
    border-radius: 0.75rem; /* Increased border-radius */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    border: 1px solid #e5e7eb; /* Added border */
}

.featured-blog-card img {
    width: 100%;
    height: 16rem;
    object-fit: cover;
    border-top-left-radius: 0.75rem; /* Increased border-radius */
    border-top-right-radius: 0.75rem;
}

.featured-blog-card .p-6 {
    padding: 1.5rem;
}

.featured-blog-card .blog-category {
    color: #2563eb;
    font-weight: 600;
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
}

.featured-blog-card h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #111827;
    line-height: 1.25;
    margin-bottom: 0.75rem;
}

.featured-blog-card p {
    color: #374151;
    line-height: 1.625;
    font-size: 0.875rem;
    margin-bottom: 1rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.featured-blog-card .blog-label {
    background-color: #ede9fe;
    color: #7c3aed;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    display: inline-block;
    margin-bottom: 0.75rem;
}

.featured-blog-card .flex-grow {
    flex-grow: 1;
}

.featured-blog-card .mt-auto {
    margin-top: auto;
}

.featured-blog-card .text-xs {
    font-size: 0.75rem;
}

.featured-blog-card .w-8 {
    width: 2rem;
}

.featured-blog-card .h-8 {
    height: 2rem;
}

.featured-blog-card .rounded-full {
    border-radius: 9999px;
}

.featured-blog-card .mr-3 {
    margin-right: 0.75rem;
}

.featured-blog-card .ml-auto {
    margin-left: auto;
}

/* Other Blog Posts Section */
.other-blog-posts {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 768px) {
    .other-blog-posts {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .other-blog-posts {
        grid-template-columns: repeat(3, 1fr);
    }
}

.other-blog-posts .blog-card {
    background-color: #fff;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    border: 1px solid #e5e7eb; /* Added border */
}

.other-blog-posts .blog-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.other-blog-posts .blog-image {
    width: 100%;
    height: 10rem;
    object-fit: cover;
}

.other-blog-posts .blog-content {
    padding: 1.25rem;
}

.other-blog-posts .blog-category-small {
    color: #2563eb;
    font-weight: 600;
    font-size: 0.75rem;
    margin-bottom: 0.25rem;
}

.other-blog-posts .blog-content h4 {
    font-size: 1.125rem;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 0.5rem;
}

.other-blog-posts .blog-content p {
    color: #4b5563;
    font-size: 0.875rem;
    line-height: 1.625;
    margin-bottom: 0.75rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.other-blog-posts .blog-content .flex.items-center.text-gray-500.text-xs {
    display: flex;
    align-items: center;
    color: #6b7280;
    font-size: 0.75rem;
}

.other-blog-posts .blog-content .w-6 {
    width: 1.5rem;
}

.other-blog-posts .blog-content .h-6 {
    height: 1.5rem;
}

.other-blog-posts .blog-content .rounded-full {
    border-radius: 9999px;
}

.other-blog-posts .blog-content .mr-2 {
    margin-right: 0.5rem;
}

.other-blog-posts .blog-content .ml-auto {
    margin-left: auto;
}

.other-blog-posts .blog-content .text-gray-400 {
    color: #9ca3af;
}

.other-blog-posts .blog-content .hover\:text-blue-600:hover {
    color: #2563eb;
}

/* === FOOTER STİLLERİ === */
.site-footer {
    background-color: #1a1a1a;
    color: #ffffff;
    width: 100%;
    font-size: 14px;
}

.footer-container {
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    padding: 5vw 50px 40px 50px;
}

/* Üst Kısım: Soru ve Buton */
.footer-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 60px;
}

.footer-top h2 {
    font-size: 28px;
    font-weight: 500;
    margin: 0;
    line-height: 1.4;
    max-width: 400px;
}

.contact-button {
    border: 1px solid #ffffff;
    padding: 12px 24px;
    color: #ffffff;
    text-decoration: none;
    font-size: 16px;
    transition: background-color 0.3s, color 0.3s;
    white-space: nowrap;
}

.contact-button:hover {
    background-color: #ffffff;
    color: #1a1a1a;
}

.contact-button .arrow {
    margin-left: 10px;
    transition: margin-left 0.3s;
}

.contact-button:hover .arrow {
    margin-left: 15px;
}

/* Orta Kısım: Üç Sütunlu Alan */
.footer-main {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 60px;
}

.footer-column {
    flex: 1;
    border-top: 1px solid #fff;
    padding-top: 25px;
}

.footer-column.about {
    max-width: 35%;
}

.footer-column h3 {
    color: #888888;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    margin-top: 0;
    margin-bottom: 20px;
}

.footer-column p,
.footer-column a {
    color: #dddddd;
    text-decoration: none;
    line-height: 1.8;
    margin: 0;
}

.footer-column a:hover {
    color: #ffffff;
}

.footer-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-column li {
    margin-bottom: 8px;
}

.external-link-icon {
    font-size: 1.2em;
    vertical-align: middle;
    margin-left: 5px;
}

/* Alt Kısım: Telif Hakkı ve Linkler */
.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: #888888;
}

.footer-legal-links {
    margin-left: 20px;
}

.footer-legal-links a {
    color: #888888;
    text-decoration: none;
    margin-left: 15px;
}

.footer-legal-links span {
    margin-left: 15px;
}

.footer-legal-links a:hover {
    color: #ffffff;
}

.footer-logo {
    font-weight: 500;
    font-size: 20px;
    color: #dddddd;
}

/* Mobil ve Tablet İçin Responsive */
@media (max-width: 992px) {
    .footer-container {
        padding: 5vw 30px 30px 30px;
    }

    .footer-top {
        flex-direction: column;
        align-items: flex-start;
        gap: 30px;
        margin-bottom: 40px;
    }

    .footer-main {
        flex-direction: column;
        gap: 0;
        margin-bottom: 40px;
    }

    .footer-column {
        max-width: 100% !important;
        padding-bottom: 20px;
    }

    .footer-bottom {
        flex-direction: column-reverse;
        align-items: flex-start;
        gap: 20px;
    }

    .footer-legal-links {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-left: 0;
    }

    .footer-legal-links a,
    .footer-legal-links span {
        margin-left: 0;
    }

    .footer-legal-links span {
        display: none;
    }
}

@media (max-width: 768px) {
    .footer-container {
        padding: 5vw 20px 25px 20px;
    }
}





/* === RESPONSIVE STİLLER === */
@media (max-width: 992px) {

    .desktop-nav,
    .top-bar-primary {
        display: none;
    }

    .mobile-menu-toggle {
        display: block;
        position: fixed;
        top: 25px;
        right: 15px;
        background: none;
        border: none;
        font-size: 1.6rem;
        cursor: pointer;
        z-index: 1010;
        color: #333;
    }

    .main-header-content {
        padding: 20px 0;
    }

    .modern-slider {
        height: 90vh;
    }

    .slide-content h2 {
        font-size: 2.2rem;
    }

    .slide-content p {
        font-size: 1rem;
    }

    .slider-nav {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    #prev-slide {
        left: 15px;
    }

    #next-slide {
        right: 15px;
    }

    /* Mobil Navigasyon */
    .mobile-nav-menu {
        display: flex;
        flex-direction: column;
        justify-content: center;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(6px);
        z-index: 1005;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-20px);
        transition: opacity 0.3s, transform 0.3s;
        text-align: center;
        padding: 20px;
    }

    body.mobile-nav-active .mobile-nav-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .mobile-main-links li>a {
        font-size: 1.6rem;
        font-weight: 500;
        padding: 15px 0;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
    }

    .mobile-main-links .dropdown-menu {
        display: none;
        margin-top: 15px;
    }

    .mobile-main-links .dropdown.open>.dropdown-menu {
        display: block;
    }

    .mobile-main-links .dropdown-menu a {
        font-size: 1rem;
        font-weight: 400;
        color: #555;
        padding: 10px 0;
    }

    .mobile-main-links .dropdown>a .fa-chevron-down {
        transition: transform 0.3s;
        font-size: 0.8em;
    }

    .mobile-main-links .dropdown.open>a .fa-chevron-down {
        transform: rotate(180deg);
    }

    /* Hakkımızda Bölümü Responsive */
    .about-us-container {
        flex-direction: column;
        gap: 40px;
        text-align: center;
    }

    .about-image-wrapper {
        flex: 0 0 100%;
        transform: translateX(0);
    }

    .about-image-wrapper::before {
        top: -15px;
        left: -15px;
        right: 15px;
        bottom: 15px;
    }

    .about-content {
        transform: translateY(0);
    }

    .about-content h2 {
        font-size: 2.1rem;
    }

    .about-content .separator {
        margin-left: auto;
        margin-right: auto;
    }

    .about-features {
        flex-direction: column;
        align-items: center;
        gap: 25px;
    }

    /* Showcase Kartlar Responsive - Tablet */
    .solutions-showcase {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: repeat(3, 250px);
        gap: 20px;
    }

    .hero-card {
        grid-column: 1 / 3;
        grid-row: 1;
    }

    .standard-card:nth-of-type(2) {
        grid-column: 1;
        grid-row: 2;
    }

    .standard-card:nth-of-type(3) {
        grid-column: 2;
        grid-row: 2;
    }

    .wide-card {
        grid-column: 1 / 3;
        grid-row: 3;
    }

    .solutions-header h2 {
        font-size: 2.5rem;
    }

    /* Ürün Kataloğu Responsive - Tablet */
    .products-section {
        padding: 80px 0 60px 0;
    }

    .products-header h2 {
        font-size: 2.3rem;
    }

    .products-header p {
        font-size: 1.1rem;
    }

    /* Blog Bölümü Responsive - Tablet */
    .blog-section {
        padding: 80px 0;
    }

    .blog-header h2 {
        font-size: 2.3rem;
    }

    .blog-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 25px;
    }

    .blog-card {
        border-radius: 12px;
    }

    .blog-image {
        height: 200px;
    }

    .blog-content {
        padding: 20px;
    }



    /* İletişim Bölümü Responsive - Tablet */
    .contact-section {
        padding: 80px 0;
    }

    .contact-layout {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .contact-info-side {
        padding: 30px 0;
    }

    .contact-info-side h2 {
        font-size: 2rem;
    }

    .form-row {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

@media (max-width: 768px) {

    /* Showcase Kartlar (Telefon) */
    .solutions-section {
        padding: 80px 0;
        min-height: auto;
    }

    .solutions-showcase {
        display: flex;
        flex-direction: column;
        gap: 20px;
        padding: 0 15px;
    }

    .showcase-card {
        height: 320px;
    }

    .solutions-header h2 {
        font-size: 2rem;
    }

    .solutions-header p {
        font-size: 1.1rem;
    }

    /* Mobil'de tüm kartları normalize et */
    .card-content-dynamic {
        padding: 25px;
        gap: 15px;
    }

    .card-icon {
        width: 50px;
        height: 50px;
        font-size: 1.2rem;
    }

    .hero-card h3,
    .standard-card h3,
    .wide-card h3 {
        font-size: 1.5rem;
    }

    .hero-card p,
    .standard-card p,
    .wide-card p {
        font-size: 1rem;
    }

    /* Ürün Kataloğu (Telefon) */
    .products-section {
        padding: 60px 0 50px 0;
    }

    .products-header {
        margin-bottom: 50px;
    }

    .products-header h2 {
        font-size: 2rem;
    }

    .products-header p {
        font-size: 1rem;
    }

    .products-subtitle {
        font-size: 0.85rem;
        padding: 6px 16px;
    }

    /* Blog Bölümü (Telefon) */
    .blog-section {
        padding: 60px 0;
    }

    .blog-header {
        margin-bottom: 40px;
    }

    .blog-header h2 {
        font-size: 2rem;
    }

    .blog-header p {
        font-size: 1rem;
    }

    .blog-subtitle {
        font-size: 0.85rem;
        padding: 6px 16px;
    }

    .blog-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-bottom: 40px;
    }

    .blog-card {
        border-radius: 10px;
    }

    .blog-image {
        height: 180px;
    }

    .blog-content {
        padding: 18px;
    }

    .blog-content h3 {
        font-size: 1.2rem;
    }

    .blog-content p {
        font-size: 0.9rem;
    }

    .blog-meta {
        font-size: 0.8rem;
        gap: 10px;
    }

    .blog-category {
        font-size: 0.75rem;
        padding: 4px 8px;
    }

    .view-all-btn {
        padding: 12px 24px;
        font-size: 0.95rem;
    }



    /* İletişim Bölümü (Telefon) */
    .contact-section {
        padding: 60px 0;
    }

    .contact-layout {
        gap: 30px;
        padding: 0 15px;
    }

    .contact-info-side {
        padding: 20px 0;
    }

    .contact-info-side h2 {
        font-size: 1.8rem;
    }

    .contact-info-side>p {
        font-size: 1rem;
    }

    .contact-item {
        gap: 15px;
        margin-bottom: 25px;
    }

    .contact-icon {
        width: 45px;
        height: 45px;
    }

    .social-icons a {
        width: 40px;
        height: 40px;
    }

    .contact-form-card h3 {
        font-size: 1.4rem;
        margin-bottom: 20px;
    }

    .form-row {
        gap: 12px;
    }

    .input-group {
        gap: 4px;
    }

    .input-group label {
        font-size: 0.85rem;
    }

    .input-group input,
    .input-group select {
        padding: 10px 0;
        font-size: 0.9rem;
    }

    .input-group textarea {
        padding: 10px;
        font-size: 0.9rem;
    }

    .checkbox-group {
        gap: 8px;
    }

    .checkbox-group input[type="checkbox"] {
        width: 16px;
        height: 16px;
    }

    .checkbox-group label {
        font-size: 0.85rem;
    }

    .submit-btn {
        padding: 12px 20px;
        font-size: 0.95rem;
    }
}

/* === GEOMETRİK HAKKIMIZDA BÖLÜMÜ STİLLERİ === */
.geometric-about-section {
    background-color: #ffffff;
    padding: 100px 0;
    overflow: hidden;
    position: relative;
}

/* SVG clip-path tanımlamaları */
.svg-defs {
    position: absolute;
    width: 0;
    height: 0;
    pointer-events: none;
    opacity: 0;
}

.geometric-about-container {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    align-items: center;
    gap: 60px;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 50px;
}

.geometric-content {
    color: #111827;
    position: relative;
    z-index: 2;
}

.quote-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 30px;
}

.quote-icon {
    font-size: 4rem;
    color: #E21E4E;
    line-height: 0.8;
    font-weight: 700;
}

.geometric-title {
    font-size: 2.8rem;
    font-weight: 800;
    line-height: 1.2;
    color: #111827;
}

.geometric-description {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #4B5563;
    margin-bottom: 40px;
}

.features-list {
    list-style: none;
    padding: 0;
    margin-bottom: 40px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.features-list li {
    display: flex;
    align-items: center;
    gap: 15px;
    font-weight: 500;
}

[class^="feature-icon-"] {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: #E21E4E;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

.feature-icon-box {
    -webkit-mask-image: url('https://www.svgrepo.com/show/493806/box.svg');
    mask-image: url('https://www.svgrepo.com/show/493806/box.svg');
}

.feature-icon-truck {
    -webkit-mask-image: url('https://www.svgrepo.com/show/493959/truck.svg');
    mask-image: url('https://www.svgrepo.com/show/493959/truck.svg');
}

.feature-icon-weight {
    -webkit-mask-image: url('https://www.svgrepo.com/show/494002/weight.svg');
    mask-image: url('https://www.svgrepo.com/show/494002/weight.svg');
}

.feature-icon-globe {
    -webkit-mask-image: url('https://www.svgrepo.com/show/493710/globe.svg');
    mask-image: url('https://www.svgrepo.com/show/493710/globe.svg');
}


.geometric-cta-text {
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.7;
    margin-bottom: 40px;
}

.geometric-buttons {
    display: flex;
    gap: 20px;
}

.details-button,
.whatsapp-button-geo {
    display: flex;
    flex-direction: column;
    padding: 15px 25px;
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.3s ease;
}

a.details-button-geo {
    color: #f5f8ff;
}

.details-button {
    background-color: #F3F4F6;
    color: #111827;
}

.details-button:hover {
    background-color: #E5E7EB;
    transform: translateY(-3px);
}

.whatsapp-button-geo {
    background-color: #10B981;
    color: white;
}

.whatsapp-button-geo:hover {
    background-color: #059669;
    transform: translateY(-3px);
}

.details-button i,
.whatsapp-button-geo i {
    font-size: 1.5rem;
    margin-bottom: 10px;
}

.details-button span,
.whatsapp-button-geo span {
    font-size: 0.9rem;
}

.details-button strong,
.whatsapp-button-geo strong {
    font-size: 1.1rem;
    font-weight: 700;
}

.geometric-visual {
    position: relative;
    height: 600px;
    width: 100%;
}

.image-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    clip-path: url(#image-clip-path);
}

.background-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.1);
}

.color-shape {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #1C2C52;
    clip-path: url(#color-clip-path);
}

.card-shape {
    position: absolute;
    bottom: 50px;
    right: -50px;
    width: 200px;
    height: 200px;
    background-color: #E21E4E;
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.card-icon {
    font-size: 4rem;
}

@media (max-width: 1024px) {
    .geometric-about-container {
        grid-template-columns: 1fr;
        padding: 0 30px;
    }

    .geometric-visual {
        height: 500px;
        margin-top: 40px;
    }

    .card-shape {
        bottom: 20px;
        right: -20px;
        width: 150px;
        height: 150px;
    }

    .card-icon {
        font-size: 3rem;
    }

    .geometric-title {
        font-size: 2.2rem;
    }
}

@media (max-width: 768px) {
    .geometric-buttons {
        flex-direction: column;
    }
}




/* GEOMETRIC ABOUT SECTION STYLES */
.geometric-about-section {
    background-color: #0c2967;
    color: #ffffff;
    padding: 80px 0;
    position: relative;
    overflow: hidden;
    min-height: 600px;
}

/* Dikey çizgiler */
.geometric-about-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 15%;
    width: 1px;
    height: 100%;
    background: rgba(255, 255, 255, 0.1);
    z-index: 1;
}

.geometric-about-section::after {
    content: '';
    position: absolute;
    top: 0;
    right: 20%;
    width: 1px;
    height: 100%;
    background: rgba(233, 30, 99, 0.3);
    z-index: 1;
}

.vertical-line-1 {
    position: absolute;
    top: 0;
    left: 35%;
    width: 1px;
    height: 100%;
    background: rgba(255, 255, 255, 0.08);
    z-index: 1;
}

.vertical-line-2 {
    position: absolute;
    top: 0;
    left: 65%;
    width: 1px;
    height: 100%;
    background: rgba(233, 30, 99, 0.2);
    z-index: 1;
}

.vertical-line-3 {
    position: absolute;
    top: 0;
    right: 10%;
    width: 1px;
    height: 100%;
    background: rgba(255, 255, 255, 0.06);
    z-index: 1;
}

.geometric-about-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 55% 45%;
    gap: 0;
    align-items: center;
    position: relative;
    z-index: 2;
    height: 100%;
}

.geometric-content {
    padding-right: 80px;
    padding-left: 60px;
}

.quote-wrapper {
    position: relative;
    margin-bottom: 40px;
}

.quote-icon {
    font-size: 200px;
    font-weight: 100;
    color: rgba(255, 255, 255, 0.05);
    position: absolute;
    top: -80px;
    left: -60px;
    font-family: serif;
    line-height: 1;
}

.geometric-title {
    background-color: #e91e63;
    color: white;
    padding: 20px 30px;
    display: inline-block;
    font-size: 36px;
    font-weight: 700;
    position: relative;
    margin-left: 40px;
    margin-bottom: 40px;
    line-height: 1.3;
    max-width: 500px;
}

.geometric-description {
    font-size: 18px;
    line-height: 1.8;
    margin-bottom: 40px;
    color: rgba(255, 255, 255, 0.9);
}

.features-list {
    list-style: none;
    padding: 0;
    margin: 40px 0;
}

.features-list li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 16px;
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
}

.features-list li::before {
    content: "➤";
    color: #e91e63;
    font-weight: bold;
    margin-right: 20px;
    font-size: 16px;
    min-width: 20px;
    margin-top: 2px;
}

.geometric-cta-text {
    font-size: 20px;
    font-weight: 400;
    line-height: 1.7;
    margin-top: 50px;
    margin-bottom: 50px;
    color: rgba(255, 255, 255, 0.95);
}

.geometric-buttons {
    display: flex;
    flex-direction: column;
    gap: 25px;
    margin-top: 50px;
}

.details-button-geo {
    display: flex;
    align-items: center;
    gap: 20px;
    text-decoration: none;
    color: white;
    padding: 0;
    transition: all 0.3s ease;
}

.details-button-geo:hover {
    transform: translateX(5px);
}

.details-button-geo .icon-wrapper {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    background-color: rgba(255, 255, 255, 0.15);
    border: 2px solid rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.details-button-geo:hover .icon-wrapper {
    background-color: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
    transform: scale(1.05);
}

.whatsapp-button-geo {
    display: flex;
    align-items: center;
    gap: 20px;
    text-decoration: none;
    color: white;
    padding: 0;
}

.whatsapp-button-geo .icon-wrapper {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    background-color: #25d366;
}

.button-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.button-text span {
    font-size: 16px;
    opacity: 0.85;
    margin-bottom: 6px;
    font-weight: 400;
}

.button-text strong {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.5px;
}

.visual-content-area {
    position: relative;
    width: 120%;
    height: 600px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: -10%;
}

.visual-content-area img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    z-index: 1;
}

/* Kesikli dekoratif elementler */
.visual-content-area::before {
    content: '';
    position: absolute;
    top: 50px;
    right: 50px;
    width: 120px;
    height: 3px;
    background: linear-gradient(90deg, #e91e63 0%, #e91e63 50%, transparent 50%);
    background-size: 20px 3px;
    z-index: 2;
    opacity: 0.8;
}

.visual-content-area::after {
    content: '';
    position: absolute;
    bottom: 80px;
    left: 40px;
    width: 3px;
    height: 100px;
    background: linear-gradient(0deg, #e91e63 0%, #e91e63 50%, transparent 50%);
    background-size: 3px 15px;
    z-index: 2;
    opacity: 0.8;
}

.geometric-dashed-1 {
    position: absolute;
    top: 120px;
    left: 60px;
    width: 80px;
    height: 2px;
    background: repeating-linear-gradient(90deg, #fff 0%, #fff 8px, transparent 8px, transparent 16px);
    z-index: 2;
    opacity: 0.6;
}

.geometric-dashed-2 {
    position: absolute;
    top: 200px;
    right: 30px;
    width: 2px;
    height: 60px;
    background: repeating-linear-gradient(0deg, #fff 0%, #fff 6px, transparent 6px, transparent 12px);
    z-index: 2;
    opacity: 0.6;
}

.geometric-dashed-3 {
    position: absolute;
    bottom: 150px;
    right: 80px;
    width: 100px;
    height: 2px;
    background: repeating-linear-gradient(90deg, #e91e63 0%, #e91e63 10px, transparent 10px, transparent 20px);
    z-index: 2;
    opacity: 0.7;
}

.geometric-dots {
    position: absolute;
    top: 300px;
    left: 30px;
    width: 40px;
    height: 40px;
    background: radial-gradient(circle at 50% 50%, #fff 2px, transparent 2px);
    background-size: 12px 12px;
    z-index: 2;
    opacity: 0.4;
}

.geometric-corner {
    position: absolute;
    top: 80px;
    left: 20px;
    width: 30px;
    height: 30px;
    border-left: 3px solid #e91e63;
    border-top: 3px solid #e91e63;
    z-index: 2;
    opacity: 0.8;
}

.geometric-corner-2 {
    position: absolute;
    bottom: 50px;
    right: 50px;
    width: 25px;
    height: 25px;
    border-right: 3px solid #fff;
    border-bottom: 3px solid #fff;
    z-index: 2;
    opacity: 0.6;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .geometric-about-container {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .geometric-content {
        padding: 0 20px;
    }

    .visual-content-area {
        height: 400px;
    }

    .quote-icon {
        font-size: 150px;
        top: -50px;
        left: -40px;
    }

    .geometric-title {
        font-size: 28px;
        margin-left: 20px;
    }
}

.showcase-card.wide-card {
    height: 140%;
}

/* CONTACT HERO SECTION */
.contact-hero-wrapper {
    padding: 20px 0;
}

.contact-hero {
    background: url(https://8ded8880.delivery.rocketcdn.me/themes/neuros/wp-content/uploads/2024/12/page-title-bg-min-1.jpg) no-repeat center center / cover;
    position: relative;
    height: 430px;
    display: flex;
    align-items: center;
    padding: 0 50px;
    border-radius: 20px;
    overflow: hidden;
    max-width: 1400px;
    margin: 0 auto;
}

.contact-hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1;
}

.contact-hero-logo,
.contact-hero-main,
.contact-hero-breadcrumb-wrapper,
.contact-hero-vertical-text {
    position: relative;
    z-index: 2;
}

.contact-hero-logo {
    position: absolute;
    top: 40px;
    left: 50px;
}

.contact-hero-main {
    text-align: left;
    padding-left: 80px;
}

.contact-hero-title {
    font-size: 4rem;
    font-weight: 700;
    color: white;
    margin: 0;
}

.contact-hero-vertical-text {
    position: absolute;
    right: 35px;
    top: 90%;
    transform: translateY(-50%) rotate(90deg);
    transform-origin: center right;
    color: rgba(255, 255, 255, 0.15);
    font-size: 5rem;
    font-weight: 800;
    letter-spacing: 5px;
    white-space: nowrap;
    z-index: 2;
    pointer-events: none;
}

.contact-hero-breadcrumb-wrapper {
    position: absolute;
    bottom: 0;
    right: 8%;
}

.contact-breadcrumb {
    background: white;
    padding: 12px 20px;
    font-size: 0.9rem;
    box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.1);
}

.contact-breadcrumb a {
    color: #555;
    text-decoration: none;
    transition: color 0.3s;
}

.contact-breadcrumb a:hover {
    color: #000;
}

.contact-breadcrumb span {
    color: #999;
}


/* CONTACT MAIN SECTION */
.contact-main-section {
    padding: 60px 20px;
    background: #ffffff;
    position: relative;
    overflow: hidden;
}

/* Dikey Çizgiler */
.vertical-line {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: linear-gradient(to bottom, transparent 0%, #e2e8f0 20%, #e2e8f0 80%, transparent 100%);
    z-index: 1;
}

.vertical-line-1 {
    left: 15%;
}

.vertical-line-2 {
    left: 35%;
}

.vertical-line-3 {
    right: 35%;
}

.vertical-line-4 {
    right: 15%;
}

.contact-content-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

/* LEFT SIDE - CONTACT INFO */
.contact-info-header {
    margin-bottom: 25px;
}

.contact-info-header h2 {
    font-size: 2.2rem;
    font-weight: 700;
    color: #1a202c;
    line-height: 1.3;
}

.contact-info-header span {
    font-size: 0.9rem;
    color: #718096;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.contact-description {
    font-size: 1rem;
    color: #718096;
    line-height: 1.7;
    margin-bottom: 35px;
}

.contact-details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 30px;
}

.contact-detail-item h4 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #2d3748;
    margin-bottom: 8px;
}

.contact-detail-item p {
    color: #718096;
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
}

.social-links {
    display: flex;
    gap: 15px;
}

.social-links a {
    color: #2d3748;
    font-size: 1.2rem;
    text-decoration: none;
    transition: color 0.3s ease;
}

.social-links a:hover {
    color: #e53e3e;
}


/* RIGHT SIDE - CONTACT FORM */
.contact-form-section {
    background: #f7f7f7;
    border-radius: 12px;
    padding: 35px;
}

.contact-form-wrapper h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #2d3748;
    margin-bottom: 8px;
}

.contact-form-wrapper p {
    color: #718096;
    margin-bottom: 25px;
    font-size: 0.95rem;
}

.contact-form .form-group {
    margin-bottom: 25px;
    position: relative;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 10px 0;
    border: none;
    border-bottom: 1px solid #ccc;
    background: transparent;
    font-size: 1rem;
    color: #2d3748;
    transition: border-color 0.3s ease;
}

.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;
    border-bottom-color: #2d3748;
}

.contact-form textarea {
    min-height: 80px;
    resize: vertical;
}

.contact-submit-btn {
    background: #1a202c;
    color: white;
    padding: 12px 25px;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.contact-submit-btn:hover {
    background: #333;
}


/* CONTACT MAP SECTION */
.contact-map-wrapper {
    background: #f0f2f4;
    padding: 20px 0;
}

.contact-map-section {
    max-width: 1400px;
    margin: 0 auto;
    border-radius: 20px;
    overflow: hidden;
}

.contact-map-section iframe {
    filter: grayscale(100%);
    width: 100%;
    height: 450px;
    border: 0;
    display: block;
}


/* RESPONSIVE DESIGN */
@media (max-width: 992px) {
    .contact-hero-wrapper {
        padding: 15px 0;
    }

    .contact-hero {
        padding: 0 30px;
        margin: 0 auto;
        height: 250px;
    }

    .contact-map-wrapper {
        padding: 15px 0;
    }

    .contact-map-section {
        margin: 0 15px;
    }

    .contact-hero-title {
        font-size: 3rem;
    }

    .contact-hero-vertical-text {
        font-size: 4rem;
        right: 10px;
    }

    .contact-hero-main {
        padding-left: 60px;
    }
}

@media (max-width: 768px) {
    .container {
        padding-left: 15px;
        padding-right: 15px;
    }

    .contact-hero-wrapper {
        padding: 15px 0;
    }

    .contact-hero {
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        height: auto;
        padding: 40px 30px;
        margin: 0 auto;
    }

    .contact-map-wrapper {
        padding: 15px 0;
    }

    .contact-map-section {
        margin: 0 15px;
    }

    /* Mobilde dikey çizgileri gizle */
    .vertical-line {
        display: none;
    }

    .contact-hero-logo,
    .contact-hero-breadcrumb-wrapper,
    .contact-hero-main {
        position: static;
        padding: 0;
    }

    .contact-hero-main {
        margin-top: 15px;
    }

    .contact-hero-breadcrumb-wrapper {
        margin-top: 20px;
    }

    .contact-hero-vertical-text {
        display: none;
    }

    .contact-details-grid {
        grid-template-columns: 1fr;
    }
}

/* Alert Styles */
.alert {
    padding: 12px;
    border-radius: 6px;
    margin-bottom: 20px;
    font-size: 0.95rem;
}

.alert-success {
    background: #e6fffa;
    border: 1px solid #b2f5ea;
    color: #234e52;
}

.alert-danger {
    background: #fff5f5;
    border: 1px solid #fed7d7;
    color: #c53030;
}

.alert-danger ul {
    margin: 0;
    padding-left: 20px;
}


/* Modern Hero Section */
.hero-wrapper {
    background: #f8f9fa;
}

.modern-about-hero {
    /* background: url('{{ asset('assets/img/hero-section.webp') }}') no-repeat center center / cover; */
    position: relative;
    height: 85vh;
    min-height: 650px;
    display: flex;
    align-items: center;
    padding: 0 60px;
    overflow: hidden;

    margin: 0 auto;
    box-shadow: 0 25px 60px rgba(0,0,0,0.15);
}

.hero-bg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg,
        rgba(0,0,0,0.7) 0%,
        rgba(0,0,0,0.4) 50%,
        rgba(220,53,69,0.3) 100%);
    z-index: 1;
}

.hero-logo {
    position: absolute;
    top: 40px;
    left: 60px;
    z-index: 5;
    background: rgba(255,255,255,0.95);
    padding: 15px 20px;
    border-radius: 15px;
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

.logo-img {
    height: 45px;
    width: auto;
}

.hero-main-content {
    position: relative;
    z-index: 3;
    max-width: 650px;
    margin-left: 80px;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: rgba(220,53,69,0.9);
    color: white;
    padding: 12px 24px;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 30px;
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 25px rgba(220,53,69,0.3);
    animation: fadeInUp 0.6s ease-out;
}

.hero-badge i {
    font-size: 1.1rem;
}

.hero-main-title {
    font-size: 5.5rem;
    font-weight: 700;
    color: white;
    line-height: 1.1;
    margin: 0 0 25px 0;
    text-shadow: 0 4px 15px rgba(0,0,0,0.3);
    animation: fadeInUp 0.8s ease-out 0.2s both;
}

.title-highlight {
    background: linear-gradient(135deg, #dc3545, #ff6b7a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-main-description {
    font-size: 1.4rem;
    color: rgba(255,255,255,0.9);
    line-height: 1.6;
    margin-bottom: 40px;
    font-weight: 300;
    animation: fadeInUp 1s ease-out 0.4s both;
}

.hero-action-buttons {
    display: flex;
    gap: 20px;
    margin-bottom: 40px;
    animation: fadeInUp 1.2s ease-out 0.6s both;
}

.btn-primary-hero, .btn-secondary-hero {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 18px 35px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    border: 2px solid transparent;
}

.btn-primary-hero {
    background: linear-gradient(135deg, #dc3545, #c82333);
    color: white;
    box-shadow: 0 8px 25px rgba(220,53,69,0.4);
}

.btn-primary-hero:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(220,53,69,0.5);
    color: white;
}

.btn-secondary-hero {
    background: rgba(255,255,255,0.15);
    color: white;
    border-color: rgba(255,255,255,0.3);
}

.btn-secondary-hero:hover {
    background: rgba(255,255,255,0.25);
    transform: translateY(-3px);
    color: white;
}

.hero-stats-cards {
    position: absolute;
    right: 60px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.stat-card {
    background: rgba(255,255,255,0.95);
    padding: 25px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    min-width: 180px;
    backdrop-filter: blur(15px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    transition: all 0.3s ease;
}

.stat-card:hover {
    transform: translateX(-10px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
}

.stat-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #dc3545, #ff6b7a);
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.3rem;
}

.stat-content {
    display: flex;
    flex-direction: column;
}

.stat-number {
    font-size: 2rem;
    font-weight: 700;
    color: #333;
    line-height: 1;
}

.stat-label {
    font-size: 0.9rem;
    color: #666;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.hero-brand-text {
    position: absolute;
    right: 30px;
    top: 85%;
    transform: translateY(-50%) rotate(90deg);
    transform-origin: center right;
    color: rgba(255,255,255,0.1);
    font-size: 6rem;
    font-weight: 900;
    letter-spacing: 8px;
    z-index: 2;
    pointer-events: none;
    text-shadow: 0 0 20px rgba(255,255,255,0.1);
}

.hero-breadcrumb-wrapper {
    position: absolute;
    bottom: 0;
    right: 8%;
    z-index: 3;
}

.hero-breadcrumb {
    background: rgba(255,255,255,0.95);
    padding: 15px 25px;
    border-radius: 15px 15px 0 0;
    font-size: 0.9rem;
    backdrop-filter: blur(10px);
    box-shadow: 0 -8px 25px rgba(0,0,0,0.1);
}

.hero-breadcrumb a {
    color: #666;
    text-decoration: none;
    transition: color 0.3s ease;
}

.hero-breadcrumb a:hover {
    color: #dc3545;
}

.separator {
    margin: 0 8px;
    color: #ccc;
}

.current {
    color: #dc3545;
    font-weight: 600;
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive Design */
@media (max-width: 1200px) {
    .hero-stats-cards {
        right: 30px;
    }

    .stat-card {
        min-width: 160px;
        padding: 20px;
    }

    .hero-main-title {
        font-size: 4.5rem;
    }
}

@media (max-width: 992px) {
    .modern-about-hero {
        padding: 0 40px;
        height: 75vh;
        min-height: 600px;
    }

    .hero-main-content {
        margin-left: 40px;
        max-width: 500px;
    }

    .hero-stats-cards {
        position: static;
        transform: none;
        flex-direction: row;
        justify-content: center;
        margin-top: 40px;
        flex-wrap: wrap;
    }

    .hero-main-title {
        font-size: 3.5rem;
    }

    .hero-brand-text {
        display: none;
    }
}

@media (max-width: 768px) {
    .modern-about-hero {
        padding: 0 30px;
        height: 70vh;
        min-height: 550px;
    }

    .hero-logo {
        top: 30px;
        left: 30px;
        padding: 12px 16px;
    }

    .logo-img {
        height: 35px;
    }

    .hero-main-content {
        margin-left: 0;
        text-align: center;
    }

    .hero-main-title {
        font-size: 2.8rem;
    }

    .hero-main-description {
        font-size: 1.2rem;
    }

    .hero-action-buttons {
        flex-direction: column;
        align-items: center;
    }

    .btn-primary-hero, .btn-secondary-hero {
        width: 200px;
        justify-content: center;
    }

    .stat-card {
        min-width: 140px;
        padding: 15px;
    }

    .stat-number {
        font-size: 1.5rem;
    }

    .hero-breadcrumb-wrapper {
        right: 50%;
        transform: translateX(50%);
    }
}

/* === ÜRÜNLER SAYFALARI STİLLERİ === */

/* Ürün Hero Bölümü */
.products-hero-section {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 100px 0 60px 0;
    position: relative;
}

.products-hero-section.kombi-hero {
    background: linear-gradient(135deg, #2f75b3 0%, #245a8a 100%);
    color: white;
}

.products-hero-content {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.products-hero-content h1 {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 20px;
    color: #2c3e50;
}

.products-hero-section.kombi-hero .products-hero-content h1 {
    color: white;
}

.products-hero-content p {
    font-size: 1.3rem;
    margin-bottom: 30px;
    color: #6c757d;
}

.products-hero-section.kombi-hero .products-hero-content p {
    color: rgba(255, 255, 255, 0.9);
}

.products-breadcrumb {
    font-size: 0.95rem;
    color: #6c757d;
}

.products-breadcrumb a {
    color: var(--primary-color);
    text-decoration: none;
}

.products-breadcrumb a:hover {
    text-decoration: underline;
}

.products-hero-section.kombi-hero .products-breadcrumb a {
    color: rgba(255, 255, 255, 0.9);
}

/* Ürün Kategorileri Grid */
.products-categories-section {
    padding: 100px 0;
    background-color: #fdfdfd;
}

.section-header {
    text-align: center;
    max-width: 600px;
    margin: 0 auto 80px auto;
}

.section-header h2 {
    font-size: 3rem;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 20px;
}

.section-header p {
    font-size: 1.2rem;
    color: #6c757d;
    line-height: 1.6;
}

.categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
}

.category-card {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.320, 1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.category-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}

.category-image {
    position: relative;
    height: 250px;
    overflow: hidden;
}

.category-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.category-card:hover .category-image img {
    transform: scale(1.05);
}

.category-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(47, 117, 179, 0.8) 0%, rgba(36, 90, 138, 0.6) 100%);
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 20px;
}

.category-badge {
    background: rgba(255, 255, 255, 0.9);
    color: var(--primary-color);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
}

.category-content {
    padding: 30px;
    position: relative;
}

.category-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--primary-color), #245a8a);
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.category-icon i {
    font-size: 1.5rem;
    color: white;
}

.category-content h3 {
    font-size: 1.8rem;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 15px;
}

.category-content p {
    color: #6c757d;
    line-height: 1.6;
    margin-bottom: 25px;
}

.category-features {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

.feature-tag {
    background: #f8f9fa;
    color: var(--primary-color);
    padding: 6px 12px;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 500;
}

.category-arrow {
    position: absolute;
    bottom: 30px;
    right: 30px;
    width: 40px;
    height: 40px;
    background: var(--primary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    transition: transform 0.3s ease;
}

.category-card:hover .category-arrow {
    transform: translateX(5px);
}

/* Viessmann Avantajları */
.viessmann-advantages {
    padding: 80px 0;
    background: linear-gradient(135deg, var(--primary-color) 0%, #245a8a 100%);
    color: white;
}

.advantages-header {
    text-align: center;
    margin-bottom: 60px;
}

.advantages-header h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 15px;
}

.advantages-header p {
    font-size: 1.1rem;
    opacity: 0.9;
}

.advantages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
    max-width: 1000px;
    margin: 0 auto;
}

.advantage-item {
    text-align: center;
}

.advantage-icon {
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px auto;
    font-size: 2rem;
    color: white;
}

.advantage-item h4 {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 15px;
}

.advantage-item p {
    opacity: 0.9;
    line-height: 1.6;
}

/* Ürün Filtreleri */
.products-filters {
    background: white;
    border-bottom: 1px solid #e9ecef;
    padding: 20px 0;
    position: sticky;
    top: 0;
    z-index: 100;
}

.filter-bar {
    display: flex;
    align-items: center;
    gap: 30px;
}

.filter-title h3 {
    font-size: 1.2rem;
    font-weight: 600;
    color: #2c3e50;
}

.filter-options {
    display: flex;
    gap: 15px;
    flex: 1;
}

.filter-select {
    padding: 10px 15px;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    background: white;
    font-size: 0.95rem;
    min-width: 150px;
    cursor: pointer;
}

.filter-select:focus {
    outline: none;
    border-color: var(--primary-color);
}

/* Ürün Listesi */
.products-listing {
    padding: 60px 0;
    background: #fdfdfd;
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
}

.product-card {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.product-card.premium {
    border: 2px solid #ffd700;
}

.product-card.industrial {
    border: 2px solid #dc3545;
}

.product-image {
    position: relative;
    height: 220px;
    overflow: hidden;
}

.product-image img {
    width: 100%;
    height: 90%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.product-card:hover .product-image img {
    transform: scale(1.05);
}

.product-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    background: var(--primary-color);
    color: white;
    padding: 6px 12px;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 500;
    display: none;
}

.product-badge.premium-badge {
    background: #ffd700;
    color: #333;
}

.product-badge.industrial-badge {
    background: #dc3545;
}

.product-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
    padding: 20px 15px 15px 15px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.product-card:hover .product-overlay {
    opacity: 1;
}

.product-quick-specs {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.product-quick-specs span {
    background: rgba(255, 255, 255, 0.9);
    color: #333;
    padding: 4px 8px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 500;
}

.product-content {
    padding: 25px;
}

.product-category {
    color: var(--primary-color);
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 8px;
}

.product-content h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 10px;
}

.product-content p {
    color: #6c757d;
    line-height: 1.5;
    margin-bottom: 20px;
}

.product-features {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 20px;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    color: #6c757d;
}

.feature-item i {
    color: var(--primary-color);
    font-size: 0.8rem;
}

.product-price {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 15px;
    border-top: 1px solid #e9ecef;
}

.price-label {
    font-size: 0.9rem;
    color: #6c757d;
}

.price-button {
    background: var(--primary-color);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: background 0.3s ease;
}

.price-button:hover {
    background: #245a8a;
}

/* Teknik Destek Bölümü */
.technical-support-section {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 80px 0;
}

.support-content {
    display: flex;
    align-items: center;
    gap: 60px;
    max-width: 1000px;
    margin: 0 auto;
}

.support-text {
    flex: 1;
}

.support-text h3 {
    font-size: 2.2rem;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 20px;
}

.support-text p {
    font-size: 1.1rem;
    color: #6c757d;
    line-height: 1.6;
    margin-bottom: 30px;
}

.support-features {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.support-feature {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95rem;
    color: #495057;
}

.support-feature i {
    color: var(--primary-color);
    font-size: 1.1rem;
}

.support-action {
    text-align: center;
}

.support-button {
    display: inline-block;
    background: var(--primary-color);
    color: white;
    padding: 15px 30px;
    border-radius: 30px;
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 20px;
    transition: all 0.3s ease;
}

.support-button:hover {
    background: #245a8a;
    transform: translateY(-2px);
}

.support-contact {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 1.1rem;
    color: #495057;
    font-weight: 600;
}

.support-contact i {
    color: var(--primary-color);
}

/* === ÜRÜN DETAY SAYFASI === */

/* Ürün Detay Hero */
.product-detail-hero {
    background: #f8f9fa;
    padding: 30px 0;
    border-bottom: 1px solid #e9ecef;
}

.product-breadcrumb {
    font-size: 0.95rem;
    color: #6c757d;
}

.product-breadcrumb a {
    color: var(--primary-color);
    text-decoration: none;
}

.product-breadcrumb a:hover {
    text-decoration: underline;
}

/* Ürün Detay İçerik */
.product-detail-content {
    padding: 60px 0;
    background: white;
}

.product-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
}

/* Ürün Galerisi */
.product-gallery {
    position: sticky;
    top: 100px;
}

.main-image {
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    margin-bottom: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.main-image img {
    width: 100%;
    height: 400px;
    object-fit: contain;
}

.image-zoom-icon {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    cursor: pointer;
}

.thumbnail-gallery {
    display: flex;
    gap: 15px;
}

.thumbnail {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 8px;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.3s ease;
    border: 2px solid transparent;
}

.thumbnail.active,
.thumbnail:hover {
    opacity: 1;
    border-color: var(--primary-color);
}

/* Ürün Bilgileri */
.product-header {
    margin-bottom: 30px;
}

.product-series {
    color: var(--primary-color);
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 10px;
}

.product-info h1 {
    font-size: 3rem;
    font-weight: 800;
    color: #2c3e50;
    margin-bottom: 10px;
}

.product-subtitle {
    font-size: 1.2rem;
    color: #6c757d;
    font-weight: 300;
}

.product-badges {
    display: flex;
    gap: 10px;
    margin-bottom: 30px;
}

.badge {
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
}

.badge.energy {
    background: #28a745;
    color: white;
}

.badge.efficiency {
    background: #17a2b8;
    color: white;
}

.badge.warranty {
    background: #ffc107;
    color: #333;
}

/* Ürün Açıklaması Bölümü */
.product-description-section {
    padding: 25px 0;
    background: #f8f9fa;
    margin: 15px 0;
}

.product-description-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

.product-description {
    background: white;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
    border-left: 3px solid var(--primary-color);
    position: relative;
    overflow: visible;
    min-height: 82em;
    margin-bottom: 20px;
    max

}
.product-richtext-box {
    line-height: 55px;
}

.product-description h2 {
    font-size: 2rem;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 20px;
    margin-top: 0;
}

.product-description h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 15px;
    margin-top: 30px;
    position: relative;
}

.product-description h3:first-child {
    margin-top: 0;
}

.product-description h3::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 40px;
    height: 2px;
    background: var(--primary-color);
    border-radius: 1px;
}

.product-description p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #495057;
    margin-bottom: 15px;
    text-align: left;
}

.product-description p:last-child {
    margin-bottom: 0;
}

.product-description ul {
    margin-bottom: 20px;
    padding-left: 0;
}

.product-description ul.checklist {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
}

.product-description ul.checklist li {
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    line-height: 1.6;
    font-size: 1rem;
    color: #495057;
}

.product-description ul.checklist li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 2px;
    width: 20px;
    height: 20px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="%232f75b3" d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>') no-repeat center;
    background-size: contain;
}

.product-description strong {
    font-weight: 600;
    color: #2c3e50;
}

.product-description a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

.product-description a:hover {
    color: #245a8a;
    text-decoration: underline;
}

/* Responsive Product Description */
@media (max-width: 768px) {
    .product-description-section {
        padding: 20px 0;
        margin: 15px 0;
    }

    .product-description-container {
        padding: 0 10px;
    }

    .product-description {
        padding: 18px;
        border-radius: 8px;
        box-shadow: 0 1px 8px rgba(0, 0, 0, 0.04);
        margin-bottom: 15px;
    }

    .product-description h2 {
        font-size: 1.5rem;
        margin-bottom: 15px;
    }

    .product-description h3 {
        font-size: 1.2rem;
        margin-bottom: 10px;
        margin-top: 20px;
    }

    .product-description p {
        font-size: 1rem;
        line-height: 1.6;
        margin-bottom: 12px;
    }
}

@media (max-width: 480px) {
    .product-description-section {
        padding: 15px 0;
        margin: 10px 0;
    }

    .product-description {
        padding: 12px;
        border-radius: 6px;
        margin-bottom: 10px;
    }

    .product-description h2 {
        font-size: 1.3rem;
    }

    .product-description h3 {
        font-size: 1.1rem;
    }
}

/* Lightbox Modal Stilleri */
.lightbox-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    justify-content: center;
    align-items: center;
}

.lightbox-content {
    position: relative;
    max-width: 90%;
    max-height: 90%;
    text-align: center;
}

.lightbox-content img {
    max-width: 100%;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 10px;
}

.lightbox-close {
    position: absolute;
    top: -50px;
    right: 0;
    color: white;
    font-size: 35px;
    font-weight: bold;
    cursor: pointer;
    z-index: 10000;
    transition: color 0.3s ease;
}

.lightbox-close:hover {
    color: #ddd;
}

.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    box-sizing: border-box;
}

.lightbox-prev,
.lightbox-next {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border: none;
    padding: 15px 20px;
    font-size: 24px;
    cursor: pointer;
    border-radius: 50%;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.lightbox-prev:hover,
.lightbox-next:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

/* Tek fotoğraf varsa zoom icon'u daha belirgin yap */
.main-image:not(.has-thumbnails) .image-zoom-icon {
    background: rgba(0, 0, 0, 0.7);
    transition: all 0.3s ease;
}

.main-image:not(.has-thumbnails):hover .image-zoom-icon {
    background: rgba(0, 0, 0, 0.9);
    transform: scale(1.1);
}

/* Ana Özellikler */
.key-features {
    margin-bottom: 40px;
}

.key-features h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 25px;
}

.features-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.key-features .feature-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 10px;
}

.key-features .feature-icon {
    width: 50px;
    height: 50px;
    background: var(--primary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.2rem;
}

.key-features .feature-content h4 {
    font-size: 1rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 5px;
}

.key-features .feature-content p {
    font-size: 0.9rem;
    color: #6c757d;
    margin: 0;
}

/* CTA Butonları */
.product-actions {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.action-button {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 25px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.action-button.primary {
    background: var(--primary-color);
    color: white;
}

.action-button.primary:hover {
    background: #245a8a;
    transform: translateY(-2px);
}

.action-button.secondary {
    background: #6c757d;
    color: white;
}

.action-button.secondary:hover {
    background: #5a6268;
}

.action-button.outline {
    background: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
}

.action-button.outline:hover {
    background: var(--primary-color);
    color: white;
}

.action-button.vissman-link {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    color: white;
    border: 2px solid #e74c3c;
}

.action-button.vissman-link:hover {
    background: linear-gradient(135deg, #c0392b, #a93226);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(231, 76, 60, 0.3);
}

/* Teknik Detaylar Tabs */
.product-details-tabs {
    background: #ffffff;
    padding: 40px 0;
    margin-top: 20px;
}

.product-details-tabs .container {
    max-width: 95% !important;
    width: 95%;
    margin: 0 auto;
}

.tabs-navigation {
    display: flex;
    gap: 5px;
    margin-bottom: 40px;
    background: white;
    padding: 5px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: none;
}

.tab-button {
    flex: 1;
    padding: 15px 20px;
    background: transparent;
    border: none;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 500;
    color: #6c757d;
    cursor: pointer;
    transition: all 0.3s ease;
}

.tab-button.active {
    background: var(--primary-color);
    color: white;
}

.tab-button:hover:not(.active) {
    background: #f8f9fa;
}

.tab-content {
    display: none;
    background: white;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: none;
}

.tab-content.active {
    display: block;
}

/* Teknik Özellikler */
.specifications-content {
    width: 100%;
    max-width: none;
}

.specifications-content table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 30px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.specifications-content table th {
    background-color: var(--primary-color);
    color: white;
    padding: 15px;
    text-align: left;
    font-weight: 600;
    font-size: 1rem;
}

.specifications-content table td {
    padding: 12px 15px;
    border-bottom: 1px solid #e9ecef;
    vertical-align: top;
}

.specifications-content table tr:nth-child(even) {
    background-color: #f8f9fa;
}

.specifications-content table tr:hover {
    background-color: #e9ecef;
}

.specifications-content h3,
.specifications-content h4 {
    color: #2c3e50;
    margin: 25px 0 15px 0;
    font-weight: 700;
}

.specifications-content h3 {
    font-size: 1.5rem;
    border-bottom: 2px solid var(--primary-color);
    padding-bottom: 10px;
}

.specifications-content h4 {
    font-size: 1.3rem;
    border-bottom: 1px solid var(--primary-color);
    padding-bottom: 8px;
}

.specifications-content p {
    margin-bottom: 15px;
    line-height: 1.6;
    color: #495057;
}

.specifications-content ul,
.specifications-content ol {
    margin: 15px 0;
    padding-left: 20px;
}

.specifications-content li {
    margin-bottom: 8px;
    line-height: 1.6;
}

.specifications-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 60px;
    width: 100%;
    max-width: none;
}

.spec-category h4 {
    font-size: 1.3rem;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--primary-color);
}

.spec-table {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.spec-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #e9ecef;
}

.spec-row:last-child {
    border-bottom: none;
}

.spec-label {
    font-weight: 500;
    color: #495057;
}

.spec-value {
    font-weight: 600;
    color: #2c3e50;
    text-align: right;
}

/* Boyutlar */
.dimensions-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
    width: 100%;
    max-width: none;
}

.dimensions-image img {
    width: 100%;
    border-radius: 10px;
}

.dimensions-table h4 {
    font-size: 1.3rem;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 20px;
}

/* Montaj */
.installation-info h4 {
    font-size: 1.3rem;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 30px;
}

.installation-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}

.install-feature {
    text-align: center;
    padding: 30px 20px;
    background: #f8f9fa;
    border-radius: 15px;
}

.install-feature i {
    font-size: 2.5rem;
    color: var(--primary-color);
    margin-bottom: 20px;
}

.install-feature h5 {
    font-size: 1.2rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 15px;
}

.install-feature p {
    color: #6c757d;
    line-height: 1.6;
}

/* Aksesuarlar */
.accessories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 30px;
}

.accessory-item {
    text-align: center;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 15px;
    transition: transform 0.3s ease;
}

.accessory-item:hover {
    transform: translateY(-5px);
}

.accessory-item img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 15px;
}

.accessory-item h5 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 10px;
}

.accessory-item p {
    font-size: 0.9rem;
    color: #6c757d;
}

/* Dokümanlar */
.documents-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.document-item {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 10px;
    transition: background 0.3s ease;
}

.document-item:hover {
    background: #e9ecef;
}

.document-icon {
    width: 50px;
    height: 50px;
    background: var(--primary-color);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
}

.document-info {
    flex: 1;
}

.document-info h5 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 5px;
}

.document-info p {
    font-size: 0.9rem;
    color: #6c757d;
    margin: 0;
}

.document-download {
    width: 40px;
    height: 40px;
    background: var(--primary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-decoration: none;
    transition: background 0.3s ease;
}

.document-download:hover {
    background: #245a8a;
}

/* Benzer Ürünler */
.related-products {
    padding: 80px 0;
    background: white;
}

.related-products h3 {
    font-size: 2.2rem;
    font-weight: 700;
    color: #2c3e50;
    text-align: center;
    margin-bottom: 50px;
}

.related-products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    max-width: 900px;
    margin: 0 auto;
}

.related-product {
    border-radius: 15px;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.related-product:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.related-product img {
    width: 100%;
    height: 150px;
    object-fit: contain;
    border-radius: 10px;
    margin-bottom: 15px;
}

.related-product h4 {
    font-size: 1.2rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 10px;
}

.related-product p {
    font-size: 0.9rem;
    color: #6c757d;
    margin-bottom: 15px;
}

.related-price {
    display: inline-block;
    background: var(--primary-color);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 500;
}

/* Responsive Tasarım */
@media (max-width: 768px) {
    .categories-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .products-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .product-detail-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .support-content {
        flex-direction: column;
        text-align: center;
        gap: 40px;
    }

    .tabs-navigation {
        flex-wrap: wrap;
    }

    .tab-button {
        min-width: 120px;
    }

    .specifications-grid {
        grid-template-columns: 1fr;
    }

    .dimensions-content {
        grid-template-columns: 1fr;
    }

    .features-grid {
        grid-template-columns: 1fr;
    }

    .advantages-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
}

@media (max-width: 480px) {
    .products-hero-content h1 {
        font-size: 2.5rem;
    }

    .section-header h2 {
        font-size: 2.2rem;
    }

    .product-info h1 {
        font-size: 2.2rem;
    }

    .advantages-grid {
        grid-template-columns: 1fr;
    }

    .product-actions {
        flex-direction: column;
    }

    .action-button {
        justify-content: center;
    }
}

/* === MODERN ÜRÜN KATEGORİLERİ TASARIMI === */

/* Categories Section */
.categories-section-clean {
    padding: 80px 0;
    background: #ffffff;
}

/* Modern Category Cards Grid */
.categories-grid-modern {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 40px;
    max-width: 1400px;
    margin: 0 auto;
}

.category-card-modern {
    position: relative;
    background: white;
    border-radius: 24px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.320, 1);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.08),
        0 4px 16px rgba(47, 117, 179, 0.05);
    border: 1px solid rgba(47, 117, 179, 0.1);
}




.card-bg-pattern {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    z-index: 1;
    animation: subtleFloat 8s ease-in-out infinite;
}

@keyframes subtleFloat {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-5px) rotate(0.5deg); }
}

.card-glow-effect {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 50% 50%,
        rgba(47, 117, 179, 0.1) 0%,
        rgba(66, 133, 244, 0.05) 30%,
        transparent 70%);
    z-index: 0;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}


.category-image-modern {
    position: relative;
    height: 220px;
    overflow: hidden;
}

.image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    transition: all 0.4s ease;
}



.category-image-modern img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.5s ease;
}


.category-badge-modern {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    padding: 8px 16px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    z-index: 3;
    transition: all 0.3s ease;
}

.category-badge-modern.premium {
    background: linear-gradient(135deg, #ffd700, #ffb300);
    color: #333;
}

.category-badge-modern.inverter {
    background: linear-gradient(135deg, #42a5f5, #1976d2);
    color: white;
}

.category-badge-modern.eco {
    background: linear-gradient(135deg, #66bb6a, #388e3c);
    color: white;
}

.category-badge-modern.hybrid {
    background: linear-gradient(135deg, #ab47bc, #7b1fa2);
    color: white;
}

.category-badge-modern.industrial {
    background: linear-gradient(135deg, #ff7043, #d84315);
    color: white;
}

.category-badge-modern.smart {
    background: linear-gradient(135deg, #26c6da, #0097a7);
    color: white;
}

.category-content-modern {
    padding: 30px;
    position: relative;
    z-index: 2;
}

.category-header {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 20px;
}

.category-icon-modern {
    position: relative;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--primary-color), #1976d2);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.icon-glow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: inherit;
    border-radius: inherit;
    opacity: 0;
    filter: blur(8px);
    transition: opacity 0.3s ease;
}



.category-info h3 {
    font-size: 1.6rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 5px;
    line-height: 1.3;
}

.category-subtitle {
    font-size: 0.9rem;
    color: var(--primary-color);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.category-description {
    color: #666;
    line-height: 1.6;
    margin-bottom: 25px;
    font-size: 1rem;
}

.category-specs {
    display: flex;
    gap: 20px;
    margin-bottom: 25px;
}

.spec-item {
    text-align: center;
    flex: 1;
}

.spec-value {
    display: block;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--primary-color);
    line-height: 1;
}

.spec-label {
    display: block;
    font-size: 0.8rem;
    color: #888;
    margin-top: 4px;
    font-weight: 500;
}

.category-card-modern .card-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 20px;
    border-top: 1px solid #f0f0f0;
}

.action-text {
    font-weight: 600;
    color: var(--primary-color);
    font-size: 1rem;
}

.action-arrow {
    width: 40px;
    height: 40px;
    background: var(--primary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    transition: all 0.3s ease;
}


/* Modern Advantages Section */
.advantages-modern {
    padding: 120px 0;
    background: linear-gradient(135deg, #263238 0%, #37474f 100%);
    color: white;
    position: relative;
}

.advantages-intro {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 80px auto;
}

.advantages-title {
    font-size: 3.2rem;
    font-weight: 800;
    margin-bottom: 20px;
    line-height: 1.2;
}

.advantages-description {
    font-size: 1.2rem;
    opacity: 0.9;
    line-height: 1.6;
    font-weight: 300;
}

.advantages-grid-modern {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
}

.advantage-card-modern {
    position: relative;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 40px 30px;
    text-align: center;
    transition: all 0.3s ease;
}

.advantage-card-modern:hover {
    transform: translateY(-8px);
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.2);
}

.advantage-number {
    position: absolute;
    top: -15px;
    right: 20px;
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--primary-color), #1976d2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
}

.advantage-icon-modern {
    position: relative;
    width: 80px;
    height: 80px;
    background: rgba(100, 181, 246, 0.2);
    border: 2px solid rgba(100, 181, 246, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px auto;
    font-size: 2rem;
    color: #64b5f6;
}

.icon-pulse {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 2px solid #64b5f6;
    border-radius: 50%;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(1.3);
        opacity: 0;
    }
}

.advantage-card-modern h3 {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 15px;
    line-height: 1.3;
}

.advantage-card-modern p {
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
    margin-bottom: 20px;
}

.advantage-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.stat-highlight {
    font-size: 1.5rem;
    font-weight: 800;
    color: #64b5f6;
}

.stat-text {
    font-size: 0.9rem;
    opacity: 0.7;
}

/* Modern CTA Section */
.cta-section-modern {
    padding: 100px 0;
    background: linear-gradient(135deg, #f8f9fa 0%, #e3f2fd 100%);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cta-content {
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
    padding: 0 20px;
}

.cta-content h2 {
    font-size: 3rem;
    font-weight: 800;
    color: #1a1a1a;
    margin-bottom: 20px;
    line-height: 1.2;
}

.cta-content p {
    font-size: 1.2rem;
    color: #666;
    margin-bottom: 40px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

.cta-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.cta-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 30px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.cta-btn.primary {
    background: linear-gradient(135deg, var(--primary-color), #1976d2);
    color: white;
    box-shadow: 0 8px 25px rgba(47, 117, 179, 0.3);
}

.cta-btn.primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(47, 117, 179, 0.4);
}

.cta-btn.secondary {
    background: white;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.cta-btn.secondary:hover {
    background: var(--primary-color);
    color: white;
    transform: translateY(-3px);
}

/* Responsive Design */
@media (max-width: 1024px) {
    .categories-grid-modern {
        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
        gap: 30px;
    }

    .cta-content {
        max-width: 85%;
        padding: 0 25px;
    }

    .cta-content h2 {
        font-size: 2.5rem;
    }
}

@media (max-width: 768px) {
    .categories-grid-modern {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .advantages-grid-modern {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .cta-buttons {
        flex-direction: column;
        align-items: stretch;
        max-width: 300px;
        margin: 0 auto;
    }

    .advantages-title {
        font-size: 2.5rem;
    }

    .cta-content h2 {
        font-size: 2.2rem;
        margin-bottom: 15px;
    }

    .cta-content p {
        font-size: 1.1rem;
        margin-bottom: 30px;
        padding: 0 20px;
    }

    .cta-section-modern {
        padding: 60px 0;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .cta-content {
        max-width: 90%;
        padding: 0 15px;
    }

    .cta-btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .cta-content {
        max-width: 95%;
        padding: 0 10px;
    }

    .cta-content h2 {
        font-size: 1.8rem;
    }

    .cta-content p {
        font-size: 1rem;
        padding: 0 10px;
    }

    .category-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 15px;
    }

    .category-specs {
        flex-direction: column;
        gap: 15px;
    }

    .spec-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 0;
        border-bottom: 1px solid #f0f0f0;
    }
}

/* Modern Products Filters */
.modern-products-filters {
    padding: 10px 0;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 15px;
}

.filters-wrapper {
    background: white;
    border-radius: 8px;
    padding: 10px 20px;

    max-width: 100%;
    width: 100%;
}

/* Simple Filter Bar */
.simple-filter-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.filter-label-text {
    font-size: 14px;
    font-weight: 500;
    color: #374151;
}

.filter-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.clear-btn {
    background: #ef4444;
    color: white;
    border: none;
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    transition: background 0.2s;
}

.clear-btn:hover {
    background: #dc2626;
}

.results-text {
    font-size: 12px;
    color: #6b7280;
}

/* Filter Options */
.filter-options-modern {
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
    margin-bottom: 8px;
    overflow-x: auto;
    padding: 0 5px;
}

.filter-group {
    position: relative;
    min-width: 140px;
    flex-shrink: 0;
    margin-right: 5px;
}

.filter-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
    color: #374151;
    margin-bottom: 4px;
    font-size: 12px;
}

.filter-label i {
    color: #3b82f6;
    font-size: 16px;
}

.filter-dropdown {
    position: relative;
}

.modern-filter-select {
    width: 100%;
    padding: 8px 35px 8px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: white;
    font-size: 13px;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s ease;
    appearance: none;
    font-weight: 400;
    box-sizing: border-box;
}

.modern-filter-select:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.modern-filter-select:hover {
    border-color: #9ca3af;
}

.dropdown-icon {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #6b7280;
    pointer-events: none;
    transition: transform 0.3s ease;
}

.filter-dropdown:hover .dropdown-icon {
    transform: translateY(-50%) rotate(180deg);
}

/* Active Filters */
.active-filters {
    background: #f8fafc;
    border-radius: 12px;
    padding: 20px;
    border: 1px solid #e2e8f0;
    display: none;
}

.active-filters.show {
    display: block;
}

.active-filters-title {
    font-weight: 600;
    color: #374151;
    margin-bottom: 12px;
    font-size: 14px;
}

.active-filters-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.active-filter-tag {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: white;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
    animation: slideInUp 0.3s ease;
}

.active-filter-tag .remove-filter {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    cursor: pointer;
    border-radius: 4px;
    padding: 2px 4px;
    font-size: 10px;
    transition: background 0.2s ease;
}

.active-filter-tag .remove-filter:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Responsive Design */
@media (max-width: 1024px) {
    .filter-options-modern {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 15px;
    }

    .filter-header {
        flex-direction: column;
        gap: 15px;
        align-items: stretch;
    }

    .filter-actions {
        justify-content: space-between;
    }
}

@media (max-width: 768px) {
    .filters-wrapper {
        padding: 20px;
        border-radius: 15px;
    }

    .filter-options-modern {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .filter-main-title {
        font-size: 20px;
    }

    .filter-actions {
        flex-direction: column;
        gap: 10px;
    }

    .clear-filters-btn,
    .results-count {
        text-align: center;
        width: 100%;
    }
}

/* Animation */
@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.blog-single-content img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 20px auto;
    border-radius: 8px;
}

.latest-blog-post .blog-category {
    font-size: 0.875rem; /* text-sm */
}

.latest-blog-post .blog-meta span i {
    color: #3b82f6; /* text-blue-500 */
}

.btn-primary-blog-read-more {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #2563eb; /* text-blue-600 */
    font-weight: 600; /* font-semibold */
    text-decoration: none;
    transition: all 0.3s ease;
    padding: 0.75rem 1.5rem;
    border: 2px solid #2563eb;
    border-radius: 0.5rem;
    align-self: flex-start;
}

.btn-primary-blog-read-more:hover {
    background-color: #2563eb;
    color: #fff;
    transform: translateX(5px);
}

.btn-primary-blog-read-more i {
    transition: transform 0.3s ease;
}

.btn-primary-blog-read-more:hover i {
    transform: translateX(3px);
}

.other-blog-posts .blog-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

.other-blog-posts .blog-card {
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.other-blog-posts .blog-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.other-blog-posts .blog-image {
    height: 160px;
}

.other-blog-posts .blog-content h4 {
    font-size: 1.125rem; /* text-lg */
}

.other-blog-posts .blog-content p {
    font-size: 0.875rem; /* text-sm */
    line-height: 1.6;
}

.other-blog-posts .blog-content .read-more {
    font-size: 0.875rem; /* text-sm */
}

.blog-content-wrapper {
    display: flex;
    flex-direction: column;
    gap: 2rem; /* lg:space-x-8 */
}

@media (min-width: 1024px) {
    .blog-content-wrapper {
        flex-direction: row;
    }
}

.blog-sidebar {
    width: 100%;
    margin-bottom: 2.5rem; /* mb-10 */
}

@media (min-width: 1024px) {
    .blog-sidebar {
        width: 25%; /* lg:w-1/4 */
        margin-bottom: 0; /* lg:mb-0 */
    }
}

.sidebar-widget {
    background-color: #fff;
    padding: 1.5rem; /* p-6 */
    border-radius: 0.5rem; /* rounded-lg */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.06); /* shadow-md */
    margin-bottom: 2rem; /* mb-8 */
}

.sidebar-widget h4 {
    font-size: 1.125rem; /* text-lg */
    font-weight: 600; /* font-semibold */
    color: #1f2937; /* text-gray-800 */
    margin-bottom: 1rem; /* mb-4 */
    border-bottom: 1px solid #e5e7eb; /* border-gray-200 */
    padding-bottom: 0.75rem;
}

.sidebar-widget input[type="text"],
.sidebar-widget select {
    width: 100%;
    padding: 0.5rem 1rem 0.5rem 2.5rem; /* pl-10 pr-4 py-2 */
    border: 1px solid #d1d5db; /* border-gray-300 */
    border-radius: 0.5rem; /* rounded-lg */
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.sidebar-widget input[type="text"]:focus,
.sidebar-widget select:focus {
    border-color: #3b82f6; /* focus:ring-blue-500 */
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.sidebar-widget .relative i {
    color: #9ca3af; /* text-gray-400 */
}

.category-list li a {
    color: #374151; /* text-gray-700 */
    transition: color 0.2s ease;
}

.category-list li a:hover {
    color: #2563eb; /* hover:text-blue-600 */
}

.blog-main-content {
    width: 100%;
}

@media (min-width: 1024px) {
    .blog-main-content {
        width: 75%; /* lg:w-3/4 */
    }
}

/* Latest Blog Post */
.latest-blog-post article {
    border-radius: 0.5rem; /* rounded-lg */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-xl */
}

.latest-blog-post article .blog-category {
    color: #2563eb; /* text-blue-600 */
    font-weight: 600; /* font-semibold */
}

.latest-blog-post article h3 {
    font-size: 1.875rem; /* text-3xl */
    font-weight: 700; /* font-bold */
    color: #111827; /* text-gray-900 */
    line-height: 1.25; /* leading-tight */
}

.latest-blog-post article p {
    color: #374151; /* text-gray-700 */
    line-height: 1.625; /* leading-relaxed */
}

.latest-blog-post article .blog-meta {
    color: #6b7280; /* text-gray-500 */
    font-size: 0.875rem; /* text-sm */
}

.latest-blog-post article .blog-meta i {
    color: #3b82f6; /* text-blue-500 */
}

.latest-blog-post article .btn-primary-blog-read-more {
    background-color: #2563eb; /* bg-blue-600 */
    color: #fff;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    text-decoration: none;
    font-weight: 500;
    transition: background-color 0.3s ease;
}

.latest-blog-post article .btn-primary-blog-read-more:hover {
    background-color: #1d4ed8; /* hover:bg-blue-700 */
}

/* Other Blog Posts */
.other-blog-posts .blog-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

.other-blog-posts .blog-card {
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.other-blog-posts .blog-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.other-blog-posts .blog-image {
    height: 160px;
}

.other-blog-posts .blog-content h4 {
    font-size: 1.125rem; /* text-lg */
}

.other-blog-posts .blog-content p {
    font-size: 0.875rem; /* text-sm */
    line-height: 1.6;
}

.other-blog-posts .blog-content .read-more {
    font-size: 0.875rem; /* text-sm */
    color: #2563eb; /* text-blue-600 */
    font-weight: 500; /* font-medium */
}

.other-blog-posts .blog-content .read-more:hover {
    color: #1d4ed8; /* hover:text-blue-800 */
}

/* Remove old blog-grid styles */
.blog-grid {
    display: block; /* Override previous grid display */
    grid-template-columns: none;
    gap: 0;
    padding: 0;
}

.blog-card {
    display: block;
    flex-direction: initial;
    background-color: initial;
    border-radius: initial;
    box-shadow: initial;
    overflow: initial;
    transition: initial;
}

.blog-card:hover {
    transform: initial;
}

.blog-image {
    width: initial;
    height: initial;
    overflow: initial;
    position: initial;
}

.blog-image img {
    width: initial;
    height: initial;
    object-fit: initial;
}

.blog-category {
    position: initial;
    top: initial;
    right: initial;
    background-color: initial;
    color: initial;
    font-size: initial;
    font-weight: initial;
    padding: initial;
    border-radius: initial;
}

.blog-content {
    padding: initial;
    display: initial;
    flex-direction: initial;
    flex-grow: initial;
}

.blog-meta {
    color: initial;
    font-size: initial;
    margin-bottom: initial;
    display: initial;
}

.blog-meta span {
    display: initial;
}

.blog-meta span i {
    margin-right: initial;
}

.blog-content h3 {
    font-size: initial;
    font-weight: initial;
    color: initial;
    margin-bottom: initial;
}

.blog-content p {
    color: initial;
    line-height: initial;
    margin-bottom: initial;
    flex-grow: initial;
}

.blog-content .read-more {
    color: initial;
    font-weight: initial;
    display: initial;
    align-items: initial;
    text-decoration: initial;
}

.blog-content .read-more:hover {
    color: initial;
}

.blog-content .read-more i {
    margin-left: initial;
    transition: initial;
}

.blog-content .read-more:hover i {
    transform: initial;
}

.read-our-blog-tag {
    background-color: #e0f2fe; /* bg-blue-100 */
    color: #2563eb; /* text-blue-600 */
    font-weight: 500; /* font-medium */
    font-size: 0.875rem; /* text-sm */
    display: inline-block;
    padding: 0.25rem 1rem;
    border-radius: 9999px; /* rounded-full */
    margin-bottom: 1rem; /* mb-4 */
}

.blog-section h2 {
    font-size: 3rem; /* text-5xl */
    font-weight: 800; /* font-extrabold */
    color: #111827; /* text-gray-900 */
    line-height: 1.2; /* leading-tight */
    margin-bottom: 1rem; /* mb-4 */
}

.blog-section p {
    font-size: 1.25rem; /* text-xl */
    color: #4b5563; /* text-gray-600 */
    max-width: 48rem; /* max-w-3xl */
    margin-left: auto;
    margin-right: auto;
}

.blog-content-grid {
    display: grid;
    grid-template-columns: 1fr; /* col-span-1 */
    gap: 3rem; /* gap-x-12 */
}

@media (min-width: 1024px) {
    .blog-content-grid {
        grid-template-columns: repeat(4, 1fr); /* lg:grid-cols-4 */
    }
}

.blog-sidebar {
    grid-column: span 1 / span 1; /* col-span-1 */
}

.sidebar-widget {
    background-color: #fff;
    padding: 1.5rem;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
    margin-bottom: 2rem;
}

.sidebar-widget label {
    display: block;
    color: #374151; /* text-gray-700 */
    font-weight: 500; /* font-medium */
    margin-bottom: 0.5rem; /* mb-2 */
}

.sidebar-widget input[type="text"],
.sidebar-widget select {
    width: 100%;
    padding: 0.5rem 1rem 0.5rem 2.5rem; /* pl-10 pr-4 py-2 for input */
    border: 1px solid #d1d5db; /* border-gray-300 */
    border-radius: 0.5rem; /* rounded-lg */
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.sidebar-widget select {
    padding: 0.5rem 2.5rem 0.5rem 1rem; /* pl-4 pr-10 py-2 for select */
}

.sidebar-widget input[type="text"]:focus,
.sidebar-widget select:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.sidebar-widget .relative .fa-search {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
}

.sidebar-widget .relative .fa-question-circle {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    cursor: pointer;
}

.sidebar-widget .relative .fa-chevron-down {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    pointer-events: none;
}

.category-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.category-list li {
    margin-bottom: 0.5rem; /* space-y-2 */
}

.category-list li:last-child {
    margin-bottom: 0;
}

.category-list li a {
    color: #374151; /* text-gray-700 */
    transition: color 0.2s ease;
    display: block;
    padding: 0.25rem 0; /* py-1 */
}

.category-list li a:hover {
    color: #2563eb; /* hover:text-blue-600 */
}

.blog-main-content {
    grid-column: span 3 / span 3; /* col-span-3 */
}

/* Featured Posts Section */
.featured-posts {
    display: grid;
    grid-template-columns: 1fr; /* grid-cols-1 */
    gap: 2rem; /* gap-8 */
    margin-bottom: 3rem; /* mb-12 */
}

@media (min-width: 768px) {
    .featured-posts {
        grid-template-columns: repeat(2, 1fr); /* md:grid-cols-2 */
    }
}

.featured-blog-card {
    background-color: #fff;
    border-radius: 0.5rem; /* rounded-lg */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-xl */
    overflow: hidden;
}

.featured-blog-card img {
    width: 100%;
    height: 16rem; /* h-64 */
    object-fit: cover;
    border-top-left-radius: 0.5rem; /* rounded-t-lg */
    border-top-right-radius: 0.5rem;
}

.featured-blog-card .p-6 {
    padding: 1.5rem;
}

.featured-blog-card .blog-category {
    color: #2563eb; /* text-blue-600 */
    font-weight: 600; /* font-semibold */
    font-size: 0.875rem; /* text-sm */
    margin-bottom: 0.5rem; /* mb-2 */
}

.featured-blog-card h3 {
    font-size: 1.5rem; /* text-2xl */
    font-weight: 700; /* font-bold */
    color: #111827; /* text-gray-900 */
    line-height: 1.25; /* leading-tight */
    margin-bottom: 0.75rem; /* mb-3 */
}

.featured-blog-card p {
    color: #374151; /* text-gray-700 */
    line-height: 1.625; /* leading-relaxed */
    font-size: 0.875rem; /* text-sm */
    margin-bottom: 1rem; /* mb-4 */
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* line-clamp-3 */
    -webkit-box-orient: vertical;
}

.featured-blog-card .blog-label {
    background-color: #ede9fe; /* bg-purple-100 */
    color: #7c3aed; /* text-purple-700 */
    font-size: 0.75rem; /* text-xs */
    font-weight: 600; /* font-semibold */
    padding: 0.25rem 0.75rem;
    border-radius: 9999px; /* rounded-full */
    display: inline-block;
    margin-bottom: 0.75rem; /* mb-3 */
}

.featured-blog-card .flex-grow {
    flex-grow: 1;
}

.featured-blog-card .mt-auto {
    margin-top: auto;
}

.featured-blog-card .text-xs {
    font-size: 0.75rem;
}

.featured-blog-card .w-8 {
    width: 2rem;
}

.featured-blog-card .h-8 {
    height: 2rem;
}

.featured-blog-card .rounded-full {
    border-radius: 9999px;
}

.featured-blog-card .mr-3 {
    margin-right: 0.75rem;
}

.featured-blog-card .ml-auto {
    margin-left: auto;
}

/* Other Blog Posts Section */
.other-blog-posts {
    display: grid;
    grid-template-columns: 1fr; /* grid-cols-1 */
    gap: 2rem; /* gap-8 */
}

@media (min-width: 768px) {
    .other-blog-posts {
        grid-template-columns: repeat(2, 1fr); /* md:grid-cols-2 */
    }
}

@media (min-width: 1024px) {
    .other-blog-posts {
        grid-template-columns: repeat(3, 1fr); /* lg:grid-cols-3 */
    }
}

.other-blog-posts .blog-card {
    background-color: #fff;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.other-blog-posts .blog-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.other-blog-posts .blog-image {
    width: 100%;
    height: 10rem; /* h-40 */
    object-fit: cover;
}

.other-blog-posts .blog-content {
    padding: 1.25rem; /* p-5 */
}

.other-blog-posts .blog-category-small {
    color: #2563eb; /* text-blue-600 */
    font-weight: 600; /* font-semibold */
    font-size: 0.75rem; /* text-xs */
    margin-bottom: 0.25rem; /* mb-1 */
}

.other-blog-posts .blog-content h4 {
    font-size: 1.125rem; /* text-lg */
    font-weight: 600; /* font-semibold */
    color: #1f2937; /* text-gray-800 */
    margin-bottom: 0.5rem; /* mb-2 */
}

.other-blog-posts .blog-content p {
    color: #4b5563; /* text-gray-600 */
    font-size: 0.875rem; /* text-sm */
    line-height: 1.625; /* leading-relaxed */
    margin-bottom: 0.75rem; /* mb-3 */
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* line-clamp-3 */
    -webkit-box-orient: vertical;
}

.other-blog-posts .blog-content .flex.items-center.text-gray-500.text-xs {
    display: flex;
    align-items: center;
    color: #6b7280; /* text-gray-500 */
    font-size: 0.75rem; /* text-xs */
}

.other-blog-posts .blog-content .w-6 {
    width: 1.5rem;
}

.other-blog-posts .blog-content .h-6 {
    height: 1.5rem;
}

.other-blog-posts .blog-content .rounded-full {
    border-radius: 9999px;
}

.other-blog-posts .blog-content .mr-2 {
    margin-right: 0.5rem;
}

.other-blog-posts .blog-content .ml-auto {
    margin-left: auto;
}

.other-blog-posts .blog-content .text-gray-400 {
    color: #9ca3af;
}

.other-blog-posts .blog-content .hover\:text-blue-600:hover {
    color: #2563eb;
}

/* Resetting global blog-grid styles to avoid conflicts */
.blog-grid {
    display: block; /* Override previous grid display */
    grid-template-columns: none;
    gap: 0;
    padding: 0;
}

.blog-card {
    display: block;
    flex-direction: initial;
    background-color: initial;
    border-radius: initial;
    box-shadow: initial;
    overflow: initial;
    transition: initial;
}

.blog-card:hover {
    transform: initial;
}

.blog-image {
    width: initial;
    height: initial;
    overflow: initial;
    position: initial;
}

.blog-image img {
    width: initial;
    height: initial;
    object-fit: initial;
}

.blog-category {
    position: initial;
    top: initial;
    right: initial;
    background-color: initial;
    color: initial;
    font-size: initial;
    font-weight: initial;
    padding: initial;
    border-radius: initial;
}

.blog-content {
    padding: initial;
    display: initial;
    flex-direction: initial;
    flex-grow: initial;
}

.blog-meta {
    color: initial;
    font-size: initial;
    margin-bottom: initial;
    display: initial;
}

.blog-meta span {
    display: initial;
}

.blog-meta span i {
    margin-right: initial;
}

.blog-content h3 {
    font-size: initial;
    font-weight: initial;
    color: initial;
    margin-bottom: initial;
}

.blog-content p {
    color: initial;
    line-height: initial;
    margin-bottom: initial;
    flex-grow: initial;
}

.blog-content .read-more {
    color: initial;
    font-weight: initial;
    display: initial;
    align-items: initial;
    text-decoration: initial;
}

.blog-content .read-more:hover {
    color: initial;
}

.blog-content .read-more i {
    margin-left: initial;
    transition: initial;
}

.blog-content .read-more:hover i {
    transform: initial;
}

/* ========================================================================= */
/* ! BLOG SAYFASI STİLLERİ */
/* ========================================================================= */

/* Ana sarmalayıcı, projenin geri kalanından izole eder */
.macstoff-blog-sayfasi-wrapper {
    font-family: 'Inter', sans-serif;
    background-color: #f8f9fa; /* Arka planı çok hafif gri yaparak kartları öne çıkaralım */
    display: flex;
    flex-direction: column; /* Bölümleri alt alta sıralamak için */
    gap: 80px; /* Bölümler arasına boşluk */
    justify-content: center;
    align-items: center;
    padding: 50px 20px;
    box-sizing: border-box;
    min-height: 100vh;
}

.macstoff-blog-sayfasi-kategori-bolumu {
    width: 100%;
    max-width: 1700px;
}

/* Başlık Alanı (Article categories ve Browse all...) */
.macstoff-blog-sayfasi-header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 40px; /* Boşluğu biraz artırdık */
    text-align: center;
    gap: 10px;
}

.macstoff-blog-sayfasi-baslik {
    font-size: 1.75rem;
    font-weight: 600;
    color: #212529;
    margin: 0;
    text-align: center;
}

.macstoff-blog-sayfasi-aciklama {
    font-size: 1rem;
    color: #6c757d;
    margin: 0;
    max-width: 600px;
    line-height: 1.5;
}

.macstoff-blog-sayfasi-tumunu-gor {
    text-decoration: none;
    color: #495057;
    font-size: 0.9rem;
    font-weight: 500;
    padding: 8px 16px;
    border: 1px solid #dee2e6;
    border-radius: 20px;
    transition: all 0.2s ease-in-out;
}

.macstoff-blog-sayfasi-tumunu-gor:hover {
    background-color: #f1f3f5;
    border-color: #ced4da;
    color: #000;
}

/* === ORİJİNAL KATEGORİ KARTLARI STİLLERİ (DEĞİŞTİRİLMEDİ) === */
.macstoff-blog-sayfasi-kart-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.macstoff-blog-sayfasi-kart {
    position: relative;
    display: block;
    text-decoration: none;
    border-radius: 24px;
    overflow: hidden;
    aspect-ratio: 3 / 4;
    transition: transform 0.3s ease;
}

.macstoff-blog-sayfasi-kart:hover {
    transform: scale(1.03);
}

.macstoff-blog-sayfasi-kart:hover .macstoff-blog-sayfasi-kart-resim {
    transform: scale(1.1);
}

.macstoff-blog-sayfasi-kart:hover .macstoff-blog-sayfasi-kart-ikon {
    transform: scale(1.1) rotate(5deg);
}

.macstoff-blog-sayfasi-kart-resim {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    transition: transform 0.4s ease;
}

.macstoff-blog-sayfasi-kart-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70%;
    background: linear-gradient(to top, rgba(10, 10, 10, 0.85), transparent);
    z-index: 2;
}

.macstoff-blog-sayfasi-kart-icerik {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 25px;
    color: #ffffff;
    z-index: 3;
}

.macstoff-blog-sayfasi-kart-icerik h3 {
    font-size: 1.75rem;
    font-weight: 600;
    margin: 0 0 8px 0;
}

.macstoff-blog-sayfasi-kart-icerik p {
    font-size: 0.9rem;
    color: #e0e0e0;
    line-height: 1.5;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.macstoff-blog-sayfasi-kart-ikon {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 3;
    transition: transform 0.3s ease;
}

.macstoff-blog-sayfasi-kart-ikon svg {
    width: 20px;
    height: 20px;
    color: #333;
}

/* =========== YENİ EKLENEN BLOG YAZILARI KARTI STİLLERİ =========== */

.macstoff-blog-sayfasi-yazi-karti {
    background-color: #ffffff;
    border-radius: 24px; /* Orijinal tasarımla aynı köşe yuvarlaklığı */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px solid #e9ecef;
    transition: all 0.3s ease;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.05);
}

.macstoff-blog-sayfasi-yazi-karti:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.08);
}

.macstoff-blog-sayfasi-yazi-karti-resim-konteyner {
    display: block;
    overflow: hidden;
    aspect-ratio: 16 / 10;
}

.macstoff-blog-sayfasi-yazi-karti-resim {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.macstoff-blog-sayfasi-yazi-karti:hover .macstoff-blog-sayfasi-yazi-karti-resim {
    transform: scale(1.05);
}

.macstoff-blog-sayfasi-yazi-karti-icerik {
    padding: 20px 25px 25px 25px;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Kartların boyu farklı olsa da yazar kısmını en altta tutar */
}

.macstoff-blog-sayfasi-yazi-karti-kategori {
    display: inline-block;
    align-self: flex-start; /* Kendini kapsayıcının soluna yaslar */
    text-decoration: none;
    color: #007bff; /* Marka rengi veya belirgin bir renk */
    background-color: #e7f5ff;
    padding: 5px 12px;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 15px;
    transition: all 0.2s ease;
}

.macstoff-blog-sayfasi-yazi-karti-kategori:hover {
    background-color: #d0ebff;
    color: #0056b3;
}

.macstoff-blog-sayfasi-yazi-karti-baslik {
    font-size: 1.25rem;
    font-weight: 600;
    color: #212529;
    margin: 0 0 10px 0;
    text-decoration: none;
    line-height: 1.4;
}

.macstoff-blog-sayfasi-yazi-karti-baslik:hover {
    color: #0056b3;
}

.macstoff-blog-sayfasi-yazi-karti-ozet {
    font-size: 0.95rem;
    color: #6c757d;
    line-height: 1.6;
    margin: 0;
    flex-grow: 1; /* İçeriğin büyümesini sağlar, metayı aşağı iter */
}

.macstoff-blog-sayfasi-yazi-karti-meta {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #e9ecef;
    display: flex;
    align-items: center;
    gap: 12px;
}

.macstoff-blog-sayfasi-yazi-karti-yazar-foto {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.macstoff-blog-sayfasi-yazi-karti-yazar-bilgi {
    display: flex;
    flex-direction: column;
}

.macstoff-blog-sayfasi-yazi-karti-yazar-ad {
    font-size: 0.9rem;
    font-weight: 600;
    color: #343a40;
}

.macstoff-blog-sayfasi-yazi-karti-tarih {
    font-size: 0.8rem;
    color: #868e96;
}


/* === MOBİL UYUMLULUK (TÜM BÖLÜMLER İÇİN GEÇERLİ) === */
@media (max-width: 1200px) {
    .macstoff-blog-sayfasi-kart-grid {
        grid-template-columns: repeat(3, 1fr); /* Büyük tablette 3 sütun */
    }
}

@media (max-width: 992px) {
    .macstoff-blog-sayfasi-kart-grid {
        grid-template-columns: repeat(2, 1fr); /* Tablette 2 sütun */
    }
}

@media (max-width: 768px) {
    .macstoff-blog-sayfasi-kart-grid {
        grid-template-columns: 1fr; /* Mobilde tek sütun */
    }
    .macstoff-blog-sayfasi-baslik {
        font-size: 1.5rem;
    }
}

@media (max-width: 480px) {




    .blog-grid-section {
        width: 100%;
        display: flex;
        background-color: #2a2a2a;
    }

    .blog-grid-container {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 0;
    }

    .grid-item {
        position: relative;
        overflow: hidden;
        height: 65vh;
        max-height: 600px;
        cursor: pointer;
    }

    .grid-item::after {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: #1a1a1a;
        z-index: 1;
        transition: left 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .grid-item img, .grid-item video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .grid-item:hover img, .grid-item:hover video {
        transform: scale(1.02);
        opacity: 0.1;
    }

    .grid-item:hover::after {
        left: 0;
    }

    .grid-content {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: flex-start;
        padding: 30px;
        z-index: 2;
        color: #ffffff;
        text-align: left;
        transition: all 0.4s ease;
    }

    .grid-content .dot-decorator,
    .grid-content .description,
    .grid-content .read-more-btn {
        opacity: 0;
        visibility: hidden;
        transform: translateY(10px);
        transition: all 0.3s ease;
        height: 0;
        margin-top: 0;
        margin-bottom: 0;
    }

    .grid-content .category {
        margin: 0 0 8px 0;
        font-size: 0.9rem;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.85);
        text-transform: uppercase;
        letter-spacing: 1px;
        transition: all 0.4s ease;
    }

    .grid-content .title {
        margin: 0;
        font-size: 16px;
        font-weight: 600;
        line-height: 1.3;
        color: #ffffff;
        transition: all 0.4s ease;
    }

    /* Hover State */
    .grid-item:hover .grid-content {
        justify-content: center;
        align-items: flex-start;
        text-align: left;
        padding-left: 50px;
    }

    .grid-item:hover .grid-content .category {
        opacity: 0;
        visibility: hidden;
        height: 0;
        margin: 0;
        transform: translateY(-10px);
    }

    .grid-item:hover .grid-content .dot-decorator,
    .grid-item:hover .grid-content .description,
    .grid-item:hover .grid-content .read-more-btn {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        height: auto;
    }

    .grid-content .dot-decorator {
        width: 10px;
        height: 10px;
        background-color: #D71920;
        border-radius: 50%;
        align-self: flex-start;
    }

    .grid-item:hover .grid-content .dot-decorator {
        margin-bottom: 20px;
    }

    .grid-content .description {
        font-size: 1rem;
        max-width: 35ch;
        line-height: 1.6;
        color: #b0b0b0;
        transition-delay: 0.1s;
        text-align: left;
    }

    .grid-item:hover .grid-content .description {
        margin: 15px 0 25px 0;
    }

    .grid-content .read-more-btn {
        display: inline-flex;
        align-items: center;
        gap: 15px;
        text-decoration: none;
        color: #fff;
        transition-delay: 0.2s;
    }

    .grid-content .plus-icon {
        width: 50px;
        height: 50px;
        background-color: #D71920;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 2rem;
        font-weight: 300;
        color: #fff;
        transition: transform 0.3s ease;
        flex-shrink: 0;
    }

    .grid-item:hover .grid-content .read-more-btn .plus-icon {
        transform: rotate(90deg);
    }

    .grid-content .btn-text {
        text-align: left;
        font-weight: 500;
        line-height: 1.2;
    }

    @media (max-width: 1024px) {
        .blog-grid-container {
            grid-template-columns: repeat(2, 1fr);
        }
        .grid-item {
            height: 50vh;
            max-height: 450px;
        }
    }

    @media (max-width: 600px) {
        .blog-grid-container {
            grid-template-columns: 1fr;
        }
        .grid-item {
            height: 60vh;
            max-height: 400px;
        }
        .grid-content .title {
            font-size: 14px;
        }
    }

    /* Büyük ekranlar için blog-grid düzenlemeleri */
    @media (min-width: 2000px) {
        .blog-grid-section {
            max-width: 2200px;
            margin: 0 auto;
        }

        .blog-grid-container {
            max-width: 100%;
        }

        .grid-item {
            height: 70vh;
            min-height: 500px;
            max-height: 650px;
        }

        .grid-content {
            padding: 40px 60px;
        }

        .grid-content .title {
            font-size: 18px;
        }

        .grid-content .description {
            font-size: 1.1rem;
            max-width: 40ch;
        }

        .grid-content .plus-icon {
            width: 60px;
            height: 60px;
            font-size: 2.2rem;
        }
    }

    @media (min-width: 3000px) {
        .blog-grid-section {
            max-width: 2800px;
        }

        .grid-item {
            height: 75vh;
            min-height: 600px;
            max-height: 750px;
        }

        .grid-content {
            padding: 50px 80px;
        }

        .grid-content .title {
            font-size: 20px;
            line-height: 1.2;
        }

        .grid-content .description {
            font-size: 1.2rem;
            max-width: 45ch;
            line-height: 1.7;
        }

        .grid-content .plus-icon {
            width: 70px;
            height: 70px;
            font-size: 2.4rem;
        }

        .grid-content .btn-text {
            font-size: 1.1rem;
            line-height: 1.3;
        }
    }
            /* Ana bileşen sarmalayıcısı */
            .courier-services-component {
                display: flex;
                position: relative;
                background-color: #1c1c1c;
                color: #ffffff;
                font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
                overflow: hidden; /* İçerik taşmasını engellemek için önemli */
                width: 100%;
                min-height: 70vh;
            }

            /* Sol taraftaki içerik alanı */
            .courier-services-component .content-area {
                flex-grow: 1;
                padding: clamp(40px, 6vw, 70px) clamp(50px, 8vw, 90px);
                display: flex;
                flex-direction: column;
                justify-content: space-between;
            }

            /* Başlık alanı */
            .courier-services-component .header-content h2 {
                font-size: clamp(2rem, 4vw, 3rem);
                font-weight: 500;
                line-height: 1.3;
                margin: 0;
                max-width: clamp(20ch, 30ch, 32ch);
                position: relative;
                z-index: 2;
            }

            /* Slide kontainerı */
            .courier-services-component .slides-container {
                position: absolute;
                bottom: 0;
                right: 0;
                left: clamp(50px, 8vw, 90px);
                height: 60%;
                z-index: 1;
                overflow: hidden;
            }

            /* Slide wrapper */
            .courier-services-component .slides-wrapper {
                display: flex;
                width: 100%; /* Dinamik genişlik - JavaScript tarafından ayarlanacak */
                height: 100%;
                transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
            }

            /* Her bir slide */
            .courier-services-component .slide {
                width: 100%; /* Dinamik genişlik - JavaScript tarafından ayarlanacak */
                height: 100%;
                position: relative;
                flex-shrink: 0;
            }

            .courier-services-component .slide img {
                width: 95%;
                height: 100%;
                display: block;
                object-fit: cover;
                transition: transform 0.8s ease;
            }

            .courier-services-component .slide-caption {
                position: absolute;
                bottom: 25px;
                left: 25px;
                opacity: 0;
                transform: translateY(20px);
                transition: all 0.5s ease;
            }

            /* Aktif slide'ın caption'ı */
            .courier-services-component .slide.active .slide-caption {
                opacity: 1;
                transform: translateY(0);
            }

            .courier-services-component .slide-caption p {
                margin: 0 0 0.5rem 0;
                font-size: 1rem;
                color: #e0e0e0;
            }

            .courier-services-component .slide-caption h3 {
                margin: 0;
                font-size: clamp(1.2rem, 2vw, 1.7rem);
            }

            /* Navigation butonları - YENİ VE TEMİZ */
            .courier-services-component .slide-navigation {
                position: absolute;
                top: 70%;
                right: 40px; /* Kenardan 40px boşluk */
                transform: translateY(-50%);
                display: flex;
                flex-direction: column;
                gap: 15px;
                z-index: 10; /* Yeterli z-index */
            }

            .courier-services-component .slide-nav-btn {
                width: 52px;
                height: 52px;
                /* -- YENİ GRİ & KARE STİLİ -- */
                border-radius: 8px; /* Köşeleri hafif yuvarlatılmış kare */
                background: rgba(34, 34, 34, 0.8) !important; /* Koyu, net gri arka plan */
                border: 1px solid rgba(255, 255, 255, 0.2); /* Belirgin çerçeve */
                backdrop-filter: blur(8px); /* Hafif blur */
                -webkit-backdrop-filter: blur(8px);
                /* -- DİĞER STİLLER -- */
                color: #ffffff;
                cursor: pointer;
                display: flex;
                align-items: center;
                justify-content: center;
                transition: all 0.2s ease-in-out; /* Daha hızlı geçiş */
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
            }

            .courier-services-component .slide-nav-btn svg {
                width: 24px;
                height: 24px;
                stroke: #ffffff; /* İkon rengini doğrudan buradan ayarla */
                transition: stroke 0.2s ease-in-out, transform 0.2s ease-in-out;
            }

            .courier-services-component .slide-nav-btn:hover {
                background: #ffffff !important; /* Arka planı beyaz yap */
                border-color: #ffffff; /* Çerçeveyi de beyaz yap */
                transform: scale(1.05) translateY(-2px);
                box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
            }

            /* Hover durumunda SVG ikonunun rengini ve animasyonunu ayarla */
            .courier-services-component .slide-nav-btn:hover svg {
                stroke: #1c1c1c; /* İkonu siyah yap */
                transform: scale(1.1);
            }

            .courier-services-component .slide-nav-btn:active {
                transform: scale(0.98) translateY(0); /* Tıklama anında yerine oturma */
                background: #f0f0f0;
            }

            /* Slide indicators */
            .courier-services-component .slide-indicators {
                position: absolute;
                bottom: 100px;
                left: 25px;
                display: flex;
                gap: 10px;
                z-index: 10; /* Artık çalışacak */
            }

            .courier-services-component .slide-indicator {
                width: 12px;
                height: 12px;
                border-radius: 50%;
                background: rgba(255, 255, 255, 0.3);
                cursor: pointer;
                transition: all 0.3s ease;
            }

            .courier-services-component .slide-indicator.active {
                background: #D71920;
                transform: scale(1.2);
            }

            /* Sağdaki kırmızı dikey bar */
            .courier-services-component .yellow-sidebar {
                flex-shrink: 0;
                width: 140px;
                background: linear-gradient(to bottom, #ffffff 40%, #D71920 40%);
                position: relative;
                z-index: 2; /* Slide'ların arkasında, butonların altında */
            }

            /* Kenardaki ok işareti - güncellendi */
            .courier-services-component .arrow-nav {
                position: absolute;
                top: 30%;
                right: 140px;
                transform: translate(50%, -50%);
                font-size: 2rem;
                font-weight: 100;
                color: #1c1c1c;
                text-decoration: none;
                z-index: 4;
                transition: all 0.3s ease;
            }

            .courier-services-component .arrow-nav:hover {
                transform: translate(60%, -50%);
                color: #D71920; /* Hover'da kırmızı */
            }

            /* Responsive düzenlemeler */
            @media (max-width: 768px) {
                .courier-services-component .slide-navigation {
                    right: 15px; /* Mobilde kenara daha yakın */
                    gap: 10px;
                }

                .courier-services-component .slide-nav-btn {
                    width: 44px;
                    height: 44px;
                    border-radius: 6px; /* Mobilde de kare */
                }

                .courier-services-component .slide-nav-btn svg {
                    width: 20px;
                    height: 20px;
                }

                .courier-services-component .slide-indicators {
                    bottom: 60px; /* Mobilde yukarıda */
                    left: 15px;
                }

                .courier-services-component .slide-caption {
                    bottom: 15px;
                    left: 15px;
                }

                /* Mobilde kırmızı sidebar daha dar */
                .courier-services-component .yellow-sidebar {
                    width: 80px;
                }
            }

            /* Büyük ekranlar için makul sınırlar */
            @media (min-width: 1200px) {
                .courier-services-component {
                    max-width: 1400px;
                    margin: 0 auto;
                }

                .courier-services-component .content-area {
                    padding: 120px 80px;
                }

                .courier-services-component .slides-container {
                    left: 80px;
                }
            }

            @media (min-width: 1600px) {
                .courier-services-component {
                    max-width: 1500px;
                    margin: 0.01px;
                }

                .courier-services-component .content-area {
                    padding: 140px 90px;
                }

                .courier-services-component .slides-container {
                    left: 90px;
                }
            }

            @media (min-width: 3000px) {
                .courier-services-component {
                    min-height: 70vh;
                    max-width: 2800px;
                    margin: 0 auto;
                }

                .courier-services-component .content-area {
                    padding: 100px 120px;
                }

                .courier-services-component .slides-container {
                    left: 120px;
                    height: 60%;
                }
            }

                .courier-services-component .header-content h2 {
                    font-size: clamp(3rem, 5vw, 4rem);
                }
            }
            .product-section {
                padding: 20px 0px;
                background-color: #f8f8f8;
            }

            .section-title {
                text-align: center;
                margin-bottom: 40px;
            }

            .section-title .subtitle {
                display: block;
                text-transform: uppercase;
                color: #666;
                font-size: 0.9rem;
                letter-spacing: 3px;
                margin-bottom: 15px;
            }

            .section-title h2 {
                color: #111;
                font-size: 2.8em;
                font-weight: 600;
                letter-spacing: -0.5px;
                margin: 0;
            }

            .product-container {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
                gap: 40px;
                max-width: 1400px;
                margin: 0 auto;
                padding: 0 20px;
            }

            .card {
                background: #fff;
                border-radius: 16px;
                overflow: hidden;
                transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
                height: 100%;
            }

            .card:hover {
                transform: translateY(-8px);
            }

            .card-inner {
                position: relative;
                display: flex;
                flex-direction: column;
                height: 100%;
            }

            .imgBox {
                position: relative;
                width: 100%;
                padding-top: 100%;
                background: #f1f1f1;
                overflow: hidden;
            }

            .product-image {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                object-fit: cover;
                transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
            }

            .card:hover .product-image {
                transform: scale(1.08);
            }

            .contentBox {
                padding: 24px;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                flex-grow: 1;
                background: #fff;
            }

            .content-wrapper {
                margin-bottom: 20px;
            }

            .contentBox h3 {
                color: #111;
                font-size: 1.25rem;
                font-weight: 600;
                margin: 0 0 12px 0;
                min-height: 64px;
                line-height: 1.3;
            }

            .product-meta {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-top: 8px;
            }

            .category {
                color: #666;
                font-size: 0.9rem;
            }

            .stock {
                color: #00a67c;
                font-size: 0.85rem;
                font-weight: 500;
            }

            .details-link {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 12px 0;
                color: #111;
                text-decoration: none;
                font-weight: 500;
                border-top: 1px solid #eee;
                transition: all 0.3s ease;
            }

            .details-link svg {
                transition: transform 0.3s ease;
            }

            .details-link:hover {
                color: #000;
            }

            .details-link:hover svg {
                transform: translateX(4px);
            }

            .view-all-container {
                display: flex;
                justify-content: center;
                margin-top: 60px;
            }

            .view-all-button {
                position: relative;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                padding: 16px 36px;
                color: #111;
                text-decoration: none;
                font-size: 1rem;
                font-weight: 500;
                letter-spacing: 0.5px;
                border: 2px solid #111;
                border-radius: 8px;
                background: transparent;
                transition: all 0.3s ease;
                min-width: 200px;
            }

            .view-all-button:hover {
                background: #111;
                color: #fff;
            }

            @media (max-width: 768px) {
                .product-section {
                    padding: 60px 20px;
                }

                .section-title h2 {
                    font-size: 2.2em;
                }

                .product-container {
                    gap: 25px;
                    padding: 0;
                }

                .contentBox {
                    padding: 20px;
                }

                .view-all-button {
                    width: 100%;
                    max-width: 300px;
                }
            }

            @media (min-width: 1600px) {
                .product-container {
                    grid-template-columns: repeat(5, 1fr);
                }
            }

.hero {
    background-image: url('https://globefarer.qodeinteractive.com/wp-content/uploads/2021/10/about-us-title-image-new.jpg');
    background-size: cover;
    background-position: center;
    height: 673px;
    display: flex;
    align-items: center;
    position: relative;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.hero-content {
    text-align: left;
    color: #fff;
    position: relative;
    z-index: 1;
    padding: 20px;
    max-width: 1340px;
    margin: 0 auto;
    width: 100%;
}

.hero h1 {
    font-size: 65px;
    font-weight: 800; /* ExtraBold */
    margin: 0;
    line-height: 1;
    letter-spacing: 0;
    padding-top: 113px;

    font-family: 'Manrope', sans-serif;
}

.hero p {
    font-size: 1.8rem;
    margin-bottom: 2.5rem;
    line-height: 1.6;
    font-weight: 300;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.cta-button {
    display: inline-block;
    padding: 18px 40px;
    background: linear-gradient(45deg, #007bff, #00bfff);
    color: #fff;
    text-decoration: none;
    border-radius: 50px;
    font-size: 1.2rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);
}

.cta-button:hover {
    background: linear-gradient(45deg, #00bfff, #007bff);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 123, 255, 0.4);
}

/* Service Navigation */
.service-nav {
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 50px;
}

.service-nav ul {
    list-style: none;
    display: flex;
    justify-content: space-between;
    padding: 0;
    margin: 0;
    max-width: 1200px;
    margin: 0 auto;
}

.service-nav li {
    flex: 1;
    text-align: center;
}

.service-nav a {
    display: block;
    padding: 20px 10px;
    text-decoration: none;
    color: #333;
    font-weight: 500;
    position: relative;
}

.service-nav a.active {
    color: #000;
}

.service-nav a.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: #D71920;
}

/* Service Content */
.service-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.service-section {
    display: none;
}

.service-section.active {
    display: block;
}

.service-grid {
    display: flex;
    gap: 30px;
    align-items: center;
    padding: 20px;
}

.service-images {
    flex: 1;
    max-width: 50%;
}

.service-info {
    flex: 1;
    max-width: 50%;
}

.vehicle-img {
    max-width: 100%;
    height: auto;
}

.service-info h2 {
    font-size: 2.5em;
    margin-bottom: 20px;
    font-weight: bold;
}

.service-info p {
    color: #666;
    line-height: 1.6;
    margin-bottom: 30px;
}

.view-more {
    display: flex;
    align-items: center;
    gap: 15px;
    text-decoration: none;
    color: #333;
    position: relative;
    padding-top: 20px;
}

.view-more::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #333;
}

.plus-icon {
    width: 40px;
    height: 40px;
    background-color: #D71920;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: bold;
    color: #fff;
    transition: transform 0.3s ease;
}

.view-more:hover .plus-icon {
    transform: rotate(90deg);
}

.cta-text {
    font-weight: 500;
}

@media (max-width: 768px) {
    .service-grid {
        flex-direction: column;
    }

    .service-images {
        order: 1;
        width: 100%;
        margin-bottom: 20px;
    }

    .service-info {
        order: 2;
        width: 100%;
    }
}

@media (max-width: 768px) {
    .service-grid {
        flex-direction: column;
        text-align: left;
        padding: 30px 20px;
    }

    .service-images {
        order: 1;
        width: 100%;
        max-width: 100%;
        margin-bottom: 30px;
    }

    .service-info {
        order: 2;
        width: 100%;
        max-width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 0 15px;
    }

    .service-info h2 {
        font-size: 32px;
        margin-bottom: 20px;
        line-height: 1.2;
        width: 100%;
    }

    .service-info p {
        font-size: 16px;
        margin-bottom: 30px;
        color: #666;
        max-width: 600px;
        width: 100%;
    }

    .service-cta {
        margin-top: 20px;
        width: 100%;
    }

    .view-more {
        display: flex;
        flex-direction: row;
        align-items: center;
        text-decoration: none;
        color: #333;
        gap: 15px;
    }

    .plus-icon {
        width: 45px;
        height: 45px;
        background: #D71920;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        color: #fff;
        flex-shrink: 0;
    }

    .cta-text {
        text-align: left;
        font-size: 14px;
        line-height: 1.4;
    }
}

.testimonial-section {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
}

.testimonial-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.testimonial-bg .bg-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.testimonial-bg .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.testimonial-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    padding: 0 50px;
    margin-left: 10%;
    color: #fff;
}

.quote-icon {
    margin-bottom: 30px;
}

.quote-icon svg {
    width: 75px;
    height: auto;
    fill: transparent;
    stroke: #ffffff;
    stroke-width: 1px;
    opacity: 0.8;
}

@media (max-width: 768px) {
    .quote-icon svg {
        width: 55px;
    }
}

.testimonial-content blockquote {
    font-size: 42px;
    line-height: 1.3;
    font-weight: 500; /* Medium */
    margin: 0 0 40px 0;
    font-family: 'Sarabun', sans-serif;
    width: 65%;

    padding: 0;
}

.client-info {
    display: flex;
    align-items: center;
    gap: 15px;
}

.client-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid #D71920;
}

.client-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.client-details {
    display: flex;
    flex-direction: column;
}

.client-status {
    font-size: 14px;
    color: #D71920;
    margin-bottom: 5px;
}

.client-name {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
}

@media (max-width: 768px) {
    .testimonial-section {
        height: auto;
        min-height: 100vh;
        padding: 0;
        align-items: flex-end;
    }

    .testimonial-content {
        margin-left: 20px;
        padding: 0 20px 80px 20px;
        width: 100%;
    }

    .testimonial-content blockquote {
        font-size: 28px;
        margin-bottom: 30px;
        width: 100%;
    }

    .client-avatar {
        width: 50px;
        height: 50px;
    }

    .client-status {
        font-size: 12px;
    }

    .client-name {
        font-size: 16px;
    }
}

.section-sayac {
    background-color: #D71920;
    padding: 100px 0;
    position: relative;
}

.sayac-container {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    padding: 0 40px;
}

.sayac-item {
    flex: 1;
    text-align: left;
    position: relative;
    padding-left: 30px;
}

.sayac-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 80%;
    width: 1px;
    background-color: rgba(255, 255, 255, 0.3);
}

.sayac-number {
    font-size: 55px;
    font-weight: 800; /* ExtraBold */
    margin: 0;
    font-family: 'Manrope', sans-serif;
    color: #fff;
    line-height: 1;
}

.sayac-title {
    font-size: 14px;
    margin: 0 0 15px 0;
    color: #fff;
    font-weight: 500;
    opacity: 0.8;
}

@media (max-width: 1200px) {
    .sayac-number {
        font-size: 60px;
    }

    .sayac-title {
        font-size: 16px;
    }
}

@media (max-width: 768px) {
    .section-sayac {
        padding: 60px 0;
    }

    .sayac-container {
        flex-wrap: wrap;
        gap: 40px;
        padding: 0 20px;
    }

    .sayac-item {
        flex: 0 0 calc(50% - 20px);
        padding-left: 20px;
    }

    .sayac-number {
        font-size: 48px;
    }

    .sayac-title {
        font-size: 15px;
        margin: 0 0 10px 0;
    }
}

@media (max-width: 480px) {
    .section-sayac {
        padding: 40px 0;
    }

    .sayac-container {
        flex-direction: column;
        gap: 30px;
    }

    .sayac-item {
        flex: 0 0 100%;
    }

    .sayac-item::before {
        display: none;
    }
}

.section-hakkimizda-2 {
    padding: 100px 0;
    background: #fff;
    position: relative;
}

.hakkimizda-container {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    padding: 0 40px;
    align-items: center;
}

.hakkimizda-content {
    position: relative;
}

.hakkimizda-content::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 135%;
    width: 1px;
    background-color: rgba(0, 0, 0, 0.606);
}

.hakkimizda-content h2 {
    font-size: 48px;
    font-weight: 700; /* Bold */
    margin: 0 0 30px;
    line-height: 1.2;
    color: #000;
    font-family: 'Manrope', sans-serif;
}

.hakkimizda-content p {
    font-size: 16px;
    width: 90%;
    line-height: 1.6;
    color: #666;
    margin: 0 0 40px;
}

.hakkimizda-image {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 500px;
}

.hakkimizda-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.hakkimizda-cta .view-more {
    display: flex;
    align-items: center;
    text-decoration: none;
    gap: 15px;
}

.hakkimizda-cta .plus-icon {
    width: 60px;
    height: 60px;
    background: #D71920;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #fff;
}

.hakkimizda-cta .cta-text {
    font-size: 14px;
    color: #000;
    line-height: 1.4;
}

@media (max-width: 1024px) {
    .hakkimizda-content h2 {
        font-size: 36px;
    }
}

@media (max-width: 768px) {
    .section-hakkimizda-2 {
        padding: 60px 0;
    }

    .hakkimizda-container {
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 0 20px;
    }

    .hakkimizda-content {
        padding-right: 0;
        padding-left: 20px;
    }

    .hakkimizda-content::after {
        height: 100%;
    }

    .hakkimizda-content h2 {
        font-size: 32px;
        margin-bottom: 20px;
    }

    .hakkimizda-content p {
        margin-bottom: 30px;
    }

    .hakkimizda-image {
        min-height: 300px;
        order: -1;
    }
}

@media (max-width: 480px) {
    .section-hakkimizda-2 {
        padding: 40px 0;
    }

    .hakkimizda-content h2 {
        font-size: 28px;
    }

    .hakkimizda-cta .plus-icon {
        width: 50px;
        height: 50px;
        font-size: 20px;
    }
}

/* Dropdown Menu Styles */
.main-nav .dropdown {
    position: relative;
}

.main-nav .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: #ffffff;
    min-width: 280px;
    padding: 0.5rem 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
    border-radius: 0;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    z-index: 1000;
}

.main-nav .dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.main-nav .dropdown-menu li {
    padding: 0;
    margin: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.main-nav .dropdown-menu li:last-child {
    border-bottom: none;
}

.main-nav .dropdown-menu a {
    padding: 1rem 1.5rem;
    color: #333;
    display: block;
    font-size: 0.95em;
    font-weight: 400;
    position: relative;
    text-decoration: none;
}

.main-nav .dropdown-menu a:hover {
    color: #333;
}

/* Dropdown indicator */
.main-nav .dropdown > a::after {
    font-size: 1.4em;
    margin-left: 0.3em;
    display: inline-block;
    vertical-align: middle;
    transition: transform 0.3s ease;
    font-weight: 300;
    line-height: 0.8;
}

.main-nav .dropdown:hover > a::after {
    transform: rotate(45deg);
}

/* Ana menü hover efektini kaldır */
.main-nav .dropdown > a:hover {
    background: transparent;
}

/* Modern Dropdown Styles */
.main-nav .dropdown {
    position: relative;
}

.main-nav .dropdown-toggle {
    position: relative;
    padding-right: 20px;
}

.main-nav .dropdown-toggle::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid black;
    transform: translateY(-50%);
    transition: transform 0.3s ease;
}

.main-nav .dropdown:hover .dropdown-toggle::after {
    border-top: none;
    border-bottom: 5px solid black;
    transform: translateY(-50%);
}

.main-nav .dropdown-menu {
    position: absolute;
    top: 100%;
    left: -20px;
    background: #fff;
    min-width: 250px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s ease;
    box-shadow: 0 10px 40px rgba(0,0,0,0.08);
    border-radius: 12px;
    padding: 16px;
    z-index: 1000;
}

.main-nav .dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(10px);
}

.dropdown-inner {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dropdown-item {
    display: flex;
    flex-direction: column;
    padding: 12px 16px;
    text-decoration: none;
    transition: background-color 0.2s ease;
    border-radius: 8px;
}

.dropdown-item:hover,
.dropdown-item.active {
    background-color: #f5f5f5;
}

.item-title {
    color: #1a1a1a;
    font-weight: 500;
    font-size: 15px;
    margin-bottom: 4px;
}

.item-desc {
    color: #666;
    font-size: 13px;
    font-weight: normal;
}

.dropdown-item:hover .item-title {
    color: #000;
}

.dropdown-item:hover .item-desc {
    color: #444;
}

/* Dropdown içindeki before elementini engelle */
.main-nav .dropdown-menu .dropdown-item::before,
.main-nav .dropdown-menu .item-title::before,
.main-nav .dropdown-menu .item-desc::before {
    display: none !important;
    content: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Modern Dropdown Styles */
.main-nav .dropdown {
    position: relative;
}

.main-nav .dropdown-item::before {
    display: none !important;
}

/* Modern Dropdown Styles */
.main-nav .dropdown {
    position: relative;
}

.main-nav .dropdown-toggle {
    position: relative;
    padding-right: 20px;
}

.main-nav .dropdown-toggle:hover {
    color: #f5f5f5;
    transition: color 0.2s ease;
}

.main-nav .dropdown.show .dropdown-toggle {
    color: #f5f5f5;
}

.main-nav .dropdown-menu {
    position: absolute;
    top: 100%;
    left: -20px;
    background: #fff;
    min-width: 320px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s ease;
    box-shadow: 0 10px 40px rgba(0,0,0,0.08);
    border-radius: 12px;
    padding: 16px;
    z-index: 1000;
}

.main-nav .nav-link:hover {
    color: #D71920;
}

.main-nav .dropdown-toggle.nav-link {
    transition: color 0.3s ease;
}

/* Modern Dropdown Styles */
.main-nav .dropdown {
    position: relative;
}

.dropdown-toggle {
    color: #fff;
    transition: color 0.3s ease;
}

.dropdown-toggle:hover {
    color: #D71920 !important;
}

/* Modern Dropdown Styles */
.main-nav .dropdown {
    position: relative;
}

/* Mobil Menü Stilleri */
.mobile-nav {
    padding: 20px 0;
}

.mobile-link {
    display: flex;
    align-items: center;
    padding: 15px 25px;
    text-decoration: none;
    color: #fff;
    transition: all 0.3s ease;
}

.mobile-link .number {
    font-size: 14px;
    opacity: 0.5;
    margin-right: 15px;
    font-weight: 500;
}

.mobile-link .text {
    font-size: 16px;
    font-weight: 500;
}

.mobile-arrow {
    margin-left: auto;
    width: 10px;
    height: 10px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(45deg);
    transition: transform 0.3s ease;
}

.mobile-dropdown.active .mobile-arrow {
    transform: rotate(-135deg);
}

/* Basit Mobil Submenu Tasarımı */
.mobile-submenu {
    display: none;
    margin: 10px 25px 15px 45px;
    border-radius: 12px;
    padding: 15px 0;
    overflow: hidden;
}

.mobile-dropdown.active .mobile-submenu {
    display: block;
    animation: slideDown 0.3s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.submenu-item {
    display: block;
    padding: 14px 20px;
    text-decoration: none;
    transition: all 0.2s ease;
    border-radius: 0;
}

.submenu-item .item-title {
    display: block;
    color: #000;
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 4px;
    transition: color 0.2s ease;
}

.submenu-item .item-desc {
    display: block;
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
    line-height: 1.4;
    transition: color 0.2s ease;
}

/* Map Section Stilleri */
.map-section {
    padding: 0;
    background-color: #f5f5f5;
}

.map-container {
    position: relative;
    width: 100%;
    height: 600px;
    overflow: hidden;
}

.map-container iframe {
    width: 100%;
    height: 100%;
    border: none;
    transition: filter 0.3s ease;
}

.map-container:hover iframe {
    filter: saturate(1.2) brightness(1.1);
}

/* Responsive düzenlemeler */
@media (max-width: 768px) {
    .map-container {
        height: 450px;
    }
}

@media (max-width: 480px) {
    .map-container {
        height: 400px;
    }
}





/* Products Page Specific Styles */
.products-hero {
    height: 70vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, rgba(0,0,0,0.8), rgba(0,0,0,0.4));
    z-index: 2;
}



.hero-subtitle {
    display: inline-block;
    background: #D71920;
    color: #fff;
    padding: 8px 20px;
    border-radius: 25px;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 20px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.hero-text h1 {
    font-size: 4rem;
    font-weight: 800; /* ExtraBold */
    margin-bottom: 20px;
    font-family: 'Manrope', sans-serif;
}

.hero-text p {
    font-size: 1.2rem;
    line-height: 1.6;
    opacity: 0.9;
    max-width: 600px;
    margin: 0 auto;
}

/* Product Categories Section - Premium Design */
.product-categories-section {
    padding: 120px 0 140px;
    background: linear-gradient(135deg, #fafbfc 0%, #ffffff 50%, #f8fafc 100%);
    position: relative;
    overflow: hidden;
}

.product-categories-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 20% 80%, rgba(255, 215, 0, 0.03) 0%, transparent 50%),
                radial-gradient(circle at 80% 20%, rgba(59, 130, 246, 0.03) 0%, transparent 50%);
    pointer-events: none;
}

.categories-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
    position: relative;
    z-index: 2;
}

.section-header {
    text-align: center;
    margin-bottom: 90px;
    position: relative;
}

    .section-subtitle {
        display: inline-flex;
        align-items: center;
        background: linear-gradient(135deg, #D71920, #b71c1c);
        color: #ffffff;
        padding: 12px 28px;
        border-radius: 50px;
        font-size: 13px;
        font-weight: 800;
        margin-bottom: 25px;
        letter-spacing: 2px;
        text-transform: uppercase;
        box-shadow: 0 8px 25px rgba(215, 25, 32, 0.2);
        position: relative;
        overflow: hidden;
    }

.section-subtitle::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: left 0.6s ease;
}

.section-subtitle:hover::before {
    left: 100%;
}

.section-header h2 {
    font-size: 3.8rem;
    font-weight: 800; /* ExtraBold */
    background: linear-gradient(135deg, #1f2937 0%, #374151 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 25px;
    font-family: 'Manrope', sans-serif;
    line-height: 1.1;
    letter-spacing: -1px;
}

.section-header p {
    font-size: 1.25rem;
    color: #6b7280;
    max-width: 680px;
    margin: 0 auto;
    line-height: 1.7;
    font-weight: 400;
}

.categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    gap: 40px;
    margin-top: 60px;
}

.category-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.category-card {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

@media (max-width: 480px) {
    .macstoff-blog-sayfasi-baslik {
        font-size: 1.5rem;
    }
}

/* Blog Detay Sayfası Stilleri */
.macstoff-blog-detay-sayfa-wrapper {
    font-family: 'Manrope', sans-serif;
    background-color: #ffffff;
    color: #000000;
    margin: 0;
    padding: 0;
}

.macstoff-blog-detay-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}

/* --- Site Header --- */
.macstoff-blog-detay-site-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 40px 0;
}

.macstoff-blog-detay-site-header .macstoff-blog-detay-logo {
    font-size: 1.5rem;
    font-weight: 700;
    font-family: 'Poppins', sans-serif;
    text-decoration: none;
    color: #000000;
}

.macstoff-blog-detay-page-intro h1 {
    font-family: 'Poppins', sans-serif;
    font-size: 6rem;
    font-weight: 800;
    margin: 0;
    line-height: 1.05;
    letter-spacing: -0.04em;
}
.macstoff-blog-detay-page-intro p {
    font-size: 1.125rem;
    color: #8A8A8A;
    max-width: 500px;
    margin: 20px 0 0 0;
    line-height: 1.6;
}

/* --- Ana Makale Alanı --- */
.macstoff-blog-detay-article-main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 0;
}

.macstoff-blog-detay-article-main .macstoff-blog-detay-main-image {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 40px;
    border: 3px solid #000000;
    border-radius: 10px;
}

.macstoff-blog-detay-article-main .macstoff-blog-detay-meta-info {
    display: flex;
    align-items: center;
    gap: 32px;
    margin-bottom: 32px;
    color: #8A8A8A;
    font-size: 0.95rem;
}
.macstoff-blog-detay-article-main .macstoff-blog-detay-meta-item {
    display: flex;
    align-items: center;
    gap: 10px;
}
.macstoff-blog-detay-article-main .macstoff-blog-detay-meta-item svg {
    width: 20px;
    height: 20px;
    stroke-width: 1.5;
    color: #b0b0b0;
}
.macstoff-blog-detay-article-main .macstoff-blog-detay-meta-author a {
    color: #8A8A8A;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}


.macstoff-blog-detay-article-main .macstoff-blog-detay-article-title {
    font-family: 'Poppins', sans-serif;
    font-size: 3rem;
    font-weight: 700;
    margin: 0 0 40px 0;
    line-height: 1.25;
    color: #000000;
}

.macstoff-blog-detay-article-main .macstoff-blog-detay-article-content {
    font-size: 1.125rem;
    line-height: 1.8;
    color: #2b2b2b;
}

.macstoff-blog-detay-article-main .macstoff-blog-detay-article-content p {
    margin: 0 0 1.5em 0;
}

/* --- Önerilen Yazılar --- */


.macstoff-blog-detay-also-like-section h2 {
    font-family: 'Poppins', sans-serif;
    font-size: 3rem;
    font-weight: 700;
    margin: 0;
    color: #000000;
}
.macstoff-blog-detay-also-like-section .macstoff-blog-detay-subtitle {
    color: #8A8A8A;
    font-size: 1.1rem;
    max-width: 500px;
    margin-top: 15px;
}

.macstoff-blog-detay-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 50px;
}

.macstoff-blog-detay-like-card {
    padding: 30px;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
}
.macstoff-blog-detay-like-card.macstoff-blog-detay-standard {
    border-top: 2px solid #F0F0F0;
}
.macstoff-blog-detay-like-card.macstoff-blog-detay-highlighted {
    background-color: #3444F1;
    color: white;
    border-radius: 6px;
}

.macstoff-blog-detay-like-card .macstoff-blog-detay-card-category {
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 20px;
    opacity: 0.8;
}

.macstoff-blog-detay-like-card .macstoff-blog-detay-card-title {
    font-family: 'Poppins', sans-serif;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 20px;
    flex-grow: 1;
}

.macstoff-blog-detay-like-card .macstoff-blog-detay-card-date {
    font-size: 0.85rem;
    font-weight: 500;
    opacity: 0.8;
}

/* --- Site Footer --- */
.macstoff-blog-detay-site-footer {
    background-color: #000000;
    color: #FFFFFF;
    padding: 80px 0;
}

.macstoff-blog-detay-footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 40px;
}

.macstoff-blog-detay-footer-grid h4 {
    font-family: 'Poppins', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 20px 0;
}
.macstoff-blog-detay-footer-grid ul { list-style: none; padding: 0; margin: 0; }
.macstoff-blog-detay-footer-grid li { margin-bottom: 10px; }
.macstoff-blog-detay-footer-grid li a {
    color: #8A8A8A;
    text-decoration: none;
    font-size: 0.95rem;
}
.macstoff-blog-detay-footer-logo {
    font-size: 1.8rem;
    font-weight: 700;
    font-family: 'Poppins', sans-serif;
    color: #FFFFFF;
    text-decoration: none;
}

/* --- Mobil Uyum --- */
@media (max-width: 992px) {
    .macstoff-blog-detay-cards-grid, .macstoff-blog-detay-footer-grid { grid-template-columns: 1fr; }
    .macstoff-blog-detay-footer-grid { text-align: center; }
}
@media (max-width: 768px) {
    .macstoff-blog-detay-container { padding: 0 20px; }
    .macstoff-blog-detay-page-intro h1 { font-size: 3.5rem; }
    .macstoff-blog-detay-article-main .macstoff-blog-detay-article-title { font-size: 2rem; }
    .macstoff-blog-detay-also-like-section h2 { font-size: 2.2rem; }
}

/* --- Viessmann Link Stili --- */
.vissman-link {
    background-color: #e31e24 !important;
    color: white !important;
    border-color: #e31e24 !important;
    transition: all 0.3s ease;
}

.vissman-link:hover {
    background-color: #c41a1f !important;
    border-color: #c41a1f !important;
    color: white !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(227, 30, 36, 0.3);
}

.vissman-link i {
    margin-right: 8px;
}

/* --- Product Link Stili --- */
.product-link {
    display: block;
    text-decoration: none;
    color: inherit;
    width: 100%;
    height: 100%;
    transition: all 0.3s ease;
}

.product-link:hover {
    text-decoration: none;
    color: inherit;
}

.product-item .product-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    height: 100%;
    width: 100%;
}

/* === KATEGORİ ÜRÜNLERİ === */
.category-products {
    width: 100%;
    margin-top: 20px;
    max-height: 300px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 #f1f5f9;
}

.category-products::-webkit-scrollbar {
    width: 6px;
}

.category-products::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 3px;
}

.category-products::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

.category-products::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

.category-product-item {
    display: flex;
    gap: 12px;
    padding: 12px;
    border-radius: 12px;
    margin-bottom: 8px;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    transition: all 0.3s ease;
}

.category-product-item:hover {
    background: rgba(255, 255, 255, 0.9);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(47, 117, 179, 0.12);
}

.category-product-link {
    display: flex;
    gap: 12px;
    width: 100%;
    text-decoration: none;
    color: inherit;
}

.category-product-link:hover {
    text-decoration: none;
    color: inherit;
}

.category-product-image {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    background: #f8fafc;
}

.category-product-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.category-product-item:hover .category-product-image img {
    transform: scale(1.1);
}

.category-product-info {
    flex: 1;
    min-width: 0;
}

.category-product-info h5 {
    font-size: 0.9rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 4px 0;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.category-product-info p {
    font-size: 0.75rem;
    color: #64748b;
    margin: 0 0 6px 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.category-product-info .product-model {
    font-size: 0.7rem;
    color: var(--primary-color);
    font-weight: 500;
    background: rgba(47, 117, 179, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
    display: inline-block;
}

/* Responsive düzenlemeler */
@media (max-width: 1024px) {
    .category-products {
        max-height: 250px;
    }

    .category-product-image {
        width: 50px;
        height: 50px;
    }

    .category-product-info h5 {
        font-size: 0.85rem;
    }

    .category-product-info p {
        font-size: 0.7rem;
    }
}

@media (max-width: 768px) {
    .category-products {
        max-height: 200px;
    }

    .category-product-item {
        padding: 8px;
        gap: 8px;
    }

    .category-product-image {
        width: 40px;
        height: 40px;
    }

    .category-product-info h5 {
        font-size: 0.8rem;
    }

    .category-product-info p {
        font-size: 0.65rem;
        -webkit-line-clamp: 1;
    }

    .category-product-info .product-model {
        font-size: 0.65rem;
        padding: 1px 4px;
    }
}

/* === CAPTCHA STİLLERİ === */
.captcha-group {
    margin-bottom: 20px;
}

.captcha-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text-color);
    font-size: 14px;
}

.captcha-question {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    margin-bottom: 8px;
}

.captcha-text {
    font-size: 18px;
    font-weight: 600;
    color: var(--primary-color);
    min-width: 100px;
}

.captcha-question input[type="number"] {
    flex: 1;
    max-width: 100px;
    padding: 10px 15px;
    border: 1px solid #ced4da;
    border-radius: 5px;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    background-color: white;
}

.captcha-question input[type="number"]:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(47, 117, 179, 0.1);
}

.error-text {
    color: #dc3545;
    font-size: 12px;
    margin-top: 5px;
    display: block;
}

@media (max-width: 768px) {
    .captcha-question {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }

    .captcha-text {
        min-width: auto;
        font-size: 16px;
    }

    .captcha-question input[type="number"] {
        max-width: 150px;
    }
}

/* === CHECKBOX STİLLERİ === */
.checkbox-group {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 5px;
}

.checkbox-group input[type="checkbox"] {
    margin-top: 2px;
    width: 16px;
    height: 16px;
    accent-color: var(--primary-color);
}

.checkbox-group label {
    font-size: 14px;
    line-height: 1.4;
    color: var(--text-color);
    margin: 0;
}

.kvkk-link {
    color: var(--primary-color);
    text-decoration: underline;
}

.kvkk-link:hover {
    color: #1e5a8a;
}