/* etesio.com - iletisim sayfasi

   Kimlik ve cihaz katmanlarinin uzerine biner.
   Renk, olcu ve kose degerleri kimlik degiskenlerinden alinir;
   bu dosyada duz renk kodu yazilmaz. */

* { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--zemin);
  color: var(--metin);
  font-family: var(--yazi-govde);
  font-size: var(--yazi-1);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

h1, h2, h3 {
  font-family: var(--yazi-baslik);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

a { color: inherit; text-decoration: none; }

:focus-visible { outline: 2px solid var(--vurgu); outline-offset: 3px; }
::selection { background: var(--vurgu); color: var(--vurgu-ustu); }

.atla {
  position: absolute;
  left: -9999px;
  top: var(--aralik-2);
  z-index: 100;
  padding: var(--aralik-2) var(--aralik-3);
  background: var(--ana);
  color: var(--ana-ustu);
}
.atla:focus { left: var(--aralik-2); }

/* ---------- olcu ---------- */

.kapsayici {
  width: 100%;
  max-width: 1100px;
  margin-inline: auto;
  padding-inline: var(--aralik-3);
}

@media (min-width: 768px) { .kapsayici { padding-inline: var(--aralik-4); } }

/* ---------- tepe ---------- */

.tepe { padding-block: var(--aralik-3); }

.tepe-ic {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--aralik-3);
}

.marka { display: inline-flex; align-items: center; gap: var(--aralik-2); }
.marka img { width: 40px; height: 40px; display: block; }

.marka-ad {
  font-family: var(--yazi-baslik);
  font-weight: 700;
  font-size: var(--yazi-3);
  letter-spacing: -0.04em;
  line-height: 1;
  display: block;
}

.marka-alt {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--soluk);
  margin-top: 3px;
  white-space: nowrap;
}

.tema-dugme {
  width: var(--dokunma-hedefi);
  height: var(--dokunma-hedefi);
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid var(--cizgi);
  color: var(--soluk);
  cursor: pointer;
  flex: none;
}
.tema-dugme:hover { color: var(--metin); border-color: var(--ana); }
.tema-dugme svg { width: 18px; height: 18px; }

.tema-gunes { display: none; }
:root[data-tema="koyu"] .tema-ay { display: none; }
:root[data-tema="koyu"] .tema-gunes { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="acik"]) .tema-ay { display: none; }
  :root:not([data-tema="acik"]) .tema-gunes { display: block; }
}

/* ---------- govde ---------- */

.govde {
  flex: 1;
  padding-block: var(--aralik-5) var(--aralik-6);
  position: relative;
  overflow: hidden;
}

/* Simge arka planda buyuk ve sonuk */
.sus {
  position: absolute;
  top: 50%;
  right: -22%;
  translate: 0 -50%;
  width: min(78vw, 640px);
  opacity: .06;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

@media (min-width: 1024px) { .sus { right: -8%; opacity: .09; } }

.sus-koyu { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="acik"]) .sus-acik { display: none; }
  :root:not([data-tema="acik"]) .sus-koyu { display: block; }
}
:root[data-tema="koyu"] .sus-acik { display: none; }
:root[data-tema="koyu"] .sus-koyu { display: block; }
:root[data-tema="acik"] .sus-acik { display: block; }
:root[data-tema="acik"] .sus-koyu { display: none; }

.kapsayici { position: relative; z-index: 1; }

/* ---------- giris ---------- */

.giris { margin-bottom: var(--aralik-5); }

/* Basligi ve metni dar tut, etiketi degil - yoksa etiket iki satira boluyor */
.giris h1, .giris > p { max-width: 46ch; }

.etiket {
  display: flex;
  align-items: center;
  gap: var(--aralik-2);
  flex-wrap: wrap;
  font-family: var(--yazi-baslik);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--soluk);
  margin-bottom: var(--aralik-3);
}

.etiket::before {
  content: "";
  width: var(--aralik-4);
  height: 2px;
  background: var(--vurgu);
  flex: none;
}

.giris h1 {
  font-size: clamp(1.9rem, 5.6vw, 3rem);
  letter-spacing: -0.035em;
  margin-bottom: var(--aralik-2);
}

.giris p {
  color: var(--soluk);
  font-size: var(--yazi-2);
  max-width: 42ch;
}

/* ---------- iletisim izgarasi ---------- */

.iletisim {
  display: grid;
  gap: var(--aralik-5) var(--aralik-4);
}

/* Sutun sayisini blok sayisi belirler, sabit karo dizilimi yok */
@media (min-width: 768px) {
  .iletisim {
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: var(--aralik-5) var(--aralik-4);
  }
}

.blok-baslik {
  font-family: var(--yazi-baslik);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--soluk);
  padding-bottom: var(--aralik-1);
  border-bottom: 1px solid var(--cizgi);
  margin-bottom: var(--aralik-2);
}

.liste { list-style: none; display: grid; gap: 2px; }

.liste li {
  display: flex;
  gap: var(--aralik-2);
  justify-content: space-between;
  align-items: baseline;
  padding-block: 5px;
  border-bottom: 1px dotted var(--cizgi);
  max-width: none;
}

.liste-amac { color: var(--soluk); font-size: 0.84rem; }

.liste a {
  font-family: var(--yazi-baslik);
  font-weight: 600;
  font-size: 0.95rem;
  white-space: nowrap;
}

.liste a:hover { color: var(--ana); }
:root[data-tema="koyu"] .liste a:hover { color: var(--vurgu); }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="acik"]) .liste a:hover { color: var(--vurgu); }
}

/* E-posta adresleri uzun, alt alta daha rahat okunur */
.liste-dikey li { flex-direction: column; align-items: flex-start; gap: 0; }
.liste-dikey a { font-size: var(--yazi-1); white-space: normal; }

.telefon-not {
  margin-top: var(--aralik-2);
  color: var(--soluk);
  font-size: 0.84rem;
  max-width: none;
}

/* ---------- subeler ---------- */

.subeler { display: grid; gap: var(--aralik-3); }

.sube { border-left: 2px solid var(--vurgu); padding-left: var(--aralik-2); }
.sube h3 { font-size: var(--yazi-1); margin-bottom: 2px; }
.sube p { color: var(--soluk); font-size: 0.88rem; max-width: none; line-height: 1.5; }

/* ---------- pano baglantisi ---------- */

/* Dar ekranda alt alta, genis ekranda tek satir */
.pano {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: var(--aralik-5);
  padding: var(--aralik-2) var(--aralik-3);
  border: 1px solid var(--cizgi);
  transition: border-color .2s ease, transform .2s ease;
}

@media (min-width: 480px) {
  .pano {
    flex-direction: row;
    align-items: baseline;
    gap: var(--aralik-2);
    width: max-content;
    max-width: 100%;
  }
}

.pano:hover { border-color: var(--ana); transform: translateY(-2px); }
:root[data-tema="koyu"] .pano:hover { border-color: var(--vurgu); }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="acik"]) .pano:hover { border-color: var(--vurgu); }
}

.pano-ad { font-family: var(--yazi-baslik); font-weight: 600; }
.pano-not { color: var(--soluk); font-size: 0.86rem; }
.pano-ok { color: var(--vurgu); font-family: var(--yazi-baslik); font-weight: 700; }

/* ---------- dip ---------- */

.dip {
  border-top: 1px solid var(--cizgi);
  padding-block: var(--aralik-3);
  font-size: 0.82rem;
  color: var(--soluk);
}

.dip-ic {
  display: flex;
  flex-wrap: wrap;
  gap: var(--aralik-1) var(--aralik-3);
  justify-content: space-between;
  align-items: center;
}

.dip-kunye { display: flex; flex-wrap: wrap; gap: var(--aralik-1) var(--aralik-2); }
.dip-kunye span::after { content: " ·"; color: var(--cizgi); }
.dip-kunye span:last-child::after { content: ""; }