:root {
    --zemin: #f2f2f2;
    --kart: #fff;
    --yazi: #2d2a29;
    --soluk: #8a8a8a;
    --cizgi: #d9d9d9;
    --hap: #ececec;
    /* Logo renkleri: mavi #00a0e3, koyu #2d2a29 */
    --ana: #00a0e3;
    --ana-koyu: #0079ad;
    --kirmizi: #d9534f;
    --yesil: #3aa635;
    --ust: 70px;
}

* { box-sizing: border-box; }
body {
    margin: 0;
    background: var(--kart);
    color: var(--yazi);
    font: 14px/1.5 Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
button, input, select, textarea { font-family: inherit; }
a { color: var(--ana-koyu); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.08rem; margin: 0 0 16px; }
h2 { font-size: .95rem; margin: 28px 0 12px; }
.ikon { width: 1.25em; height: 1.25em; flex: none; vertical-align: -0.25em; }

/* ---- Üst bar ---- */
.ust-bar {
    position: sticky; top: 0; z-index: 10; height: var(--ust);
    /* Sayfa düzeniyle aynı sütunlar: arama kutusu orta sütunun tam ortasına gelir. */
    display: grid; grid-template-columns: 265px minmax(0, 1fr) 490px; align-items: center;
    background: var(--kart); border-bottom: 1px solid var(--cizgi);
}
.logo { display: flex; padding-left: 40px; }
.logo img { height: 42px; width: auto; display: block; }
.logo .logo-ikon { display: none; } /* yalnızca telefonda görünür */
.arama-kutu { flex: 1; display: flex; justify-content: center; min-width: 0; }
.arama-kutu input {
    width: 100%; max-width: 590px; height: 38px; padding: 0 42px;
    border: 0; border-radius: 19px; text-align: center; font-size: 14px;
    /* Sol kenarda küçük büyüteç ikonu */
    background: var(--zemin) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8a8a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat 18px center / 14px;
}
.arama-kutu input:focus { outline: 2px solid var(--ana); text-align: left; }
.ikonlu, .btn.ikonlu { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
/* Üst bardaki "Giriş Yap": Üye Ol ile aynı boyda, 2px mavi çerçeveli */
.ust-bar .sag a.ikonlu:not(.btn) {
    padding: 6px 16px; border: 2px solid var(--ana); border-radius: 18px;
    color: var(--ana-koyu); font-size: 13px; font-weight: 600; transition: background-color .15s ease, color .15s ease;
}
.ust-bar .sag a.ikonlu:not(.btn):hover { background: var(--ana); color: #fff; text-decoration: none; }
.ikonlu .ikon { font-size: 13px; stroke-width: 2; }
.ust-bar .sag { display: flex; align-items: center; justify-content: flex-end; gap: 18px; padding-right: 40px; }
/* "İtiraf Et": Üye Ol düğmesi gibi dolu mavi, beyaz ikon ve yazı */
.itiraf-et {
    display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 18px; border-radius: 18px; margin-right: 6px;
    background: var(--ana); color: #fff; font-size: 13px; font-weight: 600; transition: background-color .15s ease;
}
.itiraf-et .ikon { color: #fff; stroke-width: 2; }
.itiraf-et:hover, .itiraf-et:focus-visible { background: var(--ana-koyu); color: #fff; text-decoration: none; }
.ikon-btn { position: relative; display: inline-flex; color: var(--yazi); font-size: 16px; }
/* Sayaç, ikonun sol altında küçük bir daire olarak durur (profil resmindeki yeşil nokta gibi). */
.ikon-btn .rozet {
    position: absolute; left: -8px; bottom: -7px; min-width: 16px; height: 16px; padding: 0 4px;
    display: flex; align-items: center; justify-content: center; box-sizing: border-box;
    border: 2px solid #fff; border-radius: 8px; font-size: 9px; line-height: 1;
}
.rozet { background: var(--kirmizi); color: #fff; border-radius: 10px; padding: 1px 6px; font-size: 11px; font-weight: 600; line-height: 1.4; }

.hesap, .konum-sec { position: relative; }
.hesap summary, .konum-sec summary { list-style: none; cursor: pointer; }
.hesap summary::-webkit-details-marker, .konum-sec summary::-webkit-details-marker { display: none; }
.hesap summary { position: relative; display: flex; margin-left: 10px; }
.cevrimici { position: absolute; left: 0; bottom: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--yesil); border: 2px solid #fff; }
.menu {
    position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; min-width: 200px; padding: 6px;
    background: var(--kart); border: 1px solid var(--cizgi); border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, .1);
}
.menu a, .menu button {
    display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px;
    background: none; color: var(--yazi); font-size: 13px; text-align: left; cursor: pointer; white-space: nowrap;
}
.menu a:hover, .menu button:hover, .menu a.aktif { background: var(--zemin); text-decoration: none; }
.menu form { margin: 0; }
.menu .ben { font-weight: 600; }

/* ---- Sayfa düzeni ---- */
.duzen { display: grid; grid-template-columns: 265px minmax(0, 1fr) 490px; min-height: calc(100vh - var(--ust)); }
.duzen.tam { grid-template-columns: minmax(0, 1fr); }
.duzen.tam .sag-sutun { display: none; }
.duzen.tam .ic { max-width: 1400px; }
main { background: var(--zemin); border-left: 1px solid var(--cizgi); border-right: 1px solid var(--cizgi); min-width: 0; }
.ic { max-width: 1028px; margin: 0 auto; padding: 44px 24px 60px; transition: opacity .18s ease; }
.ic.soluyor { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .ic { transition: none; } }

.sol { padding: 20px 0; }
.kategoriler { display: flex; flex-direction: column; gap: 4px; padding: 0 36px 28px 38px; border-bottom: 1px solid var(--cizgi); }
.kategoriler a, .profil-kutu > a {
    display: flex; align-items: center; gap: 10px; padding: 7px 12px; border-radius: 6px; color: var(--yazi); font-size: 13px;
}
.kategoriler a:hover, .kategoriler a.aktif, .profil-kutu > a:hover { background: var(--zemin); text-decoration: none; }
.kategoriler .ikon, .profil-kutu > a .ikon { font-size: 14.5px; }
/* Misafirde profil bölümü yoktur; kategorilerin altındaki ayırıcı çizgi de gereksizdir. */
.kategoriler:last-child { border-bottom: 0; }
.profil-kutu { padding: 22px 36px 0 38px; display: flex; flex-direction: column; gap: 4px; }
.profil-kutu h3 { margin: 0 0 12px; font-size: 9px; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; color: var(--soluk); }
.profil-kutu p { margin: 0 0 12px; font-size: 12px; color: var(--soluk); }
.profil-kutu .kimlik { padding-left: 0; margin-bottom: 6px; font-size: 13px; }
.profil-kutu .kimlik:hover { background: none; }
.profil-kutu .btn { align-self: flex-start; }

/* ---- Kurumsal menü: geniş ekranda sağ sütunun altında, sayfa kayarken yerinde durur ---- */
.sag-sutun { position: sticky; top: var(--ust); height: calc(100vh - var(--ust)); display: flex; flex-direction: column; justify-content: flex-end; }
.alt-menu { padding-bottom: 48px; }
.alt-menu nav { display: flex; flex-direction: column; gap: 4px; padding: 22px 36px; border-top: 1px solid var(--cizgi); border-bottom: 1px solid var(--cizgi); }
.alt-menu nav a { display: flex; align-items: center; gap: 10px; padding: 5px 0; color: #999999; font-size: 12px; }
.alt-menu nav a .ikon { font-size: 12.5px; }
.alt-menu nav a:hover, .alt-menu nav a.aktif { color: var(--ana); text-decoration: none; }
.alt-menu p { margin: 0; padding: 40px 36px 0; font-size: 10px; line-height: 1.5; color: var(--soluk); }
.alt-menu p b { font-weight: 500; color: var(--ana); }
.alt-menu.dar { display: none; }
.yazi { padding: 28px 32px; line-height: 1.7; }

/* ---- İletişim sayfası ---- */
.iletisim { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 20px; align-items: start; }
.iletisim-bilgi { display: flex; flex-direction: column; gap: 22px; padding: 24px; }
.iletisim-bilgi > div { display: flex; gap: 14px; align-items: flex-start; }
.iletisim-bilgi .ikon { flex: none; width: 38px; height: 38px; padding: 9px; border-radius: 50%; background: #e1f3fc; color: var(--ana); }
.iletisim-bilgi p, .kutu.iletisim-bilgi p:last-child { margin: 0; color: var(--yazi); line-height: 1.5; overflow-wrap: anywhere; }
.iletisim-bilgi b { display: block; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--soluk); }
.form.genis.iletisim-form { margin-top: 0; }
.gizli-alan { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.yazi h1 { margin-bottom: 20px; }
.yazi h2 { margin: 26px 0 8px; font-size: 15px; font-weight: 600; color: var(--yazi); }
.yazi p { margin: 0 0 10px; }
.yazi ul { margin: 0 0 10px; padding-left: 22px; }
.yazi li { margin-bottom: 2px; }

/* ---- Liste üstü: sekmeler ve konum ---- */
.liste-ust { display: flex; align-items: center; gap: 16px; padding: 0 54px 12px 96px; }
.sekmeler { display: flex; gap: 5px; flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
.sekmeler a { display: inline-flex; align-items: center; gap: 5px; padding: 7px 10px; border-radius: 10px; background: #e6e6e6; color: var(--yazi); font-size: 13px; font-weight: 500; }
.sekmeler a.aktif { background: var(--ana); color: #fff; }
.sekmeler a:hover { color: var(--ana); text-decoration: none; }
.sekmeler a.aktif:hover { color: #fff; }
.sekmeler a .ikon { font-size: 12px; }
.konum-sec summary {
    display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 12px 0 14px;
    background: var(--ana); color: #fff; border-radius: 11px; font-size: 12px; font-weight: 600; white-space: nowrap;
}
.konum-sec summary .ikon { font-size: 11px; stroke-width: 3; }
/* Sıralama açılır listesi, kategori menüsü düğmesi ve alt sekme çubuğu yalnızca telefonda görünür */
.sirala-sec, .menu-btn, .alt-nav, .menu-perde { display: none; }
.sirala-sec { position: relative; }
.sirala-sec summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; color: var(--ana); font-size: 15px; font-weight: 600; }
.sirala-sec summary::-webkit-details-marker { display: none; }
.sirala-sec summary .ikon { font-size: 12px; stroke-width: 2.6; }
.sirala-sec summary .ikon:first-child { font-size: 14px; stroke-width: 2; }
.sirala-sec .menu a { display: flex; align-items: center; gap: 9px; }
.sirala-sec .menu a .ikon { font-size: 14px; }
.menu-btn { align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: var(--zemin); color: var(--yazi); font-size: 16px; cursor: pointer; }
.konum-sec .menu { max-height: 380px; overflow-y: auto; min-width: 190px; }
.bilgi { margin: 0 0 12px 96px; color: var(--soluk); }

/* ---- İtiraf kartı ---- */
.kart {
    display: flex; gap: 28px; padding: 24px; margin-bottom: 24px;
    background: var(--kart); border: 1px solid var(--cizgi); border-radius: 20px;
}
.kart-govde { flex: 1; min-width: 0; padding-right: 48px; }
/* İtirafın sahibine sağ üst köşede düzenle / sil */
.kart { position: relative; }
.kart-sahip { position: absolute; top: 16px; right: 16px; display: flex; gap: 6px; margin: 0; }
.kart-sahip a, .kart-sahip button { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: var(--hap); color: var(--soluk); font-size: 13px; cursor: pointer; }
.kart-sahip a:hover { background: var(--ana); color: #fff; text-decoration: none; }
.kart-sahip button:hover { background: var(--kirmizi); color: #fff; }
.kart.benim .meta { padding-right: 16px; }
.kart .meta { display: flex; flex-wrap: wrap; align-items: center; font-size: 11px; color: #555; }
.kart .meta > * + *::before { content: "·"; margin: 0 6px; color: var(--yazi); }
.kart .meta a { color: inherit; }
.kart .meta .yazar { font-size: 12px; font-weight: 500; color: var(--ana); }
.kart h1, .kart h2 { margin: 14px 0 0; font-size: 16px; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.kart h1 { font-size: 18px; margin-bottom: 6px; }
.kart h2 a { color: inherit; }
.kart p { margin: 2px 0 0; line-height: 1.45; overflow-wrap: anywhere; }
.devamini-oku { font-weight: 600; white-space: nowrap; }
.karakter-sayac { display: block; margin-top: -6px; text-align: right; font-size: 11px; font-weight: 400; color: var(--soluk); }
.karakter-sayac.yakin { color: #d9822b; }
.karakter-sayac.dolu { color: var(--kirmizi); font-weight: 600; }
.devam.acildi { animation: belir .25s ease; }
.eylemler { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 26px; }
.hap {
    display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 13px; border: 0; border-radius: 12px;
    background: var(--hap); color: var(--soluk); font-size: 14px; cursor: pointer;
}
.hap .ikon { font-size: 11px; }
.hap:hover { text-decoration: none; color: var(--yazi); }
.hap.arti.aktif { background: var(--ana); color: #fff; }
.hap.eksi.aktif { background: var(--kirmizi); color: #fff; }
.hap + .duz, .satir-sonu + .duz { margin-left: 36px; }
.satir-sonu { display: none; } /* telefonda Favori/Paylaş'ı alt satıra indirir */
.kart-avatar { flex: none; align-self: flex-start; }
.duz {
    display: inline-flex; align-items: center; gap: 7px; padding: 2px 4px; border: 0; background: none;
    color: var(--soluk); font-size: 12px; cursor: pointer;
}
.duz .ikon { font-size: 13px; }
.duz:hover { color: var(--yazi); text-decoration: none; }
.duz.fav.aktif { color: var(--kirmizi); }
/* Paylaş menüsü */
.paylas-kap { position: relative; display: inline-flex; }
.paylas-menu {
    position: absolute; z-index: 20; left: 0; top: calc(100% + 6px); min-width: 220px; padding: 6px;
    background: var(--kart); border: 1px solid var(--cizgi); border-radius: 14px; box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}
.paylas-menu.yukari { top: auto; bottom: calc(100% + 6px); }
.paylas-menu button {
    display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 0; border-radius: 9px;
    background: none; color: var(--yazi); font-size: 13px; text-align: left; white-space: nowrap; cursor: pointer;
}
.paylas-menu button:hover { background: var(--zemin); }
.paylas-menu button + button { box-shadow: 0 -1px 0 var(--cizgi); }
.paylas-menu .ikon { font-size: 15px; }
.paylas-menu .ikon.wa { color: #25d366; }
.duz.fav.aktif .ikon { fill: currentColor; }

/* ---- Avatar ---- */
.avatar {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 44px; height: 44px; border-radius: 50%; object-fit: cover; vertical-align: middle;
    background: #c9c9c9; color: #fff; font-size: 20px;
}
.avatar .ikon { vertical-align: 0; }
.avatar.kucuk { width: 22px; height: 22px; font-size: 11px; }
.avatar.buyuk { width: 112px; height: 112px; font-size: 52px; }

/* ---- Genel bileşenler ---- */
.btn {
    display: inline-block; background: var(--ana); color: #fff; border: 0;
    padding: 8px 18px; border-radius: 18px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.btn:hover { background: var(--ana-koyu); text-decoration: none; }
.btn.ikincil { background: none; color: var(--ana-koyu); box-shadow: inset 0 0 0 1px var(--ana); }
.btn.ikincil:hover { background: var(--ana); color: #fff; }
.link { background: none; border: 0; padding: 0; color: var(--ana-koyu); font-size: inherit; cursor: pointer; }
.link:hover { text-decoration: underline; }
.link.tehlike { color: var(--kirmizi); }

.yorum, .sohbet, .bildirim, .form, .kutu, .profil {
    background: var(--kart); border: 1px solid var(--cizgi); border-radius: 16px;
}
.kutu { padding: 20px 24px; }
.kutu p { margin: 0 0 12px; }
.kutu p:last-child { margin: 8px 0 0; color: var(--soluk); }
.yorum { padding: 14px 20px; margin-bottom: 10px; }
.yorum .meta { font-size: 12px; color: var(--soluk); }
.yorum .meta > span::before { content: "·"; margin: 0 6px; }
.yorum .meta .avatar + a { margin-left: 10px; }
.yorum p { margin: 6px 0 0; overflow-wrap: anywhere; }
/* İtiraf detayı: itiraf ve yorumlar tek kartta. Yorumlar ayrı kutu değildir; ince çizgilerle
   ayrılır ve itirafın metin hizasından (avatarın sağından) bir kademe içeride başlar. */
.itiraf-tam { background: var(--kart); border: 1px solid var(--cizgi); border-radius: 20px; margin-bottom: 24px; }
.itiraf-tam .kart { border: 0; border-radius: 0; background: none; margin: 0; padding-bottom: 20px; }
.itiraf-tam .sil-form { margin: -8px 0 14px 96px; }
.yorum-kap { margin: 0 24px 0 96px; padding: 4px 0 24px; border-top: 1px solid var(--cizgi); }
.yorum-kap h2 { margin: 18px 0 10px; font-size: 14px; font-weight: 600; }
.yorum-kap .yorum { background: #f3f3f3; border: 0; border-radius: 10px; margin: 8px 0 0; padding: 12px 16px 12px 50px; }
.yorum-kap .yorum .meta { margin-left: -34px; }
.yorum-kap .yorum:target { background: #e1f3fc; }
.yorum-kap .bos { padding: 14px 16px; margin: 0; background: #f3f3f3; border: 0; border-radius: 10px; }
.yorum-kap .form { background: none; border: 0; border-radius: 0; padding: 0; margin-top: 18px; gap: 10px; }
.yorum-kap .hata { margin: 14px 0 0; }
.yorum-giris { margin: 16px 0 0; color: var(--soluk); }
.yorum .eylemler { margin-top: 10px; }
.yorum .hap { height: 22px; padding: 0 11px; font-size: 12px; background: #fff; }
.yorum .hap.arti.aktif { background: var(--ana); }
.yorum .hap.eksi.aktif { background: var(--kirmizi); }
/* Yeni gönderilen yorum hafifçe belirir */
.yorum.belirdi { animation: belir .45s ease both; }
@keyframes belir { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .yorum.belirdi { animation: none; } }
.yorum .sahip { margin-left: 6px; padding: 1px 8px; border-radius: 9px; background: #e1f3fc; color: #00618c; font-size: 10px; font-weight: 600; }
.bilgi-not { color: var(--soluk); font-size: 12px; }

.form { padding: 24px; max-width: 440px; display: flex; flex-direction: column; gap: 14px; }
.form.genis { max-width: none; margin-top: 16px; }
/* Profil Ayarları: şifre bölümü de üstteki profil bölümüyle aynı (tam) genişlikte */
.ayar-kap .form { max-width: none; }
/* Giriş, Üye Ol ve şifre sayfaları: form sayfanın ortasında */
.orta { max-width: 440px; margin: 0 auto; min-height: calc(100vh - var(--ust) - 110px); display: flex; flex-direction: column; justify-content: center; }
/* Ortalanmış form sayfalarında bilgi mesajı formla birlikte ortalanır: formdan biraz geniş, başlığın 100px üstünde */
.ic:has(> .orta) { display: flex; flex-direction: column; justify-content: center; min-height: calc(100vh - var(--ust) - 110px); }
.ic:has(> .orta) > .orta { width: 100%; min-height: 0; }
.ic:has(> .orta) > .uyari { align-self: center; width: 100%; max-width: 540px; margin: 0 0 100px; text-align: center; }
.orta h1 { text-align: center; }
.orta .form { max-width: none; }
/* Bu formlarda ana düğme, Google düğmesi gibi tam genişlikte ve yazısı ortada */
/* Formun en altındaki "Hesabın yok mu? Üye ol" satırı: küçük ve ortalı */
.orta .form > p:last-child { text-align: center; font-size: 12px; }
.orta .form .btn { align-self: stretch; height: 40px; padding: 0 18px; border-radius: 20px; text-align: center; }
.captcha { display: flex; align-items: center; gap: 12px; }
.captcha img { border: 1px solid var(--cizgi); border-radius: 10px; }
.captcha .link { font-size: 12px; font-weight: 400; }
.yeniden-gonder { margin: -6px 0 14px; text-align: center; font-size: 13px; }
/* "veya" ayırıcısı ve Google düğmesi */
.veya { display: flex; align-items: center; gap: 12px; color: var(--soluk); font-size: 12px; }
.veya::before, .veya::after { content: ""; flex: 1; height: 1px; background: var(--cizgi); }
.google-btn {
    display: flex; align-items: center; justify-content: center; gap: 10px; height: 40px; padding: 0 18px;
    border: 1px solid var(--cizgi); border-radius: 20px; background: #fff; color: var(--yazi); font-size: 13px; font-weight: 600;
}
.google-btn:hover { background: var(--zemin); text-decoration: none; }
.google-btn svg { width: 18px; height: 18px; flex: none; }
.giris-alt { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: -4px; font-size: 13px; }
.form .giris-alt label.onay { font-size: 13px; }
.form label { display: flex; flex-direction: column; gap: 5px; font-weight: 600; font-size: 13px; }
.form label.onay { flex-direction: row; align-items: center; gap: 8px; font-weight: 400; }
.form .btn { align-self: flex-start; }
/* Koşulları kabul satırı: küçük ve soluk */
.form label.kosul { font-size: 11px; color: #999; }
.form label.kosul a { color: #999; text-decoration: underline; }
.form label.kosul a:hover { color: var(--ana); }
.form p { margin: 0; }
input:not([type=checkbox]):not([type=radio]):not([type=search]), select, textarea {
    font-size: 14px; padding: 9px 12px; border: 1px solid var(--cizgi); border-radius: 10px;
    background: #fafafa; color: var(--yazi); width: 100%;
}
textarea { resize: vertical; line-height: 1.5; }

/* Seçim kutuları: tarayıcının oku yerine kendi okumuz, sağ kenardan 14px içeride. */
select {
    appearance: none; -webkit-appearance: none; padding-right: 42px; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232d2a29' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 14px center; background-size: 16px;
}

/* İkonlu açılır seçim listesi (itiraf formundaki kategori) */
.alan { display: flex; flex-direction: column; gap: 5px; }
.etiket { font-weight: 600; font-size: 13px; }
.etiket small { font-size: 11px; }
.secim { position: relative; }
.secim summary {
    list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer;
    font-size: 14px; padding: 9px 14px 9px 12px; border: 1px solid var(--cizgi); border-radius: 10px; background: #fafafa;
}
.secim summary::-webkit-details-marker { display: none; }
.secim summary > .ikon { font-size: 13px; stroke-width: 2; }
.secim-deger, .secim-liste label span { display: flex; align-items: center; gap: 10px; }
.secim-liste {
    position: absolute; z-index: 15; left: 0; right: 0; top: calc(100% + 4px); padding: 6px; max-height: 300px; overflow-y: auto; overflow-x: hidden;
    background: var(--kart); border: 1px solid var(--cizgi); border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, .1);
}
.secim.yukari .secim-liste { top: auto; bottom: calc(100% + 4px); }
.form .secim-liste label { display: block; font-weight: 400; font-size: 14px; cursor: pointer; }
.secim-liste input { position: absolute; opacity: 0; pointer-events: none; }
.secim-liste label span { padding: 8px 10px; border-radius: 8px; }
.secim-liste label:hover span, .secim-liste input:focus-visible + span { background: var(--zemin); }
.secim-liste input:checked + span { background: var(--ana); color: #fff; }
.sifre-kap { position: relative; display: block; }
.sifre-kap input { padding-right: 44px; }
.sifre-goz {
    position: absolute; top: 0; right: 0; height: 100%; width: 44px; display: flex; align-items: center; justify-content: center;
    border: 0; background: none; color: var(--soluk); font-size: 16px; cursor: pointer;
}
.sifre-goz:hover { color: var(--yazi); }
small { color: var(--soluk); font-weight: 400; }

.hata, .uyari { padding: 10px 16px; border-radius: 12px; margin-bottom: 14px; }
.hata { background: #fbe9e8; color: #a12b27; }
.uyari { background: #e1f3fc; color: #00618c; }
/* Site mesajları ("henüz itiraf yok", "bulunamadı" vb.): açık renkli, yuvarlak köşeli kutu */
.bos {
    margin: 0 0 16px; padding: 22px 24px; text-align: center; color: var(--soluk);
    background: var(--kart); border: 1px solid var(--cizgi); border-radius: 16px;
}
/* Zaten bir kartın içindeyken ikinci bir çerçeve çizilmez */
.yazi .bos, .m-kisiler .bos, .sohbet-kutu .bos { background: none; border: 0; border-radius: 0; }
.sohbet-kutu .bos { margin: auto; }
.m-kisiler .bos { text-align: left; }
.bilgi { display: inline-block; padding: 8px 16px; background: var(--kart); border: 1px solid var(--cizgi); border-radius: 16px; }
.sil-form { margin: -12px 0 8px 24px; font-size: 12px; }
.sayfalama { display: flex; justify-content: space-between; margin-top: 16px; }

/* ---- Profil ---- */
.profil { display: flex; gap: 22px; align-items: flex-start; padding: 24px; }
.profil h1 { margin-bottom: 4px; }
.profil p { margin: 4px 0 8px; overflow-wrap: anywhere; }
.profil .meta { font-size: 12px; color: var(--soluk); }
/* Profil kartı: kurumsal mavi zemin, beyaz yazı; düğmeler beyaz zeminli, mavi yazılı */
.profil { background: var(--ana); border-color: var(--ana); color: #fff; }
.profil .meta { color: rgba(255, 255, 255, .9); }
.profil .avatar { box-shadow: 0 0 0 3px rgba(255, 255, 255, .55); }
.profil .btn { background: #fff; color: var(--ana); }
.profil .btn:hover { background: #e1f3fc; color: var(--ana-koyu); }
.profil .btn.ikincil { background: none; color: #fff; box-shadow: inset 0 0 0 1px #fff; }
.profil .btn.ikincil:hover { background: #fff; color: var(--ana); }
.dugmeler { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.foto-satir { display: flex; gap: 18px; align-items: center; }
.foto-kap { position: relative; flex: none; display: flex; }
.foto-sil {
    position: absolute; right: 2px; bottom: 2px; width: 30px; height: 30px; padding: 0 0 2px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; border: 2px solid #fff;
    background: var(--kirmizi); color: #fff; font-size: 20px; line-height: 1; cursor: pointer;
}
.foto-sil:hover { background: #b93f3b; }

/* Bildirme penceresi */
.bildir-kutu { width: 420px; text-align: left; }
.bildir-kutu p { margin-bottom: 14px; }
.bildir-kutu .nedenler { display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; }
.bildir-kutu .nedenler label { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 8px; font-size: 13px; cursor: pointer; }
.bildir-kutu .nedenler input { flex: none; margin: 0; accent-color: var(--ana); }
.bildir-kutu .nedenler span { text-align: left; }
.bildir-kutu > form > p:first-child { text-align: left; }
.bildir-kutu .nedenler label:hover { background: var(--zemin); }
.bildir-kutu textarea { margin-bottom: 14px; }
.bildir-kutu .bildir-hata { margin: -4px 0 12px; color: var(--kirmizi); font-size: 13px; font-weight: 400; }
.bildir-kutu form > div:last-child { justify-content: flex-end; }
.duz.bildir:disabled { color: var(--yesil); cursor: default; }
.yorum .duz.bildir { margin-left: 8px; font-size: 11px; }
.btn.tehlike { background: var(--kirmizi); }
.btn.tehlike:hover { background: #b93f3b; }
.profil .btn.tehlike { background: var(--kirmizi); color: #fff; }
.m-engel { margin: 0; padding: 16px 20px; border-top: 1px solid var(--cizgi); color: var(--soluk); text-align: center; }
.hesap-sil p { color: var(--soluk); font-weight: 400; }
/* Evet / Hayır onay penceresi */
.onay-kutu { border: 0; border-radius: 18px; padding: 28px 32px 24px; width: 380px; max-width: calc(100vw - 32px); text-align: center; color: var(--yazi); box-shadow: 0 20px 60px rgba(0, 0, 0, .25); }
.onay-kutu::backdrop { background: rgba(45, 42, 41, .45); }
.onay-kutu p { margin: 0 0 22px; font-size: 15px; font-weight: 500; line-height: 1.5; }
.onay-kutu .onay-not { display: block; margin: -14px 0 22px; font-size: 12px; line-height: 1.5; color: var(--soluk); }
.onay-kutu .onay-not[hidden] { display: none; }
.onay-kutu div { display: flex; justify-content: center; gap: 10px; }
.onay-kutu .btn { min-width: 96px; padding: 9px 20px; }
/* ---- Misafir giriş penceresi ---- */
.giris-panel { position: relative; border: 0; border-radius: 22px; padding: 34px 32px 26px; width: 420px; max-width: calc(100vw - 32px); text-align: center; color: var(--yazi); box-shadow: 0 20px 60px rgba(0, 0, 0, .25); }
.giris-panel::backdrop { background: rgba(45, 42, 41, .45); }
.giris-panel .kapat { position: absolute; top: 12px; right: 14px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--zemin); color: var(--soluk); font-size: 22px; line-height: 1; cursor: pointer; }
.giris-panel .kapat:hover { color: var(--yazi); }
.giris-panel h2 { margin: 0 0 8px; font-size: 20px; font-weight: 700; }
.giris-panel .neden { margin: 0 0 22px; font-size: 13px; line-height: 1.5; color: var(--soluk); }
.panel-btn { position: relative; display: flex; align-items: center; justify-content: center; height: 52px; margin-top: 10px; border-radius: 26px; background: var(--zemin); color: var(--yazi); font-size: 15px; font-weight: 600; }
.panel-btn:hover { background: #e6e6e6; text-decoration: none; }
.panel-btn svg { position: absolute; left: 22px; top: 50%; width: 22px; height: 22px; transform: translateY(-50%); }
.panel-btn .ikon { font-size: 21px; color: var(--yazi); }
.giris-panel .kosul { margin: 18px 0 0; font-size: 11px; line-height: 1.6; color: #999; }
.giris-panel .kosul a { color: var(--ana-koyu); }
.giris-panel .hesap-var { margin: 18px 0 0; font-size: 14px; font-weight: 500; }
.giris-panel .hesap-var a { font-weight: 700; color: var(--ana); }
.giris-panel { max-height: 92vh; overflow-y: auto; }
.giris-panel .panel-gorunum[hidden] { display: none; }
.panel-form { padding: 0; margin: 4px 0 0; max-width: none; text-align: left; border: 0; background: none; }
.panel-form .btn { align-self: stretch; height: 46px; border-radius: 23px; font-size: 15px; }
.panel-form .gecis { margin: 4px 0 0; text-align: center; font-size: 13px; }
.panel-form .gecis a { font-weight: 600; }
.panel-bilgi { margin: 0 0 4px; white-space: pre-line; font-size: 13px; line-height: 1.5; }
.panel-bilgi[hidden] { display: none; }

/* Alt sayfa: telefonda pencereler ekranın altına yapışır ve alttan kayarak açılır */
@keyframes alttan { from { transform: translateY(100%); } to { transform: none; } }
@keyframes perde { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 820px) {
    dialog.alt-sayfa {
        position: fixed; inset: auto 0 0 0; margin: 0; width: 100%; max-width: 100%; max-height: 88vh; overflow-y: auto;
        border-radius: 24px 24px 0 0; padding: 12px 22px calc(26px + env(safe-area-inset-bottom));
        box-shadow: 0 -10px 40px rgba(0, 0, 0, .18); transition: transform .2s ease;
    }
    dialog.alt-sayfa[open] { animation: alttan .28s cubic-bezier(.2, .8, .3, 1); }
    dialog.alt-sayfa[open]::backdrop { animation: perde .28s ease; }
    /* Üstteki tutamaç: aşağı çekilebildiğini gösterir */
    dialog.alt-sayfa::before { content: ""; display: block; width: 42px; height: 5px; margin: 0 auto 20px; border-radius: 3px; background: #d9d9d9; }
    .giris-panel .kapat { top: 16px; right: 16px; }
    .giris-panel h2 { margin-top: 6px; font-size: 21px; }
    .onay-kutu.alt-sayfa div { gap: 10px; }
    .onay-kutu.alt-sayfa div .btn { flex: 1; height: 46px; border-radius: 23px; }
}
.foto-satir > div { display: flex; flex-direction: column; gap: 8px; min-width: 0; }

/* ---- Takip ---- */
.takip-btn .t-evet, .takip-btn.aktif .t-degil { display: none; }
.takip-btn .t-degil, .takip-btn.aktif .t-evet { display: inline-flex; align-items: center; gap: 7px; }
.takip-btn.aktif { background: none; color: var(--ana-koyu); box-shadow: inset 0 0 0 1px var(--ana); }
.profil .takip-btn.aktif { color: #fff; box-shadow: inset 0 0 0 1px #fff; }
.profil .takip-btn.aktif:hover { background: #fff; color: var(--ana); }
.takip-liste { display: flex; flex-direction: column; gap: 8px; }
/* Profildeki "Takip Ettikleri": profil fotoğrafı ve kullanıcı adından oluşan kutucuklar */
.takip-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; padding: 18px; background: var(--kart); border: 1px solid var(--cizgi); border-radius: 16px; }
.takip-izgara a { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 4px; border-radius: 12px; color: var(--yazi); font-size: 12px; min-width: 0; }
.takip-izgara a:hover { background: var(--zemin); text-decoration: none; }
.takip-izgara a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.takip-izgara .avatar { width: 52px; height: 52px; font-size: 24px; }
h2 small { font-size: 12px; font-weight: 400; }
.gizli-not { margin-left: 8px; padding: 2px 8px; border-radius: 9px; background: var(--hap); }
.takip-satir {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px;
    background: var(--kart); border: 1px solid var(--cizgi); border-radius: 16px; transition: opacity .2s ease;
}
.takip-satir.soluyor { opacity: 0; }
.takip-satir .kisi { display: flex; align-items: center; gap: 12px; min-width: 0; color: var(--yazi); }
.takip-satir .kisi:hover { text-decoration: none; }
.takip-satir .kisi span { display: flex; flex-direction: column; min-width: 0; }
.takip-satir .kisi b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }

/* ---- Mesajlar ve bildirimler ---- */
/* İki bölmeli mesajlaşma: solda kişiler, sağda konuşma */
.mesajlasma {
    display: grid; grid-template-columns: 300px minmax(0, 1fr); height: calc(100vh - var(--ust) - 104px); min-height: 420px;
    background: var(--kart); border: 1px solid var(--cizgi); border-radius: 20px; overflow: hidden;
}
.m-liste { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--cizgi); }
.m-liste h1 { margin: 0; padding: 20px 20px 14px; font-size: 18px; }
.m-kisiler { flex: 1; overflow-y: auto; padding: 0 8px 8px; }
.m-kisiler .bos { padding: 8px 12px; font-size: 13px; }
.sohbet {
    position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-areas: "foto ad zaman" "foto ozet ozet";
    gap: 2px 12px; align-items: center; padding: 10px 12px; border: 0; border-radius: 12px; color: var(--yazi); background: none;
}
.sohbet .avatar { grid-area: foto; }
.sohbet b { grid-area: ad; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sohbet small { grid-area: zaman; font-size: 11px; }
.sohbet span { grid-area: ozet; font-size: 12px; color: var(--soluk); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sohbet:hover, .sohbet.aktif { background: var(--zemin); text-decoration: none; }
.sohbet.yeni span { color: var(--yazi); font-weight: 600; padding-right: 26px; }
.sohbet .rozet { position: absolute; right: 12px; bottom: 10px; font-style: normal; }
.bildirim:hover { text-decoration: none; border-color: var(--ana); }

.m-sohbet { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.m-baslik { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--cizgi); font-weight: 600; }
.m-baslik a { color: var(--yazi); }
/* Konuşma başlığındaki küçük düğmeler: şikayet (gri) ve engelle (kırmızı) */
.m-baslik .btn { padding: 4px 10px; font-size: 11px; font-weight: 500; gap: 5px; }
.m-baslik .btn .ikon { font-size: 11px; }
.m-baslik .bildir { margin-left: auto; color: var(--soluk); box-shadow: inset 0 0 0 1px var(--cizgi); }
.m-baslik .bildir:hover { background: var(--zemin); color: var(--yazi); }
.m-baslik .bildir:disabled { color: var(--yesil); cursor: default; background: none; }
.m-sil { margin: 0; display: flex; }
.m-sil.tek { margin-left: auto; }
.m-sil .btn { color: var(--soluk); box-shadow: inset 0 0 0 1px var(--cizgi); }
.m-sil .btn:hover { background: var(--zemin); color: var(--yazi); }
.m-baslik .engel-btn { color: var(--kirmizi); box-shadow: inset 0 0 0 1px var(--kirmizi); }
.m-baslik .engel-btn:hover { background: var(--kirmizi); color: #fff; }
.m-geri { display: none; font-size: 28px; line-height: 1; padding: 0 6px 4px 0; }
.m-geri:hover { text-decoration: none; }
.sohbet-kutu { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 20px; background: var(--zemin); }
.m-sohbet .hata { margin: 10px 20px 0; }
.m-yaz { position: relative; display: flex; align-items: flex-end; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--cizgi); }
.m-yaz textarea { flex: 1; resize: none; max-height: 120px; border-radius: 18px; padding: 9px 16px; }
.m-yaz .ifade-arac { order: -1; position: static; margin: 0 0 4px; }
.m-yaz .ifade-panel { bottom: calc(100% - 4px); top: auto; left: 12px; }
.m-bos { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--soluk); background: var(--zemin); }
.m-bos .ikon { font-size: 34px; }
.m-bos p { margin: 0; }

/* İfade seçici */
.ifade-kap { position: relative; display: block; }
.ifade-kap textarea { display: block; padding-bottom: 40px; }
.ifade-kap .ifade-arac { position: absolute; left: 10px; bottom: 8px; margin: 0; }
.ifade-arac { position: relative; margin-top: 6px; align-self: flex-start; font-weight: 400; }
.ifade-dugme { border: 0; background: none; padding: 2px; font-size: 20px; line-height: 1; cursor: pointer; opacity: .75; }
.ifade-dugme:hover { opacity: 1; }
.ifade-panel {
    position: absolute; z-index: 15; left: 0; top: calc(100% + 4px); width: 300px; max-width: calc(100vw - 48px); padding: 8px;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(32px, 1fr)); gap: 2px;
    background: var(--kart); border: 1px solid var(--cizgi); border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}
.ifade-panel[hidden] { display: none; }
.ifade-panel button { border: 0; background: none; padding: 4px 0; border-radius: 6px; font-size: 19px; line-height: 1.2; cursor: pointer; }
.ifade-panel button:hover { background: var(--zemin); }

.balon { align-self: flex-start; max-width: 75%; background: var(--kart); border: 1px solid var(--cizgi); border-radius: 14px; padding: 8px 14px; overflow-wrap: anywhere; }
.balon.benim { align-self: flex-end; background: var(--ana); border-color: var(--ana); color: #fff; }
.balon small { display: block; font-size: 10px; opacity: .75; color: inherit; }
.bildirim { display: flex; gap: 14px; padding: 14px 18px; margin-bottom: 8px; color: var(--yazi); }
.bildirim.yeni { border-color: var(--ana); background: #f5fbfe; }
.bildirim > span { min-width: 0; }
.bildirim small { margin-left: 6px; }
.bildirim .hap { display: flex; width: fit-content; margin-top: 30px; font-size: 12px; }
.bildirim:hover .hap { background: var(--ana); color: #fff; }
/* Bildirimden gelindiğinde ilgili yorum kısa süre vurgulanır */
.yorum:target { border-color: var(--ana); animation: belir .45s ease both; }

/* ---- Yönetim paneli ---- */
.admin-sekmeler { display: flex; gap: 6px; flex-wrap: wrap; border-bottom: 1px solid var(--cizgi); margin-bottom: 16px; }
.admin-sekmeler a { padding: 8px 14px; border-radius: 8px 8px 0 0; color: var(--yazi); }
.admin-sekmeler a.aktif { background: var(--ana); color: #fff; font-weight: 600; }
.admin-sekmeler a.aktif small { color: #fff; }
.arama { display: flex; gap: 8px; align-items: center; margin-bottom: 16px; max-width: 520px; }
.arama input[type=search] { flex: 1; font-size: 14px; padding: 9px 12px; border: 1px solid var(--cizgi); border-radius: 10px; background: var(--kart); }
.tablo-kap { overflow-x: auto; background: var(--kart); border: 1px solid var(--cizgi); border-radius: 12px; }
.tablo { width: 100%; border-collapse: collapse; font-size: 13px; }
.tablo th, .tablo td { padding: 8px 10px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--cizgi); white-space: nowrap; }
.tablo th { background: var(--zemin); font-size: 11px; text-transform: uppercase; color: var(--soluk); }
.tablo tr:last-child td { border-bottom: 0; }
.tablo td.metin { white-space: pre-wrap; overflow-wrap: anywhere; min-width: 280px; max-width: 520px; }
.tablo td a + a { margin-left: 8px; }
.tablo form { margin: 0; }
.tablo form + form { margin-top: 4px; }
.onay-foto { width: 80px; height: 80px; border-radius: 10px; object-fit: cover; display: block; }
.foto-satir .uyari { margin: 0; }
.tablo tr.silik td { background: #fdf1f0; color: var(--soluk); }
.tablo tr.silik td.metin { text-decoration: line-through; }

/* ---- Dar ekranlar ---- */
@media (max-width: 1500px) {
    .duzen { grid-template-columns: 240px minmax(0, 1fr) 220px; }
    .kategoriler, .profil-kutu { padding-left: 24px; padding-right: 20px; }
    .alt-menu nav, .alt-menu p { padding-left: 20px; padding-right: 16px; }
    .ust-bar { grid-template-columns: 240px minmax(0, 1fr) auto; }
    .logo { padding-left: 24px; }
    .ust-bar .sag { padding: 0 24px; }
    .logo img { height: 36px; }
}
@media (max-width: 1150px) {
    .duzen { grid-template-columns: 220px minmax(0, 1fr); }
    .sag-sutun { display: none; }
    main { border-right: 0; }
    /* Sağ sütun yokken kurumsal menü içeriğin altında görünür. */
    .alt-menu.dar { display: block; max-width: 1028px; margin: 0 auto; padding: 0 24px 32px; }
    .alt-menu.dar nav { flex-direction: row; flex-wrap: wrap; gap: 6px 20px; padding: 18px 0; }
    .alt-menu.dar p { padding: 16px 0 0; }
    .liste-ust { padding: 0 8px 12px; }
    .bilgi { margin-left: 8px; }
    .kart-govde { padding-right: 0; }
}
@media (max-width: 820px) {
    :root { --ust: 121px; }
    /* İki satır: üstte ikon + düğmeler, altta arama. Telefonda yazılı logo yerine yalnızca ikon
       gösterilir; böylece Giriş Yap / Üye Ol düğmeleri en dar ekranda da aynı satıra sığar. */
    .ust-bar { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 25px 10px; padding: 15px 16px 10px; align-content: start; }
    .logo { padding-left: 0; }
    .logo .logo-tam { display: none; }
    .logo .logo-ikon { display: block; height: 36px; width: 36px; }
    /* Telefonda üst satır (logo + Giriş Yap / Üye Ol) kurumsal mavi bir bardır: 15px üst boşluk,
       36px içerik, 15px alt boşluk = 66px. Arama kutusu bu barın dışında, altındaki beyaz satırdadır. */
    .ust-bar { background: linear-gradient(var(--ana) 66px, var(--kart) 66px); }
    .ust-bar .sag a.ikonlu:not(.btn) { border-color: #fff; color: #fff; }
    .ust-bar .sag a.ikonlu:not(.btn):hover { background: #fff; color: var(--ana); }
    .ust-bar .sag a.btn.ikonlu { background: #fff; color: var(--ana); }
    .ust-bar .ikon-btn { color: #fff; }
    .ust-bar .sag { justify-self: end; gap: 10px; padding: 0; }
    /* Arama satırı: solda kategori menüsünü açan düğme, sağında arama kutusu */
    .menu-btn { display: flex; grid-column: 1; grid-row: 2; }
    .arama-kutu { grid-column: 2; grid-row: 2; }
    .arama-kutu input { max-width: none; height: 34px; }
    /* "İtiraf Et" ve mesaj ikonu telefonda alttaki sekme çubuğundadır */
    .itiraf-et, .ust-bar .ikon-btn { display: none; }

    /* Alt sekme çubuğu (uygulama görünümü) */
    .alt-nav {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
        height: calc(58px + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px);
        background: var(--kart); border-top: 1px solid var(--cizgi);
    }
    .alt-nav a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--soluk); font-size: 10px; font-weight: 500; }
    .alt-nav a:hover { text-decoration: none; }
    .alt-nav a .ikon { font-size: 18px; }
    .alt-nav a .avatar { width: 24px; height: 24px; font-size: 12px; }
    .alt-nav a.aktif { color: var(--ana); }
    .alt-nav a.aktif .avatar { box-shadow: 0 0 0 2px var(--ana); }
    .alt-nav a.vurgu { gap: 2px; }
    .alt-nav a.vurgu .ikon { width: 24px; height: 24px; padding: 5px; margin-top: -3px; border-radius: 50%; background: var(--ana); color: #fff; stroke-width: 2.6; }
    .alt-nav .rozet { position: absolute; top: 6px; left: calc(50% + 4px); min-width: 16px; height: 16px; padding: 0 4px; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; border-radius: 8px; font-size: 9px; line-height: 1; }
    body { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)); }

    /* Kategoriler: soldan kayarak açılan menü */
    .sol {
        position: fixed; top: 0; left: 0; bottom: 0; z-index: 50; width: 280px; max-width: 84vw; overflow-y: auto;
        padding: 18px 0 24px; background: var(--kart); box-shadow: 4px 0 24px rgba(0, 0, 0, .18);
        transform: translateX(-105%); transition: transform .22s ease;
    }
    body.menu-acik .sol { transform: none; }
    .menu-perde { display: block; position: fixed; inset: 0; z-index: 45; background: rgba(45, 42, 41, .45); opacity: 0; pointer-events: none; transition: opacity .22s ease; }
    body.menu-acik .menu-perde { opacity: 1; pointer-events: auto; }
    body.menu-acik { overflow: hidden; }
    .kategoriler a, .profil-kutu > a { font-size: 14px; padding: 9px 12px; }
    .kategoriler .ikon, .profil-kutu > a .ikon { font-size: 15px; }

    /* Sıralama: sekme çubuğu yerine solda açılır liste */
    .sekmeler { display: none; }
    .sirala-sec { display: block; margin-right: auto; }
    .sirala-sec .menu { left: 0; right: auto; }
    .hesap summary { margin-left: 0; }
    .hesap .avatar { width: 32px; height: 32px; font-size: 15px; }

    .duzen { display: block; }
    main { border-left: 0; min-height: calc(100vh - var(--ust) - 58px); }

    .ic { padding: 16px 12px 40px; }
    .liste-ust { padding: 0 4px 12px; gap: 10px; }

    .kart { gap: 12px; padding: 16px; margin-bottom: 12px; border-radius: 16px; }
    .kart-sahip { top: 10px; right: 10px; }
    .kart.benim .meta { padding-right: 62px; }
    .itiraf-tam { border-radius: 16px; }
    .yorum-kap { margin: 0 16px 0 62px; }
    .itiraf-tam .sil-form { margin-left: 62px; }
    .yorum-kap .yorum { padding-left: 14px; }
    .yorum-kap .yorum .meta { margin-left: 0; }
    .kart-avatar .avatar { width: 34px; height: 34px; font-size: 16px; }
    .eylemler { margin-top: 16px; }
    /* Favorilere Ekle ve Paylaş: sayaçların altında, sola tam hizalı, arada 10px fazladan boşluk */
    .satir-sonu { display: block; flex-basis: 100%; height: 4px; }
    .hap + .duz, .satir-sonu + .duz { margin-left: 0; padding-left: 0; }
    .eylemler .duz + .paylas-kap { margin-left: 10px; }
    .paylas-menu { left: auto; right: -40px; }
    .profil { flex-direction: column; align-items: center; text-align: center; }
    .iletisim { grid-template-columns: minmax(0, 1fr); }
    /* Telefonda tek bölme: sohbet seçilmemişse liste, seçilmişse konuşma görünür. */
    .mesajlasma { grid-template-columns: minmax(0, 1fr); height: calc(100vh - var(--ust) - 58px - 34px - env(safe-area-inset-bottom, 0px)); min-height: 320px; border-radius: 16px; }
    .mesajlasma .m-sohbet { display: none; }
    .mesajlasma.sohbet-acik .m-liste { display: none; }
    .mesajlasma.sohbet-acik .m-sohbet { display: flex; }
    .m-liste { border-right: 0; }
    .m-geri { display: block; }
    /* Dar ekranda başlıktaki düğmeler yalnızca ikon olarak görünür */
    .m-baslik .btn span { display: none; }
    .m-baslik .btn { padding: 7px; }
    .m-baslik .btn .ikon { font-size: 13px; }
    .dugmeler { justify-content: center; }
}