/* ==========================================================================
   BiyoCard — site.css
   Renk ve tipografi token'ları docs/TASARIM.md'den gelir (Adım 0 ile doğrulandı).
   Kodda ham hex yazılmaz; :root değişkenleri kullanılır.
   ========================================================================== */

:root {
  /* Marka */
  --bc-red:          #be1e2d; /* birincil CTA */
  --bc-red-bright:   #bf202f; /* hover/parlak varyant */
  --bc-red-pressed:  #9e1926; /* basılı */
  --bc-red-soft:     rgba(190, 30, 45, 0.12);

  /* İkincil marka (lacivert) */
  --bc-navy:         #272c46; /* giriş butonu / ikincil */
  --bc-navy-deep:    #1a3680;

  /* Koyu yüzeyler */
  --bc-surface-base: #131621; /* menü + koyu bölüm zemini */
  --bc-surface-input:#231f20;

  /* Metin */
  --bc-text-primary:   #ffffff;
  --bc-text-secondary: #b4b4b8;
  --bc-text-on-dark:   #ffffff;

  /* Açık zemin */
  --bc-light-bg:     #ffffff;
  --bc-light-bg-alt: #f5f5f6;
  --bc-light-text:   #141416;

  /* Web-only "çalışma modeli" dekoratif renkler */
  --bc-cm-blue:   #416bae;
  --bc-cm-purple: #903e97;
  --bc-cm-green:  #67b745;
  --bc-cm-orange-red: #ee3926;
  --bc-cm-cyan:   #19a7da;
  --bc-cm-orange: #f68e1f;

  /* Tipografi (site özel font yüklemiyor → system-ui) */
  --bc-font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Ölçü */
  --bc-radius-btn: 12px;
}

html { font-size: 16px; scroll-behavior: smooth; position: relative; min-height: 100%; }

body {
  margin: 0;
  font-family: var(--bc-font-body);
  color: var(--bc-light-text);
  background: var(--bc-light-bg);
  overflow-x: hidden; /* yatay taşma/beyaz boşluk engellenir */
}

/* ------------------------------------------------------------------ Slider */
/* bxSlider varsayılan olarak beyaz 5px kenarlık + beyaz zemin + gölge + alt
   boşluk + max-width ortalama ekler. Orijinal sitedeki gibi hepsi sıfırlanır
   (aksi halde hero'nun kenarında beyaz boşluk kalır). */
.bx-wrapper {
  margin: 0 !important;
  max-width: 100% !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}
.bx-wrapper .bx-viewport {
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  left: 0 !important;
}
.bc-slider img { display: block; width: 100%; }

/* Hero: görseldeki "Uygulamayı İndir" butonunu tıklanabilir kılan şeffaf katman.
   Konumlar görsel oranına göre yüzdeyle verildiği için her ekranda hizalı kalır. */
.bc-hero-slide { position: relative; }
.bc-hero-slide img { display: block; width: 100%; }
.bc-hero-cta {
  position: absolute;
  left: 52.7%;
  top: 61.1%;
  width: 16.4%;
  height: 4.6%;
  border-radius: 9px;
  z-index: 2;
}
.bc-hero-cta:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ------------------------------------------------------------------ Navbar */

.bc-menu-bar {
  background: var(--bc-surface-base);
  min-height: 90px;
}

.bc-logo img { height: 40px; width: auto; max-width: 100%; }

.bc-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 4px;
  font-weight: 700;
}

.bc-menu li { display: inline-block; }

.bc-menu li a {
  text-decoration: none;
  color: var(--bc-text-on-dark);
  padding: 18px 20px;
  display: inline-block;
  cursor: pointer;
}

.bc-menu li a:hover { color: var(--bc-red-bright); }

/* Birincil CTA butonu (Uygulamayı İndir) — eski buybutton yerine */
.bc-btn-primary,
a.bc-btn-primary {
  background: var(--bc-red);
  color: #fff !important;
  padding: 8px 18px !important;
  border-radius: 9px;
  border: none;
  font-weight: 700;
  text-decoration: none;
  display: inline-block;
  transition: background .15s ease, transform .05s ease;
}
.bc-btn-primary:hover  { background: var(--bc-red-bright); color: #fff !important; }
.bc-btn-primary:active { background: var(--bc-red-pressed); transform: scale(.98); }

/* Büyük CTA (eski siparisbutton) */
.bc-btn-cta {
  background: var(--bc-red);
  padding: 12px 28px;
  color: #fff;
  text-decoration: none;
  font-size: 1.35rem;
  font-weight: 700;
  border-radius: 13px;
  display: inline-block;
  border: none;
}
.bc-btn-cta:hover  { background: var(--bc-red-bright); color: #fff; }
.bc-btn-cta:active { background: var(--bc-red-pressed); }

/* Mobil açılır menü (topnav) */
.bc-topnav { display: none; background: var(--bc-surface-base); position: relative; }
.bc-topnav a {
  color: #fff;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  display: block;
}
.bc-topnav a:hover { background: #ddd; color: #000; }
.bc-topnav a.icon { position: absolute; right: 0; top: 0; background: #000; }
.bc-topnav #bcMobileLinks { display: none; }

/* ------------------------------------------------ Çalışma modeli / özellikler */

.calismaagenel { font-weight: 600; }
.calismagenel  { display: inline-block; vertical-align: top; }

.calismamodel,
.calismamodel1 {
  width: 100%;
  max-width: 265px;
  display: block;
  vertical-align: top;
  border-radius: 6px;
}
.calismamodel  { text-align: left;  border-left: 8px solid var(--bc-cm-blue);  padding-left: 17px; }
.calismamodel1 { text-align: right; border-right: 8px solid var(--bc-cm-blue); padding-right: 17px; }

.calismamodel h4, .calismamodel1 h4 { font-weight: 600; }

.calismaorta  { margin-top: 38px; border-left: 8px solid var(--bc-cm-purple); }
.calismason   { margin-top: 38px; border-left: 8px solid var(--bc-cm-green); }
.calismaorta1 { margin-top: 38px; border-right: 8px solid var(--bc-cm-orange-red); }
.calismason1  { margin-top: 38px; border-right: 8px solid var(--bc-cm-cyan); }
.calismaust   { border-right: 8px solid var(--bc-cm-orange); }

/* ------------------------------------------------------------- Koyu bölümler */

.bc-dark-section { background: var(--bc-surface-base); color: var(--bc-text-on-dark); }

.nasilcalisiryazibolum {
  color: #fff;
  text-align: left;
  padding: 22px;
  vertical-align: middle;
}

/* Yorum kartı */
.bc-testimonial {
  background: #fff;
  border-radius: 7px;
  color: #000;
  padding: 11px;
  margin-top: -30px;
  padding-top: 30px;
}

/* SSS accordion — koyu başlık */
.accordion-button {
  background: var(--bc-surface-base);
  color: #fff;
  margin-bottom: 10px;
  border-radius: 8px !important;
}
.accordion-button:not(.collapsed) { background: var(--bc-surface-base); color: #fff; }
.accordion-button:focus { box-shadow: 0 0 0 .2rem var(--bc-red-soft); }
.accordion-button::after { filter: invert(1) grayscale(1) brightness(2); }

/* Section başlığı */
.bc-section-title { color: var(--bc-red-bright); font-weight: 700; }

/* Bülten */
.bc-newsletter-input {
  width: 100%;
  padding: 10px;
  background: none;
  border: 2px solid #fff;
  border-radius: 3px;
  color: #fff;
}
.bc-newsletter-input::placeholder { color: rgba(255,255,255,.7); }
.bc-newsletter-submit {
  border: none;
  width: 100%;
  padding: 10px;
  background: var(--bc-red);
  color: #fff;
  font-weight: 700;
  border-radius: 4px;
  margin-top: 13px;
}
.bc-newsletter-submit:hover { background: var(--bc-red-bright); }

/* Footer */
.bc-footer {
  background: var(--bc-surface-base);
  text-align: center;
  padding: 12px;
  color: #fff;
}
.bc-footer a { text-decoration: none; color: #fff; }
.bc-footer p { margin: 0; }

/* Mağaza rozeti (İndir sayfası) — resmî rozet gelene kadar geçici stil */
.bc-store-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: #000;
  color: #fff;
  text-decoration: none;
  border: 1px solid #444;
  border-radius: 10px;
  padding: 10px 20px;
  min-width: 200px;
}
.bc-store-badge:hover { background: #111; color: #fff; border-color: #666; }
.bc-store-badge i { font-size: 2rem; }
.bc-store-badge span { display: flex; flex-direction: column; line-height: 1.1; text-align: left; font-weight: 700; font-size: 1.2rem; }
.bc-store-badge span small { font-weight: 400; font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; }

/* İçerik bekleyen (placeholder) rozeti — yalnızca dev, yayında kaldırılır */
.bc-pending {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--bc-red);
  border: 1px dashed var(--bc-red);
  border-radius: 4px;
  padding: 1px 6px;
  vertical-align: middle;
}

/* ------------------------------------------------------------------ Responsive */

@media only screen and (max-width: 900px) {
  .bc-menu-bar { display: none; }
  .bc-topnav { display: block; }
  /* Sütunları dikey yığ: inline-block olduğu için mobilde yan yana taşıp
     ekranı aşıyordu (sağdan kırpılma). block + tam genişlik ile düzelir.
     Ortadaki çalışma-modeli görseli de artık dikey akışta ortalı gösterilir. */
  .calismagenel { display: block; width: 100%; }
  .calismaresim { text-align: center; margin: 24px 0; }
  .calismamodel, .calismamodel1 { max-width: 460px; margin-left: auto; margin-right: auto; padding-right: 17px; }
  .calismaorta, .calismaorta1 { margin-left: 0; }
  .calismamodel1 { text-align: left; border-left: 8px solid var(--bc-cm-orange-red); border-right: none; }
  .calismaust  { border-right: none; border-left: 8px solid var(--bc-cm-orange); margin-top: 30px; }
  .calismason1 { border-left: 8px solid var(--bc-cm-cyan); border-right: none; }
  .calismaagenel { padding-left: 0; }
}

/* Küçük telefonlarda büyük CTA ve başlıkların taşmaması için ölçek düşür */
@media only screen and (max-width: 480px) {
  .bc-btn-cta { font-size: 1.1rem; padding: 11px 20px; }
  .bc-section-title { font-size: 1.5rem; }
}