/* Preloader */
.preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #c477e5 0%, #85467d 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.circle {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-top: 3px solid #fff;
  animation: spin 2s linear infinite;
  position: absolute;
}

.logo img {
  width: 80px;
  height: auto;
  position: relative;
  z-index: 2;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}



/* Resme hafif dalgalanma animasyonu */
.moving-img img {
  animation: breatheY 3s ease-in-out infinite;
}

@keyframes breatheY {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-15px); } /* Yukarı çık */
  100% { transform: translateY(0); }    /* Geri in */
}



/* Menü linkleri genel stil */
.main-nav .nav li a {
  position: relative;
  display: inline-block;
  padding: 8px 14px;
  color: white;
  text-decoration: none;
  transition: transform 0.3s ease, color 0.3s ease;
}

/* Alttan gradient çizgi efekti */
.main-nav .nav li a::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #f7f7f7, white);
  transition: all 0.3s ease;
  transform: translateX(-50%);
}

/* Hover olunca büyüme ve çizgi animasyonu */
.main-nav .nav li a:hover {
  transform: scale(1.08);
}

.main-nav .nav li a:hover::after {
  width: 80%;
}

.main-button-gradient-submit button {
  background: linear-gradient(90deg, #ff5f6d, #ffc371);
  color: #fff;
  border: none;
  padding: 12px 28px;
  border-radius: 30px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.main-button-gradient-submit button:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.2);
  background: linear-gradient(90deg, #ffc371, #ff5f6d); /* Hover'da renk ters çevirme */
}

.main-button-gradient-submit button:active {
  transform: scale(0.97);
}


:root{
  --pink: #ff7dad;
  --purple: #9b5de5;
  --indigo: #6a7dff;
  --bg-grad: linear-gradient(135deg,#a78bfa 0%, #7c4fd8 50%, #c06bdc 100%);
  --soft-grad: linear-gradient(90deg,#6a7dff,#9b58ff);
}

/* bölüm başlığı */
.blog-wrap .blog-head{
  text-align:center; margin-bottom: 28px;
}
.blog-wrap .blog-head h6{
  letter-spacing:.25em; font-weight:800; color:#8c7fd6; margin:0 0 6px;
}
.blog-wrap .blog-head h2{ font-weight:800; margin:0 0 8px; }
.blog-wrap .blog-head h2 span{ color:#c06bdc; }
.blog-wrap .blog-head p{ color:#707291; }

/* grid */
.blog-grid{
  display:grid; grid-template-columns: 280px 1fr; gap:28px;
  align-items:flex-start;
}
@media (max-width: 991px){
  .blog-grid{ grid-template-columns: 1fr; }
}

/* sol sekmeler */
.blog-tabs{ display:flex; flex-direction:column; gap:16px; }
.tab-btn{
  padding:16px 18px; color:#fff; border:none; cursor:pointer; text-align:left;
  font-weight:800; letter-spacing:.2px;
  border-radius:16px; background: var(--bg-grad);
  box-shadow: 0 16px 32px rgba(124,79,216,.22);
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
  outline:none;
}
.tab-btn:hover{ transform: translateY(-2px); filter: brightness(1.02); }
.tab-btn.active{
  background: linear-gradient(135deg,#ff8fb8 0%,#b16cea 60%,#9450e9 100%);
  box-shadow: 0 20px 38px rgba(193,88,216,.28);
}

/* sağ kart */
.blog-card{
  position:relative; background:#fff; border-radius:24px; padding:30px;
  box-shadow: 0 22px 60px rgba(0,0,0,.12);
  overflow:hidden;
}
.blog-card::after{
  content:""; position:absolute; inset:auto -100px -100px auto;
  width:280px; height:280px; border-radius:999px;
  background: radial-gradient(closest-side, rgba(255,170,204,.22), transparent);
  pointer-events:none;
}

/* paneller */
.tab-pane{ display:none; }
.tab-pane.active{ display:block; animation: fadeIn .35s ease; }
@keyframes fadeIn{ from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none} }

/* iç düzen */
.pane{
  display:grid; grid-template-columns: 1fr 1.6fr; gap:28px; align-items:center;
}
@media (max-width: 991px){
  .pane{ grid-template-columns: 1fr; text-align:center; }
}
.pane-visual{ display:grid; place-items:center; }
.pane-visual img{
  width:min(70%,220px); height:auto;
  filter: drop-shadow(0 12px 26px rgba(155,93,229,.25));
  transition: transform .35s ease, filter .35s ease;
}
.blog-card:hover .pane-visual img{
  transform: translateY(-6px) scale(1.03);
  filter: drop-shadow(0 20px 34px rgba(155,93,229,.3));
}

/* içerik */
.pane-content h3{ font-weight:900; font-size: clamp(22px,2.1vw,30px); margin:0 0 12px; color:#242033;}
.pane-content p{ color:#6f6a7e; margin:0 0 18px; }

/* bilgi pill’leri */
.info-pills{ list-style:none; padding:0; margin:0 0 18px; display:flex; flex-wrap:wrap; gap:10px; }
.info-pills li{
  background:#f3efff; color:#6b4ea5; border:1px solid #e6dbff;
  border-radius:999px; padding:10px 14px; font-weight:700; font-size:13px;
}
.info-pills .solid{
  background: var(--soft-grad); color:#fff; border-color:transparent;
  box-shadow: 0 12px 26px rgba(120,95,255,.35);
}

/* CTA */
.cta{
  display:inline-block; padding:12px 22px; border-radius:14px; color:#fff; text-decoration:none;
  font-weight:900; letter-spacing:.2px; background: var(--soft-grad);
  box-shadow: 0 14px 30px rgba(120,95,255,.38);
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.cta:hover{
  transform: translateY(-2px);
  box-shadow: 0 20px 38px rgba(120,95,255,.45);
  filter: brightness(1.03);
}
/* 1) Sağ kartın çok kısalıp uzamasını engelle (masaüstü) */
@media (min-width: 992px){
  .blog-card{ min-height: 460px; } /* 420–520 arası deneyebilirsin */
}

/* 2) Grid oran yerine sabit bir sol kolon ver → her sekmede aynı hiza */
@media (min-width: 992px){
  .pane{
    display: grid;
    grid-template-columns: 240px 1fr;  /* SABİT sol kolon */
    align-items: center;
    gap: 28px;
  }
}

/* 3) Görsel için alanı baştan rezerve et (zıplama biter) */
.pane-visual{
  width: 240px;
  min-width: 240px;
  height: 240px;          /* kutu alanı sabit */
  display: grid;
  place-items: center;
}

.pane-visual img{
  width: 220px;           /* gerçek pikseline yakın bir değer */
  height: 220px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 12px 26px rgba(155,93,229,.25));
  transition: transform .35s ease, filter .35s ease;
}

/* 4) Geçişte layout’u etkilemeyen animasyon kullan (sadece opacity) */
.tab-pane{ display: none; }
.tab-pane.active{
  display: block;
  animation: fadeInOpacity .18s ease;  /* translateY kaldırıldı */
}
@keyframes fadeInOpacity { from { opacity: 0 } to { opacity: 1 } }