/* Custom CSS for Anka Hukuk - Modern Design */
/* Card title hover efektleri */
.card-title a {
transition: color 0.3s ease;
}
.card-title a:hover {
color: #a77129 !important;
text-decoration: none !important;
}
/* Arama input'undaki ok ikonunu gizle */
input[type="text"]::-webkit-calendar-picker-indicator {
display: none !important;
}
input[type="text"]::-webkit-inner-spin-button,
input[type="text"]::-webkit-outer-spin-button {
display: none !important;
}
input[type="text"]::-webkit-search-cancel-button {
display: none !important;
}
input[type="text"]::-webkit-search-decoration {
display: none !important;
}
input[type="text"]::-ms-clear {
display: none !important;
}
/* Top Bar Styles */
.topbar {
background: var(--bs-dark) !important; /* Footer ile aynı renk */
color: white !important;
padding: 0.5rem 0;
font-size: 0.85rem;
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
z-index: 1002;
}
.topbar-contact {
display: flex;
gap: 2rem;
align-items: center;
}
.topbar-item {
display: flex;
align-items: center;
color: rgba(255, 255, 255, 0.9);
transition: color 0.3s ease;
}
.topbar-item i {
color: var(--primary-color);
font-size: 0.85rem;
}
.topbar-item a {
color: inherit;
text-decoration: none;
transition: color 0.3s ease;
}
.topbar-item a:hover {
color: var(--primary-color);
}
.topbar-social {
display: flex;
gap: 0.5rem;
justify-content: flex-end;
align-items: center;
}
.topbar .social-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 50%;
text-decoration: none;
transition: all 0.3s ease;
border: 1px solid;
font-size: 0.9rem;
color: white;
border-color: rgba(255, 255, 255, 0.3);
background: transparent;
}
.topbar .social-btn:hover {
background: var(--primary-color);
color: white;
border-color: var(--primary-color);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(167, 113, 41, 0.3);
}
/* Mobile Top Bar */
@media (max-width: 768px) {
.topbar {
padding: 0.5rem 0;
font-size: 0.8rem;
}
.topbar .row {
flex-direction: row;
align-items: center;
justify-content: center;
}
.topbar-contact {
flex-direction: row;
gap: 1.5rem;
text-align: center;
justify-content: center;
}
.topbar-social {
display: none; /* Sosyal medya gizle */
}
.topbar .social-btn {
width: 28px;
height: 28px;
font-size: 0.8rem;
}
}
/* Root Variables */
:root {
--primary-color: #a77129;
--primary-dark: #8a5d1f;
--primary-light: #c48a3a;
--secondary-color: #6c757d;
--success-color: #28a745;
--danger-color: #dc3545;
--warning-color: #ffc107;
--info-color: #17a2b8;
--light-color: #f8f9fa;
--dark-color: #1a1a1a;
--gray-100: #f8f9fa;
--gray-200: #e9ecef;
--gray-300: #dee2e6;
--gray-400: #ced4da;
--gray-500: #adb5bd;
--gray-600: #6c757d;
--gray-700: #495057;
--gray-800: #343a40;
--gray-900: #212529;
--font-primary: 'Lora', 'Times New Roman', Georgia, serif;
--font-secondary: 'Playfair Display', 'Times New Roman', Georgia, serif;
--font-body: 'Merriweather', 'Times New Roman', Georgia, serif;
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--gradient-primary: linear-gradient(135deg, #a77129 0%, #c48a3a 50%, #8a5d1f 100%);
--gradient-dark: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
--shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
--shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
--shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
--shadow-xl: 0 2rem 4rem rgba(0, 0, 0, 0.25);
--border-radius: 0.75rem;
--border-radius-lg: 1rem;
--border-radius-xl: 1.5rem;
}
/* Global Styles */
* {
box-sizing: border-box;
}
/* Mobile First Approach */
html {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
text-size-adjust: 100%;
}
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
-webkit-tap-highlight-color: transparent;
}
/* FontAwesome Font Fix */
.fas, .far, .fab, .fa {
font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro", "Font Awesome 6 Brands" !important;
font-weight: 900;
font-style: normal;
font-variant: normal;
text-rendering: auto;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.fab {
font-family: "Font Awesome 6 Brands" !important;
font-weight: 400;
}
.far {
font-family: "Font Awesome 6 Free" !important;
font-weight: 400;
}
/* Primary Text Color Override */
.text-primary {
color: var(--primary-color) !important;
}
.text-primary:hover {
color: var(--primary-dark) !important;
}
/* Bootstrap Primary Color Override */
:root {
--bs-primary: var(--primary-color);
--bs-primary-rgb: 167, 113, 41;
--bs-primary-text: #ffffff;
--bs-primary-bg-subtle: rgba(167, 113, 41, 0.1);
--bs-primary-border-subtle: rgba(167, 113, 41, 0.2);
}
/* Primary Button Override */
.btn-primary {
--bs-btn-color: #fff;
--bs-btn-bg: var(--primary-color);
--bs-btn-border-color: var(--primary-color);
--bs-btn-hover-color: #fff;
--bs-btn-hover-bg: var(--primary-dark);
--bs-btn-hover-border-color: var(--primary-dark);
--bs-btn-focus-shadow-rgb: 167, 113, 41;
--bs-btn-active-color: #fff;
--bs-btn-active-bg: var(--primary-dark);
--bs-btn-active-border-color: var(--primary-dark);
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--bs-btn-disabled-color: #fff;
--bs-btn-disabled-bg: var(--primary-color);
--bs-btn-disabled-border-color: var(--primary-color);
}
/* Primary Outline Button Override */
.btn-outline-primary {
--bs-btn-color: var(--primary-color);
--bs-btn-border-color: var(--primary-color);
--bs-btn-hover-color: #fff;
--bs-btn-hover-bg: var(--primary-color);
--bs-btn-hover-border-color: var(--primary-color);
--bs-btn-focus-shadow-rgb: 167, 113, 41;
--bs-btn-active-color: #fff;
--bs-btn-active-bg: var(--primary-color);
--bs-btn-active-border-color: var(--primary-color);
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--bs-btn-disabled-color: var(--primary-color);
--bs-btn-disabled-bg: transparent;
--bs-btn-disabled-border-color: var(--primary-color);
}
body {
font-family: var(--font-body);
line-height: 1.7;
color: var(--gray-800);
background-color: #ffffff;
font-size: 16px;
font-weight: 400;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
letter-spacing: 0.02em;
margin: 0;
padding: 0;
overflow-x: hidden;
}
/* Add padding only for non-homepage pages */
body:not(.homepage) {
padding-top: 140px; /* Space for fixed header */
}
/* Professional Legal Typography */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-secondary);
font-weight: 600;
line-height: 1.2;
color: var(--dark-color);
margin-bottom: 1.5rem;
letter-spacing: -0.02em;
text-rendering: optimizeLegibility;
}
.display-1, .display-2, .display-3, .display-4, .display-5 {
font-family: var(--font-secondary);
font-weight: 600;
letter-spacing: -0.03em;
line-height: 1.1;
text-rendering: optimizeLegibility;
}
.lead {
font-family: var(--font-body);
font-size: 1.25rem;
font-weight: 400;
color: var(--gray-700);
line-height: 1.6;
letter-spacing: 0.02em;
}
/* Legal Document Styling */
.legal-text {
font-family: var(--font-body);
font-size: 1.1rem;
line-height: 1.8;
color: var(--gray-800);
text-align: justify;
letter-spacing: 0.02em;
}
.legal-title {
font-family: var(--font-secondary);
font-weight: 600;
color: var(--primary-color);
text-transform: uppercase;
letter-spacing: 0.08em;
font-size: 0.9rem;
text-rendering: optimizeLegibility;
}
/* Header Styles */
.navbar {
background: rgba(255, 255, 255, 0.95) !important;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-bottom: 1px solid rgba(167, 113, 41, 0.1);
position: fixed;
top: 45px;
left: 0;
right: 0;
width: 100%;
z-index: 1001;
transition: all 0.3s ease;
padding: 1rem 0;
}
.navbar-brand {
font-family: var(--font-secondary);
font-size: 1.9rem;
font-weight: 600;
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-decoration: none;
transition: all 0.3s ease;
letter-spacing: -0.02em;
text-rendering: optimizeLegibility;
}
.navbar-brand:hover {
transform: none;
}
/* Logo Image Styles */
.logo-img {
height: 60px;
width: auto;
max-width: 250px;
object-fit: contain;
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
}
/* Mobile Logo Responsive */
@media (max-width: 768px) {
.logo-img {
height: 50px;
max-width: 200px;
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
}
}
@media (max-width: 576px) {
.logo-img {
height: 45px;
max-width: 180px;
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
}
}
.navbar-nav {
align-items: center !important;
}
.navbar-nav .nav-link {
font-family: var(--font-body);
font-weight: 500;
padding: 0.75rem 1.25rem;
margin: 0 0.25rem;
border-radius: var(--border-radius);
color: var(--gray-700) !important;
transition: all 0.15s ease;
position: relative;
font-size: 1rem;
letter-spacing: 0.02em;
text-transform: uppercase;
max-width: 400px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: flex;
align-items: center;
justify-content: center;
}
/* Header menü ikonlarını hizala */
.navbar-nav .nav-link i {
width: 16px !important;
text-align: center !important;
margin-right: 0.5rem !important;
display: inline-block !important;
flex-shrink: 0 !important;
}
/* Me-1 ve me-2 margin'larını override et - Daha güçlü selektörler */
.navbar-nav .nav-link .me-1,
.navbar-nav .nav-link .me-2,
.navbar .navbar-nav .nav-link .me-1,
.navbar .navbar-nav .nav-link .me-2 {
margin-right: 0.5rem !important;
width: 16px !important;
text-align: center !important;
display: inline-block !important;
flex-shrink: 0 !important;
}
/* Desktop alt menülerde ikon ile başlık arasına boşluk */
.navbar-nav .dropdown-item i {
margin-right: 0.75rem !important;
width: 16px !important;
text-align: center !important;
display: inline-block !important;
flex-shrink: 0 !important;
}
/* Tüm header menü ikonları için genel hizalama - Maximum specificity */
.header-section .navbar .navbar-nav .nav-link i,
.navbar.navbar-expand-lg .navbar-nav .nav-link i,
.navbar.navbar-light .navbar-nav .nav-link i {
width: 16px !important;
text-align: center !important;
margin-right: 0.5rem !important;
display: inline-block !important;
flex-shrink: 0 !important;
min-width: 16px !important;
max-width: 16px !important;
}
/* Mobil menü ikon hizalama - Maximum güçlü çözüm */
.offcanvas .mobile-nav .nav-link,
.offcanvas .nav-link {
display: flex !important;
align-items: center !important;
padding: 0.8rem 1rem !important;
position: relative !important;
}
/* Mobil menü elemanlarına dikey padding - Temiz ve doğru */
.mobile-nav .nav.flex-column .nav-link {
display: flex !important;
align-items: center !important;
padding: 1rem 1rem !important;
width: 100% !important;
max-width: 100% !important;
overflow: visible !important;
text-overflow: unset !important;
white-space: normal !important;
margin-bottom: 0.25rem !important;
line-height: 1.4 !important;
word-wrap: break-word !important;
word-break: break-word !important;
}
/* Tüm mobil menü ikonları için sıfırlama */
.offcanvas .mobile-nav .nav-link i,
.offcanvas .nav-link i {
margin: 0 !important;
padding: 0 !important;
width: 18px !important;
height: 18px !important;
min-width: 18px !important;
max-width: 18px !important;
text-align: center !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
flex-shrink: 0 !important;
font-size: 16px !important;
line-height: 1 !important;
position: relative !important;
}
/* Ana ikonlar için margin */
.offcanvas .mobile-nav .nav-link i:first-child,
.offcanvas .nav-link i:first-child {
margin-right: 0.75rem !important;
}
/* Alt menülü elemanlar için özel düzen */
.offcanvas .mobile-nav .nav-link[data-bs-toggle="collapse"],
.offcanvas .nav-link[data-bs-toggle="collapse"] {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
}
/* Alt menülü elemanların hover efektlerini kaldır - Sadece aktif olmayanlar için */
.offcanvas .mobile-nav .nav-link[data-bs-toggle="collapse"]:not(.active):hover,
.offcanvas .nav-link[data-bs-toggle="collapse"]:not(.active):hover {
background-color: transparent !important;
color: inherit !important;
transform: none !important;
box-shadow: none !important;
}
/* Alt menülü elemanların hover efektlerini kaldır - Tüm elemanlar için (ikon + metin) */
.offcanvas .mobile-nav .nav-link[data-bs-toggle="collapse"]:not(.active):hover *,
.offcanvas .nav-link[data-bs-toggle="collapse"]:not(.active):hover * {
color: inherit !important;
background-color: transparent !important;
transform: none !important;
}
/* Alt menülü elemanlar açıkken hover efektlerini tamamen kaldır - Sadece aktif olmayanlar için */
.offcanvas .mobile-nav .nav-link[data-bs-toggle="collapse"][aria-expanded="true"]:not(.active):hover,
.offcanvas .nav-link[data-bs-toggle="collapse"][aria-expanded="true"]:not(.active):hover {
background-color: transparent !important;
color: inherit !important;
transform: none !important;
box-shadow: none !important;
}
/* Alt menülü elemanlar açıkken hover efektlerini kaldır - Tüm elemanlar için (ikon + metin) */
.offcanvas .mobile-nav .nav-link[data-bs-toggle="collapse"][aria-expanded="true"]:not(.active):hover *,
.offcanvas .nav-link[data-bs-toggle="collapse"][aria-expanded="true"]:not(.active):hover * {
color: inherit !important;
background-color: transparent !important;
transform: none !important;
}
/* Aktif menü elemanları için hover efektlerini koru */
.offcanvas .mobile-nav .nav-link.active:hover,
.offcanvas .nav-link.active:hover {
background-color: rgba(167, 113, 41, 0.15) !important;
color: var(--primary-color) !important;
}
/* Alt menülü elemanların ana ikonları */
.offcanvas .mobile-nav .nav-link[data-bs-toggle="collapse"] i:first-child,
.offcanvas .nav-link[data-bs-toggle="collapse"] i:first-child {
margin-right: 0.75rem !important;
width: 18px !important;
height: 18px !important;
min-width: 18px !important;
max-width: 18px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
flex-shrink: 0 !important;
}
/* Chevron ikonları için özel düzen */
.offcanvas .mobile-nav .nav-link .fas.fa-chevron-down,
.offcanvas .nav-link .fas.fa-chevron-down {
margin-left: auto !important;
margin-right: 0 !important;
width: 14px !important;
height: 14px !important;
min-width: 14px !important;
max-width: 14px !important;
}
/* Önceki ve Sonraki Post Butonları */
.previous-next-buttons .btn {
transition: all 0.3s ease;
border-radius: 0 !important;
}
.previous-next-buttons .btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(167, 113, 41, 0.3);
background-color: #a77129 !important;
border-color: #a77129 !important;
color: white !important;
}
.previous-next-buttons .btn:hover .text-muted {
color: rgba(255, 255, 255, 0.8) !important;
}
.previous-next-buttons .btn:hover .fw-bold {
color: white !important;
}
/* Disabled butonlar için özel stil */
.previous-next-buttons .btn.disabled,
.previous-next-buttons .btn:disabled {
cursor: not-allowed !important;
background-color: transparent !important;
border: 2px solid #6c757d !important;
color: #6c757d !important;
opacity: 0.6 !important;
}
.previous-next-buttons .btn.disabled:hover,
.previous-next-buttons .btn:disabled:hover {
transform: none !important;
box-shadow: none !important;
background-color: transparent !important;
border: 2px solid #6c757d !important;
color: #6c757d !important;
opacity: 0.6 !important;
}
/* Post içerik fotoğrafları için üst boşluk azaltma */
.image-container {
margin-top: 0.5rem !important;
}
.image-container img {
margin-top: 0 !important;
}
.image-caption {
margin-top: 0.5rem !important;
margin-bottom: 1.5rem !important;
}
/* Scrollbar Stilleri - Tema ile uyumlu */
::-webkit-scrollbar {
width: 12px;
height: 12px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 6px;
}
::-webkit-scrollbar-thumb {
background: #a77129;
border-radius: 6px;
border: 2px solid #f1f1f1;
}
::-webkit-scrollbar-thumb:hover {
background: #8b5a1f;
}
::-webkit-scrollbar-thumb:active {
background: #6d4517;
}
::-webkit-scrollbar-corner {
background: #f1f1f1;
}
/* Firefox için scrollbar */
html {
scrollbar-width: thin;
scrollbar-color: #a77129 #f1f1f1;
}
/* Önceki/Sonraki butonları her zaman %50 %50 eşit */
.previous-next-buttons .flex-fill {
flex: 1 1 50% !important;
width: 50% !important;
max-width: 50% !important;
min-width: 0 !important;
flex-basis: 50% !important;
}
.previous-next-buttons .btn {
width: 100% !important;
justify-content: center !important;
padding-left: 1rem !important;
padding-right: 1rem !important;
padding-top: 0.75rem !important;
padding-bottom: 0.75rem !important;
}
/* Metinler tek satırda kalması için truncation */
.previous-next-buttons .btn .fw-bold {
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
max-width: 100% !important;
flex-shrink: 1 !important;
min-width: 0 !important;
}
/* Buton container'ı da düzenle */
.previous-next-buttons .btn {
overflow: hidden !important;
}
.previous-next-buttons .btn .text-start,
.previous-next-buttons .btn .text-end {
overflow: hidden !important;
flex-shrink: 1 !important;
min-width: 0 !important;
}
/* Mobil responsive için önceki/sonraki butonları */
@media (max-width: 768px) {
.previous-next-buttons .d-flex {
flex-direction: row !important;
gap: 0.5rem !important;
}
.previous-next-buttons .flex-fill {
flex: 1 1 50% !important;
width: 50% !important;
max-width: 50% !important;
min-width: 0 !important;
flex-basis: 50% !important;
margin: 0 !important;
}
.previous-next-buttons .btn {
width: 100% !important;
justify-content: center !important;
padding-left: 0.75rem !important;
padding-right: 0.75rem !important;
padding-top: 0.75rem !important;
padding-bottom: 0.75rem !important;
font-size: 0.9rem !important;
}
/* Mobilde sadece "Önceki" ve "Sonraki" yazsın, blog adları gizlensin */
.previous-next-buttons .btn .text-start .small,
.previous-next-buttons .btn .text-end .small {
display: none !important;
}
.previous-next-buttons .btn .fw-bold {
font-size: 0.85rem !important;
line-height: 1.2 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
max-width: 100% !important;
flex-shrink: 1 !important;
min-width: 0 !important;
}
/* Mobilde de container'ları düzenle */
.previous-next-buttons .btn {
overflow: hidden !important;
}
.previous-next-buttons .btn .text-start,
.previous-next-buttons .btn .text-end {
overflow: hidden !important;
flex-shrink: 1 !important;
min-width: 0 !important;
}
/* İkonları küçült */
.previous-next-buttons .btn i {
font-size: 0.8rem !important;
}
}
.navbar-nav .nav-link:hover {
color: var(--primary-color) !important;
background: rgba(167, 113, 41, 0.15);
}
.navbar-toggler {
border: none;
padding: 0.5rem;
border-radius: var(--border-radius);
transition: all 0.1s ease;
}
.navbar-toggler:focus {
box-shadow: 0 0 0 0.25rem rgba(167, 113, 41, 0.25);
}
/* Dropdown Menu Styles */
.navbar-nav .dropdown-menu {
background: white;
border: none;
border-radius: 0;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
padding: 0.75rem 0;
margin-top: -0.2rem;
min-width: 280px;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(167, 113, 41, 0.1);
overflow: hidden;
}
.navbar-nav .dropdown-item {
font-family: var(--font-body);
font-weight: 500;
color: var(--gray-700) !important;
padding: 1rem 2rem;
transition: all 0.15s ease;
border-radius: 4px;
font-size: 1rem;
letter-spacing: 0.02em;
position: relative;
max-width: 150px !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
display: block !important;
}
.navbar-nav .dropdown-item:hover,
.navbar-nav .dropdown-item:focus {
background: rgba(167, 113, 41, 0.15);
color: var(--primary-color) !important;
transform: translateX(8px);
border-radius: 4px;
}
.navbar-nav .dropdown-item:active {
background: rgba(167, 113, 41, 0.15);
color: var(--primary-dark) !important;
}
.navbar-nav .dropdown-toggle {
max-width: 420px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: flex;
align-items: center;
justify-content: center;
}
.navbar-nav .dropdown-toggle::after {
margin-left: 0.5rem;
transition: transform 0.1s ease;
}
.navbar-nav .dropdown-toggle[aria-expanded="true"]::after {
transform: rotate(180deg);
}
/* Mobile Dropdown Styles */
@media (max-width: 992px) {
.navbar-nav .dropdown-menu {
background: rgba(248, 249, 250, 0.95);
border: 1px solid rgba(167, 113, 41, 0.1);
margin-top: 0;
margin-left: 1rem;
box-shadow: none;
border-radius: 0;
min-width: 250px;
/* Slide animation from left */
transform: translateX(-100%);
opacity: 0;
transition: all 0.3s ease-in-out;
position: absolute;
left: 0;
top: 100%;
z-index: 1000;
}
/* Show dropdown when expanded */
.navbar-nav .dropdown.show .dropdown-menu {
transform: translateX(0);
opacity: 1;
}
.navbar-nav .dropdown-item {
padding: 1rem 1.5rem;
border-bottom: 1px solid rgba(167, 113, 41, 0.05);
font-size: 1rem;
/* Slide in from left animation for items */
transform: translateX(-20px);
opacity: 0;
transition: all 0.3s ease-in-out;
}
/* Animate items when dropdown is shown */
.navbar-nav .dropdown.show .dropdown-item {
transform: translateX(0);
opacity: 1;
}
/* Stagger animation for multiple items */
.navbar-nav .dropdown.show .dropdown-item:nth-child(1) {
transition-delay: 0.1s;
}
.navbar-nav .dropdown.show .dropdown-item:nth-child(2) {
transition-delay: 0.2s;
}
.navbar-nav .dropdown.show .dropdown-item:nth-child(3) {
transition-delay: 0.3s;
}
.navbar-nav .dropdown-item:last-child {
border-bottom: none;
}
.navbar-nav .dropdown-item:hover {
transform: translateX(0);
background: rgba(167, 113, 41, 0.1);
}
}
/* Mobile Offcanvas Menu Styles */
.offcanvas-start {
width: 350px !important;
border-right: 1px solid rgba(167, 113, 41, 0.1);
overflow-x: hidden !important;
overflow-y: auto !important;
max-width: 350px !important;
min-width: 350px !important;
}
/* Çok küçük ekranlarda mobil menü genişliği */
@media (max-width: 400px) {
.offcanvas-start {
width: 320px !important;
max-width: 320px !important;
min-width: 320px !important;
}
}
@media (max-width: 360px) {
.offcanvas-start {
width: 300px !important;
max-width: 300px !important;
min-width: 300px !important;
}
}
/* Mobile Contact Info Styles */
.mobile-contact-info {
padding: 1rem 0;
}
.contact-item {
display: flex;
align-items: center;
font-size: 0.9rem;
color: var(--gray-700);
transition: all 0.3s ease;
}
.contact-item:hover {
transform: translateX(5px);
}
.contact-item i {
width: 16px;
text-align: center;
font-size: 0.9rem;
}
.contact-item a {
transition: all 0.3s ease;
}
.contact-item a:hover {
color: var(--primary-color) !important;
transform: translateX(3px);
}
.mobile-contact-info .social-buttons {
justify-content: center;
margin-top: 1.5rem;
}
.mobile-contact-info .social-btn {
width: 40px;
height: 40px;
font-size: 1rem;
color: var(--primary-color) !important;
border-color: var(--primary-color) !important;
background: transparent !important;
}
.mobile-contact-info .social-btn:hover {
background: var(--primary-color) !important;
color: white !important;
border-color: var(--primary-color) !important;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(167, 113, 41, 0.3);
}
/* Sidebar Contact Info Styles */
.sidebar .contact-item a {
transition: all 0.3s ease;
}
.sidebar .contact-item a:hover {
color: var(--primary-color) !important;
transform: translateX(3px);
}
.sidebar .social-btn {
width: 35px;
height: 35px;
font-size: 0.9rem;
color: var(--primary-color) !important;
border-color: var(--primary-color) !important;
background: transparent !important;
}
.sidebar .social-btn:hover {
background: var(--primary-color) !important;
color: white !important;
border-color: var(--primary-color) !important;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(167, 113, 41, 0.3);
}
.mobile-nav .nav-link {
padding: 1.25rem 2rem;
color: var(--gray-700);
font-weight: 500;
border-bottom: 1px solid rgba(167, 113, 41, 0.05);
transition: background-color 0.1s ease, color 0.1s ease, transform 0.1s ease;
display: flex;
align-items: center;
justify-content: flex-start;
text-decoration: none;
width: 100% !important;
max-width: 100% !important;
white-space: normal;
overflow: visible;
text-overflow: unset;
font-size: 1.1rem;
box-sizing: border-box !important;
margin-bottom: 0.75rem !important;
line-height: 1.4;
word-wrap: break-word;
word-break: break-word;
}
.mobile-nav .nav-link:hover {
background: rgba(167, 113, 41, 0.15);
color: var(--primary-color);
transform: translateX(8px);
text-decoration: none;
border-radius: 4px;
}
.mobile-nav .nav-link.active {
background: rgba(167, 113, 41, 0.15);
color: var(--primary-color);
font-weight: 600;
border-left: 3px solid var(--primary-color);
text-decoration: none;
}
/* Ana menü öğeleri arası boşluk */
.mobile-nav .nav-item {
margin-bottom: 1rem !important;
}
/* Alt menü öğeleri arası boşluk */
.mobile-nav .nav.flex-column .nav-item {
margin-bottom: 0.25rem !important;
}
.mobile-nav .nav-link i:first-child {
width: 20px;
text-align: center;
margin-right: 1rem; /* İkon ile metin arası boşluk artırıldı */
flex-shrink: 0;
}
.mobile-nav .nav-link i:last-child {
width: 16px;
text-align: center;
margin-left: 0.5rem;
flex-shrink: 0;
}
.mobile-nav .collapse .nav-link {
padding: 1.1rem 2.5rem;
font-size: 1rem;
border-bottom: 1px solid rgba(167, 113, 41, 0.05);
margin-left: 0;
justify-content: flex-start;
transition: none !important;
transform: none !important;
}
.mobile-nav .collapse .nav-link i {
display: none;
}
.mobile-nav .collapse .nav-link:hover {
background: rgba(167, 113, 41, 0.1);
color: var(--primary-color);
transform: none !important;
transition: none !important;
}
/* Better alignment for submenu items */
.mobile-nav .collapse {
margin-left: 0;
transition: none !important;
}
.mobile-nav .collapse.show {
transition: none !important;
}
.mobile-nav .collapse .collapse {
transition: none !important;
}
/* Disable all Bootstrap collapse animations */
.mobile-nav .collapse,
.mobile-nav .collapse.show,
.mobile-nav .collapse:not(.show),
.mobile-nav .collapse.collapsing {
transition: none !important;
animation: none !important;
}
.mobile-nav .collapse .nav-link,
.mobile-nav .collapse.show .nav-link,
.mobile-nav .collapse:not(.show) .nav-link {
transition: none !important;
animation: none !important;
transform: none !important;
}
.mobile-nav .collapse .nav-link {
padding-left: 3.5rem;
padding-right: 2rem;
margin-left: 0;
position: relative;
transition: none !important;
transform: none !important;
}
.offcanvas-header {
border-bottom: 1px solid rgba(167, 113, 41, 0.1);
padding: 1rem 1.5rem; /* Reduced padding */
display: flex;
align-items: center;
justify-content: space-between;
min-height: 60px; /* Fixed height for consistency */
}
.offcanvas-title {
margin: 0;
display: flex;
align-items: center;
padding-top: 1rem; /* Logo daha aşağıya alındı */
}
.offcanvas-title img {
max-height: 40px;
width: auto;
}
.offcanvas-header .btn-close {
margin: 0;
padding: 0.5rem;
align-self: center;
}
/* Simple Active Menu Styles */
.navbar-nav .nav-link.active {
color: var(--primary-color) !important;
background: rgba(167, 113, 41, 0.05) !important;
}
.navbar-nav .dropdown-toggle.active {
color: var(--primary-color) !important;
background: rgba(167, 113, 41, 0.05) !important;
}
.navbar-nav .dropdown-item.active {
color: var(--primary-color) !important;
background: rgba(167, 113, 41, 0.05) !important;
}
/* Hero Slider Styles */
.hero-slider,
.hero-slider * {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
.hero-slider {
margin-top: 130px; /* Topbar + Header yüksekliği kadar margin */
position: relative;
overflow: hidden;
padding-top: 0 !important;
}
.hero-slide {
min-height: 80vh;
background: var(--gradient-primary);
position: relative;
display: flex;
align-items: center;
overflow: hidden;
margin-bottom: 0;
padding-bottom: 0;
}
/* Mobile Responsive for Hero Slider */
@media (max-width: 768px) {
.hero-slide {
min-height: 70vh;
padding: 2rem 0;
}
.hero-slide h1 {
font-size: clamp(1.8rem, 8vw, 2.5rem);
margin-bottom: 1.5rem;
line-height: 1.3;
}
.hero-slide .lead {
font-size: clamp(1rem, 4vw, 1.2rem);
margin-bottom: 2rem;
line-height: 1.4;
}
.hero-slide .btn {
font-size: 0.9rem;
padding: 0.75rem 1.5rem;
width: 100%;
max-width: 280px;
margin: 0 auto;
display: block;
}
.hero-slide .row {
text-align: center;
}
.hero-slide .col-lg-6:first-child {
margin-bottom: 2rem;
}
.hero-image {
display: none;
}
/* About section mobile responsive */
#about .row {
min-height: auto;
}
#about .col-lg-6:first-child {
padding-right: 1rem;
padding-left: 1rem;
margin-bottom: 2rem;
}
#about .col-lg-6:last-child {
padding-left: 0;
padding-right: 0;
}
#about .container {
padding-left: 1rem;
padding-right: 1rem;
}
#about .about-image {
padding: 0;
}
/* FAQ görselini mobilde göster */
.faq-image {
display: block;
margin-top: 2rem;
}
.faq-image img {
height: 100px;
}
.faq-image-mobile img {
height: 300px;
width: 100%;
max-width: 100%;
object-fit: cover;
border-radius: 0.75rem;
box-shadow:
0 25px 50px rgba(0, 0, 0, 0.25),
0 10px 20px rgba(0, 0, 0, 0.15),
0 0 0 1px rgba(255, 255, 255, 0.1);
filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.2));
}
/* Footer padding mobilde daha az */
footer {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
/* Footer alt kısmı mobilde ortalama */
footer .row.align-items-center {
text-align: center;
}
footer .row.align-items-center .col-md-6 {
text-align: center !important;
}
}
/* Desktop spacing for hero content */
@media (min-width: 769px) {
.hero-slide .col-lg-6:first-child {
padding-right: 2rem;
}
.hero-slide .col-lg-6:last-child {
padding-left: 2rem;
}
.hero-slide .hero-image {
margin-top: 2rem;
}
}
/* Extra Small Mobile Devices */
@media (max-width: 480px) {
.hero-slide {
min-height: 60vh;
padding: 1.5rem 0;
}
.hero-slide h1 {
font-size: clamp(1.5rem, 10vw, 2rem);
margin-bottom: 1rem;
}
.hero-slide .lead {
font-size: clamp(0.9rem, 5vw, 1.1rem);
margin-bottom: 1.5rem;
}
.hero-slide .btn {
font-size: 0.85rem;
padding: 0.6rem 1.2rem;
max-width: 250px;
}
.hero-image {
display: none;
}
.hero-slide .container {
padding-left: 1rem;
padding-right: 1rem;
}
}
.hero-slide.bg-dark {
background: var(--gradient-primary);
}
.hero-slide.bg-success {
background: var(--gradient-primary);
}
.hero-slide.bg-primary {
background: var(--gradient-primary);
}
.hero-slide::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
radial-gradient(circle at 40% 40%, rgba(255, 255, 255, 0.05) 0%, transparent 50%),
url('data:image/svg+xml,');
opacity: 0.9;
}
.hero-slide::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.4;
}
.hero-slide .container {
position: relative;
z-index: 2;
}
.hero-slide h1 {
font-family: var(--font-secondary);
font-size: clamp(2.5rem, 5vw, 4rem);
font-weight: 600;
line-height: 1.2;
margin-bottom: 2rem !important;
color: white;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
letter-spacing: -0.03em;
text-rendering: optimizeLegibility;
}
.hero-slide .lead {
font-family: var(--font-body);
font-size: clamp(1.1rem, 2vw, 1.3rem);
font-weight: 400;
line-height: 1.5;
margin-bottom: 2.5rem !important;
color: white;
opacity: 0.95;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
letter-spacing: 0.02em;
}
/* Hero Slide Buttons */
.hero-slide .btn {
color: white;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
font-weight: 600;
letter-spacing: 0.5px;
text-transform: uppercase;
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
padding: 1rem 2rem !important;
display: inline-flex;
align-items: center;
justify-content: center;
}
.hero-slide .btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
transition: left 0.6s ease;
}
.hero-slide .btn:hover {
background: rgba(255, 255, 255, 0.25);
color: white;
transform: translateY(-3px) translateX(5px);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}
.hero-slide .btn:hover::before {
left: 100%;
}
.hero-image {
position: relative;
}
.hero-image img {
width: 100%;
height: 400px;
object-fit: cover;
border-radius: 0.75rem;
box-shadow:
0 25px 50px rgba(0, 0, 0, 0.25),
0 10px 20px rgba(0, 0, 0, 0.15),
0 0 0 1px rgba(255, 255, 255, 0.1);
filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.2));
}
.hero-image::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
border-radius: 50%;
transform: translate(-50%, -50%);
animation: pulse 4s ease-in-out infinite;
}
@keyframes float {
0%, 100% {
transform: translateY(0px) rotate(0deg);
}
50% {
transform: translateY(-30px) rotate(5deg);
}
}
@keyframes pulse {
0%, 100% {
transform: translate(-50%, -50%) scale(1);
opacity: 0.5;
}
50% {
transform: translate(-50%, -50%) scale(1.2);
opacity: 0.8;
}
}
.carousel-indicators {
bottom: 2rem;
z-index: 3;
}
.carousel-indicators [data-bs-target] {
width: 12px;
height: 12px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.5);
border: 2px solid rgba(255, 255, 255, 0.8);
transition: all 0.3s ease;
}
.carousel-indicators .active {
background: white;
transform: scale(1.2);
}
.carousel-control-prev,
.carousel-control-next {
width: 60px;
height: 60px;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
transition: all 0.3s ease;
top: 50%;
transform: translateY(-50%);
z-index: 10;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
.carousel-control-prev {
left: 2rem;
}
.carousel-control-next {
right: 2rem;
}
.carousel-control-prev:hover,
.carousel-control-next:hover {
background: rgba(255, 255, 255, 0.2);
transform: translateY(-50%) scale(1.1);
}
/* Section Styles */
section {
padding: 6rem 0;
position: relative;
}
section:nth-child(even) {
background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
}
.section-title {
font-family: var(--font-secondary);
font-size: clamp(2.2rem, 4.5vw, 3.2rem);
font-weight: 600;
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 1.5rem;
position: relative;
letter-spacing: -0.02em;
text-rendering: optimizeLegibility;
}
.section-title::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 4px;
background: var(--gradient-primary);
border-radius: 2px;
}
.section-subtitle {
font-family: var(--font-body);
font-size: 1.3rem;
color: var(--gray-600);
margin-bottom: 4rem;
font-weight: 400;
max-width: 600px;
margin-left: auto;
margin-right: auto;
line-height: 1.6;
letter-spacing: 0.02em;
}
/* About Section */
#about {
padding-top: 4rem !important;
position: relative;
background:
radial-gradient(circle at 20% 80%, rgba(167, 113, 41, 0.015) 0%, transparent 70%),
radial-gradient(circle at 80% 20%, rgba(167, 113, 41, 0.015) 0%, transparent 70%),
url('data:image/svg+xml,');
}
#about::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.4;
z-index: 1;
}
#about .container {
position: relative;
z-index: 2;
}
#about .row {
align-items: center;
min-height: 500px;
}
#about .col-lg-6 {
display: flex;
flex-direction: column;
justify-content: center;
}
#about .col-lg-6:first-child {
padding-right: 2rem;
}
#about .col-lg-6:last-child {
padding-left: 0;
}
.feature-icon {
width: 50px;
height: 50px;
font-size: 1.2rem;
}
.about-image img {
box-shadow:
0 25px 50px rgba(0, 0, 0, 0.25),
0 10px 20px rgba(0, 0, 0, 0.15),
0 0 0 1px rgba(255, 255, 255, 0.1);
filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.2));
}
/* Services Section */
#services {
position: relative;
background:
radial-gradient(circle at 30% 70%, rgba(167, 113, 41, 0.01) 0%, transparent 80%),
radial-gradient(circle at 70% 30%, rgba(167, 113, 41, 0.01) 0%, transparent 80%),
url('data:image/svg+xml,');
}
#services::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
z-index: 1;
}
#services .container {
position: relative;
z-index: 2;
}
.service-icon {
width: 80px;
height: 80px;
font-size: 2rem;
transition: transform 0.3s ease;
background: var(--gradient-primary) !important;
color: white !important;
}
.card:hover .service-icon {
transform: scale(1.1);
}
/* Modern Card Styles */
.card {
border: none;
border-radius: 0;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
background: white;
overflow: hidden;
position: relative;
}
.card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: var(--gradient-primary);
transform: scaleX(0);
transition: transform 0.3s ease;
}
.card:hover {
transform: none;
box-shadow: none;
}
.card:hover::before {
transform: none;
}
.card-body {
padding: 2rem;
display: flex;
flex-direction: column;
}
.card-body .btn {
margin-top: auto;
}
.card-title {
font-family: var(--font-secondary);
font-weight: 600;
color: var(--dark-color);
margin-bottom: 1rem;
font-size: 1.3rem;
letter-spacing: -0.02em;
text-rendering: optimizeLegibility;
}
.card-text {
font-family: var(--font-body);
color: var(--gray-600);
line-height: 1.7;
margin-bottom: 1.5rem;
font-size: 1rem;
letter-spacing: 0.02em;
}
.card-img-top {
border-radius: 0;
transition: transform 0.4s ease;
}
.card:hover .card-img-top {
transform: scale(1.05);
}
/* Contact Section */
#contact {
position: relative;
background:
radial-gradient(circle at 25% 75%, rgba(167, 113, 41, 0.008) 0%, transparent 80%),
radial-gradient(circle at 75% 25%, rgba(167, 113, 41, 0.008) 0%, transparent 80%),
url('data:image/svg+xml,');
}
#contact::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
z-index: 1;
}
#contact .container {
position: relative;
z-index: 2;
}
.contact-info .card {
height: 100%;
}
/* Google Harita Stilleri */
.map-container {
position: relative;
width: 100%;
height: 350px;
overflow: hidden;
border-radius: 0 0 0.75rem 0.75rem;
}
.map-container iframe {
width: 100%;
height: 100%;
border: none;
border-radius: 0 0 0.75rem 0.75rem;
}
/* Mobil harita optimizasyonu */
@media (max-width: 768px) {
.map-container {
height: 300px;
}
}
@media (max-width: 576px) {
.map-container {
height: 250px;
}
}
/* Modern Form Styles */
.form-control, .form-select {
font-family: var(--font-body);
border: 2px solid var(--gray-200);
border-radius: var(--border-radius);
padding: 1rem 1.25rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.6;
color: var(--gray-800);
background-color: white;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
letter-spacing: 0.02em;
}
.form-control:focus, .form-select:focus {
border-color: var(--primary-color);
box-shadow: 0 0 0 0.25rem rgba(167, 113, 41, 0.15);
background-color: white;
outline: none;
}
.form-control:hover, .form-select:hover {
border-color: var(--primary-light);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}
.form-label {
font-family: var(--font-secondary);
font-weight: 600;
color: var(--gray-700);
margin-bottom: 0.75rem;
font-size: 0.95rem;
letter-spacing: 0.02em;
text-rendering: optimizeLegibility;
}
.form-control.is-valid {
border-color: var(--success-color);
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='m2.3 6.73.94-.94 1.89 1.89 3.78-3.78.94.94-4.72 4.72z'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right calc(0.375em + 0.1875rem) center;
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}
.form-control.is-invalid {
border-color: var(--danger-color);
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath d='m5.8 4.6 1.4 1.4 1.4-1.4'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right calc(0.375em + 0.1875rem) center;
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}
.invalid-feedback {
display: block;
width: 100%;
margin-top: 0.5rem;
font-size: 0.875rem;
color: var(--danger-color);
font-weight: 500;
}
.valid-feedback {
display: block;
width: 100%;
margin-top: 0.5rem;
font-size: 0.875rem;
color: var(--success-color);
font-weight: 500;
}
/* Customers Section */
#customers {
position: relative;
background:
radial-gradient(circle at 40% 60%, rgba(167, 113, 41, 0.02) 0%, transparent 70%),
radial-gradient(circle at 60% 40%, rgba(167, 113, 41, 0.02) 0%, transparent 70%),
url('data:image/svg+xml,');
}
#customers::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.4;
z-index: 1;
}
#customers .container {
position: relative;
z-index: 2;
}
.stat-item {
background: white;
border-radius: var(--border-radius);
padding: 2rem 1.5rem;
text-align: center;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
border: 1px solid rgba(167, 113, 41, 0.1);
transition: all 0.3s ease;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
overflow: hidden;
}
.stat-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: var(--gradient-primary);
transform: scaleX(0);
transition: transform 0.3s ease;
}
.stat-item:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}
.stat-item:hover::before {
transform: scaleX(1);
}
.stat-item h3 {
font-size: 2.5rem;
margin-bottom: 0.5rem;
font-family: var(--font-secondary);
font-weight: 700;
color: var(--primary-color);
line-height: 1;
}
.stat-item p {
font-family: var(--font-body);
color: var(--gray-600);
font-size: 1rem;
font-weight: 500;
margin: 0;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Statistics Section */
#statistics {
background-color: #ffffff !important;
}
#statistics .container {
position: relative;
}
/* Customer Testimonials Slider */
#customerSlider {
margin-bottom: 4rem;
}
.testimonial-card {
background: white;
border-radius: var(--border-radius-lg);
padding: 3rem 2rem;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(167, 113, 41, 0.1);
position: relative;
overflow: hidden;
}
.testimonial-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: var(--gradient-primary);
}
.testimonial-content {
position: relative;
z-index: 2;
}
.stars {
font-size: 1.2rem;
letter-spacing: 0.2rem;
}
.stars i {
color: var(--primary-color) !important;
}
.testimonial-card blockquote {
border: none;
margin: 0;
padding: 0;
background: none;
box-shadow: none;
border-radius: 0;
position: static;
font-style: normal;
font-size: inherit;
line-height: inherit;
transform: none !important;
transition: none !important;
}
.testimonial-card blockquote:hover {
transform: none !important;
box-shadow: none !important;
}
.testimonial-card blockquote p {
font-family: var(--font-body);
font-size: 1.2rem;
line-height: 1.7;
color: var(--gray-700);
font-style: italic;
position: relative;
margin: 0;
z-index: 1;
}
.testimonial-card blockquote p::before {
display: none;
}
.testimonial-card blockquote p::after {
display: none;
}
.testimonial-author {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
gap: 1.5rem;
}
.author-avatar {
width: 60px;
height: 60px;
border-radius: 50%;
background: var(--gradient-primary);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-family: var(--font-secondary);
font-weight: 700;
font-size: 1.5rem;
text-transform: uppercase;
letter-spacing: 1px;
box-shadow: 0 4px 15px rgba(167, 113, 41, 0.3);
}
.author-info h6 {
font-family: var(--font-secondary);
font-weight: 600;
color: var(--dark-color);
font-size: 1.1rem;
margin: 0;
}
.author-info p {
color: var(--gray-600);
font-size: 0.95rem;
margin: 0;
}
/* Customer Slider Controls */
#customerSlider .carousel-control-prev,
#customerSlider .carousel-control-next {
width: 50px;
height: 50px;
background: var(--gradient-primary);
border-radius: 50%;
top: 50%;
transform: translateY(-50%);
border: none;
opacity: 0.9;
transition: all 0.3s ease;
z-index: 10;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
#customerSlider .carousel-control-prev:hover,
#customerSlider .carousel-control-next:hover {
opacity: 1;
transform: translateY(-50%) scale(1.1);
}
#customerSlider .carousel-control-prev {
left: -25px;
}
#customerSlider .carousel-control-next {
right: -25px;
}
#customerSlider .carousel-indicators {
bottom: -50px;
}
#customerSlider .carousel-indicators [data-bs-target] {
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--gray-300);
border: 2px solid var(--gray-300);
transition: all 0.3s ease;
}
#customerSlider .carousel-indicators .active {
background: var(--primary-color);
border-color: var(--primary-color);
transform: scale(1.2);
}
/* Mobile Responsive for Customer Slider */
@media (max-width: 768px) {
.testimonial-card {
padding: 2rem 1.5rem;
margin: 0 1rem;
}
.testimonial-card blockquote {
background: none;
box-shadow: none;
border-radius: 0;
position: static;
font-style: normal;
font-size: inherit;
line-height: inherit;
transform: none !important;
transition: none !important;
}
.testimonial-card blockquote:hover {
transform: none !important;
box-shadow: none !important;
}
.testimonial-card blockquote p {
font-size: 1.1rem;
margin: 0;
z-index: 1;
}
.testimonial-card blockquote p::before,
.testimonial-card blockquote p::after {
display: none;
}
/* Müşteri görseli mobilde daha büyük */
.author-avatar {
order: 1;
width: 80px;
height: 80px;
font-size: 1.8rem;
margin-bottom: 0.5rem;
}
.author-info {
order: 2;
display: flex;
flex-direction: column;
align-items: center;
}
.author-info h6 {
font-size: 1.2rem;
margin-bottom: 0.25rem;
}
.author-info p {
font-size: 1rem;
}
#customerSlider .carousel-control-prev,
#customerSlider .carousel-control-next {
width: 40px;
height: 40px;
z-index: 10;
background: var(--gradient-primary);
border: 2px solid white;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
#customerSlider .carousel-control-prev-icon,
#customerSlider .carousel-control-next-icon {
width: 14px;
height: 14px;
}
#customerSlider .carousel-control-prev {
left: 10px;
}
#customerSlider .carousel-control-next {
right: 10px;
}
#customerSlider .carousel-control-prev:hover,
#customerSlider .carousel-control-next:hover {
transform: translateY(-50%) scale(1.1);
opacity: 1;
}
}
/* FAQ Section */
#faq {
position: relative;
background:
radial-gradient(circle at 20% 80%, rgba(167, 113, 41, 0.02) 0%, transparent 70%),
radial-gradient(circle at 80% 20%, rgba(167, 113, 41, 0.02) 0%, transparent 70%),
url('data:image/svg+xml,');
}
#faq::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.4;
z-index: 1;
}
#faq .container {
max-width: 1400px;
position: relative;
z-index: 2;
}
.accordion-button {
font-weight: 600;
border: none;
background-color: #f8f9fa;
color: var(--dark-color);
transition: none !important;
}
.accordion-button:hover {
background-color: #f8f9fa !important;
color: var(--dark-color) !important;
transform: none !important;
box-shadow: none !important;
}
.accordion-button:not(.collapsed) {
background-color: var(--primary-color);
color: white;
box-shadow: none;
transition: none !important;
}
.accordion-button:not(.collapsed):hover {
background-color: var(--primary-color) !important;
color: white !important;
transform: none !important;
box-shadow: none !important;
}
.accordion-button:not(.collapsed)::after {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.accordion-button:focus {
box-shadow: none !important;
outline: none !important;
}
.accordion-item {
border: 1px solid #e9ecef;
margin-bottom: 1rem;
border-radius: 8px;
overflow: hidden;
}
/* FAQ Image */
.faq-image {
position: sticky;
top: 2rem;
}
.faq-image img {
width: 100%;
height: 500px;
object-fit: cover;
border-radius: 0.75rem;
box-shadow:
0 25px 50px rgba(0, 0, 0, 0.25),
0 10px 20px rgba(0, 0, 0, 0.15),
0 0 0 1px rgba(255, 255, 255, 0.1);
filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.2));
}
/* Blog Section */
#blog {
position: relative;
background:
radial-gradient(circle at 30% 70%, rgba(167, 113, 41, 0.02) 0%, transparent 70%),
radial-gradient(circle at 70% 30%, rgba(167, 113, 41, 0.02) 0%, transparent 70%),
url('data:image/svg+xml,');
}
#blog::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.4;
z-index: 1;
}
#blog .container {
position: relative;
z-index: 2;
}
.card-img-top {
height: 250px;
object-fit: cover;
}
/* Blog image zoom effects - Sadece resim zoomu */
#blog .card .card-img-top {
transition: transform 0.3s ease;
overflow: hidden;
}
#blog .card .card-img-top img {
transition: transform 0.3s ease;
}
#blog .card:hover .card-img-top img {
transform: scale(1.05);
}
/* Footer */
footer {
background: linear-gradient(135deg, #343a40 0%, #212529 100%);
padding-left: 1rem;
padding-right: 1rem;
}
footer a:hover {
color: var(--primary-color) !important;
transition: color 0.3s ease;
}
/* WhatsApp link renkleri - footer'daki diğer iletişim bilgileri gibi text-white-50 rengi */
footer .text-success {
color: rgba(255, 255, 255, 0.5) !important;
}
footer .text-success:hover {
color: var(--primary-color) !important;
transition: color 0.3s ease;
}
/* Footer WhatsApp ikonu primary renk */
footer .fab.fa-whatsapp {
color: var(--primary-color) !important;
}
/* İletişim bölümü WhatsApp rengi - ikon primary, metin text-muted */
.contact-info .text-success {
color: #6c757d !important;
}
.contact-info .text-success:hover {
color: var(--primary-color) !important;
transition: color 0.3s ease;
}
/* İletişim bölümü WhatsApp ikonu primary renk */
.contact-info .fab.fa-whatsapp {
color: var(--primary-color) !important;
}
/* Button Styles */
.btn {
font-family: var(--font-body);
border-radius: var(--border-radius);
font-weight: 500;
padding: 0.875rem 2rem;
font-size: 1rem;
line-height: 1.5;
border: none;
position: relative;
overflow: hidden;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
letter-spacing: 0.02em;
}
.btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s;
}
.btn:hover::before {
left: 100%;
}
.btn-primary {
background: var(--gradient-primary);
color: white;
box-shadow: 0 4px 15px rgba(167, 113, 41, 0.3);
}
.btn-primary:hover {
background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-color) 50%, var(--primary-light) 100%);
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(167, 113, 41, 0.4);
color: white;
}
.btn-outline-primary {
background: transparent;
color: var(--primary-color);
border: 2px solid var(--primary-color);
}
.btn-outline-primary:hover {
background: var(--gradient-primary);
color: white;
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(167, 113, 41, 0.4);
border-color: transparent;
}
.btn-outline-light {
background: transparent;
color: white;
border: 2px solid rgba(255, 255, 255, 0.8);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.btn-outline-light:hover {
background: rgba(255, 255, 255, 0.1);
color: white;
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(255, 255, 255, 0.2);
border-color: white;
}
.btn-lg {
padding: 1rem 2.5rem;
font-size: 1.125rem;
border-radius: var(--border-radius-lg);
}
.btn-sm {
padding: 0.5rem 1.25rem;
font-size: 0.875rem;
border-radius: calc(var(--border-radius) * 0.8);
}
/* Smooth Scrolling */
html {
scroll-behavior: smooth;
}
/* Modern Responsive Design */
@media (max-width: 1200px) {
.container {
max-width: 1140px;
}
}
@media (max-width: 992px) {
section {
padding: 4rem 0;
}
.hero-slide {
min-height: 80vh;
text-align: center;
}
.hero-slide h1 {
font-size: clamp(2rem, 4vw, 3rem);
}
.hero-slide .lead {
font-size: clamp(1rem, 2vw, 1.2rem);
}
.navbar-nav {
text-align: center;
padding: 1rem 0;
}
.navbar-nav .nav-link {
margin: 0.25rem 0;
}
}
@media (max-width: 768px) {
body:not(.homepage) {
padding-top: 100px; /* Further reduced space for mobile header */
}
.navbar {
top: 35px;
}
.hero-slider {
margin-top: 100px;
}
section {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
/* Tüm section'lara ekstra padding */
#about, #services, #contact, #customers, #statistics, #faq, #blog {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.hero-slide {
min-height: 70vh;
padding: 2rem 0;
}
.hero-slide h1 {
font-size: clamp(1.8rem, 5vw, 2.5rem);
margin-bottom: 1rem;
}
.hero-slide .lead {
font-size: clamp(0.95rem, 3vw, 1.1rem);
margin-bottom: 1.5rem;
}
.section-title {
font-size: clamp(1.8rem, 4vw, 2.5rem);
}
.section-subtitle {
font-size: 1.1rem;
margin-bottom: 3rem;
}
.stat-item h3 {
font-size: 2rem;
}
.service-icon {
width: 60px;
height: 60px;
font-size: 1.5rem;
}
.card-body {
padding: 1.5rem;
}
.btn-lg {
padding: 0.875rem 2rem;
font-size: 1rem;
}
.carousel-control-prev,
.carousel-control-next {
width: 45px;
height: 45px;
z-index: 10;
background: rgba(255, 255, 255, 0.2);
border: 2px solid rgba(255, 255, 255, 0.8);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}
.carousel-control-prev-icon,
.carousel-control-next-icon {
width: 16px;
height: 16px;
}
.carousel-control-prev {
left: 1rem;
}
.carousel-control-next {
right: 1rem;
}
.carousel-control-prev:hover,
.carousel-control-next:hover {
background: rgba(255, 255, 255, 0.3);
transform: translateY(-50%) scale(1.1);
opacity: 1;
}
}
@media (max-width: 576px) {
/* Extra small mobilde section padding */
#about, #services, #contact, #customers, #statistics, #faq, #blog {
padding-left: 0.25rem;
padding-right: 0.25rem;
}
.hero-slide {
min-height: 60vh;
padding: 1.5rem 0;
}
.hero-slide h1 {
font-size: clamp(1.5rem, 6vw, 2rem);
}
.hero-slide .lead {
font-size: clamp(0.9rem, 4vw, 1rem);
}
.btn {
padding: 0.75rem 1.5rem;
font-size: 0.95rem;
}
.btn-lg {
padding: 1rem 2rem;
font-size: 1.1rem;
}
.display-5 {
font-size: 1.8rem;
}
.card-body {
padding: 1.25rem;
}
.navbar {
padding: 0.75rem 0;
}
.navbar-brand {
font-size: 1.5rem;
}
section {
padding: 3rem 0;
}
.hero-image i {
font-size: clamp(3rem, 10vw, 5rem);
}
/* Extra small mobile carousel buttons */
.carousel-control-prev,
.carousel-control-next {
width: 35px;
height: 35px;
}
.carousel-control-prev-icon,
.carousel-control-next-icon {
width: 12px;
height: 12px;
}
#customerSlider .carousel-control-prev,
#customerSlider .carousel-control-next {
width: 35px;
height: 35px;
}
#customerSlider .carousel-control-prev-icon,
#customerSlider .carousel-control-next-icon {
width: 12px;
height: 12px;
}
}
/* Animation classes removed - no animations on sections */
/* Customer cards without border radius and shadow */
.card-body.d-flex.align-items-center.justify-content-center {
border-radius: 0 !important;
box-shadow: none !important;
border: 1px solid var(--gray-200);
}
.card-body.d-flex.align-items-center.justify-content-center .card {
border-radius: 0 !important;
box-shadow: none !important;
border: 1px solid var(--gray-200);
}
/* All cards without border radius */
.card {
border-radius: 0 !important;
}
/* Social Media Buttons */
.social-buttons {
display: flex;
gap: 0.75rem;
align-items: center;
justify-content: center;
}
.social-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 45px;
height: 45px;
border-radius: 50%;
text-decoration: none;
transition: all 0.3s ease;
border: 2px solid;
font-size: 1.1rem;
}
.social-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
text-decoration: none;
}
.social-btn {
color: var(--primary-color);
border-color: var(--primary-color);
background: transparent;
}
.social-btn:hover {
background: var(--primary-color);
color: white;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(167, 113, 41, 0.3);
}
/* WhatsApp sosyal medya butonu */
.social-btn.whatsapp {
color: #25d366;
border-color: #25d366;
}
.social-btn.whatsapp:hover {
background: #25d366;
color: white;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
}
/* Loading Animation */
.loading {
display: inline-block;
width: 20px;
height: 20px;
border: 3px solid #f3f3f3;
border-top: 3px solid var(--primary-color);
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Custom Scrollbar */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: var(--primary-color);
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #0056b3;
}
/* Fixed Action Buttons - Left Side (Back to Top) */
.fixed-action-buttons-left {
position: fixed;
bottom: 2rem;
left: 2rem;
z-index: 999;
display: flex;
flex-direction: column;
gap: 1rem;
}
/* Fixed Action Buttons - Right Side (Social Contact) */
.fixed-action-buttons-right {
position: fixed;
bottom: 2rem;
right: 2rem;
z-index: 999;
display: flex;
flex-direction: column;
gap: 2.5rem;
}
.action-btn {
width: 60px;
height: 60px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
border: none;
cursor: pointer;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
font-size: 1.2rem;
position: relative;
overflow: visible;
z-index: 1000;
}
/* Radyal dalga animasyonu */
.action-btn::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
border-radius: 50%;
background: inherit;
opacity: 0.3;
transform: translate(-50%, -50%) scale(1);
animation: ripple 2s infinite;
z-index: -1;
}
.action-btn::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
border-radius: 50%;
background: inherit;
opacity: 0.2;
transform: translate(-50%, -50%) scale(1);
animation: ripple 2s infinite 0.5s;
z-index: -1;
}
@keyframes ripple {
0% {
transform: translate(-50%, -50%) scale(1);
opacity: 0.3;
}
50% {
transform: translate(-50%, -50%) scale(1.5);
opacity: 0.1;
}
100% {
transform: translate(-50%, -50%) scale(2);
opacity: 0;
}
}
/* Eski ::before stili kaldırıldı - radyal animasyon ile değiştirildi */
.action-btn:hover {
transform: translateY(-3px) scale(1.1);
text-decoration: none;
}
/* WhatsApp Button */
.whatsapp-btn {
background: #4caf50;
color: white;
border: 1px solid rgba(255, 255, 255, 0.2);
font-size: 1.8rem;
}
.whatsapp-btn:hover {
background: #388e3c;
color: white;
box-shadow: 0 8px 30px rgba(76, 175, 80, 0.4);
}
/* Phone Button */
.phone-btn {
background: #2196f3;
color: white;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.phone-btn:hover {
background: #1976d2;
color: white;
box-shadow: 0 8px 30px rgba(33, 150, 243, 0.4);
}
/* Back to Top Button */
.back-to-top-btn {
background: var(--primary-color);
color: white;
border: 1px solid rgba(255, 255, 255, 0.2);
display: none;
}
.back-to-top-btn:hover {
background: var(--primary-dark);
color: white;
box-shadow: 0 8px 30px rgba(167, 113, 41, 0.4);
}
.back-to-top-btn.show {
display: flex;
}
/* Mobile Responsive for Action Buttons */
@media (max-width: 768px) {
.fixed-action-buttons-left {
bottom: 1rem;
left: 1rem;
gap: 0.75rem;
}
.fixed-action-buttons-right {
bottom: 1rem;
right: 1rem;
gap: 0.75rem;
}
.action-btn {
width: 50px;
height: 50px;
font-size: 1rem;
}
/* WhatsApp ikonu mobilde daha büyük */
.whatsapp-btn {
font-size: 1.5rem;
}
}
/* Print Styles */
@media print {
.navbar, .footer, .btn, .fixed-action-buttons {
display: none !important;
}
body {
font-size: 12pt;
line-height: 1.4;
}
.hero-slide {
min-height: auto;
padding: 20px 0;
}
}
/* Background Light Override */
.bg-light {
background-color: white !important;
}
/* Footer Social Media Buttons - Same as Topbar */
footer .social-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 50%;
text-decoration: none;
transition: all 0.3s ease;
border: 1px solid;
font-size: 0.9rem;
color: white;
border-color: rgba(255, 255, 255, 0.3);
background: transparent;
}
footer .social-btn:hover {
background: var(--primary-color) !important;
color: white !important;
border-color: var(--primary-color) !important;
transform: translateY(-2px) !important;
box-shadow: 0 4px 12px rgba(167, 113, 41, 0.3) !important;
}
/* Sabit Butonlar */
.fixed-buttons {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 1000;
display: flex;
flex-direction: column;
gap: 10px;
}
.fixed-btn {
display: flex;
align-items: center;
padding: 12px 16px;
border-radius: 50px;
text-decoration: none;
font-weight: 600;
font-size: 14px;
transition: all 0.3s ease;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
min-width: 60px;
justify-content: center;
position: relative;
overflow: hidden;
}
.fixed-btn i {
font-size: 18px;
margin-right: 8px;
}
.fixed-btn .btn-text {
white-space: nowrap;
transition: all 0.3s ease;
}
.whatsapp-btn {
background: #25D366;
color: white;
border: none;
}
.whatsapp-btn:hover {
background: #128C7E;
color: white;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
}
.phone-btn {
background: var(--primary-color);
color: white;
border: none;
}
.phone-btn:hover {
background: #8B5A2B;
color: white;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(167, 113, 41, 0.4);
}
/* Sabit butonlar hover animasyonu */
.fixed-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s;
}
.fixed-btn:hover::before {
left: 100%;
}
/* Mobilde buton boyutlarını küçült */
@media (max-width: 768px) {
.fixed-buttons {
bottom: 15px;
right: 15px;
gap: 8px;
}
.fixed-btn {
padding: 10px 14px;
font-size: 13px;
min-width: 50px;
}
.fixed-btn i {
font-size: 16px;
margin-right: 6px;
}
.fixed-btn .btn-text {
display: none;
}
.fixed-btn {
border-radius: 50%;
width: 50px;
height: 50px;
padding: 0;
justify-content: center;
}
}
/* ===============================================
PRELOADER STYLES
=============================================== */
#preloader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 50%, #ffffff 100%);
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
transition: opacity 0.3s ease-out;
opacity: 1;
}
#preloader.hidden {
opacity: 0;
visibility: hidden;
}
.preloader-content {
text-align: center;
animation: fadeInUp 1s ease-out;
}
.preloader-logo {
width: 120px;
height: auto;
margin-bottom: 30px;
animation: logoScale 2s ease-in-out infinite;
}
.preloader-spinner {
position: relative;
width: 60px;
height: 60px;
margin: 0 auto 20px;
}
.spinner-ring {
position: absolute;
width: 100%;
height: 100%;
border: 3px solid transparent;
border-top: 3px solid #a77129;
border-radius: 50%;
animation: spin 1.2s linear infinite;
}
.spinner-ring:nth-child(2) {
width: 80%;
height: 80%;
top: 10%;
left: 10%;
border-top-color: rgba(167, 113, 41, 0.6);
animation-delay: -0.4s;
animation-duration: 1.8s;
}
.spinner-ring:nth-child(3) {
width: 60%;
height: 60%;
top: 20%;
left: 20%;
border-top-color: rgba(167, 113, 41, 0.3);
animation-delay: -0.8s;
animation-duration: 2.4s;
}
.preloader-text {
color: #a77129;
font-size: 16px;
font-weight: 600;
margin-bottom: 10px;
animation: textPulse 2s ease-in-out infinite;
}
.preloader-subtitle {
color: #6c757d;
font-size: 14px;
font-weight: 400;
}
.loading-dots {
display: inline-flex;
gap: 3px;
}
.loading-dots span {
width: 6px;
height: 6px;
background-color: #a77129;
border-radius: 50%;
animation: dotBounce 1.4s infinite ease-in-out both;
}
.loading-dots span:nth-child(1) { animation-delay: -0.32s; }
.loading-dots span:nth-child(2) { animation-delay: -0.16s; }
.loading-dots span:nth-child(3) { animation-delay: 0; }
/* Preloader Animations */
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes logoScale {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
@keyframes fadeInUp {
0% {
opacity: 0;
transform: translateY(30px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes textPulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.7; }
}
@keyframes dotBounce {
0%, 80%, 100% {
transform: scale(0);
}
40% {
transform: scale(1);
}
}
/* Responsive Preloader */
@media (max-width: 768px) {
.preloader-logo {
width: 100px;
margin-bottom: 25px;
}
.preloader-spinner {
width: 50px;
height: 50px;
}
.preloader-text {
font-size: 14px;
}
.preloader-subtitle {
font-size: 12px;
}
}
/* ===============================================
3'LÜ TESTIMONIALS CAROUSEL
=============================================== */
.testimonials-container {
max-width: 1200px;
margin: 0 auto;
padding: 50px 0;
}
.testimonial-center {
flex: 0 0 auto;
width: 500px;
margin: 0 30px;
z-index: 3;
transform: scale(1);
transition: all 0.6s cubic-bezier(0.4, 0.0, 0.2, 1);
}
.testimonial-side {
flex: 0 0 auto;
width: 350px;
opacity: 0.7;
transform: scale(0.85);
transition: all 0.6s cubic-bezier(0.4, 0.0, 0.2, 1);
z-index: 2;
}
.testimonial-side:hover {
opacity: 0.9;
transform: scale(0.9);
cursor: pointer;
}
.testimonial-card {
background: white;
border-radius: 20px;
padding: 40px 30px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
text-align: center;
height: 500px; /* Sabit yükseklik */
min-height: 500px;
display: flex;
flex-direction: column;
justify-content: center;
transition: all 0.6s cubic-bezier(0.4, 0.0, 0.2, 1);
transform: translateZ(0);
backface-visibility: hidden;
}
.testimonial-center .testimonial-card {
padding: 50px 40px;
height: 550px; /* Orta testimonial biraz daha büyük */
min-height: 550px;
box-shadow: 0 20px 40px rgba(167, 113, 41, 0.15);
}
.author-avatar {
width: 80px;
height: 80px;
border-radius: 50%;
background: linear-gradient(135deg, #a77129, #d4a574);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
color: white;
font-weight: 600;
font-size: 24px;
box-shadow: 0 5px 15px rgba(167, 113, 41, 0.3);
transition: all 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
}
.testimonial-center .author-avatar {
width: 100px;
height: 100px;
font-size: 30px;
}
.testimonial-side .author-avatar {
width: 60px;
height: 60px;
font-size: 18px;
}
.stars i {
font-size: 18px;
margin: 0 2px;
}
.testimonial-center .stars i {
font-size: 22px;
}
.testimonial-side .stars i {
font-size: 14px;
}
.testimonial-text {
font-size: 16px;
line-height: 1.6;
color: #555;
font-style: italic;
margin: 0;
transition: opacity 0.3s ease, transform 0.3s ease;
flex: 1;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
text-overflow: ellipsis;
max-height: 200px;
}
.testimonial-center .testimonial-text {
font-size: 18px;
line-height: 1.7;
max-height: 240px;
}
.testimonial-side .testimonial-text {
font-size: 14px;
line-height: 1.5;
max-height: 180px;
}
.author-name {
color: #a77129;
font-weight: 600;
margin-bottom: 5px;
transition: opacity 0.3s ease, transform 0.3s ease;
}
.author-title {
font-size: 14px;
margin: 0;
transition: opacity 0.3s ease, transform 0.3s ease;
}
.testimonial-side .author-title {
font-size: 12px;
}
/* Animation classes */
.testimonial-content.fade-out {
opacity: 0;
transform: translateY(10px);
}
.testimonial-content.fade-in {
opacity: 1;
transform: translateY(0);
}
.testimonial-content {
transition: opacity 0.4s ease, transform 0.4s ease;
}
/* Position-based slide animations */
.testimonials-container.sliding {
pointer-events: none;
}
/* PREV: Left testimonial sliding to center (left → center) */
.testimonial-left.slide-to-center {
transform: translateX(380px) scale(1);
opacity: 1;
z-index: 3;
}
/* PREV: Center testimonial sliding to right */
.testimonial-center.slide-to-right {
transform: translateX(380px) scale(0.85);
opacity: 0.7;
z-index: 2;
}
/* PREV: Right testimonial sliding out */
.testimonial-right.slide-out {
transform: translateX(380px) scale(0.7);
opacity: 0;
}
/* NEXT: Right testimonial sliding to center (right → center) */
.testimonial-right.slide-to-center {
transform: translateX(-380px) scale(1);
opacity: 1;
z-index: 3;
}
/* NEXT: Center testimonial sliding to left */
.testimonial-center.slide-to-left {
transform: translateX(-380px) scale(0.85);
opacity: 0.7;
z-index: 2;
}
/* NEXT: Left testimonial sliding out */
.testimonial-left.slide-out-left {
transform: translateX(-380px) scale(0.7);
opacity: 0;
}
.testimonial-new-right {
transform: translateX(380px) scale(0.85);
opacity: 0.7;
z-index: 2;
}
/* Enhanced hover effects during transitions */
.testimonial-side:not(.sliding):hover {
transform: scale(0.9);
opacity: 0.9;
}
.testimonial-center:hover .testimonial-card {
transform: translateY(-5px);
box-shadow: 0 25px 50px rgba(167, 113, 41, 0.2);
}
/* Responsive slide distances */
@media (max-width: 1200px) {
/* PREV direction */
.testimonial-left.slide-to-center {
transform: translateX(340px) scale(1);
}
.testimonial-center.slide-to-right {
transform: translateX(340px) scale(0.85);
}
.testimonial-right.slide-out {
transform: translateX(340px) scale(0.7);
}
/* NEXT direction */
.testimonial-right.slide-to-center {
transform: translateX(-340px) scale(1);
}
.testimonial-center.slide-to-left {
transform: translateX(-340px) scale(0.85);
}
.testimonial-left.slide-out-left {
transform: translateX(-340px) scale(0.7);
}
}
@media (max-width: 992px) {
/* PREV direction */
.testimonial-left.slide-to-center {
transform: translateX(285px) scale(1);
}
.testimonial-center.slide-to-right {
transform: translateX(285px) scale(0.85);
}
.testimonial-right.slide-out {
transform: translateX(285px) scale(0.7);
}
/* NEXT direction */
.testimonial-right.slide-to-center {
transform: translateX(-285px) scale(1);
}
.testimonial-center.slide-to-left {
transform: translateX(-285px) scale(0.85);
}
.testimonial-left.slide-out-left {
transform: translateX(-285px) scale(0.7);
}
}
/* Navigation Buttons */
.testimonial-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: white;
border: 2px solid #a77129;
border-radius: 50%;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
color: #a77129;
font-size: 18px;
cursor: pointer;
transition: all 0.3s ease;
z-index: 5;
}
.testimonial-nav:hover {
background: #a77129;
color: white;
transform: translateY(-50%);
}
.testimonial-prev {
left: -25px;
}
.testimonial-next {
right: -25px;
}
/* Indicators */
.testimonial-indicators {
display: flex;
justify-content: center;
gap: 10px;
margin-top: 40px;
}
.testimonial-indicators .indicator {
width: 12px;
height: 12px;
border-radius: 50%;
background: #ddd;
border: none;
cursor: pointer;
transition: all 0.3s ease;
}
.testimonial-indicators .indicator.active {
background: #a77129;
transform: scale(1.2);
}
.testimonial-indicators .indicator:hover {
background: #a77129;
opacity: 0.7;
}
/* Responsive Design */
@media (max-width: 1200px) {
.testimonial-center {
width: 450px;
margin: 0 20px;
}
.testimonial-side {
width: 300px;
}
.testimonial-nav {
width: 45px;
height: 45px;
font-size: 16px;
}
}
@media (max-width: 992px) {
.testimonials-container {
padding: 30px 0;
}
.testimonial-center {
width: 400px;
margin: 0 15px;
}
.testimonial-side {
width: 250px;
}
.testimonial-card {
padding: 30px 20px;
height: 450px;
min-height: 450px;
}
.testimonial-center .testimonial-card {
padding: 40px 30px;
height: 500px;
min-height: 500px;
}
}
@media (max-width: 768px) {
.testimonials-container {
overflow: hidden;
}
.testimonial-side {
display: none;
}
.testimonial-center {
width: 100%;
margin: 0;
max-width: 500px;
}
.testimonial-center .testimonial-card {
height: 400px;
min-height: 400px;
padding: 30px 20px;
}
.testimonial-center .testimonial-text {
max-height: 180px;
font-size: 16px;
}
.testimonials-container .d-flex {
flex-direction: column;
align-items: center;
}
.testimonial-nav {
display: none;
}
}
/* ===============================================
SIDEBAR STYLES
=============================================== */
/* Sidebar hover efektleri */
.list-group-item a {
transition: all 0.3s ease;
}
.list-group-item:hover {
background-color: #f8f9fa !important;
transform: translateX(5px);
}
.list-group-item a:hover {
color: #a77129 !important;
text-decoration: none !important;
}
.list-group-item:hover h6 {
color: #a77129 !important;
}
/* Etiket hover efektleri */
.sidebar .badge {
transition: all 0.3s ease;
cursor: pointer;
}
.sidebar .badge:hover {
background-color: #a77129 !important;
color: white !important;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(167, 113, 41, 0.3);
}
/* ===============================================
RESPONSIVE IMAGE STYLES
=============================================== */
/* Editor içindeki resimler için özel kurallar */
.editor-content img,
.content img,
.post-content img,
.page-content img {
max-width: 100% !important;
height: auto !important;
display: block;
margin: 10px auto;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
/* Mobil cihazlarda resim boyutlandırma */
@media (max-width: 768px) {
.editor-content img,
.content img,
.post-content img,
.page-content img {
max-width: 100% !important;
height: auto !important;
width: 100% !important;
margin: 15px auto;
padding: 0 10px;
box-sizing: border-box;
}
}
/* Extra small mobilde daha da küçük padding */
@media (max-width: 576px) {
.editor-content img,
.content img,
.post-content img,
.page-content img {
margin: 10px auto;
padding: 0 5px;
}
}
/* Resim container'ları için overflow kontrolü */
.image-container,
.content-container,
.editor-container {
overflow-x: hidden;
word-wrap: break-word;
word-break: break-word;
}
/* ===============================================
GLOBAL INPUT ICON HIDING CSS
=============================================== */
/* Tüm input türlerindeki istenmeyen ikonları gizle */
input[type="text"]::-webkit-calendar-picker-indicator,
input[type="text"]::-webkit-inner-spin-button,
input[type="text"]::-webkit-outer-spin-button,
input[type="text"]::-webkit-search-cancel-button,
input[type="text"]::-webkit-search-decoration,
input[type="search"]::-webkit-calendar-picker-indicator,
input[type="search"]::-webkit-inner-spin-button,
input[type="search"]::-webkit-outer-spin-button,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration,
input[type="email"]::-webkit-calendar-picker-indicator,
input[type="email"]::-webkit-inner-spin-button,
input[type="email"]::-webkit-outer-spin-button,
input[type="email"]::-webkit-search-cancel-button,
input[type="email"]::-webkit-search-decoration,
input[type="tel"]::-webkit-calendar-picker-indicator,
input[type="tel"]::-webkit-inner-spin-button,
input[type="tel"]::-webkit-outer-spin-button,
input[type="tel"]::-webkit-search-cancel-button,
input[type="tel"]::-webkit-search-decoration {
display: none !important;
-webkit-appearance: none !important;
}
/* Microsoft Edge/IE için */
input[type="text"]::-ms-clear,
input[type="text"]::-ms-reveal,
input[type="search"]::-ms-clear,
input[type="search"]::-ms-reveal,
input[type="email"]::-ms-clear,
input[type="email"]::-ms-reveal,
input[type="tel"]::-ms-clear,
input[type="tel"]::-ms-reveal {
display: none !important;
}
/* Bootstrap is-valid class'ından gelen checkmark ikonunu gizle */
input.is-valid {
background-image: none !important;
background-repeat: no-repeat !important;
background-position: right calc(0.375em + 0.1875rem) center !important;
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem) !important;
}
input.is-valid:focus {
background-image: none !important;
}
/* Bootstrap is-invalid class'ından gelen X ikonunu gizle */
input.is-invalid {
background-image: none !important;
background-repeat: no-repeat !important;
background-position: right calc(0.375em + 0.1875rem) center !important;
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem) !important;
}
input.is-invalid:focus {
background-image: none !important;
}
/* ===============================================
HEADER STYLES
=============================================== */
/* Header dropdown hover efektleri */
.dropdown-item {
transition: color 0.3s ease;
}
.dropdown-item:hover {
color: #a77129 !important;
background: rgba(167, 113, 41, 0.1);
transform: translateX(4px);
border-radius: 4px;
transition: all 0.15s ease;
}
.dropdown-item:hover i {
color: #a77129 !important;
}
/* Mobile menu hover efektleri */
.mobile-nav .nav-link {
transition: all 0.1s ease;
}
.mobile-nav .nav-link:hover {
color: #a77129 !important;
background-color: #f8f9fa;
transform: translateX(5px);
}
.mobile-nav .nav-link:hover i {
color: #a77129 !important;
}
/* Mobil menü hizalama */
.mobile-nav .nav-link {
display: flex !important;
align-items: center !important;
text-align: left !important;
}
/* Sub menü olan öğeler için özel hizalama */
.mobile-nav .nav-link:has(.fa-chevron-down) {
justify-content: space-between !important;
}
/* Sub menü olmayan öğeler için normal hizalama */
.mobile-nav .nav-link:not(:has(.fa-chevron-down)) {
justify-content: flex-start !important;
}
/* Menü ikonunu en sola al */
.mobile-nav .nav-link i:not(.fa-chevron-down) {
order: 0;
margin-right: 1rem !important; /* İkon ile metin arası boşluk artırıldı */
flex-shrink: 0 !important;
}
/* Menü metnini ortaya al */
.mobile-nav .nav-link > *:not(.fa-chevron-down):not(i) {
order: 1;
flex: 1;
text-align: left !important;
}
/* Chevron'u en sağa al */
.mobile-nav .nav-link .fa-chevron-down {
order: 2;
margin-left: auto !important;
flex-shrink: 0 !important;
float: none !important;
}
/* Sub menü ikonları için özel stil */
.mobile-nav .nav-link .fa-angle-right {
display: inline-block !important;
visibility: visible !important;
opacity: 1 !important;
font-size: 0.875rem !important;
color: #6c757d !important;
margin-right: 0.5rem !important;
flex-shrink: 0 !important;
}
/* Sub menü container'ı için padding */
.mobile-nav .nav.flex-column {
padding-left: 0 !important;
width: 100% !important;
max-width: 100% !important;
overflow: hidden !important;
}
/* Sub menü link'leri için özel hizalama */
.mobile-nav .nav.flex-column .nav-link {
display: flex !important;
align-items: center !important;
padding: 0.8rem 0.75rem !important;
width: 100% !important;
max-width: 100% !important;
overflow: visible !important;
text-overflow: unset !important;
white-space: normal !important;
margin-bottom: 0.25rem !important;
line-height: 1.4 !important;
word-wrap: break-word !important;
word-break: break-word !important;
}
/* Input içindeki ok ikonunu gizle */
#mobileSearchInput::-webkit-calendar-picker-indicator {
display: none !important;
}
/* Mobil arama formu padding */
.mobile-nav .nav-item.border-bottom {
padding-bottom: 1rem !important;
}
.mobile-nav .nav-item .px-2.py-2 {
padding-bottom: 0.75rem !important;
}
#mobileSearchInput::-webkit-inner-spin-button,
#mobileSearchInput::-webkit-outer-spin-button {
display: none !important;
}
#mobileSearchInput::-webkit-search-cancel-button {
display: none !important;
}
#mobileSearchInput::-webkit-search-decoration {
display: none !important;
}
#mobileSearchInput::-ms-clear {
display: none !important;
}
/* Dropdown hizalama düzeltmeleri */
.dropdown-menu {
right: 0 !important;
left: auto !important;
transform: translateX(0) !important;
min-width: 200px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.dropdown-menu.show {
right: 0 !important;
left: auto !important;
}
/* Son dropdown menü için özel hizalama */
.navbar-nav .nav-item:last-child .dropdown-menu {
right: 0 !important;
left: auto !important;
}
/* Dropdown açma - sadece tıklama ile */
@media (min-width: 992px) {
.dropdown-menu {
display: none;
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: all 0.2s ease;
padding-top: 10px;
margin-top: -10px;
}
.dropdown-menu.show {
display: block !important;
opacity: 1;
visibility: visible;
transform: translateY(0);
}
/* Dropdown menü ile ana menü arasında boşluk */
.navbar-nav .nav-item .dropdown-menu {
margin-top: -2px;
}
}
/* ===============================================
ADMIN LOGIN STYLES
=============================================== */
.admin-login-body {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
min-height: 100vh;
}
.admin-login-body .navbar,
.admin-login-body .topbar {
display: none;
}
.admin-login-body main {
padding-top: 2rem !important;
}
.admin-login-body .card {
border: none;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
.admin-login-body .form-control:focus {
border-color: #a77129;
box-shadow: 0 0 0 0.2rem rgba(167, 113, 41, 0.25);
}
.admin-login-body .btn-primary {
background: linear-gradient(135deg, #a77129 0%, #c48a3a 100%);
border: none;
transition: all 0.3s ease;
}
.admin-login-body .btn-primary:hover {
background: linear-gradient(135deg, #8a5d1f 0%, #a77129 100%);
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(167, 113, 41, 0.3);
}
.admin-login-body .btn-outline-secondary {
border-color: #dee2e6;
color: #6c757d;
}
.admin-login-body .btn-outline-secondary:hover {
background-color: #f8f9fa;
border-color: #a77129;
color: #a77129;
}
.admin-login-body .alert {
border: none;
border-radius: 0;
}
.admin-login-body .form-check-input:checked {
background-color: #a77129;
border-color: #a77129;
}
.admin-login-body .form-check-input:focus {
box-shadow: 0 0 0 0.2rem rgba(167, 113, 41, 0.25);
}
/* Admin login responsive */
@media (max-width: 768px) {
.admin-login-body .container {
padding: 1rem;
}
.admin-login-body .card-body {
padding: 2rem 1.5rem;
}
.admin-login-body .card-header {
padding: 2rem 1.5rem;
}
}
/* Blockquote Styling - HTML5 Editor Alıntıları */
blockquote {
border-left: 4px solid var(--primary-color);
background: linear-gradient(135deg, rgba(167, 113, 41, 0.05) 0%, rgba(167, 113, 41, 0.1) 100%);
margin: 2rem 0;
padding: 1.5rem 2rem;
border-radius: 0 8px 8px 0;
position: relative;
font-style: italic;
font-size: 1.1rem;
line-height: 1.6;
box-shadow: none;
transition: none;
}
blockquote:hover {
transform: none;
box-shadow: none;
}
blockquote::before {
content: '"';
font-size: 4rem;
color: var(--primary-color);
position: absolute;
top: -10px;
left: 15px;
font-family: serif;
opacity: 0.3;
}
blockquote::after {
content: '"';
font-size: 4rem;
color: var(--primary-color);
position: absolute;
bottom: -20px;
right: 15px;
font-family: serif;
opacity: 0.3;
}
blockquote p {
margin: 0;
position: relative;
z-index: 1;
}
blockquote cite {
display: block;
margin-top: 1rem;
font-size: 0.9rem;
color: var(--secondary-color);
font-style: normal;
text-align: right;
}
blockquote cite::before {
content: "— ";
color: var(--primary-color);
font-weight: bold;
}
/* Blockquote variations */
blockquote.warning {
border-left-color: #ffc107;
background: linear-gradient(135deg, rgba(255, 193, 7, 0.05) 0%, rgba(255, 193, 7, 0.1) 100%);
}
blockquote.warning::before,
blockquote.warning::after {
color: #ffc107;
}
blockquote.success {
border-left-color: #28a745;
background: linear-gradient(135deg, rgba(40, 167, 69, 0.05) 0%, rgba(40, 167, 69, 0.1) 100%);
}
blockquote.success::before,
blockquote.success::after {
color: #28a745;
}
blockquote.danger {
border-left-color: #dc3545;
background: linear-gradient(135deg, rgba(220, 53, 69, 0.05) 0%, rgba(220, 53, 69, 0.1) 100%);
}
blockquote.danger::before,
blockquote.danger::after {
color: #dc3545;
}
/* HTML5 Editor Links - Primary Color and Underlined (Only in articleBody, exclude badges) */
div[itemprop="articleBody"] a:not(.badge) {
color: var(--primary-color) !important;
text-decoration: underline !important;
transition: all 0.3s ease;
}
div[itemprop="articleBody"] a:not(.badge):hover {
color: var(--primary-dark) !important;
text-decoration: underline !important;
opacity: 0.8;
}
/* HTML5 Editor Paragraph Spacing - Reduce excessive spacing */
div[itemprop="articleBody"] p {
margin-bottom: 0.5rem !important;
line-height: 1.4 !important;
}
div[itemprop="articleBody"] p:last-child {
margin-bottom: 0 !important;
}
/* HTML5 Editor Line Breaks - Reduce spacing */
div[itemprop="articleBody"] br {
line-height: 1.1 !important;
}
/* HTML5 Editor Div Spacing - Reduce excessive spacing */
div[itemprop="articleBody"] div {
margin-bottom: 0.25rem !important;
}
div[itemprop="articleBody"] div:last-child {
margin-bottom: 0 !important;
}
/* HTML5 Editor List Spacing - Reduce spacing */
div[itemprop="articleBody"] ul,
div[itemprop="articleBody"] ol {
margin-bottom: 0.5rem !important;
padding-left: 1.5rem !important;
}
div[itemprop="articleBody"] li {
margin-bottom: 0.25rem !important;
line-height: 1.4 !important;
}
/* HTML5 Editor Heading Spacing - Reduce spacing */
div[itemprop="articleBody"] h1,
div[itemprop="articleBody"] h2,
div[itemprop="articleBody"] h3,
div[itemprop="articleBody"] h4,
div[itemprop="articleBody"] h5,
div[itemprop="articleBody"] h6 {
margin-top: 0.5rem !important;
margin-bottom: 1.5rem !important;
line-height: 1.2 !important;
}
div[itemprop="articleBody"] h1:first-child,
div[itemprop="articleBody"] h2:first-child,
div[itemprop="articleBody"] h3:first-child,
div[itemprop="articleBody"] h4:first-child,
div[itemprop="articleBody"] h5:first-child,
div[itemprop="articleBody"] h6:first-child {
margin-top: 0 !important;
}
/* HTML5 Editor Text Alignment - Center alignment support */
div[itemprop="articleBody"] [style*="text-align: center"],
div[itemprop="articleBody"] .ql-align-center,
div[itemprop="articleBody"] .text-center {
text-align: center !important;
}
div[itemprop="articleBody"] [style*="text-align: left"],
div[itemprop="articleBody"] .ql-align-left,
div[itemprop="articleBody"] .text-left {
text-align: left !important;
}
div[itemprop="articleBody"] [style*="text-align: right"],
div[itemprop="articleBody"] .ql-align-right,
div[itemprop="articleBody"] .text-right {
text-align: right !important;
}
div[itemprop="articleBody"] [style*="text-align: justify"],
div[itemprop="articleBody"] .ql-align-justify,
div[itemprop="articleBody"] .text-justify {
text-align: justify !important;
}
/* HTML5 Editor Blockquote - Hide quote icons */
div[itemprop="articleBody"] blockquote::before,
div[itemprop="articleBody"] blockquote::after {
display: none !important;
}
div[itemprop="articleBody"] blockquote p {
padding-left: 0 !important;
}
/* HTML5 Editor Images - Responsive and Aligned */
.ql-editor img,
article img,
.content img {
max-width: 100% !important;
height: auto !important;
display: block;
margin: 1.5rem auto;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
width: 100% !important;
cursor: pointer;
}
/* HTML5 Editor Videos - Responsive and Aligned */
.ql-editor video,
article video,
.content video,
.ql-editor iframe,
article iframe,
.content iframe {
max-width: 100% !important;
height: auto !important;
display: block;
margin: 1.5rem auto;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
/* Video aspect ratio preservation */
.ql-editor video,
article video,
.content video {
aspect-ratio: 16/9;
width: 100%;
max-width: 800px;
}
/* Iframe video containers (YouTube, Vimeo, etc.) */
.ql-editor iframe[src*="youtube"],
.ql-editor iframe[src*="vimeo"],
article iframe[src*="youtube"],
article iframe[src*="vimeo"],
.content iframe[src*="youtube"],
.content iframe[src*="vimeo"] {
aspect-ratio: 16/9;
width: 100%;
max-width: 800px;
height: auto;
}
/* Image alignment classes */
.ql-editor img.align-left,
article img.align-left,
.content img.align-left {
float: left;
margin: 0 1.5rem 1rem 0;
max-width: 60%;
width: 60% !important;
}
.ql-editor img.align-right,
article img.align-right,
.content img.align-right {
float: right;
margin: 0 0 1rem 1.5rem;
max-width: 60%;
width: 60% !important;
}
.ql-editor img.align-center,
article img.align-center,
.content img.align-center {
display: block;
margin: 1.5rem auto;
max-width: 90%;
width: 90% !important;
}
/* Video alignment classes */
.ql-editor video.align-left,
article video.align-left,
.content video.align-left,
.ql-editor iframe.align-left,
article iframe.align-left,
.content iframe.align-left {
float: left;
margin: 0 1.5rem 1rem 0;
max-width: 50%;
}
.ql-editor video.align-right,
article video.align-right,
.content video.align-right,
.ql-editor iframe.align-right,
article iframe.align-right,
.content iframe.align-right {
float: right;
margin: 0 0 1rem 1.5rem;
max-width: 50%;
}
.ql-editor video.align-center,
article video.align-center,
.content video.align-center,
.ql-editor iframe.align-center,
article iframe.align-center,
.content iframe.align-center {
display: block;
margin: 1.5rem auto;
max-width: 80%;
}
/* Clear floats */
.ql-editor::after,
article::after,
.content::after {
content: "";
display: table;
clear: both;
}
/* Image captions */
.ql-editor figure,
article figure,
.content figure {
margin: 1.5rem auto;
text-align: center;
max-width: 100%;
}
.ql-editor figcaption,
article figcaption,
.content figcaption {
font-size: 0.9rem;
color: var(--secondary-color);
font-style: italic;
margin-top: 0.5rem;
padding: 0 1rem;
}
/* Mobile responsive for blockquotes */
@media (max-width: 768px) {
blockquote {
margin: 1.5rem 0;
padding: 1rem 1.5rem;
font-size: 1rem;
}
blockquote::before,
blockquote::after {
font-size: 3rem;
}
/* Mobile image adjustments */
.ql-editor img,
article img,
.content img {
margin: 1rem auto;
max-width: 95%;
width: 95% !important;
}
.ql-editor img.align-left,
.ql-editor img.align-right,
article img.align-left,
article img.align-right,
.content img.align-left,
.content img.align-right {
float: none;
margin: 1rem auto;
max-width: 95%;
width: 95% !important;
}
/* Mobile video adjustments */
.ql-editor video,
article video,
.content video,
.ql-editor iframe,
article iframe,
.content iframe {
margin: 1rem auto;
max-width: 95%;
width: 95% !important;
}
.ql-editor video.align-left,
.ql-editor video.align-right,
article video.align-left,
article video.align-right,
.content video.align-left,
.content video.align-right,
.ql-editor iframe.align-left,
.ql-editor iframe.align-right,
article iframe.align-left,
article iframe.align-right,
.content iframe.align-left,
.content iframe.align-right {
float: none;
margin: 1rem auto;
max-width: 95%;
width: 95% !important;
}
}
/* Main Content - Footer'ın en altta kalması için */
.main-content {
min-height: calc(100vh - 200px); /* Header ve footer yüksekliği kadar minimum yükseklik */
display: flex;
flex-direction: column;
}
/* Eğer hiçbir section aktif değilse footer'ı en alta yapıştır */
body.no-sections .main-content {
min-height: calc(100vh - 100px);
justify-content: flex-end;
}
/* Footer'ı her zaman en altta tut */
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
body.no-sections {
justify-content: space-between;
}
/* Liste marker renkleri - Post içeriklerinde */
article ul li::marker,
article ol li::marker,
main ul li::marker,
main ol li::marker {
color: var(--primary-color) !important;
}
/* Fallback için list-style-color - Post içeriklerinde */
article ul li,
article ol li,
main ul li,
main ol li {
list-style-color: var(--primary-color) !important;
}
/* Nested listeler için de aynı renk - Post içeriklerinde */
article ul ul li::marker,
article ol ol li::marker,
article ul ol li::marker,
article ol ul li::marker,
main ul ul li::marker,
main ol ol li::marker,
main ul ol li::marker,
main ol ul li::marker {
color: var(--primary-color) !important;
}
article ul ul li,
article ol ol li,
article ul ol li,
article ol ul li,
main ul ul li,
main ol ol li,
main ul ol li,
main ol ul li {
list-style-color: var(--primary-color) !important;
}
/* Single post başlıkları için alt boşluk */
h1, h2, h3, h4, h5, h6 {
margin-bottom: 1rem !important;
}
/* Daha güçlü selector - en sona eklendi */
body h1, body h2, body h3, body h4, body h5, body h6 {
margin-bottom: 1rem !important;
}
/* Başlıklar için alt boşluk - çalışıyor */
h1, h2, h3, h4, h5, h6 {
margin-bottom: 1.5rem !important;
}
/* Boş içerik sayfasındaki ana sayfaya dön butonu hover efekti */
.empty-content-icon + h4 + p + div .btn-outline-primary {
background-color: var(--primary-color) !important;
border-color: var(--primary-color) !important;
color: white !important;
transition: all 0.3s ease !important;
}
.empty-content-icon + h4 + p + div .btn-outline-primary:hover {
background-color: var(--primary-dark) !important;
border-color: var(--primary-dark) !important;
color: white !important;
transform: translateY(-2px) !important;
box-shadow: 0 4px 12px rgba(167, 113, 41, 0.3) !important;
}
/* Görsel Container ve Caption Stilleri - Tema Uyumlu */
.image-container {
position: relative;
display: block;
margin: 1rem 0;
text-align: center;
}
.image-container img {
width: 100%;
height: auto;
border-radius: 4px;
box-shadow: 0 2px 8px rgba(167, 113, 41, 0.15);
transition: all 0.3s ease;
border: 1px solid rgba(167, 113, 41, 0.1);
}
.image-container img:hover {
transform: scale(1.01);
box-shadow: 0 4px 16px rgba(167, 113, 41, 0.25);
border-color: rgba(167, 113, 41, 0.2);
}
.image-caption {
font-family: var(--font-body);
font-style: italic;
color: #a77129 !important;
font-size: 0.9rem;
margin-top: -0.1rem;
padding: 0 0.5rem;
line-height: 1.4;
font-weight: 500;
letter-spacing: 0.3px;
opacity: 0.8;
transition: all 0.3s ease;
}
.image-container:hover .image-caption {
opacity: 1;
color: #a77129 !important;
font-weight: 600;
}
/* Fancybox ile uyumlu görsel stilleri */
.image-container img[data-fancybox] {
cursor: pointer;
}
.image-container img[data-fancybox]:hover {
opacity: 0.95;
}
/* Responsive görsel stilleri */
@media (max-width: 768px) {
.image-container {
margin: 0.75rem 0;
}
.image-caption {
font-size: 0.8rem;
padding: 0 0.25rem;
margin-top: -0.1rem;
}
.image-container img {
border-radius: 3px;
box-shadow: 0 1px 6px rgba(167, 113, 41, 0.12);
}
}
@media (max-width: 576px) {
.image-caption {
font-size: 0.75rem;
letter-spacing: 0.3px;
}
}
/* Header Menü Uzunluk Kısaltması - Responsive */
@media (max-width: 1200px) {
.navbar-nav .nav-link {
max-width: 350px;
}
.navbar-nav .dropdown-toggle {
max-width: 370px;
}
.navbar-nav .dropdown-item {
max-width: 130px !important;
}
}
/* Dropdown Item - Çok Satırlı Metin */
.navbar-nav .dropdown-menu .dropdown-item {
max-width: 350px !important;
white-space: normal !important; /* Alt satıra geçebilir */
overflow: visible !important; /* Taşan metin görünür */
text-overflow: unset !important; /* Kısaltma kaldırıldı */
display: block !important;
width: 350px !important;
line-height: 1.4 !important; /* Satır arası boşluk */
word-wrap: break-word !important; /* Uzun kelimeler kırılır */
word-break: break-word !important; /* Kelime sınırlarında kırılır */
}
.navbar-nav .dropdown-menu .dropdown-item span,
.navbar-nav .dropdown-menu .dropdown-item a {
max-width: 100% !important;
white-space: normal !important; /* Alt satıra geçebilir */
overflow: visible !important; /* Taşan metin görünür */
text-overflow: unset !important; /* Kısaltma kaldırıldı */
display: block !important;
line-height: 1.4 !important; /* Satır arası boşluk */
word-wrap: break-word !important; /* Uzun kelimeler kırılır */
word-break: break-word !important; /* Kelime sınırlarında kırılır */
}
/* Mobil Menü Alt Menü Kısaltma */
.mobile-nav .collapse .nav-link {
max-width: 350px !important;
white-space: normal !important;
overflow: hidden !important;
display: flex !important;
width: 350px !important;
margin-left: 0 !important;
padding-left: 1.5rem !important;
line-height: 1.4 !important;
height: auto !important;
min-height: 3rem !important;
}
/* Alt menü container'ı için padding kaldır */
.mobile-nav .collapse .nav.flex-column {
margin-left: 0 !important;
padding-left: 0 !important;
}
.mobile-nav .collapse .nav-link span,
.mobile-nav .collapse .nav-link a {
max-width: 100% !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
display: block !important;
}
@media (max-width: 992px) {
.navbar-nav .nav-link {
max-width: 320px;
}
.navbar-nav .dropdown-toggle {
max-width: 340px;
}
.navbar-nav .dropdown-item {
max-width: 110px !important;
}
.navbar-nav .dropdown-menu .dropdown-item {
max-width: 300px !important;
width: 300px !important;
}
.mobile-nav .nav-link {
width: 100%;
}
.mobile-nav .collapse .nav-link {
max-width: 320px !important;
width: 320px !important;
}
}
@media (max-width: 768px) {
.navbar-nav .nav-link {
max-width: 280px;
}
.navbar-nav .dropdown-toggle {
max-width: 300px;
}
.navbar-nav .dropdown-item {
max-width: 90px !important;
}
.navbar-nav .dropdown-menu .dropdown-item {
max-width: 250px !important;
width: 250px !important;
}
.mobile-nav .nav-link {
width: 100%;
}
.mobile-nav .collapse .nav-link {
max-width: 300px !important;
width: 300px !important;
}
}
@media (max-width: 576px) {
.mobile-nav .nav-link {
width: 100%;
}
}
@media (max-width: 480px) {
.mobile-nav .nav-link {
width: 100%;
}
}
/* iPhone Page Banner Fixes */
.page-banner-header {
background-attachment: scroll !important; /* iPhone'da fixed çalışmıyor */
min-height: 50vh;
background-repeat: no-repeat;
background-position: center center;
}
/* iPhone Safari özel düzeltmeleri */
@supports (-webkit-touch-callout: none) {
.page-banner-header {
background-attachment: scroll !important;
-webkit-background-size: cover !important;
background-size: cover !important;
background-position: center center !important;
background-repeat: no-repeat !important;
}
}
/* iPhone X ve üzeri için özel düzeltmeler */
@media only screen
and (device-width: 375px)
and (device-height: 812px)
and (-webkit-device-pixel-ratio: 3) {
.page-banner-header {
height: 60vh !important;
background-attachment: scroll !important;
}
}
/* iPhone 6/7/8 Plus için */
@media only screen
and (device-width: 414px)
and (device-height: 736px)
and (-webkit-device-pixel-ratio: 3) {
.page-banner-header {
height: 55vh !important;
background-attachment: scroll !important;
}
}
/* iPhone 12/13/14 serisi için */
@media only screen
and (device-width: 390px)
and (device-height: 844px)
and (-webkit-device-pixel-ratio: 3) {
.page-banner-header {
height: 60vh !important;
background-attachment: scroll !important;
}
}
/* iPhone 12/13/14 Pro Max için */
@media only screen
and (device-width: 428px)
and (device-height: 926px)
and (-webkit-device-pixel-ratio: 3) {
.page-banner-header {
height: 60vh !important;
background-attachment: scroll !important;
}
}