/* johnmu.com düzeninin birebir uyarlaması (hexo apollo tabanlı) */
:root {
  --bg-color: light-dark(#fff, #1a1a1a);
  --text-color: light-dark(#111, #eeeeee);
  --border-color: light-dark(#ddd, #444);
  --link-color: light-dark(#111, #88ccff);
  --meta-color: light-dark(#535353, #bbbbbb);
  --code-inline-bg: light-dark(#f2f2f2, #2c2c2c);
  --font-family: 'PT Serif', 'Times New Roman', serif;
  --mono: 'Source Code Pro', Consolas, Monaco, Menlo, monospace;
  --max-width: 800px;
  --header-height: 57px;
  color-scheme: light dark;
}
[data-theme=light] { color-scheme: light }
[data-theme=dark] { color-scheme: dark }

html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline
}
input, button { margin: 0; padding: 0; font-family: var(--font-family); font-size: 16px }
input::-moz-focus-inner, button::-moz-focus-inner { border: 0; padding: 0 }

html, body, #container { height: 100% }
body {
  background: var(--bg-color);
  color: var(--text-color);
  font-family: var(--font-family);
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  line-height: 1.5;
}
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
.outer { max-width: var(--max-width); margin: 0 auto; padding: 0 20px }

/* ---------- başlık ---------- */
#header { font-size: 14px; position: relative; border-bottom: 1px solid var(--border-color) }
#header-outer { height: 100%; position: relative }
#header-inner {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  min-height: var(--header-height); position: relative; overflow: hidden
}
#logo {
  font-size: 24px; font-weight: 700; line-height: var(--header-height); margin-right: 25px;
  text-decoration: none; color: var(--text-color)
}
#sub-nav { display: flex; align-items: center }
/* Mobil: 1. satır başlık + mod düğmesi, 2. satır tam genişlik arama */
@media screen and (max-width: 839px) {
  #header-inner { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 8px; padding: 6px 0 12px }
  #logo { font-size: 22px; line-height: 1.25; margin: 0; padding: 8px 0 }
  #sub-nav { display: contents }
  #dark-mode-toggle-wrap { grid-column: 2; grid-row: 1 }
  #header #search-form-wrap { grid-column: 1 / -1; grid-row: 2; padding: 4px 0 0 }
  #search-form-wrap .search { display: flex; width: 100% }
  #search-form-wrap .search input[type=text] { flex: 1; max-width: none; min-width: 0; field-sizing: fixed; padding: 7px 10px }
  #header-inner > nav:not(#sub-nav):not(.article-side) { display: none }
}
#dark-mode-toggle {
  background: 0 0; border: none; cursor: pointer; padding: 4px 8px; font-size: 1.2rem; line-height: 1;
  display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; color: var(--text-color)
}
#dark-mode-toggle:hover { background: light-dark(rgba(0,0,0,5%), rgba(255,255,255,5%)) }
#search-form-wrap { padding: 10px 15px }
.search { display: flex; align-items: center }
form.search { display: inline }
.search input[type=text] {
  width: 220px; max-width: 100%; border: 1px solid var(--border-color);
  background: var(--bg-color); color: var(--text-color); padding: 5px 10px; border-radius: 4px
}
.search input[type=text]:focus { outline: 2px solid var(--meta-color); outline-offset: -1px }
#footer .search input[type=text] { width: 260px }
.search input[type=submit] { border: 0; background: 0 0; padding-left: 7px; cursor: pointer }

/* ---------- yazılar ---------- */
.homepage-byline { padding-top: 1em }
.article { margin: 50px 0; border-bottom: 1px solid var(--border-color) }
.article-inner { margin-bottom: 15px }
.article-title { font-size: 2em; font-weight: 700; line-height: 1.2 }
.article-meta { display: flex; flex-wrap: wrap; gap: 0 15px; color: var(--meta-color); font-size: .9em }
.article-meta a { color: var(--meta-color) }
.article-entry { color: var(--text-color); padding: 0 }

.article-meta a, a.article-title, .article-entry a, .article-more-link a, .archive-year-wrap a, .archive-category-wrap a,
.archive-article-title, #page-nav a, #footer a, .layout-wrap-inner .category-list a, .tag-cloud a, .article-side a {
  color: var(--text-color); text-decoration: none; border-bottom: 1px dotted transparent
}
.article-meta a:hover, a.article-title:hover, .article-more-link a:hover, .archive-year-wrap a:hover,
.archive-category-wrap a:hover, .archive-article-title:hover, #page-nav a:hover, #footer a:hover,
.layout-wrap-inner .category-list a:hover, .tag-cloud a:hover { border-bottom-color: var(--text-color) }
.article-meta a { color: var(--meta-color) }
.article-entry a, .article-side a { color: var(--link-color); border-bottom: 1px dotted var(--link-color) }
.article-entry a:hover, .article-side a:hover { border-bottom-style: solid }
.article-entry .md__image a, .article-entry .yt-lite a { border: 0 }

.article-entry h1 { font-size: 2em }
.article-entry h2 { font-size: 1.5em }
.article-entry h3 { font-size: 1.3em }
.article-entry h4 { font-size: 1.2em }
.article-entry h5 { font-size: 1em }
.article-entry h6 { font-size: 1em; color: var(--meta-color) }
.article-entry h1, .article-entry h2, .article-entry h3, .article-entry h4, .article-entry h5, .article-entry h6 {
  font-weight: 600; line-height: 1.4em; margin: 1em 0; scroll-margin-top: 20px
}
.article-entry hr { border: 1px dashed var(--border-color); margin: 2em 0 }
.article-entry strong { font-weight: 700 }
.article-entry em, .article-entry cite { font-style: italic }
.article-entry del { text-decoration: line-through }
.article-entry sup, .article-entry sub { font-size: .75em; line-height: 0; position: relative; vertical-align: baseline }
.article-entry sup { top: -.5em }
.article-entry sub { bottom: -.2em }
.article-entry small { font-size: .85em }
.article-entry acronym, .article-entry abbr { border-bottom: 1px dotted }
.article-entry p, .article-entry table { line-height: 1.6; margin: 1.4em 0 }
.article-entry ul, .article-entry ol, .article-entry dl { margin: 1.4em 25px; line-height: 1.4em }
.article-entry ul ul, .article-entry ol ul, .article-entry ul ol, .article-entry ol ol { margin-top: 0; margin-bottom: 0 }
.article-entry li > p { margin: .5em 0 }
.article-entry ul { list-style: disc }
.article-entry ol { list-style: decimal }
.article-entry li.task-list-item { list-style: none; margin-left: -1.3em }
.article-entry dt { font-weight: 700 }
.article-entry img, .article-entry video { max-width: 100%; height: auto; display: block; margin: auto }
.article-entry audio { width: 100%; margin: 1.4em 0 }
.article-entry video { margin: 1.4em auto }
.article-entry iframe { border: none }
.article-entry .table-wrap { overflow-x: auto; margin: 1.4em 0 }
.article-entry .table-wrap table { margin: 0 }
.article-entry table { width: 100%; border-collapse: collapse; border-spacing: 0 }
.article-entry th { font-weight: 600; border-bottom: 3px solid var(--border-color); padding-bottom: .5em; text-align: left }
.article-entry td { border-bottom: 1px solid var(--border-color); padding: 10px 0 }
.article-entry th + th, .article-entry td + td { padding-left: 12px }
.article-entry blockquote { font-family: var(--font-family); font-size: 1.4em; margin: 1.4em 20px; text-align: center }
.article-entry blockquote footer { font-size: 16px; margin: 1.4em 0 }
.article-entry blockquote footer cite:before { content: "—"; padding: 0 .5em }
.article-entry .caption { color: var(--meta-color); display: block; font-size: .9em; margin-top: .5em; position: relative; text-align: center }
.article-entry .md__image { margin: 1.4em 0 }
.article-entry .video-container { position: relative; padding-top: 56.25%; height: 0; overflow: hidden; margin: 1.4em 0; background: #000 }
.article-entry .video-container iframe, .article-entry .video-container object, .article-entry .video-container embed,
.article-entry .video-container > a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin-top: 0 }
.yt-lite img { width: 100%; height: 100%; object-fit: cover; opacity: .9 }
.yt-lite a:hover img { opacity: 1 }
.yt-play {
  position: absolute; left: 50%; top: 50%; width: 68px; height: 48px; margin: -24px 0 0 -34px;
  background: #f00; border-radius: 12px; opacity: .85
}
.yt-play::after {
  content: ""; position: absolute; left: 27px; top: 14px;
  border-style: solid; border-width: 10px 0 10px 17px; border-color: transparent transparent transparent #fff
}
.yt-lite a:hover .yt-play { opacity: 1 }
.article-more-link a { color: var(--meta-color); border-bottom-color: var(--meta-color) }

.article-ancient-above, .article-ancient-below, .preview-note {
  background-color: light-dark(#eee, #222); margin-top: 10px; padding: 10px
}
.preview-note { margin-top: 20px; border-left: 3px solid orange }

/* dış bağlantılar ↪ ile, nofollow turuncu kesikli */
a.external:before { content: "\21AA\A0" }
a[rel~=nofollow] { border-bottom: dashed 2px orange }
#footer a[rel~=nofollow] { border-bottom: 1px dotted transparent }

/* ---------- önceki / sonraki ---------- */
#article-nav { position: relative; margin: 20px 0 }
#article-nav:before, #article-nav:after { content: ""; display: table }
#article-nav:after { clear: both }
.article-nav-link-wrap {
  text-decoration: none; text-shadow: 0 1px var(--bg-color); color: var(--meta-color);
  box-sizing: border-box; text-align: center; display: block
}
.article-nav-link-wrap:hover { color: var(--text-color) }
@media screen and (min-width: 840px) { .article-nav-link-wrap { width: 50%; margin-top: 50px } }
#article-nav-newer { float: left; text-align: left }
#article-nav-older { float: right; text-align: right }
.article-nav-title { font-size: .85em; line-height: 1.4em; margin-top: .5em }

/* ---------- içindekiler (sağ) ve kategoriler (sol), geniş ekranda ---------- */
.article-toc {
  display: none; position: fixed; left: 50%; top: 150px; font-size: .9em; width: 260px; margin-left: 400px;
  padding-left: 20px; overflow-y: auto; line-height: 1.4em; max-height: 85%
}
.article-toc h3, .article-side h3 { font-weight: 700; margin-left: 20px }
.article-toc li, .article-side li { list-style: none; margin-left: 20px; margin-top: 2px }
.article-toc li a { color: var(--text-color); text-decoration: none }
.article-toc li a.active { font-weight: 700 }
/* sol kenar: kategoriler + önerilen araçlar, kaydırırken sabit kalır */
.article-side {
  display: none; position: fixed; text-align: right; right: 50%; top: 150px; width: 220px; margin-right: 400px;
  padding-right: 30px; overflow: hidden auto; line-height: 1.4em; max-height: calc(100vh - 170px); scrollbar-width: none
}
@media screen and (min-width: 1280px) {
  .article-side { display: block }
}
@media screen and (min-width: 1400px) {
  .article-toc { display: block }
  .article-side { width: 260px; padding-right: 50px }
}
.article-side:hover { scrollbar-width: thin }
.categories-rare { display: none }
.side-partners-title { margin-top: 1.4em }
.side-partners .partner-note { display: block; font-size: .85em; color: var(--meta-color) }
a[rel~=sponsored] { border-bottom-style: dashed !important }
#footer #partners { padding: 10px 0 0; font-size: .95em }
@media screen and (min-width: 1280px) { #footer #partners { display: none } }

/* ---------- arşiv / kategori sayfası ---------- */
.archives-wrap { margin: 50px 0 }
.archives:before, .archives:after { content: ""; display: table }
.archives:after { clear: both }
.archive-year-wrap, .archive-category-wrap { font-size: 1.4em; margin-bottom: 1em }
.archive-category { font-size: 1em; font-weight: 400 }
.archive-category-desc { color: var(--meta-color); margin: -.5em 0 1.5em }
.archives { margin-left: 5px; border-left: 1px solid var(--border-color) }
.archive-article-inner { padding: 10px 10px 10px 12px; margin: 15px 0 15px -2px; border-left: 3px solid transparent }
.archive-article-inner:hover { border-left-color: var(--text-color) }
.archive-article-title { font-size: 1.2em; font-weight: 700 }
.archive-article-date { color: var(--meta-color); text-decoration: none; font-size: .85em; line-height: 1em; margin-bottom: .5em; display: block }
.archive-article-summary { margin-top: .4em; line-height: 1.6 }

.layout-wrap { margin: 50px 0 }
.layout-title { font-size: 1.4em; margin-bottom: 1em; font-weight: 400 }
.layout-wrap-inner .category-list-count { margin-left: 8px; color: var(--meta-color) }
.tag-cloud ul { list-style: none; line-height: 1.8em }
.tag-cloud li { display: inline-block; margin-right: 16px; color: var(--meta-color) }
.tag-cloud a { margin-right: 4px }
.tag-cloud a:before { content: '#' }

/* ---------- sayfalama ---------- */
#page-nav { margin: 50px auto; text-align: center; overflow: hidden }
#page-nav a, #page-nav span { display: inline-block; min-width: 40px; height: 40px; margin: 0 7px; line-height: 40px; text-align: center; padding: 3px }
#page-nav a.prev, #page-nav a.next { width: auto }
#page-nav .current { color: var(--bg-color); border-radius: 18px; background-color: var(--text-color); min-width: 34px; height: 34px; line-height: 34px }
#page-nav .space { color: var(--border-color) }

/* ---------- alt bilgi ---------- */
#footer { padding: 0; padding-bottom: 50px; text-align: center }
#footer a { font-weight: 600 }
#footer-info { line-height: 1.4em; font-size: .85em }
#footer #bugreport { padding: 10px 0 }
@media screen and (min-width: 840px) { #footer #mobilesearch { display: none } }
#footer #mobilesearch { display: none }

/* ---------- kod blokları (monokai) ---------- */
.article-entry code { font-family: var(--mono); background: var(--code-inline-bg); padding: 0 .3em; font-size: .92em }
.article-entry .highlight {
  position: relative; margin: 1.4em 0; font-size: 14px; background: #272822; color: #f8f8f2; line-height: 22.4px
}
.article-entry .highlight pre {
  margin: 0; padding: 15px 20px; overflow: auto; background: #272822; color: #f8f8f2;
  font-family: var(--mono); tab-size: 4; -moz-tab-size: 4; -webkit-text-size-adjust: none
}
.article-entry pre code { background: 0 0; text-shadow: none; padding: 0; font-size: 1em; color: inherit }
.article-entry .highlight pre:focus-visible { outline: 2px solid #66d9ef; outline-offset: -2px }
/* dosya adı çubuğu (```php dosya.php) */
.code-bar {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 6px 12px 6px 20px; background: #1e1f1c; border-bottom: 1px solid #3e3d32;
  font-family: var(--mono); font-size: 12.5px; color: #a6a68f
}
.code-file { color: #e6db74; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.article-entry .code-bar a.code-download { color: #a6a68f; border-bottom: 1px dotted #a6a68f; margin-right: 76px }
.article-entry .code-bar a.code-download:hover { color: #f8f8f2 }
/* dil etiketi + kopyala düğmesi (site.js ekler) */
.code-tools {
  position: absolute; right: 8px; top: 6px; display: flex; gap: 6px; align-items: center;
  font-family: var(--mono); font-size: 11px; line-height: 1
}
.code-lang { color: #75715e; text-transform: uppercase; letter-spacing: 1px; padding: 4px 2px }
.code-copy {
  font-family: var(--mono); font-size: 11px; color: #a6a68f; background: #3e3d32; border: 0;
  border-radius: 3px; padding: 4px 7px; cursor: pointer; opacity: 0; transition: opacity .15s
}
.highlight:hover .code-copy, .code-copy:focus-visible, .code-copy.done { opacity: 1 }
@media (hover: none) { .code-copy { opacity: 1 } }
.code-copy:hover { color: #f8f8f2 }
.highlight.has-bar .code-tools { top: 5px }
.highlight:not(.has-bar) pre { padding-top: 22px }

.hljs-keyword, .hljs-selector-tag, .hljs-literal, .hljs-tag .hljs-name, .hljs-name, .hljs-meta .hljs-keyword,
.hljs-operator, .hljs-selector-pseudo, .hljs-deletion { color: #f92672 }
.hljs-built_in, .hljs-type, .hljs-class .hljs-title, .hljs-title.class_, .hljs-meta, .hljs-params .hljs-type { color: #66d9ef }
.hljs-string, .hljs-attr + .hljs-string, .hljs-regexp, .hljs-addition, .hljs-symbol, .hljs-template-variable,
.hljs-selector-attr, .hljs-link, .hljs-meta .hljs-string { color: #e6db74 }
.hljs-number, .hljs-literal, .hljs-variable.constant_, .hljs-bullet { color: #ae81ff }
.hljs-title, .hljs-title.function_, .hljs-attr, .hljs-attribute, .hljs-selector-id, .hljs-selector-class,
.hljs-section, .hljs-function .hljs-title { color: #a6e22e }
.hljs-comment, .hljs-quote, .hljs-doctag { color: #75715e }
.hljs-variable, .hljs-template-tag, .hljs-params, .hljs-subst, .hljs-property { color: #f8f8f2 }
.hljs-variable.language_ { color: #fd971f; font-style: italic }
.hljs-emphasis { font-style: italic }
.hljs-strong { font-weight: 700 }
/* PHP: açılış/kapanış etiketleri ve $değişkenler belirgin */
code.language-php .hljs-meta { color: #fd971f; font-weight: 600 }
code.language-php .hljs-variable { color: #fd971f }
code.language-php .hljs-variable.language_ { color: #fd971f }

.empty-note { margin: 50px 0; color: var(--meta-color) }