/* Kabuk bilesenleri: ust baslik ve alt bilgi duzenleri.
   Bu dosya yalniz site sayfalarinda yuklenir. Duzenler panelden secilir;
   secilmezse site.js'teki koda gomulu varsayilan cizilir. */

/* ── Ust baslik: ortali duzen ──────────────────────────── */
.tepe-ic-merkez {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--aralik-4);
}
.tepe-ic-merkez .menu-sol ul { justify-content: flex-end; }
.tepe-ic-merkez .menu-sag ul { justify-content: flex-start; }
.tepe-ic-merkez .marka { justify-self: center; }
.tepe-ic-merkez .tepe-sag { position: absolute; right: var(--aralik-5); }
@media (max-width: 900px) {
  .tepe-ic-merkez { grid-template-columns: auto 1fr; }
  .tepe-ic-merkez .menu-sol, .tepe-ic-merkez .menu-sag { display: none; }
  .tepe-ic-merkez .tepe-sag { position: static; justify-self: end; }
}

/* ── Duyuru seridi ─────────────────────────────────────── */
.tepe-duyuru {
  background: var(--ana);
  color: #fff;
  font-size: .86rem;
  padding: .5rem 0;
  text-align: center;
}
.tepe-duyuru .kapsayici {
  display: flex; align-items: center; justify-content: center;
  gap: .7rem; flex-wrap: wrap;
}
.tepe-duyuru a {
  color: #fff; text-decoration: underline; text-underline-offset: 3px;
  font-weight: 500;
}
.tepe-duyuru a:hover { text-decoration-thickness: 2px; }

/* ── Mega menu ─────────────────────────────────────────── */
.menu-mega { position: static; }
.mega-panel {
  position: absolute; left: 50%; translate: -50% 0; top: 100%;
  width: min(100% - 2rem, 60rem);
  background: var(--kart);
  border: 1px solid var(--kenar);
  border-radius: var(--kose-orta);
  box-shadow: var(--golge-3);
  padding: 1.1rem;
  opacity: 0; visibility: hidden; translate: -50% 8px;
  transition: opacity var(--gecis), translate var(--gecis), visibility var(--gecis);
  z-index: 60;
}
.menu-mega:hover .mega-panel,
.menu-mega:focus-within .mega-panel {
  opacity: 1; visibility: visible; translate: -50% 0;
}
.mega-izgara {
  display: grid; gap: .5rem;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.mega-kart {
  display: flex; align-items: center; gap: .75rem;
  padding: .8rem .9rem; border-radius: var(--kose-kucuk);
  transition: background var(--gecis);
}
.mega-kart:hover { background: var(--zemin-3); }
.mega-simge {
  width: 38px; height: 38px; flex: none; display: grid; place-items: center;
  border-radius: var(--kose-kucuk);
  background: var(--mor-50); color: var(--ana);
}
.mega-simge svg { width: 19px; height: 19px; }
.mega-yazi strong { display: block; font-size: .95rem; font-weight: 500; }
@media (max-width: 900px) {
  .mega-panel { position: static; translate: none; width: auto; box-shadow: none;
                border: 0; padding: 0; opacity: 1; visibility: visible; }
  .mega-izgara { grid-template-columns: 1fr; }
}

/* ── Alt bilgi: tek satir ──────────────────────────────── */
.alt-sade-ic {
  display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap;
  padding-block: 1.6rem;
}
.alt-sade-menu ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: 1.1rem; flex-wrap: wrap;
}
.alt-sade-menu a { font-size: .9rem; color: var(--metin-3); }
.alt-sade-menu a:hover { color: var(--ana); }
.alt-sade-telif { margin-left: auto; font-size: .85rem; color: var(--metin-3); }

/* ── Alt bilgi: bulten kutusu ──────────────────────────── */
.alt-bulten {
  display: grid; gap: 1rem;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: 1.6rem 1.8rem;
  margin-bottom: 2.5rem;
  background: var(--zemin-3);
  border: 1px solid var(--kenar);
  border-radius: var(--kose-orta);
}
.alt-bulten h3 { font-size: 1.35rem; font-weight: 500; margin: 0 0 .3rem; }
.alt-bulten p { font-size: .93rem; color: var(--metin-3); margin: 0; }
.bulten-form { display: flex; gap: .55rem; flex-wrap: wrap; }
.bulten-form input {
  min-width: 240px; padding: .72rem 1.1rem;
  border: 1px solid var(--kenar-koyu); border-radius: var(--kose-tam);
  background: var(--kart); color: var(--metin); font: inherit; font-size: .95rem;
}
.bulten-form input:focus {
  outline: none; border-color: var(--ana);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ana) 16%, transparent);
}
.bulten-not { grid-column: 1 / -1; font-size: .8rem; color: var(--metin-3); margin: 0; }
@media (max-width: 760px) {
  .alt-bulten { grid-template-columns: 1fr; }
  .bulten-form input { min-width: 0; flex: 1; }
}

/* ── Destek balonu (sag alt kose, WhatsApp) ────────────── */
.destek-balon {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 60;
  display: flex; flex-direction: column; align-items: flex-end; gap: .75rem;
}
.destek-dugme {
  width: 56px; height: 56px; border: none; border-radius: var(--kose-tam);
  background: #25d366; color: #fff; cursor: pointer;
  display: grid; place-items: center;
  box-shadow: 0 10px 28px rgba(37, 211, 102, .38);
  transition: transform var(--gecis), box-shadow var(--gecis);
}
.destek-dugme:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(37, 211, 102, .46); }
.destek-dugme:focus-visible { outline: 3px solid var(--ana); outline-offset: 3px; }
.destek-dugme svg { width: 30px; height: 30px; }
.destek-simge-kapat { display: none; width: 24px; height: 24px; }
.destek-balon[data-acik] .destek-simge-wa { display: none; }
.destek-balon[data-acik] .destek-simge-kapat { display: block; }

.destek-kart {
  width: min(310px, calc(100vw - 2.5rem));
  padding: 1.15rem 1.25rem 1.25rem;
  background: var(--kart); color: var(--metin);
  border: 1px solid var(--kenar); border-radius: var(--kose-orta);
  box-shadow: var(--golge-3);
  animation: destek-gir .22s cubic-bezier(.4, 0, .2, 1);
}
.destek-kart[hidden] { display: none; }
@keyframes destek-gir {
  from { opacity: 0; transform: translateY(10px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
.destek-kart-tepe { display: flex; align-items: center; gap: .6rem; margin-bottom: .5rem; }
.destek-kart-baslik {
  flex: 1; font-family: var(--yazi-baslik); font-size: 1.02rem; font-weight: 600;
}
.destek-kapat {
  width: 28px; height: 28px; flex: none; padding: 0;
  border: none; border-radius: var(--kose-kucuk);
  background: transparent; color: var(--metin-3); cursor: pointer;
  display: grid; place-items: center;
}
.destek-kapat:hover { background: var(--zemin-3); color: var(--metin); }
.destek-kapat svg { width: 16px; height: 16px; }
.destek-kart-metin { margin: 0 0 .7rem; font-size: .92rem; line-height: 1.55; color: var(--metin-2); }
.destek-kart-saat {
  display: flex; align-items: center; gap: .4rem;
  margin: 0 0 .95rem; font-size: .82rem; color: var(--metin-3);
}
.destek-kart-saat svg { width: 15px; height: 15px; flex: none; }
.destek-yaz {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .72rem 1rem; border-radius: var(--kose-tam);
  background: #25d366; color: #fff; font-weight: 600; font-size: .93rem;
  text-decoration: none; transition: background var(--gecis);
}
.destek-yaz:hover { background: #1ebe5b; color: #fff; }
.destek-yaz svg { width: 19px; height: 19px; flex: none; }
.destek-numara {
  display: block; margin-top: .6rem; text-align: center;
  font-size: .82rem; color: var(--metin-3); letter-spacing: .01em;
}
@media (max-width: 560px) {
  .destek-balon { right: .9rem; bottom: .9rem; }
  .destek-dugme { width: 50px; height: 50px; }
  .destek-dugme svg { width: 26px; height: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .destek-kart { animation: none; }
  .destek-dugme { transition: none; }
}