/* 7,golden,golden-theme,#b8860b,Golden Theme - Altın Tema */
:root {
/* Primary Colors - Golden Palette */
--primary-color: #b8860b;
--primary-dark: #9a7209;
--primary-light: #daa520;
--primary-darker: #7a5a07;
/* Secondary Colors - Harmonious with Golden */
--secondary-color: #8b7355;
--success-color: #27ae60;
--danger-color: #e74c3c;
--warning-color: #f39c12;
--info-color: #b8860b;
/* Neutral Colors */
--white: #ffffff;
--black: #000000;
--light-color: #f8f9fa;
--dark-color: #1a1a1a;
/* Gray Scale */
--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;
/* Social Media Colors */
--whatsapp-color: #25d366;
--whatsapp-dark: #128c7e;
--facebook-color: #1877f2;
--twitter-color: #1da1f2;
--instagram-color: #e4405f;
--linkedin-color: #0077b5;
/* Action Colors - Golden Accent */
--phone-color: #b8860b;
--phone-hover: #9a7209;
--back-to-top: #b8860b;
--back-to-top-hover: #9a7209;
/* Background Colors */
--bg-light: #f8f9fa;
/* Transparent */
--transparent: transparent;
--bg-white: #ffffff;
--bg-overlay: rgba(255, 255, 255, 0.95);
--bg-overlay-light: rgba(255, 255, 255, 0.9);
--bg-overlay-dark: rgba(0, 0, 0, 0.5);
/* Border Colors */
--border-light: rgba(255, 255, 255, 0.3);
--border-primary: rgba(184, 134, 11, 0.1);
--border-primary-light: rgba(184, 134, 11, 0.05);
--border-gray: #e9ecef;
/* Text Colors */
--text-white: rgba(255, 255, 255, 0.9);
--text-muted: #6c757d;
--text-dark: #555;
/* Shadow Colors */
--shadow-primary: rgba(184, 134, 11, 0.3);
--shadow-primary-light: rgba(184, 134, 11, 0.15);
--shadow-primary-very-light: rgba(184, 134, 11, 0.05);
--shadow-primary-ultra-light: rgba(184, 134, 11, 0.02);
--shadow-primary-micro: rgba(184, 134, 11, 0.01);
--shadow-primary-nano: rgba(184, 134, 11, 0.008);
--shadow-primary-pico: rgba(184, 134, 11, 0.005);
--shadow-black: rgba(0, 0, 0, 0.15);
--shadow-black-light: rgba(0, 0, 0, 0.08);
--shadow-black-very-light: rgba(0, 0, 0, 0.05);
--shadow-black-ultra-light: rgba(0, 0, 0, 0.02);
--shadow-black-micro: rgba(0, 0, 0, 0.01);
--shadow-whatsapp: rgba(37, 211, 102, 0.3);
--shadow-white: rgba(255, 255, 255, 0.1);
--shadow-white-light: rgba(255, 255, 255, 0.05);
--shadow-white-micro: rgba(255, 255, 255, 0.02);
--shadow-white-medium: rgba(255, 255, 255, 0.2);
--text-white-semi: rgba(255, 255, 255, 0.5);
--shadow-primary-medium: rgba(184, 134, 11, 0.4);
--shadow-phone-medium: rgba(184, 134, 11, 0.4);
--shadow-whatsapp-medium: rgba(37, 211, 102, 0.4);
--shadow-primary-very-light: rgba(184, 134, 11, 0.12);
--shadow-primary-nano: rgba(184, 134, 11, 0.015);
--shadow-primary-pico: rgba(184, 134, 11, 0.01);
--shadow-black-medium: rgba(0, 0, 0, 0.3);
--shadow-primary-medium-light: rgba(184, 134, 11, 0.2);
--shadow-primary-focus: rgba(184, 134, 11, 0.25);
--shadow-blue-medium: rgba(184, 134, 11, 0.4);
/* Additional Colors */
--gray-700-color: #495057;
--bg-overlay-very-light: rgba(255, 255, 255, 0.98);
--shadow-black-strong: rgba(0, 0, 0, 0.3);
--bg-primary-strong: rgba(184, 134, 11, 0.8);
--bg-gallery-overlay: rgba(184, 134, 11, 0.8);
--bg-white-medium: rgba(255, 255, 255, 0.3);
--bg-primary-very-light: rgba(184, 134, 11, 0.05);
--bg-primary-light: rgba(184, 134, 11, 0.1);
--bg-warning-very-light: rgba(243, 156, 18, 0.05);
--bg-warning-light: rgba(243, 156, 18, 0.1);
--bg-success-very-light: rgba(184, 134, 11, 0.05);
--bg-success-light: rgba(184, 134, 11, 0.1);
--bg-danger-very-light: rgba(231, 76, 60, 0.05);
--bg-danger-light: rgba(231, 76, 60, 0.1);
/* Additional Shadow Colors for SVG Patterns */
--shadow-primary-micro-12: rgba(184, 134, 11, 0.012);
--shadow-primary-nano-8: rgba(184, 134, 11, 0.008);
/* Form Focus Colors */
--form-focus-border: #cd853f;
--form-focus-shadow: rgba(184, 134, 11, 0.25);
/* Fonts */
--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;
/* Gradients - Golden Theme */
--gradient-primary: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 50%, var(--primary-darker) 100%);
--gradient-dark: linear-gradient(135deg, var(--dark-color) 0%, var(--gray-800) 100%);
--gradient-light: linear-gradient(135deg, var(--gray-100) 0%, var(--white) 100%);
--gradient-admin: linear-gradient(135deg, var(--gray-100) 0%, var(--gray-200) 100%);
/* Shadows */
--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);
--shadow-primary: 0 4px 12px rgba(184, 134, 11, 0.3);
--shadow-card: 0 4px 20px rgba(0, 0, 0, 0.08);
--shadow-hover: 0 8px 25px rgba(0, 0, 0, 0.12);
/* Border Radius */
--border-radius: 0.75rem;
--border-radius-lg: 1rem;
--border-radius-xl: 1.5rem;
/* SVG Patterns */
--svg-legal-pattern: url('data:image/svg+xml,');
--svg-legal-scales: url('data:image/svg+xml,');
--svg-about-pattern: url('data:image/svg+xml,');
--svg-about-scales: url('data:image/svg+xml,');
--svg-customers-pattern: url('data:image/svg+xml,');
--svg-customers-scales: url('data:image/svg+xml,');
--svg-faq-pattern: url('data:image/svg+xml,');
--svg-faq-scales: url('data:image/svg+xml,');
--svg-blog-pattern: url('data:image/svg+xml,');
--svg-blog-scales: url('data:image/svg+xml,');
--svg-services-pattern: url('data:image/svg+xml,');
--svg-services-scales: url('data:image/svg+xml,');
--svg-contact-pattern: url('data:image/svg+xml,');
--svg-contact-scales: url('data:image/svg+xml,');
/* Bootstrap Override Variables */
--bs-primary: var(--primary-color);
--bs-primary-rgb: 184, 134, 11;
--bs-primary-text: var(--white);
--bs-primary-bg-subtle: rgba(184, 134, 11, 0.1);
--bs-primary-border-subtle: rgba(184, 134, 11, 0.2);
--bs-btn-focus-shadow-rgb: 184, 134, 11;
}
/* Card title hover efektleri */
.card-title a {
transition: color 0.3s ease;
}
.card-title a:hover {
color: var(--primary-color) !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: var(--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: var(--text-white);
transition: color 0.3s ease;
}
.topbar-item i {
color: rgba(255, 255, 255, 0.9);
font-size: 0.85rem;
transition: color 0.3s ease;
}
.topbar-item a {
color: var(--white);
text-decoration: none;
transition: color 0.3s ease;
}
.topbar-item a:hover {
color: rgba(255, 255, 255, 0.8);
}
.topbar-item a:hover i {
color: rgba(255, 255, 255, 0.7);
}
.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: var(--white);
border-color: var(--border-light);
background: var(--transparent);
}
.topbar .social-btn:hover {
background: var(--primary-color);
color: var(--white);
border-color: var(--primary-color);
transform: translateY(-2px);
box-shadow: var(--shadow-primary);
}
/* 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;
}
}
/* 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 */
/* Primary Button Override */
.btn-primary {
--bs-btn-color: var(--white);
--bs-btn-bg: var(--primary-color);
--bs-btn-border-color: var(--primary-color);
--bs-btn-hover-color: var(--white);
--bs-btn-hover-bg: var(--primary-dark);
--bs-btn-hover-border-color: var(--primary-dark);
--bs-btn-focus-shadow-rgb: var(--bs-btn-focus-shadow-rgb);
--bs-btn-active-color: var(--white);
--bs-btn-active-bg: var(--primary-dark);
--bs-btn-active-border-color: var(--primary-dark);
--bs-btn-active-shadow: inset 0 3px 5px var(--shadow-black);
--bs-btn-disabled-color: var(--white);
--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: var(--white);
--bs-btn-hover-bg: var(--primary-color);
--bs-btn-hover-border-color: var(--primary-color);
--bs-btn-focus-shadow-rgb: var(--bs-btn-focus-shadow-rgb);
--bs-btn-active-color: var(--white);
--bs-btn-active-bg: var(--primary-color);
--bs-btn-active-border-color: var(--primary-color);
--bs-btn-active-shadow: inset 0 3px 5px var(--shadow-black);
--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: var(--white);
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; */
}
/* Page Header */
.page-banner-header {
margin-top: 140px; /* Space for fixed header */
}
@media (max-width: 768px) {
.page-banner-header {
margin-top: 0; /* No space on mobile */
}
}
/* 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: var(--bg-overlay) !important;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-bottom: 1px solid var(--border-primary);
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: var(--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: var(--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: var(--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: var(--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: var(--shadow-primary-light) !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: var(--shadow-primary);
background-color: var(--primary-color) !important;
border-color: var(--primary-color) !important;
color: var(--white) !important;
}
.previous-next-buttons .btn:hover .text-muted {
color: var(--text-white) !important;
}
.previous-next-buttons .btn:hover .fw-bold {
color: var(--white) !important;
}
/* Disabled butonlar için özel stil */
.previous-next-buttons .btn.disabled,
.previous-next-buttons .btn:disabled {
cursor: not-allowed !important;
background-color: var(--transparent) !important;
border: 2px solid var(--secondary-color) !important;
color: var(--secondary-color) !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: var(--transparent) !important;
border: 2px solid var(--secondary-color) !important;
color: var(--secondary-color) !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: var(--bg-light);
border-radius: 6px;
}
::-webkit-scrollbar-thumb {
background: var(--primary-color);
border-radius: 6px;
border: 2px solid var(--bg-light);
}
::-webkit-scrollbar-thumb:hover {
background: var(--primary-dark);
}
::-webkit-scrollbar-thumb:active {
background: var(--primary-darker);
}
::-webkit-scrollbar-corner {
background: var(--bg-light);
}
/* Firefox için scrollbar */
html {
scrollbar-width: thin;
scrollbar-color: var(--primary-color) var(--bg-light);
}
/* Ö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: var(--shadow-primary-light);
}
.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 var(--shadow-primary);
}
/* Dropdown Menu Styles */
.navbar-nav .dropdown-menu {
background: var(--white);
border: none;
border-radius: 0;
box-shadow: 0 10px 30px var(--shadow-black);
padding: 0.75rem 0;
margin-top: -0.2rem;
min-width: 280px;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid var(--border-primary);
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: var(--shadow-primary-light);
color: var(--primary-color) !important;
transform: translateX(8px);
border-radius: 4px;
}
.navbar-nav .dropdown-item:active {
background: var(--shadow-primary-light);
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: var(--bg-overlay);
border: 1px solid var(--border-primary);
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 var(--border-primary-light);
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: var(--shadow-primary-very-light);
}
}
/* Mobile Offcanvas Menu Styles */
.offcanvas-start {
width: 350px !important;
border-right: 1px solid var(--border-primary);
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: var(--white) !important;
border-color: var(--primary-color) !important;
transform: translateY(-2px);
box-shadow: var(--shadow-primary);
}
/* 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: var(--white) !important;
border-color: var(--primary-color) !important;
transform: translateY(-2px);
box-shadow: var(--shadow-primary);
}
.mobile-nav .nav-link {
padding: 1.25rem 2rem;
color: var(--gray-700);
font-weight: 500;
border-bottom: 1px solid var(--border-primary-light);
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: var(--shadow-primary-light);
color: var(--primary-color);
transform: translateX(8px);
text-decoration: none;
border-radius: 4px;
}
.mobile-nav .nav-link.active {
background: var(--shadow-primary-light);
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 var(--border-primary-light);
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: var(--shadow-primary-very-light);
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 var(--border-primary);
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: var(--shadow-primary-very-light) !important;
}
.navbar-nav .dropdown-toggle.active {
color: var(--primary-color) !important;
background: var(--shadow-primary-very-light) !important;
}
.navbar-nav .dropdown-item.active {
color: var(--primary-color) !important;
background: var(--shadow-primary-very-light) !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 var(--shadow-black),
0 10px 20px var(--shadow-black),
0 0 0 1px var(--shadow-white);
filter: drop-shadow(0 8px 16px var(--shadow-black));
}
/* 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%, var(--shadow-white) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, var(--shadow-white) 0%, transparent 50%),
radial-gradient(circle at 40% 40%, var(--shadow-white-light) 0%, transparent 50%),
var(--svg-legal-pattern);
opacity: 0.9;
}
.hero-slide::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--svg-legal-scales);
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: var(--white);
text-shadow: 0 2px 8px var(--shadow-black);
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: var(--white);
opacity: 0.95;
text-shadow: 0 1px 4px var(--shadow-black);
letter-spacing: 0.02em;
}
/* Hero Slide Buttons */
.hero-slide .btn {
color: var(--white);
text-shadow: 0 1px 2px var(--shadow-black);
font-weight: 600;
letter-spacing: 0.5px;
text-transform: uppercase;
background: var(--shadow-white);
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, var(--shadow-white), transparent);
transition: left 0.6s ease;
}
.hero-slide .btn:hover {
background: var(--shadow-white);
color: var(--white);
transform: translateY(-3px) translateX(5px);
box-shadow: 0 12px 30px var(--shadow-black);
}
.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 var(--shadow-black),
0 10px 20px var(--shadow-black),
0 0 0 1px var(--shadow-white);
filter: drop-shadow(0 8px 16px var(--shadow-black));
}
.hero-image::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
background: radial-gradient(circle, var(--shadow-white) 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: var(--shadow-white);
border: 2px solid var(--shadow-white);
transition: all 0.3s ease;
}
.carousel-indicators .active {
background: var(--white);
transform: scale(1.2);
}
.carousel-control-prev,
.carousel-control-next {
width: 60px;
height: 60px;
background: var(--shadow-white);
border-radius: 50%;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid var(--shadow-white);
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: var(--shadow-white);
transform: translateY(-50%) scale(1.1);
}
/* Section Styles */
section {
padding: 6rem 0;
position: relative;
}
section:nth-child(even) {
background: linear-gradient(135deg, var(--gray-100) 0%, var(--white) 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%, var(--shadow-primary-nano) 0%, transparent 70%),
radial-gradient(circle at 80% 20%, var(--shadow-primary-nano) 0%, transparent 70%),
var(--svg-about-pattern);
}
#about::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--svg-about-scales);
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 var(--shadow-black),
0 10px 20px var(--shadow-black),
0 0 0 1px var(--shadow-white);
filter: drop-shadow(0 8px 16px var(--shadow-black));
}
/* Services Section */
#services {
position: relative;
background:
radial-gradient(circle at 30% 70%, var(--shadow-primary-micro) 0%, transparent 80%),
radial-gradient(circle at 70% 30%, var(--shadow-primary-micro) 0%, transparent 80%),
var(--svg-services-pattern);
}
#services::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--svg-services-scales);
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: var(--white) !important;
}
.card:hover .service-icon {
transform: scale(1.1);
}
/* Modern Card Styles */
.card {
border: none;
border-radius: 0;
box-shadow: 0 4px 20px var(--shadow-black-light);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
background: var(--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 !important;
box-shadow: none !important;
}
.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 img {
transform: scale(1.05);
}
/* Prevent tag badges from scaling on card hover */
.card:hover .tag-badge,
.card:hover .tag-badge-text,
.card:hover .badge {
transform: none !important;
}
/* Contact Section */
#contact {
position: relative;
background:
radial-gradient(circle at 25% 75%, var(--shadow-primary-nano) 0%, transparent 80%),
radial-gradient(circle at 75% 25%, var(--shadow-primary-nano) 0%, transparent 80%),
var(--svg-contact-pattern);
}
#contact::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--svg-contact-scales);
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: var(--white);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 2px 4px var(--shadow-black-ultra-light);
letter-spacing: 0.02em;
}
.form-control:focus, .form-select:focus {
border-color: var(--primary-color);
box-shadow: 0 0 0 0.25rem var(--shadow-primary-light);
background-color: var(--white);
outline: none;
}
.form-control:hover, .form-select:hover {
border-color: var(--primary-light);
box-shadow: 0 4px 8px var(--shadow-black-very-light);
}
.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%, var(--shadow-primary-ultra-light) 0%, transparent 70%),
radial-gradient(circle at 60% 40%, var(--shadow-primary-ultra-light) 0%, transparent 70%),
var(--svg-customers-pattern);
}
#customers::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--svg-customers-scales);
opacity: 0.4;
z-index: 1;
}
#customers .container {
position: relative;
z-index: 2;
}
.stat-item {
background: var(--white);
border-radius: var(--border-radius);
padding: 2rem 1.5rem;
text-align: center;
box-shadow: 0 4px 15px var(--shadow-black-light);
border: 1px solid var(--border-primary);
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 var(--shadow-black);
}
.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: var(--white) !important;
}
#statistics .container {
position: relative;
}
/* Customer Testimonials Slider */
#customerSlider {
margin-bottom: 4rem;
}
.testimonial-card {
background: var(--white);
border-radius: var(--border-radius-lg);
padding: 3rem 2rem;
box-shadow: 0 10px 30px var(--shadow-black-very-light);
border: 1px solid var(--border-primary);
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: var(--white);
font-family: var(--font-secondary);
font-weight: 700;
font-size: 1.5rem;
text-transform: uppercase;
letter-spacing: 1px;
box-shadow: 0 4px 15px var(--shadow-primary);
}
.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 var(--white);
box-shadow: 0 4px 15px var(--shadow-black);
}
#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%, var(--shadow-primary-ultra-light) 0%, transparent 70%),
radial-gradient(circle at 80% 20%, var(--shadow-primary-ultra-light) 0%, transparent 70%),
var(--svg-faq-pattern);
}
#faq::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--svg-faq-scales);
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: var(--gray-100);
color: var(--dark-color);
transition: none !important;
}
.accordion-button:hover {
background-color: var(--gray-100) !important;
color: var(--dark-color) !important;
transform: none !important;
box-shadow: none !important;
}
.accordion-button:not(.collapsed) {
background-color: var(--primary-color);
color: var(--white);
box-shadow: none;
transition: none !important;
}
.accordion-button:not(.collapsed):hover {
background-color: var(--primary-color) !important;
color: var(--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 var(--border-gray);
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 var(--shadow-black),
0 10px 20px var(--shadow-black),
0 0 0 1px var(--shadow-white);
filter: drop-shadow(0 8px 16px var(--shadow-black));
}
/* FAQ Section Mobile Responsive */
@media (max-width: 768px) {
#faq .container {
padding-left: 10px;
padding-right: 10px;
}
#faq .row {
margin-left: -5px;
margin-right: -5px;
}
#faq .col-lg-7,
#faq .col-lg-5 {
padding-left: 5px;
padding-right: 5px;
}
.accordion-item {
margin-bottom: 10px;
}
.accordion-button {
font-size: 1rem;
padding: 15px 20px;
}
.accordion-body {
font-size: 0.95rem;
line-height: 1.6;
padding: 20px;
}
.faq-image-mobile img {
height: 250px;
border-radius: 0;
}
}
@media (max-width: 576px) {
#faq .container {
padding-left: 5px;
padding-right: 5px;
}
#faq .row {
margin-left: -2px;
margin-right: -2px;
}
#faq .col-lg-7,
#faq .col-lg-5 {
padding-left: 2px;
padding-right: 2px;
}
.accordion-button {
font-size: 1.1rem;
padding: 18px 15px;
}
.accordion-body {
font-size: 1rem;
line-height: 1.7;
padding: 15px;
}
.faq-image-mobile img {
height: 200px;
border-radius: 0;
}
}
/* Banks Section Mobile Responsive */
@media (max-width: 768px) {
article .card-body {
padding-left: 5px;
padding-right: 5px;
}
article .card-body .row {
margin-left: -3px;
margin-right: -3px;
}
article .card-body .col-lg-6 {
padding-left: 3px;
padding-right: 3px;
margin-bottom: 15px;
}
article .card {
margin-left: 0;
margin-right: 0;
}
.bank-icon i {
font-size: 1.5rem !important;
}
article .card-body h4 {
font-size: 1.3rem;
}
article .card-body p {
font-size: 0.9rem;
}
.banks-image-mobile img {
height: 200px;
border-radius: 0;
}
/* Bank header section padding */
article .card-body .d-flex.align-items-center.justify-content-between.mb-3 {
padding-left: 15px;
padding-right: 15px;
}
}
@media (max-width: 576px) {
article .card-body {
padding-left: 2px;
padding-right: 2px;
}
article .card-body .row {
margin-left: -1px;
margin-right: -1px;
}
article .card-body .col-lg-6 {
padding-left: 1px;
padding-right: 1px;
margin-bottom: 10px;
}
article .card {
margin-left: 0;
margin-right: 0;
}
.bank-icon i {
font-size: 1.3rem !important;
}
article .card-body h4 {
font-size: 1.4rem;
}
article .card-body p {
font-size: 1rem;
}
.banks-image-mobile img {
height: 180px;
border-radius: 0;
}
article .card-body .row .col-4 {
font-size: 0.9rem;
}
article .card-body .row .col-8 {
font-size: 0.9rem;
}
article .card-body code {
font-size: 0.8rem;
word-break: break-all;
}
/* Bank header section padding - mobile */
article .card-body .d-flex.align-items-center.justify-content-between.mb-3 {
padding-left: 20px;
padding-right: 20px;
}
}
/* Blog Section */
#blog {
position: relative;
background:
radial-gradient(circle at 30% 70%, var(--shadow-primary-ultra-light) 0%, transparent 70%),
radial-gradient(circle at 70% 30%, var(--shadow-primary-ultra-light) 0%, transparent 70%),
var(--svg-blog-pattern);
}
#blog::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--svg-blog-scales);
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 {
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: var(--text-white-semi) !important;
}
footer .text-success:hover {
color: var(--primary-color) !important;
transition: color 0.3s ease;
}
/* İletişim bölümü WhatsApp rengi - ikon primary, metin text-muted */
/* İ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, var(--shadow-white-medium), transparent);
transition: left 0.5s;
}
.btn:hover::before {
left: 100%;
}
.btn-primary {
background: var(--gradient-primary);
color: var(--white);
box-shadow: 0 4px 15px var(--shadow-primary);
}
.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 var(--shadow-primary-medium);
color: var(--white);
}
.btn-outline-primary {
background: var(--transparent);
color: var(--primary-color);
border: 2px solid var(--primary-color);
}
.btn-outline-primary:hover {
background: var(--gradient-primary);
color: var(--white);
transform: translateY(-3px);
box-shadow: 0 8px 25px var(--shadow-primary-medium);
border-color: var(--transparent);
}
.btn-outline-light {
background: var(--transparent);
color: var(--white);
border: 2px solid var(--shadow-white);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.btn-outline-light:hover {
background: var(--shadow-white);
color: var(--white);
transform: translateY(-3px);
box-shadow: 0 8px 25px var(--shadow-white-medium);
border-color: var(--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):not(.maintenance-page) {
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: var(--shadow-white);
border: 2px solid var(--shadow-white);
box-shadow: 0 4px 15px var(--shadow-black-medium);
}
.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: var(--bg-white-medium);
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 var(--shadow-black);
text-decoration: none;
}
.social-btn {
color: var(--primary-color);
border-color: var(--primary-color);
background: var(--transparent);
}
.social-btn:hover {
background: var(--primary-color);
color: var(--white);
transform: translateY(-2px);
box-shadow: var(--shadow-primary);
}
/* WhatsApp sosyal medya butonu */
.social-btn.whatsapp {
color: var(--whatsapp-color);
border-color: var(--whatsapp-color);
}
.social-btn.whatsapp:hover {
background: var(--whatsapp-color);
color: var(--white);
transform: translateY(-2px);
box-shadow: 0 4px 12px var(--shadow-whatsapp);
}
/* Loading Animation */
.loading {
display: inline-block;
width: 20px;
height: 20px;
border: 3px solid var(--gray-200);
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: var(--bg-light);
}
::-webkit-scrollbar-thumb {
background: var(--primary-color);
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--back-to-top);
}
/* 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 var(--shadow-black);
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: var(--phone-color);
color: var(--white);
border: 1px solid var(--shadow-white);
font-size: 1.8rem;
}
.whatsapp-btn:hover {
background: var(--phone-hover);
color: var(--white);
box-shadow: 0 8px 30px var(--shadow-phone-medium);
}
/* Phone Button */
.phone-btn {
background: var(--back-to-top);
color: var(--white);
border: 1px solid var(--shadow-white);
}
.phone-btn:hover {
background: var(--back-to-top-hover);
color: var(--white);
box-shadow: 0 8px 30px var(--shadow-blue-medium);
}
/* Back to Top Button */
.back-to-top-btn {
background: var(--primary-color);
color: var(--white);
border: 1px solid var(--shadow-white);
display: none;
}
.back-to-top-btn:hover {
background: var(--primary-dark);
color: var(--white);
box-shadow: 0 8px 30px var(--shadow-primary-medium);
}
.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;
bottom: 15px !important;
}
}
/* 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: var(--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: var(--white);
border-color: var(--border-light);
background: var(--transparent);
}
footer .social-btn:hover {
background: var(--primary-color) !important;
color: var(--white) !important;
border-color: var(--primary-color) !important;
transform: translateY(-2px) !important;
box-shadow: 0 4px 12px var(--shadow-primary) !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 var(--shadow-black);
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: var(--whatsapp-color);
color: var(--white);
border: none;
}
.whatsapp-btn:hover {
background: var(--whatsapp-dark);
color: var(--white);
transform: translateY(-2px);
box-shadow: 0 6px 20px var(--shadow-whatsapp-medium);
}
.phone-btn {
background: var(--primary-color);
color: var(--white);
border: none;
}
.phone-btn:hover {
background: var(--primary-dark);
color: var(--white);
transform: translateY(-2px);
box-shadow: 0 6px 20px var(--shadow-primary-medium);
}
/* Sabit butonlar hover animasyonu */
.fixed-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, var(--shadow-white-medium), 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, var(--white) 0%, var(--gray-100) 50%, var(--white) 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 var(--primary-color);
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: var(--primary-light);
animation-delay: -0.4s;
animation-duration: 1.8s;
}
.spinner-ring:nth-child(3) {
width: 60%;
height: 60%;
top: 20%;
left: 20%;
border-top-color: var(--shadow-primary-light);
animation-delay: -0.8s;
animation-duration: 2.4s;
}
.preloader-text {
color: var(--primary-color);
font-size: 16px;
font-weight: 600;
margin-bottom: 10px;
animation: textPulse 2s ease-in-out infinite;
}
.preloader-subtitle {
color: var(--secondary-color);
font-size: 14px;
font-weight: 400;
}
.loading-dots {
display: inline-flex;
gap: 3px;
}
.loading-dots span {
width: 6px;
height: 6px;
background-color: var(--primary-color);
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: var(--white);
border-radius: 20px;
padding: 40px 30px;
box-shadow: 0 10px 30px var(--shadow-black-very-light);
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 var(--shadow-primary-light);
}
.author-avatar {
width: 80px;
height: 80px;
border-radius: 50%;
background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
color: var(--white);
font-weight: 600;
font-size: 24px;
box-shadow: 0 5px 15px var(--shadow-primary);
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: var(--text-dark);
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: var(--primary-color);
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 var(--shadow-primary-medium-light);
}
/* 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: var(--white);
border: 2px solid var(--primary-color);
border-radius: 50%;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
color: var(--primary-color);
font-size: 18px;
cursor: pointer;
transition: all 0.3s ease;
z-index: 5;
}
.testimonial-nav:hover {
background: var(--primary-color);
color: var(--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: var(--gray-400);
border: none;
cursor: pointer;
transition: all 0.3s ease;
}
.testimonial-indicators .indicator.active {
background: var(--primary-color);
transform: scale(1.2);
}
.testimonial-indicators .indicator:hover {
background: var(--primary-color);
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: var(--gray-100) !important;
transform: translateX(5px);
}
.list-group-item a:hover {
color: var(--primary-color) !important;
text-decoration: none !important;
}
.list-group-item:hover h6 {
color: var(--primary-color) !important;
}
/* Etiket hover efektleri */
.sidebar .badge {
transition: all 0.3s ease;
cursor: pointer;
}
.sidebar .badge:hover {
background-color: var(--primary-color) !important;
color: var(--white) !important;
transform: translateY(-2px);
box-shadow: 0 4px 8px var(--shadow-primary);
}
/* ===============================================
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 var(--shadow-black-very-light);
}
/* 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: var(--primary-color) !important;
background: var(--shadow-primary-very-light);
transform: translateX(4px);
border-radius: 4px;
transition: all 0.15s ease;
}
.dropdown-item:hover i {
color: var(--primary-color) !important;
}
/* Mobile menu hover efektleri */
.mobile-nav .nav-link {
transition: all 0.1s ease;
}
.mobile-nav .nav-link:hover {
color: var(--primary-color) !important;
background-color: var(--gray-100);
transform: translateX(5px);
}
.mobile-nav .nav-link:hover i {
color: var(--primary-color) !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: var(--secondary-color) !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 var(--shadow-black-very-light);
}
.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: var(--gradient-admin);
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 var(--shadow-black-very-light);
}
.admin-login-body .form-control:focus {
border-color: var(--primary-color);
box-shadow: 0 0 0 0.2rem var(--shadow-primary-focus);
}
.admin-login-body .btn-primary {
background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
border: none;
transition: all 0.3s ease;
}
.admin-login-body .btn-primary:hover {
background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-color) 100%);
transform: translateY(-2px);
box-shadow: 0 4px 15px var(--shadow-primary);
}
.admin-login-body .btn-outline-secondary {
border-color: var(--gray-300);
color: var(--secondary-color);
}
.admin-login-body .btn-outline-secondary:hover {
background-color: var(--gray-100);
border-color: var(--primary-color);
color: var(--primary-color);
}
.admin-login-body .alert {
border: none;
border-radius: 0;
}
.admin-login-body .form-check-input:checked {
background-color: var(--primary-color);
border-color: var(--primary-color);
}
.admin-login-body .form-check-input:focus {
box-shadow: 0 0 0 0.2rem var(--shadow-primary-focus);
}
/* 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, var(--bg-primary-very-light) 0%, var(--bg-primary-light) 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: var(--warning-color);
background: linear-gradient(135deg, var(--bg-warning-very-light) 0%, var(--bg-warning-light) 100%);
}
blockquote.warning::before,
blockquote.warning::after {
color: var(--warning-color);
}
blockquote.success {
border-left-color: var(--success-color);
background: linear-gradient(135deg, var(--bg-success-very-light) 0%, var(--bg-success-light) 100%);
}
blockquote.success::before,
blockquote.success::after {
color: var(--success-color);
}
blockquote.danger {
border-left-color: var(--danger-color);
background: linear-gradient(135deg, var(--bg-danger-very-light) 0%, var(--bg-danger-light) 100%);
}
blockquote.danger::before,
blockquote.danger::after {
color: var(--danger-color);
}
/* 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 var(--shadow-black-very-light);
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 var(--shadow-black-very-light);
}
/* 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: var(--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: var(--white) !important;
transform: translateY(-2px) !important;
box-shadow: 0 4px 12px var(--shadow-primary) !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 var(--shadow-primary-light);
transition: all 0.3s ease;
border: 1px solid var(--border-primary);
}
.image-container img:hover {
transform: scale(1.01);
box-shadow: 0 4px 16px var(--shadow-primary);
border-color: var(--shadow-primary-light);
}
.image-caption {
font-family: var(--font-body);
font-style: italic;
color: var(--primary-color) !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: var(--primary-color) !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 var(--shadow-primary-very-light);
}
}
@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;
}
}
.bg-light {
background-color: var(--white) !important;
}
/* Ana sayfa dışındaki section'lar için beyaz arka plan */
section {
background-color: var(--white) !important;
}
section.bg-white {
background-color: var(--white) !important;
}
section.py-5 {
background-color: var(--white) !important;
}
/* nth-child(even) kuralını geçersiz kıl */
section:nth-child(even) {
background: var(--white) !important;
}
section:nth-child(odd) {
background: var(--white) !important;
}
/* Search Page Styles */
/* Search Badge Responsive Styles */
.search-badge {
font-size: 0.7rem !important;
padding: 0.4rem 0.6rem !important;
white-space: nowrap !important;
max-width: 100% !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.search-badge-text {
font-size: 0.65rem !important;
font-weight: 600 !important;
}
/* Mobile specific adjustments */
@media (max-width: 576px) {
.search-badge {
font-size: 0.6rem !important;
padding: 0.3rem 0.5rem !important;
max-width: 80px !important;
}
.search-badge-text {
font-size: 0.55rem !important;
}
.search-badge i {
font-size: 0.5rem !important;
margin-right: 0.2rem !important;
}
}
/* Extra small screens */
@media (max-width: 480px) {
.search-badge {
font-size: 0.55rem !important;
padding: 0.25rem 0.4rem !important;
max-width: 70px !important;
}
.search-badge-text {
font-size: 0.5rem !important;
}
.search-badge i {
font-size: 0.45rem !important;
margin-right: 0.15rem !important;
}
}
/* Very small screens */
@media (max-width: 360px) {
.search-badge {
font-size: 0.5rem !important;
padding: 0.2rem 0.3rem !important;
max-width: 60px !important;
}
.search-badge-text {
font-size: 0.45rem !important;
}
.search-badge i {
font-size: 0.4rem !important;
margin-right: 0.1rem !important;
}
}
/* Footer Cookie Notification Styles */
.cookie-notification {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
color: var(--white);
padding: 1.5rem 0;
box-shadow: 0 -4px 20px var(--shadow-black);
z-index: 9999;
transform: translateY(100%);
transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
border-top: 3px solid var(--border-light);
}
.cookie-notification.show {
transform: translateY(0);
}
.cookie-notification-content {
max-width: 1200px;
margin: 0 auto;
padding: 0 1.5rem;
display: flex;
align-items: center;
gap: 1.5rem;
}
.cookie-notification-icon {
font-size: 2rem;
color: var(--text-white);
flex-shrink: 0;
}
.cookie-notification-text {
flex: 1;
}
.cookie-notification-title {
font-family: var(--font-secondary);
font-weight: 600;
font-size: 1.1rem;
margin-bottom: 0.5rem;
color: var(--white);
}
.cookie-notification-message {
font-family: var(--font-primary);
font-size: 0.95rem;
line-height: 1.5;
margin-bottom: 0;
color: var(--text-white);
}
.cookie-notification-actions {
display: flex;
align-items: center;
gap: 1rem;
flex-shrink: 0;
}
.cookie-notification-link {
color: var(--text-white);
text-decoration: none;
font-family: var(--font-primary);
font-size: 0.9rem;
padding: 0.75rem 1.5rem;
border: 1px solid var(--border-light);
border-radius: 0;
transition: all 0.3s ease;
display: flex;
align-items: center;
min-width: 140px;
justify-content: center;
}
.cookie-notification-link:hover {
background: var(--shadow-white);
color: var(--white);
border-color: var(--shadow-white-medium);
}
.cookie-notification-btn {
background: var(--white);
color: var(--primary-color);
border: none;
padding: 0.75rem 1.5rem;
border-radius: 0;
font-family: var(--font-primary);
font-weight: 600;
font-size: 0.9rem;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
text-transform: uppercase;
letter-spacing: 0.5px;
min-width: 140px;
justify-content: center;
}
.cookie-notification-btn:hover {
background: var(--bg-white-medium);
transform: translateY(-1px);
box-shadow: 0 4px 12px var(--shadow-black);
}
@media (max-width: 768px) {
.cookie-notification-content {
flex-direction: column;
text-align: center;
gap: 1rem;
padding: 0 1rem;
}
.cookie-notification-actions {
flex-direction: column;
width: 100%;
gap: 0.75rem;
position: relative;
}
.cookie-notification-link,
.cookie-notification-btn {
width: 100%;
justify-content: center;
}
.cookie-notification-close {
position: absolute;
top: 1rem;
right: 1rem;
width: 50px;
height: 50px;
min-width: 50px;
}
.cookie-notification-icon {
font-size: 1.5rem;
}
}
@media (max-width: 576px) {
.cookie-notification {
padding: 1rem 0;
}
.cookie-notification-title {
font-size: 1rem;
}
.cookie-notification-message {
font-size: 0.9rem;
}
}
/* Sidebar Styles */
.list-group-item a {
transition: all 0.3s ease;
}
.list-group-item:hover {
background-color: var(--gray-100) !important;
transform: translateX(5px);
}
.list-group-item a:hover {
color: var(--primary-color) !important;
text-decoration: none !important;
}
.list-group-item:hover h6 {
color: var(--primary-color) !important;
}
/* Etiket hover efektleri */
.sidebar .badge {
transition: all 0.3s ease;
cursor: pointer;
}
.sidebar .badge:hover {
background-color: var(--primary-color) !important;
color: var(--white) !important;
transform: translateY(-2px);
box-shadow: 0 4px 8px var(--shadow-primary);
}
/* Mobilde sidebar ikon hizalama */
@media (max-width: 768px) {
.sidebar .list-group-item a i {
width: 20px !important;
text-align: center !important;
margin-right: 0.75rem !important;
display: inline-block !important;
}
.sidebar .card-header i {
width: 20px !important;
text-align: center !important;
margin-right: 0.5rem !important;
display: inline-block !important;
}
.sidebar .contact-item i {
width: 20px !important;
text-align: center !important;
margin-right: 0.75rem !important;
display: inline-block !important;
}
}
/* Services Section Styles */
#servicesCarousel {
position: relative;
overflow: hidden;
}
#servicesCarousel .carousel-indicators {
bottom: -50px;
margin-bottom: 0;
}
#servicesCarousel .carousel-indicators button {
width: 12px;
height: 12px;
border-radius: 50%;
background-color: var(--primary-color);
border: 2px solid var(--primary-color);
margin: 0 5px;
opacity: 0.5;
transition: all 0.3s ease;
}
#servicesCarousel .carousel-indicators button.active {
opacity: 1;
transform: scale(1.2);
}
#servicesCarousel .carousel-control-prev,
#servicesCarousel .carousel-control-next {
width: 50px;
height: 50px;
background-color: var(--primary-color);
border-radius: 50%;
top: 50%;
transform: translateY(-50%);
opacity: 1;
transition: all 0.3s ease;
z-index: 10;
box-shadow: none !important;
border: none !important;
}
#servicesCarousel .carousel-control-prev {
left: 15px;
}
#servicesCarousel .carousel-control-next {
right: 15px;
}
#servicesCarousel .carousel-control-prev:hover,
#servicesCarousel .carousel-control-next:hover {
opacity: 1;
transform: translateY(-50%) scale(1.1);
box-shadow: none !important;
border: none !important;
}
#servicesCarousel .service-card {
border-radius: 15px;
overflow: hidden;
box-shadow: 0 4px 20px var(--shadow-black-light);
transition: all 0.3s ease;
background: var(--white);
border: none;
}
#servicesCarousel .service-card:hover {
transform: none !important;
box-shadow: 0 4px 20px var(--shadow-black-light);
}
#servicesCarousel .service-card .card-title {
font-family: var(--font-secondary);
font-size: 1.4rem;
font-weight: 600;
color: var(--gray-800);
margin-bottom: 1rem;
text-align: center;
line-height: 1.3;
}
#servicesCarousel .service-card .card-text {
font-family: var(--font-body);
color: var(--gray-600);
line-height: 1.6;
margin-bottom: 1.5rem;
font-size: 1rem;
text-align: center;
}
#servicesCarousel .service-card .btn-primary {
background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
border: none;
border-radius: 8px;
padding: 15px 28px;
font-weight: 500;
font-size: 0.95rem;
transition: all 0.3s ease;
box-shadow: 0 4px 15px var(--shadow-primary);
min-height: 50px;
}
#servicesCarousel .service-card .btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px var(--shadow-primary);
background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-darker) 100%);
}
/* Services Page Cards (Non-homepage) */
#services .card {
border-radius: 15px;
overflow: hidden;
box-shadow: 0 4px 20px var(--shadow-black-light);
transition: all 0.3s ease;
background: var(--white);
border: none;
}
#services .card:hover {
transform: none !important;
box-shadow: 0 4px 20px var(--shadow-black-light);
}
#services .card .card-title {
font-family: var(--font-secondary);
font-size: 1.4rem;
font-weight: 600;
color: var(--gray-800);
margin-bottom: 1rem;
text-align: center;
line-height: 1.3;
}
#services .card .card-text {
font-family: var(--font-body);
color: var(--gray-600);
line-height: 1.6;
margin-bottom: 1.5rem;
font-size: 1rem;
text-align: center;
}
#services .card .btn-primary {
background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
border: none;
border-radius: 8px;
padding: 15px 28px;
font-weight: 500;
font-size: 0.95rem;
transition: all 0.3s ease;
box-shadow: 0 4px 15px var(--shadow-primary);
min-height: 50px;
}
#services .card .btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px var(--shadow-primary);
background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-darker) 100%);
}
/* Mobile Responsive - Services Cards */
@media (max-width: 768px) {
#services .container {
padding-left: 10px;
padding-right: 10px;
}
#services .row {
margin-left: -5px;
margin-right: -5px;
}
#services .col-lg-4,
#services .col-md-6 {
padding-left: 5px;
padding-right: 5px;
margin-bottom: 20px;
}
#services .card {
margin-left: 0;
margin-right: 0;
}
#services .card .card-text {
font-size: 1.05rem;
line-height: 1.6;
}
#services .card .card-title {
font-size: 1.5rem;
}
}
@media (max-width: 576px) {
#services .container {
padding-left: 5px;
padding-right: 5px;
}
#services .row {
margin-left: -2px;
margin-right: -2px;
}
#services .col-lg-4,
#services .col-md-6 {
padding-left: 2px;
padding-right: 2px;
}
#services .card .card-text {
font-size: 1.1rem;
line-height: 1.7;
}
#services .card .card-title {
font-size: 1.6rem;
}
}
/* Services Image Zoom Effects - Sadece resim zoomu */
#servicesCarousel .service-card .card-img-top,
#services .service-card .card-img-top {
transition: transform 0.3s ease;
overflow: hidden;
}
#servicesCarousel .service-card .card-img-top img,
#services .service-card .card-img-top img {
transition: transform 0.3s ease;
}
#servicesCarousel .service-card:hover .card-img-top img,
#services .service-card:hover .card-img-top img {
transform: scale(1.05);
}
/* Responsive Düzenlemeler */
@media (max-width: 768px) {
#servicesCarousel .carousel-control-prev {
left: 5px;
}
#servicesCarousel .carousel-control-next {
right: 5px;
}
#servicesCarousel .carousel-control-prev,
#servicesCarousel .carousel-control-next {
width: 40px;
height: 40px;
opacity: 1 !important;
background-color: var(--primary-color) !important;
}
#servicesCarousel .row {
min-height: 450px !important;
display: flex !important;
align-items: stretch !important;
}
#servicesCarousel .service-card {
min-height: 450px !important;
height: 100% !important;
display: flex !important;
flex-direction: column !important;
}
#servicesCarousel .col-lg-4.col-md-6 {
min-height: 450px !important;
height: 450px !important;
display: flex !important;
}
#servicesCarousel .service-card .card-body {
flex: 1 !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
}
/* Mobilde sadece 1 post göster */
#servicesCarousel .col-lg-4.col-md-6 {
flex: 0 0 100% !important;
max-width: 100% !important;
width: 100% !important;
}
/* Mobilde sadece ilk post'u göster, diğerlerini gizle */
#servicesCarousel .col-lg-4.col-md-6:not(:first-child) {
display: none !important;
}
}
@media (max-width: 576px) {
/* Küçük ekranlarda da 1 post */
#servicesCarousel .col-lg-4.col-md-6 {
flex: 0 0 100% !important;
max-width: 100% !important;
width: 100% !important;
min-height: 450px !important;
}
/* Küçük ekranlarda sadece ilk post'u göster, diğerlerini gizle */
#servicesCarousel .col-lg-4.col-md-6:not(:first-child) {
display: none !important;
}
/* Küçük ekranlarda da eşit yükseklik */
#servicesCarousel .row {
min-height: 450px !important;
display: flex !important;
align-items: stretch !important;
}
#servicesCarousel .service-card {
min-height: 450px !important;
height: 100% !important;
display: flex !important;
flex-direction: column !important;
}
#servicesCarousel .service-card .card-body {
flex: 1 !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
}
/* Küçük ekranlarda da butonları net yap */
#servicesCarousel .carousel-control-prev,
#servicesCarousel .carousel-control-next {
opacity: 1 !important;
background-color: var(--primary-color) !important;
}
}
/* Carousel Slide Geçişi - Normal slide geçişi, kart animasyonu yok */
#servicesCarousel .carousel-item {
transition: transform 0.6s ease-in-out !important;
}
#servicesCarousel .carousel-item.active {
transition: transform 0.6s ease-in-out !important;
}
#servicesCarousel .carousel-item.active .service-card {
animation: none !important;
opacity: 1 !important;
transform: none !important;
}
#servicesCarousel .carousel-item:not(.active) .service-card {
animation: none !important;
opacity: 1 !important;
transform: none !important;
}
/* Carousel inner normal geçiş */
#servicesCarousel .carousel-inner {
transition: transform 0.6s ease-in-out !important;
}
/* Customers Section Styles */
.testimonials-container {
position: relative;
}
.testimonial-card {
transition: filter 0.3s ease;
}
/* Hareket sırasında ortadaki elemanı blur yap */
.testimonials-container.moving .testimonial-center .testimonial-card {
filter: blur(2px);
opacity: 0.7;
}
/* Sol ve sağ elemanları normal bırak */
.testimonials-container.moving .testimonial-side .testimonial-card {
filter: none;
opacity: 1;
}
/* Mobilde tamamen farklı düzen */
@media (max-width: 768px) {
.testimonials-container .d-flex {
flex-direction: column !important;
gap: 1rem !important;
}
.testimonial-side,
.testimonial-center {
width: 100% !important;
max-width: 100% !important;
}
.testimonial-card {
padding: 0.5rem 0.75rem !important;
margin: 0.25rem 0 !important;
height: auto !important;
}
.testimonial-card .author-avatar {
margin: 0.5rem auto !important;
text-align: center !important;
display: block !important;
width: 80px !important;
height: 80px !important;
overflow: hidden !important;
}
.testimonial-card .author-avatar .initials {
display: flex !important;
justify-content: center !important;
align-items: center !important;
width: 80px !important;
height: 80px !important;
border-radius: 50% !important;
margin: 0 !important;
overflow: hidden !important;
font-size: 1.2rem !important;
}
.testimonial-card .stars {
margin-top: 0.5rem !important;
margin-bottom: 0.75rem !important;
}
.testimonial-card .testimonial-text {
font-size: 0.9rem !important;
margin: 0.5rem 0 !important;
}
.testimonial-card .author-info {
margin: 0.5rem 0 0 0 !important;
text-align: center !important;
}
.testimonial-card .author-name {
font-size: 0.9rem !important;
margin: 0 !important;
}
.testimonial-card .author-title {
font-size: 0.8rem !important;
margin: 0 !important;
}
}
/* Gallery Section Styles */
.gallery-section {
background: var(--white);
}
/* Gallery Section Card Styles */
.gallery-section .card {
border: none;
border-radius: 0;
box-shadow: 0 4px 20px var(--shadow-black-light);
transition: all 0.3s ease;
background: var(--white);
overflow: hidden;
position: relative;
}
.gallery-section .card:hover {
transform: none !important;
box-shadow: 0 4px 20px var(--shadow-black-light);
}
.gallery-section .card-title {
font-family: var(--font-secondary);
font-size: 1.2rem;
font-weight: 600;
color: var(--gray-800);
margin-bottom: 0.75rem;
text-align: center;
line-height: 1.3;
}
.gallery-section .card-text {
font-family: var(--font-body);
color: var(--gray-600);
line-height: 1.5;
margin-bottom: 0;
font-size: 0.9rem;
text-align: center;
}
/* Gallery Item Styles */
.gallery-item {
position: relative;
overflow: hidden;
border-radius: 0;
}
.gallery-item img {
transition: transform 0.3s ease;
width: 100%;
height: 250px;
object-fit: cover;
}
.gallery-item:hover img {
transform: scale(1.05);
}
.gallery-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(41, 128, 185, 0.8);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
z-index: 1;
}
.gallery-item:hover .gallery-overlay {
opacity: 1 !important;
}
.gallery-overlay i {
color: var(--white);
font-size: 2rem;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
/* Video Thumbnail Styles */
.video-thumbnail {
position: relative;
height: 250px;
background-size: cover;
background-position: center;
cursor: pointer;
transition: transform 0.3s ease;
border-radius: 0;
}
.video-thumbnail:hover {
transform: scale(1.05);
}
.play-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.3);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.play-overlay i {
color: var(--white);
font-size: 4rem;
text-shadow: 0 2px 4px var(--bg-overlay-dark);
transition: transform 0.3s ease;
}
.video-thumbnail:hover .play-overlay {
background: var(--bg-overlay-dark);
}
.video-thumbnail:hover .play-overlay i {
transform: scale(1.1);
}
/* Mobile Responsive - Gallery Cards */
@media (max-width: 768px) {
.gallery-section .container {
padding-left: 10px;
padding-right: 10px;
}
.gallery-section .row {
margin-left: -5px;
margin-right: -5px;
}
.gallery-section .col-lg-4,
.gallery-section .col-md-6 {
padding-left: 5px;
padding-right: 5px;
margin-bottom: 20px;
}
.gallery-section .card {
margin-left: 0;
margin-right: 0;
}
.gallery-section .card .card-text {
font-size: 0.95rem;
line-height: 1.5;
}
.gallery-section .card .card-title {
font-size: 1.3rem;
}
.gallery-item img,
.video-thumbnail {
height: 200px;
}
.play-overlay i {
font-size: 3rem;
}
.gallery-overlay i {
font-size: 1.5rem;
}
}
@media (max-width: 576px) {
.gallery-section .container {
padding-left: 5px;
padding-right: 5px;
}
.gallery-section .row {
margin-left: -2px;
margin-right: -2px;
}
.gallery-section .col-lg-4,
.gallery-section .col-md-6 {
padding-left: 2px;
padding-right: 2px;
}
.gallery-section .card {
margin-left: 0;
margin-right: 0;
}
.gallery-section .card .card-text {
font-size: 1rem;
line-height: 1.6;
}
.gallery-section .card .card-title {
font-size: 1.4rem;
}
.gallery-item img,
.video-thumbnail {
height: 180px;
}
.play-overlay i {
font-size: 2.5rem;
}
.gallery-overlay i {
font-size: 1.2rem;
}
}
/* Card hover effects - Devre Dışı */
.card:hover {
transform: none !important;
transition: none !important;
}
.gallery-item:hover .gallery-overlay {
opacity: 1 !important;
}
.gallery-item:hover img {
transform: scale(1.05);
}
.gallery-item a {
display: block;
text-decoration: none;
position: relative;
z-index: 2;
}
.gallery-overlay {
pointer-events: none;
z-index: 1;
}
/* Card title styling */
.card-title {
font-family: var(--font-heading);
font-size: 1.1rem;
font-weight: 600;
color: var(--gray-800);
margin-bottom: 0.5rem;
line-height: 1.3;
}
/* Card text styling */
.card-text {
color: var(--gray-600);
font-size: 0.85rem;
margin-bottom: 0;
line-height: 1.4;
}
/* Lightbox açıkken body scroll'u engelle */
body.lb-disable-scrolling,
html.lb-disable-scrolling {
overflow: hidden !important;
position: fixed !important;
width: 100% !important;
height: 100% !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
}
/* Tüm elementlerin scroll'unu engelle */
body.lb-disable-scrolling * {
overflow: hidden !important;
}
/* Lightbox overlay z-index'i artır */
.lb-overlay {
z-index: 9999 !important;
}
.lb-dataContainer {
z-index: 10000 !important;
}
/* Video thumbnail styles */
.video-thumbnail {
cursor: pointer;
transition: transform 0.3s ease;
}
.video-thumbnail:hover {
transform: scale(1.05);
}
/* Contact Section Styles */
.contact-link {
transition: color 0.3s ease;
}
.contact-link:hover {
color: var(--primary-color) !important;
}
/* Contact Section - Disable Card Hover Effects */
#contact .card:hover,
#contact .card:hover::before,
#contact .card:hover::after {
transform: none !important;
transition: none !important;
border: none !important;
border-top: none !important;
border-bottom: none !important;
border-left: none !important;
border-right: none !important;
background: var(--white) !important;
background-color: var(--white) !important;
content: none !important;
}
#contact .card,
#contact .card-body {
transition: none !important;
border: none !important;
}
#contact .card:hover .card-body {
border-top: none !important;
background: var(--white) !important;
background-color: var(--white) !important;
}
/* Keep original shadow on hover and force white background */
#contact .card:hover {
background: var(--white) !important;
background-color: var(--white) !important;
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important; /* Bootstrap default shadow */
}
/* Ensure cards always have white background */
#contact .card {
background: var(--white) !important;
background-color: var(--white) !important;
}
/* Admin Dashboard Welcome Card - Desktop Top Spacing */
@media (min-width: 992px) {
.container-fluid.py-4 > .row:first-child {
margin-top: 2rem;
}
}
/* Contact Section Desktop Spacing */
@media (min-width: 992px) {
/* Contact Info Card - Desktop */
#contact .contact-info {
padding: 0px !important;
}
}
/* Contact Section Mobile Spacing */
@media (max-width: 991.98px) {
#contact .row > .col-lg-8 {
margin-bottom: 1.5rem;
}
#contact .contact-info {
position: static;
}
#contact .container {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
#contact .row {
margin-left: -0.25rem;
margin-right: -0.25rem;
}
#contact .col-lg-4,
#contact .col-lg-8 {
padding-left: 0.25rem;
padding-right: 0.25rem;
}
#contact .card-body {
padding: 1rem !important;
}
/* Contact Info Card - Increase Inner Content Width */
#contact .contact-info {
padding: 0px !important;
margin-top: 2.5rem !important;
margin-bottom: 1rem !important;
}
#contact .contact-info .card-body {
padding: 2rem !important;
}
#contact .contact-info .d-flex {
margin-bottom: 1rem !important;
}
#contact .contact-info .social-buttons {
margin-top: 1.5rem !important;
}
/* Google Map Section Mobile Spacing */
#contact .row.mt-5 {
margin-left: -0.25rem;
margin-right: -0.25rem;
margin-top: 1rem !important; /* Further reduce top spacing on mobile */
}
#contact .row.mt-5 .col-12 {
padding-left: 0.25rem;
padding-right: 0.25rem;
}
#contact .map-container iframe {
border-radius: 0 !important;
}
}
/* About Section Mobile Spacing */
@media (max-width: 991.98px) {
#about .container {
padding-left: 10px;
padding-right: 10px;
}
#about .row {
margin-left: -5px;
margin-right: -5px;
}
#about .col-lg-6 {
padding-left: 5px;
padding-right: 5px;
}
}
@media (max-width: 768px) {
#about .container {
padding-left: 5px;
padding-right: 5px;
}
#about .row {
margin-left: -3px;
margin-right: -3px;
}
#about .col-lg-6 {
padding-left: 3px;
padding-right: 3px;
}
}
@media (max-width: 576px) {
#about .container {
padding-left: 2px;
padding-right: 2px;
}
#about .row {
margin-left: -1px;
margin-right: -1px;
}
#about .col-lg-6 {
padding-left: 1px;
padding-right: 1px;
}
/* About section paragraflarının mobilde alt boşluğunu azalt */
#about .mb-5 {
margin-bottom: 2rem !important;
}
#about .mb-4 {
margin-bottom: 1rem !important;
}
}
/* Teams Section Mobile Spacing */
@media (max-width: 991.98px) {
#team .container {
padding-left: 10px;
padding-right: 10px;
}
#team .row {
margin-left: -5px;
margin-right: -5px;
}
#team .col-lg-4,
#team .col-md-6 {
padding-left: 5px;
padding-right: 5px;
}
}
@media (max-width: 768px) {
#team .container {
padding-left: 5px;
padding-right: 5px;
}
#team .row {
margin-left: -3px;
margin-right: -3px;
}
#team .col-lg-4,
#team .col-md-6 {
padding-left: 3px;
padding-right: 3px;
}
}
@media (max-width: 576px) {
#team .container {
padding-left: 2px;
padding-right: 2px;
}
#team .row {
margin-left: -1px;
margin-right: -1px;
}
#team .col-lg-4,
#team .col-md-6 {
padding-left: 1px;
padding-right: 1px;
}
}
/* Banks Section Mobile Spacing */
@media (max-width: 991.98px) {
article .container {
padding-left: 10px;
padding-right: 10px;
}
article .row {
margin-left: -5px;
margin-right: -5px;
}
article .col-lg-6 {
padding-left: 5px;
padding-right: 5px;
}
}
@media (max-width: 768px) {
article .container {
padding-left: 5px;
padding-right: 5px;
}
article .row {
margin-left: -3px;
margin-right: -3px;
}
article .col-lg-6 {
padding-left: 3px;
padding-right: 3px;
}
}
@media (max-width: 576px) {
article .container {
padding-left: 2px;
padding-right: 2px;
}
article .row {
margin-left: -1px;
margin-right: -1px;
}
article .col-lg-6 {
padding-left: 1px;
padding-right: 1px;
}
}
/* Blog Section Mobile Spacing */
@media (max-width: 991.98px) {
#blog .container {
padding-left: 40px;
padding-right: 40px;
}
#blog .row {
margin-left: -15px;
margin-right: -15px;
}
#blog .col-lg-4,
#blog .col-md-6 {
padding-left: 15px;
padding-right: 15px;
}
}
@media (max-width: 768px) {
#blog .container {
padding-left: 30px;
padding-right: 30px;
}
#blog .row {
margin-left: -10px;
margin-right: -10px;
}
#blog .col-lg-4,
#blog .col-md-6 {
padding-left: 10px;
padding-right: 10px;
}
}
@media (max-width: 576px) {
#blog .container {
padding-left: 20px;
padding-right: 20px;
}
#blog .row {
margin-left: -8px;
margin-right: -8px;
}
#blog .col-lg-4,
#blog .col-md-6 {
padding-left: 8px;
padding-right: 8px;
}
}
/* Services Section Mobile Spacing */
@media (max-width: 991.98px) {
#services .container {
padding-left: 40px;
padding-right: 40px;
}
#services .row {
margin-left: -15px;
margin-right: -15px;
}
#services .col-lg-4,
#services .col-md-6 {
padding-left: 15px;
padding-right: 15px;
}
}
@media (max-width: 768px) {
#services .container {
padding-left: 30px;
padding-right: 30px;
}
#services .row {
margin-left: -10px;
margin-right: -10px;
}
#services .col-lg-4,
#services .col-md-6 {
padding-left: 10px;
padding-right: 10px;
}
}
@media (max-width: 576px) {
#services .container {
padding-left: 20px;
padding-right: 20px;
}
#services .row {
margin-left: -8px;
margin-right: -8px;
}
#services .col-lg-4,
#services .col-md-6 {
padding-left: 8px;
padding-right: 8px;
}
}
/* Form input'larının otomatik yeşil olmasını engelle */
.form-control:valid,
.form-select:valid {
border-color: var(--gray-300) !important;
background-image: none !important;
}
/* Valid durumunda da feedback gösterme */
.form-control:valid ~ .valid-feedback,
.form-select:valid ~ .valid-feedback {
display: none !important;
}
/* Select arrow'unu gizle valid durumunda */
.form-select:valid {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m1 6 7 7 7-7'/%3e%3c/svg%3e") !important;
}
/* Invalid durumda kırmızı border */
.form-control.is-invalid,
.form-select.is-invalid {
border-color: var(--danger-color) !important;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 24 24'%3e%3ccircle cx='12' cy='12' r='10'/%3e%3cline x1='15' y1='9' x2='9' y2='15'/%3e%3cline x1='9' y1='9' x2='15' y2='15'/%3e%3c/svg%3e") !important;
}
/* Focus durumunda normal mavi border */
.form-control:focus,
.form-select:focus {
border-color: var(--form-focus-border) !important;
box-shadow: 0 0 0 0.25rem var(--form-focus-shadow) !important;
background-image: none !important;
}
/* Mesaj textarea minimum yükseklik */
#message {
min-height: 120px !important;
resize: vertical;
}
/* SweetAlert2 Custom Styles - IBAN ile aynı */
.swal2-popup-custom {
border-radius: 0.75rem !important;
box-shadow: 0 10px 30px var(--shadow-black) !important;
}
.swal2-toast {
border-radius: 0.5rem !important;
box-shadow: 0 4px 20px var(--shadow-black) !important;
}
/* Teams Section Styles */
.team-section {
background: var(--white);
}
/* Card hover effects - Devre Dışı */
.card:hover {
transform: none !important;
transition: none !important;
}
.team-photo {
margin-bottom: 0;
}
.photo-placeholder {
width: 120px;
height: 120px;
border-radius: 50%;
background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
position: relative;
box-shadow: 0 8px 25px var(--shadow-primary);
}
.photo-placeholder .initials {
font-size: 2.5rem;
font-weight: 600;
color: var(--white);
font-family: var(--font-secondary);
text-transform: uppercase;
letter-spacing: -0.03em;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
line-height: 1.1;
}
/* Team Member Social Buttons */
.team-section .social-buttons {
display: flex;
gap: 0.5rem;
justify-content: center;
margin-top: 1rem;
}
.team-section .social-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
text-decoration: none;
transition: all 0.3s ease;
border: 2px solid var(--primary-color);
font-size: 1rem;
color: var(--primary-color);
background: var(--white);
}
.team-section .social-btn:hover {
background: var(--primary-color);
color: var(--white);
transform: translateY(-2px);
box-shadow: 0 4px 12px var(--shadow-primary);
}
/* Team Member Title */
.team-section .member-title {
font-family: var(--font-secondary);
font-size: 1rem;
font-weight: 600;
color: var(--primary-color);
margin-bottom: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Team Section Card Styles */
.team-section .card {
border: none;
border-radius: 8px;
box-shadow: 0 4px 20px var(--shadow-black-light);
transition: all 0.3s ease;
background: var(--white);
overflow: hidden;
position: relative;
}
.team-section .card:hover {
transform: none !important;
box-shadow: 0 4px 20px var(--shadow-black-light);
}
.team-section .card-title {
font-family: var(--font-secondary);
font-size: 1.3rem;
font-weight: 600;
color: var(--gray-800);
margin-bottom: 0.5rem;
text-align: center;
}
.team-section .card-text {
font-family: var(--font-body);
color: var(--gray-600);
line-height: 1.6;
margin-bottom: 1rem;
font-size: 0.95rem;
text-align: center;
}
/* Team Section Styles - Individual Page */
.team-section {
background: linear-gradient(135deg, var(--gray-100) 0%, var(--white) 100%);
position: relative;
}
.team-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
pointer-events: none;
}
.team-member-card {
background: var(--white);
border-radius: 15px;
padding: 2rem;
text-align: center;
box-shadow: 0 10px 30px var(--shadow-black-light);
transition: all 0.3s ease;
border: 1px solid var(--border-primary);
position: relative;
overflow: hidden;
}
.team-member-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
opacity: 0;
transition: opacity 0.3s ease;
}
.team-member-card:hover::before {
opacity: 1;
}
.team-member-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px var(--shadow-primary-light);
}
/* Petitions Section Styles */
.petitions-section {
background: var(--white);
}
/* Petitions section title - alt çizgi yok */
.petitions-section .section-title::after {
display: none;
}
/* Card hover effects - Devre Dışı */
.card:hover {
transform: none !important;
transition: none !important;
}
.petition-icon {
width: 80px;
height: 80px;
font-size: 2rem;
background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%) !important;
box-shadow: 0 4px 15px var(--shadow-primary);
transition: all 0.3s ease;
}
.petition-icon:hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px var(--shadow-primary);
}
/* Petitions Section Card Styles */
.petitions-section .card {
border: none;
border-radius: 15px;
box-shadow: 0 4px 20px var(--shadow-black-light);
transition: all 0.3s ease;
background: var(--white);
overflow: hidden;
position: relative;
}
.petitions-section .card:hover {
transform: none !important;
box-shadow: 0 4px 20px var(--shadow-black-light);
}
.petitions-section .card-title {
font-family: var(--font-secondary);
font-size: 1.4rem;
font-weight: 600;
color: var(--gray-800);
margin-bottom: 1rem;
text-align: center;
line-height: 1.3;
}
.petitions-section .card-text {
font-family: var(--font-body);
color: var(--gray-600);
line-height: 1.6;
margin-bottom: 1.5rem;
font-size: 1rem;
text-align: center;
}
.petitions-section .btn-outline-primary {
border: 2px solid var(--primary-color);
color: var(--primary-color);
border-radius: 8px;
padding: 12px 24px;
font-weight: 500;
font-size: 0.95rem;
transition: all 0.3s ease;
min-height: 45px;
}
.petitions-section .btn-outline-primary:hover {
background: var(--primary-color);
color: var(--white);
transform: translateY(-2px);
box-shadow: 0 6px 20px var(--shadow-primary);
}
/* Mobile Responsive - Petitions Cards */
@media (max-width: 768px) {
.petitions-section .container {
padding-left: 10px;
padding-right: 10px;
}
.petitions-section .row {
margin-left: -5px;
margin-right: -5px;
}
.petitions-section .col-lg-4,
.petitions-section .col-md-6 {
padding-left: 5px;
padding-right: 5px;
margin-bottom: 20px;
}
.petitions-section .card {
margin-left: 0;
margin-right: 0;
}
.petitions-section .card .card-text {
font-size: 1.05rem;
line-height: 1.6;
}
.petitions-section .card .card-title {
font-size: 1.5rem;
}
.petition-icon {
width: 70px;
height: 70px;
font-size: 1.8rem;
}
}
@media (max-width: 576px) {
.petitions-section .container {
padding-left: 5px;
padding-right: 5px;
}
.petitions-section .row {
margin-left: -2px;
margin-right: -2px;
}
.petitions-section .col-lg-4,
.petitions-section .col-md-6 {
padding-left: 2px;
padding-right: 2px;
}
.petitions-section .card .card-text {
font-size: 1.1rem;
line-height: 1.7;
}
.petitions-section .card .card-title {
font-size: 1.6rem;
}
.petition-icon {
width: 65px;
height: 65px;
font-size: 1.6rem;
}
}
/* Card title styling */
.card-title {
font-family: var(--font-heading);
font-size: 1.2rem;
font-weight: 600;
color: var(--gray-800);
margin-bottom: 0.5rem;
line-height: 1.3;
}
/* Banks Section Styles */
code {
font-size: 0.9rem;
padding: 0.25rem 0.5rem;
background-color: var(--gray-100);
border-radius: 0.25rem;
}
.btn-outline-primary:hover {
transform: translateY(-1px);
transition: all 0.2s ease;
}
/* SweetAlert2 Custom Styles */
.swal2-popup-custom {
border-radius: 0.75rem !important;
box-shadow: 0 10px 30px var(--shadow-black) !important;
}
.swal2-toast {
border-radius: 0.5rem !important;
box-shadow: 0 4px 20px var(--shadow-black) !important;
}
.swal2-icon.swal2-success {
border-color: var(--primary-color) !important;
color: var(--primary-color) !important;
}
.swal2-icon.swal2-success [class^=swal2-success-line] {
background-color: var(--primary-color) !important;
}
.swal2-icon.swal2-success .swal2-success-ring {
border-color: var(--shadow-primary) !important;
}
/* Mobile responsive adjustments for banks page */
@media (max-width: 768px) {
.card-body {
padding: 1rem 0.5rem !important;
}
.row {
margin-left: -0.25rem;
margin-right: -0.25rem;
}
}
/* Maintenance Page Styles */
body {
min-height: 100vh;
font-family: var(--font-body);
position: relative;
}
/* Pattern overlay like login page - REMOVED */
.maintenance-container {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 1;
padding: 2rem 1rem;
}
.maintenance-card {
background: rgba(255, 255, 255, 0.98);
border-radius: 0;
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
padding: 3rem;
max-width: 600px;
text-align: center;
backdrop-filter: blur(10px);
border: 1px solid var(--shadow-white-medium);
}
.maintenance-card .logo {
max-width: 200px;
height: auto;
margin-bottom: 2rem;
filter: drop-shadow(0 4px 8px var(--shadow-primary-medium-light));
}
.maintenance-icon {
font-size: 4.5rem;
color: var(--primary-color);
margin-bottom: 2rem;
animation: gentle-pulse 3s infinite;
}
@keyframes gentle-pulse {
0%, 100% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.05);
opacity: 0.8;
}
}
.maintenance-title {
color: var(--text-dark);
font-family: var(--font-secondary);
font-weight: 700;
font-size: 2.5rem;
margin-bottom: 1.5rem;
letter-spacing: -0.5px;
}
.maintenance-subtitle {
color: var(--text-muted);
font-size: 1.2rem;
line-height: 1.7;
margin-bottom: 2.5rem;
font-family: var(--font-body);
}
.contact-info {
background: var(--bg-light);
border-radius: 0;
padding: 2rem;
margin-bottom: 2.5rem;
border-left: 4px solid var(--primary-color);
text-align: left;
}
.contact-item {
display: flex;
align-items: center;
margin: 0.5rem 0;
color: var(--gray-700-color);
font-size: 1.1rem;
}
.contact-item i {
color: var(--primary-color);
margin-right: 0.75rem;
width: 20px;
font-size: 1.1rem;
text-align: center;
}
.contact-item a {
color: var(--gray-700-color);
text-decoration: none;
transition: all 0.3s ease;
font-weight: 500;
}
.contact-item a:hover {
color: var(--primary-color);
transform: translateX(3px);
}
.progress-container {
background: var(--gray-200);
height: 4px;
border-radius: 2px;
margin: 1rem 0;
overflow: hidden;
}
.progress-bar {
background: linear-gradient(90deg, var(--primary-color), var(--primary-dark));
height: 4px;
border-radius: 2px;
animation: progress 3s ease-in-out infinite;
}
@keyframes progress {
0% { width: 0%; }
50% { width: 70%; }
100% { width: 100%; }
}
.btn-retry {
background: var(--primary-color);
border: 2px solid var(--primary-color);
padding: 12px 30px;
border-radius: 0;
color: var(--white);
font-weight: 600;
text-decoration: none;
display: inline-block;
transition: all 0.3s ease;
font-family: var(--font-primary);
text-transform: uppercase;
letter-spacing: 0.5px;
min-width: 200px;
text-align: center;
}
.btn-retry:hover {
background: var(--transparent);
color: var(--primary-color);
transform: translateY(-2px);
box-shadow: 0 8px 25px var(--shadow-primary);
}
.btn-retry i {
margin-right: 8px;
}
.admin-login {
margin-top: 2.5rem;
padding-top: 2rem;
border-top: 1px solid var(--border-light);
color: var(--text-muted);
font-size: 0.9rem;
font-family: var(--font-primary);
}
.admin-login i {
color: var(--primary-color);
}
.admin-login a {
color: var(--primary-color);
text-decoration: none;
font-weight: 600;
transition: color 0.3s ease;
}
.admin-login a:hover {
color: var(--primary-dark);
}
.social-buttons {
display: flex;
gap: 0.75rem;
align-items: center;
justify-content: center;
margin-top: 1.5rem;
margin-bottom: 2rem;
}
.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;
color: var(--primary-color);
border-color: var(--primary-color);
background: var(--transparent);
}
.social-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px var(--shadow-primary);
text-decoration: none;
background: var(--primary-color);
color: var(--white);
}
/* Mobile Responsive */
@media (max-width: 768px) {
.maintenance-container {
padding: 1rem 0.5rem;
}
.maintenance-card {
padding: 2rem 1.5rem;
margin: 0.25rem;
max-width: 98%;
width: 100%;
}
.maintenance-title {
font-size: 2rem;
}
.maintenance-subtitle {
font-size: 1.1rem;
}
.maintenance-icon {
font-size: 3.5rem;
}
.btn-retry {
min-width: 200px;
width: 100%;
max-width: 300px;
margin: 0 auto;
display: block;
}
}
/* Sidebar Contact Info Font Sizes */
.sidebar .contact-item small {
font-size: 0.75rem !important;
}
.sidebar .contact-item .fw-bold,
.sidebar .contact-item span.fw-bold,
.sidebar .contact-item a.fw-bold {
font-size: 0.9rem !important;
font-weight: 700 !important;
line-height: 1.3 !important;
}
/* Sidebar Etiket Hover Efekti */
.sidebar .badge.bg-light:hover .text-muted {
color: var(--white) !important;
}
/* Footer Link Hover Efekti */
footer .text-white-50:hover {
color: rgba(255, 255, 255, 0.9) !important;
transition: color 0.3s ease;
}
/* Gallery Overlay */
.gallery-overlay {
background: var(--bg-gallery-overlay) !important;
}