/* =====================================================================
   HİKAYE — MASAÜSTÜ DÜZENİ (29 Eyl 2026)
   =====================================================================
   Ölçüldü (canlı, 1440): hikâye açınca okuyucu sayfanın EN DİBİNDE
   (y=760) açılıyordu — önce iki oluşturma kartı + arşiv geçiliyordu;
   arşiv kartları karışık boyda, başlık ve tarih "…" ile kesik; okuyucu
   araçları iki satıra dağınık.
   İşaretleme telefonla ortak; bu dosya YALNIZ ≥941px. Okuyucu açıkken
   ötekileri gizlemek `:has()` ile — telefonda sıra aynı kalır.
   ===================================================================== */
.hk-geri { display: none; }

@media (min-width: 941px) {
  /* ---------- okurken: okuyucu tek blok ---------- */
  #view:has(> .hk-okuyucu) > :is(.hk-yeni, .hk-arsiv, .hk-bos) { display: none; }
  /* arşiv doluyken "henüz hikaye yok" kartı gürültü — yalnız ilk kez gelende */
  #view:has(> .hk-arsiv) > .hk-bos { display: none; }

  /* okuyucu: aşamalar + kitap tam genişlik; alt satırda Oku · Dinle · Çeviri … A−/A+ */
  .hk-okuyucu:has(> .tlf-alan) { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--sp-2); align-items: center; }
  .hk-okuyucu:has(> .tlf-alan) > :not(.btn-row):not(.tlf-alan) { grid-column: 1 / -1; }
  .hk-okuyucu > .tlf-alan { grid-column: 1; grid-row: 3; margin: var(--sp-4) 0 0; }
  .hk-okuyucu:has(> .tlf-alan) > .btn-row { grid-column: 2; grid-row: 3; }
  /* satırdaki her düğme aynı yükseklikte (Oku 34px kalıyordu) */
  .hk-okuyucu > .tlf-alan .tlf-btn { min-height: var(--ctrl-h); }

  .hk-okuyucu > .stage-chips { align-items: center; margin-bottom: var(--sp-4); }
  .hk-geri { display: inline-flex; min-height: var(--ctrl-h); margin-right: var(--sp-2); }
  .hk-okuyucu > .stage-chips .schip { min-height: var(--ctrl-h); }
  .hk-metin-oku > .hk-geri { margin: 0 0 var(--sp-3); }
  /* araçlar: tek satır, sağa yaslı */
  .hk-okuyucu > .btn-row { flex-wrap: nowrap; align-items: center; gap: var(--sp-2); margin-top: var(--sp-4); }
  .hk-okuyucu > .btn-row .btn { min-height: var(--ctrl-h); }
  .hk-okuyucu > .btn-row .fs-ctrl { display: inline-flex; gap: var(--sp-1); margin-left: auto; }

  /* ---------- oluşturma: iki kart yan yana ---------- */
  .hk-yeni { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--sp-4); margin: 0 0 var(--sp-5); }
  .hk-yeni.hk-yeni-form { grid-template-columns: minmax(0, 1fr); }
  .hk-yeni > .card { margin: 0; display: flex; flex-direction: column; }
  .hk-yeni > .card > .sub { font-size: var(--fs-base); }
  .hk-yeni > .card > .story-toolbar, .hk-yeni > .card > .btn-row { margin-top: auto; }
  .hk-yeni .story-toolbar select { min-width: 0; }
  .hk-yeni .story-toolbar .btn { min-height: var(--ctrl-h); }

  /* ---------- arşiv: eşit ızgara, hiçbir şey kesilmez ---------- */
  .hk-arsiv .st-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
  .hk-arsiv .st-row-wrap { min-width: 0; }
  .hk-arsiv .st-row { align-items: center; gap: var(--sp-3); min-height: 72px; padding: var(--sp-3); background: transparent; border-color: var(--line); }
  .hk-arsiv .st-row:hover { background: var(--card2); border-color: var(--btn-line); }
  .hk-arsiv .st-ic { width: 32px; height: 32px; flex: none; }
  .hk-arsiv .st-t { white-space: normal; font-size: var(--fs-kontrol); font-weight: 500; }
  .hk-arsiv .st-m { white-space: normal; font-size: var(--fs-sm); color: var(--muted); }
  .hk-arsiv .st-ilerleme { margin-top: var(--sp-1); }
  .hk-arsiv .st-kaldi { font-size: var(--fs-sm); }
  .hk-arsiv .st-del { background: transparent; border-color: var(--line); color: var(--muted); }
  .hk-arsiv .st-row-wrap:hover .st-del { border-color: var(--btn-line); }
}
@media (min-width: 941px) and (max-width: 1279px) {
  .hk-arsiv .st-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hk-yeni { grid-template-columns: minmax(0, 1fr); }
}

/* =====================================================================
   HİKAYE — TELEFON VE TABLET (30 Eyl 2026)
   =====================================================================
   Olculdu (390): arsivden bir hikayeye dokununca okuyucu 1476px asagida
   aciliyor, sayfa yerinde kaliyordu — dokunus bosa gitmis gibi. Arsiv
   doluyken dipte "henuz hikaye yok" karti (210px) duruyordu. Olusturma
   karti uc acilir listeyi alt alta dizip 628px tutuyordu. Tablette
   arsiv tek sutun. Masaustunun cozumleri buraya da gelir. */
@media (max-width: 940px) {
  #view:has(> .hk-okuyucu) > :is(.hk-yeni, .hk-arsiv, .hk-bos) { display: none; }
  #view:has(> .hk-arsiv) > .hk-bos { display: none; }

  /* okuyucu: aşamalar (geri ile) ustte tek satir · metin · araclar altta */
  .hk-geri { display: inline-flex; flex: none; min-height: 40px; }
  .hk-metin-oku > .hk-geri { margin: 0 0 var(--sp-3); align-self: flex-start; }
  /* ARACLAR IKI DUZGUN SATIR: "Oku" + A−/A+ bir satirda, dinle ve ceviri
     esit genislikte alt satirda (uc satira dagiliyordu: Oku tek basina,
     dinle+ceviri, en altta A−/A+). Arac satiri `display: contents` ile
     okuyucunun esnek akisina katilir; sira `order` ile kurulur. */
  .hk-okuyucu { display: flex; flex-flow: row wrap; column-gap: var(--sp-2); }
  .hk-okuyucu > * { order: 2; flex: 1 1 100%; min-width: 0; }
  .hk-okuyucu > .stage-chips {
    order: 1; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    margin: 0 calc(-1 * var(--sp-4)) var(--sp-4); padding: 0 var(--sp-4);
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 20px), transparent);
            mask-image: linear-gradient(90deg, #000 calc(100% - 20px), transparent);
  }
  .hk-okuyucu > .stage-chips::-webkit-scrollbar { display: none; }
  .hk-okuyucu > .stage-chips > * { flex: none; min-height: 40px; }
  .hk-okuyucu > .tlf-alan { order: 3; flex: 0 1 auto; margin-top: var(--sp-4); }
  .hk-okuyucu > .btn-row { display: contents; }
  .hk-okuyucu > .btn-row > * { order: 5; flex: 1 1 calc(50% - var(--sp-1)); margin-top: var(--sp-2); min-height: 40px; justify-content: center; }
  .hk-okuyucu > .btn-row > .fs-ctrl {
    order: 4; flex: 0 0 auto; display: inline-flex; gap: var(--sp-1);
    margin: var(--sp-4) 0 0 auto; align-self: flex-start;
  }

  /* olusturma: listeler ikiser, uzunluk ve dugme tam satir */
  .hk-yeni > .card { margin-bottom: var(--sp-4); }
  .hk-yeni .story-toolbar { flex-direction: row; flex-wrap: wrap; align-items: stretch; gap: var(--sp-2); }
  .hk-yeni .story-toolbar > .dd, .hk-yeni .story-toolbar > select { flex: 1 1 calc(50% - var(--sp-1)); width: auto; min-width: 0; }
  .hk-yeni .story-toolbar > .dd:has(#storyLen), .hk-yeni .story-toolbar > .btn { flex-basis: 100%; }
  .hk-metin > .btn-row { margin-top: var(--sp-3); }
}
/* tablet dikey: olusturma tek satir, arsiv iki sutun */
@media (min-width: 601px) and (max-width: 940px) {
  .hk-yeni .story-toolbar { flex-wrap: nowrap; }
  .hk-yeni .story-toolbar > .dd, .hk-yeni .story-toolbar > select,
  .hk-yeni .story-toolbar > .dd:has(#storyLen) { flex: 1 1 0; }
  .hk-yeni .story-toolbar > .btn { flex: 0 0 auto; width: auto; }
  /* okuyucu araclari tek satir: Oku · dinle · ceviri ········ A− A+ */
  .hk-okuyucu > .btn-row > * { order: 4; flex: 0 0 auto; }
  .hk-okuyucu > .btn-row > :not(.fs-ctrl), .hk-okuyucu > .tlf-alan { margin-top: var(--sp-4); }
  .hk-okuyucu > .btn-row > .fs-ctrl { order: 5; margin-top: var(--sp-4); }
  .hk-yeni .story-toolbar > .dd { width: auto; }
  .hk-yeni .story-toolbar > .dd > .dd-btn { width: 100%; }

  .hk-arsiv .st-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
  .hk-arsiv .st-row-wrap { min-width: 0; }
  .hk-arsiv .st-t { white-space: normal; }
  .hk-arsiv .st-m { white-space: normal; }
}

/* PREMIUM DENEME NOTU (029, 1 Eki 2026) — AI hikayesi ve kendi metnin.
   Bilgi satiri, eylem degil: kapi sunucuda. Bitince kum zemin, uyari
   rengi DEGIL (hata degil, plan siniri). */
.hk-deneme { display: flex; align-items: flex-start; gap: var(--sp-2); margin: var(--sp-4) 0 0;
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); background: var(--accent-soft);
  font-size: var(--fs-sm); line-height: var(--lh-normal); color: var(--text); }
.hk-deneme > svg { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--accent); }
.hk-deneme b { font-weight: 600; font-variant-numeric: tabular-nums; }
.hk-deneme-bitti { background: var(--card2); color: var(--muted); }
.hk-metin > .hk-deneme + .btn-row, .hk-metin > .hk-deneme + .mt-form { margin-top: var(--sp-3); }