/* =============================================================
   CHATOPYA — Tasarım Sistemi: Bileşen Katmanı
   -------------------------------------------------------------
   chatopya-tokens.css'ten SONRA yüklenir. Tüm değerler token
   değişkenlerinden gelir; burada sabit renk/ölçü yazılmaz.
   ============================================================= */

/* =============================================================
   1. BUTONLAR
   ============================================================= */

.cy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--cy-space-2);
  min-height: 48px;                 /* dokunmatik hedef */
  padding: var(--cy-space-3) var(--cy-space-6);
  font-family: var(--cy-font-body);
  font-size: var(--cy-text-base);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: var(--cy-radius);
  cursor: pointer;
  transition: background-color var(--cy-duration) var(--cy-ease),
              border-color var(--cy-duration) var(--cy-ease),
              color var(--cy-duration) var(--cy-ease);
}

/* Birincil: yeşil zemin + koyu yazı.
   Beyaz yazı kullanılmaz — kontrast testini geçmez. */
.cy-btn-primary {
  background: var(--cy-action);
  color: var(--cy-action-ink);
}
.cy-btn-primary:hover,
.cy-btn-primary:focus { background: var(--cy-action-600); color: var(--cy-action-ink); }

/* İkincil: marka yeşili zemin + beyaz yazı */
.cy-btn-brand {
  background: var(--cy-brand);
  color: #fff;
}
.cy-btn-brand:hover,
.cy-btn-brand:focus { background: var(--cy-brand-600); color: #fff; }

/* Üçüncül: beyaz zemin + kenarlık */
.cy-btn-outline {
  background: var(--cy-surface);
  color: var(--cy-ink-900);
  border-color: var(--cy-ink-200);
  font-weight: 600;
}
.cy-btn-outline:hover,
.cy-btn-outline:focus {
  background: var(--cy-surface-sunk);
  color: var(--cy-ink-900);
  border-color: var(--cy-ink-300);
}

/* Sade metin butonu */
.cy-btn-ghost {
  background: transparent;
  color: var(--cy-ink-700);
  font-weight: 600;
  padding-inline: var(--cy-space-3);
}
.cy-btn-ghost:hover,
.cy-btn-ghost:focus { color: var(--cy-brand); background: var(--cy-surface-sunk); }

/* Header'daki "Giriş Yap" ghost butonu koyu zeminde. */
.cy-header-actions .cy-btn-ghost { color: var(--cy-on-dark); }

/* Koyu zemin üzerinde */
.cy-on-dark .cy-btn-outline {
  background: transparent;
  color: #fff;
  border-color: var(--cy-border-dark);
}
.cy-on-dark .cy-btn-outline:hover { background: var(--cy-surface-dark-2); color: #fff; }

.cy-btn-sm { min-height: 40px; padding: var(--cy-space-2) var(--cy-space-4); font-size: var(--cy-text-sm); }
.cy-btn-block { width: 100%; }

/* Altı çizili vurgulu bağlantı */
.cy-link-accent {
  display: inline-flex;
  align-items: center;
  /* Flex sutun icinde kart genisligine yayilmasin; alt cizgi metin
     kadar olmali. */
  align-self: flex-start;
  gap: var(--cy-space-2);
  font-weight: 700;
  color: var(--cy-brand);
  text-decoration: none;
  border-bottom: 2px solid var(--cy-action);
  padding-bottom: 2px;
  transition: color var(--cy-duration) var(--cy-ease);
}
.cy-link-accent:hover { color: var(--cy-brand-600); }

/* =============================================================
   2. HEADER
   ============================================================= */

.cy-header {
  position: sticky;
  top: 0;
  z-index: var(--cy-z-header);
  /* Logo tam kilit (Meta Tech Provider rozetli) acik renkli, koyu zemin
     icin tasarlanmis; okunur olmasi icin header koyu zemine cevrildi. */
  background: var(--cy-surface-dark);
  border-bottom: 1px solid var(--cy-border-dark);
  transition: box-shadow var(--cy-duration) var(--cy-ease);
}
body.scrolled .cy-header { box-shadow: var(--cy-shadow-sm); }

/* Header, icerik kabindan genis: 7 menu baglantisi + dil + iki buton
   1200px'lik kaba sigmiyor, baglantilar iki satira kiriliyordu. */
.cy-header-inner {
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: var(--cy-space-6);
  min-height: 76px;
  display: flex;
  align-items: center;
  gap: var(--cy-space-6);
}

/* ---- Logo ----
   Tek gorsel (tam kilit: Meta rozeti + kelime markasi + alt yazi);
   yuksekligi sabit, genislik en-boy oranindan gelir. Eski duz kelime
   markasindan (392x96) daha kare bir oran (467x176) tasidigindan
   biraz daha yuksek render edilip alt yazinin okunur kalmasi saglanir. */
.cy-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}
.cy-logo img {
  display: block;
  height: 58px;
  width: auto;
}

/* ---- Ana menü ---- */
.cy-nav { flex-grow: 1; }
.cy-nav > ul {
  display: flex;
  align-items: center;
  gap: var(--cy-space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}
.cy-nav > ul > li { flex-shrink: 0; }
.cy-nav a {
  display: inline-flex;
  align-items: center;
  gap: var(--cy-space-2);
  padding: var(--cy-space-2) 0;
  font-size: var(--cy-text-sm);
  font-weight: 600;
  white-space: nowrap;
  color: var(--cy-ink-700);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color var(--cy-duration) var(--cy-ease),
              border-color var(--cy-duration) var(--cy-ease);
}
/* Ust duzey baglantilar dogrudan koyu header cubugunda; acilir menu
   (.cy-nav-menu) kendi beyaz zemininde kaliyor, bu yuzden yalnizca
   dogrudan cocuklar hedeflenir. Yalniz masaustu: 1199.98px altinda
   .cy-nav, kendi beyaz zeminli acilir cekmeceye donusuyor. */
@media (min-width: 1200px) {
  .cy-header .cy-nav > ul > li > a {
    color: var(--cy-on-dark);
  }
  .cy-header .cy-nav > ul > li > a:hover,
  .cy-header .cy-nav > ul > li > a.cy-nav-active {
    color: var(--cy-action);
  }
}

/* ---- Açılır menü: Çözümler ---- */
.cy-nav-group { position: relative; }
.cy-nav-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--cy-space-2);
  padding: var(--cy-space-2) 0;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  font-family: var(--cy-font-body);
  font-size: var(--cy-text-sm);
  font-weight: 600;
  white-space: nowrap;
  color: var(--cy-ink-700);
  cursor: pointer;
  transition: color var(--cy-duration) var(--cy-ease),
              border-color var(--cy-duration) var(--cy-ease);
}
.cy-nav-trigger:hover { color: var(--cy-brand); }
.cy-nav-trigger.cy-nav-active { color: var(--cy-brand); border-bottom-color: var(--cy-action); }
@media (min-width: 1200px) {
  .cy-header .cy-nav-trigger { color: var(--cy-on-dark); }
  .cy-header .cy-nav-trigger:hover,
  .cy-header .cy-nav-trigger.cy-nav-active { color: var(--cy-action); }
}
.cy-nav-trigger .bi { font-size: 0.7rem; transition: transform var(--cy-duration) var(--cy-ease); }
.cy-nav-trigger[aria-expanded="true"] .bi { transform: rotate(180deg); }

.cy-nav-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 17rem;
  margin: 0;
  padding: var(--cy-space-2);
  list-style: none;
  background: var(--cy-surface);
  border: 1px solid var(--cy-ink-100);
  border-radius: var(--cy-radius);
  box-shadow: var(--cy-shadow-lg);
  display: none;
  z-index: var(--cy-z-drawer);
}
.cy-nav-trigger[aria-expanded="true"] + .cy-nav-menu { display: block; }
.cy-nav-menu a {
  display: flex;
  align-items: center;
  gap: var(--cy-space-2);
  padding: var(--cy-space-3);
  min-height: 44px;
  border-bottom: none;
  border-radius: var(--cy-radius-sm);
}
.cy-nav-menu a:hover { background: var(--cy-surface-sunk); }
.cy-nav-menu a.cy-nav-active { background: var(--cy-brand-050); color: var(--cy-brand); }
.cy-nav a:hover { color: var(--cy-brand); }
.cy-nav a.cy-nav-active {
  color: var(--cy-brand);
  border-bottom-color: var(--cy-action);
}

.cy-nav-badge {
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--cy-brand);
  background: var(--cy-brand-050);
  border-radius: var(--cy-radius-pill);
  padding: 2px 7px;
}

/* ---- Sağdaki aksiyonlar ---- */
.cy-header-actions {
  display: flex;
  align-items: center;
  gap: var(--cy-space-3);
  flex-shrink: 0;
}

/* ---- Dil değiştirici (lang.js kancaları korunur) ---- */
.lang-switcher { position: relative; }
.ls-btn {
  display: flex;
  align-items: center;
  gap: var(--cy-space-2);
  min-height: 40px;
  padding: var(--cy-space-2) var(--cy-space-3);
  background: transparent;
  border: 1px solid var(--cy-border-dark);
  border-radius: var(--cy-radius-sm);
  font-family: var(--cy-font-body);
  font-size: var(--cy-text-xs);
  font-weight: 700;
  color: var(--cy-on-dark);
  cursor: pointer;
  transition: border-color var(--cy-duration) var(--cy-ease);
}
.ls-btn:hover { border-color: var(--cy-ink-300); }
.ls-flag-img, .ls-opt-flag-img { border-radius: 2px; display: block; }
.ls-chevron { font-size: 0.7rem; color: var(--cy-on-dark); }

.ls-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 180px;
  background: var(--cy-surface);
  border: 1px solid var(--cy-ink-100);
  border-radius: var(--cy-radius);
  box-shadow: var(--cy-shadow-lg);
  padding: var(--cy-space-1);
  display: none;
  z-index: var(--cy-z-drawer);
}
.ls-dropdown.ls-open { display: block; }
.ls-option {
  display: flex;
  align-items: center;
  gap: var(--cy-space-3);
  width: 100%;
  min-height: 44px;
  padding: var(--cy-space-2) var(--cy-space-3);
  background: transparent;
  border: none;
  border-radius: var(--cy-radius-sm);
  font-family: var(--cy-font-body);
  font-size: var(--cy-text-sm);
  font-weight: 600;
  color: var(--cy-ink-700);
  cursor: pointer;
  text-align: left;
}
.ls-option:hover { background: var(--cy-surface-sunk); }
.ls-opt-label { flex-grow: 1; }
.ls-check { opacity: 0; color: var(--cy-brand); }
.ls-option.ls-active .ls-check { opacity: 1; }

/* ---- Mobil menü düğmesi ---- */
.mobile-nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  /* Koyu header cubugu uzerinde her zaman gorunur olmali. */
  color: var(--cy-on-dark);
  background: transparent;
  border: none;
  cursor: pointer;
}

/* ---- Mobil çekmece ---- */
@media (max-width: 1199.98px) {
  .cy-header-inner { gap: var(--cy-space-4); min-height: 64px; padding-inline: var(--cy-space-4); }
  /* Demo butonu ve hamburger ile ayni satira sigmasi icin kucultulur. */
  .cy-logo img { height: 34px; }
  .mobile-nav-toggle { display: flex; }
  .cy-header-actions .cy-btn-ghost,
  .cy-header-actions .lang-switcher { display: none; }

  .cy-nav {
    position: fixed;
    inset: 64px 0 0 auto;
    width: min(340px, 86vw);
    background: var(--cy-surface);
    border-left: 1px solid var(--cy-ink-100);
    box-shadow: var(--cy-shadow-lg);
    padding: var(--cy-space-6) var(--cy-space-6) var(--cy-space-12);
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform var(--cy-duration-lg) var(--cy-ease);
  }
  .cy-nav > ul {
    flex-direction: column;
    align-items: stretch;
    gap: var(--cy-space-1);
  }
  .cy-nav a {
    padding: var(--cy-space-3) 0;
    font-size: var(--cy-text-base);
    border-bottom: 1px solid var(--cy-ink-050);
  }
  .cy-nav a.cy-nav-active { border-bottom-color: var(--cy-action); }

  /* Cekmecede acilir menu yok: baslik + girintili liste olarak akar. */
  .cy-nav-trigger {
    width: 100%;
    justify-content: space-between;
    padding: var(--cy-space-3) 0;
    font-size: var(--cy-text-base);
    border-bottom: 1px solid var(--cy-ink-050);
    cursor: default;
    pointer-events: none;
    color: var(--cy-ink-400);
    font-size: var(--cy-text-xs);
    letter-spacing: var(--cy-tracking-wide);
    text-transform: uppercase;
  }
  .cy-nav-trigger .bi { display: none; }
  .cy-nav-trigger.cy-nav-active { color: var(--cy-ink-400); border-bottom-color: var(--cy-ink-050); }

  .cy-nav-menu {
    position: static;
    display: block;
    min-width: 0;
    margin: 0;
    padding: 0 0 0 var(--cy-space-4);
    background: none;
    border: none;
    box-shadow: none;
  }
  .cy-nav-menu a { padding: var(--cy-space-3) 0; border-radius: 0; border-bottom: 1px solid var(--cy-ink-050); }
  .cy-nav-menu a:hover { background: none; }
  .cy-nav-menu a.cy-nav-active { background: none; }

  body.mobile-nav-active .cy-nav { transform: translateX(0); }
  body.mobile-nav-active { overflow: hidden; }

  /* main.css, cekmece acikken dugmeyi mutlak konumlandirip beyaza
     ceviriyor. Yeni header'da dugme yerinde kalir. */
  body.mobile-nav-active .mobile-nav-toggle {
    position: static;
    top: auto;
    right: auto;
    font-size: 1.6rem;
    color: var(--cy-on-dark);
    z-index: auto;
  }

  body.mobile-nav-active::after {
    content: "";
    position: fixed;
    inset: 64px 0 0 0;
    background: rgba(11, 31, 28, 0.45);
    z-index: calc(var(--cy-z-header) - 1);
  }
}

@media (min-width: 1200px) {
  .cy-nav-mobile-only { display: none; }
}

/* =============================================================
   3. BREADCRUMB
   ============================================================= */

.cy-breadcrumb {
  background: var(--cy-surface-sunk);
  border-bottom: 1px solid var(--cy-ink-100);
}
.cy-breadcrumb-inner {
  max-width: var(--cy-container);
  margin-inline: auto;
  padding: var(--cy-space-3) var(--cy-space-6);
}
.cy-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cy-space-2);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--cy-text-xs);
}
.cy-breadcrumb li { display: flex; align-items: center; gap: var(--cy-space-2); }
.cy-breadcrumb a { color: var(--cy-ink-500); text-decoration: none; font-weight: 600; }
.cy-breadcrumb a:hover { color: var(--cy-brand); text-decoration: underline; }
.cy-breadcrumb [aria-current="page"] { color: var(--cy-ink-900); font-weight: 700; }
.cy-breadcrumb-sep { color: var(--cy-ink-300); }

/* =============================================================
   4. KART · ROZET · SSS
   ============================================================= */

.cy-card {
  background: var(--cy-surface);
  border: 1px solid var(--cy-ink-100);
  border-radius: var(--cy-radius-lg);
  padding: var(--cy-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--cy-space-3);
}
.cy-card-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--cy-radius);
  background: var(--cy-brand-050);
  color: var(--cy-brand-600);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}
.cy-card h3 { margin: 0; font-size: var(--cy-text-xl); font-weight: 600; }
.cy-card p { margin: 0; font-size: var(--cy-text-sm); color: var(--cy-ink-500); }

.cy-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--cy-space-2);
  font-size: var(--cy-text-xs);
  font-weight: 700;
  color: var(--cy-brand);
  background: var(--cy-brand-050);
  border-radius: var(--cy-radius-pill);
  padding: var(--cy-space-2) var(--cy-space-4);
}
.cy-badge-warn { color: var(--cy-warn-ink); background: var(--cy-warn-050); }

.cy-eyebrow {
  font-size: var(--cy-text-xs);
  font-weight: 700;
  letter-spacing: var(--cy-tracking-wide);
  text-transform: uppercase;
  color: var(--cy-ink-500);
}

/* =============================================================
   5. BÖLÜM YARDIMCILARI
   ============================================================= */

.cy-section { padding-block: var(--cy-section-y); }
.cy-section-alt { background: var(--cy-surface-alt); border-block: 1px solid var(--cy-ink-050); }
.cy-section-dark { background: var(--cy-surface-dark); color: var(--cy-on-dark); }
.cy-section-dark h1, .cy-section-dark h2,
.cy-section-dark h3, .cy-section-dark h4 { color: #fff; }

.cy-container {
  max-width: var(--cy-container);
  margin-inline: auto;
  padding-inline: var(--cy-space-6);
}

@media (max-width: 767.98px) {
  .cy-section { padding-block: var(--cy-section-y-mobile); }
  .cy-container, .cy-breadcrumb-inner { padding-inline: var(--cy-space-4); }
}

/* =============================================================
   6. FOOTER
   ============================================================= */

.cy-footer {
  background: var(--cy-surface-dark);
  color: var(--cy-on-dark);
  padding-block: var(--cy-space-16) var(--cy-space-8);
  font-size: var(--cy-text-sm);
}
.cy-footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: var(--cy-space-8);
}
.cy-footer-brand { display: flex; flex-direction: column; gap: var(--cy-space-4); }
.cy-footer-logo {
  display: block;
  height: 60px;
  width: auto;
  align-self: flex-start;
}
.cy-footer-brand p { margin: 0; line-height: var(--cy-leading-body); max-width: 34ch; }

.cy-footer-contact { display: flex; flex-direction: column; gap: var(--cy-space-2); }
.cy-footer-contact div { display: flex; gap: var(--cy-space-3); align-items: flex-start; }
.cy-footer-contact i { color: var(--cy-action); margin-top: 3px; flex-shrink: 0; }
.cy-footer-contact a { color: var(--cy-on-dark); text-decoration: none; }
.cy-footer-contact a:hover { color: #fff; text-decoration: underline; }

.cy-footer-col { display: flex; flex-direction: column; gap: var(--cy-space-3); }
.cy-footer-col h2 {
  font-family: var(--cy-font-body);
  font-size: var(--cy-text-xs);
  font-weight: 700;
  letter-spacing: var(--cy-tracking-wide);
  text-transform: uppercase;
  color: #fff;
  margin: 0;
}
.cy-footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--cy-space-2); }
.cy-footer-col a {
  color: var(--cy-on-dark);
  text-decoration: none;
  transition: color var(--cy-duration) var(--cy-ease);
}
.cy-footer-col a:hover { color: #fff; text-decoration: underline; }

.cy-footer-bottom {
  margin-top: var(--cy-space-12);
  padding-top: var(--cy-space-6);
  border-top: 1px solid var(--cy-border-dark);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cy-space-4);
}
.cy-footer-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cy-space-3);
  flex-grow: 1;
  font-size: var(--cy-text-xs);
}
.cy-footer-legal a { color: var(--cy-on-dark); text-decoration: none; }
.cy-footer-legal a:hover { color: #fff; text-decoration: underline; }
.cy-footer-legal span { color: var(--cy-ink-500); }

.cy-footer-social { display: flex; gap: var(--cy-space-2); }
.cy-footer-social a {
  width: 44px;
  height: 44px;
  border-radius: var(--cy-radius-sm);
  border: 1px solid var(--cy-border-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cy-on-dark);
  font-size: 1.05rem;
  transition: background-color var(--cy-duration) var(--cy-ease), color var(--cy-duration) var(--cy-ease);
}
.cy-footer-social a:hover { background: var(--cy-surface-dark-2); color: #fff; }

@media (max-width: 991.98px) {
  .cy-footer-grid { grid-template-columns: repeat(2, 1fr); gap: var(--cy-space-8); }
  .cy-footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 575.98px) {
  .cy-footer-grid { grid-template-columns: 1fr; }
}

/* =============================================================
   7. YUKARI ÇIK
   ============================================================= */

.scroll-top {
  position: fixed;
  /* Sag alt kose harici sohbet eklentisine ait; bu yuzden sol altta */
  left: var(--cy-space-6);
  bottom: var(--cy-space-6);
  width: 48px;
  height: 48px;
  border-radius: var(--cy-radius);
  background: var(--cy-brand);
  color: #fff;
  font-size: 1.5rem;
  box-shadow: var(--cy-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--cy-duration) var(--cy-ease), background-color var(--cy-duration) var(--cy-ease);
  z-index: calc(var(--cy-z-header) - 10);
}
.scroll-top.active { opacity: 1; visibility: visible; }
.scroll-top:hover { background: var(--cy-brand-600); color: #fff; }

/* =============================================================
   8. MEVCUT SAYFALAR İÇİN ERİŞİLEBİLİRLİK DÜZELTMELERİ
   -------------------------------------------------------------
   Faz 2+ sayfaları yeniden yazılana kadar, mevcut markup'taki
   kontrast ve dokunmatik hedef sorunlarını kapatır.
   ============================================================= */

/* Bootstrap'in .text-success rengi (#198754) hem beyaz hem koyu zeminde
   zayif kaliyordu. Varsayilan olarak acik zemine uygun koyu yesil,
   koyu bolumlerde ise acik yesil kullanilir. */
.text-success { color: var(--cy-brand-600) !important; }

.hero-section-new .text-success,
.intd-notif .text-success,
.demo-badge .text-success,
.cp-retmind-pills .text-success,
.cy-section-dark .text-success,
.cy-on-dark .text-success { color: #4ADE80 !important; }

/* Mevcut hero/paket butonlarının dokunmatik hedefi ve tipografisi */
.btn-hero-primary,
.btn-hero-secondary,
.pk-cta {
  min-height: 48px;
  font-family: var(--cy-font-body);
  font-weight: 700;
}

/* AOS: tek tip, tek seferlik, kısa */
[data-aos] { transition-duration: var(--cy-duration-lg) !important; }