/* QrOku ekranındaki fener (torch) butonu.
   pdks-mobil.css'e dokunmamak için ayrı dosya. Renkler mevcut CSS
   değişkenlerinden alınır; değişken yoksa yedek değerler kullanılır.
   .btn / .btn-primary bilerek kullanılmadı (genişlik/üst boşluk dayatıyor). */

.fener-btn {
    /* Blok seviyesinde flex + fit-content: hem normal akışta hem flex sütunda
       auto kenar boşluklarıyla ortalanır. */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: fit-content;
    margin: 10px auto 0;
    padding: 9px 18px;
    border: 1px solid var(--line-strong, rgba(255, 255, 255, 0.18));
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--paper, #f4f6fb);
    font-family: var(--font-body, inherit);
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation;
    transition: background .2s ease, color .2s ease, border-color .2s ease, transform .1s ease;
}

    /* display:flex, hidden özniteliğini ezdiği için açıkça belirtiyoruz */
    .fener-btn[hidden] {
        display: none;
    }

    .fener-btn svg {
        width: 18px;
        height: 18px;
        flex: none;
    }

    .fener-btn:active {
        transform: scale(.97);
    }

    .fener-btn:disabled {
        opacity: .6;
        cursor: default;
    }

    /* Fener açıkken altın dolgu */
    .fener-btn.is-acik {
        background: var(--brass, #f57c0a);
        border-color: var(--brass, #f57c0a);
        color: var(--brass-ink, #1c0b02);
    }