/* ==========================================================================
   Sweva — Tasarım Sistemi
   Sıcak krem zemin + fuşya aksan, yuvarlak tipografi, yaylı geçişler.
   Mobile-first; masaüstünde ortalanmış uygulama kabuğu olarak görünür.
   ========================================================================== */

/* --- 1. Tema değişkenleri ------------------------------------------------ */
:root {
    /* Renk — açık tema */
    --c-zemin:        #FDF4F1;
    --c-zemin-alt:    #F6E9E6;
    --c-yuzey:        #FFFFFF;
    --c-yuzey-2:      #FBF1EE;

    --c-metin:        #2B1B20;
    --c-metin-soluk:  #8A7A7E;
    --c-metin-ters:   #FFFFFF;

    --c-vurgu:        #E4436A;
    --c-vurgu-koyu:   #C42B52;
    --c-vurgu-soluk:  #FCE7EC;
    --c-vurgu-2:      #8E1B45;

    --c-cizgi:        #EFE0DC;
    --c-basari:       #2FAE72;
    --c-uyari:        #E8A33D;
    --c-hata:         #D8395B;
    --c-yildiz:       #F6B93B;

    --gradyan-vurgu:  linear-gradient(140deg, #E4436A 0%, #C0295E 55%, #8E1B45 100%);
    --gradyan-kart:   linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.72) 100%);

    /* Tipografi */
    --font-baslik: 'Baloo 2', system-ui, sans-serif;
    --font-govde:  'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;

    /* Ölçek — ekran genişliğine göre yumuşak büyüme */
    --fs-mikro:  clamp(.69rem, .66rem + .15vw, .76rem);
    --fs-kucuk:  clamp(.8rem, .77rem + .18vw, .875rem);
    --fs-govde:  clamp(.92rem, .88rem + .22vw, 1rem);
    --fs-orta:   clamp(1.05rem, 1rem + .3vw, 1.18rem);
    --fs-buyuk:  clamp(1.35rem, 1.2rem + .8vw, 1.7rem);
    --fs-dev:    clamp(1.75rem, 1.45rem + 1.5vw, 2.3rem);

    /* Boşluk */
    --bo-1: clamp(.25rem, .2rem + .2vw, .35rem);
    --bo-2: clamp(.5rem, .42rem + .3vw, .7rem);
    --bo-3: clamp(.75rem, .62rem + .5vw, 1rem);
    --bo-4: clamp(1rem, .82rem + .7vw, 1.4rem);
    --bo-5: clamp(1.5rem, 1.2rem + 1.1vw, 2.1rem);
    --bo-6: clamp(2rem, 1.6rem + 1.6vw, 3rem);

    /* Köşe */
    --k-kucuk: 12px;
    --k-orta:  18px;
    --k-buyuk: 26px;
    --k-dev:   34px;
    --k-tam:   999px;

    /* Gölge */
    --g-yumusak: 0 2px 8px rgba(43, 27, 32, .05);
    --g-orta:    0 6px 20px rgba(43, 27, 32, .08);
    --g-yuksek:  0 14px 38px rgba(43, 27, 32, .14);
    --g-vurgu:   0 8px 24px rgba(228, 67, 106, .32);

    /* Hareket — yaylı his için özel eğriler */
    --yay:      cubic-bezier(.34, 1.56, .64, 1);
    --yumusak:  cubic-bezier(.4, 0, .2, 1);
    --hizli:    140ms;
    --normal:   260ms;
    --yavas:    420ms;

    /* Ölçü */
    --kabuk-en:  430px;
    --tab-y:     64px;
    --guvenli-alt: env(safe-area-inset-bottom, 0px);
    --guvenli-ust: env(safe-area-inset-top, 0px);
}

[data-theme="dark"] {
    --c-zemin:       #171013;
    --c-zemin-alt:   #241a1e;
    --c-yuzey:       #21171B;
    --c-yuzey-2:     #2C2025;

    --c-metin:       #F7EBEE;
    --c-metin-soluk: #A08E94;
    --c-metin-ters:  #1B1216;

    --c-vurgu:       #FF5C82;
    --c-vurgu-koyu:  #E4436A;
    --c-vurgu-soluk: #3A1F28;

    --c-cizgi:       #362930;

    --g-yumusak: 0 2px 8px rgba(0, 0, 0, .3);
    --g-orta:    0 6px 20px rgba(0, 0, 0, .38);
    --g-yuksek:  0 14px 38px rgba(0, 0, 0, .5);
}

/* --- 2. Temel ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100dvh;
    font-family: var(--font-govde);
    font-size: var(--fs-govde);
    line-height: 1.55;
    color: var(--c-metin);
    background: var(--c-zemin);
    -webkit-font-smoothing: antialiased;
    overscroll-behavior-y: none;
}

/* Mobil uygulama hissi: metin seçimi ve dokunma parlaması kapalı */
body {
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
}
input, textarea, [contenteditable], .secilebilir {
    -webkit-user-select: text;
    user-select: text;
}

h1, h2, h3, h4 {
    margin: 0;
    font-family: var(--font-baslik);
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: -.01em;
}
h1 { font-size: var(--fs-dev); }
h2 { font-size: var(--fs-buyuk); }
h3 { font-size: var(--fs-orta); }

p { margin: 0 0 var(--bo-3); }

a {
    color: var(--c-vurgu);
    text-decoration: none;
    font-weight: 600;
}

img { max-width: 100%; display: block; }

/* hidden özelliği her zaman kazanmalı — aksi halde görünmeyen katmanlar
   tıklamaları yutar. Bileşen kurallarından önce tanımlı olduğu için
   ilgili bileşenlerde ayrıca [hidden] kuralı yazılır. */
[hidden] { display: none; }

button { font: inherit; color: inherit; }

:focus-visible {
    outline: 2px solid var(--c-vurgu);
    outline-offset: 3px;
    border-radius: var(--k-kucuk);
}

/* --- 3. Uygulama kabuğu -------------------------------------------------- */
.uygulama {
    position: relative;
    width: 100%;
    max-width: var(--kabuk-en);
    min-height: 100dvh;
    margin-inline: auto;
    background: var(--c-zemin);
    overflow: hidden;
    isolation: isolate;
}

/* Masaüstünde uygulama penceresi gibi dursun */
@media (min-width: 700px) {
    body {
        display: grid;
        place-items: center;
        padding: var(--bo-5) 0;
        background:
            radial-gradient(1200px 600px at 50% -10%, var(--c-vurgu-soluk), transparent 60%),
            var(--c-zemin-alt);
    }
    .uygulama {
        min-height: min(920px, calc(100dvh - 2 * var(--bo-5)));
        height: min(920px, calc(100dvh - 2 * var(--bo-5)));
        border-radius: var(--k-dev);
        box-shadow: var(--g-yuksek);
        overflow-y: auto;
    }
}

/* Tek ekran — alt tab bar varsa .ekran--tabli */
.ekran {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    padding: calc(var(--guvenli-ust) + var(--bo-4)) var(--bo-4) calc(var(--guvenli-alt) + var(--bo-4));
    animation: ekranGir var(--normal) var(--yumusak) both;
}
@media (min-width: 700px) {
    .ekran { min-height: 100%; }
}
.ekran--tabli { padding-bottom: calc(var(--tab-y) + var(--guvenli-alt) + var(--bo-4)); }
.ekran--dolu  { padding-inline: 0; }

@keyframes ekranGir {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

.ekran__basi {
    display: flex;
    align-items: center;
    gap: var(--bo-3);
    margin-bottom: var(--bo-4);
    min-height: 40px;
}
.ekran__basi h1, .ekran__basi h2 { flex: 1; }
.ekran__baslik {
    flex: 1;
    font-family: var(--font-baslik);
    font-size: var(--fs-orta);
    font-weight: 700;
    text-align: center;
}

/* --- 4. Butonlar --------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--bo-2);
    width: 100%;
    padding: var(--bo-3) var(--bo-4);
    min-height: 54px;
    border: 0;
    border-radius: var(--k-tam);
    font-family: var(--font-govde);
    font-size: var(--fs-govde);
    font-weight: 700;
    cursor: pointer;
    transition: transform var(--hizli) var(--yay),
                box-shadow var(--normal) var(--yumusak),
                background-color var(--hizli) var(--yumusak),
                opacity var(--hizli) linear;
}
.btn:active { transform: scale(.96); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.btn--birincil {
    background: var(--c-vurgu);
    color: #fff;
    box-shadow: var(--g-vurgu);
}
.btn--birincil:hover:not(:disabled) { background: var(--c-vurgu-koyu); }
.btn--birincil:disabled { background: var(--c-zemin-alt); color: var(--c-metin-soluk); box-shadow: none; }

.btn--ikincil {
    background: var(--c-yuzey);
    color: var(--c-metin);
    box-shadow: var(--g-yumusak);
}

.btn--hayalet {
    background: transparent;
    color: var(--c-vurgu);
    box-shadow: none;
}

.btn--dar { width: auto; padding-inline: var(--bo-5); }

/* Yuvarlak eylem butonları (beğen / geç / süper beğeni) */
.btn-daire {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--c-yuzey);
    color: var(--c-metin);
    box-shadow: var(--g-orta);
    cursor: pointer;
    transition: transform var(--normal) var(--yay), box-shadow var(--normal) var(--yumusak);
}
.btn-daire:active { transform: scale(.88); }
.btn-daire:hover  { transform: translateY(-2px); }
.btn-daire svg { width: 26px; height: 26px; }

.btn-daire--gec    { color: var(--c-hata); }
.btn-daire--yildiz { color: var(--c-yildiz); }
.btn-daire--begen  {
    width: 66px;
    height: 66px;
    background: var(--gradyan-vurgu);
    color: #fff;
    box-shadow: var(--g-vurgu);
}
.btn-daire--begen svg { width: 30px; height: 30px; }

/* İkon butonu (geri, filtre, düzenle) */
.btn-ikon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--c-metin);
    cursor: pointer;
    transition: background-color var(--hizli) var(--yumusak), transform var(--hizli) var(--yay);
}
.btn-ikon:hover  { background: var(--c-zemin-alt); }
.btn-ikon:active { transform: scale(.9); }
.btn-ikon--yuzey { background: var(--c-yuzey); box-shadow: var(--g-yumusak); }
.btn-ikon svg { width: 22px; height: 22px; }

/* --- 5. Form alanları ---------------------------------------------------- */
.alan { margin-bottom: var(--bo-4); }

.alan__etiket {
    display: block;
    margin-bottom: var(--bo-2);
    font-size: var(--fs-kucuk);
    font-weight: 600;
    color: var(--c-metin);
}

.alan__sarmal {
    display: flex;
    align-items: center;
    gap: var(--bo-3);
    padding: 0 var(--bo-4);
    background: var(--c-yuzey);
    border: 1.5px solid transparent;
    border-radius: var(--k-tam);
    box-shadow: var(--g-yumusak);
    transition: border-color var(--hizli) var(--yumusak), box-shadow var(--normal) var(--yumusak);
}
.alan__sarmal:focus-within {
    border-color: var(--c-vurgu);
    box-shadow: 0 0 0 4px var(--c-vurgu-soluk);
}
.alan__sarmal--hatali { border-color: var(--c-hata); }

.alan__ikon { flex-shrink: 0; color: var(--c-metin-soluk); display: grid; }
.alan__ikon svg { width: 20px; height: 20px; }

.alan__girdi {
    flex: 1;
    min-width: 0;
    padding: var(--bo-3) 0;
    min-height: 54px;
    border: 0;
    background: transparent;
    font: inherit;
    color: var(--c-metin);
}
.alan__girdi:focus { outline: none; }
.alan__girdi::placeholder { color: var(--c-metin-soluk); }

.alan__hata {
    display: block;
    margin-top: var(--bo-2);
    padding-left: var(--bo-4);
    font-size: var(--fs-kucuk);
    color: var(--c-hata);
}

textarea.alan__girdi { padding: var(--bo-3) 0; resize: none; line-height: 1.5; }

/* Tek haneli doğrulama kutuları */
.otp {
    display: flex;
    gap: var(--bo-3);
    justify-content: space-between;
    margin-bottom: var(--bo-5);
}
.otp__hane {
    flex: 1;
    aspect-ratio: 1;
    max-width: 72px;
    padding: 0;
    border: 1.5px solid transparent;
    border-radius: var(--k-orta);
    background: var(--c-yuzey);
    box-shadow: var(--g-yumusak);
    font-family: var(--font-baslik);
    font-size: var(--fs-buyuk);
    font-weight: 700;
    text-align: center;
    color: var(--c-metin);
    transition: border-color var(--hizli) var(--yumusak), transform var(--normal) var(--yay);
}
.otp__hane:focus {
    outline: none;
    border-color: var(--c-vurgu);
    transform: scale(1.06);
}
.otp__hane--dolu { border-color: var(--c-vurgu); }

/* --- 6. Kart ve liste ---------------------------------------------------- */
.kart {
    padding: var(--bo-4);
    background: var(--c-yuzey);
    border-radius: var(--k-buyuk);
    box-shadow: var(--g-yumusak);
}

.liste { display: flex; flex-direction: column; gap: var(--bo-3); }

.liste-satiri {
    display: flex;
    align-items: center;
    gap: var(--bo-3);
    width: 100%;
    padding: var(--bo-4);
    border: 0;
    border-radius: var(--k-buyuk);
    background: var(--c-yuzey);
    box-shadow: var(--g-yumusak);
    text-align: left;
    color: inherit;
    cursor: pointer;
    transition: transform var(--hizli) var(--yay), box-shadow var(--normal) var(--yumusak);
}
.liste-satiri:active { transform: scale(.985); }
.liste-satiri:hover  { box-shadow: var(--g-orta); }
.liste-satiri__ikon  { flex-shrink: 0; color: var(--c-metin-soluk); display: grid; }
.liste-satiri__ikon svg { width: 22px; height: 22px; }
.liste-satiri__govde { flex: 1; min-width: 0; }
.liste-satiri__baslik { display: block; font-weight: 600; }
.liste-satiri__alt {
    font-size: var(--fs-kucuk);
    color: var(--c-metin-soluk);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.liste-satiri__son { flex-shrink: 0; color: var(--c-metin-soluk); font-size: var(--fs-kucuk); }
.liste-satiri--tehlike { color: var(--c-vurgu); }
.liste-satiri--tehlike .liste-satiri__ikon { color: var(--c-vurgu); }

/* --- 7. Çipler ve sekmeler ----------------------------------------------- */
.cipler { display: flex; flex-wrap: wrap; gap: var(--bo-2); }

.cip {
    display: inline-flex;
    align-items: center;
    gap: var(--bo-1);
    padding: var(--bo-2) var(--bo-3);
    border: 1.5px solid transparent;
    border-radius: var(--k-tam);
    background: var(--c-zemin-alt);
    font-size: var(--fs-kucuk);
    font-weight: 600;
    color: var(--c-metin);
    cursor: pointer;
    transition: transform var(--hizli) var(--yay), background-color var(--hizli) var(--yumusak),
                border-color var(--hizli) var(--yumusak);
}
.cip:active { transform: scale(.94); }
.cip--secili {
    background: var(--c-vurgu-soluk);
    border-color: var(--c-vurgu);
    color: var(--c-vurgu-koyu);
}
.cip--koyu {
    background: rgba(255, 255, 255, .18);
    color: #fff;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    cursor: default;
}

/* Bölümlü sekme (Seni beğenenler / Beğendiklerin) */
.sekmeler {
    position: relative;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    padding: 4px;
    border-radius: var(--k-tam);
    background: var(--c-zemin-alt);
}
.sekmeler__kaydirak {
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 4px;
    border-radius: var(--k-tam);
    background: var(--c-vurgu);
    box-shadow: var(--g-vurgu);
    transition: transform var(--yavas) var(--yay), width var(--yavas) var(--yay);
    z-index: 0;
}
.sekme {
    position: relative;
    z-index: 1;
    padding: var(--bo-2) var(--bo-3);
    min-height: 42px;
    border: 0;
    border-radius: var(--k-tam);
    background: transparent;
    font-weight: 600;
    font-size: var(--fs-kucuk);
    color: var(--c-metin-soluk);
    cursor: pointer;
    transition: color var(--normal) var(--yumusak);
}
.sekme--aktif { color: #fff; }

/* --- 8. Alt gezinme ------------------------------------------------------ */
.tab-cubugu {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 40;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    width: 100%;
    max-width: var(--kabuk-en);
    padding-bottom: var(--guvenli-alt);
    background: color-mix(in srgb, var(--c-zemin) 88%, transparent);
    backdrop-filter: blur(18px) saturate(1.4);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    border-top: 1px solid var(--c-cizgi);
}
@media (min-width: 700px) {
    .tab-cubugu { position: sticky; margin-top: auto; }
}

.tab {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    height: var(--tab-y);
    border: 0;
    background: transparent;
    font-size: var(--fs-mikro);
    font-weight: 600;
    color: var(--c-metin-soluk);
    cursor: pointer;
    transition: color var(--normal) var(--yumusak);
}
.tab svg { width: 24px; height: 24px; transition: transform var(--normal) var(--yay); }
.tab:active svg { transform: scale(.85); }
.tab--aktif { color: var(--c-vurgu); }
.tab--aktif svg { transform: translateY(-2px); }

.tab__rozet {
    position: absolute;
    top: 8px;
    left: 55%;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--k-tam);
    background: var(--c-vurgu);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    animation: rozetGir var(--yavas) var(--yay) both;
}
@keyframes rozetGir {
    from { transform: scale(0); }
    to   { transform: scale(1); }
}

/* --- 9. Alt sayfa (bottom sheet) ----------------------------------------- */
.perde {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: rgba(27, 15, 19, .45);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--normal) var(--yumusak);
}
.perde--acik { opacity: 1; pointer-events: auto; }

/* Alt sayfa açıkken arkadaki içerik kaymasın */
body.sheet-acik { overflow: hidden; }

.sheet {
    position: fixed;
    bottom: 0;
    left: 50%;
    z-index: 61;
    width: 100%;
    max-width: var(--kabuk-en);
    max-height: 85dvh;
    overflow-y: auto;
    padding: var(--bo-3) var(--bo-4) calc(var(--guvenli-alt) + var(--bo-5));
    background: var(--c-yuzey);
    border-radius: var(--k-dev) var(--k-dev) 0 0;
    box-shadow: var(--g-yuksek);
    transform: translate(-50%, 100%);
    transition: transform var(--yavas) var(--yay);
}
.sheet--acik { transform: translate(-50%, 0); }

.sheet__tutamac {
    width: 42px;
    height: 4px;
    margin: 0 auto var(--bo-4);
    border-radius: var(--k-tam);
    background: var(--c-cizgi);
}
.sheet__baslik { margin-bottom: var(--bo-3); font-size: var(--fs-orta); }

/* --- 10. Anahtar (switch) ------------------------------------------------ */
.anahtar {
    position: relative;
    flex-shrink: 0;
    width: 52px;
    height: 30px;
    border-radius: var(--k-tam);
    border: 0;
    padding: 0;
    background: var(--c-zemin-alt);
    cursor: pointer;
    transition: background-color var(--normal) var(--yumusak);
}
.anahtar::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fff;
    box-shadow: var(--g-yumusak);
    transition: transform var(--normal) var(--yay);
}
.anahtar[aria-checked="true"] { background: var(--c-vurgu); }
.anahtar[aria-checked="true"]::after { transform: translateX(22px); }

/* --- 11. Kaydırıcı (range) ----------------------------------------------- */
.kaydirici {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    border-radius: var(--k-tam);
    background: var(--c-zemin-alt);
    outline: none;
}
.kaydirici::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    border: 0;
    border-radius: 50%;
    background: var(--c-vurgu);
    box-shadow: var(--g-vurgu);
    cursor: grab;
    transition: transform var(--hizli) var(--yay);
}
.kaydirici::-webkit-slider-thumb:active { transform: scale(1.25); cursor: grabbing; }
.kaydirici::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border: 0;
    border-radius: 50%;
    background: var(--c-vurgu);
    box-shadow: var(--g-vurgu);
    cursor: grab;
}

/* --- 12. Bildirim (toast) ------------------------------------------------ */
.bildirim-yigini {
    position: fixed;
    top: calc(var(--guvenli-ust) + var(--bo-3));
    left: 50%;
    transform: translateX(-50%);
    z-index: 90;
    display: flex;
    flex-direction: column;
    gap: var(--bo-2);
    width: min(var(--kabuk-en), 100%);
    padding-inline: var(--bo-4);
    pointer-events: none;
}

.bildirim {
    display: flex;
    align-items: center;
    gap: var(--bo-3);
    padding: var(--bo-3) var(--bo-4);
    border-radius: var(--k-orta);
    background: var(--c-yuzey);
    box-shadow: var(--g-yuksek);
    font-size: var(--fs-kucuk);
    font-weight: 600;
    animation: bildirimGir var(--yavas) var(--yay) both;
}
.bildirim--kapaniyor { animation: bildirimCik var(--normal) var(--yumusak) forwards; }
.bildirim::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--c-vurgu);
    flex-shrink: 0;
}
.bildirim--basari::before { background: var(--c-basari); }
.bildirim--hata::before   { background: var(--c-hata); }
.bildirim--uyari::before  { background: var(--c-uyari); }

@keyframes bildirimGir {
    from { opacity: 0; transform: translateY(-24px) scale(.94); }
    to   { opacity: 1; transform: none; }
}
@keyframes bildirimCik {
    to { opacity: 0; transform: translateY(-16px) scale(.96); }
}

/* --- 13. Yardımcı sınıflar ----------------------------------------------- */
.metin-soluk   { color: var(--c-metin-soluk); }
.metin-kucuk   { font-size: var(--fs-kucuk); }
.metin-orta    { text-align: center; }
.metin-vurgu   { color: var(--c-vurgu); }
.baslik-fontu  { font-family: var(--font-baslik); }

.yigin      { display: flex; flex-direction: column; }
.yigin--2   { gap: var(--bo-2); }
.yigin--3   { gap: var(--bo-3); }
.yigin--4   { gap: var(--bo-4); }
.satir      { display: flex; align-items: center; gap: var(--bo-3); }
.bosluk     { flex: 1; }
.itele      { margin-top: auto; }

.gizli { display: none !important; }
.gorsel-gizli {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Boş durum */
.bos-durum {
    display: grid;
    place-items: center;
    gap: var(--bo-3);
    padding: var(--bo-6) var(--bo-4);
    text-align: center;
    color: var(--c-metin-soluk);
}
.bos-durum__ikon {
    display: grid;
    place-items: center;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: var(--c-vurgu-soluk);
    font-size: 42px;
}

/* İskelet yükleyici */
.iskelet {
    background: linear-gradient(100deg, var(--c-zemin-alt) 30%, var(--c-yuzey-2) 50%, var(--c-zemin-alt) 70%);
    background-size: 220% 100%;
    border-radius: var(--k-orta);
    animation: iskeletParla 1.4s linear infinite;
}
@keyframes iskeletParla {
    to { background-position-x: -220%; }
}

/* --- 14. Kimlik doğrulama ekranları -------------------------------------- */
.ekran--auth { padding-top: calc(var(--guvenli-ust) + var(--bo-5)); }

.auth-basi { margin-bottom: var(--bo-5); }
.auth-basi h1 { margin-bottom: var(--bo-2); }
.auth-basi p  { margin: 0; }

/* Selam veren el */
.el-salla {
    display: inline-block;
    transform-origin: 70% 70%;
    animation: elSalla 2.4s var(--yumusak) infinite;
}
@keyframes elSalla {
     0%, 60%, 100% { transform: rotate(0); }
    10%, 30%      { transform: rotate(14deg); }
    20%, 40%      { transform: rotate(-8deg); }
}

.uyari-kutusu {
    padding: var(--bo-3) var(--bo-4);
    margin-bottom: var(--bo-4);
    border-radius: var(--k-orta);
    background: var(--c-yuzey);
    border-left: 4px solid var(--c-vurgu);
    font-size: var(--fs-kucuk);
    font-weight: 600;
    box-shadow: var(--g-yumusak);
    animation: bildirimGir var(--normal) var(--yay) both;
}
.uyari-kutusu--hata   { border-left-color: var(--c-hata); color: var(--c-hata); }
.uyari-kutusu--basari { border-left-color: var(--c-basari); color: var(--c-basari); }

/* Radyo grubu — cinsiyet seçimi gibi az seçenekli alanlar */
.secim-grubu {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: var(--bo-2);
}
.secim {
    display: grid;
    place-items: center;
    padding: var(--bo-3) var(--bo-2);
    min-height: 52px;
    border: 1.5px solid transparent;
    border-radius: var(--k-tam);
    background: var(--c-yuzey);
    box-shadow: var(--g-yumusak);
    font-size: var(--fs-kucuk);
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: transform var(--hizli) var(--yay), border-color var(--hizli) var(--yumusak),
                background-color var(--hizli) var(--yumusak), color var(--hizli) var(--yumusak);
}
.secim:active { transform: scale(.95); }
.secim:has(input:checked), .secim--secili {
    background: var(--c-vurgu-soluk);
    border-color: var(--c-vurgu);
    color: var(--c-vurgu-koyu);
}
.secim:has(input:focus-visible) { outline: 2px solid var(--c-vurgu); outline-offset: 2px; }

.metin-mikro { font-size: var(--fs-mikro); }

code {
    padding: 1px 5px;
    border-radius: 6px;
    background: var(--c-zemin-alt);
    font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
    font-size: .9em;
}

/* Tarih alanı mobilde daha iyi hizalansın */
input[type="date"].alan__girdi { min-height: 54px; }
input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .5; }

/* --- 15. Tanıtım (onboarding) -------------------------------------------- */
.tanitim {
    display: grid;
    grid-template-rows: auto 1fr auto;
    height: 100dvh;
    padding-block: calc(var(--guvenli-ust) + var(--bo-3)) calc(var(--guvenli-alt) + var(--bo-4));
}
@media (min-width: 700px) {
    .tanitim { height: 100%; }
}

.tanitim__ust {
    display: flex;
    justify-content: flex-end;
    padding-inline: var(--bo-3);
    min-height: 44px;
}

/* Yatay kaydırmalı slayt rayı */
.tanitim__ray {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
}
.tanitim__ray::-webkit-scrollbar { display: none; }

.tanitim__slayt {
    flex: 0 0 100%;
    scroll-snap-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--bo-3);
    padding: var(--bo-4) var(--bo-5);
    text-align: center;
}

.tanitim__gorsel {
    display: grid;
    place-items: center;
    width: clamp(160px, 48vw, 220px);
    aspect-ratio: 1;
    margin-bottom: var(--bo-4);
    border-radius: 50%;
    background: radial-gradient(circle at 30% 25%, var(--c-vurgu-soluk), var(--c-zemin-alt));
    animation: nefesAl 5s var(--yumusak) infinite;
}
.tanitim__emoji {
    font-size: clamp(64px, 20vw, 92px);
    line-height: 1;
    animation: suzul 3.6s var(--yumusak) infinite;
}

@keyframes nefesAl {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.04); }
}
@keyframes suzul {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50%      { transform: translateY(-10px) rotate(2deg); }
}

.tanitim__baslik   { font-size: var(--fs-dev); }
.tanitim__aciklama { margin: 0; color: var(--c-metin-soluk); max-width: 34ch; }

.tanitim__alt {
    display: grid;
    gap: var(--bo-4);
    padding-inline: var(--bo-4);
}

.noktalar {
    display: flex;
    justify-content: center;
    gap: var(--bo-2);
}
.nokta {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: var(--k-tam);
    background: var(--c-cizgi);
    cursor: pointer;
    transition: width var(--normal) var(--yay), background-color var(--normal) var(--yumusak);
}
.nokta--aktif {
    width: 26px;
    background: var(--c-vurgu);
}

/* --- 16. PWA kurulum çağrısı --------------------------------------------- */
.kurulum-cagri {
    position: fixed;
    bottom: calc(var(--guvenli-alt) + var(--bo-3));
    left: 50%;
    z-index: 70;
    display: flex;
    align-items: center;
    gap: var(--bo-3);
    width: min(var(--kabuk-en), 100%);
    padding: var(--bo-3) var(--bo-4);
    margin-inline: var(--bo-3);
    background: var(--c-yuzey);
    border-radius: var(--k-buyuk);
    box-shadow: var(--g-yuksek);
    transform: translate(-50%, calc(100% + 40px));
    transition: transform var(--yavas) var(--yay);
}
.kurulum-cagri--acik { transform: translate(-50%, 0); }
.kurulum-cagri__govde { flex: 1; min-width: 0; }
.kurulum-cagri__baslik { font-weight: 700; font-size: var(--fs-kucuk); }
.kurulum-cagri__alt { font-size: var(--fs-mikro); color: var(--c-metin-soluk); }
.kurulum-cagri .btn { width: auto; min-height: 42px; padding-inline: var(--bo-4); font-size: var(--fs-kucuk); }

/* Çevrimdışı şeridi */
.cevrimdisi-serit {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translate(-50%, -100%);
    z-index: 95;
    width: min(var(--kabuk-en), 100%);
    padding: calc(var(--guvenli-ust) + var(--bo-2)) var(--bo-4) var(--bo-2);
    background: var(--c-metin);
    color: var(--c-metin-ters);
    font-size: var(--fs-mikro);
    font-weight: 600;
    text-align: center;
    transition: transform var(--normal) var(--yumusak);
}
.cevrimdisi-serit--acik { transform: translate(-50%, 0); }

/* --- 17. Avatar ---------------------------------------------------------- */
.avatar {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 50%;
    object-fit: cover;
    background: var(--c-zemin-alt);
}
.avatar--harf {
    background: var(--avatar-renk, var(--c-vurgu));
    color: #fff;
    font-family: var(--font-baslik);
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1;
}
.avatar--orta  { width: 64px; height: 64px; }
.avatar--orta.avatar--harf  { font-size: 1.6rem; }
.avatar--buyuk { width: 88px; height: 88px; }
.avatar--buyuk.avatar--harf { font-size: 2.2rem; }
.avatar--kucuk { width: 38px; height: 38px; }
.avatar--kucuk.avatar--harf { font-size: .95rem; }

/* --- 18. Profil ---------------------------------------------------------- */
.profil-kart {
    display: flex;
    align-items: center;
    gap: var(--bo-3);
    padding: var(--bo-4);
    border-radius: var(--k-buyuk);
    background: var(--c-yuzey);
    box-shadow: var(--g-yumusak);
    color: inherit;
    font-weight: 400;
    transition: transform var(--hizli) var(--yay), box-shadow var(--normal) var(--yumusak);
}
.profil-kart:active { transform: scale(.985); }
.profil-kart:hover  { box-shadow: var(--g-orta); }
.profil-kart__govde { flex: 1; min-width: 0; }
.profil-kart__ad {
    display: block;
    font-family: var(--font-baslik);
    font-size: var(--fs-orta);
    font-weight: 700;
}
.profil-kart__alt {
    display: block;
    font-size: var(--fs-kucuk);
    color: var(--c-metin-soluk);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Profil tamamlama çubuğu */
.tamamla {
    display: block;
    margin-top: var(--bo-3);
    padding: var(--bo-3) var(--bo-4);
    border-radius: var(--k-buyuk);
    background: var(--c-vurgu-soluk);
    color: var(--c-vurgu-koyu);
    font-weight: 400;
}
.tamamla__ust {
    display: flex;
    align-items: baseline;
    gap: var(--bo-2);
    margin-bottom: var(--bo-2);
}
.tamamla__baslik { flex: 1; font-size: var(--fs-kucuk); font-weight: 700; }
.tamamla__ipucu  { font-size: var(--fs-mikro); font-weight: 600; }
.tamamla__ray {
    display: block;
    height: 6px;
    border-radius: var(--k-tam);
    background: color-mix(in srgb, var(--c-vurgu) 22%, transparent);
    overflow: hidden;
}
.tamamla__dolgu {
    display: block;
    height: 100%;
    border-radius: var(--k-tam);
    background: var(--c-vurgu);
    transition: width var(--yavas) var(--yay);
}

/* --- 19. Fotoğraf ızgarası ----------------------------------------------- */
.foto-izgara {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--bo-2);
}

.foto-hucre {
    position: relative;
    aspect-ratio: 3 / 4;
    padding: 0;
    border: 0;
    border-radius: var(--k-orta);
    overflow: hidden;
    background: var(--c-zemin-alt);
    cursor: grab;
    transition: transform var(--normal) var(--yay), opacity var(--normal) var(--yumusak);
}
.foto-hucre img { width: 100%; height: 100%; object-fit: cover; }

.foto-hucre--bos {
    display: grid;
    place-items: center;
    border: 2px dashed var(--c-cizgi);
    color: var(--c-metin-soluk);
    cursor: pointer;
}
.foto-hucre--bos svg { width: 26px; height: 26px; }
.foto-hucre--bos:hover { border-color: var(--c-vurgu); color: var(--c-vurgu); }
.foto-hucre--bos:active { transform: scale(.94); }

/* İlk hücre profil fotoğrafı — köşesinde işaret */
.foto-hucre[data-id]:first-child::after {
    content: 'Profil';
    position: absolute;
    left: 6px;
    bottom: 6px;
    padding: 2px 8px;
    border-radius: var(--k-tam);
    background: rgba(0, 0, 0, .55);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    backdrop-filter: blur(6px);
}

.foto-hucre__etiket {
    position: absolute;
    top: 6px;
    left: 6px;
    padding: 2px 8px;
    border-radius: var(--k-tam);
    font-size: 10px;
    font-weight: 700;
}
.foto-hucre__etiket--bekliyor { background: var(--c-uyari); color: #fff; }

.foto-hucre__sil {
    position: absolute;
    top: 5px;
    right: 5px;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .5);
    color: #fff;
    cursor: pointer;
    backdrop-filter: blur(6px);
    transition: background-color var(--hizli) var(--yumusak), transform var(--hizli) var(--yay);
}
.foto-hucre__sil svg { width: 14px; height: 14px; }
.foto-hucre__sil:hover  { background: var(--c-hata); }
.foto-hucre__sil:active { transform: scale(.85); }

.foto-hucre--yukleniyor {
    background: linear-gradient(100deg, var(--c-zemin-alt) 30%, var(--c-yuzey-2) 50%, var(--c-zemin-alt) 70%);
    background-size: 220% 100%;
    animation: iskeletParla 1.2s linear infinite;
    border-style: solid;
}
.foto-hucre--yeni      { animation: fotoGir var(--yavas) var(--yay) both; }
.foto-hucre--siliniyor { opacity: 0; transform: scale(.8); }

/* Sürükleme: parmağın altındaki kopya + geride kalan yer tutucu */
.foto-hucre--hayalet {
    position: fixed;
    z-index: 80;
    margin: 0;
    pointer-events: none;
    transform: scale(1.06);
    box-shadow: var(--g-yuksek);
    opacity: .95;
}
.foto-hucre--hayalet .foto-hucre__sil { display: none; }

.foto-hucre--yer-tutucu { background: var(--c-vurgu-soluk); }
.foto-hucre--yer-tutucu > * { opacity: 0; }
.foto-hucre--yer-tutucu::before {
    content: '';
    position: absolute;
    inset: 0;
    border: 2px dashed var(--c-vurgu);
    border-radius: var(--k-orta);
}
.foto-hucre--yer-tutucu::after { display: none; }

/* Sürükleme sırasında sayfa kaymasın */
body.surukleme-aktif {
    overflow: hidden;
    touch-action: none;
    cursor: grabbing;
}
body.surukleme-aktif .foto-hucre { touch-action: none; }

@keyframes fotoGir {
    from { opacity: 0; transform: scale(.85); }
    to   { opacity: 1; transform: none; }
}

/* --- 20. Çift kulplu aralık ---------------------------------------------- */
.aralik {
    position: relative;
    height: 24px;
    display: grid;
    align-items: center;
}
.aralik__ray {
    position: absolute;
    inset-inline: 0;
    height: 4px;
    border-radius: var(--k-tam);
    background: var(--c-zemin-alt);
}
.aralik__dolgu {
    position: absolute;
    height: 100%;
    border-radius: var(--k-tam);
    background: var(--c-vurgu);
}

/* İki range üst üste: raylar şeffaf, sadece kulplar tıklanabilir */
.kaydirici--aralik {
    position: absolute;
    inset-inline: 0;
    width: 100%;
    height: 24px;
    margin: 0;
    background: none;
    pointer-events: none;
}
.kaydirici--aralik::-webkit-slider-thumb { pointer-events: auto; }
.kaydirici--aralik::-moz-range-thumb     { pointer-events: auto; }
.kaydirici--aralik::-moz-range-track     { background: none; }

/* Sınıra ulaşılan çipler */
.cip--kilitli { opacity: .4; }

/* --- 21. Keşfet destesi -------------------------------------------------- */
/* Esnek düzen: araya bilgi şeridi gibi öğeler girse de
   boş alanı her zaman deste alır. */
.ekran--deste {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    overflow: hidden;
}
@media (min-width: 700px) {
    .ekran--deste { height: 100%; }
}

.deste {
    position: relative;
    flex: 1 1 auto;
    display: grid;
    place-items: center;
    min-height: 0;
    margin-block: var(--bo-2);
}

.kart-profil {
    position: absolute;
    inset: 0;
    display: block;
    border-radius: var(--k-dev);
    overflow: hidden;
    background: var(--c-zemin-alt);
    box-shadow: var(--g-orta);
    will-change: transform;
    touch-action: none;          /* kaydırmayı biz yönetiyoruz */
    user-select: none;
    cursor: grab;
    transition: transform var(--normal) var(--yumusak), opacity var(--normal) linear;
}
.kart-profil--tutuluyor { cursor: grabbing; box-shadow: var(--g-yuksek); }

.kart-profil__foto {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}
.kart-profil__foto--harf {
    display: grid;
    place-items: center;
    background: var(--avatar-renk, var(--c-vurgu));
    color: #fff;
    font-family: var(--font-baslik);
    font-size: clamp(4rem, 22vw, 7rem);
    font-weight: 700;
}

.kart-profil__perde {
    position: absolute;
    inset: 0;
    background: var(--gradyan-kart);
    pointer-events: none;
}

.kart-profil__govde {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    padding: var(--bo-4);
    color: #fff;
    pointer-events: none;
}
.kart-profil__ad {
    margin-bottom: 2px;
    font-size: var(--fs-buyuk);
    color: #fff;
    text-shadow: 0 1px 12px rgba(0, 0, 0, .4);
}
.kart-profil__alt {
    margin: 0 0 var(--bo-3);
    font-size: var(--fs-kucuk);
    color: rgba(255, 255, 255, .88);
    text-shadow: 0 1px 10px rgba(0, 0, 0, .4);
}
.kart-profil__cipler { gap: var(--bo-1); }

/* Kartın tamamı tıklanabilir: profili açar */
.kart-profil__detay {
    position: absolute;
    inset: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

/* Kaydırma damgaları */
.kart-damga {
    position: absolute;
    top: var(--bo-5);
    padding: var(--bo-2) var(--bo-3);
    border: 3px solid currentColor;
    border-radius: var(--k-kucuk);
    font-family: var(--font-baslik);
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: .04em;
    pointer-events: none;
    backdrop-filter: blur(2px);
}
.kart-damga--begen {
    left: var(--bo-4);
    color: var(--c-basari);
    transform: rotate(-14deg);
    opacity: var(--begen-op, 0);
}
.kart-damga--gec {
    right: var(--bo-4);
    color: var(--c-hata);
    transform: rotate(14deg);
    opacity: var(--gec-op, 0);
}

.deste-bos {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: var(--bo-4);
}
.deste-bos[hidden] { display: none; }

/* Tercihler gevşetildiğinde destenin üstünde çıkan açıklama */
.deste-bilgi {
    flex: 0 0 auto;
    margin: 0 0 var(--bo-2);
    padding: var(--bo-2) var(--bo-3);
    border-radius: var(--k-orta);
    background: var(--c-vurgu-soluk);
    color: var(--c-vurgu-koyu);
    font-size: var(--fs-mikro);
    font-weight: 600;
    text-align: center;
}

/* Tam satır kaplayan seçilebilir çip (ör. "mesafe fark etmez") */
.cip--genis {
    display: flex;
    width: 100%;
    justify-content: center;
    padding: var(--bo-3);
}

.deste-eylemler {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--bo-4);
    padding-block: var(--bo-3);
}

/* --- 22. Eşleşme penceresi ----------------------------------------------- */
.eslesme-perde {
    position: fixed;
    inset: 0;
    z-index: 85;
    display: grid;
    place-items: center;
    padding: var(--bo-5);
    background: var(--gradyan-vurgu);
    opacity: 0;
    pointer-events: none;   /* kapalıyken altındaki düğmeleri engellemesin */
    transition: opacity var(--normal) var(--yumusak);
}
.eslesme-perde--acik { opacity: 1; pointer-events: auto; }
.eslesme-perde[hidden] { display: none; }

.eslesme {
    display: grid;
    justify-items: center;
    gap: var(--bo-3);
    width: min(var(--kabuk-en), 100%);
    text-align: center;
    color: #fff;
}

.eslesme__avatarlar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--bo-4);
}
.eslesme__avatar {
    display: grid;
    place-items: center;
    width: clamp(96px, 30vw, 128px);
    aspect-ratio: 1;
    border: 4px solid #fff;
    border-radius: var(--k-buyuk);
    background: var(--avatar-renk, var(--c-vurgu-2));
    color: #fff;
    font-family: var(--font-baslik);
    font-size: 2.6rem;
    font-weight: 700;
    overflow: hidden;
    box-shadow: var(--g-yuksek);
}
.eslesme__avatar img { width: 100%; height: 100%; object-fit: cover; }
.eslesme__avatar--sol { transform: rotate(-8deg) translateX(10px); animation: eslesmeSol var(--yavas) var(--yay) both; }
.eslesme__avatar--sag { transform: rotate(8deg) translateX(-10px); animation: eslesmeSag var(--yavas) var(--yay) both .08s; }

.eslesme__kalp {
    position: absolute;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: #fff;
    color: var(--c-vurgu);
    box-shadow: var(--g-orta);
    animation: kalpAt 1.4s var(--yumusak) infinite .5s;
}
.eslesme__kalp svg { width: 28px; height: 28px; fill: currentColor; }

@keyframes eslesmeSol {
    from { opacity: 0; transform: rotate(-8deg) translateX(-80px); }
    to   { opacity: 1; transform: rotate(-8deg) translateX(10px); }
}
@keyframes eslesmeSag {
    from { opacity: 0; transform: rotate(8deg) translateX(80px); }
    to   { opacity: 1; transform: rotate(8deg) translateX(-10px); }
}
@keyframes kalpAt {
    0%, 100% { transform: scale(1); }
    18%      { transform: scale(1.18); }
    36%      { transform: scale(1); }
}

.eslesme__baslik   { font-size: var(--fs-dev); color: #fff; }
.eslesme__aciklama { margin: 0; color: rgba(255, 255, 255, .9); max-width: 32ch; }
.eslesme__eylemler {
    display: grid;
    gap: var(--bo-2);
    width: 100%;
    margin-top: var(--bo-4);
}
.eslesme__eylemler .btn--hayalet { color: #fff; }

/* --- 23. Profil detayı ---------------------------------------------------- */
.profil-detay {
    padding: 0;
    /* Alttaki sabit beğen/geç çubuğu son içeriği örtmemeli */
    padding-bottom: calc(var(--guvenli-alt) + 140px);
    /* Giriş animasyonundaki transform, içindeki position:fixed düğmeleri
       viewport yerine bu elemana bağlar ve ekran dışına iter. */
    animation: none;
}

.profil-detay__kapak {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: 0 0 var(--k-dev) var(--k-dev);
}
.profil-detay__foto { width: 100%; height: 100%; object-fit: cover; }
.profil-detay__foto--harf {
    display: grid;
    place-items: center;
    background: var(--avatar-renk, var(--c-vurgu));
    color: #fff;
    font-family: var(--font-baslik);
    font-size: clamp(5rem, 26vw, 8rem);
    font-weight: 700;
}
.profil-detay__perde {
    position: absolute;
    inset: 0;
    background: var(--gradyan-kart);
    /* Fotoğrafların üstünde durur; tıklamaları geçirmeli */
    pointer-events: none;
}
.profil-detay__geri {
    position: absolute;
    top: calc(var(--guvenli-ust) + var(--bo-3));
    left: var(--bo-3);
}
.profil-detay__basi {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    padding: var(--bo-4);
    color: #fff;
    pointer-events: none;
}
.profil-detay__ad  { color: #fff; text-shadow: 0 1px 14px rgba(0, 0, 0, .45); }
.profil-detay__alt {
    margin: 0;
    font-size: var(--fs-kucuk);
    color: rgba(255, 255, 255, .9);
    text-shadow: 0 1px 10px rgba(0, 0, 0, .45);
}

.profil-detay__govde { padding: var(--bo-4); }
.profil-detay__bolum { margin-bottom: var(--bo-5); }
.profil-detay__bolum h3 { margin-bottom: var(--bo-2); }
.profil-detay__bolum p  { margin: 0; color: var(--c-metin-soluk); }

.profil-detay__eylemler {
    position: fixed;
    bottom: calc(var(--guvenli-alt) + var(--bo-3));
    left: 50%;
    transform: translateX(-50%);
    z-index: 30;
    display: flex;
    gap: var(--bo-4);
    padding: var(--bo-2) var(--bo-4);
    border-radius: var(--k-tam);
    background: color-mix(in srgb, var(--c-yuzey) 88%, transparent);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: var(--g-yuksek);
}

/* --- Kapaktaki fotoğraf şeridi -------------------------------------------- */
.foto-serit {
    display: flex;
    height: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
}
.foto-serit::-webkit-scrollbar { display: none; }

.foto-serit__oge {
    flex: 0 0 100%;
    scroll-snap-align: center;
    padding: 0;
    border: 0;
    background: var(--c-zemin-alt);
    cursor: zoom-in;
}
.foto-serit__oge img { width: 100%; height: 100%; object-fit: cover; }

/* Instagram tarzı ince ilerleme çubukları */
.foto-cubuklar {
    position: absolute;
    top: calc(var(--guvenli-ust) + var(--bo-2));
    inset-inline: var(--bo-3);
    z-index: 3;
    display: flex;
    gap: 4px;
}
.foto-cubuk {
    flex: 1;
    height: 3px;
    border-radius: var(--k-tam);
    background: rgba(255, 255, 255, .35);
    transition: background-color var(--normal) var(--yumusak);
}
.foto-cubuk--aktif { background: #fff; }

/* Masaüstünde okla gezinme */
.foto-ok {
    position: absolute;
    top: 50%;
    z-index: 3;
    display: none;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .35);
    color: #fff;
    cursor: pointer;
    transform: translateY(-50%);
    backdrop-filter: blur(6px);
    transition: background-color var(--hizli) var(--yumusak);
}
.foto-ok:hover { background: rgba(0, 0, 0, .55); }
.foto-ok svg { width: 20px; height: 20px; }
.foto-ok--geri  { left: var(--bo-3); }
.foto-ok--ileri { right: var(--bo-3); }

@media (hover: hover) and (pointer: fine) {
    .foto-ok { display: grid; }
}

/* --- Tam ekran fotoğraf görüntüleyici ------------------------------------- */
.buyuteç {
    position: fixed;
    inset: 0;
    z-index: 95;
    display: grid;
    background: rgba(12, 6, 8, .96);
    opacity: 0;
    transition: opacity var(--normal) var(--yumusak);
}
.buyuteç--acik { opacity: 1; }
.buyuteç[hidden] { display: none; }

.buyuteç__serit {
    display: flex;
    height: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior: contain;
}
.buyuteç__serit::-webkit-scrollbar { display: none; }

.buyuteç__oge {
    flex: 0 0 100%;
    scroll-snap-align: center;
    display: grid;
    place-items: center;
    padding: var(--bo-4);
}
.buyuteç__oge img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: var(--k-orta);
}

.buyuteç__kapat {
    position: absolute;
    top: calc(var(--guvenli-ust) + var(--bo-3));
    right: var(--bo-3);
    z-index: 2;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .16);
    color: #fff;
    cursor: pointer;
    backdrop-filter: blur(8px);
}
.buyuteç__kapat:hover { background: rgba(255, 255, 255, .28); }
.buyuteç__kapat svg { width: 22px; height: 22px; }

.buyuteç__cubuklar {
    top: auto;
    bottom: calc(var(--guvenli-alt) + var(--bo-4));
    inset-inline: var(--bo-5);
}

/* --- 24. Beğeniler ------------------------------------------------------- */
.begeni-izgara {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--bo-3);
}

.begeni-kart {
    position: relative;
    display: block;
    aspect-ratio: 3 / 4;
    border-radius: var(--k-buyuk);
    overflow: hidden;
    background: var(--c-zemin-alt);
    box-shadow: var(--g-yumusak);
    color: #fff;
    font-weight: 400;
    transition: transform var(--hizli) var(--yay), box-shadow var(--normal) var(--yumusak);
    animation: fotoGir var(--normal) var(--yay) both;
}
.begeni-kart:active { transform: scale(.97); }
.begeni-kart:hover  { box-shadow: var(--g-orta); }

.begeni-kart__foto { width: 100%; height: 100%; object-fit: cover; }
.begeni-kart__foto--harf {
    display: grid;
    place-items: center;
    background: var(--avatar-renk, var(--c-vurgu));
    font-family: var(--font-baslik);
    font-size: 3rem;
    font-weight: 700;
}

.begeni-kart__perde {
    position: absolute;
    inset: 0;
    background: var(--gradyan-kart);
}

.begeni-kart__govde {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    padding: var(--bo-3);
}
.begeni-kart__ad {
    display: block;
    font-family: var(--font-baslik);
    font-size: var(--fs-govde);
    font-weight: 700;
    text-shadow: 0 1px 10px rgba(0, 0, 0, .5);
}
.begeni-kart__alt {
    display: block;
    font-size: var(--fs-mikro);
    color: rgba(255, 255, 255, .85);
    text-shadow: 0 1px 8px rgba(0, 0, 0, .5);
}

/* Eşleşilen kişiler listede kalır, ayırt edilebilir dursun */
.begeni-kart--eslesme { box-shadow: 0 0 0 2px var(--c-vurgu), var(--g-yumusak); }

.begeni-kart__etiket {
    position: absolute;
    top: var(--bo-2);
    left: var(--bo-2);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: var(--k-tam);
    background: var(--c-vurgu);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    box-shadow: var(--g-yumusak);
}
.begeni-kart__etiket svg { width: 12px; height: 12px; fill: currentColor; }

.begeni-kart__rozet {
    position: absolute;
    top: var(--bo-2);
    right: var(--bo-2);
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--c-yildiz);
    color: #fff;
    box-shadow: var(--g-orta);
}
.begeni-kart__rozet svg { width: 17px; height: 17px; fill: currentColor; }

/* --- 25. Sohbet listesi -------------------------------------------------- */
.yeni-eslesmeler { margin-bottom: var(--bo-5); }
.yeni-eslesmeler__baslik { margin-bottom: var(--bo-3); font-size: var(--fs-orta); }

.serit {
    display: flex;
    gap: var(--bo-3);
    overflow-x: auto;
    padding-bottom: var(--bo-2);
    margin-inline: calc(-1 * var(--bo-4));
    padding-inline: var(--bo-4);
    scrollbar-width: none;
    scroll-snap-type: x proximity;
}
.serit::-webkit-scrollbar { display: none; }

.serit__oge {
    flex: 0 0 auto;
    display: grid;
    justify-items: center;
    gap: var(--bo-1);
    width: 72px;
    color: inherit;
    font-weight: 400;
    scroll-snap-align: start;
}
.serit__halka {
    position: relative;
    display: grid;
    place-items: center;
    padding: 3px;
    border-radius: 50%;
    background: var(--gradyan-vurgu);
    transition: transform var(--hizli) var(--yay);
}
.serit__oge:active .serit__halka { transform: scale(.92); }
.serit__halka .avatar { border: 2px solid var(--c-zemin); }
.serit__ad {
    font-size: var(--fs-mikro);
    font-weight: 600;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.online-nokta {
    position: absolute;
    right: 2px;
    bottom: 2px;
    width: 13px;
    height: 13px;
    border: 2.5px solid var(--c-zemin);
    border-radius: 50%;
    background: var(--c-basari);
}

.sohbet-satiri {
    display: flex;
    align-items: center;
    gap: var(--bo-3);
    padding: var(--bo-3);
    border-radius: var(--k-buyuk);
    color: inherit;
    font-weight: 400;
    transition: background-color var(--hizli) var(--yumusak), transform var(--hizli) var(--yay);
}
.sohbet-satiri:hover  { background: var(--c-yuzey); }
.sohbet-satiri:active { transform: scale(.985); }

.sohbet-satiri__avatar { position: relative; display: grid; flex-shrink: 0; }
.sohbet-satiri__govde  { flex: 1; min-width: 0; }

.sohbet-satiri__ust {
    display: flex;
    align-items: baseline;
    gap: var(--bo-2);
}
.sohbet-satiri__ad {
    flex: 1;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sohbet-satiri__zaman { font-size: var(--fs-mikro); color: var(--c-metin-soluk); }

.sohbet-satiri__alt {
    display: flex;
    align-items: center;
    gap: var(--bo-2);
    margin-top: 1px;
}
.sohbet-satiri__onizleme {
    flex: 1;
    font-size: var(--fs-kucuk);
    color: var(--c-metin-soluk);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sohbet-satiri__onizleme--yeni { color: var(--c-metin); font-weight: 600; }

.sohbet-satiri__rozet {
    flex-shrink: 0;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: var(--k-tam);
    background: var(--c-vurgu);
    color: #fff;
    font-size: var(--fs-mikro);
    font-weight: 700;
    line-height: 20px;
    text-align: center;
}

/* --- 26. Sohbet ekranı --------------------------------------------------- */
.ekran--sohbet {
    display: grid;
    grid-template-rows: auto 1fr auto;
    height: 100dvh;
    padding: 0;
}
@media (min-width: 700px) {
    .ekran--sohbet { height: 100%; }
}

.sohbet-basi {
    display: flex;
    align-items: center;
    gap: var(--bo-2);
    padding: calc(var(--guvenli-ust) + var(--bo-2)) var(--bo-3) var(--bo-2);
    border-bottom: 1px solid var(--c-cizgi);
    background: color-mix(in srgb, var(--c-zemin) 92%, transparent);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
.sohbet-basi__kisi {
    display: flex;
    align-items: center;
    gap: var(--bo-2);
    color: inherit;
    font-weight: 400;
}
.sohbet-basi__ad { display: block; font-weight: 700; line-height: 1.2; }
.sohbet-basi__durum {
    display: block;
    font-size: var(--fs-mikro);
    color: var(--c-metin-soluk);
}
.sohbet-basi__durum--online { color: var(--c-basari); font-weight: 600; }

.sohbet-akis {
    display: flex;
    flex-direction: column;
    gap: var(--bo-1);
    min-height: 0;
    padding: var(--bo-4) var(--bo-4) var(--bo-3);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.sohbet-baslangic {
    display: grid;
    justify-items: center;
    gap: var(--bo-2);
    margin: auto;
    padding: var(--bo-5) var(--bo-3);
    text-align: center;
}

.sohbet-gun {
    align-self: center;
    margin: var(--bo-3) 0 var(--bo-2);
    padding: 3px 12px;
    border-radius: var(--k-tam);
    background: var(--c-zemin-alt);
    font-size: var(--fs-mikro);
    font-weight: 600;
    color: var(--c-metin-soluk);
}

.balon {
    position: relative;
    max-width: 78%;
    padding: var(--bo-3) var(--bo-4) calc(var(--bo-3) + 2px);
    border-radius: var(--k-buyuk) var(--k-buyuk) var(--k-buyuk) 6px;
    background: var(--c-vurgu-soluk);
    color: var(--c-metin);
    align-self: flex-start;
    word-break: break-word;
}
.balon--benim {
    align-self: flex-end;
    border-radius: var(--k-buyuk) var(--k-buyuk) 6px var(--k-buyuk);
    background: var(--gradyan-vurgu);
    color: #fff;
}
.balon--yeni { animation: balonGir var(--normal) var(--yay) both; }

@keyframes balonGir {
    from { opacity: 0; transform: translateY(8px) scale(.96); }
    to   { opacity: 1; transform: none; }
}

.balon__govde { display: block; }
.balon__saat {
    display: block;
    margin-top: 3px;
    font-size: 10px;
    color: var(--c-metin-soluk);
    text-align: right;
}
.balon--benim .balon__saat { color: rgba(255, 255, 255, .75); }

/* Son gönderdiğim mesaj okunduysa */
.balon--okundu::after {
    content: 'Okundu';
    position: absolute;
    right: 4px;
    bottom: -16px;
    font-size: 10px;
    font-weight: 600;
    color: var(--c-metin-soluk);
}

.sohbet-girdi {
    display: flex;
    align-items: flex-end;
    gap: var(--bo-2);
    padding: var(--bo-3) var(--bo-3) calc(var(--guvenli-alt) + var(--bo-3));
    border-top: 1px solid var(--c-cizgi);
    background: var(--c-zemin);
}
.sohbet-girdi__sarmal {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 0 var(--bo-4);
    background: var(--c-yuzey);
    border: 1.5px solid transparent;
    border-radius: var(--k-dev);
    box-shadow: var(--g-yumusak);
    transition: border-color var(--hizli) var(--yumusak);
}
.sohbet-girdi__sarmal:focus-within { border-color: var(--c-vurgu); }

.sohbet-girdi__alan {
    width: 100%;
    padding: 14px 0;
    border: 0;
    background: transparent;
    font: inherit;
    color: var(--c-metin);
    resize: none;
    max-height: 120px;
    line-height: 1.4;
}
.sohbet-girdi__alan:focus { outline: none; }
.sohbet-girdi__alan::placeholder { color: var(--c-metin-soluk); }

.sohbet-girdi__gonder {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--gradyan-vurgu);
    color: #fff;
    box-shadow: var(--g-vurgu);
    cursor: pointer;
    transition: transform var(--hizli) var(--yay), opacity var(--hizli) linear;
}
.sohbet-girdi__gonder svg { width: 22px; height: 22px; }
.sohbet-girdi__gonder:active:not(:disabled) { transform: scale(.9); }
.sohbet-girdi__gonder:disabled {
    background: var(--c-zemin-alt);
    color: var(--c-metin-soluk);
    box-shadow: none;
    cursor: not-allowed;
}

/* --- 27. Reklam alanları -------------------------------------------------- */
.reklam {
    position: relative;
    display: block;
    overflow: hidden;
    color: inherit;
    font-weight: 400;
    background: var(--c-yuzey);
    border-radius: var(--k-buyuk);
    box-shadow: var(--g-yumusak);
}
.reklam__gorsel { width: 100%; height: 100%; object-fit: cover; }
.reklam__govde  { display: block; padding: var(--bo-3) var(--bo-4); }

.reklam__etiket {
    display: inline-block;
    margin-bottom: 4px;
    padding: 1px 7px;
    border-radius: var(--k-tam);
    background: var(--c-zemin-alt);
    color: var(--c-metin-soluk);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.reklam__baslik { display: block; font-weight: 700; font-size: var(--fs-govde); }
.reklam__alt    { display: block; font-size: var(--fs-kucuk); color: var(--c-metin-soluk); }
.reklam__cta {
    display: inline-block;
    margin-top: var(--bo-2);
    padding: 6px 16px;
    border-radius: var(--k-tam);
    background: var(--c-vurgu);
    color: #fff;
    font-size: var(--fs-kucuk);
    font-weight: 700;
}

/* Deste içindeki reklam kartı, profil kartıyla aynı kutuyu paylaşır */
.kart-profil--reklam {
    display: flex;
    flex-direction: column;
    background: var(--c-yuzey);
}
.kart-profil--reklam .reklam__gorsel { flex: 1; min-height: 0; }
.kart-profil--reklam .reklam__govde  { padding: var(--bo-4); }

/* Sohbet listesindeki satır reklamı */
.reklam--chat_list_inline {
    display: flex;
    align-items: center;
    gap: var(--bo-3);
    padding: var(--bo-2);
}
.reklam--chat_list_inline .reklam__gorsel {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: var(--k-orta);
}
.reklam--chat_list_inline .reklam__govde { flex: 1; padding: 0; }

/* Beğeniler ızgarasındaki hücre */
.reklam--likes_grid {
    aspect-ratio: 3 / 4;
    display: flex;
    flex-direction: column;
}
.reklam--likes_grid .reklam__gorsel { flex: 1; min-height: 0; }
.reklam--likes_grid .reklam__govde  { padding: var(--bo-2) var(--bo-3); }

/* Profil detayındaki yatay şerit */
.reklam--profile_detail { margin-bottom: var(--bo-5); }
.reklam--profile_detail .reklam__gorsel { max-height: 160px; }

/* Alt sabit şerit */
.reklam--sticky_bottom {
    position: fixed;
    bottom: calc(var(--tab-y) + var(--guvenli-alt));
    left: 50%;
    transform: translateX(-50%);
    z-index: 39;
    display: flex;
    align-items: center;
    gap: var(--bo-3);
    width: min(var(--kabuk-en), 100%);
    padding: var(--bo-2) var(--bo-3);
    border-radius: 0;
    border-top: 1px solid var(--c-cizgi);
    box-shadow: 0 -4px 16px rgba(43, 27, 32, .06);
}
.reklam--sticky_bottom .reklam__gorsel {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: var(--k-kucuk);
}
.reklam--sticky_bottom .reklam__govde { flex: 1; padding: 0; }
.reklam--sticky_bottom .reklam__alt   { display: none; }

/* Eşleşme sonrası tam ekran */
.arada-perde {
    position: fixed;
    inset: 0;
    z-index: 84;
    display: grid;
    place-items: center;
    padding: var(--bo-5);
    background: color-mix(in srgb, var(--c-zemin) 96%, transparent);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--normal) var(--yumusak);
}
.arada-perde--acik { opacity: 1; pointer-events: auto; }
.arada-perde[hidden] { display: none; }

.arada {
    display: grid;
    gap: var(--bo-4);
    width: min(var(--kabuk-en), 100%);
}
.arada .reklam--match_interstitial { box-shadow: var(--g-yuksek); }
.arada .reklam__gorsel { max-height: 60dvh; }

/* --- 28. Yönetim paneli --------------------------------------------------- */
.ekran--yonetim { padding-bottom: calc(var(--guvenli-alt) + var(--bo-6)); }

.yonetim-nav {
    display: flex;
    gap: var(--bo-2);
    overflow-x: auto;
    margin: 0 calc(-1 * var(--bo-4)) var(--bo-4);
    padding: 0 var(--bo-4) var(--bo-2);
    scrollbar-width: none;
}
.yonetim-nav::-webkit-scrollbar { display: none; }

.yonetim-nav__oge {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    padding: var(--bo-2) var(--bo-3);
    border-radius: var(--k-tam);
    background: var(--c-yuzey);
    color: var(--c-metin-soluk);
    font-size: var(--fs-kucuk);
    font-weight: 600;
    box-shadow: var(--g-yumusak);
}
.yonetim-nav__oge svg { width: 17px; height: 17px; }
.yonetim-nav__oge--aktif { background: var(--c-vurgu); color: #fff; box-shadow: var(--g-vurgu); }

.yonetim-nav__rozet {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--k-tam);
    background: var(--c-hata);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}
.yonetim-nav__oge--aktif .yonetim-nav__rozet { background: rgba(255, 255, 255, .28); }

.istatistik-izgara {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--bo-2);
    margin-bottom: var(--bo-4);
}
.istatistik {
    padding: var(--bo-3);
    border-radius: var(--k-orta);
    background: var(--c-yuzey);
    box-shadow: var(--g-yumusak);
}
.istatistik__deger {
    display: block;
    font-family: var(--font-baslik);
    font-size: var(--fs-buyuk);
    font-weight: 700;
    color: var(--c-vurgu);
    line-height: 1.1;
}
.istatistik__etiket { display: block; font-size: var(--fs-kucuk); font-weight: 600; }
.istatistik__alt    { display: block; font-size: var(--fs-mikro); color: var(--c-metin-soluk); }

.yonetim-bolum { margin-bottom: var(--bo-5); }
.yonetim-bolum h3 { margin-bottom: var(--bo-3); }

.yonetim-kart {
    padding: var(--bo-3) var(--bo-4);
    border-radius: var(--k-buyuk);
    background: var(--c-yuzey);
    box-shadow: var(--g-yumusak);
}
.yonetim-kart--vurgulu { border-left: 4px solid var(--c-vurgu); }

.yonetim-kart__ust {
    display: flex;
    align-items: center;
    gap: var(--bo-2);
    margin-bottom: var(--bo-1);
}
.yonetim-kart__ad { flex: 1; font-weight: 700; }

.yonetim-kart__bilgi {
    display: grid;
    gap: 2px;
    font-size: var(--fs-mikro);
    color: var(--c-metin-soluk);
    margin-bottom: var(--bo-2);
}

.yonetim-kart__eylemler {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--bo-2);
}
.yonetim-kart__eylemler .btn { min-height: 38px; }
/* Formlar düzeni bölmesin; düğmeler doğrudan satıra dizilsin */
.yonetim-kart__eylemler form { display: contents; }

/* Geri alınamayan işlem diğerlerinden ayrı dursun */
.btn--tehlike { color: var(--c-hata); }
.btn--tehlike:hover { background: color-mix(in srgb, var(--c-hata) 12%, transparent); }

.etiket {
    padding: 3px 10px;
    border-radius: var(--k-tam);
    background: var(--c-zemin-alt);
    color: var(--c-metin-soluk);
    font-size: var(--fs-mikro);
    font-weight: 700;
    white-space: nowrap;
}
.etiket--active         { background: color-mix(in srgb, var(--c-basari) 18%, transparent); color: var(--c-basari); }
.etiket--pending_review { background: color-mix(in srgb, var(--c-uyari) 22%, transparent); color: #9a6d18; }
.etiket--pending_email  { background: var(--c-zemin-alt); }
.etiket--suspended,
.etiket--banned         { background: color-mix(in srgb, var(--c-hata) 16%, transparent); color: var(--c-hata); }

.yonetim-grup {
    margin: 0 0 var(--bo-4);
    padding: var(--bo-4);
    border: 1px solid var(--c-cizgi);
    border-radius: var(--k-buyuk);
}
.yonetim-grup legend {
    padding: 0 var(--bo-2);
    font-weight: 700;
    font-size: var(--fs-kucuk);
}

.ikili {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--bo-2);
}

.reklam-bos {
    padding: var(--bo-4);
    border: 2px dashed var(--c-cizgi);
    border-radius: var(--k-orta);
    text-align: center;
    font-size: var(--fs-kucuk);
    color: var(--c-metin-soluk);
}

.reklam-onizleme {
    width: 100%;
    max-height: 120px;
    object-fit: cover;
    border-radius: var(--k-orta);
    margin-bottom: var(--bo-2);
}

select.alan__girdi { appearance: none; cursor: pointer; }

/* --- 29. Hareket tercihi ------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}