/*
Theme: Sci-Fi / Industrial Modern
Colors: Deep Charcoal, Neon Cyan, Steel Blue
*/
:root {
/* Dark Mode (Default) */
--bg-color: #0d0d12;
--card-bg: #16161e;
--primary-color: #008dd2;
/* Brand Color */
--secondary-color: #007acc;
--text-color: #e0e6ed;
--title-color: #fff;
--text-muted: #94a3b8;
--header-bg: rgba(13, 13, 18, 0.6);
--header-scroll-bg: rgba(13, 13, 18, 0.95);
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Red+Hat+Display:wght@400;500;600;700;800&display=swap');
/*
--heading-font: 'Orbitron', sans-serif;
--body-font: 'Inter', sans-serif;
--body-font: 'Manrope', sans-serif;
*/
--heading-font: 'Red Hat Display', sans-serif;
--body-font: 'Inter', sans-serif;
--header-height: 80px;
--transition-speed: 0.3s;
--glow-shadow: 0 0 15px rgba(0, 141, 210, 0.6);
}
/* Light Mode Variables */
body.light-mode {
--bg-color: #f0f2f5;
--card-bg: #ffffff;
--primary-color: #008dd2;
--text-color: #334155;
--title-color: #0f172a;
--text-muted: #64748b;
--header-bg: rgba(255, 255, 255, 0.6);
--header-scroll-bg: rgba(255, 255, 255, 0.95);
--glow-shadow: 0 0 15px rgba(0, 141, 210, 0.4);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
overflow-x: clip;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
font-family: var(--body-font);
line-height: 1.6;
overflow-x: clip;
transition: background-color 0.5s ease, color 0.5s ease;
max-width: 100vw;
}
/* Global Link Styles */
a {
color: var(--primary-color);
text-decoration: none;
transition: color var(--transition-speed) ease, text-shadow var(--transition-speed) ease;
}
a:hover {
color: var(--secondary-color);
text-shadow: var(--glow-shadow);
}
/* Margin - All */
.m-0 {
margin: 0 !important;
}
.m-1 {
margin: .25rem !important;
}
.m-2 {
margin: .5rem !important;
}
.m-3 {
margin: 1rem !important;
}
.m-4 {
margin: 1.5rem !important;
}
.m-5 {
margin: 3rem !important;
}
/* Margin Top */
.mt-0 {
margin-top: 0 !important;
}
.mt-1 {
margin-top: .25rem !important;
}
.mt-2 {
margin-top: .5rem !important;
}
.mt-3 {
margin-top: 1rem !important;
}
.mt-4 {
margin-top: 1.5rem !important;
}
.mt-5 {
margin-top: 3rem !important;
}
/* Margin Bottom */
.mb-0 {
margin-bottom: 0 !important;
}
.mb-1 {
margin-bottom: .25rem !important;
}
.mb-2 {
margin-bottom: .5rem !important;
}
.mb-3 {
margin-bottom: 1rem !important;
}
.mb-4 {
margin-bottom: 1.5rem !important;
}
.mb-5 {
margin-bottom: 3rem !important;
}
/* Margin Left */
.ms-0 {
margin-left: 0 !important;
}
.ms-1 {
margin-left: .25rem !important;
}
.ms-2 {
margin-left: .5rem !important;
}
.ms-3 {
margin-left: 1rem !important;
}
.ms-4 {
margin-left: 1.5rem !important;
}
.ms-5 {
margin-left: 3rem !important;
}
/* Margin Right */
.me-0 {
margin-right: 0 !important;
}
.me-1 {
margin-right: .25rem !important;
}
.me-2 {
margin-right: .5rem !important;
}
.me-3 {
margin-right: 1rem !important;
}
.me-4 {
margin-right: 1.5rem !important;
}
.me-5 {
margin-right: 3rem !important;
}
/* Margin X & Y */
.mx-auto {
margin-left: auto !important;
margin-right: auto !important;
}
.mx-0 {
margin-left: 0 !important;
margin-right: 0 !important;
}
.mx-1 {
margin-left: .25rem !important;
margin-right: .25rem !important;
}
.mx-2 {
margin-left: .5rem !important;
margin-right: .5rem !important;
}
.mx-3 {
margin-left: 1rem !important;
margin-right: 1rem !important;
}
.mx-4 {
margin-left: 1.5rem !important;
margin-right: 1.5rem !important;
}
.mx-5 {
margin-left: 3rem !important;
margin-right: 3rem !important;
}
.my-0 {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.my-1 {
margin-top: .25rem !important;
margin-bottom: .25rem !important;
}
.my-2 {
margin-top: .5rem !important;
margin-bottom: .5rem !important;
}
.my-3 {
margin-top: 1rem !important;
margin-bottom: 1rem !important;
}
.my-4 {
margin-top: 1.5rem !important;
margin-bottom: 1.5rem !important;
}
.my-5 {
margin-top: 3rem !important;
margin-bottom: 3rem !important;
}
/* Padding - All */
.p-0 {
padding: 0 !important;
}
.p-1 {
padding: .25rem !important;
}
.p-2 {
padding: .5rem !important;
}
.p-3 {
padding: 1rem !important;
}
.p-4 {
padding: 1.5rem !important;
}
.p-5 {
padding: 3rem !important;
}
/* Padding Top */
.pt-0 {
padding-top: 0 !important;
}
.pt-1 {
padding-top: .25rem !important;
}
.pt-2 {
padding-top: .5rem !important;
}
.pt-3 {
padding-top: 1rem !important;
}
.pt-4 {
padding-top: 1.5rem !important;
}
.pt-5 {
padding-top: 3rem !important;
}
/* Padding Bottom */
.pb-0 {
padding-bottom: 0 !important;
}
.pb-1 {
padding-bottom: .25rem !important;
}
.pb-2 {
padding-bottom: .5rem !important;
}
.pb-3 {
padding-bottom: 1rem !important;
}
.pb-4 {
padding-bottom: 1.5rem !important;
}
.pb-5 {
padding-bottom: 3rem !important;
}
/* Padding Left */
.ps-0 {
padding-left: 0 !important;
}
.ps-1 {
padding-left: .25rem !important;
}
.ps-2 {
padding-left: .5rem !important;
}
.ps-3 {
padding-left: 1rem !important;
}
.ps-4 {
padding-left: 1.5rem !important;
}
.ps-5 {
padding-left: 3rem !important;
}
/* Padding Right */
.pe-0 {
padding-right: 0 !important;
}
.pe-1 {
padding-right: .25rem !important;
}
.pe-2 {
padding-right: .5rem !important;
}
.pe-3 {
padding-right: 1rem !important;
}
.pe-4 {
padding-right: 1.5rem !important;
}
.pe-5 {
padding-right: 3rem !important;
}
/* Padding X & Y */
.px-0 {
padding-left: 0 !important;
padding-right: 0 !important;
}
.px-1 {
padding-left: .25rem !important;
padding-right: .25rem !important;
}
.px-2 {
padding-left: .5rem !important;
padding-right: .5rem !important;
}
.px-3 {
padding-left: 1rem !important;
padding-right: 1rem !important;
}
.px-4 {
padding-left: 1.5rem !important;
padding-right: 1.5rem !important;
}
.px-5 {
padding-left: 3rem !important;
padding-right: 3rem !important;
}
.py-0 {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.py-1 {
padding-top: .25rem !important;
padding-bottom: .25rem !important;
}
.py-2 {
padding-top: .5rem !important;
padding-bottom: .5rem !important;
}
.py-3 {
padding-top: 1rem !important;
padding-bottom: 1rem !important;
}
.py-4 {
padding-top: 1.5rem !important;
padding-bottom: 1.5rem !important;
}
.py-5 {
padding-top: 3rem !important;
padding-bottom: 3rem !important;
}
/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--heading-font);
color: var(--title-color);
text-transform: uppercase;
letter-spacing: 1px;
transition: color 0.5s ease;
}
a {
text-decoration: none;
transition: var(--transition-speed);
}
a h3 {
text-decoration: none !important;
}
a:hover h3 {
text-decoration: none;
}
ul {
list-style: none;
}
/* Formatlı İçerik Listeleri (Global Typography) */
.post-content ul,
.post-content ol,
.page-content ul,
.page-content ol,
.hizmet-aciklama ul,
.hizmet-aciklama ol,
.icerik-govde ul,
.icerik-govde ol {
padding-left: 0;
/* İçerik boşluğu li içinden veriliyor */
margin-bottom: 1.5rem;
}
.post-content ul,
.page-content ul,
.hizmet-aciklama ul,
.icerik-govde ul {
list-style-type: none;
}
.post-content ol,
.page-content ol,
.hizmet-aciklama ol,
.icerik-govde ol {
list-style-type: none;
counter-reset: custom-counter;
}
.post-content li,
.page-content li,
.hizmet-aciklama li,
.icerik-govde li {
margin-bottom: 0.8rem;
line-height: 1.7;
position: relative;
padding-left: 1.5rem;
}
/* Özel UL Madde İmi */
.post-content ul>li::before,
.page-content ul>li::before,
.hizmet-aciklama ul>li::before,
.icerik-govde ul>li::before {
content: '';
position: absolute;
left: 0;
top: 10px;
width: 7px;
height: 7px;
background-color: var(--primary-color);
border-radius: 50%;
box-shadow: 0 0 8px rgba(0, 141, 210, 0.4);
transition: transform 0.3s ease;
}
.post-content ul>li:hover::before,
.page-content ul>li:hover::before,
.hizmet-aciklama ul>li:hover::before,
.icerik-govde ul>li:hover::before {
transform: scale(1.3);
}
/* Özel OL Numara İmi */
.post-content ol>li,
.page-content ol>li,
.hizmet-aciklama ol>li,
.icerik-govde ol>li {
counter-increment: custom-counter;
padding-left: 2rem;
}
.post-content ol>li::before,
.page-content ol>li::before,
.hizmet-aciklama ol>li::before,
.icerik-govde ol>li::before {
content: counter(custom-counter) ".";
position: absolute;
left: 0;
top: 0;
width: auto;
height: auto;
background: transparent;
border-radius: 0;
box-shadow: none;
color: var(--primary-color);
font-weight: 700;
font-size: 1.1rem;
font-family: var(--heading-font);
}
.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
padding: 0 15px;
}
/*.btn {
display: inline-block;
padding: 12px 30px;
border: none;
cursor: pointer;
font-family: var(--heading-font);
font-weight: 600;
text-transform: uppercase;
transition: all var(--transition-speed);
position: relative;
overflow: hidden;
z-index: 10;
}
.btn-primary {
background: rgba(0, 0, 0, 0.4);
color: var(--primary-color);
border: 1px solid var(--primary-color);
}
.btn-outline {
background: rgba(0, 0, 0, 0.4);
border: 1px solid currentColor;
}
.btn-primary::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: var(--primary-color);
z-index: -1;
transition: 0.4s;
}
.btn-primary:hover::before {
left: 0;
}
.btn-primary:hover {
color: #fff;
box-shadow: var(--glow-shadow);
}
*/
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 12px 30px;
border: 1px solid transparent;
border-radius: 8px;
cursor: pointer;
font-family: var(--heading-font);
font-weight: 600;
text-transform: uppercase;
text-decoration: none;
position: relative;
overflow: hidden;
z-index: 1;
transition:
color 0.3s ease,
background 0.3s ease,
border-color 0.3s ease,
transform 0.3s ease,
box-shadow 0.3s ease;
}
/* =========================
PRIMARY
========================= */
.btn.btn-primary {
background: transparent;
color: var(--primary-color);
border-color: var(--primary-color);
}
.btn.btn-primary::before {
content: "";
position: absolute;
inset: 0;
background: var(--primary-color);
transform: translateX(-101%);
transition: transform 0.35s ease;
z-index: -1;
}
.btn.btn-primary:hover::before {
transform: translateX(0);
}
.btn.btn-primary:hover {
color: #fff;
border-color: var(--primary-color);
transform: translateY(-2px);
box-shadow: var(--glow-shadow);
}
/* =========================
OUTLINE
========================= */
.btn.btn-outline {
background: transparent;
color: var(--text-color);
border-color: var(--border-color);
}
.btn.btn-outline::before {
display: none;
}
.btn.btn-outline:hover {
background: var(--card-bg);
color: var(--primary-color);
border-color: var(--primary-color);
transform: translateY(-2px);
box-shadow: var(--glow-shadow);
}
/* =========================
ICON
========================= */
.btn i {
transition: transform 0.3s ease;
}
.btn:hover i {
transform: translateX(4px);
}
/*.btn-outline:hover {
background: rgba(255, 255, 255, 0.1);
}
*/
.text-center {
text-align: center;
}
.section-padding {
padding: 50px 0;
}
.section-title {
font-size: 2.5rem;
margin-bottom: 50px;
text-align: center;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
}
.section-title::after {
content: '';
display: block;
width: 60px;
height: 3px;
background: var(--primary-color);
margin-top: 15px;
box-shadow: var(--glow-shadow);
}
.section-title.left-align {
align-items: flex-start;
}
/* Header & Dropdown */
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: var(--header-height);
background: var(--header-bg);
backdrop-filter: blur(10px);
z-index: 1000;
transition: transform var(--transition-speed);
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
body.light-mode header {
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
header.hide-header {
transform: translateY(-100%);
}
.header-inner {
display: flex;
justify-content: space-between;
align-items: center;
height: 100%;
}
.header-controls {
display: flex;
align-items: center;
gap: 20px;
}
#theme-toggle {
background: none;
border: none;
color: var(--text-color);
font-size: 1.2rem;
cursor: pointer;
transition: transform 0.5s, color 0.3s;
}
#theme-toggle:hover {
color: var(--primary-color);
transform: rotate(360deg);
}
.logo a {
font-family: var(--heading-font);
font-size: 1.5rem;
font-weight: 700;
color: var(--title-color);
display: flex;
align-items: center;
}
.logo span {
color: var(--primary-color);
}
.logo img {
height: var(--logo-height, 50px);
width: auto;
transition: height 0.3s ease;
}
/* Fixed header logo boyutu */
header.scrolled .logo img {
height: var(--logo-height-fixed, 40px);
}
/* Dark/Light tema logo göster/gizle */
.logo .logo-dark {
display: block;
}
.logo .logo-light {
display: none;
}
body.light-mode .logo .logo-dark {
display: none;
}
body.light-mode .logo .logo-light {
display: block;
}
/* Dil Değiştirici - Polylang */
.language-switcher {
display: flex;
align-items: center;
gap: 8px;
}
/* Dil Değiştirici - Dropdown Yapısı */
.language-switcher {
position: relative;
}
.language-switcher .lang-current {
position: relative;
}
.language-switcher .lang-current>a {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
border-radius: 6px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
color: var(--text-color);
text-decoration: none;
transition: all 0.3s ease;
}
.language-switcher .lang-current>a:hover {
background: rgba(255, 255, 255, 0.1);
border-color: var(--primary-color);
}
body.light-mode .language-switcher .lang-current>a {
background: rgba(0, 0, 0, 0.03);
border-color: rgba(0, 0, 0, 0.1);
}
body.light-mode .language-switcher .lang-current>a:hover {
background: rgba(0, 0, 0, 0.05);
border-color: var(--primary-color);
}
.language-switcher .lang-slug {
font-size: 0.85rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.language-switcher .lang-current>a i {
font-size: 0.7rem;
opacity: 0.6;
transition: transform 0.3s ease;
}
.language-switcher .lang-current:hover>a i {
transform: rotate(180deg);
}
/* Dropdown Menü */
.language-switcher .lang-dropdown {
position: absolute;
top: 100%;
right: 0;
margin-top: 8px;
min-width: 100%;
list-style: none;
padding: 8px;
margin: 8px 0 0 0;
background: var(--card-bg);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: all 0.3s ease;
z-index: 1000;
}
.language-switcher .lang-current:hover .lang-dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
body.light-mode .language-switcher .lang-dropdown {
background: #fff;
border-color: rgba(0, 0, 0, 0.1);
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}
.language-switcher .lang-dropdown li {
margin: 0;
}
.language-switcher .lang-dropdown a {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
border-radius: 6px;
color: var(--text-color);
text-decoration: none;
transition: all 0.2s ease;
}
.language-switcher .lang-dropdown a:hover {
background: rgba(0, 141, 210, 0.1);
color: var(--primary-color);
}
.language-switcher .lang-dropdown a span {
font-size: 0.85rem;
font-weight: 600;
}
/* Bayrak Görselleri */
.language-switcher img {
width: 24px;
height: 18px;
object-fit: cover;
border-radius: 3px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
/* Mobil dil değiştirici */
@media (max-width: 768px) {
.language-switcher img {
width: 20px;
height: 15px;
}
.language-switcher .lang-slug {
display: none;
}
.language-switcher .lang-current>a {
padding: 6px 10px;
}
.language-switcher .lang-dropdown {
right: 0;
min-width: 120px;
}
.logo img {
height: var(--logo-height-mobile, 35px);
}
section:has(.language-switcher),
.container:has(.language-switcher),
div:has(.language-switcher) {
overflow: visible !important;
overflow-x: visible !important;
}
}
.desktop-nav ul {
display: flex;
gap: 30px;
margin: 0;
padding: 0;
align-items: center;
}
.desktop-nav li {
position: relative;
}
.desktop-nav a {
font-size: 0.9rem;
font-weight: 500;
position: relative;
color: var(--text-color);
padding: 10px 0;
display: block;
}
.desktop-nav a:hover,
.desktop-nav a:focus {
color: var(--primary-color);
}
/* Dropdown Menu - Supports both custom .dropdown-menu and WordPress .sub-menu */
.dropdown-menu,
.desktop-nav .sub-menu {
position: absolute;
top: 100%;
left: 0;
background: var(--header-scroll-bg);
min-width: 200px;
display: block;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
border-top: 2px solid var(--primary-color);
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: 0.3s ease;
flex-direction: column !important;
gap: 0 !important;
padding: 10px 0 !important;
list-style: none;
z-index: 1000;
}
.has-dropdown:hover .dropdown-menu,
.desktop-nav .menu-item-has-children:hover>.sub-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
/* 3rd level and deeper dropdowns open to the right side */
.dropdown-menu .dropdown-menu,
.desktop-nav .sub-menu .sub-menu {
top: -2px;
/* compensate for the parent's border-top */
left: 100%;
}
/* Parent menu item position for dropdown */
.desktop-nav .menu-item-has-children {
position: relative;
}
.dropdown-menu li,
.desktop-nav .sub-menu li {
display: block;
width: 100%;
}
.dropdown-menu a,
.desktop-nav .sub-menu a {
padding: 10px 20px;
font-size: 0.85rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
display: block;
}
body.light-mode .dropdown-menu a,
body.light-mode .desktop-nav .sub-menu a {
border-color: rgba(0, 0, 0, 0.05);
}
.dropdown-menu a:hover,
.desktop-nav .sub-menu a:hover {
background: rgba(255, 255, 255, 0.05);
color: var(--primary-color);
padding-left: 25px;
}
/* Mobile Menu */
.mobile-menu-btn {
display: none;
background: none;
border: none;
cursor: pointer;
flex-direction: column;
gap: 6px;
}
.mobile-menu-btn span {
display: block;
width: 30px;
height: 2px;
background-color: var(--text-color);
transition: 0.3s;
}
.mobile-menu-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: var(--bg-color);
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
z-index: 1001;
transform: translateX(100%);
transition: transform 0.4s ease-in-out;
overflow-y: auto;
overscroll-behavior: none;
/* Prevent body scroll */
padding: 0 0 40px 0;
}
.mobile-menu-overlay.active {
transform: translateX(0);
}
.close-menu-btn {
position: sticky;
top: 20px;
align-self: flex-end;
margin-right: 20px;
margin-top: 20px;
font-size: 2rem;
background: none;
border: none;
color: var(--text-color);
cursor: pointer;
z-index: 1002;
}
.mobile-menu-overlay nav {
width: 100%;
padding-top: 20px;
}
.mobile-menu-overlay ul {
text-align: center;
list-style: none;
padding: 0;
width: 100%;
}
.mobile-menu-overlay li {
margin: 20px 0;
position: relative;
/* Ensure the arrow positions itself relative to each list item */
}
.mobile-menu-overlay a {
font-size: 1.5rem;
font-family: var(--heading-font);
color: var(--text-color);
display: inline-block;
width: auto;
}
/* Mobile Dropdown Styles */
.mobile-dropdown,
.mobile-menu-overlay .sub-menu {
display: none;
background: rgba(0, 0, 0, 0.1);
padding: 10px 0;
margin-top: 10px;
list-style: none;
}
.mobile-dropdown.active,
.mobile-menu-overlay .menu-item-has-children.active>.sub-menu {
display: block;
}
.mobile-dropdown a,
.mobile-menu-overlay .sub-menu a {
font-size: 1.1rem;
display: block;
padding: 8px 0;
}
/* Arrow icon for parent menu items (desktop) */
.desktop-nav .menu-item-has-children>a::after {
content: '\f078';
font-family: 'Font Awesome 6 Free';
font-weight: 900;
font-size: 0.7em;
margin-left: 6px;
transition: transform 0.3s ease;
}
.desktop-nav .menu-item-has-children:hover>a::after {
transform: rotate(180deg);
}
/* Arrow icon for parent menu items (mobile) - Hidden in favor of embedded .mobile-submenu-toggle */
.mobile-menu-overlay .menu-item-has-children>a::after {
display: none !important;
}
/* Enable specific width behavior to align items without flex tricks breaking */
.mobile-menu-overlay .menu-item-has-children {
position: relative;
display: block;
width: 100%;
}
/* Let the link take natural space, ignoring the toggle's width for centering purposes */
.mobile-menu-overlay .menu-item-has-children>a {
padding-right: 0;
display: inline-block;
}
/* Explicit Toggle Button absolutely placed on the right, relative to the LI */
.mobile-submenu-toggle {
position: absolute;
top: -5px;
/* Aligns with the 1.5rem text line height */
right: 20px;
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
background: transparent;
color: var(--text-color);
border: 1px solid rgba(255, 255, 255, 0.1);
/* Ince bir border eklendi */
border-radius: 8px;
cursor: pointer;
z-index: 10;
transition: all 0.3s ease;
}
body.light-mode .mobile-submenu-toggle {
border-color: rgba(0, 0, 0, 0.1);
}
.mobile-submenu-toggle svg {
width: 20px;
height: 20px;
fill: currentColor;
transition: transform 0.3s ease;
}
.mobile-menu-overlay .menu-item-has-children.active>.mobile-submenu-toggle {
color: var(--primary-color);
}
.mobile-menu-overlay .menu-item-has-children.active>.mobile-submenu-toggle svg {
transform: rotate(180deg);
}
/* Deeper nested submenu styles (3rd level+) */
.mobile-menu-overlay .sub-menu .sub-menu {
border-left: 2px solid var(--primary-color);
padding-left: 15px;
margin: 5px 0 10px 10px;
background: rgba(0, 0, 0, 0.15);
border-radius: 6px;
}
body.light-mode .mobile-menu-overlay .sub-menu .sub-menu {
background: rgba(0, 0, 0, 0.04);
}
@media (max-width: 768px) {
.container {
padding: 0;
}
}
/* Hero Slider */
#hero {
height: 100vh;
position: relative;
overflow: hidden;
}
.slider-container {
height: 100%;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.slide-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
opacity: 0;
transition: opacity 1s ease-in-out;
z-index: -1;
}
.slide-bg.active {
opacity: 1;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(0deg, rgba(13, 13, 18, 0.9) 0%, rgba(13, 13, 18, 0.4) 50%, rgba(13, 13, 18, 0.7) 100%);
z-index: 1;
}
.hero-content {
text-align: center;
z-index: 5;
max-width: 900px;
padding: 20px;
position: relative;
}
.hero-content h1 {
font-size: 2.5rem;
margin-bottom: 20px;
text-shadow: 0 0 30px rgba(0, 0, 0, 0.9);
position: relative;
color: #fff;
font-family: var(--heading-font);
}
.glitch-text {
position: relative;
}
/* simplified glitch */
.hero-content p {
font-size: 1.3rem;
margin-bottom: 40px;
color: #ddd;
text-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
}
.slider-controls button {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(0, 0, 0, 0.3);
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.2);
width: 50px;
height: 50px;
border-radius: 50%;
cursor: pointer;
z-index: 10;
transition: 0.3s;
}
.slider-controls button:hover {
background: var(--primary-color);
border-color: var(--primary-color);
}
.prev-slide {
left: 20px;
}
.next-slide {
right: 20px;
}
.slide-indicators {
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 15px;
z-index: 10;
}
.indicator {
width: 12px;
height: 12px;
border: 2px solid #fff;
border-radius: 50%;
cursor: pointer;
transition: 0.3s;
}
.indicator.active {
background: var(--primary-color);
border-color: var(--primary-color);
}
/* Services (FLEXBOX FIX) */
.services-wrapper {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 25px;
}
.service-card {
background: var(--card-bg);
padding: 40px 25px;
border-radius: 15px;
text-align: center;
transition: 0.4s;
border: 1px solid rgba(255, 255, 255, 0.05);
position: relative;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
/* Desktop: 5 items in row. Approx 20% minus gap */
flex: 0 1 calc(20% - 20px);
max-width: 250px;
min-width: 200px;
}
body.light-mode .service-card {
border: 1px solid rgba(0, 0, 0, 0.05);
}
/* Tablet Centering (2 rows: 3 then 2 centered) */
@media (max-width: 1200px) {
.service-card {
flex: 0 1 calc(33.33% - 25px);
/* 3 in a row */
max-width: none;
}
}
@media (max-width: 768px) {
.service-card {
flex: 0 1 100%;
/* 1 in a row */
}
}
.service-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: var(--primary-color);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.4s;
}
.service-card:hover::before {
transform: scaleX(1);
}
.service-card:hover {
transform: translateY(-10px);
}
.icon-box {
font-size: 3rem;
color: var(--primary-color);
margin-bottom: 20px;
}
.service-card h3 {
margin-bottom: 15px;
font-size: 1.1rem;
word-wrap: break-word;
}
.service-card p {
color: var(--text-muted);
font-size: 0.9rem;
}
/* References Marquee (RESTORED) */
.marquee-wrapper {
overflow: hidden;
white-space: nowrap;
position: relative;
cursor: grab;
padding: 20px 0;
}
.marquee-wrapper:active {
cursor: grabbing;
}
.marquee-content {
display: inline-flex;
animation: marquee 30s linear infinite;
}
.marquee-content:hover {
animation-play-state: paused;
}
.brand-logo {
font-size: 2rem;
color: var(--text-color);
margin: 0 50px;
opacity: 0.8;
transition: 0.3s;
display: flex;
align-items: center;
gap: 10px;
user-select: none;
}
.brand-logo:hover {
opacity: 1;
color: var(--primary-color);
transform: scale(1.1);
}
@keyframes marquee {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
/* Portfolio Filters (RESTORED) */
.portfolio-filter {
text-align: center;
margin-bottom: 50px;
}
.filter-btn {
background: transparent;
border: 1px solid var(--text-muted);
color: var(--text-muted);
padding: 10px 30px;
margin: 5px;
border-radius: 30px;
cursor: pointer;
transition: 0.3s;
font-family: var(--body-font);
text-transform: uppercase;
font-size: 0.85rem;
font-weight: 600;
}
.filter-btn.active,
.filter-btn:hover {
background: var(--primary-color);
border-color: var(--primary-color);
color: #fff;
box-shadow: var(--glow-shadow);
}
/* Portfolio Stats/Grid
.portfolio-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 25px;
}
.portfolio-item {
position: relative;
border-radius: 12px;
overflow: hidden;
height: 300px;
cursor: pointer;
background: #000;
}*/
.portfolio-item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: all 0.6s cubic-bezier(0.2, 1, 0.2, 1);
opacity: 0.85;
}
.portfolio-item:hover img {
transform: scale(1.1) rotate(1deg);
opacity: 0.6;
filter: contrast(110%);
}
.portfolio-item::after {
content: '';
position: absolute;
inset: 0;
border: 1px solid var(--primary-color);
opacity: 0;
transform: scale(0.9);
transition: 0.4s;
pointer-events: none;
}
.portfolio-item:hover::after {
opacity: 1;
transform: scale(0.95);
box-shadow: 0 0 20px rgba(0, 141, 210, 0.2);
}
.portfolio-info {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 20px;
background: linear-gradient(0deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0) 100%);
transition: all 0.4s;
}
.portfolio-item h3 {
margin: 0 0 5px;
font-size: 1.3rem;
color: #fff;
/* transform: translateY(20px); KALDRILDI - başlıkların taşmasına neden oluyordu */
transition: 0.4s;
}
.portfolio-details {
opacity: 0;
transform: translateY(20px);
transition: 0.4s;
transition-delay: 0.1s;
max-height: 0;
}
.portfolio-item:hover h3 {
transform: translateY(0);
color: var(--primary-color);
}
.portfolio-item:hover .portfolio-details {
opacity: 1;
transform: translateY(0);
max-height: 100px;
}
.portfolio-details p {
color: #ccc;
font-size: 0.9rem;
margin-bottom: 5px;
}
.btn-sm {
display: inline-block;
margin-top: 10px;
font-size: 0.8rem;
color: var(--primary-color);
border-bottom: 1px solid var(--primary-color);
}
/* Simplified Quality Policy & Highlights */
.quality-highlights {
display: grid;
grid-template-columns: repeat(4, 1fr);
/* Force 4 columns on desktop */
gap: 30px;
margin-top: 40px;
}
@media (max-width: 992px) {
.quality-highlights {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 576px) {
.quality-highlights {
grid-template-columns: 1fr;
}
}
.highlight-item {
text-align: center;
padding: 30px;
background: var(--card-bg);
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.05);
transition: 0.3s;
}
body.light-mode .highlight-item {
border-color: rgba(0, 0, 0, 0.05);
}
.highlight-item:hover {
border-color: var(--primary-color);
transform: translateY(-5px);
}
.animate-icon {
font-size: 2.5rem;
color: var(--primary-color);
margin-bottom: 15px;
display: inline-block;
transition: transform 0.3s;
}
.highlight-item:hover .animate-icon {
transform: scale(1.2);
}
/* Production Process */
.process-timeline {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 30px;
position: relative;
margin-top: 50px;
}
.process-timeline::before {
content: '';
position: absolute;
/*top: 30px;*/
left: 0;
width: 100%;
height: 2px;
/*background: rgba(255, 255, 255, 0.1);*/
z-index: 0;
top: 70px;
background: rgb(137 137 137 / 10%);
}
/*.process-step {
flex: 1;
min-width: 220px;
text-align: center;
z-index: 1;
position: relative;
transition: transform 0.3s ease;
}*/
/* Hover Effect for Production */
.process-step:hover {
transform: translateY(-10px);
}
.process-step:hover .step-number {
background: var(--primary-color);
color: #fff;
box-shadow: 0 0 20px var(--primary-color);
}
.step-number {
width: 80px;
height: 80px;
background: var(--card-bg);
border: 2px solid var(--primary-color);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
font-size: 1.2rem;
font-weight: 700;
color: var(--primary-color);
transition: 0.3s;
}
/* FAQ */
.faq-container {
max-width: 800px;
margin: 0 auto;
}
.faq-item {
margin-bottom: 15px;
border: 1px solid rgba(255, 255, 255, 0.05);
background: var(--card-bg);
border-radius: 8px;
overflow: hidden;
}
body.light-mode .faq-item {
border-color: rgba(0, 0, 0, 0.05);
}
.faq-question {
width: 100%;
padding: 20px;
background: none;
border: none;
text-align: left;
color: var(--title-color);
font-family: var(--heading-font);
font-size: 1.1rem;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
}
.faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out;
background: rgba(0, 0, 0, 0.1);
}
.faq-answer p {
padding: 20px;
color: var(--text-muted);
}
/* About and Split */
.split-layout {
display: flex;
align-items: center;
gap: 60px;
}
.about-text {
flex: 1;
}
.about-image {
flex: 1;
position: relative;
border-radius: 20px;
overflow: hidden;
}
.about-image img {
width: 100%;
display: block;
border-radius: 20px;
transition: transform 0.5s ease;
}
.about-image:hover img {
transform: scale(1.05);
}
/* Footer (RESTORED) */
footer {
border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.footer-top {
background: #09090c;
padding: 60px 0;
}
body.light-mode .footer-top {
background: #e2e8f0;
border-top: 1px solid #cbd5e1;
}
.footer-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 40px;
}
.footer-col h3 {
margin-bottom: 20px;
font-size: 1.1rem;
color: var(--primary-color);
}
.footer-col ul li {
margin-bottom: 10px;
}
.footer-col ul li a {
color: var(--text-muted);
transition: 0.3s;
}
.footer-col ul li a:hover {
color: var(--primary-color);
padding-left: 5px;
}
.footer-col p {
color: var(--text-muted);
margin-bottom: 15px;
}
.footer-col i {
width: 20px;
color: var(--primary-color);
}
/* --- Hero Slider Indicators (Progress Pill) --- */
.slider-controls .slide-indicators {
display: flex;
align-items: center;
gap: 10px;
}
.indicator {
display: block;
width: 10px;
height: 10px;
background: rgba(255, 255, 255, 0.3);
border-radius: 10px;
/* Pillow shape for expansion */
cursor: pointer;
transition: width 0.4s ease, background 0.4s ease;
position: relative;
overflow: hidden;
/* Mask the filling progress */
}
.indicator.active {
width: 40px;
/* Elongate active dot */
background: rgba(255, 255, 255, 0.2);
/* Base track color */
}
/* The Filling Animation */
.indicator.active::after {
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 0;
background: var(--primary-color);
border-radius: 10px;
animation: fillDot 8s linear forwards;
}
@keyframes fillDot {
from {
width: 0;
}
to {
width: 100%;
}
}
/* Scroll Down Indicator */
.scroll-down-indicator {
position: absolute;
bottom: 60px;
/* Above the dots (which are at bottom: 30px) */
left: 50%;
transform: translateX(-50%);
z-index: 10;
color: rgba(255, 255, 255, 0.7);
font-size: 2rem;
animation: scrollBounce 2s infinite;
cursor: pointer;
text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
@keyframes scrollBounce {
0%,
20%,
50%,
80%,
100% {
transform: translateX(-50%) translateY(0);
}
40% {
transform: translateX(-50%) translateY(-10px);
}
60% {
transform: translateX(-50%) translateY(-5px);
}
}
to {
width: 100%;
}
/* --- References / Marquee --- */
.marquee-wrapper {
overflow: hidden;
white-space: nowrap;
position: relative;
padding: 10px 0;
cursor: grab;
mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
-webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
pointer-events: auto;
user-select: none;
z-index: 5;
/* FIX: Ensure top of stack for hover */
}
.marquee-content {
display: flex;
align-items: center;
gap: 12px;
/* Exact 12px spacing */
width: max-content;
pointer-events: auto;
}
/* Specific Logo Styling */
.brand-logo {
flex: 0 0 auto;
display: flex;
justify-content: center;
align-items: center;
height: 70px;
padding: 0 10px;
/* Reverted to 10px as requested */
margin: 0 !important;
/* FIX: Ensure no external margins interfere with gap */
background: #fff;
border-radius: 6px;
border: none;
transition: 0.3s;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.brand-logo:hover {
background: #ffffff;
transform: scale(1.05);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}
/* If using FontAwesome icons as placeholders */
.brand-logo i {
font-size: 2rem;
margin-right: 10px;
color: var(--primary-color);
}
/* If using IMG tags inside */
.brand-logo img,
.logo-item {
height: 80%;
/* Increased from 60% to fill the box more */
width: auto;
object-fit: contain;
display: block;
filter: none;
}
/* Responsive adjustments */
@media (max-width: 992px) {
.split-layout,
.reverse {
flex-direction: column !important;
}
.hero-content h1 {
font-size: 3.5rem;
}
}
@media (max-width: 880px) {
.mobile-menu-btn {
display: flex;
}
.desktop-nav {
display: none;
}
.hero-content h1 {
font-size: 2.5rem;
}
.footer-grid {
grid-template-columns: 1fr;
}
.section-title {
font-size: 1.5rem !important;
}
.hero-btns a.btn-outline {
margin-left: 0px !important;
}
}
/* --- EXPORT NETWORK MAP STYLES --- */
:root {
--map-fill: #1f2a36;
--map-stroke: #37474f;
--source-color: #ff3366;
--target-color: #00f2ff;
--visited-fill: #103044;
--hover-fill: #3498db;
}
/* Scoped variables if needed, but root is fine.
Adding specific styles for the #export-network section */
#export-network .map-box {
width: 100%;
margin: 0 auto;
height: 75vh;
min-height: 400px;
background: rgba(20, 30, 40, 0.6);
border: 1px solid #2c3e50;
border-radius: 12px;
position: relative;
display: flex;
flex-direction: column;
overflow: hidden;
}
#export-network .map-scroll-container {
flex: 1;
width: 100%;
height: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
scrollbar-color: var(--target-color) #0b1016;
display: flex;
justify-content: center;
align-items: center;
}
#export-network .map-scroll-container::-webkit-scrollbar {
width: 8px;
height: 8px;
}
#export-network .map-scroll-container::-webkit-scrollbar-track {
background: #0b1016;
border-radius: 4px;
}
#export-network .map-scroll-container::-webkit-scrollbar-thumb {
background-color: var(--target-color);
border-radius: 4px;
}
#export-network svg {
height: 100%;
width: auto;
max-width: none;
min-width: 100%;
touch-action: pan-x pan-y;
shape-rendering: geometricPrecision;
}
/* Map Paths */
#export-network path {
fill: var(--map-fill);
stroke: var(--map-stroke);
stroke-width: 0.8;
transition: fill 0.2s ease, stroke 0.2s ease;
cursor: pointer;
vector-effect: non-scaling-stroke;
}
#export-network path[data-is-source="true"] {
fill: var(--source-color) !important;
stroke: #fff !important;
stroke-width: 1.5;
fill-opacity: 0.9;
}
#export-network path.visited-country {
fill: var(--visited-fill);
stroke: var(--target-color);
stroke-width: 1.2;
}
#export-network path.country-active {
fill: var(--hover-fill) !important;
stroke: white !important;
stroke-width: 1.5;
fill-opacity: 1;
}
/* Map Animations */
#export-network .flight-line {
fill: none !important;
stroke: url(#lineGradient);
stroke-width: 2;
stroke-linecap: round;
opacity: 0.6;
pointer-events: none;
}
#export-network .particle {
fill: #ffffff !important;
pointer-events: none;
will-change: transform;
}
#export-network .target-dot {
fill: var(--target-color);
opacity: 1;
pointer-events: none;
}
/* Tooltip */
.tooltip {
position: fixed;
background: rgba(10, 15, 25, 0.95);
border: 1px solid #34495e;
padding: 12px 18px;
border-radius: 6px;
color: #ecf0f1;
font-size: 14px;
pointer-events: none;
opacity: 0;
transition: opacity 0.2s;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.8);
z-index: 10000;
white-space: nowrap;
}
.tooltip .title {
font-weight: 700;
font-size: 15px;
margin-bottom: 4px;
display: block;
color: #fff;
}
.tooltip .info {
color: #3498db;
font-size: 13px;
display: flex;
align-items: center;
gap: 5px;
}
.legend {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 20px;
background: rgba(0, 0, 0, 0.8);
padding: 10px 20px;
border-radius: 30px;
pointer-events: none;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.legend-item {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: #ccc;
}
.dot {
width: 12px;
height: 12px;
border-radius: 50%;
}
.dot.source {
background: var(--source-color);
}
.dot.target {
background: var(--visited-fill);
border: 1px solid var(--target-color);
}
.dot.none {
background: var(--map-fill);
border: 1px solid var(--map-stroke);
}
@media (max-width: 768px) {
#export-network .map-scroll-container {
display: block;
}
#export-network svg {
min-width: 250%;
height: 100%;
object-fit: cover;
}
.legend {
width: 90%;
flex-wrap: wrap;
bottom: 10px;
justify-content: center;
}
#export-network .map-box {
height: 65vh;
}
}
/*Blog Carousel*/
/* -------------------------------------------------- */
/* SECTION */
/* -------------------------------------------------- */
#blog-carousel {
padding: 60px 0;
overflow: hidden;
/* Sayfa taşmasını engeller */
}
/* .container {
max-width: 1200px;
margin: 0 auto;
padding: 0 15px;
position: relative; !* Okları buna göre hizalayacağız *!
}*/
.section-title {
color: var(--title-color);
font-family: var(--heading-font);
text-align: center;
margin-bottom: 50px;
font-size: 2.2rem;
}
/* -------------------------------------------------- */
/* SWIPER WRAPPER (YENİ EKLEME) */
/* -------------------------------------------------- */
/* Okları dışarı taşımak için bu sarmalayıcıyı kullanıyoruz */
.slider-wrapper-relative {
position: relative;
padding: 0 50px;
/* Oklar için sağdan soldan yer açtık */
}
.blogSwiper {
padding-bottom: 50px !important;
/* Pagination için alt boşluk */
overflow: hidden;
/* Kutuların taşmasını engeller, sadece slider alanı görünür */
}
.swiper-slide {
height: auto;
display: flex;
justify-content: center;
}
/* -------------------------------------------------- */
/* OKLAR (ARROWS) */
/* -------------------------------------------------- */
.swiper-button-prev,
.swiper-button-next {
width: 54px;
height: 54px;
border-radius: 50%;
/*background: rgba(0, 141, 210, 0.1);
border: 1px solid var(--primary-color);*/
color: var(--primary-color);
transition: 0.3s ease;
z-index: 50;
}
/* Ok ikon boyutunu ayarla */
.swiper-button-prev::after,
.swiper-button-next::after {
font-size: 30px;
font-weight: bold;
}
.swiper-button-prev:hover,
.swiper-button-next:hover {
background: var(--primary-color);
color: #fff;
box-shadow: 0 0 15px rgba(0, 141, 210, 0.6);
}
/* Okları wrapper'ın kenarlarına sabitle */
.custom-prev {
left: 0 !important;
}
.custom-next {
right: 0 !important;
}
/* Mobilde okları gizle veya küçült */
@media (max-width: 768px) {
.slider-wrapper-relative {
padding: 0;
/* Mobilde kenar boşluğunu kaldır */
}
.swiper-button-prev,
.swiper-button-next {
display: none;
/* Mobilde okları gizle */
}
}
/* Pagination Rengi */
.swiper-pagination-bullet {
background: #fff;
opacity: 0.3;
border: 1px var(--primary-color) solid;
}
.swiper-pagination-bullet-active {
background: var(--primary-color);
opacity: 1;
}
/* -------------------------------------------------- */
/* BLOG CARD */
/* -------------------------------------------------- */
.blog-card {
background: var(--card-bg);
border-radius: 18px;
border: 1px solid rgba(255, 255, 255, 0.10);
box-shadow: 0 0 15px rgba(0, 0, 0, 0.35);
display: flex;
flex-direction: column;
width: 100%;
transition: transform .3s, box-shadow .3s, border-color .3s;
position: relative;
}
.blog-card:hover {
transform: translateY(-6px);
box-shadow: var(--glow-shadow);
border-color: var(--primary-color);
}
.blog-image-wrap {
width: 100%;
height: 200px;
position: relative;
border-radius: 18px 18px 0 0;
overflow: visible;
}
.blog-image {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s;
border-radius: 18px;
}
.blog-card:hover .blog-image {
transform: scale(1.05);
}
/* Yazar Kutusu */
.blog-card .author-box {
position: absolute;
bottom: -24px;
left: 20px;
display: flex;
align-items: center;
gap: 10px;
z-index: 50;
}
.blog-card .author-avatar {
width: 44px;
height: 44px;
border-radius: 50%;
border: 3px solid var(--card-bg);
object-fit: cover;
}
.blog-card .author-name {
font-size: 0.85rem;
color: #fff;
font-weight: 600;
background-color: rgba(0, 141, 210, 0.8);
padding: 2px 8px;
border-radius: 4px;
backdrop-filter: blur(4px);
}
/* İçerik */
.blog-card .blog-content {
padding: 35px 20px 25px;
display: flex;
flex-direction: column;
flex: 1;
}
.blog-card .blog-meta {
display: flex;
gap: 10px;
margin-bottom: 12px;
align-items: center;
}
.blog-card .blog-category {
background: var(--primary-color);
padding: 2px 4px;
border-radius: 5px;
font-size: 0.6rem;
font-weight: 600;
color: #fff;
/*text-transform: uppercase;*/
}
.blog-card .blog-date {
font-size: 0.75rem;
color: var(--text-muted);
}
.blog-card .blog-title {
font-size: 1.25rem;
font-family: var(--heading-font);
line-height: 1.4;
margin-bottom: 10px;
color: var(--title-color);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.blog-card .blog-excerpt {
color: var(--text-muted);
font-size: 0.9rem;
line-height: 1.6;
margin-bottom: 20px;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
flex-grow: 1;
}
.blog-card .blog-button {
text-align: center;
padding: 10px;
border-radius: 8px;
background: transparent;
border: 1px solid var(--primary-color);
color: var(--primary-color);
font-weight: 600;
text-decoration: none;
transition: 0.3s;
margin-top: auto;
/* Butonu alta it */
}
.blog-card .blog-button:hover {
background: var(--primary-color);
color: #fff;
}
/*sayılarla*/
#stats {
background: var(--bg-color);
color: var(--text-color);
}
#stats .section-title {
color: var(--title-color);
font-family: var(--heading-font);
text-align: center;
margin-bottom: 50px;
font-size: 2.2rem;
}
/* -------------------------
RESPONSIVE GRID
--------------------------*/
.stats-container {
max-width: 1200px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 25px;
/* Desktop – 5 veya kaç eleman varsa hepsi yan yana */
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
justify-items: center;
/* her kartı ortalar */
}
/* Tablet: 3 + 2 (alttaki 2 ortalanır) */
@media (max-width: 992px) {
.stats-container {
grid-template-columns: repeat(3, 1fr);
}
}
/* Mobil: 2 + 2 + 1 dizilim — son kalan ortalanır */
@media (max-width: 600px) {
.stats-container {
grid-template-columns: repeat(2, 1fr);
}
}
/* -------------------------
CARD DESIGN
--------------------------*/
.stat-card {
width: 100%;
max-width: 200px;
text-align: center;
padding: 28px 20px;
background: var(--card-bg);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: 0 0 15px rgba(0, 0, 0, 0.4);
transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
}
.stat-card:hover {
transform: translateY(-6px);
box-shadow: var(--glow-shadow);
border-color: var(--primary-color);
}
.stat-number-row {
display: inline-flex;
align-items: baseline;
gap: 4px;
font-family: var(--heading-font);
}
.stat-number {
font-size: 2.6rem;
font-weight: 700;
color: var(--primary-color);
}
.stat-plus {
font-size: 1.6rem;
font-weight: 700;
color: var(--primary-color);
}
.stat-label {
margin-top: 8px;
font-size: 1rem;
letter-spacing: 0.04em;
color: var(--text-muted);
font-family: var(--body-font);
}
@media (max-width: 600px) {
.stat-number {
font-size: 2.2rem;
}
}
/* -------------------------------------------------- */
/* FOOTER GRID & CERTIFICATES */
/* -------------------------------------------------- */
.footer-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 30px;
align-items: start;
}
@media (max-width: 992px) {
.footer-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 576px) {
.footer-grid {
grid-template-columns: 1fr;
}
}
/* GRID YAPISI */
.cert-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
width: 100%;
}
.cert-item {
position: relative;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 8px;
overflow: hidden;
aspect-ratio: 1 / 1;
display: flex;
align-items: center;
justify-content: center;
padding: 8px;
cursor: pointer;
box-sizing: border-box;
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.cert-item:hover {
transform: scale(1.05) translateY(-2px);
border-color: var(--primary-color, #008dd2);
box-shadow: 0 5px 15px rgba(0, 141, 210, 0.25);
}
.cert-item a {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
.cert-item img {
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
object-fit: contain;
display: block;
transition: transform 0.3s ease;
}
/* -------------------------------------------------- */
/* LIGHTBOX */
/* -------------------------------------------------- */
#lightbox {
position: fixed;
z-index: 2000;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.9);
backdrop-filter: blur(10px);
/* Modern Glass Effect */
-webkit-backdrop-filter: blur(10px);
display: none;
align-items: center;
opacity: 0;
transition: opacity 0.3s ease;
overscroll-behavior: none;
touch-action: none;
}
#lightbox.active {
display: flex;
opacity: 1;
justify-content: center;
}
/* Container for the image (centered) */
.lightbox-content {
position: relative;
max-width: 90vw;
max-height: 90vh;
display: flex;
justify-content: center;
align-items: center;
transition: transform 0.3s ease;
transform: scale(0.95);
}
#lightbox.active .lightbox-content {
transform: scale(1);
}
.lightbox-img {
max-width: 100%;
max-height: 90vh;
width: auto;
height: auto;
border-radius: 4px;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
border: none;
}
.lightbox-next i,
.lightbox-prev i {
color: white;
filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.6));
}
/* Fixed Controls (Viewport Relative) */
.lightbox-close {
position: fixed;
top: 30px;
right: 30px;
color: #fff;
font-size: 2.5rem;
cursor: pointer;
transition: 0.3s;
z-index: 2010;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
opacity: 0.7;
}
.lightbox-prev,
.lightbox-next {
position: fixed;
top: 50%;
transform: translateY(-50%);
color: #fff;
font-size: 2.5rem;
cursor: pointer;
padding: 20px;
transition: 0.3s;
user-select: none;
z-index: 2010;
opacity: 0.7;
}
.lightbox-prev {
left: 20px;
}
.lightbox-next {
right: 20px;
}
.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover {
color: var(--primary-color);
opacity: 1;
transform: translateY(-50%) scale(1.1);
/* Prev/Next maintain vertical center */
}
.lightbox-close:hover {
transform: scale(1.1);
/* Close btn only scales */
}
@media (max-width: 768px) {
.lightbox-prev,
.lightbox-next {
font-size: 2rem;
padding: 10px;
}
.lightbox-prev {
left: 10px;
}
.lightbox-next {
right: 10px;
}
.lightbox-close {
top: 20px;
right: 20px;
font-size: 2rem;
}
}
/* -------------------------------------------------- */
/* PROJECT PAGE STYLES */
/* -------------------------------------------------- */
/* Breadcrumbs */
.breadcrumb-area {
background: var(--card-bg);
/* Use var for theme support */
padding: 15px 0;
font-size: 0.9rem;
border-bottom: 1px solid rgba(128, 128, 128, 0.1);
}
.breadcrumb {
display: flex;
list-style: none;
padding: 0;
margin: 0;
}
.breadcrumb li {
margin-right: 10px;
color: var(--text-muted);
}
.breadcrumb li a {
color: var(--primary-color);
text-decoration: none;
font-weight: 500;
}
.breadcrumb li::after {
content: '/';
margin-left: 10px;
color: var(--text-muted);
opacity: 0.5;
}
.breadcrumb li:last-child::after {
content: '';
}
.breadcrumb li:last-child {
color: var(--text-color);
opacity: 0.8;
}
/* Project Hero */
.project-hero {
height: 50vh;
/* Increased height */
min-height: 400px;
background-size: cover;
background-position: center center;
/* Explicitly Center Center */
/* background-attachment: fixed;*/
/* Parallax */
position: relative;
display: flex;
align-items: center;
justify-content: center;
/* Center Content */
color: #fff;
margin-bottom: 0;
text-align: center;
/* Center Text */
}
.project-hero .overlay {
background: rgba(0, 0, 0, 0.7);
/* Darker overlay */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.project-hero .hero-content {
position: relative;
z-index: 2;
max-width: 800px;
/* Limit width */
}
.project-category {
display: inline-block;
background: var(--primary-color);
padding: 6px 18px;
border-radius: 50px;
font-size: 0.85rem;
font-weight: 600;
text-transform: uppercase;
margin-bottom: 15px;
letter-spacing: 1px;
}
.project-hero h1 {
font-size: 3.5rem;
margin-bottom: 15px;
font-family: 'Orbitron', sans-serif;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}
.project-hero p {
font-size: 1.25rem;
opacity: 0.95;
margin: 0 auto;
text-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
}
/* Main Layout */
.project-grid-layout {
display: grid;
grid-template-columns: 2fr 1fr;
grid-template-rows: min-content 1fr;
/* Fixes vertical gap by tightening first row */
gap: 40px;
align-items: start;
grid-template-areas:
"header sidebar"
"content sidebar";
}
.project-header {
grid-area: header;
margin-bottom: 0px;
/* Use order for mobile reordering reference */
}
.project-main {
grid-area: content;
}
.project-sidebar {
grid-area: sidebar;
position: sticky;
top: 100px;
z-index: 90;
}
/* Specific Widget Ordering for Mobile Split */
@media (max-width: 992px) {
.project-grid-layout {
display: flex;
flex-direction: column;
gap: 0;
/* Let margins handle spacing */
}
/* Unwrap the sidebar so children become flex items of .project-grid-layout */
.project-sidebar {
display: contents;
}
/*
Mobile Order Strategy:
1. Header (Proje Hakkında)
2. Stats Widget (Künye) - from inside Sidebar
3. Main Content (Text)
4. CTA Widget (Teklif) - from inside Sidebar
*/
.project-header {
order: 1;
margin-bottom: 20px;
}
/* Target widgets directly since sidebar is 'contents' */
.sidebar-widget.stats-widget {
order: 2;
margin-bottom: 30px;
width: 100%;
}
.project-main {
order: 3;
margin-bottom: 40px;
}
.sidebar-widget.cta-widget {
order: 4;
margin-bottom: 30px;
}
/* Reset Typography for Mobile Header if needed */
.project-hero h1 {
font-size: 2.5rem;
}
}
/* Content Styles */
.section-title-left {
font-family: 'Orbitron', sans-serif;
font-size: 2rem;
margin-bottom: 20px;
color: var(--title-color);
position: relative;
padding-left: 15px;
}
.section-title-left::before {
content: '';
position: absolute;
left: 0;
top: 5px;
height: 30px;
width: 4px;
background: var(--primary-color);
}
.lead-text {
font-size: 1.15rem;
color: var(--text-color);
line-height: 1.7;
margin-bottom: 20px;
font-weight: 500;
}
/* FLEXIBLE GALLERY GRID */
/* FLEXIBLE GALLERY GRID */
.gallery-heading {
margin-top: 60px;
margin-bottom: 30px;
color: var(--title-color);
font-family: var(--heading-font);
}
.gallery-grid {
display: grid;
grid-template-columns: repeat(var(--cols-lg, 3), 1fr);
gap: var(--gap, 20px);
width: 100%;
}
.gallery-item {
width: 100%;
position: relative;
overflow: hidden;
border-radius: 8px;
cursor: pointer;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
@media (max-width: 992px) {
.gallery-grid {
grid-template-columns: repeat(var(--cols-md, 2), 1fr);
}
}
@media (max-width: 576px) {
.gallery-grid {
grid-template-columns: repeat(var(--cols-sm, 1), 1fr);
}
}
.gallery-item a {
display: block;
width: 100%;
height: 100%;
position: relative;
}
/* ÇÖZÜMÜN ANA NOKTASI BURASI */
.gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s ease;
aspect-ratio: var(--gorsel-orani, 4 / 3);
}
/* Orijinal boyut seçildiğinde kesilmeyi önleyen kural */
.gallery-grid[style*="--gorsel-orani: auto"] .gallery-item img {
height: auto;
object-fit: contain;
aspect-ratio: auto;
}
.gallery-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.45);
opacity: 0;
display: flex;
align-items: center;
justify-content: center;
transition: opacity 0.35s ease;
z-index: 2;
pointer-events: none;
}
.gallery-overlay i {
color: #fff;
font-size: 1.6rem;
background: rgba(0, 141, 210, 0.85);
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
backdrop-filter: blur(5px);
transform: scale(0.5);
transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}
/* 1. EFEKT: ZOOM & OVERLAY */
.gallery-item.hover-zoom:hover img {
transform: scale(1.08);
}
.gallery-item.hover-zoom:hover .gallery-overlay,
.gallery-item:not(.no-hover):not(.hover-corner-border):not(.hover-shine-lift):hover .gallery-overlay {
opacity: 1;
}
.gallery-item.hover-zoom:hover .gallery-overlay i,
.gallery-item:not(.no-hover):not(.hover-corner-border):not(.hover-shine-lift):hover .gallery-overlay i {
transform: scale(1);
}
/* 2. EFEKT: CORNER DRAW BORDER (Köşeden Başlayıp İki Ters Yönde İlerleyip Karşı Köşede Birleşen Border) */
.gallery-item.hover-corner-border::before,
.gallery-item.hover-corner-border::after {
content: '';
position: absolute;
box-sizing: border-box;
width: 0;
height: 0;
z-index: 3;
pointer-events: none;
}
/* 1. Kol: Sol-Üst'ten başlayıp önce ÜST kenarı sola->sağa, sonra SAĞ kenarı yukarı->aşağı çizer */
.gallery-item.hover-corner-border::before {
top: 0;
left: 0;
border-top: 3px solid var(--primary-color, #008dd2);
border-right: 3px solid var(--primary-color, #008dd2);
transition: height 0.2s ease-in, width 0.2s ease-in 0.2s;
}
/* 2. Kol: Sol-Üst'ten başlayıp önce SOL kenarı yukarı->aşağı, sonra ALT kenarı soldan->sağa çizer */
.gallery-item.hover-corner-border::after {
top: 0;
left: 0;
border-left: 3px solid var(--primary-color, #008dd2);
border-bottom: 3px solid var(--primary-color, #008dd2);
transition: width 0.2s ease-in, height 0.2s ease-in 0.2s;
}
/* Hover anında: İki çizgi zıt yönlerden eşzamanlı koşup Sağ-Alt köşede buluşur */
.gallery-item.hover-corner-border:hover::before {
width: 100%;
height: 100%;
transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;
}
.gallery-item.hover-corner-border:hover::after {
width: 100%;
height: 100%;
transition: height 0.25s ease-out, width 0.25s ease-out 0.25s;
}
.gallery-item.hover-corner-border:hover img {
transform: scale(1.04);
filter: brightness(0.9);
}
.gallery-item.hover-corner-border:hover {
box-shadow: 0 12px 30px rgba(0, 141, 210, 0.25);
}
.gallery-item.hover-corner-border:hover .gallery-overlay {
opacity: 1;
background: rgba(0, 0, 0, 0.35);
}
.gallery-item.hover-corner-border:hover .gallery-overlay i {
transform: scale(1);
}
/* 3. EFEKT: SHINE & 3D LIFT (Işık Dalgası & Yükselme) */
.gallery-item.hover-shine-lift {
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}
.gallery-item.hover-shine-lift::before {
content: '';
position: absolute;
top: 0;
left: -130%;
width: 60%;
height: 100%;
background: linear-gradient(120deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.4) 50%,
rgba(255, 255, 255, 0) 100%);
transform: skewX(-25deg);
z-index: 3;
pointer-events: none;
transition: none;
}
.gallery-item.hover-shine-lift:hover {
transform: translateY(-8px);
box-shadow: 0 18px 36px rgba(0, 141, 210, 0.28), 0 0 0 1px rgba(0, 141, 210, 0.35);
}
.gallery-item.hover-shine-lift:hover::before {
left: 180%;
transition: left 0.75s cubic-bezier(0.25, 1, 0.5, 1);
}
.gallery-item.hover-shine-lift:hover img {
transform: scale(1.05);
}
.gallery-item.hover-shine-lift:hover .gallery-overlay {
opacity: 1;
background: rgba(0, 0, 0, 0.25);
}
.gallery-item.hover-shine-lift:hover .gallery-overlay i {
transform: scale(1);
}
/* 4. PASİF / NO-HOVER */
.gallery-item.no-hover:hover {
transform: none !important;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
}
.gallery-item.no-hover:hover img {
transform: none !important;
}
.gallery-item.no-hover .gallery-overlay {
display: none !important;
}
/* Sidebar Widgets */
.project-sidebar {
/* Additional override references inside sidebar if any */
}
/* Note: Main Sidebar positioning logic is handled in Layout section above */
.sidebar-widget {
background: var(--card-bg);
padding: 30px;
border-radius: 10px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
margin-bottom: 30px;
border: 1px solid rgba(128, 128, 128, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.sidebar-widget:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
.stats-widget h3 {
font-family: 'Orbitron', sans-serif;
margin-bottom: 20px;
font-size: 1.3rem;
border-bottom: 1px solid rgba(128, 128, 128, 0.1);
padding-bottom: 10px;
color: var(--title-color);
}
.project-stats-list {
list-style: none;
padding: 0;
margin: 0;
}
.project-stats-list li {
display: flex;
justify-content: space-between;
padding: 12px 0;
border-bottom: 1px solid rgba(128, 128, 128, 0.1);
color: var(--text-color);
}
.project-stats-list li:last-child {
border-bottom: none;
}
.project-stats-list .label i {
color: var(--primary-color);
margin-right: 8px;
width: 20px;
}
.project-stats-list .value {
font-weight: 600;
color: var(--title-color);
}
.cta-widget {
background: #1a1a24;
color: #fff;
text-align: center;
border: 1px solid rgba(255, 255, 255, 0.05);
}
.cta-widget i {
font-size: 3rem;
margin-bottom: 15px;
color: var(--primary-color);
}
.cta-widget h4 {
margin-bottom: 10px;
color: #fff;
}
.cta-widget p {
font-size: 0.9rem;
opacity: 0.8;
margin-bottom: 20px;
color: #ccc;
}
/* Downloads */
.downloads-heading {
margin-top: 60px;
margin-bottom: 30px;
color: var(--title-color);
font-family: var(--heading-font);
}
.downloads-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 20px;
margin-top: 20px;
}
.download-item {
display: flex;
align-items: center;
background: var(--card-bg);
padding: 15px;
border-radius: 8px;
border: 1px solid rgba(128, 128, 128, 0.1);
text-decoration: none;
transition: 0.3s;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}
.download-item:hover {
border-color: var(--primary-color);
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0, 141, 210, 0.15);
}
.icon-file {
font-size: 2rem;
color: var(--text-muted);
margin-right: 15px;
}
.file-info {
flex-grow: 1;
display: flex;
flex-direction: column;
}
.filename {
color: var(--title-color);
font-weight: 600;
font-size: 0.95rem;
}
.filesize {
font-size: 0.8rem;
color: var(--text-muted);
}
.icon-download {
color: var(--primary-color);
font-size: 1.2rem;
}
/* Project Nav Area */
.project-nav-area {
padding: 40px 0;
margin-top: 60px;
border-top: 1px solid rgba(128, 128, 128, 0.1);
background: var(--bg-color);
}
.project-nav {
display: flex;
justify-content: space-between;
align-items: center;
}
.nav-btn {
display: flex;
align-items: center;
color: var(--text-color);
text-decoration: none;
transition: 0.3s;
max-width: 45%;
background: var(--card-bg);
padding: 15px;
border-radius: 8px;
border: 1px solid transparent;
}
.nav-btn:hover {
border-color: var(--primary-color);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
/* Nav Thumbnails */
.nav-img {
width: 60px;
height: 60px;
border-radius: 6px;
overflow: hidden;
margin: 0 15px;
flex-shrink: 0;
}
.nav-img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.nav-btn .arrow {
width: 30px;
height: 30px;
background: rgba(128, 128, 128, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: 0.3s;
color: var(--text-color);
flex-shrink: 0;
}
.nav-btn:hover .arrow {
background: var(--primary-color);
color: #fff;
}
.nav-btn .text {
display: flex;
flex-direction: column;
}
.nav-btn .text span {
font-size: 0.75rem;
opacity: 0.6;
text-transform: uppercase;
margin-bottom: 2px;
}
.nav-btn .text strong {
font-size: 1rem;
line-height: 1.2;
color: var(--title-color);
}
/* Prev Button Layout */
.nav-btn.prev {
text-align: left;
width: auto;
min-width: 300px;
}
/* Order: Arrow - Image - Text */
.nav-btn.prev .arrow {
margin-right: 15px;
}
/*. */
/* Next Button Layout */
.nav-btn.next {
text-align: right;
flex-direction: row !important;
justify-content: space-between !important;
/* Removed width: 100% to prevent stretching */
width: auto;
min-width: 300px;
/* Ensure a decent click area but don't stretch */
}
.nav-btn.next .arrow {
margin-left: 15px;
order: 3 !important;
}
.nav-btn.next .nav-img {
margin: 0 15px;
order: 2 !important;
}
.nav-btn.next .text {
align-items: flex-end;
order: 1 !important;
text-align: right;
flex-grow: 1;
/* Push others */
}
@media (max-width: 768px) {
.project-nav {
flex-direction: column;
gap: 20px;
}
.nav-btn {
max-width: 100%;
width: 100%;
justify-content: space-between;
}
.nav-btn.next {
flex-direction: row !important;
justify-content: space-between !important;
}
.back-grid {
order: -1;
margin-bottom: 10px;
display: none;
}
}
/* Lightbox Counter */
.lightbox-counter {
position: absolute;
top: 30px;
left: 30px;
color: #fff;
font-size: 1rem;
background: rgba(0, 0, 0, 0.5);
padding: 5px 15px;
border-radius: 20px;
backdrop-filter: blur(5px);
z-index: 2010;
}
/* -------------------------------------------------- */
/* GENERIC PAGE STYLES (About, Privacy, etc.) */
/* -------------------------------------------------- */
/* ... (Existing generic styles preserved) ... */
/* -------------------------------------------------- */
/* STANDARD PAGE STYLES (Defaults, Blog, etc.) */
/* -------------------------------------------------- */
/* Layout Wrapper */
/* Layout Wrapper */
.standard-page-layout {
display: grid;
grid-template-columns: 3fr 1fr;
gap: 50px;
align-items: start;
position: relative;
}
/* OPTION: No Sidebar (controlled by class) */
.standard-page-layout.no-sidebar {
display: block;
}
/* Hide sidebar if container has no-sidebar class */
.standard-page-layout.no-sidebar .project-sidebar {
display: none;
}
/* Responsive Standard Layout */
@media (max-width: 992px) {
.standard-page-layout {
grid-template-columns: 1fr;
}
.standard-page-layout .project-sidebar {
margin-top: 50px;
}
}
/* Content Styling */
.content-block .featured-image {
width: 100%;
border-radius: 8px;
margin-bottom: 30px;
}
.content-block h2.article-title {
font-size: 2.2rem;
margin-bottom: 15px;
color: var(--title-color);
font-family: var(--heading-font);
}
.content-block h3 {
font-family: var(--heading-font);
font-size: 1.5rem;
color: var(--title-color);
margin-top: 30px;
margin-bottom: 15px;
text-transform: uppercase;
letter-spacing: 1px;
}
.content-block p {
margin-bottom: 20px;
line-height: 1.8;
color: var(--text-color);
font-size: 1.05rem;
}
.content-block ul {
margin-bottom: 30px;
padding-left: 20px;
}
.content-block ul li {
margin-bottom: 10px;
position: relative;
padding-left: 10px;
}
.content-block ul li::before {
content: '\f101';
/* FontAwesome angle-double-right */
font-family: "Font Awesome 6 Free";
font-weight: 900;
color: var(--primary-color);
position: absolute;
left: -15px;
top: 2px;
}
.content-block blockquote {
background: var(--bg-color);
/* Light gray */
border-left: 4px solid var(--primary-color);
padding: 25px;
margin: 30px 0;
font-style: italic;
font-size: 1.1rem;
color: var(--title-color);
border-radius: 0 8px 8px 0;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}
.meta-info {
margin-bottom: 30px;
padding-bottom: 20px;
border-bottom: 1px solid rgba(128, 128, 128, 0.1);
color: var(--text-muted);
font-size: 0.9rem;
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.meta-info span {
margin-right: 0;
/* Handled by gap */
}
.meta-info i {
color: var(--primary-color);
margin-right: 8px;
}
/* Widgets Styling */
/* Search */
.search-form {
display: flex;
gap: 10px;
}
.search-form input {
flex: 1;
padding: 10px 15px;
border: 1px solid rgba(128, 128, 128, 0.2);
border-radius: 4px;
background: var(--bg-color);
color: var(--text-color);
}
.search-form button {
background: var(--primary-color);
color: #fff;
border: none;
padding: 0 15px;
border-radius: 4px;
cursor: pointer;
}
/* Categories */
.widget-categories ul {
list-style: none;
padding: 0;
}
.widget-categories li {
border-bottom: 1px solid rgba(128, 128, 128, 0.05);
}
.widget-categories li:last-child {
border-bottom: none;
}
.widget-categories a {
display: flex;
justify-content: space-between;
padding: 12px 0;
color: var(--text-color);
text-decoration: none;
transition: 0.3s;
}
.widget-categories a:hover {
color: var(--primary-color);
padding-left: 5px;
}
.widget-categories span {
background: rgba(128, 128, 128, 0.1);
padding: 2px 8px;
border-radius: 10px;
font-size: 0.8rem;
}
/* Related Posts */
.recent-list {
list-style: none;
padding: 0;
}
.recent-list li {
margin-bottom: 20px;
}
.recent-list li:last-child {
margin-bottom: 0;
}
.recent-list a {
display: flex;
gap: 15px;
text-decoration: none;
align-items: center;
}
.recent-list img {
width: 60px;
height: 60px;
object-fit: cover;
border-radius: 6px;
}
.recent-list .post-info {
display: flex;
flex-direction: column;
}
.recent-list .post-info span {
color: var(--title-color);
font-weight: 500;
font-size: 0.95rem;
line-height: 1.3;
transition: 0.3s;
}
.recent-list a:hover span {
color: var(--primary-color);
}
.recent-list .post-info small {
color: var(--text-muted);
font-size: 0.85rem;
margin-top: 5px;
}
/* -------------------------------------------------- */
/* GENERIC PAGE STYLES (About, Privacy, etc.) */
/* -------------------------------------------------- */
/* Page Hero (Smaller than Home/Project Hero) */
.page-hero {
height: 40vh;
min-height: 300px;
background-size: cover;
background-position: center;
position: relative;
display: flex;
align-items: center;
color: #fff;
margin-bottom: 0;
}
.page-hero .overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5));
}
.page-hero .container {
position: relative;
z-index: 2;
}
.page-hero h1 {
font-size: 3rem;
font-family: var(--heading-font);
margin-bottom: 10px;
}
.page-hero .breadcrumb {
display: flex;
gap: 10px;
list-style: none;
padding: 0;
opacity: 0.8;
font-size: 0.9rem;
}
.page-hero .breadcrumb li::after {
content: '/';
margin-left: 10px;
color: var(--primary-color);
}
.page-hero .breadcrumb li:last-child::after {
display: none;
}
.page-hero .breadcrumb a {
color: #fff;
text-decoration: none;
}
/* Page Sections */
.page-section {
padding: 80px 0;
}
.section-dark {
background-color: var(--card-bg);
}
/* Layout: Split (Text + Image) */
.split-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
}
.split-content .sub-title {
color: var(--primary-color);
letter-spacing: 2px;
font-size: 0.9rem;
margin-bottom: 10px;
font-weight: 600;
}
.split-content .lead-text {
font-size: 1.1rem;
color: var(--text-color);
/* Lighter than title */
margin-bottom: 20px;
line-height: 1.6;
}
.split-image {
position: relative;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}
.split-image img {
width: 100%;
display: block;
transition: 0.5s;
}
.split-image:hover img {
transform: scale(1.05);
}
.image-badge {
position: absolute;
bottom: 30px;
left: -20px;
background: var(--primary-color);
color: #fff;
padding: 15px 30px;
display: flex;
align-items: center;
gap: 15px;
box-shadow: 0 10px 20px rgba(0, 141, 210, 0.3);
border-radius: 0 8px 8px 0;
}
/* Stats Row in Text */
.stat-row {
display: flex;
gap: 40px;
margin-top: 30px;
border-top: 1px solid rgba(128, 128, 128, 0.2);
padding-top: 30px;
}
.mini-stat strong {
display: block;
font-size: 2rem;
color: var(--title-color);
font-family: var(--heading-font);
line-height: 1;
}
.mini-stat span {
font-size: 0.9rem;
color: var(--text-muted);
}
/* Layout: Info Cards (Mission/Vision) */
.grid-3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}
.info-card {
background: var(--bg-color);
padding: 40px;
border-radius: 8px;
border: 1px solid rgba(128, 128, 128, 0.1);
transition: 0.3s;
position: relative;
top: 0;
}
.info-card.featured {
border-color: var(--primary-color);
box-shadow: 0 10px 30px rgba(0, 141, 210, 0.1);
}
.info-card:hover {
top: -10px;
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}
.info-card .icon-box {
width: 60px;
height: 60px;
background: rgba(0, 141, 210, 0.1);
color: var(--primary-color);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
margin-bottom: 25px;
}
.info-card h3 {
margin-bottom: 15px;
font-family: var(--heading-font);
}
/* Layout: Full Width Text (Privacy etc) */
.full-width-content {
max-width: 800px;
margin: 0 auto;
}
.full-width-content h2 {
text-align: center;
margin-bottom: 30px;
}
.full-width-content p {
margin-bottom: 20px;
line-height: 1.8;
}
.full-width-content blockquote {
border-left: 4px solid var(--primary-color);
padding-left: 20px;
margin: 30px 0;
font-style: italic;
color: var(--title-color);
font-size: 1.2rem;
background: rgba(128, 128, 128, 0.05);
padding: 20px;
border-radius: 0 8px 8px 0;
}
/* Responsive Generic Page */
@media (max-width: 992px) {
.split-grid,
.grid-3 {
grid-template-columns: 1fr;
gap: 40px;
}
.split-image {
order: -1;
}
.page-hero h1 {
font-size: 2.2rem;
}
}
/* -------------------------------------------------- */
/* SINGLE PAGE TEMPLATE (Magazine Style) */
/* -------------------------------------------------- */
/* Single Hero */
.single-hero {
height: 60vh;
min-height: 400px;
background-size: cover;
background-position: center;
position: relative;
display: flex;
align-items: flex-end;
/* Text at bottom */
padding-bottom: 60px;
margin-bottom: 60px;
}
.single-hero .overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.2));
}
.single-hero .hero-content {
position: relative;
z-index: 2;
max-width: 900px;
}
.hero-meta {
margin-bottom: 15px;
display: flex;
gap: 15px;
align-items: center;
}
.category-badge {
background: var(--primary-color);
color: #fff;
padding: 5px 12px;
border-radius: 4px;
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
}
.hero-meta .date {
color: rgba(255, 255, 255, 0.8);
font-size: 0.9rem;
}
.article-title-large {
font-size: 3rem;
line-height: 1.2;
margin-bottom: 20px;
color: #fff;
font-family: var(--heading-font);
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}
.author-mini {
display: flex;
align-items: center;
gap: 10px;
color: #fff;
}
.author-mini img {
width: 40px;
height: 40px;
border-radius: 50%;
border: 2px solid var(--primary-color);
}
/* Single Layout */
.single-post-layout {
display: grid;
grid-template-columns: 3fr 1fr;
/* Content dominant */
gap: 60px;
align-items: start;
overflow: visible;
/* Ensure sticky works */
}
/* Sidebar İstenmezse Kullanılacak Class */
.single-post-layout.no-sidebar {
grid-template-columns: 1fr;
}
/* Single Sidebar */
.single-sidebar {
position: sticky;
top: 100px;
height: fit-content;
}
@media (max-width: 992px) {
.single-post-layout {
grid-template-columns: 1fr;
}
.article-title-large {
font-size: 2rem;
}
}
/* Typography Enhancements */
.lead-paragraph {
font-size: 1.3rem !important;
line-height: 1.6 !important;
font-weight: 300;
color: var(--title-color) !important;
margin-bottom: 30px !important;
}
/* Author Box */
.single-post-layout .author-box {
background: var(--bg-color);
border: 1px solid rgba(128, 128, 128, 0.1);
padding: 30px;
border-radius: 8px;
margin-top: 50px;
display: flex;
gap: 25px;
align-items: flex-start;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.single-post-layout .author-box:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
.single-post-layout .author-img img {
width: 80px;
height: 80px;
border-radius: 50%;
object-fit: cover;
}
.single-post-layout .author-info h4 {
margin-bottom: 5px;
font-family: var(--heading-font);
font-size: 1.2rem;
}
.single-post-layout .author-info .role {
color: var(--primary-color);
font-size: 0.85rem;
display: block;
margin-bottom: 10px;
text-transform: uppercase;
font-weight: 600;
}
.single-post-layout .author-info p {
font-size: 0.95rem;
color: var(--text-muted);
line-height: 1.6;
margin-bottom: 15px;
}
.single-post-layout .author-social a {
color: var(--text-muted);
margin-right: 15px;
transition: 0.3s;
}
.single-post-layout .author-social a:hover {
color: var(--primary-color);
}
/* Related Carousel */
.related-section {
padding-top: 60px;
padding-bottom: 80px;
border-top: 1px solid rgba(128, 128, 128, 0.1);
}
.related-card {
background: var(--bg-color);
border-radius: 8px;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
transition: 0.3s;
}
.related-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}
.rc-image {
position: relative;
height: 200px;
}
.rc-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.rc-image .tag {
position: absolute;
top: 15px;
left: 15px;
background: rgba(0, 0, 0, 0.7);
color: #fff;
padding: 3px 10px;
border-radius: 4px;
font-size: 0.75rem;
}
.rc-content {
padding: 20px;
}
.rc-content h3 {
font-size: 1.1rem;
margin-bottom: 10px;
line-height: 1.4;
}
.rc-content h3 a {
text-decoration: none;
color: var(--title-color);
transition: 0.3s;
}
.rc-content h3 a:hover {
color: var(--primary-color);
}
.rc-content p {
font-size: 0.9rem;
color: var(--text-color);
margin-bottom: 15px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.rc-content .read-more {
font-size: 0.85rem;
color: var(--primary-color);
text-decoration: none;
font-weight: 600;
}
/* -------------------------------------------
DRS MODERN ILETISIM STYLES V3
------------------------------------------- */
/* Banner Area */
.drs-iletisim-banner {
position: relative;
height: 50vh;
min-height: 400px;
background: url('../../img/hero/hizmetler-hero.jpg') no-repeat center center/cover;
/* Fallback or existing clean hero image */
background-color: var(--bg-color);
display: flex;
align-items: center;
justify-content: center;
margin-top: var(--header-height);
}
.drs-iletisim-banner::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(13, 13, 18, 0.9), rgba(0, 141, 210, 0.1));
z-index: 1;
}
.drs-iletisim-banner .banner-icerik {
position: relative;
z-index: 2;
max-width: 800px;
}
.drs-iletisim-banner .banner-etiket {
display: inline-block;
padding: 8px 16px;
background: rgba(0, 141, 210, 0.2);
border: 1px solid var(--primary-color);
color: var(--primary-color);
border-radius: 30px;
font-size: 0.9rem;
font-weight: 600;
margin-bottom: 20px;
letter-spacing: 1px;
backdrop-filter: blur(5px);
}
.drs-iletisim-banner .banner-baslik {
font-size: 4rem;
font-weight: 800;
margin-bottom: 1rem;
background: linear-gradient(to right, #fff, #94a3b8);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
line-height: 1.1;
}
.drs-iletisim-banner .banner-aciklama {
font-size: 1.2rem;
color: var(--text-muted);
}
/* Content Area */
.iletisim-kapsayici {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 5rem;
align-items: start;
}
/* Left - Info Cards */
.iletisim-bilgileri .bilgi-baslik-wrap {
margin-bottom: 3rem;
}
.iletisim-bilgileri .bilgi-baslik-wrap h2 {
font-size: 2rem;
margin-bottom: 1rem;
}
.iletisim-bilgileri .bilgi-baslik-wrap p {
color: var(--text-muted);
}
.iletisim-bilgileri .bilgi-kartlari-grid {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.iletisim-bilgileri .modern-kart {
display: flex;
align-items: center;
gap: 1.5rem;
padding: 1.5rem;
background: var(--card-bg);
/* Use theme card bg */
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.05);
transition: transform 0.3s ease, border-color 0.3s ease;
}
.iletisim-bilgileri .modern-kart:hover {
transform: translateY(-5px);
border-color: var(--primary-color);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
.iletisim-bilgileri .modern-kart .kart-ikon {
width: 60px;
height: 60px;
background: linear-gradient(135deg, rgba(0, 141, 210, 0.1), rgba(0, 141, 210, 0.05));
color: var(--primary-color);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
}
.iletisim-bilgileri .modern-kart h6 {
font-size: 0.9rem;
color: var(--text-muted);
text-transform: uppercase;
font-weight: 600;
margin-bottom: 5px;
}
.iletisim-bilgileri .modern-kart p,
.iletisim-bilgileri .modern-kart a {
font-size: 1.1rem;
color: var(--title-color);
font-weight: 500;
margin: 0;
line-height: 1.4;
}
.iletisim-bilgileri .modern-kart a:hover {
color: var(--primary-color);
}
/* Right - Form Glassmorphism */
.iletisim-form-alani .glass-form {
background: rgba(255, 255, 255, 0.03);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.1);
padding: 3rem;
border-radius: 20px;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}
.iletisim-form-alani .glass-form h3 {
margin-bottom: 2rem;
font-size: 1.8rem;
}
.iletisim-form-alani .form-satir {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
}
.iletisim-form-alani .input-wrap {
position: relative;
margin-bottom: 1.5rem;
}
.iletisim-form-alani input,
.iletisim-form-alani textarea {
width: 100%;
background: rgba(0, 0, 0, 0.2);
border: none;
border-bottom: 2px solid rgba(255, 255, 255, 0.1);
padding: 15px;
color: #fff;
font-family: var(--body-font);
font-size: 1rem;
border-radius: 4px 4px 0 0;
transition: all 0.3s;
}
/* Light Mode Input Adjustment */
body.light-mode .iletisim-form-alani input,
body.light-mode .iletisim-form-alani textarea {
background: rgba(255, 255, 255, 0.8);
color: #333;
border-bottom: 2px solid rgba(0, 0, 0, 0.1);
}
.iletisim-form-alani input:focus,
.iletisim-form-alani textarea:focus {
outline: none;
background: rgba(0, 0, 0, 0.3);
}
body.light-mode .iletisim-form-alani input:focus,
body.light-mode .iletisim-form-alani textarea:focus {
background: #fff;
}
/* Animated Focus Border */
.iletisim-form-alani .focus-border {
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background-color: var(--primary-color);
transition: 0.4s;
}
.iletisim-form-alani input:focus~.focus-border,
.iletisim-form-alani textarea:focus~.focus-border {
width: 100%;
}
.iletisim-form-alani .form-buton {
width: 100%;
padding: 15px;
font-size: 1rem;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
/* Map */
.drs-harita-alani {
line-height: 0;
filter: grayscale(100%);
transition: filter 0.5s;
}
.drs-harita-alani:hover {
filter: grayscale(0%);
}
/* Responsive */
@media (max-width: 900px) {
.iletisim-kapsayici {
grid-template-columns: 1fr;
gap: 3rem;
}
.drs-iletisim-banner .banner-baslik {
font-size: 2.5rem;
}
.iletisim-form-alani .form-satir {
grid-template-columns: 1fr;
}
}
/* ============================================
GLOBAL MOBILE OVERFLOW FIX
Tüm taşan öğeleri kontrol altına alır
============================================ */
@media (max-width: 768px) {
html,
body {
overflow-x: hidden;
width: 100%;
}
/* Global container limitleri */
.container,
section,
.section-padding {
max-width: 100vw;
/* overflow-x: hidden; /* Dikey kaydırma problemine yol açtığı için devre dışı bırakıldı */
}
/* Marquee overflow fix */
.marquee-wrapper,
.marquee-content {
max-width: 100vw;
}
/* Portfolio/Projeler overflow fix */
.portfolio-grid,
.portfolio-item {
max-width: 100%;
}
.portfolio-item img,
.portfolio-item .wp-post-image {
max-width: 100%;
width: 100%;
}
/* Swiper/Blog slider - overflow visible olmalı çünkü slides görünmeli */
.swiper {
max-width: 100vw;
overflow: visible !important;
}
.swiper-wrapper {
max-width: 100vw;
}
.blog-slider-block .swiper {
overflow: visible !important;
}
.blog-slider-block .swiper-wrapper {
display: flex;
}
.blog-slider-block .swiper-slide {
flex-shrink: 0;
width: 100% !important;
opacity: 1 !important;
visibility: visible !important;
}
/* Map scroll container - bu kasıtlı olarak scrollable */
.map-scroll-container {
max-width: 100vw;
}
/* Tüm görseller için genel kural */
img {
max-width: 100%;
height: auto;
}
/* Marquee mobilde daha hızlı akması için */
.marquee-content {
animation-duration: 15s !important;
}
.marquee-wrapper.reverse .marquee-content {
animation-duration: 18s !important;
}
}
/* ============================================
CONTACT FORM 7 - FORM TASARIMLARI
============================================
Ana Class: .drs-form
Tüm CF7 formlarına bu class'ı ekleyin.
============================================ */
/* Ana Form Container */
.drs-form {
width: 100%;
}
.drs-form .wpcf7-form {
display: flex;
flex-direction: column;
gap: 20px;
}
/* Grid Satır Sistemi */
.drs-form .form-row {
display: grid;
gap: 20px;
width: 100%;
}
.drs-form .form-row.col-2 {
grid-template-columns: repeat(2, 1fr);
}
.drs-form .form-row.col-3 {
grid-template-columns: repeat(3, 1fr);
}
.drs-form .form-row.col-4 {
grid-template-columns: repeat(4, 1fr);
}
/* Responsive Grid */
@media (max-width: 768px) {
.drs-form .form-row.col-2,
.drs-form .form-row.col-3,
.drs-form .form-row.col-4 {
grid-template-columns: 1fr;
}
}
@media (max-width: 992px) and (min-width: 769px) {
.drs-form .form-row.col-3,
.drs-form .form-row.col-4 {
grid-template-columns: repeat(2, 1fr);
}
}
/* Form Grubu */
.drs-form .form-group {
display: flex;
flex-direction: column;
gap: 8px;
}
/* Label Stilleri */
.drs-form label {
font-size: 0.9rem;
font-weight: 500;
color: var(--text-color);
display: flex;
align-items: center;
gap: 6px;
}
.drs-form label .required {
color: #ef4444;
font-weight: 600;
}
/* Input, Textarea, Select - Genel Stiller */
.drs-form input[type="text"],
.drs-form input[type="email"],
.drs-form input[type="tel"],
.drs-form input[type="url"],
.drs-form input[type="number"],
.drs-form input[type="date"],
.drs-form input[type="password"],
.drs-form select,
.drs-form textarea,
.drs-form .wpcf7-text,
.drs-form .wpcf7-email,
.drs-form .wpcf7-tel,
.drs-form .wpcf7-textarea,
.drs-form .wpcf7-select {
width: 100%;
padding: 14px 18px;
font-size: 1rem;
font-family: var(--body-font);
color: var(--text-color);
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
outline: none;
transition: all 0.3s ease;
}
body.light-mode .drs-form input[type="text"],
body.light-mode .drs-form input[type="email"],
body.light-mode .drs-form input[type="tel"],
body.light-mode .drs-form input[type="url"],
body.light-mode .drs-form input[type="number"],
body.light-mode .drs-form input[type="date"],
body.light-mode .drs-form input[type="password"],
body.light-mode .drs-form select,
body.light-mode .drs-form textarea,
body.light-mode .drs-form .wpcf7-text,
body.light-mode .drs-form .wpcf7-email,
body.light-mode .drs-form .wpcf7-tel,
body.light-mode .drs-form .wpcf7-textarea,
body.light-mode .drs-form .wpcf7-select {
background: rgba(0, 0, 0, 0.02);
border-color: rgba(0, 0, 0, 0.1);
}
/* Focus Durumu */
.drs-form input:focus,
.drs-form select:focus,
.drs-form textarea:focus {
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(0, 141, 210, 0.15);
background: rgba(0, 141, 210, 0.03);
}
/* Placeholder */
.drs-form input::placeholder,
.drs-form textarea::placeholder {
color: var(--text-muted);
opacity: 0.7;
}
/* Textarea */
.drs-form textarea,
.drs-form .wpcf7-textarea {
min-height: 150px;
resize: vertical;
line-height: 1.6;
}
/* Select */
.drs-form select,
.drs-form .wpcf7-select {
cursor: pointer;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-color: rgba(255, 255, 255, 0.03);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 15px center;
padding-right: 40px;
}
body.light-mode .drs-form select,
body.light-mode .drs-form .wpcf7-select {
background-color: rgba(0, 0, 0, 0.02);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 15px center;
}
/* Select Option Stilleri (Firefox'ta çalışır, Chrome sınırlı) */
.drs-form select option,
.drs-form .wpcf7-select option {
background-color: #16161e;
color: #e0e6ed;
padding: 10px;
}
body.light-mode .drs-form select option,
body.light-mode .drs-form .wpcf7-select option {
background-color: #ffffff;
color: #334155;
}
.drs-form .wpcf7-checkbox,
.drs-form .wpcf7-radio,
.drs-form .wpcf7-acceptance {
display: flex;
flex-wrap: wrap;
gap: 15px;
}
.drs-form .wpcf7-list-item {
display: flex;
align-items: center;
gap: 8px;
margin: 0;
}
.drs-form .wpcf7-list-item input[type="checkbox"],
.drs-form .wpcf7-list-item input[type="radio"] {
width: 20px;
height: 20px;
accent-color: var(--primary-color);
cursor: pointer;
}
.drs-form .wpcf7-list-item-label {
font-size: 0.95rem;
color: var(--text-color);
cursor: pointer;
}
/* File Upload */
.drs-form input[type="file"],
.drs-form .wpcf7-file {
padding: 12px;
background: rgba(255, 255, 255, 0.03);
border: 2px dashed rgba(255, 255, 255, 0.15);
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
}
.drs-form input[type="file"]:hover,
.drs-form .wpcf7-file:hover {
border-color: var(--primary-color);
background: rgba(0, 141, 210, 0.05);
}
body.light-mode .drs-form input[type="file"],
body.light-mode .drs-form .wpcf7-file {
background: rgba(0, 0, 0, 0.02);
border-color: rgba(0, 0, 0, 0.15);
}
/* Submit Button */
.drs-form input[type="submit"],
.drs-form .wpcf7-submit {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 16px 40px;
font-size: 1rem;
font-weight: 600;
font-family: var(--heading-font);
text-transform: uppercase;
letter-spacing: 1px;
color: #fff;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
border: none;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.drs-form input[type="submit"]:hover,
.drs-form .wpcf7-submit:hover {
transform: translateY(-2px);
box-shadow: 0 10px 30px rgba(0, 141, 210, 0.4);
}
.drs-form input[type="submit"]:active,
.drs-form .wpcf7-submit:active {
transform: translateY(0);
}
/* Submit Button - Outline Varyantı */
.drs-form.form-outline input[type="submit"],
.drs-form.form-outline .wpcf7-submit {
background: transparent;
border: 2px solid var(--primary-color);
color: var(--primary-color);
}
.drs-form.form-outline input[type="submit"]:hover,
.drs-form.form-outline .wpcf7-submit:hover {
background: var(--primary-color);
color: #fff;
}
/* Submit Button - Full Width */
.drs-form.btn-full input[type="submit"],
.drs-form.btn-full .wpcf7-submit {
width: 100%;
}
/* Submit Button - Center */
.drs-form.btn-center {
text-align: center;
}
/* Loading Durumu */
.drs-form .wpcf7-spinner {
margin-left: 10px;
}
/* Hata ve Başarı Mesajları */
.drs-form .wpcf7-response-output {
margin: 20px 0 0 0 !important;
padding: 15px 20px !important;
border-radius: 8px !important;
font-size: 0.95rem;
}
.drs-form .wpcf7-response-output.wpcf7-mail-sent-ok {
background: rgba(16, 185, 129, 0.1) !important;
border-color: #10b981 !important;
color: #10b981 !important;
}
.drs-form .wpcf7-response-output.wpcf7-validation-errors,
.drs-form .wpcf7-response-output.wpcf7-spam-blocked {
background: rgba(239, 68, 68, 0.1) !important;
border-color: #ef4444 !important;
color: #ef4444 !important;
}
/* Field Hata Durumu */
.drs-form .wpcf7-not-valid {
border-color: #ef4444 !important;
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15) !important;
}
.drs-form .wpcf7-not-valid-tip {
color: #ef4444;
font-size: 0.85rem;
margin-top: 5px;
}
/* Form Varyantları */
/* Glassmorphism Varyant */
.drs-form.form-glass {
background: rgba(255, 255, 255, 0.03);
backdrop-filter: blur(10px);
padding: 15px;
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.08);
}
body.light-mode .drs-form.form-glass {
background: rgba(255, 255, 255, 0.7);
border-color: rgba(0, 0, 0, 0.08);
}
/* Bordered Varyant */
.drs-form.form-bordered {
padding: 20px;
border: 2px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
}
body.light-mode .drs-form.form-bordered {
border-color: rgba(0, 0, 0, 0.1);
}
/* Card Varyant */
.drs-form.form-card {
background: var(--card-bg);
padding: 20px;
border-radius: 16px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}
/* Compact Varyant - Daha Küçük Padding */
.drs-form.form-compact input[type="text"],
.drs-form.form-compact input[type="email"],
.drs-form.form-compact input[type="tel"],
.drs-form.form-compact select,
.drs-form.form-compact textarea {
padding: 10px 14px;
font-size: 0.9rem;
}
.drs-form.form-compact .form-row {
gap: 15px;
}
.drs-form.form-compact textarea {
min-height: 100px;
}
/* Blog Archive Styles */
.blog-archive-page {
background: var(--bg-color);
}
.archive-hero {
background: linear-gradient(135deg, #0d0d12, #1a1a2e);
background-size: cover;
background-position: center;
padding: 140px 0 80px;
text-align: center;
position: relative;
}
.archive-hero-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(178deg, rgb(13 13 18 / 56%), rgb(26 26 46 / 47%));
z-index: 1;
}
.archive-hero .container {
position: relative;
z-index: 2;
}
.archive-hero h1,
.proje-hero-content h1 {
font-size: 2.5rem;
color: #ffffff !important;
margin-bottom: 15px;
}
.archive-hero p {
color: var(--text-muted);
font-size: 1.1rem;
margin-bottom: 30px;
}
/* Blog Search Form */
.blog-search-form {
max-width: 500px;
margin: 0 auto;
}
.search-input-wrapper {
display: flex;
background: var(--card-bg);
border-radius: 50px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.1);
transition: all 0.3s;
}
.search-input-wrapper:focus-within {
border-color: var(--primary-color);
box-shadow: 0 0 20px rgba(var(--primary-rgb), 0.2);
}
.search-input {
flex: 1;
padding: 15px 25px;
background: transparent;
border: none;
color: var(--text-color);
font-size: 1rem;
outline: none;
}
.search-input::placeholder {
color: var(--text-muted);
}
.search-submit {
padding: 15px 25px;
background: var(--primary-color);
border: none;
color: #fff;
cursor: pointer;
transition: all 0.3s;
}
.search-submit:hover {
background: var(--primary-dark, #d35400);
}
/* Filter Buttons */
.filter-buttons {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
margin-bottom: 40px;
}
.filter-btn {
padding: 10px 25px;
background: var(--card-bg);
border: 1px solid rgba(255, 255, 255, 0.1);
color: var(--text-color);
border-radius: 30px;
cursor: pointer;
transition: all 0.3s;
font-size: 0.9rem;
}
.filter-btn:hover,
.filter-btn.active {
background: var(--primary-color);
border-color: var(--primary-color);
color: #fff;
}
/* Blog Layout */
.blog-archive-layout {
display: grid;
gap: 40px;
}
.blog-archive-layout.with-sidebar {
grid-template-columns: 1fr 320px;
}
.blog-archive-layout.no-sidebar {
grid-template-columns: 1fr;
}
/* Blog Grid */
.blog-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
}
.blog-archive-layout.no-sidebar .blog-grid {
grid-template-columns: repeat(3, 1fr);
}
/* Blog Card */
.blog-card {
background: var(--card-bg);
border-radius: 15px;
overflow: hidden;
transition: all 0.3s;
}
.blog-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.blog-card a {
text-decoration: none;
color: inherit;
display: block;
}
.blog-card-image {
aspect-ratio: 16/10;
overflow: hidden;
}
.blog-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s;
}
.blog-card:hover .blog-card-image img {
transform: scale(1.1);
}
.blog-card-content {
padding: 25px;
}
.blog-card-category {
display: inline-block;
padding: 5px 12px;
background: rgba(var(--primary-rgb), 0.15);
color: var(--primary-color);
border-radius: 20px;
font-size: 0.75rem;
font-weight: 600;
margin-bottom: 12px;
text-transform: uppercase;
}
.blog-card h3 {
font-size: 1.1rem;
color: var(--title-color);
margin-bottom: 10px;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.blog-card p {
color: var(--text-muted);
font-size: 0.9rem;
line-height: 1.6;
margin-bottom: 15px;
}
.blog-card-meta {
display: flex;
align-items: center;
gap: 15px;
color: var(--text-muted);
font-size: 0.85rem;
}
.blog-card-meta i {
margin-right: 5px;
color: var(--primary-color);
}
/* Sidebar */
.blog-sidebar {
position: sticky;
top: 100px;
align-self: start;
}
/* No Results */
.no-results {
grid-column: 1 / -1;
text-align: center;
padding: 60px 20px;
color: var(--text-muted);
}
.no-results i {
font-size: 3rem;
margin-bottom: 20px;
opacity: 0.5;
}
/* Load More */
.load-more-container {
text-align: center;
margin-top: 50px;
}
.load-more-btn {
padding: 15px 40px;
background: var(--primary-color);
border: none;
color: #fff;
border-radius: 30px;
cursor: pointer;
font-size: 1rem;
font-weight: 600;
transition: all 0.3s;
display: inline-flex;
align-items: center;
gap: 10px;
}
.load-more-btn:hover {
background: var(--primary-dark, #d35400);
transform: translateY(-2px);
box-shadow: 0 5px 20px rgba(var(--primary-rgb), 0.3);
}
.load-more-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
}
.load-more-btn.loading .btn-text {
display: none;
}
.load-more-btn.loading .btn-spinner {
display: inline-flex !important;
align-items: center;
gap: 8px;
}
.all-loaded-message {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 20px;
color: var(--text-muted);
font-size: 1rem;
}
.all-loaded-message i {
color: #27ae60;
font-size: 1.2rem;
}
/* Responsive */
@media (max-width: 1024px) {
.blog-archive-layout.with-sidebar {
grid-template-columns: 1fr;
}
.blog-sidebar {
position: static;
margin-top: 40px;
}
}
@media (max-width: 768px) {
.blog-grid,
.blog-archive-layout.no-sidebar .blog-grid {
grid-template-columns: 1fr;
}
.archive-hero h1 {
font-size: 1.8rem;
}
.load-more-btn {
width: 100%;
justify-content: center;
}
}
/* =========================================
1. ARCHIVE HERO & HEADER BÖLÜMÜ
(Ana referans kodunda olmayan başlık alanı)
========================================= */
.archive-hero {
background: linear-gradient(135deg, #0d0d12, #1a1a2e);
background-size: cover;
background-position: center;
padding: 140px 0 80px;
text-align: center;
position: relative;
}
.archive-hero-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgb(13 13 18 / 49%), rgba(26, 26, 46, 0.9));
z-index: 1;
}
.archive-hero .container {
position: relative;
z-index: 2;
}
.archive-hero h1 {
font-size: 2.5rem;
color: var(--title-color);
margin-bottom: 15px;
}
.archive-hero p {
color: var(--text-muted);
font-size: 1.1rem;
margin-bottom: 30px;
}
/* =========================================
2. BLOG ARAMA FORMU (SEARCH)
========================================= */
.blog-search-form {
max-width: 500px;
margin: 0 auto;
}
.search-input-wrapper {
display: flex;
background: var(--card-bg);
border-radius: 50px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.1);
transition: all 0.3s;
}
.search-input-wrapper:focus-within {
border-color: var(--primary-color);
box-shadow: 0 0 20px rgba(var(--primary-rgb), 0.2);
}
.search-input {
flex: 1;
padding: 15px 25px;
background: transparent;
border: none;
color: var(--text-color);
font-size: 1rem;
outline: none;
}
.search-input::placeholder {
color: var(--text-muted);
}
.search-submit {
padding: 15px 25px;
background: var(--primary-color);
border: none;
color: #fff;
cursor: pointer;
transition: all 0.3s;
}
.search-submit:hover {
background: var(--primary-dark, #d35400);
}
/* =========================================
3. BREADCRUMB (SAYFA YOLU)
========================================= */
.breadcrumb {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin-bottom: 20px;
font-size: 0.9rem;
flex-wrap: wrap;
}
.breadcrumb a {
color: var(--text-muted);
text-decoration: none;
transition: color 0.3s;
}
.breadcrumb a:hover {
color: var(--primary-color);
}
.breadcrumb .separator {
color: var(--text-muted);
opacity: 0.5;
font-size: 0.7rem;
}
.breadcrumb .current {
color: var(--primary-color);
}
/* =========================================
4. PAGINATION (KLASİK SAYFALAMA)
(Eğer "Daha Fazla Yükle" butonu yerine bunu kullanacaksanız)
========================================= */
.pagination-container {
margin-top: 50px;
text-align: center;
}
.pagination-container .nav-links {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.pagination-container .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 45px;
height: 45px;
padding: 0 15px;
background: var(--card-bg);
border: 1px solid rgba(255, 255, 255, 0.1);
color: var(--text-color);
border-radius: 25px;
text-decoration: none;
transition: all 0.3s;
}
.pagination-container .page-numbers:hover,
.pagination-container .page-numbers.current {
background: var(--primary-color);
border-color: var(--primary-color);
color: #fff;
}
.pagination-container .page-numbers.dots {
background: transparent;
border: none;
}
/* =========================================
RESPONSIVE EKLEME (HERO İÇİN)
(Bu kısmı dosyanın en altındaki media query içine de ekleyebilirsin)
========================================= */
@media (max-width: 768px) {
.archive-hero h1 {
font-size: 1.8rem;
}
}
/* ============================================
CONTACT FORM 7 - KULLANIM ÖRNEKLERİ
============================================
.form-row.col-2 2 sütunlu layout
.form-row.col-3 3 sütunlu layout
.form-row.col-4 4 sütunlu layout
Form Varyantları:
Class Açıklama
.form-glass Glassmorphism efekti
.form-bordered Kenarlıklı
.form-card Kart tarzı
.form-compact Kompakt boyut
.form-outline Outline buton
.btn-full Full width buton
.btn-center Ortalı buton
[contact-form-7 id="123" title="İletişim"]
1. TEMEL KULLANIM:
-----------------
[contact-form-7] shortcode'unu bir div içine alın:
[contact-form-7 id="123" title="İletişim"]
2. İKİ SÜTUNLU FORM:
--------------------
CF7 şablon editöründe:
3. ÜÇ SÜTUNLU FORM:
-------------------
4. KARISIK SUTUNLAR:
--------------------
[textarea your-message]
5. SELECT (DROPDOWN) KULLANIMI:
-------------------------------
[select your-subject "Genel Bilgi" "Fiyat Teklifi" "Teknik Destek"]
6. CHECKBOX & RADIO:
--------------------
[checkbox your-services "Tasarım" "İmalat" "Montaj" "Bakım"]
[radio your-contact-pref "Telefon" "E-posta" "WhatsApp"]
7. DOSYA YÜKLEME:
-----------------
[file your-file limit:5mb filetypes:pdf|doc|docx|jpg|png]
8. FORM VARYANTLARI:
--------------------
Glass Efekt: