/* ============================================================
   UYAP UZMAN — ek stiller
   site.css'e DOKUNMAYIN. Bizim eklediğimiz her şey bu dosyada.
   Renkler site.css'teki değişkenlerden gelir:
   --red #d7132a · --white #fff · --ink #071936 · --navy-deep #031022
   ============================================================ */

/* ---------- İletişim bölümü (#iletisim içindeki kart ızgarası) ---------- */

.contact-details {
  z-index: 2;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  width: 100%;
  max-width: 1050px;
  margin-top: 60px;
  display: grid;
  position: relative;
}

.contact-item {
  color: var(--white);
  text-align: left;
  background: #ffffff0a;
  border: 1px solid #ffffff1f;
  border-radius: 6px;
  flex-direction: column;
  gap: 9px;
  padding: 20px 22px;
  text-decoration: none;
  transition: background .18s, border-color .18s, transform .18s;
  display: flex;
}

a.contact-item:hover,
a.contact-item:focus-visible {
  background: #ffffff14;
  border-color: #d7132a8a;
  transform: translateY(-2px);
}

.contact-item small {
  color: #ef8994;
  letter-spacing: .18em;
  font-size: 9px;
  font-weight: 850;
}

.contact-item strong {
  color: var(--white);
  letter-spacing: -.01em;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.45;
}

.contact-item-wa strong:after {
  content: "";
  vertical-align: middle;
  background: #25d366;
  border-radius: 50%;
  width: 7px;
  height: 7px;
  margin-left: 9px;
  display: inline-block;
}

.contact-item-address {
  grid-column: 1 / -1;
  cursor: default;
}

.contact-item-address strong {
  font-size: 14px;
  font-weight: 600;
}

@media (width <= 900px) {
  .contact-details { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 46px; }
}

@media (width <= 650px) {
  .contact-details { grid-template-columns: 1fr; gap: 10px; }
  .contact-item { padding: 16px 18px; }
  .contact-item strong { font-size: 15px; }
}

/* ---------- Footer iletişim sütunu ---------- */

.footer-contact {
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 26px;
  grid-column: 1 / -1;
  margin-top: 4px;
  display: flex;
}

.footer-contact a {
  color: #ffffffb8;
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
}

.footer-contact a:hover,
.footer-contact a:focus-visible { color: #ef8994; }

.footer-contact span {
  color: #ffffff70;
  font-size: 11px;
  font-weight: 500;
}

@media (width <= 650px) {
  .footer-contact { gap: 8px 18px; }
}

/* ---------- Demo talep formu (#iletisim içinde) ----------
   Koyu bölümün üstünde BEYAZ kart. Kasıtlı: ziyaretçi nereye
   yazacağını bir bakışta görsün, form "doldurulacak bir şey" gibi
   dursun. Koyu zeminde koyu input alanları fark edilmiyordu.        */

.demo-form {
  z-index: 2;
  width: 100%;
  max-width: 980px;
  margin-top: 48px;
  padding: 34px 34px 28px;
  background: var(--white);
  border-radius: 12px;
  box-shadow: 0 30px 80px #03102273;
  text-align: left;
  position: relative;
}

.demo-form-bas { margin-bottom: 24px; }

.demo-form-bas strong {
  color: var(--ink);
  letter-spacing: -.025em;
  font-size: 21px;
  font-weight: 750;
  display: block;
}

.demo-form-bas span {
  color: var(--muted);
  margin-top: 7px;
  font-size: 13.5px;
  line-height: 1.55;
  display: block;
}

.demo-alanlar {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  display: grid;
}

.demo-alan { flex-direction: column; gap: 7px; display: flex; }

.demo-alan > span {
  color: var(--ink-soft);
  letter-spacing: .01em;
  font-size: 12px;
  font-weight: 700;
}

.demo-alan i { color: var(--red); font-style: normal; }

.demo-alan input,
.demo-alan textarea {
  color: var(--ink);
  background: #fbfbfa;
  border: 1px solid #07193630;
  border-radius: 7px;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 14.5px;
  line-height: 1.5;
  transition: border-color .16s, box-shadow .16s, background .16s;
}

.demo-alan textarea { resize: vertical; min-height: 92px; }

.demo-alan input::placeholder,
.demo-alan textarea::placeholder { color: #9aa4b2; }

.demo-alan input:hover,
.demo-alan textarea:hover { border-color: #07193652; }

.demo-alan input:focus,
.demo-alan textarea:focus {
  background: var(--white);
  border-color: var(--red);
  box-shadow: 0 0 0 3px #d7132a1f;
  outline: none;
}

.demo-alan.hatali input,
.demo-alan.hatali textarea {
  background: #fff8f8;
  border-color: var(--red);
}

.demo-aciklama { margin-top: 16px; }

/* ürün tipi — tıklanabilir kart gibi dursun */
.demo-urunler {
  border: 0;
  margin: 18px 0 0;
  padding: 0;
}

.demo-urunler legend {
  color: var(--ink-soft);
  padding: 0;
  font-size: 12px;
  font-weight: 700;
}

.demo-urunler legend i { color: var(--red); font-style: normal; }

.demo-urunler legend em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 500;
}

.demo-urun-secenekler {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 10px;
  display: grid;
}

.demo-urunler label {
  color: var(--ink);
  cursor: pointer;
  align-items: center;
  gap: 11px;
  padding: 13px 15px;
  background: #fbfbfa;
  border: 1px solid #07193630;
  border-radius: 7px;
  font-size: 14.5px;
  font-weight: 650;
  transition: border-color .16s, background .16s;
  display: flex;
}

.demo-urunler label:hover { border-color: #07193652; background: var(--white); }

/* seçiliyken belli olsun */
.demo-urunler label:has(input:checked) {
  background: #d7132a14;
  border-color: var(--red);
}

.demo-urunler input[type="checkbox"] {
  accent-color: var(--red);
  flex: none;
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.demo-urunler.hatali label { border-color: var(--red); }

/* bot tuzağı — ekranda ve ekran okuyucuda görünmez */
.demo-tuzak {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* gönderim satırı */
.demo-gonder {
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 24px;
  margin-top: 26px;
  display: flex;
}

/* Beyaz kartta beyaz buton kaybolur — kırmızı yapıyoruz. */
.demo-gonder .demo-buton {
  background: var(--red);
  color: var(--white);
  margin-top: 0;
}

.demo-gonder .demo-buton:hover,
.demo-gonder .demo-buton:focus-visible { background: var(--red-dark); }

.demo-gonder .demo-buton:disabled {
  opacity: .5;
  cursor: not-allowed;
  background: var(--red);
}

.demo-kvkk {
  color: var(--muted);
  flex: 1 1 240px;
  margin: 0;
  font-size: 11px;
  line-height: 1.6;
}

/* durum mesajı */
.demo-durum {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  display: none;
}

.demo-durum.gorunur {
  margin-top: 20px;
  padding: 15px 17px;
  border-radius: 7px;
  display: block;
}

.demo-durum.basarili {
  color: #14602f;
  background: #e8f7ee;
  border: 1px solid #46b16b6b;
}

.demo-durum.hata {
  color: #92101f;
  background: #fdeef0;
  border: 1px solid #d7132a4a;
}

/* gönderildikten sonra alanlar gider, teşekkür kalır */
.demo-form.tamamlandi .demo-form-bas,
.demo-form.tamamlandi .demo-alanlar,
.demo-form.tamamlandi .demo-urunler,
.demo-form.tamamlandi .demo-aciklama,
.demo-form.tamamlandi .demo-gonder { display: none; }

.demo-form.tamamlandi .demo-durum.gorunur {
  margin-top: 0;
  font-size: 15px;
}

@media (width <= 900px) {
  .demo-form { margin-top: 40px; padding: 26px 24px 22px; }
  .demo-alanlar { grid-template-columns: 1fr; }
  .demo-urun-secenekler { grid-template-columns: 1fr; }
}

@media (width <= 650px) {
  .demo-form { padding: 22px 18px 20px; border-radius: 10px; }
  .demo-form-bas strong { font-size: 18px; }
  .demo-gonder .demo-buton { width: 100%; }
}