/* ==========================================================================
   Tekillik — public site
   Tasarım kararları: sıcak kâğıt zemin, mavi-siyah mürekkep, okra aksan.
   Kategoriler doygunluğu düşük pigmentlerle ayrışıyor.
   ========================================================================== */

:root{
  --paper:#F5F3EE;
  --paper-2:#EFEDE6;
  --paper-3:#E6E3DA;
  --ink:#17181D;
  --ink-2:#3A3D45;
  --slate:#666B74;
  --rule:#D6D2C6;
  --rule-soft:#E3DFD4;
  --ochre:#9E6612;
  --ochre-bright:#B8791F;
  --white:#FFFFFF;

  --c-teknoloji:#356472;
  --c-llm:#75456A;
  --c-hukuk:#6A5C3B;
  --c-bilim:#2C6650;
  --c-agi:#8A472C;
  --c-saglik:#455A87;
  --c-sanat:#87672C;
  --c-felsefe:#564776;

  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;

  --max:1220px;
  --gap:clamp(20px,2.4vw,34px);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#131418; --paper-2:#191B20; --paper-3:#20222A;
    --ink:#EDEAE2; --ink-2:#C3BFB4; --slate:#8E939C;
    --rule:#2C2F38; --rule-soft:#23262E;
    --ochre:#D9A054; --ochre-bright:#E8B36A; --white:#1C1E24;
    --c-teknoloji:#79B2C2; --c-llm:#C08FB6; --c-hukuk:#BBA679; --c-bilim:#6FB897;
    --c-agi:#D3906F; --c-saglik:#8FA6D6; --c-sanat:#D3B26C; --c-felsefe:#A092C9;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#131418; --paper-2:#191B20; --paper-3:#20222A;
  --ink:#EDEAE2; --ink-2:#C3BFB4; --slate:#8E939C;
  --rule:#2C2F38; --rule-soft:#23262E;
  --ochre:#D9A054; --ochre-bright:#E8B36A; --white:#1C1E24;
  --c-teknoloji:#79B2C2; --c-llm:#C08FB6; --c-hukuk:#BBA679; --c-bilim:#6FB897;
  --c-agi:#D3906F; --c-saglik:#8FA6D6; --c-sanat:#D3B26C; --c-felsefe:#A092C9;
  color-scheme:dark;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img,canvas{max-width:100%;display:block}
[hidden]{display:none!important}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
:focus-visible{outline:2px solid var(--ochre-bright);outline-offset:3px;border-radius:2px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 clamp(16px,3vw,32px)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;background:var(--ink);color:var(--paper);padding:8px 14px;z-index:60;border-radius:2px}

/* ---------- künye ---------- */
.top{border-bottom:1px solid var(--rule);background:var(--paper);position:sticky;top:0;z-index:40}
.top-in{display:flex;align-items:center;gap:20px;height:60px}
.brand{display:flex;align-items:baseline;gap:9px;flex-shrink:0}
.brand-mark{width:26px;height:20px;flex-shrink:0;align-self:center}
.brand-name{font-family:var(--serif);font-weight:700;font-size:25px;letter-spacing:-.018em;line-height:1}
.brand-dot{color:var(--ochre-bright)}
.top-nav{display:flex;gap:2px;margin-inline-start:auto;overflow-x:auto;scrollbar-width:none}
.top-nav::-webkit-scrollbar{display:none}
.top-nav a{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--slate);padding:7px 10px;border-radius:3px;white-space:nowrap;
  transition:color .15s,background .15s;
}
.top-nav a:hover{color:var(--ink);background:var(--paper-2)}
.top-nav a[aria-current="page"]{color:var(--ink);background:var(--paper-3)}
.theme-btn{flex-shrink:0;width:32px;height:32px;border-radius:3px;display:grid;place-items:center;color:var(--slate)}
.theme-btn:hover{background:var(--paper-2);color:var(--ink)}

/* ---------- ortak ---------- */
.kicker{font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;font-weight:500;display:inline-flex;align-items:center;gap:6px}
.kicker::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0}
.meta{font-family:var(--mono);font-size:11px;color:var(--slate);letter-spacing:.02em;font-variant-numeric:tabular-nums}
.headline{font-family:var(--serif);font-weight:600;letter-spacing:-.02em;line-height:1.14;text-wrap:balance;color:var(--ink)}
.deck{color:var(--ink-2);font-size:15px;line-height:1.55;text-wrap:pretty}
.thumb{background:var(--paper-3);border-radius:2px;overflow:hidden;position:relative}
.thumb canvas,.thumb img{width:100%;height:100%;object-fit:cover}
.verified{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--slate);border:1px solid var(--rule);border-radius:2px;padding:3px 7px}
.verified svg{width:10px;height:10px;flex-shrink:0;color:var(--ochre-bright)}

.band{display:flex;align-items:baseline;gap:14px;border-top:2px solid var(--ink);padding-top:9px;margin-bottom:20px}
.band h2{font-family:var(--serif);font-size:20px;font-weight:700;letter-spacing:-.012em;margin:0}
.band .band-note{font-family:var(--mono);font-size:10.5px;color:var(--slate);letter-spacing:.06em;text-transform:uppercase;margin-inline-start:auto}

/* ---------- manşet ---------- */
.lead-grid{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(0,1fr);gap:var(--gap);padding:clamp(24px,3.4vw,42px) 0;align-items:start}
.lead-main .thumb{aspect-ratio:16/9;margin-top:19px}
.lead-main .headline{font-size:clamp(30px,4.1vw,46px);margin:9px 0 12px}
.lead-main .deck{font-size:17px;line-height:1.52;max-width:60ch}
.lead-foot{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:15px}
.lead-side{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--rule)}
.side-item{display:grid;grid-template-columns:1fr 92px;gap:15px;padding:17px 0;border-bottom:1px solid var(--rule-soft);align-items:start}
.side-item:last-child{border-bottom:none}
.side-item .headline{font-size:17.5px;margin:7px 0 8px;line-height:1.22}
.side-item .thumb{aspect-ratio:1/1}
.side-item:hover .headline{color:var(--ochre)}

/* ---------- kartlar ---------- */
.section{padding:clamp(26px,3vw,38px) 0;border-top:1px solid var(--rule)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:var(--gap)}
.card{display:flex;flex-direction:column;gap:10px}
.card .thumb{aspect-ratio:3/2}
.card .headline{font-size:19px;line-height:1.2;margin:0}
.card .deck{font-size:14px;line-height:1.5}
.card:hover .headline{color:var(--ochre)}
.card-foot{margin-top:auto;padding-top:4px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}

.rows{display:flex;flex-direction:column}
.row{display:flex;gap:13px;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--rule-soft)}
.row:last-child{border-bottom:none}
.row-num{font-family:var(--mono);font-size:12px;color:var(--ochre-bright);font-variant-numeric:tabular-nums;flex-shrink:0;width:20px;font-weight:500}
.row .headline{font-size:16px;line-height:1.28;margin:0 0 4px}
.row:hover .headline{color:var(--ochre)}
.split{display:grid;grid-template-columns:minmax(0,2.05fr) minmax(0,1fr);gap:calc(var(--gap) * 1.3)}

/* ---------- yazı ---------- */
.article{padding:clamp(26px,3.4vw,44px) 0 60px}
.art-head{max-width:44rem;margin:0 auto}
.art-head .headline{font-size:clamp(31px,4.3vw,49px);margin:12px 0 16px}
.art-lede{font-family:var(--serif);font-size:20px;line-height:1.5;color:var(--ink-2);font-style:italic;margin:0 0 22px;text-wrap:pretty}
.art-meta{display:flex;gap:14px;align-items:center;flex-wrap:wrap;padding:13px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.art-figure{margin:30px auto;max-width:60rem}
.art-figure .thumb{aspect-ratio:16/9}
.art-figure figcaption{font-family:var(--mono);font-size:11px;color:var(--slate);padding-top:9px;line-height:1.5}
.art-body{max-width:38rem;margin:0 auto}
.art-body p{font-family:var(--serif);font-size:19px;line-height:1.68;margin:0 0 21px;color:var(--ink);text-wrap:pretty}
.art-body h3{font-family:var(--serif);font-size:24px;font-weight:600;letter-spacing:-.015em;margin:34px 0 13px}
.art-body p:first-of-type::first-letter{font-size:3.15em;float:inline-start;line-height:.84;padding-inline-end:.07em;padding-top:.06em;font-weight:600;color:var(--ochre)}
.sources{margin:36px auto 0;max-width:38rem;border-top:2px solid var(--ink);padding-top:14px}
.sources h4{font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;margin:0 0 11px;color:var(--slate);font-weight:500}
.sources ol{margin:0;padding-inline-start:19px;display:flex;flex-direction:column;gap:7px}
.sources li{font-size:14.5px;line-height:1.45;color:var(--ink-2)}
.sources a{border-bottom:1px solid var(--rule);color:var(--ink)}
.sources a:hover{border-color:var(--ochre-bright);color:var(--ochre)}
.tagrow{display:flex;gap:7px;flex-wrap:wrap;margin:26px auto 0;max-width:38rem}
.tag{font-family:var(--mono);font-size:11px;color:var(--slate);border:1px solid var(--rule);border-radius:2px;padding:4px 9px;transition:border-color .15s,color .15s}
.tag:hover{border-color:var(--ochre-bright);color:var(--ochre)}

/* ---------- kategori ---------- */
.cat-head{padding:clamp(26px,3.4vw,44px) 0 22px;border-bottom:2px solid var(--ink)}
.cat-head h1{font-family:var(--serif);font-size:clamp(32px,5vw,52px);font-weight:700;letter-spacing:-.024em;margin:9px 0 8px;line-height:1}
.cat-head p{max-width:52ch;color:var(--ink-2);margin:0;font-size:16px}

/* ---------- bülten ---------- */
.signup{border:1px solid var(--rule);border-radius:3px;background:var(--paper-2);padding:clamp(20px,2.6vw,30px);display:grid;gap:15px}
.signup h3{font-family:var(--serif);font-size:22px;margin:0;letter-spacing:-.015em;font-weight:600}
.signup p{margin:0;font-size:14px;color:var(--ink-2);line-height:1.5}
.signup-form{display:flex;gap:8px;flex-wrap:wrap}
.signup input{flex:1 1 190px;min-width:0;font:inherit;font-size:14px;padding:9px 12px;border:1px solid var(--rule);border-radius:2px;background:var(--white);color:var(--ink)}
.signup input::placeholder{color:var(--slate)}
.signup button{background:var(--ink);color:var(--paper);padding:9px 18px;border-radius:2px;font-family:var(--mono);font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;font-weight:500;transition:background .15s}
.signup button:hover{background:var(--ochre)}
.signup-note{font-family:var(--mono);font-size:10.5px;color:var(--slate)}

/* ---------- reklam ---------- */
.ad{position:relative;display:grid;place-items:center;background:var(--paper-2);border:1px dashed var(--rule);border-radius:2px;overflow:hidden}
.ad::before{content:"REKLAM";position:absolute;top:0;inset-inline-start:0;font-family:var(--mono);font-size:8.5px;letter-spacing:.13em;color:var(--slate);padding:3px 7px;border-inline-end:1px dashed var(--rule);border-bottom:1px dashed var(--rule)}
.ad-size{font-family:var(--mono);font-size:11px;color:var(--slate);letter-spacing:.05em;text-align:center;padding:6px 10px}
.ad-billboard{min-height:100px}
.ad-rect{min-height:250px}
.ad-inarticle{min-height:250px;margin:30px 0}
.ad-sticky{position:sticky;top:76px}
.ad-wrap{padding:22px 0;display:flex;justify-content:center}
.ad-wrap .ad{width:100%;max-width:970px}
@media (min-width:900px){.ad-billboard{min-height:90px}}
.ad-house{border:1px solid var(--rule);background:var(--paper-2);padding:0;display:block;aspect-ratio:1/2;width:100%;max-width:300px;margin-inline:auto;transition:border-color .15s}
.ad-house img{width:100%;height:100%;object-fit:cover}
.ad-house:hover{border-color:#2874FC}
.ad-house::before{color:rgba(255,255,255,.62);border-color:rgba(255,255,255,.22);background:rgba(0,0,0,.28)}

/* ---------- tembel yükleme ----------
   Görsel gelene kadar yerini iskelet tutuyor. Kutu zaten doğru boyutta
   olduğu için görsel gelince sayfa zıplamıyor. Manşet hariç: o LCP
   öğesi, tembel yüklenirse Core Web Vitals düşer. */
.thumb::after{content:"";position:absolute;inset:0;background:var(--paper-3)}
.thumb.is-loaded::after{content:none}
.thumb canvas{opacity:0}
.thumb.is-loaded canvas{opacity:1}
.skel-line{background:var(--paper-3);border-radius:2px;height:11px;position:relative;overflow:hidden}
.skel .thumb{aspect-ratio:3/2}
.skel{gap:9px}

.more-wrap{display:flex;justify-content:center;padding:34px 0 8px}
.more-btn{border:1px solid var(--rule);border-radius:2px;padding:12px 30px;background:var(--paper-2);font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);transition:background .15s,border-color .15s}
.more-btn:hover{background:var(--paper-3);border-color:var(--ochre-bright)}
.more-btn[disabled]{opacity:.55;cursor:default}

/* ---------- alt bilgi ---------- */
.foot{border-top:2px solid var(--ink);margin-top:44px;padding:30px 0 50px}
.foot-in{display:flex;gap:30px;flex-wrap:wrap;justify-content:space-between;align-items:flex-start}
.foot-links{display:flex;gap:20px;flex-wrap:wrap}
.foot-links a{font-family:var(--mono);font-size:11.5px;color:var(--slate);letter-spacing:.04em}
.foot-links a:hover{color:var(--ochre)}
.foot-note{font-family:var(--mono);font-size:10.5px;color:var(--slate);max-width:42ch;line-height:1.65}

/* ---------- okuma çubuğu ---------- */
.progress{position:fixed;top:60px;inset-inline-start:0;height:2px;width:100%;background:var(--ochre-bright);z-index:39;pointer-events:none;transform:scaleX(0);transform-origin:0 50%}

/* ---------- hareket ----------
   Dördü de bir iş yapıyor: künye işareti sitenin adını çiziyor, manşet
   sıralı giriyor, okuma çubuğu konum bildiriyor, kart görseli
   tıklanabilirliği söylüyor. Kaydırmayla tetiklenen giriş yok. */
@media (prefers-reduced-motion:no-preference){
  @keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  @keyframes draw{to{stroke-dashoffset:0}}
  @keyframes appear{from{opacity:0}to{opacity:1}}
  @keyframes shimmer{from{background-position:180% 0}to{background-position:-80% 0}}

  .top .brand-mark .curve{stroke-dasharray:30;stroke-dashoffset:30;animation:draw 1s cubic-bezier(.55,0,.35,1) .1s forwards}
  .top .brand-mark .asym{opacity:0;animation:appear .45s ease .78s forwards}
  .top .brand-name{animation:appear .5s ease .18s both}

  .lead-main>*{animation:rise .46s cubic-bezier(.16,1,.3,1) both}
  .lead-main>*:nth-child(1){animation-delay:.02s}
  .lead-main>*:nth-child(2){animation-delay:.07s}
  .lead-main>*:nth-child(3){animation-delay:.12s}
  .lead-main>*:nth-child(4){animation-delay:.17s}
  .lead-main>*:nth-child(5){animation-delay:.22s}
  .lead-side .side-item{animation:rise .46s cubic-bezier(.16,1,.3,1) both}
  .lead-side .side-item:nth-child(1){animation-delay:.16s}
  .lead-side .side-item:nth-child(2){animation-delay:.22s}
  .lead-side .side-item:nth-child(3){animation-delay:.28s}

  .progress{transition:transform .12s linear}
  .thumb::after,.skel-line::after{background-image:linear-gradient(100deg,transparent 24%,var(--paper-2) 50%,transparent 76%);background-size:200% 100%;animation:shimmer 1.5s linear infinite}
  .skel-line::after{content:"";position:absolute;inset:0}
  .thumb canvas{transition:opacity .5s ease}
  .card canvas,.side-item canvas{transition:transform .55s cubic-bezier(.2,.8,.2,1)}
  .card:hover canvas,.side-item:hover canvas{transform:scale(1.04)}
  .headline{transition:color .18s}
}

/* ---------- duyarlı ---------- */
@media (max-width:900px){
  .lead-grid{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .lead-side{border-top:2px solid var(--ink);padding-top:4px}
}
@media (max-width:560px){
  .side-item{grid-template-columns:1fr 76px;gap:12px}
  .art-body p{font-size:17.5px}
  .brand-name{font-size:22px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}