/* ==========================================================================
   2-TEMEL.CSS  —  Yazı tipleri, başlıklar, butonlar, formlar
   ========================================================================== */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 90px;   /* yapışkan menünün altında kalmasın */
}

body {
  margin: 0;
  background: var(--zemin);
  color: var(--yazi);
  font-family: var(--f-govde);
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a { color: var(--yesil-koyu); text-decoration: none; transition: color var(--hizli); }
a:hover { color: var(--yesil); }

/* --- Başlıklar -----------------------------------------------------------
   Büyüdükçe harf aralığı daralır, satır aralığı sıkılaşır.
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--f-baslik);
  margin: 0 0 .45em;
  color: var(--koyu);
  font-optical-sizing: auto;
}
h1 {
  font-size: clamp(2.3rem, 5.2vw, 4rem);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -.028em;
}
h2 {
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.022em;
}
h3 {
  font-size: clamp(1.2rem, 2vw, 1.4rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.014em;
}
h4 { font-size: 1.08rem; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

/* --- Üst etiket ----------------------------------------------------------- */
.etiket {
  display: inline-block;
  font-size: .92rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--yesil-koyu);
  margin-bottom: 14px;
}
.etiket-ters { color: var(--yesil-acik); }

.giris-metni {
  font-size: 1.12rem;
  line-height: 1.55;
  color: var(--yazi-2);
  max-width: 60ch;
  letter-spacing: -.01em;
}

/* --- Butonlar ------------------------------------------------------------
   Basıldığı anda hafifçe küçülür: dokunma hissi anında geri döner.
   -------------------------------------------------------------------------- */
.dugme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 26px;
  font-family: var(--f-govde);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -.01em;
  border: 1px solid transparent;
  border-radius: var(--r-tam);
  cursor: pointer;
  transition: background var(--hizli), color var(--hizli),
              border-color var(--hizli), transform .1s ease-out, box-shadow var(--gecis);
}
.dugme:active { transform: scale(.97); }

.dugme-ana       { background: var(--yesil); color: #fff; }
.dugme-ana:hover { background: var(--yesil-koyu); color: #fff; }

.dugme-koyu       { background: var(--koyu); color: var(--yazi-ters); }
.dugme-koyu:hover { background: #000; color: #fff; }

.dugme-cizgi       { background: rgba(255,255,255,.7); color: var(--koyu); border-color: var(--hat-koyu); }
.dugme-cizgi:hover { background: #fff; border-color: var(--yesil); color: var(--yesil-koyu); }

.dugme-cizgi-ters       { background: rgba(255,255,255,.10); color: #fff; border-color: rgba(255,255,255,.28); }
.dugme-cizgi-ters:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.5); color: #fff; }

.dugme-kucuk { padding: 9px 17px; font-size: .93rem; }

/* --- Form alanları -------------------------------------------------------- */
label { display: block; font-weight: 600; font-size: .95rem; margin-bottom: 7px; color: var(--koyu); }
label .zorunlu { color: var(--tehlikeli); }

input[type=text], input[type=email], input[type=tel], input[type=date],
input[type=number], input[type=password], input[type=search], select, textarea {
  width: 100%;
  padding: 13px 15px;
  font-family: var(--f-govde);
  font-size: 1rem;
  color: var(--yazi);
  background: var(--kart);
  border: 1px solid var(--hat-koyu);
  border-radius: var(--r-kucuk);
  transition: border-color var(--hizli), box-shadow var(--hizli);
  -webkit-appearance: none;
  appearance: none;
}
select {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A6874' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 17px;
  padding-right: 40px;
}
textarea { min-height: 130px; resize: vertical; line-height: 1.55; }

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--yesil);
  box-shadow: 0 0 0 4px rgba(71,135,31,.15);
}
input:invalid:not(:placeholder-shown) { border-color: var(--tehlikeli); }

a:focus-visible, button:focus-visible, .dugme:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--yesil-acik);
  outline-offset: 3px;
  border-radius: var(--r-kucuk);
}

.alan { margin-bottom: 20px; }
.alan-ipucu { font-size: .88rem; color: var(--yazi-3); margin-top: 6px; letter-spacing: 0; }

.onay {
  display: flex; align-items: flex-start; gap: 11px;
  font-weight: 400; font-size: .96rem; color: var(--yazi-2);
}
.onay input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--yesil); }

/* --- Bildirim kutuları ---------------------------------------------------- */
.bildirim {
  padding: 15px 19px;
  border-radius: var(--r-orta);
  background: var(--yesil-sis);
  color: var(--koyu);
  font-size: .97rem;
  margin-bottom: 18px;
  border: 1px solid rgba(71,135,31,.18);
}
.bildirim-uyari { background: var(--muhtemel-sis); border-color: rgba(184,115,9,.2); }
.bildirim-hata  { background: var(--tehlikeli-sis); border-color: rgba(179,52,31,.2); }

/* --- Atık kodu etiketi (sitenin imza öğesi) ------------------------------- */
.kod-etiket {
  display: inline-flex;
  align-items: center;
  font-family: var(--f-kod);
  font-size: .92rem;
  font-weight: 600;
  letter-spacing: -.01em;
  padding: 6px 12px;
  background: var(--zemin);
  color: var(--koyu);
  border: 1px solid var(--hat);
  border-radius: var(--r-tam);
  white-space: nowrap;
  transition: background var(--hizli), border-color var(--hizli);
}
.kod-etiket.tehlikeli { background: var(--tehlikeli-sis); color: var(--tehlikeli); border-color: rgba(179,52,31,.18); }
a.kod-etiket:hover { border-color: var(--yesil); color: var(--yesil-koyu); }
a.kod-etiket.tehlikeli:hover { border-color: var(--tehlikeli); color: var(--tehlikeli); }

/* Tehlike rozetleri */
.rozet {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .8rem; font-weight: 600; letter-spacing: -.005em;
  padding: 5px 11px; border-radius: var(--r-tam); white-space: nowrap;
}
.rozet-a { background: var(--tehlikeli-sis); color: var(--tehlikeli); }
.rozet-m { background: var(--muhtemel-sis); color: var(--muhtemel); }
.rozet-t { background: var(--yesil-sis); color: var(--guvenli); }

/* --- İnce ayraç ----------------------------------------------------------- */
.serit {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--hat-koyu) 18%, var(--hat-koyu) 82%, transparent);
}

/* --- Görünür alana girince beliren öğeler --------------------------------- */
.beliren {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--yavas), transform var(--yavas);
}
.beliren.gorunur { opacity: 1; transform: none; }

/* Sadece ekran okuyucular için */
.gizli-metin {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}