/* ── Puzzle Captcha Styles ── */
.puzzle-captcha-wrap {
    display: inline-block;
    user-select: none;
    -webkit-user-select: none;
    font-family: sans-serif;
}

.puzzle-captcha-title {
    font-size: 13px;
    color: #555;
    margin-bottom: 6px;
}

.puzzle-img-wrap {
    position: relative;
    width: 300px;
    height: 160px;
    border: 1px solid #ccc;
    border-radius: 4px;
    overflow: hidden;
    background: #eee;
    cursor: default;
}

.puzzle-bg {
    display: block;
    width: 300px;
    height: 160px;
    position: absolute;
    top: 0; left: 0;
}

.puzzle-piece {
    position: absolute;
    top: 0;
    left: 0;
    width: 55px;
    cursor: grab;
    transition: box-shadow 0.1s;
    z-index: 10;
}
.puzzle-piece:active { cursor: grabbing; }
.puzzle-piece.dragging { box-shadow: 0 4px 14px rgba(0,0,0,0.4); }

/* Slider çubuğu */
.puzzle-slider-wrap {
    margin-top: 10px;
    position: relative;
    width: 300px;
    height: 42px;
    background: #f0f0f0;
    border: 1px solid #ddd;
    border-radius: 21px;
    overflow: hidden;
}

.puzzle-slider-track {
    position: absolute;
    top: 0; left: 0;
    height: 100%;
    background: linear-gradient(90deg, #27ae60, #2ecc71);
    width: 0;
    border-radius: 21px;
    transition: width 0.05s;
}

.puzzle-slider-btn {
    position: absolute;
    top: 1px; left: 1px;
    width: 40px;
    height: 40px;
    background: #fff;
    border-radius: 50%;
    border: 1px solid #ccc;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    cursor: grab;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    z-index: 5;
    transition: background 0.2s;
}
.puzzle-slider-btn:active { cursor: grabbing; }

.puzzle-slider-hint {
    position: absolute;
    width: 100%;
    text-align: center;
    line-height: 42px;
    font-size: 13px;
    color: #aaa;
    pointer-events: none;
    z-index: 2;
}

/* Durum mesajları */
.puzzle-status {
    margin-top: 6px;
    font-size: 12px;
    height: 18px;
    text-align: center;
}
.puzzle-status.ok  { color: #27ae60; font-weight: bold; }
.puzzle-status.err { color: #e74c3c; }

/* Başarı durumu */
.puzzle-slider-wrap.success .puzzle-slider-track { background: linear-gradient(90deg, #27ae60, #2ecc71); width: 100% !important; }
.puzzle-slider-wrap.success .puzzle-slider-btn   { background: #2ecc71; color: #fff; border-color: #27ae60; }
.puzzle-captcha-wrap.solved .puzzle-img-wrap     { border-color: #27ae60; }

/* Yenile butonu */
.puzzle-refresh {
    display: inline-block;
    margin-top: 6px;
    font-size: 12px;
    color: #3498db;
    cursor: pointer;
    text-decoration: underline;
}
.puzzle-refresh:hover { color: #2980b9; }