/* ============================================================
   AKHAN KUYUMCULUK — ORTAK ÜST MENÜ (HEADER)
   Tüm sayfalarda aynı görünüm. Tek kaynak: bu dosya + header.js
   Sınıf adları 'ch-' ile başlar; sayfaların kendi .btn/.nav/.brand
   gibi sınıflarıyla ÇAKIŞMAZ.
   Renkler sayfaların CSS değişkenlerinden gelir; eksik olanlar için
   yedek değer verilir (ör. gecmis.html --line tanımlamıyor).
============================================================ */

.ch-hdr {
  position: sticky; top: 0; z-index: 50;
  background: var(--card, #fff);
  border-bottom: 1px solid var(--line, var(--brd, rgba(0, 0, 0, .08)));
}
/* Saydam bulanık arka plan (destekleyen tarayıcılarda) */
@supports (backdrop-filter: blur(12px)) and (background: color-mix(in srgb, red 50%, transparent)) {
  .ch-hdr {
    background: color-mix(in srgb, var(--card, #fff) 90%, transparent);
    backdrop-filter: blur(12px);
  }
}

.ch-in {
  max-width: 1280px; margin: 0 auto;
  padding: 12px clamp(16px, 3.5vw, 40px);
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
}
/* Canlı panel tam genişlik kullanır */
.ch-hdr.genis .ch-in { max-width: none; }

/* ---------- Marka ---------- */
.ch-brand { display: flex; align-items: center; gap: 12px; min-width: 0; color: inherit; text-decoration: none; }
.ch-mono {
  width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; overflow: hidden;
  font-family: 'Playfair Display', serif; font-weight: 700; font-size: 24px;
  color: var(--gold-l, #e0bd6a);
  background: radial-gradient(circle at 35% 30%, #3a3327, #161310);
  border: 1px solid rgba(201, 162, 39, .4);
}
.ch-brand small {
  display: block; font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--t3, #a49e94); white-space: nowrap;
}
.ch-brand b,
.ch-brand h1 {
  font-size: 19px; font-weight: 600; letter-spacing: .01em; line-height: 1.25;
  color: var(--t1, #1c1a17); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}

/* ---------- Orta menü ---------- */
.ch-nav { display: flex; align-items: center; gap: 4px; }
.ch-nav a {
  font-size: 14.5px; font-weight: 500; color: var(--t2, #6b665e);
  padding: 9px 14px; border-radius: 10px; transition: .16s;
  white-space: nowrap; text-decoration: none;
}
.ch-nav a:hover,
.ch-nav a.akt {
  color: var(--gold-d, #a67e2b);
  background: color-mix(in srgb, var(--gold, #c89b3c) 10%, transparent);
}
/* color-mix desteklemeyen tarayıcı için yedek */
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .ch-nav a:hover, .ch-nav a.akt { background: rgba(200, 155, 60, .1); }
}

/* ---------- Sağ taraf ---------- */
.ch-right { display: flex; align-items: center; gap: 10px; }

.ch-ico {
  width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--card2, #faf9f6);
  border: 1px solid var(--line, var(--brd, rgba(0, 0, 0, .08)));
  color: var(--t2, #6b665e);
  font-family: inherit; font-size: 15px; cursor: pointer; transition: .16s;
  text-decoration: none;
}
.ch-ico:hover { border-color: var(--gold, #c89b3c); color: var(--gold-d, #a67e2b); }

.ch-btn {
  display: inline-flex; align-items: center; gap: .55em;
  font-family: inherit; font-size: 14.5px; font-weight: 600;
  border: none; border-radius: 12px; padding: 11px 22px;
  cursor: pointer; transition: .18s; white-space: nowrap; text-decoration: none;
}
.ch-btn.gold {
  background: linear-gradient(135deg, var(--gold, #c89b3c), var(--gold-d, #a67e2b));
  color: #1a1300; box-shadow: 0 6px 18px rgba(200, 155, 60, .3);
}
.ch-btn.gold:hover { filter: brightness(1.07); transform: translateY(-1px); }
.ch-btn.line {
  background: transparent; color: var(--t1, #1c1a17);
  border: 1.5px solid var(--line, var(--brd, rgba(0, 0, 0, .08)));
}
.ch-btn.line:hover { border-color: var(--gold, #c89b3c); color: var(--gold-d, #a67e2b); }

/* Yönetici butonu: yalnızca yönetici girişi yapılmışsa görünür.
   header.js admin doğrulanınca [hidden] niteliğini kaldırır. */
.ch-admin[hidden] { display: none !important; }

.ch-menu-ac { display: none; }

/* ---------- Mobil menü ---------- */
.ch-mmenu {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(10, 9, 7, .5); backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none; transition: .25s;
}
.ch-mmenu.acik { opacity: 1; pointer-events: auto; }
.ch-mmenu-in {
  position: absolute; top: 0; right: 0; height: 100%; width: min(300px, 82vw);
  background: var(--card, #fff);
  border-left: 1px solid var(--line, var(--brd, rgba(0, 0, 0, .08)));
  padding: 22px; transform: translateX(100%); transition: .3s;
  display: flex; flex-direction: column; gap: 6px;
  overflow-y: auto;
}
.ch-mmenu.acik .ch-mmenu-in { transform: none; }
.ch-mmenu-in a {
  font-size: 16px; font-weight: 500; color: var(--t1, #1c1a17);
  padding: 13px 12px; border-radius: 10px; text-decoration: none;
}
.ch-mmenu-in a:hover { background: var(--card2, #faf9f6); color: var(--gold-d, #a67e2b); }
.ch-mmenu-in a.akt { color: var(--gold-d, #a67e2b); background: var(--card2, #faf9f6); }
.ch-mmenu-kapa {
  align-self: flex-end; font-size: 22px; line-height: 1;
  background: none; border: none; color: var(--t2, #6b665e); cursor: pointer; margin-bottom: 8px;
}

/* ---------- Duyarlı ---------- */
@media (max-width: 1100px) {
  .ch-btn { padding: 11px 16px; }
  .ch-nav a { padding: 9px 11px; font-size: 14px; }
}
@media (max-width: 980px) {
  .ch-nav { display: none; }
  .ch-menu-ac { display: grid; }
  #girisLink { display: none; }
}
@media (max-width: 620px) {
  .ch-in { gap: 10px; padding: 10px clamp(12px, 3vw, 20px); }
  .ch-mono { width: 40px; height: 40px; font-size: 20px; }
  .ch-brand b, .ch-brand h1 { font-size: 16px; }
  .ch-brand small { font-size: 9.5px; letter-spacing: .18em; }
  .ch-btn { padding: 10px 14px; font-size: 13.5px; }
  .ch-ico { width: 38px; height: 38px; border-radius: 10px; }
}
/* Çok dar ekranda "Canlı Veriler" yazısı gizlenir, ikon kalır */
@media (max-width: 460px) {
  .ch-btn.gold .ch-yazi { display: none; }
  .ch-btn.gold { padding: 10px 13px; }
}

/* ---------- Masaüstü düzeni: menü solda, logo + firma adı ortada ---------- */
@media (min-width: 981px) {
  .ch-nav { order: -1; }
  .ch-brand { gap: 14px; }
  .ch-mono { width: 58px; height: 58px; border-width: 1.5px; }
  .ch-brand small { font-size: 11px; letter-spacing: .26em; color: var(--gold-d, #a67e2b); }
  .ch-brand b,
  .ch-brand h1 { font-size: 30px; font-weight: 700; }
}
/* Yeterli genişlikte marka tam ortaya sabitlenir */
@media (min-width: 1280px) {
  .ch-in { display: grid; grid-template-columns: 1fr auto 1fr; }
  .ch-nav { justify-self: start; }
  .ch-brand { justify-self: center; }
  .ch-right { justify-self: end; }
}