/* =====================================================================
   ARKADAS ILAN — "Yumusak Kagit" tasarim sistemi
   Aydinlik zemin, pastel ana renkler, yuvarlak formlar, yumusak golge.
   Mobile-first: temel stiller mobil icin, min-width ile buyutulur.
   ===================================================================== */

/* ---------------------------------------------------------------
   1. Tasarim degiskenleri
   --------------------------------------------------------------- */
:root {
    /* Renkler */
    --renk-zemin:          #fbf9f6;
    --renk-zemin-alt:      #f4efe8;
    --renk-yuzey:          #ffffff;
    --renk-yuzey-sicak:    #fdf8f4;

    /* Pastel tonlar yalnizca ZEMIN olarak kullanilir.
       Metin ve dolgulu butonlar icin ayni renk ailesinin koyu tonlari
       kullanilir; tum ciftler WCAG AA (>= 4.5) olcumuyle dogrulanmistir. */
    --renk-birincil:       #f2a6a0;   /* pastel zemin */
    --renk-birincil-acik:  #fbdedb;
    --renk-birincil-koyu:  #ad4b44;   /* baglanti + birincil buton — beyaz metinle 5.43 */
    --renk-birincil-derin: #963f38;   /* pastel zemin uzerindeki metin — 5.41 */

    --renk-ikincil:        #a8c8d8;
    --renk-ikincil-acik:   #e2eff5;
    --renk-ikincil-koyu:   #456f83;   /* beyaz metinle 5.45 */
    --renk-ikincil-derin:  #386070;   /* uzerine gelme durumu — 6.83 */

    --renk-vurgu:          #c9b6e4;
    --renk-vurgu-acik:     #efe8f8;

    --renk-metin:          #2e2a28;
    --renk-metin-orta:     #5c534d;
    --renk-metin-soluk:    #726761;   /* zemin-alt uzerinde bile 4.80 */
    --renk-cizgi:          #ece4da;
    --renk-cizgi-koyu:     #ddd2c5;

    --renk-basari:         #37663f;
    --renk-basari-zemin:   #e6f2e8;
    --renk-hata:           #a13a33;
    --renk-hata-zemin:     #fbe7e5;
    --renk-uyari:          #7a5710;
    --renk-uyari-zemin:    #fbf0da;
    --renk-bilgi:          #35566a;
    --renk-bilgi-zemin:    #e2eff5;

    /* Tipografi */
    --yazi-govde: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    --olcek-kucuk:  clamp(.78rem, .76rem + .1vw, .84rem);
    --olcek-normal: clamp(.94rem, .9rem + .2vw, 1rem);
    --olcek-orta:   clamp(1.05rem, 1rem + .3vw, 1.18rem);
    --olcek-buyuk:  clamp(1.3rem, 1.15rem + .7vw, 1.7rem);
    --olcek-dev:    clamp(1.5rem, 1.25rem + 2.5vw, 2.75rem);

    /* Bosluk */
    --bosluk-xs: clamp(.35rem, .3rem + .2vw, .5rem);
    --bosluk-s:  clamp(.6rem, .5rem + .3vw, .85rem);
    --bosluk-m:  clamp(1rem, .85rem + .6vw, 1.5rem);
    --bosluk-l:  clamp(1.6rem, 1.2rem + 1.6vw, 2.75rem);
    --bosluk-xl: clamp(2.5rem, 1.8rem + 3vw, 5rem);

    /* Form */
    --yuvarlak:        1.25rem;
    --yuvarlak-kucuk:  .7rem;
    --yuvarlak-tam:    999px;

    --golge-yumusak: 0 1px 2px rgb(46 42 40 / .04), 0 6px 20px rgb(46 42 40 / .06);
    --golge-kart:    0 1px 2px rgb(46 42 40 / .05), 0 12px 34px rgb(46 42 40 / .08);
    --golge-tabbar:  0 -2px 24px rgb(46 42 40 / .1);

    --gecis: 180ms cubic-bezier(.4, 0, .2, 1);

    --sinir-genislik: 1180px;
    --tabbar-yukseklik: 4.25rem;
}

/* ---------------------------------------------------------------
   2. Sifirlama ve temel
   --------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
}

/* "hidden" niteligi her zaman gizlesin.
   Tarayicinin varsayilan [hidden]{display:none} kurali, sonradan gelen
   herhangi bir display tanimiyla eziliyor: ornegin .buton{display:inline-flex}
   yuzunden gizlenmesi gereken dugme bos bir kutu olarak gorunuyordu.
   Secici bilerek iki kez yazildi — ozgullugu artirir, !important gerekmez. */
[hidden][hidden] {
    display: none;
}

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

body {
    font-family: var(--yazi-govde);
    font-size: var(--olcek-normal);
    line-height: 1.65;
    color: var(--renk-metin);
    background-color: var(--renk-zemin);
    background-image:
        radial-gradient(ellipse 60% 40% at 15% 0%, rgb(242 166 160 / .16), transparent 60%),
        radial-gradient(ellipse 50% 40% at 90% 5%, rgb(201 182 228 / .16), transparent 60%);
    background-repeat: no-repeat;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    min-height: 100dvh;
    /* Cift dokunusla yakinlastirmayi kapatir ve dokunus gecikmesini kaldirir */
    touch-action: manipulation;
    /* Sayfa sonunda lastik bant efekti olmasin — uygulama hissi */
    overscroll-behavior-y: none;
}

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

img {
    height: auto;
}

input,
button,
select,
textarea {
    font: inherit;
    color: inherit;
}

a {
    color: var(--renk-birincil-koyu);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

:focus-visible {
    outline: 3px solid var(--renk-ikincil-koyu);
    outline-offset: 2px;
    border-radius: var(--yuvarlak-kucuk);
}

/* Klavye kullanicilari icin icerige atlama baglantisi */
.atla {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    padding: var(--bosluk-s) var(--bosluk-m);
    background: var(--renk-metin);
    color: #fff;
    border-radius: 0 0 var(--yuvarlak-kucuk) 0;
}

.atla:focus {
    left: 0;
}

/* ---------------------------------------------------------------
   3. Tipografi
   --------------------------------------------------------------- */
h1, h2, h3, h4 {
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -.02em;
    text-wrap: balance;
}

p {
    text-wrap: pretty;
}

.etiket {
    display: inline-block;
    font-size: var(--olcek-kucuk);
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--renk-birincil-derin);
    background: var(--renk-birincil-acik);
    padding: .3rem .8rem;
    border-radius: var(--yuvarlak-tam);
}

.vurgulu {
    background: linear-gradient(180deg, transparent 62%, var(--renk-vurgu-acik) 62%);
    padding-inline: .1em;
}

.bag {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: var(--olcek-normal);
    font-weight: 600;
    color: var(--renk-metin-orta);
    transition: color var(--gecis), gap var(--gecis);
}

.bag:hover {
    color: var(--renk-birincil-koyu);
    gap: .6rem;
    text-decoration: none;
}

/* ---------------------------------------------------------------
   4. Duzen
   --------------------------------------------------------------- */
.sinir {
    width: 100%;
    max-width: var(--sinir-genislik);
    margin-inline: auto;
    padding-inline: var(--bosluk-m);
}

.ana {
    display: block;
    padding-bottom: var(--bosluk-xl);
}

.govde--tabbarli .ana {
    padding-bottom: calc(var(--tabbar-yukseklik) + var(--bosluk-l) + env(safe-area-inset-bottom, 0px));
}

/* Alt bilgisiz sayfalarda (vitrin) icerigin altinda ayirici bir bolum yok;
   tabbar payi disindaki fazla bosluk sayfayi gereksizce kaydirilabilir yapar */
.govde--altbilgisiz .ana {
    padding-bottom: calc(var(--tabbar-yukseklik) + env(safe-area-inset-bottom, 0px));
}

/* ---------------------------------------------------------------
   Sabit ekran modu — sayfa hicbir kosulda kaymaz.

   Sinifi main.js ekler; yalnizca betik calisirken ve tam ekran bir
   sayfadayken (vitrin) devreye girer. Betik yoksa sayfa normal akar
   ve kaydirilabilir kalir.

   Yukseklik hesabi tarayiciya birakilir: govde 100dvh'lik bir flex
   sutunudur, ustbar kendi boyunu alir, kalan her sey icerige gider.
   "100dvh eksi su kadar rem" gibi bir tahmin, ustbar yuksekligi
   ortama gore degistiginde tasma uretiyordu.
   --------------------------------------------------------------- */
.govde--sabit {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.govde--sabit .ana,
.govde--sabit .vitrin {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    /* min-height olmadan flex cocugu icerigi kadar buyur ve tasar */
    min-height: 0;
}

.bolum {
    margin-top: var(--bosluk-xl);
}

.bolum__basi {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--bosluk-s);
    margin-bottom: var(--bosluk-m);
}

.bolum__baslik {
    font-size: var(--olcek-buyuk);
}

.bolum--kutu {
    background: var(--renk-yuzey);
    border: 1px solid var(--renk-cizgi);
    border-radius: var(--yuvarlak);
    padding: var(--bosluk-l);
    box-shadow: var(--golge-yumusak);
}

/* ---------------------------------------------------------------
   5. Ust bar
   --------------------------------------------------------------- */
.ustbar {
    position: sticky;
    top: 0;
    z-index: 40;
    background: rgb(251 249 246 / .82);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--renk-cizgi);
}

.ustbar__ic {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--bosluk-m);
    min-height: 3.75rem;
}

.marka {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-weight: 800;
    font-size: var(--olcek-orta);
    color: var(--renk-metin);
    letter-spacing: -.03em;
}

.marka:hover {
    text-decoration: none;
}

.marka__isaret {
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 45% 55% 52% 48% / 52% 48% 55% 45%;
    background: linear-gradient(135deg, var(--renk-birincil), var(--renk-vurgu) 60%, var(--renk-ikincil));
    flex-shrink: 0;
}

.ustbar__menu,
.ustbar__eylem {
    display: none;
}

.ustbar__baglanti {
    position: relative;
    padding: .35rem 0;
    font-weight: 600;
    color: var(--renk-metin-orta);
    transition: color var(--gecis);
}

.ustbar__baglanti:hover {
    color: var(--renk-metin);
    text-decoration: none;
}

.ustbar__baglanti::after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: 0;
    height: 2px;
    border-radius: 2px;
    background: var(--renk-birincil);
    transition: right var(--gecis);
}

.ustbar__baglanti:hover::after,
.ustbar__baglanti--aktif::after {
    right: 0;
}

.ustbar__baglanti--aktif {
    color: var(--renk-metin);
}

/* ---------------------------------------------------------------
   6. Alt gezinme cubugu (mobil "uygulama" hissi)
   --------------------------------------------------------------- */
.tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    gap: .15rem;
    padding: .4rem .4rem calc(.4rem + env(safe-area-inset-bottom, 0px));
    background: rgb(255 255 255 / .92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid var(--renk-cizgi);
    box-shadow: var(--golge-tabbar);
}

.tabbar__oge {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .15rem;
    padding: .35rem .2rem;
    border-radius: var(--yuvarlak-kucuk);
    color: var(--renk-metin-soluk);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: -.01em;
    transition: color var(--gecis), background-color var(--gecis);
    -webkit-tap-highlight-color: transparent;
}

.tabbar__oge:hover {
    text-decoration: none;
}

.tabbar__simge {
    position: relative;
    display: grid;
    place-items: center;
    width: 2.35rem;
    height: 1.85rem;
    border-radius: var(--yuvarlak-tam);
    transition: background-color var(--gecis), transform var(--gecis);
}

.tabbar__rozet {
    position: absolute;
    top: -.1rem;
    right: .15rem;
    min-width: 1.05rem;
    padding: 0 .25rem;
    border-radius: var(--yuvarlak-tam);
    background: var(--renk-birincil-koyu);
    color: #fff;
    font-size: .6rem;
    font-weight: 700;
    line-height: 1.05rem;
    text-align: center;
}

.tabbar__oge--aktif {
    color: var(--renk-birincil-koyu);
}

.tabbar__oge--aktif .tabbar__simge {
    background: var(--renk-birincil-acik);
    transform: translateY(-1px);
}

.tabbar__oge--vurgu .tabbar__simge {
    background: linear-gradient(135deg, var(--renk-birincil), var(--renk-vurgu));
    color: var(--renk-metin);
}

.tabbar__oge--vurgu.tabbar__oge--aktif .tabbar__simge {
    background: linear-gradient(135deg, var(--renk-birincil), var(--renk-vurgu));
}

.tabbar__etiket {
    white-space: nowrap;
}

/* ---------------------------------------------------------------
   7. Butonlar
   --------------------------------------------------------------- */
.buton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .6rem 1rem;
    border: 1px solid transparent;
    border-radius: var(--yuvarlak-tam);
    font-size: var(--olcek-kucuk);
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: transform var(--gecis), box-shadow var(--gecis), background-color var(--gecis), border-color var(--gecis);
    -webkit-tap-highlight-color: transparent;
}

.buton:hover {
    text-decoration: none;
    transform: translateY(-1px);
}

.buton:active {
    transform: translateY(0);
}

/* Dolgulu butonlarda beyaz metin kullanilir — pastel zemin uzerinde koyu
   metin olcumde gecse de gorsel olarak soluk kaliyordu. */
.buton--birincil {
    background: var(--renk-birincil-koyu);
    color: #fff;
    box-shadow: 0 4px 14px rgb(173 75 68 / .32);
}

.buton--birincil:hover {
    background: var(--renk-birincil-derin);
    box-shadow: 0 6px 20px rgb(173 75 68 / .42);
}

.buton--ikincil {
    background: var(--renk-ikincil-koyu);
    color: #fff;
    box-shadow: 0 4px 14px rgb(69 111 131 / .3);
}

.buton--ikincil:hover {
    background: var(--renk-ikincil-derin);
}

.buton--hayalet {
    background: var(--renk-yuzey);
    border-color: var(--renk-cizgi-koyu);
    color: var(--renk-metin);
}

.buton--hayalet:hover {
    background: var(--renk-yuzey-sicak);
    border-color: var(--renk-birincil-koyu);
}

.buton--sade {
    background: transparent;
    color: var(--renk-metin-orta);
    padding-inline: .5rem;
}

.buton--sade:hover {
    background: var(--renk-zemin-alt);
    color: var(--renk-metin);
}

.buton--tehlike {
    background: var(--renk-yuzey);
    color: var(--renk-hata);
    border-color: rgb(161 58 51 / .35);
}

.buton--tehlike:hover {
    background: var(--renk-hata-zemin);
    border-color: var(--renk-hata);
}

.buton--kucuk {
    padding: .5rem 1rem;
    font-size: var(--olcek-kucuk);
}

.buton--tam {
    width: 100%;
}

.buton[disabled],
.buton[aria-disabled="true"] {
    opacity: .55;
    cursor: not-allowed;
    transform: none;
}

/* ---------------------------------------------------------------
   8. Form alanlari
   --------------------------------------------------------------- */
.alan {
    display: block;
    margin-bottom: var(--bosluk-m);
}

.alan__etiket {
    display: block;
    margin-bottom: .4rem;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--renk-metin);
}

/* Alanlar sayfanin sicak zeminiyle ayni ailede durur; kutu cizgisi yerine
   yumusak bir dolgu kullanilir. Odakta zemin beyaza doner ve marka rengiyle
   ince bir halka belirir — "aktif alan" burasi oldugu net anlasilir. */
.alan__girdi {
    width: 100%;
    /* Dokunmatikte rahat hedef: 44px'in altina inmez.
       Tek satirlik alanlarda yukseklik asagida sabitlenir — tarih alani
       kendi ic yerlesimi yuzunden aksi halde birkac piksel uzun kaliyor. */
    min-height: 3rem;
    padding: .7rem .95rem;
    background: var(--renk-yuzey-sicak);
    border: 1px solid transparent;
    border-bottom-color: var(--renk-cizgi-koyu);
    border-radius: var(--yuvarlak-kucuk);
    font: inherit;
    /* Tarih alani kendi satir yuksekligini dayatiyor; hepsinde ayni deger
       kullanilarak yan yana duran alanlarin hizasi korunur */
    line-height: 1.5;
    color: var(--renk-metin);
    transition: background-color var(--gecis), border-color var(--gecis), box-shadow var(--gecis);
}

.alan__girdi:hover:not(:focus) {
    border-bottom-color: var(--renk-metin-soluk);
}

.alan__girdi:focus {
    outline: none;
    background: var(--renk-yuzey);
    border-color: var(--renk-birincil);
    box-shadow: 0 0 0 3px var(--renk-birincil-acik);
}

.alan__girdi::placeholder {
    color: var(--renk-metin-soluk);
    opacity: .85;
}

.alan__girdi:disabled {
    opacity: .6;
    cursor: not-allowed;
}

/* Tek satirlik alanlarin tamami ayni yukseklikte durur; tarayicilarin
   input turlerine gore degisen ic yerlesimi boylece disari yansimaz */
input.alan__girdi,
select.alan__girdi {
    height: 3rem;
}

textarea.alan__girdi {
    height: auto;
    min-height: 9rem;
    resize: vertical;
    line-height: 1.6;
}

/* Ok, ucgen hilesi yerine tek parca SVG — her olcekte net gorunur */
select.alan__girdi {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 2.6rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235c534d' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .95rem center;
    cursor: pointer;
}

/* Tarih alani — iOS duzeltmesi.
   Safari, input[type=date] ogesine kendi ic yerlesimini uygular; yukseklik
   padding'le hesaplanmadigi icin alan komsu alanlarin uzerine binebiliyor.
   appearance sifirlanip icerik yuksekligi acikca verilerek engellenir. */
input[type="date"].alan__girdi,
input[type="time"].alan__girdi {
    appearance: none;
    -webkit-appearance: none;
    display: block;
    /* Safari icerigi dikeyde ortalamaz; satir yuksekligi sabitlenir */
    line-height: 1.5;
}

/* Safari icerigi ortalar ve saga yaslar; sola alinip kendi bosluklari
   sifirlanir. Yukseklik disaridaki min-height'tan gelir — buraya ayrica
   min-height verilirse alan komsularindan birkac piksel uzun olur. */
input[type="date"].alan__girdi::-webkit-date-and-time-value {
    margin: 0;
    text-align: left;
}

input[type="date"].alan__girdi::-webkit-datetime-edit {
    padding: 0;
    line-height: 1.5;
}

input[type="date"].alan__girdi::-webkit-calendar-picker-indicator {
    opacity: .55;
    cursor: pointer;
    transition: opacity var(--gecis);
}

input[type="date"].alan__girdi::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

/* Sayi alanlarindaki artir/azalt oklari duzeni bozuyor */
input[type="number"].alan__girdi {
    appearance: textfield;
    -webkit-appearance: textfield;
}

input[type="number"].alan__girdi::-webkit-outer-spin-button,
input[type="number"].alan__girdi::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Aramada cikan yerlesik temizleme dugmesi */
input[type="search"].alan__girdi {
    appearance: none;
    -webkit-appearance: none;
}

.alan--ikili {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--bosluk-s);
}

.alan__yardim {
    display: block;
    margin-top: .35rem;
    margin-bottom: var(--bosluk-m);
    font-size: var(--olcek-kucuk);
    color: var(--renk-metin-soluk);
}

.alan__hata {
    display: block;
    margin-top: .35rem;
    font-size: var(--olcek-kucuk);
    font-weight: 600;
    color: var(--renk-hata);
}

.alan__girdi[aria-invalid="true"] {
    border-color: var(--renk-hata);
}

/* Bal kupu — bot tuzagi. Ekranda gorunmez ama ekran okuyucudan da gizlenir. */
.tuzak {
    position: absolute !important;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ---------------------------------------------------------------
   9. Kahraman bolumu
   --------------------------------------------------------------- */
.kahraman {
    padding-top: var(--bosluk-l);
}

.kahraman__ic {
    display: grid;
    gap: var(--bosluk-l);
}

.kahraman__baslik {
    font-size: var(--olcek-dev);
    font-weight: 800;
    margin-top: var(--bosluk-s);
}

.kahraman__aciklama {
    margin-top: var(--bosluk-m);
    font-size: var(--olcek-orta);
    color: var(--renk-metin-orta);
    max-width: 46ch;
}

.kahraman__eylem {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bosluk-s);
    margin-top: var(--bosluk-m);
}

.kahraman__kart {
    position: relative;
}

.hizli-arama {
    background: var(--renk-yuzey);
    border: 1px solid var(--renk-cizgi);
    border-radius: var(--yuvarlak);
    padding: var(--bosluk-m);
    box-shadow: var(--golge-kart);
}

.hizli-arama__baslik {
    font-size: var(--olcek-orta);
    margin-bottom: var(--bosluk-m);
}

/* ---------------------------------------------------------------
   10. Cip listesi (sehirler)
   --------------------------------------------------------------- */
.cip-liste {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bosluk-xs);
}

/* Cip listesinden sonra icerik geliyorsa araya nefes payi birak.
   Bolumun son ogesiyse ek bosluk verilmez — bolum zaten aralikli. */
.cip-liste:not(:last-child) {
    margin-bottom: var(--bosluk-m);
}

/* Yatay kaydirilan serit (ana sayfadaki sehir listesi).
   Negatif margin seridi bolumun ic bosluguna kadar tasirir: son cip
   ekran kenarinda kesilir ve "devami var" ipucu verir. Ayni payi
   padding olarak geri verdigimiz icin ilk cip yerinde kalir. */
.cip-liste--kaydirmali {
    flex-wrap: nowrap;
    overflow-x: auto;
    /* Serit sonunda tasan hareket sayfayi yatayda kaydirmasin */
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    margin-inline: calc(-1 * var(--bosluk-m));
    padding-inline: var(--bosluk-m);
    padding-bottom: .4rem;
    /* Snap noktasi padding'i saymadigi icin serit acilista kendiliginden
       kayiyor ve ilk cip baslikla hizasiz kaliyordu */
    scroll-padding-inline: var(--bosluk-m);
    scrollbar-width: thin;
    scrollbar-color: var(--renk-cizgi-koyu) transparent;
}

/* Cipler daralmasin — flex varsayilani metni sikistiriyordu */
.cip-liste--kaydirmali .cip {
    flex: 0 0 auto;
    scroll-snap-align: start;
}

.cip-liste--kaydirmali::-webkit-scrollbar {
    height: 5px;
}

.cip-liste--kaydirmali::-webkit-scrollbar-track {
    background: transparent;
}

.cip-liste--kaydirmali::-webkit-scrollbar-thumb {
    border-radius: var(--yuvarlak-tam);
    background: var(--renk-cizgi-koyu);
}

.cip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .5rem .95rem;
    background: var(--renk-yuzey);
    border: 1px solid var(--renk-cizgi);
    border-radius: var(--yuvarlak-tam);
    font-size: var(--olcek-kucuk);
    font-weight: 600;
    color: var(--renk-metin-orta);
    transition: border-color var(--gecis), color var(--gecis), background-color var(--gecis);
}

.cip:hover {
    background: var(--renk-birincil-acik);
    border-color: var(--renk-birincil);
    color: var(--renk-birincil-koyu);
    text-decoration: none;
}

.cip--aktif {
    background: var(--renk-birincil-koyu);
    border-color: var(--renk-birincil-koyu);
    color: #fff;
}

/* ---------------------------------------------------------------
   11. Adimlar
   --------------------------------------------------------------- */
.adimlar {
    list-style: none;
    padding: 0;
    display: grid;
    gap: var(--bosluk-m);
    margin-top: var(--bosluk-m);
}

.adim__no {
    display: grid;
    place-items: center;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: var(--yuvarlak-tam);
    background: var(--renk-vurgu-acik);
    color: var(--renk-metin);
    font-weight: 800;
    margin-bottom: .6rem;
}

.adim__baslik {
    font-size: var(--olcek-orta);
    margin-bottom: .3rem;
}

.adim p {
    color: var(--renk-metin-orta);
}

/* ---------------------------------------------------------------
   12. Bos durum
   --------------------------------------------------------------- */
.bos-durum {
    display: grid;
    justify-items: center;
    gap: var(--bosluk-s);
    text-align: center;
    padding: var(--bosluk-l) var(--bosluk-m);
    background: var(--renk-yuzey);
    border: 1px dashed var(--renk-cizgi-koyu);
    border-radius: var(--yuvarlak);
    color: var(--renk-metin-orta);
}

.bos-durum--buyuk {
    padding-block: var(--bosluk-xl);
}

.bos-durum__baslik {
    font-size: var(--olcek-buyuk);
    font-weight: 700;
    color: var(--renk-metin);
}

.bos-durum svg {
    color: var(--renk-birincil);
}

/* ---------------------------------------------------------------
   13. Bildirimler
   --------------------------------------------------------------- */
.bildirimler {
    display: grid;
    gap: var(--bosluk-xs);
    padding-top: var(--bosluk-m);
}

.bildirim {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .85rem 1rem;
    border-radius: var(--yuvarlak-kucuk);
    border: 1px solid transparent;
    font-weight: 500;
    animation: bildirim-gir 260ms cubic-bezier(.2, .8, .3, 1);
}

.bildirim p {
    flex: 1;
}

.bildirim__kapat {
    background: none;
    border: 0;
    padding: .15rem;
    cursor: pointer;
    color: inherit;
    opacity: .6;
    border-radius: var(--yuvarlak-tam);
}

.bildirim__kapat:hover {
    opacity: 1;
}

.bildirim--basari { background: var(--renk-basari-zemin); color: var(--renk-basari); border-color: rgb(79 138 91 / .2); }
.bildirim--hata   { background: var(--renk-hata-zemin);   color: var(--renk-hata);   border-color: rgb(192 74 66 / .2); }
.bildirim--uyari  { background: var(--renk-uyari-zemin);  color: var(--renk-uyari);  border-color: rgb(168 121 27 / .2); }
.bildirim--bilgi  { background: var(--renk-bilgi-zemin);  color: var(--renk-bilgi);  border-color: rgb(79 125 146 / .2); }

@keyframes bildirim-gir {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------
   14. Reklam alani
   --------------------------------------------------------------- */
.reklam {
    display: grid;
    justify-items: center;
    gap: .3rem;
    margin-block: var(--bosluk-l);
}

.reklam__etiket {
    font-size: .65rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--renk-metin-soluk);
}

.reklam__kutu {
    width: 100%;
    max-width: 728px;
    overflow: hidden;
}

/* Yer tutucu — gercek reklam kodu girilince bu kutu hic ciktilanmaz */
.demo-reklam {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: .25rem;
    min-height: 90px;
    padding: var(--bosluk-s) var(--bosluk-m);
    background:
        repeating-linear-gradient(
            135deg,
            var(--renk-zemin-alt) 0 12px,
            var(--renk-yuzey-sicak) 12px 24px
        );
    border: 1px dashed var(--renk-cizgi-koyu);
    border-radius: var(--yuvarlak-kucuk);
    text-align: center;
}

.demo-reklam__rozet {
    padding: .1rem .5rem;
    border-radius: var(--yuvarlak-tam);
    background: var(--renk-vurgu-acik);
    color: var(--renk-metin-orta);
    font-size: .62rem;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.demo-reklam__baslik {
    font-weight: 600;
    color: var(--renk-metin);
}

.demo-reklam__metin {
    font-size: var(--olcek-kucuk);
    color: var(--renk-metin-soluk);
}

/* ---------------------------------------------------------------
   15. Alt bilgi
   --------------------------------------------------------------- */
.altbilgi {
    margin-top: var(--bosluk-xl);
    padding-top: var(--bosluk-l);
    background: var(--renk-zemin-alt);
    border-top: 1px solid var(--renk-cizgi);
}

.govde--tabbarli .altbilgi {
    padding-bottom: calc(var(--tabbar-yukseklik) + env(safe-area-inset-bottom, 0px));
}

/* Sutun sayisi kirilim noktalarinda ACIK olarak tanimlanir.
   repeat(auto-fit, minmax(..., 1fr)) baska esnek bir izle (1.4fr) birlikte
   kullanilamaz — tarayici tum bildirimi gecersiz sayar ve sutunlar alt alta kalir. */
.altbilgi__ic {
    display: grid;
    gap: var(--bosluk-l);
    padding-bottom: var(--bosluk-l);
}

.altbilgi__aciklama {
    margin-top: .6rem;
    color: var(--renk-metin-orta);
    font-size: var(--olcek-kucuk);
    max-width: 40ch;
}

.altbilgi__sutun {
    display: grid;
    gap: .45rem;
    align-content: start;
}

.altbilgi__baslik {
    font-size: var(--olcek-kucuk);
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--renk-metin-soluk);
    margin-bottom: .2rem;
}

.altbilgi__sutun a {
    color: var(--renk-metin-orta);
    font-size: var(--olcek-kucuk);
    font-weight: 500;
}

.altbilgi__sutun a:hover {
    color: var(--renk-birincil-koyu);
}

.altbilgi__telif {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--bosluk-xs);
    padding-block: var(--bosluk-m);
    border-top: 1px solid var(--renk-cizgi);
    font-size: var(--olcek-kucuk);
    color: var(--renk-metin-soluk);
}

/* ---------------------------------------------------------------
   15b. Kimlik sayfalari (giris / kayit / sifre)
   --------------------------------------------------------------- */
.kimlik {
    display: grid;
    place-items: center;
    padding: var(--bosluk-l) var(--bosluk-m) 0;
}

.kimlik__kart {
    width: 100%;
    max-width: 27rem;
    background: var(--renk-yuzey);
    border: 1px solid var(--renk-cizgi);
    border-radius: var(--yuvarlak);
    padding: var(--bosluk-l);
    box-shadow: var(--golge-kart);
}

.kimlik__simge {
    display: grid;
    place-items: center;
    width: 3.4rem;
    height: 3.4rem;
    margin-bottom: var(--bosluk-s);
    border-radius: var(--yuvarlak-tam);
    background: var(--renk-birincil-acik);
    color: var(--renk-birincil-derin);
}

.kimlik__baslik {
    font-size: var(--olcek-buyuk);
    margin-top: var(--bosluk-xs);
}

.kimlik__aciklama {
    margin: .5rem 0 var(--bosluk-m);
    color: var(--renk-metin-orta);
    font-size: var(--olcek-kucuk);
}

.kimlik__alt {
    margin-top: var(--bosluk-s);
    text-align: center;
    font-size: var(--olcek-kucuk);
    color: var(--renk-metin-orta);
}

/* Onay kutusu */
.onay {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    font-size: var(--olcek-kucuk);
    line-height: 1.55;
    color: var(--renk-metin-orta);
	margin-bottom: var(--bosluk-s);
    cursor: pointer;
}

/* Isaret kutusu ve radyo dugmesi tarayici varsayilanindan cikarilir:
   varsayilan gorunum her isletim sisteminde farkli ve sitenin yumusak
   diliyle uyusmuyor. Onay isareti SVG olarak zemine gomulur. */
.onay input[type="checkbox"],
.onay input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    flex-shrink: 0;
    width: 1.2rem;
    height: 1.2rem;
    margin: .15rem 0 0;
    background: var(--renk-yuzey);
    border: 1.5px solid var(--renk-cizgi-koyu);
    border-radius: .38rem;
    cursor: pointer;
    transition: background-color var(--gecis), border-color var(--gecis);
}

.onay input[type="radio"] {
    border-radius: var(--yuvarlak-tam);
}

.onay input[type="checkbox"]:hover,
.onay input[type="radio"]:hover {
    border-color: var(--renk-birincil);
}

.onay input[type="checkbox"]:checked,
.onay input[type="radio"]:checked {
    background-color: var(--renk-birincil-koyu);
    border-color: var(--renk-birincil-koyu);
}

.onay input[type="checkbox"]:checked {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4L19 7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

/* Radyo dugmesinde ic nokta */
.onay input[type="radio"]:checked {
    box-shadow: inset 0 0 0 3px var(--renk-yuzey);
}

.onay input[type="checkbox"]:focus-visible,
.onay input[type="radio"]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--renk-birincil-acik);
}

.onay input[type="radio"]:checked:focus-visible {
    box-shadow: inset 0 0 0 3px var(--renk-yuzey), 0 0 0 3px var(--renk-birincil-acik);
}

.onay + .buton {
    margin-top: var(--bosluk-m);
}

/* Bilgilendirme kutusu */
.bilgi-kutu {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .85rem 1rem;
    margin-bottom: var(--bosluk-m);
    background: var(--renk-ikincil-acik);
    border: 1px solid rgb(79 125 146 / .18);
    border-radius: var(--yuvarlak-kucuk);
    font-size: var(--olcek-kucuk);
    color: var(--renk-ikincil-koyu);
}

/* ---------------------------------------------------------------
   15c. Uye paneli
   --------------------------------------------------------------- */
.panel {
    display: grid;
    gap: var(--bosluk-m);
    margin-top: var(--bosluk-l);
}

.panel__basi {
    margin-bottom: var(--bosluk-m);
}

.panel__baslik {
    font-size: var(--olcek-buyuk);
}

.panel__aciklama {
    margin-top: .3rem;
    color: var(--renk-metin-orta);
    font-size: var(--olcek-kucuk);
}

.panel-menu {
    display: flex;
    gap: .25rem;
    overflow-x: auto;
    padding-bottom: .3rem;
    scrollbar-width: none;
}

.panel-menu::-webkit-scrollbar {
    display: none;
}

.panel-menu__oge {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .6rem 1rem;
    border-radius: var(--yuvarlak-tam);
    white-space: nowrap;
    font-size: var(--olcek-kucuk);
    font-weight: 600;
    color: var(--renk-metin-orta);
    background: var(--renk-yuzey);
    border: 1px solid var(--renk-cizgi);
    transition: background-color var(--gecis), color var(--gecis), border-color var(--gecis);
}

.panel-menu__oge:hover {
    background: var(--renk-yuzey-sicak);
    border-color: var(--renk-birincil);
    text-decoration: none;
    color: var(--renk-birincil-derin);
}

.panel-menu__oge--aktif {
    background: var(--renk-birincil-koyu);
    border-color: var(--renk-birincil-koyu);
    color: #fff;
}

.panel-menu__oge--cikis {
    color: var(--renk-hata);
}

.panel__icerik {
    display: grid;
    gap: var(--bosluk-m);
    align-content: start;
}

/* Panel kutulari */
.kutu {
    background: var(--renk-yuzey);
    border: 1px solid var(--renk-cizgi);
    border-radius: var(--yuvarlak);
    padding: var(--bosluk-m);
    box-shadow: var(--golge-yumusak);
	margin-bottom: var(--bosluk-m);
}

.kutu__baslik {
    font-size: var(--olcek-orta);
    margin-bottom: var(--bosluk-m);
}

/* --- Dil secici (alt bilgi) --- */
.dil-secici {
    display: flex;
    justify-content: center;
    gap: .5rem;
    margin-top: var(--bosluk-s);
}

.dil-secici__oge {
    padding: .2rem .7rem;
    border-radius: var(--yuvarlak-tam);
    font-size: var(--olcek-kucuk);
    color: var(--renk-metin-soluk);
    transition: background-color var(--gecis), color var(--gecis);
}

a.dil-secici__oge:hover {
    background: var(--renk-zemin-alt);
    color: var(--renk-metin);
    text-decoration: none;
}

.dil-secici__oge--aktif {
    background: var(--renk-birincil-acik);
    color: var(--renk-birincil-derin);
    font-weight: 600;
}

/* --- Cihaz bildirim izni kutusu --- */
.push-kutu[hidden] {
    display: none;
}

.push-kutu {
    display: grid;
    justify-items: start;
    gap: var(--bosluk-s);
    margin-top: var(--bosluk-m);
    padding: var(--bosluk-s) var(--bosluk-m);
    background: var(--renk-ikincil-acik);
    border-radius: var(--yuvarlak-kucuk);
}

.push-kutu__durum {
    font-size: var(--olcek-kucuk);
    line-height: 1.6;
    color: var(--renk-metin-orta);
}

/* --- Mesaj hakki olceri --- */
.hak-olcer {
    margin-top: var(--bosluk-m);
}

.hak-olcer__basi {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--bosluk-s);
    margin-bottom: .4rem;
}

.hak-olcer__ad {
    font-weight: 600;
    color: var(--renk-metin);
}

.hak-olcer__deger {
    font-size: var(--olcek-kucuk);
    font-weight: 700;
    color: var(--renk-birincil-derin);
    white-space: nowrap;
}

.hak-olcer__deger--bitti {
    color: var(--renk-hata);
}

/* <progress> tarayicilara gore farkli parcalardan olusur;
   govde ve dolu kisim ayri ayri boyanir. */
.hak-olcer__yol {
    display: block;
    width: 100%;
    height: .5rem;
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    border-radius: var(--yuvarlak-tam);
    background: var(--renk-zemin-alt);
    overflow: hidden;
}

.hak-olcer__yol::-webkit-progress-bar {
    background: var(--renk-zemin-alt);
    border-radius: var(--yuvarlak-tam);
}

.hak-olcer__yol::-webkit-progress-value {
    background: var(--renk-birincil-koyu);
    border-radius: var(--yuvarlak-tam);
    transition: width var(--gecis);
}

.hak-olcer__yol::-moz-progress-bar {
    background: var(--renk-birincil-koyu);
    border-radius: var(--yuvarlak-tam);
}

.hak-olcer__not {
    margin-top: .35rem;
    font-size: var(--olcek-kucuk);
    color: var(--renk-metin-soluk);
}

.kutu p {
    color: var(--renk-metin-orta);
    font-size: var(--olcek-kucuk);
    margin-bottom: var(--bosluk-m);
}

.kutu--tehlike {
    border-color: rgb(192 74 66 / .25);
	margin-top: var(--bosluk-m);
    background: linear-gradient(var(--renk-hata-zemin), var(--renk-yuzey) 45%);
}

/* Ozet listesi */
.ozet-liste {
    display: grid;
    gap: .1rem;
}

.ozet-liste__satir {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .5rem;
    padding: .7rem 0;
    border-bottom: 1px solid var(--renk-cizgi);
    font-size: var(--olcek-kucuk);
}

.ozet-liste__satir:last-child {
    border-bottom: 0;
}

.ozet-liste dt {
    color: var(--renk-metin-soluk);
    font-weight: 600;
}

.ozet-liste dd {
    margin: 0;
    font-weight: 600;
    color: var(--renk-metin);
}

/* ---------------------------------------------------------------
   15d. Profil kartlari ve izgara
   --------------------------------------------------------------- */
.kart-izgara {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
    gap: var(--bosluk-s);
}

.kart-izgara__reklam {
    grid-column: 1 / -1;
}

.profil-kart {
    background: var(--renk-yuzey);
    border: 1px solid var(--renk-cizgi);
    border-radius: var(--yuvarlak);
    overflow: hidden;
    transition: transform var(--gecis), box-shadow var(--gecis), border-color var(--gecis);
}

.profil-kart:hover {
    transform: translateY(-2px);
    border-color: var(--renk-birincil);
    box-shadow: var(--golge-kart);
}

.profil-kart__bag {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--bosluk-s);
    padding: var(--bosluk-s);
    color: inherit;
}

.profil-kart__bag:hover {
    text-decoration: none;
}

.profil-kart__foto {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 42% 58% 55% 45% / 55% 45% 55% 45%;
    object-fit: cover;
    background: var(--renk-birincil-acik);
    flex-shrink: 0;
}

.profil-kart__govde {
    min-width: 0;
}

.profil-kart__ad {
    font-size: var(--olcek-normal);
    font-weight: 700;
    margin-bottom: .12rem;
}

.profil-kart__ust-bilgi {
    display: flex;
    align-items: center;
    gap: .3rem;
    font-size: var(--olcek-kucuk);
    color: var(--renk-metin-soluk);
    margin-bottom: .3rem;
}

.profil-kart__konum {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
}

.profil-kart__ayrac {
    opacity: .5;
}

.profil-kart__baslik {
    font-size: var(--olcek-kucuk);
    color: var(--renk-metin-orta);
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.profil-kart__ok {
    color: var(--renk-cizgi-koyu);
    transition: color var(--gecis), transform var(--gecis);
}

.profil-kart:hover .profil-kart__ok {
    color: var(--renk-birincil-koyu);
    transform: translateX(2px);
}

.cip__sayi {
    padding: .05rem .4rem;
    border-radius: var(--yuvarlak-tam);
    background: var(--renk-zemin-alt);
    font-size: .68rem;
    color: var(--renk-metin-soluk);
}

/* ---------------------------------------------------------------
   15e. Liste sayfasi ve filtre
   --------------------------------------------------------------- */
.liste-basi {
    padding-top: var(--bosluk-l);
    margin-bottom: var(--bosluk-m);
}

.liste-basi__baslik {
    font-size: var(--olcek-buyuk);
}

.liste-basi__aciklama {
    margin-top: .4rem;
    color: var(--renk-metin-orta);
    font-size: var(--olcek-kucuk);
    max-width: 62ch;
}

/* --- Liste duzeni: mobilde tek sutun, masaustunde filtre + sonuc --- */
.liste-duzen {
    display: grid;
    gap: var(--bosluk-m);
    align-items: start;
}

.liste-arac {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--bosluk-xs);
}

.liste-sayi {
    font-size: var(--olcek-kucuk);
    color: var(--renk-metin-soluk);
    margin: 0;
}

.filtre-ac {
    position: relative;
}

.filtre-ac__sayi {
    display: grid;
    place-items: center;
    min-width: 1.3rem;
    height: 1.3rem;
    padding-inline: .3rem;
    border-radius: var(--yuvarlak-tam);
    background: var(--renk-birincil-koyu);
    color: #fff;
    font-size: .7rem;
}

/* Mobil: filtre alttan acilan panel olarak davranir */
.filtre-perde {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: rgb(46 42 40 / .45);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    animation: perde-gir 180ms ease both;
}

.filtre-perde[hidden] {
    display: none;
}

@keyframes perde-gir {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.filtre {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 61;
    max-height: 95vh;
    overflow-y: auto;
    background: var(--renk-yuzey);
    border-top: 1px solid var(--renk-cizgi);
    border-radius: var(--yuvarlak) var(--yuvarlak) 0 0;
    padding: var(--bosluk-m) var(--bosluk-m) calc(var(--bosluk-m) + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -6px 32px rgb(46 42 40 / .18);
    transform: translateY(101%);
    visibility: hidden;
    transition: transform 240ms cubic-bezier(.2, .8, .3, 1), visibility 240ms;
}

.filtre--acik {
    transform: translateY(0);
    visibility: visible;
}

.filtre__basi {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--bosluk-s);
    margin-bottom: var(--bosluk-m);
}

.filtre__baslik {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-weight: 700;
    font-size: var(--olcek-normal);
    color: var(--renk-metin);
}

.filtre__kapat {
    display: grid;
    place-items: center;
    width: 2.2rem;
    height: 2.2rem;
    border: 1px solid var(--renk-cizgi);
    border-radius: var(--yuvarlak-tam);
    background: var(--renk-yuzey);
    color: var(--renk-metin-orta);
    cursor: pointer;
}

.filtre__kapat:hover {
    background: var(--renk-zemin-alt);
}

.filtre__form .alan {
    margin-bottom: var(--bosluk-s);
}

.filtre__eylem {
    display: grid;
    gap: .3rem;
    margin-top: var(--bosluk-m);
}

/* Panel acikken arka planin kaymasini engelle */
.govde--kilitli {
    overflow: hidden;
}

/* Sayfalama */
.sayfalama {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: .3rem;
    margin-top: var(--bosluk-l);
}

.sayfalama__oge {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    min-width: 2.5rem;
    justify-content: center;
    padding: .55rem .8rem;
    background: var(--renk-yuzey);
    border: 1px solid var(--renk-cizgi);
    border-radius: var(--yuvarlak-kucuk);
    font-size: var(--olcek-kucuk);
    font-weight: 600;
    color: var(--renk-metin-orta);
    transition: border-color var(--gecis), color var(--gecis), background-color var(--gecis);
}

.sayfalama__oge:hover {
    border-color: var(--renk-birincil);
    color: var(--renk-birincil-koyu);
    text-decoration: none;
}

.sayfalama__oge--aktif {
    background: var(--renk-birincil-koyu);
    border-color: var(--renk-birincil-koyu);
    color: #fff;
}

.sayfalama__ara {
    color: var(--renk-metin-soluk);
    padding-inline: .2rem;
}

/* ---------------------------------------------------------------
   15f. Profil detay sayfasi
   --------------------------------------------------------------- */
.detay {
    padding-top: var(--bosluk-m);
}

.kirinti {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    margin-bottom: var(--bosluk-m);
    font-size: var(--olcek-kucuk);
    color: var(--renk-metin-soluk);
}

.kirinti a {
    color: var(--renk-metin-soluk);
}

.kirinti a:hover {
    color: var(--renk-birincil-koyu);
}

/* Iki sutunlu yerlesim: solda profil karti, paylasim ve guvenlik uyarisi;
   sagda tanitim metni ve yorumlar. Benzer profiller bu izgaranin disinda,
   tam genislikte durur. */
.detay-duzen {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--bosluk-m);
    align-items: start;
}

.detay-yan {
    display: grid;
    gap: var(--bosluk-s);
    align-content: start;
    min-width: 0;
}

.detay-ana {
    min-width: 0;
}

.detay-yan__bolum {
    padding: var(--bosluk-m);
    background: var(--renk-yuzey);
    border: 1px solid var(--renk-cizgi);
    border-radius: var(--yuvarlak);
}

.detay-yan__baslik {
    font-size: var(--olcek-kucuk);
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--renk-metin-soluk);
    margin-bottom: var(--bosluk-s);
}

.detay-yan .uyari-kutu {
    margin-top: 0;
}

.detay__basi {
    display: grid;
    gap: var(--bosluk-s);
    padding: var(--bosluk-m);
    background: var(--renk-yuzey);
    border: 1px solid var(--renk-cizgi);
    border-radius: var(--yuvarlak);
    box-shadow: var(--golge-kart);
}

/* Kucuk ekranda fotograf ile isim/baslik yan yana durur — dikey yer kazandirir */
.detay__kimlik {
    display: flex;
    align-items: center;
    gap: var(--bosluk-s);
}

.detay__kimlik-metin {
    min-width: 0;
}

.detay__foto {
    width: 5.5rem;
    height: 5.5rem;
    flex-shrink: 0;
    border-radius: 42% 58% 55% 45% / 55% 45% 55% 45%;
    object-fit: cover;
    background: var(--renk-birincil-acik);
    border: 2px solid var(--renk-zemin);
    padding: .25rem;
}

/* Fotografi buyutme baglantisi */
.detay__foto-bag {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
    line-height: 0;
    border-radius: 42% 58% 55% 45% / 55% 45% 55% 45%;
    cursor: zoom-in;
}

.detay__foto-bag:hover {
    text-decoration: none;
}

.detay__foto-buyut {
    position: absolute;
    right: .1rem;
    bottom: .1rem;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--yuvarlak-tam);
    background: var(--renk-yuzey);
    border: 1px solid var(--renk-cizgi);
    color: var(--renk-metin-orta);
    box-shadow: var(--golge-yumusak);
    transition: transform var(--gecis), color var(--gecis);
}

.detay__foto-bag:hover .detay__foto-buyut,
.detay__foto-bag:focus-visible .detay__foto-buyut {
    transform: scale(1.1);
    color: var(--renk-birincil-koyu);
}

.detay__ad {
    font-size: var(--olcek-buyuk);
    line-height: 1.15;
}

.detay__baslik {
    margin-top: .3rem;
    font-size: var(--olcek-normal);
    color: var(--renk-metin-orta);
    font-weight: 500;
}

.rozet-liste {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    list-style: none;
    padding: 0;
    margin: var(--bosluk-s) 0;
}

.rozet {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .35rem .75rem;
    background: var(--renk-zemin-alt);
    border-radius: var(--yuvarlak-tam);
    font-size: var(--olcek-kucuk);
    font-weight: 600;
    color: var(--renk-metin-orta);
}

/* ---------------------------------------------------------------
   Uygulama acilis ekrani (PWA)

   Yalnizca uygulama olarak acildiginda gorunur. Kaybolmasi CSS
   animasyonuna baglidir; JavaScript calismasa bile ekran kapanir,
   yani kullaniciyi asla kilitlemez.
   --------------------------------------------------------------- */
.acilis {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--bosluk-s);
    background: var(--renk-zemin);
    animation: acilis-kapan 1.5s cubic-bezier(.4, 0, .2, 1) forwards;
}

/* Tarayicida degil, yalnizca ana ekrana eklenmis uygulamada */
@media all and (display-mode: standalone) {
    .acilis {
        display: flex;
    }
}

/* Ayni oturumda ikinci kez gosterilmez — karar acilis.js'te verilir */
.acilis-atla .acilis {
    display: none;
}

.acilis__isaret {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 45% 55% 52% 48% / 52% 48% 55% 45%;
    background: linear-gradient(135deg, var(--renk-birincil), var(--renk-vurgu) 60%, var(--renk-ikincil));
    animation: acilis-isaret 1.4s cubic-bezier(.2, .8, .3, 1) both;
}

.acilis__ad {
    font-size: var(--olcek-orta);
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--renk-metin);
    animation: acilis-ad 1.4s ease both .15s;
}

/* Isaret nefes alir gibi buyur ve organik sekli doner */
@keyframes acilis-isaret {
    from { opacity: 0; transform: scale(.7) rotate(-18deg); }
    60%  { opacity: 1; transform: scale(1.04) rotate(4deg); }
    to   { opacity: 1; transform: scale(1) rotate(0); }
}

@keyframes acilis-ad {
    from { opacity: 0; transform: translateY(8px); }
    50%  { opacity: 1; transform: none; }
    to   { opacity: 1; transform: none; }
}

/* Son %20'de solar; bittiginde tiklamalari da gecirmez */
@keyframes acilis-kapan {
    0%, 80% { opacity: 1; visibility: visible; }
    100%    { opacity: 0; visibility: hidden; pointer-events: none; }
}

/* --- Geri alinmis mesaj --- */
.balon--silindi .balon__metin {
    font-style: italic;
    opacity: .7;
}

/* Geri al dugmesi: balonun disinda, yalnizca uzerine gelince belirir */
.balon {
    position: relative;
}

.balon__geri-al {
    position: absolute;
    top: 50%;
    right: calc(100% + .35rem);
    transform: translateY(-50%);
    padding: .2rem .55rem;
    border: 1px solid var(--renk-cizgi);
    border-radius: var(--yuvarlak-tam);
    background: var(--renk-yuzey);
    font-size: .7rem;
    color: var(--renk-metin-soluk);
    white-space: nowrap;
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--gecis), color var(--gecis), border-color var(--gecis);
}

.balon:hover .balon__geri-al,
.balon__geri-al:focus-visible {
    opacity: 1;
}

.balon__geri-al:hover {
    border-color: var(--renk-hata);
    color: var(--renk-hata);
}

.balon__geri-al:disabled {
    opacity: .5;
    cursor: progress;
}

/* Dokunmatik cihazda uzerine gelme yok — dugme her zaman gorunur */
@media (hover: none) {
    .balon__geri-al {
        opacity: 1;
    }
}

/* --- Konum kisayollari (filtre paneli) --- */
.konum-kisayol {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    margin-top: .45rem;
}

.konum-kisayol__dugme {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .3rem .6rem;
    border: 1px solid var(--renk-cizgi);
    border-radius: var(--yuvarlak-tam);
    background: var(--renk-yuzey);
    font-size: var(--olcek-kucuk);
    color: var(--renk-metin-orta);
    cursor: pointer;
    transition: background-color var(--gecis), border-color var(--gecis), color var(--gecis);
}

.konum-kisayol__dugme:hover:not(:disabled) {
    background: var(--renk-birincil-acik);
    border-color: var(--renk-birincil);
    color: var(--renk-birincil-derin);
}

.konum-kisayol__dugme:disabled {
    opacity: .6;
    cursor: progress;
}

.konum-kisayol__durum[hidden] {
    display: none;
}

.konum-kisayol__durum {
    margin-top: .35rem;
    font-size: var(--olcek-kucuk);
    color: var(--renk-metin-soluk);
}

/* --- Gizlenmis profilin kisitli gorunumu --- */
.gizli-kart {
    max-width: 34rem;
    margin: var(--bosluk-m) auto;
    padding: var(--bosluk-m);
    background: var(--renk-yuzey);
    border: 1px solid var(--renk-cizgi);
    border-radius: var(--yuvarlak);
    box-shadow: var(--golge-yumusak);
}

.gizli-kart__basi {
    display: flex;
    align-items: center;
    gap: var(--bosluk-m);
}

.gizli-kart__foto {
    width: 5rem;
    height: 5rem;
    border-radius: var(--yuvarlak-tam);
    object-fit: cover;
    background: var(--renk-zemin-alt);
    flex-shrink: 0;
}

.gizli-kart__ad {
    font-size: var(--olcek-orta);
    line-height: 1.2;
}

/* Perde: ilan icerigi yerine gecen bilgilendirme alani */
.gizli-kart__perde {
    display: grid;
    justify-items: center;
    gap: .4rem;
    margin-top: var(--bosluk-m);
    padding: var(--bosluk-l) var(--bosluk-m);
    background: var(--renk-zemin-alt);
    border-radius: var(--yuvarlak-kucuk);
    text-align: center;
    color: var(--renk-metin-soluk);
}

.gizli-kart__baslik {
    font-weight: 700;
    color: var(--renk-metin);
}

.gizli-kart__metin {
    font-size: var(--olcek-kucuk);
    line-height: 1.6;
    max-width: 26rem;
}

.gizli-kart__eylem {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bosluk-xs);
    margin-top: var(--bosluk-m);
}

/* Yorum yazarinin adi profiline baglanir */
.yorum__yazar {
    color: inherit;
}

.yorum__yazar:hover {
    color: var(--renk-birincil-koyu);
}

/* Son aktiflik rozeti — ikincil bilgi, diger rozetlerin onune gecmesin */
.rozet--sonuk {
    background: transparent;
    border: 1px solid var(--renk-cizgi);
    font-weight: 500;
    color: var(--renk-metin-soluk);
}

.detay__eylem {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--bosluk-xs);
    margin-top: var(--bosluk-s);
}

.detay__no {
    margin-top: var(--bosluk-s);
    font-size: var(--olcek-kucuk);
    color: var(--renk-metin-soluk);
}

.detay__bolum {
    margin-top: var(--bosluk-l);
}

/* Izgaranin altinda, tam genislikte duran bolum (benzer profiller) */
.detay__bolum--tam {
    margin-top: var(--bosluk-l);
}

.detay__bolum-baslik {
    font-size: var(--olcek-orta);
    margin-bottom: var(--bosluk-s);
}

.detay__metin {
    background: var(--renk-yuzey);
    border: 1px solid var(--renk-cizgi);
    border-radius: var(--yuvarlak);
    padding: var(--bosluk-m);
    line-height: 1.75;
    color: var(--renk-metin-orta);
}

.uyari-kutu {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    margin-top: var(--bosluk-m);
    padding: .9rem 1.1rem;
    background: var(--renk-uyari-zemin);
    border: 1px solid rgb(168 121 27 / .2);
    border-radius: var(--yuvarlak-kucuk);
    font-size: var(--olcek-kucuk);
    color: var(--renk-uyari);
}

.paylas-liste {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bosluk-xs);
}

.paylas-oge {
    padding: .5rem 1.1rem;
    background: var(--renk-yuzey);
    border: 1px solid var(--renk-cizgi);
    border-radius: var(--yuvarlak-tam);
    font-size: var(--olcek-kucuk);
    font-weight: 600;
    color: var(--renk-metin-orta);
    cursor: pointer;
    transition: border-color var(--gecis), color var(--gecis);
}

.paylas-oge:hover {
    border-color: var(--renk-ikincil);
    color: var(--renk-ikincil-koyu);
    text-decoration: none;
}

/* ---------------------------------------------------------------
   Isik kutusu (lightbox) — gorseli tam ekran gosterir
   --------------------------------------------------------------- */
/* "hidden" ozniteligi tarayicinin varsayilan [hidden]{display:none} kuraliyla
   gelir; ancak sinif secicisi ondan daha guclu oldugu icin display:grid onu
   ezer ve katman kapanmaz. Bu yuzden acikca yazilir. */
.isik-kutusu[hidden] {
    display: none;
}

.isik-kutusu {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: grid;
    place-items: center;
    padding: var(--bosluk-m);
    background: rgb(30 26 24 / .88);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: isik-gir 200ms ease both;
    cursor: zoom-out;
}

.isik-kutusu__gorsel {
    max-width: min(100%, 46rem);
    max-height: 88vh;
    max-height: 88dvh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: var(--yuvarlak);
    box-shadow: 0 24px 70px rgb(0 0 0 / .45);
    background: var(--renk-yuzey);
    cursor: default;
    animation: isik-gorsel-gir 240ms cubic-bezier(.2, .8, .3, 1) both;
}

.isik-kutusu__kapat {
    position: absolute;
    top: max(var(--bosluk-s), env(safe-area-inset-top, 0px));
    right: var(--bosluk-s);
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 0;
    border-radius: var(--yuvarlak-tam);
    background: rgb(255 255 255 / .14);
    color: #fff;
    cursor: pointer;
    transition: background-color var(--gecis), transform var(--gecis);
}

.isik-kutusu__kapat:hover {
    background: rgb(255 255 255 / .26);
    transform: scale(1.05);
}

.isik-kutusu__kapat:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
}

.isik-kutusu__aciklama {
    position: absolute;
    left: 50%;
    bottom: max(var(--bosluk-s), env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    max-width: min(100% - 2rem, 40rem);
    padding: .5rem 1rem;
    border-radius: var(--yuvarlak-tam);
    background: rgb(0 0 0 / .45);
    color: #fff;
    font-size: var(--olcek-kucuk);
    text-align: center;
}

@keyframes isik-gir {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes isik-gorsel-gir {
    from { opacity: 0; transform: scale(.94); }
    to   { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------
   Belge kutusu — sozlesme metinleri (kayit sayfasi)
   --------------------------------------------------------------- */
.belge-kutusu[hidden] {
    display: none;
}

.belge-kutusu {
    position: fixed;
    inset: 0;
    z-index: 95;
    display: grid;
    place-items: center;
    padding: var(--bosluk-s);
    background: rgb(30 26 24 / .72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: isik-gir 200ms ease both;
}

.belge-kutusu__pencere {
    display: flex;
    flex-direction: column;
    width: min(100%, 44rem);
    max-height: 88vh;
    max-height: 88dvh;
    background: var(--renk-yuzey);
    border-radius: var(--yuvarlak);
    box-shadow: 0 24px 70px rgb(0 0 0 / .35);
    overflow: hidden;
    animation: isik-gorsel-gir 240ms cubic-bezier(.2, .8, .3, 1) both;
}

.belge-kutusu__basi {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--bosluk-s);
    padding: var(--bosluk-s) var(--bosluk-m);
    background: var(--renk-yuzey-sicak);
    border-bottom: 1px solid var(--renk-cizgi);
}

.belge-kutusu__baslik {
    font-size: var(--olcek-orta);
    line-height: 1.3;
    color: var(--renk-metin);
}

.belge-kutusu__kapat {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 0;
    border-radius: var(--yuvarlak-tam);
    background: transparent;
    color: var(--renk-metin-orta);
    cursor: pointer;
    transition: background-color var(--gecis), color var(--gecis);
}

.belge-kutusu__kapat:hover {
    background: var(--renk-zemin-alt);
    color: var(--renk-metin);
}

.belge-kutusu__govde {
    padding: var(--bosluk-m);
    overflow-y: auto;
    overscroll-behavior: contain;
    font-size: var(--olcek-normal);
    line-height: 1.75;
    color: var(--renk-metin-orta);
}

.belge-kutusu__govde > :first-child {
    margin-top: 0;
}

.belge-kutusu__govde > :last-child {
    margin-bottom: 0;
}

.belge-kutusu__govde h2,
.belge-kutusu__govde h3 {
    margin: var(--bosluk-m) 0 var(--bosluk-xs);
    font-size: var(--olcek-orta);
    color: var(--renk-metin);
}

.belge-kutusu__govde p {
    margin-bottom: var(--bosluk-s);
}

.belge-kutusu__govde ul,
.belge-kutusu__govde ol {
    margin: 0 0 var(--bosluk-s) 1.3rem;
}

.belge-kutusu__govde li {
    margin-bottom: .35rem;
}

.belge-kutusu__govde a {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ---------------------------------------------------------------
   15g. Panel — profil formu
   --------------------------------------------------------------- */
.foto-secim {
    display: flex;
    align-items: center;
    gap: var(--bosluk-s);
}

.foto-secim__onizleme {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 42% 58% 55% 45% / 55% 45% 55% 45%;
    object-fit: cover;
    background: var(--renk-birincil-acik);
    flex-shrink: 0;
}

.foto-secim__eylem {
    display: grid;
    gap: .35rem;
}

.foto-secim__eylem .buton {
    justify-self: start;
}

.foto-kaldir {
    margin-top: -.5rem;
    margin-bottom: var(--bosluk-m);
}

.alan__istege-bagli {
    font-weight: 500;
    color: var(--renk-metin-soluk);
}

/* Profil durum kutusu */
.durum-kutu {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--bosluk-s);
}

.durum-kutu__bilgi p {
    margin-bottom: .35rem;
}

.durum-kutu__sayac {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    color: var(--renk-metin-soluk);
    margin-bottom: 0;
}

.durum-kutu__eylem {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--bosluk-xs);
}

.durum-etiket {
    display: inline-block;
    margin-bottom: .5rem;
    padding: .25rem .8rem;
    border-radius: var(--yuvarlak-tam);
    font-size: var(--olcek-kucuk);
    font-weight: 700;
}

.durum-etiket--yayinda { background: var(--renk-basari-zemin); color: var(--renk-basari); }
.durum-etiket--gizli   { background: var(--renk-zemin-alt);    color: var(--renk-metin-orta); }
.durum-etiket--engelli { background: var(--renk-hata-zemin);   color: var(--renk-hata); }
.durum-etiket--taslak  { background: var(--renk-uyari-zemin);  color: var(--renk-uyari); }

/* ---------------------------------------------------------------
   15h. Yorumlar
   --------------------------------------------------------------- */
.sayi-rozet {
    display: inline-block;
    margin-left: .3rem;
    padding: .1rem .55rem;
    border-radius: var(--yuvarlak-tam);
    background: var(--renk-birincil-acik);
    color: var(--renk-birincil-derin);
    font-size: var(--olcek-kucuk);
    font-weight: 700;
    vertical-align: middle;
}

.bos-satir {
    padding: var(--bosluk-m);
    margin-bottom: var(--bosluk-m);
    background: var(--renk-yuzey);
    border: 1px dashed var(--renk-cizgi-koyu);
    border-radius: var(--yuvarlak);
    color: var(--renk-metin-soluk);
    font-size: var(--olcek-kucuk);
    text-align: center;
}

.yorum-liste {
    list-style: none;
    padding: 0;
    display: grid;
    gap: var(--bosluk-xs);
    margin-bottom: var(--bosluk-m);
}

.yorum {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--bosluk-s);
    padding: var(--bosluk-s) var(--bosluk-m);
    background: var(--renk-yuzey);
    border: 1px solid var(--renk-cizgi);
    border-radius: var(--yuvarlak);
}

.yorum__avatar {
    display: grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: var(--yuvarlak-tam);
    font-weight: 800;
    font-size: var(--olcek-kucuk);
    color: var(--renk-metin);
}

.yorum__avatar--kadin { background: var(--renk-birincil-acik); }
.yorum__avatar--erkek { background: var(--renk-ikincil-acik); }

.yorum__basi {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .5rem;
    margin-bottom: .2rem;
}

.yorum__zaman {
    font-size: var(--olcek-kucuk);
    color: var(--renk-metin-soluk);
}

.yorum__metin {
    color: var(--renk-metin-orta);
    font-size: var(--olcek-kucuk);
    line-height: 1.6;
}

.yorum__sikayet {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    margin-top: .4rem;
    font-size: .72rem;
    color: var(--renk-metin-soluk);
}

.yorum__sikayet:hover {
    color: var(--renk-hata);
    text-decoration: none;
}

.yorum-formu {
    background: var(--renk-yuzey);
    border: 1px solid var(--renk-cizgi);
    border-radius: var(--yuvarlak);
    padding: var(--bosluk-m);
    box-shadow: var(--golge-yumusak);
}

.yorum-formu__baslik {
    font-size: var(--olcek-orta);
    margin-bottom: var(--bosluk-m);
}

.alan--ucLu {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--bosluk-s);
}

.alan__girdi--kisa {
    min-height: 6rem;
}

.secim-liste {
    display: grid;
    gap: .5rem;
}

.secim-liste input[type="radio"] {
    flex-shrink: 0;
    width: 1.1rem;
    height: 1.1rem;
    margin-top: .15rem;
    accent-color: var(--renk-birincil-koyu);
    cursor: pointer;
}

/* ---------------------------------------------------------------
   15i. Mesajlasma
   --------------------------------------------------------------- */
.konusma-liste {
    list-style: none;
    padding: 0;
    display: grid;
    gap: .3rem;
}

.konusma {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--bosluk-s);
    padding: var(--bosluk-s);
    background: var(--renk-yuzey);
    border: 1px solid var(--renk-cizgi);
    border-radius: var(--yuvarlak);
    color: inherit;
    transition: border-color var(--gecis), transform var(--gecis);
}

.konusma:hover {
    border-color: var(--renk-birincil);
    transform: translateX(2px);
    text-decoration: none;
}

.konusma--okunmamis {
    background: var(--renk-birincil-acik);
    border-color: var(--renk-birincil);
}

.konusma__foto {
    width: 3rem;
    height: 3rem;
    border-radius: var(--yuvarlak-tam);
    object-fit: cover;
    background: var(--renk-zemin-alt);
}

/* Izgara/esnek kutu icindeki cocugun varsayilan alt sinirlari "auto"dur;
   bu da tek satirlik metnin kutuyu tasirmasina yol acar. min-width:0 olmadan
   text-overflow calismaz. */
.konusma__govde {
    min-width: 0;
}

.konusma__basi {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
    min-width: 0;
}

.konusma__basi strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.konusma__zaman {
    font-size: .72rem;
    color: var(--renk-metin-soluk);
    white-space: nowrap;
    flex-shrink: 0;
}

.konusma__onizleme {
    font-size: var(--olcek-kucuk);
    color: var(--renk-metin-orta);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.konusma__sen {
    color: var(--renk-metin-soluk);
}

.konusma__rozet {
    display: grid;
    place-items: center;
    min-width: 1.5rem;
    height: 1.5rem;
    padding-inline: .35rem;
    border-radius: var(--yuvarlak-tam);
    background: var(--renk-birincil-koyu);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
}

/* ---------------------------------------------------------------
   Sohbet — tam ekran uygulama duzeni
   Govde gorunum yuksekligini doldurur, kaydirma yalnizca ic panellerde olur.
   --------------------------------------------------------------- */
/* Yukseklik zinciri eskiden yeniye siralidir; tarayici destekledigi son
   degeri kullanir. iOS'ta 100vh tarayici cubugunu saymaz ve tab bar ekranin
   altina tasar — -webkit-fill-available o surumleri kurtarir, dvh guncelleri. */
.govde--uygulama {
    height: 100vh;
    height: -webkit-fill-available;
    height: 100dvh;
    max-height: 100vh;
    max-height: -webkit-fill-available;
    max-height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-image: none;
}

/* Ust bar ve tab bar bu duzende sabit degil, esnek sutunun parcasi */
.govde--uygulama .ustbar {
    position: static;
    flex: 0 0 auto;
}

.govde--uygulama .tabbar {
    position: static;
    flex: 0 0 auto;
    box-shadow: none;
}

.ana--uygulama {
    flex: 1 1 auto;
    min-height: 0;
    padding-bottom: 0;
}

.sohbet-uygulama {
    height: 100%;
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr;
    background: var(--renk-yuzey);
}

/* Tam ekran duzende bildirimler akisi itmesin diye yuzen katmanda durur */
.uygulama-bildirim {
    position: fixed;
    top: 4rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 70;
    width: min(100% - 2rem, 30rem);
    pointer-events: none;
}

.uygulama-bildirim .bildirimler {
    padding-top: 0;
    padding-inline: 0;
    max-width: none;
}

.uygulama-bildirim .bildirim {
    pointer-events: auto;
    box-shadow: var(--golge-kart);
}

/* --- Sol panel: konusma listesi --- */
.sohbet-yan {
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-right: 1px solid var(--renk-cizgi);
    background: var(--renk-zemin);
}

.sohbet-yan__basi {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: var(--bosluk-s) var(--bosluk-m);
    border-bottom: 1px solid var(--renk-cizgi);
    flex: 0 0 auto;
}

.sohbet-yan__baslik {
    font-size: var(--olcek-orta);
}

.sohbet-yan__sayi {
    padding: .05rem .5rem;
    border-radius: var(--yuvarlak-tam);
    background: var(--renk-zemin-alt);
    font-size: .7rem;
    font-weight: 700;
    color: var(--renk-metin-soluk);
}

/* Liste basi reklam — panelin ustunde sabit durur, konusmalar altinda kayar.
   Konusma satirlarindan ayrismasi icin farkli zemin ve ayirici cizgi. */
.sohbet-yan .reklam {
    flex: 0 0 auto;
    margin-block: 0;
    padding: var(--bosluk-s);
    background: var(--renk-zemin-alt);
    border-bottom: 1px solid var(--renk-cizgi);
}

.sohbet-yan .reklam__kutu {
    max-width: 100%;
}

.sohbet-yan .konusma-liste {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: var(--bosluk-xs);
    gap: .15rem;
    /* Panel boyu icerikten uzunken satirlar esneyip aralarini acmasin */
    align-content: start;
}

/* --- Sag panel: sohbet --- */
.sohbet-ana {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--renk-yuzey);
}

.sohbet-basi {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .6rem var(--bosluk-m);
    border-bottom: 1px solid var(--renk-cizgi);
    background: rgb(255 255 255 / .9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    flex: 0 0 auto;
}

.sohbet-basi__geri {
    display: grid;
    place-items: center;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: var(--yuvarlak-tam);
    color: var(--renk-metin-orta);
    flex-shrink: 0;
}

.sohbet-basi__geri:hover {
    background: var(--renk-zemin-alt);
}

.sohbet-basi__foto {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--yuvarlak-tam);
    object-fit: cover;
    background: var(--renk-zemin-alt);
    flex-shrink: 0;
}

.sohbet-basi__kimlik {
    flex: 1;
    min-width: 0;
}

.sohbet-basi__ad {
    font-weight: 700;
    line-height: 1.2;
}

.sohbet-basi__bag {
    font-size: .72rem;
    color: var(--renk-metin-soluk);
}

.sohbet-basi__araclar {
    display: flex;
    gap: .2rem;
    flex-shrink: 0;
}

.sohbet-akis {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: var(--bosluk-m);
    background:
        radial-gradient(circle at 15% 10%, rgb(242 166 160 / .07), transparent 45%),
        radial-gradient(circle at 85% 85%, rgb(201 182 228 / .07), transparent 45%),
        var(--renk-zemin);
    scroll-behavior: smooth;
    overscroll-behavior: contain;
}

/* Gun ayraci */
.sohbet-gun {
    align-self: center;
    margin: var(--bosluk-s) 0 .2rem;
}

.sohbet-gun span {
    padding: .2rem .8rem;
    border-radius: var(--yuvarlak-tam);
    background: rgb(255 255 255 / .8);
    border: 1px solid var(--renk-cizgi);
    font-size: .7rem;
    font-weight: 600;
    color: var(--renk-metin-soluk);
}

/* Mesaj yazma alani */
/* Kalan hak seridi — yazma alaninin hemen ustunde, esige inince gorunur */
.hak-uyari[hidden] {
    display: none;
}

.hak-uyari {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex: 0 0 auto;
    padding: .45rem var(--bosluk-m);
    background: var(--renk-uyari-zemin);
    border-top: 1px solid var(--renk-cizgi);
    color: var(--renk-uyari);
    font-size: var(--olcek-kucuk);
}

.hak-uyari svg {
    flex-shrink: 0;
}

.sohbet-yazac {
    display: flex;
    align-items: flex-end;
    gap: .4rem;
    padding: .6rem var(--bosluk-m) calc(.6rem + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--renk-cizgi);
    background: var(--renk-yuzey);
    flex: 0 0 auto;
}

.sohbet-yazac__alan {
    flex: 1;
    min-height: 2.75rem;
    max-height: 8rem;
    padding: .7rem 1rem;
    background: var(--renk-zemin);
    border: 1px solid var(--renk-cizgi-koyu);
    border-radius: 1.4rem;
    resize: none;
    line-height: 1.4;
    font-family: inherit;
    font-size: var(--olcek-normal);
    transition: border-color var(--gecis), box-shadow var(--gecis);
}

.sohbet-yazac__alan:focus {
    outline: none;
    border-color: var(--renk-birincil-koyu);
    box-shadow: 0 0 0 3px var(--renk-birincil-acik);
}

.sohbet-yazac__gonder {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    flex-shrink: 0;
    border: 0;
    border-radius: var(--yuvarlak-tam);
    background: var(--renk-birincil-koyu);
    color: #fff;
    cursor: pointer;
    transition: background-color var(--gecis), transform var(--gecis);
}

.sohbet-yazac__gonder:hover {
    background: var(--renk-birincil-derin);
    transform: scale(1.05);
}

.sohbet-engel {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: var(--bosluk-s) var(--bosluk-m) calc(var(--bosluk-s) + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--renk-cizgi);
    background: var(--renk-uyari-zemin);
    color: var(--renk-uyari);
    font-size: var(--olcek-kucuk);
    flex: 0 0 auto;
}

/* Bos durumlar */
.sohbet-bos {
    flex: 1;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: .4rem;
    padding: var(--bosluk-l) var(--bosluk-m);
    text-align: center;
    color: var(--renk-metin-orta);
    font-size: var(--olcek-kucuk);
}

.sohbet-bos svg {
    color: var(--renk-birincil);
}

.sohbet-bos__baslik {
    font-size: var(--olcek-orta);
    font-weight: 700;
    color: var(--renk-metin);
}

.sohbet-bos--yan {
    flex: 1 1 auto;
}

.sohbet-bos--akis {
    color: var(--renk-metin-soluk);
}

/* Mobil ve dar tablet: tek seferde tek panel gorunur */
@media (max-width: 899px) {
    .sohbet-uygulama--liste .sohbet-ana,
    .sohbet-uygulama--konusma .sohbet-yan {
        display: none;
    }

    .sohbet-yan {
        border-right: 0;
    }
}

/* 900px ve uzeri: liste ve sohbet yan yana, geri dugmesine gerek kalmaz.
   Bu esik yukaridaki tek-panel kuraliyla birebir eslesmelidir. */
@media (min-width: 900px) {
    .sohbet-uygulama {
        grid-template-columns: 22rem minmax(0, 1fr);
    }

    .sohbet-basi__geri {
        display: none;
    }
}

.balon {
    max-width: min(80%, 32rem);
    padding: .6rem .9rem;
    border-radius: 1.1rem 1.1rem 1.1rem .25rem;
    background: var(--renk-yuzey);
    border: 1px solid var(--renk-cizgi);
    align-self: flex-start;
    animation: balon-gir 220ms cubic-bezier(.2, .8, .3, 1) both;
}

.balon--benim {
    align-self: flex-end;
    background: var(--renk-ikincil-acik);
    border-color: transparent;
    border-radius: 1.1rem 1.1rem .25rem 1.1rem;
}

@keyframes balon-gir {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
}

.balon__metin {
    font-size: var(--olcek-kucuk);
	font-weight: 500;
    line-height: 1.55;
    word-break: break-word;
}

.balon__zaman {
    display: block;
    margin-top: .2rem;
    font-size: .66rem;
    color: var(--renk-metin-soluk);
    text-align: right;
}

/* Konusma listesindeki secili oge (masaustu iki panel gorunumu) */
.konusma--aktif {
    background: var(--renk-yuzey-sicak);
    border-color: var(--renk-birincil-koyu);
}

.konusma--aktif.konusma--okunmamis {
    background: var(--renk-birincil-acik);
}

/* Okunmamis mesaj sayaci.
   NOT: ".rozet" adi profil detayindaki bilgi etiketlerine ait; burada ayri bir
   ad kullanilir, aksi halde iki kural cakisir ve sonra gelen digerini ezer. */
.ustbar__mesaj {
    position: relative;
}

.mesaj-rozeti {
    display: inline-grid;
    place-items: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding-inline: .3rem;
    border-radius: var(--yuvarlak-tam);
    background: var(--renk-birincil-koyu);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    line-height: 1;
}

.panel-menu__oge .mesaj-rozeti {
    margin-left: auto;
}

/* ---------------------------------------------------------------
   15j. Yonetim paneli
   --------------------------------------------------------------- */
.yonetim-govde {
    background-image: none;
    background-color: var(--renk-zemin-alt);
}

/* Ust serit icerigi kadar, icerik alani kalan yuksekligi doldurur.
   Bu tanim olmadan grid bos alani iki satira paylastirir ve
   sayfa kisayken ust serit asagi dogru uzar. */
.yonetim {
    display: grid;
    grid-template-rows: auto 1fr;
    min-height: 100vh;
}

/* Grid ve flex ogeleri varsayilan olarak icerikten kucuk olamaz
   (min-width: auto). Menu ogeleri nowrap oldugu icin bu deger
   sifirlanmazsa yan panel icerik kadar genisler ve tum sayfayi tasirir. */
.yonetim__yan {
    display: flex;
    flex-direction: column;
    gap: var(--bosluk-s);
    min-width: 0;
    padding: var(--bosluk-s) var(--bosluk-m);
    background: var(--renk-yuzey);
    border-bottom: 1px solid var(--renk-cizgi);
}

.yonetim-menu,
.yonetim__alt {
    min-width: 0;
}

.marka--yonetim {
    font-size: var(--olcek-normal);
}

.yonetim__marka-satir {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--bosluk-s);
}

/* Dar ekranda menu katlanir; genis ekranda dugme gizlenir */
.yonetim-hamburger {
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    flex-shrink: 0;
    border: 1px solid var(--renk-cizgi);
    border-radius: var(--yuvarlak-kucuk);
    background: var(--renk-yuzey);
    color: var(--renk-metin);
    cursor: pointer;
    transition: background-color var(--gecis), border-color var(--gecis);
}

.yonetim-hamburger:hover {
    background: var(--renk-zemin-alt);
    border-color: var(--renk-cizgi-koyu);
}

.yonetim-hamburger[aria-expanded="true"] {
    background: var(--renk-birincil-acik);
    border-color: var(--renk-birincil);
    color: var(--renk-birincil-derin);
}

.yonetim__menu-govde {
    display: grid;
    gap: var(--bosluk-s);
}

/* JavaScript calisiyorsa menu kapali baslar; calismiyorsa acik kalir */
.yonetim__menu-govde[hidden] {
    display: none;
}

.yonetim-menu {
    display: grid;
    gap: .2rem;
}

.yonetim-menu__oge {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .5rem .85rem;
    border-radius: var(--yuvarlak-kucuk);
    white-space: nowrap;
    font-size: var(--olcek-kucuk);
    font-weight: 600;
    color: var(--renk-metin-orta);
    transition: background-color var(--gecis), color var(--gecis);
}

.yonetim-menu__oge:hover {
    background: var(--renk-zemin-alt);
    text-decoration: none;
}

.yonetim-menu__oge--aktif {
    background: var(--renk-zemin-alt);
    /*color: var(--renk-birincil-derin);*/
}

.yonetim-menu__oge--cikis {
    color: var(--renk-hata);
}

.yonetim-menu__sayi {
    min-width: 1.2rem;
    padding: 0 .3rem;
    border-radius: var(--yuvarlak-tam);
    background: var(--renk-birincil-koyu);
    color: #fff;
    font-size: .65rem;
    text-align: center;
    line-height: 1.2rem;
}

.yonetim__alt {
    display: grid;
    gap: .2rem;
    padding-top: var(--bosluk-s);
    border-top: 1px solid var(--renk-cizgi);
}

.yonetim__icerik {
    padding: var(--bosluk-m);
    min-width: 0;
}

.yonetim__basi {
    margin-bottom: var(--bosluk-m);
}

.yonetim__baslik {
    font-size: var(--olcek-buyuk);
}

.yonetim__aciklama {
    margin-top: .25rem;
    color: var(--renk-metin-orta);
    font-size: var(--olcek-kucuk);
}

.yonetim__bolum {
    margin-top: var(--bosluk-l);
}

.yonetim__bolum-basi {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--bosluk-xs);
    margin-bottom: var(--bosluk-s);
}

.yonetim__bolum-baslik {
    font-size: var(--olcek-orta);
}

.yonetim__soluk {
    color: var(--renk-metin-soluk);
    font-size: var(--olcek-kucuk);
}

.yonetim__ipucu {
    display: flex;
    align-items: flex-start;
    gap: .4rem;
    margin-bottom: var(--bosluk-s);
    font-size: var(--olcek-kucuk);
    color: var(--renk-metin-soluk);
}

.uyari-kutu--kritik {
    background: var(--renk-hata-zemin);
    border-color: rgb(192 74 66 / .3);
    color: var(--renk-hata);
    margin-bottom: var(--bosluk-m);
}

/* Sayi kartlari */
.sayi-izgara {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: var(--bosluk-xs);
}

.sayi-kart {
    padding: var(--bosluk-m);
    background: var(--renk-yuzey);
    border: 1px solid var(--renk-cizgi);
    border-radius: var(--yuvarlak);
}

.sayi-kart__deger {
    font-size: var(--olcek-buyuk);
    font-weight: 800;
    letter-spacing: -.03em;
}

.sayi-kart__etiket {
    font-size: var(--olcek-kucuk);
    font-weight: 600;
    color: var(--renk-metin-orta);
}

.sayi-kart__alt {
    font-size: .72rem;
    color: var(--renk-metin-soluk);
}

/* Bekleyen isler */
.is-listesi {
    display: grid;
    gap: .3rem;
    margin-top: var(--bosluk-m);
}

.is-listesi__oge {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .75rem 1rem;
    background: var(--renk-yuzey);
    border: 1px solid var(--renk-cizgi);
    border-radius: var(--yuvarlak-kucuk);
    font-size: var(--olcek-kucuk);
    color: var(--renk-metin-orta);
}

.is-listesi__oge span {
    flex: 1;
}

.is-listesi__oge:hover {
    border-color: var(--renk-birincil);
    text-decoration: none;
}

.is-listesi__oge--acil {
    background: var(--renk-hata-zemin);
    border-color: rgb(192 74 66 / .25);
    color: var(--renk-hata);
}

/* Denetim kuyrugu */
.denetim-izgara {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
    gap: var(--bosluk-xs);
}

.denetim-kart {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--bosluk-s);
    padding: var(--bosluk-s);
    background: var(--renk-yuzey);
    border: 1px solid var(--renk-cizgi);
    border-radius: var(--yuvarlak);
}

.denetim-kart__foto {
    width: 4rem;
    height: 4rem;
    border-radius: var(--yuvarlak-kucuk);
    object-fit: cover;
    background: var(--renk-zemin-alt);
}

.denetim-kart__ad {
    font-weight: 700;
    font-size: var(--olcek-kucuk);
}

.denetim-kart__no,
.denetim-kart__meta {
    color: var(--renk-metin-soluk);
    font-size: .72rem;
    font-weight: 500;
}

.denetim-kart__baslik {
    font-size: .75rem;
    color: var(--renk-metin-orta);
    margin: .2rem 0 .4rem;
}

.denetim-kart__eylem,
.tablo-eylem {
    display: flex;
    flex-wrap: wrap;
    gap: .2rem;
}

/* Tablolar */
.tablo-sarmal {
    overflow-x: auto;
    background: var(--renk-yuzey);
    border: 1px solid var(--renk-cizgi);
    border-radius: var(--yuvarlak);
}

.tablo {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--olcek-kucuk);
    min-width: 44rem;
}

.tablo th {
    text-align: left;
    padding: .7rem .9rem;
    background: var(--renk-zemin-alt);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--renk-metin-soluk);
    white-space: nowrap;
}

.tablo td {
    padding: .8rem .9rem;
    border-top: 1px solid var(--renk-cizgi);
    vertical-align: top;
}

.tablo__genis {
    max-width: 22rem;
    color: var(--renk-metin-orta);
}

.tablo__satir--dikkat {
    background: rgb(251 222 219 / .35);
}

.tablo__satir--pasif {
    opacity: .65;
}

.tablo-kimlik {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
}

.tablo-kimlik__foto {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--yuvarlak-kucuk);
    object-fit: cover;
    background: var(--renk-zemin-alt);
    flex-shrink: 0;
}

/* Yonetim filtreleri */
.yonetim-filtre {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--bosluk-xs);
    margin-bottom: var(--bosluk-m);
}

.yonetim-filtre .alan__girdi {
    width: auto;
    min-width: 12rem;
    flex: 1 1 12rem;
}

.sekme-liste {
    display: flex;
    flex-wrap: wrap;
    gap: .2rem;
    margin-bottom: var(--bosluk-m);
}

.sekme {
    padding: .45rem .9rem;
    border-radius: var(--yuvarlak-tam);
    background: var(--renk-yuzey);
    border: 1px solid var(--renk-cizgi);
    font-size: var(--olcek-kucuk);
    font-weight: 600;
    color: var(--renk-metin-orta);
}

.sekme:hover {
    border-color: var(--renk-birincil);
    text-decoration: none;
}

.sekme--aktif {
    background: var(--renk-birincil-koyu);
    border-color: var(--renk-birincil-koyu);
    color: #fff;
}

.basit-liste {
    list-style: none;
    padding: 0;
    display: grid;
    gap: .3rem;
    font-size: var(--olcek-kucuk);
    color: var(--renk-metin-orta);
}

.basit-liste li {
    padding: .6rem .9rem;
    background: var(--renk-yuzey);
    border: 1px solid var(--renk-cizgi);
    border-radius: var(--yuvarlak-kucuk);
}

/* Kelime filtresi */
.kelime-izgara {
    display: grid;
    gap: var(--bosluk-s);
    margin-top: var(--bosluk-m);
}

.kelime-ekle {
    display: flex;
    gap: .3rem;
    margin-bottom: var(--bosluk-s);
}

.kelime-liste {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    max-height: 22rem;
    overflow-y: auto;
}

.kelime-oge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .25rem .3rem .25rem .7rem;
    background: var(--renk-zemin-alt);
    border-radius: var(--yuvarlak-tam);
    font-size: .75rem;
}

.kelime-oge__sil {
    display: grid;
    place-items: center;
    width: 1.25rem;
    height: 1.25rem;
    border: 0;
    border-radius: var(--yuvarlak-tam);
    background: transparent;
    color: var(--renk-metin-soluk);
    cursor: pointer;
}

.kelime-oge__sil:hover {
    background: var(--renk-hata-zemin);
    color: var(--renk-hata);
}

.deneme-sonuc__metin {
    margin-top: .5rem;
    padding: .8rem 1rem;
    background: var(--renk-zemin-alt);
    border-radius: var(--yuvarlak-kucuk);
    color: var(--renk-metin);
}

.alan__girdi--kod {
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
    font-size: .8rem;
    min-height: 5rem;
}

/* ---------------------------------------------------------------
   15ka. Giris yapmis kullaniciya gosterilen karsilama seridi
   (tanitim bolumleri yerine gecer)
   --------------------------------------------------------------- */
.karsilama {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--bosluk-s);
    margin-top: var(--bosluk-m);
    padding: var(--bosluk-m);
    background: linear-gradient(135deg, var(--renk-birincil-acik), var(--renk-vurgu-acik));
    border-radius: var(--yuvarlak);
}

.karsilama__baslik {
    font-size: var(--olcek-buyuk);
}

.karsilama__aciklama {
    margin-top: .25rem;
    color: var(--renk-metin-orta);
    font-size: var(--olcek-kucuk);
}

.karsilama__eylem {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bosluk-xs);
}

/* ---------------------------------------------------------------
   15kb. Sosyal medya hesaplari
   --------------------------------------------------------------- */
.sosyal-liste {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bosluk-xs);
    margin-bottom: var(--bosluk-s);
}

.sosyal-oge {
    display: inline-flex;
    flex-direction: column;
    gap: .1rem;
    padding: .6rem 1.1rem;
    background: var(--renk-yuzey);
    border: 1px solid var(--renk-cizgi);
    border-left: 3px solid var(--renk-cizgi-koyu);
    border-radius: var(--yuvarlak-kucuk);
    color: var(--renk-metin);
    transition: border-color var(--gecis), transform var(--gecis);
}

.sosyal-oge:hover {
    transform: translateY(-1px);
    text-decoration: none;
}

.sosyal-oge__ag {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--renk-metin-soluk);
}

.sosyal-oge__kullanici {
    font-size: var(--olcek-kucuk);
    font-weight: 600;
}

/* Her ag kendi renk cizgisiyle ayrisir — logo kullanilmaz, marka izni gerekmez.
   Renkler paletin kendi belirteclerinden gelir; sabit deger yazilmaz. */
.sosyal-oge--instagram:hover { border-left-color: var(--renk-birincil-koyu); border-color: var(--renk-birincil); }
.sosyal-oge--tiktok:hover    { border-left-color: var(--renk-metin);         border-color: var(--renk-cizgi-koyu); }
.sosyal-oge--x:hover         { border-left-color: var(--renk-metin);         border-color: var(--renk-cizgi-koyu); }
.sosyal-oge--facebook:hover  { border-left-color: var(--renk-ikincil-koyu);  border-color: var(--renk-ikincil); }
.sosyal-oge--youtube:hover   { border-left-color: var(--renk-hata);          border-color: var(--renk-birincil); }
.sosyal-oge--telegram:hover  { border-left-color: var(--renk-ikincil-koyu);  border-color: var(--renk-ikincil); }

/* Panel formundaki sosyal medya alanlari */
.kutu__baslik--ara {
    margin-top: var(--bosluk-l);
    padding-top: var(--bosluk-m);
    border-top: 1px solid var(--renk-cizgi);
}

.sosyal-aciklama {
    margin-bottom: var(--bosluk-s);
}

.sosyal-alanlar {
    display: grid;
    gap: var(--bosluk-s);
    margin-bottom: var(--bosluk-m);
}

.sosyal-alanlar .alan {
    margin-bottom: 0;
}

.sosyal-girdi {
    position: relative;
    display: flex;
    align-items: center;
}

.sosyal-girdi__onek {
    position: absolute;
    left: .9rem;
    color: var(--renk-metin-soluk);
    font-weight: 600;
    pointer-events: none;
}

.sosyal-girdi .alan__girdi {
    padding-left: 2rem;
}

/* ---------------------------------------------------------------
   15k. Blog, yardim ve statik sayfalar
   --------------------------------------------------------------- */
.yazi-izgara {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
    gap: var(--bosluk-s);
    margin-top: var(--bosluk-m);
}

.yazi-kart {
    background: var(--renk-yuzey);
    border: 1px solid var(--renk-cizgi);
    border-radius: var(--yuvarlak);
    overflow: hidden;
    transition: transform var(--gecis), box-shadow var(--gecis), border-color var(--gecis);
}

.yazi-kart:hover {
    transform: translateY(-2px);
    border-color: var(--renk-birincil);
    box-shadow: var(--golge-kart);
}

.yazi-kart__bag {
    display: block;
    color: inherit;
}

.yazi-kart__bag:hover {
    text-decoration: none;
}

.yazi-kart__kapak {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: var(--renk-zemin-alt);
}

.yazi-kart__govde {
    padding: var(--bosluk-m);
}

.yazi-kart__kategori {
    display: inline-block;
    margin-bottom: .4rem;
    padding: .15rem .6rem;
    border-radius: var(--yuvarlak-tam);
    background: var(--renk-vurgu-acik);
    font-size: .7rem;
    font-weight: 700;
    color: var(--renk-metin-orta);
}

.yazi-kart__baslik {
    font-size: var(--olcek-orta);
    line-height: 1.3;
    margin-bottom: .35rem;
}

.yazi-kart__ozet {
    font-size: var(--olcek-kucuk);
    color: var(--renk-metin-orta);
    line-height: 1.55;
}

.yazi-kart__meta {
    margin-top: .6rem;
    font-size: .72rem;
    color: var(--renk-metin-soluk);
}

/* Tekil yazi / statik sayfa */
.yazi {
    padding-top: var(--bosluk-m);
    max-width: 48rem;
}

.yazi__basi {
    margin-bottom: var(--bosluk-m);
}

.yazi__baslik {
    font-size: var(--olcek-dev);
    line-height: 1.15;
}

.yazi__meta {
    margin-top: .5rem;
    font-size: var(--olcek-kucuk);
    color: var(--renk-metin-soluk);
}

.yazi__ozet {
    margin-top: var(--bosluk-s);
    font-size: var(--olcek-orta);
    color: var(--renk-metin-orta);
}

.yazi__kapak {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--yuvarlak);
    margin-bottom: var(--bosluk-m);
}

/* Icerik govdesi zeminden ayrilsin — okuma alani kart gibi durur */
.yazi__icerik {
    margin-top: var(--bosluk-m);
    padding: var(--bosluk-m);
    background: var(--renk-yuzey);
    border: 1px solid var(--renk-cizgi);
    border-radius: var(--yuvarlak);
    font-size: var(--olcek-normal);
    line-height: 1.8;
    color: var(--renk-metin-orta);
}

/* Kutu ici bosluk padding ile saglaniyor, ilk/son ogenin margin'i tasmasin */
.yazi__icerik > :first-child {
    margin-top: 0;
}

.yazi__icerik > :last-child {
    margin-bottom: 0;
}

.yazi__icerik h2 {
    margin: var(--bosluk-l) 0 var(--bosluk-s);
    font-size: var(--olcek-buyuk);
    color: var(--renk-metin);
}

.yazi__icerik h3 {
    margin: var(--bosluk-m) 0 var(--bosluk-xs);
    font-size: var(--olcek-orta);
    color: var(--renk-metin);
}

.yazi__icerik p {
    margin-bottom: var(--bosluk-s);
}

.yazi__icerik ul,
.yazi__icerik ol {
    margin: 0 0 var(--bosluk-s) 1.3rem;
}

.yazi__icerik li {
    margin-bottom: .35rem;
}

.yazi__icerik blockquote {
    margin: var(--bosluk-m) 0;
    padding: var(--bosluk-s) var(--bosluk-m);
    border-left: 3px solid var(--renk-birincil);
    background: var(--renk-zemin-alt);
    border-radius: 0 var(--yuvarlak-kucuk) var(--yuvarlak-kucuk) 0;
}

.yazi__icerik img {
    border-radius: var(--yuvarlak-kucuk);
    margin: var(--bosluk-s) 0;
}

.yazi__icerik a {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.yazi__cagri {
    display: grid;
    justify-items: center;
    gap: .3rem;
    text-align: center;
    margin-top: var(--bosluk-xl);
    padding: var(--bosluk-l) var(--bosluk-m);
    background: linear-gradient(135deg, var(--renk-birincil-acik), var(--renk-vurgu-acik));
    border-radius: var(--yuvarlak);
    color: var(--renk-metin-orta);
}

.yazi__cagri .buton {
    margin-top: var(--bosluk-xs);
}

/* Sikca sorulan sorular */
.sss-bolum {
    margin-bottom: var(--bosluk-l);
}

.sss-bolum__baslik {
    font-size: var(--olcek-orta);
    margin-bottom: var(--bosluk-s);
    color: var(--renk-metin-orta);
}

.sss-liste {
    display: grid;
    gap: .3rem;
}

.sss {
    background: var(--renk-yuzey);
    border: 1px solid var(--renk-cizgi);
    border-radius: var(--yuvarlak);
    overflow: hidden;
}

.sss__soru {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--bosluk-s);
    padding: var(--bosluk-s) var(--bosluk-m);
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    transition: background-color var(--gecis);
}

.sss__soru::-webkit-details-marker {
    display: none;
}

.sss__soru:hover {
    background: var(--renk-yuzey-sicak);
}

.sss__isaret {
    display: grid;
    place-items: center;
    color: var(--renk-metin-soluk);
    transition: transform var(--gecis);
    flex-shrink: 0;
}

.sss[open] .sss__isaret {
    transform: rotate(90deg);
    color: var(--renk-birincil-koyu);
}

.sss__cevap {
    padding: var(--bosluk-m);
    color: var(--renk-metin-orta);
    font-size: var(--olcek-kucuk);
    line-height: 1.7;
}

/* Iletisim sayfasi */
.iletisim {
    display: grid;
    gap: var(--bosluk-m);
    align-items: start;
}

.iletisim__yan {
    display: grid;
    gap: var(--bosluk-xs);
}

.iletisim__yan .kutu {
    padding: var(--bosluk-s) var(--bosluk-m);
}

.iletisim__yan .kutu__baslik {
    font-size: var(--olcek-normal);
    margin-bottom: .4rem;
}

/* ---------------------------------------------------------------
   16. Vitrin — kaydirmali profil destesi

   Iki gorunum tek isaretlemeden cikar:
   - Betik yokken .vitrin__deste sirali bir izgaradir, kartlar alt alta.
   - main.js kapsayiciya .vitrin--hazir eklediginde kartlar ust uste
     yiginlanir ve yalnizca aktif kart (bir de arkasindaki) gorunur.
   Gorunmeyen kartlar display:none oldugu icin fotograflari da
   indirilmez — 20 kartlik deste tek foto agirliginda acilir.
   --------------------------------------------------------------- */
.vitrin {
    padding: var(--bosluk-s) var(--bosluk-s) var(--bosluk-l);
}

/* Baslik ekranda yer kaplamaz — kart sahneyi bastan basa alsin diye.
   Belge yapisi ve ekran okuyucu icin DOM'da duruyor. */
.vitrin__h1 {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.vitrin__sahne {
    position: relative;
    width: 100%;
    max-width: 27rem;
    margin-inline: auto;
}

/* Sabit modda sahne kalan bosluğun tamamini alir; cok uzun ekranlarda
   asiri uzamasin diye tavan konur ve artan bosluk ustune altina dagitilir */
.govde--sabit .vitrin__sahne {
    flex: 1 1 auto;
    min-height: 0;
    max-height: 52rem;
    margin-block: auto;
}

.vitrin__deste {
    display: grid;
    gap: var(--bosluk-m);
}

/* --- Deste modu --- */
.vitrin--hazir .vitrin__deste {
    position: relative;
    display: block;
    /* Yukseklik sahneden gelir — sabit bir vh hesabi yapilmaz */
    height: 100%;
    /* Dikey kaydirma tarayicida kalsin, yatay hareket bize gelsin */
    touch-action: pan-y;
}

/* Yukaridaki display kurali genel [hidden] kuralindan daha ozgul kaldigi
   icin deste bitince gizlenmiyordu — burada acikca geri aliniyor */
.vitrin--hazir .vitrin__deste[hidden] {
    display: none;
}

.vitrin--hazir .vitrin-kart {
    position: absolute;
    inset: 0;
    display: none;
    /* Yukseklik desteden gelir; liste modundaki foto orani burada gecersiz */
    aspect-ratio: auto;
}

.vitrin--hazir .vitrin-kart--aktif,
.vitrin--hazir .vitrin-kart--arka {
    display: block;
}

/* Arkadaki kart yalnizca "deste var" hissini verir; tiklanamaz.
   z-index sart: DOM'da sonra geldigi icin aksi halde aktif kartin
   ustune cizilir ve iki profil ic ice okunur.

   Saydamlik BILEREK kullanilmiyor. opacity ile geri cekildiginde altindaki
   sayfa zemini kartin icinden gorunuyor, yavas kaydirmada iki profil
   birbirine karismis gibi okunuyordu. Geri planda kalma hissi olcek ve
   karartmayla veriliyor — ikisi de kartin opakligini bozmaz. */
.vitrin--hazir .vitrin-kart--arka {
    z-index: 1;
    transform: scale(.94) translateY(1.15rem);
    filter: brightness(.78);
    pointer-events: none;
}

.vitrin--hazir .vitrin-kart--aktif {
    z-index: 2;
    cursor: grab;
    transition: transform 260ms cubic-bezier(.22, .61, .36, 1), opacity 220ms;
    will-change: transform;
}

/* Parmak kartin uzerindeyken gecis kapanir — hareket birebir izlensin */
.vitrin--hazir .vitrin-kart--suruklenen {
    cursor: grabbing;
    transition: none;
}

/* --- Kart --- */
.vitrin-kart {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: var(--yuvarlak);
    background: var(--renk-zemin-alt);
    box-shadow: var(--golge-kart);
    isolation: isolate;
    -webkit-user-select: none;
    user-select: none;
}

.vitrin-kart__foto {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    -webkit-user-drag: none;
}

/* Fotografsiz profilde varsayilan avatar kartI kaplamasin */
.vitrin-kart__foto--bos {
    object-fit: contain;
    padding: 20%;
    background: var(--renk-birincil-acik);
}

.vitrin-kart__perde {
    position: absolute;
    inset: auto 0 0;
    height: 78%;
    background: linear-gradient(to top,
        rgb(26 19 17 / .94) 14%,
        rgb(26 19 17 / .74) 42%,
        rgb(26 19 17 / .1) 82%,
        transparent);
}

.vitrin-kart__bilgi {
    position: absolute;
    inset: auto 0 0;
    display: grid;
    gap: .55rem;
    padding: var(--bosluk-m);
    color: #fff;
}

.vitrin-kart__ad {
    font-size: var(--olcek-buyuk);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -.025em;
}

.vitrin-kart__ozet {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.vitrin-rozet {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .28rem .6rem;
    border: 1px solid rgb(255 255 255 / .24);
    border-radius: var(--yuvarlak-tam);
    background: rgb(255 255 255 / .16);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-size: .73rem;
    font-weight: 600;
    white-space: nowrap;
}

.vitrin-kart__baslik {
    color: rgb(255 255 255 / .86);
    font-size: var(--olcek-kucuk);
    line-height: 1.45;
}

.vitrin-kart__eylem {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
    margin-top: .2rem;
}

.vitrin-kart__buton {
    width: 100%;
    padding-inline: .5rem;
}

/* Hayalet buton acik zemin icin tanimli; koyu perde uzerinde ters cevrilir */
.vitrin-kart__eylem .buton--hayalet {
    border-color: rgb(255 255 255 / .38);
    background: rgb(255 255 255 / .14);
    color: #fff;
}

.vitrin-kart__eylem .buton--hayalet:hover {
    border-color: rgb(255 255 255 / .6);
    background: rgb(255 255 255 / .26);
}

/* --- Reklam karti ---
   Ikinci secici sart: deste modundaki ".vitrin--hazir .vitrin-kart--aktif"
   kurali display:block veriyor ve tek sinifli secicimi eziyordu. */
.vitrin-kart--reklam,
.vitrin--hazir .vitrin-kart--reklam {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: var(--bosluk-s);
    /* Ust pay yuzen katman (sayac + filtre) kadar fazla: reklam icerigi
       onlarin altina binmesin */
    padding: calc(2 * var(--bosluk-s) + 2.35rem) var(--bosluk-m) var(--bosluk-m);
    border: 1px solid var(--renk-cizgi);
    background: var(--renk-yuzey);
}

.vitrin-kart__reklam-etiket {
    justify-self: start;
    padding: .2rem .6rem;
    border-radius: var(--yuvarlak-tam);
    background: var(--renk-zemin-alt);
    color: var(--renk-metin-soluk);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.vitrin-kart__reklam-kutu {
    display: grid;
    place-items: center;
    min-height: 0;
    overflow: hidden;
}

/* Reklam birimi kartin disina tasmasin */
.vitrin-kart__reklam-kutu :is(img, iframe, ins, div) {
    max-width: 100%;
}

.vitrin-kart__gec {
    width: 100%;
}

/* --- Kartin uzerinde yuzen katman: sayac ve filtre --- */
.vitrin__katman {
    position: absolute;
    top: var(--bosluk-s);
    left: var(--bosluk-s);
    right: var(--bosluk-s);
    /* Aktif kart z-index 2; katman onun da ustunde durmali */
    z-index: 3;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--bosluk-xs);
    /* Yalnizca kendi cocuklari tiklanabilir olsun, arada kalan bosluk
       kaydirma hareketini kartla paylassin */
    pointer-events: none;
}

.vitrin__katman > * {
    pointer-events: auto;
}

/* Ikisi de fotograf uzerinde duruyor: koyu cam, beyaz metin */
.vitrin__sayac,
.vitrin__filtre {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    height: 2.35rem;
    padding-inline: .8rem;
    border: 1px solid rgb(255 255 255 / .24);
    border-radius: var(--yuvarlak-tam);
    background: rgb(26 19 17 / .5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #fff;
    font-size: .78rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.vitrin__filtre {
    position: relative;
    cursor: pointer;
    transition: background-color var(--gecis), border-color var(--gecis);
}

.vitrin__filtre:hover {
    border-color: rgb(255 255 255 / .5);
    background: rgb(26 19 17 / .68);
}

.vitrin__filtre-sayi {
    display: grid;
    place-items: center;
    min-width: 1.2rem;
    height: 1.2rem;
    padding-inline: .25rem;
    border-radius: var(--yuvarlak-tam);
    background: var(--renk-birincil-koyu);
    font-size: .68rem;
}

/* Kaydirma ipucu — kartin ust ortasinda, ilk gecise kadar */
.vitrin__ipucu {
    position: absolute;
    top: calc(var(--bosluk-s) + 3.1rem);
    left: 50%;
    z-index: 3;
    max-width: calc(100% - 2 * var(--bosluk-m));
    transform: translateX(-50%);
    padding: .38rem .85rem;
    border-radius: var(--yuvarlak-tam);
    background: rgb(26 19 17 / .68);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
    font-size: .72rem;
    font-weight: 600;
    text-align: center;
    pointer-events: none;
    animation: vitrin-ipucu 260ms ease both;
}

@keyframes vitrin-ipucu {
    from { opacity: 0; transform: translate(-50%, -.4rem); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

/* --- Deste sonu --- */
.govde--sabit .vitrin__son {
    /* Sahne gizlendikten sonra kalan boslukta dikeyde ortalanir */
    margin-block: auto;
}

.vitrin__son {
    display: grid;
    justify-items: center;
    gap: var(--bosluk-s);
    max-width: 27rem;
    margin-inline: auto;
    padding: var(--bosluk-l) var(--bosluk-m);
    border: 1px solid var(--renk-cizgi);
    border-radius: var(--yuvarlak);
    background: var(--renk-yuzey);
    color: var(--renk-metin-orta);
    text-align: center;
}

.vitrin__son svg {
    color: var(--renk-basari);
}

.vitrin__son-baslik {
    color: var(--renk-metin);
    font-weight: 700;
}

.vitrin__noscript {
    max-width: 25rem;
    margin: var(--bosluk-m) auto 0;
    color: var(--renk-metin-soluk);
    font-size: var(--olcek-kucuk);
    text-align: center;
}

/* ---------------------------------------------------------------
   17. Orta ekran (tablet)
   --------------------------------------------------------------- */
@media (min-width: 640px) {
    .adimlar {
        grid-template-columns: repeat(3, 1fr);
    }

    .altbilgi__ic {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sosyal-alanlar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .alan--ucLu {
        grid-template-columns: repeat(3, 1fr);
    }

    .secim-liste {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Tablette profil kartinda biraz daha nefes payi */
    .detay__basi {
        padding: var(--bosluk-l);
    }

    .detay__foto {
        width: 6.5rem;
        height: 6.5rem;
    }
}

/* ---------------------------------------------------------------
   18. Genis ekran (masaustu) — tabbar gizlenir, ust menu acilir
   --------------------------------------------------------------- */
@media (min-width: 768px) {
    .tabbar {
        display: none;
    }

    .govde--tabbarli .ana,
    .govde--tabbarli .altbilgi {
        padding-bottom: 0;
    }

    .govde--tabbarli .ana {
        padding-bottom: var(--bosluk-xl);
    }

    /* Tabbar da alt bilgi de yok — sayfa kendi payini birakir */
    .govde--altbilgisiz .ana {
        padding-bottom: var(--bosluk-m);
    }

    .ustbar__menu {
        display: flex;
        align-items: center;
        gap: var(--bosluk-m);
    }

    .ustbar__eylem {
        display: flex;
        align-items: center;
        gap: var(--bosluk-xs);
    }
}

@media (min-width: 960px) {
    .kahraman__ic {
        grid-template-columns: 1.15fr .85fr;
        align-items: center;
        gap: var(--bosluk-xl);
    }

    /* Profil detayi: solda kart, sagda icerik.
       Dar sutunda fotograf ile isim alt alta ve ortali durur. */
    .detay-duzen {
        grid-template-columns: 21rem minmax(0, 1fr);
        column-gap: var(--bosluk-l);
    }

    .detay__kimlik {
        flex-direction: column;
        text-align: center;
        gap: var(--bosluk-xs);
    }

    .detay__foto {
        width: 9rem;
        height: 9rem;
    }

    .detay-yan .rozet-liste,
    .detay-yan .detay__eylem,
    .detay-yan .paylas-liste {
        justify-content: center;
    }

    .detay-yan .detay__no {
        text-align: center;
    }

    /* Ana eylem (mesaj gonder / duzenle) sutunu tam kaplasin */
    .detay-yan .detay__eylem > .buton:first-child {
        width: 100%;
    }

    .detay-ana .detay__bolum:first-child {
        margin-top: 0;
    }

    /* Panelde menu sol sutuna gecer */
    .panel {
        grid-template-columns: 15rem 1fr;
        gap: var(--bosluk-l);
        align-items: start;
    }

    .panel-menu {
        flex-direction: column;
        overflow: visible;
        position: sticky;
        top: 5rem;
    }

    .panel-menu__oge {
        justify-content: flex-start;
        border-radius: var(--yuvarlak-kucuk);
    }

    /* Alt bilgi: marka + uc baglanti sutunu yan yana */
    .altbilgi__ic {
        grid-template-columns: 1.6fr repeat(3, minmax(0, 1fr));
    }

    /* Filtre paneli sol sutuna yerlesir, acilir panel davranisi kapanir.
       Satirlar "auto 1fr" olarak tanimlanir: filtre iki satiri kapsadigi icin
       fazla yuksekligi esnek (1fr) satira aktarilir. Aksi halde fazlalik iki
       satira bolusturulur, ust satir buyur ve sonuc listesi asagi kayar. */
    .liste-duzen {
        grid-template-columns: 17rem minmax(0, 1fr);
        grid-template-rows: auto 1fr;
        column-gap: var(--bosluk-l);
    }

    .liste-arac {
        grid-area: 1 / 2 / 2 / 3;
    }

    /* Bu blok yalnizca liste sayfasi icin gecerli. Vitrinde sol sutun yok;
       oradaki panel her genislikte alttan acilan panel olarak kalir. */
    .liste-duzen .filtre {
        grid-area: 1 / 1 / 3 / 2;
        align-self: start;
        position: sticky;
        top: 5rem;
        /* Ust bar z-index 40; panel bunun ALTINDA kalmali.
           Mobil kuralindaki 61 degeri burada mutlaka sifirlanir. */
        z-index: 1;
        /* Masaustunde panel kendi icinde kaydirilmaz */
        max-height: none;
        overflow: visible;
        transform: none;
        visibility: visible;
        border: 1px solid var(--renk-cizgi);
        border-radius: var(--yuvarlak);
        box-shadow: var(--golge-yumusak);
        padding: var(--bosluk-m);
    }

    .liste-sonuc {
        grid-area: 2 / 2 / 3 / 3;
        align-self: start;
    }

    .liste-arac .filtre-ac,
    .liste-duzen .filtre__kapat,
    .liste-duzen .filtre-perde {
        display: none;
    }

    /* Yonetim panelinde menu sabit sol sutuna gecer — tek satir, iki sutun */
    .yonetim {
        grid-template-columns: 15rem 1fr;
        grid-template-rows: 1fr;
    }

    .yonetim__yan {
        position: sticky;
        top: 0;
        height: 100vh;
        border-bottom: 0;
        border-right: 1px solid var(--renk-cizgi);
        padding: var(--bosluk-m);
    }

    /* Genis ekranda menu her zaman acik: hamburger gizlenir ve
       [hidden] niteligi gorunurlugu etkilemez */
    .yonetim-hamburger {
        display: none;
    }

    .yonetim__menu-govde,
    .yonetim__menu-govde[hidden] {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        min-height: 0;
    }

    .yonetim__alt {
        margin-top: auto;
    }

    .yonetim-menu__oge {
        justify-content: flex-start;
    }

    .yonetim-menu__sayi {
        margin-left: auto;
    }

    .yonetim__icerik {
        padding: var(--bosluk-l);
    }

    .kelime-izgara {
        grid-template-columns: 1fr 1fr;
    }

    .iletisim {
        grid-template-columns: 1.5fr 1fr;
        gap: var(--bosluk-l);
    }
}

/* ---------------------------------------------------------------
   19. Erisilebilirlik ve hareket tercihi
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* Sayfa gecisi animasyonu bilincli olarak kapali.
   View Transitions her gezinmede yeni sayfayi bekletip soluklastiriyor,
   bu da yuklemeyi oldugundan yavas hissettiriyordu. */