/* RabbitDrop — paylaşılan site başlığı.
   Bu stiller daha önce 8 ayrı HTML dosyasında kopyalanmıştı ve birbirinden
   kaymıştı (Pricing kimi sayfada sol nav'da kimi sayfada sağdaki auth
   kümesinde, bazı sayfalarda auth widget hiç yoktu). Tek kaynak burası.

   Gramer: marka solda → sayfa navigasyonu markanın yanında → auth kümesi
   sağda. Sayfa genişliği (max-w-2xl/3xl/4xl) sayfanın kendi <header>
   sınıflarında kalır; buradaki kurallar genişlikten bağımsızdır. */

.sh {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sh__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  flex-shrink: 0;
}
/* Marka yazısı. Font KENDİ SUNUCUMUZDAN: Google Fonts'un <link> stylesheet'i
   render'ı bloklar ve iki yeni sunucuya (googleapis + gstatic) DNS/TLS el
   sıkışması getirir; buradaki @font-face zaten inen bir CSS'in içinde, dosya
   da açık bağlantıdan paralel iniyor.
   font-display: swap → yazı önce sistem fontuyla çizilir, Outfit gelince
   yerine oturur; ilk boyama gecikmez.
   Dosya: apps/web/public/fonts/outfit-700.woff2 (14 KB, latin, OFL-1.1 —
   lisans metni fonts/OFL.txt). Alıcı worker'ı ayrı deploy edildiği için
   kopyası apps/download/public/fonts/ altında; `npm run sync:shared` taşır. */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/outfit-700.woff2') format('woff2');
}

.sh__brand-name {
  font-family: 'Outfit', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}
/* İki ton: "drop" marka moruyla ayrılıyor. Büyük harf kullanmadan iki kelimeyi
   ayırmanın yolu — küçük harf logotype korunuyor, okunabilirlik kazanılıyor.
   Bu <span>'i site-header.js üretiyor: HTML'de düz "rabbitdrop" yazıyor, yani
   JS çalışmasa da yazı doğru; 18 sayfaya işaretleme kopyalanmıyor. */
.sh__brand-drop { color: #7c3aed; }

/* Auth kümesi her zaman sağa yaslı. */
.sh__nav {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  position: relative;
}

/* ── Nav linkleri (geniş ekran) ─────────────────────────────────────────── */

.sh__links {
  display: flex;
  align-items: center;
  gap: 4px;
}

.sh-link {
  font-size: 13px;
  font-weight: 600;
  color: #757393;
  text-decoration: none;
  padding: 7px 12px;
  border-radius: 8px;
  white-space: nowrap;
  line-height: 1.4;
  transition: background 0.15s, color 0.15s;
}
.sh-link:hover {
  background: #ede9fe;
  color: #241449;
}
.sh-link[aria-current="page"] {
  color: #7c3aed;
  background: #ede9fe;
}

/* Verified kullanıcıya gösterilen yükseltme linki: nötr "Pricing"den ayrışsın
   ama birincil aksiyon (avatar/Sign in) ile yarışmasın. */
.sh-link--accent {
  color: #7c3aed;
  border: 1.5px solid #ddd6fe;
  padding: 6px 12px;
}
.sh-link--accent:hover {
  background: #ede9fe;
  color: #7c3aed;
}

/* Ghost'un cihazdaki transfer sayısı. */
.sh-count {
  display: inline-block;
  margin-left: 6px;
  font-size: 11px;
  font-weight: 700;
  color: #7c3aed;
  background: #ede9fe;
  border-radius: 20px;
  padding: 1px 7px;
}
.sh-link[aria-current="page"] .sh-count {
  background: #ddd6fe;
}

/* ── Birincil aksiyon: Sign in ──────────────────────────────────────────── */

.sh-signin {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: #7c3aed;
  text-decoration: none;
  padding: 8px 16px;
  border-radius: 8px;
  white-space: nowrap;
  line-height: 1.4;
  transition: background 0.15s;
  flex-shrink: 0;
}
.sh-signin:hover {
  background: #6d28d9;
}

/* ── Avatar + hesap menüsü ──────────────────────────────────────────────── */

.sh-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #ede9fe;
  border: 2px solid #ddd6fe;
  color: #7c3aed;
  font-size: 15px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  flex-shrink: 0;
}
.sh-avatar:hover {
  background: #ddd6fe;
  border-color: #7c3aed;
}

/* ── Mobil menü butonu ──────────────────────────────────────────────────── */

.sh-menu-btn {
  width: 36px;
  height: 36px;
  border: 1.5px solid #ddd6fe;
  border-radius: 8px;
  background: #fff;
  color: #7c3aed;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s;
  flex-shrink: 0;
}
.sh-menu-btn:hover {
  background: #ede9fe;
}

/* ── Açılır paneller (hesap menüsü + mobil menü ortak kabuk) ────────────── */

.sh-pop {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 200px;
  background: #fff;
  border: 1px solid #ede9fe;
  border-radius: 14px;
  box-shadow: 0 8px 24px -4px rgba(36, 20, 73, 0.15);
  padding: 10px;
  z-index: 100;
  display: none;
  flex-direction: column;
  gap: 6px;
}
.sh-pop.open {
  display: flex;
}

.sh-pop__email {
  font-size: 13px;
  font-weight: 600;
  color: #241449;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sh-pop__plan {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
  background: #ede9fe;
  color: #7c3aed;
  align-self: flex-start;
}
.sh-pop__plan.is-pro {
  background: #7c3aed;
  color: #fff;
}
.sh-pop__divider {
  border: none;
  border-top: 1px solid #f3f4f6;
  margin: 2px 0;
}

/* Panel içi satırlar: <a> ve <button> aynı görünsün. */
.sh-pop__item {
  font-size: 13px;
  font-weight: 600;
  color: #241449;
  background: none;
  text-decoration: none;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 8px 12px;
  cursor: pointer;
  text-align: left;
  display: block;
  width: 100%;
  transition: border-color 0.15s, color 0.15s;
}
.sh-pop__item:hover {
  border-color: #7c3aed;
  color: #7c3aed;
}
.sh-pop__item:disabled {
  opacity: 0.6;
  cursor: default;
}
.sh-pop__item--quiet {
  color: #757393;
}

/* ── Kırılım: ≤640px'de linkler tek bir hamburger menüsüne iner ─────────── */

@media (max-width: 639px) {
  .sh__links {
    display: none;
  }
  .sh-menu-btn {
    display: flex;
  }
  .sh__brand-name {
    font-size: 20px;
  }
}