/* MODERN CSS - PREMIUM DESIGN */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&display=swap");

html {
  scroll-behavior: smooth;
}
/* TÜM SİTE İÇİN GLOBAL ARKA PLAN */
body {
  background-color: #e0f2f1 !important; /* Senin o meşhur soft mavi tonun */
  margin: 0;
  padding: 0;
}

/* TÜM BÖLÜMLERİ ŞEFFAF YAPALIM (Body rengini görsünler) */
.hero-vitrin,
.cards-section,
.deneyimler-section,
section {
  background-color: transparent !important; /* Her yer aynı renk olsun */
  border: none !important;
}

/* DALGA (SVG) RENGİNİ GÜNCELLEME */
/* Eğer dalganın görünmesini istiyorsan rengini beyaza çevirebilirsin, 
böylece mavi zemin üzerinde beyaz bir dalga akar. */
.custom-shape-divider-bottom .shape-fill,
.soft-wave-divider .shape-fill {
  fill: #3bacb6 !important; /* Mavi zemin üzerinde beyaz dalga çok soft durur */
}

/* NAVBAR ARAMA BÖLÜMÜ MODERNİZASYON */

/* 1. Arama Formu ve Menü Arasındaki Boşluk */
.navbar-nav {
  margin-right: 30px !important; /* Menü ile arama kutusu arasını açar */
}

/* HERO (GİRİŞ) ALANI */
/* CAROUSEL MODERN DOKUNUŞLAR */
.hero-vitrin {
  background-color: #e0f2f1 !important;
  padding: 0 !important; /* Carousel tam sığsın diye sıfırladık */
}

/* CAROUSEL YAZI ÇAKIŞMASINI ÖNLEME */
.carousel-fade .carousel-item {
  opacity: 0;
  transition-duration: 0.8s; /* Daha hızlı ve net geçiş */
  transition-property: opacity;
}

.carousel-fade .carousel-item.active {
  opacity: 1;
}

/* Aktif olmayan slaytın içindeki yazıları tamamen sakla */
.carousel-item:not(.active) .carousel-caption-custom {
  display: none !important;
}

/* Genel Slayt Yazı Stili */
.carousel-caption-custom {
  color: #2d3250;
  width: 100%;
  animation: fadeInDown 0.8s ease-out; /* Yazılar yukarıdan yumuşakça düşer */
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Gösterge Noktaları */
.carousel-indicators [button] {
  background-color: #3bacb6 !important;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

/* HECE SES TARZI EKRAN YERLEŞİMİ */
.screen-mockup {
  position: relative;
  width: 100%;
  height: 400px;
}

.desktop-img {
  width: 90%;
  border-radius: 20px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12); /* Soft gölge */
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
}

.mobile-img {
  width: 30%; /* Masaüstü ekranın yanında/üstünde durur */
  border-radius: 30px;
  border: 8px solid #2d3250;
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.2);
  position: absolute;
  bottom: -40px;
  left: 0;
  z-index: 2;
  transform: rotate(-5deg); /* Hafif modern eğim */
}

/* SABİT VE SOFT ARAMA ÇUBUĞU */
.form-control-modern {
  width: 220px !important; /* Sabit genişlik: Artık sağa sola kayma yapmaz */
  border-radius: 50px !important;
  padding: 10px 20px !important;
  border: 1px solid rgba(45, 50, 80, 0.1) !important; /* Çok hafif belirgin kenarlık */
  background: rgba(255, 255, 255, 0.6) !important; /* Soft şeffaf zemin */
  font-size: 0.9rem;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); /* Çok yumuşak geçiş efekti */
  outline: none !important;
}

/* TIKLAYINCA (FOCUS) OLUŞACAK SOFT EFEKT */
.form-control-modern:focus {
  width: 220px !important; /* Genişlik değişmez, yerinden oynamaz */
  background: #ffffff !important; /* Zemin tamamen beyaz olur */
  border-color: #3bacb6 !important; /* Senin turkuaz renginle çerçeveleşir */
  /* Soft turkuaz bir parlama (glow) efekti */
  box-shadow: 0 0 20px rgba(59, 172, 182, 0.2) !important;
  color: #2d3250 !important;
}

/* Arama Butonu (Ara) Modernizasyonu */
.btn-ara {
  background-color: #3bacb6 !important;
  color: white !important;
  border-radius: 50px !important;
  padding: 8px 22px !important;
  font-weight: 600;
  margin-left: 12px; /* Input ile buton arasını dengeli açar */
  border: none !important;
  transition: all 0.3s ease;
}

.btn-ara:hover {
  background-color: #2d3250 !important;
  box-shadow: 0 5px 15px rgba(45, 50, 80, 0.2);
  transform: translateY(-1px); /* Çok hafif yukarı kalkma hissi */
}

/* NAVBAR - CAM EFEKTİ */
/* SOFT & MODERN NAVBAR */
.navbar-arka-renk {
  /* Hafif şeffaf beyaz zemin */
  background: rgba(255, 255, 255, 0.8) !important;
  /* Arkayı yumuşakça bulanıklaştıran cam efekti */
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  /* Alt kısma çok ince, zarif bir çizgi */
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  padding: 15px 0;
  transition: all 0.3s ease;
}

/* NAVBAR YAZI STİLLERİNİ EŞİTLEME */

.navbar-brand.banner-yazi {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-right: 30px;
  text-decoration: none !important;
}

/* İsminin stili (Hakkımda, Derslerim linkleri ile aynı yaptık) */
.navbar-brand.banner-yazi h4 {
  /* Menü linkleri ile aynı font ailesi */
  font-family: inherit !important;
  /* Menü linkleri ile aynı ağırlık (Orta-Yumuşak) */
  font-weight: 500 !important;
  /* Menü linklerinden sadece bir tık büyük (okunabilirlik için) */
  font-size: 2rem !important;
  color: #2d3250 !important; /* Menü yazılarıyla aynı lacivert */
  margin: 0;
  letter-spacing: normal; /* Harf arasını standart yaptık */
  transition: color 0.3s ease;
}

/* Üzerine gelince menü linkleri gibi soft bir tepki versin */
.navbar-brand.banner-yazi:hover h4 {
  color: #3bacb6 !important; /* Soft turkuaz */
}

/* Alt çizgiyi tamamen yok eden komut */
.navbar-brand.banner-yazi h4::after {
  content: none !important;
  display: none !important;
}

/* Menü Linkleri */
.nav-link {
  color: #2d3250 !important; /* Yazıların net görünmesi için koyu ton */
  font-weight: 500;
  font-size: 0.95rem;
  margin: 0 5px;
  padding: 8px 15px !important;
  border-radius: 10px;
  transition: all 0.3s ease;
}

/* Linklerin Üzerine Gelince (Soft Hover) */
.nav-link:hover {
  background: rgba(45, 50, 80, 0.05); /* Çok hafif gri/lacivert gölge */
  color: #3bacb6 !important; /* Senin turkuaz renginle vurgu */
}

.nav-link.active2 {
  background: #3bacb6 !important; /* Aktif sayfa turkuaz arka plan */
  color: white !important;
  font-weight: 600;
}

/* --- DERSLERİM DROPDOWN ÖZELLEŞTİRME --- */

/* Menünün ana kutusu */
.navbar .dropdown-menu {
  border: none;
  border-radius: 15px; /* Kartlarınla uyumlu yuvarlak köşeler */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); /* Soft derinlik */
  padding: 10px;
  margin-top: 15px; /* Navbar'dan biraz aşağıda başlasın */
  background-color: #ffffff;
  animation: dropdownFade 0.3s ease; /* Açılış efekti */
}

/* Menü içindeki her bir ders linki */
.navbar .dropdown-item {
  border-radius: 10px;
  padding: 10px 20px;
  color: #2d3250; /* Koyu lacivert yazı rengin */
  font-weight: 500;
  transition: all 0.3s ease;
}

/* Mouse ile üzerine gelince (Hover) */
.navbar .dropdown-item:hover {
  background-color: #4db3b3; /* Senin teal rengin */
  color: white !important;
  transform: translateX(5px); /* Hafifçe sağa kayma efekti */
}

/* Menünün açılış animasyonu */
@keyframes dropdownFade {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Açılır menü okunun rengini ve duruşunu ayarla */
.navbar .nav-link.dropdown-toggle::after {
  border-top: 0.4em solid #4db3b3; /* Ok senin yeşilin olsun */
  vertical-align: middle;
  margin-left: 8px;
}

/* Açılır menü okunun rengini ve duruşunu ayarla */
.navbar .nav-link.dropdown-toggle::after {
  border-top: 0.4em solid #000000; /* Ok senin yeşilin olsun */
  vertical-align: middle;
  margin-left: 8px;
}

/* KARTLAR - MODERN GLASSMORPHISM */

.card {
  background: rgba(255, 255, 255, 0.7) !important;
  backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  border-radius: 28px !important;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

/* KARTIN KENDİSİ SABİT KALSIN */
.card:hover {
  transform: none !important; /* Kartın yukarı kalkmasını tamamen iptal eder */
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2) !important; /* Sadece gölgeyi büyüterek derinlik hissi verir */
  background: rgba(255, 255, 255, 0.95) !important; /* Hafifçe netleşir */
  border: 1px solid #ffffff !important; /* Zarif bir çerçeve rengi ekler */
}

/* SADECE İÇİNDEKİ RESİM BÜYÜSÜN (Dışarı taşmadan) */
.card:hover .card-img-top {
  transform: scale(1.1); /* Resim kendi alanı içinde %10 büyür */
  transition: transform 0.4s ease;
}

/* TÜM KART LOGOLARINI EŞİT BOYUTA GETİRME */
.card-img-top {
  /* 1. YÜKSEKLİK AYARI: Tüm resimler için kesin ve sabit bir yükseklik.
       (Bootstrap büyük duruyorsa bu değeri 150px veya 140px'e düşürebilirsin) */
  height: 180px !important;

  /* 2. SIĞDIRMA: Resimlerin bu kutunun içine deforme olmadan sığmasını sağlar. */
  object-fit: contain !important;

  /* 3. GENİŞLİK: Kartın genişliğini tam kaplasın. */
  width: 100% !important;

  /* 4. İÇ BOŞLUK (PADDING): Logoların etrafına eşit "nefes alma" alanı.
       Bu boşluk, dolu logoların (Bootstrap gibi) çok patlamasını engeller. */
  padding: 30px !important;

  /* Arka plan temizliği için önceki ayarların devamı */
  background-color: #ffffff !important;
  mix-blend-mode: multiply;
  border-radius: 28px 28px 0 0 !important;
}

/* Kartın kendisi için arka plan garantisi */
.card {
  background-color: #ffffff !important;
  overflow: hidden; /* Resmin köşelerden taşmasını engeller */
}

.cardbody {
  padding: 25px !important;
  text-align: center;
}
.card-title {
  font-weight: 800;
  color: #2d3250;
  letter-spacing: -0.5px;
}
.card-text {
  font-size: 0.9rem;
  color: #636e72;
  line-height: 1.6;
}

/* MODERN OVAL BUTON */
.txtcolor {
  color: #ffffff !important;
  background: linear-gradient(135deg, #0c1861 0%, #434a6e 100%) !important;
  border: none !important;
  border-radius: 50px;
  padding: 10px 28px;
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 1px;
  box-shadow: 0 5px 15px rgba(45, 50, 80, 0.3);
  transition: 0.3s;
}
.txtcolor:hover {
  background: #f6b17a !important;
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgba(246, 177, 122, 0.4);
}

/* HAKKIMDA - PREMIUM FLOAT CARD */
.yaziarka {
  background: white;
  border-radius: 40px;
  padding: 60px;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.06);
  margin-top: 80px;
  border: 1px solid rgba(0, 0, 0, 0.02);
}
.title-line {
  width: 50px;
  height: 5px;
  background: #f6b17a;
  margin: 15px auto 35px auto;
  border-radius: 10px;
}
.dept-badge {
  background: #2d3250;
  color: #ffffff;
  padding: 12px 30px;
  border-radius: 18px;
  font-weight: 700;
  letter-spacing: 1px;
  font-size: 0.85rem;
  box-shadow: 0 10px 20px rgba(45, 50, 80, 0.2);
}

/* SOSYAL İKONLAR - TERTEMİZ EFEKT */
.social-box {
  display: inline-block;
  transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  margin: 0 15px;
}
.social-box:hover {
  transform: translateY(-12px) scale(1.1);
}
.social-box img {
  width: 45px;
  height: 45px;
}

.social-icons i {
  font-size: 1.2rem;
  transition: all 0.3s ease;
  opacity: 0.7;
}

.social-icons i:hover {
  color: #3bacb6; /* Turkuaz tonun */
  opacity: 1;
  transform: scale(1.2);
}

/* NAVBAR SOSYAL MEDYA İKONLARI */
.social-links a {
  color: #2d3250 !important; /* İsminle aynı koyu lacivert */
  font-size: 1.25rem;
  transition: all 0.3s ease;
  text-decoration: none;
  opacity: 0.7;
}

.social-links a:hover {
  color: #3bacb6 !important; /* Butonlarınla aynı turkuaz tonu */
  opacity: 1;
  transform: translateY(-3px); /* Hafif yukarı zıplama efekti */
}

/* Mobilde ikonların düzgün dizilmesi için */
@media (max-width: 991px) {
  .social-links {
    justify-content: center;
    margin-bottom: 15px;
  }
}

/* FOOTER VE BACKLINK STİLLERİ */
.footer-section {
  background-color: transparent !important; /* Arka plan rengini genel body ile birleştirir */
  padding-bottom: 80px !important;
}

/* Üstteki metin linkleri */
.university-link,
.college-link {
  display: block;
  text-decoration: none !important;
  color: #2d3250 !important; /* Senin ana lacivert tonun */
  font-weight: 500;
  font-size: 1.1rem;
  letter-spacing: 1px;
  margin-bottom: 15px;
  transition: all 0.3s ease;
  opacity: 0.8;
}

.university-link:hover,
.college-link:hover {
  color: #3bacb6 !important; /* Soft turkuaz parlama */
  opacity: 1;
}

/* Alt kısımdaki lacivert buton (Bilgisayar Programcılığı) */
.btn-program {
  background-color: #2d3250 !important;
  color: #ffffff !important;
  text-decoration: none !important;
  padding: 15px 40px;
  border-radius: 50px;
  font-weight: 700;
  display: inline-block;
  letter-spacing: 1px;
  box-shadow: 0 10px 20px rgba(45, 50, 80, 0.2);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.btn-program:hover {
  background-color: #3bacb6 !important;
  transform: scale(1.05); /* Çok hafif büyüme efekti */
  box-shadow: 0 15px 30px rgba(59, 172, 182, 0.3);
}

/* YUKARI BUTONU SOFT STİL */
.scroll-top-wrapper {
  padding: 40px 0; /* Sayfanın en altında ferah bir boşluk bırakır */
  background-color: transparent;
}

.btn-soft-scroll {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: #3bacb6 !important; /* Navbar butonlarınla aynı turkuaz */
  color: white !important;
  text-decoration: none !important;
  padding: 12px 35px;
  border-radius: 50px; /* Tam yuvarlak (soft) köşeler */
  font-weight: 600;
  font-size: 0.95rem;
  box-shadow: 0 10px 20px rgba(59, 172, 182, 0.2); /* Soft gölge */
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.btn-soft-scroll:hover {
  background-color: #2d3250 !important; /* Üzerine gelince lacivert olur */
  transform: translateY(-5px); /* Hafifçe yukarı zıplar */
  box-shadow: 0 15px 30px rgba(45, 50, 80, 0.3);
}

.btn-soft-scroll svg {
  transition: transform 0.3s ease;
}

.btn-soft-scroll:hover svg {
  transform: translateY(-3px); /* Ok işareti ayrıca yukarı kayar */
}

/* PÜRÜZSÜZ SOFT BUTON */
.btn-devam {
  background-color: #3bacb6 !important; /* Turkuaz tonun */
  color: white !important;
  text-decoration: none !important;
  padding: 10px 30px !important;
  border-radius: 50px !important;
  font-weight: 600 !important;
  font-size: 0.85rem !important;
  display: inline-block;
  margin-top: 20px;

  /* SİYAH ÇİZGİLERİ VE GÖLGELERİ YOK ETME */
  border: none !important; /* Siyah kenarlığı siler */
  outline: none !important; /* Tıklayınca çıkan çizgiyi siler */
  box-shadow: 0 4px 15px rgba(59, 172, 182, 0.2) !important; /* Çok hafif turkuaz gölge */

  transition: all 0.4s ease !important;
}

/* SAKİN HOVER (SADECE RENK DEĞİŞİMİ) */
.btn-devam:hover {
  background-color: #2d3250 !important; /* Elit lacivert */
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 6px 20px rgba(45, 50, 80, 0.2) !important; /* Hafif lacivert gölge */
  transform: none !important; /* Hareket yok, sadece renk */
}

/* SOFT COLLAPSE (ACCORDION) STİLLERİ */
.accordion-item {
  background-color: #ffffff !important;
  border-radius: 20px !important;
  border: none !important;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03) !important;
}

.accordion-button {
  background-color: #ffffff !important;
  color: #2d3250 !important;
  font-weight: 600 !important;
  padding: 20px !important;
  border: none !important;
  box-shadow: none !important;
}

/* Açıldığında başlık turkuaz olsun */
.accordion-button:not(.collapsed) {
  background-color: #e0f2f1 !important; /* Senin soft mavi tonun */
  color: #3bacb6 !important;
}

.accordion-body {
  color: #6c757d;
  line-height: 1.7;
  padding: 20px !important;
}

/* Siyah çerçeveleri tamamen kaldırma */
.accordion-button:focus {
  box-shadow: none !important;
  border: none !important;
}

/* İLETİŞİM BÖLÜMÜNÜ NAVBARIN ALTINDAN KURTARMA */
.contact-section {
  /* Navbar yüksekliği yaklaşık 80px-90px olduğu için 120px ideal bir boşluktur */
  padding-top: 120px !important;
  margin-top: 0 !important;
}

/* Eğer sadece bu yazı değil, tüm sayfaların en üstü navbarın altında kalıyorsa */
/* Alternatif olarak body'e en üstten boşluk verebiliriz: */
/* body { padding-top: 90px; } */

/* İLETİŞİM KARTI VE GİRDİLER */
.contact-card {
  background-color: #ffffff !important;
  border-radius: 30px !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.04) !important;
  border: none !important;
}

.soft-input {
  background-color: #f8f9fa !important;
  border: 2px solid transparent !important;
  border-radius: 15px !important;
  padding: 12px 20px !important;
  transition: all 0.3s ease !important;
  font-size: 0.95rem;
}

/* Kutuya tıklandığında (focus) oluşacak efekt */
.soft-input:focus {
  background-color: #ffffff !important;
  border-color: #3bacb6 !important; /* Senin turkuaz tonun */
  box-shadow: 0 0 15px rgba(59, 172, 182, 0.1) !important;
  outline: none !important;
}

/* Placeholder (yer tutucu) rengi */
.soft-input::placeholder {
  color: #adb5bd;
  opacity: 0.7;
}

body {
  /* Navbar'ın altında kalmayı engellemek için tüm sayfayı aşağı itiyoruz */
  padding-top: 100px !important;
}

/* --- MODAL KAPATMA BUTONLARI (SOFT & MODERN) --- */

/* 1. Modal Altındaki "Close" Butonu */
.btn-modal-close {
  background-color: #3bacb6 !important; /* Senin turkuaz rengin */
  color: white !important;
  border: none !important;
  border-radius: 50px !important; /* Tam yuvarlak (pill) köşeler */
  padding: 10px 30px !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 10px rgba(59, 172, 182, 0.2) !important; /* Hafif turkuaz gölge */
}

/* Üzerine gelince (Hover) efekti */
.btn-modal-close:hover {
  background-color: #2d3250 !important; /* Koyu lacivert */
  box-shadow: 0 6px 15px rgba(45, 50, 80, 0.25) !important;
  transform: translateY(-2px); /* Çok hafif yukarı kalkma hissi */
}

/* 2. Modal Sağ Üstteki "X" İkonu */
.modal-header .btn-close {
  /* Standart gri yerine senin lacivert rengini kullanalım */
  color: #2d3250 !important;
  opacity: 0.7; /* Biraz şeffaf başlasın */
  transition: all 0.3s ease;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%232D3250'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") !important; /* SVG ikonun rengini laciverte çevirdik */
}

/* "X" ikonunun üzerine gelince */
.modal-header .btn-close:hover {
  opacity: 1; /* Tam belirgin olsun */
  transform: rotate(90deg); /* Eğlenceli bir döndürme efekti ekleyelim */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%233BACB6'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") !important; /* Rengi turkuaza dönsün */
}

/* SADECE BOOTSTRAP LOGOSUNU ÖZEL OLARAK KÜÇÜLTME */
.card img[alt="bootstrap"],
.card img[src*="bootstrap"] {
  /* Diğer logolarda padding 25-30px ise, Bootstrap'ta 45px yaparak logoyu içeri iteriz */
  padding: 40px !important;

  /* Gerekirse yüksekliği de diğerlerinden 10px daha az yapabiliriz */
  height: 180px !important;

  /* Resmin netliğini koruması için */
  object-fit: contain !important;
  transition: all 0.3s ease;
}

/* Kartın geri kalanındaki yazıların hizasının bozulmaması için kutu yüksekliğini sabitleyelim */
.card-img-top {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff !important;
}

/* --- SADECE GALERİ SAYFASI CSS --- */

/* --- GALERİ SAYFASI DÜZENİ --- */

/* 1. Sayfa genel ayarı ve kaydırma */
body.galeri-ozel-sayfa {
  overflow-y: auto !important;
  background-color: #ffff;
  margin: 0;
  padding: 0;
}

/* Sayfa aşağı kaydığında Navbar'ın sabit kalması için */
.galeri-nav {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
}

/* Yüzen Kart Efekti */
.galeri-slider-wrapper {
  max-width: 1000px; /* Biraz daraltarak 'kart' formuna sokuyoruz */
  margin: 0 auto;
  background: #ffffff;
  border-radius: 40px; /* İyice yuvarlatılmış köşeler (Soft görünüm) */

  /* Kalın beyaz çerçeve: Dalga ile resim arasında köprü kurar */
  border: 12px solid #ffffff;

  /* Çok katmanlı soft gölge: Derinlik hissi verir */
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1), 0 10px 15px rgba(0, 0, 0, 0.05);

  overflow: hidden;
  position: relative;
}

.galeri-slider-wrapper {
  background-color: #ffffff;
  border-radius: 30px; /* Daha yumuşak köşeler */
  overflow: hidden;
  /* Çok katmanlı soft gölge (Modern tasarımın sırrı) */
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.5); /* İnce ışık hattı */
  transition: transform 0.5s ease;
  max-width: 1200px;
  margin: 0 auto;
}

.galeri-slider-wrapper {
  max-width: 1200px; /* Slider'ın çok yayılıp bozulmaması için */
  margin: 0 auto;
  position: relative;
}

/* Resimlerin üzerine hafif bir karartma gradyanı (Yazıların okunması için) */
.galeri-slide::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40%;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.5));
  pointer-events: none;
}

.galeri-slider-konteynir {
  background-color: #ffffff; /* Dalga rengiyle aynı */
  padding: 0 0 100px 0;
  margin-top: -80px; /* Slider'ı dalganın üzerine hafifçe bindiriyoruz */
  position: relative;
  z-index: 10;
}

.galeri-slider {
  height: 100%;
  width: 100%;
}

.galeri-slide {
  display: none;
  height: 100%;
  width: 100%;
  animation: fadeEffect 0.8s; /* Yumuşak geçiş efekti */
}

.galeri-slide.active {
  display: block;
}

/* Resmin altının kesilmemesi için final ayar */
.galeri-slide img {
  width: 100%;
  height: 550px; /* Yüksekliği biraz sabitleyelim */
  object-fit: cover;
  border-radius: 25px; /* İçteki resmin köşelerini de yumuşatıyoruz */
}

/* 5. Yazılar (Caption) */
.galeri-caption {
  position: absolute;
  bottom: 80px;
  left: 5%;
  color: white;
  text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.8);
  z-index: 10;
}

/* Ok Butonları - Tamamen Şeffaf ve Bütünleşik */
.galeri-prev,
.galeri-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%); /* Dikeyde tam ortalama */
  background: transparent !important; /* Kutu görüntüsünü yok eder */
  border: none !important; /* Kenarlıkları siler */
  color: rgba(255, 255, 255, 0.7) !important; /* Yarı şeffaf beyaz */
  font-size: 45px; /* Okların boyutu (biraz büyüttük ki ikon belli olsun) */
  z-index: 100;
  cursor: pointer;
  transition: all 0.3s ease;

  /* İkonun her türlü resim üzerinde okunması için hafif gölge */
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  padding: 0 20px;
}

/* Okların Konumları */
.galeri-prev {
  left: 10px;
}
.galeri-next {
  right: 10px;
}

/* Üzerine gelince (Hover) resmin parçası gibi tepki versin */
.galeri-prev:hover,
.galeri-next:hover {
  color: #4db3b3 !important; /* Senin teal rengine yumuşak geçiş */
  transform: translateY(-50%) scale(1.2); /* Hafifçe büyüme efekti */
  text-shadow: 0 0 15px rgba(77, 179, 179, 0.6);
}

.galeri-dots {
  display: flex; /* Noktaları yan yana dizer */
  justify-content: center; /* Ortalar */
  flex-wrap: wrap; /* Çok fazla nokta olursa alt satıra geçer */
  gap: 10px; /* Noktalar arası boşluk */
  width: 80%; /* Resmin genişliğine göre yayılır */
  margin: 0 auto;
}

.galeri-dots {
  position: absolute;
  bottom: 30px;
  width: 100%;
  text-align: center;
  z-index: 100;
}

.galeri-dot {
  height: 12px;
  width: 12px;
  margin: 0 5px;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  display: inline-block;
  cursor: pointer;
}

.galeri-dot.active {
  background-color: #4db3b3;
} /* Senin o teal rengin */

@keyframes fadeEffect {
  from {
    opacity: 0.4;
  }
  to {
    opacity: 1;
  }
}

/* 2. Başlık Bölümü (Navbar'dan aşağı çekiyoruz) */
.galeri-header-section {
  background-color: #e0f2f1; /* Index'teki soft mavi/teal tonu */
  padding-top: 150px; /* Navbar'ın arkasında kalmaması için */
  position: relative;
  overflow: hidden;
}

.galeri-ana-baslik {
  font-size: 3.5rem;
  font-weight: 800;
  color: #2d3250;
  margin-bottom: 10px;
}

/* Başlığın altındaki o şık çizgi */
.baslik-alt-cizgi {
  width: 80px;
  height: 5px;
  background-color: #4db3b3; /* Senin teal rengin */
  margin: 0 auto 20px auto;
  border-radius: 10px;
}

.galeri-alt-metin {
  color: #444;
  font-size: 1.1rem;
  margin-bottom: 50px;
}

/* 2. Başlık Alanı: Index'teki gibi soft renk ve boşluk */
.galeri-ust-alan {
  background-color: #e0f2f1; /* Index sayfasındaki o çok açık teal/mavi tonu */
  padding-top: 140px; /* Navbar'ın arkasından çıkarmak için kritik boşluk */
  padding-bottom: 0;
  position: relative;
  overflow: hidden;
}

.galeri-baslik {
  font-size: 3.5rem;
  font-weight: 800;
  color: #2d3250; /* Koyu modern lacivert */
  margin-bottom: 10px;
}

/* Dalga ve Slider Arasına Katman Efekti */
.galeri-dalga {
  position: relative;
  z-index: 2;
  /* Dalgaya çok hafif bir alt gölge ekleyerek slider'ın üstünde hissettirir */
  filter: drop-shadow(0px 10px 10px rgba(0, 0, 0, 0.03));
}

.galeri-dalga svg {
  display: block;
  width: 100%;
  height: auto;
}

.baslik-cizgi {
  width: 60px;
  height: 4px;
  background-color: #4db3b3;
  margin: 0 auto 20px auto;
  border-radius: 10px;
}

/* Slider Konteynırı */
.galeri-slider-wrapper {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
}

/* --- GALERİ GEÇİŞ DÜZENLEMESİ --- */

.galeri-header-section {
  background-color: #f0f7f7; /* Header arka planı */
  padding-bottom: 80px; /* Dalga ve slider için alan açar */
  position: relative;
}

.galeri-dalga {
  margin-bottom: -1px; /* Boşluğu kapatır */
  position: relative;
  z-index: 1;
}

/* Slider Konteynırı - Absürtlüğü gideren asıl kısım */
.galeri-slider-konteynir {
  background-color: #ffffff; /* Dalga ile bütünleşir */
  padding-bottom: 100px;
  margin-top: -100px; /* Slider'ı dalganın üzerine doğru çeker (Overlap) */
  position: relative;
  z-index: 10; /* Dalganın üzerinde görünmesini sağlar */
}

/* Slider Kartı (Yüzen Kart Efekti) */
.galeri-slider-wrapper {
  max-width: 1100px;
  margin: 0 auto;
  background: #ffffff;
  border-radius: 30px; /* Köşeleri iyice yuvarlatıyoruz (Soft görünüm) */

  /* Kalın beyaz bir çerçeve ekleyerek dalga ile kusursuz birleşme sağlıyoruz */
  border: 10px solid #ffffff;

  /* Soft ve katmanlı gölge (Derinlik hissi) */
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);

  overflow: hidden;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Resimlere yumuşak bir kenar veriyoruz */
.galeri-slide img {
  border-radius: 20px;
  width: 100%;
  height: 600px;
  object-fit: cover;
}

/* İletişim Sayfası Özel Kart Tasarımı */
.modern-iletisim-kart {
  background: #ffffff;
  border-radius: 30px; /* Galeri ile uyumlu yumuşak köşe */
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.05); /* Çok hafif derinlik */
  border: 1px solid rgba(0, 0, 0, 0.02);
}

/* Giriş Kutuları (Inputlar) */
.modern-iletisim-kart .form-control {
  border-radius: 12px;
  padding: 12px 20px;
  border: 2px solid #f0f7f7;
  background-color: #fcfdfd;
  transition: all 0.3s ease;
}

.modern-iletisim-kart .form-control:focus {
  border-color: #4db3b3; /* Senin teal rengin */
  box-shadow: 0 0 15px rgba(77, 179, 179, 0.1);
  background-color: #fff;
}

/* Başlık Çizgisi */
.baslik-cizgi {
  width: 60px;
  height: 4px;
  background-color: #4db3b3;
  margin: 0 auto;
  border-radius: 10px;
}

/* --- ÇALIŞMALARIM SAYFASI ÖZEL --- */

.calismalarim-sayfasi {
  background-color: #fcfdfd;
}

.calismalarim-header {
  background-color: #f0f7f7;
  padding-top: 100px !important;
}

/* Proje Kartı Tasarımı */
.proje-kart {
  background: #ffffff;
  border-radius: 25px;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  border: none;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  height: 100%;
}

.proje-kart:hover {
  transform: translateY(-15px); /* Yüzme efekti */
  box-shadow: 0 20px 40px rgba(77, 179, 179, 0.15);
}

/* Kart Resim Alanı */
.proje-resim-alan {
  position: relative;
  height: 220px;
  overflow: hidden;
}

.proje-resim-alan img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.proje-kart:hover .proje-resim-alan img {
  transform: scale(1.1);
}

/* Resim Üzerindeki Overlay */
.proje-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent !important; /* Rengi tamamen sildik */
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.proje-kart:hover .proje-overlay {
  opacity: 1;
}

/* Kart İsim ve Badge */
.proje-kart .badge {
  background-color: #e0f2f1;
  color: #4db3b3;
  font-weight: 500;
  padding: 8px 15px;
  border-radius: 10px;
}

.proje-kart h4 {
  color: #2d3250;
  font-weight: 700;
  margin-top: 10px;
}

.proje-kart p {
  color: #777;
  font-size: 0.95rem;
  line-height: 1.6;
}

/* --- ANA SAYFA GİRİŞ EKRANI (HERO) DÜZENLEME --- */

.ana-sayfa-hero {
  height: 100vh; /* Ekranın tam yüksekliği */
  display: flex;
  flex-direction: column;
  justify-content: center; /* İçeriği dikeyde ortalar */
  align-items: center;
  position: relative;
  overflow: hidden; /* Kaydırma çubuğunu gizler (sadece bu bölümde) */
  background-color: #f0f7f7; /* Soft arka plan rengin */
  padding-top: 80px; /* Navbar için boşluk */
}

/* Metinlerin olduğu alan */
.hero-icerik {
  text-align: center;
  z-index: 10;
  margin-bottom: 50px; /* Dalgadan biraz yukarıda durması için */
}

/* Dalganın Konumu */
.ana-sayfa-dalga {
  position: absolute;
  bottom: 0; /* Sayfanın en altına yapıştırır */
  left: 0;
  width: 100%;
  line-height: 0;
  z-index: 5;
}

.ana-sayfa-dalga svg {
  display: block;
  width: 100%;
  /* Dalganın yüksekliğini resimdeki gibi tutmak için */
  height: 150px;
}

/* --- LİNKLER SAYFASI ÖZEL --- */

/* Bağlantılar sayfasının başlık alanı */
.linkler-header {
  background-color: #f0f7f7;
  position: relative;
  /* padding-top değerini 100px'den 150px'e çıkardık */
  padding-top: 110px !important;
  padding-bottom: 80px !important;
}

/* Eğer sadece ana başlığı (h1) oynatmak istersen bu alternatif yolu kullan: */
.linkler-header h1 {
  margin-top: 20px; /* Başlığı kendi içinde biraz daha aşağı iter */
  margin-bottom: 15px;
}

.linkler-dalga {
  line-height: 0;
  margin-top: 50px;
}

.linkler-dalga svg {
  height: 150px;
  width: 100%;
}

/* Link Kartlarının Bulunduğu Alan */
.link-kartlari-alani {
  background-color: #ffffff;
  padding-top: 100px;
  padding-bottom: 100px;
  margin-top: -1px; /* Beyaz boşluğu kapatır */
}

/* Link Kartı Tasarımı */
.link-kart {
  border: none !important;
  border-radius: 30px !important;
  background: #ffffff !important;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.04) !important;
  transition: all 0.4s ease !important;
}

.link-kart:hover {
  transform: translateY(-12px);
  box-shadow: 0 20px 50px rgba(77, 179, 179, 0.12) !important;
}

/* Kartın İçindeki İkon */
.link-ikon {
  font-size: 3rem;
  color: #4db3b3;
  background: #f0f7f7;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin: 0 auto;
}

/* Ziyaret Et Butonunun Yeni Hali */
.btn-link-git {
  background-color: #4db3b3; /* Senin ana teal rengin */
  color: white !important;
  border-radius: 50px; /* Tam yuvarlak köşeler */
  padding: 12px 35px; /* Daha dolgun bir görünüm */
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.5px;
  border: none;
  display: inline-block;
  text-decoration: none;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Esnek geçiş efekti */
  box-shadow: 0 10px 20px rgba(77, 179, 179, 0.2); /* Soft renkli gölge */
  margin-top: 20px;
}

/* Butonun Üstüne Gelince (Hover) */
.btn-link-git:hover {
  background-color: #3d8f8f;
  transform: translateY(-5px) scale(1.03); /* Hafif yükselme ve büyüme */
  box-shadow: 0 15px 30px rgba(77, 179, 179, 0.4); /* Gölge derinleşir */
  color: white !important;
}

/* Butona basıldığında (Active) */
.btn-link-git:active {
  transform: translateY(-2px);
}