@import url('../textfont/stylesheet.css');
@import url('line-awesome.css');
@import url('all.min.css');
@import url('swiper-bundle.min.css');
@import url('animate.css');
@import url('bootstrap.min.css');
@import url('fancybox.css');
@import url('lity.min.css');
@import url('intlTelInput.css');
@import url('aos.css');


a {
	text-decoration:none;
	transition:all 0.3s ease;
}
a:hover {
	text-decoration:none;
}

ol,ul {
	padding:0px;
	margin:0px;
}
h1 {
	font-size:50px;
	font-weight:400;
	line-height:56px;
	margin-bottom:10px;
}
h2 {
	font-size:30px;
	font-weight:700;
	line-height:39px;
	margin-bottom:10px;
}
h3 {
	font-size:20px;
	font-weight:700;
	line-height:26px;
	margin-bottom:10px;
}
h4 {
	font-size:18px;
	font-weight:500;
	line-height:24px;
	margin-bottom:10px;
}
h5 {
	font-size:16px;
	font-weight:700;
	line-height:23px;
	margin-bottom:10px;
}
h6 {
	font-size:14px;
	font-weight:500;
	line-height:18px;
	margin-bottom:10px;
}
p {
	font-size:15px;
	font-weight:400;
	line-height:25px;
	margin-bottom:10px;
}
main {
	overflow:hidden;
	width:calc(100vw - 5px);
	min-height:100vh;
}

body {
	position:relative;
	font-family: "Montserrat", sans-serif;
}


:root {
  --anarenk: #ff7f11;
  --kirmizi: #ea0005;
  --gri: #9D9E9D;
  --siyah: #1f1f1f;
  --krem: #fcfcf9;
}

/* width */
.scrollbar::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

/* Track */
.scrollbar::-webkit-scrollbar-track {
  background: #F6F5F0; 
}
 
/* Handle */
.scrollbar::-webkit-scrollbar-thumb {
  background: var(--anarenk); 
}

/* Handle on hover */
.scrollbar::-webkit-scrollbar-thumb:hover {
  background: #FEDD06; 
}
.container-fluid {
	max-width:calc(100vw - 30px);	
}

.swiper {
	position:relative;
	overflow:hidden;
}

.dikeyortala {
	display:flex;
	flex-direction:column;
	justify-content:center;
	height:100%;
}
.page-item.active .page-link {
    z-index: 3;
    color: #fff;
    background-color: var(--anarenk);
    border-color: var(--anarenk);
}
.page-link {
    color: var(--anarenk);
}
/*------------------cerezpolitikasi----------------------*/
.cerezpolitikasi {
	position:fixed;
	bottom:20px;
	left:20px;
	width:400px;
	max-width:calc(100% - 40px);
	padding:20px;
	border-radius:20px;
	background:rgba(0,0,0,0.5);
	font-size:14px;
	line-height:20px;
	color:#fff;
	z-index:100000;
}
.btn {
	display:inline-flex;
	align-items:center;
	justify-content:center;
	padding:0px 30px;
	height:60px;
	border-radius:30px;
	font-weight: 400;
	font-size: 14px;
	line-height: 30px;
	text-align: center;
}


/*------------------header----------------------*/

.aciklama {
	margin-bottom:24px;
}
.aciklama h1 {
	font-weight: 600;
	font-size: 24px;
	line-height: 34px;
	color: var(--yesil);
	margin-bottom:14px;
}
.aciklama ul,ol {
	list-style:none;
	margin-bottom:24px;
}
.aciklama ul li ,
.aciklama ol li 
{
	position:relative;
	padding-left:15px;
	font-weight: 400;
	font-size: 16px;
	line-height: 24px;
	color: var(--yesil);
	opacity: 1;
}
.aciklama ul li:before ,
.aciklama ol li:before 
{
	position:absolute;
	content:"";
	top:11px;
	left:0px;
	width:7px;
	height:7px;
	border-radius:4px;
	background:var(--yesil);
	opacity: 1 !important;
}
.aciklama img {
	width:100% !important;
	border-radius:20px;
	max-height:300px;
	object-fit:cover;
	margin-bottom:25px;
}
.aciklama h2 ,
.aciklama h3 ,
.aciklama h4 ,
.aciklama h5 
{
	font-weight: 700;
	font-size: 24px;
	line-height: 36px;
	color: var(--yesil);
	margin-bottom:20px;
}
.aciklama p 
{
	font-weight: 500;
	font-size: 16px;
	line-height: 24px;
	color: var(--yesil);
	opacity: 1;
	margin-bottom:20px;
}
/* ==========================================================================
   HEADER (#header) STYLES
   ========================================================================== */

#header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    /* Görseldeki gibi şeffaftan siyaha hafif bir gradyan geçiş */
    background: linear-gradient(to bottom, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
    padding: 25px 0;
}

#header .alan {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30px;
}

/* --- Logo --- */
#header .logo img {
    height: 75px; /* Logoyu kibar bir boyuta alıyoruz */
    width: auto;
}

/* --- Menü --- */
#header .menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 30px;
}

#header .link-li {
    position: relative;
}

#header .link-item {
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    padding-bottom: 8px; /* Alt çizgi için mesafe */
    display: block;
    transition: color 0.3s ease;
}

/* Hover ve Aktif (Kırmızı/Turuncu Çizgi efekti) */
#header .link-item:hover,
#header .link-li.active > .link-item {
    color: #ffffff; /* Yazı beyaz kalıyor */
}

/* Aktif olanın altına #ff7f11 çizgi */
#header .link-li.active > .link-item::after,
#header .link-item:hover::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #ff7f11;
}

/* Açılır Menü (Kendi kodundan uyarlama) */
#header .acilan {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: rgba(0,0,0,0.9);
    min-width: 200px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
    padding: 10px 0;
}

#header .link-li:hover > .acilan {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

#header .acilan .link-item {
    padding: 10px 20px;
}

#header .acilan .link-item::after {
    display: none; /* Alt menüde çizgiyi kapatıyoruz */
}

/* --- Sağ İkonlar --- */
#header .header-right-actions {
    display: flex;
    align-items: center;
}

#header .dil {
    position: relative;
}

#header .dil .default {
    color: #ffffff;
    font-size: 24px;
    text-decoration: none;
}

/* Arama kutusunu kendi kodundaki gibi gizli tutup butona basınca açılacak şekilde bıraktım */
#header .arama {
    display: none;
}


/*------------------mobilheader----------------------*/

#mobilheader {
	display:none;
	align-items:center;
	flex-wrap:wrap;
	position:fixed;
	top:0px;
	left:0px;
	width:100%;
	z-index:1000;
	height:65px;
	padding:0px 5px;
	background:#fff;
}
#mobilheader.sabit {
	position:relative;
	top:auto;
	left:auto;
	width:100%;
	background:var(--krem);
}
#mobilheader.heading {
	position:fixed;
	top:0px;
	left:0px;
	width:100%;
	background:var(--krem);
}

#mobilheader .alansol {
	width:35%;
	display:flex;
	align-items:center;
	justify-content:flex-start;
}

#mobilheader .alanorta {
	width:65%;
	display:flex;
	align-items:center;
	justify-content:flex-start;
}

#mobilheader .alansag {
	width:35%;
	display:flex;
	align-items:center;
	justify-content:flex-end;
}
#mobilheader .btn {
    padding: 0px 0px 0px 0px;
}
#mobilheader .btn i {
	font-size:40px;
}
#mobilheader .logo {
	display:flex;
	align-items:center;
	justify-content:center;
	padding:5px;
}
#mobilheader .logo img {
	max-width:100%;
	max-height:60px;
}

#mobilheader .dil {
	display:flex;
	align-items:center;
	position:relative;
	z-index:101;
	padding:0px 5px;
	height:100%;
}
#mobilheader .dil .default {
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	width:40px;
	height:40px;
	border-radius: 5px;
	font-weight: 700;
	font-size: 16px;
	line-height: 24px;
	color: #000;
	border:1px solid rgba(0,0,0,0.4);
	text-transform:uppercase;
}
#mobilheader .dil .default img {
	height:15px;
	margin-right:5px;
}
#mobilheader .dil .default i {
	color:#fff;
	font-size:20px;
}

#mobilheader .dil .acilan {
	position:absolute;
	top:100%;
	right:calc(50% - 20px);
	width:40px;
	padding-top:10px;
	z-index:100;
	display:none;
	z-index:10000;
}
#mobilheader .dil .acilan .default {
	width:40px;
	height:40px;
	border-radius: 5px;
	margin-bottom:5px;
	background: #000;
	color:#fff;
	padding:10px;
	border:1px solid #fff;
}
#mobilheader .dil:hover .acilan {
	display:block;
}


/*------------------mobilmenu----------------------*/


#mobilmenu {
	display:none;
	position:fixed;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	overflow-y:scroll;
	z-index:1000;
	background: #fff;
	transform: translateX(-100%);
	transition:all 0.3s ease;
}

#mobilmenu .ust {
	display:flex;
	align-items:center;
	width:100%;
	height:65px;
	padding:10px;
}
#mobilmenu .ust .logo {
	max-height:100%;
	max-width:70%;
	margin-right:auto;
}
#mobilmenu .ust .kapat {
	font-size:40px;
	color:#000;
}
#mobilmenu .menu {
    border-top: 1px solid hsla(0,0%,60%,.2);
	padding:20px 0px;
}
#mobilmenu .menu ul {
	display: flex!important;
    flex-direction: column;
    align-items: center;
    list-style-type: none;
    -webkit-overflow-scrolling: touch;
    padding: 0 15px;
}
#mobilmenu .menu .link-li {
	position:relative;
    width: 100%;
    align-items: flex-start;
    justify-content: center;
    justify-content: center;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
	border-bottom:1px solid rgba(51, 51, 51, 0.1);
	padding:5px 40px 5px 5px;
}
#mobilmenu .menu .link-li:last-child {
	border-bottom:0px solid rgba(51, 51, 51, 0.1);
}
#mobilmenu .menu .link-li.hover:before {
    position:absolute;
	content:"\f105";
	top:5px;
	right:0px;
	width:30px;
	height:32px;
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:20px;
	color:#000;
    font-family: 'Line Awesome Free';
    font-weight: 900;
}
#mobilmenu .menu .link-item {
	font-size:14px;
	line-height:32px;
	font-weight:500;
	color:rgb(0, 0, 0);
	letter-spacing:1.8px;
}
#mobilmenu .menu .acilan {
	display:none;
	width: 100%;
}
#mobilmenu .menu .link-li:hover .acilan {
	display:block;
}
#mobilmenu .menu .acilan ul {
	width: 100%;
}

#mobilmenu .menu .acilan ul .link-li {
    min-height: 32px;
}
#mobilmenu .menu .acilan ul .link-item {
	font-size:14px;
	line-height:32px;
	color:rgb(51, 51, 51, 0.6);
}

#mobilmenu .arama {
	position:relative;
}
#mobilmenu .arama .form-control {
	border:1px solid var(--anarenk);
}
#mobilmenu .arama .btn {
	position:absolute;
	top:0px;
	right:0px;
	width:46px;
	height:46px;
	font-size:20px;
	color:#000;
	border-radius:9px;
	padding:0px;
	justify-content:center;
}

#mobilmenu .butonlar {
    border-top: 1px solid hsla(0,0%,60%,.2);
	padding:20px 15px;
}
#mobilmenu .butonlar a {
	display:block;
	font-size:12px;
	font-weight:400;
	line-height:32px;
	color:rgb(0, 0, 0);
	letter-spacing:1.2px;
}

#mobilmenu .sosyal {
	display:flex;
	align-items:center;
	justify-content:center;
    border-top: 1px solid hsla(0,0%,60%,.2);
	padding:20px 15px;
}
#mobilmenu .sosyal a {
	display:flex;
	align-items:center;
	justify-content:center;
	width: 40px;
	height: 40px;
	font-size:28px;
	color:rgb(0, 0, 0);
	margin-right:5px;
}
#mobilmenu .sosyal a:hover {
	color: var(--krem);
}

/* ==========================================================================
   SLIDER (#slider) STYLES
   ========================================================================== */

#slider {
    position: relative;
    width: 100vw;
    height: 100vh; /* Tam ekran */
    background-color: #111111;
    overflow: hidden;
}

#slider .slider, 
#slider .swiper-wrapper, 
#slider .swiper-slide, 
#slider .item {
    height: 100%;
    width: 100%;
}

/* Arkaplan Videosu / Görseli */
#slider .anaresim {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

/* Siyah Karartma (Videoyu izlenebilir kılmak için) */
#slider .slider-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 2;
}

/* İçerik Kapsayıcı */
#slider .bilgi {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* --- Sonsuz Kayan Yazılar (Sıfır Gecikme / Flexbox) --- */
#slider .marquee-wrapper {
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Track artık max-content ile içindeki span'lar kadar uzar */
#slider .marquee-track {
    display: flex;
    width: max-content;
}

#slider .marquee-track span {
    font-family: 'Anton', sans-serif; /* Pürüzsüz dış çizgi için Anton devrede */
    font-size: 6vw; 
    font-weight: 400; 
    text-transform: uppercase;
    line-height: 1.5;
    letter-spacing: 0.02em;
    padding-right: 30px; /* Kelimeler başa döndüğünde yapışmasın diye boşluk */
}

/* 1. SATIR: Dolu Yazı (Anında Sola Akar) */
#slider .solid-track {
    color: rgba(255, 255, 255, 0.95);
    animation: scrollLeft 30s linear infinite;
}

/* 2. SATIR: Çizgili Yazı (Anında Sağa Akar) */
#slider .outline-track {
    color: transparent;
    -webkit-text-stroke: 2px rgba(255, 255, 255, 0.7);
    animation: scrollRight 30s linear infinite;
}

/* Sola Doğru Kesintisiz Akış */
@keyframes scrollLeft {
    0% { transform: translateX(0); } /* Site açıldığı an yazı ekrandadır */
    100% { transform: translateX(-50%); } /* Sadece yarısı kadar kayıp başa döner */
}

/* Sağa Doğru Kesintisiz Akış */
@keyframes scrollRight {
    0% { transform: translateX(-50%); } /* Site açıldığı an yazı ekrandadır */
    100% { transform: translateX(0); } /* Sağa kayarak başa döner */
}


/* --- Alt Bar (Butonlar ve Logolar) --- */
#slider .bottom-bar {
    position: absolute;
    bottom: 40px;
    left: 0;
    width: 100%;
    padding: 0 30px;
}

/* Kırmızı/Turuncu Teklif Butonu */
#slider .btn-teklif {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: #ff7f11; /* İstenilen kod */
    color: #ffffff;
    padding: 12px 30px;
    border-radius: 50px; /* Hap şeklinde buton */
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

#slider .btn-teklif:hover {
    background-color: #e6700c;
    transform: translateY(-3px);
}

/* Showreel Butonu (Şeffaf Çerçeveli) */
#slider .btn-showreel {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: #ffffff;
    padding: 12px 25px;
    border-radius: 50px;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
}

#slider .btn-showreel:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: #ffffff;
}

/* Sağ Logolar */
#slider .partner-logos img {
    height: 35px; /* Logoları hizalıyoruz */
    width: auto;
    filter: brightness(0) invert(1) opacity(0.8); /* Logoları beyaza boyayıp hafif transparan yapıyoruz */
    transition: opacity 0.3s ease;
}

#slider .partner-logos img:hover {
    opacity: 1;
}

/* Navigasyon Okları (Gizli veya köşelerde) */
#slider .slider-button-prev,
#slider .slider-button-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.5);
    font-size: 30px;
    z-index: 10;
    cursor: pointer;
}
#slider .slider-button-prev { left: 20px; }
#slider .slider-button-next { right: 20px; }



/* ==========================================================================
   REFERANSLAR (#referanslar) STYLES
   ========================================================================== */

#referanslar {
    background-color: #ffffff; /* Ferah beyaz zemin */
    padding: 100px 0;
}

/* Çizgilerin üst üste binmemesi için Flex Negative Margin tekniği */
#referanslar .ref-grid {
    display: flex;
    flex-wrap: wrap;
}

/* Standart Hücre Yapısı */
#referanslar .ref-cell {
    width: 16.6666%; /* Masaüstünde yan yana 6 hücre (100 / 6) */
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ebebeb; /* Görseldeki gibi çok ince ve uçuk bir gri çizgi */
    margin-right: -1px; /* Çizgilerin kalınlaşmasını engeller */
    margin-bottom: -1px; /* Çizgilerin kalınlaşmasını engeller */
    padding: 40px;
    aspect-ratio: 1 / 1; /* Hücreleri kusursuz kare yapar */
    position: relative; /* Hoverda z-index için */
    background-color: #ffffff;
    z-index: 2;
}

/* Hover durumunda çizginin altta kalmasını önler */
#referanslar .ref-cell:hover {
}

/* --- 1. Satır: Özel Hücreler --- */

/* Sol Üstteki Boş Alan */
#referanslar .empty-cell {
    border-color: transparent; /* Görseldeki gibi buranın çizgisini gizliyoruz */
    z-index: 1;
    background-color: transparent;
}

/* Kendi Logonuzun Kutusu */
#referanslar .top-logo-cell .brand-logo {
    max-width: 85%;
    max-height: 85%;
    object-fit: contain;
    /* Eğer logonuz beyaz renkteyse ve görünmüyorsa bu filter kodu onu siyah yapar:
       filter: invert(1); */
}

/* Başlık Alanı ("Our Clients" eşdeğeri) */
#referanslar .title-cell {
    width: 33.3333%; /* Kalan 4 hücrenin toplam genişliğini kaplar */
    border-color: transparent; /* Görselde yazının etrafında çizgi yok */
    justify-content: flex-start;
    padding-left: 50px;
    aspect-ratio: auto; /* Yazı kutusunun kare olma zorunluluğunu kaldırır */
    z-index: 1;
}

#referanslar h2.ref-title {
    font-size: 32px;
    font-weight: 800;
    color: #111111;
    margin: 0;
    letter-spacing: -1px;
}
#referanslar h5.ref-title {
    font-size: 22px;
    font-weight: 800;
    color: #111111;
    margin: 0;
    letter-spacing: -1px;
}

#referanslar .ref-title .dot {
    color: #ff7f11; /* Marka renginiz (#ff7f11) ile ufak bir dokunuş */
}

/* --- 2. Satır: Referans Logoları --- */

#referanslar .client-cell img {
    max-width: 75%;
    max-height: 75%;
    object-fit: contain;
    /* Görseldeki gibi başlangıçta logoları grileştirip soluklaştırıyoruz */
    filter: grayscale(100%) opacity(40%);
    transition: all 0.4s ease;
}

#referanslar .client-cell:hover img {
    /* Fareyle üzerine gelince logo orijinal rengine döner ve hafif büyür */
    filter: grayscale(0%) opacity(100%);
    transform: scale(1.08);
}
/* --- Sizin Yeriniz (CTA) Hücresi Özel Tasarımı --- */

#referanslar .cta-cell {
    text-decoration: none;
    background-color: #fafafa; /* Diğerlerinden ayırmak için çok hafif gri bir zemin */
    border: 2px dashed #ff7f11; /* Doldurulmayı bekleyen boşluk hissi veren kesik çizgi */
    cursor: pointer;
    transition: all 0.4s ease;
    z-index: 5;
}

#referanslar .cta-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
}

/* Artı İkonu */
#referanslar .cta-icon {
    font-size: 36px;
    color: #ff7f11;
    margin-bottom: 15px;
    transition: all 0.4s ease;
}

/* Başlık Ayarı */
#referanslar .cta-cell h5.ref-title {
    font-size: 18px; /* Kutuya tam oturması için punto ayarı */
    font-weight: 700;
    color: #666666;
    line-height: 1.3;
    transition: color 0.4s ease;
}

/* Alttan Çıkacak Teklif Al Yazısı */
#referanslar .cta-link-text {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
    font-weight: 700;
    color: #ff7f11;
    margin-top: 15px;
    opacity: 0; /* Başlangıçta görünmez */
    transform: translateY(15px); /* Başlangıçta biraz aşağıda */
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Yumuşak bir zıplama efekti */
}

/* === HOVER (ÜZERİNE GELİNCE) EFEKTLERİ === */

#referanslar .cta-cell:hover {
    background-color: #ffffff;
    border-color: #ff7f11; /* Marka renginiz */
    border-style: solid; /* Kesik çizgi düz çizgiye dönüşür */
    transform: scale(1.05); /* Kutu hafifçe büyür ve öne çıkar */
    box-shadow: 0 15px 35px rgba(255, 127, 17, 0.15); /* Turuncu hafif bir gölge */
}

#referanslar .cta-cell:hover .cta-icon {
    color: #ff7f11;
    transform: rotate(90deg); /* İkon çok şık bir şekilde döner */
}

#referanslar .cta-cell:hover h5.ref-title {
    color: #111111; /* Yazı koyulaşır */
}

#referanslar .cta-cell:hover .cta-link-text {
    opacity: 1; /* Teklif al yazısı belirir */
    transform: translateY(0); /* Yukarı doğru kayarak yerine oturur */
}


/* ==========================================================================
   HİZMETLER (Yığılan 3D Kartlar) (#hizmetler) KESİN ÇÖZÜM
   ========================================================================== */

#hizmetler {
    position: relative;
    width: 100%;
    /* transform-style: preserve-3d; KODUNU SİLDİK (Kartların birbirini delmesini önler) */
}

#hizmetler .hz-card {
    position: sticky;
    top: 100px; 
    width: 100%;
    height: 70vh; 
    display: flex;
    align-items: center;
    overflow: hidden;
    
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    
    /* ÇOK KRİTİK: Katlanma merkezini tam üste alıyoruz. Böylece alt kısım öne fırlamaz! */
    transform-origin: top center; 
    will-change: transform, filter, opacity;
}

/* Z-INDEX HİYERARŞİSİ (Aynen Kalıyor) */
#hizmetler #hz-card-1 { z-index: 10; } /* Kırmızı Kart En Altta */
#hizmetler #hz-card-2 { z-index: 20; } /* Beyaz Kart Ortada */
#hizmetler #hz-card-3 { z-index: 30; } /* Sarı Kart En Üstte */
#hizmetler #hz-card-4 { z-index: 40; } /* Sarı Kart En Üstte */
/* --- Kart Renk Temaları --- */
#hizmetler .hz-red {
    background-color: #d83440; /* Görseldeki kırmızımsı ton */
    color: #ffffff;
}

#hizmetler .hz-white {
    background-color: #f5f5f5;
    color: #111111;
}

#hizmetler .hz-yellow {
    background-color: #ffd000; /* Görseldeki sarı ton */
    color: #111111;
}

#hizmetler .hz-orange {
    background-color: #ff7f11; /* Görseldeki sarı ton */
    color: #111111;
}

/* --- İçerik Tasarımı --- */
#hizmetler .hz-image-wrapper {
	position:relative;
    display: flex;
    justify-content: center;
    align-items: center;
	padding:10%;
}

#hizmetler .hz-image-wrapper:before {
	position: absolute;
    content: "";
    top: 12%;
    left: 12%;
    width: 76%;
    aspect-ratio: 1 / 1;
    box-shadow: 0px 0px 78px rgba(0, 0, 0, 0.8);   
}
#hizmetler .hz-image-wrapper img {
	position:relative;
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
}

#hizmetler .hz-content {
    display: flex;
    flex-direction: column;
}

#hizmetler .hz-title {
    font-size: 52px;
    font-weight: 400; /* Normal */
    margin-bottom: 25px;
    letter-spacing: -1px;
}

#hizmetler .hz-title strong {
    font-weight: 800; /* Kalın ("Web", "Dijital" kısmı) */
}

#hizmetler .hz-desc {
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 30px;
    opacity: 0.9;
}
/* --- Estetik Alt Hizmet Linkleri --- */
#hizmetler .hz-sub-services {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 40px;
}

#hizmetler .hz-sub-services a {
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    padding: 8px 18px;
    border-radius: 50px;
    transition: all 0.3s ease;
}

/* Kırmızı Tema (Açık renkli linkler) */
#hizmetler .hz-red .hz-sub-services a {
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.4);
}
#hizmetler .hz-red .hz-sub-services a:hover {
    background-color: #ffffff;
    color: #d83440;
}

/* Beyaz, Sarı VE TURUNCU Tema (Koyu renkli linkler) */
#hizmetler .hz-white .hz-sub-services a,
#hizmetler .hz-yellow .hz-sub-services a,
#hizmetler .hz-orange .hz-sub-services a {
    color: #111111;
    border: 1px solid rgba(0, 0, 0, 0.2); /* Siyah ince çerçeve */
}

#hizmetler .hz-white .hz-sub-services a:hover,
#hizmetler .hz-yellow .hz-sub-services a:hover,
#hizmetler .hz-orange .hz-sub-services a:hover {
    background-color: #111111;
    color: #ffffff;
}

/* --- Keşfet Butonu --- */
#hizmetler .hz-btn {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    padding: 14px 30px;
    border-radius: 50px;
    align-self: flex-start;
    transition: all 0.3s ease;
}

#hizmetler .hz-btn i {
    font-size: 18px;
    transition: transform 0.3s ease;
    transform: rotate(-45deg);
}

#hizmetler .hz-btn:hover i {
    transform: rotate(0deg);
}

#hizmetler .hz-btn-light {
    background-color: #ffffff;
    color: #111111;
}

#hizmetler .hz-btn-light:hover {
    background-color: #f0f0f0;
}

#hizmetler .hz-btn-dark {
    background-color: #111111;
    color: #ffffff;
}

#hizmetler .hz-btn-dark:hover {
    background-color: #333333;
}


/* ==========================================================================
   BÜYÜME VE İSTATİSTİKLER (#buyume) STYLES
   ========================================================================== */

#buyume {
    background-color: #0a0a0a; /* Premium his için tam siyah değil, çok koyu bir antrasit */
    padding: 120px 0;
    color: #ffffff;
    border-top: 1px solid rgba(255, 255, 255, 0.05); /* Üstteki bölümden ince bir çizgiyle ayrılır */
}

/* --- Sol Kolon: Metin Alanı --- */
#buyume .by-content {
    padding-right: 30px;
}

#buyume .by-badge {
    display: inline-block;
    background-color: rgba(255, 127, 17, 0.1); /* Marka turuncusunun %10 saydam hali */
    color: #ff7f11;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 6px 16px;
    border-radius: 50px;
    margin-bottom: 20px;
}

#buyume .by-title {
    font-size: 46px;
    font-weight: 400;
    line-height: 1.2;
    margin-bottom: 25px;
    letter-spacing: -1px;
}

#buyume .by-title strong {
    font-weight: 800;
    color: #ffffff;
}

#buyume .by-desc {
    font-size: 16px;
    line-height: 1.8;
    color: #aaaaaa;
    margin-bottom: 40px;
}

/* Avantajlar Listesi */
#buyume .by-benefits {
    list-style: none;
    padding: 0;
    margin: 0 0 45px 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

#buyume .by-benefits li {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

#buyume .by-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    background-color: #1a1a1a;
    border: 1px solid #333333;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ff7f11;
    font-size: 20px;
    transition: all 0.3s ease;
}

#buyume .by-benefits li:hover .by-icon {
    background-color: #ff7f11;
    color: #ffffff;
    border-color: #ff7f11;
}

#buyume .by-text {
    font-size: 15px;
    color: #cccccc;
    line-height: 1.6;
}

#buyume .by-text strong {
    color: #ffffff;
    display: block;
    margin-bottom: 3px;
    font-size: 16px;
}

/* Call to Action Butonu */
#buyume .by-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    border-bottom: 2px solid #ff7f11;
    padding-bottom: 5px;
    transition: all 0.3s ease;
}

#buyume .by-btn i {
    font-size: 20px;
    color: #ff7f11;
    transition: transform 0.3s ease;
}

#buyume .by-btn:hover {
    color: #ff7f11;
}

#buyume .by-btn:hover i {
    transform: translateX(5px);
}

/* --- Sağ Kolon: İstatistik Kartları (Grid Sistemi) --- */
#buyume .by-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Yan yana 2 kart */
    gap: 0px;
}

#buyume .by-stat-card {
    background-color: #141414;
    border: 1px solid #222222;
    border-radius: 0px;
    padding: 35px 30px;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

#buyume .by-stat-card:hover {
    border-color: #333333;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5);
}

/* Kartın sol kenarına hover'da çıkan ince turuncu çizgi efekti */
#buyume .by-stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 0;
    background-color: #ff7f11;
    transition: height 0.4s ease;
}

#buyume .by-stat-card:hover::before {
    height: 100%;
}

#buyume .by-stat-number {
    font-size: 56px;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 10px;
    line-height: 1;
    letter-spacing: -2px;
}

#buyume .by-stat-number span {
    color: #ff7f11; /* Sadece rakamlar turuncu */
}

#buyume .by-stat-label {
    font-size: 14px;
    font-weight: 500;
    color: #999999;
    margin-bottom: 25px;
}

/* Alt kısımdaki Büyüme Çizgileri (Progress Bar) */
#buyume .by-progress-track {
    width: 100%;
    height: 4px;
    background-color: #222222;
    border-radius: 5px;
    overflow: hidden;
}

#buyume .by-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #e6700c 0%, #ff7f11 100%);
    border-radius: 5px;
}


/* ==========================================================================
   BİZİMLE BÜYÜYENLER (Reels Yorumlar) (#bizimle-buyuyenler) STYLES
   ========================================================================== */

#bizimle-buyuyenler {
    background-color: #fff; /* Üstteki Büyüme bölümüyle aynı koyu zemin */
    padding: 100px 0;
    overflow: hidden; /* Dışa taşan videoları gizler */
}

/* --- Başlık Alanı --- */
#bizimle-buyuyenler .bb-badge {
    display: inline-block;
    color: #ff7f11;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
    border: 1px solid rgba(255, 127, 17, 0.3);
    padding: 6px 18px;
    border-radius: 50px;
}

#bizimle-buyuyenler .bb-title {
    font-size: 42px;
    font-weight: 400;
    color: #0a0a0a;
    margin-bottom: 0;
    letter-spacing: -1px;
}

#bizimle-buyuyenler .bb-title strong {
    font-weight: 800;
}

/* --- Swiper ve Kart Genişliği --- */
#bizimle-buyuyenler .bb-slider {
    width: 100%;
    padding: 20px 0 50px 0; /* Gölgeler için alt-üst boşluk */
    /* İmleç sürükleme (grab) ikonuna dönüşür */
    cursor: grab;
}

#bizimle-buyuyenler .bb-slider:active {
    cursor: grabbing;
}

/* Her bir Reels kartının genişliği */
#bizimle-buyuyenler .bb-slide {
    width: 280px; /* Telefon ekranını simüle eden genişlik */
    transition: transform 0.3s ease;
}

/* --- Reels Video Kartı Tasarımı --- */
#bizimle-buyuyenler .bb-reel-card {
    position: relative;
    width: 100%;
    aspect-ratio: 9 / 16; /* KUSURSUZ REELS ORANI */
    border-radius: 0px;
    overflow: hidden;
    background-color: #1a1a1a;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* İçerideki Video veya Fotoğraf */
#bizimle-buyuyenler .bb-media {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

/* Üzerine gelince resim/video çok hafif yakınlaşır */
#bizimle-buyuyenler .bb-reel-card:hover .bb-media {
    transform: scale(1.05);
}

/* Alt kısımdaki karartma (Yazıların okunması için) */
#bizimle-buyuyenler .bb-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 40%, rgba(0,0,0,0.9) 100%);
    z-index: 2;
}

/* --- Play Butonu --- */
#bizimle-buyuyenler .bb-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 65px;
    height: 65px;
    background-color: rgba(255, 127, 17, 0.9); /* Turuncu marka rengi */
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    padding-left: 5px; /* Play ikonunu tam ortalamak için optik hile */
    z-index: 3;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    backdrop-filter: blur(5px); /* Cam efekti */
}

#bizimle-buyuyenler .bb-reel-card:hover .bb-play-btn {
    transform: translate(-50%, -50%) scale(1.15);
    background-color: #ff7f11;
}

/* --- Alt Bilgi (Firma ve Yorum) --- */
#bizimle-buyuyenler .bb-info {
    position: absolute;
    bottom: 25px;
    left: 20px;
    right: 20px;
    z-index: 3;
}

#bizimle-buyuyenler .bb-name {
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 5px;
}

#bizimle-buyuyenler .bb-company {
    color: #ff7f11;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 12px;
}

#bizimle-buyuyenler .bb-quote {
    color: #dddddd;
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
    /* Metin uzunsa 3 satırdan sonrasını '...' yaparak gizler */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


/* ==========================================================================
   BLOG YAZILARI (#blog) STYLES
   ========================================================================== */

#blog {
    background-color: #ffffff;
    padding: 100px 0;
    overflow: hidden;
}

/* --- Üst Başlık Detayları --- */
#blog .bl-badge {
    color: #ff7f11;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
    display: block;
}

#blog .bl-main-title {
    font-size: 42px;
    font-weight: 400;
    color: #111111;
    margin-bottom: 0;
    letter-spacing: -1px;
}

#blog .bl-main-title strong {
    font-weight: 800;
}

#blog .bl-all-link {
    color: #111111;
    text-decoration: none;
    font-weight: 700;
    font-size: 15px;
    transition: color 0.3s ease;
}

#blog .bl-all-link:hover {
    color: #ff7f11;
}

/* --- Blog Kart Tasarımı (Yapışık & Köşeli) --- */
#blog .blog-slider {
    width: 100%;
    /* Swiper spaceBetween: 0 olduğu için yapışık olacaklar */
}

#blog .bl-item {
    background-color: #ffffff;
    border: 1px solid #eeeeee;
    margin-right: -1px; /* Kenarlıkların üst üste binip kalınlaşmasını önler */
    border-radius: 0 !important; /* Kesinlikle köşeli */
    transition: all 0.4s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

#blog .bl-item:hover {
    z-index: 2; /* Border-collapse hilesinde hover kutusunu öne çıkarır */
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
    transform: translateY(-5px);
}

/* Görsel Alanı */
#blog .bl-img {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 0 !important;
}

#blog .bl-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

#blog .bl-item:hover .bl-img img {
    transform: scale(1.1);
}

/* Tarih Rozeti (Görselin üzerinde köşeli) */
#blog .bl-date {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #111111;
    color: #ffffff;
    padding: 10px 15px;
    font-size: 12px;
    text-align: center;
    line-height: 1;
    text-transform: uppercase;
    z-index: 3;
}

#blog .bl-date span {
    display: block;
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 3px;
    color: #ff7f11;
}

/* İçerik Alanı */
#blog .bl-info {
    padding: 30px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

#blog .bl-category {
    font-size: 12px;
    font-weight: 700;
    color: #ff7f11;
    text-transform: uppercase;
    margin-bottom: 15px;
    letter-spacing: 1px;
}

#blog .bl-title {
    font-size: 20px;
    font-weight: 700;
    color: #111111;
    line-height: 1.4;
    margin-bottom: 25px;
    /* Metni 3 satırda sınırla */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.3s ease;
}

#blog .bl-item:hover .bl-title {
    color: #ff7f11;
}

#blog .bl-link {
    margin-top: auto;
    font-size: 14px;
    font-weight: 700;
    color: #111111;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: gap 0.3s ease;
}

#blog .bl-link:hover {
    gap: 12px;
    color: #ff7f11;
}

/* ==========================================================================
   SIKÇA SORULAN SORULAR (#sss) STYLES
   ========================================================================== */

#sss {
    background-color: #f8f9fa; /* Diğer bölümlerden ayırmak için çok hafif açık gri zemin */
    padding: 100px 0;
    color: #111111;
}

/* --- Sol Kolon: CTA Alanı --- */
#sss .sss-cta-box {
    position: sticky;
    top: 120px; /* Sayfa kaydırılırken sol taraf ekranda yapışık kalır */
}

#sss .sss-badge {
    display: inline-block;
    color: #ff7f11;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
}

#sss .sss-title {
    font-size: 40px;
    font-weight: 400;
    line-height: 1.2;
    margin-bottom: 20px;
    letter-spacing: -1px;
    color: #111111;
}

#sss .sss-title strong {
    font-weight: 800;
}

#sss .sss-desc {
    font-size: 15px;
    color: #666666;
    line-height: 1.7;
    margin-bottom: 35px;
}

/* İletişim Butonları */
#sss .sss-contact-links {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

#sss .sss-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 15px 25px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

#sss .sss-btn i {
    font-size: 24px;
}

/* WhatsApp Butonu (Standart yeşil tonuna yakın ama modern) */
#sss .sss-btn-wa {
    background-color: #25D366;
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(37, 211, 102, 0.2);
}

#sss .sss-btn-wa:hover {
    background-color: #1ebe57;
    transform: translateY(-3px);
    box-shadow: 0 12px 25px rgba(37, 211, 102, 0.3);
}

/* Telefon Butonu (Koyu tema) */
#sss .sss-btn-phone {
    background-color: #111111;
    color: #ffffff;
}

#sss .sss-btn-phone:hover {
    background-color: #ff7f11; /* Hover'da markanın turuncusuna döner */
    transform: translateY(-3px);
    box-shadow: 0 12px 25px rgba(255, 127, 17, 0.2);
}


/* --- Sağ Kolon: Bootstrap Akordiyon Override --- */

#sss .sss-accordion {
    background: transparent;
}

/* Akordiyon Öğesi (Kutucuk) */
#sss .sss-accordion .accordion-item {
    background-color: #ffffff;
    border: 1px solid #eeeeee;
    border-radius: 10px;
    margin-bottom: 15px;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
}

#sss .sss-accordion .accordion-item:hover {
    border-color: #dddddd;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
}

#sss .sss-accordion .accordion-header {
    margin: 0;
}

/* Akordiyon Butonu (Soru Alanı) */
#sss .sss-accordion .accordion-button {
    background-color: transparent;
    color: #111111;
    font-size: 16px;
    font-weight: 600;
    padding: 20px 25px;
    box-shadow: none !important; /* Bootstrap'in focus mavisini ezer */
    outline: none !important;
}

/* Soru Açıkken (Aktif Durum) */
#sss .sss-accordion .accordion-button:not(.collapsed) {
    color: #ff7f11; /* Marka rengi */
    background-color: #ffffff;
    box-shadow: none;
    border-bottom: 1px solid #f5f5f5;
}

/* Akordiyon İkonu (Oklar yerine şık tasarım) */
#sss .sss-accordion .accordion-button::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3Cpolyline points='6 9 12 15 18 9'%3e%3C/polyline%3e%3C/svg%3e");
    transition: transform 0.3s ease;
}

/* Açıkken İkon Rengi (Turuncu) */
#sss .sss-accordion .accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff7f11' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3Cpolyline points='6 9 12 15 18 9'%3e%3C/polyline%3e%3C/svg%3e");
    transform: rotate(180deg);
}

/* Cevap Alanı */
#sss .sss-accordion .accordion-body {
    padding: 20px 25px;
    color: #666666;
    font-size: 15px;
    line-height: 1.7;
    background-color: #fafafa; /* Cevap kısmı görsel olarak ayrılsın diye çok uçuk gri */
}



/* ==========================================================================
   FOOTER (#footer) STYLES
   ========================================================================== */

#footer {
    background-color: #111111; /* Sitenin genel koyu tonuyla uyumlu */
    color: #ffffff;
    padding-top: 80px;
    position: relative;
    z-index: 10;
}

#footer .footer-top {
    padding-bottom: 60px;
}

/* --- 1. Sütun: Logo ve Açıklama --- */
#footer .ft-logo {
    display: inline-block;
    margin-bottom: 25px;
}

#footer .ft-logo img {
    height: 80px; /* Logoyu ideal boyuta getirir */
    width: auto;
}

#footer .ft-desc {
    color: #999999;
    font-size: 15px;
    line-height: 1.8;
    margin-bottom: 30px;
}

/* Sosyal Medya İkonları */
#footer .ft-social {
    display: flex;
    gap: 12px;
}

#footer .ft-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: #1a1a1a;
    color: #ffffff;
    border-radius: 5px;
    font-size: 20px;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 1px solid #222222;
}

#footer .ft-social a:hover {
    background-color: #ff7f11; /* Marka rengi */
    border-color: #ff7f11;
    transform: translateY(-3px);
}

/* --- Başlıklar --- */
#footer .ft-title {
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 25px;
    position: relative;
    padding-bottom: 12px;
}

/* Başlık altındaki ufak turuncu çizgi detayı */
#footer .ft-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 30px;
    height: 2px;
    background-color: #ff7f11;
}

/* --- Menü ve Linkler --- */
#footer .ft-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

#footer .ft-links li {
    margin-bottom: 12px;
}

#footer .ft-links li:last-child {
    margin-bottom: 0;
}

#footer .ft-links a {
    color: #999999;
    text-decoration: none;
    font-size: 15px;
    transition: all 0.3s ease;
    display: inline-block;
}

/* Link Hover Efekti (Sağa doğru hafifçe kayar ve turuncu olur) */
#footer .ft-links a:hover {
    color: #ff7f11;
    transform: translateX(5px);
}

/* --- İletişim Bilgileri Listesi --- */
#footer .ft-contact {
    list-style: none;
    padding: 0;
    margin: 0;
}

#footer .ft-contact li {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 20px;
    color: #999999;
    font-size: 15px;
    line-height: 1.6;
}

#footer .ft-contact li:last-child {
    margin-bottom: 0;
}

#footer .ft-contact i {
    color: #ff7f11;
    font-size: 22px;
    margin-top: 2px;
}

#footer .ft-contact a {
    color: #999999;
    text-decoration: none;
    transition: color 0.3s ease;
}

#footer .ft-contact a:hover {
    color: #ff7f11;
}

/* --- Alt Kısım (Copyright ve Yasal Linkler) --- */
#footer .footer-bottom {
    background-color: #0a0a0a; /* Üst kısımdan biraz daha koyu */
    padding: 25px 0;
    border-top: 1px solid #1a1a1a;
}

#footer .ft-copyright {
    margin: 0;
    color: #777777;
    font-size: 14px;
}

#footer .ft-legal {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 20px;
    justify-content: flex-end;
}

#footer .ft-legal a {
    color: #777777;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.3s ease;
}

#footer .ft-legal a:hover {
    color: #ff7f11;
}




/* ==========================================================================
   DİJİTAL LOBİ YOLCULUĞU VE KAPILAR STYLES
   ========================================================================== */

/* --- 1. Asansör / Kaydırma Göstergesi (Sağda Sabit) --- */
#lobi-scroll-indicator {
    position: fixed;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    height: 300px;
    z-index: 9999;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
}

#lobi-scroll-indicator .ls-text {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    color: #ffffff; /* Beyaza çektik ki koyu gölge ile tam kontrast yapsın */
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 15px;
    font-weight: 600;
    
    /* İŞTE KURŞUN GEÇİRMEZ GÖLGE: 
       1. Katman: Keskin siyah kenarlık hissi
       2. Katman: Orta yayılımlı karanlık hale
       3. Katman: Geniş yayılımlı duman efekti */
    text-shadow: 
        1px 1px 2px rgba(0, 0, 0, 0.9), 
        0 0 8px rgba(0, 0, 0, 0.7), 
        0 0 15px rgba(0, 0, 0, 0.5);
}

#lobi-scroll-indicator .ls-track {
    width: 2px;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.1);
    position: relative;
    border-radius: 2px;
}

#lobi-scroll-indicator .ls-fill {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0%; /* JS ile artacak */
    background: linear-gradient(to bottom, #e6700c, #ff7f11);
    border-radius: 2px;
    box-shadow: 0 0 10px rgba(255, 127, 17, 0.5);
}

#lobi-scroll-indicator .ls-icon {
    position: absolute;
    top: 0%; /* JS ile artacak */
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ff7f11;
    font-size: 20px;
    background-color: #111111;
    padding: 5px;
    border-radius: 50%;
    text-shadow: 0 0 10px rgba(255, 127, 17, 0.8);
}


/* --- 2. En Alttaki Dijital Lobi Bölümü --- */
#dijital-lobi {
    position: relative;
    width: 100%;
    height: 100vh; /* Tam ekran kaplar */
    background-color: #000000;
    overflow: hidden;
}

#dijital-lobi .lobi-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Arkadaki Video Alanı */
#dijital-lobi .lobi-video-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Kapıların arkasında */
}

#dijital-lobi .lobi-video-container video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#dijital-lobi .lobi-video-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Video çok parlaksa yazılar okunsun diye */
}

/* LÜKS KAPILAR */
#dijital-lobi .lobi-door {
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
    background: linear-gradient(145deg, #1a1a1a 0%, #0a0a0a 100%);
    z-index: 10;
    transition: transform 1.5s cubic-bezier(0.77, 0, 0.175, 1); /* Sinematik ve yavaş açılma */
    display: flex;
    align-items: center;
}

/* Sol Kapı */
#dijital-lobi .door-left {
    left: 0;
    transform-origin: left;
    border-right: 1px solid #ff7f116e;
    box-shadow: inset -20px 0 50px rgba(0,0,0,0.8);
    justify-content: flex-end;
}

/* Sağ Kapı */
#dijital-lobi .door-right {
    right: 0;
    transform-origin: right;
    border-left: 1px solid #ff7f116e;
    box-shadow: inset 20px 0 50px rgba(0,0,0,0.8);
    justify-content: flex-start;
}

/* Kapı üzerindeki ahşap/metal panel detayı */
#dijital-lobi .door-panel {
    width: 80%;
    height: 90%;
    margin: 0 auto;
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 10px;
    box-shadow: inset 0 0 30px rgba(0,0,0,0.5);
}

/* Kapı Kolları (Birleşme noktasındaki yarım daireler) */
#dijital-lobi .door-handle {
    width: 15px;
    height: 60px;
    background-color: #ff7f11;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    box-shadow: 0 0 15px rgba(255, 127, 17, 0.5);
}

#dijital-lobi .left-handle { right: 0; border-radius: 10px 0 0 10px; }
#dijital-lobi .right-handle { left: 0; border-radius: 0 10px 10px 0; }


/* --- Kapıların Üzerindeki İçerik (Hoş Geldiniz) --- */
#dijital-lobi .lobi-content {
    position: relative;
    z-index: 20; /* Kapıların da önünde */
    text-align: center;
    color: #ffffff;
    max-width: 600px;
    padding: 0 20px;
    transition: all 0.5s ease;
}

#dijital-lobi .lobi-badge {
    display: inline-block;
    color: #ff7f11;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 11px;
    margin-bottom: 20px;
}

#dijital-lobi .lobi-title {
    font-size: 52px;
    font-weight: 400;
    line-height: 1.1;
    margin-bottom: 20px;
    letter-spacing: -1px;
    text-shadow: 0 10px 30px rgba(0,0,0,0.8);
}

#dijital-lobi .lobi-title strong {
    font-weight: 800;
}

#dijital-lobi .lobi-desc {
    font-size: 16px;
    color: #cccccc;
    margin-bottom: 40px;
}

/* Kapıyı Açma Butonu */
#dijital-lobi .lobi-btn {
    background-color: #ff7f11;
    color: #ffffff;
    border: none;
    padding: 16px 40px;
    font-size: 16px;
    font-weight: 700;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 10px 25px rgba(255, 127, 17, 0.3);
}

#dijital-lobi .lobi-btn:hover {
    background-color: #e6700c;
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(255, 127, 17, 0.5);
}

#dijital-lobi .lobi-btn i {
    font-size: 22px;
}


/* === KAPI AÇILMA ANİMASYONU (JS tarafından tetiklenir) === */

/* Sol kapı sola kayar */
#dijital-lobi .lobi-wrapper.opened .door-left {
    transform: translateX(-100%);
}

/* Sağ kapı sağa kayar */
#dijital-lobi .lobi-wrapper.opened .door-right {
    transform: translateX(100%);
}

/* Yazılar ve buton yavaşça kaybolur */
#dijital-lobi .lobi-wrapper.opened .lobi-content {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-20px);
}

/* ==========================================================================
   WEB HİZMETLERİ SAYFASI (GENEL KOYU TEMA)
   ========================================================================== */

/* --- 1. Bölüm: Hizmet Listesi (Hero ve Grid) --- */
#web-hizmetleri {
    background-color: #050505; /* Çok koyu antrasit/siyah zemin */
    padding: 150px 0 100px 0; /* Header payı bırakıldı */
    color: #ffffff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

#web-hizmetleri .wh-badge {
    display: inline-block;
    color: #ff7f11; /* Marka rengi */
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 15px;
}

#web-hizmetleri .wh-main-title {
    font-size: 56px;
    font-weight: 400;
    line-height: 1.2;
    margin-bottom: 20px;
    letter-spacing: -1px;
}

#web-hizmetleri .wh-main-title strong {
    font-weight: 800;
}

#web-hizmetleri .wh-main-desc {
    font-size: 16px;
    color: #aaaaaa;
    line-height: 1.8;
    max-width: 700px;
}

/* Kategori Başlıkları (İkon + Metin + Çizgi) */
#web-hizmetleri .wh-category-header {
    display: flex;
    align-items: center;
    gap: 15px;
    padding-bottom: 20px;
    margin-bottom: 40px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Görseldeki alt çizgi */
}

#web-hizmetleri .wh-category-header i {
    font-size: 36px;
    color: #ffffff;
}

#web-hizmetleri .wh-category-header h2 {
    font-size: 20px;
    font-weight: 400; /* Görselde font kalın değil */
    margin: 0;
    letter-spacing: 0.5px;
	color:#ff7f11;
}

/* Hizmet Kalemleri */
#web-hizmetleri .wh-service-item {
	display:block;
    margin-bottom: 25px;
}

#web-hizmetleri .wh-service-item h3 {
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 8px;
    transition: color 0.3s ease;
}

#web-hizmetleri .wh-service-item p {
    font-size: 13px;
    color: #888888;
    margin: 0;
    line-height: 1.5;
}

#web-hizmetleri .wh-service-item:hover h3 {
    color: #ff7f11; /* Hover'da ufak bir marka rengi dokunuşu */
}


/* --- 2. Bölüm: Referanslar (Logolar) --- */
#web-referanslar {
    background-color: #0a0a0a; /* Hero'dan bir ton farklı siyah */
    padding: 100px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

#web-referanslar .wr-title {
    font-size: 32px;
    font-weight: 400;
    color: #ffffff;
    margin-bottom: 15px;
}

#web-referanslar .wr-title strong {
    font-weight: 800;
}

#web-referanslar .wr-desc {
    font-size: 15px;
    color: #888888;
    margin-bottom: 40px;
}

#web-referanslar .wr-logos img {
    max-width: 120px;
    height: auto;
    transition: all 0.4s ease;
}

#web-referanslar .wr-logos img:hover {
    transform: scale(1.1);
}


/* --- 3. Bölüm: Örnek Projeler (Portfolyo) --- */
#web-projeler {
    background-color: #050505;
    padding: 100px 0;
}

#web-projeler .wp-badge {
    display: inline-block;
    color: #ff7f11;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 15px;
}

#web-projeler .wp-title {
    font-size: 42px;
    font-weight: 400;
    color: #ffffff;
    margin-bottom: 40px;
}

#web-projeler .wp-title strong {
    font-weight: 800;
}

/* Proje Kartları */
#web-projeler .wp-card {
    display: block;
    text-decoration: none;
    border-radius: 5px;
    overflow: hidden;
    transition: transform 0.4s ease;
}

#web-projeler .wp-card:hover {
    transform: translateY(-10px); /* Hover'da kart yukarı kalkar */
}

#web-projeler .wp-img {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 5px;
}

#web-projeler .wp-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

/* Görsel Üzeri Karartma ve Buton (Sadece Hover'da çıkar) */
#web-projeler .wp-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(255, 127, 17, 0.9); /* Marka rengi transparan */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.4s ease;
}

#web-projeler .wp-view-btn {
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    transform: translateY(20px);
    transition: all 0.4s ease;
}

#web-projeler .wp-card:hover .wp-img img {
    transform: scale(1.1);
}

#web-projeler .wp-card:hover .wp-overlay {
    opacity: 1;
}

#web-projeler .wp-card:hover .wp-view-btn {
    transform: translateY(0);
}

/* Alt Metinler */
#web-projeler .wp-info {
    padding: 20px 0;
}

#web-projeler .wp-info h3 {
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 8px;
    transition: color 0.3s ease;
}

#web-projeler .wp-info p {
    font-size: 14px;
    color: #888888;
    margin: 0;
}

#web-projeler .wp-card:hover .wp-info h3 {
    color: #ff7f11;
}

/* ==========================================================================
   PRODÜKSİYON SAYFASI (SİNEMATİK TEMA)
   ========================================================================== */

/* --- 1. Bölüm: Sinematik Hero & Hizmet Listesi --- */
#produksiyon-hizmetleri {
    background-color: #030303; /* Web sayfasından (050505) bir tık daha koyu, tam sinema siyahı */
    padding: 150px 0 100px 0;
    color: #ffffff;
    /* Hafif bir gren/film efekti (Noise) verebiliriz */
    background-image: radial-gradient(circle at 50% 0%, #1a1511 0%, #030303 60%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

#produksiyon-hizmetleri .pr-badge {
    display: inline-block;
    color: #ff7f11;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 20px;
    padding: 5px 15px;
    border: 1px solid rgba(255, 127, 17, 0.3);
    border-radius: 50px;
}

#produksiyon-hizmetleri .pr-main-title {
    font-size: 52px;
    font-weight: 400;
    line-height: 1.2;
    margin-bottom: 25px;
    letter-spacing: -1px;
}

#produksiyon-hizmetleri .pr-main-title strong {
    font-weight: 800;
}

#produksiyon-hizmetleri .pr-main-desc {
    font-size: 16px;
    color: #aaaaaa;
    line-height: 1.8;
    max-width: 800px;
    margin: 0 auto;
}

/* Kategori Başlıkları */
#produksiyon-hizmetleri .pr-category-header {
    display: flex;
    align-items: center;
    gap: 15px;
    padding-bottom: 15px;
    margin-bottom: 35px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

#produksiyon-hizmetleri .pr-category-header i {
    font-size: 32px;
    color: #ffffff; /* İkonlar beyaz kalsın, hoverda renklenir */
}

#produksiyon-hizmetleri .pr-category-header h2 {
    font-size: 20px;
    font-weight: 400;
    margin: 0;
	color: #ff7f11;
}

/* Hizmet Kalemleri (Web sayfasından biraz daha aralıklı ve zarif) */
#produksiyon-hizmetleri .pr-service-item {
	display:block;
    margin-bottom: 25px;
    padding-left: 10px;
    border-left: 2px solid transparent; /* Sol çizgi hover efekti için */
    transition: all 0.3s ease;
}

#produksiyon-hizmetleri .pr-service-item h3 {
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 6px;
    transition: color 0.3s ease;
}

#produksiyon-hizmetleri .pr-service-item p {
    font-size: 13px;
    color: #888888;
    margin: 0;
    line-height: 1.5;
}

#produksiyon-hizmetleri .pr-service-item:hover {
    border-left-color: #ff7f11;
    padding-left: 15px; /* Hoverda metin hafif sağa kayar */
}

#produksiyon-hizmetleri .pr-service-item:hover h3 {
    color: #ff7f11;
}


/* --- 2. Bölüm: Prodüksiyon Referansları --- */
#produksiyon-referanslar {
    background-color: #080808;
    padding: 70px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

#produksiyon-referanslar .pr-ref-title {
    font-size: 20px;
    font-weight: 400;
    color: #999999;
    margin: 0;
    line-height: 1.4;
    border-right: 1px solid rgba(255,255,255,0.1); /* Sola yaslı başlık ile logoları ayırır */
}

#produksiyon-referanslar .pr-ref-title strong {
    color: #ffffff;
    font-weight: 700;
}

#produksiyon-referanslar .pr-logos img {
    max-width: 130px;
    height: auto;
    transition: all 0.4s ease;
}

#produksiyon-referanslar .pr-logos img:hover {
    transform: translateY(-5px);
}


/* --- 3. Bölüm: Showreel / Portfolyo (Sinematik Geniş Kartlar) --- */
#produksiyon-projeler {
    background-color: #030303;
    padding: 100px 0;
}

#produksiyon-projeler .pr-badge {
    display: inline-block;
    color: #ff7f11;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 15px;
}

#produksiyon-projeler .pr-title {
    font-size: 42px;
    font-weight: 400;
    color: #ffffff;
    margin-bottom: 40px;
}

#produksiyon-projeler .pr-title strong {
    font-weight: 800;
}

/* Sinematik Proje Kartları (2'li Grid) */
#produksiyon-projeler .pr-project-card {
    display: block;
    text-decoration: none;
    group: relative;
}

#produksiyon-projeler .pr-project-img {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9; /* Tam bir film/video oranı */
    overflow: hidden;
    border-radius: 4px;
    background-color: #111;
}

#produksiyon-projeler .pr-project-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8; /* Sinematik karanlık */
    transition: transform 0.7s ease, opacity 0.4s ease;
}

/* Cam Efektli Play Butonu */
#produksiyon-projeler .pr-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    width: 70px;
    height: 70px;
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 28px;
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 2;
    padding-left: 4px; /* Play ikonunu merkeze oturtmak için */
}

/* Hover Animasyonları */
#produksiyon-projeler .pr-project-card:hover .pr-project-img img {
    transform: scale(1.05);
    opacity: 1;
}

#produksiyon-projeler .pr-project-card:hover .pr-play-btn {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    background-color: rgba(255, 127, 17, 0.8); /* Hover'da turuncu cam efektine döner */
    border-color: #ff7f11;
}

#produksiyon-projeler .pr-project-info {
    padding: 25px 0 10px 0;
}

#produksiyon-projeler .pr-tag {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #ff7f11;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

#produksiyon-projeler .pr-project-info h3 {
    font-size: 22px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.4;
    margin: 0;
    transition: color 0.3s ease;
}

#produksiyon-projeler .pr-project-card:hover .pr-project-info h3 {
    color: #cccccc;
}

/* ==========================================================================
   TASARIM SAYFASI (ASİMETRİK VE KREATİF TEMA)
   ========================================================================== */

/* --- 1. Bölüm: Tasarım Hero & Hizmet Listesi --- */
#tasarim-hizmetleri {
    background-color: #040404; /* Tam siyah değil, çok derin bir füme/siyah */
    padding: 150px 0 100px 0;
    color: #ffffff;
    /* Tasarım sayfasına özel ufak bir radial parlama (glow) */
    background-image: radial-gradient(circle at 100% 0%, rgba(255, 127, 17, 0.05) 0%, #040404 50%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

#tasarim-hizmetleri .ts-badge {
    display: inline-block;
    color: #ff7f11;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 20px;
    background-color: rgba(255, 127, 17, 0.1);
    padding: 6px 18px;
    border-radius: 5px;
}

#tasarim-hizmetleri .ts-main-title {
    font-size: 56px;
    font-weight: 400;
    line-height: 1.2;
    margin-bottom: 25px;
    letter-spacing: -1px;
}

#tasarim-hizmetleri .ts-main-title strong {
    font-weight: 800;
    /* Yazıya yaratıcı bir gradient hissi eklenebilir (İsteğe bağlı) */
    background: linear-gradient(90deg, #ffffff 0%, #cccccc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#tasarim-hizmetleri .ts-main-desc {
    font-size: 16px;
    color: #aaaaaa;
    line-height: 1.8;
    max-width: 800px;
    margin: 0 auto;
}

/* Kategori Başlıkları (İkonlar beyaz, çizgiler ince) */
#tasarim-hizmetleri .ts-category-header {
    display: flex;
    align-items: center;
    gap: 15px;
    padding-bottom: 15px;
    margin-bottom: 40px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

#tasarim-hizmetleri .ts-category-header i {
    font-size: 32px;
    color: #ffffff;
}

#tasarim-hizmetleri .ts-category-header h2 {
    font-size: 20px;
    font-weight: 400;
    margin: 0;
	color: #ff7f11;
}

/* Hizmet Kalemleri */
#tasarim-hizmetleri .ts-service-item {
	display:block;
    margin-bottom: 25px;
    position: relative;
    padding-left: 0;
    transition: all 0.3s ease;
}

/* İnce bir tasarım detayı: Her item'ın başına hoverda beliren turuncu nokta */
#tasarim-hizmetleri .ts-service-item::before {
    content: '';
    position: absolute;
    left: -15px;
    top: 8px;
    width: 6px;
    height: 6px;
    background-color: #ff7f11;
    border-radius: 50%;
    opacity: 0;
    transition: all 0.3s ease;
}

#tasarim-hizmetleri .ts-service-item h3 {
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 6px;
    transition: color 0.3s ease;
}

#tasarim-hizmetleri .ts-service-item p {
    font-size: 13px;
    color: #888888;
    margin: 0;
    line-height: 1.5;
}

/* Hover Efektleri */
#tasarim-hizmetleri .ts-service-item:hover {
    transform: translateX(15px); /* Yazı kreatif bir şekilde sağa kayar */
}

#tasarim-hizmetleri .ts-service-item:hover::before {
    opacity: 1; /* Turuncu nokta belirir */
    left: -20px;
}

#tasarim-hizmetleri .ts-service-item:hover h3 {
    color: #ff7f11;
}


/* --- 2. Bölüm: Tasarım Referansları --- */
#tasarim-referanslar {
    background-color: #0a0a0a;
    padding: 80px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

#tasarim-referanslar .ts-ref-title {
    font-size: 22px;
    font-weight: 400;
    color: #999999;
    margin: 0;
    line-height: 1.4;
    border-left: 2px solid #ff7f11; /* Web ve prodüksiyondan farklı olarak turuncu çizgi vurgusu */
    padding-left: 20px;
}

#tasarim-referanslar .ts-ref-title strong {
    color: #ffffff;
    font-weight: 700;
}

#tasarim-referanslar .ts-logos img {
    max-width: 130px;
    height: auto;
    transition: all 0.4s ease;
}

#tasarim-referanslar .ts-logos img:hover {
    transform: scale(1.05);
}


/* --- 3. Bölüm: Portfolyo (Asimetrik CSS Grid) --- */
#tasarim-projeler {
    background-color: #040404;
    padding: 100px 0;
}

#tasarim-projeler .ts-badge {
    display: inline-block;
    color: #ff7f11;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 15px;
}

#tasarim-projeler .ts-title {
    font-size: 42px;
    font-weight: 400;
    color: #ffffff;
    margin-bottom: 0;
}

#tasarim-projeler .ts-title strong {
    font-weight: 800;
}

#tasarim-projeler .ts-view-all {
    color: #ffffff;
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    border-bottom: 1px solid rgba(255,255,255,0.3);
    padding-bottom: 5px;
}

#tasarim-projeler .ts-view-all:hover {
    color: #ff7f11;
    border-color: #ff7f11;
    gap: 12px;
}

/* CSS Grid Yapısı (Sanatsal Dizilim) */
#tasarim-projeler .ts-masonry-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 eşit kolon */
    grid-template-rows: repeat(2, 300px); /* 2 satır, her biri 300px yükseklik */
    gap: 20px; /* Kutular arası boşluk */
}

/* Grid İtem Genişlik ve Yükseklikleri */
#tasarim-projeler .ts-item-large {
    grid-column: 1 / 3; /* İlk iki kolonu kaplar (Geniş) */
    grid-row: 1 / 3; /* İki satırı kaplar (Yüksek) */
}

#tasarim-projeler .ts-item-small {
    /* 3. kolonda alt alta 1'er satır yer kaplarlar */
    grid-column: 3 / 4; 
}

#tasarim-projeler .ts-item-wide {
    grid-column: 1 / 4; /* En altta tüm kolonları kaplar */
    grid-row: auto;
    height: 350px; /* Geniş kart için özel yükseklik */
}

/* Kart Genel Tasarımı */
#tasarim-projeler .ts-grid-item {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    text-decoration: none;
    display: block;
}

#tasarim-projeler .ts-item-img {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
}

#tasarim-projeler .ts-item-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.7; /* Hafif karanlık mod */
    transition: transform 0.8s ease, opacity 0.4s ease;
}

/* Kart Karartması ve İçerik */
#tasarim-projeler .ts-item-overlay {
    position: absolute;
    bottom: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 60%);
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    z-index: 2;
}

#tasarim-projeler .ts-item-tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    color: #ff7f11;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
    background-color: rgba(0,0,0,0.5);
    padding: 4px 10px;
    border-radius: 4px;
    backdrop-filter: blur(5px);
    transform: translateY(15px);
    opacity: 0;
    transition: all 0.4s ease;
}

#tasarim-projeler .ts-item-content h3 {
    font-size: 22px;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
    transform: translateY(15px);
    transition: all 0.4s ease 0.1s; /* Başlık biraz gecikmeli gelir (Şık efekt) */
}

/* Hover Efektleri */
#tasarim-projeler .ts-grid-item:hover .ts-item-img img {
    transform: scale(1.08);
    opacity: 1;
}

#tasarim-projeler .ts-grid-item:hover .ts-item-tag,
#tasarim-projeler .ts-grid-item:hover .ts-item-content h3 {
    transform: translateY(0);
    opacity: 1;
}

/* ==========================================================================
   DİJİTAL PAZARLAMA SAYFASI (ANALİTİK & NET TEMA)
   ========================================================================== */

/* --- 1. Bölüm: Dijital Hero & 4'lü Hizmet Listesi --- */
#dijital-hizmetleri {
    background-color: #060606; /* Tam siyah değil, okunabilirliği artıran bir ton */
    padding: 150px 0 100px 0;
    color: #ffffff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

#dijital-hizmetleri .dp-badge {
    display: inline-block;
    color: #ff7f11;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 15px;
    background-color: rgba(255, 127, 17, 0.1);
    padding: 6px 15px;
    border-radius: 4px;
}

#dijital-hizmetleri .dp-main-title {
    font-size: 50px;
    font-weight: 400;
    line-height: 1.2;
    margin-bottom: 20px;
    letter-spacing: -1px;
}

#dijital-hizmetleri .dp-main-title strong {
    font-weight: 800;
}

#dijital-hizmetleri .dp-main-desc {
    font-size: 15px;
    color: #aaaaaa;
    line-height: 1.8;
    max-width: 600px;
    /* Metni sola hizalamak için auto margin'i kaldırdık */
}

/* Kategori Başlıkları (4 Sütunlu Yapı) */
#dijital-hizmetleri .dp-category-header {
    display: flex;
    align-items: center;
    gap: 15px;
    padding-bottom: 20px;
    margin-bottom: 35px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15); /* Görseldeki belirgin alt çizgi */
}

#dijital-hizmetleri .dp-category-header i {
    font-size: 30px;
    color: #ffffff;
}

#dijital-hizmetleri .dp-category-header h2 {
    font-size: 18px; /* 4 kolon olduğu için başlıkları bir tık küçülttük */
    font-weight: 400;
    margin: 0;
	color: #ff7f11;
}

/* Hizmet Kalemleri */
#dijital-hizmetleri .dp-service-item {
	display:block;
    margin-bottom: 25px;
    padding-left: 0;
    transition: all 0.3s ease;
}

#dijital-hizmetleri .dp-service-item h3 {
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 6px;
    transition: color 0.3s ease;
}

#dijital-hizmetleri .dp-service-item p {
    font-size: 13px;
    color: #888888;
    margin: 0;
    line-height: 1.5;
}

#dijital-hizmetleri .dp-service-item:hover h3 {
    color: #ff7f11;
}

/* --- 2. Bölüm: Büyüme Ortakları (Referanslar) --- */
#dijital-referanslar {
    background-color: #0a0a0a;
    padding: 80px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

#dijital-referanslar .dp-ref-title {
    font-size: 22px;
    font-weight: 400;
    color: #999999;
    margin: 0;
    line-height: 1.4;
    border-left: 2px solid #ff7f11;
    padding-left: 20px;
}

#dijital-referanslar .dp-ref-title strong {
    color: #ffffff;
    font-weight: 700;
}

#dijital-referanslar .dp-logos img {
    max-width: 120px;
    height: auto;
    transition: all 0.4s ease;
}

#dijital-referanslar .dp-logos img:hover {
    transform: translateY(-5px);
}

/* --- 3. Bölüm: Başarı Hikayeleri (Case Studies) --- */
#dijital-projeler {
    background-color: #060606;
    padding: 100px 0;
}

#dijital-projeler .dp-badge {
    display: inline-block;
    color: #ff7f11;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 15px;
}

#dijital-projeler .dp-title {
    font-size: 42px;
    font-weight: 400;
    color: #ffffff;
    margin-bottom: 0;
}

#dijital-projeler .dp-title strong {
    font-weight: 800;
}

#dijital-projeler .dp-view-all {
    color: #ffffff;
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    border-bottom: 1px solid rgba(255,255,255,0.3);
    padding-bottom: 5px;
}

#dijital-projeler .dp-view-all:hover {
    color: #ff7f11;
    border-color: #ff7f11;
    gap: 12px;
}

/* Performans Kartları (Rakam Odaklı) */
#dijital-projeler .dp-case-card {
    background-color: #0c0c0c;
    border: 1px solid #1a1a1a;
    border-radius: 6px;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: all 0.4s ease;
}

#dijital-projeler .dp-case-card:hover {
    border-color: #ff7f11;
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(255, 127, 17, 0.05);
}

/* Dikkat Çekici Rakam Alanı */
#dijital-projeler .dp-case-stat {
    background: linear-gradient(135deg, #111111 0%, #1a1a1a 100%);
    padding: 30px;
    text-align: center;
    border-bottom: 1px solid #222222;
}

#dijital-projeler .dp-case-stat h4 {
    font-size: 46px;
    font-weight: 800;
    color: #ff7f11;
    margin-bottom: 5px;
    line-height: 1;
    letter-spacing: -1px;
}

#dijital-projeler .dp-case-stat span {
    font-size: 13px;
    font-weight: 600;
    color: #aaaaaa;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Kart İçeriği */
#dijital-projeler .dp-case-content {
    padding: 30px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

#dijital-projeler .dp-tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    color: #ffffff;
    background-color: #222222;
    padding: 4px 10px;
    border-radius: 4px;
    margin-bottom: 15px;
    align-self: flex-start;
}

#dijital-projeler .dp-case-content h3 {
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 15px;
    line-height: 1.4;
}

#dijital-projeler .dp-case-content p {
    font-size: 14px;
    color: #888888;
    line-height: 1.6;
    margin-bottom: 25px;
}

#dijital-projeler .dp-case-link {
    margin-top: auto;
    font-size: 14px;
    font-weight: 700;
    color: #ff7f11;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: gap 0.3s ease;
}

#dijital-projeler .dp-case-card:hover .dp-case-link {
    gap: 10px;
}
/* ==========================================================================
   PROJELER SAYFASI STYLES (MODERN HOVER EFEKTLİ KARTLAR)
   ========================================================================== */

#projeler-sayfasi {
    background-color: #050505; /* Sitenin karanlık temasına uygun */
    padding: 150px 0 100px 0;
}

#projeler-sayfasi .pj-badge {
    display: inline-block;
    color: #ff7f11; /* Marka rengi turuncu */
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 20px;
    background-color: rgba(255, 127, 17, 0.1);
    padding: 6px 18px;
    border-radius: 5px;
}

#projeler-sayfasi .pj-main-title {
    font-size: 48px;
    font-weight: 400;
    color: #ffffff;
    line-height: 1.2;
    margin-bottom: 20px;
    letter-spacing: -1px;
}

#projeler-sayfasi .pj-main-title strong {
    font-weight: 800;
}

#projeler-sayfasi .pj-main-desc {
    font-size: 16px;
    color: #aaaaaa;
    line-height: 1.8;
    max-width: 650px;
    margin: 0 auto;
}

/* --- Filtre Menüsü --- */
#projeler-sayfasi .pj-filter-nav {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
}

#projeler-sayfasi .pj-filter-nav li a {
    display: inline-block;
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    padding: 10px 25px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50px; /* Hap şeklinde tasarım */
    transition: all 0.3s ease;
}

#projeler-sayfasi .pj-filter-nav li a:hover {
    border-color: #ffffff;
}

#projeler-sayfasi .pj-filter-nav li.active a {
    background-color: #ff7f11;
    color: #ffffff;
    border-color: #ff7f11;
    box-shadow: 0 5px 15px rgba(255, 127, 17, 0.3);
}

/* --- Proje Kartı Yapısı --- */
#projeler-sayfasi .pj-card {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 5; /* Dikey, şık bir portfolyo oranı */
    border-radius: 8px;
    overflow: hidden;
    text-decoration: none;
    background-color: #111111;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

#projeler-sayfasi .pj-img {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
}

#projeler-sayfasi .pj-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease, filter 0.4s ease;
}

/* Firma Logosu (Sağ Üst Köşede) */
#projeler-sayfasi .pj-client-logo {
    position: absolute;
    top: 20px;
    right: 20px;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    padding: 10px 15px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.1);
    z-index: 3;
}

#projeler-sayfasi .pj-client-logo img {
    height: 25px; /* Logoları hizalamak için sabit yükseklik */
    width: auto;
    max-width: 100px;
    filter: brightness(0) invert(1); /* Logolar karanlık temada bembeyaz görünür */
}

/* İçerik (Alt Kısımdan Yukarı Doğru Karanlık Gradient) */
#projeler-sayfasi .pj-content {
    position: absolute;
    bottom: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.6) 50%, transparent 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 30px 25px;
    z-index: 2;
    transition: all 0.5s ease;
}

#projeler-sayfasi .pj-tag {
    display: inline-block;
    color: #ff7f11;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

#projeler-sayfasi .pj-title {
    font-size: 22px;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
    line-height: 1.3;
}

/* Hover'da Çıkacak Metin ve Buton Alanı */
#projeler-sayfasi .pj-hover-body {
    max-height: 0; /* Başlangıçta yüksekliği sıfır (gizli) */
    opacity: 0;
    overflow: hidden;
    transition: all 0.5s ease;
}

#projeler-sayfasi .pj-desc {
    font-size: 13px;
    color: #cccccc;
    line-height: 1.6;
    margin: 15px 0;
    /* Uzun metni kartı bozmaması için 4 satırla sınırlar */
    display: -webkit-box;
    -webkit-line-clamp: 4; 
    -webkit-box-orient: vertical;
    overflow: hidden;
}

#projeler-sayfasi .pj-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #ff7f11;
    font-size: 14px;
    font-weight: 600;
    border-bottom: 1px solid #ff7f11;
    padding-bottom: 3px;
}

/* ================= HOVER (ÜZERİNE GELME) EFEKTLERİ ================= */
#projeler-sayfasi .pj-card:hover .pj-img img {
    transform: scale(1.08); /* Resim büyür */
    filter: brightness(0.5); /* Arka plan resmi biraz daha kararır ki metin okunsun */
}

#projeler-sayfasi .pj-card:hover .pj-content {
    /* Hover olunca gradient daha tepeye kadar siyahlaşır */
    background: linear-gradient(to top, rgba(0,0,0,0.98) 0%, rgba(0,0,0,0.9) 70%, rgba(0,0,0,0.4) 100%);
}

#projeler-sayfasi .pj-card:hover .pj-hover-body {
    max-height: 300px; /* İçeriğin açılmasına izin verilir */
    opacity: 1;
}

#projeler-sayfasi .pj-card:hover .pj-title {
    color: #ffffff;
}

/* ==========================================================================
   KISACA BİZ (ABOUT US) SAYFASI STYLES
   ========================================================================== */

/* Ortak Etiket ve Başlıklar */
.ab-badge {
    display: inline-block;
    color: #ff7f11;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 20px;
    background-color: rgba(255, 127, 17, 0.1);
    padding: 6px 18px;
    border-radius: 5px;
}

.ab-section-title {
    font-size: 40px;
    font-weight: 400;
    color: #ffffff;
    margin-bottom: 15px;
    letter-spacing: -1px;
}

.ab-section-title strong {
    font-weight: 800;
}

.ab-section-desc {
    font-size: 15px;
    color: #aaaaaa;
    max-width: 600px;
    margin: 0 auto;
}

/* --- 1. HERO BÖLÜMÜ --- */
#about-hero {
    background-color: #040404;
    padding: 180px 0 100px 0; /* Header'dan dolayı üstten geniş boşluk */
    position: relative;
    /* Hafif bir ışık hüzmesi efekti */
    background-image: radial-gradient(circle at 50% 0%, rgba(255, 127, 17, 0.08) 0%, #040404 60%);
}

#about-hero .ab-title {
    font-size: 52px;
    font-weight: 400;
    color: #ffffff;
    line-height: 1.2;
    margin-bottom: 30px;
    letter-spacing: -1px;
}

#about-hero .ab-title strong {
    font-weight: 800;
}

#about-hero .ab-desc {
    font-size: 16px;
    color: #cccccc;
    line-height: 1.8;
    max-width: 850px;
    margin: 0 auto;
}


/* --- 2. ÇALIŞTIĞIMIZ MARKALAR --- */
#about-clients {
    background-color: #0a0a0a;
    padding: 80px 0;
    border-top: 1px solid rgba(255,255,255,0.05);
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

#about-clients .ab-subtitle {
    font-size: 14px;
    color: #777777;
    text-transform: uppercase;
    letter-spacing: 4px;
    font-weight: 600;
    margin: 0;
}

#about-clients .ab-client-slider {
    width: 100%;
    padding: 20px 0;
}

#about-clients .ab-logo-slide {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

#about-clients .ab-logo-slide img {
    max-width: 140px;
    height: auto;
    filter: brightness(0) invert(1) opacity(0.3); /* Siyah logoyu beyaza çevirip soluklaştırır */
    transition: all 0.4s ease;
}

#about-clients .ab-logo-slide img:hover {
    filter: brightness(0) invert(1) opacity(1);
    transform: scale(1.1);
}


/* --- 3. RAKAMLARLA İNFOGRAFİK --- */
#about-stats {
    background-color: #040404;
    padding: 100px 0;
}

#about-stats .ab-stat-card {
    background-color: #0c0c0c;
    border: 1px solid #1a1a1a;
    border-radius: 8px;
    padding: 40px 20px;
    text-align: center;
    transition: all 0.4s ease;
    height: 100%;
}

#about-stats .ab-stat-card:hover {
    border-color: #ff7f11;
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(255, 127, 17, 0.05);
}

#about-stats .ab-stat-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 20px auto;
    background-color: rgba(255, 127, 17, 0.1);
    color: #ff7f11;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
}

#about-stats .ab-stat-num {
    font-size: 42px;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 10px;
    line-height: 1;
}

#about-stats .ab-stat-num span {
    color: #ff7f11;
}

#about-stats .ab-stat-text {
    font-size: 14px;
    color: #888888;
    margin: 0;
    font-weight: 500;
}


/* --- 4. ÇALIŞMA FELSEFEMİZ --- */
#about-philosophy {
    background-color: #080808;
    padding: 100px 0;
    border-top: 1px solid rgba(255,255,255,0.03);
}

#about-philosophy .ab-phil-card {
    background-color: transparent;
    border-left: 2px solid #222222;
    padding: 10px 20px 20px 30px;
    transition: all 0.4s ease;
    height: 100%;
}

#about-philosophy .ab-phil-card:hover {
    border-left-color: #ff7f11;
}

#about-philosophy .ab-phil-card h4 {
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 15px;
}

#about-philosophy .ab-phil-card p {
    font-size: 14px;
    color: #aaaaaa;
    line-height: 1.7;
    margin: 0;
}


/* --- 5. EKİBİMİZ --- */
#about-team {
    background-color: #040404;
    padding: 100px 0 130px 0;
}

#about-team .ab-team-card {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4; /* Klasik portre oranı */
    border-radius: 8px;
    overflow: hidden;
    background-color: #111;
}

#about-team .ab-team-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%); /* Başlangıçta siyah-beyaz sanatsal görünüm */
    transition: all 0.5s ease;
}

#about-team .ab-team-card:hover .ab-team-img {
    filter: grayscale(0%); /* Hoverda renklensin */
    transform: scale(1.05);
}

/* Kart Karartması ve İçerik */
#about-team .ab-team-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0) 100%);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 20px;
    z-index: 2;
}

/* Üstteki Sosyal İkonlar (Başlangıçta gizli, hoverda iner) */
#about-team .ab-social {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    transform: translateY(-20px);
    opacity: 0;
    transition: all 0.4s ease;
}

#about-team .ab-social a {
    width: 35px;
    height: 35px;
    background-color: rgba(255,255,255,0.1);
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 18px;
    backdrop-filter: blur(5px);
    transition: all 0.3s ease;
}

#about-team .ab-social a:hover {
    background-color: #ff7f11;
}

/* Alttaki İsim Alanı */
#about-team .ab-team-info {
    text-align: center;
    transform: translateY(15px);
    transition: all 0.4s ease;
}

#about-team .ab-team-info h5 {
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 5px;
}

#about-team .ab-team-info span {
    font-size: 12px;
    color: #ff7f11;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Ekip Kartı Hover Aksiyonları */
#about-team .ab-team-card:hover .ab-social {
    transform: translateY(0);
    opacity: 1;
}

#about-team .ab-team-card:hover .ab-team-info {
    transform: translateY(0);
}

/* ==========================================================================
   BLOG / HABERLER SAYFASI STYLES (DARK MODE)
   ========================================================================== */

/* --- 1. HERO ALANI --- */
#blog-hero {
    background-color: #050505;
    padding: 160px 0 80px 0; /* Header altı boşluk */
    /* Hafif radyal geçiş */
    background-image: radial-gradient(circle at 50% 0%, rgba(255, 127, 17, 0.05) 0%, #050505 70%);
}

#blog-hero .blg-badge {
    display: inline-block;
    color: #ff7f11;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 20px;
    background-color: rgba(255, 127, 17, 0.1);
    padding: 6px 18px;
    border-radius: 5px;
}

#blog-hero .blg-main-title {
    font-size: 52px;
    font-weight: 400;
    color: #ffffff;
    line-height: 1.2;
    margin-bottom: 20px;
    letter-spacing: -1px;
}

#blog-hero .blg-main-title strong {
    font-weight: 800;
}

#blog-hero .blg-desc {
    font-size: 16px;
    color: #aaaaaa;
    line-height: 1.8;
    max-width: 750px;
    margin: 0 auto;
}

/* --- 2. ÖNE ÇIKAN MAKALE (FEATURED POST) --- */
#blog-featured {
    background-color: #050505;
    padding-bottom: 80px;
}

.blg-feat-card {
    background-color: #0a0a0a;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.4s ease;
}

.blg-feat-card:hover {
    border-color: rgba(255, 127, 17, 0.3);
    box-shadow: 0 15px 40px rgba(0,0,0,0.5);
}

.blg-feat-img {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 350px;
    overflow: hidden;
}

.blg-feat-img img {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.blg-feat-card:hover .blg-feat-img img {
    transform: scale(1.05);
}

/* Görsel Üstü Hover İkonu */
.blg-img-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(255, 127, 17, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.4s ease;
    z-index: 2;
}

.blg-img-overlay i {
    color: #ffffff;
    font-size: 40px;
    transform: scale(0.5);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.blg-feat-img:hover .blg-img-overlay,
.blg-card-img:hover .blg-img-overlay {
    opacity: 1;
}

.blg-feat-img:hover .blg-img-overlay i,
.blg-card-img:hover .blg-img-overlay i {
    transform: scale(1);
}

/* Öne Çıkan İçerik */
.blg-feat-content {
    padding: 50px 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

.blg-meta {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.blg-cat {
    font-size: 11px;
    font-weight: 700;
    color: #111111;
    background-color: #ff7f11;
    padding: 4px 12px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.blg-date {
    font-size: 13px;
    color: #777777;
    font-weight: 500;
}

.blg-feat-content h2 {
    font-size: 32px;
    line-height: 1.3;
    margin-bottom: 20px;
}

.blg-feat-content h2 a {
    color: #ffffff;
    text-decoration: none;
    font-weight: 700;
    transition: color 0.3s ease;
}

.blg-feat-content h2 a:hover {
    color: #ff7f11;
}

.blg-feat-content p {
    font-size: 15px;
    color: #aaaaaa;
    line-height: 1.7;
    margin-bottom: 30px;
}

.blg-read-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid #ff7f11;
    padding-bottom: 3px;
    align-self: flex-start;
    transition: all 0.3s ease;
}

.blg-read-more i {
    color: #ff7f11;
    transition: transform 0.3s ease;
}

.blg-read-more:hover {
    color: #ff7f11;
}

.blg-read-more:hover i {
    transform: translateX(5px);
}


/* --- 3. BLOG GRID KARTLARI --- */
#blog-grid {
    background-color: #050505;
    padding-bottom: 100px;
}

.blg-card {
    background-color: #0a0a0a;
    border: 1px solid rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: all 0.4s ease;
}

.blg-card:hover {
    border-color: rgba(255, 127, 17, 0.3);
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.5);
}

.blg-card-img {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

.blg-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.blg-card:hover .blg-card-img img {
    transform: scale(1.08);
}

.blg-card-info {
    padding: 30px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.blg-card-info h3 {
    font-size: 20px;
    line-height: 1.4;
    margin-bottom: 15px;
}

.blg-card-info h3 a {
    color: #ffffff;
    text-decoration: none;
    font-weight: 700;
    transition: color 0.3s ease;
    /* Uzun başlıkları 2 satırda kes */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blg-card-info h3 a:hover {
    color: #ff7f11;
}

.blg-card-info p {
    font-size: 14px;
    color: #888888;
    line-height: 1.6;
    margin-bottom: 25px;
    /* Uzun metni 3 satırda kes */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


/* ==========================================================================
   BLOG DETAY (OKUMA) SAYFASI STYLES (DARK MODE)
   ========================================================================== */

/* --- 1. HERO ALANI --- */
#bd-hero {
    background-color: #050505;
    padding: 160px 0 50px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.02);
}

.bd-meta-top {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 25px;
}

.bd-category {
    font-size: 12px;
    font-weight: 700;
    color: #111111;
    background-color: #ff7f11;
    padding: 5px 15px;
    border-radius: 5px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.bd-date {
    font-size: 14px;
    color: #888888;
    font-weight: 500;
}

.bd-title {
    font-size: 48px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.3;
    margin-bottom: 30px;
    letter-spacing: -1px;
}

.bd-author-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.bd-author-meta img {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #222222;
}

.bd-author-meta span {
    font-size: 14px;
    color: #aaaaaa;
}

.bd-author-meta strong {
    color: #ffffff;
}

.bd-hero-img {
    width: 100%;
    aspect-ratio: 21 / 9; /* Sinematik yatay geniş görsel */
    border-radius: 10px;
    overflow: hidden;
}

.bd-hero-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- 2. İÇERİK OKUMA ALANI --- */
#bd-content-area {
    background-color: #050505;
    padding: 80px 0 100px 0;
}

.bd-main-article {
    color: #cccccc;
    font-size: 17px;
    line-height: 1.8;
}

.bd-main-article .bd-lead {
    font-size: 20px;
    line-height: 1.7;
    color: #ffffff;
    font-weight: 500;
    margin-bottom: 40px;
}

.bd-main-article p {
    margin-bottom: 25px;
}

.bd-main-article table {
    color: #ffffff;
}
.bd-main-article h3 {
    font-size: 28px;
    font-weight: 700;
    color: #ffffff;
    margin: 45px 0 20px 0;
    letter-spacing: -0.5px;
}

/* Blockquote (Alıntı) Tasarımı */
.bd-main-article blockquote {
    position: relative;
    background-color: #0a0a0a;
    border-left: 4px solid #ff7f11;
    padding: 30px 40px;
    margin: 40px 0;
    border-radius: 0 8px 8px 0;
}

.bd-main-article blockquote i {
    position: absolute;
    top: 20px;
    left: 20px;
    font-size: 40px;
    color: #ff7f11;
    opacity: 0.2;
}

.bd-main-article blockquote p {
    font-size: 22px;
    font-style: italic;
    color: #ffffff;
    line-height: 1.6;
    margin: 0;
    position: relative;
    z-index: 2;
}

/* Liste Tasarımı */
.bd-list {
    list-style: none;
    padding: 0;
    margin: 0 0 30px 0;
}

.bd-list li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 15px;
    font-size: 17px;
    color: #cccccc;
}

.bd-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 12px;
    width: 8px;
    height: 8px;
    background-color: #ff7f11;
    border-radius: 50%;
}

.bd-list li strong {
    color: #ffffff;
}

/* Yazı İçi Görsel */
.bd-inline-img {
    margin: 40px 0;
    text-align: center;
}

.bd-inline-img img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 15px;
}

.bd-inline-img span {
    display: block;
    font-size: 13px;
    color: #777777;
    font-style: italic;
}

/* --- MAKALE ALTI: ETİKET & PAYLAŞ --- */
.bd-footer-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 50px;
    padding-top: 30px;
    border-top: 1px solid #1a1a1a;
}

.bd-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.bd-tags a {
    color: #aaaaaa;
    text-decoration: none;
    font-size: 13px;
    background-color: #111111;
    padding: 6px 15px;
    border-radius: 50px;
    transition: all 0.3s ease;
}

.bd-tags a:hover {
    background-color: #ff7f11;
    color: #ffffff;
}

.bd-share {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bd-share span {
    font-size: 14px;
    color: #ffffff;
    font-weight: 600;
    margin-right: 5px;
}

.bd-share a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background-color: #111111;
    color: #ffffff;
    text-decoration: none;
    font-size: 16px;
    transition: all 0.3s ease;
}

.bd-share a:hover {
    background-color: #ff7f11;
    transform: translateY(-3px);
}

/* --- YAZAR KUTUSU --- */
.bd-author-box {
    display: flex;
    align-items: center;
    gap: 25px;
    background-color: #0a0a0a;
    padding: 40px;
    border-radius: 8px;
    margin-top: 50px;
    border: 1px solid #1a1a1a;
}

.bd-author-box img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #222222;
}

.bd-author-info h4 {
    font-size: 20px;
    color: #ffffff;
    margin-bottom: 5px;
}

.bd-author-info span {
    display: block;
    font-size: 13px;
    color: #ff7f11;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.bd-author-info p {
    font-size: 14px;
    color: #aaaaaa;
    margin: 0;
    line-height: 1.6;
}


/* --- 3. SAĞ KOLON (STICKY SIDEBAR) --- */
.bd-sidebar {
    position: sticky;
    top: 120px;
    padding-left: 20px;
}

.bd-widget {
    background-color: #0a0a0a;
    border: 1px solid #111111;
    border-radius: 8px;
    padding: 30px;
    margin-bottom: 30px;
}

.bd-widget-title {
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 25px;
    padding-bottom: 10px;
    border-bottom: 1px solid #1a1a1a;
}

/* Arama Widget */
.bd-search form {
    position: relative;
}

.bd-search input {
    width: 100%;
    background-color: #111111;
    border: 1px solid #222222;
    color: #ffffff;
    padding: 12px 45px 12px 15px;
    border-radius: 5px;
    outline: none;
}

.bd-search button {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    background: transparent;
    border: none;
    color: #ff7f11;
    font-size: 20px;
    padding: 0 15px;
    cursor: pointer;
}

/* Kategori Listesi */
.bd-cat-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.bd-cat-list li {
    margin-bottom: 12px;
}

.bd-cat-list li:last-child { margin-bottom: 0; }

.bd-cat-list a {
    display: flex;
    justify-content: space-between;
    color: #aaaaaa;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.3s ease;
}

.bd-cat-list a:hover { color: #ff7f11; }

.bd-cat-list a span {
    background-color: #111111;
    padding: 2px 8px;
    border-radius: 50px;
    font-size: 11px;
    color: #777777;
}

/* Popüler Yazılar */
.bd-recent-posts {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.bd-recent-item {
    display: flex;
    align-items: center;
    gap: 15px;
    text-decoration: none;
}

.bd-recent-item img {
    width: 70px;
    height: 70px;
    object-fit: cover;
    border-radius: 5px;
}

.bd-recent-info h5 {
    font-size: 14px;
    color: #ffffff;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 5px;
    transition: color 0.3s ease;
}

.bd-recent-item:hover .bd-recent-info h5 {
    color: #ff7f11;
}

.bd-recent-info span {
    font-size: 12px;
    color: #777777;
}

/* CTA Widget */
.bd-cta-widget {
    background: linear-gradient(135deg, #111111 0%, #0a0a0a 100%);
    border-color: #222;
    text-align: center;
}

.bd-cta-widget h4 {
    font-size: 22px;
    color: #ffffff;
    margin-bottom: 10px;
    font-weight: 700;
}

.bd-cta-widget p {
    font-size: 14px;
    color: #aaaaaa;
    margin-bottom: 25px;
}

/* --- 4. BENZER İÇERİKLER --- */
#bd-related {
    background-color: #030303;
    padding: 80px 0 100px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.03);
}

.bd-related-title {
    font-size: 36px;
    font-weight: 400;
    color: #ffffff;
}

.bd-related-title strong {
    font-weight: 800;
}

/* ==========================================================================
   İLETİŞİM SAYFASI STYLES (DARK MODE & MINIMAL FORMS)
   ========================================================================== */

/* --- 1. HERO ALANI --- */
#contact-hero {
    background-color: #040404;
    padding: 160px 0 60px 0;
    background-image: radial-gradient(circle at 50% 0%, rgba(255, 127, 17, 0.05) 0%, #040404 60%);
}

#contact-hero .ct-badge {
    display: inline-block;
    color: #ff7f11;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 20px;
    background-color: rgba(255, 127, 17, 0.1);
    padding: 6px 18px;
    border-radius: 5px;
}

#contact-hero .ct-main-title {
    font-size: 52px;
    font-weight: 400;
    color: #ffffff;
    line-height: 1.2;
    margin-bottom: 20px;
    letter-spacing: -1px;
}

#contact-hero .ct-main-title strong {
    font-weight: 800;
}

#contact-hero .ct-desc {
    font-size: 16px;
    color: #aaaaaa;
    line-height: 1.8;
    max-width: 650px;
    margin: 0 auto;
}

/* --- 2. FORM VE BİLGİLER ALANI --- */
#contact-content {
    background-color: #040404;
    padding: 60px 0 100px 0;
}

/* Sol Kolon: Form Kutusu */
#contact-content .ct-form-box {
    background-color: #0a0a0a;
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 50px;
    border-radius: 10px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.5);
}

#contact-content .ct-form-box h3 {
    font-size: 26px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 10px;
}

#contact-content .ct-form-box p {
    font-size: 14px;
    color: #888888;
    margin-bottom: 35px;
}

/* Form Elemanları */
#contact-content .ct-input-group {
    position: relative;
    width: 100%;
}

#contact-content .ct-input {
    width: 100%;
    background-color: transparent;
    border: none;
    border-bottom: 1px solid #333333;
    color: #ffffff;
    font-size: 15px;
    padding: 12px 0;
    outline: none;
    transition: all 0.3s ease;
}

#contact-content .ct-input::placeholder,
#contact-content .ct-textarea::placeholder {
    color: #666666;
    font-weight: 400;
}

#contact-content .ct-input:focus,
#contact-content .ct-textarea:focus {
    border-bottom-color: #ff7f11;
}

/* Select Dropdown Özel Ayar */
#contact-content .ct-select-wrapper {
    position: relative;
}

#contact-content .ct-select-wrapper select {
    appearance: none;
    cursor: pointer;
}
#contact-content .ct-select-wrapper select optgroup {
    background-color: #111111;
    color: #ff7f11;
}
#contact-content .ct-select-wrapper select option {
    background-color: #111111;
    color: #ffffff;
}

#contact-content .ct-select-wrapper i {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: #666666;
    font-size: 16px;
    transition: color 0.3s ease;
}

#contact-content .ct-select-wrapper select:focus ~ i {
    color: #ff7f11;
}

/* Textarea (Mesaj Kutusu) */
#contact-content .ct-textarea {
    width: 100%;
    background-color: transparent;
    border: none;
    border-bottom: 1px solid #333333;
    color: #ffffff;
    font-size: 15px;
    padding: 12px 0;
    outline: none;
    resize: none;
    height: 120px;
    transition: all 0.3s ease;
}

/* Form Gönder Butonu Tasarımı */
#contact-content .ct-submit-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background-color: #ff7f11;
    color: #ffffff;
    border: none;
    border-radius: 50px;
    padding: 15px 30px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
}

#contact-content .ct-submit-btn i {
    font-size: 20px;
    transition: transform 0.3s ease;
}

#contact-content .ct-submit-btn:hover {
    background-color: #e6700c;
    transform: translateY(-3px);
}

#contact-content .ct-submit-btn:hover i {
    transform: translateX(5px) translateY(-5px); /* İkon yukarı sağa uçar gibi olur */
}

/* Sağ Kolon: İletişim Bilgileri */
#contact-content .ct-info-box {
    padding: 20px 0 0 30px;
}

#contact-content .ct-info-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 45px;
}

#contact-content .ct-info-icon {
    width: 55px;
    height: 55px;
    min-width: 55px;
    background-color: rgba(255, 127, 17, 0.1);
    color: #ff7f11;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
}

#contact-content .ct-info-text h4 {
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 10px;
}

#contact-content .ct-info-text p {
    font-size: 15px;
    color: #aaaaaa;
    margin-bottom: 5px;
    line-height: 1.6;
}

#contact-content .ct-info-text a {
    color: #aaaaaa;
    text-decoration: none;
    transition: color 0.3s ease;
}

#contact-content .ct-info-text a:hover {
    color: #ff7f11;
}

/* Sosyal Medya Linkleri */
#contact-content .ct-social-links {
    margin-top: 20px;
    padding-top: 40px;
    border-top: 1px solid #1a1a1a;
}

#contact-content .ct-social-links span {
    display: block;
    font-size: 14px;
    color: #ffffff;
    font-weight: 600;
    margin-bottom: 15px;
}

#contact-content .ct-socials {
    display: flex;
    gap: 12px;
}

#contact-content .ct-socials a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    background-color: #111111;
    color: #ffffff;
    border-radius: 8px;
    font-size: 22px;
    text-decoration: none;
    border: 1px solid #222222;
    transition: all 0.3s ease;
}

#contact-content .ct-socials a:hover {
    background-color: #ff7f11;
    border-color: #ff7f11;
    transform: translateY(-5px);
}

/* --- 3. HARİTA ALANI --- */
#contact-map {
    background-color: #000;
    position: relative;
}

#contact-map iframe {
    display: block;
    filter: grayscale(100%) invert(92%) contrast(83%);
    opacity: 0.8;
    transition: all 0.5s ease;
}

#contact-map iframe:hover {
    filter: grayscale(80%) invert(92%) contrast(83%);
    opacity: 1;
}


/* ==========================================================================
   ALT HİZMET SAYFASI STYLES (SEO ODAKLI & İÇERİK AĞIRLIKLI)
   ========================================================================== */

/* --- 1. HERO ALANI --- */
#subservice-hero {
    background-color: #050505;
    padding: 150px 0 50px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    background-image: radial-gradient(circle at 0% 100%, rgba(255, 127, 17, 0.05) 0%, #050505 50%);
}

.ss-breadcrumb {
    margin-bottom: 20px;
}

.ss-breadcrumb ol {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.ss-breadcrumb li {
    font-size: 13px;
    font-weight: 500;
    color: #666666;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ss-breadcrumb li::after {
    content: '/';
    color: #444444;
    font-size: 12px;
}

.ss-breadcrumb li:last-child::after {
    content: ''; /* Son elemanda slash olmasın */
}

.ss-breadcrumb li a {
    color: #aaaaaa;
    text-decoration: none;
    transition: color 0.3s ease;
}

.ss-breadcrumb li a:hover {
    color: #ff7f11;
}

.ss-breadcrumb li.active {
    color: #ff7f11;
}

.ss-main-title {
    font-size: 46px;
    font-weight: 400;
    color: #ffffff;
    line-height: 1.2;
    margin-bottom: 20px;
    letter-spacing: -1px;
}

.ss-main-title strong {
    font-weight: 800;
}

.ss-main-desc {
    font-size: 16px;
    color: #aaaaaa;
    line-height: 1.8;
    max-width: 750px;
}


/* --- 2. İÇERİK ALANI (SOL KOLON) --- */
#subservice-content {
    background-color: #050505;
    padding: 80px 0 100px 0;
}

.ss-article {
    color: #cccccc;
    font-size: 16px;
    line-height: 1.8;
}

.ss-article .ss-lead {
    font-size: 18px;
    line-height: 1.7;
    color: #ffffff;
    font-weight: 500;
    margin-bottom: 35px;
}

/* İçindekiler Tablosu (TOC) */
.ss-toc {
    background-color: #0a0a0a;
    border: 1px solid #1a1a1a;
    border-left: 4px solid #ff7f11;
    padding: 25px 30px;
    border-radius: 4px;
    margin-bottom: 40px;
}

.ss-toc h4 {
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 15px;
}

.ss-toc ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ss-toc ul li {
    margin-bottom: 10px;
}

.ss-toc ul li:last-child { margin-bottom: 0; }

.ss-toc ul li a {
    color: #aaaaaa;
    text-decoration: none;
    font-size: 15px;
    transition: color 0.3s ease;
    display: inline-flex;
    align-items: center;
}

.ss-toc ul li a::before {
    content: '↓';
    font-family: monospace;
    margin-right: 8px;
    color: #555555;
    font-size: 12px;
}

.ss-toc ul li a:hover {
    color: #ff7f11;
}

/* Metin İçi Başlıklar ve Paragraflar */
.ss-article h2 {
    font-size: 28px;
    font-weight: 700;
    color: #ffffff;
    margin: 40px 0 20px 0;
    letter-spacing: -0.5px;
}

.ss-article p {
    margin-bottom: 20px;
}

.ss-article strong {
    color: #ffffff;
}

.ss-inline-img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 30px 0;
    border: 1px solid #1a1a1a;
}

/* Hizmet Maddeleri Listesi */
.ss-list {
    list-style: none;
    padding: 0;
    margin: 0 0 30px 0;
}

.ss-list li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 15px;
    background-color: #0a0a0a;
    border: 1px solid #111111;
    padding: 15px 20px 15px 45px;
    border-radius: 6px;
}

.ss-list li::before {
    content: '\f00c'; /* Check ikonu (Line Awesome) */
    font-family: 'Line Awesome Free';
    font-weight: 900;
    position: absolute;
    left: 15px;
    top: 15px;
    color: #ff7f11;
    font-size: 18px;
}

/* SSS Bölümü İçeriği */
.ss-faq-wrap {
    margin-top: 50px;
    padding-top: 30px;
    border-top: 1px solid #1a1a1a;
}

.ss-faq-wrap h3 {
    margin-top: 0;
}

.ss-faq-item {
    margin-bottom: 25px;
}

.ss-faq-item h5 {
    font-size: 18px;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 10px;
}

.ss-faq-item p {
    color: #aaaaaa;
    margin: 0;
}


/* --- 3. SAĞ KOLON (STICKY SIDEBAR) --- */
.ss-sidebar {
    position: sticky;
    top: 120px;
}

.ss-widget {
    background-color: #0a0a0a;
    border: 1px solid #111111;
    border-radius: 8px;
    padding: 30px;
    margin-bottom: 30px;
}

.ss-widget-title {
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #1a1a1a;
}

/* Menü Listesi */
.ss-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ss-nav-list li {
    margin-bottom: 5px;
}

.ss-nav-list li a {
    display: block;
    padding: 10px 15px;
    color: #aaaaaa;
    text-decoration: none;
    font-size: 15px;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.ss-nav-list li a:hover {
    background-color: #111111;
    color: #ffffff;
}

.ss-nav-list li.active a {
    background-color: #ff7f11;
    color: #ffffff;
    font-weight: 600;
}

/* Sidebar Formu */
.ss-form-widget {
    background: linear-gradient(180deg, #0a0a0a 0%, #050505 100%);
}

.ss-input {
    width: 100%;
    background-color: #111111;
    border: 1px solid #222222;
    color: #ffffff;
    font-size: 14px;
    padding: 12px 15px;
    border-radius: 4px;
    outline: none;
    margin-bottom: 15px;
    transition: all 0.3s ease;
}

.ss-input:focus {
    border-color: #ff7f11;
}

.ss-submit-btn {
    background-color: #ff7f11;
    color: #ffffff;
    border: none;
    padding: 12px 0;
    font-size: 15px;
    font-weight: 700;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.ss-submit-btn:hover {
    background-color: #e6700c;
}

/* İletişim Kutusu */
.ss-contact-widget {
    text-align: center;
    border: none;
    background-color: rgba(255, 127, 17, 0.05);
}

.ss-contact-widget i {
    font-size: 40px;
    color: #ff7f11;
    margin-bottom: 10px;
}

.ss-contact-widget h4 {
    font-size: 18px;
    color: #ffffff;
    margin-bottom: 5px;
}

.ss-contact-widget p {
    font-size: 13px;
    color: #aaaaaa;
    margin-bottom: 15px;
}

.ss-contact-widget a {
    font-size: 24px;
    font-weight: 700;
    color: #ff7f11;
    text-decoration: none;
}


/* --- 4. CTA ALANI --- */
#subservice-cta {
    background-color: #ff7f11;
    padding: 80px 0;
}

#subservice-cta h2 {
    font-size: 36px;
    color: #ffffff;
    font-weight: 400;
    margin-bottom: 15px;
}

#subservice-cta h2 strong {
    font-weight: 800;
}

#subservice-cta p {
    font-size: 18px;
    color: rgba(255,255,255,0.9);
    margin-bottom: 20px;
}

/* CTA içindeki buton siyah olsun ki turuncu zeminde patlasın */
#subservice-cta .btn-teklif {
    background-color: #111111;
    color: #ffffff;
    padding: 14px 35px;
}

#subservice-cta .btn-teklif:hover {
    background-color: #000000;
    transform: translateY(-3px);
}


/* ================= RESPONSIVE AYARLAR ================= */
@media (max-width: 991px) {
    .ss-main-title { font-size: 40px; }
    .ss-sidebar { position: static; margin-top: 50px; }
}

@media (max-width: 767px) {
    #subservice-hero { padding: 130px 0 40px 0; text-align: center; }
    .ss-breadcrumb ol { justify-content: center; }
    .ss-main-title { font-size: 32px; }
    
    #subservice-content { padding: 50px 0 80px 0; }
    .ss-article { font-size: 15px; }
    .ss-article h2 { font-size: 24px; }
    .ss-list li { padding: 15px 15px 15px 35px; }
    .ss-list li::before { left: 10px; font-size: 16px; }
    
    #subservice-cta { padding: 60px 0; }
    #subservice-cta h2 { font-size: 28px; }
    #subservice-cta p { font-size: 15px; }
}