/* ===========================================================================
   ÜST ŞERİT — tanıtım sayfası ve hizmet sayfalarının ortak başlığı
   ===========================================================================

   NEDEN AYRI DOSYA?
   Bu şerit iki yerde kullanılıyor (ana sayfa + hizmet sayfaları). Daha önce
   kuralları views/home.php içindeki <style> bloğuna dağılmıştı; ikinci sayfada
   aynı görünümü elde etmek için kopyalamak gerekiyordu ve kopya kaçınılmaz
   olarak zamanla ayrışıyor. Ayrıca gövdenin sonundaki <style> blokları ilk
   boyamadan sonra uygulandığı için şerit bir an biçimsiz görünüyordu; bu dosya
   <head>'den yüklendiği için o sorun da kalkıyor.

   Bağımlılık yok: renkler burada sabit, çünkü şerit her zaman koyu zeminde.
   ========================================================================= */

.land-topbar {
    position: relative;
    z-index: 60;
    background: #0b1120;
    color: #94a3b8;
    font-size: 12.5px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.land-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}
.land-topbar-inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; padding: 9px 24px; flex-wrap: nowrap;
}

/* --- Sol taraf: durum + slogan --------------------------------------- */
.land-topbar-left {
    display: flex; align-items: center; gap: 12px;
    min-width: 0; flex: 0 1 auto;
}
.land-live-indicator {
    display: inline-flex; align-items: center; gap: 7px;
    color: #A08AFA; font-weight: 600; white-space: nowrap;
}
.land-ping {
    display: inline-block; width: 7px; height: 7px; border-radius: 50%;
    background: #22c55e; box-shadow: 0 0 0 0 rgba(34, 197, 94, .7);
    animation: pulsePing 2s infinite;
}
@keyframes pulsePing {
    0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, .7); }
    70%  { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); }
    100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}
@media (prefers-reduced-motion: reduce) { .land-ping { animation: none; } }

.land-live-text, .land-topbar-subtext { white-space: nowrap; }
.land-divider-v { width: 1px; height: 16px; background: rgba(255,255,255,.20); flex: none; }

/* --- Sağ taraf: iletişim + aksiyonlar -------------------------------- */
.land-topbar-right { display: flex; align-items: center; gap: 12px; flex: none; }
.land-topbar-link {
    color: #cbd5e1; display: inline-flex; align-items: center; gap: 6px;
    text-decoration: none; white-space: nowrap; transition: color .15s;
}
.land-topbar-link:hover { color: #fff; }
.land-topbar-sep { width: 1px; height: 20px; background: rgba(255,255,255,.20); flex: none; }

/* --- Butonlar --------------------------------------------------------- */
.tb-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px; border-radius: 999px;
    font-size: 12.5px; font-weight: 700; text-decoration: none;
    white-space: nowrap; transition: transform .14s, box-shadow .14s, background .14s;
}
.tb-btn:hover { transform: translateY(-1px); }
.tb-btn-ghost {
    color: #fff; border: 1px solid rgba(255,255,255,.30); background: rgba(255,255,255,.07);
}
.tb-btn-ghost:hover { background: rgba(255,255,255,.15); }
.tb-btn-kayit { background: #6244F5; color: #fff; border: 1px solid #6244F5; }
.tb-btn-kayit:hover { background: #5136DC; border-color: #5136DC; }
.tb-btn-wa {
    color: #fff; background: #22c55e; border: 1px solid #16a34a;
    box-shadow: 0 4px 14px rgba(34,197,94,.30);
}
.tb-btn-wa:hover { background: #1eb455; box-shadow: 0 6px 18px rgba(34,197,94,.42); }

/* --- Oturum açık ziyaretçi: kimlik rozeti + çıkış ---------------------
   Rozet tıklanabilir değil; amaç "hangi hesapla geziyorum" sorusunu
   yanıtlamak. Panel bağlantısı ayrı ve belirgin bir buton. */
.tb-kim {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 4px 12px 4px 4px; border-radius: 999px;
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18);
    color: #fff; font-size: 12.5px; font-weight: 600; white-space: nowrap;
    max-width: 190px;
}
.tb-avatar {
    width: 24px; height: 24px; border-radius: 50%; flex: none;
    display: grid; place-items: center;
    background: rgba(255,255,255,.92); color: #6244F5;
    font-size: 11.5px; font-weight: 800;
}
.tb-kim-ad { overflow: hidden; text-overflow: ellipsis; }
.tb-btn-cikis { padding-left: 11px; padding-right: 11px; }

/* ===========================================================================
   DUYARLI DAVRANIŞ
   Dar ekranda önce iletişim bilgileri, sonra slogan, en son durum metni
   düşer; aksiyon butonları her zaman kalır.
   ========================================================================= */
@media (max-width: 1380px) { .land-topbar-contact, .land-topbar-sep { display: none; } }
@media (max-width: 1100px) { .tb-kim { display: none; } }
@media (max-width: 1080px) { .land-topbar-subtext, .land-divider-v { display: none; } }

@media (max-width: 760px) {
    .land-topbar { font-size: 11.5px; }
    .land-topbar-inner { padding: 8px 16px; gap: 10px; flex-wrap: wrap; }
    .land-topbar-subtext { display: none; }

    /* 1. satır: durum metni tam genişlikte ortalı */
    .land-topbar .land-topbar-left {
        display: flex !important;
        width: 100%; justify-content: center; gap: 8px;
    }
    .land-topbar .land-live-text { font-size: 11px; white-space: nowrap; }

    /* 2. satır: ikonlu butonlar */
    .land-topbar .land-topbar-right {
        display: flex; width: 100%; gap: 8px; justify-content: center;
    }
    .land-topbar .tb-btn {
        flex: 1 1 0; max-width: 220px; justify-content: center;
        gap: 6px; min-height: 42px; font-size: 12.5px;
    }
    .land-topbar .tb-btn .icon {
        display: inline-block !important;
        width: 15px; height: 15px; flex: none;
    }
}

/* Üç buton yan yana gelince "Panelime Git" sıkışıyordu; çıkış ikona iniyor. */
@media (max-width: 560px) {
    .tb-cikis-yazi { display: none; }
    .land-topbar .tb-btn-cikis { flex: 0 0 auto; max-width: none; padding: 9px 12px; }
}

@media (max-width: 380px) {
    .land-topbar .tb-btn { font-size: 11.5px; padding: 9px 10px; }
    .land-topbar .land-live-text { font-size: 10.5px; }
}
