/* Kritik CSS'i inline (içeri) aldık */
   :root {
       --primary-color: #2563eb;
       --secondary-color: #1e293b;
       --accent-color: #22c55e;
       --background-light: #f8fafc;
       --text-light: #1e293b;
       --background-dark: #0f172a;
       --text-dark: #e2e8f0;
       --card-dark: #1e293b;
       --border-dark: #334155;
   }

   h1,
   h2,
   h3,
   h4,
   h5,
   h6 {
       font-family: 'Poppins', sans-serif;
   }

   body {
       font-family: 'Inter', sans-serif;
   }

   .dark {
       --background-light: var(--background-dark);
       --text-light: var(--text-dark);
   }

   .dark .dark\:bg-card {
       background-color: var(--card-dark);
   }

   .dark .dark\:border-card {
       border-color: var(--border-dark);
   }

   .dark .dark\:text-gray-300 {
       color: #d1d5db;
   }

   .dark .dark\:bg-secondary {
       background-color: var(--secondary-color);
   }

   /* Ripple & Animations */
   .ripple-btn {
       position: relative;
       overflow: hidden;
       transform: translate3d(0, 0, 0);
   }

   .ripple {
       display: block;
       position: absolute;
       background: rgba(255, 255, 255, 0.4);
       border-radius: 50%;
       transform: scale(0);
       animation: ripple-animation 0.6s linear;
   }

   @keyframes ripple-animation {
       to {
           transform: scale(4);
           opacity: 0;
       }
   }

   /* Flip Card */
   .flip-card {
       perspective: 1000px;
   }

   .flip-card-inner {
       position: relative;
       width: 100%;
       height: 100%;
       text-align: center;
       transition: transform 0.8s;
       transform-style: preserve-3d;
   }

   .flip-card:hover .flip-card-inner {
       transform: rotateY(180deg);
   }

   .flip-card-front,
   .flip-card-back {
       position: absolute;
       width: 100%;
       height: 100%;
       -webkit-backface-visibility: hidden;
       backface-visibility: hidden;
       border-radius: 0.75rem;
   }

   .flip-card-back {
       transform: rotateY(180deg);
   }

   .animated-list-item {
       opacity: 0;
       transform: translateX(-20px);
       animation: slideIn 0.5s forwards;
   }

   @keyframes slideIn {
       to {
           opacity: 1;
           transform: translateX(0);
       }
   }

   .footer-link {
       transition: color 0.3s ease, transform 0.3s ease;
       display: inline-block;
   }

   .footer-link:hover {
       color: var(--primary-color);
       transform: translateX(5px);
   }

   .social-icon {
       transition: transform 0.3s ease, color 0.3s ease;
   }

   .social-icon:hover {
       transform: scale(1.2);
       color: var(--primary-color);
   }

   .live-desk {
       position: fixed;
       bottom: 20px;
       left: 20px;
       z-index: 40;
       display: flex;
       align-items: center;
       background: linear-gradient(135deg, #25D366, #128C7E);
       color: white;
       padding: 12px 20px;
       border-radius: 50px;
       box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
       transition: transform 0.3s ease;
   }

   .live-desk:hover {
       transform: scale(1.05);
   }

   .typing::after {
       content: '|';
       animation: blink 1s infinite;
   }

   @keyframes blink {
       50% {
           opacity: 0;
       }
   }

   /* Editor Styles */
   .wa-editor-toolbar {
       display: flex;
       gap: 0.5rem;
       padding: 0.5rem;
       background-color: #f3f4f6;
       border: 1px solid #d1d5db;
       border-bottom: none;
       border-top-left-radius: 0.375rem;
       border-top-right-radius: 0.375rem;
   }

   .dark .wa-editor-toolbar {
       background-color: #1e293b;
       border-color: #334155;
   }

   .wa-btn {
       padding: 0.25rem 0.5rem;
       border-radius: 0.25rem;
       font-weight: bold;
       color: #374151;
       transition: background-color 0.2s;
   }

   .dark .wa-btn {
       color: #d1d5db;
   }

   .wa-btn:hover {
       background-color: #e5e7eb;
   }

   .dark .wa-btn:hover {
       background-color: #334155;
   }

   .emoji-grid {
       display: grid;
       position: absolute;
       bottom: 100%;
       left: 0;
       background: white;
       border: 1px solid #d1d5db;
       border-radius: 0.5rem;
       padding: 0.5rem;
       grid-template-columns: repeat(6, 1fr);
       gap: 0.5rem;
       box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
       z-index: 50;
       width: 100%;
       max-width: 250px;
   }

   .dark .emoji-grid {
       background-color: #1e293b;
       border-color: #334155;
   }

   .emoji-item {
       cursor: pointer;
       font-size: 1.25rem;
       text-align: center;
       padding: 0.25rem;
       border-radius: 0.25rem;
   }

   .emoji-item:hover {
       background-color: #f3f4f6;
   }

   .dark .emoji-item:hover {
       background-color: #334155;
   }