/* karşılık — ingilizce ↔ türkçe sözlük
   Editöryel / brutalist dizgi. Ana giriş alanında TEK bir çerçeve, kutu ya da
   çizgi yok. Yapıyı beyaz boşluk + tipografi kurar; anlam etiketleri kenar
   boşluğunda (gutter) yüzer, karşılıklar tek bir dikey eksende hizalanır.       */

:root{
  --serif:'Libre Baskerville', Georgia, 'Times New Roman', serif;
  --display:'Playfair Display', Georgia, serif;
  --sans:ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --bg:#F2E6CE; --glow:#F9F1DE; --ink:#1E190F; --muted:#5C5443; --faint:#8E7F64;
  --acc:#BE3A24; --acc-soft:rgba(190,58,36,.08); --paper:#FBF4E3;
  --gold:#A8763B; --shadow:rgba(40,20,8,.13); --ex:#574B38;

  --dm1:#BE3A24; --dm2:#8A5E22; --dm3:#4C6038; --dm4:#3C5067; --dm5:#79394C; --dm6:#665030;

  --gut:120px; --gutgap:30px;
}
body.gece{
  --bg:#15110D; --glow:#231B12; --ink:#F1E6C9; --muted:#A89A7C; --faint:#7C6F58;
  --acc:#E2603F; --acc-soft:rgba(226,96,63,.12); --paper:#1E1811;
  --gold:#C9A35C; --shadow:rgba(0,0,0,.4); --ex:#C7B894;
  --dm1:#E2603F; --dm2:#CBA15A; --dm3:#96A877; --dm4:#7E93AB; --dm5:#C5808F; --dm6:#B0895C;
}

*{box-sizing:border-box; margin:0; padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:radial-gradient(1200px 560px at 28% -180px, var(--glow) 0%, var(--bg) 58%) fixed, var(--bg);
  color:var(--ink); font-family:var(--serif); font-size:16px; line-height:1.55;
  min-height:100vh; -webkit-font-smoothing:antialiased; transition:background .4s, color .4s;
}
.wrap{max-width:1060px; margin:0 auto; padding:16px 26px 110px}
a{color:inherit}
::selection{background:var(--acc-soft)}

/* ---- üst şerit ---- */
.topbar{display:flex; align-items:center; justify-content:space-between}
.eve-don{display:inline-flex; align-items:center; gap:8px; font-family:var(--sans); font-size:12px;
  letter-spacing:.04em; color:var(--muted); text-decoration:none}
.eve-don::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--acc); flex:none}
.eve-don:hover{color:var(--acc)}
.themebtn{font-family:var(--sans); font-size:12px; letter-spacing:.04em; padding:0; border:none;
  background:none; color:var(--muted); cursor:pointer}
.themebtn:hover{color:var(--acc)}
.topright{display:inline-flex; align-items:center; gap:18px}
.randbtn{font-family:var(--sans); font-size:12px; letter-spacing:.04em; padding:0; border:none;
  background:none; color:var(--muted); cursor:pointer}
.randbtn:hover{color:var(--acc); text-decoration:underline; text-underline-offset:3px}

/* ---- iki sütun: ana metin + yan panel, ARADA ÇİZGİ YOK, saf boşluk ---- */
.layout{display:block}
.col-main{max-width:680px}
.col-side{margin-top:46px}
@media(min-width:1000px){
  .layout{display:grid; grid-template-columns:minmax(0,1fr) 210px; gap:0 70px; align-items:start}
  .col-main{max-width:700px}
  .col-side{margin-top:92px; position:sticky; top:24px}
}

/* ---- başlık ---- */
header.brand{margin-top:22px}
header.brand h1{font-family:var(--display); font-weight:700; font-size:34px; letter-spacing:-.02em; line-height:1}
header.brand h1 .dot{color:var(--acc)}
header.brand .tag{font-family:var(--serif); font-style:italic; color:var(--muted); font-size:13px; margin-top:8px}

/* ---- arama: editöryel alt-çizgi, kutu yok ---- */
.searchwrap{position:sticky; top:0; z-index:30; background:var(--bg); padding:18px 0 9px; margin-top:16px}
.searchrow{display:flex; align-items:baseline; gap:16px; border-bottom:2px solid var(--ink);
  transition:border-color .2s}
.searchrow:focus-within{border-color:var(--acc)}
.dirbtn{font-family:var(--sans); font-size:11px; font-weight:700; letter-spacing:.08em; color:var(--muted);
  background:none; border:none; padding:0; cursor:pointer; white-space:nowrap}
.dirbtn b{color:var(--acc)}
.dirbtn:hover{color:var(--ink)}
#q{flex:1; font-family:var(--display); font-size:25px; padding:6px 0; border:none; background:none;
  color:var(--ink); outline:none; min-width:0}
#q::placeholder{color:var(--faint); font-style:italic; font-family:var(--serif); font-size:19px}
.slashhint{align-self:center; font-family:var(--sans); font-size:11px; color:var(--faint)}
#q:not(:placeholder-shown) + .slashhint, .searchrow:focus-within .slashhint{display:none}
.clearbtn{border:none; background:none; color:var(--faint); font-size:22px; cursor:pointer; padding:0 2px}
.clearbtn:hover{color:var(--acc)}

#sugg{position:absolute; left:0; right:0; margin-top:8px; background:var(--paper);
  box-shadow:0 16px 40px var(--shadow); overflow:hidden; z-index:31; display:none; border-radius:2px}
#sugg .row{display:flex; align-items:baseline; gap:12px; padding:9px 16px; cursor:pointer}
#sugg .row.sel, #sugg .row:hover{background:var(--acc-soft)}
#sugg .row .dir{font-family:var(--sans); font-size:9px; font-weight:700; letter-spacing:.08em; color:var(--faint)}
#sugg .row .dir.en{color:var(--dm4)} #sugg .row .dir.tr{color:var(--dm2)}
#sugg .row .lm{font-family:var(--display); font-size:18px}
#sugg .row .lm b{color:var(--acc); font-weight:inherit}
#sugg .row .ph{font-style:italic}
#sugg .row .hint{color:var(--muted); font-size:13px; font-style:italic; margin-left:auto; text-align:right;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:48%}

/* ====================  GİRİŞ — saf akış, çerçevesiz  ==================== */
main{margin-top:10px}

.entry-head{display:flex; align-items:baseline; gap:16px; flex-wrap:wrap; margin-bottom:34px}
.entry-head .word{font-family:var(--display); font-weight:700; font-size:50px; line-height:.98; letter-spacing:-.025em}
.entry-head .phon{display:inline-flex; align-items:center; gap:6px; color:var(--faint); font-family:var(--sans); font-size:14px}
.entry-head .ipa{font-size:14px}
.entry-head .dirtag{margin-left:auto; align-self:center; font-family:var(--sans); font-size:10px;
  font-weight:700; letter-spacing:.16em; color:var(--faint)}
.ico{background:none; border:none; padding:1px; cursor:pointer; color:var(--faint); line-height:0;
  display:inline-flex; transition:color .2s}
.ico svg{width:17px; height:17px}
.ico:hover{color:var(--acc)}
.ico.fav.on{color:var(--gold)} .ico.fav.on svg{fill:var(--gold)}

/* anlamlar: domain+POS başlığı ÜSTTE; karşılık MUTLAK sola dayalı (gutter/girinti yok) */
.sense{margin-top:26px}
.sense:first-child{margin-top:0}
.s-head{display:flex; flex-wrap:wrap; align-items:baseline; gap:3px 14px; margin-bottom:5px; line-height:1.2}
.s-dom{font-family:var(--sans); font-size:10px; font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; color:var(--dm6)}
.s-dom.dm1{color:var(--dm1)} .s-dom.dm2{color:var(--dm2)} .s-dom.dm3{color:var(--dm3)}
.s-dom.dm4{color:var(--dm4)} .s-dom.dm5{color:var(--dm5)} .s-dom.dm6{color:var(--dm6)}
.s-pos{font-family:var(--serif); font-style:italic; font-size:12.5px; color:var(--faint)}
.bod .tr{font-family:var(--display); font-size:23px; line-height:1.28; color:var(--acc); font-weight:600;
  overflow-wrap:break-word}
.bod .tr a.tlink{color:var(--acc); text-decoration:none; border-bottom:1px solid transparent;
  transition:border-color .15s, color .15s}
.bod .tr a.tlink:hover{border-bottom-color:currentColor; color:var(--ink)}
.bod .tr .reg{font-family:var(--serif); font-style:italic; font-weight:400; font-size:13px; color:var(--faint)}
.bod .gloss{font-family:var(--serif); font-style:italic; color:var(--muted); font-size:14.5px; margin-top:5px; max-width:54ch}

/* karşılık ayracı: ince gri orta-nokta — virgül değil; her sözcük ayrı tıklanır bağlantı */
.sep{color:var(--faint); margin:0 .26em; font-weight:400; font-style:normal; font-size:.7em;
  vertical-align:.08em; -webkit-user-select:none; user-select:none}

/* eş/yan anlamlılar — keskin, dik, tıklanır çapraz-başvurular (soluk dipnot DEĞİL).
   Sözcükler: Playfair 500, koyu mürekkep; etiket: keskin terracotta çapa;
   ayraç (·): sessiz, tıklanmaz; alt-çizgi yalnız :hover'da, zarif ofsetli. */
.syn-line{margin-top:9px; line-height:1.6}
.syn-k{font-family:var(--sans); font-size:9.5px; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; margin-right:13px; white-space:nowrap;
  color:#9A4A33; color:color-mix(in srgb, var(--acc) 58%, var(--muted))}
.syn-line a.tlink.syn{font-family:var(--display); font-weight:500; font-style:normal; font-size:15px;
  color:var(--ink); text-decoration:none; text-underline-offset:3px; text-decoration-thickness:1px;
  transition:color .15s}
.syn-line a.tlink.syn:hover{color:var(--acc); text-decoration:underline}
.syn-line .sep{font-size:.78em}

/* zıt anlam: slate-mavi etiket+hover ile eş anlamlıdan ayrı */
.ant-line{margin-top:5px}
.ant-line .syn-k{color:var(--dm4)}
.ant-line a.tlink.ant{font-family:var(--display); font-weight:500; font-style:normal; font-size:15px;
  color:var(--ink); text-decoration:none; text-underline-offset:3px; text-decoration-thickness:1px;
  transition:color .15s}
.ant-line a.tlink.ant:hover{color:var(--dm4); text-decoration:underline}

/* ilgili (çapraz-dil köprü): eş anlamlıyla aynı sağlamlıkta ama gold etiket+hover ile ayrı */
.rel-line{margin-top:6px}
.rel-line .syn-k{color:var(--gold)}
.rel-line a.tlink.rel{font-family:var(--display); font-weight:500; font-style:normal; font-size:15px;
  color:var(--ink); text-decoration:none; text-underline-offset:3px; text-decoration-thickness:1px;
  transition:color .15s}
.rel-line a.tlink.rel:hover{color:var(--gold); text-decoration:underline}
.copy{border:none; background:none; padding:0 4px; cursor:pointer; color:var(--faint); line-height:0;
  vertical-align:middle; opacity:0; transition:opacity .15s, color .2s}
.copy svg{width:13px; height:13px}
.sense:hover .copy, .copy:focus{opacity:.6}
.copy:hover, .copy.ok{opacity:1; color:var(--acc)} .copy.ok{color:var(--gold)}

/* örnek — çizgisiz, alıntı tipografisi */
.ex-toggle{font-family:var(--sans); font-size:11.5px; color:var(--ex); cursor:pointer; background:none;
  border:none; padding:8px 0 0; letter-spacing:.04em; display:inline-flex; align-items:center; gap:6px}
.ex-toggle:hover{color:var(--acc)}
.ex-toggle .chev{width:9px; height:9px; transition:transform .2s}
.ex-toggle.open .chev{transform:rotate(90deg)}
.ex{display:none; margin-top:9px}
.ex.show{display:block}
.ex .pair{margin-top:9px}
.ex .pair:first-child{margin-top:0}
.ex .s{display:block; font-size:15px; line-height:1.5}
.ex .t{display:block; color:var(--muted); font-style:italic; font-size:14px; margin-top:1px}

/* bölüm geçişi: kutu yok, italik dizgi başlık + bol boşluk */
.section{margin-top:52px}
.sec-h{font-family:var(--display); font-style:italic; font-size:18px; color:var(--muted); margin-bottom:24px; letter-spacing:.01em}
.sec-h::before{content:"— "; color:var(--faint)}

/* öbekler: aynı sola-dayalı düzen */
.phrase{margin-top:22px}
.phrase:first-of-type{margin-top:0}
.phrase .bod .ph-lm{font-family:var(--display); font-style:italic; font-size:18px; color:var(--ink)}
.phrase .bod .tr{display:inline; font-size:18px}
.phrase.hl .bod .ph-lm{color:var(--acc)}

/* ====================  AKADEMİK KART  ==================== */
.acdot{align-self:center; font-family:var(--sans); font-size:9px; font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; color:var(--acc)}
.ctx-toggle{margin-top:14px}
.ctx-hint{color:var(--faint); font-style:italic; letter-spacing:0; text-transform:none}
.ctx{display:none; margin:14px 0 4px; max-width:64ch}
.ctx.show{display:block}
.ctx-row{display:flex; gap:16px; margin-top:10px}
.ctx-row:first-child{margin-top:0}
.ctx-k{flex:none; width:118px; text-align:right; padding-top:4px; line-height:1.4;
  font-family:var(--sans); font-size:9px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--faint)}
.ctx-v{flex:1; min-width:0; font-family:var(--serif); font-size:13.5px; line-height:1.55; color:var(--muted); font-style:italic}
.coll-list{display:flex; flex-wrap:wrap; gap:4px 14px; font-style:normal}
.coll{font-family:var(--serif); font-style:italic; font-size:13.5px; color:var(--ink)}

.acbody{margin-top:34px}
.acdom{font-family:var(--sans); font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--dm6); margin:32px 0 12px}
.acdom:first-child{margin-top:0}
.acdom.dm1{color:var(--dm1)} .acdom.dm2{color:var(--dm2)} .acdom.dm3{color:var(--dm3)}
.acdom.dm4{color:var(--dm4)} .acdom.dm5{color:var(--dm5)} .acdom.dm6{color:var(--dm6)}
.acsense{margin-top:16px}
.acsense:first-of-type{margin-top:0}
.acsense .tr{font-family:var(--display); font-size:23px; line-height:1.28; color:var(--acc); font-weight:600}
.acsense .tr a.tlink{color:var(--acc); text-decoration:none; border-bottom:1px solid transparent; transition:border-color .15s}
.acsense .tr a.tlink:hover{border-bottom-color:currentColor}
.acsense .gloss{font-family:var(--serif); font-style:italic; color:var(--muted); font-size:14.5px; margin-top:5px; max-width:56ch}
.acnote{font-family:var(--serif); font-size:13px; line-height:1.55; color:var(--muted); margin-top:7px;
  padding-left:15px; max-width:58ch}
.acnote::before{content:"—"; color:var(--faint); margin-left:-15px; margin-right:7px}
@media(max-width:720px){ .ctx-k{width:auto; text-align:left} .ctx-row{flex-direction:column; gap:2px} }

/* ====================  YAN PANEL — kutusuz, saf metin  ==================== */
.sb{margin-bottom:30px}
.sb-h{display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  font-family:var(--sans); font-size:9.5px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--faint); margin-bottom:11px}
.sb-clear{font-family:var(--sans); font-size:8.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--faint); background:none; border:none; cursor:pointer; padding:0}
.sb-clear:hover{color:var(--acc)}
.sb-list{display:flex; flex-direction:column; gap:1px}
.sb-row{display:flex; align-items:baseline; gap:6px}
.sb-row .sb-item{flex:1; min-width:0}
.sb-del{flex:none; font-family:var(--sans); font-size:15px; line-height:1; color:var(--faint);
  background:none; border:none; cursor:pointer; padding:0 2px; opacity:.3; transition:opacity .15s, color .2s}
.sb-row:hover .sb-del{opacity:.7}
.sb-del:hover{opacity:1; color:var(--acc)}
.sb-item{display:flex; align-items:baseline; gap:8px; font-family:var(--serif); font-size:14px; color:var(--ink);
  text-decoration:none; cursor:pointer; padding:3px 0; transition:color .2s}
.sb-item:hover{color:var(--acc)}

/* ARŞİV (yıldızlar + son bakılanlar): sessiz, ikincil referans listesi —
   küçük, soluk, statik. */
.sb-archive .sb-h{color:var(--faint)}
.sb-archive .sb-item{font-size:12.5px; color:var(--muted); font-weight:400}
.sb-archive .sb-item:hover{color:var(--acc)}
.sb-archive .sb-item .cd{color:var(--faint)}

/* NAVİGASYON (ilişkili sözcükler): aracın gezinme motoru — daha güçlü,
   koyu, tıklanır kısayollar. Bol boşlukla arşivden ayrılır. */
.sb-nav{margin-top:42px}
.sb-nav .sb-h{color:var(--muted)}
.sb-nav .sb-item{font-size:16px; color:var(--ink); padding:5px 0; line-height:1.25}
.sb-nav .sb-item:hover{color:var(--acc); text-decoration:underline;
  text-decoration-thickness:1px; text-underline-offset:3px}
.sb-item .cd{font-family:var(--sans); font-size:8px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--faint)}
.sb-empty{font-family:var(--serif); font-style:italic; color:var(--faint); font-size:13px; line-height:1.6}
@media(max-width:999px){
  .sb-list{flex-direction:row; flex-wrap:wrap; gap:4px 18px}
}

/* ---- karşılama ---- */
.landing{margin-top:14px}
.landing .lead{font-family:var(--display); font-size:27px; font-style:italic; color:var(--muted);
  line-height:1.38; max-width:20ch; letter-spacing:-.01em}
.landing .note{font-family:var(--sans); font-size:12px; color:var(--faint); margin-top:22px; line-height:1.8}
.landing .examples{margin-top:32px}
.chips{display:flex; flex-wrap:wrap; gap:6px 20px}
.chip{font-family:var(--display); font-size:17px; color:var(--ink); text-decoration:none; cursor:pointer;
  border-bottom:1px solid transparent; transition:color .2s, border-color .2s}
.chip:hover{color:var(--acc); border-color:var(--acc)}
.chip .cd{display:none}

/* ---- sonuç yok ---- */
.noresult{margin-top:24px}
.noresult .big{font-family:var(--display); font-size:26px; color:var(--ink)}
.noresult .didyou{margin-top:14px; font-style:italic; color:var(--muted)}
.noresult .didyou b{color:var(--acc); cursor:pointer; font-style:normal; border-bottom:1px solid currentColor}

/* ---- altlık ---- */
footer{margin-top:80px; color:var(--faint); font-family:var(--sans); font-size:11px; letter-spacing:.04em; line-height:1.9}
footer .kilim{display:none}
footer a{color:var(--muted); text-decoration:none; border-bottom:1px solid var(--faint)}
footer a:hover{color:var(--acc)}

/* ---- yumuşak giriş ---- */
@keyframes fadein{from{opacity:0; transform:translateY(4px)} to{opacity:1; transform:none}}
.entry-head, .senses, .section, .landing, .noresult{animation:fadein .3s ease both}

@media(max-width:560px){
  .wrap{padding:12px 18px 80px}
  header.brand h1{font-size:30px}
  .entry-head .word{font-size:40px}
  #q{font-size:21px}
}
@media(prefers-reduced-motion:reduce){*{transition:none !important; animation:none !important}}