/*
Theme Name: Krowten Blog
Theme URI: https://krowten.com.tr/blog/
Author: Krowten
Description: krowten.com.tr ile aynı header, footer ve stil paketi. Kabuk canlı siteden okunur (functions.php krw_chrome); burada yalnızca bloga özgü öğeler var.
Version: 1.0.0
Requires PHP: 8.1
Text Domain: krowten
*/

/* Renkler sitenin değişkenlerinden: koyu tema reference.css, açık tema light.css.
   Tip ölçeği sitenin ölçeği: 12 / 13 / 14 / 16 / 20 / 24. */

.krw-blog-hero { padding-bottom: 18px; }
/* Sitenin .hero ızgarası iki sütunlu (metin + görsel); blogda görsel sütunu yok, metin tüm genişliği alır. */
.hero.krw-blog-hero { display: block; }
.krw-blog-hero .hero-copy { max-width: none; }
.krw-blog-hero h1 { max-width: 1100px; }
.krw-blog-hero .hero-copy > p { max-width: 760px; }
.krw-blog-ara.krw-blog-ara-hero { margin-top: 26px; max-width: none; width: 100%; }

/* ---------- Öne çıkan (en yeni) yazı ---------- */
.krw-one-cikan {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 0; margin-bottom: 18px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--surface); overflow: hidden;
  transition: border-color .15s ease;
}
.krw-one-cikan:hover { border-color: var(--accent); }
html[data-theme=light] .krw-one-cikan { background: #fff; box-shadow: var(--card-shadow); }
.krw-one-cikan.gorselsiz { grid-template-columns: minmax(0, 1fr); }
.krw-one-cikan-gorsel { display: block; min-height: 100%; background: var(--surface2); }
.krw-one-cikan-gorsel img { display: block; width: 100%; height: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.krw-one-cikan-metin { display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 34px 36px; min-width: 0; }
.krw-one-cikan h2 { margin: 0; font-family: var(--heading); font-size: clamp(24px, 2.4vw, 34px); line-height: 1.2; letter-spacing: -.5px; }
.krw-one-cikan h2 a { color: inherit; text-decoration: none; }
.krw-one-cikan h2 a:hover { color: var(--accent); }
.krw-one-cikan p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--muted); }
.krw-one-cikan .button { align-self: flex-start; margin-top: 4px; }
.krw-yeni { padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
@media (max-width: 860px) {
  .krw-one-cikan { grid-template-columns: minmax(0, 1fr); }
  .krw-one-cikan-metin { padding: 24px 22px; }
}
.krw-blog-cta { margin-top: 8px; }

/* ---------- Kategori filtresi (sitenin related-links düğmeleri) ---------- */
.krw-blog-filtre { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; margin-bottom: 0; }
.krw-blog-filtre a[aria-current="page"],
html[data-theme=light] .krw-blog-filtre a[aria-current="page"] { border-color: var(--accent); color: var(--accent); }

/* ---------- Yazı kartları ---------- */
.krw-blog-liste { padding-top: 28px; }
.krw-kart-izgara { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 980px) { .krw-kart-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .krw-kart-izgara { grid-template-columns: minmax(0, 1fr); } }

.krw-kart {
  display: flex; flex-direction: column; gap: 10px; min-width: 0;
  padding: 22px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); transition: border-color .15s ease;
}
.krw-kart:hover { border-color: var(--accent); }
html[data-theme=light] .krw-kart { background: #fff; box-shadow: var(--card-shadow); }
.krw-kart-gorsel {
  display: block; margin: -22px -22px 6px; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: 12px 12px 0 0; background: var(--surface2);
}
.krw-kart-gorsel img { display: block; width: 100%; height: 100%; object-fit: cover; }
.krw-kart-ust { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 13px; color: var(--muted); }
.krw-kart-ust a { color: var(--accent); text-decoration: none; }
.krw-kart h3 { margin: 0; font-family: var(--heading); font-size: 20px; line-height: 1.3; }
.krw-kart h3 a { color: inherit; text-decoration: none; }
.krw-kart h3 a:hover { color: var(--accent); }
.krw-kart p { flex: 1; margin: 0; font-size: 14px; line-height: 1.65; color: var(--muted); }
.krw-kart-devam { margin-top: 4px; font-size: 14px; color: var(--accent); text-decoration: none; }

.krw-bos { padding: 24px 0 8px; }
.krw-bos h2 { margin: 0 0 8px; font-size: 24px; }
.krw-bos p { margin: 0; font-size: 15px; color: var(--muted); }

/* ---------- Sayfalama ---------- */
.krw-sayfalama .nav-links, nav.krw-sayfalama { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.krw-sayfalama .page-numbers, nav.krw-sayfalama > a, nav.krw-sayfalama > span {
  padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px;
  font-size: 14px; color: var(--text); text-decoration: none;
}
.krw-sayfalama .page-numbers.current { border-color: var(--accent); color: var(--accent); }
.krw-sayfalama .page-numbers.dots { border-color: transparent; }

/* ---------- Arama ---------- */
.krw-blog-ara { display: flex; gap: 10px; max-width: 520px; margin-top: 36px; }
.krw-blog-ara input {
  flex: 1; min-width: 0; padding: 11px 14px; font: inherit; font-size: 14px;
  color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
}
.krw-blog-ara input:focus { outline: none; border-color: var(--accent); }
html[data-theme=light] .krw-blog-ara input { background: #fff; }
.krw-404-baglanti { margin-top: 24px; }

/* ---------- Yazı ---------- */
.krw-yazi-bilgi { display: flex; flex-wrap: wrap; gap: 6px 0; margin-top: 18px; font-size: 14px; color: var(--muted); }
.krw-yazi-bilgi > * + *::before { content: "·"; margin: 0 10px; opacity: .6; }
.krw-yazi-bilgi a { color: var(--accent); text-decoration: none; }
.krw-yazi { max-width: 820px; }
.krw-yazi-kapak { margin: 0 0 28px; }
.krw-yazi-kapak img { display: block; width: 100%; height: auto; border-radius: 12px; }

.krw-yazi-icerik { font-size: 16px; line-height: 1.8; color: var(--text); overflow-wrap: anywhere; }
.krw-yazi-icerik > * { margin-top: 0; margin-bottom: 0; }
.krw-yazi-icerik > * + * { margin-top: 1.1em; }
.krw-yazi-icerik p, .krw-yazi-icerik li { opacity: .92; }
.krw-yazi-icerik h2 { margin-top: 2em; font-family: var(--heading); font-size: 24px; line-height: 1.3; }
.krw-yazi-icerik h3 { margin-top: 1.7em; font-family: var(--heading); font-size: 20px; line-height: 1.35; }
.krw-yazi-icerik h4 { margin-top: 1.5em; font-size: 16px; }
.krw-yazi-icerik a { color: var(--accent); text-underline-offset: 3px; }
.krw-yazi-icerik ul, .krw-yazi-icerik ol { padding-left: 1.3em; }
.krw-yazi-icerik li + li { margin-top: .4em; }
.krw-yazi-icerik blockquote {
  margin-left: 0; margin-right: 0; padding: 4px 0 4px 18px;
  border-left: 3px solid var(--accent); color: var(--muted);
}
.krw-yazi-icerik code {
  padding: .1em .4em; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .88em;
  background: var(--surface2); border: 1px solid var(--line); border-radius: 6px;
}
.krw-yazi-icerik pre {
  padding: 16px 18px; overflow: auto; font-size: 14px; line-height: 1.6;
  background: var(--surface2); border: 1px solid var(--line); border-radius: 10px;
}
.krw-yazi-icerik pre code { padding: 0; background: none; border: 0; font-size: inherit; }
.krw-yazi-icerik img { max-width: 100%; height: auto; border-radius: 10px; }
.krw-yazi-icerik figure { margin-left: 0; margin-right: 0; }
.krw-yazi-icerik figcaption, .krw-yazi-icerik .wp-element-caption {
  margin-top: 8px; font-size: 13px; color: var(--muted); text-align: center;
}
.krw-yazi-icerik table { width: 100%; border-collapse: collapse; font-size: 14px; }
.krw-yazi-icerik th, .krw-yazi-icerik td { padding: 10px 12px; text-align: left; border: 1px solid var(--line); }
.krw-yazi-icerik th { background: var(--surface2); }
.krw-yazi-icerik hr { margin: 2em 0; border: 0; border-top: 1px solid var(--line); }
.krw-yazi-etiket { margin-top: 28px; }
.krw-yazi-son { margin-top: 12px; }

/* WordPress yönetim çubuğu (yalnızca girişliyken) sitenin yapışkan header'ının üstüne binmesin. */
.admin-bar .site-head { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-head { top: 46px; } }

.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}