/*
Theme Name: Mutkus Theme
Theme URI: https://mutk.us
Description: mutkus.com icin gelistirilmis, gazete/dergi tarzi blog siteleri icin ozel tema. Sticky header, magazine grid layoutlari, post carousel, dark mode, okuma ilerleme cubugu, icindekiler (TOC), otomatik sonraki yazi yukleme, hava durumu ve video playlist widget'lari, sayfa yukleme animasyonu ve 8 farkli tekil yazi duzeni icerir.
Author: Mustafa Utku Seyithanoğlu
Author URI: https://mutk.us
Template: news-magazine-x
Version: 1.0.0
Text Domain: mutkus-theme
*/

/* =========================================================
   ONEMLI: "Template:" satirindaki "news-magazine-x" degeri,
   sunucundaki /wp-content/themes/ klasorundeki News X Free
   temasinin KLASOR ADI ile birebir ayni olmali. FTP'de kontrol et,
   farkliysa bu satiri duzelt, yoksa tema aktive olmaz.
   ========================================================= */

:root{
  --mutkus-accent: #d21f1f;
  --mutkus-header-bg: #ffffff;
  --mutkus-content-bg: #ffffff;
  --mutkus-footer-bg: #1a1a1a;
  --mutkus-text: #1a1a1a;
  --mutkus-text-muted: #6b6b6b;
  --mutkus-border: #e6e6e6;
  --mutkus-radius: 6px;
}

html.mutkus-dark{
  --mutkus-header-bg: #14161a;
  --mutkus-content-bg: #14161a;
  --mutkus-footer-bg: #0b0c0e;
  --mutkus-text: #ececec;
  --mutkus-text-muted: #a3a3a3;
  --mutkus-border: #2a2c30;
}
html.mutkus-dark body{ background: var(--mutkus-content-bg); color: var(--mutkus-text); }
html.mutkus-dark a{ color: var(--mutkus-accent); }

/* ---------- Sticky header ----------
   Yaygin News X / temel WP tema secicilerini hedefler.
   Kendi sitende gercek header elementini DevTools ile kontrol edip
   gerekirse asagidaki secici listesine kendi class/id'ini ekle. */
body.mutkus-has-sticky header#masthead,
body.mutkus-has-sticky .site-header,
body.mutkus-has-sticky header.site-header,
body.mutkus-has-sticky #header{
  position: sticky;
  top: 0;
  z-index: 9999;
  transition: box-shadow .25s ease, padding .25s ease;
  background: var(--mutkus-header-bg);
}
body.mutkus-scrolled.mutkus-has-sticky header#masthead,
body.mutkus-scrolled.mutkus-has-sticky .site-header,
body.mutkus-scrolled.mutkus-has-sticky header.site-header,
body.mutkus-scrolled.mutkus-has-sticky #header{
  box-shadow: 0 2px 10px rgba(0,0,0,.12);
}

/* ---------- Header reklam alani + CTA serit ---------- */
.mutkus-header-ad{
  width:100%;
  background: var(--mutkus-header-bg);
  border-bottom: 1px solid var(--mutkus-border);
  overflow:hidden;
}
.mutkus-header-ad-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  padding: 6px 16px;
  max-width: 1200px;
  margin: 0 auto;
}
.mutkus-header-ad-slot{ flex:1; text-align:center; overflow:hidden; }
.mutkus-header-ad-slot:empty{ display:none; }
.mutkus-header-cta{
  flex: 0 0 auto;
  display:inline-block;
  padding: 8px 18px;
  border-radius: var(--mutkus-radius);
  background: var(--mutkus-accent);
  color: #fff !important;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.mutkus-header-cta:hover{ opacity:.88; }

/* ---------- Dark mode toggle button ---------- */
#mutkus-dark-toggle{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 99999;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--mutkus-border);
  background: var(--mutkus-content-bg);
  color: var(--mutkus-text);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
  font-size: 20px;
  line-height:1;
}

/* ---------- AJAX arama ---------- */
.mutkus-ajax-search{ position: relative; max-width: 420px; }
.mutkus-ajax-search input[type="search"]{
  width:100%;
  padding: 10px 14px;
  border: 1px solid var(--mutkus-border);
  border-radius: var(--mutkus-radius);
  background: var(--mutkus-content-bg);
  color: var(--mutkus-text);
}
.mutkus-ajax-search-results{
  position:absolute;
  top: calc(100% + 6px);
  left:0; right:0;
  background: var(--mutkus-content-bg);
  border: 1px solid var(--mutkus-border);
  border-radius: var(--mutkus-radius);
  max-height: 360px;
  overflow-y:auto;
  z-index: 9998;
  display:none;
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
}
.mutkus-ajax-search-results.is-open{ display:block; }
.mutkus-ajax-search-results a{
  display:block;
  padding: 10px 14px;
  border-bottom: 1px solid var(--mutkus-border);
  color: var(--mutkus-text);
  text-decoration:none;
  font-size: 14px;
}
.mutkus-ajax-search-results a:last-child{ border-bottom:none; }
.mutkus-ajax-search-results a:hover{ background: rgba(0,0,0,.04); }
.mutkus-ajax-search-empty{ padding: 10px 14px; font-size: 13px; color: var(--mutkus-text-muted); }

/* ---------- Magazine Grid widget ---------- */
.mutkus-magazine-grid{ margin: 0 0 30px; }
.mutkus-magazine-grid ul{ list-style:none; margin:0; padding:0; }
.mutkus-mg-item{ position:relative; }
.mutkus-mg-item a.mutkus-mg-link{ text-decoration:none; color:inherit; display:block; }
.mutkus-mg-thumb{ display:block; overflow:hidden; border-radius: var(--mutkus-radius); background:#eee; aspect-ratio: 16/10; }
.mutkus-mg-thumb img{ width:100%; height:100%; object-fit:cover; display:block; transition: transform .35s ease; }
.mutkus-mg-item:hover .mutkus-mg-thumb img{ transform: scale(1.06); }
.mutkus-mg-cat{ display:inline-block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color: var(--mutkus-accent); margin: 10px 0 4px; }
.mutkus-mg-title{ font-size:16px; line-height:1.35; font-weight:700; margin:0 0 4px; color: var(--mutkus-text); }
.mutkus-mg-meta{ font-size:12px; color: var(--mutkus-text-muted); }

/* Layout 1: buyuk vurgu + liste */
.mutkus-mg-layout-1{ display:grid; grid-template-columns: 1.6fr 1fr; gap: 22px; }
.mutkus-mg-layout-1 .mutkus-mg-featured .mutkus-mg-title{ font-size:24px; }
.mutkus-mg-layout-1 .mutkus-mg-list{ display:flex; flex-direction:column; gap:14px; }
.mutkus-mg-layout-1 .mutkus-mg-list .mutkus-mg-item{ display:flex; gap:12px; }
.mutkus-mg-layout-1 .mutkus-mg-list .mutkus-mg-thumb{ width:96px; aspect-ratio:1/1; flex:0 0 96px; }
.mutkus-mg-layout-1 .mutkus-mg-list .mutkus-mg-title{ font-size:14px; margin-top:0; }

/* Layout 2: 2x2 grid */
.mutkus-mg-layout-2{ display:grid; grid-template-columns: repeat(2,1fr); gap:20px; }

/* Layout 3: 3'lu grid */
.mutkus-mg-layout-3{ display:grid; grid-template-columns: repeat(3,1fr); gap:18px; }

/* Layout 4: 4'lu grid */
.mutkus-mg-layout-4{ display:grid; grid-template-columns: repeat(4,1fr); gap:16px; }

/* Layout 5: klasik yatay liste */
.mutkus-mg-layout-5 .mutkus-mg-item{ display:flex; gap:16px; padding:14px 0; border-bottom:1px solid var(--mutkus-border); }
.mutkus-mg-layout-5 .mutkus-mg-thumb{ width:160px; flex:0 0 160px; aspect-ratio:16/10; }

/* Layout 6: kompakt sidebar listesi (numarali) */
.mutkus-mg-layout-6 ul{ counter-reset: mutkus-mg-counter; }
.mutkus-mg-layout-6 .mutkus-mg-item{ display:flex; gap:12px; align-items:center; padding:10px 0; border-bottom:1px solid var(--mutkus-border); }
.mutkus-mg-layout-6 .mutkus-mg-item::before{
  counter-increment: mutkus-mg-counter;
  content: counter(mutkus-mg-counter);
  font-size:20px; font-weight:800; color: var(--mutkus-border); flex:0 0 28px;
}
.mutkus-mg-layout-6 .mutkus-mg-title{ font-size:14px; margin:0; }

@media (max-width: 780px){
  .mutkus-mg-layout-1{ grid-template-columns: 1fr; }
  .mutkus-mg-layout-2, .mutkus-mg-layout-3, .mutkus-mg-layout-4{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 480px){
  .mutkus-mg-layout-2, .mutkus-mg-layout-3, .mutkus-mg-layout-4{ grid-template-columns: 1fr; }
}

/* ---------- Post carousel widget ---------- */
.mutkus-carousel{ position:relative; margin: 0 0 30px; }
.mutkus-carousel-track{
  display:flex;
  gap:16px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  padding-bottom: 6px;
  -ms-overflow-style:none;
  scrollbar-width:none;
}
.mutkus-carousel-track::-webkit-scrollbar{ display:none; }
.mutkus-carousel-slide{
  scroll-snap-align:start;
  flex: 0 0 calc((100% - (var(--mutkus-cols, 3) - 1) * 16px) / var(--mutkus-cols, 3));
}
.mutkus-carousel-nav{
  display:flex; gap:8px; justify-content:flex-end; margin: 10px 0 0;
}
.mutkus-carousel-nav button{
  width:36px; height:36px; border-radius:50%;
  border:1px solid var(--mutkus-border);
  background: var(--mutkus-content-bg);
  color: var(--mutkus-text);
  cursor:pointer; font-size:16px;
}
.mutkus-carousel-nav button:hover{ background: var(--mutkus-accent); color:#fff; border-color: var(--mutkus-accent); }
@media (max-width: 780px){
  .mutkus-carousel-slide{ flex-basis: calc((100% - 16px) / 2); }
}
@media (max-width: 480px){
  .mutkus-carousel-slide{ flex-basis: 100%; }
}

/* ---------- Tekil yazi: TOC ---------- */
.mutkus-toc{
  background: rgba(0,0,0,.03);
  border: 1px solid var(--mutkus-border);
  border-radius: var(--mutkus-radius);
  padding: 16px 18px;
  margin: 0 0 24px;
}
html.mutkus-dark .mutkus-toc{ background: rgba(255,255,255,.04); }
.mutkus-toc-title{
  display:flex; align-items:center; justify-content:space-between;
  font-weight:800; font-size:14px; text-transform:uppercase; letter-spacing:.03em;
  cursor:pointer; margin:0;
}
.mutkus-toc-list{ list-style:none; margin: 12px 0 0; padding:0; }
.mutkus-toc-list li{ margin: 0 0 8px; }
.mutkus-toc-list ul{ list-style:none; margin: 8px 0 0 16px; padding:0; }
.mutkus-toc-list a{ color: var(--mutkus-text); text-decoration:none; font-size:14px; }
.mutkus-toc-list a:hover{ color: var(--mutkus-accent); }
.mutkus-toc.is-collapsed .mutkus-toc-list{ display:none; }
.mutkus-toc-toggle-icon{ transition: transform .2s ease; }
.mutkus-toc.is-collapsed .mutkus-toc-toggle-icon{ transform: rotate(-90deg); }

.mutkus-reading-meta{
  display:flex; gap:14px; align-items:center;
  font-size:13px; color: var(--mutkus-text-muted);
  margin: 0 0 18px;
}
.mutkus-reading-meta span{ display:flex; align-items:center; gap:5px; }

/* ---------- Okuma ilerleme cubugu ---------- */
#mutkus-reading-progress{
  position: fixed; top:0; left:0; height:3px; width:0%;
  background: var(--mutkus-accent);
  z-index: 100000;
  transition: width .1s linear;
}

/* ---------- Sonraki yazi otomatik yukleme ---------- */
#mutkus-next-post-sentinel{ height:1px; }
.mutkus-next-post-loading{
  text-align:center; padding: 30px 0; font-size:14px; color: var(--mutkus-text-muted);
}
.mutkus-next-post-divider{
  margin: 40px 0 30px; padding-top: 30px; border-top: 3px solid var(--mutkus-border);
}

/* ---------- Ek footer widget alanlari ---------- */
.mutkus-extra-footer{
  background: var(--mutkus-footer-bg);
  color: #dcdcdc;
  padding: 40px 0 20px;
}
.mutkus-extra-footer-inner{
  max-width: 1200px; margin:0 auto; padding: 0 20px;
  display:grid; grid-template-columns: repeat(6, 1fr); gap: 24px;
}
.mutkus-extra-footer .widget-title,
.mutkus-extra-footer h2, .mutkus-extra-footer h3{
  color:#fff; font-size:14px; text-transform:uppercase; letter-spacing:.03em; margin: 0 0 14px;
}
.mutkus-extra-footer a{ color:#bdbdbd; }
.mutkus-extra-footer a:hover{ color:#fff; }
@media (max-width: 980px){
  .mutkus-extra-footer-inner{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px){
  .mutkus-extra-footer-inner{ grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   HAVA DURUMU WIDGET'I
   ============================================================ */
.mutkus-weather-widget{
  display:flex; align-items:center; gap:14px;
  padding: 14px 16px;
  border: 1px solid var(--mutkus-border);
  border-radius: var(--mutkus-radius);
  background: var(--mutkus-content-bg);
}
.mutkus-weather-icon{ font-size:34px; line-height:1; }
.mutkus-weather-info{ display:flex; flex-direction:column; }
.mutkus-weather-temp{ font-size:22px; font-weight:800; color: var(--mutkus-text); }
.mutkus-weather-desc{ font-size:12px; color: var(--mutkus-text-muted); }
.mutkus-weather-city{ font-size:12px; font-weight:600; color: var(--mutkus-text-muted); margin-top:2px; }
.mutkus-weather-loading, .mutkus-weather-error{ font-size:13px; color: var(--mutkus-text-muted); }

/* ============================================================
   VIDEO PLAYLIST WIDGET'I
   ============================================================ */
.mutkus-video-playlist{ margin: 0 0 20px; }
.mutkus-video-main{ position:relative; width:100%; aspect-ratio:16/9; border-radius: var(--mutkus-radius); overflow:hidden; background:#000; margin-bottom:12px; }
.mutkus-video-main iframe{ width:100%; height:100%; border:0; display:block; }
.mutkus-video-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; max-height:260px; overflow-y:auto; }
.mutkus-video-list-item{
  display:flex; align-items:center; gap:10px; cursor:pointer;
  padding:6px; border-radius: var(--mutkus-radius);
}
.mutkus-video-list-item:hover, .mutkus-video-list-item.is-active{ background: rgba(0,0,0,.05); }
html.mutkus-dark .mutkus-video-list-item:hover, html.mutkus-dark .mutkus-video-list-item.is-active{ background: rgba(255,255,255,.06); }
.mutkus-video-thumb{
  width:80px; height:48px; flex:0 0 80px; border-radius:4px; overflow:hidden;
  background:#111 center/cover no-repeat;
  position:relative;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:16px;
}
.mutkus-video-thumb img{ width:100%; height:100%; object-fit:cover; }
.mutkus-video-title{ font-size:13px; font-weight:600; color: var(--mutkus-text); }

/* ============================================================
   TEKIL YAZI DUZENLERI (8 layout) — genel WP secicileri kullanilir:
   .entry-title / .entry-meta / .entry-content / .entry-thumbnail
   Kendi temanda farkli class adlari varsa bana gerçek HTML'i gönder,
   secicileri birebir uyarlarim.
   ============================================================ */

/* 2 — Genis kapak gorsel (full-bleed hero) */
body.mutkus-single-layout-2 .entry-thumbnail img,
body.mutkus-single-layout-2 .post-thumbnail img,
body.mutkus-single-layout-2 .wp-post-image{
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  max-height: 520px;
  object-fit: cover;
}

/* 3 — Ortalanmis */
body.mutkus-single-layout-3 .entry-header,
body.mutkus-single-layout-3 .entry-title,
body.mutkus-single-layout-3 .entry-meta{ text-align:center; }
body.mutkus-single-layout-3 .entry-content{ max-width: 680px; margin-left:auto; margin-right:auto; }

/* 4 — Minimal */
body.mutkus-single-layout-4 .entry-meta,
body.mutkus-single-layout-4 .tags-links,
body.mutkus-single-layout-4 .post-navigation{ display:none; }
body.mutkus-single-layout-4 .entry-content{ line-height:1.9; }

/* 5 — Kenarda sabit meta (genis ekranlarda) */
@media (min-width: 1200px){
  body.mutkus-single-layout-5 .entry-meta{
    position: sticky; top: 100px; float:left; width:140px;
    margin-left:-170px; display:flex; flex-direction:column; gap:8px;
  }
}

/* 6 — Buyuk baslik */
body.mutkus-single-layout-6 .entry-title{ font-size: clamp(32px, 5vw, 56px); line-height:1.08; }

/* 7 — Dergi stili (drop-cap) */
body.mutkus-single-layout-7 .entry-content > p:first-of-type::first-letter{
  float:left; font-size: 64px; line-height:0.8; font-weight:800;
  padding: 6px 8px 0 0; color: var(--mutkus-accent);
}

/* 8 — Koyu kapak (dark cover) */
body.mutkus-single-layout-8 .entry-thumbnail,
body.mutkus-single-layout-8 .post-thumbnail{
  position: relative;
}
body.mutkus-single-layout-8 .entry-thumbnail::after,
body.mutkus-single-layout-8 .post-thumbnail::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.75) 100%);
}
body.mutkus-single-layout-8 .entry-thumbnail img,
body.mutkus-single-layout-8 .post-thumbnail img{ filter: brightness(.75); }

/* ============================================================
   PRELOADER
   ============================================================ */
#mutkus-preloader{
  position: fixed; inset:0; z-index: 999999;
  display:flex; align-items:center; justify-content:center;
  background: var(--mutkus-content-bg);
  transition: opacity .4s ease;
}
#mutkus-preloader.mutkus-preloader-hide{ opacity:0; pointer-events:none; }

.mutkus-preloader-spinner{
  width:48px; height:48px; border-radius:50%;
  border: 4px solid var(--mutkus-border);
  border-top-color: var(--mutkus-accent);
  animation: mutkus-spin 0.8s linear infinite;
}
@keyframes mutkus-spin{ to{ transform: rotate(360deg); } }

.mutkus-preloader-bar{ width: 220px; height:4px; border-radius:2px; background: var(--mutkus-border); overflow:hidden; }
.mutkus-preloader-bar::after{
  content:""; display:block; height:100%; width:40%;
  background: var(--mutkus-accent);
  animation: mutkus-bar 1.1s ease-in-out infinite;
}
@keyframes mutkus-bar{
  0%{ margin-left:-40%; } 50%{ margin-left:60%; } 100%{ margin-left:-40%; }
}

.mutkus-preloader-pulse{
  font-size: 20px; font-weight:800; letter-spacing:.04em; color: var(--mutkus-text);
  animation: mutkus-pulse 1.2s ease-in-out infinite;
}
@keyframes mutkus-pulse{ 0%,100%{ opacity:.35; } 50%{ opacity:1; } }