/* ============================================================
   Almanca Kutusu — /birebir LIGHT (white) tema
   Bu dosya SADECE birebir/index.html tarafından yüklenir.
   Ortak /assets/styles.css (dark) üzerine override eder;
   ana sayfa ve diğer sayfalar etkilenmez.
   ============================================================ */

:root {
  --bg: #FFFFFF;
  --surface: #F8FAFC;
  --text: #0F172A;
  --muted: #64748B;
  --line: #E2E8F0;
  --primary: #FACC15;      /* sitenin sarısı — buton dolgusu */
  --primary-ink: #CA8A04;  /* beyaz zeminde okunur koyu amber (yazı/çizgi/vurgu) */
  --primary-tint: rgba(250, 204, 21, .22);
}

body {
  background: var(--bg);
  color: var(--text);
}

/* Menü bağlantıları: yumuşak kaydırma + hedef sabit başlığın altında kalmasın */
html { scroll-behavior: smooth; }
#surec, #yorumlar, #sss, #dersler, #basla, #basla-alt { scroll-margin-top: 76px; }
@media (min-width: 768px) {
  #surec, #yorumlar, #sss, #dersler, #basla, #basla-alt { scroll-margin-top: 96px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* --- Kartlar --- */
.card {
  background: #FFFFFF;
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.card:hover {
  border-color: rgba(202, 138, 4, .55);
  box-shadow: 0 10px 28px rgba(15, 23, 42, .10);
}
.card-h { color: var(--text); }
.card-p { color: #475569; }

/* --- Chip (seçim butonları) --- */
.chip {
  background: #FFFFFF;
  border: 1px solid #CBD5E1;
  color: #334155;
}
.chip:hover { border-color: #94A3B8; background: #F8FAFC; }
.chip[aria-pressed="true"] {
  outline: 2px solid var(--primary-ink);
  background: var(--primary-tint);
  color: #0F172A;
}

/* Mobil adım-1 dikkat animasyonu (açık zemine göre) */
.chip-attn {
  border-color: var(--primary-ink) !important;
  box-shadow: 0 0 0 3px rgba(250, 204, 21, .45), 0 8px 18px rgba(15, 23, 42, .10);
}

/* --- Ghost buton --- */
.btn-ghost {
  border: 1px solid #CBD5E1;
  color: #334155;
  background: #FFFFFF;
}
.btn-ghost:hover {
  border-color: var(--primary-ink);
  color: var(--primary-ink);
  background: var(--primary-tint);
}

/* --- Akordiyon (SSS) --- */
.acc { border: 1px solid var(--line); background: #FFFFFF; }
.acc:hover { border-color: rgba(202, 138, 4, .50); }
.acc-btn { color: var(--text); padding-right: 44px; }   /* metin "+" işaretinin altına girmesin */
.acc-btn:hover { color: var(--primary-ink); background: var(--primary-tint); }
.acc-panel { color: #475569; }

/* --- Swiper (açık tema) --- */
.swiper-button-next,
.swiper-button-prev {
  background: rgba(255, 255, 255, .92);
  border: 1px solid var(--line);
  color: #0F172A;
  box-shadow: 0 4px 14px rgba(15, 23, 42, .12);
}
.swiper-button-next:hover,
.swiper-button-prev:hover {
  background: #FFFFFF;
  border-color: var(--primary-ink);
}
.swiper-pagination-bullet { background: #CBD5E1; }
.swiper-pagination-bullet-active { background: var(--primary-ink); }

/* --- Footer ikincil linkler --- */
.footer-secondary-links, .footer-secondary-links a { color: #94A3B8; }

/* ============================================================
   HERO SLIDER (video yerine görsel slider)
   ============================================================ */
.hero-swiper { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.hero-swiper .swiper-slide { position: relative; overflow: hidden; }
.hero-swiper .swiper-slide img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
}
/* Görsel üzerindeki yazılar okunsun diye yumuşak koyu perde */
.hero-scrim {
  position: absolute; inset: 0; z-index: 10; pointer-events: none;
  background: linear-gradient(180deg, rgba(15,23,42,.55) 0%, rgba(15,23,42,.42) 45%, rgba(15,23,42,.62) 100%);
}
/* Hero içindeki oklar/bulletlar */
.hero-swiper .swiper-button-next,
.hero-swiper .swiper-button-prev { z-index: 30; }
.hero-swiper .swiper-pagination { z-index: 30; bottom: 14px !important; }
.hero-swiper .swiper-pagination-bullet { background: rgba(255,255,255,.65); opacity: 1; }
.hero-swiper .swiper-pagination-bullet-active { background: #FFFFFF; transform: scale(1.25); }

/* Mobil: slider yerine tek sabit arka plan görseli.
   Görsel yalnızca aşağıdaki media sorgusunun içinde tanımlı; masaüstünde indirilmez. */
.hero-mobil-bg { display: none; }

@media (max-width: 767.98px) {
  .hero-mobil-bg {
    display: block;
    position: absolute; inset: 0; z-index: 0;
    background: #0F172A url('/birebir/images/sliderbackground.jpg') center top / cover no-repeat;
  }
  .hero-swiper { display: none; }            /* Swiper mobilde hiç kurulmuyor */
  .hero-swiper .swiper-button-next,
  .hero-swiper .swiper-button-prev { display: none; }
}


/* ============================================================
   TAKVİM PANELİ — "Uygun saatler" şeridi sabahtan 22:00'a kayar.
   İki özdeş grup yan yana; -50% ötelemede birinci grubun başına
   dönülür, bu yüzden döngü kesintisiz görünür.
   ============================================================ */
.saat-serit {
  position: relative;
  overflow: hidden;
  /* kenarlarda yumuşak kesim: chip'ler ani başlayıp bitmesin */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
}
.saat-ray {
  display: flex;
  width: max-content;
  animation: saatKay 22s linear infinite;
}
.saat-grup { display: flex; flex: none; }
.saat {
  flex: none;
  margin-right: 6px;                 /* boşluk gap yerine margin: -50% tam denk gelsin */
  padding: 6px 10px;
  border-radius: 8px;
  background: #F8FAFC;
  border: 1px solid var(--line);
  color: #475569;
  font-size: 12px;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.saat-secili {
  background: var(--primary);
  border-color: var(--primary);
  color: #0F172A;
  font-weight: 600;
}
@keyframes saatKay {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .saat-ray { animation: none; }
}

/* ============================================================
   "AŞAĞI KAYDIR" İPUCU
   Hero'da form var, altında içerik olduğu belli olmuyordu.
   Kullanıcı kaydırır kaydırmaz kayboluyor (body.kaydirildi).
   ============================================================ */
/* Mobilde hero ekrandan uzun; hero'nun altına sabitlenirse görünmüyor.
   Bu yüzden ekrana sabit — mobilde alttaki CTA çubuğunun üstünde duruyor. */
.kaydir-ipucu {
  position: fixed;
  left: 50%;
  bottom: 12px;             /* form kartının altındaki boşluğa otursun, üstünü örtmesin */
  transform: translateX(-50%);
  z-index: 40;              /* form kartı z-30, başlık z-50 — arada kalsın */
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px 8px 18px;
  border-radius: 9999px;
  background: rgba(15, 23, 42, .55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #FFFFFF;
  pointer-events: none;
  animation: kaydirZipla 2.1s ease-in-out infinite;
  transition: opacity .35s ease, transform .35s ease;
}
.kaydir-ipucu__yazi { font-size: 13px; font-weight: 600; letter-spacing: .01em; }
.kaydir-ipucu__ok { display: flex; width: 18px; height: 18px; }
.kaydir-ipucu__ok svg { width: 100%; height: 100%; }

@keyframes kaydirZipla {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, 8px); }
}

/* Kullanıcı kaydırdıysa bir daha gösterme */
body.kaydirildi .kaydir-ipucu {
  opacity: 0;
  transform: translate(-50%, 10px);
  animation: none;
}

/* Masaüstünde alt CTA çubuğu yok, aşağıya inebilir */
@media (min-width: 1024px) { .kaydir-ipucu { bottom: 26px; } }

@media (prefers-reduced-motion: reduce) {
  .kaydir-ipucu { animation: none; }
}

/* Sarı (#FACC15) beyaz zeminde YAZI olarak okunmaz (1.5:1).
   Bu yüzden text-primary kullanan öğeler koyu amber tona alınır. */
.text-primary { color: var(--primary-ink) !important; }
.step-num.text-primary { color: var(--primary-ink) !important; }

/* Sarı butonlarda hover: biraz koyulaşsın */
.bg-primary:hover { filter: brightness(.95); }

/* Mobilde alttaki sabit CTA çubuğu var: yüzen "Canlı Destek" butonu gizlenir
   (aynı işi çubuktaki WhatsApp düğmesi yapıyor, iki kayan öğe çakışmasın) */
@media (max-width: 1023.98px) {
  .wa-fab { display: none !important; }
  body { padding-bottom: 74px; }   /* sabit çubuk içeriği kapatmasın */
}

/* ============================================================
   FORM BAŞLIĞI — 6 sn'de bir dikkat çekme efekti
   Döngünün ilk ~1 sn'sinde büyüyüp koyu amber'e döner,
   sonra normale dönüp 5 sn bekler.
   ============================================================ */
.form-title-attn {
  transform-origin: center;
  will-change: transform, color;
  animation: formTitleAttn 6s ease-in-out infinite;
}

@keyframes formTitleAttn {
  0%   { transform: scale(1);     color: #0F172A; text-shadow: none; }
  4%   { transform: scale(1.07);  color: #B45309; text-shadow: 0 6px 18px rgba(180, 83, 9, .18); }
  9%   { transform: scale(1.045); color: #CA8A04; text-shadow: 0 6px 18px rgba(202, 138, 4, .16); }
  14%  { transform: scale(1.07);  color: #B45309; text-shadow: 0 6px 18px rgba(180, 83, 9, .18); }
  22%  { transform: scale(1);     color: #0F172A; text-shadow: none; }
  100% { transform: scale(1);     color: #0F172A; text-shadow: none; }
}

/* Hareket hassasiyeti olan kullanıcılar için: sadece renk değişsin, büyüme olmasın */
@media (prefers-reduced-motion: reduce) {
  .form-title-attn { animation: formTitleAttnSoft 6s ease-in-out infinite; }
  @keyframes formTitleAttnSoft {
    0%, 100% { color: #0F172A; }
    8%, 16%  { color: #B45309; }
    24%      { color: #0F172A; }
  }
}


/* ============================================================
   BELİRME ANİMASYONU — öğeler ekrana girince yumuşakça gelir,
   yeni yüklenen yorum kartları "pat" diye düşmez.
   ============================================================ */
body.anim-acik .anim {
  opacity: 0;
  transform: translateY(16px);
  will-change: opacity, transform;
}
body.anim-acik .anim.gorunur {
  opacity: 1;
  transform: none;
  transition: opacity .55s cubic-bezier(.22,.61,.36,1), transform .55s cubic-bezier(.22,.61,.36,1);
}
/* Aynı anda gelen kartlar sırayla belirsin */
body.anim-acik .anim.gorunur:nth-child(2) { transition-delay: .06s }
body.anim-acik .anim.gorunur:nth-child(3) { transition-delay: .12s }
body.anim-acik .anim.gorunur:nth-child(4) { transition-delay: .18s }
body.anim-acik .anim.gorunur:nth-child(5) { transition-delay: .24s }
body.anim-acik .anim.gorunur:nth-child(6) { transition-delay: .3s }

/* Hareket hassasiyeti olanlar için kapalı */
@media (prefers-reduced-motion: reduce) {
  body.anim-acik .anim, body.anim-acik .anim.gorunur { opacity: 1; transform: none; transition: none; }
}