/*
Theme Name: Zephyr Child
Template: Zephyr
Version: 1.0
Author:	UpSolution
Theme URI: http://zephyr.us-themes.com/
Author URI: http://us-themes.com/
*/
<link rel="stylesheet" href="https://use.typekit.net/bpk3hso.css">

/*Add your own styles here:*/
@import url('/css/staglasslogic.css');
/* @import url('/css/glassmorph.css'); */


/* ============================================================
   STALOGIC MAC STYLE - UNIFIED VERSION (WordPress/Zephyr Compatible)
   ============================================================ */

/* 1. SATIR KAYDIRMA (Uzun kodları bölme) */
pre[class*="language-"], 
code[class*="language-"] {
    white-space: pre-wrap !important;
    word-break: break-all !important;
    word-wrap: break-word !important;
    overflow-wrap: anywhere !important;
}

/* 2. ANA PENCERE YAPISI */
div.code-toolbar, 
pre[class*="language-"]:not(div.code-toolbar > pre) {
    background-color: #050505 !important;
    border-radius: 12px !important;
    position: relative !important;
    margin-left: 20px !important;
	margin-bottom: 0px !important;
    padding-top: 20px !important; /* Mac Barı için yer */
    box-shadow: 0 20px 50px rgba(0,0,0,0.5) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    overflow: hidden !important;
    display: block;
}

/* Mac Üst Barı (Şerit) */
div.code-toolbar::before,
pre[class*="language-"]:not(div.code-toolbar > pre)::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 40px;
    background: #161b22;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    z-index: 1;
}

/* Mac Renkli Noktalar */
div.code-toolbar::after,
pre[class*="language-"]:not(div.code-toolbar > pre)::after {
    content: "";
    position: absolute;
    top: 15px;
    left: 15px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ff5f56;
    box-shadow: 20px 0 0 #ffbd2e, 40px 0 0 #27c93f;
    z-index: 2;
}

/* 3. EKLENTİ HİZALAMALARI */

/* Sağ Üst Butonlar (Kopyala, İndir, Dil) */
div.code-toolbar > .toolbar {
    top: 8px !important;
    right: 12px !important;
    opacity: 1 !important;
    z-index: 3 !important;
}

/* Sadece toolbar-item'ın doğrudan çocuklarına uygula (Çift çerçeveyi önler) */
.toolbar-item > button, 
.toolbar-item > span, 
.toolbar-item > a {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #c9d1d9 !important;
    padding: 6px 15px !important; /* Boyutu geri kazandırmak için padding artırıldı */
    border-radius: 7px !important;
    font-size: 13px !important; /* Font biraz büyütüldü */
    margin-left: 8px !important;
    transition: 0.3s !important;
    cursor: pointer;
    text-decoration: none !important;
    box-shadow: none !important;
    line-height: 1.2 !important;
    display: inline-block !important;
}

/* Butonun içindeki span'i temizle */
.toolbar-item > button span {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.toolbar-item > button:hover, 
.toolbar-item > a:hover { 
    background: rgba(255, 255, 255, 0.2) !important;
    color: #fff !important;
}
/* Satır Numaraları (Line Numbers) */
.line-numbers .line-numbers-rows {
    top: 0 !important;   
	margin-left: 27px !important;
	margin-right:0px;
    border-right: 1px solid rgba(255,255,255,0.1) !important;

}
pre.line-numbers code { 
	display: block; /* kodu blok haline getir */ 
	padding-left: 30px; /* numaradan sonra ekstra boşluk */ 

}

/* 4. İÇERİK AYARLARI */
pre[class*="language-"] {
    margin: 0 !important;
	padding-left: 26px !important;
	padding-right: 6px !important;
	padding-top: 30px !important;
    padding-bottom: 2px !important;
    background: transparent !important;
    z-index: 0;
}

pre[class*="language-"] code {
    font-family: Consolas, Monaco, 'Andale Mono', monospace !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    background: transparent !important;
}

/* Zephyr / WPBakery Fix */
.wpb_text_column pre, 
.vc_column_container pre {
    overflow: visible !important;
}

/* pppppppppppppppppppppp */
/* Aurora Container */
.aurora-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background-color: #030303; /* Uzay siyahı temel */
  overflow: hidden;
	border-radius:15px;
}

/* Aurora Katmanları */
.aurora-bg::before,
.aurora-bg::after {
  content: "";
  position: absolute;
  width: 150%;
  height: 150%;
  top: -25%;
  left: -25%;
  opacity: 0.4;
  filter: blur(80px); /* Renkleri birbirine bağlayan sihirli blur */
  z-index: -1;
}

/* Mavi/Cyan Katmanı (Üstten Süzülen) */
.aurora-bg::before {
  background: radial-gradient(
    circle at 20% 30%, 
    #00FFFF 0%, 
    #4c1d95 40%, 
    transparent 70%
  );
  animation: drift 20s linear infinite;
}

/* Pembe/Mor Katmanı (Alttan Yükselen) */
.aurora-bg::after {
  background: radial-gradient(
    circle at 80% 70%, 
    #FF1AAD 0%, 
    #7e22ce 50%, 
    transparent 80%
  );
  animation: drift 25s linear infinite reverse;
}

/* Hareket Animasyonu */
@keyframes drift {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(3deg) scale(1.1); }
  100% { transform: rotate(0deg) scale(1); }
}



 
.moving-bg {
  width: 400px;
  height: 200px;
  background: linear-gradient(270deg, #ff6ec4, #7873f5);
  background-size: 400% 400%;
  animation: moveGradient 8s ease infinite;
}
/* linear-gradient(109deg, #420078 0%,#031f00 25%,#001326 50%,#001a0d 75%,#4d1117 100%); */
.wave-bg {
     background: linear-gradient(90deg, #03070D 0%,#0e081f 20%,#1d2e2d 40%,#1e0124 60%,#1c262e 80%,#0f2330 100%);
	  background-size: 200% 200%;
  	animation: moveGradient 25s ease-in-out infinite;
}
.stalo-wave-tx {
     background: linear-gradient(165deg, #00FFFF 10%,#FF1AAD 25%,#A855F7 50%,#ddff00 75%,#ff9945 100%);
	  background-size: 200% 200%;
  	animation: waveMove 6s ease-in-out infinite;
	font-family: Manrope, sans-serif;
		font-size: 18px;
	font-weight: 700;
	line-height: 27px;
}

@keyframes moveGradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}


@keyframes waveMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
/*@keyframes moveGradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } */



/* Glassmorphism Kartı için Overlay (Opsiyonel) */
.glass-overlay {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 15px;
}

.sta-glassmo1 {
background: rgba(145, 145, 145, 0.43);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(10.6px);
-webkit-backdrop-filter: blur(10.6px);
border: 1px solid rgba(145, 145, 145, 0.9);
}


.sta-pastelbg {
background-image: radial-gradient(
        farthest-side circle at var(--pointer-x, 50%) var(--pointer-y, 50%),
        hsla(266, 100%, 90%, var(--card-opacity)) 4%,
        hsla(266, 50%, 80%, calc(var(--card-opacity) * 0.75)) 10%,
        hsla(266, 25%, 70%, calc(var(--card-opacity) * 0.5)) 50%,
        hsla(266, 0%, 60%, 0) 100%
      );
  }

.stalo-imagination-text {
	font-family: Manrope,sans-serif;
	font-size: 18px;
 	line-height: 27px;
	font-weight: 700;	
	background-image: linear-gradient(90deg, #00FFFF 0%,#FF1AAD 25%,#A855F7 50%,#FFF4ED 75%,#FB923C 100%);
 text-shadow: 0 0 1px linear-gradient(90deg, #00FFFF 0%,#FF1AAD 25%,#A855F7 50%,#FFF4ED 75%,#FB923C 100%);
}