:root{
  --ak:#eb592a;
  --akd:#eb592a;
  --accent:#eb592a;    /* AKOS Turuncu */
  --bg:#ffffff;
  --light:#F2F5F7;     /* Sitenin açık gri tonu */
  --txt:#000000;       /* Başlık Siyahı */
  --muted:#4C5B67;     /* Metin Grisi */
}

/* ROOT */
#akos-chatbot{
  position:fixed;
  bottom:18px;
  left:18px;
  z-index:999999;
  font-family:'Inter',sans-serif;
}

/* Positioning helpers (shortcode supports position="right") */
#akos-chatbot[data-pos="right"]{ left:auto; right:18px; }

/* FAB */
.fab{
  width:82px;
  height:82px;
  cursor:pointer;
  box-shadow:0 4px 14px rgba(20,93,160,.28);
  transition:.25s;
}
.fab:hover{ transform:scale(1.07); }

/* BADGE */
.badge{
  position:absolute;
  left:18px;
  top:-22px;
  background:#fff;
  border-radius:20px;
  padding:14px 20px;
  font-size:15px;
  font-weight:500;
  color:var(--txt);
  box-shadow:0 4px 14px rgba(0,0,0,.15);
  opacity:0;
  transform:translateX(0);
  transition:opacity .3s ease, transform .3s ease;
  cursor:pointer;
  white-space:nowrap;
  z-index:1;
}
.badge::after{
  content:'';
  position:absolute;
  left:-12px;
  top:50%;
  transform:translateY(-50%);
  border:6px solid transparent;
  border-right-color:#fff;
}
.badge.show{
  opacity:1;
  transform:translateX(82px);
}
.badge:hover{ background:var(--light); }

/* Badge right alignment */
#akos-chatbot[data-pos="right"] .badge{
  left:auto;
  right:18px;
}
#akos-chatbot[data-pos="right"] .badge::after{
  left:auto;
  right:-12px;
  border-right-color:transparent;
  border-left-color:#fff;
}
#akos-chatbot[data-pos="right"] .badge.show{ transform:translateX(-82px); }

/* POPUP */
.popup{
  width:290px;
  height:auto;
  max-height:80vh;
  background:#fff;
  border-radius:18px;
  position:absolute;
  top:-480px;
  right:-238px;
  box-shadow:0 12px 40px rgba(0,0,0,.20);
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  transform:translateY(20px) scale(.92);
  opacity:0;
  pointer-events:none;
  transition:.32s cubic-bezier(.25,.8,.25,1);
}

/* Popup right alignment: open to the left */
#akos-chatbot[data-pos="right"] .popup{
  right:auto;
  left:-238px;
}

/* CUSTOM SCROLLBAR */
.popup::-webkit-scrollbar{ width:4px; }
.popup::-webkit-scrollbar-track{ background:rgba(0,0,0,0.05); border-radius:10px; }
.popup::-webkit-scrollbar-thumb{ background:rgba(235,89,42,0.6); border-radius:10px; }
.popup::-webkit-scrollbar-thumb:hover{ background:rgba(235,89,42,0.8); }

#akos-chatbot.open .popup{
  transform:translateY(0px) scale(1);
  opacity:1;
  pointer-events:auto;
  animation:popup-enter .32s cubic-bezier(.25,.8,.25,1);
}

/* HEADER */
.header{
  background:linear-gradient(135deg,var(--accent),var(--accent));
  padding:16px 18px;
  color:#fff;
  text-align:left;
  position:sticky;
  top:0;
  z-index:1;
}
.logo{
  font-size:18px;
  font-weight:800;
  letter-spacing:-1px;
}
.subtitle{
  font-size:13px;
  opacity:.9;
  margin-top:3px;
}

/* BODY */
.body{
  flex:1;
  display:flex;
  flex-direction:column;
  background:var(--light);
  gap:12px;
}

/* CATEGORIES */
.categories{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:16px 18px 10px;
  border-bottom:1px solid #e8ecf0;
}
.cat-btn{
  background:#fff;
  border:1px solid #e3e7eb;
  border-radius:20px;
  padding:6px 12px;
  font-size:12px;
  font-weight:500;
  color:var(--txt);
  cursor:pointer;
  transition:.2s;
  white-space:normal;
  word-wrap:break-word;
}
.cat-btn:hover{ background:var(--accent); color:#fff; border-color:var(--accent); }
.cat-btn:active{ background:var(--akd); border-color:var(--akd); }
.cat-btn:focus{ outline:none; background-color:var(--accent); }

/* CHAT AREA */
.chat-area{
  flex:1;
  display:flex;
  flex-direction:column;
  padding:12px 18px 16px;
  position:relative;
  overflow:hidden;
}
.messages-container{
  flex:1;
  overflow-y:auto;
  scroll-behavior:smooth;
  padding-bottom:60px; /* Space for bottom buttons */
}
.bottom-buttons{
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  display:none;
  gap:10px;
  padding:10px 18px;
  background:var(--accent);
  border-top:1px solid #e8ecf0;
}
.messages{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.message{
  max-width:85%;
  padding:12px 16px;
  border-radius:20px;
  font-size:13px;
  line-height:1.5;
  word-wrap:break-word;
}
.message.user{
  align-self:flex-end;
  background:var(--accent);
  color:#fff;
}
.message.bot{
  align-self:flex-start;
  background:#fff;
  color:var(--txt);
  box-shadow:0 1px 3px rgba(0,0,0,.1);
  opacity:0;
  transform:translateY(10px);
  transition:opacity 0.5s ease, transform 0.5s ease;
}
.message.bot.show{ opacity:1; transform:translateY(0); }
.message.accent-message{
  width:300px;
  max-width:110%;
  background:var(--accent);
  color:#fff;
  border-radius:0;
  border:1px solid rgba(255,255,255,0.3);
  cursor:pointer;
  margin-left:-16px;
  margin-right:-16px;
}
.message.bot ul{ list-style-type:none; padding-left:20px; margin-bottom:15px; }
.message.bot ul li::before{ content:"- "; color:var(--muted); }
.message.bot ul ul{ list-style-type:none; }
.message.bot ul ul li::before{ content:"- "; color:var(--muted); }
.message.bot p{ margin-bottom:16px; }
.message.bot ul{ margin-bottom:15px; }
.message.bot li{ margin-bottom:8px; }
.message.bot h3{ font-size:14px; font-weight:600; margin-bottom:8px; color:var(--txt); }

/* SCREENS */
.screen{ display:none; animation:fade .35s ease; }
.screen.active{
  display:block;
  position:absolute;
  top:90px;
  left:0;
  right:0;
  bottom:0;
  background:#fff;
  z-index:10;
  padding:14px 16px;
}
@keyframes fade{ from{opacity:0;transform:translateY(8px);} to{opacity:1;transform:none;} }
@keyframes popup-enter{ 0%{transform:translateY(20px) scale(.92);opacity:0;} 50%{transform:translateY(-2px) scale(1.01);opacity:0.9;} 100%{transform:translateY(0px) scale(1);opacity:1;} }

/* MENU OPTIONS */
.opt{
  width:100%;
  background:#fff;
  border:none;
  border-radius:12px;
  padding:12px 14px;
  margin-bottom:10px;
  font-size:14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  cursor:pointer;
  transition:.2s;
  box-shadow:0 1px 6px rgba(0,0,0,.05);
  color:var(--txt);
}
.opt:hover{ background:#e9f2ff; color:var(--accent); }

/* BACK BUTTON */
.back{
  background:none;
  border:none;
  font-size:13px;
  font-weight:600;
  margin-bottom:12px;
  cursor:pointer;
  color:var(--ak);
}
.back:hover{ background-color:var(--accent); color:#fff; }
.back:active{ background-color:var(--akd); }

/* Scope link hover to the widget to avoid site-wide side effects */
#akos-chatbot a:hover{ background-color:var(--accent); color:#fff; }

/* FAQ */
.faq-list .item{
  background:#fff;
  border-radius:10px;
  margin-bottom:8px;
  box-shadow:0 1px 5px rgba(0,0,0,.05);
  overflow:hidden;
}
.q{
  padding:12px 14px;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  color:var(--txt);
  position:relative;
}
.q::after{
  content:"+";
  position:absolute;
  right:14px;
  top:10px;
  font-size:20px;
  color:var(--accent);
  transition:.2s;
}
.item.active .q::after{ content:"−"; }
.a{
  padding:8px 14px 12px;
  font-size:13px;
  color:var(--muted);
  display:none;
}
.item.active .a{ display:block; }

/* FORM */
.form{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.form input,
.form textarea,
.form select{
  padding:12px 14px;
  border:1.5px solid #e3e7eb;
  border-radius:12px;
  font-size:13px;
  background:#fff;
  color:var(--txt);
  transition:.2s;
}
.form input:focus,
.form textarea:focus,
.form select:focus{
  border-color:var(--ak);
  outline:none;
}

/* SEND BUTTON */
.send{
  padding:10px;
  background:var(--accent);
  border:none;
  border-radius:10px;
  color:#fff;
  font-size:14px;
  cursor:pointer;
  transition:.2s;
  font-weight:600;
}
.send:hover{ background:var(--accent); }
.status{ font-size:12.5px; margin-top:4px; color:#16a34a; text-align:center; }

/* TYPING INDICATOR */
.typing{
  display:none;
  padding:12px 14px;
  font-size:13px;
  color:var(--muted);
  text-align:left;
}
.typing.show{ display:block; }
.dots{ display:inline-block; margin-left:4px; }
.dots span{ animation:dot 1.4s infinite ease-in-out both; }
.dots span:nth-child(1){ animation-delay:-0.32s; }
.dots span:nth-child(2){ animation-delay:-0.16s; }
.dots span:nth-child(3){ animation-delay:0s; }
@keyframes dot{ 0%,80%,100%{transform:scale(0);} 40%{transform:scale(1);} }

/* CATALOG */
.catalog-content,
.content{ display:flex; flex-direction:column; height:auto; overflow-y:auto; }
.content h3{ font-size:16px; font-weight:600; margin-bottom:10px; color:var(--txt); }
.content p{ font-size:13px; color:var(--muted); margin-bottom:8px; line-height:1.4; }
.content ul{ list-style-type:disc; padding-left:20px; margin-bottom:10px; }
.content li{ font-size:13px; color:var(--muted); margin-bottom:4px; line-height:1.4; }
.download{
  padding:5px 9px;
  background:var(--accent);
  border:none;
  border-radius:18px;
  color:#fff;
  font-size:12px;
  cursor:pointer;
  transition:.2s;
  font-weight:500;
  font-family:Poppins, sans-serif;
  display:inline-block;
  margin:0;
}
.download:hover{ background:var(--accent); }
.full-message-button{
  width:100%;
  height:100%;
  border:none;
  border-radius:18px;
  color:#fff;
  font-size:13px;
  cursor:pointer;
  transition:.2s;
  font-weight:500;
  font-family:Poppins, sans-serif;
  padding:0;
  box-sizing:border-box;
  text-align:center;
}
.full-message-button:hover{ background:var(--accent); }

/* ================= DESKTOP ================= */
@media (min-width: 769px) {
  #akos-chatbot .popup{
    width:300px;
    height:480px;
    border-radius:16px;
  }
  #akos-chatbot .header{ padding:16px 18px; }
  #akos-chatbot .logo{ font-size:18px; }
  #akos-chatbot .subtitle{ font-size:13px; }
  #akos-chatbot .body{ padding:14px 16px; }
  #akos-chatbot .opt{ padding:12px 14px; font-size:14px; }
  #akos-chatbot .q{ font-size:14px; }
  #akos-chatbot .a{ font-size:13px; }
  #akos-chatbot .form input,
  #akos-chatbot .form textarea{ font-size:13px; padding:10px 12px; }
  #akos-chatbot .send{ font-size:14px; padding:10px; }
}

/* ================= MOBILE ================= */
@media (max-width: 768px) {
  #akos-chatbot{ left:18px; bottom:10px; }
  #akos-chatbot[data-pos="right"]{ left:auto; right:18px; }

  #akos-chatbot .popup{
    width:280px;
    height:480px;
  }

  #akos-chatbot .header{ padding:18px 20px; }
  #akos-chatbot .logo{ font-size:20px; }
  #akos-chatbot .subtitle{ font-size:14px; }
  #akos-chatbot .body{ padding:16px 18px; }
  #akos-chatbot .categories{ padding:18px 20px 12px; gap:12px; }
  #akos-chatbot .cat-btn{ padding:10px 14px; font-size:14px; border-radius:24px; }
  #akos-chatbot .chat-area{ padding:14px 20px 18px; }
  #akos-chatbot .message{ padding:14px 18px; font-size:14px; }
  #akos-chatbot .screen{ padding:16px 18px; }
  #akos-chatbot .back{ font-size:14px; margin-bottom:14px; }
  #akos-chatbot .form input,
  #akos-chatbot .form textarea,
  #akos-chatbot .form select{ padding:14px 16px; font-size:14px; }
  #akos-chatbot .send{ padding:12px; font-size:15px; }
  #akos-chatbot .opt{ padding:14px 16px; font-size:15px; }
  #akos-chatbot .q{ font-size:15px; }
  #akos-chatbot .a{ font-size:14px; }
}