@import "tailwindcss";

@custom-variant dark (&:where(.dark, .dark *));



  
    /* === GLOBAL THEME TOKENS === */
    :root {
      --bg-main: #F4F6F4;
      --bg-card: #FFFFFF;
      --bg-sidebar: #FFFFFF;
      --border-color: #C3D0C3;
      --text-primary: #132a13;
      --text-secondary: #4f772d;
      --text-muted: #708c5c;
      --menu-hover-bg: rgba(79, 119, 45, 0.08);
      --menu-active-bg: rgba(79, 119, 45, 0.15);
      --menu-active-color: #4f772d;
    }

    html.dark {
      --bg-main: #030503;
      --bg-card: #050805;
      --bg-sidebar: #132a13;
      --border-color: rgba(49, 87, 44, 0.4);
      --text-primary: #ffffff;
      --text-secondary: #9db87a;
      --text-muted: rgba(156, 163, 175, 1);
      --menu-hover-bg: rgba(37, 40, 44, 0.5);
      --menu-active-bg: rgba(0, 227, 150, 0.1);
      --menu-active-color: #00E396;
    }

    body {
      margin: 0;
      padding: 0;
      min-height: 100vh;
      background: var(--bg-main);
      -webkit-font-smoothing: antialiased;
      font-family: 'Inter', sans-serif;
      transition: background 0.3s ease, color 0.3s ease;
    }

    /* Mobile Bottom Nav Active State */
    .mobile-nav-item {
      transition: color 0.2s ease, transform 0.15s ease;
    }

    .mobile-nav-item.active {
      color: #4f772d !important;
    }

    html.dark .mobile-nav-item.active {
      color: #00E396 !important;
    }

    .mobile-nav-item.active svg {
      transform: scale(1.15);
      filter: drop-shadow(0 0 6px rgba(79, 119, 45, 0.5));
    }

    html.dark .mobile-nav-item.active svg {
      filter: drop-shadow(0 0 6px rgba(0, 227, 150, 0.5));
    }

    .menu-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 16px;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.2s ease;
      color: var(--text-muted);
    }

    .menu-item:hover {
      background: var(--menu-hover-bg);
      color: var(--text-primary);
    }

    .menu-item.active {
      background: var(--menu-active-bg);
      color: var(--menu-active-color);
      border: 1px solid rgba(79, 119, 45, 0.3);
    }

    .tab-section {
      display: none;
      /* Gizli tab'larda layout/paint'i tamamen atla — ~60% render azalması */
      content-visibility: auto;
      contain-intrinsic-size: 0 600px;
    }

    /* Aktif tab — normal render */
    .tab-section:not(.hidden)[style*="block"],
    .tab-section:not(.hidden)[style*="flex"] {
      content-visibility: visible;
      contain-intrinsic-size: auto;
    }

    body.zen-mode aside {
      display: none !important;
    }

    body.zen-mode header {
      display: none !important;
    }

    body.zen-mode .tab-section {
      padding: 0 !important;
    }

    /* Sidebar Menu Item Styling */
    .menu-item {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 12px;
      padding: 12px 16px;
      border-radius: 12px;
      cursor: pointer;
      transition: all 0.2s ease;
      color: var(--text-muted);
    }

    .menu-item:hover {
      background: var(--menu-hover-bg);
      color: var(--text-primary);
    }

    .menu-item.active,
    .menu-item:has(+ .menu-text),
    .menu-item.text-\[\#00E396\] {
      background: var(--menu-active-bg);
      color: var(--menu-active-color);
    }

    /* Menu Text Animation */
    .menu-text {
      transition: opacity 0.2s ease, width 0.2s ease;
    }

    /* Collapsed State Styling */
    aside.sidebar-collapsed {
      padding: 0;
    }

    aside.sidebar-collapsed>div:first-child {
      padding: 0.5rem;
      height: 60px;
      justify-content: center;
    }

    aside.sidebar-collapsed #desktop-sidebar-menu {
      padding: 0.5rem;
      gap: 0.25rem;
    }

    aside.sidebar-collapsed .menu-item,
    aside.sidebar-collapsed .nav-item {
      padding: 0.75rem;
      justify-content: center;
      gap: 0;
      border-radius: 10px;
    }

    aside.sidebar-collapsed .menu-item:hover,
    aside.sidebar-collapsed .nav-item:hover {
      background: var(--menu-hover-bg);
      border: 1px solid var(--border-color);
    }

    aside.sidebar-collapsed .menu-item svg,
    aside.sidebar-collapsed .nav-item svg {
      flex-shrink: 0;
      transition: transform 0.2s ease, color 0.2s ease;
    }

    aside.sidebar-collapsed .menu-item:hover svg,
    aside.sidebar-collapsed .nav-item:hover svg {
      transform: scale(1.1);
      color: #00E396;
    }

    /* Profile Section Collapsed State */
    aside.sidebar-collapsed .sidebar-profile {
      padding: 0.5rem !important;
      border-top: none !important;
      justify-content: center;
    }

    aside.sidebar-collapsed .sidebar-profile>div:not(:first-child) {
      display: none !important;
    }

    aside.sidebar-collapsed .sidebar-profile #sidebar-profile-avatar {
      width: 40px;
      height: 40px;
      flex-shrink: 0;
    }

    aside.sidebar-collapsed .sidebar-profile:hover {
      background: var(--menu-hover-bg) !important;
      border: 1px solid var(--border-color) !important;
    }

    /* Custom Scrollbar - theme-aware */
    .custom-scrollbar::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }

    .custom-scrollbar::-webkit-scrollbar-thumb {
      background: var(--border-color);
      border-radius: 999px;
    }

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

    @keyframes ticker {
      0% {
        transform: translateX(0);
      }

      100% {
        transform: translateX(-50%);
      }
    }

    .animate-ticker {
      display: flex;
      white-space: nowrap;
      animation: ticker 40s linear infinite;
      width: max-content;
    }

    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(20px) scale(0.97);
      }

      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    @keyframes wiggle {


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

      25% {
        transform: rotate(-15deg);
      }

      50% {
        transform: rotate(15deg);
      }

      75% {
        transform: rotate(-15deg);
      }
    }

    .animate-wiggle {
      animation: wiggle 0.4s ease-in-out;
      transform-origin: top center;
    }

    .glass-card {
      background: var(--bg-card);
      backdrop-filter: blur(10px) saturate(180%);
      border: 1px solid var(--border-color);
      border-radius: 12px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
      transition: all 0.3s ease;
    }

    .glass-card:hover {
      border-color: #90a955;
      box-shadow: 0 0 30px rgba(79, 119, 45, 0.1);
    }

    html.dark .glass-card {
      background: rgba(26, 29, 33, 0.6);
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    }

    html.dark .glass-card:hover {
      background: rgba(26, 29, 33, 0.7);
      border-color: rgba(0, 227, 150, 0.4);
      box-shadow: 0 0 30px rgba(0, 227, 150, 0.15);
    }

    /* Clock styles */
    .clock-face {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-main) 100%);
      border: 2px solid var(--border-color);
      position: relative;
      box-shadow: 0 0 20px rgba(79, 119, 45, 0.1), inset 0 0 15px rgba(0, 0, 0, 0.1);
    }

    html.dark .clock-face {
      background: linear-gradient(135deg, rgba(26, 29, 33, 0.8) 0%, rgba(17, 19, 21, 0.9) 100%);
      border: 2px solid rgba(0, 227, 150, 0.3);
      box-shadow: 0 0 20px rgba(0, 227, 150, 0.2), inset 0 0 15px rgba(0, 0, 0, 0.6);
    }

    .clock-center {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 6px;
      height: 6px;
      background: #00E396;
      border-radius: 50%;
      transform: translate(-50%, -50%);
      z-index: 30;
      box-shadow: 0 0 10px rgba(0, 227, 150, 0.8);
    }

    .hour-hand {
      position: absolute;
      bottom: 50%;
      left: 50%;
      width: 3px;
      height: 30px;
      background: var(--text-primary);
      border-radius: 2px;
      transform-origin: bottom;
      z-index: 10;
    }

    .minute-hand {
      position: absolute;
      bottom: 50%;
      left: 50%;
      width: 2px;
      height: 40px;
      background: var(--text-secondary);
      border-radius: 1px;
      transform-origin: bottom;
      z-index: 15;
    }

    .second-hand {
      position: absolute;
      bottom: 50%;
      left: 50%;
      width: 1px;
      height: 45px;
      background: #00E396;
      border-radius: 1px;
      transform-origin: bottom;
      z-index: 20;
      filter: drop-shadow(0 0 4px rgba(0, 227, 150, 0.8));
    }

    /* MAXUIUX SWITCH CSS */
    .switch {
      display: inline-flex;
      cursor: pointer;
      position: relative;
      perspective: 600px;
      perspective-origin: center;
      transform: scale(0.6);
      transform-origin: right center;
    }

    .switch input {
      display: none;
    }

    .switch-slider {
      flex-shrink: 0;
      position: relative;
      width: 86px;
      height: 38px;
      overflow: hidden;
      border-radius: 24px;
    }

    .switch-slider::before,
    .switch-slider::after {
      content: "";
      font-size: 0;
      position: absolute;
      inset: 0;
      transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .switch-slider::before {
      background: linear-gradient(145deg, #f43f5e 0%, #e11d48 100%);
      opacity: 1;
      z-index: 1;
    }

    .switch-slider::after {
      background: linear-gradient(145deg, #3ccb60 0%, #42ba64 100%);
      opacity: 0;
      z-index: 2;
    }

    .switch input:checked+.switch-slider::before {
      opacity: 0;
    }

    .switch input:checked+.switch-slider::after {
      opacity: 1;
    }

    .switch-dot-glass {
      position: absolute;
      top: 0;
      left: 4px;
      bottom: 0;
      z-index: 2;
      width: 50px;
      height: 32px;
      scale: 1;
      border-radius: 50px;
      margin-top: auto;
      margin-bottom: auto;
      background-color: rgba(255, 255, 255, 0);
      overflow: hidden;
      transform-style: preserve-3d;
      backface-visibility: hidden;
      animation: maxui-dot-off 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }

    .switch-dot-glass-filter {
      position: absolute;
      inset: 0;
      z-index: 0;
      backdrop-filter: blur(0.5px);
      -webkit-backdrop-filter: blur(0.5px);
      filter: url(#mini-liquid-lens);
      scale: 1;
      opacity: 0;
      animation: maxui-filter-off 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }

    .switch-dot-glass-overlay {
      position: absolute;
      inset: 0;
      z-index: 1;
    }

    .switch-dot-glass-specular {
      position: absolute;
      inset: 0;
      z-index: 2;
      border-radius: inherit;
      box-shadow: inset 1px 1px 0 rgba(82, 190, 121, 0.2), inset 1px 3px 0 rgba(28, 63, 90, 0.05), inset 0 0 22px rgba(255, 255, 255, 0.6), inset -1px -1px 0 rgba(82, 190, 121, 0.12);
      animation: maxui-filter-specular-off 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }

    .switch input:checked~.switch-dot-glass {
      animation: maxui-dot-on 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }

    .switch input:checked~.switch-dot-glass .switch-dot-glass-specular {
      animation: maxui-filter-specular-on 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }

    .switch input:checked~.switch-dot-glass .switch-dot-glass-filter {
      animation: maxui-filter-on 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }

    @keyframes maxui-dot-on {
      0% {
        transform: scale(1) translateX(0) rotateY(0deg);
      }

      12% {
        transform: scale(1.6) translateX(0) rotateY(-33deg);
      }

      50% {
        transform: scale(1.6) translateX(28px) rotateY(-33deg);
      }

      82% {
        background-color: rgba(255, 255, 255, 0.1);
      }

      90% {
        background-color: rgba(255, 255, 255, 0.7);
      }

      100% {
        transform: scale(1) translateX(28px) rotateY(0deg);
        background-color: rgba(255, 255, 255, 1);
      }
    }

    @keyframes maxui-dot-off {
      0% {
        transform: scale(1) translateX(28px) rotateY(0deg);
      }

      12% {
        transform: scale(1.6) translateX(28px) rotateY(33deg);
      }

      50% {
        transform: scale(1.6) translateX(0) rotateY(33deg);
      }

      82% {
        background-color: rgba(255, 255, 255, 0.1);
      }

      90% {
        background-color: rgba(255, 255, 255, 0.7);
      }

      100% {
        transform: scale(1) translateX(0) rotateY(0deg);
        background-color: rgba(255, 255, 255, 1);
      }
    }

    @keyframes maxui-filter-on {
      0% {
        opacity: 0;
      }

      12% {
        opacity: 1;
      }

      80% {
        opacity: 1;
      }

      100% {
        opacity: 0;
      }
    }

    @keyframes maxui-filter-off {
      0% {
        opacity: 0;
      }

      12% {
        opacity: 1;
      }

      80% {
        opacity: 1;
      }

      100% {
        opacity: 0;
      }
    }

    @keyframes maxui-filter-specular-on {

      0%,
      100% {
        box-shadow: inset 1px 1px 0 rgba(82, 190, 121, 0), inset 1px 3px 0 rgba(28, 63, 90, 0), inset 0 0 22px rgba(255, 255, 255, 0), inset -1px -1px 0 rgba(82, 190, 121, 0);
      }

      12%,
      80% {
        box-shadow: inset 1px 1px 0 rgba(82, 190, 121, 0.2), inset 1px 3px 0 rgba(28, 63, 90, 0.05), inset 0 0 22px rgba(255, 255, 255, 0.6), inset -1px -1px 0 rgba(82, 190, 121, 0.12);
      }
    }

    @keyframes maxui-filter-specular-off {

      0%,
      100% {
        box-shadow: inset 1px 1px 0 rgba(82, 190, 121, 0), inset 1px 3px 0 rgba(28, 63, 90, 0), inset 0 0 22px rgba(255, 255, 255, 0), inset -1px -1px 0 rgba(82, 190, 121, 0);
      }

      12%,
      80% {
        box-shadow: inset 1px 1px 0 rgba(82, 190, 121, 0.2), inset 1px 3px 0 rgba(28, 63, 90, 0.05), inset 0 0 22px rgba(255, 255, 255, 0.6), inset -1px -1px 0 rgba(82, 190, 121, 0.12);
      }
    }

    /* NEUROMORPHIC UI STYLES - theme-aware */
    .neu-raised {
      background: linear-gradient(145deg, var(--bg-card), var(--bg-main));
      border: 1px solid var(--border-color);
      box-shadow: 8px 8px 16px rgba(0, 0, 0, 0.1), -2px -2px 8px rgba(255, 255, 255, 0.5);
    }

    html.dark .neu-raised {
      background: linear-gradient(145deg, #1a1d21, #0d0f11);
      border: 1px solid #2A2E35;
      box-shadow: 8px 8px 16px rgba(0, 0, 0, 0.5), -2px -2px 8px rgba(255, 255, 255, 0.05);
    }

    .neu-inset {
      background: var(--bg-main);
      border: 1px solid var(--border-color);
      box-shadow: inset 6px 6px 12px rgba(0, 0, 0, 0.05), inset -2px -2px 6px rgba(255, 255, 255, 0.5);
    }

    html.dark .neu-inset {
      background: #111315;
      border: 1px solid #2A2E35;
      box-shadow: inset 6px 6px 12px rgba(0, 0, 0, 0.6), inset -2px -2px 6px rgba(255, 255, 255, 0.05);
    }

    .neu-btn {
      padding: 10px 16px;
      cursor: pointer;
      border: 1px solid var(--border-color);
      background: linear-gradient(145deg, var(--bg-card), var(--bg-main));
      color: var(--text-muted);
      transition: all 0.3s ease;
    }

    html.dark .neu-btn {
      border: 1px solid #2A2E35;
      background: linear-gradient(145deg, #1a1d21, #0d0f11);
      color: #6b7280;
    }

    .neu-btn:hover {
      color: var(--text-primary);
      border-color: var(--text-secondary);
      box-shadow: 8px 8px 16px rgba(0, 0, 0, 0.1), -2px -2px 8px rgba(255, 255, 255, 0.5);
    }

    html.dark .neu-btn:hover {
      color: #fff;
      border-color: #3A3E45;
      box-shadow: 8px 8px 16px rgba(0, 0, 0, 0.5), -2px -2px 8px rgba(255, 255, 255, 0.08);
    }

    .neu-btn:active {
      background: var(--bg-main);
      box-shadow: inset 4px 4px 8px rgba(0, 0, 0, 0.1), inset -2px -2px 4px rgba(255, 255, 255, 0.5);
    }

    html.dark .neu-btn:active {
      background: #111315;
      box-shadow: inset 4px 4px 8px rgba(0, 0, 0, 0.8), inset -2px -2px 4px rgba(255, 255, 255, 0.03);
    }

    /* ============================================
       YAZI BOYUTU DÜZELTMELERİ - DAHA DENGELİ GÖRÜNÜM
       ============================================ */

    /* Sol menü logo yazısı - daha dengeli boyut */
    .font-bold.text-xl.text-white.tracking-tight .sidebar-text {
      font-size: 1.125rem;
      /* 18px - text-lg eşdeğeri */
      line-height: 1.2;
    }

    /* Ana içerik başlıkları - daha dengeli boyut */
    .tab-section h1.text-3xl {
      font-size: 1.5rem;
      /* 24px - text-2xl eşdeğeri */
      line-height: 1.2;
    }

    /* ── Clock hands: light/dark mode aware ── */
    .clock-hand-h {
      background: #132a13;
      box-shadow: 0 0 3px rgba(19, 42, 19, 0.3);
    }

    .clock-hand-m {
      background: #2d4a22;
    }

    .dark .clock-hand-h {
      background: rgba(255, 255, 255, 0.95);
      box-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
    }

    .dark .clock-hand-m {
      background: rgba(255, 255, 255, 0.80);
    }
  
  
    /* Custom Driver.js Theme for TTradeLibranka */
    .driver-popover {
      background: #132a13 !important;
      color: white !important;
      border: 1px solid rgba(49, 87, 44, 0.4) !important;
      border-radius: 1.5rem !important;
      /* Artırılmış border-radius ile daha yumuşak köşeler */
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5) !important;
      font-family: 'Inter', sans-serif !important;
    }

    .driver-popover-title {
      font-weight: 800 !important;
      color: #00E396 !important;
    }

    .driver-popover-description {
      color: #9ca3af !important;
      font-size: 0.875rem !important;
    }

    .driver-popover-footer button {
      background: #31572c !important;
      color: white !important;
      border: none !important;
      text-shadow: none !important;
      border-radius: 0.5rem !important;
      padding: 5px 10px !important;
      font-weight: 600 !important;
    }

    .driver-popover-footer button:hover {
      background: #4f772d !important;
    }

    .driver-popover-close-btn {
      color: #9ca3af !important;
    }

    .driver-popover-arrow {
      display: none !important;
    }

    /* Fix for elements staying dark under the overlay due to tailwind stacking contexts */
    .driver-active-element {
      position: relative !important;
      z-index: 1000000 !important;
      isolation: isolate !important;
      pointer-events: auto !important;
      background-color: inherit;
    }

    .driver-active-element * {
      z-index: 1000001 !important;
    }

    /* Transform default X close button into a Skip Tutorial text button */
    .driver-popover-close-btn {
      width: auto !important;
      height: auto !important;
      padding: 5px 10px !important;
      font-size: 0 !important;
      /* Hide the native × character */
      text-decoration: underline !important;
      color: #9ca3af !important;
      top: 15px !important;
      right: 15px !important;
      background: none !important;
    }

    .driver-popover-close-btn:hover {
      color: white !important;
    }

    .driver-popover-close-btn::before {
      content: 'Eğitimi Atla' !important;
      font-size: 10px !important;
      /* Restore font size for the custom text */
    }

    .driver-popover-close-btn svg {
      display: none !important;
    }
  
    
      @keyframes fcm-slide-up {
        from {
          opacity: 0;
          transform: translateY(24px) scale(0.97);
        }

        to {
          opacity: 1;
          transform: translateY(0) scale(1);
        }
      }

      .animate-fcm-slide-up {
        animation: fcm-slide-up 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
      }
    
    
      /* Mobil Alt Navigasyon Active Durumu Özelleştirmesi */
      .mobile-nav-item.active .nav-icon-container {
        transform: translateY(-24px) scale(1.1);
        background: linear-gradient(to top right, #00E396, #059669);
        color: white !important;
        border: 4px solid #121212;
        box-shadow: 0 8px 20px rgba(0, 227, 150, 0.3);
      }

      .mobile-nav-item.active .nav-text {
        color: #00E396;
        font-weight: 900;
        opacity: 1;
      }

      .nav-icon-container {
        transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      }

      /* Light mode aktif rengi */
      html:not(.dark) .mobile-nav-item.active .nav-icon-container {
        background: linear-gradient(to top right, #4f772d, #31572c) !important;
        border-color: #E8EFE8 !important;
        box-shadow: 0 8px 20px rgba(79, 119, 45, 0.35) !important;
      }

      html:not(.dark) .mobile-nav-item.active .nav-text {
        color: #4f772d !important;
      }

      /* Bottom nav bottom padding — iPhone X+ safe area (CSS ile, JS olmadan) */
      #mobile-bottom-nav {
        padding-bottom: max(env(safe-area-inset-bottom, 0px), 4px);
      }

      /* Dokunma sırasında hafif basılı hissi */
      .mobile-nav-item:active .nav-icon-container {
        transform: scale(0.92) translateY(-2px);
        transition: transform 0.1s ease !important;
      }
    
      /* ============================================================== */
      /* MOBILE RESPONSIVE RULES */
    /* KURAL 1: Global Yatay Taşma Kilidi */
    html,
    body {
      overflow-x: hidden !important;
      width: 100% !important;
      max-width: 100vw !important;
      margin: 0 !important;
      padding: 0 !important;
    }

    /* ── iPhone X+ Safe Area — Home Bar Desteği ── */
    /* viewport-fit=cover ile çalışır */
    #mobile-bottom-nav {
      padding-bottom: env(safe-area-inset-bottom, 0px) !important;
      height: calc(68px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* Tab içeriklerinin alt nav altında kalmaması için */
    @media (max-width: 767px) {
      main.flex-1 {
        padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)) !important;
      }

      .tab-section {
        padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px)) !important;
      }

      /* Bottom Sheet de safe area'ya göre ayarlan */
      #mobile-bottom-sheet {
        padding-bottom: env(safe-area-inset-bottom, 0px) !important;
      }

      /* Auth container safe area */
      #auth-container {
        padding-bottom: env(safe-area-inset-bottom, 0px) !important;
      }
    }

    /* ── Dynamic Viewport Height (DVH) — Adres çubuğu kaybolunca doğru yükseklik ── */
    #tab-copilot:not([style*="display: none"]):not(.hidden) {
      /* svh zaten bazı yerlerde var, dvh ile destekle */
      height: calc(100dvh - 155px) !important;
      max-height: calc(100dvh - 155px) !important;
    }

    /* ── Touch Target İyileştirme — Dokunma noktalarını büyüt ── */
    .mobile-nav-item {
      min-height: 48px !important;
      min-width: 48px !important;
      touch-action: manipulation !important; /* 300ms delay kaldır */
    }

    /* ── Aktif dokunma geri bildirimi ── */
    .mobile-nav-item:active,
    #mobile-bottom-sheet a:active {
      opacity: 0.7 !important;
      transition: opacity 0.1s !important;
    }

    /* ── Bottom Sheet içi butonlar ── */
    #mobile-bottom-sheet a {
      min-height: 72px !important;
      touch-action: manipulation !important;
    }

    /* ── LANDSCAPE ORIENTATION: Seanslar tam ekran unified grid ── */
    @media (orientation: landscape) and (max-width: 1024px) {

      /* Swipe hint gizle */
      #clock-swipe-hint {
        display: none !important;
      }

      /* Tab container: scroll yok, padding sıfır */
      #tab-worldclock {
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
      }

      /* Container: 5-sütun grid, JS tarafından height set edilir */
      /* Fallback: 90px = topbar(~50px) + ticker(~40px) */
      #clocks-container {
        display: grid !important;
        grid-template-columns: repeat(5, 1fr) !important;
        height: calc(100svh - 90px) !important;
        max-height: calc(100svh - 90px) !important;
        overflow: hidden !important;
        gap: 4px !important;
        padding: 4px 8px !important;
        scroll-snap-type: none !important;
        scrollbar-width: none !important;
        align-items: stretch !important;
        box-sizing: border-box !important;
      }

      /* Kartlar grid hücresini tamamen doldursun */
      #clocks-container>div {
        min-width: unset !important;
        width: 100% !important;
        height: 100% !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
      }

      /* Desktop container gizle landscape mobile'da */
      #clocks-container-desktop {
        display: none !important;
      }
    }

    @media (max-width: 768px) {

      #app-container,
      .tab-section {
        overflow-x: hidden !important;
        max-width: 100vw !important;
      }

      /* clocks-container landscape modunda overflow gerekmez */
      #clocks-container {
        max-width: 100vw;
      }

      .overflow-x-auto {
        -webkit-overflow-scrolling: touch;
        width: 100%;
      }

      /* KURAL 2: Profil (Trader Identity), Takvim ve Copilot Ehlileştirme */
      /* Profil Kartı Konteynerlarını dizginleme */
      #tab-profile-desk>div,
      .trader-identity,
      #trader-radar-chart {
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
      }

      /* Grid ve Flex yatay zorlamalarını alt alta kırma */
      .grid-cols-2:not(#ecosystem-grid):not(.calendar-grid),
      .grid-cols-3:not(#calendar-week-labels),
      .grid-cols-4,
      .grid-cols-5 {
        grid-template-columns: 1fr !important;
      }

      /* AI Copilot Ekranı hizalaması */
      #copilot-chat-container,
      .copilot-message {
        width: 100% !important;
        max-width: unset !important;
        box-sizing: border-box !important;
      }

      /* KURAL 3: Hamburger Menü (Sidebar) Scroll Sorunu */
      aside#desktop-sidebar {
        overflow-y: auto !important;
        height: 100% !important;
        max-height: 100dvh !important;
        -webkit-overflow-scrolling: touch;
      }

      aside#desktop-sidebar ul,
      aside#desktop-sidebar .menu-list {
        padding-bottom: 96px !important;
        /* pb-24 eşdeğeri */
      }

      /* KURAL 4: Dokunmatik Hedefler (Touch Targets) */
      input[type="email"],
      input[type="password"],
      input[type="text"],
      input[type="number"],
      select {
        min-height: 48px !important;
        font-size: 16px !important;
      }

      button.bg-gradient-to-r,
      button#telegram-connect-btn,
      button[type="submit"] {
        min-height: 48px !important;
        margin-top: 8px !important;
        margin-bottom: 8px !important;
        padding-top: 12px !important;
        padding-bottom: 12px !important;
      }

      #auth-container>div:last-child>div {
        width: 90% !important;
        padding: 24px !important;
      }

      /* ========================================= */
      /* GÖREV 2: SEANSLAR (Dünya Saatleri) Revizyonu */
      #clocks-container {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
      }

      /* GÖREV 3: TAKVİM & GÜNLÜK Görünürlük Onarımı */
      #focus-calendar-grid,
      #eco-month-grid {
        display: grid !important;
        grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
        gap: 2px !important;
        width: 100% !important;
      }

      /* Takvimin bulunduğu bölüm sağa sola esnemesin ve gözüksün */
      #tab-calendar .overflow-x-auto {
        display: block !important;
        width: 100% !important;
      }

      /* GÖREV 4: ECO CALENDAR Kart Tasarımı & Grafik Container */
      #eco-calendar-body tr {
        display: flex !important;
        flex-direction: column !important;
        background: rgba(26, 29, 33, 0.6) !important;
        margin-bottom: 12px !important;
        border-radius: 12px !important;
        padding: 12px !important;
        border: 1px solid #2A2E35 !important;
      }

      #eco-calendar-body td {
        padding: 4px 0 !important;
        border: none !important;
        display: block !important;
      }

      /* Parite Seçici taşmasını engelle & grafik genişliğini düzelt */
      #chart-tools-row,
      #charts-toolbar {
        flex-wrap: wrap !important;
      }

      #charts-grid {
        width: 100% !important;
        max-width: 100vw !important;
      }

      /* GÖREV 5: SOSYAL & CAPITAL DESK Mobil Kart Tasarımı */
      #tab-capital-desk .flex-row,
      #tab-analytics-room .flex,
      #tab-profile-desk .flex-row {
        flex-direction: column !important;
        gap: 16px !important;
      }

      /* Yüzdelik w-1/2 vs. sınıfları tam genişliğe zorla */
      #tab-capital-desk>div>div,
      #tab-analytics-room>div>div,
      #tab-profile-desk>div>div {
        width: 100% !important;
      }

      /* GÖREV 6: PLANNER & AI COPILOT Alt Menü Çakışması Engeli */
      #tab-planner-desk,
      #copilot-chat-container,
      .tab-section {
        padding-bottom: 120px !important;
        /* pb-30 dengi */
      }

      /* ── AI COPILOT MOBİL LAYOUT DÜZELTMESİ ── */
      /* Tab-copilot: topbar(~50px) + ticker(~37px) + bottom-nav(68px) = 155px */
      #tab-copilot:not([style*="display: none"]):not(.hidden) {
        display: flex !important;
        flex-direction: column !important;
        padding: 0 !important;
        max-height: calc(100dvh - 155px) !important;
        height: calc(100dvh - 155px) !important;
        overflow: hidden !important;
      }

      /* İç wrapper: flex-col, taşma yok */
      #tab-copilot>div {
        flex: 1 !important;
        min-height: 0 !important;
        padding-bottom: 0 !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
      }

      /* Sohbet alanı: kalan tüm alanı flex-1 ile doldurur, scroll'lu */
      #chat-messages {
        flex: 1 !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 12px 0 4px !important;
      }

      /* Input: sticky değil, normal flow — tab yüksekliği zaten hesaplanmış */
      #chat-input-area {
        position: static !important;
        flex-shrink: 0 !important;
        padding: 8px 0 6px !important;
        border-top: 1px solid #2A2E35 !important;
        background: transparent !important;
      }

      /* ======================================================= */
      /* EK GÖREVLER: SUPER-APP MENU & VERTICAL UX ENJEKSİYONLARI */
      /* ======================================================= */

      /* KURAL 1: SUPER-APP OVERLAY MENU */
      /* Yan menü (Sidebar) açıldığında tam ekran puslu overlay'e dönüşür */
      aside#desktop-sidebar.flex.absolute {
        position: fixed !important;
        inset: 0 !important;
        z-index: 100 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100dvh !important;
        background-color: rgba(17, 19, 21, 0.96) !important;
        backdrop-filter: blur(12px) !important;
        border-right: none !important;
      }



      /* KURAL 2: PROFİL KİMLİĞİ (VERTICAL ID CARD) */
      #profile-hero-section {
        flex-direction: column !important;
        text-align: center !important;
        align-items: center !important;
        padding: 24px 16px !important;
      }

      #profile-hero-avatar-container {
        margin-bottom: 16px !important;
      }

      #profile-hero-stats {
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
      }

      /* KURAL 2 B: ID KART ÖLÇEKLENDİRME (MOBİL EKRANA SIĞDIRMA) */
      #trader-id-card {
        transform: scale(0.62) !important;
        transform-origin: top center !important;
        margin-bottom: -130px !important;
      }

      #profile-hero-stats>div {
        border-right: none !important;
        border-bottom: 1px solid rgba(42, 46, 53, 0.5) !important;
        padding: 12px 0 !important;
        width: 100% !important;
      }

      #profile-hero-stats>div:last-child {
        border-bottom: none !important;
      }

      /* KURAL 3: HABER MASASI (NEWS DESK) TEK SÜTUN TIRAŞLAMASI */
      #tab-news-desk>div.flex.gap-6 {
        flex-direction: column !important;
        gap: 24px !important;
      }

      #tab-news-desk>div.flex>div.w-2\/3,
      #tab-news-desk>div.flex>div.w-1\/3 {
        width: 100% !important;
      }

      #tab-news-desk .xl\:h-\[400px\] {
        height: auto !important;
        min-height: 350px !important;
      }

      /* GRAFİKLER: Tab gizleme mekanizmasını bozmadan flex layout */
      /* NOT: display:none (gizli durum) öncelikli olmalı, sadece aktifken flex uygula */
      #tab-charts:not([style*="display: none"]):not(.hidden) {
        padding-top: 0 !important;
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
      }

      #tab-charts:not([style*="display: none"]):not(.hidden)>div {
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
      }

      #charts-grid {
        flex: 1 1 0% !important;
        min-height: 0 !important;
        overflow: hidden !important;
        padding-bottom: 0 !important;
      }

      /* Charts tab, genel padding-bottom kuralından muáf */
      #tab-charts {
        padding-bottom: 68px !important;
        /* Alt nav bar yüksekliği kadar alan bırak */
      }

      /* AI Copilot Input Konumlandırması (Kenarlardan %90) */
      #ai-copilot-container>div:last-child {
        width: 90% !important;
        margin: 0 auto !important;
        left: 5% !important;
        right: 5% !important;
        bottom: 24px !important;
        /* Alttan da biraz nefes */
      }

      /* Capital Desk üst porsiyon izolasyonu */
      #tab-capital-desk {
        padding-top: 24px !important;
        width: 100% !important;
        overflow: hidden !important;
      }
    }

    /* ===== SIDEBAR ACCORDION STYLES ===== */
    .sidebar-nav-link {
      display: flex;
      align-items: center;
      gap: 0.6rem;
      padding: 0.5rem 0.75rem;
      border-radius: 0.625rem;
      font-size: 0.8125rem;
      font-weight: 500;
      color: #2d4a22;
      cursor: pointer;
      transition: all 0.15s ease;
      position: relative;
      text-decoration: none;
    }

    .dark .sidebar-nav-link {
      color: #9ca3af;
    }

    .sidebar-nav-link:hover {
      background: rgba(79, 119, 45, 0.1);
      color: #132a13;
    }

    .dark .sidebar-nav-link:hover {
      background: transparent;
      color: white;
    }

    .sidebar-nav-link.active-tab {
      background: rgba(79, 119, 45, 0.15);
      color: #132a13;
      font-weight: 600;
    }

    .dark .sidebar-nav-link.active-tab {
      background: rgba(79, 119, 45, 0.2);
      color: #00E396;
    }

    .sidebar-nav-link:hover .fav-btn {
      opacity: 1 !important;
    }

    .sidebar-nav-link .fav-btn {
      opacity: 0;
      transition: opacity 0.15s;
    }

    .sidebar-group-content {
      overflow: hidden;
      transition: max-height 0.25s ease, opacity 0.2s ease;
      max-height: 500px;
      opacity: 1;
    }

    .sidebar-group-content.collapsed {
      max-height: 0;
      opacity: 0;
    }

    .sidebar-group-header {
      cursor: pointer;
    }

    /* Sidebar collapsed styles for group headers */
    aside.sidebar-collapsed .sidebar-group-header {
      justify-content: center !important;
      padding-left: 0;
      padding-right: 0;
    }

    aside.sidebar-collapsed .sidebar-group-header .sidebar-group-text {
      display: none;
    }

    aside.sidebar-collapsed .sidebar-group-header .fa-chevron-down {
      display: none;
    }

    aside.sidebar-collapsed .sidebar-group-header .flex.items-center.gap-2>i {
      font-size: 1.1rem !important;
      margin: 0.25rem auto;
      color: #00E396 !important;
      background: rgba(0, 227, 150, 0.1);
      width: 2.25rem;
      height: 2.25rem;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 0.6rem;
      border: 1px solid rgba(0, 227, 150, 0.2);
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    }

    aside.sidebar-collapsed #favorites-empty {
      display: none;
    }

    /* Sidebar collapsed styles for nav links */
    aside.sidebar-collapsed .sidebar-nav-link {
      justify-content: center !important;
      padding-left: 0;
      padding-right: 0;
    }

    aside.sidebar-collapsed .sidebar-nav-link .fav-btn {
      display: none !important;
    }

    aside.sidebar-collapsed #favorites-list .sidebar-nav-link>button {
      display: none !important;
    }

    aside.sidebar-collapsed .sidebar-nav-link>svg,
    aside.sidebar-collapsed .sidebar-nav-link>i,
    aside.sidebar-collapsed .sidebar-nav-link>div.relative {
      width: 1.5rem !important;
      height: 1.5rem !important;
      font-size: 1.25rem !important;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto;
    }

    /* Overrides for sidebar container paddings when collapsed to fix centering offset */
    aside.sidebar-collapsed .sidebar-group-content .pl-2 {
      padding-left: 0 !important;
    }

    aside.sidebar-collapsed .h-16.flex.items-center.justify-between.px-4 {
      justify-content: center !important;
      padding-left: 0;
      padding-right: 0;
    }

    aside.sidebar-collapsed .menu-logo {
      display: none;
    }

    aside.sidebar-collapsed .sidebar-profile {
      justify-content: center;
      padding-left: 0;
      padding-right: 0;
      margin-left: -0.5rem;
      /* Account for the p-4 wrapper */
    }

    aside.sidebar-collapsed .p-4.border-t {
      padding-left: 0;
      padding-right: 0;
    }

    /* Markets toggle */
    .markets-toggle-btn {
      transition: all 0.2s;
    }

    /* Admin access denied screen */
    .admin-access-denied {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100%;
      gap: 1rem;
      padding: 2rem;
    }

    /* SweetAlert Z-Index Fix: Auth Container is 10000, so Swal must be higher */
    .swal2-container {
      z-index: 99999 !important;
    }