/**
Theme Name: Sakura Kreatif Ajans
Author: Sakura Kreatif ajans
Author URI: https://www.sakuraajans.com
Description: SakuraAjans, hızlı, tam özelleştirilebilir ve estetik bir WordPress temasıdır.
Bloglar, portföy siteleri, kurumsal web siteleri ve e-ticaret projeleri için mükemmel bir altyapı sunar.
Ön yüzde son derece hafiftir (50KB’tan daha az) ve olağanüstü hız performansı sağlar.
SEO dostu olarak geliştirilen SakuraAjans, schema.org yapısını dahili olarak içerir,
böylece arama motorları web sitenizi daha iyi tanır ve sıralamalarda avantaj elde edersiniz.

Tema; geniş yan menü, widget alanı ve sayfa düzeni seçenekleriyle
size tam kontrol sağlar.
Ayrıca, Elementor, Gutenberg, Beaver Builder ve benzeri popüler sayfa oluşturucularla
%100 uyumlu olacak şekilde tasarlanmıştır.

Bazı öne çıkan özellikleri:
– WooCommerce uyumlu
– Mobil ve tablet için tam duyarlı (responsive) tasarım
– Tüm büyük eklentilerle sorunsuz çalışır
– Çeviri ve çok dilli kullanım desteği
– Premium eklentilerle genişletilebilir yapı
– Düzenli olarak güncellenir ve desteklenir

Tasarım, geliştirme ve bakım: SakuraAjans Creative

Kusursuz bir başlangıç teması mı arıyorsunuz?
Artık aramanıza gerek yok. SakuraAjans, hızlı, esnek ve modern tasarımıyla tüm projeleriniz için mükemmel bir temel sunar. 🚀
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sakura-kreatif-ajans
Template: astra
*/
/* ================================
   🌸 SAKURA KREATİF AJANS - HEADER STYLES
   Yasin Şeker / Sakura Creative
   Tarih: 2025-10-10
================================ */

/* 🔸 Renk Değişkenleri */
:root {
  --sari: #FFC12E;
  --sari-hover: #ffdb5c;
  --text-light: #f5f5f5;
  --text-dark: #1c1c1a;
  --bg-dark: rgba(28,28,26,0.25);
  --bg-dark-solid: rgba(28,28,26,0.9);
  --transition: 0.4s ease-in-out;
}

/* 🔹 Topbar */
.topbar {
  width: 100%;
  background: var(--text-dark);
  color: var(--text-light);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  padding: 6px 5%;
  font-size: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  box-sizing: border-box;
}
.topbar .social {
  display: flex;
  align-items: center;
  gap: 12px;
}
.topbar .social a {
  color: var(--sari);
  transition: color var(--transition);
  font-weight: bold;
}
.topbar .social a:hover { color: #fff; }
.topbar .contact {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  color: #d9d9d9;
  flex-wrap: wrap;
  text-align: right;
}

/* 🔸 Header Ana Yapı */
.sari-header {
  position: sticky;
  top: 0;
  width: 100%;
  backdrop-filter: blur(8px);
  background: var(--bg-dark);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  z-index: 999;
  box-shadow: 0 2px 10px rgba(0,0,0,0.15);
  transition: background var(--transition), backdrop-filter var(--transition), box-shadow var(--transition);
}
.sari-header.scrolled {
  background: var(--bg-dark-solid);
  backdrop-filter: blur(18px);
  box-shadow: 0 6px 25px rgba(0,0,0,0.4);
}
.header-inner {
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 5%;
}

/* 🔹 Menü */
.menu-left, .menu-right {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}
.menu-item { position: relative; }

.sari-header a {
  color: var(--text-light);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.5px;
  transition: color 0.3s ease;
  padding: 6px 0;
  display: inline-block;
}
.sari-header a:hover { color: var(--sari); }
.sari-header a::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0%;
  height: 2px;
  background: var(--sari);
  transition: width 0.3s ease;
}
.sari-header a:hover::after { width: 100%; }

/* 🔸 Dropdown Menü */
.submenu {
  position: absolute;
  top: 100%;
  left: 0;
  background: rgba(28,28,26,0.95);
  min-width: 220px;
  padding: 10px 0;
  border-radius: 6px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
  display: none;
  flex-direction: column;
  z-index: 1000;
}
.submenu a {
  color: var(--text-light);
  font-size: 14px;
  padding: 8px 18px;
  transition: background 0.3s ease, color 0.3s ease;
}
.submenu a:hover {
  background: rgba(255,193,46,0.15);
  color: var(--sari);
}
.menu-item:hover .submenu {
  display: flex;
  animation: fadeIn 0.25s ease;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 🔹 Logo & CTA */
.logo img {
  height: 55px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
  transition: transform 0.4s ease;
}
.sari-header.scrolled .logo img { transform: scale(0.9); }

.cta {
  background: var(--sari);
  color: var(--text-dark) !important;
  padding: 8px 26px;
  margin: 0 3px;
  border-radius: 6px;
  font-weight: 600;
  letter-spacing: 0.3px;
  font-size: 15px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
  position: relative;
}
.cta::after { display: none !important; }
.cta:hover {
  background: var(--sari-hover);
  color: #000 !important;
  box-shadow: 0 0 8px rgba(255,193,46,0.5);
  transform: translateY(-2px);
}

/* 🔸 Responsive */
@media(max-width: 768px) {
  .topbar {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 6px;
    padding: 8px 4%;
  }
  .topbar .social, .topbar .contact {
    justify-content: center;
    text-align: center;
  }
  .header-inner {
    padding: 12px 4%;
    flex-direction: column;
    gap: 10px;
  }
  .menu-left, .menu-right {
    display: none;
  }
}
/* ---- GLASS EFECT CONTAINER ---- */
.glass {
  position: relative;
  isolation: isolate; /* üstteki içerik etkilenmesin */
}

/* ---- Blur katmanı ---- */
.glass::before {
  content: "";
  position: absolute;
  inset: 0; /* üst, alt, sağ, sol 0 */
  background: rgba(255, 255, 255, 0.1); /* saydam beyaz cam tonu */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, 0.2);
  pointer-events: none; /* tıklamayı engellemez */
  z-index: 0;
}

/* ---- İçerik üstte kalsın ---- */
.glass > .elementor-container,
.glass > .e-con,
.glass > .e-con-inner {
  position: relative;
  z-index: 1;
}