body {
padding: 0px !important;
}
.container {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.container-for-header {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
@media (min-width: 576px) {
.container {
max-width: 540px;
}
.container-for-header {
max-width: 540px;
}
}
@media (min-width: 768px) {
.container {
max-width: 720px;
}
.container-for-header {
max-width: 720px;
}
}
@media (min-width: 992px) {
.container {
max-width: 960px;
}
.container-for-header {
max-width: 960px;
}
}
@media (min-width: 1200px) {
.container {
max-width: 1140px;
}
.container-for-header {
max-width: 1140px;
}
}
@media (min-width: 1400px) {
.container-for-header {
max-width: 1340px;
}
}
@media (min-width: 1600px) {
.container-for-header {
max-width: 1540px;
}
}
/* @media (min-width: 1800px) {
.container-for-header {
max-width: 1740px;
}
}
@media (min-width: 2000px) {
.container-for-header {
max-width: 1940px;
}
} */
/* 1. En Üstteki Bilgi Barı */
header .top-bar {
background-color: #2A3037;
color: #fff;
font-size: 13px;
font-weight: 600;
padding: 10px 0;
text-align: center;
line-height: 1;
}
/* 2. Ana Header */
header .main-header {
padding: 20px 0;
}
header .header-container {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
/* Küçük ekranlarda alta geçmeyi sağlar */
}
header .logo-area img {
max-height: 50px;
object-fit: contain;
}
header .search-area {
flex-grow: 1;
/* Ortadaki boşluğu doldurur */
margin: 0 20px;
}
header .search-form {
display: flex;
width: 100%;
max-width: 600px;
margin: 0 auto;
}
header .search-form input {
flex-grow: 1;
padding: 10px;
border: 1px solid #ced4da;
border-right: none;
font-size: 1rem;
}
header .search-form button {
padding: 10px 15px;
border: 1px solid #ced4da;
background-color: #fff;
cursor: pointer;
}
header .user-actions {
display: flex;
align-items: center;
}
header .user-actions a {
color: #444;
text-decoration: none;
margin-left: 20px;
font-size: 14px;
font-weight: 600;
display: flex;
align-items: center;
}
header .user-actions a:hover {
color: #000;
}
header .user-actions i {
margin-left: 8px;
font-size: 14px;
}
/* 3. Navigasyon Menüsü */
header .main-nav {
background-color: #fff;
position: relative;
}
header .nav-links {
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: start;
}
header .nav-links li {
position: relative;
/* Alt menü için */
}
header .nav-links a {
display: block;
padding: 15px 0 5px 0;
color: #555;
text-decoration: none;
font-weight: 500;
text-transform: uppercase;
font-size: 14px;
border-bottom: 3px solid #fff;
margin-right: 30px;
}
header .nav-links a:hover {
color: #000;
border-bottom: 3px solid #000;
}
/* Alt Menü (Dropdown) */
header .dropdown-menu {
display: none;
/* jQuery ile kontrol edilecek */
position: absolute;
top: 100%;
left: 0;
background-color: #fff;
border: 1px solid #e9ecef;
list-style: none;
padding: 10px 0;
margin: 0;
min-width: 200px;
z-index: 1000;
}
header .dropdown-menu a {
padding: 10px 20px;
font-weight: 500;
text-transform: none;
margin-right: 0px;
border-bottom: none !important;
}
/* Hamburger Menü Butonu */
header .menu-toggle {
display: none;
/* Sadece mobilde görünecek */
padding: 10px 0;
background: none;
border: 1px solid #ccc;
cursor: pointer;
}
header .menu-toggle .bar {
display: block;
width: 25px;
height: 3px;
margin: 5px auto;
background-color: #333;
transition: all 0.3s ease-in-out;
}
/* --- YENİ EKLENECEK STİLLER --- */
/* Overlay Arkaplanı */
header .menu-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
z-index: 1000;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
/* YENİ MASAÜSTÜ / VARSAYILAN STİLLERİ */
header .nav-links {
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: start;
/* Orijinal yatay menü için */
}
/* Kapatma butonunu masaüstünde gizle */
header .close-menu {
display: none;
}
/* Kapatma Butonu */
header .close-menu {
background: none;
border: none;
font-size: 2.5rem;
color: #333;
position: absolute;
top: 10px;
right: 20px;
cursor: pointer;
line-height: 1;
}
/* Mobil için "Üye Girişi" linkini gizle/göster */
header .mobile-user-links {
display: none;
/* Masaüstünde gizli */
}
header .mobile-user-links a {
color: #495057;
text-decoration: none;
font-weight: 500;
}
/* Menü Açıkken Aktif Olacak Stiller */
body.menu-is-open header .menu-overlay {
opacity: 1;
visibility: visible;
}
body.menu-is-open header .nav-links {
left: 0;
padding-top: 30px;
/* Menüyü ekranın içine kaydır */
}
/* --- YENİ EKLENECEK STİLLER: Ok ve Masaüstü Hover --- */
/* Mobil için Alt Menü Okları */
header .submenu-arrow {
display: none;
/* Varsayılan olarak (masaüstünde) gizli */
width: 30px;
height: 30px;
/* Link ile aynı hizada olması için */
position: absolute;
right: 0;
top: 0;
cursor: pointer;
z-index: 1;
/* Linkin önüne geçmemesi için */
}
/* Okun ::after pseudo-elementi ile oluşturulması */
header .submenu-arrow::after {
content: '';
position: absolute;
top: 50%;
right: 15px;
transform: translateY(-50%) rotate(45deg);
width: 8px;
height: 8px;
border-right: 2px solid #333;
border-bottom: 2px solid #333;
transition: transform 0.3s ease;
}
/* Alt menü açıkken okun yukarı dönmesi */
header .submenu-arrow.open::after {
transform: translateY(-25%) rotate(-135deg);
}
/* --- FOOTER ANA STİLLERİ --- */
.site-footer {
background-color: #1B1E22;
color: #ccc;
padding-bottom: 20px;
font-size: 14px;
}
.site-footer h4 {
color: #fff;
font-size: 15px;
font-weight: 500;
letter-spacing: 1px;
margin-bottom: 10px;
min-height: 33px;
}
.site-footer a {
font-size: 12px;
font-weight: 500;
color: #888;
text-decoration: none;
transition: color 0.3s ease;
}
.site-footer a:hover {
color: #fff;
}
/* --- 1. ÜST BÖLÜM: Logo ve E-Bülten --- */
.footer-top {
padding: 40px 0;
background-color: #0D131B;
}
.footer-top-hiza {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 30px;
}
.footer-top-hiza .newsletter-section {
display: flex;
justify-content: end;
gap: 40px;
align-items: center;
}
.footer-logo img {
max-height: 61px;
object-fit: contain;
}
.newsletter-section h3 {
margin: 0 0 5px;
color: #fff;
font-size: 18px;
font-weight: 700;
}
.newsletter-section p {
margin: 0px;
font-size: 15px;
font-weight: 300;
}
.newsletter-form {
display: flex;
max-width: 350px;
}
.newsletter-form input {
flex-grow: 1;
background-color: transparent;
border: 1px solid #fff;
border-right: none;
color: #fff;
padding: 10px 15px;
font-size: 1rem;
}
.newsletter-form input:focus {
outline: none;
border-color: #fff;
}
.newsletter-form button {
background-color: transparent;
border: 1px solid #fff;
color: #fff;
padding: 10px 20px;
font-size: 1.5rem;
cursor: pointer;
transition: background-color 0.3s;
}
.newsletter-form button:hover {
background-color: #444;
}
/* --- 2. ORTA BÖLÜM: Link Sütunları --- */
.footer-main {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 40px;
margin-top: 50px;
}
.footer-column ul {
list-style: none;
padding: 0;
margin: 0;
}
.footer-column ul li {
margin-bottom: 12px;
}
/* Örnek resimdeki seçili alan için */
.footer-column ul li.active {
border: 1px solid #007bff;
padding: 5px;
}
.contact-info p {
margin: 0 0 10px;
}
.social-icons {
margin-top: 20px;
display: flex;
gap: 10px;
}
.social-icons a {
font-size: 16px;
height: 30px;
width: 30px;
background: #fff;
color: #1B1E22;
line-height: 30px;
border-radius: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.social-icons a:hover {
background: #ea5b0c;
color: #fff;
}
/* --- 3. ALT BÖLÜM: Telif Hakkı ve Logolar --- */
.footer-bottom {
align-items: center;
gap: 20px;
margin-top: 40px;
padding-top: 20px;
border-top: 1px solid #444;
font-size: 13px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.footer-bottom p {
margin-bottom: 0px;
font-size: 14px;
font-weight: 400;
}
.footer-payment-logos {
display: flex;
align-items: center;
gap: 10px;
}
.footer-payment-logo img {
height: 30px;
object-fit: contain;
}
.newsletter-section input:-webkit-autofill,
.newsletter-section input:-webkit-autofill:hover,
.newsletter-section input:-webkit-autofill:focus,
.newsletter-section input:-webkit-autofill:active {
/* Metin rengini değiştirmek için bu özelliği kullanın */
-webkit-text-fill-color: #fff !important;
}
/* Masaüstü için Hover Özelliği (992px ve üzeri) */
@media (min-width: 992px) {
header .has-dropdown:hover>.dropdown-menu {
display: block;
min-width: max-content;
}
header .has-dropdown:hover>.dropdown-menu li:hover {
background-color: #000;
}
header .has-dropdown:hover>.dropdown-menu li:hover a {
color: #fff;
}
header .main-nav {
padding: 0 0 20px 0;
}
}
@media (min-width: 767px) {
#footer ul.column {
display: flex;
flex-direction: column;
}
}
/* --- SLIDER ANA KAPSAYICI STİLLERİ --- */
/* Tüm stiller artık .home-slider altından başlıyor */
.home-slider .item {
position: relative;
height: 80vh;
/* Ekran yüksekliğinin %80'i kadar */
min-height: 500px;
background-size: cover;
background-position: center center;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: white;
}
/* Resimlerin üzerine metnin daha okunaklı olması için siyah bir katman ekliyoruz */
.home-slider .item::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
/* Siyah ve %50 şeffaf */
z-index: 1;
}
/* SLAYT İÇERİĞİ */
.home-slider .slide-content {
position: relative;
z-index: 2;
/* Siyah katmanın üzerinde kalması için */
max-width: 800px;
padding: 20px;
}
.home-slider .slide-content h2 {
font-size: 3.5rem;
margin: 0 0 15px 0;
font-weight: 700;
text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6);
}
.home-slider .slide-content p {
font-size: 1.2rem;
margin: 0 0 30px 0;
font-weight: 300;
}
.home-slider .cta-button {
background-color: white;
color: #333;
padding: 12px 30px;
text-decoration: none;
font-size: 1rem;
font-weight: bold;
border-radius: 4px;
transition: background-color 0.3s ease, color 0.3s ease;
}
.home-slider .cta-button:hover {
background-color: #f0f0f0;
color: #000;
}
/* --- OWL CAROUSEL NAVİGASYON (ÖZEL GÖRSELLER İLE) --- */
.home-slider .owl-nav .owl-prev,
.home-slider .owl-nav .owl-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
/* Görsel boyutlarınızı buraya girin */
width: 40px;
height: 40px;
/* Metni gizle */
font-size: 0;
text-indent: -9999px;
/* Arka plan ayarları */
background-repeat: no-repeat;
background-position: center;
background-size: contain;
/* Görseli alana sığdırır */
/* Eski arkaplan ve border'ları sıfırla */
background-color: transparent !important;
border-radius: 0;
opacity: 1;
transition: opacity 0.3s ease;
}
.home-slider .owl-nav .owl-prev:hover,
.home-slider .owl-nav .owl-next:hover {
opacity: 0.8;
}
/* Sol ok için görseli ata */
.home-slider .owl-nav .owl-prev {
left: 20px;
background-image: url('./../../assets/images/v-left.png');
}
/* Sağ ok için görseli ata */
.home-slider .owl-nav .owl-next {
right: 20px;
background-image: url('./../../assets/images/v-right.png');
}
/* --- OWL CAROUSEL DOTS (NOKTALAR) STİLLERİ --- */
.home-slider .owl-dots {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
justify-content: center;
}
.home-slider .owl-dots .owl-dot span {
width: 15px !important;
height: 15px !important;
margin: 5px 7px !important;
background: rgba(255, 255, 255, 0.5) !important;
transition: background 0.3s ease !important;
display: block;
}
.home-slider .owl-dots .owl-dot.active span,
.home-slider .owl-dots .owl-dot:hover span {
background: white !important;
}
.home-slider .item {
height: calc(100vh - 183px);
min-height: 300px;
max-height: 500px;
}
/* brd hero */
.brd-image-hero .item {
position: relative;
height: 80vh;
/* Ekran yüksekliğinin %80'i kadar */
min-height: 500px;
background-size: cover;
background-position: center center;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: white;
}
/* Resimlerin üzerine metnin daha okunaklı olması için siyah bir katman ekliyoruz */
.brd-image-hero .item::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
/* Siyah ve %50 şeffaf */
z-index: 1;
}
/* SLAYT İÇERİĞİ */
.brd-image-hero .slide-content {
position: relative;
z-index: 2;
/* Siyah katmanın üzerinde kalması için */
max-width: 800px;
padding: 20px;
}
.brd-image-hero .slide-content h2 {
font-size: 3.5rem;
margin: 0 0 15px 0;
font-weight: 700;
text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6);
}
.brd-image-hero .slide-content p {
font-size: 1.2rem;
margin: 0 0 30px 0;
font-weight: 300;
}
.brd-image-hero .cta-button {
background-color: white;
color: #333;
padding: 12px 30px;
text-decoration: none;
font-size: 1rem;
font-weight: bold;
border-radius: 4px;
transition: background-color 0.3s ease, color 0.3s ease;
}
.brd-image-hero .cta-button:hover {
background-color: #f0f0f0;
color: #000;
}
.brd-image-hero .item {
height: calc(100vh - 183px);
min-height: 300px;
max-height: 500px;
}
.product-showcase-section {
/* max-width: 1200px;
margin: 50px auto;
padding: 20px; */
text-align: center;
}
/* --- Üst Kategori Butonları --- */
.showcase-filters {
margin-bottom: 30px;
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 10px;
}
.filter-btn {
display: inline-block;
padding: 8px 20px;
border: 1px solid #444;
background-color: white;
color: #000;
text-decoration: none;
font-size: 15px;
font-weight: 500;
transition: all 0.3s ease;
box-shadow: 0px 4px 13px 0px #D9D9D999;
}
.filter-btn:hover {
background-color: #f5f5f5;
border-color: #222;
}
/* --- Açıklama Metni --- */
.showcase-description {
margin: 0 auto 10px auto;
color: #666;
line-height: 1.6;
font-size: 16px;
font-weight: 500;
}
/* --- Kategori Kartı Stilleri --- */
.category-card {
/* padding: 10px; */
text-align: center;
}
.card-image-wrapper {
/* border: 1px solid #e0e0e0; */
overflow: hidden;
background-color: white;
margin-bottom: 0px;
padding: 15px;
/* box-shadow: 0 2px 5px rgba(0,0,0,0.05); */
}
.category-card.framed .card-image-wrapper {
border: 15px solid black;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.card-image-wrapper a {
display: block;
text-decoration: none;
}
.card-image-wrapper img {
width: 100%;
height: auto;
display: block;
transition: transform 0.4s ease;
height: 255px;
object-fit: contain;
}
.category-card:hover .card-image-wrapper img {
transform: scale(1.1);
}
.card-title {
font-size: 15px;
color: #666;
font-weight: 500;
margin: 0;
line-height: 1.3;
}
.card-title-for-parent {
font-size: 11px;
color: #444;
font-weight: 500;
margin: 0;
line-height: 1.3;
margin-top: 10px;
}
.view-all-btn {
display: inline-block;
margin-top: 40px;
padding: 10px 30px;
border: 1px solid #444;
text-decoration: none;
color: #444;
background-color: white;
transition: all 0.3s ease;
font-size: 16px;
font-weight: 500;
}
.view-all-btn:hover {
background-color: #f5f5f5;
border-color: #333;
}
/* --- OWL CAROUSEL 1.x NAVİGASYON VE DOTS STİLLERİ --- */
.product-showcase-section .owl-carousel-wrapper {
position: relative;
}
.product-showcase-section .owl-prev,
.product-showcase-section .owl-next {
position: absolute;
top: 40%;
transform: translateY(-50%);
font-size: 30px;
color: #aaa;
background-color: rgba(255, 255, 255, 0.7);
padding: 0 15px;
transition: color 0.3s ease;
z-index: 10;
}
.product-showcase-section .owl-prev:hover,
.product-showcase-section .owl-next:hover {
color: #333;
}
.product-showcase-section .owl-prev {
left: -40px;
}
.product-showcase-section .owl-next {
right: -40px;
}
.product-showcase-section .owl-pagination {
margin-top: 30px;
}
.product-showcase-section .owl-theme .owl-controls .owl-page span {
background: #ccc !important;
}
.product-showcase-section .owl-theme .owl-controls .owl-page.active span {
background: #555 !important;
}
/* --- OWL CAROUSEL DOTS (NOKTALAR) STİLLERİ --- */
.product-showcase-section .view-all-btn {
margin-top: 100px;
}
.product-showcase-section .owl-dots {
position: absolute;
bottom: -70px;
left: 50%;
transform: translateX(-50%);
display: flex;
justify-content: center;
flex-wrap: wrap;
width: 100%;
}
.product-showcase-section .owl-dots .owl-dot span {
width: 15px !important;
height: 15px !important;
margin: 5px 7px !important;
background: #444 !important;
opacity: 0.15;
transition: background 0.3s ease !important;
display: block;
}
.product-showcase-section .owl-dots .owl-dot.active span,
.product-showcase-section .owl-dots .owl-dot:hover span {
background: #444 !important;
opacity: 0.75;
}
/* Kartın ana taşıyıcısı olan link (a elementi) */
.category-card-generic {
display: block;
/* a etiketinin block element gibi davranmasını sağlar */
position: relative;
/* İçindeki mutlak konumlandırılmış etiketler için referans noktası */
width: 100%;
/* Kartın genişliği */
background-color: #fff;
/* Görseldeki gri arkaplan */
padding: 0px;
/* Gri çerçeve oluşturmak için iç boşluk */
text-decoration: none;
/* Link alt çizgisini kaldırır */
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
/* Hafif bir gölge */
border-radius: 2px;
/* Kenarları hafif yuvarlak yapar */
}
/* Resmin bulunduğu ve taşmayı engelleyen sarmalayıcı */
.category-card-generic .card-image-wrapper {
width: 100%;
height: 253px;
/* Kartın resim alanının yüksekliği */
padding: 0px;
overflow: hidden;
/* BU KISIM, BÜYÜYEN RESMİN DIŞARI TAŞMASINI ENGELLER */
}
/* Kategori resmi */
.category-card-generic .card-image-wrapper img {
width: 100%;
height: 100%;
object-fit: contain;
/* Resmin en-boy oranını koruyarak alanı doldurmasını sağlar */
transition: transform 0.4s ease-in-out;
/* Büyüme efektinin yumuşak olmasını sağlar */
}
/* Fare imleci kartın üzerine geldiğinde resme uygulanacak stil */
.category-card-generic:hover .card-image-wrapper img {
transform: scale(1.1);
/* Resmi %10 oranında büyütür */
}
/* Kategori isminin yazdığı etiket */
.category-card-generic .card-category {
position: absolute;
/* Konumlandırmayı ana taşıyıcıya göre yapar */
bottom: 30px;
/* Alttan boşluk */
left: 30px;
/* Soldan boşluk */
background-color: rgba(255, 255, 255, 0.95);
color: #000;
/* Yazı rengi */
padding: 12px 16px;
/* Etiket içi boşluklar */
font-size: 16px;
font-weight: 500;
letter-spacing: 1px;
/* Harfler arası boşluk */
max-width: 60%;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
/* Kartın ana taşıyıcısı olan link (a elementi) */
.hizmet-card-generic {
display: block;
/* a etiketinin block element gibi davranmasını sağlar */
position: relative;
/* İçindeki mutlak konumlandırılmış etiketler için referans noktası */
width: 100%;
/* Kartın genişliği */
background-color: #fff;
/* Görseldeki gri arkaplan */
padding: 0px;
/* Gri çerçeve oluşturmak için iç boşluk */
text-decoration: none;
/* Link alt çizgisini kaldırır */
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
/* Hafif bir gölge */
border-radius: 2px;
/* Kenarları hafif yuvarlak yapar */
}
/* Resmin bulunduğu ve taşmayı engelleyen sarmalayıcı */
.hizmet-card-generic .card-image-wrapper {
width: 100%;
height: 366px;
/* Kartın resim alanının yüksekliği */
padding: 0px;
overflow: hidden;
/* BU KISIM, BÜYÜYEN RESMİN DIŞARI TAŞMASINI ENGELLER */
}
/* Kategori resmi */
.hizmet-card-generic .card-image-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
/* Resmin en-boy oranını koruyarak alanı doldurmasını sağlar */
transition: transform 0.4s ease-in-out;
/* Büyüme efektinin yumuşak olmasını sağlar */
}
/* Fare imleci kartın üzerine geldiğinde resme uygulanacak stil */
.hizmet-card-generic:hover .card-image-wrapper img {
transform: scale(1.1);
/* Resmi %10 oranında büyütür */
}
/* Kategori isminin yazdığı etiket */
.hizmet-card-generic .card-category {
position: absolute;
/* Konumlandırmayı ana taşıyıcıya göre yapar */
bottom: 30px;
/* Alttan boşluk */
left: 30px;
/* Soldan boşluk */
background-color: rgba(255, 255, 255, 0.95);
color: #000;
/* Yazı rengi */
padding: 12px 16px;
/* Etiket içi boşluklar */
font-size: 16px;
font-weight: 500;
letter-spacing: 1px;
/* Harfler arası boşluk */
max-width: 60%;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
.component-padding {
padding: 70px 0;
}
.component-top {
margin-bottom: 30px;
}
.component-top h2 {
font-size: 30px;
text-align: center;
font-weight: 500;
}
.component-top .editor-content p {
color: #666;
font-weight: 500;
font-size: 16px;
text-align: center;
margin-top: 20px;
margin-bottom: 20px;
}
.kategori-kanvas-alani {
background-color: #F9F9F8;
}
.kategori-kanvas-alani .items {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.kategori-kanvas-alani .category-card-generic .card-image-wrapper img {
padding: 5%;
background: #D9D9D9;
box-shadow: 0px 4px 12px 0px #D9D9D933;
}
.kategori-kanvas-alani .view-all-btn {
text-align: center;
margin: auto;
display: block;
width: max-content;
margin-top: 40px;
}
.kategori-baski-hat-alani {
background-color: #fff;
}
.kategori-baski-hat-alani .items {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.kategori-baski-hat-alani .category-card-generic .card-image-wrapper img {
padding: 5%;
background: #343233;
box-shadow: 0px 4px 12px 0px #D9D9D933;
}
.kategori-baski-hat-alani .view-all-btn {
text-align: center;
margin: auto;
display: block;
width: max-content;
margin-top: 40px;
}
.kategori-baski-hat-alani .category-card-generic .card-image-wrapper {
height: 296px;
}
.kategori-posterler-alani {
background-color: #1B1E22;
padding-bottom: 100px;
}
.kategori-posterler-alani .component-top h2 {
color: #fff;
}
.kategori-posterler-alani .category-card-generic .card-image-wrapper {
background: transparent;
}
.kategori-posterler-alani .category-card-generic .card-image-wrapper img {
padding: 0;
background: transparent;
object-fit: cover;
}
.kategori-posterler-alani .category-card-generic {
box-shadow: none;
background-color: transparent;
}
.kategori-posterler-alani .owl-dots {
position: absolute;
bottom: -50px;
left: 50%;
transform: translateX(-50%);
display: flex;
justify-content: center;
flex-wrap: wrap;
width: 100%;
}
.kategori-posterler-alani .owl-dots .owl-dot span {
width: 15px !important;
height: 15px !important;
margin: 5px 7px !important;
background: #fff !important;
opacity: 0.5;
transition: background 0.3s ease !important;
display: block;
}
.kategori-posterler-alani .owl-dots .owl-dot.active span,
.kategori-posterler-alani .owl-dots .owl-dot:hover span {
background: #fff !important;
opacity: 1;
}
.kategori-hediyelik-alani {
background-color: #fff;
}
.kategori-hediyelik-alani .items {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.kategori-hediyelik-alani .category-card-generic .card-image-wrapper img {
padding: 0;
background: #343233;
box-shadow: 0px 4px 12px 0px #D9D9D933;
object-fit: cover;
}
.kategori-hediyelik-alani .category-card-generic .card-image-wrapper {
height: 296px;
}
.kategori-cerceve-alani {
background-color: #F9F9F8;
padding-bottom: 100px;
}
.kategori-cerceve-alani .category-card-generic .card-image-wrapper {
background: transparent;
}
.kategori-cerceve-alani .category-card-generic .card-image-wrapper {
height: 419px;
}
.kategori-cerceve-alani .category-card-generic .card-image-wrapper img {
padding: 10%;
background: #D9D9D9;
}
.kategori-cerceve-alani .category-card-generic {
box-shadow: none;
background-color: transparent;
}
.kategori-cerceve-alani .owl-dots {
position: absolute;
bottom: -50px;
left: 50%;
transform: translateX(-50%);
display: flex;
justify-content: center;
flex-wrap: wrap;
width: 100%;
}
.kategori-cerceve-alani .owl-dots .owl-dot span {
width: 15px !important;
height: 15px !important;
margin: 5px 7px !important;
background: #444 !important;
opacity: 0.15;
transition: background 0.3s ease !important;
display: block;
}
.kategori-cerceve-alani .owl-dots .owl-dot.active span,
.kategori-cerceve-alani .owl-dots .owl-dot:hover span {
background: #444 !important;
opacity: 0.75;
}
.anasayfa-hizmet {
background-color: #fff;
padding-bottom: 100px;
}
.anasayfa-hizmet .category-card-generic .card-image-wrapper {
background: transparent;
}
.anasayfa-hizmet .category-card-generic .card-image-wrapper {
height: 419px;
}
.anasayfa-hizmet .category-card-generic .card-image-wrapper img {
padding: 10%;
background: #D9D9D9;
}
.anasayfa-hizmet .category-card-generic {
box-shadow: none;
background-color: transparent;
}
.anasayfa-hizmet .owl-dots {
position: absolute;
bottom: -50px;
left: 50%;
transform: translateX(-50%);
display: flex;
justify-content: center;
flex-wrap: wrap;
width: 100%;
}
.anasayfa-hizmet .owl-dots .owl-dot span {
width: 15px !important;
height: 15px !important;
margin: 5px 7px !important;
background: #444 !important;
opacity: 0.15;
transition: background 0.3s ease !important;
display: block;
}
.anasayfa-hizmet .owl-dots .owl-dot.active span,
.anasayfa-hizmet .owl-dots .owl-dot:hover span {
background: #444 !important;
opacity: 0.75;
}
.anasayfa-blog {
background-color: #F9F9F8;
padding-bottom: 100px;
}
.anasayfa-blog .owl-dots {
position: absolute;
bottom: -50px;
left: 50%;
transform: translateX(-50%);
display: flex;
justify-content: center;
flex-wrap: wrap;
width: 100%;
}
.anasayfa-blog .owl-dots .owl-dot span {
width: 15px !important;
height: 15px !important;
margin: 5px 7px !important;
background: #444 !important;
opacity: 0.15;
transition: background 0.3s ease !important;
display: block;
}
.anasayfa-blog .owl-dots .owl-dot.active span,
.anasayfa-blog .owl-dots .owl-dot:hover span {
background: #444 !important;
opacity: 0.75;
}
/* Ana kart sarmalayıcısı (a elementi) */
.blog-card-generic {
display: block;
/* a etiketinin block olarak davranması için */
width: 100%;
background: #fff;
text-decoration: none;
/* Link alt çizgisini kaldır */
color: #333;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
/* İnce bir gölge */
border-radius: 4px;
/* Görseldeki gibi keskin köşelere yakın */
overflow: hidden;
/* Hem resmin zoom'da taşmasını hem de gölgelerin düzgün görünmesini sağlar */
/* Hover animasyonları için geçiş */
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
/* * UYGUN HOVER EFEKTİ 1: Kartı yukarı kaldır ve gölgeyi büyüt
*/
.blog-card-generic:hover .blog-card-title {
color: #2A3037;
}
/* Resmin taşmasını engelleyecek sarmalayıcı */
.blog-card-image-wrapper {
width: 100%;
height: 253px;
/* Resim yüksekliği */
overflow: hidden;
/* EN ÖNEMLİ KISIM: Büyüyen resmin dışarı taşmasını engeller */
}
.blog-card-image-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
/* Resmin orantısını bozmadan alanı kaplar */
transition: transform 0.4s ease;
/* Zoom efektini yumuşatır */
}
/* * UYGUN HOVER EFEKTİ 2: Resme zoom yap
*/
.blog-card-generic:hover .blog-card-image-wrapper img {
transform: scale(1.05);
/* Resmi %5 büyüt */
}
/* Kartın metin içeriği alanı */
.blog-card-content {
padding: 24px;
}
.blog-card-date {
display: block;
font-size: 13px;
color: #000;
margin-bottom: 10px;
}
.blog-card-title {
font-size: 18px;
font-weight: 600;
color: #000;
margin: 0 0 12px 0;
/* Üst marjı sıfırla, alta boşluk ver */
line-height: 1.3;
}
.blog-card-description {
font-size: 14px;
font-weight: 400;
color: #666;
line-height: 1.3;
margin-bottom: 10px;
}
.blog-card-arrow {
font-size: 24px;
font-weight: bold;
color: #222;
transition: transform 0.3s ease;
/* Ok animasyonu için geçiş */
}
/* * UYGUN HOVER EFEKTİ 3: Oku sağa kaydır
*/
.blog-card-generic:hover .blog-card-arrow {
transform: translateX(5px);
/* Oku 5px sağa hareket ettir */
}
/* 1. ADIM: Owl Carousel'in ana sahnesindeki tüm .owl-item'ların
en uzunuyla aynı yüksekliğe sahip olmasını garantile */
#blog-slider .owl-stage {
display: flex;
/* Zaten varsayılanı budur, ama garantileyelim */
align-items: stretch;
/* BU ÖNEMLİ: Tüm .owl-item'ları en uzunu kadar esnetir */
}
/* 2. ADIM: .owl-item'ı da bir flex container yap ki,
içindeki .item elemanı esneyebilsin */
#blog-slider .owl-item {
display: flex;
flex: 1 0 auto;
/* Esneme ve küçülme ayarı */
}
/* 3. ADIM: .item'ın, .owl-item'ı tamamen doldurmasını sağla */
#blog-slider .owl-item .item {
display: flex;
/* Bunu da flex yapıyoruz */
flex: 1;
/* .owl-item'ın içini tamamen doldurmasını sağlar */
}
/* 4. ADIM: Ana kartımızı dikey bir flex container yap
ve ebeveyni olan .item'ı tamamen doldurmasını sağla */
.blog-card-generic {
display: flex;
flex-direction: column;
/* İçerik (resim + metin) dikey sıralanacak */
width: 100%;
/* .item'ın genişliğini al */
flex: 1;
/* .item'ın YÜKSEKLİĞİNİ al (en önemli kısımlardan biri) */
}
/* 5. ADIM: İçerik alanının (yazıların olduğu kısım)
resimden arta kalan tüm boşluğu doldurmasını sağla */
.blog-card-content {
flex-grow: 1;
/* Boşluğu doldurarak esne */
/* Oku (→) en alta itebilmek için bunu da flex yapıyoruz */
display: flex;
flex-direction: column;
}
/* 6. ADIM: Oku (→) her zaman kartın en altına it */
.blog-card-arrow {
margin-top: auto;
/* Kalan tüm dikey boşluğu üstüne marj olarak alır */
}
.anasayfa-blog .view-all-btn {
text-align: center;
margin: auto;
display: block;
width: max-content;
margin-top: 80px;
}
.anasayfa-sss .view-all-btn {
text-align: center;
margin: auto;
display: block;
width: max-content;
margin-top: 40px;
}
/* ---------------------------------
* AKORDİON STİLLERİ
* --------------------------------- */
/* Ana Akordion Alanı */
.faq-generic-area {
width: 100%;
margin: 0 auto;
background-color: #ffffff;
}
/* Her bir Soru Öğesi */
.faq-generic-area .faq-item {
/* Her bir öğeyi alttan çizgiyle ayır */
border: 1px solid #e6e6e6;
margin-bottom: 20px;
}
/* Soru Başlığı (Tetikleyici Düğme) */
.faq-generic-area .faq-trigger {
/* Düğmenin varsayılan stillerini sıfırla */
background: none;
border: none;
padding: 0;
font: inherit;
color: inherit;
cursor: pointer;
/* Düzen */
display: flex;
justify-content: space-between;
/* Başlığı sola, ikonu sağa yasla */
align-items: center;
width: 100%;
padding: 20px 24px;
/* İç boşluk */
text-align: left;
transition: background-color 0.2s ease;
}
.faq-generic-area .faq-trigger:hover {
background-color: #f9f9f9;
}
.faq-generic-area .faq-item.active .faq-trigger {
background-color: #D9D9D9;
}
.faq-generic-area .faq-title {
font-size: 17px;
font-weight: 600;
color: #000;
}
/* Font Awesome İkon Stili */
.faq-generic-area .faq-icon {
font-size: 24px;
/* Görseldeki gibi daha ince bir ikon */
color: #000;
/* İkonların ani geçiş yapmaması için */
transition: transform 0.3s ease;
}
.faq-generic-area .faq-icon i {
font-weight: 500;
}
/* İkon Değişim Mantığı (FA4 için) */
.faq-generic-area .faq-icon .fa-minus {
display: none;
/* Eksi ikonu başta gizli */
}
.faq-generic-area .faq-item.active .faq-icon .fa-minus {
display: inline-block;
/* Aktif olunca eksiyi göster */
}
.faq-generic-area .faq-item.active .faq-icon .fa-plus {
display: none;
/* Aktif olunca artıyı gizle */
}
/* Gizli İçerik Alanı */
.faq-generic-area .faq-content {
max-height: 0;
overflow: hidden;
padding: 0 24px;
/* Dikey padding 0, yatay padding kalsın */
color: #666;
line-height: 1.7;
font-size: 15px;
/*
* YENİ GEÇİŞ (ANİMASYON)
* 'ease-in-out' kullanmak, hem başlangıcı hem bitişi yumuşatır, 'ease-in' gibi takılmaz.
* Süreyi 0.4s'den 0.35s'ye çekmek daha akıcı hissettirir.
*/
transition: max-height 0.35s ease-in-out,
padding-top 0.35s ease-in-out,
padding-bottom 0.35s ease-in-out;
}
.faq-generic-area .faq-content p {
opacity: 0;
transform: translateY(-10px);
/* Hafifçe yukarıdan gelsin */
transition: opacity 0.3s ease-out 0.1s,
/* 0.1s gecikmeyle başla */
transform 0.3s ease-out 0.1s;
}
/*
* AKTİF DURUM (JavaScript ile .active sınıfı eklendiğinde)
*/
.faq-generic-area .faq-item.active .faq-content {
/* max-height, içeriğinizin sığacağı kadar yüksek bir değer olmalı */
max-height: unset;
/* Dikey padding'i (boşluğu) geri ekle */
padding: 22px 24px 22px 24px;
/* * Aktif durumdaki 'transition' tanımını kaldırıyoruz.
* Artık tüm animasyon mantığı yukarıdaki .faq-content sınıfı tarafından yönetiliyor.
*/
}
.faq-generic-area .faq-item.active .faq-content p {
opacity: 1;
transform: translateY(0);
}
/* --- Breadcrumb Kapsayıcı --- */
.breadcrumb-container {
width: 100%;
/* padding: 10px 0; */
/* Sola yaslı olması için ekstra birşeye gerek yok, block elementler varsayılan olarak soldan başlar */
}
/* --- Breadcrumb Liste (ol) --- */
.breadcrumb-list {
display: flex;
/* Öğeleri yatayda hizalar */
flex-wrap: wrap;
/* Responsive: Ekran küçüldüğünde öğeler alt satıra geçer */
list-style: none;
/* Liste noktalarını kaldırır */
margin: 0;
padding: 0;
}
/* --- Breadcrumb Öğeleri (li) --- */
.breadcrumb-item {
display: flex;
/* Ayırıcıyı dikeyde ortalamak için */
align-items: center;
font-size: 13px;
font-weight: 500;
/* Mobil cihazda alt satıra geçtiğinde biraz boşluk bırakır */
margin-bottom: 5px;
}
/* --- Ayırıcı ('>') --- */
/* İlk öğe hariç tüm öğelerin BAŞINA bir ayırıcı ekler */
.breadcrumb-item+.breadcrumb-item::before {
content: '>';
/* Ayırıcı karakter */
margin: 0 5px;
/* Ayırıcının sağına ve soluna boşluk */
color: #666;
/* Ayırıcının rengi */
font-size: 14px;
}
/* --- Bağlantılar (a) --- */
.breadcrumb-item a {
color: #666;
/* Bağlantı metin rengi */
text-decoration: none;
/* Varsayılan alt çizgiyi kaldırır */
border-bottom: 0.5px solid #D9D9D9;
/* Görseldeki gibi hafif alt çizgi */
padding-bottom: 3px;
/* Çizgi ile metin arasına boşluk */
transition: border-color 0.2s ease-in-out;
/* Yumuşak geçiş */
}
/* --- Bağlantıların üzerine gelince (hover) --- */
.breadcrumb-item a:hover {
border-bottom-color: #000;
/* Üzerine gelince çizgi belirginleşir */
color: #000;
}
.breadcrumb-item.active {
color: #666;
pointer-events: none;
}
.brd-image-hero {
position: relative;
display: flex;
justify-content: center;
width: 100%;
}
.brd-image-hero .breadcrumb-container {
position: absolute;
top: 20px;
z-index: 1;
}
.brd-image-hero .item {
width: 100%;
}
.brd-image-hero .breadcrumb-item a {
color: #fff;
border-bottom: 0.5px solid #ffffff80;
}
.brd-image-hero .breadcrumb-item {
color: #fff;
}
.brd-image-hero .breadcrumb-item a:hover {
color: #fff;
border-bottom: 0.5px solid #fff;
}
.brd-image-hero .breadcrumb-item::before {
color: #fff;
}
.tum-kategoriler-page {
background-color: #fff;
margin-bottom: 60px;
}
.tum-kategoriler-page .items {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.tum-kategoriler-page .category-card-generic .card-image-wrapper img {
padding: 0;
background: #343233;
box-shadow: 0px 4px 12px 0px #D9D9D933;
object-fit: cover;
}
.tum-kategoriler-page .category-card-generic .card-image-wrapper {
height: 334px;
}
/* --- Genel Ayarlar ve Resetleme --- */
.generic-sidebar-wrapper *,
.generic-sidebar-wrapper *::before,
.generic-sidebar-wrapper *::after {
box-sizing: border-box;
}
/* --- Ana Kapsayıcı --- */
.generic-sidebar-wrapper {
width: 100%;
}
/* ===========================================
MOBİL FİLTRE TETİKLEME BARI (Görsel 2)
===========================================
*/
.generic-sidebar-wrapper .mobile-filter-bar {
padding: 15px;
background-color: #fff;
border-bottom: 1px solid #e0e0e0;
padding: 0px;
padding-bottom: 20px;
margin-bottom: 20px;
}
.generic-sidebar-wrapper .mobile-search-box {
position: relative;
margin-bottom: 15px;
}
.generic-sidebar-wrapper .mobile-search-box input {
width: 100%;
height: 44px;
padding-left: 15px;
padding-right: 40px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 16px;
}
.generic-sidebar-wrapper .mobile-search-box .search-icon {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 20px;
color: #888;
}
.generic-sidebar-wrapper .results-and-filter {
display: flex;
justify-content: space-between;
align-items: center;
}
.generic-sidebar-wrapper .results-count .label {
font-size: 12px;
color: #888;
display: block;
text-transform: uppercase;
}
.generic-sidebar-wrapper .results-count .count {
font-size: 20px;
font-weight: 600;
color: #111;
}
.generic-sidebar-wrapper .mobile-filter-btn {
display: flex;
align-items: center;
padding: 10px 15px;
background-color: #fff;
border: 1px solid #333;
border-radius: 4px;
font-size: 16px;
font-weight: 500;
cursor: pointer;
}
.generic-sidebar-wrapper .mobile-filter-btn .filter-icon {
width: 18px;
height: 18px;
margin-left: 8px;
}
/* ===========================================
FİLTRE KENAR ÇUBUĞU (SIDEBAR - Görsel 1)
===========================================
*/
/* --- Mobil Overlay Arkaplanı --- */
.generic-sidebar-wrapper .sidebar-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 998;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
/* --- Kenar Çubuğu (Sidebar) --- */
.generic-sidebar-wrapper .sidebar-filters {
/* === Mobil Görünüm (Varsayılan - Overlay) === */
position: fixed;
top: 0;
left: 0;
width: 300px;
/* Overlay genişliği */
max-width: 85%;
height: 100%;
background-color: #fff;
z-index: 999;
overflow-y: auto;
transform: translateX(-100%);
transition: transform 0.3s ease;
padding: 20px;
}
/* --- Mobil Sidebar Başlığı (Kapatma Butonu) --- */
.generic-sidebar-wrapper .sidebar-header-mobile {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 15px;
border-bottom: 1px solid #e0e0e0;
margin-bottom: 15px;
}
.generic-sidebar-wrapper .sidebar-header-mobile h3 {
margin: 0;
font-size: 18px;
}
.generic-sidebar-wrapper .sidebar-header-mobile .close-filter-btn {
background: none;
border: none;
font-size: 30px;
font-weight: 300;
line-height: 1;
cursor: pointer;
padding: 0 5px;
color: #888;
}
/* --- Filtre Blokları (Kategoriler, Konu, Renk...) --- */
.generic-sidebar-wrapper .filter-block {
border-bottom: 1px solid #f0f0f0;
padding: 15px 0;
}
.generic-sidebar-wrapper .filter-block-header {
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
user-select: none;
/* Metin seçmeyi engelle */
}
.generic-sidebar-wrapper .filter-block-header span {
font-size: 14px;
font-weight: 500;
color: #666;
}
.generic-sidebar-wrapper .filter-block-header .chevron-icon {
width: 16px;
height: 16px;
color: #888;
transition: transform 0.2s ease;
}
/* --- Açılabilir İçerik Alanı --- */
.generic-sidebar-wrapper .filter-block-body {
max-height: 0;
overflow: hidden;
/* Kapanırken taşma HEMEN gizlenmeli */
padding-top: 0;
}
.generic-sidebar-wrapper .filter-block-body ul {
list-style: none;
padding: 0;
margin: 0;
}
.generic-sidebar-wrapper .filter-block-body li {
margin-bottom: 12px;
}
/* --- Checkbox Stilleri (Görseldeki gibi kutu) --- */
.generic-sidebar-wrapper .filter-block-body .checkbox-label {
display: flex;
align-items: center;
cursor: pointer;
font-size: 14px;
color: #444;
font-weight: 500;
}
.generic-sidebar-wrapper .filter-block-body input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
width: 18px;
height: 18px;
border: 1px solid #aaa;
border-radius: 2px;
margin-right: 10px;
position: relative;
cursor: pointer;
flex-shrink: 0;
/* Küçülmeyi engelle */
}
.generic-sidebar-wrapper .filter-block-body input[type="checkbox"]:checked {
background-color: #333;
border-color: #333;
}
/* Checkbox içindeki tik işareti */
.generic-sidebar-wrapper .filter-block-body input[type="checkbox"]:checked::after {
content: '';
position: absolute;
top: 2px;
left: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.generic-sidebar-wrapper .filter-block-body .view-all-link {
font-size: 14px;
color: #555;
text-decoration: underline;
margin-top: 10px;
display: inline-block;
}
.generic-sidebar-wrapper .filter-block-body .category-link {
font-size: 15px;
color: #333;
text-decoration: none;
font-weight: 500;
}
.generic-sidebar-wrapper .filter-block-body .category-link.selected {
font-weight: 700;
color: #000;
}
.generic-sidebar-wrapper .filter-block-body .simple-text {
font-size: 15px;
color: #333;
padding-top: 10px;
}
/* --- JavaScript ile Eklenecek Aktif Sınıflar --- */
/* Akordiyonu açar */
/* Orijinal blok stilleriniz */
.generic-sidebar-wrapper .filter-block.is-open .filter-block-body {
max-height: 300px;
padding-top: 0;
overflow-y: auto;
margin-right: 5px;
margin-top: 20px;
}
/* === Webkit (Chrome, Safari, Edge) için - Sizin istediğiniz stil === */
/* Kaydırma çubuğunun kendisi (genişlik ve ana arka plan) */
.custom-vertical-scrool::-webkit-scrollbar {
width: 6px;
background-color: #F5F5F5;
}
/* Kaydırma çubuğu arka planı (yol) */
.custom-vertical-scrool::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
border-radius: 10px;
background-color: #F5F5F5;
}
/* Kaydırma çubuğu tutamacı (Kırmızı olan) */
.custom-vertical-scrool::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
background-color: #333;
/* Kırmızı tutamak */
}
.generic-sidebar-wrapper .filter-block.is-open .chevron-icon {
transform: rotate(180deg);
}
/* Mobil overlay'i açar */
body.generic-sidebar-is-open .generic-sidebar-wrapper .sidebar-overlay {
opacity: 1;
visibility: visible;
}
body.generic-sidebar-is-open .generic-sidebar-wrapper .sidebar-filters {
transform: translateX(0);
}
body.generic-sidebar-is-open {
overflow: hidden;
/* Arkaplan kaydırmayı engelle */
}
/* --- Fiyat Filtreleme Form Stilleri --- */
.generic-sidebar-wrapper .fiyat-filtrele-form .form-group {
margin-bottom: 15px;
}
.generic-sidebar-wrapper .fiyat-filtrele-form label {
display: block;
font-size: 13px;
color: #555;
margin-bottom: 5px;
font-weight: 500;
}
.generic-sidebar-wrapper .fiyat-filtrele-form .form-control {
width: 100%;
height: 34px;
padding: 0 10px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 14px;
}
/* Number input'larındaki okları (spinners) kaldır */
.generic-sidebar-wrapper .fiyat-filtrele-form input[type=number] {
-moz-appearance: textfield;
}
.generic-sidebar-wrapper .fiyat-filtrele-form input::-webkit-outer-spin-button,
.generic-sidebar-wrapper .fiyat-filtrele-form input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Bootstrap .row ve .col-md-6 için stil desteği */
/* NOT: Sitenizde Bootstrap varsa bu kodlara gerek yoktur. */
.generic-sidebar-wrapper .fiyat-filtrele-form .row {
display: flex;
flex-wrap: wrap;
margin-left: -5px;
/* Sütunlar arası boşluk için */
margin-right: -5px;
/* Sütunlar arası boşluk için */
}
.generic-sidebar-wrapper .fiyat-filtrele-form .col-md-6 {
width: 50%;
padding-left: 5px;
padding-right: 5px;
}
.generic-sidebar-wrapper .fiyat-filtrele-form .filter-price-action {
display: flex;
justify-content: flex-end;
/* Butonu sağa yaslar */
margin-top: 0px;
}
.generic-sidebar-wrapper .fiyat-filtrele-form .btn-secondary {
padding: 10px 20px;
font-size: 14px;
font-weight: 600;
background-color: #333;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.2s ease;
}
.generic-sidebar-wrapper .fiyat-filtrele-form .btn-secondary:hover {
background-color: #555;
}
/* --- Arama Kutusu Stilleri (Sidebar içi) --- */
.generic-sidebar-wrapper .sidebar-filters .mobile-search-box {
position: relative;
width: 100%;
}
.generic-sidebar-wrapper .sidebar-filters .mobile-search-box .search-filter {
width: 100%;
height: 34px;
padding-left: 15px;
padding-right: 40px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 14px;
}
.generic-sidebar-wrapper .sidebar-filters .mobile-search-box .search-icon {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
width: 16px;
height: 16px;
color: #666;
cursor: pointer;
/* Tıklanabilir olduğunu belirtir */
}
.urun-listeleme-sayfasi {
padding-top: 20px;
padding-bottom: 80px;
}
.blog-listeleme-sayfasi {}
.category-content-top {
max-height: 165px;
overflow-y: auto;
margin-top: 15px;
}
.category-content-children-cats {
display: grid;
grid-template-columns: repeat(6, 1fr);
border-top: 1px solid #D9D9D9;
border-bottom: 1px solid #D9D9D9;
padding: 30px 0 40px 0;
margin: 30px 0;
gap: 15px;
}
.category-content-children-cats .card-image-wrapper img {
height: 200px;
}
/* Ürün kartının ana kapsayıcısı */
.product-card {
width: 100%;
/* Kartın genişliği */
background-color: #ffffff;
text-align: center;
margin-bottom: 30px;
}
/* YENİ: Ürün görselinin kapsayıcısı */
.product-card .product-image-container {
overflow: hidden;
/* Zoom efekti için taşan kısmı gizle */
/* Bu stilleri .product-image'dan buraya taşıdık */
padding: 15px;
background-color: #F5F5F5;
/* box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; */
margin-bottom: 20px;
/* Linkin block element olmasını sağlayalım */
display: block;
}
/* Ürün görseli */
.product-card .product-image {
width: 100%;
height: auto;
/* YENİ: Resimlerin en-boy oranını koruyarak doldurması için */
object-fit: contain;
/* YENİ: Zoom efektinin yumuşak olması için */
transition: transform 0.4s ease;
/* Resmin block olması altındaki boşluğu alır */
display: block;
}
/* YENİ: Zoom hover efekti */
.product-card .product-image-container:hover .product-image {
transform: scale(1.05);
/* Resmi %10 büyüt */
}
/* Ürün bilgi alanı (başlık, kategori, fiyat) */
.product-card .product-info {
padding: 0 10px;
}
/* Ürün Başlığı (Geceye Doğru) */
.product-card .product-title {
font-size: 16px;
font-weight: 600;
color: #666;
margin-bottom: 10px;
line-height: 1.3;
}
/* YENİ: Başlığa eklenen 'a' etiketinin stilini sıfırlama */
.product-card .product-title a {
text-decoration: none;
/* Link alt çizgisini kaldır */
color: inherit;
/* Rengi ebeveyninden (h3) al */
transition: color 0.3s ease;
}
.product-card .product-title a:hover {
color: #000;
/* İsteğe bağlı: Hover rengi */
}
/* Ürün Kategorisi (KANVAS BASKI) */
.product-card .product-category {
font-size: 12px;
color: #666;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 10px;
display: inline-block;
/* Margin'in çalışması için */
}
/* Ürün Fiyatı (600.00 TL) */
.product-card .product-price {
font-size: 16px;
font-weight: 400;
color: #222;
margin: 0;
}
/* YENİ: İndirimli fiyattaki üstü çizili fiyat için stil */
.product-card .product-price .old-price {
text-decoration: line-through;
color: #999;
font-weight: normal;
font-size: 14px;
margin-right: 8px;
}
@media (min-width:576px) {
.product-card .product-image {
height: 210px;
}
}
@media (min-width:768px) {
.product-card .product-image {
height: 180px;
}
}
@media (min-width:1200px) {
.product-card .product-image {
height: 177px;
}
}
@media (min-width:1400px) {
.product-card .product-image {
height: 220px;
}
}
@media (min-width:1600px) {
.product-card .product-image {
height: 260px;
}
}
.category-content-top .title h2 {
font-weight: 600;
font-size: 34px;
color: #000;
margin-bottom: 15px;
}
/*
* -----------------------------------------------------------------
* ÜST FİLTRELEME ÇUBUĞU (TOOLBOX) - MASAÜSTÜ VE TEMEL STİLLER
* -----------------------------------------------------------------
*/
/* Ana filtre kapsayıcısını sıfırlama ve yeniden şekillendirme */
.filter-top .toolbox {
display: flex;
flex-direction: row;
/* Yatay düzende başla */
flex-wrap: wrap;
/* Gerekirse alt satıra kaydır */
justify-content: space-between;
/* Öğeleri iki uca yasla */
align-items: center;
/* Dikey olarak ortala */
background-color: #ffffff;
/* Temiz beyaz arka plan */
margin-bottom: 45px;
gap: 20px;
/* Öğeler arası boşluk */
/* Eski stilleri ezmek için tüm margin/padding'leri sıfırlayalım */
margin-left: 0;
margin-right: 0;
}
/* "Bulunan Toplam..." paragrafı */
.filter-top .toolbox p {
margin: 0;
font-size: 15px;
color: #666;
white-space: nowrap;
/* Metnin bölünmesini engelle */
font-weight: 500;
}
/* Sağ taraf (iki filte grubunu da içeren) kapsayıcı */
.filter-top .sag-taraf {
display: flex;
flex-wrap: wrap;
/* Mobil için önemli */
align-items: center;
justify-content: flex-end;
/* Sağa yaslı dur */
gap: 25px;
/* "Sırala" ve "Göster" grupları arası boşluk */
}
/* Her bir filtre öğesi (Etiket + Select) */
.filter-top .toolbox-item {
display: flex;
align-items: center;
gap: 10px;
/* Etiket ve Select kutusu arası boşluk */
margin: 0;
}
/* Filtre Etiketleri (Sırala, Göster) */
.filter-top .toolbox-item label {
margin: 0;
font-size: 14px;
font-weight: 600;
color: #666;
white-space: nowrap;
width: 50px;
}
/*
* -----------------------------------------------------------------
* ÖZEL SELECT (AÇILIR MENÜ) STİLLERİ
* Bu kısım "güzel" görünümü sağlar.
* -----------------------------------------------------------------
*/
/* Select kutularının wrapper'ı */
.filter-top .select-custom {
position: relative;
/* Özel ok ikonu için */
}
/* Select kutusunun kendisi (en önemli kısım) */
.filter-top .select-custom select.form-control {
/* 1. Varsayılan tarayıcı görünümünü tamamen sıfırla */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
/* 2. Kutu Modeli ve Boşluklar */
display: block;
width: 100%;
min-width: 200px;
/* Çok küçülmesin */
height: 44px;
/* Sabit bir yükseklik */
padding: 10px 40px 10px 15px;
/* Sağdaki ok için 40px boşluk */
line-height: 1.5;
/* 3. Yazı Tipi ve Renk */
font-size: 14px;
font-weight: 500;
color: #666;
/* 4. Kenarlık ve Arka Plan */
background-color: #f7f7f7;
/* Hafif kirli beyaz arka plan */
border: 1px solid #ced4da;
border-radius: 6px;
/* 5. Özel Ok İkonu (CSS ile) */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23555555'%3E%3Cpath d='M8 11.207l-4.6-4.6L4.807 5.193 8 8.386l3.193-3.193 1.414 1.414L8 11.207z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 15px center;
/* Ok'u sağa konumlandır */
background-size: 16px 16px;
/* 6. Davranış */
cursor: pointer;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
/* Select kutusuna tıklandığında (focus) */
.filter-top .select-custom select.form-control:focus {
border-color: #007bff;
/* Mavi bir kenarlık */
box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.15);
/* Hafif parlama */
outline: none;
/* Varsayılan focus çerçevesini kaldır */
background-color: #ffffff;
}
.editor-content p {
color: #666;
font-size: 16px;
font-weight: 400;
}
.hizmet-detail-page .editor-content p {
font-weight: 500;
}
.editor-content strong {
color: #000;
font-size: 16px;
font-weight: 700;
}
.editor-content h1 {
color: #000;
font-size: 40px;
font-weight: 600;
}
.editor-content h2 {
color: #000;
font-size: 34px;
font-weight: 600;
}
.editor-content h3 {
color: #000;
font-size: 28px;
font-weight: 600;
}
.editor-content h4 {
color: #000;
font-size: 24px;
font-weight: 600;
}
.editor-content h5 {
color: #000;
font-size: 20px;
font-weight: 600;
}
.editor-content h6 {
color: #000;
font-size: 16px;
font-weight: 600;
}
.editor-content ul {
list-style: none;
padding-left: 0;
margin: 0;
}
.editor-content ul li {
position: relative;
padding-left: 24px;
margin-bottom: 10px;
color: #666;
font-size: 15px;
font-weight: 400;
}
.editor-content ul li::before {
content: '';
background-image: url('./../images/list-icon.png');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
width: 16px;
height: 16px;
position: absolute;
left: 0;
top: 4px;
/* position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%); */
}
.hizmet-detail-page .editor-content ul li {
font-weight: 500;
font-size: 16px;
}
.hizmet-list-page {
background-color: #fff;
margin-bottom: 40px;
padding: 20px 0;
}
.hizmet-list-page .items {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.hizmet-detail-page {
margin-bottom: 40px;
padding: 20px 0;
}
.hizmet-detail-page .block-1 {
margin-bottom: 80px;
}
.hizmet-detail-page .block-2 {
margin-bottom: 80px;
display: flex;
gap: 40px;
align-items: stretch;
}
.hizmet-detail-page .block-2 .editor-content {
flex-basis: 50%;
}
.hizmet-detail-page .block-2 .image {
flex-basis: 50%;
position: relative;
}
.hizmet-detail-page .block-2 .image img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.hizmet-detail-page .block-3 {
margin-bottom: 40px;
display: flex;
gap: 40px;
align-items: stretch;
flex-direction: row-reverse;
}
.hizmet-detail-page .block-3 .editor-content {
flex-basis: 50%;
}
.hizmet-detail-page .block-3 .image {
flex-basis: 50%;
position: relative;
}
.hizmet-detail-page .block-3 .image img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.ic-sayfa-top {
text-align: center;
padding: 20px 0 0 0;
}
.ic-sayfa-top h2 {
font-weight: 600;
font-size: 34px;
color: #000;
margin-bottom: 30px;
line-height: 1.3;
}
.ic-sayfa-top h2::after {
content: "";
height: 2px;
width: 106px;
background: #ccc;
display: block;
margin: 10px auto;
}
.ic-sayfa-top .editor-content p {
font-weight: 400;
}
.video-block {
width: 100%;
max-width: 100%;
margin: 80px auto;
}
.video-popup-wrapper {
position: relative;
display: block;
overflow: hidden;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}
.video-popup-wrapper img {
display: block;
width: 100%;
height: auto;
transition: transform 0.3s ease;
height: 600px;
object-fit: cover;
}
.video-popup-trigger.play-button {
position: absolute;
z-index: 10;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80px;
height: 80px;
background-color: #fff;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
transition: transform 0.3s ease;
}
.video-popup-trigger.play-button .fa-play {
font-size: 28px;
color: #333;
margin-left: 5px;
}
.video-popup-wrapper:hover .video-popup-trigger.play-button {
transform: translate(-50%, -50%) scale(1.1);
}
.video-popup-wrapper::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.2);
opacity: 1;
transition: opacity 0.3s ease;
}
.video-popup-wrapper:hover::after {
opacity: 0.4;
}
.vision-mission-block {
background-color: #1F1F1D;
position: relative;
padding: 80px 30px;
text-align: center;
overflow: hidden;
}
.vision-mission-block .bg-logo {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
width: 80%;
height: auto;
pointer-events: none;
}
.vision-mission-block .text-content {
position: relative;
z-index: 2;
color: #fff;
margin: 0 auto;
}
.vision-mission-block .text-content p {
font-size: 16px;
margin-bottom: 20px;
font-weight: 400;
line-height: 1.5;
}
.vision-mission-block .text-content p:last-child {
margin-bottom: 0;
}
.vision-mission-block .text-content strong {
color: #ffffff;
font-weight: 700;
}
.siparis-sureci-area .items {
display: grid;
/* grid-template-columns: repeat(5,1fr); */
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 15px;
margin-top: 60px;
}
.process-card {
text-align: center;
padding: 0px;
}
.process-card .card-image {
margin-bottom: 25px;
}
.process-card .card-content h3 {
font-size: 18px;
font-weight: 700;
color: #000;
margin: 0;
margin-bottom: 10px;
min-height: 40px;
}
.process-card .card-content p {
font-size: 14px;
color: #666;
line-height: 1.6;
margin: 0;
}
.faq-parent-wrapper {
background: #f5f5f5;
padding: 50px;
margin-top: 30px;
}
.faq-parent-wrapper .faq-generic-area {
background: #f5f5f5;
}
.faq-parent-wrapper .view-all-btn {
background: #1A0707;
color: #fff;
}
.faq-parent-wrapper .view-all-btn:hover {
background: #000;
}
.faq-parent-wrapper .faq-category-title {
color: #000;
font-weight: 700;
font-size: 20px;
margin-bottom: 30px;
}
.faq-space {
height: 30px;
}
/* Bootstrap'un .row sınıfı zaten display: flex kullanır.
Bu, aynı sıradaki tüm .col-xl-6 div'lerinin eşit yüksekliğe
sahip olmasını (esnemesini) sağlar.
*/
/* 1. Kartın ( etiketi) ana sütun (.col-*) yüksekliğinin
tamamını kaplamasını sağlıyoruz.
*/
.blog-card-generic {
height: 100%;
/* Bu, etiketinin parent .col- div'ini doldurmasını sağlar */
display: flex;
/* Kartın kendi iç düzeni için flexbox'ı etkinleştiririz */
flex-direction: column;
/* İçerikleri (resim ve metin) dikey olarak hizalar */
}
/* 2. Kart içeriği (.blog-card-content) alanının,
resimden sonra kalan tüm dikey boşluğu dolduracak
şekilde esnemesini sağlıyoruz.
*/
.blog-card-content {
flex-grow: 1;
/* Bu, .blog-card-content'in mevcut tüm boşluğa büyümesini sağlar */
/* (İsteğe bağlı) İçeriği de dikey flex yaparak
açıklamayı en alta itebilirsiniz. */
display: flex;
flex-direction: column;
}
.blog-card-generic.no-shadow {
box-shadow: none;
}
.blog-card-generic.no-shadow .blog-card-content {
padding: 0px;
margin-top: 24px;
}
.blog-card-generic.no-shadow .blog-card-title {
font-size: 24px;
font-weight: 500;
}
.blog-card-generic.no-shadow .blog-card-date {
font-size: 14px;
font-weight: 400;
}
.filter-block-link a {
font-size: 14px;
font-weight: 500;
color: #666;
}
.filter-block-link.active a {
color: #000;
}
.filter-block-link a:hover {
color: #444;
}
.blog-detay-sayfasi .blog-image {
margin-bottom: 30px;
}
.blog-detay-sayfasi .ic-sayfa-top {
padding-top: 40px;
}
.blog-detay-sayfasi .ic-sayfa-top h2 {
max-width: 900px;
margin-left: auto;
margin-right: auto;
}
.blog-detay-sayfasi .ic-sayfa-top h2::after {
width: 300px;
}
.iletisim-sayfasi .ic-sayfa-top {
margin-bottom: 70px;
}
.iletisim-sayfasi .map-area {
margin-bottom: 70px;
}
.iletisim-sayfasi .map-area iframe {
height: 370px;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
/* Tek bir galeri kartının temel stili */
.gallery-wrapper .gallery-item {
position: relative;
/* İçerideki 'overlay' için gereklidir */
display: block;
/* etiketinin blok gibi davranması için */
overflow: hidden;
/* Taşan kısımları (zoom efekti için) gizle */
border-radius: 0px;
/* Yumuşak kenarlar */
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
/* Kartın içindeki resim */
.gallery-wrapper .gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
/* Resmin kutuya tam sığmasını sağlar */
display: block;
/* Resim altındaki boşluğu kaldırır */
transition: transform 0.4s ease;
/* Hover'da zoom efekti için */
}
/* Üzerine gelince çıkan yarı saydam katman */
.gallery-wrapper .gallery-item .overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* Görseldeki gibi siyah ve yarı saydam */
background: rgba(0, 0, 0, 0.5);
/* İkonu ortalamak için Flexbox */
display: flex;
align-items: center;
justify-content: center;
/* Başlangıçta gizli olsun */
opacity: 0;
transition: opacity 0.3s ease;
}
/* İkonun kendisi */
.gallery-wrapper .gallery-item .icon {
color: white;
font-size: 26px;
/* İkon boyutu */
line-height: 1;
/* İkon için küçük bir animasyon */
transform: scale(0.8);
opacity: 0;
transition: transform 0.3s ease, opacity 0.3s ease;
}
.gallery-wrapper .gallery-item .icon i {
font-weight: 500;
}
/* KARTIN ÜZERİNE GELİNCE (HOVER) */
/* 1. Overlay'i görünür yap */
.gallery-wrapper .gallery-item:hover .overlay {
opacity: 1;
}
/* 2. İkonu büyüt ve görünür yap */
.gallery-wrapper .gallery-item:hover .icon {
opacity: 1;
transform: scale(1);
}
/* 3. (Bonus) Arka plandaki resmi hafifçe büyüt */
.gallery-wrapper .gallery-item:hover img {
transform: scale(1.1);
}
.gallery-wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
/* 3 sütunlu ızgara */
gap: 15px;
/* Öğeler arası boşluk */
padding: 40px 0;
margin-bottom: 40px;
}
.mfp-gallery .mfp-content {
padding: 0px;
background: unset;
}
/* Ana Taşıyıcı */
.banks-wrapper {
width: 100%;
background-color: #ffffff;
margin: 40px 0 80px 0;
}
/* Her Bir Banka Bloğu */
.bank-account {
display: flex;
align-items: center;
margin-bottom: 32px;
/* Banka blokları arası boşluk */
border: 1px solid #e8e8e8;
padding: 20px;
/* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); */
}
/* Son banka bloğunun alt boşluğunu kaldırır */
.bank-account:last-child {
margin-bottom: 0;
}
/* Banka Logo Alanı */
.bank-account .bank-logo {
flex-basis: 220px;
/* Logo alanı için sabit genişlik */
flex-shrink: 0;
padding-right: 32px;
display: flex;
align-items: center;
justify-content: center;
}
.bank-account .bank-logo img {
max-width: 100%;
height: auto;
object-fit: contain;
}
/* Banka Detayları Alanı */
.bank-account .bank-details {
flex-grow: 1;
/* Kalan tüm alanı kaplar */
display: flex;
flex-direction: column;
gap: 15px;
/* Detay satırları arası boşluk */
}
/* Her Bir Detay Satırı */
.bank-account .detail-row {
display: flex;
align-items: center;
background-color: #F3F6F8;
/* Satır arka plan rengi */
padding: 12px 16px;
border-radius: 0px;
}
/* Detay Başlığı (Örn: "Banka Adı:") */
.bank-account .detail-key {
font-weight: 600;
font-size: 14px;
color: #000000;
margin-right: 8px;
flex-shrink: 0;
/* Başlığın küçülüp satır atlamasını engeller */
}
/* Detay Değeri (Örn: "Enpara.com Şirketim") */
.bank-account .detail-value {
color: #474444;
font-size: 14px;
font-weight: 400;
word-break: break-word;
/* Uzun isimler için satır atlama */
flex-grow: 1;
/* Kalan alanı doldurur */
margin-right: 12px;
}
/* Kopyalama İkonu */
.bank-account .copy-icon {
display: block;
font-size: 16px;
cursor: pointer;
flex-shrink: 0;
/* İkonun küçülmesini engeller */
transition: background-color 0.2s ease, border-color 0.2s ease;
color: #979797;
}
.bank-account .copy-icon:hover {
background-color: #e9ecef;
/* Üzerine gelince hafif renk değişimi */
border-color: #6c757d;
}
.form-new {
background: #f5f5f5;
padding: 50px 0;
margin-top: 50px;
}
.form-new label {
color: #000;
font-weight: 700;
font-size: 16px;
margin-bottom: 10px;
}
.form-new label.input-file {
height: 53px;
display: flex;
align-items: center;
gap: 10px;
font-weight: 400;
color: #666;
}
.form-new input {
height: 53px;
border: 1px solid #D9D9D9;
border-radius: 0px;
font-size: 14px;
}
.form-new select {
height: 53px !important;
border: 1px solid #D9D9D9;
border-radius: 0px;
font-size: 14px;
}
.form-new .form-group {
margin-bottom: 20px;
}
.form-new .verification-div {
margin-bottom: 20px;
}
.form-new .verification-div img {
height: 53px !important;
}
.form-new .verification-div input {
font-weight: 600;
color: #000;
}
.form-new .verification-div input::placeholder {
font-weight: 600;
color: #000;
}
.form-new .consent-form label {
font-size: 14px;
font-weight: 400;
color: #666;
}
.form-new .consent-form label a {
font-size: 14px;
font-weight: 500;
color: #000;
text-decoration: underline;
}
.form-new .consent-form input {
height: auto !important;
margin-right: 3px;
position: relative;
top: 2px;
}
.form-new .consent-form {
display: flex;
justify-content: stretch;
align-items: baseline;
gap: 3px;
}
.btn-for-form {
height: 60px;
min-width: 290px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
margin: auto;
margin-top: 40px;
}
.sepet-basari-popup .mfp-content {
background-color: transparent;
}
.sepet-basari-popup .white-popup {
position: relative;
background: #FFF;
padding: 30px 40px;
width: auto;
max-width: 450px;
margin: 20px auto;
border-radius: 10px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
text-align: center;
}
/* Sadece bu popup içindeki resim */
.sepet-basari-popup .popup-product-img {
max-width: 150px;
height: 150px;
object-fit: contain;
border-radius: 8px;
margin-bottom: 20px;
border: 1px solid #eee;
}
/* Sadece bu popup içindeki başlık */
.sepet-basari-popup .popup-content h3 {
font-size: 22px;
font-weight: 600;
margin-top: 0;
margin-bottom: 10px;
color: #000;
}
/* Sadece bu popup içindeki başarı mesajı */
.sepet-basari-popup .success-message {
font-size: 16px;
color: #28a745;
margin-bottom: 15px;
font-weight: 500;
}
.sepet-basari-popup .success-message .fa-check-circle {
margin-right: 0px;
}
/* Sadece bu popup içindeki butonlar */
.sepet-basari-popup .popup-buttons .btn {
display: inline-block;
padding: 12px 20px;
margin: 5px;
border-radius: 5px;
text-decoration: none;
font-weight: 500;
transition: all 0.3s ease;
border: none;
cursor: pointer;
font-size: 0.95rem;
text-transform: uppercase;
letter-spacing: 0.5px;
position: relative;
width: unset;
height: unset;
line-height: unset;
top: unset;
right: unset;
}
.sepet-basari-popup .popup-buttons {
display: flex;
flex-direction: column;
margin-top: 20px;
}
.sepet-basari-popup .popup-buttons .btn-primary {
width: 100%;
padding: 12px 16px;
font-size: 14px;
font-weight: 600;
color: #fff;
background-color: #222;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s ease;
display: block;
text-align: center;
}
.sepet-basari-popup .popup-buttons .btn-secondary {
width: 100%;
padding: 12px 16px;
font-size: 14px;
font-weight: 600;
color: #000 !important;
border: 1px solid #000 !important;
background-color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s ease;
display: block;
text-align: center;
}
.sepet-basari-popup .white-popup {
opacity: 0;
transform: scale(0.8); /* Başlangıçta biraz küçük olsun */
transition: all 0.3s ease-out;
}
.sepet-basari-popup.mfp-ready .white-popup {
opacity: 1;
transform: scale(1); /* Normal boyutuna gelsin */
}
.sepet-basari-popup.mfp-removing .white-popup {
opacity: 0;
transform: scale(0.8); /* Küçülerek kaybolsun */
}
.my-account-menu .account-menu-list {
margin: 0px; }
.h-content {
margin: 0px;
}
.hesabim-pages {
padding: 20px 0 70px 0;
}
.sepet-ikconu {
display: inline-block; /* Elementin satır içinde bir blok olarak davranmasını sağlar */
/* İkonunuzun boyutlarını buradan ayarlayabilirsiniz */
width: 14px;
height: 14px;
/* Resmi sunucunuza yükledikten sonraki DOĞRU URL'yi buraya yazın.
Örnek: '/assets/images/fi-rr-shopping-cart.png'
*/
background-image: url('./../../assets/images/fi-rr-shopping-cart.png');
/* Resmin elemente sığmasını sağlar */
background-size: contain;
/* Resmin tekrarlanmasını engeller */
background-repeat: no-repeat;
/* Resmi elementin ortasına yerleştirir */
background-position: center;
}
header .user-actions a:hover .sepet-ikconu {
filter: brightness(0);
}
@media (min-width:992px) and (max-width:1199.98px) {
header .nav-links a {
margin-right: 20px;
}
}
@media (min-width:992px) {
/* Mobil filtre barını gizle */
.generic-sidebar-wrapper .mobile-filter-bar {
display: none;
}
/* Mobil başlığı ve kapatma butonunu gizle */
.generic-sidebar-wrapper .sidebar-header-mobile {
display: none;
}
/* Arkaplan overlay'i gizle */
.generic-sidebar-wrapper .sidebar-overlay {
display: none !important;
}
/* Sidebar'ı normal bir blok olarak ayarla (sabit/fixed değil) */
.generic-sidebar-wrapper .sidebar-filters {
position: static;
width: 100%;
/* Genişlik, onu içeren kapsayıcıya göre ayarlanır */
max-width: 100%;
height: auto;
transform: none;
z-index: 1;
overflow-y: visible;
padding: 0;
background-color: transparent;
/* Veya sayfa arkaplanı */
}
/* Masaüstünde arkaplan kaydırmayı her zaman açık tut */
body.generic-sidebar-is-open {
overflow: auto;
}
.filter-top {
padding-top: 15px;
}
.generic-sidebar-wrapper {
position: sticky;
top: 120px;
}
}
@media (max-width:1199.98px) {
.category-content-children-cats {
grid-template-columns: repeat(4, 1fr);
}
.category-content-children-cats .card-image-wrapper img {
height: 160px;
}
}
/* --- GÜNCELLENMİŞ MOBİL STİLLERİ --- */
@media (max-width: 991.98px) {
.footer-main {
grid-template-columns: repeat(3, 1fr);
}
/* --- BU KISIMLAR ÖNCEKİ KODDA ZATEN VARDI --- */
header .header-container {
flex-direction: row;
justify-content: space-between;
flex-wrap: nowrap;
}
header .search-area {
display: none;
}
header .user-actions {
margin-bottom: 0;
}
header .user-actions a {
font-size: 0;
margin-left: 15px;
}
header .user-actions a.hide-mobil {
display: none;
}
header .user-actions a i {
margin-right: 0;
font-size: 20px;
}
header .main-nav {
border-top: 1px solid #e9ecef;
}
header .main-nav .container-for-header {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 5px;
padding-bottom: 5px;
}
header .mobile-user-links {
display: block;
}
header .menu-toggle {
display: block;
position: static;
border: none;
}
/* --- BURADAN İTİBAREN YENİ VE ÖNEMLİ DEĞİŞİKLİKLER --- */
/* 1. Kayan menü stillerini SADECE mobil için tanımla */
header .nav-links {
position: fixed;
top: 0;
left: -300px;
/* Ekranın solunda gizli başlar */
width: 300px;
max-width: 80%;
height: 100%;
background-color: #fff;
z-index: 1001;
/* display: flex; zaten varsayılan stilde var */
flex-direction: column;
/* Dikey dizilim */
padding: 20px;
justify-content: flex-start;
/* Baştan hizala */
transition: left 0.3s ease;
overflow-y: auto;
/* Menü uzunsa kaydırma çubuğu çıksın */
}
/* 2. Kapatma butonunu SADECE mobilde göster */
header .close-menu {
display: block;
/* Butonu görünür yap */
background: none;
border: none;
font-size: 2.5rem;
color: #333;
position: absolute;
top: 10px;
right: 20px;
cursor: pointer;
line-height: 1;
position: absolute;
top: -60px;
right: 0;
}
body.menu-is-open header .nav-links {
padding-top: 70px;
}
header .nav-links a:hover {
border-color: transparent;
}
/* 3. Mobil menüdeki linklerin hizalamasını düzelt */
header .nav-links a {
text-align: left;
/* Menü linklerini sola hizala */
padding: 10px 0;
}
header .dropdown-menu {
position: static;
border: none;
background-color: #fff;
padding-left: 10px;
/* Alt menüye girinti ver */
}
/* Okları SADECE mobilde göster */
header .submenu-arrow {
display: block;
}
/* Mobilde linklerin sağında ok için boşluk bırak */
header .nav-links a {
text-align: left;
padding: 10px 40px 10px 0;
/* Sağdan boşluk eklendi */
}
/* Alt menü linkine de soldan biraz boşluk ver */
header .dropdown-menu a {
padding-left: 10px;
padding-bottom: 10px;
padding-top: 0;
}
.footer-top-hiza .newsletter-section {
flex-direction: column;
gap: 20px;
text-align: left;
width: 100%;
align-items: flex-start;
}
.newsletter-form {
width: 100%;
}
.home-slider .item {
height: calc(100vh - 196px);
min-height: 300px;
}
.brd-image-hero .item {
height: calc(100vh - 196px);
min-height: 300px;
}
.card-image-wrapper {
padding: 10px;
}
.kategori-kanvas-alani .items {
grid-template-columns: repeat(2, 1fr);
}
.hizmet-card-generic .card-image-wrapper {
height: 250px;
}
}
/* Mobil Görünümü */
@media (max-width: 767.98px) {
.footer-main {
grid-template-columns: repeat(2, 1fr);
}
.footer-top {
flex-direction: column;
align-items: flex-start;
text-align: center;
align-items: center;
}
.footer-bottom {
flex-direction: column;
text-align: center;
}
.footer-copyright {
order: -1;
/* Telif hakkını en üste alır */
}
.home-slider .slide-content h2 {
font-size: 2rem;
}
.home-slider .slide-content p {
font-size: 1rem;
}
.home-slider .owl-nav button {
width: 40px !important;
height: 40px !important;
}
.home-slider .owl-nav button span {
font-size: 2rem !important;
}
.home-slider .owl-nav {
display: none !important;
}
.brd-image-hero .slide-content h2 {
font-size: 2rem;
}
.brd-image-hero .slide-content p {
font-size: 1rem;
}
.category-content-children-cats {
grid-template-columns: repeat(3, 1fr);
}
.category-content-children-cats .card-image-wrapper img {
height: 160px;
}
/* Ana çubuk: Dikey olarak yığılsın */
.filter-top .toolbox {
flex-direction: column;
/* Dikey yığ */
align-items: stretch;
/* Öğeler tam genişliği kapsasın */
padding: 15px;
}
/* Filtre grupları kapsayıcısı: Bu da dikey yığılsın */
.filter-top .sag-taraf {
flex-direction: column;
/* Dikey yığ */
align-items: stretch;
/* Tam genişlik */
width: 100%;
gap: 15px;
/* Filtre grupları arası boşluk */
}
/* Her bir filtre öğesi (Etiket + Select) */
.filter-top .toolbox-item {
/* Etiketi sola, select'i sağa yasla */
justify-content: space-between;
}
.filter-top .toolbox-item label {
flex-shrink: 0;
/* Etiket yazısı küçülmesin/büzülmesin */
}
/* Select kutusu wrapper'ı: Kalan tüm alanı doldur */
.filter-top .select-custom {
flex-grow: 1;
width: auto;
}
/* Select kutusu: Tam genişliği doldursun */
.filter-top .select-custom select.form-control {
width: 100%;
min-width: 0;
/* Masaüstü min-width'i sıfırla */
}
.hizmet-detail-page .block-1 {
margin-bottom: 40px;
}
.hizmet-detail-page .block-2 {
flex-direction: column-reverse;
margin-bottom: 40px;
}
.hizmet-detail-page .block-2 .image img {
position: relative;
}
.hizmet-detail-page .block-3 {
flex-direction: column-reverse;
margin-bottom: 0px;
}
.hizmet-detail-page .block-3 .image img {
position: relative;
}
.gallery-wrapper {
grid-template-columns: 1fr;
}
.bank-account {
flex-direction: column;
/* Dikey hizalama */
align-items: flex-start;
/* Sola hizala */
gap: 20px;
}
.bank-account .bank-logo {
padding-right: 0;
justify-content: flex-start;
/* Logoyu sola hizala */
/* max-width: 180px; */
flex-basis: auto;
}
.bank-account .bank-details {
width: 100%;
/* Detay alanı tam genişlik kaplasın */
}
}
/* Küçük Mobil Görünümü */
@media (max-width: 575.98px) {
.footer-main {
grid-template-columns: 1fr;
}
.social-icons {
text-align: center;
}
.footer-column ul li {
max-width: 250px;
}
.card-image-wrapper img {
height: 180px;
}
.product-showcase-section .owl-dots .owl-dot span {
margin: 5px 4px !important;
}
.kategori-kanvas-alani .category-card-generic .card-category {
bottom: 10px;
left: 10px;
font-size: 12px;
max-width: 85%;
}
.kategori-kanvas-alani .category-card-generic .card-image-wrapper {
height: 200px;
}
.kategori-baski-hat-alani .category-card-generic .card-image-wrapper {
height: 200px;
}
.kategori-baski-hat-alani .category-card-generic .card-category {
bottom: 10px;
left: 10px;
font-size: 12px;
max-width: 85%;
}
.component-top h2 {
font-size: 24px;
}
.kategori-posterler-alani .category-card-generic .card-image-wrapper {
height: 200px;
}
.kategori-posterler-alani .category-card-generic .card-category {
bottom: 10px;
left: 10px;
font-size: 12px;
max-width: 85%;
}
.kategori-hediyelik-alani .category-card-generic .card-image-wrapper {
height: 200px;
}
.kategori-hediyelik-alani .category-card-generic .card-category {
bottom: 10px;
left: 10px;
font-size: 12px;
max-width: 85%;
}
.tum-kategoriler-page .category-card-generic .card-image-wrapper {
height: 200px;
}
.tum-kategoriler-page .category-card-generic .card-category {
bottom: 10px;
left: 10px;
font-size: 12px;
max-width: 85%;
}
.kategori-cerceve-alani .category-card-generic .card-image-wrapper {
height: 200px;
}
.kategori-cerceve-alani .category-card-generic .card-category {
bottom: 10px;
left: 10px;
font-size: 12px;
max-width: 85%;
}
.anasayfa-hizmet .category-card-generic .card-image-wrapper {
height: 200px;
}
.anasayfa-hizmet .category-card-generic .card-category {
bottom: 10px;
left: 10px;
font-size: 12px;
max-width: 85%;
}
.home-slider .item {
height: 390px;
min-height: 390px;
}
.brd-image-hero .item {
height: 390px;
min-height: 390px;
}
.breadcrumb-item {
font-size: 14px;
/* Mobilde fontu biraz küçült */
}
.breadcrumb-item+.breadcrumb-item::before {
margin: 0 5px;
/* Mobilde ayırıcı boşluklarını azalt */
}
.category-content-children-cats {
grid-template-columns: repeat(2, 1fr);
}
.category-content-children-cats .card-image-wrapper img {
height: 160px;
}
.hizmet-list-page .category-card-generic .card-image-wrapper {
height: auto;
}
.hizmet-list-page .category-card-generic .card-category {
bottom: 10px;
left: 10px;
font-size: 12px;
max-width: 85%;
}
.hizmet-list-page .items {
grid-template-columns: repeat(1, 1fr);
}
.editor-content h1 {
font-size: 30px;
/* 40px'tan */
}
.editor-content h2 {
font-size: 26px;
/* 34px'tan */
}
.editor-content h3 {
font-size: 22px;
/* 28px'tan */
}
.editor-content h4 {
font-size: 20px;
/* 24px'tan */
}
.editor-content h5 {
font-size: 18px;
/* 20px'tan */
}
.editor-content h6 {
font-size: 16px;
/* Okunabilirlik için sabit kaldı */
}
.siparis-sureci-area .items {
grid-template-columns: auto;
gap: 60px;
}
.process-card .card-content h3 {
min-height: unset;
}
.faq-parent-wrapper {
padding: 30px;
}
.brd-image-hero .breadcrumb-container {
display: none;
}
.ic-sayfa-top h2 {
font-size: 24px;
}
.blog-detay-sayfasi .ic-sayfa-top h2::after {
width: 150px;
}
}