/* === ALT PANEL TASARIMI === */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;

    display: flex;
    justify-content: space-around;
    align-items: center;           /* ikon + yazıyı dikey ortalar */

    background: #1a2633;           /* koyu panel rengi */
    border-top: 1px solid #2c3e50;
    box-shadow: 0 -4px 15px rgba(0,0,0,.5);

    height: 65px;                  /* sabit yükseklik → taşmayı önler */
    padding-bottom: env(safe-area-inset-bottom); /* APK için safe-area desteği */
    z-index: 1000;
}

.bottom-nav a {
    flex: 1;                       /* tüm linkler eşit genişlik */
    text-decoration: none;
    color: #a1a1aa;                 /* pasif ikon/text */

    display: flex;
    flex-direction: column;        /* ikon üstte yazı altta */
    align-items: center;
    justify-content: center;       /* hem ikon hem yazı ortada */

    gap: 4px;
    font-size: 12px;

    transition: color .2s ease;
}

.bottom-nav a.active,
.bottom-nav a:hover {
    color: #c89d3d;                 /* altın vurgulu aktif/hover */
}

.bottom-nav i {
    font-size: 20px;                /* ikon boyutu */
    line-height: 1;
}

/* Sistem mesajlarının satır atlamalarını korumak için */
.message-text,
td.message-cell {
    white-space: pre-line;          /* \n karakterlerini satır atlamasına çevirir */
    line-height: 1.4;               /* daha güzel aralık için */
}
/* === ALT PANEL TASARIMI === */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;

    display: flex;
    justify-content: space-around;
    align-items: center;

    background: #1a2633;                  /* koyu panel rengi */
    border-top: 1px solid #2c3e50;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.4);

    height: 65px;                          /* sabit yükseklik → taşma önler */
    padding-bottom: env(safe-area-inset-bottom);  /* iPhone çentik ve APK için */
    z-index: 1000;
}

.bottom-nav a {
    flex: 1;                               /* eşit genişlik */
    text-decoration: none;
    color: #a1a1aa;                         /* pasif ikon ve yazı */

    display: flex;
    flex-direction: column;                 /* ikon üstte, yazı altta */
    align-items: center;
    justify-content: center;

    gap: 4px;                                /* ikon-yazı arası mesafe */
    font-size: 12px;
    font-weight: 500;

    transition: color 0.2s ease, transform 0.15s ease;
}

.bottom-nav a.active,
.bottom-nav a:hover {
    color: #c89d3d;                          /* altın renk vurgusu */
    transform: translateY(-2px);             /* hover/active animasyonu */
}

.bottom-nav i {
    font-size: 22px;                          /* ikon boyutu */
    line-height: 1;
}

/* Sistem mesajları satır düzeni */
.message-text,
td.message-cell {
    white-space: pre-line;
    line-height: 1.4;
}

/* Küçük ekranlar için yazıyı biraz küçült */
@media (max-width: 360px) {
    .bottom-nav a {
        font-size: 11px;
    }

    .bottom-nav i {
        font-size: 20px;
    }
}
.header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 15px;          /* üstten ve yandan boşluk */
}

.header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;   /* destek sola, TR sağa, logo ortada */
    padding: 10px 15px;
}

.support-btn {
    position: absolute;       /* TR butonuyla aynı mantık */
    top: 10px;                /* TR butonunun top değeri neyse aynı */
    left: 15px;               /* kenardan boşluk */
    background: none;         /* TR gibi sade ya da istersen sarı arka plan */
    border: 1px solid #c89d3d;
    color: #c89d3d;
    padding: 4px 10px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    z-index: 1000;
}

.support-btn:hover {
    background: rgba(200,157,61,0.1);  /* hafif hover efekti */
}