/* style.css - Clean & Fix Sürüm (ikon + süreç çakışmaları temizlendi) */

/* Genel reset, taşma olmasın */
*,
*::before,
*::after { box-sizing: border-box; }

:root{
  --bg: #f5f5f7;
  --card: #ffffff;
  --text-primary: #111827;
  --text-secondary: #6b7280;
  --accent-color: #0a84ff;
  --ease-apple: cubic-bezier(.2,.8,.2,1);
}

html, body { height: 100%; }
body{
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  background: var(--bg);
  color: var(--text-primary);
  overflow-x: hidden;
}

a{ color: inherit; text-decoration: none; }
img{ max-width: 100%; display: block; }

/* Container */
.container{
  width: min(1100px, calc(100% - 40px));
  margin: 0 auto;
}

/* Navbar */
header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(245,245,247,0.85);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

.navbar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
}

.logo{
  font-weight: 900;
  letter-spacing: -0.03em;
  font-size: 1.15rem;
}

.nav-links{
  display: flex;
  gap: 18px;
  align-items: center;
  margin: 0 auto;
}

.nav-links a{
  color: var(--text-secondary);
  font-weight: 700;
  padding: 8px 10px;
  border-radius: 12px;
  transition: background .25s var(--ease-apple), color .25s var(--ease-apple);
}

.nav-links a:hover{
  background: rgba(0,0,0,0.04);
  color: var(--text-primary);
}

.nav-links a.active{
  background: rgba(10,132,255,0.12);
  color: #0b5ed7;
}

.nav-actions{
  display: flex;
  align-items: center;
  gap: 10px;
}

.nav-actions .lang-toggle{
  margin-left: 0;
}

/* Language toggle */
.lang-toggle{
  margin-left: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.06);
  background: #fff;
  color: var(--text-secondary);
  font-weight: 900;
  cursor: pointer;
  transition: background .25s var(--ease-apple), transform .25s var(--ease-apple), box-shadow .25s var(--ease-apple);
}
.lang-toggle:hover{
  background: rgba(0,0,0,0.04);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0,0,0,0.08);
}

/* Theme toggle */
.theme-toggle{
  background-color: #fff;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 0 32px 12px rgba(0, 0, 0, 0.08);
  line-height: 1;
  border: 1px solid rgba(0,0,0,0.06);
  color: #111827;
}

.theme-input{
  display: none;
}

.theme-icon{
  grid-column: 1 / 1;
  grid-row: 1 / 1;
  transition: transform 500ms;
  line-height: 0.1;
}

.theme-toggle svg{
  width: 22px;
  height: 22px;
}

.theme-icon--moon{
  transition-delay: 200ms;
}

.theme-icon--sun{
  transform: scale(0);
}

#theme-switch:checked + .theme-icon--moon{
  transform: rotate(360deg) scale(0);
}

#theme-switch:checked ~ .theme-icon--sun{
  transition-delay: 200ms;
  transform: scale(1) rotate(360deg);
}

/* Mobile menu button */
.menu-toggle{
  display: none;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.06);
  background: #fff;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
}

.menu-toggle .bar{
  width: 18px;
  height: 2px;
  background: #111827;
  border-radius: 999px;
  display: block;
}

/* ===== HAMBURGER (uiverse) ===== */
.hamburger{
  cursor:pointer;
  display:none;
  width:44px;
  height:44px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,0.06);
  background:#fff;
  align-items:center;
  justify-content:center;
}
.hamburger input{ display:none; }
.hamburger svg {
  height: 2.6em;
  transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
}
.line {
  fill:none;
  stroke:#111827;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-width:3;
  transition:
    stroke-dasharray 220ms cubic-bezier(0.4, 0, 0.2, 1),
    stroke-dashoffset 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

.line-top-bottom{ stroke-dasharray: 12 63; }
.hamburger input:checked + svg{ transform: rotate(-45deg); }
.hamburger input:checked + svg .line-top-bottom{
  stroke-dasharray: 20 300;
  stroke-dashoffset: -32.42;
}

/* Main content */
.main-content{
  padding: 34px 0 70px;
}

/* Hero */
.hero-section{
  text-align: center;
  padding: 46px 0 22px;
}

.hero-title{
  margin: 0;
  font-size: clamp(2rem, 5vw, 3.2rem);
  letter-spacing: -0.04em;
  font-weight: 950;
}

.hero-subtitle{
  margin: 12px auto 0;
  max-width: 760px;
  color: var(--text-secondary);
  line-height: 1.7;
}

/* Cards */
.bubble-card{
  background: var(--card);
  border-radius: 22px;
  padding: 26px;
  box-shadow: 0 14px 40px rgba(0,0,0,0.08);
  border: 1px solid rgba(0,0,0,0.06);
  margin-top: 18px;
}

/* Text helpers */
.text-muted{ color: var(--text-secondary); }
.mb-2{ margin-bottom: 10px; }
.mb-4{ margin-bottom: 18px; }

/* Scroll reveal */
.scroll-hidden{
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .6s var(--ease-apple), transform .6s var(--ease-apple);
}

.scroll-visible{
  opacity: 1;
  transform: translateY(0);
}

/* Learning grid (index) */
.learning-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}

.learning-card{
  background: #fff;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,0.06);
  padding: 16px;
  box-shadow: 0 10px 26px rgba(0,0,0,0.06);
  transition: transform .25s var(--ease-apple), box-shadow .25s var(--ease-apple);
}

.learning-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 42px rgba(0,0,0,0.10);
}

.learning-top{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.learning-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 900;
  background: rgba(10,132,255,0.12);
  color: #0b5ed7;
}

.learning-card h3{
  margin: 0 0 6px 0;
  letter-spacing: -0.01em;
}

.learning-card p{
  margin: 0;
  line-height: 1.6;
}

.learning-tags{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

/* Tag */
.tag{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.06);
  background: rgba(0,0,0,0.04);
  color: var(--text-secondary);
  font-weight: 800;
  font-size: 0.86rem;
}

/* Process section */
.process-section{
  padding: 26px 0 0;
}

.section-title{
  font-size: 1.7rem;
  font-weight: 950;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
  text-align: center;
}

.process-steps{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 22px;
}

/* Step cards */
.step-card{
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 10px 26px rgba(0,0,0,0.06);
  transition: transform .25s var(--ease-apple), box-shadow .25s var(--ease-apple);
}

.step-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 42px rgba(0,0,0,0.10);
}

.step-card h3{
  margin: 0 0 10px 0;
  font-size: 1.1rem;
  font-weight: 800;
}

.step-card p{
  margin: 0;
  color: var(--text-secondary);
  line-height: 1.65;
}

.step-icon{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.04);
  border: 1px solid rgba(0,0,0,0.06);
  margin-bottom: 12px;
  position: relative;
}

.step-icon svg{
  width: 24px;
  height: 24px;
  display: block;
}

.step-number{
  position: absolute;
  right: -8px;
  top: -8px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 0.85rem;
  background: rgba(10,132,255,0.12);
  color: #0b5ed7;
  border: 1px solid rgba(10,132,255,0.18);
}

/* Contact page */
.contact-section{
  padding: 20px 0 0;
}

.contact-wrapper{
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 18px;
  align-items: start;
}

.contact-info, .contact-form-area{
  background: #fff;
  border-radius: 22px;
  padding: 22px;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 10px 26px rgba(0,0,0,0.06);
}

.contact-title{
  margin: 0 0 10px 0;
  font-size: 2rem;
  letter-spacing: -0.03em;
}

.contact-details{
  margin-top: 18px;
  display: grid;
  gap: 10px;
}

.detail-item{
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-secondary);
  font-weight: 700;
}

.detail-item .icon{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.04);
  border: 1px solid rgba(0,0,0,0.06);
}

.detail-item .icon svg{
  width: 22px;
  height: 22px;
  fill: currentColor;
  color: #111827;
}

/* Social buttons */
.social-links-row{
  display: flex;
  gap: 10px;
  margin-top: 18px;
}

.social-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,0.06);
  background: rgba(0,0,0,0.03);
  transition: transform .25s var(--ease-apple), box-shadow .25s var(--ease-apple), background .25s var(--ease-apple);
}

.social-btn:hover{
  transform: translateY(-3px);
  box-shadow: 0 18px 42px rgba(0,0,0,0.10);
  background: rgba(0,0,0,0.04);
}

.social-btn svg{
  width: 22px;
  height: 22px;
  fill: currentColor;
}

.contact-chat-btn{
  margin-top: 16px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.08);
  background: #fff;
  color: var(--text-primary);
  font-weight: 800;
  cursor: pointer;
  transition: transform .2s var(--ease-apple), box-shadow .2s var(--ease-apple), background .2s var(--ease-apple);
}

.contact-chat-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(0,0,0,0.12);
  background: #f3f4f6;
}

.contact-chat-icon{
  width: 20px;
  height: 20px;
}

body[data-page="contact"] .chatbot-fab{
  display: none;
}

body[data-page="contact"] .chatbot{
  display: block;
  position: fixed;
  inset: 0;
  width: 100%;
  margin-top: 0;
  pointer-events: none;
  z-index: 9999;
}

body[data-page="contact"] .chatbot-panel{
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(720px, calc(100vw - 32px));
  height: 520px;
  margin: 0;
  transform: translate(-50%, -46%);
  opacity: 0;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  max-height: none;
  overflow: hidden;
  transition: opacity .2s var(--ease-apple), transform .2s var(--ease-apple);
}

body[data-page="contact"] .chatbot.open .chatbot-panel{
  opacity: 1;
  transform: translate(-50%, -50%);
  pointer-events: auto;
}

body[data-page="contact"] .chatbot.open{
  pointer-events: auto;
}

body[data-page="contact"] .chatbot-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.35);
  opacity: 0;
  transition: opacity .2s var(--ease-apple);
}

body[data-page="contact"] .chatbot.open .chatbot-backdrop{
  opacity: 1;
}

body[data-page="contact"] .chatbot-actions{
  z-index: 3;
}

body[data-page="contact"] .chatbot-body{
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

body[data-page="contact"] .chatbot-quick,
body[data-page="contact"] .chatbot-input{
  flex: 0 0 auto;
}

/* Form */
.form-group{ margin-bottom: 14px; }
.form-label{
  display: block;
  font-weight: 800;
  margin: 0 0 8px 0;
}
.form-input{
  width: 100%;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,0.10);
  padding: 12px 14px;
  outline: none;
  background: #fff;
  color: var(--text-primary);
  transition: border-color .25s var(--ease-apple), box-shadow .25s var(--ease-apple);
}

.form-input:focus{
  border-color: rgba(10,132,255,0.35);
  box-shadow: 0 0 0 4px rgba(10,132,255,0.12);
}

/* Button */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 0;
  cursor: pointer;
  border-radius: 16px;
  padding: 12px 16px;
  font-weight: 900;
  background: rgba(10,132,255,0.14);
  color: #0b5ed7;
  transition: transform .25s var(--ease-apple), background .25s var(--ease-apple), box-shadow .25s var(--ease-apple);
}

.btn:hover{
  transform: translateY(-3px);
  background: rgba(10,132,255,0.18);
  box-shadow: 0 18px 42px rgba(0,0,0,0.10);
}

.btn svg{
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* Hobbies grid */
.hobbies-grid{
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin-top: 10px;
}

.hobby-item{
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 18px;
  padding: 14px 12px;
  box-shadow: 0 10px 26px rgba(0,0,0,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-direction: column;
  transition: transform .25s var(--ease-apple), box-shadow .25s var(--ease-apple);
}

.hobby-item:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 42px rgba(0,0,0,0.10);
}

.hobby-icon{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.04);
  border: 1px solid rgba(0,0,0,0.06);
}

.hobby-icon svg{
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hobby-name{
  font-weight: 800;
  color: var(--text-secondary);
}

/* Delay classes for scroll-hidden */
.delay-1{ transition-delay: 0.05s; }
.delay-2{ transition-delay: 0.12s; }
.delay-3{ transition-delay: 0.19s; }
.delay-4{ transition-delay: 0.26s; }

/* Responsive */
@media (max-width: 1100px){
  .learning-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .process-steps{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hobbies-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px){
  /* Mobile perf: blur (backdrop-filter) can cause first-open lag on some phones */
  header{
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(245,245,247,0.98);
  }

  .menu-toggle{ display: none !important; }
  .hamburger{ display: inline-flex; }

  /* ✅ FIX: menü artık display none ile “geç açılıp geç kapanmıyor”
     .active olunca görünür, değilken görünmez ama DOM’da duruyor (akıcı) */
  .nav-links{
    position: absolute;
    right: 20px;
    top: 72px;
    background: rgba(255,255,255,0.95);
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 18px 42px rgba(0,0,0,0.10);
    border-radius: 18px;
    padding: 10px;
    flex-direction: column;
    gap: 6px;
    min-width: 200px;

    display: flex;
    opacity: 0;
    transform: translate3d(0,-6px,0);
    visibility: hidden;
    pointer-events: none;
    will-change: transform, opacity;
    transition: opacity 120ms var(--ease-apple), transform 120ms var(--ease-apple);
  }

  .nav-links.active{
    opacity: 1;
    transform: translate3d(0,0,0);
    visibility: visible;
    pointer-events: auto;
    will-change: transform, opacity;
    transition: opacity 120ms var(--ease-apple), transform 120ms var(--ease-apple);
  }

  .contact-wrapper{ grid-template-columns: 1fr; }
}

@media (max-width: 560px){
  .learning-grid{ grid-template-columns: 1fr; }
  .process-steps{ grid-template-columns: 1fr; }
  .hobbies-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Hover gecikmesi hissini azaltmak için daha hızlı tepki */
.hobbies-grid .hobby-item{
  transition: transform .18s var(--ease-apple), box-shadow .18s var(--ease-apple);
}
.hobbies-grid .hobby-item:hover{
  transform: translateY(-6px) scale(1.02);
}

/* =========================
   ABOUT - Skills (yeni tasarım)
========================= */

.skills-head h2{
  margin: 0 0 8px 0;
}
.skills-head p{
  margin: 0 0 22px 0;
}

.skills-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.skill-card{
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 18px;
  padding: 18px 18px 16px;
  box-shadow: 0 10px 26px rgba(0,0,0,0.06);
  transition: transform .25s var(--ease-apple), box-shadow .25s var(--ease-apple);
}

.skill-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 42px rgba(0,0,0,0.10);
}

.skill-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.skill-name{
  font-weight: 800;
  letter-spacing: -0.01em;
  font-size: 1.05rem;
  line-height: 1.25;
}

.skill-sub{
  margin-top: 6px;
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.45;
}

.skill-meta{
  color: var(--text-secondary);
  font-weight: 800;
  font-size: 0.95rem;
  white-space: nowrap;
}

/* bar */
.skill-bar{
  height: 10px;
  border-radius: 999px;
  background: #e5e5ea;
  overflow: hidden;
}

.skill-fill{
  height: 100%;
  width: 0%;
  background: var(--accent-color);
  border-radius: 999px;
  transition: width 1.05s var(--ease-apple);
  will-change: width;
}

/* mobil */
@media (max-width: 900px){
  .skills-grid{ grid-template-columns: 1fr; }
}

/* =========================
   PROJELER - Progress Board
========================= */

.stats-head h2{ margin:0 0 8px 0; }
.stats-head p{ margin:0 0 22px 0; }

.projects-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:16px;
}

.p-card{
  background:#fff;
  border:1px solid rgba(0,0,0,0.06);
  border-radius:18px;
  padding:16px;
  box-shadow:0 10px 26px rgba(0,0,0,0.06);
  transition:transform .25s var(--ease-apple), box-shadow .25s var(--ease-apple);
}
.p-card:hover{
  transform: translateY(-4px);
  box-shadow:0 18px 42px rgba(0,0,0,0.10);
}
.p-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:8px;
}
.p-top h3{ margin:0; font-size:1.05rem; letter-spacing:-0.01em; }

.p-status{
  font-weight:800;
  font-size:0.9rem;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,0.06);
  background: rgba(0,0,0,0.04);
  color: var(--text-secondary);
  white-space:nowrap;
}
.p-status.done{ background: rgba(16,185,129,0.10); border-color: rgba(16,185,129,0.18); color:#0f7a3d; }
.p-status.wip{ background: rgba(0,113,227,0.10); border-color: rgba(0,113,227,0.18); color:#0b5ed7; }
.p-status.plan{ background: rgba(234,88,12,0.10); border-color: rgba(234,88,12,0.18); color:#9a3412; }

.p-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }

.week-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:16px;
}
.week-col{
  background:#fff;
  border:1px solid rgba(0,0,0,0.06);
  border-radius:18px;
  padding:16px;
  box-shadow:0 10px 26px rgba(0,0,0,0.06);
}
.week-title{
  margin:0 0 12px 0;
  font-size:1.05rem;
  letter-spacing:-0.01em;
}
.week-list{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:10px;
  color: var(--text-secondary);
}
.week-list li{
  display:flex;
  gap:10px;
  align-items:flex-start;
  line-height:1.45;
}
.week-list .dot{
  width:8px; height:8px; border-radius:50%;
  background: rgba(0,113,227,0.55);
  margin-top:6px;
  flex: 0 0 auto;
}

.roadmap{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.rm-item{
  background:#fff;
  border:1px solid rgba(0,0,0,0.06);
  border-radius:18px;
  padding:14px 16px;
  box-shadow:0 10px 26px rgba(0,0,0,0.06);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.rm-left{ display:flex; align-items:center; gap:12px; }
.rm-badge{
  width:34px; height:34px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-weight:900;
  background: rgba(0,0,0,0.04);
  border:1px solid rgba(0,0,0,0.06);
}
.rm-title{ font-weight:900; letter-spacing:-0.01em; }
.rm-sub{ color: var(--text-secondary); margin-top:4px; }

.rm-state{
  font-weight:900;
  color: var(--text-secondary);
  white-space:nowrap;
}

.rm-item.done{
  border-color: rgba(16,185,129,0.18);
}
.rm-item.done .rm-badge{
  background: rgba(16,185,129,0.10);
  border-color: rgba(16,185,129,0.18);
  color:#0f7a3d;
}

.rm-item.active{
  border-color: rgba(0,113,227,0.18);
}
.rm-item.active .rm-badge{
  background: rgba(0,113,227,0.10);
  border-color: rgba(0,113,227,0.18);
  color:#0b5ed7;
}
.rm-item.active .rm-state{
  color:#0b5ed7;
}

@media (max-width: 1000px){
  .projects-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .week-grid{ grid-template-columns: 1fr; }
}

@media (max-width: 620px){
  .projects-grid{ grid-template-columns: 1fr; }
}
/* scroll animasyonu gecikmesi hover'ı geciktirmesin */
.step-card:hover { transition-delay: 0s !important; }
.step-card.scroll-visible { transition-delay: 0s !important; }
/* CONTACT sayfası daha dolu ve ortalı dursun */
.contact-section{
  min-height: calc(100vh - 72px); /* header yüksekliği */
  display: flex;
  align-items: center;           /* dikey ortalama */
  justify-content: center;       /* yatay ortalama */
  padding: 40px 0 70px;          /* nefes alanı */
}

/* kartlar çok yukarı kaçmasın, daha derli toplu */
.contact-wrapper{
  width: 100%;
  max-width: 980px;              /* biraz daha “tok” görünüm */
}
/* CONTACT – stacked layout (üst üste, ortalı, güçlü görünüm) */

.contact-section{
  min-height: auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 30px 0 60px;
}

.contact-wrapper{
  display: flex;
  flex-direction: column;     /* ÜST ÜSTE */
  gap: 24px;                  /* kartlar arası boşluk */
  width: 100%;
  max-width: 720px;           /* odaklı görünüm */
}

/* kartlar aynı genişlikte olsun */
.contact-info,
.contact-form-area{
  width: 100%;
}

/* başlık biraz daha güçlü */
.contact-title{
  font-size: clamp(1.9rem, 3.5vw, 2.5rem);
}

/* kartlara biraz daha derinlik */
.contact-info,
.contact-form-area{
  box-shadow: 0 24px 60px rgba(0,0,0,0.10);
}
/* Contact üst karttaki mail + konum ikonlarını gizle */
.contact-info .detail-item{
  display: none;
}
/* =========================
   PROJELER - Weekly & Roadmap reveal animasyonu
   (Projeler kısmındaki hissi buraya da taşı)
========================= */

/* Haftalık İlerleme: iki kutu ayrı ayrı gelsin */
.week-col{
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .6s var(--ease-apple), transform .6s var(--ease-apple);
  will-change: opacity, transform;
}

/* parent section görünür olunca */
.bubble-card.scroll-visible .week-col{
  opacity: 1;
  transform: translateY(0);
}

/* küçük stagger (soldan sağa) */
.bubble-card.scroll-visible .week-col:nth-child(1){ transition-delay: .06s; }
.bubble-card.scroll-visible .week-col:nth-child(2){ transition-delay: .14s; }

/* Roadmap: her satır tek tek gelsin */
.rm-item{
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .55s var(--ease-apple), transform .55s var(--ease-apple);
  will-change: opacity, transform;
}

.bubble-card.scroll-visible .rm-item{
  opacity: 1;
  transform: translateY(0);
}

/* roadmap stagger */
.bubble-card.scroll-visible .rm-item:nth-child(1){ transition-delay: .06s; }
.bubble-card.scroll-visible .rm-item:nth-child(2){ transition-delay: .12s; }
.bubble-card.scroll-visible .rm-item:nth-child(3){ transition-delay: .18s; }
.bubble-card.scroll-visible .rm-item:nth-child(4){ transition-delay: .24s; }
.bubble-card.scroll-visible .rm-item:nth-child(5){ transition-delay: .30s; }

/* Erişilebilirlik: reduced motion */
@media (prefers-reduced-motion: reduce){
  .week-col, .rm-item{
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}
/* =========================
   CHATBOT WIDGET (global)
========================= */

.chatbot{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9999;
  font-family: inherit;
}

.chatbot-fab{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  border: 1px solid rgba(0,0,0,0.08);
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(12px);
  border-radius: 999px;
  width: 44px;
  height: 44px;
  padding: 0;
  cursor: pointer;
  box-shadow: 0 18px 42px rgba(0,0,0,0.10);
  transition: transform .2s var(--ease-apple), box-shadow .2s var(--ease-apple);
  overflow: hidden;
}

.chatbot-fab:hover{
  transform: translateY(-2px);
  box-shadow: 0 22px 56px rgba(0,0,0,0.14);
}

.chatbot-fab-icon{
  width: 18px;
  height: 18px;
  color: var(--text-primary);
  transition: transform .2s var(--ease-apple), color .2s var(--ease-apple);
  display: block;
}

.chatbot-fab:hover .chatbot-fab-icon{
  transform: scale(1.12);
  color: var(--accent-color);
}

.chatbot-panel{
  position: absolute;
  right: 0;
  bottom: 56px;
  width: min(360px, calc(100vw - 36px));
  height: 520px;
  background: rgba(255,255,255,0.97);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 22px;
  box-shadow: 0 26px 70px rgba(0,0,0,0.16);
  overflow: hidden;

  opacity: 0;
  transform: translateY(10px) scale(0.98);
  pointer-events: none;
  transition: opacity .18s var(--ease-apple), transform .18s var(--ease-apple);
}

.chatbot.open .chatbot-panel{
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.chatbot-head{
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  padding: 14px 14px 12px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  background: rgba(245,245,247,0.8);
  backdrop-filter: blur(12px);
  min-height: 56px;
}

.chatbot-title{
  display: flex;
  align-items: center;
  gap: 10px;
}

.chatbot-avatar{
  width: 38px;
  height: 38px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 950;
  background: rgba(10,132,255,0.12);
  color: #0b5ed7;
  border: 1px solid rgba(10,132,255,0.18);
}

.chatbot-name{
  font-weight: 950;
  letter-spacing: -0.01em;
}
.chatbot-sub{
  font-size: 0.88rem;
  color: var(--text-secondary);
  margin-top: 2px;
}

.chatbot-close{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.12);
  background: #f3f4f6;
  cursor: pointer;
  font-weight: 900;
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}

.chatbot-close-icon{
  width: 18px;
  height: 18px;
  display: block;
  stroke: #111827;
}

.chatbot-body{
  height: calc(520px - 64px - 54px - 56px);
  padding: 14px;
  overflow: auto;
}

.chatbot-msg{
  display: flex;
  margin-bottom: 10px;
}

.chatbot-msg.bot{ justify-content: flex-start; }
.chatbot-msg.user{ justify-content: flex-end; }

.chatbot-bubble{
  max-width: 82%;
  border-radius: 18px;
  padding: 10px 12px;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 10px 26px rgba(0,0,0,0.06);
  line-height: 1.5;
  font-weight: 700;

  overflow-wrap: anywhere;
  word-break: break-word;
}


.chatbot-msg.bot .chatbot-bubble{
  background: rgba(0,0,0,0.03);
  color: var(--text-primary);
}

.chatbot-msg.user .chatbot-bubble{
  background: rgba(10,132,255,0.14);
  border-color: rgba(10,132,255,0.18);
  color: #0b5ed7;
}

.chatbot-quick{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 12px;
  border-top: 1px solid rgba(0,0,0,0.06);
  background: rgba(245,245,247,0.55);
}

.chatbot-chip{
  border: 1px solid rgba(0,0,0,0.06);
  background: rgba(255,255,255,0.9);
  border-radius: 999px;
  padding: 8px 10px;
  cursor: pointer;
  font-weight: 900;
  color: var(--text-secondary);
  transition: transform .18s var(--ease-apple);
}
.chatbot-chip:hover{ transform: translateY(-2px); }

.chatbot-input{
  display: flex;
  gap: 10px;
  padding: 12px;
  border-top: 1px solid rgba(0,0,0,0.06);
  background: rgba(255,255,255,0.92);
}

#chatbotText{
  flex: 1;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,0.10);
  padding: 12px 12px;
  outline: none;
  font-weight: 800;
}

#chatbotText:focus{
  border-color: rgba(10,132,255,0.35);
  box-shadow: 0 0 0 4px rgba(10,132,255,0.12);
}

.chatbot-send{
  border: 0;
  cursor: pointer;
  border-radius: 16px;
  padding: 12px 14px;
  font-weight: 950;
  background: rgba(10,132,255,0.14);
  color: #0b5ed7;
  transition: transform .2s var(--ease-apple);
}
.chatbot-send:hover{ transform: translateY(-2px); }

@media (max-width: 560px){
  .chatbot{ right: 12px; bottom: 12px; }
  .chatbot-panel{ height: 500px; }
}


/* Chatbot link style */
.chatbot-link{ color: inherit; text-decoration: underline; font-weight: 900; }
.chatbot-link:hover{ text-decoration: none; }
/* Chatbot linklere ikon ekle (href'e göre otomatik) */
.chatbot-link{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* ikon kutusu */
.chatbot-link::before{
  content: "";
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  display: inline-block;

  background: currentColor;

  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;

  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

/* GitHub ikonu */
.chatbot-link[href*="github.com"]::before{
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 .5C5.7.5.5 5.7.5 12c0 5.1 3.3 9.4 7.9 10.9.6.1.8-.3.8-.6v-2.2c-3.2.7-3.9-1.4-3.9-1.4-.5-1.3-1.3-1.6-1.3-1.6-1-.7.1-.7.1-.7 1.2.1 1.8 1.2 1.8 1.2 1 .1 2.7.8 3.3-1.2.1-.8.4-1.3.7-1.6-2.6-.3-5.3-1.3-5.3-5.8 0-1.3.5-2.4 1.2-3.2-.1-.3-.5-1.5.1-3.1 0 0 1-.3 3.3 1.2a11.4 11.4 0 0 1 6 0c2.3-1.5 3.3-1.2 3.3-1.2.6 1.6.2 2.8.1 3.1.8.8 1.2 1.9 1.2 3.2 0 4.5-2.7 5.5-5.3 5.8.4.4.8 1.1.8 2.2v3.2c0 .3.2.7.8.6A11.5 11.5 0 0 0 23.5 12C23.5 5.7 18.3.5 12 .5z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 .5C5.7.5.5 5.7.5 12c0 5.1 3.3 9.4 7.9 10.9.6.1.8-.3.8-.6v-2.2c-3.2.7-3.9-1.4-3.9-1.4-.5-1.3-1.3-1.6-1.3-1.6-1-.7.1-.7.1-.7 1.2.1 1.8 1.2 1.8 1.2 1 .1 2.7.8 3.3-1.2.1-.8.4-1.3.7-1.6-2.6-.3-5.3-1.3-5.3-5.8 0-1.3.5-2.4 1.2-3.2-.1-.3-.5-1.5.1-3.1 0 0 1-.3 3.3 1.2a11.4 11.4 0 0 1 6 0c2.3-1.5 3.3-1.2 3.3-1.2.6 1.6.2 2.8.1 3.1.8.8 1.2 1.9 1.2 3.2 0 4.5-2.7 5.5-5.3 5.8.4.4.8 1.1.8 2.2v3.2c0 .3.2.7.8.6A11.5 11.5 0 0 0 23.5 12C23.5 5.7 18.3.5 12 .5z'/%3E%3C/svg%3E");
}

/* Mail ikonu */
.chatbot-link[href^="mailto:"]::before{
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2zm0 4 8 5 8-5V6l-8 5-8-5v2z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2zm0 4 8 5 8-5V6l-8 5-8-5v2z'/%3E%3C/svg%3E");
}
/* FIX: Chatbot iç linklerde çıkan siyah kareyi kaldır */
.chatbot-link::before{
  display: none;
}

/* ikon sadece github + mail linklerinde görünsün */
.chatbot-link[href*="github.com"],
.chatbot-link[href^="mailto:"]{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.chatbot-link[href*="github.com"]::before,
.chatbot-link[href^="mailto:"]::before{
  display: inline-block;
}
/* =========================
   PROJELER - Weekly & Roadmap: p-card ile aynı animasyon hissi
   (hover anlık, gecikme yok, reveal/stagger iptal)
========================= */

.week-col,
.rm-item{
  opacity: 1 !important;
  transform: translateY(0) !important;

  transition:
    transform .25s var(--ease-apple),
    box-shadow .25s var(--ease-apple),
    border-color .25s var(--ease-apple) !important;

  transition-delay: 0s !important;
  will-change: transform, box-shadow;
}

/* p-card hover = yüksel + gölge */
.week-col:hover,
.rm-item:hover{
  transform: translateY(-4px) !important;
  box-shadow: 0 18px 42px rgba(0,0,0,0.10) !important;
  border-color: rgba(0,0,0,0.10) !important;
}
/* ==== Language Toggle (TR/EN) ==== */
.lang-toggle {
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
}

.lang-pill {
  position: relative;
  width: 74px;
  height: 34px;
  background: #e5e7eb;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px;
  font-weight: 900;
  font-size: 0.75rem;
}

.lang-opt {
  z-index: 2;
  width: 50%;
  text-align: center;
  color: #6b7280;
}

.lang-toggle[data-lang="tr"] .lang-tr,
.lang-toggle[data-lang="en"] .lang-en {
  color: #0b5ed7;
}

.lang-knob {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 30px;
  height: 26px;
  background: #fff;
  border-radius: 999px;
  box-shadow: 0 6px 14px rgba(0,0,0,.15);
  transition: transform .25s ease;
}

.lang-toggle[data-lang="en"] .lang-knob {
  transform: translateX(36px);
}
.weekly-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:16px;
  margin-top: 14px;
}
.week-card{
  background:#fff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 18px;
  padding: 16px;
}
@media (max-width: 900px){
  .weekly-grid{ grid-template-columns: 1fr; }
}

/* =========================
   DARK MODE
========================= */

body[data-theme="dark"]{
  --bg: #0b0f14;
  --card: #121822;
  --text-primary: #e5e7eb;
  --text-secondary: #9aa3b2;
  --accent-color: #60a5fa;
}

body[data-theme="dark"] header{
  background: rgba(12,16,22,0.88);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

body[data-theme="dark"] .nav-links a{
  color: var(--text-secondary);
}

body[data-theme="dark"] .nav-links a:hover{
  background: rgba(255,255,255,0.06);
  color: var(--text-primary);
}

body[data-theme="dark"] .nav-links a.active{
  background: rgba(96,165,250,0.18);
  color: #93c5fd;
}

body[data-theme="dark"] .lang-toggle{
  color: var(--text-primary);
}

body[data-theme="dark"] .theme-toggle{
  background-color: #101826;
  border-color: rgba(255,255,255,0.08);
  box-shadow: 0 0 32px 12px rgba(0,0,0,0.35);
  color: #e5e7eb;
}

body[data-theme="dark"] .hamburger,
body[data-theme="dark"] .menu-toggle{
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
}

body[data-theme="dark"] .menu-toggle .bar{
  background: #e5e7eb;
}

body[data-theme="dark"] .line{
  stroke: #e5e7eb;
}

body[data-theme="dark"] .bubble-card,
body[data-theme="dark"] .learning-card,
body[data-theme="dark"] .step-card,
body[data-theme="dark"] .contact-info,
body[data-theme="dark"] .contact-form-area,
body[data-theme="dark"] .hobby-item,
body[data-theme="dark"] .skill-card,
body[data-theme="dark"] .p-card,
body[data-theme="dark"] .week-card,
body[data-theme="dark"] .rm-item{
  background: #121822;
  border-color: rgba(255,255,255,0.08);
  box-shadow: 0 12px 28px rgba(0,0,0,0.45);
}

body[data-theme="dark"] .tag,
body[data-theme="dark"] .step-icon,
body[data-theme="dark"] .hobby-icon,
body[data-theme="dark"] .rm-badge,
body[data-theme="dark"] .detail-item .icon{
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.08);
}

body[data-theme="dark"] .learning-badge{
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.12);
}

body[data-theme="dark"] .social-btn{
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.08);
}

body[data-theme="dark"] .social-btn:hover{
  background: rgba(255,255,255,0.1);
}

body[data-theme="dark"] .contact-chat-btn{
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.14);
  color: var(--text-primary);
}

body[data-theme="dark"] .contact-chat-btn:hover{
  background: rgba(255,255,255,0.14);
  box-shadow: 0 16px 36px rgba(0,0,0,0.35);
}

body[data-theme="dark"] .form-input,
body[data-theme="dark"] #chatbotText{
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.12);
  color: var(--text-primary);
}

body[data-theme="dark"] .chatbot-fab,
body[data-theme="dark"] .chatbot-panel,
body[data-theme="dark"] .chatbot-head,
body[data-theme="dark"] .chatbot-input,
body[data-theme="dark"] .chatbot-quick{
  background: rgba(15,20,27,0.9);
  border-color: rgba(255,255,255,0.08);
}

body[data-theme="dark"] .chatbot-fab-icon{
  color: var(--text-primary);
}

body[data-theme="dark"] .chatbot-close{
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.18);
  color: var(--text-primary);
}

body[data-theme="dark"] .chatbot-close-icon{
  stroke: var(--text-primary);
}

body[data-theme="dark"] .chatbot-chip{
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.08);
  color: var(--text-secondary);
}

body[data-theme="dark"] .chatbot-msg.bot .chatbot-bubble{
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.08);
  color: var(--text-primary);
}

body[data-theme="dark"] .chatbot-msg.user .chatbot-bubble{
  background: rgba(96,165,250,0.2);
  border-color: rgba(96,165,250,0.28);
  color: #cfe4ff;
}

@media (max-width: 900px){
  body[data-theme="dark"] .nav-links{
    background: rgba(18,24,33,0.98);
    border-color: rgba(255,255,255,0.08);
    box-shadow: 0 18px 42px rgba(0,0,0,0.5);
  }
}

/* =========================
   CHATBOT PANEL - REFRESH
========================= */

.chatbot-panel{
  display: flex;
  flex-direction: column;
  background: #f8fafc;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 24px;
  box-shadow: 0 28px 70px rgba(15,23,42,0.2);
  overflow: hidden;
}

.chatbot-head{
  flex: 0 0 auto;
  background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
  border-bottom: 1px solid rgba(0,0,0,0.06);
  padding: 14px 52px 14px 16px;
  min-height: 60px;
  position: relative;
  z-index: 2;
}

.chatbot-title{
  align-items: center;
}

.chatbot-avatar{
  background: rgba(10,132,255,0.14);
  color: #0b5ed7;
}

.chatbot-actions{
  display: inline-flex;
  gap: 8px;
  position: absolute;
  top: 12px;
  right: 12px;
}

.chatbot-action{
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.08);
  background: #fff;
  color: #111827;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .18s var(--ease-apple), box-shadow .18s var(--ease-apple), background .18s var(--ease-apple);
}

.chatbot-action:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.12);
  background: #eef2f7;
}

.chatbot-action-icon{
  width: 18px;
  height: 18px;
  display: block;
}

.chatbot-clear-icon{
  width: 16px;
  height: 16px;
  display: block;
}

.chatbot-clear-icon path{
  fill: currentColor;
}

.chatbot-panel.collapsed{
  height: auto;
}

.chatbot-panel.collapsed .chatbot-body,
.chatbot-panel.collapsed .chatbot-quick,
.chatbot-panel.collapsed .chatbot-input{
  display: none;
}

.chatbot-body{
  background: #f3f4f6;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  flex: 1 1 auto;
  height: auto;
}

.chatbot-quick{
  background: #fff;
  border-top: 0;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

.chatbot-chip{
  background: #fff;
  border-color: rgba(0,0,0,0.08);
  color: var(--text-secondary);
}

.chatbot-input{
  background: #fff;
  border-top: 0;
}

.chatbot-send{
  background: #e0ecff;
  color: #0b5ed7;
}

body[data-theme="dark"] .chatbot-panel{
  background: #0f172a;
  border-color: rgba(255,255,255,0.08);
  box-shadow: 0 28px 70px rgba(0,0,0,0.5);
}

body[data-theme="dark"] .chatbot-head{
  background: linear-gradient(180deg, #111827 0%, #0f172a 100%);
  border-bottom-color: rgba(255,255,255,0.08);
}

body[data-theme="dark"] .chatbot-avatar{
  background: rgba(96,165,250,0.18);
  color: #93c5fd;
  border-color: rgba(96,165,250,0.2);
}

body[data-theme="dark"] .chatbot-action{
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.12);
  color: #e5e7eb;
}

body[data-theme="dark"] .chatbot-action:hover{
  background: rgba(255,255,255,0.12);
}

body[data-theme="dark"] .chatbot-body{
  background: #0b1220;
  border-bottom-color: rgba(255,255,255,0.08);
}

body[data-theme="dark"] .chatbot-quick{
  background: #0f172a;
  border-bottom-color: rgba(255,255,255,0.08);
}

body[data-theme="dark"] .chatbot-chip{
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.12);
  color: #cbd5f5;
}

body[data-theme="dark"] .chatbot-input{
  background: #0f172a;
}

body[data-theme="dark"] .chatbot-send{
  background: rgba(96,165,250,0.18);
  color: #cfe4ff;
}