:root{ --primary-color: #8B6B44; --secondary-color: #333333; --text-color: #1A1A1A; --light-color: #FFFFFF; --border-color: #E5E5E5; }

/* Genel Stiller */
body{ font-family: 'Noto Serif', serif; background-color: var(--light-color); color: var(--text-color); overflow-x: hidden; }
html{ overflow-x: hidden; }

/* Top Social Icons */
.social-icons{ text-align: right; padding: 10px 20px; border-bottom: 1px solid #eee; }
.social-icons a{ color: #000; text-decoration: none; margin-left: 15px; font-size: 14px; }
.social-icons a:nth-child(4){ margin-left: 0px; }

.account-toggle{ display: block; color: #000; padding: 8px; cursor: pointer; }

/* Search Bar */
.search-container{ position: fixed; top: 0; left: 0; width: 100%; background: white; z-index: 1060; padding: 20px; transform: translateY(-100%); transition: transform 0.3s ease-in-out; border-bottom: 1px solid #eee; box-sizing: border-box; }
.search-container.active{ transform: translateY(0); }
.search-form{ position: relative; max-width: 800px; margin: 0 auto; display: flex; align-items: center; gap: 15px; width: 100%; box-sizing: border-box; }
.search-input-wrapper{ position: relative; flex: 1; min-width: 0; }
.search-input-icon{ position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: #999; z-index: 1; }
.search-input{ width: 100%; padding: 15px 20px 15px 50px; border: 2px solid #f0f0f0; border-radius: 25px; font-size: 16px; outline: none; background: #f8f8f8; transition: all 0.3s ease; box-sizing: border-box; }
.search-input:focus{ border-color: #333; background: white; }
.search-input:focus + .search-input-icon{ color: #333; }
.search-submit{ background: #333; border: none; padding: 15px 20px; border-radius: 25px; color: white; cursor: pointer; transition: all 0.3s ease; flex-shrink: 0; min-width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; }
.search-submit:hover{ background: #555; transform: scale(1.05); }
.search-close{ background: #f0f0f0; border: none; padding: 15px 20px; border-radius: 25px; cursor: pointer; color: #666; transition: all 0.3s ease; flex-shrink: 0; min-width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; position: static; }
.search-close:hover{ background: #ddd; color: #333; transform: scale(1.05); }

/* Header */
.site-header{ padding: 15px 0; border-bottom: 1px solid #eee; }
.header-container{ display: flex; justify-content: space-between; align-items: center; padding: 0 20px; }
.logo{ text-align: center; /*flex: 1;*/ display: block; }
.logo img{ height: 100px; }
.menu-toggle, .header-icons button{ background: none; border: none; padding: 8px; cursor: pointer; transition: all 0.3s ease; }
.header-icons{ display: flex; gap: 15px; }
.header-icons button:hover{ transform: scale(1.1); }
.header-icons button svg{ transition: all 0.3s ease; }
.header-icons button:hover svg{ stroke: #555; }

/* Sliding Menus */
.side-menu{ position: fixed; top: 0; height: 100vh; width: 300px; background: white; z-index: 1050; transition: transform 0.3s ease; overflow-y: auto; }
.left-menu{ left: 0; transform: translateX(-100%); }
.right-menu{ right: 0; transform: translateX(100%); }
.menu-active{ transform: translateX(0) !important; }
.menu-overlay{ position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 1040; display: none; }
.menu-close{ position: absolute; right: 20px; top: 20px; background: none; border: none; font-size: 24px; cursor: pointer; }
.cart-close{ position: absolute; right: 20px; top: 20px; background: none; border: none; font-size: 24px; cursor: pointer; }
.menu-items{ padding: 60px 30px 30px; }

/* Ana Menü Öğeleri */
.menu-item{ border-bottom: 1px solid rgba(0,0,0,0.1); }
.menu-title{ font-size: 16px; letter-spacing: 2px; padding: 15px 0; display: flex; justify-content: space-between; align-items: center; cursor: pointer; font-weight: 400; }

/* Alt Menü Öğeleri */
.submenu{ display: none; padding-left: 20px; }
.menu-item.active > .submenu{ display: block; }
.submenu-link, .submenu-sublink{ display: block; padding: 10px 0; font-size: 14px; color: #000; text-decoration: none; display: flex; justify-content: space-between; align-items: center; }
.submenu-content, .submenu-subcontent{ display: none; padding-left: 20px; border-left: 1px solid rgba(0,0,0,0.1); }
.submenu-link.active + .submenu-content, .submenu-sublink.active + .submenu-subcontent{ display: block; }

/* Tekil Linkler */
.standalone-link{ display: block; padding: 15px 0; color: #000; text-decoration: none; font-size: 16px; letter-spacing: 2px; border-bottom: 1px solid rgba(0,0,0,0.1); }

/* İkonlar */
.menu-title i, .submenu-link i, .submenu-sublink i{ font-size: 12px; transition: transform 0.3s ease; }
.menu-item.active > .menu-title i, .submenu-link.active i, .submenu-sublink.active i{ transform: rotate(180deg); }

/* Sosyal Medya */
.menu-social{ margin-top: 30px; display: flex; gap: 20px; justify-content: center; }
.menu-social a{ color: #000; font-size: 20px; }

/* Aktif Durumlar */
.menu-item.active > .menu-title i, .submenu-link.active i, .submenu-sublink.active i{ transform: rotate(180deg); }

/* Right Menu Styles */
.cart-header{ padding: 20px; text-align: center; border-bottom: 1px solid #eee; position: relative; }
.cart-header h2{ font-size: 16px; letter-spacing: 2px; margin: 0; font-weight: 400; }
.cart-items{ padding: 20px; }
.cart-item{ display: flex; gap: 20px; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid #eee; }
.cart-item img{ width: 100px; height: 130px; object-fit: cover; }
.cart-item-details h3{ font-size: 14px; margin-bottom: 10px; font-weight: 400; }
.quantity-controls{ display: flex; align-items: center; gap: 10px; margin: 15px 0; }
.quantity-controls button{ width: 25px; height: 25px; border: 1px solid #ddd; background: none; cursor: pointer; font-size: 14px; }
.quantity-controls input{ width: 40px; text-align: center; border: none; font-size: 14px; }
.price{ font-size: 14px; }
.cart-total{ padding: 20px; border-top: 1px solid #eee; }
.cart-total h4{ font-size: 14px; font-weight: 400; letter-spacing: 1px; }
.checkout-btn{ width: 100%; padding: 15px; background: #000; color: #fff; border: none; margin-top: 20px; cursor: pointer; font-size: 14px; letter-spacing: 1px; }
.cart-footer{ padding: 20px; font-size: 12px; color: #666; text-align: center; }

/* Hero Slider Styles */
.hero-slider{ width: 100%; height: 80vh; position: relative; overflow: hidden; }
.swiper{ width: 100%; height: 100%; }
.swiper-slide{ opacity: 0; transition: opacity 0.3s ease; }
.swiper-slide-active{ opacity: 1; }
.slide-inner{ position: relative; width: 100%; height: 100%; }
.slide-inner img{ width: 100%; height: 100%; object-fit: cover; }
.slide-content{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; color: #fff; z-index: 2; }
.slide-content h2{ font-size: 4rem; font-weight: 300; letter-spacing: 0.2em; margin-bottom: 2rem; }
.view-all-btn{ display: inline-block; padding: 15px 40px; border: 1px solid #fff; color: #fff; text-decoration: none; font-size: 14px; letter-spacing: 0.2em; transition: all 0.3s ease; }
.view-all-btn:hover{ background: #fff; color: #000; }

/* Swiper Pagination Styles */
.swiper-pagination{ position: absolute; bottom: 30px !important; width: 100%; text-align: center; }
.swiper-pagination-bullet{ width: 30px; height: 2px; background: rgba(255,255,255,0.5); border-radius: 0; opacity: 1; margin: 0 5px; }
.swiper-pagination-bullet-active{ background: #fff; }

/* Fade effect */
.swiper-fade .swiper-slide{ pointer-events: none; transition-property: opacity; }
.swiper-fade .swiper-slide-active{ pointer-events: auto; }

/* Overlay for better text visibility */
.slide-inner::after{ content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; /*background: rgba(0,0,0,0.3);*/ }

/* Kategori Kartları - Yazı ve Gölge Güncellemesi */
.category-card{ display: block; text-decoration: none; color: var(--text-color); text-align: center; position: relative; margin-bottom: 2rem; overflow: hidden; }
.category-img{ position: relative; overflow: hidden; border-radius: 8px; aspect-ratio: 3/4; }
.category-img img{ width: 100%; height: 100%; object-fit: cover; transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); }
.category-card h3{ font-size: 1.2rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; position: absolute; width: 100%; text-align: center; top: 50%; left: 0; transform: translateY(-50%); margin: 0; z-index: 3; color: transparent; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); }
.category-card h3 span{ display: block; position: relative; transform: translateY(0); transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); }
.category-card h3 span:first-child{ -webkit-text-stroke: 1.5px var(--light-color); clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%); text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5); }
.category-card h3 span:last-child{ color: var(--light-color); position: absolute; top: 0; left: 0; width: 100%; clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%); text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5); }
.category-overlay{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(139, 107, 68, 0.4) 30%, rgba(51, 51, 51, 0.9) 100%); opacity: 0; transition: all 0.5s ease; }

/* Hover durumunda overlay'i biraz daha koyulaştıralım */
.category-card:hover .category-overlay{ opacity: 1; background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(139, 107, 68, 0.5) 30%, rgba(51, 51, 51, 0.95) 100%); }

/* Hover Efektleri */
.category-card:hover .category-img img{ transform: scale(1.15); }
.category-card:hover h3 span:first-child{ transform: translateY(-100%); }
.category-card:hover h3 span:last-child{ transform: translateY(100%); }

.homeSlogan{ margin-top: 50px; text-align: center; }

/* Accordion Slider Styles */
.accordion-slider{ /*max-width: 1200px;*/ margin: 0 auto; overflow: hidden; position: relative; /* Butonlar için */ }
.top-button{ position: absolute; top: 20px; right: 0px; z-index: 10; }
.bottom-button{ position: absolute; bottom: 0px; right: 0px; z-index: 10; }
.slides-container{ 
    display: none; 
    width: 100%; 
    height: 500px; 
}
.slides-container.active{ 
    display: flex; 
}
.slide{ position: relative; flex: 1; transition: flex 0.5s ease; overflow: hidden; cursor: pointer; border-right: 2px solid #fff; }
.slide:last-child{ border-right: none; }
.slide img{ width: 100%; height: 100%; object-fit: cover; }
.slide:hover{ flex: 4; flex-direction: row }
.artist-info{ position: absolute; bottom: 0; left: 0; right: 0; padding: 20px; background: linear-gradient(transparent, rgba(0,0,0,0.7)); color: white; opacity: 0; transform: translateY(20px); transition: all 0.3s ease; }
.slide:hover .artist-info{ opacity: 1; transform: translateY(0); }

.slider-nav{ text-align: center; margin: 20px 0; }
.slider-nav button{ 
    width: 30px; 
    height: 4px; 
    border-radius: 2px; 
    border: none; 
    background: #ddd; 
    margin: 0 5px; 
    cursor: pointer; 
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); 
    padding: 0; 
    transform: scale(1);
}
.slider-nav button.active{ 
    background: #333; 
    width: 30px; 
    transform: scale(1.2);
}
.slider-nav button:hover{
    background: #999;
    transform: scale(1.1);
}
.btn-custom{ padding: 10px 0px; background: transparent; transition: all 0.3s ease; cursor: pointer; white-space: nowrap; color: #000 !important; position: relative; display: inline-block; text-decoration: none !important; }
.btn-custom::after{ content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background: #000; transition: width 0.3s ease; }
.btn-custom:hover::after{ width: 100%; }
.btn-custom:hover{ color: #000 !important; }

/* Desktop Styles */
.artists_main{ margin-top: 50px; }
.first_artworks_main{ margin-top: 50px; }
.accordion-slider{ position: relative; margin: 0 auto; overflow: hidden; }

/* Desktop'ta mobil slider'ı gizle */
.mobile-artist-swiper{ display: none; }
.mobile-artwork-swiper{ display: none; }
.desktop-artist-slider{ display: block; }
.desktop-artwork-slider{ display: block; }
.slide{ position: relative; flex: 1; transition: flex 0.5s ease; overflow: hidden; cursor: pointer; border-right: 2px solid #fff; display: block; background-size: cover !important; }

/* Menü başlığı hover efekti */
.menu-title:hover{ opacity: 0.7; }

/* Submenu içindeki son linkler için stil */
.submenu-subcontent a{ display: block; padding: 10px 0; color: #000; text-decoration: none; font-size: 14px; letter-spacing: 1px; transition: opacity 0.3s ease; }
.submenu-subcontent a:hover{ opacity: 0.7; }

/* Tüm menü yazı tiplerini tutarlı hale getir */
.menu-title, .submenu-link, .submenu-sublink, .submenu-subcontent a, .standalone-link{ font-family: 'Noto Serif', serif; }
.submenudirect-link{ font-family: 'Noto Serif', serif; display: block; padding: 5px 0; color: #000; text-decoration: none; font-size: 14px; letter-spacing: 1px; transition: opacity 0.3s ease; }

/* Menü öğeleri arasındaki boşlukları düzenle */
.submenu-content, .submenu-subcontent{ margin: 5px 0; }

/* Footer Styles */
.site-footer{ background: #fff; padding: 60px 0 0; font-size: 14px; border-top: 1px solid #eee; }
.footer-section{ margin-bottom: 40px; }
.footer-section h3{ font-size: 16px; font-weight: 400; letter-spacing: 2px; margin-bottom: 20px; text-transform: uppercase; }
.footer-section p{ color: #666; line-height: 1.8; margin-bottom: 25px; }
.footer-social h4{ font-size: 14px; letter-spacing: 1px; margin-bottom: 15px; }
.social-links{ display: flex; gap: 15px; }
.social-links a{ color: #000; font-size: 16px; transition: opacity 0.3s ease; }
.social-links a:hover{ opacity: 0.7; }
.footer-links{ list-style: none; padding: 0; margin: 0; }
.footer-links li{ margin-bottom: 10px; }
.footer-links a{ color: #666; text-decoration: none; transition: color 0.3s ease; }
.footer-links a:hover{ color: #000; }

/* Footer Bottom */
.footer-bottom{ border-top: 1px solid #eee; padding: 20px 0; margin-top: 40px; }
.footer-bottom p{ color: #666; margin: 0; font-size: 12px; }
.footer-bottom-links{ display: flex; justify-content: flex-start; gap: 20px; }
.footer-bottom-links a{ color: #666; text-decoration: none; font-size: 12px; transition: color 0.3s ease; }
.footer-bottom-links a:hover{ color: #000; }
.newsletter-section{ padding: 60px 0; background-color: #fff; text-align: center; border-top: 1px solid #eee; }
.newsletter-title{ font-size: 24px; letter-spacing: 1px; margin-bottom: 30px; font-weight: 400; }
.newsletter-form{ max-width: 500px; margin: 0 auto; position: relative; }
.newsletter-input{ width: 100%; padding: 10px 0; border: none; border-bottom: 1px solid #000; outline: none; background: transparent; font-size: 16px; }
.newsletter-button{ position: absolute; right: 0; bottom: 10px; background: none; border: none; cursor: pointer; padding: 0; }
.newsletter-button svg{ width: 20px; height: 20px; }

.gallery-item{ position: relative; margin-bottom: 30px; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 8px rgba(0,0,0,0.1); transition: all 0.3s ease; display: block; text-decoration: none!important; }
.gallery-item:hover{ transform: translateY(-5px); box-shadow: 0 8px 16px rgba(0,0,0,0.2); }
.gallery-image{ width: 100%; height: 300px; /*object-fit: cover;*/ object-fit: contain; /*background-color: #f5f5f5;*/ }
.gallery-info{ padding: 15px; background: white; }
.gallery-title{ font-size: 1.1rem; margin-bottom: 8px; color: #333; }
.gallery-artist{ font-size: 0.9rem; color: #666; margin-bottom: 5px; }
.gallery-dimensions{ font-size: 0.8rem; color: #888; }
.like-button{ position: absolute; top: 15px; right: 15px; background: white; border: none; border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transition: opacity 0.3s ease; }
.gallery-item:hover .like-button{ opacity: 1; }
.like-button svg{ width: 20px; height: 20px; fill: none; stroke: #ff4081; stroke-width: 2; transition: all 0.3s ease; }
.like-button.active svg{ fill: #ff4081; }

/* List */
.hero-section{ position: relative; height: 400px; background-size: cover; background-position: center; color: white; border-radius: 12px; margin-top: 20px; }
.hero-content{ position: absolute; /*bottom: 50px; left: 50px;*/ }
.service-icon{ width: 50px; height: 50px; margin-bottom: 15px; }
.filter-section{ display: flex; align-items: center; gap: 15px; margin-bottom: 30px; border-top: 1px solid #eee; border-bottom: 1px solid #eee; padding: 20px 0; }
.filter-label{ font-size: 14px; color: #000; margin: 0; font-weight: 500; }
.filter-dropdown{ position: relative; display: inline-block; }
.filter-btn{ background: none; border: none; padding: 0 20px 0 0; position: relative; font-size: 14px; }
.filter-btn::after{ content: ''; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border-top: 5px solid #000; border-left: 5px solid transparent; border-right: 5px solid transparent; }

.pagination-container{ display: flex; justify-content: center; align-items: center; gap: 8px; padding: 20px; }
.pagination-button{ padding: 8px 16px; border: 1px solid #e2e8f0; background-color: white; color: #1a202c; border-radius: 6px; cursor: pointer; transition: all 0.2s ease; font-size: 14px; display: flex; align-items: center; justify-content: center; min-width: 40px; }
.pagination-button:hover{ background-color: #f7fafc; border-color: #cbd5e0; }
.pagination-button.active{ background-color: #000; color: white; border-color: #000; }
.pagination-button:disabled{ background-color: #f1f5f9; color: #94a3b8; cursor: not-allowed; border-color: #e2e8f0; }
.pagination-button.nav{ font-weight: bold; }

.heart-icon, .share-icon{ position: absolute; top: 15px; background: white; border-radius: 50%; padding: 10px; box-shadow: 0 2px 5px rgba(0,0,0,0.2); cursor: pointer; transition: all 0.3s ease; }
.heart-icon:hover, .share-icon:hover{ transform: scale(1.1); }
.heart-icon{ right: 15px; }
.share-icon{ right: 65px; }
.related-artwork{ position: relative; transition: all 0.3s ease; }
.related-artwork:hover{ transform: translateY(-5px); }
.related-artwork .heart-icon{ padding: 8px; top: 10px; right: 10px; }
.sticky-content{ position: sticky; top: 20px; }
.main-image{ width: 100%; height: auto; object-fit: cover; }

.productdetail-container{ position: relative; margin: 0 auto; overflow: hidden; }
.productdetail-item{ position: relative; cursor: pointer; transition: transform 0.3s ease; }
.productdetail-item:hover{ transform: scale(1.05); }
.productdetail-item img{ width: 100%; height: auto; display: block; }

/* Fullscreen Modal */
.modal{ display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.9); z-index: 1000; }
.modal-content{ position: relative; max-width: 90%; max-height: 90vh; margin: auto; display: block; top: 50%; transform: translateY(-50%); }
.modal img{ width: 100%; height: auto; object-fit: contain; }
.close{ position: absolute; top: 15px; right: 35px; color: #f1f1f1; font-size: 40px; font-weight: bold; cursor: pointer; }
.modal-content{ background: none !important; }

.productArtistReadMore{ text-decoration: none; color: #000; }
.productArtistReadMore:hover{ color: #000; }

.galleryPageBanner .banner{ position: relative; width: 100%; margin-bottom: 30px; height: 500px; }
.galleryPageBanner .banner-image{ width: 100%; height: 100%; }
.galleryPageBanner .banner-text{ position: absolute; bottom: 50px; left: 0; width: 100%; text-align: center; color: white; }
.galleryPageBanner .banner-text h1{ font-size: 3.5rem; font-weight: 700; text-transform: uppercase; margin-bottom: 10px; }
.galleryPageBanner .banner-text p{ font-size: 1.2rem; font-weight: 300; }
.galleryPageBanner .content{ margin-bottom: 50px; }

/* Galeri Sayfası Resim Galerisi Yapısı */
.artopol-gallery-container{ margin: 50px 0 70px; }
.artopol-gallery-title{ text-align: center; font-weight: 700; margin-bottom: 40px; position: relative; }
.artopol-gallery-title:after{ content: ''; position: absolute; width: 80px; height: 3px; background-color: #000; bottom: -15px; left: 50%; transform: translateX(-50%); }
.artopol-gallery-item{ margin-bottom: 20px; position: relative; overflow: hidden; border-radius: 5px; transition: all 0.3s ease; cursor: pointer; width: 100%; }
.artopol-gallery-item-inner{ position: relative; width: 100%; padding-bottom: 75%; overflow: hidden; }
.artopol-gallery-item img{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s ease; }
.artopol-gallery-item:hover img{ transform: scale(1.05); }
.artopol-gallery-overlay{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); display: flex; flex-direction: column; justify-content: center; align-items: center; opacity: 0; transition: opacity 0.4s ease; padding: 15px; text-align: center; box-sizing: border-box; }
.artopol-gallery-item:hover .artopol-gallery-overlay{ opacity: 1; }
.artopol-gallery-overlay h4{ color: white; font-size: 1.1rem; margin-bottom: 5px; transform: translateY(20px); opacity: 0; transition: all 0.4s ease 0.1s; }
.artopol-gallery-overlay p{ color: rgba(255, 255, 255, 0.8); font-size: 0.9rem; transform: translateY(20px); opacity: 0; transition: all 0.4s ease 0.2s; }
.artopol-gallery-item:hover .artopol-gallery-overlay h4, .artopol-gallery-item:hover .artopol-gallery-overlay p{ transform: translateY(0); opacity: 1; }

/* Fix for mobile overflow issues */
.row.gallery-row{ margin-left: 0; margin-right: 0; }

/* Lightbox Styles */
.artopol-lightbox{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.9); display: none; justify-content: center; align-items: center; z-index: 1050; flex-direction: column; overflow: hidden; box-sizing: border-box; padding: 0; margin: 0; max-width: 100vw; }
.artopol-lightbox.active{ display: flex; }
.artopol-lightbox-content{ position: relative; max-width: 90%; max-height: 80%; margin: 0 auto; box-sizing: border-box; }
.artopol-lightbox img{ max-width: 100%; max-height: 80vh; display: block; margin: 0 auto; box-shadow: 0 5px 25px rgba(0, 0, 0, 0.8); box-sizing: border-box; }
.artopol-lightbox-caption{ color: white; text-align: center; padding: 15px; width: 100%; box-sizing: border-box; max-width: 100vw; }
.artopol-lightbox-close{ position: absolute; top: 20px; right: 20px; font-size: 30px; color: white; cursor: pointer; z-index: 1051; }
.artopol-lightbox-prev, .artopol-lightbox-next{ position: absolute; top: 50%; transform: translateY(-50%); font-size: 30px; color: white; background-color: rgba(0, 0, 0, 0.5); width: 50px; height: 50px; border-radius: 50%; display: flex; justify-content: center; align-items: center; cursor: pointer; transition: background-color 0.3s ease; z-index: 1051; }
.artopol-lightbox-prev{ left: 10px; }
.artopol-lightbox-next{ right: 10px; }
.artopol-lightbox-prev:hover, .artopol-lightbox-next:hover{ background-color: rgba(0, 0, 0, 0.8); }

.artistsPage .artist-card{ position: relative; overflow: hidden; margin-bottom: 30px; cursor: pointer; display: block; }
.artistsPage .artist-image{ position: relative; overflow: hidden; width: 100%; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); }
.artistsPage .artist-image img{ width: 100%; height: auto; display: block; transition: transform 0.5s ease; }
.artistsPage .artist-name{ position: absolute; bottom: 20px; left: 0; width: 100%; color: white; font-size: 18px; font-weight: 500; text-align: center; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8); z-index: 10; }
.artistsPage .artist-overlay{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); opacity: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; transition: opacity 0.3s ease; z-index: 11; }
.artistsPage .artist-card:hover .artist-overlay{ opacity: 1; }
.artistsPage .artist-card:hover .artist-image img{ transform: scale(1.05); }
.artistsPage .explore-btn{ color: white; text-transform: uppercase; letter-spacing: 1px; font-size: 14px; border: none; padding: 10px 25px; background-color: transparent; transition: all 0.3s ease; }
.artistsPage .explore-btn:hover{ background-color: white; color: black; }
.artistsPage .artist-card:hover .explore-btn{ background-color: white; color: black; }
.artistsPage .artist-shadow{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 9; }
.artistsPage .artist-card:hover .artist-name{ display: none; }

.artistsPage .banner{ position: relative; width: 100%; margin-bottom: 30px; height: 500px; }
.artistsPage .banner-image{ width: 100%; height: 100%; }
.artistsPage .banner-text{ position: absolute; bottom: 50px; left: 0; width: 100%; text-align: center; color: white; }
.artistsPage .banner-text h1{ font-size: 3.5rem; font-weight: 700; text-transform: uppercase; margin-bottom: 10px; }
.artistsPage .banner-text p{ font-size: 1.2rem; font-weight: 300; }
.artistsPage .pagination{ display: flex; justify-content: center; align-items: center; gap: 8px; padding: 20px; }
.artistsPage .pagination .page-item2{ border: 1px solid #e2e8f0; background-color: white !important; color: #1a202c !important; border-radius: 6px; cursor: pointer; transition: all 0.2s ease; font-size: 14px; display: flex; align-items: center; justify-content: center; min-width: 40px; text-decoration: none !important; }
.artistsPage .pagination .page-item2 a{ padding: 8px 16px; }
.artistsPage .pagination .page-item2.active{ background-color: #000 !important; color: white !important; border-color: #000 !important; }
.artistsPage .pagination .page-item2.active .page-link2{ color: #FFF !important; }
.artistsPage .pagination .page-link2{ text-decoration: none !important; color: #1a202c !important; padding: 8px 16px; }


.blog-card{ transition: transform 0.3s; margin-bottom: 30px; height: 100%; }
.blog-card:hover{ transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.1); }
.blog-image{ height: 200px; object-fit: cover; border-radius: 8px 8px 0 0; }
.blog-title{ font-weight: 600; margin-top: 15px; font-size: 1.25rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.blog-card{ cursor: pointer; }


.productList .pagination{ display: flex; justify-content: center; align-items: center; gap: 8px; padding: 20px; }
.productList .pagination .page-item2{ border: 1px solid #e2e8f0; background-color: white !important; color: #1a202c !important; border-radius: 6px; cursor: pointer; transition: all 0.2s ease; font-size: 14px; display: flex; align-items: center; justify-content: center; min-width: 40px; text-decoration: none !important; }
.productList .pagination .page-item2 a{ padding: 8px 16px; }
.productList .pagination .page-item2.active{ background-color: #000 !important; color: white !important; border-color: #000 !important; }
.productList .pagination .page-item2.active .page-link2{ color: #FFF !important; }
.productList .pagination .page-link2{ text-decoration: none !important; color: #1a202c !important; padding: 8px 16px; }




.productList .pagination{ display: flex; justify-content: center; align-items: center; gap: 8px; padding: 20px; }
.productList .pagination .page-item2{ border: 1px solid #e2e8f0; background-color: white !important; color: #1a202c !important; border-radius: 6px; cursor: pointer; transition: all 0.2s ease; font-size: 14px; display: flex; align-items: center; justify-content: center; min-width: 40px; text-decoration: none !important; }
.productList .pagination .page-item2 a{ padding: 8px 16px; }
.productList .pagination .page-item2.active{ background-color: #000 !important; color: white !important; border-color: #000 !important; }
.productList .pagination .page-item2.active .page-link2{ color: #FFF !important; }
.productList .pagination .page-link2{ text-decoration: none !important; color: #1a202c !important; padding: 8px 16px; }






.register-form-container{ background: #fff; padding: 40px; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); margin-bottom: 50px; }
.register-form .form-control{ border: 1px solid #ddd; border-radius: 5px; padding: 12px 15px; font-size: 16px; transition: all 0.3s ease; }
.register-form .form-control:focus{ border-color: #007bff; box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25); }
.register-form .form-label{ font-weight: 500; color: #333; margin-bottom: 8px; }
.register-form .btn-primary{ background-color: #007bff; border-color: #007bff; padding: 12px 30px; font-size: 16px; font-weight: 500; transition: all 0.3s ease; }
.register-form .btn-primary:hover{ background-color: #0056b3; border-color: #0056b3; transform: translateY(-2px); }
.register-form .form-check-input:checked{ background-color: #007bff; border-color: #007bff; }
.register-form .form-check-label{ font-size: 14px; color: #666; }
.register-form .form-check-label a{ color: #007bff; }
.register-form .form-check-label a:hover{ text-decoration: underline !important; }
.alert{ border-radius: 5px; padding: 15px; margin-bottom: 20px; }








.login-form-container{ background: #fff; padding: 40px; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); margin-bottom: 50px; }
.login-form .form-control{ border: 1px solid #ddd; border-radius: 5px; padding: 12px 15px; font-size: 16px; transition: all 0.3s ease; }
.login-form .form-control:focus{ border-color: #007bff; box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25); }
.login-form .form-label{ font-weight: 500; color: #333; margin-bottom: 8px; }
.password-field{ position: relative; }
.password-toggle{ position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; color: #666; cursor: pointer; padding: 0; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; }
.password-toggle:hover{ color: #007bff; }
.login-form .btn-primary{ background-color: #007bff; border-color: #007bff; padding: 12px 30px; font-size: 16px; font-weight: 500; transition: all 0.3s ease; }
.login-form .btn-primary:hover{ background-color: #0056b3; border-color: #0056b3; transform: translateY(-2px); }
.login-form .form-check-input:checked{ background-color: #007bff; border-color: #007bff; }
.login-form .form-check-label{ font-size: 14px; color: #666; }
.btn-outline-danger:hover{ background-color: #dc3545; border-color: #dc3545; }
.btn-outline-primary:hover{ background-color: #007bff; border-color: #007bff; }





.profile-sidebar{ background: #fff; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); overflow: hidden; }
.profile-header{ background: linear-gradient(135deg, #007bff, #0056b3); color: white; padding: 30px 20px; }
.profile-avatar{ font-size: 4rem; margin-bottom: 15px; }
.profile-name{ margin-bottom: 5px; font-weight: 600; }
.profile-email{ opacity: 0.9; font-size: 0.9rem; }
.profile-nav{ padding: 0; }
.profile-nav .nav-link{ padding: 15px 20px; color: #333; border-bottom: 1px solid #f1f1f1; transition: all 0.3s ease; }
.profile-nav .nav-link:hover{ background-color: #f8f9fa; color: #007bff; }
.profile-nav .nav-link.active{ background-color: #007bff; color: white; border-left: 4px solid #0056b3; }
.summary-card{ background: #fff; border-radius: 10px; padding: 25px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); transition: transform 0.3s ease; height: 100%; }
.summary-card:hover{ transform: translateY(-5px); }
.summary-icon{ width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 15px; font-size: 1.3rem; color: white; }
.summary-info h6{ font-weight: 600; margin-bottom: 5px; color: #333; }
.summary-info p{ color: #666; font-size: 0.9rem; margin-bottom: 10px; }
.summary-link{ color: #007bff; text-decoration: none; font-size: 0.9rem; font-weight: 500; }
.summary-link:hover{ color: #0056b3; }
.content-card{ background: #fff; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); overflow: hidden; }
.content-card .card-header{ background: #f8f9fa; border-bottom: 1px solid #dee2e6; padding: 15px 20px; }
.content-card .card-body{ padding: 25px; }
.detail-group{ margin-bottom: 20px; padding-bottom: 20px; -bottom: 1px solid #f1f1f1; }
.detail-group:last-child{ border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.detail-item{ display: flex; justify-content: space-between; align-items: center; padding: 10px 0; }
.detail-item label{ font-weight: 500; color: #666; margin: 0; flex: 0 0 40%; }
.detail-item span{ color: #333; flex: 1; text-align: right; }
.stat-item{ display: flex; align-items: center; padding: 15px 0; border-bottom: 1px solid #f1f1f1; }
.stat-item:last-child{ border-bottom: none; }
.stat-icon{ width: 35px; height: 35px; border-radius: 50%; background: #f8f9fa; display: flex; align-items: center; justify-content: center; margin-right: 15px; color: #666; }
.stat-info{ flex: 1; }
.stat-info label{ display: block; font-weight: 500; color: #666; font-size: 0.9rem; margin: 0; }
.stat-info span{ color: #333; font-size: 0.9rem; }
.action-card{ display: flex; align-items: center; padding: 20px; background: #fff; border-radius: 8px; text-decoration: none; color: #333; box-shadow: 0 2px 8px rgba(0,0,0,0.1); transition: all 0.3s ease; }
.action-card:hover{ color: #007bff; transform: translateY(-2px); box-shadow: 0 4px 15px rgba(0,0,0,0.15); }
.action-card i{ font-size: 1.3rem; margin-right: 15px; color: #007bff; }






.profile-sidebar{ background: #fff; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); overflow: hidden; }
.profile-header{ background: linear-gradient(135deg, #007bff, #0056b3); color: white; padding: 30px 20px; }
.profile-avatar{ font-size: 4rem; margin-bottom: 15px; }
.profile-name{ margin-bottom: 5px; font-weight: 600; }
.profile-email{ opacity: 0.9; font-size: 0.9rem; }
.profile-nav{ padding: 0; }
.profile-nav .nav-link{ padding: 15px 20px; color: #333; border-bottom: 1px solid #f1f1f1; transition: all 0.3s ease; }
.profile-nav .nav-link:hover{ background-color: #f8f9fa; color: #007bff; }
.profile-nav .nav-link.active{ background-color: #007bff; color: white; border-left: 4px solid #0056b3; }
.content-card{ background: #fff; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); overflow: hidden; margin-bottom: 20px; }
.content-card .card-header{ background: #f8f9fa; border-bottom: 1px solid #dee2e6; padding: 15px 20px; }
.content-card .card-body{ padding: 25px; }
.profile-edit-form .form-control{ border: 1px solid #ddd; border-radius: 5px; padding: 12px 15px; font-size: 16px; transition: all 0.3s ease; }
.profile-edit-form .form-control:focus{ border-color: #007bff; box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25); }
.profile-edit-form .form-label{ font-weight: 500; color: #333; margin-bottom: 8px; }
.profile-edit-form .btn-primary{ background-color: #007bff; border-color: #007bff; padding: 12px 25px; font-weight: 500; transition: all 0.3s ease; }
.profile-edit-form .btn-primary:hover{ background-color: #0056b3; border-color: #0056b3; transform: translateY(-2px); }
.tips-list{ space: 15px; }
.tip-item{ display: flex; align-items: flex-start; margin-bottom: 15px; padding: 10px; background: #f8f9fa; border-radius: 5px; }
.tip-item i{ margin-right: 10px; margin-top: 2px; font-size: 1.1rem; }
.tip-item span{ font-size: 0.9rem; color: #666; line-height: 1.4; }
.alert{ border-radius: 8px; padding: 15px; }






/* address_edit.php */
.profile-sidebar{ background: #fff; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); overflow: hidden; }
.profile-header{ background: linear-gradient(135deg, #007bff, #0056b3); color: white; padding: 30px 20px; }
.profile-avatar{ font-size: 4rem; margin-bottom: 15px; }
.profile-name{ margin-bottom: 5px; font-weight: 600; }
.profile-email{ opacity: 0.9; font-size: 0.9rem; }
.profile-nav{ padding: 0; }
.profile-nav .nav-link{ padding: 15px 20px; color: #333; border-bottom: 1px solid #f1f1f1; transition: all 0.3s ease; }
.profile-nav .nav-link:hover{ background-color: #f8f9fa; color: #007bff; }
.profile-nav .nav-link.active{ background-color: #007bff; color: white; border-left: 4px solid #0056b3; }
.current-address-info{ background: #f8f9fa; border-radius: 10px; padding: 20px; border-left: 4px solid #007bff; }
.info-card h6{ color: #007bff; font-weight: 600; margin-bottom: 15px; }
.current-address strong{ color: #333; font-size: 1.1rem; }
.address-preview{ color: #666; margin-top: 8px; line-height: 1.5; }
.content-card{ background: #fff; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); overflow: hidden; margin-bottom: 20px; }
.content-card .card-header{ background: #f8f9fa; border-bottom: 1px solid #dee2e6; padding: 15px 20px; }
.content-card .card-body{ padding: 25px; }
.address-edit-form .form-control{ border: 1px solid #ddd; border-radius: 5px; padding: 12px 15px; font-size: 16px; transition: all 0.3s ease; }
.address-edit-form .form-control:focus{ border-color: #007bff; box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25); }
.address-edit-form .form-label{ font-weight: 500; color: #333; margin-bottom: 8px; }
.address-edit-form .btn-primary{ background-color: #007bff; border-color: #007bff; padding: 12px 25px; font-weight: 500; transition: all 0.3s ease; }
.address-edit-form .btn-primary:hover{ background-color: #0056b3; border-color: #0056b3; transform: translateY(-2px); }
.header-actions{ display: flex; gap: 10px; }
.tips-list{ space: 15px; }
.tip-item{ display: flex; align-items: flex-start; margin-bottom: 15px; padding: 10px; background: #f8f9fa; border-radius: 5px; }
.tip-item i{ margin-right: 10px; margin-top: 2px; font-size: 1.1rem; }
.tip-item span{ font-size: 0.9rem; color: #666; line-height: 1.4; }
.alert{ border-radius: 8px; padding: 15px; }


/* address_add.php */
.profile-sidebar{ background: #fff; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); overflow: hidden; }
.profile-header{ background: linear-gradient(135deg, #007bff, #0056b3); color: white; padding: 30px 20px; }
.profile-avatar{ font-size: 4rem; margin-bottom: 15px; }
.profile-name{ margin-bottom: 5px; font-weight: 600; }
.profile-email{ opacity: 0.9; font-size: 0.9rem; }
.profile-nav{ padding: 0; }
.profile-nav .nav-link{ padding: 15px 20px; color: #333; border-bottom: 1px solid #f1f1f1; transition: all 0.3s ease; }
.profile-nav .nav-link:hover{ background-color: #f8f9fa; color: #007bff; }
.profile-nav .nav-link.active{ background-color: #007bff; color: white; border-left: 4px solid #0056b3; }
.content-card{ background: #fff; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); overflow: hidden; margin-bottom: 20px; }
.content-card .card-header{ background: #f8f9fa; border-bottom: 1px solid #dee2e6; padding: 15px 20px; }
.content-card .card-body{ padding: 25px; }
.address-add-form .form-control{ border: 1px solid #ddd; border-radius: 5px; padding: 12px 15px; font-size: 16px; transition: all 0.3s ease; }
.address-add-form .form-control:focus{ border-color: #007bff; box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25); }
.address-add-form .form-label{ font-weight: 500; color: #333; margin-bottom: 8px; }
.address-add-form .btn-primary{ background-color: #007bff; border-color: #007bff; padding: 12px 25px; font-weight: 500; transition: all 0.3s ease; }
.address-add-form .btn-primary:hover{ background-color: #0056b3; border-color: #0056b3; transform: translateY(-2px); }
.tips-list{ space: 15px; }
.tip-item{ display: flex; align-items: flex-start; margin-bottom: 15px; padding: 10px; background: #f8f9fa; border-radius: 5px; }
.tip-item i{ margin-right: 10px; margin-top: 2px; font-size: 1.1rem; }
.tip-item span{ font-size: 0.9rem; color: #666; line-height: 1.4; }
.alert{ border-radius: 8px; padding: 15px; }


/* address_list.php */
.profile-sidebar{ background: #fff; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); overflow: hidden; }
.profile-header{ background: linear-gradient(135deg, #007bff, #0056b3); color: white; padding: 30px 20px; }
.profile-avatar{ font-size: 4rem; margin-bottom: 15px; }
.profile-name{ margin-bottom: 5px; font-weight: 600; }
.profile-email{ opacity: 0.9; font-size: 0.9rem; }
.profile-nav{ padding: 0; }
.profile-nav .nav-link{ padding: 15px 20px; color: #333; border-bottom: 1px solid #f1f1f1; transition: all 0.3s ease; }
.profile-nav .nav-link:hover{ background-color: #f8f9fa; color: #007bff; }
.profile-nav .nav-link.active{ background-color: #007bff; color: white; border-left: 4px solid #0056b3; }
.empty-state{ background: #fff; border-radius: 10px; padding: 60px 40px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
.empty-icon{ font-size: 4rem; color: #dee2e6; }
.address-card{ background: #fff; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); padding: 20px; transition: all 0.3s ease; border: 2px solid transparent; }
.address-card:hover{ transform: translateY(-3px); box-shadow: 0 8px 25px rgba(0,0,0,0.15); }
.address-card.default-address{ border-color: #28a745; background: linear-gradient(135deg, #f8fff9, #ffffff); }
.address-header{ display: flex; justify-content: between; align-items: flex-start; margin-bottom: 15px; }
.address-title{ flex: 1; }
.address-title h5{ margin: 0; color: #333; font-weight: 600; }
.address-actions{ flex-shrink: 0; }
.address-content{ margin-bottom: 15px; }
.address-name{ margin-bottom: 10px; }
.address-name strong{ color: #333; font-size: 1.1rem; }
.company-name{ color: #666; font-size: 0.9rem; font-style: italic; }
.address-details .address-line{ color: #666; margin-bottom: 3px; line-height: 1.4; }
.address-phone{ color: #007bff; margin-top: 8px; font-size: 0.9rem; }
.address-footer{ border-top: 1px solid #f1f1f1; padding-top: 10px; }
.addresses-summary{ background: #f8f9fa; border-radius: 10px; padding: 20px; }
.summary-card{ display: flex; justify-content: space-between; align-items: center; }
.summary-content{ display: flex; align-items: center; }
.summary-icon{ width: 50px; height: 50px; background: #007bff; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; margin-right: 15px; font-size: 1.3rem; }
.summary-text{ color: #333; }
.alert{ border-radius: 8px; padding: 15px; }


.menu-lang{ text-align: center; }
.menu-lang a{ color: #000; text-decoration: none; font-size: 14px; }


.video-gallery .video-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 8px;
    overflow: hidden;
}

.video-gallery .video-card-link:hover .video-card {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.video-container {
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.video-container:hover {
    opacity: 0.95;
}

.background-video {
    transition: transform 0.3s ease;
}

.video-container:hover .background-video {
    transform: scale(1.05);
}

.video-overlay {
    transition: background-color 0.3s ease;
}

.video-container:hover .video-overlay {
    background: rgba(0,0,0,0.5) !important;
}

.show-more-btn {
    transition: opacity 0.3s ease;
}

.video-container:hover .show-more-btn {
    opacity: 0.8;
}

@media (max-width: 768px) {
    .video-container {
        height: 350px !important;
    }

    .video-overlay {
        padding: 20px !important;
    }

    .video-overlay h3 {
        font-size: 24px !important;
    }

    .video-overlay p {
        font-size: 16px !important;
    }
}

@media (max-width: 576px) {
    .col-lg-6 {
        margin-bottom: 20px;
    }
    
    /* Extra small screen search adjustments */
    .search-container{ 
        padding: 10px; 
        position: fixed;
        transform: translateY(-100%);
        transition: transform 0.3s ease-in-out;
    }
    .search-container.active{ transform: translateY(0); }
    .search-form{ gap: 8px; }
    .search-input{ 
        font-size: 14px; 
        padding: 10px 12px 10px 36px; 
        border-radius: 20px;
    }
    .search-input-icon{ 
        left: 10px; 
        width: 14px; 
        height: 14px; 
    }
    .search-submit{ 
        height: 38px; 
        min-width: 38px; 
        padding: 10px 12px; 
        border-radius: 18px;
    }
    .search-submit svg{ 
        width: 16px; 
        height: 16px; 
    }
    .search-close{ 
        height: 38px; 
        min-width: 38px; 
        padding: 10px 12px; 
        border-radius: 18px;
        position: static;
        background: #f0f0f0;
    }
    .search-close svg{ 
        width: 16px; 
        height: 16px; 
    }
}



@media (max-width: 768px) {
    /* Mobile overflow fix */
    body, html{ max-width: 100%; overflow-x: hidden; }
    .container{ max-width: 100%; padding-left: 15px; padding-right: 15px; }
    .row{ margin-left: 0; margin-right: 0; }
    
    .social-icons{ display: none; }
    .side-menu{ width: 100%; }
    .logo img{ height: 70px; }
    .site-header{ width: 100%; max-width: 100%; overflow: hidden; }
    .header-container{ width: 100%; max-width: 100%; }
    
    /* Mobile search adjustments */
    .search-container{ 
        padding: 15px; 
        position: fixed;
        transform: translateY(-100%);
        transition: transform 0.3s ease-in-out;
    }
    .search-container.active{ transform: translateY(0); }
    .search-form{ flex-direction: row; gap: 10px; align-items: stretch; max-width: 100%; }
    .search-input-wrapper{ flex: 1; min-width: 0; }
    .search-input{ font-size: 14px; padding: 12px 15px 12px 40px; }
    .search-input-icon{ left: 12px; width: 16px; height: 16px; }
    .search-submit{ 
        height: 42px; 
        min-width: 42px; 
        padding: 12px 16px; 
        border-radius: 20px;
    }
    .search-close{ 
        height: 42px; 
        min-width: 42px; 
        padding: 12px 16px; 
        border-radius: 20px;
        position: static;
        background: #f0f0f0;
    }
    .slide-content h2{ font-size: 2rem; }
    .hero-slider{ height: auto; width: 100%; max-width: 100%; overflow: hidden; }
    .category-card h3{ font-size: 1rem; letter-spacing: 1px; }
    .accordion-slider{ padding: 20px 0; overflow: hidden; height: auto; width: 100%; max-width: 100%; }
    .slides-container{ display: none; height: auto; }
    .slides-container.active{ display: block; }
    
    /* Mobilde Swiper slider yapısı */
    .mobile-artist-swiper{ display: block; width: 100%; max-width: 100%; overflow: hidden; }
    .mobile-artist-swiper .swiper{ overflow: hidden; width: 100%; }
    .mobile-artist-swiper .swiper-slide{ height: 300px; width: 100%; }
    .mobile-artist-swiper .slide{ display: block; height: 300px; margin-bottom: 0; border-right: none; flex: none; width: 100%; }
    .mobile-artist-swiper .artist-info{ opacity: 1; transform: translateY(0); }
    .mobile-artist-swiper .swiper-pagination{ margin-top: 50px; position: relative; }
    .mobile-artist-swiper .swiper-pagination-bullet{ 
        width: 12px; 
        height: 12px; 
        background: #ddd; 
        border-radius: 50%; 
        margin: 0 5px; 
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        transform: scale(1);
    }
    .mobile-artist-swiper .swiper-pagination-bullet-active{ 
        background: #333; 
        transform: scale(1.2);
    }
    
    /* Mobilde Artwork Swiper slider yapısı */
    .mobile-artwork-swiper{ display: block; width: 100%; max-width: 100%; overflow: hidden; }
    .mobile-artwork-swiper .swiper{ overflow: hidden; width: 100%; }
    .mobile-artwork-swiper .swiper-slide{ height: 300px; width: 100%; }
    .mobile-artwork-swiper .slide{ display: block; height: 300px; margin-bottom: 0; border-right: none; flex: none; width: 100%; }
    .mobile-artwork-swiper .artist-info{ opacity: 1; transform: translateY(0); }
    .mobile-artwork-swiper .swiper-pagination{ margin-top: 50px; position: relative; }
    .mobile-artwork-swiper .swiper-pagination-bullet{ 
        width: 12px; 
        height: 12px; 
        background: #ddd; 
        border-radius: 50%; 
        margin: 0 5px; 
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        transform: scale(1);
    }
    .mobile-artwork-swiper .swiper-pagination-bullet-active{ 
        background: #333; 
        transform: scale(1.2);
    }
    
    /* Desktop slider'ı mobilde gizle */
    .desktop-artist-slider{ display: none; }
    .desktop-artwork-slider{ display: none; }
    
    .slider-nav{ display: none; }

    /* Button positioning for mobile */
    .top-button, .bottom-button{ position: static; text-align: right; margin: 20px 0; }
    .footer-bottom-links{ justify-content: center; margin-top: 15px; }
    .footer-bottom p{ text-align: center; }
    .newsletter-section{ padding: 40px 0; }
    .gallery-image{ height: 250px; }
    .like-button{ opacity: 1; }

    .pagination-button{ padding: 6px 12px; min-width: 32px; }

    .galleryPageBanner .banner-text h1{ font-size: 2.5rem; }
    .galleryPageBanner .banner-text p{ font-size: 1rem; }

    .artopol-gallery-overlay h4{ font-size: 1rem; }
    .artopol-gallery-overlay p{ font-size: 0.8rem; }
    .artopol-gallery-overlay{ padding: 10px; }

    .artopol-lightbox-prev, .artopol-lightbox-next{ width: 40px; height: 40px; font-size: 24px; }
    .artopol-lightbox-close{ top: 10px; right: 10px; font-size: 24px; }
    .artopol-lightbox-caption{ padding: 10px; }
    .artopol-lightbox img{ max-height: 70vh; }
    .artopol-lightbox-content{ max-width: 95%; }

    .register-form-container{ padding: 20px; margin: 20px 10px; }
    .register-form .form-control{ font-size: 16px; }

    .login-form-container{ padding: 20px; margin: 20px 10px; }
    .login-form .form-control{ font-size: 16px; }


    .profile-sidebar{ margin-bottom: 20px; }
    .summary-card{ margin-bottom: 15px; }
    .detail-item{ flex-direction: column; align-items: flex-start; gap: 5px; }
    .detail-item span{ text-align: left; }
    .stat-item{ flex-direction: column; align-items: flex-start; gap: 5px; }


    .content-card .card-body{ padding: 20px; }
    .d-grid.gap-2.d-md-flex{ flex-direction: column !important; }
    .d-grid.gap-2.d-md-flex .btn{ width: 100%; margin-bottom: 10px; }

    .page-header .d-flex{ flex-direction: column; align-items: flex-start !important; gap: 15px; }
    .header-actions{ width: 100%; flex-direction: column; }
    .content-card .card-body{ padding: 20px; }


    .page-header .d-flex{ flex-direction: column; align-items: flex-start !important; gap: 15px; }
    .address-header{ flex-direction: column; gap: 10px; }
    .summary-card{ flex-direction: column; gap: 15px; text-align: center; }
    .empty-state{ padding: 40px 20px; }


}




/* Language Links */
.lang-link {
    color: #000;
    text-decoration: none;
    font-weight: normal;
    transition: all 0.3s ease;
}

.lang-link.active {
    font-weight: bold;
    text-decoration: underline;
    color: var(--primary-color);
}

.lang-link:hover {
    color: var(--primary-color);
    text-decoration: underline;
}

.hero-section {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	border-radius: 10px;
	overflow: hidden;
	position: relative;
	font-family: 'Noto Serif', serif;
}
.hero-content {
	position: relative;
	z-index: 2;
	color: white;
}

.artvisorybtn{
	font-size: 16px;
	font-weight: 500;
	line-height: 20px;
	padding: 16px 48px;
	border: 1px solid #fff;
	color: #fff;
	backdrop-filter: blur(4px);
	background-color: hsla(0, 2%, 92%, .2);
	border-radius: 56px;
	transition: .4s ease;
	text-align: center;
	outline: 1px solid transparent;
	text-decoration: none;
	margin-top: 10px;
}

/* Favorites Button Styles */
.favorite-btn {
	transition: all 0.3s ease;
}

.favorite-btn.favorited {
	background-color: #dc3545;
	border-color: #dc3545;
	color: white;
}

.favorite-btn.favorited:hover {
	background-color: #c82333;
	border-color: #bd2130;
	color: white;
}

.favorite-btn:not(.favorited):hover {
	background-color: #dc3545;
	border-color: #dc3545;
	color: white;
}

.favorite-btn i {
	transition: all 0.3s ease;
}

.favorite-btn:hover i {
	transform: scale(1.2);
}

.artists_main h2 a{ text-decoration: none; color: #000; }
.first_artworks_main h2 a{ text-decoration: none; color: #000; }