/* ═══════════════════════════════════════════════════════════════





   GLOMAX FIX CSS — Sadece eksik/bozuk şeyleri düzeltir





   app.css zaten kapsamlı layout CSS içeriyor.





   Bu dosya sadece app.css'de eksik olan şeyleri ekler.





═══════════════════════════════════════════════════════════════ */











/* ── 1. SPACE ORBS — Animasyon optimizasyonu ── */





.space-orbs {





  position: fixed;





  inset: 0;





  z-index: 0;





  pointer-events: none;





  overflow: hidden;





}











.space-orb {





  position: absolute;





  border-radius: 50%;





  filter: blur(80px);





  opacity: 0.12;





  will-change: transform;





  pointer-events: none;





}











[data-theme="dark"] .space-orb {





  opacity: 0.08;





}











.space-orb:nth-child(1) {





  width: 600px; height: 600px;





  background: radial-gradient(circle, #6366f1, transparent);





  top: -200px; left: -100px;





  animation: orbFloat1 20s ease-in-out infinite;





}





.space-orb:nth-child(2) {





  width: 500px; height: 500px;





  background: radial-gradient(circle, #8b5cf6, transparent);





  top: 30%; right: -150px;





  animation: orbFloat2 25s ease-in-out infinite;





}





.space-orb:nth-child(3) {





  width: 400px; height: 400px;





  background: radial-gradient(circle, #06b6d4, transparent);





  bottom: -100px; left: 20%;





  animation: orbFloat3 18s ease-in-out infinite;





}





.space-orb:nth-child(4) {





  width: 350px; height: 350px;





  background: radial-gradient(circle, #10b981, transparent);





  bottom: 20%; right: 10%;





  animation: orbFloat4 22s ease-in-out infinite;





}











@keyframes orbFloat1 {





  0%, 100% { transform: translate(0, 0) scale(1); }





  33%       { transform: translate(40px, 30px) scale(1.05); }





  66%       { transform: translate(-20px, 50px) scale(0.95); }





}





@keyframes orbFloat2 {





  0%, 100% { transform: translate(0, 0) scale(1); }





  33%       { transform: translate(-50px, 40px) scale(1.08); }





  66%       { transform: translate(30px, -30px) scale(0.92); }





}





@keyframes orbFloat3 {





  0%, 100% { transform: translate(0, 0) scale(1); }





  50%       { transform: translate(60px, -40px) scale(1.1); }





}





@keyframes orbFloat4 {





  0%, 100% { transform: translate(0, 0) scale(1); }





  40%       { transform: translate(-40px, 30px) scale(0.9); }





  80%       { transform: translate(20px, -20px) scale(1.05); }





}











/* Mobilde orb'ları küçült */





@media (max-width: 768px) {





  .space-orb:nth-child(1) { width: 300px; height: 300px; }





  .space-orb:nth-child(2) { width: 250px; height: 250px; }





  .space-orb:nth-child(3) { width: 200px; height: 200px; }





  .space-orb:nth-child(4) { width: 180px; height: 180px; }





  .space-orb { opacity: 0.06; filter: blur(60px); }





}











/* Düşük güç modunda animasyonu durdur */





@media (prefers-reduced-motion: reduce) {





  .space-orb { animation: none; }





}











/* ── 2. SIDEBAR OVERLAY — show class desteği ── */





.sidebar-overlay.show {





  display: block;





  opacity: 1;





  pointer-events: auto;





}











/* ── 3. MOBİL — iOS zoom önleme ── */





@media (max-width: 768px) {





  input[type="text"],





  input[type="email"],





  input[type="password"],





  input[type="search"],





  textarea,





  select {





    font-size: 16px !important;





  }





}











/* ── 4. TAŞMA ÖNLEMELERİ ── */





img, video, iframe, embed, object {





  max-width: 100%;





}











pre {





  max-width: 100%;





  overflow-x: auto;





}











/* ── 5. FILTER BAR MOBİL ── */





@media (max-width: 768px) {





  .filter-bar {





    overflow-x: auto;





    flex-wrap: nowrap;





    padding-bottom: 4px;





    -webkit-overflow-scrolling: touch;





  }





  .filter-btn {





    flex-shrink: 0;





    white-space: nowrap;





  }





}











/* ── 6. CARD GRID MOBİL ── */





@media (max-width: 768px) {





  .cards-grid, .grid-2, .grid-3, .grid-4 {





    grid-template-columns: 1fr !important;





  }





}











/* ── 7. MODELS GRID ── */





.models-grid {





  display: grid;





  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));





  gap: 14px;





}





@media (max-width: 768px) {





  .models-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }





}





@media (max-width: 480px) {





  .models-grid { grid-template-columns: 1fr; }





}











/* ── 8. MUSIC-GEN ── */





@media (max-width: 768px) {





  .form-row { grid-template-columns: 1fr !important; }





  .genre-grid { grid-template-columns: repeat(3, 1fr) !important; }





}





@media (max-width: 480px) {





  .genre-grid { grid-template-columns: repeat(2, 1fr) !important; }





}











/* ── 9. CONTACT LINKS MOBİL ── */





@media (max-width: 480px) {





  .contact-links { flex-direction: column; }





  .contact-link { justify-content: center; }





}











/* ── 10. SB-MORE-POPUP MOBİL ── */





@media (max-width: 768px) {





  .sb-more-popup {





    position: fixed !important;





    left: 8px !important;





    right: 8px !important;





    bottom: 80px !important;





    top: auto !important;





    max-width: calc(100vw - 16px) !important;





    min-width: 0 !important;





    width: auto !important;





    max-height: 65vh !important;





    border-radius: 20px !important;





    z-index: 99999 !important;





    overflow-y: auto !important;





  }





}











/* ── 11. COUNTRY BADGE ── */





.sidebar-logo-wrap, .mobile-logo-wrap {





  position: relative;





  display: inline-flex;





  align-items: center;





}





.sidebar-country-badge, .mobile-country-badge {





  position: absolute;





  top: -7px;





  right: -20px;





  font-size: 9px;





  font-weight: 700;





  padding: 1px 3px;





  border-radius: 3px;





  color: #fff;





  line-height: 1.2;





  pointer-events: none;





}











/* ── 12. PRINT ── */





@media print {





  .sidebar, .sidebar-overlay, .mobile-page-header,





  .space-orbs, .topbar, .inner-topbar {





    display: none !important;





  }





  .main-content, .page-main {





    height: auto !important;





    overflow: visible !important;





  }





}









/* ══════════════════════════════════════════════════════════

   GÖNDER / DURDUR BUTONU — Şeffaf mavi, yazınca aktif mavi

══════════════════════════════════════════════════════════ */



.btn-send {

  width: 36px !important;

  height: 36px !important;

  border-radius: 10px !important;

  border: 1.5px solid rgba(59,130,246,0.3) !important;

  background: rgba(59,130,246,0.08) !important;

  color: rgba(59,130,246,0.45) !important;

  cursor: not-allowed !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.15s ease !important;

  flex-shrink: 0 !important;

  opacity: 1 !important;

}



.btn-send:disabled {

  background: rgba(59,130,246,0.06) !important;

  border-color: rgba(59,130,246,0.2) !important;

  color: rgba(59,130,246,0.3) !important;

  cursor: not-allowed !important;

  opacity: 1 !important;

}



.btn-send:not(:disabled) {

  background: #3b82f6 !important;

  border-color: #3b82f6 !important;

  color: #ffffff !important;

  cursor: pointer !important;

  opacity: 1 !important;

}



.btn-send:hover:not(:disabled) {

  background: #2563eb !important;

  border-color: #2563eb !important;

  color: #ffffff !important;

  transform: scale(1.06) !important;

}



.btn-send.btn-stop {

  background: rgba(239,68,68,0.1) !important;

  border-color: rgba(239,68,68,0.45) !important;

  color: #ef4444 !important;

  cursor: pointer !important;

  opacity: 1 !important;

}



.btn-send.btn-stop:hover {

  background: #ef4444 !important;

  border-color: #ef4444 !important;

  color: #ffffff !important;

  transform: scale(1.06) !important;

}



.btn-send svg {

  display: block !important;

  opacity: 1 !important;

  visibility: visible !important;

  pointer-events: none !important;

}



[data-theme="light"] .btn-send:disabled {

  background: rgba(59,130,246,0.05) !important;

  border-color: rgba(59,130,246,0.18) !important;

  color: rgba(59,130,246,0.28) !important;

}



[data-theme="light"] .btn-send:not(:disabled) {

  background: #3b82f6 !important;

  border-color: #3b82f6 !important;

  color: #ffffff !important;

}



/* ══════════════════════════════════════════════════════════

   TÜM CİHAZ UYUMLULUĞU — Desktop / Tablet / Mobil

══════════════════════════════════════════════════════════ */



.app-with-sidebar {

  display: flex !important;

  width: 100% !important;

  min-height: 100dvh !important;

  overflow: hidden !important;

  position: relative !important;

}



.page-main, .main-content, .settings-main, .profile-main,

.pricing-main, .history-main, .explore-main,

.tools-main, .projects-main, .stats-main,

.notifications-main, .favorites-main, .files-main,

.shared-main, .subscription-main, .security-main,

.changelog-main, .prompt-library-main, .models-main,

.help-main, .support-main, .terms-main, .privacy-main,

.code-gen-main, .music-gen-main, .video-gen-main,

.voice-main, .status-main {

  flex: 1 !important;

  overflow-y: auto !important;

  min-width: 0 !important;

  height: 100dvh !important;

  -webkit-overflow-scrolling: touch !important;

}



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

  .sidebar {

    width: 220px !important;

    min-width: 220px !important;

  }

  .settings-layout, .profile-layout, .pricing-layout, .page-layout {

    padding: 28px 16px !important;

  }

}



@media (max-width: 768px) {

  .app-with-sidebar {

    flex-direction: column !important;

  }

  .page-main, .main-content, .settings-main, .profile-main,

  .pricing-main, .history-main, .explore-main,

  .tools-main, .projects-main, .stats-main,

  .notifications-main, .favorites-main, .files-main,

  .shared-main, .subscription-main, .security-main,

  .changelog-main, .prompt-library-main, .models-main,

  .help-main, .support-main, .terms-main, .privacy-main,

  .code-gen-main, .music-gen-main, .video-gen-main,

  .voice-main, .status-main {

    height: auto !important;

    min-height: calc(100dvh - 56px) !important;

    flex: 1 !important;

  }

  .settings-layout, .profile-layout, .pricing-layout, .page-layout {

    padding: 16px 12px 80px !important;

    max-width: 100% !important;

  }

  .card, .settings-section, .profile-section, .pricing-card {

    border-radius: 10px !important;

  }

  .table-responsive { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }

  table { min-width: 500px; }

  .btn-send { width: 38px !important; height: 38px !important; }

  .input-wrapper { padding: 8px 8px 12px !important; }

  .composer-box { border-radius: 14px !important; }

}



@media (max-width: 480px) {

  .composer-tools-left { gap: 2px !important; }

  .btn-tool { min-width: 30px !important; height: 30px !important; padding: 0 5px !important; }

  .btn-tool-label, .btn-deep-think-label, .btn-tone-label, .btn-length-label { display: none !important; }

  .composer-mode-label { display: none !important; }

  .composer-char-count { display: none !important; }

}



@supports (padding-bottom: env(safe-area-inset-bottom)) {

  .input-wrapper { padding-bottom: calc(8px + env(safe-area-inset-bottom)) !important; }

  .mobile-page-header { padding-top: calc(8px + env(safe-area-inset-top)) !important; }

}



/* ── Veri gösterimi yardımcıları ── */

.data-empty { text-align: center; padding: 48px 20px; color: var(--text3); }

.data-empty svg { margin-bottom: 12px; opacity: 0.4; }

.data-empty p { font-size: .875rem; line-height: 1.5; }

.data-loading { display: flex; align-items: center; justify-content: center; padding: 40px; color: var(--text3); gap: 10px; font-size: .875rem; }

.spin { animation: spin 1s linear infinite; }

@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.data-error { background: rgba(239,68,68,.08); border: 1px solid rgba(239,68,68,.2); border-radius: 10px; padding: 14px 16px; color: #ef4444; font-size: .875rem; margin: 16px 0; }

.data-success { background: rgba(16,185,129,.08); border: 1px solid rgba(16,185,129,.2); border-radius: 10px; padding: 14px 16px; color: #10b981; font-size: .875rem; margin: 16px 0; }



/* ── Genel sayfa kartları ── */

.inner-page { max-width: 800px; margin: 0 auto; padding: 40px 20px 80px; }

.inner-page-wide { max-width: 1100px; margin: 0 auto; padding: 32px 20px 80px; }

::placeholder { color: var(--text3) !important; opacity: 0.7; }



/* ══════════════════════════════════════════════════════════

   SAYFA LAYOUT ZORUNLU DÜZELTMELERİ

   pricing.php / settings.php / profile.php gibi sayfalarda

   app-with-sidebar yapısının doğru çalışması için

══════════════════════════════════════════════════════════ */



/* pricing-main doğrudan app-with-sidebar içindeyse */

.app-with-sidebar > .pricing-main,

.app-with-sidebar > .settings-main,

.app-with-sidebar > .profile-main {

  flex: 1 !important;

  overflow-y: auto !important;

  height: 100dvh !important;

  min-width: 0 !important;

  -webkit-overflow-scrolling: touch !important;

  background: var(--bg, var(--main-bg)) !important;

}



/* main-content içindeyse */

.app-with-sidebar .main-content > .pricing-main,

.app-with-sidebar .main-content > .settings-main,

.app-with-sidebar .main-content > .profile-main {

  flex: 1 !important;

  overflow-y: auto !important;

  height: 0 !important;

  min-height: 0 !important;

  -webkit-overflow-scrolling: touch !important;

}



/* Tüm sayfa arkaplanı */

body, html {

  background: var(--bg, var(--main-bg, #050816));

}



[data-theme="dark"] body,

[data-theme="dark"] html {

  background: #050816 !important;

}



[data-theme="light"] body,

[data-theme="light"] html {

  background: #ffffff !important;

}



/* ══════════════════════════════════════════════════════════

   VERİ TABLOSU — Tüm sayfalarda tutarlı görünüm

══════════════════════════════════════════════════════════ */



/* Genel kart stili */

.card, .settings-section, .profile-section {

  background: var(--surface) !important;

  border: 1px solid var(--border) !important;

  border-radius: 14px !important;

  padding: 20px !important;

  margin-bottom: 16px !important;

}



/* Tablo stili */

.data-table {

  width: 100%;

  border-collapse: collapse;

  font-size: .875rem;

}



.data-table th {

  text-align: left;

  padding: 10px 12px;

  color: var(--text3);

  font-weight: 600;

  font-size: .78rem;

  text-transform: uppercase;

  letter-spacing: .04em;

  border-bottom: 1px solid var(--border);

}



.data-table td {

  padding: 12px 12px;

  border-bottom: 1px solid var(--border);

  color: var(--text);

}



.data-table tr:last-child td {

  border-bottom: none;

}



.data-table tr:hover td {

  background: var(--bg-hover, rgba(255,255,255,.04));

}



/* ══════════════════════════════════════════════════════════

   INNER TOPBAR — Tüm sayfalarda tutarlı

══════════════════════════════════════════════════════════ */



.inner-topbar, .topbar {

  flex-shrink: 0 !important;

  position: sticky !important;

  top: 0 !important;

  z-index: 50 !important;

  background: var(--bg, var(--main-bg)) !important;

  border-bottom: 1px solid var(--border) !important;

}



/* ══════════════════════════════════════════════════════════

   SAYFA BAŞLIĞI — Tutarlı h1/p stili

══════════════════════════════════════════════════════════ */



.page-header {

  padding: 28px 28px 0;

  margin-bottom: 24px;

}



.page-header h1 {

  font-size: 1.45rem;

  font-weight: 800;

  color: var(--text);

  margin-bottom: 4px;

}



.page-header p {

  font-size: .875rem;

  color: var(--text2);

}



/* ══════════════════════════════════════════════════════════

   MOBİL UYUMLULUK EK DÜZELTMELER

══════════════════════════════════════════════════════════ */



@media (max-width: 768px) {

  .app-with-sidebar > .pricing-main,

  .app-with-sidebar > .settings-main,

  .app-with-sidebar > .profile-main {

    height: auto !important;

    min-height: calc(100dvh - 56px) !important;

  }



  .page-header {

    padding: 16px 16px 0 !important;

  }



  .card, .settings-section, .profile-section {

    border-radius: 10px !important;

    padding: 14px !important;

  }

}



/* ══════════════════════════════════════════════════════════════════════

   MASTER LAYOUT v3 — Tüm sorunlar kesin çözüm

   Desktop: sidebar sticky, main-content flex:1

   Mobil: body column, mobile-header 56px, içerik scroll

══════════════════════════════════════════════════════════════════════ */



/* ─── DESKTOP (>768px) ─────────────────────────────────────────── */

@media (min-width: 769px) {

  html, body { height: 100% !important; overflow: hidden !important; }



  .app-with-sidebar {

    display: flex !important; flex-direction: row !important;

    width: 100% !important; height: 100dvh !important; overflow: hidden !important;

  }



  /* Sidebar */

  .app-with-sidebar > .sidebar,

  .app-with-sidebar > aside.sidebar {

    flex: 0 0 260px !important; width: 260px !important;

    min-width: 260px !important; max-width: 260px !important;

    height: 100dvh !important; overflow: hidden !important;

    position: sticky !important; top: 0 !important; z-index: 200 !important;

  }

  .app-with-sidebar > .sidebar.collapsed {

    flex: 0 0 60px !important; width: 60px !important;

    min-width: 60px !important; max-width: 60px !important;

  }



  /* mobile-page-header desktop'ta gizli */

  .mobile-page-header, #mobile-page-header { display: none !important; }



  /* main-content */

  .app-with-sidebar > .main-content {

    flex: 1 1 0% !important; min-width: 0 !important; width: 0 !important;

    height: 100dvh !important; display: flex !important; flex-direction: column !important;

    overflow: hidden !important;

  }



  /* Topbar */

  .app-with-sidebar > .main-content > .topbar,

  .app-with-sidebar > .main-content > header.topbar {

    flex: 0 0 auto !important; width: 100% !important;

  }



  /* page-main scroll */

  .app-with-sidebar > .main-content > .page-main {

    flex: 1 1 0% !important; min-height: 0 !important; height: 0 !important;

    overflow-y: auto !important; overflow-x: hidden !important;

    -webkit-overflow-scrolling: touch !important;

  }



  /* profile/settings direkt app-with-sidebar child */

  .app-with-sidebar > .profile-main,

  .app-with-sidebar > .settings-main,

  .app-with-sidebar > .pricing-main {

    flex: 1 1 0% !important; min-height: 0 !important;

    overflow-y: auto !important; height: 0 !important;

  }

}



/* ─── TABLET (769–1024px) ──────────────────────────────────────── */

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

  .app-with-sidebar > .sidebar,

  .app-with-sidebar > aside.sidebar {

    flex: 0 0 220px !important; width: 220px !important;

    min-width: 220px !important; max-width: 220px !important;

  }

  .grid-3, .grid-4, .plans-grid, .pricing-grid {

    grid-template-columns: repeat(2,1fr) !important;

  }

}



/* ─── MOBİL (≤768px) — KESİN ÇÖZÜM ───────────────────────────── */

@media (max-width: 768px) {



  /* 1. html/body tam yükseklik */

  html { height: 100dvh !important; overflow: hidden !important; }

  body {

    height: 100dvh !important; overflow: hidden !important;

    display: flex !important; flex-direction: column !important;

    margin: 0 !important; padding: 0 !important;

  }



  /* 2. app.css 29277 override — tüm inner page body kuralları */

  body:has(.sidebar):has(.profile-main),

  body:has(.sidebar):has(.pricing-main),

  body:has(.sidebar):has(.settings-main),

  body:has(.sidebar):has(.page-main),

  body:has(.sidebar):has(.history-page),

  body:has(.sidebar):has(.help-page),

  body:has(.sidebar):has(.changelog-page),

  body:has(.sidebar):has(.terms-page),

  body:has(.sidebar):has(.privacy-page),

  body:has(.sidebar):has(.support-page),

  body:has(.sidebar):has(.notifications-page),

  body:has(.sidebar):has(.stats-page),

  body:has(.sidebar):has(.favorites-page),

  body:has(.sidebar):has(.files-page),

  body:has(.sidebar):has(.projects-page),

  body:has(.sidebar):has(.shared-page),

  body:has(.sidebar):has(.explore-page),

  body:has(.sidebar):has(.prompt-library-page),

  body:has(.sidebar):has(.subscription-page),

  body:has(.sidebar):has(.security-page),

  body:has(.sidebar):has(.models-page),

  body:has(.sidebar):has(.status-page),

  body:has(.sidebar):has(.tools-page),

  body:has(.sidebar):has(.voice-page),

  body:has(.sidebar):has(.code-gen-page),

  body:has(.sidebar):has(.music-gen-page),

  body:has(.sidebar):has(.video-gen-page),

  body:has(.sidebar):has(.images-page),

  body:has(.sidebar):has(.pricing-page),

  body:has(.sidebar):has(.settings-page),

  body:has(.sidebar):has(.profile-page) {

    height: 100dvh !important;

    overflow: hidden !important;

    display: flex !important;

    flex-direction: column !important;

  }



  /* 3. app-with-sidebar column flex */

  .app-with-sidebar {

    display: flex !important; flex-direction: column !important;

    flex: 1 1 0% !important; min-height: 0 !important;

    height: 0 !important; width: 100% !important;

    overflow: hidden !important;

  }



  /* 4. mobile-page-header: FLOW İÇİNDE, relative */

  .mobile-page-header, #mobile-page-header,

  .app-with-sidebar .mobile-page-header {

    display: flex !important;

    position: relative !important;

    top: auto !important; left: auto !important; right: auto !important;

    flex-shrink: 0 !important; width: 100% !important;

    height: 56px !important; min-height: 56px !important; max-height: 56px !important;

    align-items: center !important; justify-content: space-between !important;

    padding: 0 14px !important; box-sizing: border-box !important;

    z-index: 10000 !important;

  }



  /* 5. Sidebar: fixed, flow dışı */

  .app-with-sidebar > .sidebar,

  .app-with-sidebar > aside.sidebar,

  body:has(.sidebar):has(.page-main) .sidebar,

  body:has(.sidebar):has(.profile-main) .sidebar,

  body:has(.sidebar):has(.settings-main) .sidebar,

  body:has(.sidebar):has(.pricing-main) .sidebar,

  body:has(.sidebar):has(.history-page) .sidebar,

  body:has(.sidebar):has(.explore-page) .sidebar,

  body:has(.sidebar):has(.favorites-page) .sidebar,

  body:has(.sidebar):has(.files-page) .sidebar,

  body:has(.sidebar):has(.projects-page) .sidebar,

  body:has(.sidebar):has(.shared-page) .sidebar,

  body:has(.sidebar):has(.notifications-page) .sidebar,

  body:has(.sidebar):has(.stats-page) .sidebar,

  body:has(.sidebar):has(.settings-page) .sidebar,

  body:has(.sidebar):has(.profile-page) .sidebar,

  body:has(.sidebar):has(.help-page) .sidebar,

  body:has(.sidebar):has(.support-page) .sidebar,

  body:has(.sidebar):has(.changelog-page) .sidebar,

  body:has(.sidebar):has(.terms-page) .sidebar,

  body:has(.sidebar):has(.privacy-page) .sidebar,

  body:has(.sidebar):has(.tools-page) .sidebar,

  body:has(.sidebar):has(.voice-page) .sidebar,

  body:has(.sidebar):has(.models-page) .sidebar,

  body:has(.sidebar):has(.prompt-library-page) .sidebar,

  body:has(.sidebar):has(.subscription-page) .sidebar,

  body:has(.sidebar):has(.security-page) .sidebar,

  body:has(.sidebar):has(.pricing-page) .sidebar {

    position: fixed !important;

    top: 0 !important; left: 0 !important;

    width: 280px !important; min-width: 280px !important;

    height: 100dvh !important; flex: none !important;

    z-index: 9999 !important; align-self: auto !important;

    transform: translateX(-100%) !important;

    transition: transform 0.28s ease !important;

  }



  body.sidebar-open .sidebar,

  .sidebar.open { transform: translateX(0) !important; }



  /* 6. main-content: flex:1 column */

  .app-with-sidebar > .main-content {

    flex: 1 1 0% !important; min-height: 0 !important;

    height: 0 !important; width: 100% !important;

    display: flex !important; flex-direction: column !important;

    overflow: hidden !important;

  }



  /* 7. Desktop topbar gizli */

  .app-with-sidebar > .main-content > .topbar,

  .app-with-sidebar > .main-content > header.topbar,

  #topbar { display: none !important; }



  /* 8. page-main SCROLL */

  .app-with-sidebar > .main-content > .page-main,

  .app-with-sidebar > .main-content > main.page-main {

    display: block !important;

    flex: 1 1 0% !important; min-height: 0 !important; height: 0 !important;

    width: 100% !important; overflow-y: auto !important; overflow-x: hidden !important;

    -webkit-overflow-scrolling: touch !important;

    visibility: visible !important; opacity: 1 !important;

  }



  /* 9. profile/settings/pricing — direkt app-with-sidebar child (main-content YOK) */

  .app-with-sidebar > .profile-main,

  .app-with-sidebar > .settings-main,

  .app-with-sidebar > .pricing-main {

    display: block !important;

    flex: 1 1 0% !important; min-height: 0 !important; height: 0 !important;

    width: 100% !important; overflow-y: auto !important; overflow-x: hidden !important;

    -webkit-overflow-scrolling: touch !important;

  }



  /* 10. Overlay — opacity/display/pointer-events JS tarafından kontrol edilir */

  .sidebar-overlay, #sidebar-overlay {

    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;

    position: fixed !important; inset: 0 !important;

    background: rgba(0,0,0,0.5) !important;

    z-index: 9998 !important;

    transition: opacity 0.28s ease !important;

  }

  /* overlay JS tarafından kontrol edilir - CSS class kuralı kaldırıldı */



  /* 11. mph içerik */

  .mph-left  { display: flex !important; align-items: center !important; gap: 4px !important; flex-shrink: 0 !important; }

  .mph-center { flex: 1 !important; display: flex !important; align-items: center !important; justify-content: center !important; }

  .mph-center span, #mobile-page-title span { display: block !important; }

  .mph-right { display: flex !important; align-items: center !important; gap: 2px !important; flex-shrink: 0 !important; }



  /* 12. Sayfa içi layout */

  .pricing-layout, .settings-layout, .profile-layout,

  .page-layout, .explore-layout, .page-wrap,

  .history-layout, .notif-layout, .stats-layout {

    padding: 16px 14px 80px !important; max-width: 100% !important;

  }



  /* 13. Grid tek sütun */

  .grid-2, .grid-3, .grid-4, .cards-grid, .models-grid,

  .ai-tools-grid, .plans-grid, .pricing-grid, .prompt-grid,

  .tools-grid { grid-template-columns: 1fr !important; }



  /* 14. Input iOS zoom fix */

  input, textarea, select { font-size: 16px !important; }



  /* 15. Tablo scroll */

  .table-wrap, .table-responsive { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }

}



/* ─── KÜÇÜK MOBİL (≤480px) ─────────────────────────────────────── */

@media (max-width: 480px) {

  .mobile-page-header, #mobile-page-header { padding: 0 10px !important; }

  h1 { font-size: 1.15rem !important; }

  .btn-tool-label, .btn-deep-think-label,

  .btn-tone-label, .btn-length-label { display: none !important; }

}



/* ─── iPhone Notch ──────────────────────────────────────────────── */

@supports (padding-bottom: env(safe-area-inset-bottom)) {

  @media (max-width: 768px) {

    .mobile-page-header, #mobile-page-header {

      padding-top: env(safe-area-inset-top) !important;

      height: calc(56px + env(safe-area-inset-top)) !important;

      min-height: calc(56px + env(safe-area-inset-top)) !important;

    }

    .app-with-sidebar > .main-content > .page-main,

    .app-with-sidebar > .profile-main,

    .app-with-sidebar > .settings-main,

    .app-with-sidebar > .pricing-main {

      padding-bottom: calc(20px + env(safe-area-inset-bottom)) !important;

    }

  }

}



/* ─── Renk Sistemi ──────────────────────────────────────────────── */

[data-theme="dark"]  .app-with-sidebar > .main-content { background: #050816 !important; }

[data-theme="light"] .app-with-sidebar > .main-content { background: #ffffff !important; }

[data-theme="dark"]  .app-with-sidebar > .main-content > .page-main,

[data-theme="dark"]  .app-with-sidebar > .profile-main,

[data-theme="dark"]  .app-with-sidebar > .settings-main,

[data-theme="dark"]  .app-with-sidebar > .pricing-main { background: #050816 !important; }

[data-theme="light"] .app-with-sidebar > .main-content > .page-main,

[data-theme="light"] .app-with-sidebar > .profile-main,

[data-theme="light"] .app-with-sidebar > .settings-main,

[data-theme="light"] .app-with-sidebar > .pricing-main { background: #ffffff !important; }

[data-theme="dark"]  .mobile-page-header { background: #0b142d !important; border-color: rgba(120,120,120,.15) !important; }

[data-theme="light"] .mobile-page-header { background: #f2f2f2 !important; border-color: rgba(0,0,0,.1) !important; }

[data-theme="dark"]  .topbar { background: #050816 !important; }

[data-theme="light"] .topbar { background: #ffffff !important; }



/* ─── Arka plan animasyonları kaldır ───────────────────────────── */

.space-orbs, .space-orb, #gx-ambient, #gx-canvas-bg, .gx-ambient-orb { display: none !important; }



/* ─── Overlay blur tamamen kaldır ─────────────────────────────── */

.sidebar-overlay, #sidebar-overlay {

  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;

  filter: none !important;

}



/* ══════════════════════════════════════════════════════════

   COMPOSER-BOX & INPUT-FOOTER — Sadece ana sayfa (index.php)

   composer biraz yukarı, alt yazı görünür

══════════════════════════════════════════════════════════ */



/* Composer wrapper alt padding azalt — yukarı taşır */

.input-wrapper {

  padding-bottom: 4px !important;

}



/* input-footer her zaman görünür */

.input-footer {

  display: flex !important;

  justify-content: center !important;

  align-items: center !important;

  padding: 4px 4px 8px !important;

  font-size: .72rem !important;

  color: var(--text4) !important;

  visibility: visible !important;

  opacity: 1 !important;

  min-height: 24px !important;

}



.input-footer p {

  margin: 0 !important;

  text-align: center !important;

  color: var(--text4) !important;

}



/* Mobil: composer daha kompakt */

@media (max-width: 768px) {

  .input-wrapper {

    padding: 6px 10px 4px !important;

  }

  .input-footer {

    padding: 2px 4px 6px !important;

    font-size: .68rem !important;

  }

  /* Composer box tam genişlik */

  .composer-box {

    border-radius: 14px !important;

  }

}



/* ══════════════════════════════════════════════════════════

   MOBİL HEADER — tıklanabilir, blur yok

══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {



  /* Header tüm elementleri tıklanabilir */

  .mobile-page-header,

  #mobile-page-header {

    pointer-events: auto !important;

    cursor: default !important;

    user-select: none !important;

  }



  .mobile-page-header *,

  #mobile-page-header * {

    pointer-events: auto !important;

  }



  /* Hamburger butonu kesinlikle tıklanabilir */

  .mobile-hamburger,

  .mobile-header-btn,

  .mobile-back-btn {

    pointer-events: auto !important;

    cursor: pointer !important;

    -webkit-tap-highlight-color: rgba(0,0,0,0.1) !important;

    touch-action: manipulation !important;

  }



  /* Overlay header'ın üstünde olmasın */

  .sidebar-overlay,

  #sidebar-overlay {

    z-index: 9998 !important;

  }



  /* Header her şeyin üstünde */

  .mobile-page-header,

  #mobile-page-header {

    z-index: 10000 !important;

    position: relative !important;

  }

}



/* ── Composer yukarı + alt yazı görünür ── */

.chat-main .input-wrapper,

.input-wrapper {

  padding-bottom: 2px !important;

  margin-bottom: 0 !important;

}



.input-footer {

  display: flex !important;

  justify-content: center !important;

  align-items: center !important;

  padding: 3px 8px 10px !important;

  font-size: .7rem !important;

  color: var(--text4) !important;

  visibility: visible !important;

  opacity: 1 !important;

}



.input-footer p {

  margin: 0 !important;

  text-align: center !important;

  color: var(--text4) !important;

  font-size: .7rem !important;

}



/* Composer box hafif yukarı — messages-container bottom padding azalt */

.messages-container {

  padding-bottom: 12px !important;

}



@media (max-width: 768px) {

  .input-wrapper {

    padding: 4px 8px 2px !important;

  }

  .input-footer {

    padding: 2px 8px 8px !important;

    font-size: .68rem !important;

  }

  .composer-box {

    border-radius: 14px !important;

  }

}



/* ══ OVERLAY KESİN FIX — JS inline style çalışsın ══ */

/* show/active class bazlı kuralları iptal et — sadece JS kontrol eder */

.sidebar-overlay.show,

.sidebar-overlay.active,

#sidebar-overlay.show,

#sidebar-overlay.active,

body.sidebar-open .sidebar-overlay,

body.sidebar-open #sidebar-overlay {

  display: block;

  /* !important YOK — JS style.display override edebilir */

}



/* Temel overlay — her zaman display:none ile başla */

.sidebar-overlay,

#sidebar-overlay {

  display: none;

  position: fixed !important;

  inset: 0 !important;

  background: rgba(0,0,0,0.5) !important;

  z-index: 9998 !important;

  backdrop-filter: none !important;

  -webkit-backdrop-filter: none !important;

  transition: opacity 0.28s ease !important;

  cursor: pointer !important;

}



/* ══════════════════════════════════════════════════════════

   TEMA KONTRAST & GÖRÜNÜRLÜk FIX — Dark/Light her ikisi

   Siyah üstüne siyah, beyaz üstüne beyaz sorunları giderir

══════════════════════════════════════════════════════════ */



/* ── Input & Textarea ── */

input, textarea, select {

  color: var(--text) !important;

  background-color: var(--input-bg, var(--surface)) !important;

  border-color: var(--border-control, var(--border)) !important;

}

input::placeholder, textarea::placeholder {

  color: var(--text3) !important;

  opacity: 1 !important;

}

input:focus, textarea:focus, select:focus {

  outline: none !important;

  border-color: var(--accent, #484848) !important;

  box-shadow: 0 0 0 2px rgba(var(--accent-rgb, 124,58,237), 0.15) !important;

}



/* ── Dropdown / Select ── */

select option {

  background: var(--surface, #1a1a2e) !important;

  color: var(--text) !important;

}



/* ── Butonlar — görünmez buton sorunu ── */

button:not([class]),

.btn, .button {

  color: var(--text) !important;

}

.btn-primary, .btn-accent, [class*="btn-primary"] {

  background: var(--accent, #484848) !important;

  color: #fff !important;

  border-color: transparent !important;

}

.btn-secondary, [class*="btn-secondary"] {

  background: var(--surface) !important;

  color: var(--text) !important;

  border-color: var(--border) !important;

}



/* ── Kartlar ── */

.card, [class*="-card"], .panel {

  background: var(--card, var(--surface)) !important;

  color: var(--text) !important;

  border-color: var(--border) !important;

}



/* ── Tablo ── */

table { border-collapse: collapse; width: 100%; }

th, td {

  color: var(--text) !important;

  border-color: var(--border) !important;

  background: transparent !important;

}

th { background: var(--surface2) !important; font-weight: 600; }

tr:hover td { background: var(--bg-hover) !important; }



/* ── Modal / Dialog ── */

.modal, .modal-content, .dialog, [class*="modal-"] {

  background: var(--surface) !important;

  color: var(--text) !important;

  border-color: var(--border) !important;

}

.modal-header, .modal-footer {

  border-color: var(--border) !important;

  background: var(--surface2) !important;

}



/* ── Tooltip ── */

[data-tooltip]::after,

.tooltip, [class*="tooltip"] {

  background: var(--surface) !important;

  color: var(--text) !important;

  border: 1px solid var(--border) !important;

}



/* ── Dropdown menü ── */

.dropdown-menu, .dropdown-content, [class*="dropdown-"] {

  background: var(--surface) !important;

  border: 1px solid var(--border) !important;

  color: var(--text) !important;

}

.dropdown-item, [class*="dropdown-item"] {

  color: var(--text2) !important;

}

.dropdown-item:hover, [class*="dropdown-item"]:hover {

  background: var(--bg-hover) !important;

  color: var(--text) !important;

}



/* ── Badge / Chip ── */

.badge, [class*="-badge"] {

  color: var(--text) !important;

}



/* ── Link renkleri ── */

a:not([class]) {

  color: var(--accent, #484848);

}

a:not([class]):hover {

  opacity: 0.8;

}



/* ── Scrollbar — her iki temada ── */

::-webkit-scrollbar { width: 5px; height: 5px; }

::-webkit-scrollbar-track { background: transparent; }

::-webkit-scrollbar-thumb {

  background: var(--border2, rgba(120,120,120,.3));

  border-radius: 3px;

}

::-webkit-scrollbar-thumb:hover {

  background: var(--text3, #808080);

}



/* ── Light tema özel düzeltmeler ── */

[data-theme="light"] {

  /* Görünmez ikonlar */

  --icon-color: #333333;

}

[data-theme="light"] svg[stroke="currentColor"] {

  stroke: currentColor;

}

[data-theme="light"] .btn-icon,

[data-theme="light"] button.btn-icon {

  color: #333333 !important;

}

[data-theme="light"] .btn-icon:hover {

  background: rgba(0,0,0,.06) !important;

  color: #111111 !important;

}

[data-theme="light"] .topbar,

[data-theme="light"] header.topbar {

  background: #ffffff !important;

  border-bottom-color: rgba(0,0,0,.08) !important;

}

[data-theme="light"] .sidebar {

  background: #f9f9f9 !important;

  border-right-color: rgba(0,0,0,.08) !important;

}

[data-theme="light"] .sidebar-item,

[data-theme="light"] .sb-item {

  color: #333333 !important;

}

[data-theme="light"] .sidebar-item:hover,

[data-theme="light"] .sb-item:hover {

  background: rgba(0,0,0,.05) !important;

  color: #111111 !important;

}

[data-theme="light"] .sidebar-item.active,

[data-theme="light"] .sb-item.active {

  background: rgba(0,0,0,.08) !important;

  color: #111111 !important;

}

/* Light: kod bloğu */

[data-theme="light"] pre,

[data-theme="light"] .msg-bubble pre {

  background: #f4f4f4 !important;

}

[data-theme="light"] code:not(pre code) {

  background: rgba(0,0,0,.06) !important;

  color: #c7254e !important;

}



/* ── Dark tema özel düzeltmeler ── */

[data-theme="dark"] .btn-icon {

  color: var(--text2, #b0b0b0) !important;

}

[data-theme="dark"] .btn-icon:hover {

  background: rgba(255,255,255,.06) !important;

  color: var(--text, #ececec) !important;

}

[data-theme="dark"] input,

[data-theme="dark"] textarea,

[data-theme="dark"] select {

  color: #ececec !important;

  background: rgba(30,30,30,.85) !important;

}

[data-theme="dark"] input::placeholder,

[data-theme="dark"] textarea::placeholder {

  color: #606060 !important;

}



/* ── Topbar site adı linki ── */

.tb-site-name {

  color: var(--text) !important;

  text-decoration: none !important;

  font-weight: 700 !important;

  font-size: 15px !important;

  letter-spacing: -.02em !important;

  transition: opacity .15s !important;

}

.tb-site-name:hover { opacity: .75 !important; }



/* ── Responsive — mobil buton boyutları ── */

@media (max-width: 768px) {

  .btn, .button, button[class*="btn"] {

    font-size: 14px;

  }

  input, textarea, select {

    font-size: 16px !important; /* iOS zoom önleme */

  }

}



/* ═══════════════════════════════════════════════════════════════

   GLOBAL FIX — gx-enhancements.js ve ultra.js body'ye prepend

   ediyor, bunların flex item olmaması için position:fixed

═══════════════════════════════════════════════════════════════ */



/* Network banner — body flex item olmasın */

#gx-network-banner,

.gx-network-banner {

  position: fixed !important;

  top: 0 !important;

  left: 0 !important;

  right: 0 !important;

  z-index: 99999 !important;

  width: 100% !important;

  flex: none !important;

}

#gx-network-banner.hidden,

.gx-network-banner.hidden {

  display: none !important;

}



/* Progress bar — body flex item olmasın */

#gx-progress-bar {

  position: fixed !important;

  top: 0 !important;

  left: 0 !important;

  height: 3px !important;

  z-index: 99999 !important;

  pointer-events: none !important;

  background: linear-gradient(90deg, var(--accent, #484848), #888888) !important;
  flex: none !important;

}

#gx-progress-bar.done {

  opacity: 0 !important;

  transition: opacity 0.3s ease !important;

}



/* ── gx-enhancements.js ve app.js body'ye appendChild ediyor — flex item olmasın ── */

#gx-cmd-overlay, .gx-cmd-overlay,

#gx-fab, .gx-fab,

#gx-scroll-top, .gx-scroll-top,

#gx-read-bar, .gx-read-bar,

#gx-toast-container, .gx-toast-container,

.gx-lightbox, .gx-modal, .gx-overlay,

[id^="gx-"] {

  position: fixed !important;

  flex: none !important;

}

/* Scroll-top butonu */

#gx-scroll-top {

  bottom: 80px !important;

  right: 20px !important;

  z-index: 9990 !important;

}

/* FAB butonu */

#gx-fab {

  bottom: 20px !important;

  right: 20px !important;

  z-index: 9990 !important;

}

/* Read bar */

#gx-read-bar {

  top: 0 !important;

  left: 0 !important;

  height: 3px !important;

  z-index: 9998 !important;

}

/* CMD overlay */

#gx-cmd-overlay {

  inset: 0 !important;

  z-index: 99990 !important;

}



/* ── SIDEBAR CSS DEĞİŞKENİ ── */

:root {

  --sidebar-width: 260px;

}



/* ── LIGHT TEMA GLOBAL FIX ── */

[data-theme="light"] {

  color-scheme: light;

}

[data-theme="light"] input,

[data-theme="light"] textarea,

[data-theme="light"] select {

  color: #111 !important;

  background-color: #fff !important;

  border-color: rgba(0,0,0,.12) !important;

}

[data-theme="light"] input::placeholder,

[data-theme="light"] textarea::placeholder {

  color: #888 !important;

}

[data-theme="light"] .modal,

[data-theme="light"] .modal-content,

[data-theme="light"] .dropdown-menu {

  background: #fff !important;

  color: #111 !important;

  border-color: rgba(0,0,0,.1) !important;

}

[data-theme="light"] table th,

[data-theme="light"] table td {

  color: #111 !important;

  border-color: rgba(0,0,0,.08) !important;

}

[data-theme="light"] .card,

[data-theme="light"] .adm-card {

  background: #fff !important;

  color: #111 !important;

  border-color: rgba(0,0,0,.08) !important;

}

[data-theme="light"] .btn-secondary,

[data-theme="light"] .btn-outline {

  color: #333 !important;

  border-color: rgba(0,0,0,.15) !important;

  background: #f5f5f5 !important;

}

[data-theme="light"] .btn-secondary:hover,

[data-theme="light"] .btn-outline:hover {

  background: #e8e8e8 !important;

}



/* ── DARK TEMA GLOBAL FIX ── */

[data-theme="dark"] {

  color-scheme: dark;

}



/* ── AUTH SAYFALARI FIX ── */

.auth-page body,

body.auth-body {

  display: block !important;

  min-height: 100vh;

}



/* ── GENEL GÖRÜNÜRLÜK FIX ── */

/* Beyaz üzerine beyaz / siyah üzerine siyah önleme */

.btn:not([class*="btn-"]) {

  color: var(--text, #e8e8f0);

}

a {

  color: var(--accent, #484848);

}

a:hover {

  opacity: .85;

}

[data-theme="light"] a {

  color: var(--accent, #222);

}



/* ── HOVER FIX ── */

button:hover,

.btn:hover {

  opacity: .9;

}



/* ── SCROLLBAR GLOBAL ── */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border, rgba(255,255,255,.1)) transparent;
}

/* ═══════════════════════════════════════════════════════════════
   MESAJ BALONU GÖRÜNÜRLÜK FIX (GÖREV 1)
   chatgpt-ui.js appendMessage override → .msg-wrapper + .msg-bubble
   kullanıyor; CSS'de renk/arka plan tanımlı değildi.
═══════════════════════════════════════════════════════════════ */

/* Wrapper — genel */
.msg-wrapper {
  display: flex !important;
  width: 100% !important;
  padding: 6px 0 !important;
  box-sizing: border-box !important;
  background: none !important;
  border: none !important;
}

/* User balonu */
.msg-wrapper.user {
  justify-content: flex-end !important;
}
.msg-wrapper.user .msg-bubble,
.msg-wrapper.user .msg-content,
.msg-bubble.user {
  background: var(--v3-user-bubble, var(--surface2, #444654)) !important;
  color: var(--v3-text, var(--text, #ececf1)) !important;
  border-radius: 18px 18px 4px 18px !important;
  padding: 10px 16px !important;
  max-width: 72% !important;
  word-break: break-word !important;
  font-size: 0.9rem !important;
  line-height: 1.6 !important;
}

/* Asistan balonu */
.msg-wrapper.assistant {
  justify-content: flex-start !important;
}
.msg-wrapper.assistant .msg-bubble,
.msg-wrapper.assistant .msg-content,
.msg-bubble.assistant {
  background: transparent !important;
  color: var(--v3-text, var(--text, #ececf1)) !important;
  padding: 4px 0 !important;
  max-width: 100% !important;
  word-break: break-word !important;
  font-size: 0.9rem !important;
  line-height: 1.7 !important;
}

/* msg-content genel */
.msg-content {
  flex: 1 !important;
  min-width: 0 !important;
  color: var(--v3-text, var(--text, #ececf1)) !important;
}

/* Asistan mesajındaki tüm yazılar görünür olsun */
.msg-wrapper.assistant .msg-content p,
.msg-wrapper.assistant .msg-content li,
.msg-wrapper.assistant .msg-content span,
.msg-wrapper.assistant .msg-content strong,
.msg-wrapper.assistant .msg-content em,
.msg-wrapper.assistant .msg-content h1,
.msg-wrapper.assistant .msg-content h2,
.msg-wrapper.assistant .msg-content h3,
.msg-wrapper.assistant .msg-content h4,
.msg-wrapper.assistant .msg-content h5,
.msg-wrapper.assistant .msg-content h6 {
  color: var(--v3-text, var(--text, #ececf1)) !important;
}

/* Light temada asistan metin rengi */
[data-theme="light"] .msg-wrapper.assistant .msg-content,
[data-theme="light"] .msg-wrapper.assistant .msg-bubble,
[data-theme="light"] .msg-bubble.assistant {
  color: var(--v3-text, #202123) !important;
}
[data-theme="light"] .msg-wrapper.assistant .msg-content p,
[data-theme="light"] .msg-wrapper.assistant .msg-content li,
[data-theme="light"] .msg-wrapper.assistant .msg-content span,
[data-theme="light"] .msg-wrapper.assistant .msg-content strong,
[data-theme="light"] .msg-wrapper.assistant .msg-content em,
[data-theme="light"] .msg-wrapper.assistant .msg-content h1,
[data-theme="light"] .msg-wrapper.assistant .msg-content h2,
[data-theme="light"] .msg-wrapper.assistant .msg-content h3 {
  color: var(--v3-text, #202123) !important;
}

/* Light temada kullanıcı balonu */
[data-theme="light"] .msg-wrapper.user .msg-bubble,
[data-theme="light"] .msg-wrapper.user .msg-content,
[data-theme="light"] .msg-bubble.user {
  background: var(--v3-user-bubble, #f7f7f8) !important;
  color: var(--v3-text, #202123) !important;
}

/* Mesaj meta (zaman, aksiyonlar) */
.msg-meta {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 4px !important;
  font-size: 0.75rem !important;
  color: var(--v3-text2, var(--text2, #8e8ea0)) !important;
  opacity: 0.8 !important;
}

/* Mesaj aksiyon butonları */
.msg-actions {
  display: flex !important;
  gap: 4px !important;
  opacity: 0 !important;
  transition: opacity 0.15s !important;
}
.msg-wrapper:hover .msg-actions {
  opacity: 1 !important;
}
.msg-action-btn {
  background: none !important;
  border: 1px solid var(--v3-border, var(--border, rgba(255,255,255,.1))) !important;
  border-radius: 6px !important;
  color: var(--v3-text2, var(--text2, #8e8ea0)) !important;
  padding: 3px 8px !important;
  font-size: 0.75rem !important;
  cursor: pointer !important;
  transition: background 0.15s !important;
}
.msg-action-btn:hover {
  background: var(--v3-hover, var(--hover, rgba(255,255,255,.07))) !important;
  color: var(--v3-text, var(--text, #ececf1)) !important;
}

/* ═══════════════════════════════════════════════════════════════
   SIDEBAR KULLANICI BİLGİSİ FIX (GÖREV 3)
   index.php'de sidebar'da giriş bilgisi gözükmüyor
═══════════════════════════════════════════════════════════════ */

.sidebar-footer {
  display: flex !important;
  flex-direction: column !important;
  padding: 8px !important;
  border-top: 1px solid var(--v3-border, var(--border, rgba(255,255,255,.1))) !important;
  flex-shrink: 0 !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.sidebar-user-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 10px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: background 0.15s !important;
  color: var(--v3-text, var(--text, #ececf1)) !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.sidebar-user-item:hover {
  background: var(--v3-sidebar-hover, var(--sidebar-hover, rgba(255,255,255,.07))) !important;
}

.user-info {
  flex: 1 !important;
  min-width: 0 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.user-name {
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  color: var(--v3-text, var(--text, #ececf1)) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.user-plan {
  font-size: 0.75rem !important;
  color: var(--v3-text2, var(--text2, #8e8ea0)) !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

[data-theme="light"] .user-name {
  color: var(--v3-text, #202123) !important;
}
[data-theme="light"] .user-plan {
  color: var(--v3-text2, #6e6e80) !important;
}
[data-theme="light"] .sidebar-user-item {
  color: var(--v3-text, #202123) !important;
}

.user-avatar {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--v3-accent, var(--accent, #555555)) !important;
  color: #fff !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
}

/* ═══════════════════════════════════════════════════════════════
   CHATGPT TEMA RENKLERİ FIX (GÖREV 2)
   Dark tema: #343541 bazlı
   Light tema: #ffffff bazlı
═══════════════════════════════════════════════════════════════ */

/* Dark tema ChatGPT renk şeması */
[data-theme="dark"],
[data-theme="dark"] body {
  --bg:             #343541 !important;
  --bg2:            #2a2b32 !important;
  --main-bg:        #343541 !important;
  --card:           #444654 !important;
  --sidebar-bg:     #202123 !important;
  --surface:        #343541 !important;
  --surface2:       #444654 !important;
  --surface3:       #565869 !important;
  --border:         #565869 !important;
  --border2:        #565869 !important;
  --hover:          #2a2b32 !important;
  --bg-hover:       #2a2b32 !important;
  --bg-active:      #343541 !important;
  --sidebar-hover:  #2a2b32 !important;
  --sidebar-active: #343541 !important;
  --text:           #ececf1 !important;
  --text2:          #8e8ea0 !important;
  --text3:          #565869 !important;
  --text4:          #444654 !important;
  --accent:         #ffffff !important;
  --accent-color:   #ffffff !important;
  --input-bg:       #40414f !important;
  --bg-elevated:    #444654 !important;
}

/* Light tema ChatGPT renk şeması */
[data-theme="light"],
[data-theme="light"] body {
  --bg:             #ffffff !important;
  --bg2:            #f7f7f8 !important;
  --main-bg:        #ffffff !important;
  --card:           #ffffff !important;
  --sidebar-bg:     #f7f7f8 !important;
  --surface:        #f7f7f8 !important;
  --surface2:       #ececf1 !important;
  --surface3:       #e5e5e5 !important;
  --border:         #e5e5e5 !important;
  --border2:        #e5e5e5 !important;
  --hover:          #ececf1 !important;
  --bg-hover:       #ececf1 !important;
  --bg-active:      #ececf1 !important;
  --sidebar-hover:  #ececf1 !important;
  --sidebar-active: #ececf1 !important;
  --text:           #202123 !important;
  --text2:          #6e6e80 !important;
  --text3:          #9e9ea8 !important;
  --text4:          #b0b0c0 !important;
  --accent:         #0d0d0d !important;
  --accent-color:   #0d0d0d !important;
  --input-bg:       #ffffff !important;
  --bg-elevated:    #ffffff !important;
}

/* Body renk uygula */
body {
  background: var(--bg, #343541) !important;
  color: var(--text, #ececf1) !important;
}

/* Sidebar arka plan */
.sidebar, #sidebar, aside.sidebar {
  background: var(--sidebar-bg, #202123) !important;
}
[data-theme="light"] .sidebar,
[data-theme="light"] #sidebar,
[data-theme="light"] aside.sidebar {
  background: #f7f7f8 !important;
}

/* Input arka plan */
#message-input, .message-input, textarea#message-input {
  background: var(--input-bg, #40414f) !important;
  color: var(--text, #ececf1) !important;
  border-color: var(--border, #565869) !important;
}
[data-theme="light"] #message-input,
[data-theme="light"] .message-input,
[data-theme="light"] textarea#message-input {
  background: #ffffff !important;
  color: #202123 !important;
  border-color: #e5e5e5 !important;
}

/* Chat ana alan */
#main, .main, .chat-main, #messages-wrap {
  background: var(--bg, #343541) !important;
}
[data-theme="light"] #main,
[data-theme="light"] .main,
[data-theme="light"] .chat-main,
[data-theme="light"] #messages-wrap {
  background: #ffffff !important;
}

/* ═══════════════════════════════════════════════════════════════
   SIDEBAR FOOTER — HER ZAMAN GÖRÜNÜR
   chatgpt-ui.css satır 3143: .sidebar.collapsed .sidebar-footer { display:none }
   → bu kuralı sıfırla: collapsed değilken her zaman göster
   index.php'de giriş yapılmışsa kullanıcı bilgisi sidebar altında görünmeli
═══════════════════════════════════════════════════════════════ */

/* sidebar-nav'ın min-height:0 olması footer'ı push etmesini engeller */
.sidebar-nav, .sb-nav, .sidebar .nav-list, .sidebar-conversations {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* sidebar-footer — her zaman altta sabit görünür */
.sidebar-footer {
  display: flex !important;
  flex-direction: column !important;
  flex-shrink: 0 !important;
  width: 100% !important;
  min-height: fit-content !important;
  visibility: visible !important;
  opacity: 1 !important;
  overflow: visible !important;
  padding: 8px !important;
  border-top: 1px solid var(--border, #565869) !important;
  background: var(--sidebar-bg, #202123) !important;
  /* sticky: scroll sırasında bile altta kalsın */
  position: sticky !important;
  bottom: 0 !important;
  z-index: 10 !important;
}

/* Collapsed sidebar'da footer miniaturize — kullanıcı avatarı göster */
.sidebar.collapsed .sidebar-footer {
  display: flex !important;
  padding: 8px 4px !important;
  align-items: center !important;
  justify-content: center !important;
}
.sidebar.collapsed .sidebar-user-item {
  justify-content: center !important;
  padding: 6px !important;
}
.sidebar.collapsed .user-info,
.sidebar.collapsed .user-plan,
.sidebar.collapsed .sb-upgrade-btn span,
.sidebar.collapsed .sb-usage-bar-wrap {
  display: none !important;
}

/* sidebar-user-item görünürlük */
.sidebar-user-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 10px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: background 0.15s !important;
  color: var(--text, #ececf1) !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
}

.user-info {
  flex: 1 !important;
  min-width: 0 !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.user-name {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  color: var(--text, #ececf1) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.user-plan {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  font-size: 0.72rem !important;
  color: var(--text2, #8e8ea0) !important;
}

[data-theme="light"] .sidebar-footer {
  background: #f7f7f8 !important;
  border-top-color: #e5e5e5 !important;
}
[data-theme="light"] .sidebar-user-item {
  color: #202123 !important;
}
[data-theme="light"] .user-name {
  color: #202123 !important;
}
[data-theme="light"] .user-plan {
  color: #6e6e80 !important;
}