/* Hero Slider */



































.hero-slider-section {



































    padding: 30px 0;



































    background-color: #f8f9fa;



































}



































.hero-slider {



































    position: relative;



































    width: 100%;



































    height: 500px;



































    border-radius: 20px;



































    overflow: hidden;



































    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);



































}



































.hero-slide {



































    position: absolute;



































    top: 0;



































    left: 0;



































    width: 100%;



































    height: 100%;



































    opacity: 0;



































    visibility: hidden;



































    transition: opacity 0.6s ease, visibility 0.6s ease;



































}



































.hero-slide.active {



































    opacity: 1;



































    visibility: visible;



































}



































.hero-slide img {



































    width: 100%;



































    height: 100%;



































    object-fit: cover;



































}



































.hero-slide::after {



































    content: '';



































    position: absolute;



































    top: 0;



































    left: 0;



































    width: 100%;



































    height: 100%;



































    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.6) 100%);



































    z-index: 1;



































}



































.slide-content {



































    position: absolute;



































    top: 50%;



































    left: 50%;



































    transform: translate(-50%, -50%);



































    color: white;



































    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.8);



































    animation: slideDown 0.8s ease;



































    z-index: 2;



































    text-align: center;



































    width: 90%;



































    max-width: 800px;



































}



































@keyframes slideDown {



































    from {



































        opacity: 0;



































        transform: translate(-50%, calc(-50% - 30px));



































    }



































    to {



































        opacity: 1;



































        transform: translate(-50%, -50%);



































    }



































}



































.slide-content h2 {



































    font-size: 48px;



































    font-weight: 700;



































    margin-bottom: 10px;



































    color: white;



































}



































.slide-content p {



































    font-size: 20px;



































    margin-bottom: 25px;



































    opacity: 0.95;



































}



































.slide-btn {



































    display: inline-block;



































    padding: 14px 32px;



































    background-color: var(--primary-green);



































    color: white;



































    text-decoration: none;



































    border-radius: 30px;



































    font-weight: 600;



































    font-size: 16px;



































    transition: all 0.3s ease;



































    box-shadow: 0 4px 15px rgba(62, 166, 53, 0.4);



































}



































.slide-btn:hover {



































    background-color: var(--dark-green);



































    transform: translateY(-2px);



































    box-shadow: 0 6px 20px rgba(62, 166, 53, 0.6);



































}



































/* Slider Arrows */



































.slider-arrow {



































    position: absolute;



































    top: 50%;



































    transform: translateY(-50%);



































    width: 55px;



































    height: 55px;



































    background: linear-gradient(135deg, var(--primary-green), var(--dark-green));



































    border: 3px solid white;



































    border-radius: 50%;



































    cursor: pointer;



































    display: flex;



































    align-items: center;



































    justify-content: center;



































    transition: all 0.3s ease;



































    z-index: 100;



































    color: white;



































    box-shadow: 0 4px 20px rgba(62, 166, 53, 0.4);



































}



































.slider-arrow:hover {



































    background: linear-gradient(135deg, var(--dark-green), var(--primary-green));



































    transform: translateY(-50%) scale(1.15);



































    box-shadow: 0 6px 28px rgba(62, 166, 53, 0.6);



































}



































.slider-prev {



































    left: 20px;



































}



































.slider-next {



































    right: 20px;



































}



































/* Slider Dots */



































.slider-dots {



































    position: absolute;



































    bottom: 20px;



































    left: 50%;



































    transform: translateX(-50%);



































    display: flex;



































    gap: 10px;



































    z-index: 10;



































}



































.slider-dot {



































    width: 12px;



































    height: 12px;



































    border-radius: 50%;



































    background-color: rgba(255, 255, 255, 0.5);



































    border: 2px solid white;



































    cursor: pointer;



































    transition: all 0.3s ease;



































    padding: 0;



































}



































.slider-dot:hover {



































    background-color: rgba(255, 255, 255, 0.8);



































    transform: scale(1.2);



































}



































.slider-dot.active {



































    background-color: var(--primary-green);



































    border-color: var(--primary-green);



































    width: 30px;



































    border-radius: 6px;



































}



































/* Responsive */



































@media (max-width: 768px) {



































    .hero-slider {



































        height: 350px;



































        border-radius: 15px;



































    }



































    .slide-content {



































        width: calc(100% - 100px);



































    }



































    .slide-content h2 {



































        font-size: 28px;



































    }



































    .slide-content p {



































        font-size: 15px;



































    }



































    .slide-btn {



































        padding: 12px 24px;



































        font-size: 14px;



































    }



































    .slider-arrow {



































        width: 45px !important;



































        height: 45px !important;



































    }



































}



































@media (max-width: 480px) {



































    .hero-slider {



































        height: 280px;



































    }



































    .slide-content {



































        width: calc(100% - 80px);



































    }



































    .slide-content h2 {



































        font-size: 22px;



































    }



































    .slide-content p {



































        font-size: 13px;



































        margin-bottom: 15px;



































    }



































    .slider-arrow {



































        width: 40px !important;



































        height: 40px !important;



































    }



































    .slider-prev {



































        left: 5px !important;



































    }



































    .slider-next {



































        right: 5px !important;



































    }



































}



































/* Featured Products Section */



































.featured-products-section {



































    padding: 50px 0;



































    background-color: #ffffff;



































}



































.section-header {



































    text-align: center;



































    margin-bottom: 40px;



































}



































.section-title {



































    font-size: 36px;



































    font-weight: 700;



































    color: var(--text-dark);



































    margin-bottom: 10px;



































}



































.section-subtitle {



































    font-size: 16px;



































    color: #666;



































}



































/* Products Grid */



































.products-grid {



































    display: grid;



































    grid-template-columns: repeat(5, 1fr);



































    gap: 25px;



































}



































/* Product Card */



































.product-card {



































    background: white;



































    border-radius: 16px;



































    overflow: hidden;



































    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);



































    transition: all 0.3s ease;



































    position: relative;



































    text-decoration: none;



































    color: inherit;



































    display: block;



































}



































.product-card:hover {



































    transform: translateY(-8px);



































    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);



































}



































/* Product Badge */



































.product-badge {



































    position: absolute;



































    top: 12px;



































    left: 12px;



































    background-color: #ff4444;



































    color: white;



































    padding: 6px 12px;



































    border-radius: 20px;



































    font-size: 12px;



































    font-weight: 600;



































    z-index: 10;



































}



































.product-badge.hot {



































    background-color: #ff6b35;



































}



































.product-badge.new {



































    background-color: var(--primary-green);



































}



































/* Product Image */



































.product-image {



































    position: relative;



































    width: 100%;



































    height: 220px;



































    overflow: hidden;



































    background-color: #f8f9fa;



































}



































.product-image img {



































    width: 100%;



































    height: 100%;



































    object-fit: contain;



































    transition: transform 0.3s ease;



































}



































.product-card:hover .product-image img {



































    transform: scale(1.1);



































}



































/* Quick Add Button */



































.quick-add-btn {



































    position: absolute;



































    bottom: 12px;



































    right: 12px;



































    width: 44px;



































    height: 44px;



































    background-color: var(--primary-green);



































    border: none;



































    border-radius: 50%;



































    color: white;



































    cursor: pointer;



































    display: flex;



































    align-items: center;



































    justify-content: center;



































    opacity: 0;



































    transform: translateY(10px);



































    transition: all 0.3s ease;



































    box-shadow: 0 4px 12px rgba(62, 166, 53, 0.4);



































}



































.product-card:hover .quick-add-btn {



































    opacity: 1;



































    transform: translateY(0);



































}



































.quick-add-btn:hover {



































    background-color: var(--dark-green);



































    transform: scale(1.1);



































}



































/* Quick Favorite Button */



































.quick-fav-btn {



































    position: absolute;



































    top: 12px;



































    right: 12px;



































    width: 36px;



































    height: 36px;



































    background: white;



































    border: none;



































    border-radius: 50%;



































    display: flex;



































    align-items: center;



































    justify-content: center;



































    cursor: pointer;



































    z-index: 2;



































    box-shadow: 0 2px 8px rgba(0,0,0,0.15);



































    transition: all 0.2s ease;



































    color: #666;



































    opacity: 0;



































    transform: translateY(-10px);



































}



































.product-card:hover .quick-fav-btn {



































    opacity: 1;



































    transform: translateY(0);



































}



































.quick-fav-btn:hover {



































    transform: scale(1.1);



































    color: #e91e63;



































}



































.quick-fav-btn.active {



































    color: #e91e63;



































    background: #fff0f5;



































}



































.quick-fav-btn.active svg {



































    fill: #e91e63;



































}



































/* Dairy Favorite Button */



































.dairy-fav-btn {



































    position: absolute;



































    top: 8px;



































    right: 8px;



































    width: 30px;



































    height: 30px;



































    background: white;



































    border: none;



































    border-radius: 50%;



































    display: flex;



































    align-items: center;



































    justify-content: center;



































    cursor: pointer;



































    z-index: 2;



































    box-shadow: 0 2px 6px rgba(0,0,0,0.15);



































    transition: all 0.2s ease;



































    color: #666;



































}



































.dairy-fav-btn:hover {



































    transform: scale(1.1);



































    color: #e91e63;



































}



































.dairy-fav-btn.active {



































    color: #e91e63;



































    background: #fff0f5;



































}



































.dairy-fav-btn.active svg {



































    fill: #e91e63;



































}



































/* Product Info */



































.product-info {



































    padding: 16px;



































}



































.product-name {



































    font-size: 16px;



































    font-weight: 600;



































    color: var(--text-dark);



































    margin-bottom: 6px;



































    overflow: hidden;



































    text-overflow: ellipsis;



































    white-space: nowrap;



































}



































.product-desc {



































    font-size: 13px;



































    color: #666;



































    margin-bottom: 12px;



































}



































/* Toplu Satış İndirim Linki */



































.bulk-discount-link {



































    display: flex;



































    align-items: center;



































    gap: 6px;



































    padding: 6px 10px;



































    margin-bottom: 10px;



































    background: linear-gradient(135deg, #667eea15 0%, #764ba215 100%);



































    border: 1px solid #667eea30;



































    border-radius: 6px;



































    font-size: 11px;



































    color: #5a4fcf;



































    text-decoration: none;



































    transition: all 0.3s ease;



































}



































.bulk-discount-link:hover {



































    background: linear-gradient(135deg, #667eea25 0%, #764ba225 100%);



































    border-color: #667eea50;



































    transform: scale(1.02);



































}



































.bulk-discount-link i {



































    font-size: 12px;



































    color: #3ea635;



































}



































.product-price {



































    display: flex;



































    align-items: center;



































    gap: 8px;



































}



































.price-old {



































    font-size: 14px;



































    color: #999;



































    text-decoration: line-through;



































}



































.price-new {



































    font-size: 20px;



































    font-weight: 700;



































    color: var(--primary-green);



































}



































/* Responsive */



































@media (max-width: 1200px) {



































    .products-grid {



































        grid-template-columns: repeat(4, 1fr);



































    }



































}



































@media (max-width: 992px) {



































    .products-grid {



































        grid-template-columns: repeat(3, 1fr);



































    }



































}



































@media (max-width: 768px) {



































    .featured-products-section {



































        padding: 40px 0;



































    }



































    .section-title {



































        font-size: 28px;



































    }



































    .products-grid {



































        grid-template-columns: repeat(2, 1fr);



































        gap: 10px;



































    }



































    .product-card {



































        border-radius: 12px;



































    }



































    .product-image {



































        height: 150px;



































    }



































    .product-info {



































        padding: 10px;



































    }



































    .product-name {



































        font-size: 13px;



































        margin-bottom: 6px;



































        -webkit-line-clamp: 2;



































    }



































    .product-price {



































        font-size: 15px;



































    }



































    .product-old-price {



































        font-size: 11px;



































    }



































    .product-badge {



































        top: 6px;



































        left: 6px;



































        padding: 4px 8px;



































        font-size: 10px;



































    }



































    .quick-add-btn,



































    .quick-fav-btn {



































        width: 32px;



































        height: 32px;



































    }



































}



































@media (max-width: 480px) {



































    .section-title {



































        font-size: 22px;



































    }



































    .products-grid {



































        gap: 8px;



































    }



































    .product-image {



































        height: 130px;



































    }



































    .product-info {



































        padding: 8px;



































    }



































    .product-name {



































        font-size: 12px;



































    }



































    .product-price {



































        font-size: 14px;



































    }



































}



































/* Category Boxes Section */



































.category-boxes-section {



































    padding: 50px 0;



































    background-color: #f8f9fa;



































}



































.category-boxes-grid {



































    display: grid;



































    grid-template-columns: repeat(6, 1fr);



































    gap: 20px;



































}



































/* Category Box */



































.category-box {



































    background: white;



































    border-radius: 16px;



































    padding: 30px 20px;



































    text-align: center;



































    text-decoration: none;



































    transition: all 0.3s ease;



































    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);



































    position: relative;



































    overflow: hidden;



































}



































.category-box::before {



































    content: '';



































    position: absolute;



































    top: 0;



































    left: 0;



































    width: 100%;



































    height: 4px;



































    background: linear-gradient(90deg, var(--primary-green), var(--dark-green));



































    transform: scaleX(0);



































    transition: transform 0.3s ease;



































}



































.category-box:hover::before {



































    transform: scaleX(1);



































}



































.category-box:hover {



































    transform: translateY(-8px);



































    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);



































}



































.category-icon {



































    font-size: 48px;



































    margin-bottom: 15px;



































    transition: transform 0.3s ease;



































}



































.category-box:hover .category-icon {



































    transform: scale(1.2) rotate(5deg);



































}



































.category-name {



































    font-size: 16px;



































    font-weight: 600;



































    color: var(--text-dark);



































    margin-bottom: 8px;



































}



































.category-count {



































    font-size: 13px;



































    color: #666;



































}



































/* Responsive */



































@media (max-width: 1200px) {



































    .category-boxes-grid {



































        grid-template-columns: repeat(4, 1fr);



































    }



































}



































@media (max-width: 768px) {



































    .category-boxes-section {



































        padding: 40px 0;



































    }



































    .category-boxes-grid {



































        grid-template-columns: repeat(3, 1fr);



































        gap: 15px;



































    }



































    .category-box {



































        padding: 20px 15px;



































    }



































    .category-icon {



































        font-size: 40px;



































        margin-bottom: 10px;



































    }



































    .category-name {



































        font-size: 14px;



































    }



































    .category-count {



































        font-size: 12px;



































    }



































}



































@media (max-width: 480px) {



































    .category-boxes-grid {



































        grid-template-columns: repeat(2, 1fr);



































        gap: 12px;



































    }



































    .category-box {



































        padding: 18px 12px;



































    }



































    .category-icon {



































        font-size: 36px;



































    }



































    .category-name {



































        font-size: 13px;



































    }



































}



































/* Dairy Products Section */



































.dairy-products-section {



































    padding: 50px 0;



































    background-color: #ffffff;



































}



































.dairy-container {



































    display: grid;



































    grid-template-columns: 350px 1fr;



































    gap: 30px;



































    align-items: stretch;



































}



































/* Reverse - Resim sağda, ürünler solda */



































.dairy-container.reverse {



































    grid-template-columns: 1fr 350px;



































}



































.dairy-container.reverse .dairy-category-image {



































    order: 2;



































}



































.dairy-container.reverse .dairy-products-scroll {



































    order: 1;



































}



































/* Left Side - Category Image */



































.dairy-category-image {



































    position: relative;



































    display: flex;



































    align-items: stretch;



































    height: 100%;



































}



































.category-image-wrapper {



































    width: 100% !important;



































    position: relative;



































    border-radius: 20px;



































    overflow: hidden;



































    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);



































}



































.category-image-wrapper img {



































    width: 100%;



































    height: 100%;



































    object-fit: cover;



































}



































.category-overlay {



































    position: absolute;



































    bottom: 0;



































    left: 0;



































    right: 0;



































    padding: 30px;



































    background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.7) 70%, transparent 100%);



































    color: white;



































}



































.category-title {



































    font-size: 32px;



































    font-weight: 700;



































    margin-bottom: 8px;



































    color: white;



































}



































.category-desc {



































    font-size: 16px;



































    margin-bottom: 20px;



































    opacity: 0.95;



































}



































.category-view-all {



































    display: inline-flex;



































    align-items: center;



































    gap: 8px;



































    padding: 12px 24px;



































    background-color: var(--primary-green);



































    color: white;



































    text-decoration: none;



































    border-radius: 25px;



































    font-weight: 600;



































    font-size: 14px;



































    transition: all 0.3s ease;



































}



































.category-view-all:hover {



































    background-color: var(--dark-green);



































    transform: translateX(5px);



































}



































/* Right Side - Products Scroll */



































.dairy-products-scroll {



































    position: relative;



































    overflow: hidden;



































    display: flex;



































    align-items: center;



































}



































.dairy-products-wrapper {



































    display: flex;



































    gap: 20px;



































    overflow-x: auto;



































    scrollbar-width: none;



































    -ms-overflow-style: none;



































    padding: 10px 20px 10px 0;



































    user-select: none;



































}



































.dairy-products-wrapper::-webkit-scrollbar {



































    display: none;



































}



































/* Dairy Product Card */



































.dairy-product-card {



































    flex: 0 0 auto;



































    width: 220px;



































    background: white;



































    border-radius: 20px;



































    overflow: hidden;



































    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);



































    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);



































    position: relative;



































    text-decoration: none;



































    color: inherit;



































    display: block;



































    border: 1px solid rgba(0, 0, 0, 0.04);



































}



































.dairy-product-card:hover {



































    transform: translateY(-12px);



































    box-shadow: 0 12px 32px rgba(62, 166, 53, 0.15);



































    border-color: rgba(62, 166, 53, 0.1);



































}



































.dairy-product-badge {



































    position: absolute;



































    top: 12px;



































    left: 12px;



































    background: linear-gradient(135deg, #ff4444 0%, #cc0000 100%);



































    color: white;



































    padding: 6px 12px;



































    border-radius: 20px;



































    font-size: 11px;



































    font-weight: 700;



































    z-index: 10;



































    box-shadow: 0 2px 8px rgba(255, 68, 68, 0.3);



































    letter-spacing: 0.3px;



































}



































.dairy-product-badge.new {



































    background: linear-gradient(135deg, var(--primary-green) 0%, var(--dark-green) 100%);



































    box-shadow: 0 2px 8px rgba(62, 166, 53, 0.3);



































}



































.dairy-product-image {



































    position: relative;



































    width: 100%;



































    height: 220px;



































    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);



































    overflow: hidden;



































    display: flex;



































    align-items: center;



































    justify-content: center;



































}



































.dairy-product-image img {



































    width: 100%;



































    height: 100%;



































    object-fit: contain;



































    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);



































}



































.dairy-product-card:hover .dairy-product-image img {



































    transform: scale(1.15);



































}



































.dairy-quick-add {



































    position: absolute;



































    bottom: 12px;



































    right: 12px;



































    width: 42px;



































    height: 42px;



































    background: linear-gradient(135deg, var(--primary-green) 0%, var(--dark-green) 100%);



































    border: none;



































    border-radius: 50%;



































    color: white;



































    cursor: pointer;



































    display: flex;



































    align-items: center;



































    justify-content: center;



































    opacity: 0;



































    transform: translateY(15px) scale(0.8);



































    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);



































    box-shadow: 0 6px 16px rgba(62, 166, 53, 0.4);



































    pointer-events: auto;



































}



































.dairy-product-card:hover .dairy-quick-add {



































    opacity: 1;



































    transform: translateY(0) scale(1);



































}



































.dairy-quick-add:hover {



































    background: linear-gradient(135deg, var(--dark-green) 0%, #1e5a1a 100%);



































    transform: scale(1.15);



































    box-shadow: 0 8px 20px rgba(62, 166, 53, 0.5);



































}



































.dairy-product-info {



































    padding: 16px 18px;



































    background: linear-gradient(to bottom, #ffffff 0%, #fafbfc 100%);



































}



































.dairy-product-info h4 {



































    font-size: 15px;



































    font-weight: 600;



































    color: var(--text-dark);



































    margin-bottom: 10px;



































    overflow: hidden;



































    text-overflow: ellipsis;



































    white-space: nowrap;



































    line-height: 1.4;



































    letter-spacing: -0.2px;



































}



































.dairy-price {



































    font-size: 20px;



































    font-weight: 800;



































    background: linear-gradient(135deg, var(--primary-green) 0%, var(--dark-green) 100%);



































    -webkit-background-clip: text;



































    -webkit-text-fill-color: transparent;



































    background-clip: text;



































    margin: 0;



































    letter-spacing: -0.5px;



































}



































/* Scroll Buttons */



































.dairy-scroll-btn {



































    position: absolute;



































    top: 50%;



































    transform: translateY(-50%);



































    width: 55px;



































    height: 55px;



































    background: linear-gradient(135deg, var(--primary-green), var(--dark-green));



































    border: 3px solid white;



































    border-radius: 50%;



































    cursor: pointer;



































    display: flex;



































    align-items: center;



































    justify-content: center;



































    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);



































    z-index: 100;



































    box-shadow: 0 4px 20px rgba(62, 166, 53, 0.4);



































    color: white;



































}



































.dairy-scroll-btn:hover {



































    background: linear-gradient(135deg, var(--dark-green), var(--primary-green));



































    transform: translateY(-50%) scale(1.15);



































    box-shadow: 0 6px 28px rgba(62, 166, 53, 0.6);



































}



































.dairy-scroll-btn:active {



































    transform: translateY(-50%) scale(1.05);



































}



































.dairy-scroll-prev {



































    left: 10px;



































}



































.dairy-scroll-next {



































    right: 10px;



































}



































/* Responsive */



































@media (max-width: 1200px) {



































    .dairy-container {



































        grid-template-columns: 300px 1fr;



































        gap: 20px;



































    }



































    .dairy-product-card {



































        width: 180px;



































    }



































}



































@media (max-width: 992px) {



































    .dairy-container,



































    .dairy-container.reverse {



































        display: flex !important;



































        flex-direction: column !important;



































        grid-template-columns: unset !important;



































        gap: 25px;



































    }



































    /* Mobilde her zaman resim üstte, ürünler altta */



































    .dairy-container .dairy-category-image,



































    .dairy-container.reverse .dairy-category-image {



































        order: -1 !important;



































        width: 100% !important;



































        max-width: 100% !important;



































        margin: 0 auto;



































    }



































    .dairy-container .dairy-products-scroll,



































    .dairy-container.reverse .dairy-products-scroll {



































        order: 1 !important;



































        width: 100% !important;



































        min-height: 320px !important;



































        overflow: visible !important;



































    }



































    .dairy-products-wrapper {



































        overflow-x: auto !important;



































        padding: 10px 0 !important;



































    }



































    .category-image-wrapper {



































        width: 100% !important;



































        height: 300px !important;



































        max-height: 300px !important;



































    }



































    .dairy-product-card {



































        width: 200px !important;



































        min-width: 200px !important;



































    }



































    .dairy-product-image {



































        height: 180px !important;



































    }



































}



































@media (max-width: 768px) {



































    .dairy-products-section {



































        padding: 40px 0;



































    }



































    .dairy-container,



































    .dairy-container.reverse {



































        display: flex !important;



































        flex-direction: column !important;



































        grid-template-columns: unset !important;



































    }



































    .dairy-container .dairy-category-image,



































    .dairy-container.reverse .dairy-category-image {



































        order: -1 !important;



































        width: 100% !important;



































        max-width: 100% !important;



































    }



































    .dairy-container .dairy-products-scroll,



































    .dairy-container.reverse .dairy-products-scroll {



































        order: 1 !important;



































        width: 100% !important;



































        min-height: 280px !important;



































    }



































    .category-image-wrapper {



































        width: 100% !important;



































        height: 250px !important;



































        border-radius: 15px;



































    }



































    .category-title {



































        font-size: 22px;



































    }



































    .category-desc {



































        font-size: 14px;



































    }



































    .category-overlay {



































        padding: 20px;



































    }



































    .dairy-product-card {



































        width: 170px !important;



































        min-width: 170px !important;



































    }



































    .dairy-product-image {



































        height: 160px !important;



































    }



































    .dairy-scroll-btn {



































        width: 40px;



































        height: 40px;



































    }



































    .dairy-scroll-prev {



































        left: 5px;



































    }



































    .dairy-scroll-next {



































        right: 5px;



































    }



































}



































@media (max-width: 480px) {



































    .dairy-container,



































    .dairy-container.reverse {



































        display: flex !important;



































        flex-direction: column !important;



































        grid-template-columns: unset !important;



































        gap: 20px;



































    }



































    .dairy-container .dairy-category-image,



































    .dairy-container.reverse .dairy-category-image {



































        order: -1 !important;



































        width: 100% !important;



































    }



































    .dairy-container .dairy-products-scroll,



































    .dairy-container.reverse .dairy-products-scroll {



































        order: 1 !important;



































        width: 100% !important;



































        min-height: 260px !important;



































    }



































    .category-image-wrapper {



































        width: 100% !important;



































        height: 220px !important;



































    }



































    .category-title {



































        font-size: 18px;



































    }



































    .category-desc {



































        font-size: 12px;



































        margin-bottom: 12px;



































    }



































    .category-overlay {



































        padding: 15px;



































    }



































    .category-view-all {



































        padding: 8px 16px;



































        font-size: 12px;



































    }



































    .dairy-product-card {



































        width: 150px !important;



































        min-width: 150px !important;



































    }



































    .dairy-product-image {



































        height: 140px !important;



































    }



































    .dairy-product-info {



































        padding: 10px 12px;



































    }



































    .dairy-product-info h4 {



































        font-size: 13px;



































    }



































    .dairy-price {



































        font-size: 16px;



































    }



































}



































/* Basic Food Products Section - Reverse Layout */



































.basic-food-section {



































    padding: 50px 0;



































    background-color: #f8f9fa;



































}



































.basic-food-container {



































    display: grid;



































    grid-template-columns: 1fr 350px;



































    gap: 30px;



































    align-items: stretch;



































}



































/* Left Side - Products Scroll */



































.basic-food-products-scroll {



































    position: relative;



































    overflow: hidden;



































    display: flex;



































    align-items: center;



































}



































.basic-food-products-wrapper {



































    display: flex;



































    gap: 20px;



































    overflow-x: auto;



































    scrollbar-width: none;



































    -ms-overflow-style: none;



































    padding: 10px 0 10px 20px;



































    user-select: none;



































}



































.basic-food-products-wrapper::-webkit-scrollbar {



































    display: none;



































}



































/* Basic Food Product Card */



































.basic-food-product-card {



































    flex: 0 0 auto;



































    width: 220px;



































    background: white;



































    border-radius: 20px;



































    overflow: hidden;



































    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);



































    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);



































    position: relative;



































    text-decoration: none;



































    color: inherit;



































    display: block;



































    border: 1px solid rgba(0, 0, 0, 0.04);



































}



































.basic-food-product-card:hover {



































    transform: translateY(-12px);



































    box-shadow: 0 12px 32px rgba(62, 166, 53, 0.15);



































    border-color: rgba(62, 166, 53, 0.1);



































}



































.basic-food-product-badge {



































    position: absolute;



































    top: 12px;



































    left: 12px;



































    background: linear-gradient(135deg, #ff4444 0%, #cc0000 100%);



































    color: white;



































    padding: 6px 12px;



































    border-radius: 20px;



































    font-size: 11px;



































    font-weight: 700;



































    z-index: 10;



































    box-shadow: 0 2px 8px rgba(255, 68, 68, 0.3);



































    letter-spacing: 0.3px;



































}



































.basic-food-product-badge.new {



































    background: linear-gradient(135deg, var(--primary-green) 0%, var(--dark-green) 100%);



































    box-shadow: 0 2px 8px rgba(62, 166, 53, 0.3);



































}



































.basic-food-product-image {



































    position: relative;



































    width: 100%;



































    height: 220px;



































    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);



































    overflow: hidden;



































    display: flex;



































    align-items: center;



































    justify-content: center;



































}



































.basic-food-product-image img {



































    width: 100%;



































    height: 100%;



































    object-fit: contain;



































    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);



































}



































.basic-food-product-card:hover .basic-food-product-image img {



































    transform: scale(1.15);



































}



































.basic-food-quick-add {



































    position: absolute;



































    bottom: 12px;



































    right: 12px;



































    width: 42px;



































    height: 42px;



































    background: linear-gradient(135deg, var(--primary-green) 0%, var(--dark-green) 100%);



































    border: none;



































    border-radius: 50%;



































    color: white;



































    cursor: pointer;



































    display: flex;



































    align-items: center;



































    justify-content: center;



































    opacity: 0;



































    transform: translateY(15px) scale(0.8);



































    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);



































    box-shadow: 0 6px 16px rgba(62, 166, 53, 0.4);



































    pointer-events: auto;



































}



































.basic-food-product-card:hover .basic-food-quick-add {



































    opacity: 1;



































    transform: translateY(0) scale(1);



































}



































.basic-food-quick-add:hover {



































    background: linear-gradient(135deg, var(--dark-green) 0%, #1e5a1a 100%);



































    transform: scale(1.15);



































    box-shadow: 0 8px 20px rgba(62, 166, 53, 0.5);



































}



































.basic-food-product-info {



































    padding: 16px 18px;



































    background: linear-gradient(to bottom, #ffffff 0%, #fafbfc 100%);



































}



































.basic-food-product-info h4 {



































    font-size: 15px;



































    font-weight: 600;



































    color: var(--text-dark);



































    margin-bottom: 10px;



































    overflow: hidden;



































    text-overflow: ellipsis;



































    white-space: nowrap;



































    line-height: 1.4;



































    letter-spacing: -0.2px;



































}



































.basic-food-price {



































    font-size: 20px;



































    font-weight: 800;



































    background: linear-gradient(135deg, var(--primary-green) 0%, var(--dark-green) 100%);



































    -webkit-background-clip: text;



































    -webkit-text-fill-color: transparent;



































    background-clip: text;



































    margin: 0;



































    letter-spacing: -0.5px;



































}



































/* Scroll Buttons */



































.basic-food-scroll-btn {



































    position: absolute;



































    top: 50%;



































    transform: translateY(-50%);



































    width: 50px;



































    height: 50px;



































    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);



































    border: 2px solid rgba(62, 166, 53, 0.15);



































    border-radius: 50%;



































    cursor: pointer;



































    display: flex;



































    align-items: center;



































    justify-content: center;



































    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);



































    z-index: 10;



































    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);



































    color: var(--primary-green);



































}



































.basic-food-scroll-btn:hover {



































    background: linear-gradient(135deg, var(--primary-green) 0%, var(--dark-green) 100%);



































    border-color: var(--primary-green);



































    color: white;



































    transform: translateY(-50%) scale(1.15);



































    box-shadow: 0 8px 24px rgba(62, 166, 53, 0.3);



































}



































.basic-food-scroll-btn:active {



































    transform: translateY(-50%) scale(1.05);



































}



































.basic-food-scroll-prev {



































    left: -22px;



































}



































.basic-food-scroll-next {



































    right: -22px;



































}



































/* Right Side - Category Image */



































.basic-food-category-image {



































    position: relative;



































}



































.basic-food-image-wrapper {



































    position: relative;



































    height: 100%;



































    border-radius: 20px;



































    overflow: hidden;



































    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);



































}



































.basic-food-image-wrapper img {



































    width: 100%;



































    height: 100%;



































    object-fit: cover;



































}



































.basic-food-overlay {



































    position: absolute;



































    bottom: 0;



































    left: 0;



































    right: 0;



































    padding: 30px;



































    background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.7) 70%, transparent 100%);



































    color: white;



































}



































.basic-food-title {



































    font-size: 32px;



































    font-weight: 700;



































    margin-bottom: 8px;



































    color: white;



































}



































.basic-food-desc {



































    font-size: 16px;



































    margin-bottom: 20px;



































    opacity: 0.95;



































}



































.basic-food-view-all {



































    display: inline-flex;



































    align-items: center;



































    gap: 8px;



































    padding: 12px 24px;



































    background-color: var(--primary-green);



































    color: white;



































    text-decoration: none;



































    border-radius: 25px;



































    font-weight: 600;



































    font-size: 14px;



































    transition: all 0.3s ease;



































}



































.basic-food-view-all:hover {



































    background-color: var(--dark-green);



































    transform: translateX(5px);



































}



































/* Responsive */



































@media (max-width: 1200px) {



































    .basic-food-container {



































        grid-template-columns: 1fr 300px;



































        gap: 20px;



































    }



































    .basic-food-product-card {



































        width: 180px;



































    }



































}



































@media (max-width: 992px) {



































    .basic-food-container {



































        display: flex;



































        flex-direction: column;



































        gap: 25px;



































    }



































    .basic-food-category-image {



































        order: 1;



































        width: 100%;



































        max-width: 500px;



































        margin: 0 auto;



































    }



































    .basic-food-products-scroll {



































        order: 2;



































    }



































    .basic-food-image-wrapper {



































        height: 350px;



































    }



































    .basic-food-product-card {



































        width: 220px;



































    }



































}



































@media (max-width: 768px) {



































    .basic-food-section {



































        padding: 40px 0;



































    }



































    .basic-food-category-image {



































        max-width: 100%;



































    }



































    .basic-food-image-wrapper {



































        height: 300px;



































        border-radius: 15px;



































    }



































    .basic-food-title {



































        font-size: 24px;



































    }



































    .basic-food-desc {



































        font-size: 14px;



































    }



































    .basic-food-overlay {



































        padding: 25px;



































    }



































    .basic-food-product-card {



































        width: 170px;



































    }



































    .basic-food-product-image {



































        height: 170px;



































    }



































    .basic-food-scroll-btn {



































        width: 40px;



































        height: 40px;



































    }



































    .basic-food-scroll-prev {



































        left: -15px;



































    }



































    .basic-food-scroll-next {



































        right: -15px;



































    }



































}



































@media (max-width: 480px) {



































    .basic-food-image-wrapper {



































        height: 250px;



































    }



































    .basic-food-title {



































        font-size: 20px;



































    }



































    .basic-food-desc {



































        font-size: 13px;



































        margin-bottom: 15px;



































    }



































    .basic-food-overlay {



































        padding: 20px;



































    }



































    .basic-food-view-all {



































        padding: 10px 20px;



































        font-size: 13px;



































    }



































    .basic-food-product-card {



































        width: 160px;



































    }



































    .basic-food-product-image {



































        height: 160px;



































    }



































}



































.why-us-section{padding:80px 0;background:linear-gradient(135deg,#f8f9fa 0%,#fff 100%)}



































.why-us-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:50px}



































.why-us-card{background:#fff;padding:40px 30px;border-radius:20px;text-align:center;box-shadow:0 4px 20px rgba(0,0,0,.06);transition:all .4s cubic-bezier(.4,0,.2,1);border:1px solid rgba(0,0,0,.04);position:relative;overflow:hidden}



































.why-us-card::before{content:'';position:absolute;top:0;left:0;width:100%;height:4px;background:linear-gradient(90deg,var(--primary-green),var(--dark-green));transform:scaleX(0);transition:transform .4s ease}



































.why-us-card:hover::before{transform:scaleX(1)}



































.why-us-card:hover{transform:translateY(-10px);box-shadow:0 12px 32px rgba(62,166,53,.15);border-color:rgba(62,166,53,.1)}



































.why-us-icon{width:80px;height:80px;margin:0 auto 25px;background:linear-gradient(135deg,var(--primary-green),var(--dark-green));border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;transition:all .4s cubic-bezier(.4,0,.2,1);box-shadow:0 8px 20px rgba(62,166,53,.2)}



































.why-us-card:hover .why-us-icon{transform:scale(1.1) rotate(5deg);box-shadow:0 12px 28px rgba(62,166,53,.3)}



































.why-us-card h3{font-size:20px;font-weight:700;color:var(--text-dark);margin-bottom:12px;letter-spacing:-.3px}



































.why-us-card p{font-size:15px;color:#666;line-height:1.6;margin:0}



































@media (max-width:992px){.why-us-grid{grid-template-columns:repeat(2,1fr);gap:25px}}



































@media (max-width:768px){.why-us-section{padding:60px 0}.why-us-grid{gap:20px}.why-us-card{padding:30px 20px}.why-us-icon{width:70px;height:70px;margin-bottom:20px}.why-us-card h3{font-size:18px}.why-us-card p{font-size:14px}}



































@media (max-width:480px){.why-us-grid{grid-template-columns:1fr;gap:15px}.why-us-card{padding:25px 20px}.why-us-icon{width:60px;height:60px}}



































/* Testimonials Section - Modern & Elegant */



































.testimonials-section {



































    padding: 100px 0;



































    background: linear-gradient(180deg, #ffffff 0%, #f8fdf8 100%);



































    position: relative;



































    overflow: hidden;



































}



































.testimonials-section::before {



































    content: '';



































    position: absolute;



































    top: 0;



































    left: 0;



































    right: 0;



































    height: 200px;



































    background: radial-gradient(circle at 50% 0%, rgba(62, 166, 53, 0.05) 0%, transparent 70%);



































    pointer-events: none;



































}



































.testimonials-wrapper {



































    position: relative;



































    margin-top: 60px;



































    overflow: hidden;



































    padding: 0 80px;



































}



































.testimonials-container {



































    display: flex;



































    gap: 35px;



































    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);



































    flex-wrap: nowrap;



































    width: 100%;



































}



































.testimonial-card {



































    flex: 0 0 calc(33.333% - 24px);



































    min-width: calc(33.333% - 24px);



































    background: #ffffff;



































    padding: 45px 40px;



































    border-radius: 24px;



































    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);



































    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);



































    border: 2px solid rgba(62, 166, 53, 0.08);



































    position: relative;



































    overflow: hidden;



































}



































.testimonial-card::before {



































    content: '';



































    position: absolute;



































    top: 0;



































    left: 0;



































    right: 0;



































    height: 5px;



































    background: linear-gradient(90deg, var(--primary-green), var(--dark-green));



































    transform: scaleX(0);



































    transform-origin: left;



































    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);



































}



































.testimonial-card::after {



































    content: '"';



































    position: absolute;



































    top: 30px;



































    right: 30px;



































    font-size: 120px;



































    font-family: Georgia, serif;



































    color: var(--primary-green);



































    opacity: 0.04;



































    line-height: 1;



































    pointer-events: none;



































}



































.testimonial-card:hover {



































    transform: translateY(-12px) scale(1.02);



































    box-shadow: 0 20px 50px rgba(62, 166, 53, 0.15);



































    border-color: var(--primary-green);



































}



































.testimonial-card:hover::before {



































    transform: scaleX(1);



































}



































.testimonial-stars {



































    display: flex;



































    gap: 4px;



































    margin-bottom: 25px;



































}



































.testimonial-stars .star {



































    transition: transform 0.2s ease;



































}



































.testimonial-stars .star.filled {



































    filter: drop-shadow(0 2px 4px rgba(255, 215, 0, 0.3));



































}



































.testimonial-stars .star:hover {



































    transform: scale(1.15);



































}



































.testimonial-text {



































    font-size: 17px;



































    line-height: 1.9;



































    color: #2c3e50;



































    margin-bottom: 30px;



































    font-style: italic;



































    position: relative;



































    padding-left: 25px;



































    font-weight: 400;



































}



































.testimonial-text::before {



































    content: '"';



































    position: absolute;



































    left: 0;



































    top: -8px;



































    font-size: 50px;



































    color: var(--primary-green);



































    opacity: 0.5;



































    font-family: Georgia, serif;



































    line-height: 1;



































}



































.testimonial-author {



































    display: flex;



































    align-items: center;



































    gap: 18px;



































    padding-top: 20px;



































    border-top: 2px solid rgba(62, 166, 53, 0.1);



































}



































.author-avatar {



































    width: 60px;



































    height: 60px;



































    background: linear-gradient(135deg, var(--primary-green), var(--dark-green));



































    border-radius: 50%;



































    display: flex;



































    align-items: center;



































    justify-content: center;



































    font-size: 28px;



































    box-shadow: 0 6px 20px rgba(62, 166, 53, 0.3);



































    transition: all 0.4s ease;



































}



































.testimonial-card:hover .author-avatar {



































    transform: scale(1.1) rotate(5deg);



































    box-shadow: 0 8px 25px rgba(62, 166, 53, 0.4);



































}



































.author-info {



































    flex: 1;



































}



































.author-name {



































    font-size: 18px;



































    font-weight: 700;



































    color: var(--text-dark);



































    margin-bottom: 5px;



































    letter-spacing: -0.3px;



































}



































.author-location {



































    font-size: 14px;



































    color: #7f8c8d;



































    font-weight: 500;



































}



































/* Navigation Buttons */



































.testimonial-nav {



































    position: absolute;



































    top: 50%;



































    transform: translateY(-50%);



































    width: 60px;



































    height: 60px;



































    background: linear-gradient(135deg, var(--primary-green), var(--dark-green));



































    border: 3px solid white;



































    border-radius: 50%;



































    cursor: pointer;



































    display: flex;



































    align-items: center;



































    justify-content: center;



































    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);



































    z-index: 10;



































    box-shadow: 0 6px 25px rgba(62, 166, 53, 0.4);



































    color: white;



































}



































.testimonial-nav:hover {



































    background: linear-gradient(135deg, var(--dark-green), var(--primary-green));



































    transform: translateY(-50%) scale(1.15);



































    box-shadow: 0 8px 30px rgba(62, 166, 53, 0.6);



































}



































.testimonial-prev {



































    left: 0;



































}



































.testimonial-next {



































    right: 0;



































}



































/* Dots */



































.testimonial-dots {



































    display: flex;



































    justify-content: center;



































    gap: 12px;



































    margin-top: 50px;



































}



































.testimonial-dot {



































    width: 12px;



































    height: 12px;



































    border-radius: 50%;



































    background: rgba(62, 166, 53, 0.2);



































    border: 2px solid var(--primary-green);



































    cursor: pointer;



































    transition: all 0.4s ease;



































}



































.testimonial-dot.active {



































    width: 40px;



































    border-radius: 6px;



































    background: var(--primary-green);



































}



































.testimonial-dot:hover {



































    background: var(--primary-green);



































    transform: scale(1.2);



































}



































.author-location{font-size:14px;color:#666}



































.testimonial-nav{position:absolute;top:50%;transform:translateY(-50%);width:55px;height:55px;background:linear-gradient(135deg,var(--primary-green),var(--dark-green));border:3px solid #fff;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s ease;z-index:100;color:#fff;box-shadow:0 4px 20px rgba(62,166,53,.4)}



































.testimonial-nav:hover{background:linear-gradient(135deg,var(--dark-green),var(--primary-green));transform:translateY(-50%) scale(1.15);box-shadow:0 6px 28px rgba(62,166,53,.6)}



































.testimonial-prev{left:10px}



































.testimonial-next{right:10px}



































.testimonial-dots{display:flex;justify-content:center;gap:10px;margin-top:40px}



































.testimonial-dot{width:12px;height:12px;border-radius:50%;background:#ddd;border:none;cursor:pointer;transition:all .3s ease;padding:0}



































.testimonial-dot:hover{background:#bbb;transform:scale(1.2)}



































.testimonial-dot.active{background:var(--primary-green);width:30px;border-radius:6px}



































@media (max-width:992px){.testimonial-card{flex:0 0 calc(50% - 15px);min-width:calc(50% - 15px)}}



































@media (max-width:768px){.testimonials-section{padding:60px 0}.testimonials-wrapper{padding:0 60px}.testimonial-card{flex:0 0 100%;min-width:100%}.testimonial-nav{width:40px;height:40px}.testimonial-text{font-size:15px}}



































@media (max-width:480px){.testimonials-wrapper{padding:0 50px}.testimonial-card{padding:25px}.testimonial-text{font-size:14px}.author-avatar{width:40px;height:40px;font-size:20px}}



































.contact-section{padding:80px 0;background:#fff}



































.contact-container{display:grid;grid-template-columns:1fr 1.2fr;gap:50px;margin-top:50px}



































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



































.contact-info-card{background:linear-gradient(135deg,#f8f9fa 0%,#fff 100%);padding:35px 30px;border-radius:20px;box-shadow:0 8px 30px rgba(0,0,0,.08);transition:all .4s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;border:2px solid transparent}



































.contact-info-card::before{content:'';position:absolute;top:0;left:0;width:100%;height:4px;background:linear-gradient(90deg,var(--primary-green),var(--dark-green));transform:scaleX(0);transition:transform .4s ease}



































.contact-info-card:hover{transform:translateY(-8px);box-shadow:0 12px 40px rgba(62,166,53,.15);border-color:rgba(62,166,53,.1)}



































.contact-info-card:hover::before{transform:scaleX(1)}



































.contact-icon{width:70px;height:70px;background:linear-gradient(135deg,var(--primary-green),var(--dark-green));border-radius:20px;display:flex;align-items:center;justify-content:center;color:#fff;margin-bottom:25px;box-shadow:0 8px 20px rgba(62,166,53,.25);transition:all .4s ease}



































.contact-info-card:hover .contact-icon{transform:scale(1.1) rotate(5deg);box-shadow:0 12px 28px rgba(62,166,53,.35)}



































.contact-info-card h3{font-size:20px;font-weight:700;color:var(--text-dark);margin-bottom:15px;letter-spacing:-.3px}



































.contact-info-card p{font-size:15px;color:#666;line-height:1.9;margin:8px 0 0 0}



































.contact-info-card a{color:var(--primary-green);text-decoration:none;font-weight:600;transition:all .3s ease}



































.contact-info-card a:hover{color:var(--dark-green)}



































.contact-form-wrapper{background:linear-gradient(135deg,#f8f9fa 0%,#fff 100%);padding:45px;border-radius:24px;box-shadow:0 8px 30px rgba(0,0,0,.1);border:2px solid rgba(62,166,53,.05)}



































.form-title{font-size:26px;font-weight:700;color:var(--text-dark);margin-bottom:35px;text-align:center;position:relative;padding-bottom:15px}



































.form-title::after{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:60px;height:4px;background:linear-gradient(90deg,var(--primary-green),var(--dark-green));border-radius:2px}



































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



































.form-group{margin-bottom:20px}



































.form-group label{display:block;font-size:14px;font-weight:600;color:var(--text-dark);margin-bottom:8px}



































.form-group input,.form-group select,.form-group textarea{width:100%;padding:12px 16px;border:2px solid #e0e0e0;border-radius:10px;font-size:14px;font-family:inherit;transition:all .3s ease;outline:none}



































.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--primary-green);box-shadow:0 0 0 3px rgba(62,166,53,.1)}



































.form-group textarea{resize:vertical;min-height:120px}



































.submit-btn{width:100%;padding:16px 32px;background:linear-gradient(135deg,var(--primary-green),var(--dark-green));color:#fff;border:none;border-radius:12px;font-size:16px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;transition:all .3s ease;box-shadow:0 4px 15px rgba(62,166,53,.3)}



































.submit-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(62,166,53,.4)}



































.submit-btn:active{transform:translateY(0)}



































.map-section{margin-top:50px}



































.map-title{font-size:24px;font-weight:700;color:var(--text-dark);margin-bottom:25px;text-align:center}



































.map-wrapper{width:100%;height:450px;border-radius:20px;overflow:hidden;box-shadow:0 8px 30px rgba(0,0,0,.12);border:3px solid #fff}



































.map-wrapper iframe{width:100%;height:100%;border:0;display:block}



































@media (max-width:992px){.contact-container{grid-template-columns:1fr;gap:40px}.contact-info{grid-template-columns:repeat(2,1fr)}.map-wrapper{height:400px}}



































@media (max-width:992px){.contact-section .form-row{grid-template-columns:1fr}}



































@media (max-width:768px){.contact-section{padding:60px 0}.contact-info{grid-template-columns:1fr;gap:20px}.contact-form-wrapper{padding:30px}.map-wrapper{height:350px}.map-title{font-size:20px}}



































@media (max-width:480px){.contact-form-wrapper{padding:25px}.form-title{font-size:20px}.contact-icon{width:50px;height:50px}.contact-info-card{padding:25px}.map-wrapper{height:300px}.map-title{font-size:18px}}



































.main-footer{background:linear-gradient(135deg,#1a1a1a 0%,#2d2d2d 100%);color:#fff;padding-top:60px}



































.footer-top{padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.1)}



































.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.5fr;gap:50px}



































.footer-column{display:flex;flex-direction:column}



































.footer-logo{margin-bottom:20px}



































.footer-logo img{height:50px;width:auto;filter:brightness(0) invert(1)}



































.footer-desc{font-size:14px;line-height:1.8;color:rgba(255,255,255,.7);margin-bottom:25px}



































.footer-social{display:flex;gap:12px}



































.footer-social a{width:40px;height:40px;background:rgba(255,255,255,.1);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;transition:all .3s ease}



































.footer-social a:hover{background:var(--primary-green);transform:translateY(-3px)}



































.footer-title{font-size:18px;font-weight:700;margin-bottom:20px;color:#fff}



































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



































.footer-links li{margin-bottom:12px}



































.footer-links a{color:rgba(255,255,255,.7);text-decoration:none;font-size:14px;transition:all .3s ease;display:inline-block}



































.footer-links a:hover{color:var(--primary-green);transform:translateX(5px)}



































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



































.footer-contact li{display:flex;align-items:flex-start;gap:12px;margin-bottom:15px;color:rgba(255,255,255,.7);font-size:14px;line-height:1.6}



































.footer-contact svg{flex-shrink:0;margin-top:2px;color:var(--primary-green)}



































.footer-contact a{color:rgba(255,255,255,.7);text-decoration:none;transition:color .3s ease}



































.footer-contact a:hover{color:var(--primary-green)}



































.footer-bottom{padding:25px 0;background:rgba(0,0,0,.3)}



































.footer-row-1{display:flex;justify-content:space-between;align-items:center;padding-bottom:15px;border-bottom:1px solid rgba(255,255,255,.1);margin-bottom:15px}



































.footer-row-2{display:flex;justify-content:space-between;align-items:center;gap:20px;margin:0}



































.copyright-section{display:flex;flex-direction:column;gap:5px}



































.copyright{font-size:14px;color:rgba(255,255,255,.6);margin:0}



































.company-legal-name{font-size:11px;color:rgba(255,255,255,.4);margin:0;font-weight:400;letter-spacing:0.3px}



































.design-credit{text-align:right;margin:0;padding:0;border:none}



































.design-credit p{font-size:13px;color:rgba(255,255,255,.5);margin:0}



































.design-credit a{color:var(--primary-green);text-decoration:none;font-weight:600;transition:all .3s ease}



































.design-credit a:hover{color:#fff;text-decoration:underline}



































.main-footer .payment-methods{display:flex;align-items:center;justify-content:center;gap:8px;margin:0;padding:0;border:none}


























.main-footer .payment-label{font-size:13px;color:rgba(255,255,255,.6);font-weight:500;white-space:nowrap}


























.main-footer .payment-logos{display:flex;align-items:center;gap:12px}


























.main-footer .payment-logo{height:20px;width:auto;object-fit:contain;opacity:.8;transition:opacity .3s ease,transform .3s ease}


























.main-footer .payment-logo:hover{opacity:1;transform:scale(1.05)}


























.footer-links-bottom{display:flex;gap:15px;flex-wrap:wrap}



































.footer-links-bottom a{color:rgba(255,255,255,.6);text-decoration:none;font-size:12px;transition:color .3s ease}



































.footer-links-bottom a:hover{color:var(--primary-green)}



































@media (max-width:992px){.footer-grid{grid-template-columns:repeat(2,1fr);gap:40px}}



































@media (max-width:768px){.main-footer{padding-top:50px}.footer-grid{grid-template-columns:1fr;gap:35px}.footer-row-1{flex-direction:column;text-align:center;gap:10px;padding-bottom:20px}.footer-row-2{flex-direction:column;text-align:center;gap:15px}.copyright-section{text-align:center;align-items:center}.design-credit{text-align:center}.main-footer .payment-methods{justify-content:center}.footer-links-bottom{justify-content:center;gap:10px}}


























    /* Critical CSS - Above the fold */



































        * {



































            margin: 0;



































            padding: 0;



































            box-sizing: border-box;



































        }



































        :root {



































            --primary-green: #3ea635;



































            --dark-green: #2d7a28;



































            --light-gray: #f5f5f5;



































            --text-dark: #333333;



































            --white: #ffffff;



































        }



































        html {



































            scroll-behavior: smooth;



































        }



































        body {



































            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;



































            color: var(--text-dark);



































            line-height: 1.6;



































            overflow-x: hidden;



































        }



































        /* Custom Scrollbar - Elegant & Modern */



































        ::-webkit-scrollbar {



































            width: 12px;



































        }



































        ::-webkit-scrollbar-track {



































            background: #f8f9fa;



































            border-left: 1px solid #e9ecef;



































        }



































        ::-webkit-scrollbar-thumb {



































            background: linear-gradient(180deg, var(--primary-green) 0%, var(--dark-green) 100%);



































            border-radius: 10px;



































            border: 2px solid #f8f9fa;



































            transition: all 0.3s ease;



































        }



































        ::-webkit-scrollbar-thumb:hover {



































            background: linear-gradient(180deg, var(--dark-green) 0%, #1e5a1a 100%);



































            border-color: #e9ecef;



































            box-shadow: 0 0 6px rgba(62, 166, 53, 0.4);



































        }



































        ::-webkit-scrollbar-thumb:active {



































            background: var(--dark-green);



































        }



































        /* Firefox Scrollbar */



































        * {



































            scrollbar-width: thin;



































            scrollbar-color: var(--primary-green) #f8f9fa;



































        }



































        /* Top Header - 40px height */



































        .top-header {



































            background-color: var(--primary-green);



































            height: 40px;



































            position: sticky;



































            top: 0;



































            z-index: 1000;



































        }



































        .top-header-wrapper {



































            max-width: 1400px;



































            margin: 0 auto;



































            padding: 0 40px;



































            height: 100%;



































            display: flex;



































            align-items: center;



































            justify-content: space-between;



































        }



































        .top-header-left {



































            display: flex;



































            align-items: center;



































            gap: 15px;



































        }



































        .header-logo {



































            display: flex;



































            align-items: center;



































            transition: transform 0.2s ease;



































        }



































        .header-logo:hover {



































            transform: scale(1.1);



































        }



































        .header-logo img {



































            display: block;



































            width: 28px;



































            height: 28px;



































            object-fit: contain;



































        }



































        .top-header-links {



































            display: flex;



































            align-items: center;



































            gap: 20px;



































        }



































        .top-link {



































            color: var(--white);



































            text-decoration: none;



































            font-size: 13px;



































            font-weight: 500;



































            transition: opacity 0.2s ease;



































        }



































        .top-link:hover {

























            opacity: 0.85;

























        }



        .top-link-badged {

            display: inline-flex;

            align-items: center;

            gap: 8px;

        }



        .nav-new-badge {

            display: inline-flex;

            align-items: center;

            justify-content: center;

            min-width: 34px;

            height: 18px;

            padding: 0 7px;

            border-radius: 999px;

            background: linear-gradient(135deg, #ff6a3d, #ff2d55);

            color: #fff;

            font-size: 10px;

            font-weight: 800;

            letter-spacing: 0.04em;

            line-height: 1;

            text-transform: uppercase;

            box-shadow: 0 6px 14px rgba(255, 45, 85, 0.28);

            animation: navBadgePulse 1.5s ease-in-out infinite;

        }



        @keyframes navBadgePulse {

            0%, 100% {

                transform: scale(1);

                box-shadow: 0 6px 14px rgba(255, 45, 85, 0.28);

            }

            50% {

                transform: scale(1.08);

                box-shadow: 0 10px 20px rgba(255, 45, 85, 0.4);

            }

        }




        .top-link-highlight {


            color: #d6ff88;


            position: relative;


            display: inline-flex;


            align-items: center;


            justify-content: center;


            transform-origin: center;


            font-weight: 700;


            text-shadow: 0 0 10px rgba(214, 255, 136, 0.55);


        }





        .top-link-highlight:hover {


            opacity: 1;


            color: #f1ffbf;


        }





        .top-link-highlight__text {


            display: inline-block;


            transform-origin: center;


            will-change: transform, filter, text-shadow;


            animation: mescidiAksaBlink 0.85s cubic-bezier(0.4, 0, 0.2, 1) infinite;


            filter: drop-shadow(0 0 8px rgba(214, 255, 136, 0.45));


        }





        .top-link-highlight::after {


            content: '';


            position: absolute;


            left: 0;


            right: 0;


            bottom: -4px;


            height: 2px;


            border-radius: 999px;


            background: currentColor;


            box-shadow: 0 0 10px rgba(214, 255, 136, 0.85);


            animation: mescidiAksaUnderline 1.2s ease-in-out infinite;


        }





        @keyframes mescidiAksaBlink {


            0%, 100% {


                opacity: 1;


                transform: scale(1);


                text-shadow: 0 0 10px rgba(214, 255, 136, 0.45), 0 0 18px rgba(214, 255, 136, 0.25);


                filter: drop-shadow(0 0 6px rgba(214, 255, 136, 0.35));


            }


            50% {


                opacity: 1;


                transform: scale(1.32);


                text-shadow: 0 0 18px rgba(214, 255, 136, 0.95), 0 0 30px rgba(214, 255, 136, 0.65);


                filter: drop-shadow(0 0 16px rgba(214, 255, 136, 0.95)) brightness(1.15);


            }


        }





        @keyframes mescidiAksaUnderline {


            0%, 100% {


                opacity: 0.65;


                transform: scaleX(0.88);


            }


            50% {


                opacity: 1;


                transform: scaleX(1.18);


            }


        }





        @media (prefers-reduced-motion: reduce) {


            .top-link-highlight__text,


            .top-link-highlight::after {


                animation: none;


            }


        }


























        .top-header-right {



































            display: flex;



































            align-items: center;



































            gap: 15px;



































        }



































        .social-links {



































            display: flex;



































            gap: 12px;



































            align-items: center;



































        }



































        .social-link {



































            color: var(--white);



































            font-size: 16px;



































            transition: transform 0.2s ease, opacity 0.2s ease;



































            display: inline-flex;



































            align-items: center;



































            text-decoration: none;



































        }



































        .social-link:hover {



































            transform: translateY(-2px);



































            opacity: 0.85;



































        }



































        /* Hamburger Menu */



































        .hamburger-menu {



































            background: none;



































            border: none;



































            cursor: pointer;



































            padding: 5px;



































            display: flex;



































            flex-direction: column;



































            gap: 4px;



































            width: 24px;



































            height: 24px;



































            justify-content: center;



































        }



































        .hamburger-line {



































            width: 100%;



































            height: 2px;



































            background-color: var(--white);



































            transition: all 0.3s ease;



































            border-radius: 2px;



































        }



































        .hamburger-menu:hover .hamburger-line {



































            background-color: rgba(255, 255, 255, 0.85);



































        }



































        /* Hamburger Animation */



































        .hamburger-menu.active .hamburger-line:nth-child(1) {



































            transform: rotate(45deg) translate(5px, 5px);



































        }



































        .hamburger-menu.active .hamburger-line:nth-child(2) {



































            opacity: 0;



































        }



































        .hamburger-menu.active .hamburger-line:nth-child(3) {



































            transform: rotate(-45deg) translate(6px, -6px);



































        }



































        /* Main Header - Ana Header */



































        .main-header {



































            background-color: var(--white);



































            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);



































            position: sticky;



































            top: 40px;



































            z-index: 900;



































            transition: box-shadow 0.3s ease;



































        }



































        .main-header.scrolled {



































            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);



































        }



































        .main-header-container {



































            max-width: 1400px;



































            margin: 0 auto;



































            padding: 15px 40px;



































            display: flex;



































            align-items: center;



































            justify-content: space-between;



































            gap: 30px;



































        }



































        /* Logo */



































        .main-logo {



































            flex-shrink: 0;



































            margin-right: auto;



































            transition: transform 0.2s ease;



































        }



































        .main-logo:hover {



































            transform: scale(1.05);



































        }



































        .main-logo img {



































            display: block;



































            height: 50px;



































            width: auto;



































            object-fit: contain;



































        }



































        /* Search Container */



































        .search-container {



































            flex: 0 1 600px;



































            max-width: 600px;



































            margin: 0 auto;



































            position: relative;



































        }



































        .search-form {



































            position: relative;



































            display: flex;



































            align-items: center;



































        }



































        .search-input {



































            width: 100%;



































            height: 45px;



































            padding: 0 50px 0 20px;



































            border: 2px solid #e0e0e0;



































            border-radius: 25px;



































            font-size: 14px;



































            transition: all 0.3s ease;



































            outline: none;



































        }



































        .search-input:focus {



































            border-color: var(--primary-green);



































            box-shadow: 0 0 0 3px rgba(62, 166, 53, 0.1);



































        }



































        .search-input::placeholder {



































            color: #999;



































        }



































        .search-button {



































            position: absolute;



































            right: 5px;



































            width: 38px;



































            height: 38px;



































            background-color: var(--primary-green);



































            border: none;



































            border-radius: 50%;



































            color: var(--white);



































            cursor: pointer;



































            display: flex;



































            align-items: center;



































            justify-content: center;



































            transition: all 0.3s ease;



































        }



































        .search-button:hover {



































            background-color: var(--dark-green);



































            transform: scale(1.1);



































        }



































        /* Header Actions */



































        .header-actions {



































            display: flex;



































            align-items: center;



































            gap: 15px;



































            flex-shrink: 0;



































            margin-left: auto;



































        }



































        /* Auth Button */



































        .auth-button {



































            display: flex;



































            align-items: center;



































            gap: 8px;



































            padding: 10px 18px;



































            background-color: var(--light-gray);



































            color: var(--text-dark);



































            text-decoration: none;



































            border-radius: 20px;



































            font-size: 14px;



































            font-weight: 500;



































            transition: all 0.3s ease;



































            height: 44px;



































        }



































        .auth-button:hover {



































            background-color: var(--primary-green);



































            color: var(--white);



































            transform: translateY(-2px);



































            box-shadow: 0 4px 8px rgba(62, 166, 53, 0.3);



































        }



































        .auth-button svg {



































            flex-shrink: 0;



































        }



































        /* Favorites Button */



































        .favorites-button {



































            display: flex;



































            align-items: center;



































            justify-content: center;



































            width: 44px;



































            height: 44px;



































            background: var(--primary-green);



































            color: white;



































            text-decoration: none;



































            border-radius: 50%;



































            transition: all 0.3s ease;



































        }



































        .favorites-button:hover {



































            background: var(--dark-green);



































            color: white;



































            transform: scale(1.1);



































            box-shadow: 0 4px 12px rgba(62, 166, 53, 0.4);



































        }



































        /* Cart Button */



































        .cart-button {



































            display: flex;



































            align-items: center;



































            gap: 14px;



































            padding: 10px 18px;



































            background-color: var(--primary-green);



































            color: var(--white);



































            text-decoration: none;



































            border-radius: 20px;



































            font-size: 14px;



































            transition: all 0.3s ease;



































            height: 44px;



































        }



































        .cart-button:hover {



































            background-color: var(--dark-green);



































            transform: translateY(-2px);



































            box-shadow: 0 4px 12px rgba(62, 166, 53, 0.4);



































        }



































        .cart-icon-wrapper {



































            position: relative;



































            flex-shrink: 0;



































            display: flex;



































            align-items: center;



































        }



































        .cart-badge {



































            position: absolute;



































            top: -8px;



































            right: -8px;



































            background-color: #ff4444;



































            color: var(--white);



































            font-size: 11px;



































            font-weight: bold;



































            padding: 2px 6px;



































            border-radius: 10px;



































            min-width: 18px;



































            text-align: center;



































            animation: cartBadgePulse 0.3s ease;



































        }



































        @keyframes cartBadgePulse {



































            0%, 100% { transform: scale(1); }



































            50% { transform: scale(1.2); }



































        }



































        .cart-info {



































            display: flex;



































            flex-direction: column;



































            gap: 0;



































            justify-content: center;



































        }



































        .cart-label {



































            font-size: 12px;



































            opacity: 0.95;



































            font-weight: 500;



































            line-height: 1.1;



































            margin-bottom: 1px;



































        }



































        .cart-total {



































            font-size: 14px;



































            font-weight: 700;



































            line-height: 1.1;



































        }



































        /* Category Bar */



































        .category-bar {



































            background-color: var(--primary-green);



































            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);



































            position: sticky;



































            top: 120px;



































            z-index: 850;



































        }



































        /* Global Container System */



































        .container {



































            max-width: 1400px;



































            margin: 0 auto;



































            padding: 0 40px;



































        }



































        .category-bar-container {



































            max-width: 1400px;



































            margin: 0 auto;



































            padding: 0 40px;



































            display: flex;



































            align-items: center;



































            gap: 30px;



































            height: 50px;



































        }



































        /* Categories Dropdown */



































        .categories-dropdown {



































            position: relative;



































            flex-shrink: 0;



































        }



































        .categories-btn {



































            display: flex;



































            align-items: center;



































            gap: 10px;



































            padding: 10px 20px;



































            background-color: rgba(255, 255, 255, 0.15);



































            color: var(--white);



































            border: none;



































            border-radius: 8px;



































            font-size: 15px;



































            font-weight: 600;



































            cursor: pointer;



































            transition: all 0.3s ease;



































            backdrop-filter: blur(10px);



































        }



































        .categories-btn:hover {



































            background-color: rgba(255, 255, 255, 0.25);



































            transform: translateY(-1px);



































        }



































        .categories-btn svg {



































            flex-shrink: 0;



































        }



































        .dropdown-arrow {



































            transition: transform 0.3s ease;



































        }



































        .categories-btn[aria-expanded="true"] .dropdown-arrow {



































            transform: rotate(180deg);



































        }



































        /* Dropdown Menu */



































        .categories-dropdown {



































            position: relative;



































        }



































        .categories-dropdown-menu {



































            position: absolute;



































            top: calc(100% + 10px);



































            left: 0;



































            min-width: 280px;



































            max-height: 70vh;



































            overflow-y: auto;



































            overflow-x: visible;



































            background-color: var(--white);



































            border-radius: 12px;



































            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);



































            opacity: 0;



































            visibility: hidden;



































            transform: translateY(-10px);



































            transition: all 0.3s ease;



































            z-index: 1000;



































        }



































        /* Dropdown scrollbar styling */



































        .categories-dropdown-menu::-webkit-scrollbar {



































            width: 6px;



































        }



































        .categories-dropdown-menu::-webkit-scrollbar-track {



































            background: #f1f1f1;



































            border-radius: 3px;



































        }



































        .categories-dropdown-menu::-webkit-scrollbar-thumb {



































            background: #3ea635;



































            border-radius: 3px;



































        }



































        .categories-dropdown-menu::-webkit-scrollbar-thumb:hover {



































            background: #2d7a28;



































        }



































        .categories-dropdown-menu.active {



































            opacity: 1;



































            visibility: visible;



































            transform: translateY(0);



































        }



































        .category-dropdown-item {



































            display: flex;



































            align-items: center;



































            gap: 12px;



































            padding: 14px 20px;



































            color: var(--text-dark);



































            text-decoration: none;



































            font-size: 14px;



































            font-weight: 500;



































            transition: all 0.2s ease;



































            border-bottom: 1px solid #f0f0f0;



































        }



































        /* Hierarchical dropdown styles */



































        .category-dropdown-item-wrapper {



































            position: relative;



































        }



































        .category-dropdown-item-wrapper:last-child .category-dropdown-item {



































            border-bottom: none;



































        }



































        .category-dropdown-item-wrapper .category-dropdown-item {



































            justify-content: flex-start;



































        }



































        .subcategory-arrow {



































            margin-left: auto;



































            opacity: 0.5;



































            transition: all 0.2s ease;



































        }



































        .category-dropdown-item-wrapper:hover .subcategory-arrow {



































            opacity: 1;



































            transform: translateX(3px);



































        }



































        .subcategory-dropdown {



































            position: absolute;



































            left: 100%;



































            top: 0;



































            min-width: 220px;



































            background: var(--white);



































            border-radius: 12px;



































            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);



































            opacity: 0;



































            visibility: hidden;



































            transform: translateX(-10px);



































            transition: all 0.2s ease;



































            z-index: 1001;



































            max-height: 400px;



































            overflow-y: auto;



































        }



































        /* Subcategory ekran dışına taşmasın */



































        @media (min-width: 993px) {



































            .categories-dropdown-menu {



































                overflow: visible;



































            }



































            .subcategory-dropdown {



































                /* Sağa taşarsa sola aç */



































                right: auto;



































            }



































        }



































        /* Desktop: hover ile aç - KALDIRILDI, tıklama ile açılacak */



































        /* .category-dropdown-item-wrapper:hover .subcategory-dropdown { ... } */



































        /* Tıklama ile subcategory açma (hem mobil hem desktop) */



































        .category-dropdown-item-wrapper.has-children.subcategory-open .subcategory-dropdown {



































            opacity: 1;



































            visibility: visible;



































            transform: translateX(0);



































        }



































        /* Mobil için subcategory toggle - inline göster */



































        @media (max-width: 992px) {



































            .category-dropdown-item-wrapper.has-children.subcategory-open .subcategory-dropdown {



































                position: relative;



































                left: 0;



































                width: 100%;



































                box-shadow: none;



































                border-radius: 0;



































                background: #f8f8f8;



































                max-height: none;



































            }



































        }



































        .subcategory-item {



































            display: flex;



































            align-items: center;



































            gap: 10px;



































            padding: 12px 18px;



































            color: var(--text-dark);



































            text-decoration: none;



































            font-size: 13px;



































            font-weight: 400;



































            transition: all 0.2s ease;



































            border-bottom: 1px solid #f0f0f0;



































        }



































        .subcategory-item:last-child {



































            border-bottom: none;



































        }



































        .subcategory-item:hover {



































            background-color: rgba(62, 166, 53, 0.08);



































            padding-left: 22px;



































        }



































        .subcategory-item .category-dropdown-icon {



































            width: 20px;



































            height: 20px;



































        }



































        .category-dropdown-item:last-child {



































            border-bottom: none;



































        }



































        .category-dropdown-item:hover {



































            background-color: rgba(62, 166, 53, 0.08);



































            padding-left: 24px;



































        }



































        .category-dropdown-item span {



































            font-size: 20px;



































            flex-shrink: 0;



































        }



































        .category-dropdown-icon {



































            width: 24px;



































            height: 24px;



































            object-fit: contain;



































            margin-right: 10px;



































            flex-shrink: 0;



































            border-radius: 6px;



































        }



































        /* Main Categories - Horizontal Scroll with Auto-slide */



































        .main-categories {



































            display: flex;



































            align-items: center;



































            gap: 25px;



































            flex: 1;



































            overflow-x: auto;



































            overflow-y: hidden;



































            scrollbar-width: none;



































            -ms-overflow-style: none;



































            scroll-behavior: smooth;



































            padding: 5px 0;



































            position: relative;



































        }



































        .main-categories::-webkit-scrollbar {



































            display: none;



































        }



































        /* Auto-scroll animation wrapper */



































        .main-categories-wrapper {



































            position: relative;



































            flex: 1;



































            overflow: hidden;



































            mask-image: linear-gradient(to right, transparent, black 30px, black calc(100% - 30px), transparent);



































            -webkit-mask-image: linear-gradient(to right, transparent, black 30px, black calc(100% - 30px), transparent);



































        }



































        .main-categories-inner {



































            display: flex;



































            align-items: center;



































            gap: 25px;



































            animation: scrollCategories 30s linear infinite;



































            width: max-content;



































        }



































        .main-categories-inner:hover {



































            animation-play-state: paused;



































        }



































        @keyframes scrollCategories {



































            0% {



































                transform: translateX(0);



































            }



































            100% {



































                transform: translateX(-50%);



































            }



































        }



































        /* Scroll buttons for manual control - hidden */



































        .category-scroll-btn {



































            display: none !important;



































        }



































        .category-scroll-btn:hover {



































            background: white;



































            transform: translateY(-50%) scale(1.1);



































        }



































        .category-scroll-btn.scroll-left {



































            left: 260px;



































        }



































        .category-scroll-btn.scroll-right {



































            right: 10px;



































        }



































        .category-scroll-btn svg {



































            width: 16px;



































            height: 16px;



































            color: #3ea635;



































        }



































        .category-link {



































            color: var(--white);



































            text-decoration: none;



































            font-size: 14px;



































            font-weight: 500;



































            white-space: nowrap;



































            padding: 8px 16px;



































            border-radius: 20px;



































            transition: all 0.3s ease;



































            position: relative;



































        }



































        .category-link::after {



































            content: '';



































            position: absolute;



































            bottom: 0;



































            left: 50%;



































            width: 0;



































            height: 2px;



































            background-color: var(--white);



































            transition: all 0.3s ease;



































            transform: translateX(-50%);



































        }



































        .category-link:hover {



































            background-color: rgba(255, 255, 255, 0.15);



































        }



































        .category-link:hover::after {



































            width: 80%;



































        }



































        /* Mobile Menu */



































        .mobile-menu {



































            position: fixed;



































            top: 40px;



































            right: -100%;



































            width: 280px;



































            height: calc(100vh - 40px);



































            background-color: var(--white);



































            box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);



































            transition: right 0.3s ease;



































            z-index: 999;



































            overflow-y: auto;



































            display: flex;



































            flex-direction: column;



































            padding-bottom: env(safe-area-inset-bottom, 20px);



































        }



































        .mobile-menu.active {



































            right: 0;



































        }



































        .mobile-menu-overlay {



































            position: fixed;



































            top: 40px;



































            left: 0;



































            width: 100%;



































            height: calc(100vh - 40px);



































            background-color: rgba(0, 0, 0, 0.5);



































            opacity: 0;



































            visibility: hidden;



































            transition: opacity 0.3s ease, visibility 0.3s ease;



































            z-index: 998;



































        }



































        .mobile-menu-overlay.active {



































            opacity: 1;



































            visibility: visible;



































        }



































        /* Mobile Menu Content */



































        .mobile-menu-header {



































            display: flex;



































            justify-content: space-between;



































            align-items: center;



































            padding: 20px;



































            border-bottom: 1px solid #e0e0e0;



































        }



































        .mobile-menu-header h3 {



































            font-size: 18px;



































            font-weight: 600;



































            color: var(--text-dark);



































        }



































        .mobile-menu-close {



































            background: none;



































            border: none;



































            cursor: pointer;



































            padding: 5px;



































            color: var(--text-dark);



































            transition: color 0.2s ease;



































        }



































        .mobile-menu-close:hover {



































            color: var(--primary-green);



































        }



































        .mobile-menu-list {



































            list-style: none;



































            padding: 10px 0;



































            flex: 1;



































            overflow-y: auto;



































        }



































        .mobile-menu-list li {



































            margin: 0;



































        }



































        .mobile-menu-link {


































            display: flex;


































            align-items: center;


































            gap: 15px;


































            padding: 16px 20px;


































            color: var(--text-dark);



































            text-decoration: none;



































            font-size: 16px;



































            font-weight: 500;



































            transition: all 0.2s ease;



































            border-left: 3px solid transparent;



































        }



        .mobile-menu-text-with-badge {

            display: inline-flex;

            align-items: center;

            gap: 8px;

        }



        .mobile-menu-text-with-badge .nav-new-badge {

            min-width: 32px;

            height: 17px;

            font-size: 9px;

        }


































        .mobile-menu-link:hover {



































            background-color: rgba(62, 166, 53, 0.08);



































            border-left-color: var(--primary-green);



































        }



































        .mobile-menu-link.active {



































            background-color: rgba(62, 166, 53, 0.12);



































            border-left-color: var(--primary-green);



































            color: var(--primary-green);



































        }



































        .mobile-menu-link svg {



































            flex-shrink: 0;



































        }



































        .mobile-menu-footer {



































            position: sticky;



































            bottom: 0;



































            left: 0;



































            width: 100%;



































            padding: 15px 20px;



































            padding-bottom: calc(15px + env(safe-area-inset-bottom, 0px));



































            border-top: 1px solid #e0e0e0;



































            background-color: #f8f9fa;



































            margin-top: auto;



































            flex-shrink: 0;



































            margin-bottom: 10px;



































        }



































        .mobile-menu-auth {



































            display: flex;



































            align-items: center;



































            justify-content: center;



































            gap: 10px;



































            padding: 14px 20px;



































            background-color: var(--primary-green);



































            color: white;



































            text-decoration: none;



































            border-radius: 12px;



































            font-weight: 600;



































            transition: all 0.3s ease;



































        }



































        .mobile-menu-auth:hover {



































            background-color: var(--dark-green);



































            transform: translateY(-2px);



































        }



































        /* Responsive - 1000px (Hide top links, show hamburger) */



































        @media (max-width: 1000px) {



































            .top-header-links {



































                display: none !important;



































            }



































            .hamburger-menu {



































                display: flex;



































            }



































        }



































        /* Responsive - Tablet */



































        @media (max-width: 1024px) {



































            .main-header-container {



































                gap: 20px;



































            }



































            .search-container {



































                max-width: 400px;



































            }



































            .auth-text {



































                display: none;



































            }



































            .cart-info {



































                display: none;



































            }



































        }



































        /* Responsive - Mobile */



































        @media (max-width: 768px) {



































            .main-header-container {



































                padding: 12px 15px;



































                gap: 15px;



































            }



































            .main-logo img {



































                height: 40px;



































            }



































            .search-container {



































                flex: 1;



































                max-width: none;



































            }



































            .search-input {



































                height: 40px;



































                font-size: 13px;



































                padding: 0 45px 0 15px;



































            }



































            .search-button {



































                width: 35px;



































                height: 35px;



































            }



































            .auth-button {



































                padding: 10px;



































            }



































            .cart-button {



































                padding: 10px;



































            }



































            /* Global Container Mobile */



































            .container {



































                padding: 0 20px;



































            }



































            .main-header-container {



































                padding: 12px 20px;



































            }



































            .top-header-wrapper {



































                padding: 0 20px;



































            }



































            /* Category Bar Mobile */



































            .category-bar {



































                top: 118px;



































            }



































            .category-bar-container {



































                padding: 0 20px;



































                gap: 15px;



































                height: 48px;



































            }



































            .categories-btn {



































                padding: 8px 16px;



































                font-size: 14px;



































            }



































            .main-categories {



































                gap: 15px;



































            }



































            .category-link {



































                font-size: 13px;



































                padding: 6px 14px;



































            }



































        }



































        /* Responsive - Small Mobile */



































        @media (max-width: 480px) {



































            /* Global Container Small Mobile */



































            .container {



































                padding: 0 15px;



































            }



































            .main-header-container {



































                padding: 12px 15px;



































                gap: 10px;



































            }



































            .top-header-wrapper {



































                padding: 0 15px;



































            }



































            .category-bar-container {



































                padding: 0 15px;



































            }



































            .social-links {



































                gap: 10px;



































            }



































            .social-link {



































                font-size: 14px;



































            }



































            .main-logo img {



































                height: 35px;



































            }



































            .search-input {



































                height: 38px;



































                font-size: 12px;



































            }



































            .auth-button svg,



































            .cart-button svg {



































                width: 18px;



































                height: 18px;



































            }



































        }



































/* Tes



































timonials Responsive */



































@media (max-width: 1200px) {



































    .testimonials-wrapper {



































        padding: 0 60px;



































    }



































    .testimonial-card {



































        padding: 35px 30px;



































    }



































}



































@media (max-width: 992px) {



































    .testimonials-section {



































        padding: 80px 0;



































    }



































    .testimonials-container {



































        gap: 25px;



































    }



































    .testimonial-card {



































        flex: 0 0 calc(50% - 15px);



































        min-width: calc(50% - 15px);



































    }



































}



































@media (max-width: 768px) {



































    .testimonials-section {



































        padding: 60px 0;



































    }



































    .testimonials-wrapper {



































        padding: 0 50px;



































    }



































    .testimonial-card {



































        flex: 0 0 100%;



































        min-width: 100%;



































        padding: 30px 25px;



































    }



































    .testimonial-text {



































        font-size: 15px;



































    }



































    .testimonial-nav {



































        width: 50px;



































        height: 50px;



































    }



































}



































@media (max-width: 480px) {



































    .testimonials-wrapper {



































        padding: 0 40px;



































    }



































    .testimonial-card {



































        padding: 25px 20px;



































    }



































    .testimonial-stars {



































        font-size: 18px;



































    }



































    .author-avatar {



































        width: 50px;



































        height: 50px;



































        font-size: 24px;



































    }



































    .author-name {



































        font-size: 16px;



































    }



































    .testimonial-nav {



































        width: 45px;



































        height: 45px;



































    }



































}



































/* =============================================



































   USER DROPDOWN STYLES



































   ============================================= */



































.user-dropdown {



































    position: relative;



































}



































.user-button {



































    display: flex;



































    align-items: center;



































    gap: 8px;



































    padding: 10px 16px;



































    background: transparent;



































    border: 2px solid var(--border-gray);



































    border-radius: 10px;



































    cursor: pointer;



































    transition: all 0.3s ease;



































    font-size: 14px;



































    font-weight: 500;



































    color: var(--text-dark);



































}



































.user-button:hover {



































    border-color: var(--primary-green);



































    background: var(--light-green);



































}



































.user-avatar-img {



































    width: 32px;



































    height: 32px;



































    border-radius: 50%;



































    object-fit: cover;



































    border: 2px solid var(--primary-green);



































}



































.user-avatar-placeholder {



































    width: 32px;



































    height: 32px;



































    border-radius: 50%;



































    background: linear-gradient(135deg, var(--primary-green), var(--dark-green));



































    display: flex;



































    align-items: center;



































    justify-content: center;



































    color: white;



































    font-weight: 700;



































    font-size: 14px;



































}



































.user-button .user-name {



































    max-width: 120px;



































    overflow: hidden;



































    text-overflow: ellipsis;



































    white-space: nowrap;



































}



































.user-button .dropdown-arrow {



































    transition: transform 0.3s ease;



































}



































.user-dropdown-menu {



































    position: absolute;



































    top: calc(100% + 8px);



































    right: 0;



































    min-width: 220px;



































    background: var(--white);



































    border-radius: 12px;



































    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);



































    opacity: 0;



































    visibility: hidden;



































    transform: translateY(-10px);



































    transition: all 0.3s ease;



































    z-index: 1000;



































    overflow: hidden;



































}



































.user-dropdown-menu.show {



































    opacity: 1;



































    visibility: visible;



































    transform: translateY(0);



































}



































.user-dropdown-header {



































    padding: 14px 16px;



































    background: var(--light-green);



































    border-bottom: 1px solid var(--border-gray);



































}



































.user-dropdown-header .user-email {



































    font-size: 13px;



































    color: var(--text-muted);



































    display: block;



































    overflow: hidden;



































    text-overflow: ellipsis;



































    white-space: nowrap;



































}



































.user-dropdown-item {



































    display: flex;



































    align-items: center;



































    gap: 12px;



































    padding: 12px 16px;



































    color: var(--text-dark);



































    text-decoration: none;



































    font-size: 14px;



































    transition: all 0.2s ease;



































    border: none;



































    background: none;



































    width: 100%;



































    cursor: pointer;



































    text-align: left;



































}



































.user-dropdown-item:hover {



































    background: var(--light-green);



































    color: var(--primary-green);



































}



































.user-dropdown-item.logout-btn {



































    border-top: 1px solid var(--border-gray);



































    color: #ff4757;



































}



































.user-dropdown-item.logout-btn:hover {



































    background: #ffe5e7;



































    color: #ff4757;



































}



































/* Mobile User Info */



































.mobile-user-info {



































    padding: 15px 0;



































    border-bottom: 1px solid var(--border-gray);



































    margin-bottom: 15px;



































}



































.mobile-user-name {



































    display: block;



































    font-size: 16px;



































    font-weight: 600;



































    color: var(--text-dark);



































    margin-bottom: 4px;



































}



































.mobile-user-email {



































    display: block;



































    font-size: 13px;



































    color: var(--text-muted);



































}



































.mobile-menu-auth.logout {



































    background: #ffe5e7;



































    color: #ff4757;



































    border: none;



































}



































.mobile-menu-auth.logout:hover {



































    background: #ffcdd2;



































}



































/* Responsive */



































@media (max-width: 768px) {



































    .user-button .user-name {



































        display: none;



































    }



































    .user-button {



































        padding: 10px;



































    }



































}



































:root {



































    --primary-green: #3ea635;



































    --dark-green: #2d7a28;



































    --light-green: #e8f5e6;



































}



































/* Kategori İkon Stilleri */



































.category-icon img {



































    width: 100%;



































    height: 100%;



































    object-fit: contain;



































    border-radius: 8px;



































}



































.category-title-icon {



































    width: 32px;



































    height: 32px;



































    object-fit: contain;



































    margin-right: 12px;



































    vertical-align: middle;



































    border-radius: 6px;



































}



































.icon-fallback {



































    width: 100%;



































    height: 100%;



































    display: flex;



































    align-items: center;



































    justify-content: center;



































    font-size: inherit;



































    background: var(--primary-green);



































    color: white;



































    border-radius: 8px;



































}



































/* ==================== Language Selector ==================== */



































.language-selector {



































    position: relative;



































    margin-right: 12px;



































}



































.language-btn {



































    display: flex;



































    align-items: center;



































    gap: 6px;



































    padding: 6px 10px;



































    background: rgba(255, 255, 255, 0.1);



































    border: 1px solid rgba(255, 255, 255, 0.2);



































    border-radius: 20px;



































    color: white;



































    cursor: pointer;



































    transition: all 0.3s ease;



































    font-size: 12px;



































    font-weight: 500;



































}



































.language-btn:hover {



































    background: rgba(255, 255, 255, 0.2);



































    border-color: rgba(255, 255, 255, 0.3);



































}



































.language-btn svg {



































    opacity: 0.9;



































}



































.current-lang {



































    font-weight: 600;



































}



































.language-dropdown {



































    position: absolute;



































    top: calc(100% + 8px);



































    right: 0;



































    background: white;



































    border-radius: 12px;



































    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);



































    min-width: 160px;



































    opacity: 0;



































    visibility: hidden;



































    transform: translateY(-10px);



































    transition: all 0.3s ease;



































    z-index: 1000;



































    overflow: hidden;



































}



































.language-selector:hover .language-dropdown,



































.language-dropdown.show {



































    opacity: 1;



































    visibility: visible;



































    transform: translateY(0);



































}



































.lang-option {



































    display: flex;



































    align-items: center;



































    gap: 10px;



































    padding: 12px 16px;



































    color: #333;



































    text-decoration: none;



































    transition: all 0.2s ease;



































    font-size: 14px;



































}



































.lang-option:hover {



































    background: #f5f5f5;



































}



































.lang-option.active {



































    background: linear-gradient(135deg, #3ea635 0%, #2d8a27 100%);



































    color: white;



































}



































.lang-option img {



































    border-radius: 2px;



































    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);



































}



































/* Google Translate gizle (kendi tasarımımızı kullanıyoruz) */



































.goog-te-banner-frame,



































.goog-te-gadget,



































#goog-gt-tt,



































.goog-te-balloon-frame,



































div#goog-gt-,



































.goog-tooltip,



































.goog-tooltip:hover,



































.goog-text-highlight {



































    display: none !important;



































}



































body {



































    top: 0 !important;



































}



































.skiptranslate {



































    display: none !important;



































}



































body > .skiptranslate {



































    display: none !important;



































}



































/* Mobile responsive */



































@media (max-width: 768px) {



































    .language-selector {



































        margin-right: 8px;



































    }



































    .language-btn {



































        padding: 5px 8px;



































    }



































    .language-btn svg {



































        width: 14px;



































        height: 14px;



































    }



































    .current-lang {



































        font-size: 11px;



































    }



































    .language-dropdown {



































        right: -20px;



































        min-width: 140px;



































    }



































    .lang-option {



































        padding: 10px 14px;



































        font-size: 13px;



































    }



































}



































/* Product Warning Badge - Ürün Uyarı Rozeti */



































.product-warning-badge {



































    position: absolute;



































    bottom: 8px;



































    left: 10px;



































    right: 10px;



































    display: flex;



































    align-items: flex-start;



































    gap: 4px;



































    background: rgba(220, 53, 69, 0.95);



































    color: white;



































    padding: 4px 8px;



































    border-radius: 8px;



































    font-size: 14px;



































    font-weight: 600;



































    z-index: 5;



































    white-space: normal;



































    text-align: left;



































    line-height: 1.2;



































    box-shadow: 0 2px 6px rgba(220, 53, 69, 0.4);



































}



































.product-warning-badge svg {



































    flex-shrink: 0;



































    margin-top: 1px;



































    width: 12px;



































    height: 12px;



































}



































.product-warning-badge span {



































    word-wrap: break-word;



































}



































/* Dairy Products Warning Text - Başlık üstünde */



































.dairy-warning-text {



































    display: flex;



































    align-items: flex-start;



































    gap: 4px;



































    background: #fee2e2;



































    color: #dc2626;



































    padding: 4px 8px;



































    border-radius: 6px;



































    font-size: 12px;



































    font-weight: 600;



































    line-height: 1.3;



































    margin-bottom: 6px;



































    border: 1px solid #fca5a5;



































}



































.dairy-warning-text svg {



































    flex-shrink: 0;



































    margin-top: 1px;



































    width: 12px;



































    height: 12px;



































    fill: #dc2626;



































}



































.dairy-warning-text span {



































    word-wrap: break-word;



































}



































@media (max-width: 768px) {



































    .product-warning-badge {



































        font-size: 12px;



































        padding: 3px 6px;



































        gap: 3px;



































    }



































    .product-warning-badge svg {



































        width: 10px;



































        height: 10px;



































    }



































    .dairy-warning-text {



































        font-size: 12px;



































        padding: 3px 6px;



































    }



































}



































@media (max-width: 480px) {



































    .product-warning-badge {



































        font-size: 12px;



































        padding: 2px 5px;



































    }



































    .dairy-warning-text {



































        font-size: 12px;



































        padding: 2px 5px;



































    }



































}














.aktuel-home-section {


    padding: 56px 0;


    background:


        radial-gradient(circle at top left, rgba(62, 166, 53, 0.1), transparent 35%),


        linear-gradient(180deg, #f8fcf5 0%, #ffffff 100%);


}





.aktuel-home-header {


    display: flex;


    align-items: end;


    justify-content: space-between;


    gap: 24px;


    margin-bottom: 28px;


}





.aktuel-home-header h2 {


    margin: 10px 0 10px;


    font-size: clamp(2rem, 4vw, 2.8rem);


    line-height: 1.05;


    color: #18230f;


}





.aktuel-home-header p {


    max-width: 680px;


    margin: 0;


    color: #52614d;


    font-size: 1.02rem;


    line-height: 1.7;


}





.aktuel-home-eyebrow {


    display: inline-flex;


    align-items: center;


    padding: 8px 14px;


    border-radius: 999px;


    background: rgba(62, 166, 53, 0.12);


    color: #2f7f29;


    font-size: 12px;


    font-weight: 800;


    letter-spacing: 0.08em;


    text-transform: uppercase;


}





.aktuel-home-link {


    display: inline-flex;


    align-items: center;


    justify-content: center;


    padding: 14px 20px;


    border-radius: 14px;


    background: #3ea635;


    color: #fff;


    font-weight: 700;


    text-decoration: none;


    white-space: nowrap;


    box-shadow: 0 16px 28px rgba(62, 166, 53, 0.2);


    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;


}





.aktuel-home-link:hover {


    color: #fff;


    background: #348d2d;


    transform: translateY(-2px);


    box-shadow: 0 22px 34px rgba(62, 166, 53, 0.24);


}





.aktuel-home-grid {


    display: grid;


    grid-template-columns: repeat(3, minmax(0, 1fr));


    gap: 24px;


}





.aktuel-home-card {


    display: flex;


    flex-direction: column;


    min-width: 0;


    border-radius: 28px;


    overflow: hidden;


    text-decoration: none;


    color: inherit;


    background: #fff;


    border: 1px solid #e4ecdf;


    box-shadow: 0 18px 40px rgba(26, 44, 18, 0.08);


    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;


}





.aktuel-home-card:hover {


    transform: translateY(-6px);


    border-color: #cfe3c2;


    box-shadow: 0 26px 48px rgba(26, 44, 18, 0.12);


}





.aktuel-home-preview {


    position: relative;


    aspect-ratio: 4 / 5;


    background: linear-gradient(180deg, #eff7e9 0%, #ffffff 100%);


    border-bottom: 1px solid #edf2e8;


    overflow: hidden;


}





.aktuel-home-preview-media {

    width: 100%;

    height: 100%;

    border: 0;

    object-fit: cover;

    background: #fff;

    pointer-events: none;

}



.aktuel-home-preview-media.aktuel-pdf-cover-image {

    filter: saturate(1.14) contrast(1.06) brightness(.97);

}



.aktuel-home-preview .aktuel-pdf-preview {

    display: flex;


    align-items: center;


    justify-content: center;


    padding: 16px;


    background: linear-gradient(160deg, #eef5e9 0%, #f8fbf6 55%, #dce9d2 100%);


}





.aktuel-home-preview .aktuel-pdf-preview__sheet {

    width: 100%;

    height: 100%;

    border-radius: 24px;

    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);


    box-shadow: 0 18px 34px rgba(15, 23, 42, 0.1);


    border: 1px solid rgba(148, 163, 184, 0.18);


    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 12px;

    padding: 18px;

    position: relative;

    overflow: hidden;

    text-align: center;

}




.aktuel-home-preview .aktuel-pdf-preview__sheet::before {


    content: "";


    position: absolute;


    top: 0;


    right: 0;


    width: 84px;


    height: 84px;


    background: linear-gradient(135deg, rgba(62, 166, 53, 0.22), rgba(62, 166, 53, 0));


    border-bottom-left-radius: 24px;


}





.aktuel-home-preview .aktuel-pdf-preview__icon {

    width: 64px;


    height: 80px;


    border-radius: 18px 18px 14px 14px;


    background: linear-gradient(180deg, #ef4444 0%, #b91c1c 100%);


    display: flex;


    align-items: center;


    justify-content: center;


    box-shadow: 0 16px 28px rgba(185, 28, 28, 0.24);


}





.aktuel-home-preview .aktuel-pdf-preview__icon span {


    color: #fff;


    font-size: 0.9rem;


    font-weight: 900;


    letter-spacing: 0.08em;


}





.aktuel-home-preview .aktuel-pdf-preview__title {


    font-size: 1rem;


    line-height: 1.35;


    font-weight: 800;


    color: #111827;


    word-break: break-word;


}





.aktuel-home-preview .aktuel-pdf-preview__meta {


    font-size: 0.85rem;


    line-height: 1.45;


    color: #4b5563;


}





.aktuel-home-badge {


    position: absolute;


    top: 16px;


    left: 16px;


    z-index: 2;


    display: inline-flex;


    align-items: center;


    justify-content: center;


    padding: 7px 12px;


    border-radius: 999px;


    background: rgba(17, 24, 39, 0.86);


    color: #fff;


    font-size: 12px;


    font-weight: 800;


    letter-spacing: 0.06em;


    text-transform: uppercase;


}





.aktuel-home-body {


    display: flex;


    flex: 1;


    flex-direction: column;


    gap: 12px;


    padding: 22px;


}





.aktuel-home-body h3 {


    margin: 0;


    color: #172113;


    font-size: 1.2rem;


    line-height: 1.35;


}





.aktuel-home-body p {


    margin: 0;


    color: #5a6755;


    line-height: 1.7;


}





.aktuel-home-meta {


    display: flex;


    align-items: center;


    justify-content: space-between;


    gap: 12px;


    margin-top: auto;


    padding-top: 4px;


    color: #2e4b22;


    font-size: 0.95rem;


    font-weight: 600;


}





@media (max-width: 1024px) {


    .aktuel-home-grid {


        grid-template-columns: repeat(2, minmax(0, 1fr));


    }


}





@media (max-width: 768px) {


    .aktuel-home-section {


        padding: 42px 0;


    }





    .aktuel-home-header {


        flex-direction: column;


        align-items: stretch;


        margin-bottom: 22px;


    }





    .aktuel-home-link {


        width: 100%;


    }





    .aktuel-home-grid {


        grid-template-columns: 1fr;


        gap: 18px;


    }





    .aktuel-home-card {


        border-radius: 22px;


    }





    .aktuel-home-body {


        padding: 18px;


    }





    .aktuel-home-meta {


        flex-direction: column;


        align-items: flex-start;


    }


}