/* =========================================================

   Fenex Site Sayfa Stili

   ---------------------------------------------------------

   Bu dosya Fenex Otomatik Sayfa Oluşturucu tarafından üretildi.



   Teknik Bilgi:

   - Mod          : SITE (Frontend)

   - Sayfa Slug   : index

   - PHP (View)   : (örn.) /view/index.php veya ilgili sayfa

   - CSS          : /assets/css/pages/index.css

   - JS           : /assets/js/page/index.js

   - Oluşturulma  : 2025-11-28 19:35:00



   Kullandığı Ana Yapılar:

   - .fenex-auto-page-wrapper  → ana sayfa container'ı

   - .fenex-auto-icon          → ana ikon balonu

   - .fenex-auto-badge         → durum etiketi (Yapım Aşamasında vb.)

   - .fenex-auto-progress      → ilerleme barı dış kabuk

   - .fenex-auto-progress-bar  → JS ile doldurulan kısım

   - .fenex-meta-*             → bilgi / debug alanı

   - .fenex-feature-icon       → küçük özellik kartı ikonları



   Not:

   - Bu dosyayı dilediğiniz gibi düzenleyebilirsiniz.

   - Otomatik oluşturucu yeniden çalıştırılırsa üzerine yazılabilir.

   ========================================================= */



.fenex-auto-page-wrapper {

  min-height: 60vh;

  display: flex;

  align-items: center;

}



/* Ana ikon balonu */

.fenex-auto-icon {

  width: 72px;

  height: 72px;

  border-radius: 50%;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  background: linear-gradient(135deg, #ffe08a, #ffb300);

}



/* Badge / durum etiketi */

.fenex-auto-badge {

  display: inline-flex;

  align-items: center;

  padding: 4px 10px;

  border-radius: 999px;

  font-size: 12px;

  font-weight: 600;

  background: rgba(43, 79, 255, 0.08);

  color: #2b4fff;

}



.fenex-auto-badge .dot {

  width: 8px;

  height: 8px;

  border-radius: 50%;

  margin-right: 6px;

  background: #2b4fff;

  box-shadow: 0 0 0 0 rgba(43, 79, 255, 0.5);

  animation: fenex-pulse 1.5s infinite;

}



/* İlerleme barı (Fenex kart içi versiyon) */

.fenex-auto-progress {

  height: 8px;

  border-radius: 999px;

  background: rgba(0, 0, 0, 0.04);

  overflow: hidden;

}



.fenex-auto-progress-bar {

  height: 100%;

  width: 10%;

  border-radius: inherit;

  background: linear-gradient(90deg, #ffb300, #ff7a00);

}



/* Meta / debug alanı */

.fenex-meta-label {

  font-size: 12px;

  text-transform: uppercase;

  letter-spacing: .06em;

  color: #6c757d;

  font-weight: 600;

}



.fenex-meta-value code {

  font-size: 13px;

}



/* Küçük özellik kartlarındaki ikonlar */

.fenex-feature-icon {

  width: 32px;

  height: 32px;

  border-radius: 999px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  background: rgba(43, 79, 255, 0.06);

  font-size: 18px;

}



/* Fenex özel animasyonları */

@keyframes fenex-spin {

  0%   { transform: rotate(0deg); }

  100% { transform: rotate(360deg); }

}



@keyframes fenex-pulse {

  0%   { box-shadow: 0 0 0 0 rgba(43, 79, 255, 0.5); }

  70%  { box-shadow: 0 0 0 10px rgba(43, 79, 255, 0); }

  100% { box-shadow: 0 0 0 0 rgba(43, 79, 255, 0); }

}



/* =========================================

   Eski / Genel "auto-page-*" Yapısı

   (Mevcut HTML ile geri uyumluluk için bırakıldı)

   ========================================= */



/* index için genel auto-page CSS */



/* Küçük ekranlar */

@media (max-width: 767px) {

  .auto-page-wrapper {

    max-width: 98vw;

    padding: 1.3em 1em 2em 1em;

    font-size: 1em;

  }

}



/* Tablet / orta ekranlar */

@media (min-width: 768px) and (max-width: 1024px) {

  .auto-page-wrapper {

    max-width: 680px;

    padding: 2em 2em 2em 2em;

    font-size: 1.08em;

  }

}



/* Mevcut animasyon keyframeleri (auto-page yapısı için) */

@keyframes progressPulse {

  0%   { width: 40%; }

  100% { width: 80%; }

}



@keyframes swing {

  20% { transform: rotate3d(0,0,1,15deg); }

  40% { transform: rotate3d(0,0,1,-10deg); }

  60% { transform: rotate3d(0,0,1,5deg); }

  80% { transform: rotate3d(0,0,1,-5deg); }

  100% { transform: rotate3d(0,0,1,0deg); }

}



@keyframes fadeInDown {

  0% {

    opacity: 0;

    transform: translate3d(0,-10px,0);

  }

  100% {

    opacity: 1;

    transform: translate3d(0,0,0);

  }

}