/*
Theme Name: Hanedan Tours
Theme URI: https://hanedantours.com/
Author: OZC
Author URI: https://ozc.com.tr/
Description: Custom theme for Hanedan Tours website
Version: 1.0
*/

/* Bu dosya sadece özel stiller için. Tailwind stil tanımları dist/css/style.css'de */

/* Font tanımlamaları src/css/tailwind.css'de yapılıyor */
/* Neulis Neue fontları için woff ve otf formatları kullanılıyor */

/* Google Fonts - Barlow */
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@300;400;500;600;700;800;900&display=swap');

/* Global Font - Neulis Neue */
* {
    font-family: 'Neulis Neue', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif !important;
}

body, html {
    font-family: 'Neulis Neue', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif !important;
}

/* WordPress Admin Bar Düzeltmesi */
body.admin-bar {
    --wp-admin-bar-height: 32px; /* Masaüstü için varsayılan */
}

@media screen and (max-width: 782px) {
    body.admin-bar {
        --wp-admin-bar-height: 46px; /* Mobil için varsayılan */
    }
    body.admin-bar #wpadminbar {
        position: fixed !important; /* Mobilde scroll sırasında sabit kalması için */
    }
}

/* Header Shadow */
.site-header {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

/* Swiper Custom Styles */
.swiper-pagination-bullet {
    opacity: 0.5;
    background-color: #fff;
    width: 12px !important;
    height: 3px !important;
    border-radius: 0 !important;
    transition: opacity 0.3s ease;
}

.swiper-pagination-bullet-active,
.swiper-pagination-bullet:hover {
    opacity: 1 !important;
}

.swiper-button-prev,
.swiper-button-next {
    color: #fff !important;
    top: auto !important;
    bottom: 20px !important;
    background-color: rgba(0, 0, 0, 0.5);
    width: 40px !important;
    height: 40px !important;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.swiper-button-prev:after,
.swiper-button-next:after {
    font-size: 18px !important;
}

.swiper-button-prev {
    left: 20px !important;
}

.swiper-button-next {
    right: 20px !important;
}

/* Slider Overlay - Tamamen kaldırıldı */
.home-slider .swiper-slide::before {
    display: none;
}

/* Slider görsellerinin tam görünmesi için stil düzenlemeleri */
.home-slider {
    margin-top: 0; /* Header ile slider arasında boşluk kaldırıldı */
    position: relative;
    z-index: 1; /* Header'dan düşük z-index */
}

/* Admin bar varsa ekstra padding - sıfırlandı */
body.admin-bar .home-slider {
    padding-top: 0;
}

.home-slider .swiper-slide {
    background-color: #f5f5f5;
    height: auto;
    aspect-ratio: 1920/500; /* 1920x500 boyutundaki görseller için oran */
    overflow: hidden;
}

/* Mobilde slider boyutu */
@media (max-width: 768px) {
    .home-slider .swiper-slide {
        height: auto;
        aspect-ratio: 1920/1000;
    }
    
    .home-slider .swiper-slide img {
        object-fit: cover;
        object-position: 0% center;
        width: 100%;
        height: 100%;
        transform: translateX(0);
    }
    
    .home-slider {
        margin-top: 0; /* Header ile slider arasında boşluk kaldırıldı */
        padding-bottom: 10px; /* Alt kısımda da biraz boşluk */
        position: relative;
        z-index: 1; /* Header'dan düşük z-index */
    }
    
    body.admin-bar .home-slider {
        padding-top: 0;
    }
}

.home-slider .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 30% center;
}

/* Mobil görünümde görselin sol tarafının görünmesi */
@media (max-width: 767px) {
    .home-slider .swiper-slide img {
        object-position: 30% center;
    }
}

/* Slider Text Styles */
.slider-title {
    font-family: 'Barlow', sans-serif !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    font-weight: 700;
    font-size: 3rem; /* 48px - desktop için küçültüldü */
    line-height: 1.0;
}

.slider-subtitle {
    font-family: 'Barlow', sans-serif !important;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
    font-weight: 400;
    font-size: 3rem; /* 48px - desktop için küçültüldü */
    line-height: 1.0;
    margin-bottom: 1.5rem;
}

/* Mobil cihazlarda slider text boyutları */
@media (max-width: 767px) {
    .slider-title {
        font-size: 1.75rem !important;
        line-height: 1.0;
    }
    
    .slider-subtitle {
        font-size: 1.75rem !important;
        line-height: 1.0;
        margin-bottom: 1rem !important;
    }
}

/* FAQ Styles */
.faq-item .faq-content {
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s ease-out;
    padding: 0 1.5rem;
    opacity: 0;
}

.faq-item .faq-content.show {
    max-height: 500px;
    padding: 1.5rem;
    padding-top: 0;
    opacity: 1;
}

.faq-toggle {
    width: 100%;
    text-align: left;
    padding: 1rem 1.5rem;
    background: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s ease;
}

.faq-toggle:hover {
    background: #f8f8f8;
}

.faq-toggle .faq-icon {
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.faq-toggle.active .faq-icon {
    transform: rotate(180deg);
}

.faq-item {
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    margin-bottom: 0.75rem;
    overflow: hidden;
    background: white;
    max-width: 100%;
}

/* Header Styles */
.site-header {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-top: 4px solid;
    border-image: linear-gradient(to right, #88b825 0 25%, #1b3c57 25% 100%) 1;
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
}

/* Ana Menü Stilleri */
.main-menu {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.main-navigation ul {
    gap: 1rem;
}

.main-menu li {
    position: relative;
}

.main-menu li a {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 4px 0;
    font-weight: 500;
}

.main-menu li a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 4px;
    background-color: #88b825;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.main-menu li:hover a::after,
.main-menu li.current-menu-item a::after {
    width: 100%;
}

.main-menu li:hover a,
.main-menu li.current-menu-item a {
    font-weight: 700;
}

/* Dropdown Menü */
.main-menu .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background: white;
    border-radius: 12px;
    padding: 8px;
    margin-top: 8px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
}

.main-menu li:hover > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.main-menu .sub-menu li {
    display: block;
    margin: 0;
}

.main-menu .sub-menu a {
    display: flex;
    padding: 8px 16px;
    color: #374151 !important;
    font-size: 14px;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.main-menu .sub-menu a:hover {
    background: #f3f4f6;
    color: var(--wp--preset--color--primary) !important;
}

.main-menu .sub-menu a::after {
    display: none;
}

/* Dropdown Ok İşareti */
.main-menu .menu-item-has-children > a {
    padding-right: 16px;
}

.main-menu .menu-item-has-children > a::before {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    width: 8px;
    height: 8px;
    border: 2px solid currentColor;
    border-left: 0;
    border-top: 0;
    transform: translateY(-70%) rotate(45deg);
    transition: transform 0.3s ease;
}

.main-menu .menu-item-has-children:hover > a::before {
    transform: translateY(-30%) rotate(225deg);
}

/* Mobil Menü Stilleri */
#mobile-menu {
    height: 100vh !important;
    max-height: 100vh !important;
}

.mobile-menu {
    display: flex;
    flex-direction: column;
}

.mobile-menu li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    color: #374151;
    font-size: 0.875rem;
    font-weight: 500;
    border-bottom: 1px solid #F3F4F6;
    transition: all 0.3s ease;
}

.mobile-menu li a:hover,
.mobile-menu li.current-menu-item a {
    color: var(--wp--preset--color--primary);
    background-color: #F9FAFB;
    padding-left: 2rem;
}

.mobile-menu li a svg {
    width: 1rem;
    height: 1rem;
    opacity: 0.5;
    transition: transform 0.3s ease;
}

.mobile-menu li a:hover svg {
    transform: translateX(4px);
    opacity: 1;
}

/* Transparan Header Durumu (Anasayfa) */
.is-homepage .main-navigation {
    background-color: transparent;
}

.is-homepage .main-menu li a {
    color: #fff !important;
}

.is-homepage .main-menu li a:hover,
.is-homepage .main-menu li.current-menu-item a {
    color: rgba(255, 255, 255, 0.8) !important;
    font-weight: 800;
}

/* Normal Header Durumu */
.not-homepage .main-menu li a {
    color: #333 !important;
}

.not-homepage .main-menu li a:hover,
.not-homepage .main-menu li.current-menu-item a {
    color: #88b825 !important;
    font-weight: 800;
}

/* Scroll Durumu */
.site-header.scrolled .main-navigation {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.site-header.scrolled {
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.is-homepage.scrolled .main-navigation {
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(8px);
}

/* Animasyonlar */
@keyframes menuSlideIn {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes menuFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

#mobile-menu {
    transition: visibility 0.3s;
}

#mobile-menu.hidden {
    visibility: hidden;
}

#mobile-menu:not(.hidden) {
    animation: menuFadeIn 0.3s ease;
}

#mobile-menu:not(.hidden) > div {
    animation: menuSlideIn 0.3s ease;
}

/* Responsive Ayarlar */
@media (max-width: 1023px) {
    .site-header .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    .main-navigation {
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
    }
    
    /* Mobilde logo boyutu küçültme */
    .logo-link img {
        max-width: 180px;
    }
    
    /* Anasayfadaki umre turlarımız başlığı ve açıklama fontunu küçültme */
    .container h2.text-\[30px\] {
        font-size: 24px;
    }
    .container p.text-\[16\.8px\] {
        font-size: 14px;
    }
}

/* Transparan header durumu - beyaz metin (sadece anasayfa) */
.is-homepage .phone-link,
.is-homepage .main-menu li a,
.is-homepage .lang-item {
    color: #fff;
    transition: color 0.3s ease, font-weight 0.3s ease;
}

/* Menü öğeleri hover ve aktif stilleri */
.main-menu li a {
    position: relative;
    padding-bottom: 5px;
    font-weight: 500;
}

.main-menu li a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 4px;
    bottom: 0;
    left: 0;
    background-color: #88b825;
    transition: width 0.3s ease;
}

.main-menu li a:hover::after,
.main-menu li.current-menu-item a::after {
    width: 100%;
}

.main-menu li a:hover,
.main-menu li.current-menu-item a {
    font-weight: 700;
}

.is-homepage .main-menu li a:hover,
.is-homepage .main-menu li.current-menu-item a {
    color: rgba(255, 255, 255, 0.8);
    font-weight: 600;
}

.is-homepage .phone-link:hover {
    color: rgba(255, 255, 255, 0.8);
    font-weight: 600;
}

.is-homepage .menu-divider {
    border-color: rgba(255, 255, 255, 0.4);
}

/* Scroll yapılmış haldeki header */
.is-homepage.scrolled .main-menu li a,
.is-homepage.scrolled .phone-link,
.is-homepage.scrolled .lang-item {
    color: #fff !important;
}

/* Branch contact bilgileri için scrolled durumu */
.is-homepage.scrolled .branch-contact {
    color: rgba(255, 255, 255, 0.8) !important;
}

.is-homepage.scrolled .branch-contact a {
    color: rgba(255, 255, 255, 0.8) !important;
}

.is-homepage.scrolled .main-menu li a:hover,
.is-homepage.scrolled .main-menu li.current-menu-item a,
.is-homepage.scrolled .phone-link:hover,
.is-homepage.scrolled .lang-item:hover {
    color: rgba(255, 255, 255, 0.8) !important;
    font-weight: 600;
}

.is-homepage.scrolled .main-menu li a:hover::after,
.is-homepage.scrolled .main-menu li.current-menu-item a::after {
    background-color: #fff;
}

.is-homepage.scrolled .menu-divider {
    border-color: rgba(255, 255, 255, 0.2);
}

/* Tüm sayfalar için beyaz header */
.not-homepage div.bg-white {
    background-color: #fff !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Anasayfa için scroll durumunda arka plan */
.is-homepage.scrolled div {
    background-color: rgba(0, 0, 0, 0.9) !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Alt sayfalarda branch contact bilgileri */
.not-homepage .branch-contact {
    color: #374151 !important;
}

.not-homepage .branch-contact a {
    color: #374151 !important;
}

.not-homepage .phone-link,
.not-homepage .main-menu li a,
.not-homepage .lang-item {
    color: #333 !important;
    transition: color 0.3s ease;
}

.not-homepage .phone-link:hover,
.not-homepage .main-menu li a:hover,
.not-homepage .main-menu li.current-menu-item a,
.not-homepage .lang-item:hover {
    color: #1b3c57 !important;
}

/* Footer Styles - Fixed */
/* Footer artık grid ile düzenlendiği için eski footer-widgets classına gerek yok */

/* Main content padding - header artık relative olduğu için padding kaldırıldı */
.site-main {
    padding-top: 0;
}

@media (min-width: 768px) {
    .site-main {
        padding-top: 0;
    }
}

/* Anasayfa ve slider içeriği için padding sıfırla */
.home .site-main,
.page-template-page-home .site-main {
    padding-top: 0;
}

/* Slider içinden başlayan içerik */
.swiper-slide .relative.z-10 {
    padding-top: 0;
}

@media (max-width: 768px) {
    .swiper-slide .relative.z-10 {
        padding-top: 0;
    }
}

/* Kurumsal Sayfası Özel Stilleri */
.page-template-page-kurumsal .site-main section {
    position: relative;
    overflow: hidden;
}

.page-template-page-kurumsal h2 {
    position: relative;
    z-index: 1;
}

.page-template-page-kurumsal .vision-mission-card {
    transition: all 0.3s ease;
}

.page-template-page-kurumsal .vision-mission-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.page-template-page-kurumsal .about-image-container::before {
    content: '';
    position: absolute;
    top: -15px;
    left: -15px;
    width: 80px;
    height: 80px;
    border-radius: 12px;
    background-color: rgba(var(--color-primary-rgb), 0.2);
    z-index: 0;
}

.page-template-page-kurumsal .about-image-container::after {
    content: '';
    position: absolute;
    bottom: -15px;
    right: -15px;
    width: 80px;
    height: 80px;
    border-radius: 12px;
    background-color: rgba(var(--color-primary-rgb), 0.2);
    z-index: 0;
}

.page-template-page-kurumsal .values-card {
    transition: all 0.3s ease;
}

.page-template-page-kurumsal .values-card:hover {
    border-color: rgba(var(--color-primary-rgb), 0.2);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Kurumsal sayfasındaki animasyonlar */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.page-template-page-kurumsal .animated {
    animation-duration: 0.8s;
    animation-fill-mode: both;
}

.page-template-page-kurumsal .fadeInUp {
    animation-name: fadeInUp;
}

/* Scroll animasyonu için */
.page-template-page-kurumsal .reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
}

.page-template-page-kurumsal .reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Telefon numarası stilleri */
.not-homepage .phone-link {
    color: #333 !important;
}

.not-homepage .phone-link:hover {
    color: #1b3c57 !important;
}

/* Scroll yapılmış haldeki telefon numarası */
.is-homepage.scrolled .phone-link {
    color: #fff !important;
}

.is-homepage.scrolled .phone-link:hover {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Tüm sayfalar için beyaz header */
.not-homepage div.bg-white {
    background-color: #fff !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.not-homepage .main-menu li a:hover,
.not-homepage .main-menu li.current-menu-item a {
    color: #1b3c57;
    font-weight: 800;
}

/* Footer Menü Stilleri */
.footer-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-menu li {
    margin-bottom: 0.75rem;
}

.footer-menu li:last-child {
    margin-bottom: 0;
}

.footer-menu li a {
    display: block;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.875rem;
    transition: all 0.3s ease;
}

.footer-menu li a:hover {
    color: var(--wp--preset--color--primary);
    transform: translateX(4px);
}

/* Mobil menü renk düzeltmesi */
.is-homepage #mobile-menu-toggle {
    color: #fff !important;
}

.is-homepage #mobile-menu-toggle svg {
    stroke: #fff;
}

.is-homepage.scrolled #mobile-menu-toggle {
    color: #fff !important;
}

.is-homepage.scrolled #mobile-menu-toggle svg {
    stroke: #fff;
}

/* Logo size adjustment */
.site-header .logo-link img {
    width: auto;
    height: auto;
    max-width: 100%;
}

/* Language selector styling */
.relative button.px-6,
.mobile-menu button[class*="lang-selector"] {
    width: 40px;
    height: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    font-weight: 700;
}

/* Homepage language selector */
.is-homepage .relative button {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: white;
}

.is-homepage .relative button:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

/* Other pages language selector */
.not-homepage .relative button {
    background-color: transparent;
    border-color: transparent;
    color: #333;
}

.not-homepage .relative button:hover {
    background-color: transparent;
}

/* Swiper Pagination Styles */
.home-slider .swiper-pagination {
    bottom: 2rem !important;
    display: flex;
    justify-content: center;
    gap: 0.5rem;
}

/* Slider görsel optimizasyonu */
.home-slider picture {
    width: 100%;
    height: 100%;
    display: block;
}

.home-slider picture img {
    will-change: transform;
    transition: transform 0.3s ease-out;
}

.home-slider .swiper-pagination-bullet {
    width: 3rem !important;
    height: 0.25rem !important;
    border-radius: 0 !important;
    background: rgba(255, 255, 255, 0.3) !important;
    opacity: 1 !important;
    transition: all 0.3s ease;
}

.home-slider .swiper-pagination-bullet-active {
    background: #fff !important;
}

/* Mobilde slider padding ve responsive ayarlar */
@media (max-width: 767px) {
    .home-slider .swiper-slide .container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
    
    /* Mobilde font boyutlarını düşür */
    .home-slider .swiper-slide h2 {
        font-size: 28px !important;
        line-height: 1.2 !important;
    }
    
    /* Mobilde slider arka plan görselinin pozisyonu ve kalitesi */
    .home-slider .swiper-slide img {
        object-position: 30% center;
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
        transform: translateZ(0);
        backface-visibility: hidden;
        -webkit-font-smoothing: subpixel-antialiased;
    }
    
    /* Tur kartlarındaki oda fiyatları mobilde alt alta */
    .tour-card .grid.grid-cols-3 {
        grid-template-columns: 1fr !important;
        gap: 0.5rem;
    }
    
    .home-slider .swiper-slide .text-sm {
        font-size: 0.75rem !important;
    }
    
    .home-slider .swiper-slide .text-15px {
        font-size: 13px !important;
    }
    
    .home-slider .swiper-slide .text-30px {
        font-size: 24px !important;
    }
    
    /* Oda fiyatları için mobil düzenlemeler */
    .home-slider .grid.grid-cols-3 {
        gap: 0.25rem;
        max-width: 100%;
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
    }
    
    .home-slider .bg-\[\#88b825\] {
        padding: 0.25rem 0.125rem;
        font-size: 10px !important;
    }
    
    .home-slider .border-\[\#88b825\] {
        padding: 0.25rem 0.125rem;
        font-size: 16px !important;
        line-height: 1;
    }
    
    /* Mobilde alt başlık ve buton düzenlemeleri */
    .home-slider .bg-white.px-4.py-2 {
        padding: 0.5rem 0.75rem;
        font-size: 13px !important;
    }
    
    /* Mobilde slider yüksekliği */
    .home-slider {
        height: 100% !important;
    }
}

/* Video Gallery Styles */
.video-card {
    transition: transform 0.2s ease-in-out;
}

.video-card:hover {
    transform: translateY(-5px);
}

.aspect-w-16 {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
}

.aspect-w-16 video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Pagination Styles */
.pagination {
    margin-top: 2rem;
}

.pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0.5rem;
    margin: 0 0.25rem;
    border-radius: 0.375rem;
    background-color: #fff;
    color: #374151;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    border: 1px solid #e5e7eb;
}

.pagination .page-numbers:hover {
    background-color: #f3f4f6;
    border-color: #d1d5db;
}

.pagination .page-numbers.current {
    background-color: #2563eb;
    color: #fff;
    border-color: #2563eb;
}

.pagination .prev,
.pagination .next {
    padding-left: 1rem;
    padding-right: 1rem;
}