/* ============================================================
   HALIDI TURIZM — YERLESIM
   Ust serit, header, mobil menu, hero, footer, sabit WhatsApp
   ============================================================ */

/* ---------- UST SERIT ---------- */
.ust-serit {
  background: var(--antrasit);
  color: rgba(255, 255, 255, .82);
  font-size: .84rem;
  padding-block: .55rem;
}
.ust-serit__ic {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.ust-serit__iletisim { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.ust-serit a { color: rgba(255, 255, 255, .82); display: inline-flex; align-items: center; gap: .45rem; }
.ust-serit a:hover { color: var(--altin); }
.ust-serit svg { width: 15px; height: 15px; flex-shrink: 0; }
.ust-serit__sosyal { display: flex; align-items: center; gap: .85rem; }
.ust-serit__sosyal svg { width: 16px; height: 16px; }

@media (max-width: 720px) {
  .ust-serit { display: none; }
}

/* ---------- HEADER ---------- */
.header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--beyaz);
  border-bottom: 1px solid var(--cizgi);
  transition: box-shadow var(--gecis), padding var(--gecis);
}
.header--kaydirilmis { box-shadow: var(--golge); }

.header__ic {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: .8rem;
}

.header__logo { display: flex; align-items: center; flex-shrink: 0; }
.header__logo img {
  height: 54px;
  width: auto;
  transition: height var(--gecis);
}
.header--kaydirilmis .header__logo img { height: 46px; }

@media (max-width: 420px) {
  .header__logo img { height: 44px; }
}

/* --- Ana menu --- */
.menu { display: flex; align-items: center; gap: .25rem; }
.menu__oge { position: relative; }

.menu__bag {
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: .65rem .9rem;
  font-size: .93rem;
  font-weight: 500;
  color: var(--antrasit);
  border-radius: var(--radius-kucuk);
  transition: color var(--gecis), background var(--gecis);
  white-space: nowrap;
}
.menu__bag:hover { color: var(--yesil-koyu); background: var(--yesil-soluk); }

/* Aktif sayfa */
.menu__oge--aktif > .menu__bag { color: var(--yesil-koyu); font-weight: 600; }
.menu__oge--aktif > .menu__bag::after {
  content: '';
  position: absolute;
  left: .9rem; right: .9rem; bottom: .2rem;
  height: 2.5px;
  background: var(--altin);
  border-radius: 3px;
}

/* Acilir ok */
.menu__ok { width: 14px; height: 14px; transition: transform var(--gecis); }
.menu__oge:hover .menu__ok { transform: rotate(180deg); }

/* --- Acilir alt menu --- */
.alt-menu {
  position: absolute;
  top: calc(100% + .5rem);
  left: 0;
  min-width: 245px;
  background: var(--beyaz);
  border: 1px solid var(--cizgi);
  border-radius: var(--radius);
  box-shadow: var(--golge-buyuk);
  padding: .55rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all var(--gecis);
}
.menu__oge:hover > .alt-menu,
.menu__oge:focus-within > .alt-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.alt-menu a {
  display: block;
  padding: .65rem .9rem;
  font-size: .9rem;
  color: var(--govde);
  border-radius: var(--radius-kucuk);
  transition: all var(--gecis);
}
.alt-menu a:hover {
  background: var(--yesil-soluk);
  color: var(--yesil-koyu);
  padding-left: 1.2rem;
}
.alt-menu__ayrac { height: 1px; background: var(--cizgi); margin: .4rem .9rem; }

.header__eylem { display: flex; align-items: center; gap: .7rem; flex-shrink: 0; }

/* --- Hamburger --- */
.menu-dugme {
  display: none;
  position: relative;
  z-index: 1150;            /* acik menu panelinin (1100) ustunde kalsin */
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-kucuk);
  color: var(--antrasit);
  transition: background var(--gecis);
}
.menu-dugme:hover { background: var(--zemin); }
.menu-dugme svg { width: 26px; height: 26px; }
.menu-dugme__kapat { display: none; }
.menu-dugme[aria-expanded="true"] .menu-dugme__ac { display: none; }
.menu-dugme[aria-expanded="true"] .menu-dugme__kapat { display: block; }

/* ---------- MOBIL MENU ---------- */
@media (max-width: 1100px) {
  .menu-dugme { display: flex; }
  .header__eylem .btn--masaustu { display: none; }

  .menu {
    position: fixed;
    top: 0; right: 0;
    width: min(360px, 88vw);
    height: 100dvh;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--beyaz);
    box-shadow: -8px 0 40px rgba(43, 63, 68, .18);
    padding: 5.5rem 1.35rem 2rem;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform .32s cubic-bezier(.4, 0, .2, 1);
    z-index: 1100;
  }
  .menu--acik { transform: translateX(0); }

  .menu__bag {
    padding: .95rem .6rem;
    font-size: 1rem;
    border-radius: 0;
    border-bottom: 1px solid var(--cizgi);
    justify-content: space-between;
  }
  .menu__oge--aktif > .menu__bag::after { display: none; }
  .menu__oge--aktif > .menu__bag { background: var(--yesil-soluk); padding-left: 1rem; }

  /* Mobilde alt menu akordeon gibi acilir */
  .alt-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: none;
    border-radius: 0;
    padding: 0 0 0 1rem;
    display: none;
    background: var(--zemin);
  }
  .menu__oge--acik > .alt-menu { display: block; }
  .menu__oge--acik > .menu__bag .menu__ok { transform: rotate(180deg); }
  .alt-menu a { border-bottom: 1px solid var(--cizgi); border-radius: 0; }

  .menu__mobil-eylem { margin-top: 1.5rem; display: grid; gap: .7rem; }
}

@media (min-width: 1101px) {
  .menu__mobil-eylem { display: none; }
}

/* Menu acikken arka plan karartma */
.menu-perde {
  position: fixed;
  inset: 0;
  background: rgba(29, 44, 48, .5);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--gecis), visibility var(--gecis);
  z-index: 1050;
}
.menu-perde--acik { opacity: 1; visibility: visible; }

body.menu-acik { overflow: hidden; }

/* ONEMLI: .header sticky + z-index oldugu icin kendi yigin baglamini
   olusturur. Icindeki .menu ne kadar yuksek z-index alirsa alsin,
   header'in seviyesiyle sinirli kalir ve perdenin altinda gorunur
   (bulaniklasir). Menu acikken header'i perdenin ustune cikariyoruz. */
body.menu-acik .header { z-index: 1200; }

/* ---------- HERO ---------- */
.hero {
  position: relative;
  min-height: clamp(520px, 82vh, 780px);
  display: grid;
  align-items: center;
  overflow: hidden;
  background: var(--antrasit);
}

.hero__slaytlar { position: absolute; inset: 0; }
.hero__slayt {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.4s ease-in-out;
}
.hero__slayt--aktif { opacity: 1; }
.hero__slayt img {
  width: 100%; height: 100%;
  object-fit: cover;
  animation: hero-yakinlas 18s ease-out forwards;
}
@keyframes hero-yakinlas {
  from { transform: scale(1); }
  to   { transform: scale(1.09); }
}

.hero__karartma {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgba(29, 44, 48, .84) 0%, rgba(29, 44, 48, .48) 52%, rgba(29, 44, 48, .16) 100%),
    linear-gradient(to top, rgba(29, 44, 48, .3), transparent 52%);
}

.hero__icerik {
  position: relative;
  padding-block: clamp(3.5rem, 9vw, 6rem);
  max-width: 690px;
}
.hero__ust-etiket {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--altin);
  margin-bottom: 1.1rem;
}
.hero__ust-etiket::before {
  content: '';
  width: 32px; height: 2px;
  background: var(--altin);
}
.hero h1 {
  color: var(--beyaz);
  font-size: clamp(2.3rem, 6.5vw, 4.2rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.08;
  margin-bottom: 1.1rem;
}
.hero h1 .vurgu { color: var(--altin); }
.hero__alt-metin {
  font-size: clamp(1.02rem, 2vw, 1.22rem);
  color: rgba(255, 255, 255, .9);
  max-width: 560px;
  margin-bottom: 2.1rem;
}
.hero__butonlar { display: flex; flex-wrap: wrap; gap: .85rem; }

/* Slayt noktalari */
.hero__noktalar {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: .6rem;
  z-index: 3;
}
.hero__nokta {
  width: 11px; height: 11px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .4);
  transition: all var(--gecis);
}
.hero__nokta--aktif { background: var(--altin); width: 32px; border-radius: 100px; }

/* ---------- SABIT WHATSAPP DUGMESI ---------- */
.sabit-whatsapp {
  position: fixed;
  right: 1.35rem;
  bottom: 1.35rem;
  z-index: 900;
  width: 58px; height: 58px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--whatsapp);
  color: var(--beyaz);
  box-shadow: 0 6px 22px rgba(37, 211, 102, .45);
  transition: transform var(--gecis), box-shadow var(--gecis);
}
.sabit-whatsapp:hover {
  transform: scale(1.09);
  color: var(--beyaz);
  box-shadow: 0 10px 30px rgba(37, 211, 102, .55);
}
.sabit-whatsapp svg { width: 30px; height: 30px; }
.sabit-whatsapp::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--whatsapp);
  animation: nabiz 2.4s ease-out infinite;
}
@keyframes nabiz {
  0%   { transform: scale(1);   opacity: .7; }
  100% { transform: scale(1.7); opacity: 0; }
}

/* Mobilde alt eylem cubugu */
.mobil-cubuk {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 950;
  background: var(--beyaz);
  border-top: 1px solid var(--cizgi);
  box-shadow: 0 -4px 20px rgba(43, 63, 68, .1);
}
.mobil-cubuk__ic { display: grid; grid-template-columns: 1fr 1fr; }
.mobil-cubuk a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .95rem .5rem;
  font-size: .93rem;
  font-weight: 600;
  color: var(--antrasit);
}
.mobil-cubuk a + a { border-left: 1px solid var(--cizgi); }
.mobil-cubuk a svg { width: 19px; height: 19px; }
.mobil-cubuk__wa { color: var(--whatsapp-koyu) !important; }

@media (max-width: 720px) {
  .mobil-cubuk { display: block; }
  .sabit-whatsapp { display: none; }
  body { padding-bottom: 56px; }
}

/* ---------- FOOTER ---------- */
.footer {
  background: var(--antrasit);
  color: rgba(255, 255, 255, .72);
  font-size: .93rem;
}
.footer__ust {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
  gap: 2.5rem;
  padding-block: clamp(3rem, 6vw, 4.5rem);
}
@media (max-width: 980px) {
  .footer__ust { grid-template-columns: 1fr 1fr; gap: 2.5rem 2rem; }
}
@media (max-width: 560px) {
  .footer__ust { grid-template-columns: 1fr; }
}

/* Footer'da header ile ayni renkli logo kullanilir. Koyu zemin
   uzerinde okunabilmesi icin beyaz bir kutu icine alinmistir —
   logonun kendi renklerini bozmadan netlik saglar. */
.footer__logo {
  display: inline-block;
  background: var(--beyaz);
  padding: .85rem 1.15rem;
  border-radius: var(--radius);
  margin-bottom: 1.35rem;
  line-height: 0;
}
.footer__logo img { height: 58px; width: auto; }
.footer__tanim { font-size: .92rem; line-height: 1.75; margin-bottom: 1.35rem; }

.footer h3 {
  color: var(--beyaz);
  font-size: 1.02rem;
  font-weight: 600;
  margin-bottom: 1.15rem;
  position: relative;
  padding-bottom: .65rem;
}
.footer h3::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 34px; height: 2.5px;
  background: var(--altin);
  border-radius: 3px;
}

.footer__liste li + li { margin-top: .6rem; }
.footer__liste a { color: rgba(255, 255, 255, .72); font-size: .92rem; }
.footer__liste a:hover { color: var(--altin); padding-left: .3rem; }

.footer__iletisim li {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  margin-bottom: .95rem;
  line-height: 1.6;
}
.footer__iletisim svg {
  width: 17px; height: 17px;
  flex-shrink: 0;
  margin-top: .28rem;
  color: var(--altin);
}
.footer__iletisim a { color: rgba(255, 255, 255, .72); }
.footer__iletisim a:hover { color: var(--altin); }

.footer__sosyal { display: flex; gap: .65rem; margin-top: 1.35rem; }
.footer__sosyal a {
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .09);
  color: rgba(255, 255, 255, .82);
  transition: all var(--gecis);
}
.footer__sosyal a:hover { background: var(--altin); color: var(--antrasit); transform: translateY(-3px); }
.footer__sosyal svg { width: 18px; height: 18px; }

.footer__alt {
  border-top: 1px solid rgba(255, 255, 255, .1);
  padding-block: 1.35rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: .85rem;
  color: rgba(255, 255, 255, .55);
}
.footer__alt-baglantilar { display: flex; flex-wrap: wrap; gap: 1.35rem; }
.footer__alt a { color: rgba(255, 255, 255, .55); }
.footer__alt a:hover { color: var(--altin); }

/* Gelistirici imzasi — footer'in en alt satiri */
.footer__gelistirici {
  border-top: 1px solid rgba(255, 255, 255, .07);
  padding-block: 1.1rem;
  text-align: center;
  font-size: .82rem;
  color: rgba(255, 255, 255, .4);
  letter-spacing: .02em;
}
.footer__gelistirici a {
  color: rgba(255, 255, 255, .62);
  font-weight: 600;
  transition: color var(--gecis);
}
.footer__gelistirici a:hover { color: var(--altin); }