@media (max-width: 767px) {
.auto-page-wrapper {
    max-width: 98vw;
    padding: 1.3em 1em 2em 1em;
    font-size: 1em;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
.auto-page-wrapper {
    max-width: 680px;
    padding: 2em 2em 2em 2em;
    font-size: 1.08em;
  }
}

@media (min-width: 1025px) {
/* =======================================================
   Fenex Site Sayfa Stili
   ---------------------------------------------------------
   Bu dosya Fenex Otomatik Sayfa Oluşturucu tarafından üretildi.

   Teknik Bilgi:
   - Mod          : SITE (Frontend)
   - Sayfa Slug   : fenex
   - PHP (View)   : (örn.) /view/fenex.php veya ilgili sayfa
   - CSS          : /assets/css/pages/fenex.css
   - JS           : /assets/js/page/fenex.js
   - Oluşturulma  : 2025-11-28 20:00:12

   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;
}

code {
  color: #009688 !important;
}

/* 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ı)
   ========================================= */

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

/* Küçük ekranlar */
/* Tablet / orta ekranlar */
/* 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);
  }
}
}