/* Kritik CSS'i inline (içeri) aldık */
   :root {
       --primary-color: var(--rektab-primary);
       --secondary-color: #1e293b;
       --accent-color: var(--rektab-primary);
       --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, rgba(37,68,35,1), rgba(37,68,35,.75));
       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;
   }

/* Rektab Icon Buttons */
.icon-btn{
  background: var(--rektab-primary);
  color: #fff;
  border-radius: 9999px;
  padding: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.icon-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
  opacity: .95;
}

.icon-btn-outline{
  border: 1px solid var(--rektab-primary);
  color: var(--rektab-primary);
  background: transparent;
  border-radius: 9999px;
  padding: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.dark .icon-btn-outline{
  border-color: rgba(255,255,255,.18);
  color: #eaf4ea;
  background: rgba(37,68,35,.35);
}

.icon-btn-outline:hover{
  background: var(--rektab-primary);
  color: #fff;
  transform: translateY(-1px);
}


/* Live Desk / WhatsApp Floating Button */
.live-desk.live-desk--icon{
  left: 18px;
  bottom: 18px;
  padding: 12px;
  border-radius: 9999px;
  background: var(--rektab-primary);
  gap: 0;
}
.live-desk.live-desk--icon::after{
  content: "WhatsApp";
  margin-left: 10px;
  font-weight: 600;
  font-size: 13px;
  opacity: .95;
}
@media (max-width: 640px){
  .live-desk.live-desk--icon::after{ content: ""; margin:0; }
}



/* ==== Rektab Brand Tokens ==== */
:root{
  --rektab-primary:#254423;
  --rektab-primary-contrast:#ffffff;
}
.dark{
  /* Dark mode'da aynı markayı daha okunur bir tona çek */
  --rektab-primary:#3a7a52;
}

/* Tailwind utility class overrides (CDN ile gelen sınıflar için) */
.text-\[\#254423\]{ color: var(--rektab-primary) !important; }
.bg-\[\#254423\]{ background-color: var(--rektab-primary) !important; }
.border-\[\#254423\]{ border-color: var(--rektab-primary) !important; }

/* Icon/btn ortak stili (WhatsApp + tema ikonları) */
.icon-btn{
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
.icon-btn:hover{
  transform: translateY(-1px);
}

/* 2014 kartları ikon rozeti */
.rektab-icon-badge{
  background: rgba(37,68,35,.10);
  color: var(--rektab-primary);
}
.dark .rektab-icon-badge{
  background: rgba(58,122,82,.22);
  color: var(--rektab-primary);
}

/* Blog cards */
.blog-card{
  display:block;
  border-radius: 16px;
  background: #fff;
  overflow:hidden;
  box-shadow: 0 12px 28px rgba(0,0,0,.08);
  border:1px solid rgba(0,0,0,.05);
  transition: transform .2s ease, box-shadow .2s ease;
}
.dark .blog-card{
  background: rgba(15,23,42,.85);
  border:1px solid rgba(255,255,255,.08);
  box-shadow: 0 12px 28px rgba(0,0,0,.35);
}
.blog-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(0,0,0,.14);
}
.blog-thumb{
  height: 140px;
  background-size: cover;
  background-position: center;
}

/* Simple line clamp (Tailwind plugin yoksa) */
.line-clamp-3{
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}


/* Blog comment editor */
.editor-btn{
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 13px;
  background: rgba(37,68,35,.10);
  color: var(--rektab-primary);
  border: 1px solid rgba(37,68,35,.18);
  transition: opacity .15s ease, transform .15s ease;
}
.dark .editor-btn{
  background: rgba(58,122,82,.18);
  border-color: rgba(255,255,255,.10);
}
.editor-btn:hover{ opacity:.9; transform: translateY(-1px); }
#comment-editor:empty:before{
  content: attr(data-placeholder);
  color: rgba(148,163,184,.9);
}

/* Cookie Banner */
.cookie-banner{
  position: fixed;
  left: 18px;
  right: 18px;
  bottom: 18px;
  z-index: 60;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: 0 16px 40px rgba(0,0,0,.14);
}
.dark .cookie-banner{
  background: rgba(15,23,42,.9);
  border-color: rgba(255,255,255,.08);
}
.cookie-modal{
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(0,0,0,.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}
.cookie-modal-card{
  width: 100%;
  max-width: 720px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 18px 60px rgba(0,0,0,.22);
}
.dark .cookie-modal-card{
  background: #0b1220;
  border-color: rgba(255,255,255,.08);
}
.cookie-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1px solid rgba(0,0,0,.08);
  border-radius:9999px;
  padding:8px 12px;
}
.dark .cookie-pill{
  border-color: rgba(255,255,255,.12);
}