/**
* Template Name: Flattern - v4.2.0
* Template URL: https://bootstrapmade.com/flattern-multipurpose-bootstrap-template/
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
*/
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Playfair+Display:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&family=Lora:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&family=Cormorant+Garamond:ital@1&display=swap');
/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
body {
font-family: 'Lora', serif; /* Ana metin fontumuz artık Lora */
color: #5B5B5B; /* Daha yumuşak bir metin rengi */
background-color: #FAF3E0; /* Sıcak krem rengi arka plan */
background-image: url('https://www.transparenttextures.com/patterns/light-paper-fibers.png');
}
a {
color: #f03c02;
text-decoration: none;
}
a:hover {
color: #fd5c28;
text-decoration: none;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Playfair Display', serif;
}
/*--------------------------------------------------------------
# Back to top button
--------------------------------------------------------------*/
.back-to-top {
position: fixed;
visibility: hidden;
opacity: 0;
right: 15px;
bottom: 15px;
z-index: 996;
background: #0a78b9;
width: 40px;
height: 40px;
border-radius: 4px;
transition: all 0.4s;
}
.back-to-top i {
font-size: 28px;
color: #fff;
line-height: 0;
}
.back-to-top:hover {
background: #020D5F;
color: #fff;
}
.back-to-top.active {
visibility: visible;
opacity: 1;
}
/*--------------------------------------------------------------
# Disable AOS delay on mobile
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
[data-aos-delay] {
transition-delay: 0 !important;
}
}
/*--------------------------------------------------------------
# Top Bar
--------------------------------------------------------------*/
#topbar {
background: #28245d;
padding: 10px 0;
font-size: 14px;
}
#topbar .contact-info i {
font-style: normal;
color: #ffffff;
}
#topbar .contact-info i a, #topbar .contact-info i span {
padding-left: 5px;
color: #ffffff;
}
#topbar .contact-info i a {
line-height: 0;
transition: 0.3s;
}
#topbar .contact-info i a:hover {
color: #ffffff;
}
#topbar .social-links a {
color: #ffffff;
line-height: 5px;
transition: 0.3s;
margin-left: 15px;
}
#topbar .social-links a:hover {
color: #ffffffff;
}
/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/**
* Desktop Navigation
*/
.navbar {
padding: 0;
}
.navbar ul {
margin: 0;
padding: 0;
display: flex;
list-style: none;
align-items: center;
}
.navbar li {
position: relative;
}
/* --- YENİ CSS KODLARI BURADAN BAŞLIYOR --- */
/* 1. Header OPAK (kaydırılmış) durumdayken linklerin varsayılan stili */
#header.header-scrolled .navbar a {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 0 10px 20px;
font-family: 'Lora', serif;
font-size: 14px;
font-weight: 600;
color: #777;
white-space: nowrap;
text-transform: uppercase;
letter-spacing: 1px;
transition: 0.3s;
position: relative; /* YENİ: Alt çizgi efekti için bu gerekli */
}
/* YENİ: OPAK durumdaki alt çizgi (başlangıçta gizli) */
#header.header-scrolled .navbar a::after {
content: '';
position: absolute;
width: 0; /* Başlangıçta genişlik 0 */
height: 2px;
bottom: 5px; /* Çizginin alttan yüksekliği (10px padding'in ortası) */
left: 20px; /* Çizginin soldan başlaması (padding-left ile aynı) */
background-color: #D8B2B2; /* Gül kurusu rengimiz */
transition: width 0.4s ease-in-out; /* Güzel bir animasyon */
}
/* 2. Header ŞEFFAF (en üstte) durumdayken linklerin stili */
#header:not(.header-scrolled) .navbar a {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 0 10px 20px;
font-family: 'Lora', serif;
font-size: 14px;
font-weight: 600;
color: #D8B2B2;
white-space: nowrap;
text-transform: uppercase;
letter-spacing: 1px;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
transition: 0.3s;
position: relative; /* YENİ: Alt çizgi efekti için bu gerekli */
}
/* YENİ: ŞEFFAF durumdaki alt çizgi (başlangıçta gizli) */
#header:not(.header-scrolled) .navbar a::after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: 5px;
left: 20px;
background-color: #ffffff; /* Beyaz çizgi */
opacity: 0.85; /* Hafif soluk */
transition: width 0.4s ease-in-out;
}
.navbar a i {
font-size: 12px;
line-height: 0;
margin-left: 5px;
}
/* YENİ: HOVER (fare üzerine gelince) ANINDAKİ EFEKT */
/* Bu kural hem opak hem şeffaf header'da çalışacak */
#header .navbar a:hover::after,
#header .navbar li:hover > a::after {
width: calc(100% - 20px); /* Genişliği padding-left kadar kısalt (sağda padding 0) */
}
/* 3. Header OPAK (kaydırılmış) durumdayken AKTİF sayfa rengi */
/* Sadece .active class'ına sahip olanın rengini değiştiriyoruz */
#header.header-scrolled .navbar .active > a {
color: #D8B2B2; /* Gül kurusu rengimiz */
}
/* 4. Header ŞEFFAF (en üstte) durumdayken AKTİF sayfa rengi */
#header:not(.header-scrolled) .navbar .active > a {
color: #ffffff;
opacity: 0.85;
}
/* YENİ: AKTİF linkin alt çizgisi her zaman görünsün */
#header .navbar .active > a::after {
width: calc(100% - 20px); /* Direkt tam genişlikte başla */
}
/* --- Buradan sonrası şablonun orijinal dropdown menü kodları, onlara dokunmuyoruz --- */
.navbar .getstarted {
background: #f03c02;
padding: 8px 20px;
margin-left: 30px;
border-radius: 4px;
color: #fff;
}
.navbar .getstarted:hover {
color: #fff;
background: #fd490f;
}
.navbar .dropdown ul {
display: block;
position: absolute;
left: 14px;
top: calc(100% + 30px);
margin: 0;
padding: 10px 0;
z-index: 99;
opacity: 0;
visibility: hidden;
background: #fff;
box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
transition: 0.3s;
}
.navbar .dropdown ul li {
min-width: 200px;
}
.navbar .dropdown ul a {
padding: 10px 20px;
font-size: 13px;
text-transform: none;
font-weight: 500;
color: #581601;
/* Şeffaf header durumunda dropdown'daki yazıların gölgeli olmasını engelle */
text-shadow: none !important;
/* YENİ: Dropdown içindeki alt çizgi efektini sıfırla */
position: static;
}
/* YENİ: Dropdown içindeki alt çizgi olmasın */
.navbar .dropdown ul a::after {
display: none;
}
.navbar .dropdown ul a:hover,
.navbar .dropdown ul .active:hover,
.navbar .dropdown ul li:hover > a {
color: #f03c02;
}
.navbar .dropdown:hover > ul {
opacity: 1;
top: 100%;
visibility: visible;
}
.navbar .dropdown .dropdown ul {
top: 0;
left: calc(100% - 30px);
visibility: hidden;
}
.navbar .dropdown .dropdown:hover > ul {
opacity: 1;
top: 0;
left: 100%;
visibility: visible;
}
@media (max-width: 1366px) {
.navbar .dropdown .dropdown ul {
left: -90%;
}
.navbar .dropdown .dropdown:hover > ul {
left: -100%;
}
}
/**
* Mobile Navigation
*/
.mobile-nav-toggle {
color: #2b2320;
font-size: 28px;
cursor: pointer;
display: none;
line-height: 0;
transition: 0.5s;
}
/* YENİ: Mobil ikonu şeffafken beyaz yap */
#header:not(.header-scrolled) .mobile-nav-toggle {
color: #fff;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}
.mobile-nav-toggle.bi-x {
color: #fff; /* Bu zaten beyazmış, harika */
}
@media (max-width: 991px) {
.mobile-nav-toggle {
display: block;
}
.navbar ul {
display: none;
}
}
/* --- ANA DEĞİŞİKLİKLER BURADA BAŞLIYOR --- */
.navbar-mobile {
position: fixed;
overflow: hidden;
top: 0;
right: 0;
left: 0;
bottom: 0;
/* DEĞİŞTİ: Arka planı o şarap rengi gradyanla değiştiriyoruz */
background: linear-gradient(135deg, #4b2a3a 0%, #805066 100%);
transition: 0.3s;
z-index: 999;
/* YENİ: Linkleri tam ortalamak için Flexbox ekliyoruz */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
/* Kapatma (X) butonunu daha belirgin hale getiriyoruz */
.navbar-mobile .mobile-nav-toggle {
position: absolute;
top: 25px;
right: 25px;
font-size: 2.2rem; /* Biraz büyüttük */
color: #FFF5E1; /* Krem rengi */
}
/* DEĞİŞTİ: Beyaz kutuyu kaldırıp linkleri direkt gradyan üzerine alıyoruz */
.navbar-mobile ul {
display: block;
padding: 0;
margin: 0;
list-style: none;
text-align: center;
/* position: absolute, top, right, bottom, left, background-color, overflow-y GİTTİ */
}
/* DEĞİŞTİ: Linkleri "Elit" hale getiriyoruz */
.navbar-mobile a,
.navbar-mobile a:focus {
padding: 15px 10px;
font-size: 2rem; /* Çok daha büyük */
color: #FFF5E1; /* Krem rengi */
font-family: 'Lora', serif; /* Romantik font */
text-transform: uppercase;
letter-spacing: 2px;
text-shadow: 1px 1px 3px rgba(0,0,0,0.2);
transition: all 0.3s ease;
display: block;
}
/* DEĞİŞTİ: Hover (üzerine gelme) efektini temaya uygun hale getiriyoruz */
.navbar-mobile a:hover,
.navbar-mobile .active,
.navbar-mobile li:hover > a {
color: #FFFFFF; /* Tam beyaz */
letter-spacing: 4px; /* Hafif açılma efekti */
}
/* Bu 'getstarted' butonu muhtemelen temaya uymuyordur, gizleyelim */
.navbar-mobile .getstarted {
display: none;
}
/* DEĞİŞTİ: Alt menü (dropdown) kutusunu da temaya uyduruyoruz */
.navbar-mobile .dropdown ul {
position: static;
display: none;
margin: 10px 0;
padding: 10px 0;
z-index: 99;
opacity: 1;
visibility: visible;
/* Beyaz arka planı kaldırıp, hafif koyu bir şeffaf katman ekliyoruz */
background: rgba(0, 0, 0, 0.15);
box-shadow: none; /* Gölgeyi kaldır */
border-radius: 5px;
}
.navbar-mobile .dropdown ul li {
min-width: 200px;
}
/* DEĞİŞTİ: Alt menü linkleri */
.navbar-mobile .dropdown ul a {
padding: 8px 20px;
font-size: 1.2rem; /* Ana linklerden küçük */
color: #F7E0E7; /* Soluk pembe */
text-transform: none; /* Normal yazı */
letter-spacing: 1px;
}
.navbar-mobile .dropdown ul a i {
font-size: 12px;
}
/* DEĞİŞTİ: Alt menü hover efekti */
.navbar-mobile .dropdown ul a:hover,
.navbar-mobile .dropdown ul .active:hover,
.navbar-mobile .dropdown ul li:hover > a {
color: #FFFFFF; /* Tam beyaz */
}
.navbar-mobile .dropdown > .dropdown-active {
display: block;
}
/* --- HEADER ALT ÇİZGİ RENK DÜZELTMESİ (Bunu CSS dosyanın en sonuna ekle) --- */
/* 1. Kaydırılmış header'daki alt çizgi rengini koyu gri yap */
#header.header-scrolled .navbar a::after {
background-color: #777;
}
/* 2. Kaydırılmış header'daki aktif linkin YAZI rengini de koyu gri yap */
#header.header-scrolled .navbar .active > a {
color: #777;
}
/* --- YENİ CSS KODLARI BURADA BİTİYOR --- */
/*--------------------------------------------------------------
# Hero Section
/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# YENİ "YAŞAYAN FOTOĞRAFLAR" HERO SECTION TASARIMI
--------------------------------------------------------------*/
/* YENİ: 'Lora' fontunu (italik) ekliyoruz */
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,700;1,400&display=swap');
#hero {
width: 100%;
aspect-ratio: 1536 / 1024; /* Daha etkileyici bir görünüm için yüksekliği artıralım */
overflow: hidden;
position: relative;
padding: 0;
/* Tasarıma derinlik katmak için yumuşak bir gölge */
box-shadow: 0 10px 30px rgba(161, 106, 112, 0.2);
}
/* Her bir slaytın kendisine odaklanıyoruz */
#hero .carousel-item {
width: 100%;
aspect-ratio: 1536 / 1024;
position: relative;
}
/* Resimlere hayat veren "Ken Burns" efekti için animasyon */
@keyframes kenBurnsEffect {
0% {
transform: scale(1.05) translate(0, 0);
}
100% {
transform: scale(1.15) translate(-2%, 2%);
}
}
/* Arka plan resminin kendisi */
#hero .carousel-item img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover; /* Resmin orantısını bozmadan doldurur */
/* Animasyonu uygula: 20 saniye sürsün, sonsuz dönsün ve yumuşak olsun */
animation: kenBurnsEffect 20s infinite alternate ease-in-out;
}
/* Resmin üzerine metnin okunurluğunu artıran zarif bir gölge katmanı */
#hero .carousel-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
/* Aşağıdan yukarıya doğru hafif bir karartma */
background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, transparent 60%);
z-index: 1;
}
/* Metinlerin konumlandığı alan */
#hero .carousel-container {
display: flex;
justify-content: flex-start; /* Metni sola yaslayalım */
align-items: flex-end; /* Metni aşağıya yaslayalım */
position: absolute;
bottom: 15%; /* Aşağıdan %15 yukarıda */
top: auto;
left: 8%; /* Soldan %8 içeride */
right: 8%;
z-index: 2;
text-align: left;
}
/* Metinlerin olduğu kutuyu kaldıralım, metinler havada süzülsün */
#hero .carousel-content {
background: none; /* Arka plan rengini kaldır */
padding: 0;
color: #fff;
border-top: none; /* Mavi çizgiyi kaldır */
}
/* Metinlerin aşağıdan yukarıya süzülme animasyonu */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(50px);
}
to {
opacity: 2;
transform: translateY(0);
}
}
/* YENİ: Metinlerin yukarıdan aşağıya süzülme animasyonu */
@keyframes fadeInDown {
from {
opacity: 0;
transform: translateY(-50px);
}
to {
opacity: 2;
transform: translateY(0);
}
}
#hero .carousel-content h2 {
color: #fff;
margin-bottom: 20px;
font-size: 2.0rem; /* Boyut güzel, kalsın */
font-family: 'Playfair Display', serif; /* Font harika, kalsın */
font-weight: 700;
text-shadow: 2px 2px 15px rgba(0, 0, 0, 0.6);
/* YENİ: Animasyonu değiştirdik */
animation: fadeInDown 1s ease-in-out 0.5s;
animation-fill-mode: both;
}
/* Alt Başlık (p) - "Seni çok seviyorum" */
#hero .carousel-content p {
color: rgba(255, 255, 255, 0.9);
/* YENİ: Fontu 'Lora' (italik) olarak değiştirdik */
font-family: 'Lora', serif;
font-style: italic;
font-size: 1.5rem; /* Biraz daha belirgin yaptık */
letter-spacing: 1px;
text-transform: none;
max-width: 600px;
animation: fadeInUp 1s ease-in-out 1s; /* Başlıktan sonra gelsin */
animation-fill-mode: both;
}
/* Geçiş Okları - RENKLER GÜNCELLENDİ */
#hero .carousel-control-prev,
#hero .carousel-control-next {
width: 8%;
opacity: 0.8;
transition: opacity 0.3s ease;
}
#hero .carousel-control-prev:hover,
#hero .carousel-control-next:hover {
opacity: 1;
}
/* OK İKONUNUN KENDİSİ (Eski span yerine artık i etiketi) */
#hero .carousel-control-next-icon,
#hero .carousel-control-prev-icon {
background-image: none !important;
display: flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
background-color: rgba(255, 255, 255, 0.2);
border-radius: 50%;
font-size: 1.2rem;
/* YENİ: Rengi yeşilden gül kurusuna çektik */
color: #D8B2B2;
transition: all 0.4s ease;
}
/* Üzerine gelince olacaklar */
#hero .carousel-control-prev:hover .carousel-control-prev-icon,
#hero .carousel-control-next:hover .carousel-control-next-icon {
/* YENİ: Rengi yeşilden asil şarap rengine çektik */
background-color: #9B5C5C;
color: #fff; /* Kalp beyaz olsun */
transform: scale(1.1);
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
/* Alttaki Noktalar (Indicators) - (Bu pembe renk çok güzel, kalsın) */
#hero .carousel-indicators [data-bs-target] {
cursor: pointer;
background-color: rgba(255, 255, 255, 0.5);
width: 12px;
height: 12px;
border-radius: 50%;
border: 0;
margin: 0 5px;
transition: background-color 0.3s ease;
}
#hero .carousel-indicators .active {
background-color: #e89595; /* Vurgu rengimiz */
}
/* Responsive Ayarlar (Dokunmadım, bunlar iyi) */
@media (max-width: 992px) {
#hero, #hero .carousel-item {
height: 80vh;
}
#hero .carousel-content h2 {
font-size: 2.5rem;
}
#hero .carousel-content p {
font-size: 1rem;
}
}
@media (max-width: 768px) {
#hero .carousel-container {
left: 5%;
right: 5%;
bottom: 12%;
}
#hero .carousel-content h2 {
font-size: 2rem;
}
#hero .carousel-item img {
animation:none;
}
}
/*--------------------------------------------------------------
# Sections General
--------------------------------------------------------------*/
section {
padding: 60px 0;
overflow: hidden;
}
.section-bg {
background-color: #f6f3f2;
}
.section-title {
padding-bottom: 30px;
text-align: center;
}
.section-title h2 {
font-family: 'Dancing Script', cursive; /* Bölüm başlıkları da el yazısı */
font-size: 50px;
color: #D8B2B2; /* Ana renk olarak pembe tonunu kullanalım */
}
.section-title h2 strong {
font-weight: 700;
}
.section-title p {
margin-bottom: 0;
}
/*--------------------------------------------------------------
# Breadcrumbs
--------------------------------------------------------------*/
.breadcrumbs {
padding: 15px 0;
background: #0a78b9;
min-height: 40px;
}
.breadcrumbs h2 {
font-size: 28px;
font-weight: 300;
color: white;
}
.breadcrumbs ol {
display: flex;
flex-wrap: wrap;
list-style: none;
padding: 0;
margin: 0;
color: #ded5d2;
}
.breadcrumbs ol a {
color: #fe825a;
}
.breadcrumbs ol li + li {
padding-left: 10px;
}
.breadcrumbs ol li + li::before {
display: inline-block;
padding-right: 10px;
color: #c8bab5;
content: "/";
}
@media (max-width: 768px) {
.breadcrumbs .d-flex {
display: block !important;
}
.breadcrumbs ol {
display: block;
}
.breadcrumbs ol li {
display: inline-block;
}
}
/*--------------------------------------------------------------
# Cta
--------------------------------------------------------------*/
.cta {
background: #f3f1f0;
padding: 60px 0;
color: #574741;
}
.cta h3 {
font-size: 28px;
font-weight: 700;
}
.cta h3 span {
color: #f03c02;
}
.cta p {
padding: 0;
margin: 0;
}
.cta .cta-btn {
font-family: "Poppins", sans-serif;
text-transform: uppercase;
font-weight: 500;
font-size: 14px;
letter-spacing: 1px;
display: inline-block;
padding: 10px 25px;
border-radius: 2px;
transition: 0.4s;
margin: 10px;
border-radius: 4px;
border: 2px solid #f03c02;
color: #f03c02;
background: #fff;
}
.cta .cta-btn:hover {
background: #f03c02;
color: #fff;
}
@media (max-width: 1024px) {
.cta {
background-attachment: scroll;
}
}
@media (min-width: 769px) {
.cta .cta-btn-container {
display: flex;
align-items: center;
justify-content: flex-end;
}
}
/*--------------------------------------------------------------
# Portfolio
--------------------------------------------------------------*/
.portfolio #portfolio-flters {
padding: 0;
margin: 0 auto 50px auto;
list-style: none;
text-align: center;
}
.portfolio #portfolio-flters li {
cursor: pointer;
display: inline-block;
padding: 8px 20px 10px 20px;
font-size: 14px;
font-weight: 400;
line-height: 1;
text-transform: uppercase;
color: #4d4643;
transition: all 0.3s;
border-radius: 50px;
}
.portfolio #portfolio-flters li:hover, .portfolio #portfolio-flters li.filter-active {
color: #fff;
background: #0a78b9;
}
.portfolio #portfolio-flters li:last-child {
margin-right: 0;
}
.portfolio .portfolio-item {
margin-bottom: 30px;
}
.portfolio .portfolio-item .portfolio-info {
opacity: 0;
position: absolute;
left: 30px;
right: 30px;
bottom: 0;
z-index: 3;
transition: all ease-in-out 0.3s;
background: rgba(255, 255, 255, 0.9);
padding: 15px;
}
.portfolio .portfolio-item .portfolio-info h4 {
font-size: 18px;
color: #fff;
font-weight: 600;
color: #2b2320;
}
.portfolio .portfolio-item .portfolio-info p {
color: #65534c;
font-size: 14px;
margin-bottom: 0;
}
.portfolio .portfolio-item .portfolio-info .preview-link, .portfolio .portfolio-item .portfolio-info .details-link {
position: absolute;
right: 40px;
font-size: 24px;
top: calc(50% - 18px);
color: #0a78b9;
}
.portfolio .portfolio-item .portfolio-info .preview-link:hover, .portfolio .portfolio-item .portfolio-info .details-link:hover {
color: #0a78b9;
}
.portfolio .portfolio-item .portfolio-info .details-link {
right: 10px;
}
.portfolio .portfolio-item .portfolio-links {
opacity: 0;
left: 0;
right: 0;
text-align: center;
z-index: 3;
position: absolute;
transition: all ease-in-out 0.3s;
}
.portfolio .portfolio-item .portfolio-links a {
color: #fff;
margin: 0 2px;
font-size: 28px;
display: inline-block;
transition: 0.3s;
}
.portfolio .portfolio-item .portfolio-links a:hover {
color: #fe825a;
}
.portfolio .portfolio-item:hover .portfolio-info {
opacity: 1;
bottom: 20px;
}
/*--------------------------------------------------------------
# Portfolio Details
--------------------------------------------------------------*/
.portfolio-details {
padding-top: 40px;
}
.portfolio-details .portfolio-details-slider {
width: 100%;
}
.portfolio-details .portfolio-details-slider .swiper-pagination {
margin-top: 20px;
position: relative;
}
.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet {
width: 12px;
height: 12px;
background-color: #fff;
opacity: 1;
border: 1px solid #0a78b9;
}
.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet-active {
background-color: #0a78b9;
}
.portfolio-details .portfolio-info {
padding: 30px;
box-shadow: 0px 0 30px rgba(43, 35, 32, 0.08);
}
.portfolio-details .portfolio-info h3 {
font-size: 22px;
font-weight: 700;
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: 1px solid #eee;
}
.portfolio-details .portfolio-info ul {
list-style: none;
padding: 0;
font-size: 15px;
}
.portfolio-details .portfolio-info ul li + li {
margin-top: 10px;
}
.portfolio-details .portfolio-description {
padding-top: 30px;
}
.portfolio-details .portfolio-description h2 {
font-size: 26px;
font-weight: 700;
margin-bottom: 20px;
}
.portfolio-details .portfolio-description p {
padding: 0;
}
/*--------------------------------------------------------------
# About Us
--------------------------------------------------------------*/
.about-us .content {
padding: 30px 0;
}
.about-us .content h3 {
font-weight: 700;
font-size: 34px;
}
.about-us .content p {
margin-bottom: 0;
}
.about-us .content .icon-box {
margin-top: 25px;
}
.about-us .content .icon-box h4 {
font-size: 20px;
font-weight: 700;
margin: 5px 0 10px 60px;
}
.about-us .content .icon-box i {
font-size: 48px;
float: left;
color: #f03c02;
}
.about-us .content .icon-box p {
font-size: 15px;
color: #90847f;
margin-left: 60px;
}
.about-us .image {
background: url("../img/about.jpg") center center no-repeat;
background-size: cover;
min-height: 400px;
}
@media (max-width: 991px) {
.about-us .image {
text-align: center;
}
.about-us .image img {
max-width: 80%;
}
}
@media (max-width: 667px) {
.about-us .image img {
max-width: 100%;
}
}
/*--------------------------------------------------------------
# Features
--------------------------------------------------------------*/
.features {
padding-top: 0;
}
.features .nav-tabs {
border: 0;
}
.features .nav-link {
border: 0;
padding: 25px 20px;
transition: 0.3s;
color: #2b2320;
}
.features .nav-link:hover {
color: #0a78b9;
}
.features .nav-link h4 {
font-size: 18px;
font-weight: 600;
}
.features .nav-link p {
font-size: 14px;
margin-bottom: 0;
}
.features .nav-link.active {
box-shadow: 0px 0 15px rgba(0, 0, 0, 0.12);
color: #0a78b9;
}
.features .tab-pane.active {
-webkit-animation: slide-down 0.5s ease-out;
animation: slide-down 0.5s ease-out;
}
@-webkit-keyframes slide-down {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes slide-down {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/*--------------------------------------------------------------
# Pricing
--------------------------------------------------------------*/
.pricing .box {
padding: 20px;
background: #f3f1f0;
text-align: center;
border-radius: 8px;
position: relative;
overflow: hidden;
}
.pricing h3 {
font-weight: 400;
padding: 15px;
font-size: 18px;
text-transform: uppercase;
font-weight: 600;
color: #2b2320;
}
.pricing h4 {
font-size: 42px;
color: #f03c02;
font-weight: 500;
font-family: "Open Sans", sans-serif;
margin-bottom: 20px;
}
.pricing h4 sup {
font-size: 20px;
top: -15px;
left: -3px;
}
.pricing h4 span {
color: #bababa;
font-size: 16px;
font-weight: 300;
}
.pricing ul {
padding: 0;
list-style: none;
color: #2b2320;
text-align: center;
line-height: 20px;
font-size: 14px;
}
.pricing ul li {
padding-bottom: 16px;
}
.pricing ul .na {
color: #ccc;
text-decoration: line-through;
}
.pricing .btn-wrap {
padding: 15px;
text-align: center;
}
.pricing .btn-buy {
color: #9c847b;
border: 2px solid #e9e3e1;
display: inline-block;
padding: 10px 40px 12px 40px;
border-radius: 4px;
transition: none;
font-size: 14px;
font-weight: 400;
font-family: "Muli", sans-serif;
font-weight: 600;
transition: 0.3s;
}
.pricing .btn-buy:hover {
color: #f03c02;
border-color: #f03c02;
}
.pricing .featured {
background: #fd5c28;
box-shadow: none;
}
.pricing .featured h3, .pricing .featured h4, .pricing .featured h4 span, .pricing .featured ul, .pricing .featured ul .na {
color: #fff;
}
.pricing .featured .btn-wrap {
padding: 15px;
text-align: center;
}
.pricing .featured .btn-buy {
color: #fff;
border-color: rgba(255, 255, 255, 0.5);
}
.pricing .featured .btn-buy:hover {
color: #f03c02;
background: #fff;
border-color: #fff;
}
/*--------------------------------------------------------------
# Cta Pricing
--------------------------------------------------------------*/
.cta-pricing {
background: #f3f1f0;
color: #65534c;
}
.cta-pricing h3 {
font-size: 28px;
font-weight: 700;
}
.cta-pricing .cta-btn {
font-family: "Poppins", sans-serif;
text-transform: uppercase;
font-weight: 500;
font-size: 14px;
letter-spacing: 1px;
display: inline-block;
padding: 10px 25px;
border-radius: 2px;
transition: 0.4s;
margin: 10px;
border-radius: 4px;
border: 2px solid #f03c02;
color: #f03c02;
background: #fff;
}
.cta-pricing .cta-btn:hover {
background: #f03c02;
color: #fff;
}
/*--------------------------------------------------------------
# Testimonials
--------------------------------------------------------------*/
.testimonials .testimonial-item {
box-sizing: content-box;
padding: 40px;
box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.08);
position: relative;
background: #fff;
}
.testimonials .testimonial-item .testimonial-img {
width: 90px;
border-radius: 50px;
border: 6px solid #fff;
float: left;
margin: 0 10px 0 0;
}
.testimonials .testimonial-item h3 {
font-size: 18px;
font-weight: bold;
margin: 10px 0 5px 0;
color: #111;
}
.testimonials .testimonial-item h4 {
font-size: 14px;
color: #999;
margin: 0;
}
.testimonials .testimonial-item .quote-icon-left, .testimonials .testimonial-item .quote-icon-right {
color: #fecfc0;
font-size: 26px;
}
.testimonials .testimonial-item .quote-icon-left {
display: inline-block;
left: -5px;
position: relative;
}
.testimonials .testimonial-item .quote-icon-right {
display: inline-block;
right: -5px;
position: relative;
top: 10px;
}
.testimonials .testimonial-item p {
font-style: italic;
margin: 15px 0 0 0;
padding: 0;
}
/*--------------------------------------------------------------
# Contact
--------------------------------------------------------------*/
.contact .info-wrap {
box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
padding: 30px;
}
.contact .info {
background: #fff;
}
.contact .info i {
font-size: 20px;
color: #0a78b9;
float: left;
width: 44px;
height: 44px;
background: #ffeee8;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50px;
transition: all 0.3s ease-in-out;
}
.contact .info h4 {
padding: 0 0 0 60px;
font-size: 22px;
font-weight: 600;
margin-bottom: 5px;
color: #2b2320;
}
.contact .info p {
padding: 0 0 0 60px;
margin-bottom: 0;
font-size: 14px;
color: #65534c;
}
.contact .info:hover i {
background: #0a78b9;
color: #fff;
}
.contact .php-email-form {
width: 100%;
box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.12);
padding: 30px;
background: #fff;
}
.contact .php-email-form .form-group {
padding-bottom: 8px;
}
.contact .php-email-form .error-message {
display: none;
color: #fff;
background: #ed3c0d;
text-align: left;
padding: 15px;
font-weight: 600;
}
.contact .php-email-form .error-message br + br {
margin-top: 25px;
}
.contact .php-email-form .sent-message {
display: none;
color: #fff;
background: #18d26e;
text-align: center;
padding: 15px;
font-weight: 600;
}
.contact .php-email-form .loading {
display: none;
background: #fff;
text-align: center;
padding: 15px;
}
.contact .php-email-form .loading:before {
content: "";
display: inline-block;
border-radius: 50%;
width: 24px;
height: 24px;
margin: 0 10px -6px 0;
border: 3px solid #18d26e;
border-top-color: #eee;
-webkit-animation: animate-loading 1s linear infinite;
animation: animate-loading 1s linear infinite;
}
.contact .php-email-form input, .contact .php-email-form textarea {
border-radius: 0;
box-shadow: none;
font-size: 14px;
}
.contact .php-email-form input {
height: 44px;
}
.contact .php-email-form textarea {
padding: 10px 12px;
}
.contact .php-email-form button[type="submit"] {
background: #0a78b9;
border: 0;
padding: 10px 24px;
color: #fff;
transition: 0.4s;
border-radius: 4px;
}
.contact .php-email-form button[type="submit"]:hover {
background: #0a78b9;
}
@-webkit-keyframes animate-loading {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes animate-loading {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/*--------------------------------------------------------------
# Blog
--------------------------------------------------------------*/
.blog {
padding: 40px 0 20px 0;
}
.blog .entry {
padding: 30px;
margin-bottom: 60px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
.blog .entry .entry-img {
max-height: 440px;
margin: -30px -30px 20px -30px;
overflow: hidden;
}
.blog .entry .entry-title {
font-size: 28px;
font-weight: bold;
padding: 0;
margin: 0 0 20px 0;
}
.blog .entry .entry-title a {
color: #2b2320;
transition: 0.3s;
}
.blog .entry .entry-title a:hover {
color: #f03c02;
}
.blog .entry .entry-meta {
margin-bottom: 15px;
color: #9c847b;
}
.blog .entry .entry-meta ul {
display: flex;
flex-wrap: wrap;
list-style: none;
align-items: center;
padding: 0;
margin: 0;
}
.blog .entry .entry-meta ul li + li {
padding-left: 20px;
}
.blog .entry .entry-meta i {
font-size: 16px;
margin-right: 8px;
line-height: 0;
}
.blog .entry .entry-meta a {
color: #847872;
font-size: 14px;
display: inline-block;
line-height: 1;
}
.blog .entry .entry-content p {
line-height: 24px;
}
.blog .entry .entry-content .read-more {
-moz-text-align-last: right;
text-align-last: right;
}
.blog .entry .entry-content .read-more a {
display: inline-block;
background: #f03c02;
color: #fff;
padding: 6px 20px;
transition: 0.3s;
font-size: 14px;
border-radius: 4px;
}
.blog .entry .entry-content .read-more a:hover {
background: #fd490f;
}
.blog .entry .entry-content h3 {
font-size: 22px;
margin-top: 30px;
font-weight: bold;
}
.blog .entry .entry-content blockquote {
overflow: hidden;
background-color: #fafafa;
padding: 60px;
position: relative;
text-align: center;
margin: 20px 0;
}
.blog .entry .entry-content blockquote p {
color: #4d4643;
line-height: 1.6;
margin-bottom: 0;
font-style: italic;
font-weight: 500;
font-size: 22px;
}
.blog .entry .entry-content blockquote::after {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background-color: #2b2320;
margin-top: 20px;
margin-bottom: 20px;
}
.blog .entry .entry-footer {
padding-top: 10px;
border-top: 1px solid #0a78b9;
}
.blog .entry .entry-footer i {
color: #836a61;
display: inline;
}
.blog .entry .entry-footer a {
color: #3a2f2b;
transition: 0.3s;
}
.blog .entry .entry-footer a:hover {
color: #f03c02;
}
.blog .entry .entry-footer .cats {
list-style: none;
display: inline;
padding: 0 20px 0 0;
font-size: 14px;
}
.blog .entry .entry-footer .cats li {
display: inline-block;
}
.blog .entry .entry-footer .tags {
list-style: none;
display: inline;
padding: 0;
font-size: 14px;
}
.blog .entry .entry-footer .tags li {
display: inline-block;
}
.blog .entry .entry-footer .tags li + li::before {
padding-right: 6px;
color: #6c757d;
content: ",";
}
.blog .entry .entry-footer .share {
font-size: 16px;
}
.blog .entry .entry-footer .share i {
padding-left: 5px;
}
.blog .entry-single {
margin-bottom: 30px;
}
.blog .blog-author {
padding: 20px;
margin-bottom: 30px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
.blog .blog-author img {
width: 120px;
margin-right: 20px;
}
.blog .blog-author h4 {
font-weight: 600;
font-size: 22px;
margin-bottom: 0px;
padding: 0;
color: #2b2320;
}
.blog .blog-author .social-links {
margin: 0 10px 10px 0;
}
.blog .blog-author .social-links a {
color: rgba(43, 35, 32, 0.5);
margin-right: 5px;
}
.blog .blog-author p {
font-style: italic;
color: #bfb9b6;
}
.blog .blog-comments {
margin-bottom: 30px;
}
.blog .blog-comments .comments-count {
font-weight: bold;
}
.blog .blog-comments .comment {
margin-top: 30px;
position: relative;
}
.blog .blog-comments .comment .comment-img {
margin-right: 14px;
}
.blog .blog-comments .comment .comment-img img {
width: 60px;
}
.blog .blog-comments .comment h5 {
font-size: 16px;
margin-bottom: 2px;
}
.blog .blog-comments .comment h5 a {
font-weight: bold;
color: #4d4643;
transition: 0.3s;
}
.blog .blog-comments .comment h5 a:hover {
color: #f03c02;
}
.blog .blog-comments .comment h5 .reply {
padding-left: 10px;
color: #2b2320;
}
.blog .blog-comments .comment h5 .reply i {
font-size: 20px;
}
.blog .blog-comments .comment time {
display: block;
font-size: 14px;
color: #483b36;
margin-bottom: 5px;
}
.blog .blog-comments .comment.comment-reply {
padding-left: 40px;
}
.blog .blog-comments .reply-form {
margin-top: 30px;
padding: 30px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
.blog .blog-comments .reply-form h4 {
font-weight: bold;
font-size: 22px;
}
.blog .blog-comments .reply-form p {
font-size: 14px;
}
.blog .blog-comments .reply-form input {
border-radius: 4px;
padding: 10px 10px;
font-size: 14px;
}
.blog .blog-comments .reply-form input:focus {
box-shadow: none;
border-color: #fe825a;
}
.blog .blog-comments .reply-form textarea {
border-radius: 4px;
padding: 10px 10px;
font-size: 14px;
}
.blog .blog-comments .reply-form textarea:focus {
box-shadow: none;
border-color: #fe825a;
}
.blog .blog-comments .reply-form .form-group {
margin-bottom: 25px;
}
.blog .blog-comments .reply-form .btn-primary {
border-radius: 4px;
padding: 10px 20px;
border: 0;
background-color: #2b2320;
}
.blog .blog-comments .reply-form .btn-primary:hover {
background-color: #3a2f2b;
}
.blog .blog-pagination {
color: #65534c;
}
.blog .blog-pagination ul {
display: flex;
padding: 0;
margin: 0;
list-style: none;
}
.blog .blog-pagination li {
margin: 0 5px;
transition: 0.3s;
}
.blog .blog-pagination li a {
color: #2b2320;
padding: 7px 16px;
display: flex;
align-items: center;
justify-content: center;
}
.blog .blog-pagination li.active, .blog .blog-pagination li:hover {
background: #f03c02;
}
.blog .blog-pagination li.active a, .blog .blog-pagination li:hover a {
color: #fff;
}
.blog .sidebar {
padding: 30px;
margin: 0 0 60px 20px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
.blog .sidebar .sidebar-title {
font-size: 20px;
font-weight: 700;
padding: 0 0 0 0;
margin: 0 0 15px 0;
color: #2b2320;
position: relative;
}
.blog .sidebar .sidebar-item {
margin-bottom: 30px;
}
.blog .sidebar .search-form form {
background: #fff;
border: 1px solid #ddd;
padding: 3px 10px;
position: relative;
}
.blog .sidebar .search-form form input[type="text"] {
border: 0;
padding: 4px;
border-radius: 4px;
width: calc(100% - 40px);
}
.blog .sidebar .search-form form button {
position: absolute;
top: 0;
right: 0;
bottom: 0;
border: 0;
background: none;
font-size: 16px;
padding: 0 15px;
margin: -1px;
background: #f03c02;
color: #fff;
transition: 0.3s;
border-radius: 0 4px 4px 0;
line-height: 0;
}
.blog .sidebar .search-form form button i {
line-height: 0;
}
.blog .sidebar .search-form form button:hover {
background: #fd4509;
}
.blog .sidebar .categories ul {
list-style: none;
padding: 0;
}
.blog .sidebar .categories ul li + li {
padding-top: 10px;
}
.blog .sidebar .categories ul a {
color: #2b2320;
transition: 0.3s;
}
.blog .sidebar .categories ul a:hover {
color: #f03c02;
}
.blog .sidebar .categories ul a span {
padding-left: 5px;
color: #b4aca8;
font-size: 14px;
}
.blog .sidebar .recent-posts .post-item + .post-item {
margin-top: 15px;
}
.blog .sidebar .recent-posts img {
width: 80px;
float: left;
}
.blog .sidebar .recent-posts h4 {
font-size: 15px;
margin-left: 95px;
font-weight: bold;
}
.blog .sidebar .recent-posts h4 a {
color: #2b2320;
transition: 0.3s;
}
.blog .sidebar .recent-posts h4 a:hover {
color: #f03c02;
}
.blog .sidebar .recent-posts time {
display: block;
margin-left: 95px;
font-style: italic;
font-size: 14px;
color: #b4aca8;
}
.blog .sidebar .tags {
margin-bottom: -10px;
}
.blog .sidebar .tags ul {
list-style: none;
padding: 0;
}
.blog .sidebar .tags ul li {
display: inline-block;
}
.blog .sidebar .tags ul a {
color: #745f56;
font-size: 14px;
padding: 6px 14px;
margin: 0 6px 8px 0;
border: 1px solid #ded5d2;
display: inline-block;
transition: 0.3s;
}
.blog .sidebar .tags ul a:hover {
color: #fff;
border: 1px solid #f03c02;
background: #f03c02;
}
.blog .sidebar .tags ul a span {
padding-left: 5px;
color: #c8bab5;
font-size: 14px;
}
/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
#footer {
color: #805066;
font-size: 14px;
background: #045b8e;
}
#footer .footer-top {
padding: 60px 0 30px 0;
background: #28245d;
}
#footer .footer-top .footer-contact {
margin-bottom: 30px;
}
#footer .footer-top .footer-contact h3 {
font-size: 22px;
margin: 0 0 10px 0;
padding: 2px 0 2px 0;
line-height: 1;
font-weight: 500;
letter-spacing: 1px;
text-transform: uppercase;
color: #fff;
}
#footer .footer-top .footer-contact p {
font-size: 14px;
line-height: 24px;
margin-bottom: 0;
font-family: "Muli", sans-serif;
color: white;
}
#footer .footer-top h4 {
font-size: 16px;
font-weight: bold;
color: #fff;
position: relative;
padding-bottom: 12px;
}
#footer .footer-top .footer-links {
margin-bottom: 30px;
}
#footer .footer-top .footer-links ul {
list-style: none;
padding: 0;
margin: 0;
}
#footer .footer-top .footer-links ul i {
padding-right: 2px;
color: black;
font-size: 18px;
line-height: 1;
}
#footer .footer-top .footer-links ul li {
padding: 10px 0;
display: flex;
align-items: center;
}
#footer .footer-top .footer-links ul li:first-child {
padding-top: 0;
}
#footer .footer-top .footer-links ul a {
color: white;
transition: 0.3s;
display: inline-block;
line-height: 1;
}
#footer .footer-top .footer-links ul a:hover {
text-decoration: none;
color: #ffffff;
}
#footer .footer-newsletter {
font-size: 15px;
}
#footer .footer-newsletter h4 {
font-size: 16px;
font-weight: bold;
color: #fff;
position: relative;
padding-bottom: 12px;
}
#footer .footer-newsletter form {
margin-top: 30px;
background: #fff;
padding: 6px 10px;
position: relative;
border-radius: 4px 0 0 4px;
text-align: left;
}
#footer .footer-newsletter form input[type="email"] {
border: 0;
padding: 4px 8px;
width: calc(100% - 100px);
}
#footer .footer-newsletter form input[type="submit"] {
position: absolute;
top: 0;
right: -4px;
bottom: 0;
border: 0;
background: none;
font-size: 16px;
padding: 0 20px;
background: #f03c02;
color: #fff;
transition: 0.3s;
border-radius: 0 4px 4px 0;
box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
}
#footer .footer-newsletter form input[type="submit"]:hover {
background: #fd5c28;
}
#footer .credits {
padding-top: 5px;
font-size: 13px;
color: #ffffffff;
}
.meka{
color:#ffffff;
}
.meka:hover{
color:antiquewhite;
}
#footer .social-links a {
font-size: 18px;
display: inline-block;
background: #0a78b9;
color: #fff;
line-height: 1;
padding: 8px 0;
margin-right: 4px;
border-radius: 50%;
text-align: center;
width: 36px;
height: 36px;
transition: 0.3s;
}
#footer .social-links a:hover {
background: #020D5F;
color: #fff;
text-decoration: none;
}
/* =======================================================
BİZİM ÖZEL STİLLERİMİZ
======================================================== */
/* 1. Genel Ayarlar ve Yeni Renk Paleti
--------------------------------*/
:root {
--ask-rengi: #e8a0bf; /* Ana rengimiz - Canlı ama soft bir pembe */
--zemin-rengi: #fdfaf7; /* Arka plan - Kırık beyaz, sıcak bir ton */
--yazi-rengi: #403d39; /* Yazı rengi - Koyu kahve/gri, siyahtan daha yumuşak */
--baslik-rengi: #252422; /* Başlıklar için biraz daha koyu */
}
body {
font-family: 'Lato', sans-serif; /* Tüm site için varsayılan font */
background-color: var(--zemin-rengi);
color: var(--yazi-rengi);
}
a {
color: var(--ask-rengi);
text-decoration: none;
}
a:hover {
color: #d17fac; /* Pembenin biraz daha koyu tonu */
text-decoration: none;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Playfair Display', serif; /* Tüm başlıklar için şık fontumuz */
color: var(--baslik-rengi);
}
/* HEADER - YÜZEN & KAYDIRMALI TASARIM (GÜNCELLENMİŞ) */
/* 1. Header'ın Genel Konumlandırması (Aynı kaldı) */
#header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 997;
background: transparent;
box-shadow: none;
border-bottom: 1px solid transparent;
padding: 20px 0;
transition: all 0.4s ease-in-out;
}
/* 2. BAŞLANGIÇTA (Header Şeffafken) Yazı Stilleri */
/* Logo yazısı (Bizim Hikayemiz) */
#header .logo h1 {
color: #ffffff; /* Beyaz */
transition: color 0.4s ease-in-out;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
/* Not: 'Great Vibes' fontu ana CSS'ten geliyor ve harika duruyor */
}
/* YENİ: YEŞİL KALP İKONU (Şeffaf Hali) */
#header .logo h1 a i {
color: #6a9c7e; /* <<< Senin sembolik yeşil rengin */
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4); /* Gölgesi kalsın */
margin-right: 8px; /* Yazıdan biraz ayır */
font-size: 0.9em; /* Başlıktan bir tık küçük, zarif */
vertical-align: middle;
transition: color 0.4s ease-in-out;
}
/* GÜNCELLENDİ: Navigasyon Linkleri (Şeffaf Hali) */
#header .nav-menu a {
color: #ffffff;
transition: color 0.4s ease-in-out;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
/* YENİ: Elit görünüm için stil eklemeleri */
font-family: 'Lora', serif;
font-size: 1.1rem; /* Daha okunaklı */
text-transform: uppercase;
letter-spacing: 1px;
padding: 10px 0 10px 30px; /* main.js ile uyumlu */
}
/* Şeffafken üzerine gelinceki renk (Aynı kaldı) */
#header .nav-menu a:hover,
#header .nav-menu .active > a {
color: rgba(255, 255, 255, 0.85);
}
/* 3. SAYFA KAYDIRILDIĞINDA (.header-scrolled aktifken) Stiller */
/* Arka plan geliyor (Padding'i biraz azalttık) */
#header.header-scrolled {
background: #FAF3E0;
border-bottom: 1px solid rgba(216, 178, 178, 0.3);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
padding: 15px 0; /* Geçişte hafifçe küçülsün */
}
/* Logo yazısı koyu renge dönüyor (Aynı kaldı) */
#header.header-scrolled .logo h1 {
color: #444;
text-shadow: none; /* Gölgeyi kaldır */
}
/* YENİ: YEŞİL KALP İKONU (Kaydırılmış Hali) */
#header.header-scrolled .logo h1 a i {
color: #6a9c7e; /* <<< Yeşil renk SABİT KALIYOR */
text-shadow: none; /* Gölgeyi kaldır */
}
/* GÜNCELLENDİ: Navigasyon Linkleri (Kaydırılmış Hali) */
#header.header-scrolled .nav-menu a {
color: #777;
text-shadow: none; /* Gölgeyi kaldır */
/* Lora, size vs. yukarıdan miras alınır, tekrar yazmaya gerek yok */
}
/* Kaydırılmış haldeyken üzerine gelinceki renk (Gül Kurusu) (Aynı kaldı) */
#header.header-scrolled .nav-menu a:hover,
#header.header-scrolled .nav-menu .active > a {
color: #D8B2B2;
}
/* 3. Footer (Alt Kısım) Düzenlemeleri
--------------------------------*/
#footer {
background: #805066; /* Koyu, sıcak bir arka plan */
color: #fff;
font-size: 14px;
text-align: center;
padding: 30px 0;
}
#footer .copyright, #footer .credits {
padding-top: 10px;
}
#footer .credits {
font-size: 13px;
color: rgba(255, 255, 255, 0.7);
}
/* 6. Zaman Tüneli Tasarımı - 'Anı Defteri' Stili
----------------------------------------------------*/
.timeline-main {
position: relative;
margin: 50px 0; /* Üst ve alt boşluğu biraz artıralım */
}
/* Ortadaki dikey çizgi - artık daha ince ve zarif */
.timeline-main::before {
content: '';
position: absolute;
left: 50%;
top: 0;
bottom: 0;
width: 2px; /* Çizgiyi incelttik */
background: rgba(216, 178, 178, 0.3); /* Gül kurusu renginin şeffaf hali */
margin-left: -1px;
}
.timeline-item {
margin-bottom: 50px;
position: relative;
}
.timeline-item::after {
content: "";
display: table;
clear: both;
}
/* İkonun bulunduğu daire - artık Adaçayı Yeşili */
.timeline-item .timeline-icon {
position: absolute;
left: 50%;
top: 0;
width: 50px;
height: 50px;
line-height: 50px; /* Dikeyde ortalamak için */
margin-left: -25px;
background: #B2D8B2; /* Ana rengimiz Adaçayı Yeşili */
border: 4px solid #FAF3E0; /* Kenarlık, krem rengi arka planla aynı */
border-radius: 50%;
text-align: center;
color: #fff;
font-size: 20px;
z-index: 1;
box-shadow: 0 0 0 4px #B2D8B2; /* Etrafına hafif bir halka efekti */
}
/* Anıların içeriğini tutan kutu - yeni sıcak gölgeler ve yuvarlak köşeler */
.timeline-item .timeline-content {
width: 45%;
padding: 30px;
background: #fff;
border-radius: 15px; /* Daha yuvarlak köşeler */
box-shadow: 0 10px 30px rgba(216, 178, 178, 0.15); /* Sıcak ve yumuşak gölge */
position: relative;
transition: all 0.3s ease-in-out;
}
/* Üzerine gelince hafifçe yükselme efekti */
.timeline-item .timeline-content:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(216, 178, 178, 0.2);
}
/* İçerik kutusundan çıkan küçük ok */
.timeline-item .timeline-content::before {
content: '';
position: absolute;
top: 20px; /* İkonla daha iyi hizalanması için biraz aşağı aldık */
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
}
/* SOL TARAFTAKİ KUTULAR */
.timeline-item:nth-child(odd) .timeline-content {
float: left;
}
.timeline-item:nth-child(odd) .timeline-content::before {
right: -15px;
border-left: 15px solid #fff;
}
/* SAĞ TARAFTAKİ KUTULAR */
.timeline-item:nth-child(even) .timeline-content {
float: right;
}
.timeline-item:nth-child(even) .timeline-content::before {
left: -15px;
border-right: 15px solid #fff;
}
/* İçerik Fontları ve Renkleri */
.timeline-content .date {
font-family: 'Lora', serif; /* Fontumuzu uyguladık */
font-size: 13px;
font-weight: 700;
color: #B2B2B2; /* Daha yumuşak bir gri */
display: block;
margin-bottom: 8px;
letter-spacing: 1px;
text-transform: uppercase; /* Tarihi büyük harf yaparak vurguladık */
}
.timeline-content h3 {
font-family: 'Dancing Script', cursive; /* Başlığa el yazısı fontu */
font-size: 32px;
margin-bottom: 10px;
color: #5B5B5B;
}
.timeline-content p {
font-family: 'Lora', serif;
font-size: 16px;
line-height: 1.7; /* Satır aralığını artırarak okunabilirliği iyileştirdik */
color: #777;
}
/* 7. Sevme Nedenleri Bölümü - 'Anı Defteri' Stili
----------------------------------------------------*/
.icon-box {
padding: 40px 30px;
position: relative;
overflow: hidden;
background: #fff;
width: 100%;
/* Yeni sıcak gölge ve yuvarlak köşeler */
border-radius: 15px;
box-shadow: 0 10px 30px rgba(216, 178, 178, 0.15);
/* Hover'da alttaki çizgi için hazırlık */
border-bottom: 4px solid transparent; /* Başlangıçta şeffaf */
transition: all 0.3s ease-in-out;
}
.icon-box:hover {
transform: translateY(-5px); /* Daha yumuşak bir yükselme */
box-shadow: 0 15px 40px rgba(216, 178, 178, 0.2);
border-color: #D8B2B2; /* Hover'da alttaki çizgi Gül Kurusu olsun */
}
/* İkon (Kalp) */
.icon-box .icon {
margin-bottom: 20px;
padding-top: 10px;
display: inline-block;
font-size: 48px;
line-height: 1;
/* İkon rengini Adaçayı Yeşili yapıyoruz (zaman tüneliyle aynı) */
color: #B2D8B2;
}
/* Başlık ("Desteğin", "Zekan" vs.) */
.icon-box .title {
font-family: 'Lora', serif; /* Ana metin fontumuzun kalın hali */
font-weight: 700;
margin-bottom: 15px;
font-size: 22px;
}
.icon-box .title a {
color: #5B5B5B; /* Yeni metin rengimiz */
transition: 0.3s;
}
.icon-box:hover .title a {
color: #D8B2B2; /* Hover'da başlık Gül Kurusu olsun */
}
/* Açıklama metni */
.icon-box .description {
font-family: 'Lora', serif;
line-height: 1.7; /* Daha okunaklı satır aralığı */
font-size: 16px;
color: #777;
}
/* MÜZİK ÇALAR - YENİ PROFESYONEL TASARIM */
.custom-music-player {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background: #805066; /* Daha dolgun bir siyah */
color: #fff;
z-index: 1000;
box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.5);
display: flex;
flex-direction: column; /* İçerikleri alt alta sırala (önce progress bar, sonra content) */
}
.player-content {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 25px; /* Dikey boşluğu artırdık */
width: 100%;
box-sizing: border-box;
}
/* 3 ana bölümü (şarkı, kontroller, süre) esnek hale getir */
.song-info, .controls, .time-info {
flex: 1; /* Her bölüme eşit alan ver */
display: flex;
align-items: center;
}
.song-info {
justify-content: flex-start; /* Sola yasla */
font-size: 15px;
opacity: 0.9;
}
.controls {
justify-content: center; /* Ortala */
}
.time-info {
justify-content: flex-end; /* Sağa yasla */
font-family: monospace; /* Süre için daha teknik bir font */
font-size: 14px;
opacity: 0.7;
}
/* Kontrol Butonları (Stilleri aynı kalabilir veya küçük değişiklikler yapılabilir) */
.controls .player-btn {
background-color: transparent;
border: none;
color: #b3b3b3; /* Rengi biraz daha yumuşattık */
border-radius: 50%;
width: 36px;
height: 36px;
font-size: 14px;
cursor: pointer;
margin: 0 8px;
transition: all 0.2s ease;
display: flex;
justify-content: center;
align-items: center;
}
.controls .player-btn:hover {
color: #fff; /* Hover'da tam beyaz yap */
}
.controls .play-btn {
width: 42px;
height: 42px;
font-size: 18px;
background-color: #fff;
color: #181818; /* İçi siyah */
}
.controls .play-btn:hover {
transform: scale(1.05);
color: #181818;
}
/* Yeni İlerleme Çubuğu Stilleri */
.progress-bar-container {
width: 100%;
height: 4px; /* Daha ince bir çubuk */
background-color: #404040;
cursor: pointer;
order: -1; /* Flexbox'ta en üste taşı */
}
.progress-bar {
width: 0%;
height: 100%;
background-color: #e877a3; /* Pembe rengimiz */
border-radius: 2px;
}
/* --- Header Alanı (Genel) - NİHAİ ÇÖZÜM (Şarap Rengi) --- */
#header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 997;
padding: 20px 0;
transition: all 0.4s ease-in-out;
/* ANASAYFA (page-home) için varsayılan (şeffaf) */
background: transparent;
border-bottom: 1px solid transparent;
box-shadow: none;
}
/* --- DURUM 2: KAYDIRILMIŞ VEYA DİĞER SAYFALAR --- */
/* Anasayfa'da kaydırıldığında VEYA diğer sayfalarda (en başta) */
#header.header-scrolled,
body.page-content #header {
/* DÜZELTME: Krem yerine ŞARAP RENGİ GRADYAN */
background: linear-gradient(to right, #4b2a3a 0%, #805066 100%) !important;
padding: 8px 0;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05) !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; /* Sınır rengini de uyumlu yaptık */
}
/* --- BU KURALLAR TÜM DURUMLARDA GEÇERLİ --- */
/* (Yazı renkleri artık hep açık renk, çünkü arka plan hep koyu) */
/* LOGO ve BAŞLIK */
.logo h1 {
font-size: 3rem !important;
margin: 0;
line-height: 1;
font-weight: normal;
font-family: 'Great Vibes', cursive !important;
}
.logo h1 a,
.logo h1 a:hover {
color: #F7E0E7 !important; /* Hep açık krem/pembe */
text-decoration: none;
text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.4) !important;
transition: all 0.3s ease;
}
/* YEŞİL KALP İKONU (Hizalaması düzeltildi) */
.logo h1 a::before {
content: '\f004' !important;
font-family: "Font Awesome 5 Free" !important;
font-weight: 900 !important;
color: #6a9c7e !important; /* Yeşil */
font-size: 2.2rem !important;
margin-right: 10px !important;
vertical-align: middle !important;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3) !important;
transition: color 0.3s ease;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
position: relative;
top: -4px; /* Kalbi "bi tık yukarı" hizala */
}
/* NAVİGASYON LİNKLERİ */
.navbar a,
.navbar a:focus {
display: flex;
align-items: center;
padding: 10px 0 10px 30px;
font-size: 1.1rem !important;
font-family: 'Lora', serif !important;
font-weight: 500;
color: rgba(255, 255, 255, 0.7) !important; /* Hep şeffaf beyaz */
text-transform: uppercase;
letter-spacing: 1px;
transition: color 0.3s;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}
/* NAVİGASYON HOVER/AKTİF DURUMU */
.navbar a:hover,
.navbar .active,
.navbar .active:focus,
.navbar li:hover > a {
color: #FFFFFF !important; /* Hep tam beyaz */
text-shadow: 1px 1px 5px rgba(255, 255, 255, 0.5) !important;
}
/* Diğer sayfalardaki koyu renk kurallarına artık GEREK YOK */
/* Bu kod çok daha temiz ve tam istediğin gibi çalışacak */
/* =======================================================
BİZİM ÖZEL STİLLERİMİZ - HİKAYEMİZ SAYFASI
======================================================== */
.hikayemiz-bolumu {
padding: 80px 0;
overflow: hidden; /* Fotoğrafın taşmasını engellemek için */
}
.story-image-container {
display: flex;
align-items: center;
justify-content: center;
}
/* Sizin fotoğrafınız için "anı defterinden fırlamış gibi" bir stil */
.story-image {
border-radius: 15px;
box-shadow: 0 15px 40px rgba(216, 178, 178, 0.25); /* Sıcak, gül kurusu tonlu bir gölge */
max-height: 500px;
object-fit: cover;
transform: rotate(-3deg); /* Hafif eğik durarak el yapımı hissi versin */
transition: all 0.4s ease-in-out;
}
.story-image:hover {
transform: rotate(0deg) scale(1.03); /* Üzerine gelince düzelsin ve hafif büyüsün */
box-shadow: 0 20px 50px rgba(216, 178, 178, 0.4);
}
/* Admin panelden gelen içeriğin alanı */
.story-content {
/* Buradaki h3 ve p etiketlerini PartialView'iniz oluşturacak, biz onları güzelleştireceğiz. */
}
/* PartialView'den gelen BAŞLIK için stil */
.story-content h3 {
font-family: 'Dancing Script', cursive; /* El yazısı başlık fontumuz */
font-size: 56px;
color: #D8B2B2; /* Gül kurusu rengimiz */
margin-bottom: 20px;
}
/* PartialView'den gelen AÇIKLAMA YAZISI için stil */
.story-content p {
font-family: 'Lora', serif;
font-size: 17px;
line-height: 1.8; /* Satır aralığını artırarak okunabilirliği iyileştirdik */
color: #5B5B5B;
}
/* Son dokunuş: Romantik imza */
.story-signature {
margin-top: 30px;
font-family: 'Dancing Script', cursive;
font-size: 28px;
color: #B2D8B2; /* Adaçayı yeşili ile hoş bir kontrast */
text-align: right;
}
/* =======================================================
BİZİM ÖZEL STİLLERİMİZ - ANI DETAY SAYFASI
======================================================== */
.memory-detail-header {
height: 60vh; /* Ekranın %60'ını kaplasın */
width: 100%;
background-size: cover;
background-position: center;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.memory-detail-header .overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.2); /* Fotoğrafı hafif koyulaştırır */
}
.memory-detail-content {
padding: 60px 0;
margin-top: -100px; /* İçerik kutusunu fotoğrafın üzerine taşıyalım */
position: relative;
z-index: 2;
background-color: #fdfaf7; /* Arka plan rengimiz */
border-radius: 15px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}
.memory-date {
font-family: 'Lora', serif;
font-size: 14px;
color: #aaa;
text-transform: uppercase;
letter-spacing: 1px;
text-align: center;
margin-bottom: 15px;
}
.memory-title {
font-family: 'Dancing Script', cursive;
font-size: 60px;
color: #D8B2B2; /* Gül kurusu rengimiz */
text-align: center;
margin-bottom: 20px;
}
.memory-divider {
width: 100px;
margin: 0 auto 30px auto;
border-top: 2px solid #e8a0bf;
}
.memory-body p {
font-family: 'Lora', serif;
font-size: 18px;
line-height: 1.9;
color: #5B5B5B;
margin-bottom: 20px;
}
.back-to-gallery {
text-align: center;
margin-top: 40px;
}
.btn-back {
font-family: 'Lora', serif;
font-weight: 600;
color: #777;
border: 2px solid #ddd;
padding: 10px 25px;
border-radius: 50px;
transition: all 0.3s ease;
text-decoration: none;
}
.btn-back:hover {
background-color: #D8B2B2;
border-color: #D8B2B2;
color: #fff;
}
.btn-back i {
margin-right: 8px;
}
/* =======================================================
BİZİM ÖZEL STİLLERİMİZ - FİNAL GALERİ TASARIMI
======================================================== */
/* Ana galeri bölümünün genel ayarları */
.gallery-section {
padding: 60px 0;
}
.gallery-section .section-title h2 {
font-family: 'Dancing Script', cursive;
font-size: 50px;
color: #D8B2B2; /* Gül kurusu */
}
.gallery-section .section-title p {
font-family: 'Lora', serif;
color: #888;
}
/* İşte sihrin başladığı yer: Anı Kartı! */
.memory-card {
position: relative;
border-radius: 15px; /* Yumuşak köşeler */
overflow: hidden; /* Bu çok önemli, taşan kısımları gizler */
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.07); /* Yumuşak bir derinlik gölgesi */
cursor: pointer;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Daha esnek, canlı bir animasyon */
height: 320px; /* Bütün kartların boyunu eşitleyelim, düzenli dursun */
background-color: #f0f0f0; /* Fotoğraf yüklenene kadar boş durmasın */
}
/* Kartın üzerine gelince (hover) olacaklar */
.memory-card:hover {
transform: translateY(-10px) scale(1.02); /* Kart hafifçe yukarı kalksın ve büyüsün */
box-shadow: 0 20px 45px rgba(216, 178, 178, 0.35); /* Gölge daha belirgin ve renkli olsun */
}
/* Kartın içindeki fotoğraf */
.memory-card .card-img-top {
width: 100%;
height: 100%;
object-fit: cover; /* Fotoğrafların bozulmadan kartı doldurmasını sağlar */
transition: transform 0.6s ease;
}
.memory-card:hover .card-img-top {
transform: scale(1.15); /* Fotoğraf daha etkileyici bir şekilde büyüsün */
}
/* Kartın üzerine gelince belirecek yazı katmanı */
.memory-card .card-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 70%); /* Aşağıdan yukarı koyu geçiş */
opacity: 0; /* Normalde görünmez olsun */
transition: opacity 0.5s ease;
display: flex;
flex-direction: column;
justify-content: flex-end; /* Yazıyı aşağıya yasla */
padding: 25px;
}
.memory-card:hover .card-overlay {
opacity: 1; /* Üzerine gelince yavaşça belirsin */
}
/* Katmanın içindeki yazı ve ikon */
.card-overlay .overlay-text {
color: #fff;
transform: translateY(25px); /* Normalde biraz aşağıda, gizli dursun */
transition: transform 0.5s ease;
}
.memory-card:hover .overlay-text {
transform: translateY(0); /* Üzerine gelince yavaşça yukarı kaysın */
}
.overlay-text h3 {
font-family: 'Playfair Display', serif; /* Şık başlık fontu */
font-size: 22px;
font-weight: 700;
margin-bottom: 5px;
line-height: 1.2;
}
.overlay-text i {
font-size: 20px;
opacity: 0.8;
margin-top: 10px;
}
/* Modal (Popup) Stillerini de unutmayalım */
.modal-content {
border-radius: 15px !important;
border: none !important;
}
.modal-header {
border-bottom: 1px solid #eee !important;
}
.modal-photo-title {
font-family: 'Dancing Script', cursive;
font-size: 36px;
color: #D8B2B2;
}
.modal-photo-note {
font-family: 'Lora', serif;
font-size: 16px;
line-height: 1.7;
color: #5B5B5B;
}
/* ======= BİZE DAİR NOTLAR - WOW ZAMAN TÜNELİ TASARIMI ======= */
/* Google'dan şık fontlar yüklüyoruz (Projenizde zaten varsa bu satırı silebilirsiniz) */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Poppins:wght@300;400&display=swap');
/* Filtre Butonları */
#portfolio-flters {
padding: 0;
margin: 0 auto 35px auto;
list-style: none;
text-align: center;
}
#portfolio-flters li {
cursor: pointer;
display: inline-block;
padding: 10px 22px;
font-size: 14px;
font-weight: 600;
line-height: 1;
text-transform: uppercase;
color: #444;
margin: 0 5px 10px 5px;
transition: all 0.3s ease-in-out;
border-radius: 50px;
border: 1px solid #ddd;
}
#portfolio-flters li:hover,
#portfolio-flters li.filter-active {
color: #fff;
background: #e89595; /* Tatlı bir aşk rengi */
border-color: #e89595;
}
/* Zaman Tüneli Ana Yapısı */
.timeline {
position: relative;
padding: 20px 0;
margin-top: 20px;
}
/* Ortadaki dikey çizgi */
.timeline:before {
content: '';
position: absolute;
top: 0;
bottom: 0;
width: 3px;
background: #f1f1f1;
left: 50%;
margin-left: -1.5px;
}
/* Anı kutucuklarının ana taşıyıcısı */
.timeline-container {
position: relative;
background: inherit;
width: 50%;
margin-bottom: 20px; /* Elemanlar arası boşluk */
}
/* Anı kutucuklarının sağda/solda konumlanması */
.timeline-container:nth-child(odd) {
float: left;
padding-right: 40px;
clear: both;
}
.timeline-container:nth-child(even) {
float: right;
padding-left: 40px;
clear: both;
}
/* Çizgideki kalp ikonları */
.timeline-icon {
width: 40px;
height: 40px;
line-height: 40px;
position: absolute;
left: 50%;
top: 15px;
transform: translateX(-50%);
background: #fff;
border: 3px solid #e89595;
border-radius: 50%;
text-align: center;
font-size: 1.2rem;
color: #e89595;
z-index: 1;
}
/* Asıl anı içeriğinin olduğu kutu */
.timeline-body {
background: #fff;
border-radius: 8px;
padding: 20px 25px;
position: relative;
box-shadow: 0 3px 15px rgba(0, 0, 0, 0.06);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
/* Fareyle üzerine gelince hafifçe yukarı kalkma efekti */
.timeline-body:hover {
transform: translateY(-7px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}
/* Anı kutucuklarından çıkan konuşma balonu oku */
.timeline-body:before {
content: '';
position: absolute;
top: 20px;
border: solid transparent;
border-width: 10px;
}
.timeline-container:nth-child(odd) .timeline-body:before {
right: -20px;
border-left-color: #fff;
}
.timeline-container:nth-child(even) .timeline-body:before {
left: -20px;
border-right-color: #fff;
}
/* Anının başlığı */
.timeline-title .badge {
background-color: #e89595;
color: white;
font-size: 1.2rem;
font-family: 'Playfair Display', serif;
font-weight: 700;
padding: 8px 15px;
border-radius: 5px;
}
/* Anının açıklaması (not) */
.timeline-body p {
font-family: 'Poppins', sans-serif;
color: #555;
line-height: 1.7;
margin-top: 15px;
margin-bottom: 5px;
}
/* Anının tarihi */
.timeline-subtitle {
font-weight: 300;
font-size: 0.9rem;
color: #aaa;
margin-top: 10px;
}
/* ZAMAN TÜNELİ DÜZENİ İÇİN GARANTİ ÇÖZÜM */
/* Bu kod, başka bir stilin float veya width vermesini engeller */
.timeline .timeline-container.portfolio-item {
width: 50% !important; /* Genişliği tekrar %50'ye ayarla */
float: left !important; /* Tekrar sola yasla (tek/çift kuralı için) */
display: block !important; /* Yan yana gelmesini engelle */
clear: both; /* En önemlisi: Kendinden önceki float'ı temizle */
}
/* Çift sayılı elemanların sağa gitmesini sağlayan kural */
.timeline .timeline-container.portfolio-item:nth-child(even) {
float: right !important;
clear: both;
}
/* === "WOW" EFEKTLİ ANILARLA DOLU DUVAR - GELİŞMİŞ TASARIM === */
.gallery-section {
padding: 60px 0;
background-color: #fdf8f5; /* Sıcak krem rengi arka plan */
}
/* Anı kartının kendisi - GELİŞTİRİLDİ */
.memory-card {
position: relative;
overflow: hidden;
border-radius: 12px;
box-shadow: 0 10px 25px rgba(161, 106, 112, 0.1);
cursor: pointer;
/* Geçiş efektini daha yumuşak ve esnek hale getirelim */
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
/* Üzerine gelince "havalanma" efekti - YENİ */
.memory-card:hover {
transform: translateY(-10px) scale(1.1);
box-shadow: 0 20px 40px rgba(161, 106, 112, 0.2);
}
.memory-card .card-img-top {
width: 100%;
height: 300px; /* Bütün kartların boyunu eşitleyelim */
object-fit: cover; /* Resmin orantısını bozmadan sığdır */
transition: transform 0.4s ease;
}
/* Üzerine gelince resmin hafifçe büyümesi - YENİ */
.memory-card:hover .card-img-top {
transform: scale(1.3);
}
/* Üzerine gelince çıkan katman (overlay) - GELİŞTİRİLDİ */
.card-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* Daha belirgin bir gradyan */
background: linear-gradient(to top, rgba(40, 28, 25, 0.8) 0%, transparent 100%);
opacity: 0; /* Başlangıçta görünmez */
transition: opacity 0.4s ease;
display: flex;
align-items: flex-end; /* Yazıyı aşağıya yasla */
padding: 20px;
}
/* Üzerine gelince katmanın belirmesi - YENİ */
.memory-card:hover .card-overlay {
opacity: 1;
}
/* Katman içindeki metin ve ikon - YENİ */
.overlay-text {
color: #fff;
/* Başlangıçta biraz aşağıda dursun */
transform: translateY(20px);
transition: transform 0.4s ease;
}
/* Üzerine gelince metnin yukarı kayması - YENİ */
.memory-card:hover .overlay-text {
transform: translateY(0);
}
.overlay-text h3 {
font-family: 'Playfair Display', serif;
font-size: 1.5rem;
margin-bottom: 5px;
}
.overlay-text i {
font-size: 1.2rem;
}
/* Modal Pencere Stilleri - GELİŞTİRİLDİ */
.modal-content {
background-color: #fdf8f5;
border: none;
border-radius: 15px;
}
.modal-header {
border-bottom: 1px solid rgba(161, 106, 112, 0.2);
}
.modal-header .modal-title {
font-family: 'Playfair Display', serif;
color: #a16a70;
}
/* Modal içindeki başlık ve not için font ayarları - YENİ */
.modal-photo-title {
font-family: 'Playfair Display', serif;
color: #a16a70;
font-size: 2rem;
margin-top: 15px;
}
.modal-photo-note {
font-family: 'Poppins', sans-serif;
color: #5c5451;
font-size: 1.1rem;
line-height: 1.7;
}
/* === "GÖKYÜZÜNDEKİ AŞK MEKTUBU" MESAJI TASARIMI === */
#birthday-message {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10000;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: all 1s ease-in-out;
}
#birthday-message.visible {
opacity: 1;
visibility: visible;
}
#birthday-message .message-content {
text-align: center;
color: #fff;
/* Yazıya parlayan bir "aura" efekti verelim */
text-shadow: 0 0 10px #fff, 0 0 20px #fff;
animation: messageFadeIn 1.5s ease-out forwards;
}
/* Ana Başlık - Zarif El Yazısı */
#birthday-message h1 {
font-family: 'Great Vibes', cursive; /* YENİ FONTUMUZ */
font-size: 5.5rem; /* Daha da büyük ve etkileyici */
font-weight: normal; /* El yazısı fontları genellikle incedir */
margin-bottom: 25px;
}
/* Alt Metin - Zarif ve İtalik */
#birthday-message p {
font-family: 'Cormorant Garamond', serif; /* YENİ FONTUMUZ */
font-style: italic;
font-size: 1.8rem;
opacity: 0.9;
letter-spacing: 1px;
}
@keyframes messageFadeIn {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: scale(1);
}
}
/* Mobil cihazlar için fontları biraz küçültelim */
@media (max-width: 768px) {
#birthday-message h1 {
font-size: 4rem;
}
#birthday-message p {
font-size: 1.2rem;
}
}
/* === "BİZİM SOHBET EKRANIMIZ" NİHAİ & GARANTİLİ TASARIM === */
.chat-section-bg { /* ... bu kısım aynı kalabilir ... */
}
.chat-container {
/* GENİŞLETİYORUZ! */
max-width: 900px;
margin: 30px auto;
background: #fff;
border-radius: 15px;
box-shadow: 0 15px 40px rgba(161, 106, 112, 0.15);
overflow: hidden;
display: flex;
flex-direction: column;
/* Yüksekliğini de belirgin hale getirelim */
height: 70vh; /* Ekran yüksekliğinin %70'i kadar olsun */
min-height: 500px; /* Minimum yükseklik */
}
/* Sohbet Penceresi Header'ı - DAHA BÜYÜK VE BELİRGİN */
.chat-header {
background-color: #f7f7f7;
padding: 20px 25px; /* Daha geniş */
border-bottom: 1px solid #e0e0e0;
display: flex;
align-items: center;
gap: 15px;
flex-shrink: 0;
position: relative;
z-index: 2; /* Mesajların üzerinde kalmasını garantiler */
}
.chat-header-avatar { /* ... avatar stilleri aynı ... */
}
.chat-header-info h5 {
font-family: 'Playfair Display', serif;
margin: 0;
font-size: 1.5rem; /* DAHA BÜYÜK */
color: #D8B2B2;
}
.chat-header-info p {
margin: 0;
font-size: 0.9rem;
color: #666;
}
/* ... Tarih Damgası stilleri aynı ... */
.date-chip {
align-self: center;
background-color: #e1e9f1;
padding: 5px 12px;
border-radius: 12px;
font-size: 0.75rem;
color: #555;
margin: 10px 0;
}
.chat-messages {
padding: 20px 30px; /* Sağı ve solu biraz daha genişletelim */
display: flex !important;
flex-direction: column !important;
gap: 15px;
flex-grow: 1; /* Esneyerek tüm boş alanı doldursun */
overflow-y: auto; /* Mesajlar sığmazsa scroll çıksın */
}
/* === İŞTE EN KRİTİK BARIŞ ANLAŞMASI KODU === */
.chat-container .message-container.portfolio-item {
/* Isotope'un pozisyon müdahalesini tamamen eziyoruz! */
position: static !important; /* Dikey akışta kalmaya zorla */
left: auto !important;
top: auto !important;
opacity: 1 !important; /* Asla gizlenmemesini sağla */
margin-bottom: 10px; /* Isotope'un gap'i yerine kendi boşluğumuzu verelim */
width: 100% !important; /* Konteynerin tamamını kaplasın ki sağa/sola yaslanabilsin */
display: flex; /* İçindeki avatar ve mesajı hizalamak için */
}
/* ... Geri kalan tüm message-container, message-avatar, message, message-sent vb. stilleri aynı kalabilir ... */
.message-container {
gap: 10px;
max-width: 85%;
}
.message-avatar {
width: 35px;
height: 35px;
border-radius: 50%;
background-size: cover;
background-position: center;
align-self: flex-end;
flex-shrink: 0;
}
.message-received-container {
align-self: flex-start;
}
.message-received-container .message-avatar {
background-image: url('/File/Avatars/hatice-avatar.jpg');
}
.message-sent-container {
align-self: flex-end;
flex-direction: row-reverse;
}
.message-sent-container .message-avatar {
background-image: url('/File/Avatars/benim-avatarim.jpg');
}
.message {
padding: 12px 20px;
border-radius: 20px;
position: relative;
width: 100%;
}
.message::after {
content: '';
position: absolute;
bottom: 0;
width: 0;
height: 0;
border: 10px solid transparent;
}
.message-received {
background-color: #f1f0f0;
border-bottom-left-radius: 5px;
}
.message-received::after {
left: -8px;
border-right-color: #f1f0f0;
border-left: 0;
}
.message-sent {
background-color: #e1ffc7;
border-bottom-right-radius: 5px;
}
.message-sent::after {
right: -8px;
border-left-color: #e1ffc7;
border-right: 0;
}
.message-text {
font-family: 'Poppins', sans-serif;
font-size: 1rem;
line-height: 1.6;
color: #333;
}
.message-meta {
margin-top: 5px;
display: flex;
justify-content: flex-end;
align-items: center;
gap: 5px;
}
.message-time {
font-size: 0.75rem;
color: rgba(0, 0, 0, 0.45);
}
.message-status .bi-hearts {
font-size: 0.9rem;
color: #e89595;
}
/* --- YENİ WELCOME SPLASH KODLARI --- */
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&family=Lora:ital@0;1&display=swap');
#welcome-splash {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* ASİL DOKUNUŞ: Koyu, zengin bir şarap/gül rengi */
/* Düz renk: background-color: #6D435A; */
/* Daha da havalısı (Hafif bir geçiş): */
background: linear-gradient(135deg, #4b2a3a 0%, #805066 100%);
z-index: 10000;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
text-align: center;
/* Kaybolma animasyonu (Biraz yavaşlattım, daha asil) */
transition: opacity 1.5s ease-out, visibility 1.5s ease-out;
}
#welcome-splash.hidden {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
/* --- YENİ EKLENEN YAZI STİLLERİ --- */
/* ROMANTİK DOKUNUŞ: Lüks el yazısı fontu */
#welcome-splash h1 {
font-family: 'Great Vibes', cursive;
font-size: 5rem; /* 80px gibi */
font-weight: normal;
/* Kontrast Renk: Krem / Çok soluk pembe */
color: #FFF5E1;
/* Yazıya hafif bir gölge */
text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
margin: 0;
/* Yazının yumuşakça belirme animasyonu */
animation: fadeInText 1.5s ease-out 0.5s;
animation-fill-mode: forwards;
opacity: 0;
}
/* Alttaki küçük mesaj için */
#welcome-splash p {
font-family: 'Lora', serif; /* Sitenin kalanıyla uyumlu */
font-size: 1.25rem; /* 20px gibi */
color: #F7E0E7; /* Burası o senin pembe olabilir (vurgu olarak) */
margin-top: 10px;
letter-spacing: 1px;
/* Bu da h1'den sonra belirsin */
animation: fadeInText 1.5s ease-out 1.2s;
animation-fill-mode: forwards;
opacity: 0;
}
/* Yazıların belirme animasyonu */
@keyframes fadeInText {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.content h1 {
font-family: 'Playfair Display', serif; /* Kullanıdığınız fontlar */
font-size: 3.5em;
color: #8b0000;
margin-bottom: 10px;
}
.content p {
font-family: 'Lato', sans-serif;
font-size: 1.2em;
color: #444;
margin-bottom: 40px;
}
/* --- YENİ WELCOME BUTTON KODLARI --- */
.welcome-btn {
padding: 15px 30px;
font-size: 1.2em;
font-weight: bold;
color: #FFF5E1; /* Yazı rengini krem/soluk pembe yap, koyu zemine yakışır */
/* Yeni Buton Rengi: Hafif daha açık ve canlı bir gül/bordo tonu */
background-color: #A66E7F;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease-in-out, transform 0.2s ease-in-out; /* Hafif bir animasyon */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Daha belirgin gölge */
letter-spacing: 0.5px; /* Yazılara hafif aralık */
font-family: 'Lora', serif; /* Yazı fontunu da menüyle uyumlu yapalım */
}
.welcome-btn:hover {
/* Hover rengi: Bir tık daha koyu, daha zengin bir ton */
background-color: #8C5B6B;
transform: translateY(-2px); /* Butona hafif kalkma efekti */
}
/*
* ROMANTİK MÜZİK KUTUSU STİLİ
* Tema: Asil (Koyu Şarap/Krem)
*/
/* Google Font (Sadece emin olmak için) */
@import url('https://fonts.googleapis.com/css2?family=Lora:ital@0;1&display=swap');
/* Ana player kutusu */
.custom-music-player {
position: fixed; /* Sayfanın altında sabit durur */
bottom: 0;
left: 0;
width: 100%;
z-index: 1001; /* Header'dan bile üstte (eğer header 1000 ise) */
/* Splash ekranından gelen asil arka plan */
background: linear-gradient(135deg, #4b2a3a 0%, #805066 100%);
color: #FFF5E1; /* Krem rengi yazılar */
box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.3);
font-family: 'Lora', serif;
}
/* Player'ın asıl içeriği (Kontroller vs.) */
.player-content {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 25px;
height: 60px; /* Sabit bir yükseklik */
}
/* 1. Şarkı Bilgisi (Sol Taraf) */
.song-info {
flex: 1;
min-width: 150px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; /* Uzun şarkı adları "..." ile bitsin */
}
#song-title {
font-size: 1rem;
font-weight: bold;
color: #ffffff;
}
/* 2. Kontroller (Orta Taraf) */
.controls {
flex: 0 1 auto; /* Esneme, küçülme, otomatik genişlik */
display: flex;
justify-content: center;
align-items: center;
gap: 15px;
}
.player-btn {
background: none;
border: 2px solid rgba(255, 255, 255, 0.5);
color: #FFF5E1;
border-radius: 50%;
width: 40px;
height: 40px;
font-size: 0.9rem;
cursor: pointer;
transition: all 0.3s ease;
}
.player-btn:hover {
background-color: rgba(255, 255, 255, 0.1);
border-color: #FFF5E1;
transform: scale(1.1);
}
/* Ana Oynat Butonu (Daha büyük) */
.player-btn.play-btn {
width: 50px;
height: 50px;
font-size: 1.2rem;
border-width: 3px;
}
/* 3. Zaman Bilgisi (Sağ Taraf) */
.time-info {
flex: 1;
min-width: 150px;
text-align: right;
font-size: 0.9rem;
color: rgba(255, 255, 255, 0.7);
}
/* İlerleme Çubuğu (En Üstteki Pembe Çizgi) */
.progress-bar-container {
width: 100%;
height: 5px;
background-color: rgba(0, 0, 0, 0.2);
}
.progress-bar {
width: 0%;
height: 100%;
background-color: #e89595; /* Slider'daki noktalardan gelen şirin pembe */
transition: width 0.5s linear;
}
/* Gizli YouTube player (Bu görünmemeli) */
#youtube-player {
display: none;
}
/* ===================================================================
* BÖLÜM 1: BÖLÜM BAŞLIKLARI (HİKAYEMİZ, KÜÇÜK SIRLAR)
* (Bu .section-title sınıfının zaten var olduğunu varsayıyorum)
* =================================================================== */
.section-title h2 {
font-family: 'Great Vibes', cursive; /* Asil el yazısı fontu */
font-size: 3.5rem; /* Daha belirgin */
color: #9B5C5C; /* Koyu gül rengi */
text-shadow: 1px 1px 3px rgba(0,0,0,0.1);
margin-bottom: 10px;
}
.section-title p {
font-family: 'Lora', serif; /* Uyumlu alt başlık fontu */
font-style: italic;
color: #777;
margin-bottom: 20px;
}
/* ===================================================================
* BÖLÜM 2: HİKAYEMİZ (TIMELINE) KARTLARI
* (PartialTimeline.cshtml stilleri)
* =================================================================== */
/* Timeline içeriği (O beyaz kutu) */
.timeline-content {
background: #FFFBFB !important; /* Saf beyaz yerine yumuşak krem/gül */
border: 1px solid #F0E0E2; /* Çok soluk gül kurusu sınır */
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
/* Hover efekti */
.timeline-item:hover .timeline-content {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(155, 92, 92, 0.1); /* Hover'da gül rengi gölge */
}
/* O yeşil kalp ikonu */
.timeline-icon {
background: #D8B2B2 !important; /* Açık gül kurusu */
box-shadow: 0 0 0 4px #FFFBFB, 0 0 10px rgba(155, 92, 92, 0.3);
}
.timeline-icon i {
color: #FFFBFB !important; /* İkonun rengi */
}
/* Yazı Stilleri */
.timeline-content .date {
font-family: 'Lora', serif;
font-style: italic;
color: #9B5C5C; /* Koyu gül rengi */
font-size: 0.9rem;
font-weight: bold;
}
.timeline-content h3 {
font-family: 'Playfair Display', serif; /* Slider'daki şık font */
color: #6D435A; /* Koyu şarap rengi */
font-weight: 700;
}
.timeline-content p {
font-family: 'Lora', serif; /* Ana metin fontu */
color: #555;
line-height: 1.7;
}
/* ===================================================================
* BÖLÜM 3: KÜÇÜK SIRLAR (LOVE REASONS) KARTLARI
* (PartialLoveReasons.cshtml stilleri)
* =================================================================== */
/* O beyaz kutu */
.icon-box {
background: #FFFBFB !important; /* Yumuşak krem/gül */
border: 1px solid #F0E0E2; /* Soluk sınır */
padding: 30px;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
transition: transform 0.3s ease, box-shadow 0.3s ease;
width: 100%;
}
.icon-box:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(155, 92, 92, 0.1); /* Gül rengi gölge */
}
/* O yeşil kalp ikonu */
.icon-box .icon {
/* İkonun arka planını da renklendirelim */
width: 64px;
height: 64px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50px;
background: #FFF0F0; /* Soluk pembe zemin */
border: 1px solid #F0E0E2;
transition: all 0.3s ease-out 0s;
}
.icon-box .icon i {
color: #D8B2B2; /* Açık gül kurusu kalp */
font-size: 28px;
line-height: 0;
transition: color 0.3s ease-out 0s;
}
/* Hover efekti */
.icon-box:hover .icon {
background: #9B5C5C; /* Koyu gül rengi zemin */
border-color: #9B5C5C;
}
.icon-box:hover .icon i {
color: #fff; /* Beyaz kalp */
}
/* Yazı Stilleri */
.icon-box .title {
font-family: 'Playfair Display', serif; /* Şık font */
color: #6D435A; /* Koyu şarap rengi */
font-weight: 700;
font-size: 1.4rem;
margin-top: 15px; /* İkonla arayı aç */
}
.icon-box .title a {
color: #6D435A; /* Rengi linkten al */
transition: color 0.3s ease;
}
.icon-box .title a:hover {
color: #9B5C5C; /* Link hover rengi */
}
.icon-box .description {
font-family: 'Lora', serif; /* Ana metin fontu */
color: #555;
line-height: 1.7;
font-size: 0.95rem;
}
/* --- DİĞER SAYFALARDAKİ (ANASAYFA HARİÇ) YAN ÇİZGİLER (RENK DÜZELTMESİ) --- */
/* ".page-home" class'ına sahip olmayan TÜM body etiketlerini hedefler */
body:not(.page-home) {
/* 1. SOL TARAF (Rengi #D8B2B2 olarak GÜNCELLENDİ) */
background-image: url('data:image/svg+xml,'),
/* 2. SAĞ TARAF (Rengi #D8B2B2 olarak GÜNCELLENDİ) */
url('data:image/svg+xml,');
background-repeat: repeat-y, repeat-y;
/* Konumlar (Aynı kaldı) */
background-position: 15% 0, 85% 0;
background-size: 150px 100px, 150px 100px;
background-color: #FFFFFF; /* Body arkaplanı beyaz kalsın */
/* Animasyon (Aynı kaldı) */
animation: wave-scroll 30s linear infinite;
}
/* İçerik kartlarının (section, .container) arkaplanı BEYAZ olmalı */
/* (Bu kod aynı kaldı, çizgilerin kartın arkasına geçmemesi için bu önemli) */
body.page-content main,
body.page-content section .container {
background-color: #FFFFFF; /* İçeriğin arkaplanı BEYAZ olsun (çizgileri ezsin) */
position: relative;
z-index: 1; /* Çizgilerden (0) bir katman önde olsun */
}
/* --- ÇİZGİLERİN KAYMA ANİMASYONU (Aynı kaldı) --- */
@keyframes wave-scroll {
0% {
background-position: 15% 0, 85% 0;
}
100% {
background-position: 15% 1000px, 85% 1000px;
}