/* ==========================================================================
   Sayfa iskeleti: üst bar, menü, altbilgi, yüzen destek düğmesi
   ========================================================================== */

/* --- üst bar ------------------------------------------------------------ */
.ust {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: background var(--sure-orta) var(--egri), border-color var(--sure-orta) var(--egri), box-shadow var(--sure-orta) var(--egri);
  border-bottom: 1px solid transparent;
}
/* Sayfa kaydırılınca bar camlaşır: hero üstündeyken görüntüyü kapatmaz. */
.ust[data-kaydi="evet"] {
  background: var(--cam);
  backdrop-filter: blur(20px) saturate(180%);
  border-bottom-color: var(--cizgi);
  box-shadow: 0 10px 30px -22px rgba(16, 36, 84, 0.5);
}
.ust-ic {
  display: flex;
  align-items: center;
  gap: 1rem;
  height: 72px;
}

/* Gerçek logo dosyası. Beyaz zemini saydamlaştırıldığı için koyu temada da
   kutu bırakmıyor; koyu zeminde bir tık parlatılıyor, laciverte çalan
   harfler orada sönük kalıyordu. */
.logo { display: inline-flex; align-items: center; flex: none; }
.logo img {
  display: block;
  height: 30px;
  width: auto;
  transition: transform var(--sure-orta) var(--egri);
}
.logo:hover img { transform: scale(1.03); }
[data-tema="koyu"] .logo img { filter: brightness(1.12) saturate(1.05); }
.alt .logo img { height: 32px; }

.menu { display: none; margin-inline: auto; }
@media (min-width: 1060px) { .menu { display: flex; align-items: center; gap: 0.1rem; } }

.menu-bag {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.5rem 0.78rem;
  border-radius: var(--r-sm);
  font-size: 0.9rem;
  font-weight: 500;
  white-space: nowrap;
  color: var(--metin-orta);
  transition: color var(--sure-hizli) var(--egri), background var(--sure-hizli) var(--egri);
}
.menu-bag:hover { color: var(--metin); background: var(--parilti); }
.menu-bag svg { width: 14px; height: 14px; transition: transform var(--sure-orta) var(--egri); }
/* Altındaki ince çizgi ortadan dışa açılır. */
.menu-bag::after {
  content: "";
  position: absolute;
  left: 0.78rem; right: 0.78rem; bottom: 0.26rem;
  height: 2px;
  border-radius: 2px;
  background: var(--degrade-marka);
  transform: scaleX(0);
  transition: transform var(--sure-orta) var(--egri);
}
.menu-bag:hover::after { transform: scaleX(1); }
body[data-sayfa] .menu-bag[data-aktif="evet"] { color: var(--metin); }
body[data-sayfa] .menu-bag[data-aktif="evet"]::after { transform: scaleX(1); }

/* --- açılır menü -------------------------------------------------------- */
.acilir { position: relative; }
.acilir-panel {
  position: absolute;
  top: calc(100% + 0.6rem);
  left: 0;
  width: 22rem;
  padding: 0.6rem;
  border: 1px solid var(--cizgi);
  border-radius: var(--r-lg);
  background: var(--yuzey);
  box-shadow: var(--golge-yumusak);
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 10px, 0);
  transition: opacity var(--sure-orta) var(--egri), transform var(--sure-orta) var(--egri), visibility var(--sure-orta);
}
.acilir:hover .acilir-panel,
.acilir:focus-within .acilir-panel { opacity: 1; visibility: visible; transform: none; }
.acilir:hover > .menu-bag svg { transform: rotate(180deg); }
.acilir-oge {
  display: flex;
  gap: 0.85rem;
  padding: 0.75rem;
  border-radius: var(--r-md);
  transition: background var(--sure-hizli) var(--egri);
}
.acilir-oge:hover { background: var(--parilti); }
.acilir-oge .ikon {
  display: grid; place-items: center;
  width: 36px; height: 36px; flex: none;
  border: 1px solid var(--cizgi);
  border-radius: 10px;
  background: rgba(31, 85, 214, 0.12);
  color: var(--mavi-400);
}
.acilir-oge .ikon svg { width: 18px; height: 18px; }
.acilir-oge strong { display: block; font-size: 0.9rem; font-weight: 650; }
.acilir-oge span { display: block; font-size: 0.8125rem; color: var(--metin-soluk); line-height: 1.5; }

/* --- üst bar eylemleri -------------------------------------------------- */
.ust-eylem { display: flex; align-items: center; gap: 0.45rem; margin-left: auto; }

/* Yardımcı öğelerle asıl eylemi ayıran ince çizgi: düğme kalabalığın
   içinde kaybolmasın. */
.ust-ayrac {
  display: none;
  width: 1px;
  height: 22px;
  margin-inline: 0.35rem;
  background: var(--cizgi);
}
@media (min-width: 720px) { .ust-ayrac { display: block; } }
@media (min-width: 1060px) { .ust-eylem { margin-left: 0; } }

.ikon-dugme {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border: 1px solid var(--cizgi);
  border-radius: var(--r-tam);
  background: transparent;
  color: var(--metin-orta);
  transition: color var(--sure-hizli) var(--egri), border-color var(--sure-hizli) var(--egri), transform var(--sure-hizli) var(--egri);
}
.ikon-dugme svg { width: 17px; height: 17px; }
.ikon-dugme:hover { color: var(--metin); border-color: var(--cizgi-guclu); background: var(--parilti); }

.dil-dugme {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Tema düğmesi iki ikonu üst üste tutar, temaya göre biri döner. */
.tema-dugme .ay, .tema-dugme .gunes { grid-area: 1 / 1; transition: transform var(--sure-orta) var(--egri), opacity var(--sure-orta) var(--egri); }
[data-tema="koyu"] .tema-dugme .gunes { opacity: 0; transform: rotate(-90deg) scale(0.5); }
[data-tema="acik"] .tema-dugme .ay { opacity: 0; transform: rotate(90deg) scale(0.5); }

.ust-telefon { display: none; }
/* Telefon numarası çıplak metin olarak menüyle eylemler arasında asılı
   duruyordu; çerçeveli bir çipe alınınca satırın parçası oldu. */
@media (min-width: 1240px) {
  .ust-telefon {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    height: 38px;
    padding-inline: 0.9rem;
    border: 1px solid var(--cizgi);
    border-radius: var(--r-tam);
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--metin-orta);
    transition: color var(--sure-hizli) var(--egri), border-color var(--sure-hizli) var(--egri), background var(--sure-hizli) var(--egri);
  }
  .ust-telefon:hover { color: var(--metin); border-color: var(--cizgi-guclu); background: var(--parilti); }
  .ust-telefon svg { width: 15px; height: 15px; color: var(--mavi-500); }
}
.ust-cta { display: none; }
@media (min-width: 720px) { .ust-cta { display: inline-flex; --dugme-yukseklik: 2.45rem; padding-inline: 1.2rem; font-size: 0.875rem; } }

.menu-dugme { display: grid; }
@media (min-width: 1060px) { .menu-dugme { display: none; } }
.menu-dugme .cizgiler { position: relative; width: 18px; height: 12px; }
.menu-dugme .cizgiler span {
  position: absolute; left: 0; right: 0;
  height: 2px; border-radius: 2px;
  background: currentColor;
  transition: transform var(--sure-orta) var(--egri), opacity var(--sure-hizli) var(--egri);
}
.menu-dugme .cizgiler span:nth-child(1) { top: 0; }
.menu-dugme .cizgiler span:nth-child(2) { top: 5px; }
.menu-dugme .cizgiler span:nth-child(3) { top: 10px; }
.menu-dugme[aria-expanded="true"] .cizgiler span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.menu-dugme[aria-expanded="true"] .cizgiler span:nth-child(2) { opacity: 0; }
.menu-dugme[aria-expanded="true"] .cizgiler span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* --- mobil çekmece ------------------------------------------------------ */
.cekmece {
  position: fixed;
  inset: 72px 0 0 0;
  z-index: 99;
  display: flex;
  flex-direction: column;
  padding: 1.5rem var(--kenar) 2.5rem;
  background: var(--zemin);
  border-top: 1px solid var(--cizgi);
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, -12px, 0);
  transition: opacity var(--sure-orta) var(--egri), transform var(--sure-orta) var(--egri), visibility var(--sure-orta);
}
.cekmece[data-acik="evet"] { opacity: 1; visibility: visible; transform: none; }
@media (min-width: 1060px) { .cekmece { display: none; } }
.cekmece-baslik {
  margin: 1.6rem 0 0.5rem;
  font-size: var(--t-mikro);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--metin-soluk);
}
.cekmece-bag {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--cizgi);
  font-size: 1.05rem;
  font-weight: 600;
  transition: color var(--sure-hizli) var(--egri), padding-left var(--sure-orta) var(--egri);
}
.cekmece-bag:hover { color: var(--mavi-400); padding-left: 0.4rem; }
.cekmece-bag svg { width: 16px; height: 16px; color: var(--metin-soluk); }
.cekmece .dugme { margin-top: 1.75rem; }
.cekmece .cekmece-telefon { margin-top: 0.75rem; }
body[data-menu="acik"] { overflow: hidden; }

/* --- altbilgi ----------------------------------------------------------- */
.alt {
  position: relative;
  margin-top: var(--bolum-bosluk);
  border-top: 1px solid var(--cizgi);
  background: var(--zemin-alt);
}
.alt-ic {
  display: grid;
  gap: 2.75rem;
  padding-block: clamp(3rem, 2rem + 3vw, 4.5rem);
}
@media (min-width: 900px) { .alt-ic { grid-template-columns: 1.6fr repeat(3, 1fr); gap: 2rem; } }
.alt-marka p {
  margin: 1.1rem 0 1.5rem;
  max-width: 26rem;
  font-size: 0.925rem;
  color: var(--metin-orta);
}
.alt-sosyal { display: flex; gap: 0.55rem; }
.alt h4 {
  margin-bottom: 1.1rem;
  font-size: var(--t-mikro);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--metin-soluk);
}
.alt li + li { margin-top: 0.7rem; }
.alt li a {
  display: inline-block;
  font-size: 0.9rem;
  color: var(--metin-orta);
  transition: color var(--sure-hizli) var(--egri), transform var(--sure-hizli) var(--egri);
}
.alt li a:hover { color: var(--mavi-400); transform: translateX(3px); }
.alt-bant {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.5rem;
  border-top: 1px solid var(--cizgi);
  font-size: var(--t-kucuk);
  color: var(--metin-soluk);
}
.alt-bant nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.alt-bant a:hover { color: var(--mavi-400); }

/* --- yüzen destek düğmesi ----------------------------------------------- */
.destek {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  height: 54px;
  padding: 0 1.15rem;
  border-radius: var(--r-tam);
  background: var(--degrade-marka);
  color: #fff;
  font-weight: 650;
  font-size: 0.925rem;
  box-shadow: var(--golge-marka);
  transition: transform var(--sure-orta) var(--egri), box-shadow var(--sure-orta) var(--egri);
}
.destek svg { width: 22px; height: 22px; flex: none; }
.destek .yazi {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
  transition: max-width var(--sure-yavas) var(--egri), opacity var(--sure-orta) var(--egri);
}
.destek:hover { transform: translateY(-3px); box-shadow: 0 24px 50px -18px rgba(31, 85, 214, 0.9); }
.destek:hover .yazi, .destek:focus-visible .yazi { max-width: 12rem; opacity: 1; }