/* kenef grubu: kenef akışı, tek atmık, kenefim/attırlar, ukde, soru & cevap.
   Bütün sınıflar kf- ile başlar; renkler app.css değişkenlerinden (açık/koyu tema). */

/* ---------------------------------------------------------------- sayfa üstü */
.kf-ust { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .9rem; margin-bottom: .9rem; }
.kf-ust-ana { flex: 1 1 14rem; min-width: 0; }
.kf-ust .baslik-h1 { overflow-wrap: anywhere; }
.kf-alt-baslik { margin: .2rem 0 0; color: var(--ts-yazi-soluk); font-size: .88rem; }
.kf-ust-dugmeler { display: flex; flex-wrap: wrap; gap: .4rem; }
.kf-ust-dugmeler .btn { border-radius: 999px; }
.kf-yazar-ust .avatar-lg { flex: none; box-shadow: 0 0 0 3px var(--ts-yuzey), 0 0 0 4px var(--ts-cizgi); }
.kf-tek-baslik { font-size: 1.2rem; }
.kf-sekmeler { margin-bottom: 1rem; }
.kf-soluk { color: var(--ts-yazi-soluk); }
.kf-not { margin: .25rem 0 0; font-size: .8rem; color: var(--ts-yazi-soluk); }

/* ---------------------------------------------------------------- ızgara: yazma kutusu / yan panel / akış */
.kf-izgara { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "yaz" "yan" "akis"; gap: .9rem; }
.kf-yaz-kap { grid-area: yaz; min-width: 0; }
.kf-yan { grid-area: yan; min-width: 0; display: flex; flex-direction: column; gap: .75rem; }
.kf-akis-kap { grid-area: akis; min-width: 0; }
@media (min-width: 1200px) {
  .kf-izgara { grid-template-columns: minmax(0, 1fr) 248px; grid-template-areas: "yaz yan" "akis yan"; grid-template-rows: auto 1fr; column-gap: 1.25rem; row-gap: 1rem; }
  .kf-yan { align-self: start; position: sticky; top: calc(var(--ts-ust-yukseklik) + 1rem); max-height: calc(100vh - var(--ts-ust-yukseklik) - 2rem); overflow-y: auto; scrollbar-width: thin; }
}

/* ---------------------------------------------------------------- yazma kutusu */
.kf-yaz { display: flex; flex-direction: column; gap: .4rem; margin: 0; }
.kf-yaz.kart { padding: .85rem 1rem .65rem; }
.kf-yaz:focus-within.kart { border-color: color-mix(in srgb, var(--ts-vurgu) 45%, var(--ts-cizgi)); box-shadow: 0 0 0 3px var(--ts-vurgu-acik); }
.kf-yaz-ust { display: flex; gap: .7rem; align-items: flex-start; }
.kf-yaz-avatar { width: 40px; height: 40px; flex: none; }
.kf-yaz-alan { position: relative; flex: 1; min-width: 0; }
.kf-yaz-metin, .kf-yaz-metin:focus { border: 0; background: transparent; box-shadow: none !important; resize: none; padding: .45rem .15rem; font-size: 1rem; line-height: 1.5; min-height: 2.6rem; color: var(--bs-body-color); }
.kf-yaz-alt { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; padding-top: .5rem; border-top: 1px solid var(--ts-cizgi); margin-left: calc(40px + .7rem); }
.kf-isaretler { display: flex; flex-wrap: wrap; gap: .1rem; margin-right: auto; }
.kf-isaret { border: 0; background: none; color: var(--ts-vurgu); font-size: .78rem; font-weight: 600; padding: .22rem .5rem; border-radius: 999px; line-height: 1.3; }
.kf-isaret:hover, .kf-isaret:focus-visible { background: var(--ts-vurgu-acik); }
.kf-sayac { margin-left: auto; font-size: .76rem; color: var(--ts-yazi-soluk); font-variant-numeric: tabular-nums; }
.kf-gonder { border-radius: 999px; padding-inline: 1.1rem; font-weight: 600; min-width: 5.2rem; }
@media (max-width: 575.98px) {
  .kf-yaz-alt { margin-left: 0; }
}

/* Cevap kutusu (kart içinde) */
.kf-yaz-cevap { margin-top: .45rem; padding: .45rem .6rem .5rem; border: 1px solid var(--ts-cizgi); border-radius: var(--ts-yaricap); background: var(--ts-zemin); }
.kf-yaz-cevap:focus-within { border-color: color-mix(in srgb, var(--ts-vurgu) 45%, var(--ts-cizgi)); }
.kf-yaz-cevap .kf-yaz-avatar { width: 26px; height: 26px; margin-top: .35rem; }
.kf-yaz-cevap .kf-yaz-metin { min-height: 2.2rem; font-size: .95rem; padding-block: .35rem; }
.kf-yaz-cevap .kf-yaz-alt { margin-left: 0; border-top: 0; padding-top: 0; }
.kf-yaz-cevap .kf-sayac { margin-left: auto; }

/* @nick önerisi */
.kf-oneri { position: absolute; left: 0; top: calc(100% + 2px); z-index: 1060; min-width: 220px; max-width: min(320px, 100%); padding: .3rem; border-radius: var(--ts-yaricap); }
.kf-oneri-oge { display: flex; align-items: center; gap: .5rem; width: 100%; padding: .35rem .5rem; border: 0; border-radius: .5rem; background: none; color: var(--bs-body-color); text-align: left; font-size: .9rem; }
.kf-oneri-oge span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kf-oneri-oge.aktif, .kf-oneri-oge:hover { background: var(--ts-vurgu-acik); color: var(--bs-body-color); }

/* ---------------------------------------------------------------- akış ve kart */
.kf-akis { display: flex; flex-direction: column; gap: .75rem; scroll-margin-top: calc(var(--ts-ust-yukseklik) + 1rem); }
.kf-akis .kf-atm ~ .kf-bos { display: none; }
.kf-atm { display: flex; gap: .75rem; background: var(--ts-yuzey); border: 1px solid var(--ts-cizgi); border-radius: var(--ts-yaricap); padding: .8rem 1rem .4rem; scroll-margin-top: calc(var(--ts-ust-yukseklik) + 1rem); }
.kf-atm-avatar { flex: none; line-height: 0; }
.kf-atm-avatar .avatar { width: 44px; height: 44px; }
.kf-gizli-avatar { display: inline-flex; align-items: center; justify-content: center; color: var(--ts-yazi-soluk); font-size: 1.15rem; line-height: 1; }
.kf-atm-govde { flex: 1; min-width: 0; }
.kf-atm-bas { display: flex; flex-wrap: wrap; align-items: center; column-gap: .35rem; min-height: 1.6rem; font-size: .9rem; line-height: 1.3; }
.kf-numara { color: var(--ts-yazi-soluk); font-variant-numeric: tabular-nums; font-size: .82rem; }
.kf-nick { font-weight: 650; color: var(--bs-body-color); overflow-wrap: anywhere; }
a.kf-nick:hover { color: var(--ts-vurgu); }
.kf-gizli { font-weight: 500; font-style: italic; color: var(--ts-yazi-soluk); }
.kf-rol-admin { color: #c93c3c; }
.kf-rol-mod { color: #7a4fd0; }
.kf-rol-gammaz { color: var(--ts-vurgu); }
[data-bs-theme="dark"] .kf-rol-admin { color: #ff8a8a; }
[data-bs-theme="dark"] .kf-rol-mod { color: #b79bff; }
.kf-nokta { color: var(--ts-yazi-soluk); }
.kf-zaman { color: var(--ts-yazi-soluk); font-size: .83rem; white-space: nowrap; }
.kf-zaman:hover { color: var(--ts-vurgu); }
.kf-duzenlendi { font-size: .78rem; }
.kf-baglam { display: inline-flex; align-items: center; gap: .2rem; padding: 0 .45rem; border-radius: 999px; background: var(--ts-vurgu-acik); color: var(--ts-vurgu); font-size: .76rem; font-weight: 600; }
.kf-baglam:hover { text-decoration: none; filter: brightness(.97); }
.kf-menu { margin-left: auto; }
.kf-menu-dugme { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin: -.3rem -.45rem -.3rem 0; border: 0; border-radius: 999px; background: none; color: var(--ts-yazi-soluk); }
.kf-menu-dugme:hover, .kf-menu-dugme[aria-expanded="true"] { background: var(--ts-vurgu-acik); color: var(--bs-body-color); }
.kf-menu .dropdown-menu { --bs-dropdown-font-size: .9rem; border-radius: var(--ts-yaricap); }
.kf-menu .dropdown-item .bi { width: 1.2rem; display: inline-block; }
.kf-menu form { margin: 0; }
.kf-metin { margin: .15rem 0 .1rem; font-size: .98rem; line-height: 1.6; }
.kf-metin .btn.py-0 { --bs-btn-padding-x: .4rem; --bs-btn-font-size: .88em; vertical-align: baseline; border-radius: 999px; background: var(--ts-vurgu-acik); color: var(--ts-vurgu); border-color: transparent; }
.kf-metin .btn.py-0:hover { filter: brightness(.96); }
.kf-silinmis { border-style: dashed; opacity: .85; }

/* eylemler */
.kf-eylemler { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem; margin: .1rem 0 0 -.55rem; }
.kf-oy { display: flex; align-items: center; gap: .1rem; }
.kf-oy form { display: contents; }
.kf-eylemler .eylem { min-height: 32px; }
.kf-eylemler .eylem span { font-variant-numeric: tabular-nums; }
.kf-pasif { cursor: default; }
.kf-pasif:hover { background: none; color: var(--ts-yazi-soluk); }
.eylem.kotu:hover { color: #d64545; }
.kf-cevap-say:empty { display: none; }
.kf-kopyala { margin-left: auto; }

/* cevaplar */
.kf-cevaplar { display: flex; flex-direction: column; margin-top: .4rem; padding-left: .8rem; border-left: 2px solid var(--ts-cizgi); }
.kf-cevaplar:empty { display: none; }
.kf-atm.kf-cevap { gap: .55rem; padding: .5rem 0 .1rem; border: 0; border-radius: 0; background: transparent; }
.kf-atm.kf-cevap + .kf-atm.kf-cevap { border-top: 1px solid var(--ts-cizgi); }
.kf-cevap .kf-atm-avatar .avatar { width: 30px; height: 30px; }
.kf-cevap .kf-gizli-avatar { font-size: .95rem; }
.kf-cevap .kf-atm-bas { font-size: .86rem; min-height: 1.4rem; }
.kf-cevap .kf-metin { font-size: .94rem; }
.kf-hepsi { display: inline-flex; align-items: center; gap: .35rem; align-self: flex-start; padding: .3rem .1rem; font-size: .84rem; font-weight: 600; }
.kf-hepsi .htmx-indicator { margin-left: .2rem; }
.kf-cevap-yer:empty { display: none; }

/* yeni eklenen / vurgulanan */
.kf-taze { animation: kf-taze 1.8s ease-out; }
@keyframes kf-taze { from { box-shadow: 0 0 0 3px var(--ts-vurgu-acik); border-color: color-mix(in srgb, var(--ts-vurgu) 55%, transparent); } to { box-shadow: 0 0 0 0 transparent; } }
.kf-cevap.kf-taze { animation: kf-taze-cevap 1.8s ease-out; }
@keyframes kf-taze-cevap { from { background: var(--ts-vurgu-acik); } to { background: transparent; } }
.kf-atm.kf-vurgu { background: var(--ts-vurgu-acik); border-radius: .6rem; padding-inline: .5rem; margin-inline: -.5rem; }
.kf-atm.htmx-swapping { opacity: 0; transition: opacity .15s ease; }

/* "N yeni gönderi" */
.kf-yeni-kap { position: sticky; top: calc(var(--ts-ust-yukseklik) + .5rem); z-index: 6; display: flex; justify-content: center; height: 0; }
.kf-yeni { display: inline-flex; align-items: center; gap: .25rem; height: 34px; margin-top: -.25rem; padding: 0 1rem; border: 0; border-radius: 999px; background: var(--ts-vurgu); color: #fff; font-size: .86rem; font-weight: 600; box-shadow: 0 6px 18px rgba(0, 0, 0, .18); animation: kf-belir .25s ease-out; }
.kf-yeni:hover { filter: brightness(1.06); }
[data-bs-theme="dark"] .kf-yeni { color: #0f1a13; }
@keyframes kf-belir { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* akışın sonu / sayfa bilgisi */
.kf-akis .liste-devam { border: 1px dashed var(--ts-cizgi); border-radius: var(--ts-yaricap); }
.kf-son { margin: .25rem 0 0; text-align: center; font-size: .8rem; color: var(--ts-yazi-soluk); }
.kf-sonraki { text-align: center; }
.kf-sayfa-bilgi { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem; margin-bottom: .75rem; }
.kf-bos { background: var(--ts-yuzey); border: 1px dashed var(--ts-cizgi); border-radius: var(--ts-yaricap); }

/* satır içi düzenleme */
.kf-duzenle { display: flex; flex-direction: column; gap: .4rem; margin: .3rem 0 .2rem; }
.kf-duzenle textarea { resize: none; font-size: .96rem; line-height: 1.5; }
.kf-duzenle-alt { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.kf-duzenle-alt input { flex: 1 1 10rem; width: auto; }
.kf-duzenle-alt .btn { border-radius: 999px; }
.kf-duzenle-sayfa .kart { max-width: 640px; }

/* tek atmık (pencere içinde de) */
.kf-tek > .kf-atm { margin-bottom: .75rem; }
.kf-pencere-alt { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
body.cerceve .kf-tek > .kf-atm { border: 0; padding: 0; background: transparent; }

@media (max-width: 575.98px) {
  .kf-atm { gap: .6rem; padding: .7rem .8rem .35rem; }
  .kf-atm-avatar .avatar { width: 38px; height: 38px; }
  .kf-cevaplar { padding-left: .6rem; }
}

/* ---------------------------------------------------------------- yan panel */
.kf-yan .kart + .kart { margin-top: 0; }
.kf-panel { padding: .7rem .85rem; }
.kf-panel-bas { display: flex; align-items: center; gap: .4rem; margin: 0 0 .55rem; font-size: .8rem; font-weight: 650; color: var(--ts-yazi-soluk); }
.kf-canli { width: 8px; height: 8px; border-radius: 50%; background: #2fbf71; box-shadow: 0 0 0 3px rgba(47, 191, 113, .22); }
details.kf-panel > summary { list-style: none; cursor: pointer; margin: 0; user-select: none; }
details.kf-panel > summary::-webkit-details-marker { display: none; }
details.kf-panel[open] > summary { margin-bottom: .55rem; }
.kf-ok { margin-left: auto; transition: transform .2s ease; }
details[open] > summary .kf-ok { transform: rotate(180deg); }

/* çevrimiçiler: telefonda yatay avatar şeridi, geniş ekranda liste */
.kf-online { display: flex; gap: .55rem; margin: 0; padding: 0 0 .15rem; list-style: none; overflow-x: auto; scrollbar-width: none; }
.kf-online::-webkit-scrollbar { display: none; }
.kf-online-oge { flex: none; }
.kf-online-kisi { display: flex; flex-direction: column; align-items: center; gap: .2rem; width: 58px; color: var(--bs-body-color); font-size: .7rem; }
.kf-online-kisi:hover { text-decoration: none; color: var(--ts-vurgu); }
.kf-online-kisi .avatar { width: 40px; height: 40px; box-shadow: 0 0 0 2px var(--ts-yuzey), 0 0 0 3.5px #2fbf71; }
.kf-online-nick { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kf-online-ek { display: none; }
.kf-durum { font-size: .68rem; color: var(--ts-yazi-soluk); background: var(--bs-tertiary-bg); border-radius: 999px; padding: 0 .4rem; white-space: nowrap; }
.kf-mini { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 999px; color: var(--ts-yazi-soluk); font-size: .85rem; }
.kf-mini:hover { background: var(--ts-vurgu-acik); color: var(--bs-body-color); text-decoration: none; }
@media (min-width: 1200px) {
  .kf-online { flex-direction: column; gap: .1rem; overflow: visible; padding: 0; }
  .kf-online-oge { display: flex; align-items: center; gap: .25rem; }
  .kf-online-kisi { flex: 1; min-width: 0; flex-direction: row; gap: .5rem; width: auto; padding: .2rem 0; font-size: .87rem; }
  .kf-online-kisi .avatar { width: 28px; height: 28px; flex: none; box-shadow: 0 0 0 2px var(--ts-yuzey), 0 0 0 3px #2fbf71; }
  .kf-online-ek { display: flex; align-items: center; gap: .05rem; flex: none; }
  .kf-online-ek .kf-mini { opacity: 0; transition: opacity .15s; }
  .kf-online-oge:hover .kf-mini, .kf-online-ek .kf-mini:focus-visible { opacity: 1; }
}
@media (hover: none) { .kf-online-ek .kf-mini { opacity: 1; } }

/* duyurular */
.kf-duyuru + .kf-duyuru { margin-top: .6rem; padding-top: .6rem; border-top: 1px solid var(--ts-cizgi); }
.kf-duyuru-bas { margin: 0 0 .2rem; font-size: .9rem; font-weight: 650; overflow-wrap: anywhere; }
.kf-duyuru-metin { font-size: .86rem; overflow-wrap: anywhere; }
.kf-duyuru-alt { margin: .3rem 0 0; font-size: .74rem; color: var(--ts-yazi-soluk); }
.kf-duyuru-alt a { color: inherit; font-weight: 600; }

/* ---------------------------------------------------------------- ukde ve listeler */
.kart.kf-liste { padding: 0; overflow: hidden; }
.kf-satir { display: flex; align-items: center; gap: .75rem; padding: .7rem 1rem; color: var(--bs-body-color); border-top: 1px solid var(--ts-cizgi); }
.kf-satir:first-child { border-top: 0; }
a.kf-satir:hover { background: var(--ts-vurgu-acik); text-decoration: none; }
.kf-satir-ikon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--ts-vurgu-acik); color: var(--ts-vurgu); }
.kf-satir-govde { flex: 1; min-width: 0; }
.kf-satir-baslik { display: block; font-weight: 600; overflow-wrap: anywhere; }
.kf-satir-alt { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .84rem; color: var(--ts-yazi-soluk); }
.kf-satir-ok { flex: none; color: var(--ts-yazi-soluk); }
.kf-form { max-width: 640px; }
.kf-form .form-label { font-size: .85rem; font-weight: 600; margin-bottom: .3rem; }
.kf-form-alt { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.kf-form-alt .btn { border-radius: 999px; }

/* ---------------------------------------------------------------- soru & cevap */
.kf-sorular { display: flex; flex-direction: column; gap: .75rem; }
.kf-sorular .kart + .kart { margin-top: 0; }
.kf-soru-bas { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; margin-bottom: .55rem; font-size: .86rem; color: var(--ts-yazi-soluk); }
.kf-soru-bas .avatar { width: 28px; height: 28px; }
.kf-soru-bas .kf-nick { font-size: .9rem; }
.kf-etiket { display: block; margin-bottom: .1rem; font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ts-yazi-soluk); }
.kf-soru-metin { font-size: 1rem; font-weight: 500; line-height: 1.6; overflow-wrap: anywhere; }
.kf-cevap-blok { margin-top: .75rem; padding: .6rem .85rem; border-left: 3px solid var(--ts-vurgu); border-radius: 0 .6rem .6rem 0; background: var(--ts-vurgu-acik); line-height: 1.6; overflow-wrap: anywhere; }
.kf-cevap-blok .kf-etiket { color: var(--ts-vurgu); }
.kf-soru-yaz { margin-bottom: 1.25rem; }
.kf-soru-yaz textarea { resize: none; }

/* ---------------------------------------------------------------- görseller, spoiler, engelleme, uyarılar */
/* metin kutusundaki görsel düğmesi ve yüklenenlerin önizlemesi */
.kf-gorsel-ekle { font-size: .95rem; padding-inline: .45rem; }
.kf-gorsel-onizleme { display: flex; flex-wrap: wrap; }
.kf-gorsel-onizleme:empty { display: none; }
.kf-gorsel-onizleme .gorsel-onizleme { margin: .1rem .35rem .25rem 0; }
.kf-duzenle .kf-gorsel-ekle { flex: none; }

/* atmıktaki görseller: akışta metnin altında küçük resim; çok görsel varsa iki sütun */
.kf-metin .entry-gorsel img { max-height: 420px; width: auto; }
.kf-gorseller { display: flex; flex-wrap: wrap; gap: .4rem; margin: .45rem 0 .2rem; }
.kf-gorseller .entry-gorsel { margin: 0; max-width: 100%; }
.kf-gorseller .entry-gorsel img { max-height: 340px; width: auto; max-width: 100%; }
.kf-gorseller-cok { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 520px; }
.kf-gorseller-cok .entry-gorsel img { width: 100%; height: 170px; max-height: none; object-fit: cover; }
.kf-cevap .kf-gorseller .entry-gorsel img { max-height: 240px; }
.kf-cevap .kf-gorseller-cok .entry-gorsel img { height: 130px; max-height: none; }
@media (max-width: 575.98px) {
  .kf-gorseller-cok .entry-gorsel img { height: 130px; }
}
.kf-metin details.spoiler { margin: .2rem 0; }

/* engellediğin yazarın atmığı / sorusu: kapalı gelir */
.kf-engelli > summary { list-style: none; cursor: pointer; padding: .25rem 0; color: var(--ts-yazi-soluk); font-size: .88rem; font-style: italic; user-select: none; }
.kf-engelli > summary::-webkit-details-marker { display: none; }
.kf-engelli > summary:hover .kf-engelli-ac, .kf-engelli > summary:focus-visible .kf-engelli-ac { text-decoration: underline; }
.kf-engelli-ac { font-style: normal; font-weight: 600; color: var(--ts-vurgu); }
.kf-engelli .kf-gizle, .kf-engelli[open] > summary .kf-goster { display: none; }
.kf-engelli[open] > summary .kf-gizle { display: inline; }
.kf-engelli[open] > summary { margin-bottom: .2rem; }
.kf-engelli-atm .kf-gizli-avatar { font-size: 1rem; }
.kf-soru .kf-engelli > summary { padding: 0; }
.kf-soru .kf-engelli[open] > summary { margin-bottom: .5rem; }

/* yazma kutusu yerine uyarı (e-posta doğrulanmamış / yazar seni engellemiş) */
.kf-yaz-engel { display: flex; align-items: flex-start; gap: .6rem; margin: 0; font-size: .9rem; color: var(--bs-body-color); }
.kf-yaz-engel.kart { padding: .85rem 1rem; }
.kf-yaz-engel > .bi { flex: none; font-size: 1.15rem; line-height: 1.3; color: var(--ts-vurgu); }
.kf-yaz-engel > span { flex: 1; min-width: 0; line-height: 1.45; }
.kf-yaz-engel a { font-weight: 600; white-space: nowrap; }
.kf-yaz-engel-cevap { margin-top: .45rem; padding: .5rem .65rem; border: 1px dashed var(--ts-cizgi); border-radius: var(--ts-yaricap); background: var(--ts-zemin); font-size: .86rem; }
.kf-yaz-engel-kapat { flex: none; width: .6em; height: .6em; margin-top: .3rem; }