/* zere.tr — tek stil dosyası. Renkler ürün logosundan: lacivert karo, kum / kil / su katmanları. */
:root {
  --lacivert: #16212b;
  --lacivert-2: #1e2c38;
  --murekkep: #1b2530;
  --metin: #2c3743;
  --soluk: #5d6b78;
  --cizgi: #d9dee3;
  --kagit: #f7f8f9;
  --beyaz: #ffffff;
  --kum: #e8aa6e;
  --kil: #a0683f;
  --su: #3a8cc8;
  --su-koyu: #236c9f;
  --en: 1120px;
  --yazi: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --baslik: "Sora", "Segoe UI", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--yazi); font-size: 18px; line-height: 1.6; color: var(--metin); background: var(--beyaz); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--su-koyu); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--kum); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--baslik); color: var(--murekkep); line-height: 1.2; letter-spacing: -0.01em; }
h1 { font-size: clamp(2rem, 4.5vw, 3.1rem); margin: 0 0 .5em; font-weight: 700; }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin: 0 0 .6em; font-weight: 700; }
h3 { font-size: 1.15rem; margin: 0 0 .4em; font-weight: 600; }
p { margin: 0 0 1em; }
.kap { max-width: var(--en); margin: 0 auto; padding: 0 24px; }

/* Katman şeridi: logodaki üç zemin katmanı */
.katman { height: 9px; background: linear-gradient(var(--kum) 0 33.3%, var(--kil) 33.3% 66.6%, var(--su) 66.6% 100%); }

/* Üst çubuk */
.ust { background: var(--lacivert); color: #e6ebef; }
.ust .kap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; flex-wrap: wrap; }
.marka { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-family: var(--baslik); font-weight: 700; font-size: 1.35rem; letter-spacing: .06em; }
.marka img { width: 34px; }
.ust nav { display: flex; gap: 22px; flex-wrap: wrap; }
.ust nav a { color: #c9d3db; text-decoration: none; font-size: .95rem; }
.ust nav a:hover { color: #fff; }

/* Giriş bölümü */
.giris { background: radial-gradient(1200px 500px at 85% 0%, #24384a 0%, var(--lacivert) 60%); color: #dbe3e9; padding: 72px 0 80px; overflow: hidden; }
.giris .kap { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; }
.giris h1 { color: #fff; }
.giris .alt { font-size: 1.2rem; color: #b9c6d1; max-width: 36em; }
.giris .z { width: min(360px, 80%); justify-self: center; filter: drop-shadow(0 18px 40px rgba(0,0,0,.45)); }
.dugmeler { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; }
.dugme { display: inline-block; padding: 13px 24px; border-radius: 6px; font-weight: 600; text-decoration: none; font-size: 1rem; }
.dugme.ana { background: var(--kum); color: #1d140b; }
.dugme.ana:hover { background: #f0b97f; }
.dugme.ikinci { border: 1.5px solid #6d8294; color: #e6ebef; }
.dugme.ikinci:hover { border-color: #fff; }
.not { font-size: .92rem; color: #93a4b2; margin-top: 16px; }

/* Bölümler */
.bolum { padding: 80px 0; }
.bolum.gri { background: var(--kagit); border-top: 1px solid var(--cizgi); border-bottom: 1px solid var(--cizgi); }
.giris-yazi { max-width: 46em; color: var(--soluk); font-size: 1.1rem; margin-bottom: 40px; }

/* İki modül: masaüstü ve saha */
.moduller { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.modul { background: var(--beyaz); border: 1px solid var(--cizgi); border-radius: 10px; padding: 32px; border-top: 6px solid var(--su); }
.modul.saha { border-top-color: var(--kum); }
.modul .etiket { font-size: .9rem; color: var(--soluk); margin-bottom: 6px; }
.modul ul { margin: 0; padding-left: 1.1em; }
.modul li { margin-bottom: .45em; }

/* Akış: sahadan rapora (gerçekten sıralı) */
.akis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; counter-reset: adim; border: 1px solid var(--cizgi); border-radius: 10px; overflow: hidden; }
.akis > div { padding: 28px; counter-increment: adim; position: relative; background: var(--beyaz); }
.akis > div + div { border-left: 1px solid var(--cizgi); }
.akis > div::before { content: counter(adim); font-family: var(--baslik); font-weight: 700; font-size: 1rem; color: #fff; background: var(--lacivert); width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 14px; }
.akis p { margin: 0; color: var(--soluk); }

/* Fiyatlar */
.fiyatlar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
.paket { border: 1px solid var(--cizgi); border-radius: 10px; padding: 30px; display: flex; flex-direction: column; background: var(--beyaz); }
.paket.one { border: 2px solid var(--lacivert); }
.paket .ad { font-family: var(--baslik); font-weight: 700; font-size: 1.2rem; color: var(--murekkep); }
.paket .icerik { color: var(--soluk); margin: 4px 0 18px; }
.paket .tutar { font-family: var(--baslik); font-size: 2.3rem; font-weight: 700; color: var(--murekkep); line-height: 1; }
.paket .tutar small { font-size: 1rem; font-weight: 500; color: var(--soluk); }
.paket .kdv { font-size: .92rem; color: var(--soluk); margin: 8px 0 18px; }
.paket ul { padding-left: 1.1em; margin: 0 0 auto; }
.paket li { margin-bottom: .4em; }
.fiyat-not { margin-top: 26px; color: var(--soluk); font-size: .98rem; max-width: 52em; }

/* İletişim */
.iletisim { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.iletisim dl { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 10px 22px; }
.iletisim dt { color: var(--soluk); }
.iletisim dd { margin: 0; }

/* Yasal metin sayfaları */
.metin { max-width: 46em; padding: 56px 24px 80px; margin: 0 auto; }
.metin h1 { font-size: clamp(1.7rem, 3.5vw, 2.3rem); }
.metin h2 { font-size: 1.25rem; margin-top: 2em; }
.metin .tarih { color: var(--soluk); font-size: .95rem; }
.metin table { border-collapse: collapse; width: 100%; margin: 0 0 1.2em; font-size: .97rem; }
.metin th, .metin td { border: 1px solid var(--cizgi); padding: 8px 12px; text-align: left; vertical-align: top; }
.metin th { background: var(--kagit); font-weight: 600; width: 34%; }

/* Alt bilgi */
.alt-bilgi { background: var(--lacivert); color: #b3c0cb; font-size: .95rem; }
.alt-bilgi .kap { padding-top: 48px; padding-bottom: 32px; display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 36px; }
.alt-bilgi h3 { color: #fff; font-size: 1rem; }
.alt-bilgi a { color: #d4dde4; text-decoration: none; }
.alt-bilgi a:hover { text-decoration: underline; }
.alt-bilgi ul { list-style: none; margin: 0; padding: 0; }
.alt-bilgi li { margin-bottom: .45em; }
.odeme { border-top: 1px solid #2c3d4b; }
.odeme .kap { padding-top: 18px; padding-bottom: 22px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; grid-template-columns: none; }
.odeme img { width: 100%; max-width: 460px; height: auto; background: #fff; border-radius: 6px; padding: 9px 14px; box-sizing: border-box; }

@media (max-width: 860px) {
  body { font-size: 17px; }
  .giris { padding: 48px 0 56px; }
  .giris .kap, .moduller, .iletisim, .fiyatlar, .alt-bilgi .kap { grid-template-columns: 1fr; }
  .giris .z { width: 180px; order: -1; justify-self: start; }
  .akis { grid-template-columns: 1fr; }
  .akis > div + div { border-left: 0; border-top: 1px solid var(--cizgi); }
  .bolum { padding: 56px 0; }
  .kap { padding: 0 16px; }
  .ust nav { gap: 14px; }
}

/* Paket hesaplayıcı */
.hesap { margin-top: 28px; border: 1px solid var(--cizgi); border-radius: 10px; padding: 26px 30px; background: var(--kagit);
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px 40px; align-items: center; }
.hesap h3 { grid-column: 1 / -1; margin-bottom: 4px; }
.hesap-satirlar label { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 8px 0; }
.hesap-satirlar label + label { border-top: 1px solid var(--cizgi); }
.sayac { display: inline-flex; align-items: center; border: 1px solid var(--cizgi); border-radius: 6px; background: #fff; }
.sayac button { width: 38px; height: 38px; border: 0; background: none; font-size: 1.25rem; cursor: pointer; color: var(--murekkep); }
.sayac button:hover { background: var(--kagit); }
.sayac output { min-width: 32px; text-align: center; font-weight: 600; font-family: var(--baslik); }
.hesap-sonuc { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.hesap-sonuc span { display: block; color: var(--soluk); font-size: .95rem; }
.hesap-sonuc strong { display: block; font-family: var(--baslik); font-size: 1.7rem; color: var(--murekkep); line-height: 1.2; }
.hesap-sonuc small { color: var(--soluk); }
.metin .dugme.ana { margin: 6px 0 4px; }
.metin code { background: var(--kagit); padding: 1px 5px; border-radius: 4px; font-size: .92em; }
@media (max-width: 860px) {
  .hesap { grid-template-columns: 1fr; padding: 20px; }
}

/* Deneme başvuru formu */
.basvuru form { margin-top: 28px; display: grid; gap: 4px; max-width: 34em; }
.basvuru label { font-weight: 600; color: var(--murekkep); margin-top: 14px; }
.basvuru input:not([type=checkbox]) { font: inherit; padding: 10px 12px; border: 1px solid #b9c3cc; border-radius: 6px; width: 100%; background: #fff; color: var(--metin); }
.basvuru input:focus { outline: 3px solid var(--kum); outline-offset: 1px; border-color: var(--murekkep); }
.basvuru input[aria-invalid=true] { border-color: #b3261e; }
.adres-alan { display: flex; align-items: stretch; border: 1px solid #b9c3cc; border-radius: 6px; overflow: hidden; background: var(--kagit); }
.adres-alan span { padding: 10px 10px; color: var(--soluk); white-space: nowrap; }
.adres-alan input { border: 0 !important; border-radius: 0 !important; min-width: 0; flex: 1; }
.adres-alan:focus-within { outline: 3px solid var(--kum); outline-offset: 1px; }
.adres-alan input:focus { outline: none; }
.basvuru .ipucu { margin: 2px 0 0; font-size: .92rem; color: var(--soluk); }
.basvuru .hata { margin: 2px 0 0; font-size: .95rem; color: #b3261e; min-height: 0; }
.basvuru .hata:empty { display: none; }
.basvuru label.onay { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; color: var(--metin); margin-top: 20px; }
.basvuru label.onay input { width: 20px; height: 20px; margin-top: 4px; flex: none; }
.basvuru button.dugme { margin-top: 22px; justify-self: start; border: 0; cursor: pointer; font-family: inherit; }
.basvuru button.dugme:disabled { opacity: .6; cursor: wait; }
.basvuru .durum { margin: 10px 0 0; }
.basvuru .durum.kotu { color: #b3261e; }
.gizli-alan { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
#sonuc { margin-top: 28px; padding: 22px 26px; border: 1px solid var(--cizgi); border-left: 6px solid var(--su); border-radius: 8px; background: var(--kagit); }
#sonuc h2 { margin-top: 0; }
@media (max-width: 520px) { .adres-alan span:first-child { display: none; } }