/* Wrapper */
.tuner-help {
    position: relative;
    display: inline-block;
    margin-top: 0px !important;
}

/* ℹ️ ikon */
.tuner-help-icon {
    background: none !important;
    border: none !important;
    font-size: 9pt !important;
    color: #4f8cff;
    cursor: pointer;
    padding: 0;
    font-weight: thin !important;
}
.tuner-help-icon,
.tuner-help-icon:hover,
.tuner-help-icon:focus,
.tuner-help-icon:active {
    color: #000 !important;
}


/* Tooltip kutusu */
.tuner-help-tooltip {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);

    margin-top: 8px;

    width: 280px;
    padding: 12px 14px;

    background: #ffffff;
    color: #111;
    border: 1px solid #e3e3e3;
    border-radius: 8px;

    font-size: 13px;
    line-height: 1.45;

    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);

    display: none;
    z-index: 1000;
}

/* Başlık */
.tuner-help-tooltip strong {
    display: block;
    margin-bottom: 6px;
}

/* Hover (desktop) */
.tuner-help:hover .tuner-help-tooltip {
    display: block;
}

/* Mobil için JS ile açılacak */
.tuner-help.open .tuner-help-tooltip {
    display: block;
}

select optgroup {
    font-weight: bold;
    font-size:10pt;
}
            .tuner-selects {
                display: flex;
                gap: 12px;
                margin: 7px 0 18px;
            }
            
            /* Select base */
            .tuner-selects select {
                appearance: none;
                -webkit-appearance: none;
                -moz-appearance: none;
            
                flex: 1;
                padding: 10px 36px 10px 7px;
                font-size: 10pt;
                font-weight: 500;
                color: #111;
            
                background-color: #ffffff;
                border: 1px solid #ff8c5a;
                border-radius: 8px;
            
                cursor: pointer;
                outline: none;
            
                transition:
                    border-color 0.15s ease,
                    box-shadow 0.15s ease;
            }
            
            /* Hover */
            .tuner-selects select:hover {
                border-color: #4f8cff;
            }
            
            /* Focus (aktif) */
            .tuner-selects select:focus {
                border-color: #4f8cff;
                box-shadow: 0 0 0 3px rgba(79, 140, 255, 0.15);
            }
            
            /* Arrow icon (minimal) */
            .tuner-selects select {
                background-image:
                    linear-gradient(45deg, transparent 50%, #777 50%),
                    linear-gradient(135deg, #777 50%, transparent 50%);
                background-position:
                    calc(100% - 18px) calc(50% - 2px),
                    calc(100% - 13px) calc(50% - 2px);
                background-size: 5px 5px;
                background-repeat: no-repeat;
            }
            
            /* Group / disabled options */
            .tuner-selects option:disabled {
                color: #999;
                font-style: italic;
            }
@media (max-width: 320px) {
    .tuner-selects {
        flex-direction: column;
    }
}

#gitar-tuner-app {
    max-width: 360px;
    margin: 0 auto;
    text-align: center;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}
.header strong {
    display: block;
    font-size: 18px;
    font-weight: 600;
}
.header span {
    font-size: 12px;
    color: #777;
}
.tuner-bar-wrapper {
    width: 260px;
    margin: 28px auto 12px auto;
}
.tuner-bar,
.tuner-scale {
    width: 100%;
    box-sizing: border-box;
}
.tuner-bar {
    position: relative;
    height: 6px;
    background: #ddd;
    border-radius: 3px;
}
.tuner-zero {
    position: absolute;
    left: 50%;
    top: -7px;
    width: 2px;
    height: 20px;
    background: #2ecc71;
    transform: translateX(-50%);
}
#tuner-marker {
    position: absolute;
    width: 46px;              /* biraz genişlettik */
    margin-top:-7px;
    height: 20px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10pt;
    font-weight: 600;
    color: #fff;
    pointer-events: none;     /* tıklanmasın */
    transition: background 0.15s ease;
}

#tuner-marker .marker-value {
    font-size: 10pt;
    line-height: 1;
    white-space: nowrap;
}


.tuner-scale {
    display: flex;
    justify-content: space-between;
    margin-top: 7px;
    padding: 0;             
}
.tuner-scale span {
    font-size: 12px;
    color: #777;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}
#note-readout {
    font-size: 32px;
    font-weight: 600;
    margin-top: 6px;
}
#status-readout {
    font-size: 14px;
    margin-top: 4px;
    font-weight: 600;
}
#freq-readout {
    font-size: 13px;
    color: #555;
    margin-top: 2px;
}
.string-buttons {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin: 7px 0;
}
.string-buttons button {
    flex: 1;
    height: 42px;
    border-radius: 8px;
    border: 1px solid #ff8c5a;
    background: #fff;
    font-size: 16px;
    cursor: pointer;
}
.string-buttons button.active {
    background: #4f8cff;
    color: #fff;
    border-color: #4f8cff;
}
.string-buttons button.disabled {
    opacity: 0.4;
    pointer-events: none;
}
#start {
    width: 100%;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #ff8c5a;
    background: #fff;          
    color: #000;              
    font-size: 15px;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}
#start:hover,
#start:active {
    background: #ff8c5a;      
    color: #fff;              
    transform: scale(0.98);
}
.string-buttons button.tuned {
    background: #2ecc71 !important;
    color: #fff !important;
    border-color: #2ecc71 !important;
}
.mode-toggle {
    display: flex;
    gap: 6px;
    margin: 7px 0;
}
.mode-toggle button {
    flex: 1;
    padding: 8px;
    border-radius: 999px;
    border: 1px solid #ddd;
    background: #fff;
    font-size: 14px;
    cursor: pointer;
}
.mode-toggle button.active {
    background: #4f8cff;
    color: #fff;
    border-color: #4f8cff;
}