/* ═══════════════════════════════════════════════════════════════
   MOBİL HEADER — Ortak Kaynak (assets/css/mobile-header.css)
   Renk değiştirmek için sadece :root değişkenlerini düzenle.
   Bu dosya tüm sayfalara eklenir — tek tek CSS aramana gerek yok.
═══════════════════════════════════════════════════════════════ */

:root {
  --mh-top:      #e05a00;   /* gradient koyu (üst)  */
  --mh-bot:      #FF8C00;   /* gradient açık (alt)  */
  --mh-gradient: linear-gradient(180deg, var(--mh-top) 0%, var(--mh-bot) 100%);
  --mh-shadow:   0 4px 24px rgba(255, 100, 0, 0.35);
}

/* Desktop'ta gizle */
.m-topbar { display: none; }

@media (max-width: 991px) {

  /* ─── Ana wrapper ─── */
  .m-topbar {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding: calc(env(safe-area-inset-top, 0px) + 16px) 16px 18px !important;
    background: var(--mh-top) !important;
    box-shadow: var(--mh-shadow) !important;
    border-bottom: none !important;
    position: fixed !important;
    top: 0 !important; left: 0 !important; right: 0 !important;
    z-index: 1100 !important;
  }

  /* index.php özel: m-hero-unit içinde — fixed değil, şeffaf */
  .m-hero-unit .m-topbar {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    background: transparent !important;
    box-shadow: none !important;
    z-index: auto !important;
  }

  /* ─── Üst satır ─── */
  .m-topbar-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  /* ─── Logo + yazı ─── */
  .m-topbar-greeting {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    flex: 1;
    min-width: 0;
  }

  .m-topbar-logo-icon { display: block; flex-shrink: 0; }

  .m-topbar-texts {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
  }

  .m-topbar-brand {
    font-size: 19px;
    font-weight: 600;
    color: #fff;
    letter-spacing: 0.3px;
    line-height: 1;
    white-space: nowrap;
  }

  .m-topbar-subtitle {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.70);
    line-height: 1.2;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* ─── Sağ butonlar ─── */
  .m-topbar-btns {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
  }

  .m-icon-btn {
    width: 40px; height: 40px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.10);
    display: flex; align-items: center; justify-content: center;
    color: rgba(255, 255, 255, 0.90);
    font-size: 18px;
    text-decoration: none;
    transition: all 0.2s;
    flex-shrink: 0;
  }

  .m-icon-btn:hover { background: rgba(255, 255, 255, 0.22); }

  /* ─── Arama çubuğu ─── */
  .m-topbar-search {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border-radius: 12px;
    padding: 0 6px 0 14px;
    height: 40px;
    margin-top: 6px;
    border: none;
    width: 100%;
    box-sizing: border-box;
    text-decoration: none;
  }

  .m-topbar-search > i {
    font-size: 16px;
    color: var(--mh-bot);
    flex-shrink: 0;
  }

  .m-topbar-search input {
    flex: 1;
    border: none;
    outline: none;
    background: none;
    font-size: 15px;
    font-weight: 500;
    color: #0f172a;
    min-width: 0;
  }

  .m-topbar-search input::placeholder { color: #94a3b8; }

  .m-search-filter-btn {
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    background: var(--mh-bot);
    border-radius: 9px;
    color: #fff;
    text-decoration: none;
    font-size: 16px;
    flex-shrink: 0;
  }

  /* ─── Güven rozet şeridi ─── */
  .m-trust-strip {
    display: flex;
    align-items: center;
    padding: 12px 16px 14px;
    background: transparent;
  }

  .m-trust-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    font-size: 9.5px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.90);
    text-align: center;
    line-height: 1.2;
  }

  .m-trust-item i { font-size: 20px; color: #fff; opacity: 0.90; }
  .m-trust-sep   { width: 1px; height: 32px; background: rgba(255, 255, 255, 0.20); flex-shrink: 0; }

}