/* Dokunmatik sanal klavye stilleri (virtual-keyboard.js ile birlikte kullanılır) */

:root {
    --vk-height: 0px;
}

/* Klavye açıkken içerik panelin altında kalmasın diye alt boşluk ekle */
html.vk-open #scrollable-container,
html.vk-open body {
    padding-bottom: var(--vk-height) !important;
}

html.vk-open .modal {
    padding-bottom: var(--vk-height);
}

/* ------------------------------------------------------------------ */
/* Panel                                                                */
/* ------------------------------------------------------------------ */

#vk-root .vk-panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2147483000;
    background: #1f252d;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.35);
    transform: translateY(110%);
    transition: transform 0.22s ease;
    max-height: 42vh;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}

html.vk-open #vk-root .vk-panel {
    transform: translateY(0);
}

/* Sağ alt konum tercihi: metin klavyesi sağa yaslanır */
#vk-root.vk-pos-bottom-right .vk-panel {
    left: auto;
    max-width: 980px;
    width: 100%;
    border-top-left-radius: 14px;
}

/* Sayısal klavye: dar panel, sağa yaslı */
#vk-root .vk-panel.vk-narrow {
    left: auto;
    width: 400px;
    max-width: 100vw;
    border-top-left-radius: 14px;
}

#vk-root .vk-keys {
    max-width: 1150px;
    margin: 0 auto;
}

#vk-root .vk-row {
    display: flex;
    gap: 6px;
    margin-top: 6px;
    justify-content: center;
}

#vk-root .vk-row:first-child {
    margin-top: 0;
}

/* ------------------------------------------------------------------ */
/* Tuşlar                                                               */
/* ------------------------------------------------------------------ */

#vk-root.vk-size-small  { --vk-key-h: max(44px, min(48px, 5.8vh)); --vk-key-f: 17px; }
#vk-root.vk-size-medium { --vk-key-h: max(48px, min(54px, 6.6vh)); --vk-key-f: 19px; }
#vk-root.vk-size-large  { --vk-key-h: max(52px, min(62px, 7.4vh)); --vk-key-f: 22px; }

#vk-root .vk-key {
    flex: 1 1 0;
    min-width: 0;
    height: var(--vk-key-h);
    background: #3a434f;
    border: none;
    border-radius: 8px;
    color: #fff;
    font-size: var(--vk-key-f);
    font-weight: 500;
    font-family: inherit;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

#vk-root .vk-key:hover {
    background: #46515f;
}

#vk-root .vk-key.vk-pressed,
#vk-root .vk-key:active {
    background: #566373;
    transform: scale(0.96);
}

#vk-root .vk-key--fn {
    background: #2a313a;
    flex-grow: 1.4;
    font-size: calc(var(--vk-key-f) - 2px);
}

#vk-root .vk-key--fn:hover {
    background: #333c47;
}

#vk-root .vk-key--space {
    flex-grow: 4.5;
}

#vk-root .vk-key--enter {
    background: #2f80ba;
    flex-grow: 1.8;
    font-weight: 600;
}

#vk-root .vk-key--enter:hover {
    background: #3a8fca;
}

#vk-root .vk-key--bksp,
#vk-root .vk-key--shift,
#vk-root .vk-key--hide {
    font-size: calc(var(--vk-key-f) + 3px);
}

/* Shift durumu: 1 = tek harf, 2 = kilitli */
#vk-root .vk-panel[data-shift="1"] .vk-key--shift,
#vk-root .vk-panel[data-shift="2"] .vk-key--shift {
    background: #2f80ba;
}

#vk-root .vk-panel[data-shift="2"] .vk-key--shift {
    box-shadow: inset 0 0 0 2px #9fd3f5;
}

/* Shift açıkken harf tuşları büyük harf görünür (lang="tr" ile i → İ) */
#vk-root .vk-panel[data-shift="1"] .vk-key--char,
#vk-root .vk-panel[data-shift="2"] .vk-key--char {
    text-transform: uppercase;
}

/* Sayısal klavyede tuşlar daha iri */
#vk-root .vk-narrow .vk-key {
    font-size: calc(var(--vk-key-f) + 3px);
    height: calc(var(--vk-key-h) + 4px);
}

/* ------------------------------------------------------------------ */
/* Sabit klavye butonu                                                  */
/* ------------------------------------------------------------------ */

#vk-root .vk-fab {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 2147482999;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    background: #1f252d;
    color: #fff;
    font-size: 28px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
    cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    transition: bottom 0.22s ease, background 0.15s ease;
}

#vk-root .vk-fab:hover {
    background: #2f80ba;
}

html.vk-open #vk-root .vk-fab {
    bottom: calc(var(--vk-height) + 14px);
}

/* ------------------------------------------------------------------ */
/* Küçük ekran / yazdırma                                               */
/* ------------------------------------------------------------------ */

@media (max-width: 800px) {
    #vk-root .vk-panel.vk-narrow {
        width: 100vw;
        border-top-left-radius: 0;
    }
    #vk-root .vk-key--fn {
        font-size: calc(var(--vk-key-f) - 4px);
    }
}

@media print {
    #vk-root {
        display: none !important;
    }
}