/* ============================================================
   Gramer Atlası - components.css (1/3: butonlar, kartlar, rozetler)
   ============================================================ */

/* Emoji yerine tek stil çizgisel ikonlar (bkz. js/core/icons.js).
   Varsayılan: yazının içinde satır arası bir harf gibi davranır. */
.icon { width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.2em; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  padding: .62em 1.05em;
  border: 2px solid var(--line-2);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-weight: 600; font-size: .92rem;
  cursor: pointer;
  box-shadow: var(--shadow-hard);
  transition: transform .12s ease, box-shadow .12s ease, background .15s ease;
  user-select: none;
}
.btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--line-2); }
.btn:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--line-2); }

.btn--primary { background: var(--green-700); color: var(--cream); border-color: var(--green-900); }
/* 0.9: green-500 zeminde koyu yazı 3.8:1 kalıyordu; green-400 ile 5.9:1 */
html[data-theme="dark"] .btn--primary { background: var(--green-400); color: #0d1f14; border-color: #0a1a11; }
.btn--mustard { background: var(--mustard); color: #3a2a06; border-color: var(--mustard-d); }
/* Sözlükteki "Defterim" süzgeci: diğer düz kelime türü sekmelerinden
   ayrışsın diye her zaman (seçili olmasa bile) hardal rengi taşır;
   seçilince dolgu da hardal olur (yeşil değil). */
.btn--defter { color: var(--mustard-ink); border-color: var(--mustard-d); }
html[data-theme="dark"] .btn--defter { color: var(--mustard); border-color: var(--mustard); }
.btn--defter.btn--primary { background: var(--mustard); color: #3a2a06; border-color: var(--mustard-d); }
.btn--ghost { background: transparent; box-shadow: none; border-style: dashed; }
.btn--ghost:hover { background: var(--surface-2); box-shadow: none; transform: none; }
.btn--sm { padding: .38em .8em; font-size: .82rem; border-width: 1.5px; box-shadow: 2px 2px 0 var(--line-2); }
.btn--icon { padding: .45em .6em; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none !important; }

/* ---------- Basılı tutarak onaylama (yanlışlıkla tetiklenmesin diye) ---------- */
.holdbtn { position: relative; overflow: hidden; touch-action: none; }
.holdbtn__fill {
  position: absolute; inset: 0; width: 0%;
  background: color-mix(in srgb, var(--no-edge) 45%, transparent);
  border-radius: inherit; z-index: 0;
}
.holdbtn.is-holding .holdbtn__fill { width: 100%; transition: width 3s linear; }
.holdbtn__label { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: .5em; }

.iconbtn {
  position: relative;
  width: 44px; height: 44px; flex: 0 0 auto;
  display: inline-grid; place-items: center;
  border: 2px solid var(--line-2); border-radius: 50%;
  background: var(--surface); cursor: pointer;
  transition: transform .12s ease, background .15s ease;
}
.iconbtn:hover { transform: rotate(-6deg) scale(1.05); background: var(--surface-2); }
.iconbtn__glyph { display: grid; place-items: center; line-height: 1; }
.iconbtn__glyph .icon { width: 19px; height: 19px; vertical-align: 0; }
.iconbtn__badge {
  position: absolute; top: -3px; right: -3px;
  min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 999px;
  background: var(--mustard); color: #3a2a06;
  font-family: var(--font-mono); font-size: .75rem; font-weight: 800;
  display: grid; place-items: center; line-height: 1;
  border: 1.5px solid var(--surface);
}
html[data-theme="dark"] .iconbtn__badge { color: #2a1c04; }

.card {
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--r);
  padding: 18px;
  box-shadow: var(--shadow-hard);
}
.card + .card { margin-top: 14px; }
.card__title { display: flex; align-items: center; gap: .5em; margin-bottom: .5em; }

.panel {
  background: var(--surface-2);
  border: 1.5px dashed var(--line-2);
  border-radius: var(--r);
  padding: 14px 16px;
}

.badge {
  display: inline-flex; align-items: center; gap: .35em;
  font-size: .75rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase;
  padding: .28em .7em; border-radius: 999px;
  background: var(--green-100); color: var(--green-700);
  border: 1px solid var(--green-200);
}
html[data-theme="dark"] .badge { background: var(--present-bg); color: var(--green-300); border-color: var(--line-2); }
.badge--past    { background: var(--past-bg);    color: var(--past); }
.badge--present { background: var(--present-bg); color: var(--present); }
.badge--future  { background: var(--future-bg);  color: var(--future); }

.chip {
  display: inline-block;
  font-size: .82rem;
  padding: .3em .72em;
  margin: 0 .35em .4em 0;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--ink-soft);
}
.chip b { color: var(--ink); font-weight: 700; }

/* ---------- 2/3: formül, cümle, zaman çizgisi, harita ---------- */

.formula { display: grid; gap: 8px; margin: 0; }
.formula__row {
  display: grid; grid-template-columns: 30px 1fr; align-items: center; gap: 10px;
  background: var(--surface-2);
  border: 1.5px solid var(--line);
  border-left: 5px solid var(--green-500);
  border-radius: var(--r-sm);
  padding: 9px 12px;
}
.formula__row--neg { border-left-color: var(--terra); }
.formula__row--que { border-left-color: var(--mustard); }
.formula__sign { font-size: 1.15rem; font-weight: 800; text-align: center; color: var(--ink-mute); }
.formula__txt { font-family: var(--font-mono); font-size: .86rem; line-height: 1.5; }
.formula__txt b { background: color-mix(in srgb, var(--mustard) 35%, transparent); padding: 0 .2em; border-radius: 3px; }

.example {
  border: 2px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  padding: 14px 15px;
  margin-bottom: 12px;
}
.example--accent { border-left: 6px solid var(--accent); }
.sentence {
  font-size: 1.12rem;
  line-height: 1.8;
  font-family: var(--font-display);
  margin: 0 0 .35em;
}
.w {
  display: inline-block;
  cursor: pointer;
  border-bottom: 1.5px dotted color-mix(in srgb, var(--accent) 65%, transparent);
  padding: 0 1px;
  border-radius: 3px 3px 0 0;
  transition: background .12s ease, color .12s ease;
}
.w:hover, .w.is-active { background: var(--mustard); color: #2f2205; border-bottom-color: transparent; }
.w--key { background: color-mix(in srgb, var(--green-300) 45%, transparent); font-weight: 700; border-bottom-style: solid; }
html[data-theme="dark"] .w--key { background: color-mix(in srgb, var(--green-500) 40%, transparent); }
.sentence .p { cursor: default; border: 0; }

.example__tr {
  font-size: .98rem; color: var(--ink-soft);
  border-top: 1.5px dashed var(--line);
  padding-top: .6em; margin: .5em 0 0;
  animation: fadeUp .25s ease;
}
.example__note {
  font-size: .85rem; color: var(--ink-mute);
  background: var(--surface-2); border-radius: var(--r-sm);
  padding: .5em .7em; margin-top: .55em;
  border-left: 3px solid var(--mustard);
}
.example__bar { display: flex; flex-wrap: wrap; gap: 8px; margin-top: .6em; align-items: center; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.tl { width: 100%; display: block; }
.tl-wrap {
  background: var(--surface-2);
  border: 2px solid var(--line);
  border-radius: var(--r);
  padding: 10px 6px 4px;
  overflow: hidden;
}
.tl-caption { font-size: .85rem; color: var(--ink-soft); text-align: center; margin: 2px 8px 8px; }
.tl text { font-family: var(--font-body); }
.tl .tl-axis { stroke: var(--ink-soft); stroke-width: 3; }
.tl .tl-now { stroke: var(--ink); stroke-width: 2.5; stroke-dasharray: 5 5; }
.tl .tl-lbl { fill: var(--ink-mute); font-size: 20px; }
.tl .tl-nowlbl { fill: var(--ink); font-size: 21px; font-weight: 700; }
.tl .tl-mark-lbl { fill: var(--ink-soft); font-size: 19px; }
/* Küçük kart çizgisinde --past-bg / --future-bg neredeyse aynı parlaklıkta
   olduğundan (özellikle koyu temada) mobilde ayırt edilmiyordu. --tl-mini-*
   (bkz. base.css) --past/--future rengiyle önceden karıştırılmış, sabit bir
   değerdir - color-mix() gibi eski tarayıcılarda desteklenmeyebilecek bir
   fonksiyona bağımlı olmadan her yerde aynı ısı farkını verir. */
.tl .tl-zone-past { fill: var(--past-bg); }
.tl .tl-zone-future { fill: var(--future-bg); }
.tl--mini .tl-zone-past { fill: var(--tl-mini-past); }
.tl--mini .tl-zone-future { fill: var(--tl-mini-future); }

.grid-map { display: flex; flex-direction: column; gap: 18px; }

/* Zorluk katmanları (Başlangıç/Orta/İleri): her biri kendi grid
   bağlamını taşır (eski .grid-map'in yaptığı gibi), böylece içindeki
   .grid-map__aspect/.grid-map__row kuralları değişmeden çalışır. */
.grid-map__tier { display: grid; gap: 12px; border-radius: var(--r-lg); padding: 14px 12px 16px; }
.grid-map__tier--baslangic { background: color-mix(in srgb, var(--green-600) 7%, var(--surface)); }
.grid-map__tier--orta      { background: color-mix(in srgb, var(--mustard) 10%, var(--surface)); }
.grid-map__tier--ileri     { background: color-mix(in srgb, var(--terra) 13%, var(--surface)); }
html[data-theme="dark"] .grid-map__tier--baslangic { background: color-mix(in srgb, var(--green-600) 12%, var(--surface)); }
html[data-theme="dark"] .grid-map__tier--orta      { background: color-mix(in srgb, var(--mustard) 13%, var(--surface)); }
html[data-theme="dark"] .grid-map__tier--ileri     { background: color-mix(in srgb, var(--terra) 17%, var(--surface)); }

.grid-map__tier-head { display: flex; align-items: center; gap: 10px; }
.grid-map__tier-badge {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: .8rem; font-weight: 700; color: var(--cream);
}
.grid-map__tier-badge--baslangic { background: var(--green-600); }
.grid-map__tier-badge--orta { background: var(--mustard); color: #3a2a06; }
.grid-map__tier-badge--ileri { background: var(--terra-d); }
.grid-map__tier-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.grid-map__tier-name {
  font-family: var(--font-mono); font-size: .8rem; font-weight: 700; letter-spacing: .1em;
}
.grid-map__tier-name--baslangic { color: var(--green-700); }
.grid-map__tier-name--orta { color: var(--mustard-ink); }
.grid-map__tier-name--ileri { color: var(--terra-d); }
html[data-theme="dark"] .grid-map__tier-name--baslangic { color: var(--green-300); }
html[data-theme="dark"] .grid-map__tier-name--orta { color: var(--mustard); }
html[data-theme="dark"] .grid-map__tier-name--ileri { color: var(--past); }
.grid-map__tier-hint { font-size: .75rem; color: var(--ink-mute); }
.grid-map__tier-count {
  flex: 0 0 auto; font-family: var(--font-mono); font-size: .75rem; color: var(--ink-mute);
  background: color-mix(in srgb, var(--surface) 60%, transparent);
  border: 1px solid var(--line); border-radius: 999px; padding: 2px 8px;
}

/* Uçtan uca tek ince ok: kalın rozetler yerine sade bir zaman şeridi. */
.timebar { margin: 2px 0 14px; }
.timebar__labels {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-mono); font-size: .75rem; font-weight: 700;
  letter-spacing: .1em; color: var(--ink-mute); margin-bottom: 5px;
}
/* Artık "NOW" noktası da trackwrap gibi tıklanabilir bir düğme (bkz.
   home.js) - varsayılan buton görünümü sıfırlanıyor ki önceki <span>'den
   farksız görünsün. */
.timebar__label--now {
  position: relative; color: var(--ink); display: inline-flex; align-items: center;
  padding: 0; border: 0; background: none; font: inherit; letter-spacing: inherit;
  cursor: pointer;
}
/* Noktanın "dokununca kuralları döndürür" davranışını fark ettirmek için
   Harita'ya her girişte sağ alt çaprazdan gelen, ucu tam sarı noktaya
   değince bir kez tıklayıp kaybolan bir fare imleci (bkz. home.js).
   Toplam süre tam 2 saniye, tek parça bir animasyon - eski çok tekrarlı
   sürümde tekrarlar bitince ortalama dönüşümü düşüp imleç sağa kayıyordu.
   İmleç ikonu 16px: SVG'deki uç (3,3)/24 birimde, yani 2px; o yüzden öğe
   noktanın merkezinden 2px sola/yukarı konuyor ki uç tam merkeze değsin.
   Renk nötr (--ink), nokta sarı kalıyor. */
.timebar__now-hint {
  position: absolute; top: calc(50% - 2px); left: calc(50% - 2px);
  display: inline-flex; color: var(--ink); pointer-events: none;
  transform-origin: 2px 2px;
  animation: nowCursorTap 2s ease-out both;
}
.timebar__now-hint .icon { width: 16px; height: 16px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .35)); }
@keyframes nowCursorTap {
  0%   { opacity: 0; transform: translate(26px, 26px); }
  12%  { opacity: 1; }
  45%  { opacity: 1; transform: translate(0, 0) scale(1); }
  53%  { transform: translate(0, 0) scale(.78); }
  62%  { transform: translate(0, 0) scale(1); }
  80%  { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(0, 0) scale(1); }
}
/* "NOW" yazısı yerine kalın, sürekli kısa dalgalar yayan bir nokta -
   iki iç içe halka, aralarında gecikmeyle sürekliymiş hissi verir. */
.timebar__now-dot {
  position: relative; width: 8px; height: 8px; border-radius: 50%;
  background: var(--mustard); box-shadow: 0 0 0 1px color-mix(in srgb, var(--mustard) 55%, transparent);
}
.timebar__now-dot::before, .timebar__now-dot::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: var(--mustard); opacity: .6;
  animation: timebarNowPing 1.8s cubic-bezier(.3, .6, .4, 1) infinite;
}
.timebar__now-dot::after { animation-delay: .9s; }
@keyframes timebarNowPing {
  0% { transform: scale(1); opacity: .55; }
  100% { transform: scale(2.4); opacity: 0; }
}

/* Artık dokunulabilir bir düğme: tıklanınca aşağıdaki bütün kartların
   kural metnini birlikte döndürür (bkz. home.js). Sürekli hafif bir
   "nefes alma" ile dokunulabilir olduğunu belli belirsiz hissettirir. */
.timebar__trackwrap {
  display: block; width: calc(100% - 14px); position: relative; height: 22px; margin: 0 7px;
  padding: 0; border: 0; background: none; cursor: pointer;
  animation: tlBreathe 3.4s ease-in-out infinite; transform-origin: center;
}
.timebar__line {
  position: absolute; left: 0; right: 0; top: 50%; height: 2px;
  background: var(--line-2); transform-origin: center; transform: translateY(-50%);
}
.timebar__cap {
  position: absolute; top: 50%; width: 0; height: 0;
  border-top: 5px solid transparent; border-bottom: 5px solid transparent;
  transform: translateY(-50%);
}
.timebar__cap--l { left: -7px; border-right: 7px solid var(--line-2); }
.timebar__cap--r { right: -7px; border-left: 7px solid var(--line-2); }

/* İlk girişte: etiketler hafifçe yukarıdan belirir, ardından çizgi ortadan
   iki yana doğru büyür, oklar tam çizgi uçlara ulaştığında belirir. */
@keyframes timebarLabelsIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes timebarLineGrow { from { transform: translateY(-50%) scaleX(0); } to { transform: translateY(-50%) scaleX(1); } }
@keyframes timebarCapIn { from { opacity: 0; } to { opacity: 1; } }
.timebar--intro .timebar__labels { animation: timebarLabelsIn .7s ease both; }
.timebar--intro .timebar__line { animation: timebarLineGrow 1.1s cubic-bezier(.2, .7, .3, 1) .25s both; }
.timebar--intro .timebar__cap { opacity: 0; animation: timebarCapIn .35s ease 1.25s both; }

.grid-map__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }

/* Kaydırdıkça beliren bölümler: ekrana girmeden önce hiçbiri oynamaz
   (bkz. home.js'teki IntersectionObserver). Bir satırdaki 3 kart hafif
   gecikmeyle art arda belirir. */
.reveal { opacity: 0; transform: translateY(16px); }
@keyframes revealIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.reveal--in { animation: revealIn .65s cubic-bezier(.2, .7, .3, 1) both; }
.grid-map__row > .reveal--in:nth-child(1) { animation-delay: 0s; }
.grid-map__row > .reveal--in:nth-child(2) { animation-delay: .1s; }
.grid-map__row > .reveal--in:nth-child(3) { animation-delay: .2s; }
.grid-map__aspect {
  grid-column: 1 / -1;
  font-family: var(--font-mono); font-size: .75rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-mute);
  display: flex; align-items: center; gap: 10px; margin-top: 6px;
}
.grid-map__aspect::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.tcard {
  display: flex; flex-direction: column; justify-content: space-between;
  text-decoration: none; color: inherit;
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--r);
  padding: 10px 11px; min-height: 92px;
  box-shadow: var(--shadow-hard);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
  position: relative; overflow: hidden;
}
.tcard:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--line-2); border-color: var(--accent); }
.tcard__en { font-family: var(--font-display); font-weight: 700; font-size: .93rem; line-height: 1.2; }
/* Sabit yükseklik: en üstteki ana zaman çizgisine dokununca (bkz.
   .timebar__trackwrap, home.js) ad yerine kural metni gelir - metin
   uzunluğu değişse de kart büyümesin diye iki satırlık yer baştan
   ayrılır, taşan kısım kırpılır. */
.tcard__tr {
  display: block; font-size: .76rem; line-height: 1.2; color: var(--ink-mute); margin-top: 2px;
  height: 2.4em; overflow: hidden;
}
.tcard__tr b { color: var(--ink-soft); }
@keyframes tcardTrSwap { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.tcard__tr--swap { animation: tcardTrSwap .25s ease; }

.tcard__mini { margin-top: 8px; }
.tcard--past   { border-top: 5px solid var(--past); }
.tcard--present{ border-top: 5px solid var(--present); }
.tcard--future { border-top: 5px solid var(--future); }
.tcard__done { position: absolute; top: 5px; right: 7px; display: grid; place-items: center; }
.tcard__done .icon { width: 16px; height: 16px; vertical-align: 0; color: var(--green-600); }
html[data-theme="dark"] .tcard__done .icon { color: var(--green-300); }

/* ---------- 3/3: sözlük, alıştırma, modal, toast ---------- */

.wlist { display: grid; gap: 8px; }
.wrow {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--surface); border: 1.5px solid var(--line);
  border-radius: var(--r-sm); padding: 9px 12px;
}
.wrow__en { font-weight: 700; font-family: var(--font-display); }
.wrow__tr { color: var(--ink-soft); font-size: .9rem; }
.wrow__acts { display: flex; gap: 6px; flex: 0 0 auto; }

.input {
  width: 100%; padding: .7em .95em;
  border: 2px solid var(--line-2); border-radius: 999px;
  background: var(--surface); color: var(--ink); font-size: 1rem;
}
.input:focus { outline: none; box-shadow: var(--ring); border-color: var(--green-500); }

.quiz__q { font-size: 1.05rem; font-family: var(--font-display); margin-bottom: .5em; line-height: 1.4; animation: fadeUp .3s ease; }
.quiz__opts { display: grid; gap: 7px; }
/* Yeni bir soruya her geçişte şıklar sırayla belirir ("testlere girişte
   animasyon" isteği) - .opt her paint()'te sıfırdan oluşturulan bir eleman
   olduğu için animasyon her seferinde baştan oynar, ekstra bir JS sınıfına
   gerek yok. En çok 4 şık olduğundan (bkz. 'ABCD') dördüncüden sonrası için
   ayrı bir kural gerekmiyor. */
/* fill-mode "backwards" (both değil): gecikme sırasında görünmez kalması
   yeterli, animasyon bitince "forwards" gibi sabitlenip .opt:hover/.opt:active
   için gereken transform'u kalıcı olarak ezmesin. */
.quiz__opts > .opt { animation: fadeUp .32s cubic-bezier(.2, .7, .3, 1) backwards; }
.quiz__opts > .opt:nth-child(1) { animation-delay: 0s; }
.quiz__opts > .opt:nth-child(2) { animation-delay: .07s; }
.quiz__opts > .opt:nth-child(3) { animation-delay: .14s; }
.quiz__opts > .opt:nth-child(4) { animation-delay: .21s; }
.opt {
  text-align: left; width: 100%;
  border: 2px solid var(--line-2); border-radius: var(--r-sm);
  background: var(--surface); padding: .5em .8em; cursor: pointer;
  display: flex; align-items: center; gap: .6em;
  transition: transform .1s ease, background .15s ease, border-color .15s ease;
}
.opt:hover { background: var(--surface-2); transform: translateX(3px); }
.opt__key { width: 23px; height: 23px; flex: 0 0 auto; border-radius: 50%;
  background: var(--surface-2); border: 1.5px solid var(--line-2);
  display: grid; place-items: center; font-size: .75rem; font-weight: 700; }
.opt.is-right {
  background: var(--ok-bg); border-color: var(--ok-edge);
  box-shadow: 3px 3px 0 var(--ok-edge);
}
.opt.is-wrong {
  background: var(--no-bg); border-color: var(--no-edge);
  box-shadow: 3px 3px 0 var(--no-edge);
}
.opt.is-right .opt__key { background: var(--ok-edge); border-color: var(--ok-edge); color: var(--ok-key); font-size: .95rem; }
.opt.is-wrong .opt__key { background: var(--no-edge); border-color: var(--no-edge); color: var(--no-key); font-size: .95rem; }
.opt.is-dim { opacity: .45; }
.opt[disabled] { cursor: default; transform: none; }
.opt[disabled]:hover { background: var(--surface); transform: none; }
.opt.is-right[disabled]:hover { background: var(--ok-bg); }
.opt.is-wrong[disabled]:hover { background: var(--no-bg); }
.opt__txt { flex: 1; min-width: 0; }
.opt__tag {
  flex: 0 0 auto;
  font-size: .75rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: .2em .55em; border-radius: 999px;
  background: var(--surface); color: var(--ink-soft);
  border: 1px solid currentColor;
}
.quiz__fb { margin-top: 12px; animation: fadeUp .25s ease; }
.quiz__score { font-family: var(--font-mono); font-size: .85rem; color: var(--ink-soft); }

.callout {
  border-left: 5px solid var(--mustard);
  background: color-mix(in srgb, var(--mustard) 12%, var(--surface));
  border-radius: var(--r-sm); padding: 12px 14px; margin: 12px 0; font-size: .94rem;
}
.callout--warn { border-left-color: var(--no-edge); background: color-mix(in srgb, var(--no-edge) 16%, var(--surface)); }
.callout--tip  { border-left-color: var(--ok-edge); background: color-mix(in srgb, var(--ok-edge) 16%, var(--surface)); }
.callout__t { font-weight: 700; display: block; margin-bottom: .2em; }

.vs { display: grid; gap: 10px; }
.vs__cell { border: 1.5px solid var(--line); border-radius: var(--r-sm); padding: 10px 12px; background: var(--surface); }
.vs__cell--bad { border-color: color-mix(in srgb, var(--terra) 45%, transparent); background: color-mix(in srgb, var(--terra) 7%, var(--surface)); }
.vs__cell--good { border-color: color-mix(in srgb, var(--present) 45%, transparent); background: color-mix(in srgb, var(--present) 7%, var(--surface)); }
.vs__tag { font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; display: block; margin-bottom: .2em; }
.vs__cell--bad .vs__tag { color: var(--past); }
.vs__cell--good .vs__tag { color: var(--present); }

.tablewrap { overflow-x: auto; border: 2px solid var(--line); border-radius: var(--r); }
table.tbl { width: 100%; border-collapse: collapse; min-width: 430px; background: var(--surface); }
table.tbl th, table.tbl td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--line); font-size: .92rem; }
table.tbl th { background: var(--surface-2); font-family: var(--font-mono); font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; }
table.tbl tr:last-child td { border-bottom: 0; }

.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  padding: 10px 10px calc(10px + env(safe-area-inset-bottom, 0px));
  animation: sheetUp .22s ease;
}
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: none; } }
.sheet__card {
  max-width: 520px; margin: 0 auto; position: relative;
  background: var(--surface); border: 2px solid var(--accent);
  border-radius: var(--r-lg); padding: 16px 18px 14px;
  box-shadow: 0 -8px 30px rgba(15, 42, 28, .28);
}
.sheet__close { position: absolute; top: 8px; right: 10px; background: none; border: 0; font-size: 1.1rem; cursor: pointer; color: var(--ink-mute); }
.sheet__head { display: flex; align-items: center; gap: 10px; }
.sheet__word { margin: 0; font-size: 1.5rem; }
.sheet__pos { font-family: var(--font-mono); font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-mute); margin: 0 0 .3em; }
.sheet__mean { font-size: 1.05rem; margin: 0 0 .3em; }
.sheet__note { font-size: .85rem; color: var(--ink-mute); margin: 0; }
.sheet__foot { margin-top: 10px; }

.modal { position: fixed; inset: 0; z-index: 70; background: rgba(15, 42, 28, .45);
  display: grid; place-items: center; padding: 16px; animation: fade .2s ease; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
/* Küçük pencere şeklinde açılan her şeyin (Ayarlar, Başarımlar, Bugünün
   Çalışması, Canlar, sıfırlama onayı vb. - hepsi .modal) arkası hafifçe
   bulanıklaşır. Telefonu yormasın diye düşük bir bulanıklık değeri (6px)
   kullanılıyor. "Animasyonları azalt" açıksa ya da sistem azaltılmış hareket
   istiyorsa tamamen kapanır: arkadaki sayfada sürekli oynayan küçük
   animasyonlar (ör. nefes alan zaman kartları) varsa backdrop-filter her
   karede yeniden hesaplanır, bu da zayıf cihazlarda gereksiz yük demektir. */
.modal { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
html[data-motion="less"] .modal { backdrop-filter: none; -webkit-backdrop-filter: none; }
@media (prefers-reduced-motion: reduce) {
  .modal { backdrop-filter: none; -webkit-backdrop-filter: none; }
}
.modal__card {
  width: min(520px, 100%); max-height: 86vh; overflow: auto;
  background: var(--surface); border: 2px solid var(--accent);
  border-radius: var(--r-lg); padding: 18px 20px; box-shadow: var(--shadow-soft);
}
.modal__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.modal__head h2 { margin: 0; }
.field { margin-bottom: 10px; }
.field__lbl { display: flex; justify-content: space-between; font-weight: 600; font-size: .92rem; margin-bottom: .3em; }
.field input[type="range"] { width: 100%; accent-color: var(--green-600); }
.field select { width: 100%; padding: .5em .7em; border: 2px solid var(--line-2); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); }
.switchrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px dashed var(--line); }
.switchrow:last-child { border-bottom: 0; }

/* ---------- Ayarlar penceresi: Ayarlar/Hakkında sekmeleri ---------- */
.settings-tabs { display: flex; gap: 4px; margin-bottom: 12px; background: var(--surface-2); padding: 4px; border-radius: 999px; }
.settings-tab {
  flex: 1; text-align: center; padding: .5em 0;
  border: 0; border-radius: 999px; background: transparent;
  color: var(--ink-soft); font-weight: 700; font-size: .88rem; cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.settings-tab:hover { color: var(--ink); }
.settings-tab.is-active { background: var(--accent); color: var(--accent-ink); }
#settings-body .eyebrow { margin: 12px 0 6px; }
#settings-body .settings-tabs + .eyebrow { margin-top: 0; }
#settings-modal .modal__card { padding: 16px 18px; }

/* ---------- başarımlar: liste ve kutlama kutusu ---------- */
.ach-grid { display: grid; gap: 9px; margin-bottom: 2px; }
.ach-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 10px 12px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  transition: opacity .15s ease;
}
.ach-item__ico {
  flex: 0 0 auto; width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--line-2);
  color: var(--ink-mute);
}
.ach-item__ico .icon { width: 21px; height: 21px; }
.ach-item__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ach-item__body b { font-size: .93rem; }
.ach-item__body .soft { font-size: .82rem; }
.ach-item__date { font-size: .75rem; color: var(--green-600); font-weight: 700; }
html[data-theme="dark"] .ach-item__date { color: var(--green-400); }

/* 0.9: kilitli başarımın açıklaması (nasıl açılacağı) okunabilir kalmalı;
   tüm kartı soldurmak yerine yalnız ikon soluk/gri, çerçeve kesikli. */
.ach-item.is-locked { border-style: dashed; }
.ach-item.is-locked .ach-item__ico { opacity: .5; filter: grayscale(1); }
.ach-item.is-locked b { color: var(--ink-soft); }
.ach-item.is-unlocked { border-color: var(--mustard-d); }
.ach-item.is-unlocked .ach-item__ico { background: var(--mustard); border-color: var(--mustard-d); color: #3a2a06; }

/* Başarımlar tek düze hardal + gri görünmesin diye her kategori kendi
   rengini taşır (Alıştırma yukarıdaki varsayılan hardalda kalıyor, çünkü
   zaten kendi sekmesinin rengiyle örtüşüyor). Kilitliyken hepsi aynı nötr
   gri kalır - renk yalnızca kazanılınca ortaya çıkıyor. */
.ach-cat--zaman { color: var(--green-700); }
html[data-theme="dark"] .ach-cat--zaman { color: var(--green-300); }
.ach-grid--zaman .ach-item.is-unlocked { border-color: var(--green-600); }
.ach-grid--zaman .ach-item.is-unlocked .ach-item__ico { background: var(--green-600); border-color: var(--green-700); color: var(--cream); }
html[data-theme="dark"] .ach-grid--zaman .ach-item.is-unlocked .ach-item__ico { background: var(--green-400); border-color: var(--green-300); color: #0f2a1c; }

.ach-cat--kelime { color: var(--future); }
.ach-grid--kelime .ach-item.is-unlocked { border-color: var(--future); }
.ach-grid--kelime .ach-item.is-unlocked .ach-item__ico { background: var(--future); border-color: var(--future); color: var(--future-bg); }

.ach-cat--baglilik { color: var(--terra); }
html[data-theme="dark"] .ach-cat--baglilik { color: var(--past); }
.ach-grid--baglilik .ach-item.is-unlocked { border-color: var(--terra); }
html[data-theme="dark"] .ach-grid--baglilik .ach-item.is-unlocked { border-color: var(--past); }
.ach-grid--baglilik .ach-item.is-unlocked .ach-item__ico { background: var(--terra); border-color: var(--terra); color: var(--cream); }
html[data-theme="dark"] .ach-grid--baglilik .ach-item.is-unlocked .ach-item__ico { background: var(--past); border-color: var(--past); color: #2b1408; }

.ach-cat--oyun { color: var(--plum); }
.ach-grid--oyun .ach-item.is-unlocked { border-color: var(--plum); }
.ach-grid--oyun .ach-item.is-unlocked .ach-item__ico { background: var(--plum); border-color: var(--plum); color: var(--cream); }

/* ---------- Bugünün Çalışması: modal içindeki görev listesi ---------- */
.gate__daily-list { display: flex; flex-direction: column; gap: 8px; }
.gate__daily-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-2);
}
.gate__daily-check { flex: 0 0 auto; display: grid; place-items: center; color: var(--ink-mute); }
.gate__daily-check .icon { width: 20px; height: 20px; }
.gate__daily-ico { flex: 0 0 auto; display: grid; place-items: center; color: var(--accent); }
.gate__daily-ico .icon { width: 17px; height: 17px; }
.gate__daily-label { flex: 1 1 auto; min-width: 0; font-size: .88rem; color: var(--ink); }
.gate__daily-count { flex: 0 0 auto; font-family: var(--font-mono); font-size: .78rem; color: var(--ink-mute); }
.gate__daily-item.is-done { border-color: var(--mustard-d); background: color-mix(in srgb, var(--mustard) 12%, var(--surface-2)); }
.gate__daily-item.is-done .gate__daily-check,
.gate__daily-item.is-done .gate__daily-count { color: var(--green-600); }
html[data-theme="dark"] .gate__daily-item.is-done .gate__daily-check,
html[data-theme="dark"] .gate__daily-item.is-done .gate__daily-count { color: var(--green-400); }
.gate__daily-item.is-done .gate__daily-label { color: var(--ink-mute); text-decoration: line-through; text-decoration-color: var(--line-2); }
html[data-theme="dark"] .ach-item.is-unlocked .ach-item__ico { color: #2a1c04; }

.modal__card.ach-pop { text-align: center; padding: 28px 22px 22px; border-color: var(--mustard-d); }
.ach-pop__ico {
  width: 84px; height: 84px; margin: 0 auto 14px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--mustard); border: 3px solid var(--mustard-d); color: #3a2a06;
  animation: achPop .5s cubic-bezier(.2,1.6,.4,1) both;
}
html[data-theme="dark"] .ach-pop__ico { color: #2a1c04; }
.ach-pop__ico .icon { width: 46px; height: 46px; }
@keyframes achPop { from { opacity: 0; transform: scale(.4) rotate(-14deg); } to { opacity: 1; transform: none; } }
.ach-pop__eyebrow { font-family: var(--font-mono); font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--mustard-d); font-weight: 700; margin: 0 0 .3em; }
.modal__card.ach-pop h3 { margin: 0 0 .3em; }
.modal__card.ach-pop p:not(.ach-pop__eyebrow) { margin: 0 0 1.1em; color: var(--ink-soft); }

.toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--tabbar-h) + 18px + env(safe-area-inset-bottom, 0px));
  z-index: 80; background: var(--green-800); color: var(--cream);
  padding: .6em 1.1em; border-radius: 999px; font-size: .9rem;
  box-shadow: var(--shadow-soft); animation: fadeUp .2s ease;
  max-width: 88vw; text-align: center;
}

/* ---------- ek: çizgi animasyonu ve küçük yardımcılar ---------- */
.tl .tl-pop { animation: tlpop .45s cubic-bezier(.2,1.4,.5,1) both; transform-origin: center; }
@keyframes tlpop { from { opacity: 0; transform: translateY(8px) scale(.85); } to { opacity: 1; transform: none; } }
.tcard .tl-wrap { padding: 0; border: 0; background: transparent; }
.speaking { background: color-mix(in srgb, var(--mustard) 55%, transparent) !important; border-radius: 4px; }
.pill-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 12px; -webkit-overflow-scrolling: touch; }
.pill-row .btn { flex: 0 0 auto; }

/* ---------- Cümle kurma alıştırması ---------- */
.builder__line {
  min-height: 62px;
  display: flex; flex-wrap: wrap; gap: 7px; align-content: flex-start;
  padding: 10px;
  border: 2px dashed var(--line-2); border-radius: var(--r);
  background: var(--surface-2);
}
.builder__line.is-right { border-style: solid; border-color: var(--ok-edge); background: var(--ok-bg); }
.builder__line.is-wrong { border-style: solid; border-color: var(--no-edge); background: var(--no-bg); }
.builder__hint { color: var(--ink-mute); font-size: .88rem; align-self: center; }
.builder__pool {
  display: flex; flex-wrap: wrap; gap: 7px;
  margin-top: 12px; padding-top: 12px;
  border-top: 1px dashed var(--line);
}
.wchip {
  font-family: var(--font-display);
  font-size: 1rem; line-height: 1.1;
  padding: .45em .75em;
  border: 2px solid var(--line-2); border-radius: 10px;
  background: var(--surface); color: var(--ink);
  cursor: pointer; box-shadow: 2px 2px 0 var(--line-2);
  transition: transform .1s ease, background .15s ease;
}
.wchip:hover { transform: translate(-1px, -1px); background: var(--surface-2); }
.wchip:active { transform: translate(1px, 1px); box-shadow: none; }
.wchip--placed { background: var(--green-100); border-color: var(--green-400); }
html[data-theme="dark"] .wchip--placed { background: var(--present-bg); border-color: var(--green-500); }
.wchip[disabled] { cursor: default; opacity: .85; transform: none; }
/* Havuzdan seçilen kelime kaybolmaz, sadece görünmez olur; böylece
   diğer kelimeler yerinden oynamaz (bkz. game.js paintBuild). */
.wchip--used { visibility: hidden; pointer-events: none; }

.quiz__q--big {
  text-align: center; font-size: 1.6rem; line-height: 1.3;
  padding: 14px 10px; border-radius: var(--r);
  background: var(--surface-2); border: 1.5px dashed var(--line-2);
}

/* ---------- Kart içindeki küçük zaman çizgisi (mobil okunaklılığı) ---------- */
.tl--mini .tl-axis { stroke-width: 1.4; }
.tl--mini .tl-now { stroke-width: 1.4; stroke-dasharray: 3 3; }
.tcard__mini { margin-top: 6px; }

/* .timebar__trackwrap'in "nefes alma" animasyonu (bkz. yukarısı). Süre
   burada, tek yerde tanımlı; data-motion="less" için base.css'teki genel
   kural zaten tüm animasyon sürelerini sıfırlıyor, ekstra işlem gerekmez. */
@keyframes tlBreathe {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.035); opacity: .9; }
}

/* ---------- Açılır ipucu kutusu ---------- */
.disclose {
  border: 1.5px dashed var(--line-2);
  border-radius: var(--r);
  background: var(--surface-2);
  margin-bottom: 14px;
}
.disclose > summary {
  cursor: pointer; list-style: none;
  padding: 6px 14px;
  font-weight: 600; font-size: .92rem;
  color: var(--ink-soft);
  display: flex; align-items: center; gap: 8px;
}
.disclose > summary::-webkit-details-marker { display: none; }
.disclose > summary::before {
  content: "?";
  width: 17px; height: 17px; flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: 50%; background: var(--accent); color: var(--accent-ink);
  font-size: .75rem; font-weight: 800; font-family: var(--font-mono);
}
.disclose > summary::after {
  content: "▾"; margin-left: auto; transition: transform .2s ease; color: var(--ink-mute);
}
.disclose[open] > summary::after { transform: rotate(180deg); }
.disclose > summary:hover { color: var(--ink); }
.disclose__body {
  padding: 2px 14px 14px;
  border-top: 1px dashed var(--line);
  margin-top: 2px;
  animation: fadeUp .2s ease;
}
.disclose__body > p:first-child { margin-top: 10px; }
.disclose__list { margin: 0; padding-left: 18px; font-size: .92rem; }
.disclose__list li { margin-bottom: .3em; }

/* ---------- Harita başlığı: eski ayrı "hero" kutusunun yerini alır ---------- */
.maphead {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; margin: 10px 0 6px;
}
.maphead h1, .maphead h2 { margin: 0; font-size: clamp(1.15rem, 3.2vw, 1.55rem); }
.maphead__num { font-family: var(--font-mono); font-size: .78rem; color: var(--ink-mute); flex: 0 0 auto; }
.maphead__desc { color: var(--ink-soft); font-size: .84rem; margin: 0 0 12px; }
.maphead__actions { margin-bottom: 8px; }


/* ---------- Alıştırma oturum ayarı ---------- */
.setrow {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  background: var(--surface-2); border: 1.5px dashed var(--line-2);
  border-radius: var(--r); padding: 10px 14px; margin-bottom: 14px;
}
.setrow__lbl { font-weight: 600; font-size: .9rem; color: var(--ink-soft); margin-right: auto; }
.modecard { text-decoration: none; color: inherit; display: block; transition: transform .12s ease, box-shadow .12s ease; }
/* Tıklanabilir kartlar da (Sözlük, Alıştırma, Temeller'deki "Karışan
   zamanlar" vb.) tıpkı Kelime Eşleştir'deki kartlar gibi hafifçe kalkıp
   basılınca içeri çöküyor - tüm menülerde aynı "canlı" his için. */
.modecard:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--shadow-color); }
.modecard:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--shadow-color); }

/* Mini Test zorluk kartları: sol kenarlık, kolaydan zora doğru
   koyulaşan bir renk sırası (yeşil → hardal → kiremit → erik). */
.minitest-card { border-left-width: 5px; }
.minitest-card--kolay { border-left-color: var(--green-600); }
.minitest-card--orta { border-left-color: var(--mustard); }
.minitest-card--zor { border-left-color: var(--terra); }
.minitest-card--cok-zor { border-left-color: var(--plum); }

/* ---------- sözlük giriş ekranı: iki büyük buton ---------- */
.hub-grid { display: grid; gap: 14px; }
.hub-card { display: flex; align-items: center; gap: 16px; padding: 22px 20px; }
.hub-card__ico {
  flex: 0 0 auto; width: 56px; height: 56px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--green-100); color: var(--green-700);
  border: 2px solid var(--green-200);
}
html[data-theme="dark"] .hub-card__ico { background: var(--present-bg); color: var(--green-300); border-color: var(--line-2); }
.hub-card__ico .icon { width: 30px; height: 30px; }
.hub-card h3 { margin: 0 0 .2em; font-size: 1.2rem; }
.hub-card p { margin: 0; font-size: .84rem; line-height: 1.35; }

/* ---------- hikaye okuma ekranı ---------- */
.story-body { padding-top: 16px; }
.story-sentence { margin-bottom: .15em; }
.story-sentence.speaking { padding: 2px 6px; margin: 0 -6px .15em; }
.story-sentence--brk { margin-top: 1.3em; }
.story-sentence--brk.speaking { margin-top: calc(1.3em - 2px); }
.story-tr { margin: 0 0 .85em; font-size: .92rem; font-style: italic; }
.countpill {
  display: inline-block; margin-left: .5em;
  font-family: var(--font-mono); font-size: .75rem; font-weight: 700;
  padding: .15em .5em; border-radius: 999px;
  background: var(--no-edge); color: var(--no-key);
}
.countpill--zero { background: var(--surface-2); color: var(--ink-mute); border: 1px solid var(--line); }

/* ---------- Kelime kartındaki örnek cümle ---------- */
.sheet__ex {
  margin-top: 12px; padding: 10px 12px;
  background: var(--surface-2); border-left: 3px solid var(--accent);
  border-radius: var(--r-sm); cursor: pointer;
}
.sheet__ex:hover { background: var(--bg); }
.sheet__ex-lbl {
  display: block; font-family: var(--font-mono); font-size: .75rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: .25em;
}
.sheet__ex-en { font-family: var(--font-display); font-size: 1rem; margin: 0 0 .15em; }
.sheet__ex-tr { font-size: .86rem; color: var(--ink-soft); margin: 0; }

/* ---------- Cümle kurmada fark gösterimi ---------- */
.diffline { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 10px; }
.diffline__lbl {
  font-family: var(--font-mono); font-size: .75rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-mute); width: 100%;
}
.diffw {
  font-family: var(--font-display); font-size: .95rem;
  padding: .15em .45em; border-radius: 6px; border: 1.5px solid transparent;
}
.diffw--ok { background: var(--ok-bg); border-color: var(--ok-edge); }
.diffw--bad { background: var(--no-bg); border-color: var(--no-edge); text-decoration: line-through; text-decoration-thickness: 1px; }

/* ---------- Dikte ---------- */
.input--ok { border-color: var(--ok-edge); background: var(--ok-bg); }
.input--no { border-color: var(--no-edge); background: var(--no-bg); }
.diffw--miss { background: var(--surface-2); border-color: var(--line-2); color: var(--ink-mute); font-size: .8rem; }

/* ---------- Kendini dene: kendi hikâyeni yaz ---------- */
.selftest__sub { font-size: .84rem; margin: -4px 0 10px; }
.story-task__rules { font-size: .84rem; margin: 0 0 6px; }
.story-task__hint {
  font-family: var(--font-mono); font-size: .76rem; color: var(--ink-soft);
  background: var(--surface-2); border: 1px dashed var(--line-2); border-radius: 8px;
  padding: 6px 9px; margin: 0 0 8px; display: flex; align-items: center; gap: 6px;
}
.story-task__hint .icon { width: 14px; height: 14px; flex: none; }
.story-task__field {
  border-radius: 12px; resize: vertical; min-height: 120px;
  font-family: var(--font-display); line-height: 1.5;
}
.story-task__meta { display: flex; justify-content: space-between; gap: 8px; font-size: .75rem; margin-top: 4px; }
.story-check__list { margin: 6px 0 8px; padding-left: 0; list-style: none; font-size: .86rem; }
.story-check__list li { margin: 2px 0; }
.story-check__text {
  line-height: 2; font-family: var(--font-display); font-size: .95rem;
  background: var(--surface); border-radius: 8px; padding: 6px 9px; margin-top: 4px;
}
.story-check__text .diffw { padding: .05em .3em; }
.story-check__issues { margin: 8px 0 0; padding-left: 1.1em; font-size: .84rem; }
.story-check__issues li { margin: 3px 0; }

/* ---------- Sözlük > Deyimler ---------- */
.idiom-list { display: grid; gap: 10px; }
/* sol şerit türü gösterir; sözlük bölümünün kart çerçeve rengini (base.css,
   html[data-section] ... .card) ezebilmek için aynı özgüllükte yazıldı */
.idiom { padding: 12px 14px 12px; }
html[data-section] .card.idiom { border-left: 5px solid var(--future); }
html[data-section] .card.idiom--atasozu { border-left-color: var(--past); }
html[data-section] .card.idiom--kalip { border-left-color: var(--mustard); }
.idiom__top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 4px; }
.idiom__cat {
  font-family: var(--font-mono); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute);
}
.idiom__match {
  font-size: .75rem; padding: .12em .55em; border-radius: 999px;
  border: 1px solid var(--line-2); color: var(--ink-soft); background: var(--surface-2); white-space: nowrap;
}
.idiom__match--birebir { border-color: var(--ok-edge); background: var(--ok-bg); color: var(--ink); }
html[data-theme="dark"] .idiom__match--birebir { background: transparent; color: var(--ok-edge); }
.idiom__tr { font-weight: 700; margin: 0 0 4px; font-size: .95rem; }
.idiom__en-row, .idiom__ex-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.idiom__en { font-family: var(--font-display); font-size: 1.12rem; line-height: 1.3; margin: 0; color: var(--ink); }
.idiom__mean { font-size: .86rem; margin: 6px 0 0; }
.idiom__note {
  display: flex; gap: 6px; align-items: flex-start; font-size: .8rem; color: var(--ink-soft); margin: 6px 0 0;
}
.idiom__note .icon { width: 14px; height: 14px; flex: none; margin-top: 2px; }
.idiom__toggle { margin-top: 8px; }
.idiom__ex { margin-top: 8px; padding: 8px 10px; border-radius: 8px; background: var(--surface-2); }
.idiom__ex-en { font-family: var(--font-display); margin: 0; font-size: .95rem; }
.idiom__ex-tr { margin: 4px 0 0; font-size: .84rem; color: var(--ink-soft); }

/* ---------- Zaman karşılaştırma ---------- */
.cmp__heads { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; }
.cmp__side {
  position: relative;
  border: 2px solid var(--line); border-radius: var(--r);
  background: var(--surface); padding: 12px 12px 10px;
  box-shadow: var(--shadow-hard);
}
.cmp__side--a { border-top: 5px solid var(--ok-edge); }
.cmp__side--b { border-top: 5px solid var(--future); }
.cmp__tag {
  position: absolute; top: 8px; right: 10px;
  font-family: var(--font-mono); font-size: .75rem; font-weight: 800; color: var(--ink-mute);
}
.cmp__yes { color: var(--present); font-weight: 700; }
.cmp__no { color: var(--past); font-weight: 700; }
.cmp__maybe { color: var(--ink-mute); }
.cmp__pair { margin-bottom: 18px; }
.cmp__pairgrid { display: grid; grid-template-columns: 1fr; gap: 10px; }
.cmp__cell { min-width: 0; }
.cmp__cellhead {
  display: block; font-family: var(--font-mono); font-size: .75rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 4px;
}
.cmp__cell .example { margin-bottom: 0; }
.cmp__cell--a .example { border-left: 5px solid var(--present); }
.cmp__cell--b .example { border-left: 5px solid var(--future); }
@media (min-width: 640px) { .cmp__pairgrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 420px) { .cmp__heads { grid-template-columns: 1fr; } }

/* Karşılaştırma tablosu dar ekranda sığsın: yalnız işaret kalır */
table.tbl--cmp { min-width: 0; }
table.tbl--cmp th, table.tbl--cmp td { padding: 8px 10px; }
.cmp__mark { font-weight: 800; }
@media (max-width: 560px) {
  .cmp__word { display: none; }
  table.tbl--cmp th:not(:first-child), table.tbl--cmp td:not(:first-child) { text-align: center; width: 48px; }
  table.tbl--cmp .cmp__mark { font-size: 1.1rem; }
}

/* ---------- Zaman Yolculuğu: pan/zoom'lu tek-cümle zaman çizgisi ---------- */
.tj {
  position: relative; overflow: hidden; touch-action: none; user-select: none;
  border: 2px solid var(--line); border-radius: var(--r); background: var(--surface-2);
  height: min(52vh, 460px); cursor: grab; box-shadow: var(--shadow-hard);
}
.tj:active { cursor: grabbing; }
.tj__stage { position: absolute; top: 0; left: 0; transform-origin: 0 0; will-change: transform; }

.tj__axis { position: absolute; left: 0; width: 100%; top: 160px; height: 3px; background: var(--line-2); border-radius: 2px; }
/* ŞİMDİ çizgisi bilerek belirgin: kalın, hafif bir hâle (glow) ile ve
   sabit bir mustard dolgu üzerinde beyaz/koyu yazılı bir rozet. */
.tj__now {
  position: absolute; top: 20px; bottom: 20px; width: 4px; border-radius: 3px;
  background: var(--mustard);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--mustard) 25%, transparent);
  transform: translateX(-50%);
}
.tj__now-lbl {
  position: absolute; top: 0; transform: translateX(-50%);
  font-family: var(--font-mono); font-size: .75rem; font-weight: 800;
  letter-spacing: .1em; white-space: nowrap;
  background: var(--mustard); color: #3a2a06;
  padding: 3px 10px; border-radius: 999px;
  box-shadow: var(--shadow-hard);
}

/* Sağ/sol uç yön ipuçları: .tj__stage'in DIŞINDA, viewport'a sabit -
   pan/zoom'dan etkilenmez, her zaman görünür kalır. */
.tj__edge {
  position: absolute; top: 50%; transform: translateY(-50%);
  padding: 5px 11px; border-radius: 999px;
  background: var(--surface); border: 1.5px solid var(--line-2);
  font-family: var(--font-mono); font-size: .75rem; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase; color: var(--ink-mute);
  box-shadow: var(--shadow-hard); z-index: 2; pointer-events: none; white-space: nowrap;
}
.tj__edge--l { left: 8px; }
.tj__edge--r { right: 8px; }

.tj__item {
  position: absolute; transform: translateX(-50%);
  width: 176px; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 8px 10px; border-radius: var(--r-sm);
  border: 1.5px solid var(--line); background: var(--surface);
  cursor: pointer; text-align: center;
  transition: box-shadow .15s ease;
}
.tj__item:hover { box-shadow: var(--shadow-hard); }
.tj__item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tj__item--above { top: 24px; }
.tj__item--below { top: 176px; }
.tj__item::after {
  content: ''; position: absolute; left: 50%; width: 2px; background: var(--line-2);
}
.tj__item--above::after { top: 100%; height: 16px; }
.tj__item--below::after { bottom: 100%; height: 16px; }

.tj__item-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.tj__item--past .tj__item-dot    { background: var(--past); }
.tj__item--present .tj__item-dot { background: var(--present); }
.tj__item--future .tj__item-dot  { background: var(--future); }
.tj__item-tag {
  font-family: var(--font-mono); font-size: .75rem; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase; color: var(--ink-mute);
}
.tj__item-sentence { font-family: var(--font-display); font-size: .84rem; line-height: 1.25; color: var(--ink); }

/* Uzaktan (küçük ölçekte) yalnız nokta + etiket görünsün, cümle metni
   ekranı doldurmasın; yakınlaşınca cümleler ortaya çıksın. */
.tj.is-compact .tj__item { width: auto; padding: 6px 10px; }
.tj.is-compact .tj__item-sentence { display: none; }

.tj__zoombar { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
/* flex item'lar varsayılan olarak içeriklerinin doğal genişliğinin altına
   küçülmez (min-width:auto); range input'un kendi varsayılan minimum
   genişliği dar telefonlarda satırı taşırıyordu. */
.tj__zoombar input[type="range"] { flex: 1 1 80px; min-width: 0; accent-color: var(--accent); }

.tj__detail { margin-top: 12px; min-height: 60px; }
.tj__detail-hint { color: var(--ink-mute); font-style: italic; margin: 0; }
.tj__detail .example { margin-top: 10px; margin-bottom: 0; }
.tj__detail .badge { text-transform: capitalize; }