/* --- DEĞİŞKENLER VE GENEL AYARLAR --- */
:root {
--primary-color: #60222f;
--white: #ffffff;
--black: #0d0d0d;
--gray-text: #666666;
--whatsapp-green: #2eb843;
--transition: all 0.4s ease-in-out;
}* {
box-sizing: border-box;
}a {
text-decoration: none;
}.container {
max-width: 1300px;
margin: 0 auto;
}/* --- SLIDER KONTEYNER --- */
.slider-container {
position: relative;
width: 100%;
height: 90vh;
background-color: #333;
overflow: hidden;
margin-top: 90px;
}.slider-container .slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 0.8s ease-in-out;
display: flex;
align-items: flex-end;
}.slider-container .slide img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -1;
}.slider-container .slide.active {
opacity: 1;
}.slider-container .slide.active img {
z-index: 1;
}/* Slider Metin Alanı */
.slider-container .slide .textic {
max-width: 600px;
position: relative;
z-index: 9;
color: var(--white);
padding-left: 20px;
margin-bottom: 140px;
}.slider-container .slide .textic .text1 {
display: block;
font-size: 40px;
font-weight: 300;
line-height: 1.2;
}.slider-container .slide .textic .text2 {
display: block;
font-size: 40px;
font-weight: 700;
line-height: 1.2;
}/* Slider Butonları */
.slider-container .slider-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: rgba(0, 0, 0, 0.5);
fill: var(--white);
border: none;
padding: 5px 10px;
font-size: 23px;
display: flex;
align-items: center;
cursor: pointer;
border-radius: 5px;
z-index: 10;
transition: background-color 0.3s ease;
height: 42px;
width: 42px;
}.slider-container .slider-btn:hover {
background-color: rgba(0, 0, 0, 0.8);
}.slider-container .prev-btn { left: 15px; }
.slider-container .next-btn { right: 15px; }/* Scroll Göstergesi */
.slider-container .bottom-ok {
width: 100%;
display: flex;
position: absolute;
bottom: 30px;
justify-content: center;
}.slider-container .bottom-ok a {
position: relative;
width: 30px;
height: 50px;
border: 1px solid var(--white);
border-radius: 999px;
cursor: pointer;
z-index: 99;
}.scroll-indicator__circle {
position: absolute;
width: 6px;
height: 6px;
border-radius: 50%;
background-color: var(--white);
top: 10px;
left: 50%;
margin-left: -3px;
animation: scroll 1.5s cubic-bezier(0.645, 0.045, 0.355, 1) infinite;
}/* --- WHATSAPP BUTONU --- */
a.WhatsApp1 {
display: flex;
width: 51px;
height: 51px;
position: fixed;
bottom: 20px;
left: 20px;
background: var(--whatsapp-green);
color: var(--white);
border-radius: 50%;
align-items: center;
justify-content: center;
z-index: 999;
animation: whatsapp infinite 2s linear;
transition: var(--transition);
}a.WhatsApp1 svg {
width: 24px;
height: 24px;
fill: white;
}/* --- BAŞLIKLAR VE BÖLÜMLER --- */
.section-title {
margin-bottom: 40px;
}.section-title.section-title-center {
width: 100%;
max-width: 890px;
margin: 0 auto;
text-align: center;
}.section-title h3 {
position: relative;
display: inline-block;
font-size: 14px;
letter-spacing: 0.1em;
text-transform: uppercase;
padding-left: 16px;
margin-bottom: 10px;
}.section-title h3::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
background: var(--primary-color);
width: 6px;
height: 6px;
}.section-title h1 { font-size: 52px; letter-spacing: -0.02em; margin: 0; }
.section-title h2 { font-size: 45px; line-height: 50px; margin: 0 0 10px 0; }.section-title p {
font-size: 15px;
opacity: 0.6;
padding-right: 20px;
}.section-title-content p:last-child {
color: var(--gray-text);
padding-bottom: 20px;
}/* --- HAKKIMIZDA (ABOUT US) --- */
.about-us {
padding: 100px 0;
}.about-us-image-box {
display: flex;
flex-wrap: wrap;
height: 100%;
}.about-us-image-box-1 { width: 74%; }
.about-us-image-box-2 { width: 26%; position: relative; z-index: 1; }.about-us-image img {
width: 100%;
height: 100%;
aspect-ratio: 1 / 1.3;
object-fit: cover;
border-radius: 10px;
}.about-us-image-box-2 .about-us-image {
margin-top: 80px;
margin-left: -150px;
}.about-us-image-box-2 .about-us-image figure {
border: 4px solid white;
border-radius: 10px;
}.about-us-body {
background-color: var(--primary-color);
border-radius: 10px;
padding: 45px;
display: flex;
justify-content: center;
flex-wrap: wrap;
}.about-body-item {
display: flex;
gap: 20px;
margin-bottom: 30px;
width: 100%;
}.about-body-item .icon-box {
position: relative;
background: var(--primary-color);
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 5px;
overflow: hidden;
}.about-body-item .icon-box::before {
content: '';
position: absolute;
inset: 0;
background: var(--black);
transform: scale(0);
transition: var(--transition);
z-index: 0;
}.about-body-item:hover .icon-box::before {
transform: scale(1);
}.about-body-item .icon-box svg {
width: 30px;
height: 50px;
fill: var(--white);
z-index: 9;
}/* Listeler */
.about-footer-content-list ul {
list-style: none;
padding: 0;
}.about-footer-content-list ul li {
position: relative;
padding-left: 16px;
margin-bottom: 20px;
color: var(--black);
}.about-footer-content-list ul li::before {
content: '';
position: absolute;
left: 0;
top: 9px;
background: var(--primary-color);
width: 6px;
height: 6px;
}/* --- BUTONLAR VE EFEKTLER --- */
.readmore-btn {
position: relative;
display: inline-block;
font-weight: 600;
color: var(--primary-color);
padding-right: 34px;
}.readmore-btn::before {
content: '';
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%) rotate(-45deg);
height: 24px;
width: 24px;
background-color: var(--primary-color);
border-radius: 50%;
background-image: url('../images/arrow-primary.svg');
background-repeat: no-repeat;
background-position: center;
background-size: 12px;
transition: var(--transition);
}.readmore-btn:hover::before {
transform: translateY(-50%) rotate(0deg);
}/* Görsel Parlama Efekti */
.image-anime {
position: relative;
overflow: hidden;
}.image-anime:after {
content: "";
position: absolute;
width: 200%;
height: 0%;
left: 50%;
top: 50%;
background-color: rgba(255, 255, 255, 0.3);
transform: translate(-50%, -50%) rotate(-45deg);
z-index: 1;
}.image-anime:hover:after {
height: 250%;
transition: all 600ms linear;
background-color: transparent;
}/* --- KEYFRAMES (ANİMASYONLAR) --- */
@keyframes scroll {
0% { transform: translateY(0); opacity: 0; }
15% { opacity: 1; }
85% { opacity: 1; }
100% { transform: translateY(22px); opacity: 0; }
}@keyframes whatsapp {
0% { box-shadow: 0 0 0 0 var(--whatsapp-green); }
50% { box-shadow: 0 0 0 10px rgba(1, 93, 199, 0); }
100% { box-shadow: 0 0 0 0 rgba(1, 93, 199, 0); }
}/* --- RESPONSIVE --- */
@media (max-width: 1024px) {
a.WhatsApp1 {
bottom: 60px;
}
}.our-services {
background: #f5f5f5 url('../images/service-bg-shape.png') no-repeat;
background-position: top right;
background-size: auto;
padding: 90px 20px 60px 20px;
}.service-item {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 25px;
background: white;
border-radius: 10px;
height: calc(100% - 30px);
margin-bottom: 30px;
padding: 15px;
}.service-item-header {
padding: 15px;
}.service-item-title {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px 20px;
}.service-item-title h2,
.service-item-title h3 {
font-size: 20px;
line-height: 1.4em;
}.service-item-title h2 a {
color: inherit;
text-decoration: none;
}.service-item-content {
border-top: 1px solid #0d0d0d1a;
margin-top: 15px;
padding-top: 15px;
}.service-item-content p {
margin: 0;
color: #666666;
}.service-image-box {
position: relative;
}.service-image-box:hover .service-item-image figure {
filter: none;
transition: 0.5s;
}.service-item-image figure {
display: block;
border-radius: 10px;
overflow: hidden;
margin: 0;
filter: grayscale(1);
transition: 0.5s;
}.service-item-image img {
width: 100%;
aspect-ratio: 1 / 0.81;
object-fit: cover;
border-radius: 10px;
transition: all 0.6s ease-in-out;
}.service-item.active .service-item-image img,
.service-item:hover .service-item-image img {
transform: scale(1.08);
}.service-item-btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
transition: all 0.4s ease-in-out;
opacity: 0;
z-index: 1;
}.service-item.active .service-item-btn,
.service-item:hover .service-item-btn {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}.service-item-btn a {
width: 50px;
height: 50px;
background: #60222f;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.4s ease-in-out;
}.service-item-btn a:hover {
background: white;
}.service-item-btn a img {
width: 100%;
max-width: 20px;
transition: all 0.4s ease-in-out;
transform: rotate(-45deg);
filter: invert(1);
}.service-item-btn a:hover img {
transform: rotate(0);
filter: none;
}.service-benefit-box {
margin-top: 30px;
}.service-benefit-list ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px 25px;
max-width: 900px;
list-style: none;
padding: 0;
margin: 0 auto;
}.service-benefit-list ul li {
position: relative;
background: white;
font-size: 16px;
line-height: 1.5em;
color: #0d0d0d;
padding: 10px 16px 10px 32px;
border-radius: 100px;
transition: all 0.4s ease-in-out;
}.service-benefit-list ul li:hover {
background: #0d0d0d;
color: white;
}.service-benefit-list ul li::before {
content: '';
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
background: #60222f;
width: 6px;
height: 6px;
}.section-footer-text {
margin-top: 30px;
text-align: center;
}.section-footer-text p {
color: #0d0d0d;
margin-bottom: 0;
}.section-footer-text p span {
font-size: 14px;
font-weight: 500;
background: #60222f;
color: #0d0d0d;
padding: 3px 10px;
border-radius: 20px;
margin-right: 10px;
}.section-footer-text p a {
font-weight: 600;
text-transform: capitalize;
text-decoration: underline;
text-underline-offset: 3px;
color: #60222f;
transition: all 0.3s ease-in-out;
}.section-footer-text p a:hover {
color: #0d0d0d;
}.section-footer-text ul {
width: 100%;
padding: 0;
margin: 15px 0 0;
list-style: none;
}.section-footer-text ul li {
display: inline-block;
font-size: 20px;
font-weight: 600;
line-height: normal;
color: #0d0d0d;
margin-right: 5px;
}.section-footer-text ul li:last-child {
margin: 0;
}.section-footer-text ul li i {
color: #60222f;
}.dark-section .section-footer-text p,
.dark-section .section-footer-text ul li {
color: white;
}.dark-section .section-footer-text p a:hover {
color: white;
}.section-footer-text.section-footer-contact {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 10px 20px;
}.section-footer-text.section-footer-contact span {
width: 30px;
height: 30px;
padding: 0;
display: inline-flex;
justify-content: center;
align-items: center;
margin-right: 10px;
}.section-footer-text.section-footer-contact span img {
max-width: 14px;
}.section-footer-text.section-satisfy-img {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 10px;
}.section-footer-text.section-satisfy-img ul {
margin: 0;
}.section-footer-text.section-satisfy-img .satisfy-client-image {
border-color: white;
}.section-footer-text.section-satisfy-img .satisfy-client-image figure img {
max-width: 30px;
}.section-footer-text.section-satisfy-img .satisfy-client-image.add-more {
width: 32px;
height: 32px;
}.section-footer-text.section-satisfy-img .satisfy-client-image.add-more img {
max-width: 16px;
}.section-footer-text.section-satisfy-img .satisfy-client-image.add-more i {
font-size: 16px;
}/**/
.what-we-do {
padding: 80px 0;
}.what-we-do-item-list {
display: flex;
flex-wrap: wrap;
gap: 30px;
}.what-we-do-item {
width: calc(50% - 15px);
background-color: #f5f5f5;
padding: 30px;
border-radius: 10px;
}.what-we-do-item .icon-box {
position: relative;
background: #60222f;
border-radius: 5px;
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
margin-bottom: 30px;
}.what-we-do-item .icon-box svg {
width: 30px;
height: 50px;
overflow: inherit;
fill: #fff;
z-index: 9;
}.what-we-do-item .icon-box::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
background: #0d0d0d;
width: 100%;
height: 100%;
transform: rotate(180deg) scale(0);
transition: all 0.4s ease-in-out;
z-index: 0;
}.what-we-do-item:hover .icon-box::before {
transform: rotate(0) scale(1);
}.what-we-do-item .icon-box img {
position: relative;
width: 100%;
max-width: 30px;
transition: all 0.4s ease-in-out;
z-index: 1;
}.what-we-do-item:hover .icon-box img {
filter: brightness(0) invert(1);
}.what-we-do-item-body h3 {
font-size: 20px;
margin-top: 0;
}.what-we-do-item-body p {
margin: 10px 0 0;
}.what-we-do-item-body ul {
border-top: 1px solid #0d0d0d1a;
list-style: none;
margin: 20px 0 0;
padding: 20px 0 0;
}.what-we-do-item-body ul li {
position: relative;
line-height: 1.5em;
padding-left: 16px;
margin-bottom: 15px;
}.what-we-do-item-body ul li:last-child {
margin-bottom: 0;
}.what-we-do-item-body ul li::before {
content: '';
position: absolute;
left: 0;
top: 9px;
background: #60222f;
width: 6px;
height: 6px;
}.what-we-do-btn {
margin-top: 40px;
}.what-we-do-image {
margin-left: 15px;
}.what-we-do-image figure {
display: block;
margin: 0;
border-radius: 10px;
}.what-we-do-image img {
width: 100%;
aspect-ratio: 1 / 1.18;
object-fit: cover;
border-radius: 10px;
}.what-we-do .section-footer-text {
margin-top: 60px;
}/************************************/
.our-story {
position: relative;
background-image: url('../images/our-story-bg-image.jpg');
padding: 200px 0;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center 69.075px;
}.our-story::before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #0d0d0d;
opacity: 10%;
width: 100%;
height: 100%;
z-index: 1;
}.our-story .container {
position: relative;
z-index: 1;
}.our-story-content {
max-width: 990px;
text-align: center;
margin: 0 auto;
}.our-story-content .section-title {
margin-bottom: 0;
}.watch-video-circle {
margin-top: 180px;
}.watch-video-circle a {
display: inline-block;
border-radius: 50%;
cursor: none;
}.watch-video-circle a img {
width: 100%;
max-width: 150px;
border-radius: 50%;
animation: infiniterotate 20s infinite linear;
}.watch-video-circle a:hover img {
animation-play-state: paused;
}/************************************/
.page-blog {
padding: 80px 0;
}.post-item {
position: relative;
border-radius: 10px;
height: calc(100% - 30px);
margin-bottom: 30px;
overflow: hidden;
color: white;
}.post-featured-image a,
.post-featured-image figure {
position: relative;
display: block;
cursor: none;
margin: 0;
}.post-featured-image figure::before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
width: 100%;
background: #0d0d0d;
opacity: 40%;
z-index: 1;
}.post-featured-image img {
width: 100%;
aspect-ratio: 1 / 1.064;
object-fit: cover;
border-radius: 10px;
transition: all 0.6s ease-in-out;
}.post-item:hover .post-featured-image img {
transform: scale(1.08);
}.post-item-tags {
position: absolute;
top: 40px;
left: 40px;
z-index: 1;
}.post-item-tags a {
display: inline-block;
font-weight: 500;
line-height: 1.5em;
color: var(--white-color);
background: var(--divider-color);
backdrop-filter: blur(30px) saturate(100%);
-webkit-backdrop-filter: blur(30px) saturate(100%);
border-radius: 5px;
padding: 5px 14px;
transition: all 0.4s ease-in-out;
}.post-item-tags a:hover {
background: #60222f;
color: #0d0d0d;
}.post-item-body {
position: absolute;
right: 40px;
bottom: 40px;
left: 40px;
z-index: 1;
}.post-content-box {
border-bottom: 1px solid #ffffff1a;
padding-bottom: 25px;
margin-bottom: 25px;
}.post-item-meta ul {
list-style: none;
margin: 0;
padding: 0;
}.post-item-meta ul li {
font-weight: 600;
text-transform: uppercase;
color: var(--white-color);
margin-bottom: 10px;
}.post-item-content h2 {
color: var(--white-color);
font-size: 20px;
line-height: 1.4em;
}.post-item-content h2 a {
color: inherit;
}.post-item-btn a {
color: var(--white-color);
}.custom-slider-wrapper {
position: relative;
width: 100%;
margin: 20px 0;
overflow: hidden;
}.custom-slider-container {
overflow: hidden;
width: 100%;
}.custom-slider-track {
display: flex;
transition: transform 0.5s ease-in-out;
will-change: transform;
}.custom-slider-item {
flex: 0 0 33.333%; /* Masaüstünde 3 adet */
padding: 15px;
box-sizing: border-box;
}/* Navigasyon Okları */
.slider-arrow {
position: absolute;
top: 40%;
transform: translateY(-50%);
background: #60222f;
border: 1px solid #60222f;
width: 60px;
height: 60px;
border-radius: 50%;
cursor: pointer;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s;
font-size: 20px;
color: white;
}.slider-arrow:hover {
background: #000; /* Kendi ana renginizi buraya yazın */
color: #fff;
}.slider-arrow.prev {
left: 0;
}.slider-arrow.next {
right: 0;
}/* Mobil Uyumluluk */
@media (max-width: 992px) {
.custom-slider-item {
flex: 0 0 50%; /* Tablette 2 adet */
}
}@media (max-width: 576px) {
.custom-slider-item {
flex: 0 0 100%; /* Mobilde 1 adet */
}
.slider-arrow {
width: 35px;
height: 35px;
}
}/* Mevcut service-item tasarımınızın bozulmaması için ekleme */
.service-item {
height: 100%;
margin-bottom: 0 !important;
}/* Arka Plan Video Ayarı */
.counter-item:before {
content: '';
background: url(../images/hologram.png);
background-size: cover;
width: 110px;
height: 80px;
position: absolute;
right: 20px;
bottom: 20px;
filter: brightness(0.5);
opacity: 25%;
}.video-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -1;
}/* Ana Konteynır */
.counter-wrapper {
height: auto;
width: 100%;
display: flex;
justify-content: end;
align-items: center;
background: transparent;
/* Videonun üzerine hafif karartma */
overflow: hidden;
position: relative;
padding-right: 0;
padding: 100px 0;
}.counter-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 25px;
width: 100%;
max-width: 1100px;
}/* TEK CLASS ALTINDA TOPLANAN TASARIM */
.counter-item {
position: relative;
background: #471721;
backdrop-filter: blur(15px);
/* border: 1px solid #ffffff; */
border-radius: 15px;
padding: 40px 20px;
text-align: center;
color: #fff;
transition: 0.4s;
}.counter-item:hover {
transform: translateY(-10px);
border-color: #60222f;
/* background: rgb(255 255 255 / 79%); */
}/* Class içindeki sayı (h2) */
.counter-item h2 {
/* Teknoloji/Haber temasına uygun font */
font-size: 3rem;
margin-bottom: 0;
margin-top: 0;
color: #fff;
}/* Class içindeki açıklama (p) */
.counter-item p {
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: 300;
color: #fff;
margin-bottom: 0;
}/* Mobil Uyumluluk */
@media (max-width: 992px) {
.counter-grid {
grid-template-columns: repeat(2, 1fr);
}
}@media (max-width: 500px) {
.counter-grid {
grid-template-columns: repeat(2, 1fr);
margin-top: 40px;
}
.counter-item {
padding: 25px 15px;
}
.counter-item h2 {
font-size: 2.2rem;
}
}.scrolling-content {
flex-shrink: 0;
display: flex;
gap: var(--gap);
min-width: 100%;
animation: scroll 80s linear infinite;
}.scrolling-content span {
display: inline-flex;
align-items: center;
font-size: 24px;
font-weight: 800;
line-height: 1.2em;
filter: none;
color: white;
text-transform: capitalize;
}.scrolling-content span img {
width: 100%;
max-width: 30px;
margin-right: 20px;
animation: sparkelotate 3s linear infinite;
}@keyframes sparkelotate {
0% {
transform: rotate(0) scale(1);
}
50% {
transform: rotate(180deg) scale(0.5);
}
100% {
transform: rotate(360deg) scale(1);
}
}@keyframes scroll {
from {
transform: translateX(0);
}
to {
transform: translateX(calc(-100% - var(--gap)));
}
}.about-style02 {
padding-bottom: 0;
padding: 80px 0;
overflow: hidden;
background: #fff;
position: relative;
}
.about-style02 .about-us-btn{
margin-top: 25px;
}
.about-style02 .flex-grow-1 p {
margin-top: 10px;
margin-bottom: 0;
letter-spacing: 0px;
font-size: 15px;
opacity: 60%;
padding-right: 60px;
}.about-style02 .about-circle .about-text {width: 190px;height: 190px;color: #000000;padding: 10px;font-weight: 600;margin-top: 0;position: relative;border-radius: 50%;background: #fff;left: 0;}.about-style02 .about-circle .about-text .coloring {fill: #60222f;}.about-style02 .about-circle .about-text svg {
width: 100%;
height: 100%;
-webkit-animation: rotated_circle 30s linear infinite;
animation: rotated_circle 30s linear infinite
}.about-style02 .about-circle .about-text .about-icon img {
width: 100%;
}.about-style02 .about-circle .about-text .about-icon {position: absolute;left: 50%;top: 50%;-webkit-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);transform: translate(-50%, -50%);font-size: 55px;width: 120px;height: 120px;line-height: 100px;text-align: center;border-radius: 50%;border: 1px dashed #60222f;padding: 20px;display: flex;align-items: center;}.about-style02 .about-author {
background: #7a0909;
padding: 60px 30px 60px 40px;
margin-top: 70px;
position: relative;
bottom: -50px;
}.about-style02 .about-author .author-img {
z-index: 1;
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;
position: relative;
margin-bottom: 25px
}.about-style02 .about-author .author-img img {
border-radius: 50%;
width: 120px
}.about-style02 .about-author .author-img:after {
content: '';
width: 100%;
height: 100%;
z-index: -1;
position: absolute;
left: 5px;
top: 5px;
background: white;
border-radius: 50%
}@keyframes rotated_circle {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg)
}
100% {
-webkit-transform: rotate(-360deg);
transform: rotate(-360deg)
}
}@media only screen and (max-width: 1199px) {
.about-style02 .about-circle .about-text {
left: 33%
}
}@media only screen and (max-width: 991px) {
.about-style02 .about-author {
margin-top: 0px;
padding-bottom: 110px;
padding-right: 30px;
}
.about-style02 .about-circle .about-text {
left: 24%
}
}.w-65px {
width: 65px !important;
}.me-4 {
margin-right: 1.5rem !important;
}.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
margin-top: 0;
margin-bottom: .5rem;
}.mb-1-9, .my-1-9 {
margin-bottom: 1.9rem;
}/* Kart Genel Yapısı */
.post-card {
background: #fff;
border-radius: 15px;
overflow: hidden;
transition: all 0.4s ease;
height: 100%;
display: flex;
flex-direction: column;
border: 1px solid #f0f0f0;
}.post-card:hover {
transform: translateY(-10px);
}/* Resim Alanı ve Zoom Efekti */
.post-image {
position: relative;
overflow: hidden;
aspect-ratio: 16 / 13;
/* Resimlerin hep aynı boyutta görünmesini sağlar */
}.post-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}.post-card:hover .post-image img {
transform: scale(1.1);
}/* Kategori/Tag Etiketi */
.post-tag {
position: absolute;
bottom: 15px;
left: 15px;
z-index: 2;
}.post-tag a {
background: #60222f;
display: none;
/* Marka renginize göre değiştirebilirsiniz */
color: #fff;
padding: 5px 15px;
border-radius: 50px;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
text-decoration: none;
}/* İçerik Alanı */
.post-content {
padding: 25px;
display: flex;
flex-direction: column;
flex-grow: 1;
}.post-meta {
font-size: 13px;
color: #888;
margin-bottom: 10px;
font-weight: 500;
display: none;
}.post-title {
font-size: 20px;
line-height: 1.4;
font-weight: 700;
margin-bottom: 20px;
flex-grow: 1;
}.post-title a {
color: #222;
text-decoration: none;
transition: color 0.3s;
/* Başlığı 2 satırla sınırla (fazlası için üç nokta koyar) */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}.post-title a:hover {
color: #60222f;
}/* Buton Tasarımı */
.post-footer {
margin-top: auto;
}.read-more-btn {
font-size: 14px;
font-weight: 700;
color: #60222f;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 8px;
transition: all 0.3s;
}.read-more-btn i {
font-size: 12px;
transition: transform 0.3s;
}.read-more-btn:hover {
color: #60222f;
}.read-more-btn:hover i {
transform: translateX(5px);
}/* Mobil Uyumluluk Ayarları */
@media (max-width: 768px) {
.post-content {
padding: 20px;
}
.post-title {
font-size: 18px;
}
}.hizmetler-baslik {
width: 100%;
height: auto;
margin-bottom: 40px;
}.hizmetler-baslik small {
width: 100%;
height: auto;
font-weight: 700;
letter-spacing: 0;
font-size: 14px;
margin-bottom: 12px;
color: #60222f;
display: block;
margin-bottom: 0;
}.hizmetler-baslik h3 {
width: 100%;
height: auto;
line-height: 35px;
font-weight: 700;
font-size: 25px;
color: #282828;
display: block;
padding-right: 50px;
}.hizmetler-baslik p {
font-size: 16px;
line-height: 1.625;
color: #9b9b9b;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
font-weight: 400;
-ms-word-wrap: break-word;
word-wrap: break-word;
}@media(max-width:1024px) {
.neleryapiyoruz .urun-liste {
padding-right: 0;
}
.hizmetler-baslik h3 {
width: 100%;
height: auto;
line-height: 25px;
font-weight: 700;
font-size: 23px;
color: #282828;
display: block;
padding-right: 0;
margin-top: 10px;
}
.section-title h2 {
font-size: 30px;
letter-spacing: -0.0em;
cursor: none;
margin-top: 0;
margin-bottom: 30px;
line-height: 35px;
}
.section-title p {
padding: 0;
}
.our-story {
padding: 90px 0;
background-size: auto;
background-position: center 0px;
background-attachment: inherit;
}
.about-circle {
display: none;
}
.service-item{
gap: 0;
}.hizmetler-baslik {
margin-bottom: 70px;
}.our-services .slider-arrow{
display: none;
}
.slider-container .slide .textic {
display: none;
}
.slider-container {
height: 30vh;
}
.about-style02 .flex-grow-1 p{
padding: 0;
}
.about-us-body {
margin-top: 30px;
}.page-blog .section-btn {
display: none;
}
}.blog-slider-viewport {
overflow: hidden; /* Dışarı taşan kartları gizle */
width: 100%;
position: relative;
}.blog-slider-track {
display: flex;
transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1); /* Yumuşak geçiş */
will-change: transform;
}.blog-slider-item {
flex: 0 0 33.333%; /* Masaüstünde 3 tane yan yana */
padding: 10px;
box-sizing: border-box;
}/* Tablet */
@media (max-width: 991px) {
.blog-slider-item { flex: 0 0 50%; }
}/* Mobil */
@media (max-width: 767px) {
.blog-slider-item { flex: 0 0 100%; }
}/* Ok Butonları Stili */
.slider-arrows {
display: flex;
gap: 10px;
justify-content: flex-end;
width: auto;
margin-left: 30px;
}.s-nav-btn {
width: 45px; height: 45px; border-radius: 50%; border: 1px solid #ccc;
background: #fff; cursor: pointer; transition: 0.3s;
}
.s-nav-btn:hover { background: #000; color: #fff; border-color: #000; }
.s-nav-btn:hover svg{
fill: white;
}
.post-card { background: #f9f9f9; border-radius: 8px; overflow: hidden; height: 100%; }
.post-content { padding: 20px; }/* Kart Ana Kapsayıcı */
.villa-card {
position: relative;
border-radius: 15px;
overflow: visible; /* Butonun dışa taşması için */
margin-bottom: 50px; /* Alttaki boşluk için */
background: #fff;
}/* Resim Alanı */
.villa-image {
width: 100%;
height: 400px; /* Yüksekliği tasarımınıza göre ayarlayın */
overflow: hidden;
border-radius: 10px;
}.villa-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}.villa-card:hover .villa-image img {
transform: scale(1.05);
}/* Beyaz Bilgi Kutusu */
.villa-content-wrapper {
position: absolute;
bottom: -100px; /* Resmin dışına taşması için negatif değer */
left: 20px;
right: 20px;
display: flex;
align-items: center;
}.villa-info-box {
background: #ffffff;
padding: 25px;
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
flex: 1;
z-index: 1;
}.villa-info-box h3 {
font-size: 20px;
font-weight: 700;
margin-bottom: 10px;
color: #1a1a1a;
}.villa-info-box p {
font-size: 14px;
color: #666;
line-height: 1.6;
margin: 0;
}/* Yuvarlak Ok Butonu */
.villa-arrow-btn {
width: 60px;
height: 60px;
background: #ffffff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 5px 20px rgba(0,0,0,0.15);
margin-left: -30px; /* Kutuyla iç içe geçmesi için */
z-index: 2;
transition: all 0.3s ease;
color: #000;
text-decoration: none;
}.villa-arrow-btn {
background: #000; /* Hover rengi isteğe bağlı */
color: #fff;
transform: translateX(5px);
}.villa-arrow-btn:hover {
color: #fff;
}.custom-slider-item {
padding: 15px;
padding-bottom: 80px;
}@media(max-width:1024px){
.our-services {
padding: 80px 10px 20px 10px;
}
}