/* 
    SIRAMATIK VIRTUAL KEYBOARD STYLES (v7 - Ultra Compact)
    %10 daha küçültülmüş, temizlenmiş Chromium-style tasarım.
*/

:root {
    --vk-bg: #f1f3f4;
    --vk-key-bg: #ffffff;
    --vk-key-text: #3c4043;
    --vk-key-shadow: rgba(60, 64, 67, 0.3);
    --vk-key-active: #dadce0;
    --vk-key-special: #dadce0;
    --vk-accent: #1a73e8;
    --vk-border: #bdc1c6;
    --vk-radius: 4px;
    --vk-zindex: 2147483647;
    
    /* Ultra Compact Variable Base (%10 daha küçük) */
    --vk-key-height: 38px; 
    --vk-font-size: 16px;  
    --vk-gap: 4px;
}

.siramatik-vk-container {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100vw;
    background: var(--vk-bg);
    border-top: 1px solid var(--vk-border);
    box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.1);
    z-index: var(--vk-zindex);
    display: none;
    flex-direction: column;
    padding: 4px 4px env(safe-area-inset-bottom); /* Padding daraltıldı */
    box-sizing: border-box;
    font-family: 'Roboto', 'Segoe UI', sans-serif;
    transform: translateY(100%);
    transition: transform 0.2s cubic-bezier(0, 0, 0.2, 1);
    user-select: none;
    -webkit-user-select: none;
}

.siramatik-vk-container.active {
    display: flex;
    transform: translateY(0);
}

/* Header/Controls */
.siramatik-vk-header {
    display: flex;
    justify-content: flex-end;
    padding: 0 4px 2px;
}

.siramatik-vk-close-btn {
    background: var(--vk-key-special);
    border: 1px solid var(--vk-border);
    border-radius: var(--vk-radius);
    padding: 2px 8px;
    font-size: 9px;
    font-weight: 700;
    color: var(--vk-key-text);
    cursor: pointer;
    text-transform: uppercase;
}

/* Body Layout */
.siramatik-vk-body {
    display: flex;
    flex-direction: column;
    gap: var(--vk-gap);
    width: 100%;
}

.siramatik-vk-row {
    display: flex;
    gap: var(--vk-gap);
    justify-content: center;
    width: 100%;
}

/* Key Styles */
.siramatik-vk-key {
    flex: 1;
    min-width: 0;
    height: var(--vk-key-height);
    background: var(--vk-key-bg);
    border: none;
    border-bottom: 1px solid var(--vk-key-shadow);
    border-radius: var(--vk-radius);
    color: var(--vk-key-text);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--vk-font-size);
    font-weight: 400;
    cursor: pointer;
    transition: background 0.1s;
    -webkit-tap-highlight-color: transparent;
    box-shadow: 0 1px 2px rgba(60, 64, 67, 0.2);
}

.siramatik-vk-key:active {
    background: var(--vk-key-active);
    box-shadow: none;
    transform: translateY(1px);
}

/* Özel Tuşlar */
.siramatik-vk-key--special {
    background: var(--vk-key-special);
    font-size: 12px;
    font-weight: 600;
}

.siramatik-vk-key--active {
    background: #d2e3fc;
    color: var(--vk-accent);
}

.siramatik-vk-key--wide {
    flex: 1.5;
}

.siramatik-vk-key--space {
    flex: 5;
}

.siramatik-vk-key--enter {
    background: #dadce0;
    color: #3c4043;
}

@media (max-height: 500px) {
    :root {
        --vk-key-height: 34px;
        --vk-font-size: 15px;
        --vk-gap: 3px;
    }
}
@media (min-width: 1200px) {
    .siramatik-vk-container {
        padding-left: 20vw;
        padding-right: 20vw;
    }
}