/* ============================================================
   ethruna|forum
   One stacked column at every width: wordmark and category pills on
   the same top row, the category watermark under them, then the white
   panel centred in the black frame. The page itself never scrolls —
   the panel is the only scroller.
   ============================================================ */
:root{
  --siyah:#000;
  --beyaz:#fff;
  --murekkep:#0A0A0C;
  --panel-en:1100px;                 /* panel never grows past this */
  --panel-bosluk:clamp(14px,3vw,56px);
  --panel-radius:clamp(20px,2.6vw,38px);
  --font:"Helvetica Neue","HelveticaNeue",Helvetica,Arial,"Segoe UI",sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --okuma:68ch;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--font);background:var(--siyah);color:#fff;
  -webkit-font-smoothing:antialiased;overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:#000;color:#fff}

.kabuk{height:100%;display:flex;flex-direction:column;min-height:0}

/* ---------- top row: wordmark + pills + small links ---------- */
.ust{flex:0 0 auto;display:flex;align-items:center;gap:clamp(12px,2vw,28px);flex-wrap:wrap;
  padding:clamp(16px,2.4vw,30px) var(--panel-bosluk) clamp(8px,1.2vw,16px)}
.marka{font-size:clamp(22px,3vw,38px);font-weight:300;letter-spacing:-.02em;
  line-height:1;display:inline-flex;align-items:baseline;flex:0 0 auto}
.marka i{font-style:normal;display:inline-block;transform:scaleX(.62);
  opacity:.5;margin-inline:.16em;font-weight:200}
.marka em{font-style:normal;font-weight:100;color:#fff;opacity:.62}

.haplar{display:flex;gap:clamp(7px,.9vw,12px);flex-wrap:wrap}
.hap{border:1px solid rgba(255,255,255,.9);border-radius:999px;
  padding:clamp(6px,.7vw,10px) clamp(13px,1.5vw,22px);
  font-size:clamp(11px,1.05vw,14px);font-weight:300;color:rgba(255,255,255,.82);
  transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease)}
.hap:hover{background:rgba(255,255,255,.12);color:#fff}
.hap[aria-current="page"]{background:#fff;color:#000;border-color:#fff}

.ust__alt{margin-left:auto;display:flex;gap:clamp(10px,1.4vw,20px);flex-wrap:wrap;
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.42)}
.ust__alt a{transition:color .35s ease}
.ust__alt a:hover{color:#fff}

/* ---------- category watermark, its own band ---------- */
.filigran{flex:0 0 auto;padding:0 var(--panel-bosluk) clamp(8px,1.1vw,16px);
  font-size:clamp(32px,5vw,74px);font-weight:200;letter-spacing:-.045em;
  line-height:1.22;   /* tall enough for descenders in psikoloji / teknoloji */
  color:rgba(255,255,255,.42);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- the white panel: centred, and the only scroller ---------- */
.panel{flex:1 1 auto;min-height:0;
  width:min(var(--panel-en), 100% - var(--panel-bosluk) * 2);
  margin-inline:auto;                                   /* dead centre */
  background:var(--beyaz);color:var(--murekkep);
  border-radius:var(--panel-radius) var(--panel-radius) 0 0;
  overflow-y:auto;overscroll-behavior:contain}
.panel::-webkit-scrollbar{width:9px}
.panel::-webkit-scrollbar-thumb{background:rgba(0,0,0,.22);border-radius:9px}
.panel__ic{padding:clamp(28px,3.6vw,60px) clamp(22px,3.4vw,62px) clamp(60px,10vh,120px)}

/* ---------- list ---------- */
.akis{list-style:none}
.akis li + li{margin-top:clamp(30px,4vw,56px)}
.girdi{display:block;max-width:var(--okuma)}
.girdi__baslik{font-size:clamp(21px,2.6vw,34px);font-weight:400;letter-spacing:-.02em;
  line-height:1.15;color:var(--murekkep);
  display:inline;background-image:linear-gradient(currentColor,currentColor);
  background-size:0 1px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .5s var(--ease)}
.girdi:hover .girdi__baslik{background-size:100% 1px}
.girdi__hook{margin-top:10px;font-size:clamp(13.5px,1.3vw,16px);font-weight:300;
  line-height:1.6;color:#44474B}
.girdi__ust{margin-top:12px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:#8A8D91;display:flex;gap:8px;flex-wrap:wrap}
.girdi__ust i{font-style:normal;opacity:.5}
.bos{color:#8A8D91;font-weight:300}

/* ---------- article ---------- */
.yazi{max-width:var(--okuma)}
.yazi__ust{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#8A8D91;
  display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.yazi__ust i{font-style:normal;opacity:.5}
.yazi__baslik{margin-top:14px;font-size:clamp(25px,3.3vw,42px);font-weight:400;
  letter-spacing:-.025em;line-height:1.12;color:var(--murekkep)}
.yazi__ozet{margin-top:16px;font-size:clamp(15px,1.55vw,19px);font-weight:300;
  line-height:1.6;color:#44474B}
.yazi__govde{margin-top:clamp(24px,3.2vw,44px);
  font-size:clamp(15px,1.4vw,17px);font-weight:300;line-height:1.75;color:#24262A}
.yazi__govde > * + *{margin-top:1.35em}
.yazi__govde h2{font-size:clamp(19px,2.1vw,25px);font-weight:400;letter-spacing:-.015em;
  line-height:1.25;color:var(--murekkep);margin-top:2em}
.yazi__govde h3{font-size:clamp(16px,1.7vw,20px);font-weight:500;color:var(--murekkep);margin-top:1.7em}
.yazi__govde a{color:#000;border-bottom:1px solid rgba(0,0,0,.3)}
.yazi__govde a:hover{border-color:#000}
.yazi__govde strong{font-weight:600;color:#000}
.yazi__govde ul,.yazi__govde ol{padding-left:1.25em}
.yazi__govde li + li{margin-top:.45em}
.yazi__govde blockquote{border-left:2px solid rgba(0,0,0,.18);padding-left:1.2em;
  font-size:1.06em;color:#000}
.yazi__govde hr{border:0;border-top:1px solid rgba(0,0,0,.14);margin-block:2.2em}
.yazi__govde img{border-radius:6px}
.yazi__kapak{margin-top:clamp(22px,2.8vw,38px);overflow:hidden;border-radius:6px;aspect-ratio:16/9}
.yazi__kapak img{width:100%;height:100%;object-fit:cover}
.yazi__alt{margin-top:clamp(36px,5vw,68px);padding-top:22px;
  border-top:1px solid rgba(0,0,0,.14);display:flex;gap:20px;flex-wrap:wrap}
.geri{font-size:12.5px;letter-spacing:.06em;color:#44474B;transition:color .35s ease}
.geri:hover{color:#000}

/* ---------- narrow screens: pills get their own scrolling row ---------- */
@media (max-width:620px){
  .ust{gap:10px;padding-bottom:6px}
  .ust__alt{margin-left:0;width:100%;order:3}
  .haplar{order:2;width:100%;overflow-x:auto;flex-wrap:nowrap;padding-bottom:2px;
    scrollbar-width:none}
  .haplar::-webkit-scrollbar{display:none}
  .hap{flex:0 0 auto}
}
@media (prefers-reduced-motion:reduce){*{transition-duration:.001ms!important}}

/* ---------- pagination ---------- */
.sayfalama{margin-top:clamp(36px,5vw,64px);padding-top:22px;
  border-top:1px solid rgba(0,0,0,.14);
  display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.sayfalama__ok{font-size:12.5px;letter-spacing:.06em;color:#44474B;transition:color .35s ease}
.sayfalama__ok:hover{color:#000}
.sayfalama__say{font-size:10.5px;letter-spacing:.2em;color:#8A8D91;margin-left:auto}

/* ---------- related posts ---------- */
.benzer{max-width:var(--okuma);margin-top:clamp(30px,4vw,52px);
  padding-top:22px;border-top:1px solid rgba(0,0,0,.14)}
.benzer__baslik{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:#8A8D91;font-weight:400}
.benzer__liste{list-style:none;margin-top:14px}
.benzer__liste li + li{margin-top:9px}
.benzer__liste a{font-size:clamp(15px,1.5vw,18px);font-weight:300;color:#24262A;
  border-bottom:1px solid rgba(0,0,0,.16);transition:border-color .3s ease,color .3s ease}
.benzer__liste a:hover{color:#000;border-color:#000}