/*
Theme Name: Tarihka Modern
Theme URI: https://example.com/
Author: ChatGPT
Description: Sıfırdan, açık ve dikkat çekici, full modern tarih/antik odaklı WordPress teması. Slider (son 3 yazı), premium tipografi, modern kartlar, Mitoloji/Antik kategori varyantları.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tarihka
Tags: blog, custom-menu, featured-images
*/

/* -------------------------
   Design tokens (LIGHT + antique accents)
-------------------------- */
:root{
  --tk-bg: #fffaf0;         /* ivory */
  --tk-bg2:#ffffff;
  --tk-surface: rgba(26,18,10,.035);
  --tk-surface2: rgba(26,18,10,.055);
  --tk-border: rgba(84,58,28,.16);

  --tk-text: rgba(18,14,10,.92);
  --tk-muted: rgba(18,14,10,.62);
  --tk-soft: rgba(18,14,10,.38);

  --tk-accent: #c58b2b;   /* gold */
  --tk-accent2:#1f9d8a;   /* verdigris */
  --tk-accent3:#c2410c;   /* terracotta */
  --tk-bolt: #6d28d9;     /* lightning violet */
  --tk-bolt2:#0ea5e9;     /* lightning sky */

  --tk-max: 1160px;
  --tk-r: 22px;
  --tk-r2: 30px;

  --tk-shadow: 0 18px 52px rgba(26,18,10,.14);
  --tk-shadow2: 0 10px 24px rgba(26,18,10,.10);

  --tk-font-body: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial;
  --tk-font-head: "Newsreader", ui-serif, Georgia, "Times New Roman", serif;
}

/* Optional dark mode */
@media (prefers-color-scheme: dark){
  :root{
    --tk-bg:#0d0c0a;
    --tk-bg2:#12100d;
    --tk-surface: rgba(255,255,255,.06);
    --tk-surface2: rgba(255,255,255,.09);
    --tk-border: rgba(255,255,255,.14);
    --tk-text: rgba(255,255,255,.92);
    --tk-muted: rgba(255,255,255,.68);
    --tk-soft: rgba(255,255,255,.40);
    --tk-shadow: 0 14px 44px rgba(0,0,0,.35);
    --tk-shadow2: 0 10px 26px rgba(0,0,0,.26);
  }
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: var(--tk-font-body);
  color: var(--tk-text);
  line-height: 1.75;
  background:
    radial-gradient(1200px 720px at 18% -10%, color-mix(in srgb, var(--tk-accent) 18%, transparent), transparent 62%),
    radial-gradient(900px 620px at 85% 2%, color-mix(in srgb, var(--tk-accent2) 16%, transparent), transparent 60%),
    radial-gradient(900px 700px at 92% 92%, color-mix(in srgb, var(--tk-accent3) 10%, transparent), transparent 62%),
    linear-gradient(180deg, var(--tk-bg), var(--tk-bg2));
  min-height:100vh;
}

/* subtle paper texture overlay */
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  background:
    radial-gradient(900px 700px at 30% 20%, rgba(240,228,204,.75), transparent 65%),
    radial-gradient(800px 650px at 70% 80%, rgba(220,198,160,.18), transparent 60%),
    repeating-linear-gradient(0deg, rgba(0,0,0,.016), rgba(0,0,0,.016) 1px, transparent 1px, transparent 6px);
  mix-blend-mode:multiply;
  opacity:.45;
}
@media (prefers-color-scheme: dark){
  body::before{mix-blend-mode:overlay; opacity:.22}
}

img{max-width:100%; height:auto}
a{color:inherit; text-decoration:none}
::selection{background: color-mix(in srgb, var(--tk-accent) 28%, transparent)}
@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto !important}
  .tk-card,.tk-hero,.tk-bolt,.tk-slide{transition:none !important; transform:none !important; animation:none !important}
}

/* Layout */
.tk-wrap{max-width:var(--tk-max); margin:0 auto; padding:0 18px}
.tk-sr{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* Header */
.tk-header{
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: color-mix(in srgb, var(--tk-bg2) 74%, transparent);
  border-bottom: 1px solid var(--tk-border);
}
@media (prefers-color-scheme: dark){
  .tk-header{background: rgba(18,16,13,.55)}
}
.tk-header-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding: 14px 0; flex-wrap:wrap;
}
.tk-brand{display:flex; gap:12px; align-items:center; min-width: 240px}
.tk-logo{
  width: 42px; height: 42px; border-radius: 14px;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.55), transparent 55%),
    linear-gradient(135deg, var(--tk-accent), var(--tk-accent2));
  box-shadow: var(--tk-shadow2);
  border: 1px solid color-mix(in srgb, var(--tk-border) 70%, transparent);
}
.tk-brand-title{display:flex;flex-direction:column;line-height:1.15}
.tk-brand-title strong{font-family: var(--tk-font-head); font-size: 18px; letter-spacing: .2px}
.tk-brand-title span{font-size:12px; color:var(--tk-muted)}

.tk-nav ul{list-style:none; margin:0; padding:0; display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.tk-nav a{
  display:inline-flex; align-items:center; gap:8px;
  padding: 9px 12px; border-radius: 999px;
  border: 1px solid transparent; color: var(--tk-muted);
}
.tk-nav a:hover{color: var(--tk-text); border-color: var(--tk-border); background: var(--tk-surface);}

.tk-search{flex:1; min-width: 220px; max-width: 420px}
.tk-search form{margin:0}
.tk-search input[type="search"]{
  width:100%; padding: 10px 14px; border-radius: 999px;
  border: 1px solid var(--tk-border); background: color-mix(in srgb, var(--tk-bg2) 78%, transparent);
  color: var(--tk-text); outline: none;
}
.tk-search input[type="search"]::placeholder{color:var(--tk-muted)}
.tk-search input[type="search"]:focus{
  border-color: color-mix(in srgb, var(--tk-accent) 55%, transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--tk-accent) 14%, transparent);
}

.tk-main{padding: 26px 0 44px}

/* Hero (bold, attention-grabbing) */
.tk-hero{
  border-radius: var(--tk-r2);
  padding: 30px;
  position:relative;
  overflow:hidden;
  box-shadow: var(--tk-shadow);
  border: 1px solid color-mix(in srgb, var(--tk-border) 70%, transparent);
  background:
    radial-gradient(900px 360px at 18% 8%, color-mix(in srgb, var(--tk-accent) 16%, transparent), transparent 62%),
    radial-gradient(780px 320px at 82% 22%, color-mix(in srgb, var(--tk-accent2) 12%, transparent), transparent 62%),
    radial-gradient(900px 420px at 60% 120%, color-mix(in srgb, var(--tk-accent3) 10%, transparent), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.84), rgba(255,255,255,.46));
}
.tk-hero::before{
  content:"";
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.02), rgba(0,0,0,.02) 1px, transparent 1px, transparent 10px),
    repeating-linear-gradient(0deg, rgba(0,0,0,.02), rgba(0,0,0,.02) 1px, transparent 1px, transparent 12px);
  opacity:.22;
  pointer-events:none;
}

/* Lightning / energy overlay */
.tk-bolt{
  position:absolute;
  inset:-90px -130px -140px -130px;
  pointer-events:none;
  opacity:.9;
  mix-blend-mode:multiply;
  animation: tkBoltFloat 7s ease-in-out infinite;
  filter: blur(.2px);
}
@media (prefers-color-scheme: dark){
  .tk-bolt{mix-blend-mode:screen; opacity:.7}
}
.tk-bolt::before,
.tk-bolt::after{
  content:"";
  position:absolute;
  inset:0;
}
.tk-bolt::before{
  background:
    conic-gradient(from 180deg at 20% 10%,
      transparent 0 20deg,
      color-mix(in srgb, var(--tk-bolt) 55%, transparent) 20deg 26deg,
      transparent 26deg 100deg,
      color-mix(in srgb, var(--tk-bolt2) 50%, transparent) 100deg 108deg,
      transparent 108deg 360deg
    );
  opacity:.45;
}
.tk-bolt::after{
  background:
    radial-gradient(600px 260px at 78% 24%, color-mix(in srgb, var(--tk-bolt2) 24%, transparent), transparent 60%),
    radial-gradient(520px 240px at 28% 52%, color-mix(in srgb, var(--tk-bolt) 18%, transparent), transparent 62%),
    linear-gradient(120deg,
      transparent 0%,
      color-mix(in srgb, var(--tk-bolt) 45%, transparent) 40%,
      transparent 52%,
      color-mix(in srgb, var(--tk-bolt2) 42%, transparent) 64%,
      transparent 76%
    );
  opacity:.55;
  animation: tkBoltFlash 3.2s ease-in-out infinite;
}

@keyframes tkBoltFloat{
  0%,100%{transform: translate3d(0,0,0) rotate(-2deg)}
  50%{transform: translate3d(0,10px,0) rotate(2deg)}
}
@keyframes tkBoltFlash{
  0%, 72%, 100%{opacity:.35}
  76%{opacity:.85}
  79%{opacity:.40}
  82%{opacity:.92}
  86%{opacity:.38}
}

.tk-h1{
  margin:0 0 10px;
  font-family: var(--tk-font-head);
  font-size: 54px;
  line-height: 1.02;
  letter-spacing: -.8px;
}
@media (max-width: 860px){ .tk-h1{font-size: 38px} }
.tk-tagline{margin:0 0 14px; color: var(--tk-muted); max-width: 66ch; font-size: 16px}
.tk-hero-row{display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-top: 14px}
.tk-pill{
  display:inline-flex; align-items:center; gap:8px;
  padding: 8px 12px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--tk-border) 70%, transparent);
  background: color-mix(in srgb, var(--tk-bg2) 74%, transparent);
  box-shadow: var(--tk-shadow2);
  font-size: 13px;
  color: var(--tk-muted);
}
.tk-pill b{color: var(--tk-text); font-weight:650}

/* Category chips */
.tk-chipbar{display:flex; gap:10px; align-items:center; margin: 18px 0 14px}
.tk-chipbtn{
  width: 44px; height: 44px; border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--tk-border) 70%, transparent);
  background: color-mix(in srgb, var(--tk-bg2) 78%, transparent);
  box-shadow: var(--tk-shadow2);
  cursor:pointer;
}
.tk-chipbtn:hover{transform: translateY(-1px); filter: brightness(1.03)}
.tk-chipscroll{overflow:auto; -webkit-overflow-scrolling:touch; scrollbar-width:thin}
.tk-chipscroll::-webkit-scrollbar{height:8px}
.tk-chipscroll::-webkit-scrollbar-thumb{background: color-mix(in srgb, var(--tk-border) 75%, transparent); border-radius:999px}
.tk-chips{display:flex; gap:10px; padding: 2px 2px}
.tk-chip{
  display:inline-flex; align-items:center;
  padding: 10px 14px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--tk-border) 70%, transparent);
  background: color-mix(in srgb, var(--tk-bg2) 86%, transparent);
  color: var(--tk-muted);
  white-space:nowrap;
  transition: transform .15s ease, filter .15s ease, color .15s ease;
  box-shadow: var(--tk-shadow2);
}
.tk-chip:hover{transform: translateY(-1px); filter: brightness(1.03); color: var(--tk-text)}

/* Slider */
.tk-slider{
  margin-top: 16px;
  border-radius: var(--tk-r2);
  overflow:hidden;
  border: 1px solid color-mix(in srgb, var(--tk-border) 70%, transparent);
  box-shadow: var(--tk-shadow);
  background: color-mix(in srgb, var(--tk-bg2) 88%, transparent);
}
.tk-slides{display:flex; width:100%; transition: transform .45s ease; will-change: transform}
.tk-slide{min-width:100%; display:grid; grid-template-columns: 1.3fr 1fr; align-items:stretch}
@media (max-width: 900px){ .tk-slide{grid-template-columns: 1fr} }
.tk-slide-media{position:relative; background: rgba(0,0,0,.04); min-height: 280px}
.tk-slide-media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
.tk-slide-media::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(700px 280px at 18% 0%, rgba(255,255,255,.16), transparent 62%),
    linear-gradient(180deg, transparent 0%, rgba(0,0,0,.10) 55%, rgba(0,0,0,.30) 100%);
  pointer-events:none;
}
.tk-slide-body{padding: 22px 22px 20px; display:flex; flex-direction:column; justify-content:center; gap:10px}
.tk-slide-kicker{display:flex; gap:10px; flex-wrap:wrap; align-items:center; font-size:12px; color:var(--tk-muted)}
.tk-float-pill{
  display:inline-flex; align-items:center; gap:8px;
  padding: 7px 11px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--tk-border) 60%, transparent);
  background: color-mix(in srgb, var(--tk-bg2) 72%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 22px rgba(26,18,10,.10);
  font-size: 12px; color: var(--tk-text);
}
.tk-slide-title{
  margin:0;
  font-family: var(--tk-font-head);
  font-size: 34px;
  line-height: 1.08;
  letter-spacing: -.6px;
}
@media (max-width: 900px){ .tk-slide-title{font-size: 28px} }
.tk-slide-excerpt{margin:0; color: var(--tk-muted)}
.tk-slide-actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:6px}
.tk-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 11px 14px; border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--tk-border) 70%, transparent);
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--tk-accent2) 14%, rgba(255,255,255,.60)),
    color-mix(in srgb, var(--tk-accent) 10%, rgba(255,255,255,.45))
  );
  box-shadow: var(--tk-shadow2);
  font-size: 13px;
  transition: transform .15s ease, filter .15s ease;
}
.tk-btn:hover{transform: translateY(-1px); filter: brightness(1.03)}
.tk-slider-nav{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding: 12px 12px;
  border-top: 1px solid color-mix(in srgb, var(--tk-border) 70%, transparent);
  background: color-mix(in srgb, var(--tk-bg2) 92%, transparent);
}
.tk-slider-arrows{display:flex; gap:8px}
.tk-slider-arrow{
  width: 42px; height: 42px; border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--tk-border) 70%, transparent);
  background: color-mix(in srgb, var(--tk-bg2) 78%, transparent);
  box-shadow: var(--tk-shadow2);
  cursor:pointer;
}
.tk-slider-arrow:hover{transform: translateY(-1px); filter: brightness(1.03)}
.tk-dots{display:flex; gap:8px; align-items:center}
.tk-dotbtn{
  width: 10px; height: 10px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--tk-border) 70%, transparent);
  background: color-mix(in srgb, var(--tk-bg2) 70%, transparent);
  cursor:pointer;
}
.tk-dotbtn[aria-current="true"]{
  width: 28px;
  background: linear-gradient(90deg, var(--tk-accent), var(--tk-accent2));
  border-color: transparent;
}

/* Cards (modern) */
.tk-grid{display:grid; grid-template-columns: repeat(12, 1fr); gap: 18px; margin-top: 16px}
.tk-card{
  grid-column: span 6;
  border-radius: 26px;
  overflow:hidden;
  position:relative;
  box-shadow: var(--tk-shadow2);
  background: color-mix(in srgb, var(--tk-bg2) 90%, transparent);
  border: 1px solid color-mix(in srgb, var(--tk-border) 60%, transparent);
  transform: translateZ(0);
  transition: transform .20s ease, box-shadow .20s ease, filter .20s ease;
}
.tk-card:hover{transform: translateY(-6px); box-shadow: var(--tk-shadow); filter: saturate(1.05)}
@media (max-width: 860px){ .tk-card{grid-column: span 12} }
.tk-card::before{
  content:"";
  position:absolute; inset:0; padding:1px; border-radius: 26px;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--tk-accent) 46%, transparent),
    color-mix(in srgb, var(--tk-accent2) 32%, transparent),
    color-mix(in srgb, var(--tk-accent3) 26%, transparent)
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events:none;
  opacity:.72;
}
.tk-card-media{aspect-ratio: 16/10; position:relative; background: rgba(0,0,0,.04); overflow:hidden}
.tk-card-media img{width:100%; height:100%; object-fit:cover; display:block; transform: scale(1.001); transition: transform .28s ease}
.tk-card:hover .tk-card-media img{transform: scale(1.06)}
.tk-card-media::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(600px 240px at 18% 0%, rgba(255,255,255,.16), transparent 62%),
    linear-gradient(180deg, transparent 0%, rgba(0,0,0,.08) 55%, rgba(0,0,0,.22) 100%);
  pointer-events:none;
}
.tk-card-float{position:absolute; left:14px; bottom:12px; display:flex; gap:10px; flex-wrap:wrap; z-index:2}
.tk-card-body{padding:16px 16px 18px; display:flex; flex-direction:column; gap:10px}
.tk-kicker{display:flex; gap:10px; flex-wrap:wrap; align-items:center; font-size:12px; color:var(--tk-muted)}
.tk-dot{opacity:.6}
.tk-title{
  margin:0;
  font-family: var(--tk-font-head);
  font-size: 22px;
  line-height: 1.16;
  letter-spacing: -.35px;
}
.tk-excerpt{margin:0; color:var(--tk-muted)}
.tk-tagrow{display:flex; gap:8px; flex-wrap:wrap; margin-top:2px}
.tk-tag{
  display:inline-flex; align-items:center;
  padding: 6px 10px; border-radius: 999px;
  font-size: 12px; color: var(--tk-muted);
  border: 1px solid color-mix(in srgb, var(--tk-border) 60%, transparent);
  background: color-mix(in srgb, var(--tk-bg2) 92%, transparent);
  transition: transform .15s ease, filter .15s ease, color .15s ease;
}
.tk-tag:hover{transform: translateY(-1px); filter: brightness(1.04); color: var(--tk-text)}
.tk-card-bottom{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:2px}
.tk-mini{font-size:12px; color:var(--tk-muted)}
.tk-read{
  display:inline-flex; align-items:center; gap:8px;
  padding: 10px 12px; border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--tk-border) 70%, transparent);
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--tk-accent) 14%, rgba(255,255,255,.68)),
    color-mix(in srgb, var(--tk-accent2) 10%, rgba(255,255,255,.52))
  );
  box-shadow: var(--tk-shadow2);
  font-size: 13px;
  transition: transform .15s ease, filter .15s ease;
}
.tk-read:hover{transform: translateY(-1px); filter: brightness(1.03)}

/* Pagination */
.tk-pagination{display:flex; gap:12px; justify-content:space-between; margin-top:18px}
.tk-pagination a{
  display:inline-flex; align-items:center; gap:8px;
  padding: 10px 14px; border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--tk-border) 70%, transparent);
  background: color-mix(in srgb, var(--tk-bg2) 86%, transparent);
  box-shadow: var(--tk-shadow2);
}
.tk-pagination a:hover{transform: translateY(-1px); filter: brightness(1.03)}

/* Single */
.tk-single{
  border-radius: var(--tk-r2);
  overflow:hidden;
  border: 1px solid color-mix(in srgb, var(--tk-border) 70%, transparent);
  box-shadow: var(--tk-shadow);
  background: color-mix(in srgb, var(--tk-bg2) 90%, transparent);
}
.tk-cover{aspect-ratio: 21/9; background: rgba(0,0,0,.04); position:relative}
.tk-cover img{width:100%; height:100%; object-fit:cover; display:block}
.tk-single-body{padding: 22px 22px 26px}
.tk-post-title{font-family: var(--tk-font-head); font-size: 46px; line-height:1.08; letter-spacing:-.6px; margin:0 0 10px}
@media (max-width: 860px){ .tk-post-title{font-size: 34px} }
.tk-post-meta{display:flex; gap:10px; flex-wrap:wrap; align-items:center; color: var(--tk-muted); font-size: 13px; margin-bottom: 14px}
.tk-post-meta a{color: var(--tk-text)}
.tk-lead{margin:0 0 18px; color: var(--tk-muted); font-size: 16px; max-width: 72ch}
.tk-content{font-size: 16px}
.tk-content h2{margin-top: 28px; font-family: var(--tk-font-head)}
.tk-content h3{margin-top: 22px; font-family: var(--tk-font-head)}
.tk-content p{margin: 0 0 14px}
.tk-content blockquote{
  margin: 18px 0; padding: 14px 16px;
  border-left: 3px solid color-mix(in srgb, var(--tk-accent) 55%, transparent);
  background: color-mix(in srgb, var(--tk-accent) 10%, transparent);
  border-radius: 14px;
}

.tk-likebar{display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-top: 18px}
.tk-like,.tk-share{
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--tk-border) 70%, transparent);
  background: color-mix(in srgb, var(--tk-bg2) 86%, transparent);
  box-shadow: var(--tk-shadow2);
  padding: 10px 14px;
}
.tk-like{cursor:pointer}
.tk-like:hover,.tk-share:hover{transform: translateY(-1px); filter: brightness(1.03)}
.tk-like[disabled]{opacity:.7; cursor:not-allowed}
.tk-share{color: var(--tk-muted)}
.tk-share a{color: var(--tk-text); border-bottom: 1px dotted rgba(0,0,0,0)}
.tk-share a:hover{border-bottom-color: var(--tk-soft)}

.tk-related{margin-top:18px}
.tk-related h2{font-family: var(--tk-font-head); font-size: 20px; margin: 0 0 10px}
.tk-related-grid{display:grid; grid-template-columns: repeat(12, 1fr); gap: 12px}
.tk-related-card{
  grid-column: span 4;
  border-radius: 16px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--tk-border) 70%, transparent);
  background: color-mix(in srgb, var(--tk-bg2) 92%, transparent);
  transition: transform .16s ease, filter .16s ease;
}
.tk-related-card:hover{transform: translateY(-2px); filter: brightness(1.02)}
@media (max-width: 860px){ .tk-related-card{grid-column: span 12} }
.tk-related-card .t{font-weight:650; font-family: var(--tk-font-head)}
.tk-related-card .m{font-size:12px; color: var(--tk-muted); margin-top:6px}

/* Comments & forms */
.tk-comments{margin-top:22px}
.tk-comments h2{font-family: var(--tk-font-head); font-size:20px}
.comment-list{padding-left:0; list-style:none; margin:0}
.comment{
  border: 1px solid color-mix(in srgb, var(--tk-border) 70%, transparent);
  background: color-mix(in srgb, var(--tk-bg2) 92%, transparent);
  border-radius: 16px;
  padding: 14px;
  margin: 0 0 10px;
}
.comment .comment-meta{font-size:12px; color:var(--tk-muted); margin-bottom:6px}
.comment-respond input[type="text"],
.comment-respond input[type="email"],
.comment-respond input[type="url"],
.comment-respond textarea{
  width:100%;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--tk-border) 70%, transparent);
  background: color-mix(in srgb, var(--tk-bg2) 94%, transparent);
  color: var(--tk-text);
  padding: 11px 12px;
  outline:none;
  font:inherit;
  margin-top:6px;
}
.comment-respond textarea{min-height:140px}
.comment-respond input:focus,
.comment-respond textarea:focus{
  border-color: color-mix(in srgb, var(--tk-accent2) 55%, transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--tk-accent2) 14%, transparent);
}
.comment-respond input[type="submit"]{
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--tk-border) 70%, transparent);
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--tk-accent2) 14%, rgba(255,255,255,.60)),
    color-mix(in srgb, var(--tk-accent) 10%, rgba(255,255,255,.45))
  );
  box-shadow: var(--tk-shadow2);
  padding: 10px 14px;
  cursor:pointer;
}
.comment-respond input[type="submit"]:hover{transform: translateY(-1px); filter: brightness(1.03)}

/* Footer */
.tk-footer{
  margin-top: 24px;
  padding: 26px 0;
  border-top: 1px solid color-mix(in srgb, var(--tk-border) 70%, transparent);
  color: var(--tk-muted);
}
.tk-footer strong{color: var(--tk-text)}