﻿/* === Tooltip Panel (Bootstrap Card görünümü) === */
.introjs-tooltip {
    background: #ffffff !important;
    color: #333 !important;
    border-radius: 12px !important;
    padding: 10px 15px !important;
    border: 1px solid #dee2e6 !important;
    box-shadow: 0px 8px 35px rgba(0, 0, 0, 0.15) !important;
    font-family: inherit !important;
    max-width: 360px !important;
}

/* Başlık */
.introjs-tooltip-title {
    font-size: 1.15rem !important;
    font-weight: 600 !important;
    margin-bottom: 8px !important;
    color: #212529 !important;
}

/* Açıklama */
.introjs-tooltiptext {
    font-size: .95rem !important;
    color: #555 !important;
    margin-bottom: .85rem !important;
    line-height: 1.45 !important;
}

/* === Buttons === */
.introjs-button {
    border-radius: 8px !important;
    padding: 6px 14px !important;
    font-size: .875rem !important;
    font-weight: 500 !important;
    border: none !important;
}

/* İleri */
.introjs-nextbutton {
    background-color: var(--bs-primary) !important;
    color: #fff !important;
}

/* Geri */
.introjs-prevbutton {
    background-color: var(--bs-secondary) !important;
    color: #fff !important;
}

/* Tamam / Kapat */
.introjs-donebutton {
    background-color: var(--bs-success) !important;
    color: #fff !important;
}

/* === Overlay (arka plan karartma) === */
.introjs-overlay {
    background: rgba(0,0,0,0.68) !important; /* daha koyu ekran */
    backdrop-filter: blur(2px); /* hafif blur */
}

/* === Highlight edilen element === */
.introjs-helperLayer {
    box-shadow: 0 0 0 2000px rgba(0,0,0,0.68) !important;
    border-radius: 10px !important;
    background: transparent !important;
    opacity: 1 !important;
}

/* Tooltip ok işareti */
.introjs-arrow {
    border-color: transparent !important;
    filter: drop-shadow(0px 3px 3px rgba(0,0,0,0.2));
}

.introjs-tooltipbuttons {
    padding: 10px 0px 0px 0px !important;
}
.introjs-tooltip-header {
    padding: 10px 0px 0px !important;
}
.introjs-tooltiptext {
    padding: 0px !important;
}
.introjs-progress {
    margin: 0px !important;
}