/* Burcu Beauty Box — site stilleri
   Onceden 22 HTML sayfasinin her birinde gomulu olarak tekrarlaniyordu;
   tek dosyaya alindi, boylece tarayici bir kez indirip onbellekliyor. */

/* Global Styles & Reset */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { overflow-x: hidden; -webkit-font-smoothing: antialiased; }
html.lenis { height: auto; }
html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis] { overflow: auto; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-scrolling iframe:not(#map-iframe) { pointer-events: none; }

/* Typography System - Premium Minimal */
h1 { 
  font-family: 'Cormorant Garamond', serif; 
  font-size: clamp(3rem, 8vw, 6rem); 
  font-weight: 300; 
  letter-spacing: -0.02em; 
  line-height: 1.2;
}
h2 { 
  font-family: 'Cormorant Garamond', serif; 
  font-size: clamp(2rem, 5vw, 3.5rem); 
  font-weight: 400; 
  letter-spacing: -0.01em; 
  line-height: 1.3;
}
h3 { font-family: 'Cormorant Garamond', serif; }
body { 
  font-family: 'Inter', sans-serif; 
  font-size: 1.0625rem; 
  line-height: 1.8; 
  letter-spacing: 0.01em; 
}
.font-serif { font-family: 'Cormorant Garamond', serif; }
.font-italiana { font-family: 'Italiana', 'Cormorant Garamond', serif; }

/* Navbar Styles - The Well Layout */
#navbar { transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
#navbar.scrolled { 
  padding: 0.875rem 0; 
  background: rgba(250, 250, 248, 0.95); 
  backdrop-filter: blur(16px) saturate(160%); 
  border-bottom: 1px solid rgba(201, 169, 103, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.02); 
}

/* Nav Links - Elegant Double Underline */
.nav-link { 
  position: relative; 
  padding: 0.5rem 0; 
  font-weight: 400; 
  letter-spacing: 0.05em;
  transition: color 0.3s;
}
.nav-link::before,
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  width: 0;
  height: 1px;
  background: #C9A967;
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.nav-link::after {
  bottom: -5px;
  transition-delay: 0.1s;
}
.nav-link:hover::before,
.nav-link:hover::after {
  width: 100%;
  left: 0;
}

/* Tilt Card Pro Design */
.tilt-card {
  background: #ffffff; border: 1px solid #f3f4f6; border-radius: 1.5rem; padding: 2rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.03), 0 2px 4px -1px rgba(0, 0, 0, 0.02);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.tilt-card:hover {
  border-color: rgba(197, 160, 89, 0.2);
  box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.1);
  transform: translateY(-4px);
}

/* Service Icons */
.service-icon-box {
  width: 4rem; height: 4rem; background: linear-gradient(135deg, rgba(197, 160, 89, 0.08) 0%, rgba(197, 160, 89, 0.02) 100%);
  border: 1.5px solid rgba(197, 160, 89, 0.15); border-radius: 1rem; display: flex; align-items: center; justify-content: center;
  transition: all 0.3s ease;
}
.tilt-card:hover .service-icon-box { background: linear-gradient(135deg, rgba(197, 160, 89, 0.15) 0%, rgba(197, 160, 89, 0.08) 100%); border-color: rgba(197, 160, 89, 0.3); }
.service-icon { font-size: 1.75rem; color: #C5A059; transition: all 0.3s ease; }
.tilt-card:hover .service-icon { transform: scale(1.05); }
.service-card { position: relative; overflow: hidden; }

/* Gallery Overlay */
.gallery-item { 
  position: relative; 
  overflow: hidden; 
  border: 1px solid #f3f4f6; 
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); 
  transition: all 0.4s; 
  cursor: pointer;
  width: 100%;
}
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.gallery-item:hover { border-color: rgba(197, 160, 89, 0.3); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1); transform: scale(1.02); }
.gallery-item::after { 
  content: ''; 
  position: absolute; 
  inset: 0; 
  background: linear-gradient(180deg, transparent 0%, rgba(28, 28, 28, 0.6) 100%); 
  opacity: 0; 
  transition: opacity 0.4s; 
  z-index: 1;
  pointer-events: none;
}
.gallery-item:hover::after { opacity: 1; }
.gallery-label {
  position: absolute; bottom: 1rem; left: 1rem; z-index: 10; background: rgba(255, 255, 255, 0.9);
  padding: 0.4rem 0.8rem; border-radius: 0.5rem; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.05em;
  color: #1c1c1c; opacity: 0; transform: translateY(10px); transition: all 0.3s;
  pointer-events: none;
}
.gallery-item:hover .gallery-label { opacity: 1; transform: translateY(0); }
.gallery-zoom-icon {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 3rem; height: 3rem; background: rgba(255, 255, 255, 0.9); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: all 0.4s; z-index: 11;
  color: #C5A059; font-size: 1.25rem;
  pointer-events: none;
}
.gallery-item:hover .gallery-zoom-icon { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
.gallery-masonry { column-count: 1; column-gap: 1.5rem; }
.gallery-masonry .gallery-item { display: inline-block; width: 100%; margin-bottom: 1.5rem; break-inside: avoid; }
@media (min-width: 768px) { .gallery-masonry { column-count: 2; } }
@media (min-width: 1024px) { .gallery-masonry { column-count: 3; } }
@media (min-width: 1280px) { .gallery-masonry { column-count: 4; } }

/* Lightbox Modal */
.lightbox {
  position: fixed; inset: 0; background: rgba(0, 0, 0, 0.95);
  z-index: 100; display: none; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.3s;
}
.lightbox.active { display: flex; opacity: 1; }
.lightbox-content {
  position: relative; max-width: 90vw; max-height: 90vh;
  transform: scale(0.8); transition: transform 0.3s;
}
.lightbox.active .lightbox-content { transform: scale(1); }
.lightbox img { max-width: 100%; max-height: 90vh; object-fit: contain; border-radius: 0.5rem; }
.lightbox-close {
  position: absolute; top: -3rem; right: 0;
  color: white; font-size: 2rem; cursor: pointer;
  width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.1); border-radius: 50%;
  transition: all 0.3s;
}
.lightbox-close:hover { background: rgba(255, 255, 255, 0.2); transform: rotate(90deg); }

/* Reviews Pro Style */
.review-card {
  background: #ffffff; border: 1px solid #f3f4f6; border-radius: 1.5rem;
  padding: 2rem; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04); transition: all 0.3s;
}
.review-card:hover { border-color: rgba(197, 160, 89, 0.15); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06); transform: translateY(-2px); }
.review-quote { position: relative; }

/* Stats & Counter */
.counter-text {
  font-size: 3.5rem; font-weight: 800; background: linear-gradient(135deg, #1c1c1c 0%, #4a4a4a 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; line-height: 1; letter-spacing: -0.02em;
}

/* WhatsApp Button */
.whatsapp-float {
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%); box-shadow: 0 8px 24px rgba(37, 211, 102, 0.4);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.whatsapp-float:hover { transform: scale(1.1) rotate(5deg); box-shadow: 0 12px 32px rgba(37, 211, 102, 0.5); }

/* Scroll Arrow - Light Theme */
.scroll-arrow {
  width: 20px;
  height: 30px;
  border: 1px solid rgba(26, 26, 26, 0.25);
  border-radius: 15px;
  position: relative;
}
.scroll-arrow::before {
  content: '';
  position: absolute;
  top: 5px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 6px;
  background: #C9A967;
  border-radius: 2px;
  animation: scrollDot 2s ease-in-out infinite;
}
@keyframes scrollDot {
  0%, 100% { top: 5px; opacity: 1; }
  50% { top: 15px; opacity: 0.3; }
}

/* Gold Line Animation */
.gold-line-animate {
  position: relative;
  overflow: hidden;
}
.gold-line-animate::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(184, 149, 108, 0.5), transparent);
  animation: goldLineSlide 2s ease-in-out infinite;
}
@keyframes goldLineSlide {
  0% { left: -100%; }
  100% { left: 100%; }
}

/* Luxury Button Hover Glow (for other buttons) */
.luxury-button {
  position: relative;
  overflow: hidden;
}
.luxury-button::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(201, 169, 103, 0.3), transparent);
  opacity: 0;
  transition: opacity 0.3s;
}
.luxury-button:hover::before {
  opacity: 1;
}

/* Gold Frame Glow */
.gold-frame-glow {
  box-shadow: 0 0 30px rgba(184, 149, 108, 0.2);
  animation: goldFramePulse 3s ease-in-out infinite;
}
@keyframes goldFramePulse {
  0%, 100% { box-shadow: 0 0 30px rgba(184, 149, 108, 0.2); }
  50% { box-shadow: 0 0 50px rgba(184, 149, 108, 0.4); }
}

/* Floating Gold Element */
.gold-float-element {
  animation: floatRotate 8s ease-in-out infinite;
}
@keyframes floatRotate {
  0%, 100% { transform: rotate(45deg) translateY(0); }
  50% { transform: rotate(45deg) translateY(-20px); }
}

/* Scroll Indicator */
.scroll-indicator {
  animation: scrollPulse 2s ease-in-out infinite;
}
@keyframes scrollPulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

/* Service Card Luxury Styles */
.service-card-luxury {
  cursor: pointer;
}
.service-underline {
  transition: width 0.5s ease;
  width: 0;
}
.service-card-luxury:hover .service-underline {
  width: 48px;
}

/* Hide Scrollbar */
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* Text Reveal Animation */
.text-reveal {
  overflow: hidden;
}
.text-reveal span {
  display: inline-block;
  transform: translateY(100%);
  animation: textRevealUp 0.8s ease-out forwards;
}
@keyframes textRevealUp {
  to {
    transform: translateY(0);
  }
}

/* Image Parallax Effect */
.parallax-image {
  transition: transform 0.3s ease-out;
}

/* Hover Glow Effect */
.hover-glow {
  transition: all 0.3s ease;
}
.hover-glow:hover {
  box-shadow: 0 0 30px rgba(184, 149, 108, 0.3);
}

/* Staggered Animation Delay */
[data-aos-delay="100"] { animation-delay: 0.1s; }
[data-aos-delay="200"] { animation-delay: 0.2s; }
[data-aos-delay="300"] { animation-delay: 0.3s; }
[data-aos-delay="400"] { animation-delay: 0.4s; }
[data-aos-delay="500"] { animation-delay: 0.5s; }

/* Premium Minimal Global Styles */
.shadow-premium {
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04), 0 2px 8px rgba(0, 0, 0, 0.02);
}

.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
}

.service-item-minimal {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* About Section - Subtle zoom on image */
#about img {
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
#about:hover img {
  transform: scale(1.02);
}

/* Mobile Menu Styles */
.mobile-menu { 
  position: fixed; top: 0; right: -100%; width: 100%; max-width: 400px; 
  height: 100vh; background: white; z-index: 100; 
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
  transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
}
#mobile-menu-toggle {
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
}
#mobile-menu-toggle i {
  display: block;
  line-height: 1;
}
#services-accordion {
  text-align: left;
  padding: 0;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
#services-accordion span {
  flex: 1;
  text-align: left;
  display: block;
}
#services-accordion i {
  margin-left: auto;
}
.mobile-menu.active { right: 0; }
.mobile-overlay {
  position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); 
  z-index: 90; opacity: 0; visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}
.mobile-overlay.active { opacity: 1; visibility: visible; }

/* Mobile Menu Item Reset */
#mobile-menu nav a,
#mobile-menu nav button {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  text-align: left !important;
}

/* Dropdown Menu Styles */
.dropdown-item {
  display: block;
  padding: 0.75rem 1.25rem;
  font-size: 0.875rem;
  color: #4b5563;
  transition: all 0.2s;
}
.dropdown-item:hover {
  background: rgba(197, 160, 89, 0.08);
  color: #C5A059;
  padding-left: 1.5rem;
}

/* Ensure Hizmetlerimiz dropdown menu is visible on hover */
.services-dropdown:hover .services-dropdown-menu {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: scale(1) !important;
}

/* Mobile Optimization Styles */
@media (max-width: 768px) {
  .container {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  h1 { font-size: 2rem !important; line-height: 1.2 !important; }
  h2 { font-size: 1.75rem !important; line-height: 1.3 !important; }
  h3 { font-size: 1.5rem !important; line-height: 1.3 !important; }
  body { font-size: 0.9375rem !important; line-height: 1.7 !important; }
  .py-32, .py-40, .md\:py-40 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
  .py-24, .md\:py-32 { padding-top: 2rem !important; padding-bottom: 2rem !important; }
  .px-6, .px-8 { padding-left: 1rem !important; padding-right: 1rem !important; }
  .gap-8, .gap-12, .gap-16 { gap: 1.5rem !important; }
  .mb-16, .mb-20 { margin-bottom: 2rem !important; }
  .mb-12 { margin-bottom: 1.5rem !important; }
  .mb-8, .mb-10 { margin-bottom: 1.25rem !important; }
  .service-item-minimal { width: auto !important; min-width: 80px !important; }
  .service-item-minimal .w-20, .service-item-minimal .h-20 { width: 3.5rem !important; height: 3.5rem !important; }
  .service-item-minimal i { font-size: 1.25rem !important; }
  .service-item-minimal span { font-size: 0.625rem !important; }
  .flex.flex-wrap.justify-center { gap: 1rem !important; }
  .flex.flex-wrap.justify-center .service-item-minimal { margin: 0.5rem !important; }
  button, a[class*="button"], a[class*="btn"] { min-height: 44px !important; padding: 0.75rem 1.5rem !important; }
  .grid { gap: 1rem !important; }
  .grid-cols-2, .grid-cols-3, .grid-cols-4 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
  .min-h-screen { min-height: 70vh !important; }
  .min-h-\[85vh\] { min-height: 60vh !important; }
  .text-4xl, .text-5xl, .text-6xl { font-size: 1.875rem !important; }
  .text-3xl { font-size: 1.5rem !important; }
  .text-2xl { font-size: 1.25rem !important; }
  .text-xl { font-size: 1.125rem !important; }
  .text-lg { font-size: 1rem !important; }
}

@media (max-width: 480px) {
  h1 { font-size: 1.75rem !important; }
  h2 { font-size: 1.5rem !important; }
  h3 { font-size: 1.25rem !important; }
  .container { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }
  .py-32, .py-40, .md\:py-40 { padding-top: 2rem !important; padding-bottom: 2rem !important; }
  .py-24, .md\:py-32 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
  .gap-8, .gap-12, .gap-16 { gap: 1rem !important; }
  .service-item-minimal { min-width: 70px !important; }
  .service-item-minimal .w-20, .service-item-minimal .h-20 { width: 3rem !important; height: 3rem !important; }
  .service-item-minimal i { font-size: 1rem !important; }
  .service-item-minimal span { font-size: 0.5rem !important; }
}

/* Alt bilgideki tasarimci baglantisi (onceden footer icinde gomuluydu) */
.credit-link { position: relative; color: #C9A967; transition: color .3s ease; }
.credit-link::after {
  content: ''; position: absolute; left: 0; bottom: -2px;
  width: 100%; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left; transition: transform .35s ease;
}
.credit-link:hover { color: #E5D5B7; }
.credit-link:hover::after { transform: scaleX(1); }

/* Blog yazisi govdesi — panelden sade HTML olarak girilir, bicim buradan gelir */
.makale > * + * { margin-top: 1.75rem; }
.makale p { color: #6B6B6B; line-height: 1.8; }
.makale h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.75rem; color: #1A1A1A; margin-bottom: .75rem; line-height: 1.3;
}
.makale h3 { font-family: 'Cormorant Garamond', serif; font-size: 1.35rem; color: #1A1A1A; margin-bottom: .5rem; }
.makale ul, .makale ol { color: #6B6B6B; padding-left: 1.35rem; line-height: 1.8; }
.makale ul { list-style: disc; }
.makale ol { list-style: decimal; }
.makale li + li { margin-top: .5rem; }
.makale a { color: #C9A967; text-decoration: underline; text-underline-offset: 3px; }
.makale a:hover { color: #1A1A1A; }
.makale strong { color: #1A1A1A; font-weight: 600; }
.makale img { border-radius: 1rem; width: 100%; height: auto; }
.makale blockquote {
  border-left: 2px solid #C9A967; padding: .25rem 0 .25rem 1.25rem;
  color: #6B6B6B; font-style: italic;
}
@media (min-width: 768px) { .makale h2 { font-size: 2rem; } }

/* ---------------------------------------------------------------------------
   AOS emniyet agi

   Site icerigi AOS kutuphanesine bagli olarak opacity:0 ile basliyor ve
   animasyon tetiklendiginde gorunur oluyor. AOS'un CDN'i (unpkg) erisilemezse
   ya da betik hata verirse sayfa metinleri hic gorunmez — ziyaretci bos bir
   sayfa gorur. Asagidaki kural, AOS basariyla baslamadigi surece tum
   icerigi gorunur tutar; AOS calisirsa <html> uzerine 'aos-hazir' sinifi
   eklenir ve animasyonlar normal calisir.
   --------------------------------------------------------------------------- */
html:not(.aos-hazir) [data-aos] {
  opacity: 1 !important;
  transform: none !important;
}

/* Hareket azaltma tercihi olan ziyaretcilerde animasyonlari devre disi birak */
@media (prefers-reduced-motion: reduce) {
  [data-aos] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ---------------------------------------------------------------------------
   Gorselsiz kahraman bolumu

   Hizmet sayfalarinin baslik alani beyaz metinle yazilir ve arkasinda koyu
   bir gorsel olmasi varsayilir. Gorsel henuz yuklenmemis bir hizmette metin
   krem zeminde okunamaz hale geliyordu. Bu degrade, gorsel eklenene kadar
   markaya uygun koyu bir zemin saglar.
   --------------------------------------------------------------------------- */
.hero-bos {
  background:
    radial-gradient(1200px 500px at 70% 10%, rgba(201, 169, 103, .22), transparent 60%),
    linear-gradient(135deg, #1A1A1A 0%, #262220 55%, #3B3225 100%);
}

/* ---------------------------------------------------------------------------
   <picture> sarmalayicisi yerlesimi bozmasin

   Gorseller WebP sunabilmek icin <picture> icine alinir. Ancak <picture>
   varsayilan olarak display:inline ve yuksekligi auto'dur. Bu yuzden icindeki
   <img> uzerindeki h-full (height:100%) kapsayiciya degil <picture>'a gore
   hesaplanir; gorsel dogal en-boy oraninda kalir ve kapsayicinin altinda bos
   alan olusur. (Ana sayfa kahraman bolumunde mobilde 295px bosluk yaratiyordu.)

   display:contents ile <picture> yerlesimden tamamen cikar; <img> dogrudan
   kapsayicinin cocugu gibi davranir ve h-full + object-cover beklendigi gibi
   calisir. Desteklemeyen cok eski tarayicilarda davranis eskisi gibi kalir,
   daha kotu olmaz.
   --------------------------------------------------------------------------- */
picture {
  display: contents;
}

/* ===========================================================================
   SAYFAYA OZEL STILLER

   Bu kurallar teslim alinan sitede her sayfanin KENDI <style> blogundaydi.
   Ortak dosya index.html'den cikarilirken bunlar disarida kalmisti; sonucta
   hizmet sayfalarinda kahraman ortusu, blog kartlarinin gorsel yuksekligi ve
   makale kutusunun cercevesi kaybolmustu.
   =========================================================================== */

/* Hizmet sayfalari — kahraman gorselinin uzerindeki koyu gecis.
   Beyaz baslik metninin fotograf uzerinde okunabilmesini saglar. */
.hero-overlay {
  background: linear-gradient(
    180deg,
    rgba(26, 26, 26, .35) 0%,
    rgba(26, 26, 26, .60) 60%,
    rgba(26, 26, 26, .75) 100%
  );
}

/* Galeri kartlari — uzerine gelince hafif yakinlasma */
.gallery-card img { transition: transform .7s ease; }
.gallery-card:hover img { transform: scale(1.06); }

/* Blog kartlari */
.blog-card {
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.blog-card:hover { transform: translateY(-6px); }

/* Kart gorselleri sabit yukseklikte olmali; aksi halde her kartin gorseli
   kendi en-boy oraninda kalir ve izgara duzensiz gorunur.
   Orijinalde sayfaya gore 160/180/220px kullanilmis; tek deger yeterli. */
.blog-card-image { height: 200px; }

/* Blog yazisi kutusu */
.article-card {
  background: #fff;
  border: 1px solid rgba(201, 169, 103, .15);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .04);
}

/* Acilir listelerde secenek rengi (bazi tarayicilarda devralinmiyor) */
select option { color: #1c1c1c; }