/* ==========================================================================
   sxs.academy — Temel stiller
   tokens.css'ten sonra yuklenir.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font: var(--yazi-govde);
  color: var(--renk-metin-2);
  background: var(--renk-sayfa-zemin);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 1rem;
  color: var(--renk-metin-3);
  font-family: var(--yazi-ailesi);
  font-weight: var(--agirlik-kalin);
  line-height: 1.25;
}

h1 { font: var(--yazi-h1); color: var(--renk-metin-3); }
h2 { font: var(--yazi-h1); color: var(--renk-metin-3); }
h3 { font: var(--yazi-h3); color: var(--renk-metin-3); }
h4 { font-size: 16px; }
h5 { font-size: 15px; }
h6 { font-size: 14px; }

p { margin: 0 0 0.9rem; }

a {
  color: var(--renk-mor);
  text-decoration: none;
  transition: color var(--gecis);
}
a:hover { color: var(--renk-mor-acik); }

img, svg, video { max-width: 100%; height: auto; display: block; }

hr {
  border: 0;
  border-top: 1px solid var(--renk-kenar);
  margin: 24px 0;
}

/* ---------- Form ogeleri ----------
   Mevcut temada tum metin girdileri 10px radius + Poppins + kenar rengi. */
input[type="text"], input[type="email"], input[type="password"],
input[type="tel"], input[type="number"], input[type="search"],
input[type="url"], select, textarea {
  width: 100%;
  padding: 11px 14px;
  font: var(--yazi-govde);
  color: var(--renk-metin-3);
  background: var(--renk-beyaz);
  border: 1px solid var(--renk-kenar);
  border-radius: var(--yuvarlak);
  transition: border-color var(--gecis), box-shadow var(--gecis);
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--renk-mor);
  box-shadow: 0 0 0 3px rgba(127, 39, 255, 0.12);
}

input::placeholder, textarea::placeholder { color: var(--renk-metin-2); opacity: 0.7; }

label {
  display: inline-block;
  margin-bottom: 6px;
  font-weight: var(--agirlik-orta);
  color: var(--renk-metin-3);
  font-size: 14px;
}

/* ---------- Yerlesim ---------- */
.kapsayici {
  width: 100%;
  max-width: var(--kapsayici-genislik);
  margin-inline: auto;
  padding-inline: var(--bolum-dolgu-yatay);
}

.bolum {
  padding-block: var(--bolum-dolgu-dikey);
}

.bolum--zemin { background: var(--renk-bolum-zemin); }
.bolum--beyaz { background: var(--renk-beyaz); }
.bolum--koyu  { background: var(--renk-ana); color: var(--renk-metin-1); }
.bolum--koyu h1, .bolum--koyu h2, .bolum--koyu h3 { color: var(--renk-beyaz); }

.izgara {
  display: grid;
  gap: var(--widget-aralik);
}
.izgara--2 { grid-template-columns: repeat(2, 1fr); }
.izgara--3 { grid-template-columns: repeat(3, 1fr); }
.izgara--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1024px) {
  .izgara--4 { grid-template-columns: repeat(2, 1fr); }
  .izgara--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .izgara--2, .izgara--3, .izgara--4 { grid-template-columns: 1fr; }
}

/* ---------- Kart ---------- */
.kart {
  background: var(--renk-kart-zemin);
  border-radius: var(--yuvarlak);
  box-shadow: var(--golge-kart);
  overflow: hidden;
}

/* ---------- Butonlar ---------- */
.buton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 11px 22px;
  font-family: var(--yazi-ailesi);
  font-size: 14px;
  font-weight: var(--agirlik-orta);
  line-height: 1.4;
  border: 1px solid transparent;
  border-radius: var(--yuvarlak);
  cursor: pointer;
  transition: all var(--gecis);
  text-align: center;
}

.buton--ana {
  background: var(--renk-mor);
  border-color: var(--renk-mor);
  color: var(--renk-beyaz);
}
.buton--ana:hover {
  background: var(--renk-mor-acik);
  border-color: var(--renk-mor-acik);
  color: var(--renk-beyaz);
}

/* Turuncu CTA — mevcut temadaki `.giris-buton` davranisi birebir */
/* `.buton--cta` olculeri `olculer.css`te (orijinalde MOR).
   Burada da tanimliydi ve turuncuydu; iki tanim catisiyordu. */
.giris-buton {
  background: var(--renk-turuncu);
  border-color: var(--renk-turuncu);
  color: var(--renk-beyaz);
}
.giris-buton:hover {
  background: var(--renk-mor-acik);
  border-color: var(--renk-mor-acik);
  color: var(--renk-beyaz);
}

.buton--cizgi {
  background: transparent;
  border-color: var(--renk-kenar);
  color: var(--renk-metin-3);
}
.buton--cizgi:hover {
  border-color: var(--renk-mor);
  color: var(--renk-mor);
}

.buton[disabled], .buton--pasif {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

.buton--tam { width: 100%; }

/* ---------- Rozet ---------- */
.rozet {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: var(--agirlik-orta);
  border-radius: var(--yuvarlak-tam);
  background: var(--renk-bolum-zemin);
  color: var(--renk-mor);
}
.rozet--indirim { background: var(--renk-turuncu); color: var(--renk-beyaz); }
.rozet--basari  { background: rgba(18, 183, 106, 0.12); color: var(--renk-basari); }
.rozet--hata    { background: rgba(240, 68, 56, 0.12);  color: var(--renk-hata); }

/* ---------- Bildirim kutusu (Elementor WC notice ayarlari) ---------- */
.bildirim {
  padding: 14px 18px;
  font-size: 14px;
  background: var(--renk-beyaz);
  border-radius: var(--yuvarlak);
  box-shadow: var(--golge-kart);
  margin-bottom: 16px;
}
.bildirim--hata   { border-left: 3px solid var(--renk-hata); }
.bildirim--basari { border-left: 3px solid var(--renk-basari); }
.bildirim--bilgi  { border-left: 3px solid var(--renk-turkuaz); }

/* ---------- Fiyat ---------- */
.fiyat { font-weight: var(--agirlik-kalin); color: var(--renk-metin-3); }
.fiyat__eski {
  text-decoration: line-through;
  color: var(--renk-metin-2);
  font-weight: var(--agirlik-normal);
  margin-right: 8px;
}
.fiyat__guncel { color: var(--renk-mor); }

/* ---------- Mevcut temadan tasinan animasyonlar ---------- */
@keyframes efekt1 {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(20px); }
}
@keyframes efekt2 {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(20px); }
}
.efekt1 { animation: efekt1 2s ease infinite; }
.efekt2 { animation: efekt2 2s ease infinite; }

/* Elementor kit'indeki ozel CSS — baslik alti turuncu cizgi efekti */
.altefekt { position: relative; }
.altefekt::before {
  content: "";
  position: absolute;
  bottom: -10px;
  width: 30px;
  height: 3.5px;
  border-radius: var(--yuvarlak);
  background: var(--renk-turuncu);
  transition: width var(--gecis-yavas);
}
.altefekt:hover::before { width: 80%; }

/* ---------- Erisilebilirlik ---------- */
.gorsel-gizli {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

:focus-visible {
  outline: 2px solid var(--renk-mor);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* Tuzak alan (honeypot) — ekranda ve okuyucuda gorunmez, DOM'da durur.
   `display:none` yerine ekran disina aliyoruz: bazi botlar gizli alanlari
   atlamak icin `display` denetliyor, boyle bir kontrolu gecer ve alani
   doldurur. */
.tuzak-alan {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}