/* ==========================================================================
   MobiKreş — Dil seçici (7 dil)
   Tailwind'e bağımlı değildir: hem ana sayfadaki Tailwind nav'da hem de
   blog/özellik sayfalarındaki sade nav'da aynı görünür.
   Bayraklar SVG'dir; emoji bayraklar Windows'ta görünmez.
   ========================================================================== */

.lang-switch {
    position: relative;
    display: inline-block;
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
}

/* --- Tetikleyici buton ---------------------------------------------------- */
.lang-btn {
    display: flex;
    align-items: center;
    gap: .45rem;
    height: 40px;
    padding: 0 .7rem 0 .5rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
    cursor: pointer;
    font: inherit;
    font-size: .875rem;
    font-weight: 800;
    color: #374151;
    line-height: 1;
    transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.lang-btn:hover {
    background: #f9fafb;
    border-color: #d1d5db;
    box-shadow: 0 4px 12px rgba(16, 24, 40, .10);
    transform: translateY(-1px);
}

.lang-btn:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

.lang-switch.is-open .lang-btn {
    background: #f3f4f6;
    border-color: #d1d5db;
}

.lang-btn .lang-code {
    letter-spacing: .02em;
}

.lang-btn .lang-caret {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    color: #9ca3af;
    transition: transform .22s ease;
}

.lang-switch.is-open .lang-btn .lang-caret {
    transform: rotate(180deg);
}

/* --- Açılır liste --------------------------------------------------------- */
.lang-menu {
    position: absolute;
    top: calc(100% + .5rem);
    right: 0;
    z-index: 200;
    min-width: 208px;
    padding: .4rem;
    background: #fff;
    border: 1px solid #eceff3;
    border-radius: 16px;
    box-shadow: 0 12px 32px rgba(16, 24, 40, .14), 0 2px 6px rgba(16, 24, 40, .06);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px) scale(.98);
    transform-origin: top right;
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
}

.lang-switch.is-open .lang-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.lang-menu-title {
    padding: .45rem .6rem .5rem;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #9ca3af;
}

.lang-menu a {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .55rem .6rem;
    border-radius: 10px;
    text-decoration: none;
    font-size: .9rem;
    font-weight: 700;
    color: #374151 !important;
    transition: background .15s ease, color .15s ease;
}

.lang-menu a:hover {
    background: #f3f4f6;
    color: #111827 !important;
}

.lang-menu a[aria-current="true"] {
    background: #eff6ff;
    color: #1d4ed8 !important;
}

.lang-menu a .lang-name {
    flex: 1 1 auto;
}

.lang-menu a .lang-check {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    opacity: 0;
    color: #2563eb;
}

.lang-menu a[aria-current="true"] .lang-check {
    opacity: 1;
}

/* --- Bayraklar ------------------------------------------------------------ */
.flag {
    display: inline-block;
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
}

.lang-btn .flag {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
}

.flag-tr { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20'%3E%3Crect width='30' height='20' fill='%23E30A17'/%3E%3Ccircle cx='11.5' cy='10' r='5' fill='%23fff'/%3E%3Ccircle cx='13.1' cy='10' r='4' fill='%23E30A17'/%3E%3Cpolygon fill='%23fff' points='17.8,7.6 18.36,9.23 20.08,9.26 18.7,10.29 19.21,11.94 17.8,10.95 16.39,11.94 16.9,10.29 15.52,9.26 17.24,9.23'/%3E%3C/svg%3E"); }

.flag-en { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20'%3E%3Crect width='30' height='20' fill='%23012169'/%3E%3Cpath d='M0,0 L30,20 M30,0 L0,20' stroke='%23fff' stroke-width='4'/%3E%3Cpath d='M0,0 L30,20 M30,0 L0,20' stroke='%23C8102E' stroke-width='1.8'/%3E%3Cpath d='M15,0 V20 M0,10 H30' stroke='%23fff' stroke-width='6.5'/%3E%3Cpath d='M15,0 V20 M0,10 H30' stroke='%23C8102E' stroke-width='3.8'/%3E%3C/svg%3E"); }

.flag-de { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20'%3E%3Crect width='30' height='20' fill='%23000'/%3E%3Crect y='6.67' width='30' height='6.67' fill='%23DD0000'/%3E%3Crect y='13.33' width='30' height='6.67' fill='%23FFCE00'/%3E%3C/svg%3E"); }

.flag-ru { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20'%3E%3Crect width='30' height='20' fill='%23fff'/%3E%3Crect y='6.67' width='30' height='6.67' fill='%230039A6'/%3E%3Crect y='13.33' width='30' height='6.67' fill='%23D52B1E'/%3E%3C/svg%3E"); }

.flag-uk { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20'%3E%3Crect width='30' height='20' fill='%23FFD700'/%3E%3Crect width='30' height='10' fill='%230057B7'/%3E%3C/svg%3E"); }

.flag-az { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20'%3E%3Crect width='30' height='20' fill='%2300B9E4'/%3E%3Crect y='6.67' width='30' height='6.67' fill='%23ED2939'/%3E%3Crect y='13.33' width='30' height='6.67' fill='%23509E2F'/%3E%3Ccircle cx='14' cy='10' r='2.6' fill='%23fff'/%3E%3Ccircle cx='14.9' cy='10' r='2.1' fill='%23ED2939'/%3E%3Cpolygon fill='%23fff' points='18.2,8.55 18.55,9.58 19.63,9.6 18.76,10.24 19.08,11.28 18.2,10.66 17.32,11.28 17.64,10.24 16.77,9.6 17.85,9.58'/%3E%3C/svg%3E"); }

.flag-fr { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20'%3E%3Crect width='30' height='20' fill='%23fff'/%3E%3Crect width='10' height='20' fill='%23002395'/%3E%3Crect x='20' width='10' height='20' fill='%23ED2939'/%3E%3C/svg%3E"); }

/* --- Mobil: nav içinde satır olarak açılan liste -------------------------- */
.lang-switch-mobile {
    display: block;
    margin: 1rem 1rem 0;
    padding-top: 1rem;
    border-top: 1px solid #f3f4f6;
}

.lang-switch-mobile .lang-menu-title {
    padding-left: .2rem;
}

.lang-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .4rem;
}

.lang-grid a {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem .55rem;
    border: 1px solid #eceff3;
    border-radius: 12px;
    text-decoration: none;
    font-size: .85rem;
    font-weight: 700;
    color: #374151 !important;
    background: #fff;
}

.lang-grid a[aria-current="true"] {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #1d4ed8 !important;
}

/* Sade nav'larda (blog/özellik sayfaları) dar ekranda menü taşmasın */
@media (max-width: 640px) {
    .lang-menu {
        right: auto;
        left: 50%;
        transform: translate(-50%, -6px) scale(.98);
        transform-origin: top center;
    }

    .lang-switch.is-open .lang-menu {
        transform: translate(-50%, 0) scale(1);
    }
}

/* Nav'ı olmayan sayfalarda (gizlilik politikası) sağ üst köşe */
.lang-switch-floating {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 100;
}

@media (max-width: 640px) {
    .lang-switch-floating {
        top: .6rem;
        right: .6rem;
    }
}