/*
Theme Name:   VUSTYL Child
Theme URI:    https://vustyl.com
Description:  VUSTYL. tasarım sistemi — Once teması için child theme. Tokenlar, blok stilleri ve marka uyumu.
Author:       VUSTYL
Version:      1.0.59
Template:     once
Text Domain:  vustyl-child
*/

/* ============================================================
   KATMAN 1 — TOKENLAR
   Bunlar her yerde güvenli. Tek bir değeri değiştirmek tüm siteyi değiştirir.
   ============================================================ */
:root {
  --vustyl-ink:        #0E0E0E;
  --vustyl-ink-soft:   #46423E;
  --vustyl-ink-mute:   #8C8681;
  --vustyl-paper:      #FAF8F5;
  --vustyl-paper-2:    #F2EFEA;
  --vustyl-paper-3:    #E9E5DE;
  --vustyl-line:       rgba(14, 14, 14, 0.13);
  --vustyl-line-soft:  rgba(14, 14, 14, 0.07);

  /* Kategori pastelleri — slug eşlemesi inc/helpers.php içinde */
  --vustyl-c-fashion:    #F9DCE1;
  --vustyl-c-beauty:     #FBE2CE;
  --vustyl-c-art:        #D5EDDD;
  --vustyl-c-film:       #E3DCF2;
  --vustyl-c-music:      #D7E6F5;
  --vustyl-c-culture:    #FBEAC6;
  --vustyl-c-interviews: #E6E3DF;
  --vustyl-c-weekend:    #EDE0D6;

  --vustyl-font-display: "Bodoni Moda", "Didot", Georgia, serif;
  --vustyl-font-ui:      "Inter", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  --vustyl-fs-display-xl: clamp(2.6rem, 5.6vw, 4.75rem);
  --vustyl-fs-display-l:  clamp(1.9rem, 3.4vw, 3rem);
  --vustyl-fs-display-m:  clamp(1.5rem, 2.2vw, 2.05rem);
  --vustyl-fs-title:      clamp(1.15rem, 1.5vw, 1.45rem);
  --vustyl-fs-title-sm:   1.0625rem;
  --vustyl-fs-label:      0.6875rem;

  --vustyl-ls-label: 0.2em;
  --vustyl-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ============================================================
   KATMAN 2 — BLOK STİLLERİ
   Sadece shortcode çıktısını etkiler (.vustyl- ön ekli).
   Temayla çakışma riski yok.
   ============================================================ */

.vustyl-block { font-family: var(--vustyl-font-ui); color: var(--vustyl-ink); }
.vustyl-block img { display: block; max-width: 100%; height: auto; }
.vustyl-block a { text-decoration: none; color: inherit; }
.vustyl-block ul { margin: 0; padding: 0; list-style: none; }

/* --- Etiket / kicker --- */
.vustyl-kicker {
  display: inline-block;
  font-size: var(--vustyl-fs-label);
  letter-spacing: var(--vustyl-ls-label);
  text-transform: uppercase;
  font-weight: 600;
  line-height: 1;
  color: var(--vustyl-ink);
}
.vustyl-kicker::after {
  content: "";
  display: block;
  height: 3px;
  margin-top: 6px;
  background: var(--vustyl-cat, var(--vustyl-ink));
}
.vustyl-meta {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vustyl-ink-mute);
  margin: 0;
}
.vustyl-dek {
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--vustyl-ink-soft);
  margin: 0;
}

/* --- Bölüm başlığı --- */
.vustyl-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 18px;
  border-bottom: 2px solid var(--vustyl-ink);
  margin-bottom: 36px;
}
.vustyl-section-head h2 {
  margin: 0;
  font-family: var(--vustyl-font-ui);
  font-size: var(--vustyl-fs-label);
  letter-spacing: var(--vustyl-ls-label);
  text-transform: uppercase;
  font-weight: 600;
  line-height: 1;
}
.vustyl-section-head .vustyl-more {
  font-size: var(--vustyl-fs-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vustyl-ink-mute);
  transition: color 0.3s var(--vustyl-ease);
  white-space: nowrap;
}
.vustyl-section-head .vustyl-more:hover { color: var(--vustyl-ink); }

/* --- Izgara --- */
.vustyl-grid { display: grid; gap: clamp(24px, 2.6vw, 40px); }
.vustyl-grid[data-kolon="1"] { grid-template-columns: minmax(0, 1fr); }
.vustyl-grid[data-kolon="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vustyl-grid[data-kolon="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vustyl-grid[data-kolon="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* --- Izgara/flex çocuklarının min-width tuzağı ---
   Izgara ve flex çocuklarının varsayılan `min-width` değeri `auto`'dur;
   yani öğe İÇERİĞİNİN min-content genişliğinin altına inemez. Boşluksuz
   uzun bir kelime (yapıştırılmış URL, test metni) bu yüzden kartı ve
   üstündeki kolonu birlikte şişiriyordu — anasayfada 375px'lik kutuda
   2654px'lik kolon ölçüldü.

   ⚠️ `overflow-wrap: break-word` bunu ÇÖZMEZ: satırı kırar ama min-content
   genişliğini küçültmez. Çözüm iki parçalı:
   1) kolonlar `minmax(0, 1fr)` (yukarıda),
   2) çocuklara `min-width: 0` (aşağıda). */
.vustyl-grid > *,
.vustyl-hero > *,
.vustyl-ranked li > *,
.vustyl-block > * {
  min-width: 0;
}

/* --- Kart --- */
.vustyl-card { display: block; min-width: 0; }
.vustyl-card__media { display: block; overflow: hidden; margin-bottom: 16px; background: var(--vustyl-paper-3); }
/* Kartlarda kırpma DOĞRU (26 Ağustos kararı, v1.0.54 geri alındı).
   Bir ara `contain` denendi ama kutunun gri zemini (--vustyl-paper-3)
   bantlar hâlinde ortaya çıkıyor ve hata gibi duruyordu; 16:9 bir fotoğraf
   kartın %42'sini boş bırakıyordu.
   Kart bir küçük resim — ızgaranın düzenli olması, fotoğrafın tamamının
   görünmesinden önemli. Fotoğrafın tamamı yazıya girince görünüyor
   (hero'da `contain` bırakıldı). */
.vustyl-card__media img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  transition: transform 0.9s var(--vustyl-ease), filter 0.6s var(--vustyl-ease);
}
.vustyl-card[data-oran="yatay"] .vustyl-card__media img { aspect-ratio: 3 / 2; }
.vustyl-card[data-oran="genis"] .vustyl-card__media img { aspect-ratio: 4 / 3; }
.vustyl-card[data-oran="kare"]  .vustyl-card__media img { aspect-ratio: 1 / 1; }
.vustyl-card:hover .vustyl-card__media img { transform: scale(1.04); }

.vustyl-card__title {
  font-family: var(--vustyl-font-display);
  font-size: var(--vustyl-fs-title);
  font-weight: 400;
  line-height: 1.22;
  letter-spacing: -0.005em;
  margin: 12px 0 8px;
}
.vustyl-card__title a { transition: opacity 0.25s var(--vustyl-ease); }
.vustyl-card:hover .vustyl-card__title a { opacity: 0.62; }

/* --- Hero --- */
.vustyl-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.32fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
.vustyl-hero__media { display: block; overflow: hidden; }
/* Kutu 4:3 kalır, fotoğraf İÇİNE SIĞAR — kırpılmaz (23 Ağustos kararı).
   Dikey fotoğraf (768×1024) 4:3 kutuda `cover` ile %44'ü kesiliyordu.
   `contain` ile tamamı görünür; bedeli yanlarda kalan boşluk
   (ölçüm: 642px kutuda fotoğraf 361px, iki yanda 140'ar px).
   Fotoğraf ortalanır, zemin sayfa rengi olarak kalır. */
.vustyl-hero__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  object-position: center;
  transition: transform 1.1s var(--vustyl-ease);
}
.vustyl-hero:hover .vustyl-hero__media img { transform: scale(1.025); }
.vustyl-hero__title {
  font-family: var(--vustyl-font-display);
  font-size: var(--vustyl-fs-display-xl);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.015em;
  margin: 20px 0 18px;
}
.vustyl-hero__title a {
  background-image: linear-gradient(var(--vustyl-ink), var(--vustyl-ink));
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0 92%;
  transition: background-size 0.6s var(--vustyl-ease);
}
.vustyl-hero__title a:hover { background-size: 100% 1px; }
.vustyl-hero__dek { font-size: 1.0625rem; line-height: 1.7; color: var(--vustyl-ink-soft); max-width: 46ch; margin: 0; }
.vustyl-byline { margin-top: 24px; display: flex; align-items: center; gap: 10px; }
.vustyl-byline::before { content: ""; flex: 0 0 28px; height: 1px; background: var(--vustyl-ink); }

/* --- Numaralı liste --- */
.vustyl-ranked { counter-reset: vustylrank; }
.vustyl-ranked li {
  counter-increment: vustylrank;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 18px;
  padding: 20px 0;
  border-bottom: 1px solid var(--vustyl-line-soft);
  align-items: start;
}
.vustyl-ranked li:first-child { padding-top: 0; }
.vustyl-ranked li::before {
  content: counter(vustylrank, decimal-leading-zero);
  font-family: var(--vustyl-font-display);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--vustyl-ink-mute);
}
.vustyl-ranked h3 {
  font-family: var(--vustyl-font-display);
  font-size: var(--vustyl-fs-title-sm);
  font-weight: 400;
  line-height: 1.3;
  margin: 0 0 6px;
}
.vustyl-ranked h3 a { transition: opacity 0.25s var(--vustyl-ease); }
.vustyl-ranked h3 a:hover { opacity: 0.6; }

/* --- Koyu tema (Interviews bölümü) --- */
.vustyl-block[data-tema="koyu"] { background: var(--vustyl-ink); color: var(--vustyl-paper); }
.vustyl-block[data-tema="koyu"] .vustyl-kicker { color: var(--vustyl-paper); }
.vustyl-block[data-tema="koyu"] .vustyl-section-head { border-bottom-color: rgba(250, 248, 245, 0.85); }
.vustyl-block[data-tema="koyu"] .vustyl-dek,
.vustyl-block[data-tema="koyu"] .vustyl-meta,
.vustyl-block[data-tema="koyu"] .vustyl-more { color: rgba(250, 248, 245, 0.6); }
.vustyl-block[data-tema="koyu"] .vustyl-more:hover { color: var(--vustyl-paper); }
.vustyl-block[data-tema="koyu"] .vustyl-card__media { background: #1b1b1b; }
.vustyl-block[data-tema="koyu"] .vustyl-card__media img { filter: grayscale(1) contrast(1.05); }
.vustyl-block[data-tema="koyu"] .vustyl-card:hover .vustyl-card__media img { filter: grayscale(0); }

/* --- Boş durum --- */
.vustyl-empty {
  padding: 28px;
  border: 1px dashed var(--vustyl-line);
  font-size: 0.875rem;
  color: var(--vustyl-ink-mute);
  text-align: center;
}

/* --- Blok responsive --- */
@media (max-width: 1080px) {
  .vustyl-hero { grid-template-columns: minmax(0, 1fr); }
  .vustyl-grid[data-kolon="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  /* Telefonda her ızgara tek kolon.
     `!important` şart: Beauty–Art bölümünün ızgarasında SATIR İÇİ stil var
     (`style="grid-template-columns: 1.5fr 1fr"`), satır içi stili ancak
     !important ezebilir. 375px'te o blok 175 + 116px'lik iki kolona
     sıkışıyordu. */
  .vustyl-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .vustyl-ranked li { grid-template-columns: 34px minmax(0, 1fr); gap: 14px; }
}

/* --- Elementor kapsayıcıları telefonda alt alta ---
   Elementor 4, panelde girilen mobil genişlikleri üretiyor
   (`local-…-mobile.css` → `.e-XXXXX { width: 100% }`, medya ≤767px).
   AMA `base-desktop.css` içindeki
   `.elementor .e-flexbox-base { display:flex; flex-direction:row; }`
   kuralı medya="all" ile geliyor ve `base-mobile.css` bunun mobil
   karşılığını İÇERMİYOR (orada sadece `.e-grid-base` var).

   Sonuç: kapsayıcı telefonda da `row` + `nowrap` kalıyor; iki çocuk da
   %100 isteyince flex ikisini birden yarıya büzüyor. Ölçüm: 375px'te
   bloklar 138px ve 58px genişliğe düşmüştü.

   `flex-wrap: wrap` doğru çözüm — `flex-direction: column` da işe yarıyor
   ama o, panelde bilerek mobilde yan yana bırakılmış öğeleri de bozardı.
   Wrap ile yalnızca %100 isteyen öğeler alt satıra iner. */
@media (max-width: 1024px) {
  .elementor .e-flexbox-base { flex-wrap: wrap; }

  /* Tablet aralığı (768–1024px): Elementor bu aralık için CSS üretmiyor,
     masaüstü yüzdeleri (%33) geçerli kalıyor ve 768px'te bloklar 143px'e
     sıkışıyordu. `min-width` GENİŞLİĞİ EZMEZ, yalnızca taban verir:
     %100 isteyen çocuk %100 kalır, %50 olan %50 kalır, %33 olan %50'ye
     çıkıp alt satıra sarkar. Ölçüm: 768px'te 143 → 296px. */
  .elementor .e-flexbox-base > .e-con { min-width: calc(50% - 14px); }

  /* Kendi ızgaralarımız da aynı eşikte 2 kolona insin.
     Elementor kapsayıcıları 767px'te alt alta geçiyor, bizim ızgaralar ise
     640'a kadar çok kolonlu kalıyordu: 700px'te 520px'lik bir bloğun içinde
     3 kolonlu ızgara → kartlar 201px'e düşüyordu. Ölçüm: 201 → 258px.
     1000px'te bir şeyi bozmuyor (en dar kart 296px, kuralla da kuralsız da). */
  .vustyl-grid[data-kolon="3"],
  .vustyl-grid[data-kolon="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============================================================
   KATMAN 3 — MARKA UYUMU (Once / Codesupply teması)

   Tema tipografiyi <head> içine gömülü bir <style> bloğuyla basıyor.
   O blok bu dosyadan SONRA yüklendiği için, aynı özgüllükte yazılan
   kurallar eziliyor. Bu yüzden aşağıdaki kurallar ya daha yüksek
   özgüllükle ya da !important ile yazıldı — burada !important
   doğru araç, çünkü kontrolümüz dışındaki inline bir bloğu eziyoruz.

   Seçiciler canlı siteden okundu (vustyl.com, 2026-08-17).
   Sorun çıkarsa bu bloğun tamamını yorum satırına al:
   Katman 1 ve 2 çalışmaya devam eder, shortcode blokları bozulmaz.
   ============================================================ */

/* --- Zemin --- */
body {
  background: var(--vustyl-paper);
  color: var(--vustyl-ink);
  font-family: var(--vustyl-font-ui);
}

/* --- Başlıklar ---
   Tema .entry-title'a Bodoni'yi kabul ediyor ama içindeki
   .title-line span'ine ayrıca Prata basıyor. İkisini birden ele al. --- */
h1, h2, h3, h4, h5, h6,
.entry-title,
.entry-title-style,
.title-wrap,
.title-line,
.post-title,
.wp-block-heading,
.widget .wp-block-heading {
  font-family: var(--vustyl-font-display) !important;
  font-weight: 400 !important;
  letter-spacing: -0.01em;
}

/* --- Site başlığı (metin logo) --- */
.site-title,
.navbar-brand .site-title {
  font-family: var(--vustyl-font-display) !important;
  font-weight: 500 !important;
  font-size: 1.75rem;
  letter-spacing: 0.02em;
  text-transform: none;
}

/* --- Navigasyon — ince, aralıklı, büyük harf ---
   Sitenin "şık" hissinin yarısı bu tek kuraldan geliyor. --- */
.navbar-nav > li > a {
  font-family: var(--vustyl-font-ui) !important;
  font-size: var(--vustyl-fs-label) !important;
  letter-spacing: var(--vustyl-ls-label) !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
}

/* Hover çizgisi aşağıda, yazının span'ine bağlı olarak yeniden yazıldı */

/* --- Widget / sidebar başlıkları --- */
.widget .wp-block-heading,
.widget-title {
  font-size: 1.375rem !important;
  letter-spacing: -0.005em;
}

/* --- Meta satırları (görüntülenme, okuma süresi, tarih) --- */
.entry-meta,
.entry-meta a,
.post-views,
.entry-read-time {
  font-family: var(--vustyl-font-ui) !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vustyl-ink-mute);
}

/* --- Makale gövdesi ---
   Burada 690px'lik ortalanmış bir "okuma kolonu" vardı (prototipteki .prose).
   Kapsayıcı 1160px olduğu için sağ yarısı boş kalıyordu → 22 Ağustos'ta
   kaldırıldı, metin artık kapsayıcının tamamını kaplıyor. */
.single .entry-content > p,
.single .entry-content > ul,
.single .entry-content > ol,
.single .entry-content > blockquote,
.single .entry-content > h2,
.single .entry-content > h3 {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}
.single .entry-content > p {
  font-size: 1.125rem;
  line-height: 1.78;
  color: #1d1b19;
}

/* İlk paragrafta drop cap */
.single .entry-content > p:first-of-type::first-letter {
  font-family: var(--vustyl-font-display);
  float: left;
  font-size: 4.2em;
  line-height: 0.78;
  padding: 4px 12px 0 0;
  font-weight: 500;
}

/* --- Alıntı — pull quote --- */
.single .entry-content > blockquote {
  font-family: var(--vustyl-font-display);
  font-size: clamp(1.5rem, 2.4vw, 2.05rem);
  line-height: 1.28;
  text-align: center;
  border-left: 0;
  border-top: 1px solid var(--vustyl-line);
  border-bottom: 1px solid var(--vustyl-line);
  padding: 1.1em 0;
  margin: 2.2em auto;
  font-style: normal;
}

/* --- Kategori arşivi üst bandı --- */
.vustyl-cat-band { height: 4px; width: 100%; }

/* --- Bülten bölümü --- */
.vustyl-newsletter {
  text-align: center;
  background: var(--vustyl-paper-2);
  padding-block: clamp(56px, 7vw, 96px);
}
.vustyl-newsletter__title {
  font-family: var(--vustyl-font-display);
  font-size: var(--vustyl-fs-display-m);
  font-weight: 400;
  line-height: 1.15;
  margin: 0 0 14px;
  max-width: 20ch;
  margin-inline: auto;
}
.vustyl-newsletter__text {
  color: var(--vustyl-ink-soft);
  font-size: 0.875rem;
  line-height: 1.65;
  max-width: 44ch;
  margin: 0 auto;
}
.vustyl-newsletter__form { max-width: 440px; margin: 30px auto 0; }
.vustyl-newsletter__form input[type="email"],
.vustyl-newsletter__form input[type="text"] {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--vustyl-ink);
  background: none;
  padding: 12px 2px;
  font-family: var(--vustyl-font-ui);
  font-size: 0.875rem;
  border-radius: 0;
  outline: none;
}
.vustyl-newsletter__form button,
.vustyl-newsletter__form input[type="submit"] {
  font-family: var(--vustyl-font-ui);
  font-size: var(--vustyl-fs-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: var(--vustyl-ink);
  color: var(--vustyl-paper);
  border: 0;
  border-radius: 0;
  padding: 14px 28px;
  margin-top: 16px;
  cursor: pointer;
  transition: opacity 0.25s var(--vustyl-ease);
}
.vustyl-newsletter__form button:hover,
.vustyl-newsletter__form input[type="submit"]:hover { opacity: 0.75; }

/* --- Tam genişlik (full-bleed) ---
   Tema, Elementor içeriğini 1200px'lik .cs-container içine koyuyor.
   Elementor'un kendi "full width" ayarı o sarmalayıcıdan dışarı çıkamaz.
   Bu teknik negatif kenar boşluklarıyla sarmalayıcıyı aşar ve bloğu
   ekran kenarına dayar — hangi sarmalayıcının içinde olduğundan bağımsız. */
.vustyl-block[data-genislik="tam"] {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: max(24px, calc(50vw - 670px));
  padding-right: max(24px, calc(50vw - 670px));
}
/* Koyu bölümler her zaman tam genişlik — kenarda krem şerit kalmasın */
.vustyl-block[data-tema="koyu"] {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: max(24px, calc(50vw - 670px));
  padding-right: max(24px, calc(50vw - 670px));
  padding-block: clamp(56px, 7vw, 96px);
}
/* 100vw kaynaklı yatay taşmayı engeller.
   clip kullanıyoruz — hidden aksine position:sticky'yi bozmaz. */
body { overflow-x: clip; }

/* --- Kart hizalama ---
   Kart başlığı her zaman tam 2 satır yer kaplar, özet 3 satır.
   Bu, yan yana duran AYRI ızgaraların (Beauty | Art gibi) kartlarının
   aynı hizada kalmasını sağlar — CSS Grid yalnızca kendi içindeki
   satırları eşitler, komşu ızgarayı görmez.
   3 satır istersen aşağıdaki iki yerde 2 -> 3 yap. */
.vustyl-card__title {
  min-height: calc(2 * 1.22em);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.vustyl-card .vustyl-dek {
  min-height: calc(3 * 1.65em);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Hero başlığı serbest — orada kırpma istemiyoruz */
.vustyl-hero__title { min-height: 0; -webkit-line-clamp: none; display: block; overflow: visible; }

/* ============================================================
   HEADER — "Large" düzeni (Customizer > Header > Layout: Large)
   Seçiciler canlıdan okundu: .large-title, .tagline,
   .navbar-topbar (marka satırı), .navbar-bottombar (menü satırı).
   Tema bu değerleri gömülü <style> ile bastığı için !important şart.
   ============================================================ */

/* Zeminler — tema üstte #FAFAFA, menü satırında beyaz kullanıyor.
   İkisi de kağıt rengine çekiliyor, aradaki renk kırılması kalkıyor. */
.header-large .navbar-topbar,
.header-large .navbar-bottombar {
  background: var(--vustyl-paper) !important;
}

/* Menü satırı — prototipteki ince üst/alt çizgiler */
.header-large .navbar-bottombar {
  border-top: 1px solid var(--vustyl-line);
  border-bottom: 1px solid var(--vustyl-line);
}

/* Marka — büyük, ortalanmış Bodoni */
.navbar-brand .large-title {
  font-family: var(--vustyl-font-display) !important;
  font-size: clamp(2.7rem, 8.5vw, 5.6rem) !important;
  font-weight: 500 !important;
  line-height: 0.95 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
}

/* Slogan — sitenin "şık" hissini taşıyan aralıklı küçük harf dizilimi */
.navbar-brand .tagline {
  display: block;
  font-family: var(--vustyl-font-ui) !important;
  font-size: 0.625rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.34em !important;
  text-transform: uppercase !important;
  color: var(--vustyl-ink-mute) !important;
  margin-top: 14px;
}

/* Marka satırının dikey nefesi */
.header-large .navbar-topbar .navbar-wrap {
  padding-top: 44px !important;
  padding-bottom: 32px !important;
}

/* Kaydırınca menü çubuğuna kayan küçük logo da Bodoni olsun */
.header-large .navbar-bottombar .site-title {
  font-family: var(--vustyl-font-display) !important;
  font-weight: 500 !important;
  font-size: 1.5rem !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
}

/* --- Zemin tutarlılığı ---
   Tema üç yerde kağıt renginden sapıyor: mega menü paneli ve
   offcanvas beyaz, footer #FAFAFA. Krem zeminin üstünde parlak
   kutular gibi duruyorlar. Hepsi kağıt rengine çekiliyor. */
.navbar-nav .sub-menu,
.navbar-nav .cs-mm-content,
.cs-mm-posts-container,
.offcanvas,
.offcanvas-wrap,
.footer-info,
.site-footer {
  background-color: var(--vustyl-paper) !important;
}

/* Mega menü paneli — prototipteki gibi ince çerçeve, gölge yok */
.navbar-nav .sub-menu {
  border: 1px solid var(--vustyl-line);
  border-top: 0;
  box-shadow: none !important;
}

/* Footer üst ayracı */
.site-footer { border-top: 1px solid var(--vustyl-line); }

/* --- Koyu bölümde başlık renkleri ---
   Tema başlıklara ve linklere doğrudan color:#000 basıyor.
   Doğrudan kural kalıtımı yendiği için koyu bloğun krem rengi
   başlıklara ulaşamıyor — siyah üstünde siyah yazı kalıyor.
   Her birini tek tek ve !important ile yazmak şart. */
.vustyl-block[data-tema="koyu"] .vustyl-section-head h2,
.vustyl-block[data-tema="koyu"] .vustyl-card__title,
.vustyl-block[data-tema="koyu"] .vustyl-card__title a,
.vustyl-block[data-tema="koyu"] .vustyl-ranked h3,
.vustyl-block[data-tema="koyu"] .vustyl-ranked h3 a,
.vustyl-block[data-tema="koyu"] .vustyl-hero__title,
.vustyl-block[data-tema="koyu"] .vustyl-hero__title a {
  color: var(--vustyl-paper) !important;
}

/* Sağdaki "Tümü →" bağlantısı soluk kalsın, hover'da parlasın */
.vustyl-block[data-tema="koyu"] .vustyl-more { color: rgba(250, 248, 245, 0.6) !important; }
.vustyl-block[data-tema="koyu"] .vustyl-more:hover { color: var(--vustyl-paper) !important; }

/* Numaralı liste rakamları ve ayraç çizgileri */
.vustyl-block[data-tema="koyu"] .vustyl-ranked li::before { color: rgba(250, 248, 245, 0.45); }
.vustyl-block[data-tema="koyu"] .vustyl-ranked li { border-bottom-color: rgba(250, 248, 245, 0.16); }

/* --- Açılır menü (dropdown) ---
   Prototipteki .mega bloğunun birebir karşılığı:
   13px, NORMAL yazım, yumuşak gri; hover'da koyulaşıp sağa kayıyor.
   Ana menüdeki 11px/BÜYÜK HARF stili buraya UYGULANMAZ — iki seviye
   arasındaki bu fark hiyerarşiyi okunur kılan şey. */
.navbar-nav .sub-menu {
  min-width: 210px;
  padding: 18px 22px 20px;
  background: var(--vustyl-paper) !important;
  border: 1px solid var(--vustyl-line);
  border-top: 0;
  box-shadow: none !important;
}
.navbar-nav .sub-menu a,
.navbar-nav .cs-mm-categories a {
  font-family: var(--vustyl-font-ui) !important;
  font-size: 0.8125rem !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  color: var(--vustyl-ink-soft) !important;
  transition: color 0.25s var(--vustyl-ease), padding-left 0.25s var(--vustyl-ease);
}
.navbar-nav .sub-menu a:hover,
.navbar-nav .cs-mm-categories a:hover {
  color: var(--vustyl-ink) !important;
  padding-left: 5px;
}
.navbar-nav .sub-menu li + li { margin-top: 11px; }

/* --- Menü hover çizgisi ---
   Çizgi linke değil, yazıyı saran <span>'e bağlı.
   Link 80px yüksekliğinde (satırın tamamı) ama yazı ortada 17px;
   çizgiyi linkin dibine koyunca menü satırının alt kenarlığıyla
   5px arayla yan yana düşüp "çift çizgi" görüntüsü veriyordu. */
.navbar-nav > li > a { position: static; }

/* Temanın aşağı ok ikonu — prototipte yok.
   Tema .navbar-nav .menu-item-has-children > a::after ile basıyor,
   bu benim kuralımdan daha özgül olduğu için !important şart. */
.navbar-nav > li > a::after,
.navbar-nav .menu-item-has-children > a::after,
.navbar-nav .menu-item-has-children > a::before {
  content: none !important;
  display: none !important;
}

.navbar-nav > li > a > span {
  position: relative;
  display: inline-block;
}
.navbar-nav > li > a > span::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--vustyl-ease);
}
.navbar-nav > li:hover > a > span::after,
.navbar-nav > li.current-menu-item > a > span::after,
.navbar-nav > li.current-menu-parent > a > span::after { transform: scaleX(1); }

/* --- Açılır menü satır aralığı ---
   Tema alt menü linklerine 11px üst/alt dolgu veriyor: öğe yüksekliği
   19.5px yerine 42px oluyor. Üstüne aşağıdaki 11px boşluk binince
   satır aralığı prototipin (32px) iki katına çıkıyor.
   Dolguyu sıfırlıyoruz, aralığı sadece margin yönetiyor. */
.navbar-nav .sub-menu a,
.navbar-nav .cs-mm-categories a {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  line-height: 1.6 !important;
}
.navbar-nav .sub-menu li { margin: 0; }
.navbar-nav .sub-menu li + li { margin-top: 11px; }

/* ============================================================
   KATEGORİ ARŞİVİ
   Seçiciler canlıdan: .page-header > .cs-container > .page-header-content
   > h1.page-title + .archive-description
   Prototip: başlık ortalanmış 76px, açıklama 14px/52ch, altında chip'ler.
   ============================================================ */

.page-header-content { text-align: center; }

.page-title {
  font-family: var(--vustyl-font-display) !important;
  font-size: clamp(2.6rem, 5.6vw, 4.75rem) !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: -0.01em;
}

.archive-description {
  max-width: 52ch;
  margin: 18px auto 0;
  font-size: 0.875rem !important;
  line-height: 1.7;
  color: var(--vustyl-ink-soft);
}
.archive-description p {
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  margin: 0;
}

/* --- Alt kategori chip'leri (functions.php üretiyor) --- */
.vustyl-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 28px;
}
.vustyl-chip {
  font-family: var(--vustyl-font-ui);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
  padding: 9px 16px;
  border: 1px solid var(--vustyl-line);
  border-radius: 999px;
  color: var(--vustyl-ink);
  text-decoration: none;
  transition: background 0.3s var(--vustyl-ease), border-color 0.3s var(--vustyl-ease);
}
.vustyl-chip:hover {
  background: var(--vustyl-cat, var(--vustyl-ink));
  border-color: transparent;
}
.vustyl-chip.is-active {
  background: var(--vustyl-ink);
  color: var(--vustyl-paper);
  border-color: transparent;
}

/* --- Sayfalama / "Daha Fazla Yükle" butonu --- */
.pagination a, .nav-links a, .page-numbers,
.cs-load-more, .load-more {
  font-family: var(--vustyl-font-ui) !important;
  font-size: 0.6875rem !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
}

/* ============================================================
   TEKİL YAZI
   Seçiciler canlıdan: section.entry-header > .entry-header-inner
   > .post-header-inner > h1.entry-title, .entry-meta,
   .entry-content > p.wp-block-paragraph
   ============================================================ */

/* Başlık bloğu ortalanmış — prototipteki .article-head */
.single .entry-header-inner,
.single .post-header-inner {
  text-align: center;
}
/* ⚠️ Seçici DAR tutulmalı: ilgili yazı kartlarının içinde de
   <header class="entry-header"><h2 class="entry-title"> var.
   `.single .entry-header .entry-title` (0,3,0) kartlara da uyup
   başlıkları 57px yapıyordu — `.entry-cat-title` (0,1,0) kuralı bunu
   !important'a rağmen yenemez. Sadece makalenin kendi künyesini hedefle. */
/* ⚠️ `::first-line` ŞART. Uzun başlıklarda İLK SATIR farklı bir fontla
   (tema fontu now-alt) çiziliyordu — alt satırlar Bodoni'ydi.
   Ölçüm: ilk satır 754px, Bodoni'nin beklenen değeri 695px, now-alt 755px.
   `::first-line` eklenince 685px'e indi ve görsel olarak da düzeldi.
   DOM'da fark yoktu (aynı öğe, aynı hesaplanan font), kaynağı bulunamadı;
   üç stil dosyası çapraz kaynak olduğu için okunamadı. Bu kural semptomu
   kesin çözüyor. */
.single .post-header-inner > .entry-title,
.single .post-header-inner > .entry-title::first-line {
  font-family: var(--vustyl-font-display) !important;
  font-size: clamp(2.1rem, 4.4vw, 3.6rem) !important;
  font-weight: 400 !important;
  line-height: 1.06 !important;
  letter-spacing: -0.015em;
  max-width: 780px;
  margin-inline: auto;
}

/* Meta satırı ortalanmış */
.single .entry-meta,
.single .entry-header .entry-meta {
  justify-content: center;
  text-align: center;
}

/* --- Drop cap ---
   Kuralımız dosyada vardı ama sonradan yüklenen bir stil eziyordu.
   !important + iki seçici (klasik p ve blok editör p'si) ile sabitliyoruz. */
.single .entry-content > p:first-of-type::first-letter,
.single .entry-content > p.wp-block-paragraph:first-of-type::first-letter {
  font-family: var(--vustyl-font-display) !important;
  float: left !important;
  font-size: 4.2em !important;
  line-height: 0.78 !important;
  padding: 4px 12px 0 0 !important;
  font-weight: 500 !important;
  color: var(--vustyl-ink) !important;
}

/* --- Alıntı / pull quote ---
   Blok editör .wp-block-quote / .wp-block-pullquote üretiyor. */
.single .entry-content .wp-block-quote,
.single .entry-content .wp-block-pullquote,
.single .entry-content > blockquote {
  font-family: var(--vustyl-font-display) !important;
  font-size: clamp(1.5rem, 2.4vw, 2.05rem) !important;
  line-height: 1.28 !important;
  text-align: center;
  font-style: normal !important;
  border-left: 0 !important;
  border-top: 1px solid var(--vustyl-line);
  border-bottom: 1px solid var(--vustyl-line);
  padding: 1.1em 0 !important;
  margin: 2.2em auto !important;
  background: none !important;
}
.single .entry-content .wp-block-quote p,
.single .entry-content .wp-block-pullquote p {
  font-family: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
  margin: 0;
}
.single .entry-content .wp-block-quote cite,
.single .entry-content .wp-block-pullquote cite {
  display: block;
  margin-top: 14px;
  font-family: var(--vustyl-font-ui) !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-style: normal;
  color: var(--vustyl-ink-mute);
}

/* Öne çıkan görsel — prototipteki 16/9 */
.single .post-media img,
.single .entry-thumbnail img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  width: 100%;
}

/* --- Makale gövde fontu ---
   Katman 3'te paragrafın boyutunu/rengini yazmış ama font ailesini
   atlamıştım; tema now-alt'ı .entry-content üzerinden dayatıyordu. */
.single .entry-content,
.single .entry-content p,
.single .entry-content li,
.single .entry-content td {
  font-family: var(--vustyl-font-ui) !important;
}

/* --- Uzun kelime taşması ---
   Boşluksuz uzun dizeler (yapıştırılmış URL, test metni) kolonu aşıp
   yandaki içeriğin üstüne biniyordu — body'de `overflow-x: clip` olduğu için
   kaydırma çubuğu da çıkmıyor, hata sessiz kalıyordu.

   İlk düzeltme yalnızca `.single .entry-content`'e yazılmıştı; kategori
   arşivindeki `.entry-excerpt` kartlarında aynı hata tekrarladı.
   overflow-wrap KALITSAL → body'de bir kez tanımlamak tekil yazı, arşiv
   kartları, başlıklar, Elementor blokları dahil her yeri kapsar.
   Kural sadece sığmayan kelimede devreye girer, normal metni etkilemez. */
body {
  overflow-wrap: break-word;
}

/* --- Arşiv kartı özeti — 3 satırda sabit ---
   WordPress özeti KELİME sayısına göre kısaltıyor (varsayılan 55 kelime).
   Boşluksuz dev bir dize tek kelime sayıldığı için hiç kısalmıyor ve kart
   11 satıra uzuyordu — ölçüm: o kart 231px, diğer 9 kart 63px.

   CSS satır sınırı hem bu durumu keser (… otomatik eklenir) hem de tüm
   kartları aynı yükseklikte tutar. Ölçüm: 14px / 21px satır → 3 satır = 63px.
   min-height kısa özetlerde de yeri koruyor, kartlar hizada kalıyor. */
.entry-excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(3 * 1.5em);
}

/* --- Paylaşım butonları — yazının altında yatay şerit ---
   22 Ağustos kararı: soldaki dikey sütun kalktı. Prototipte vardı ama
   canlıda okuma kolonunun yanında gürültü yapıyordu.
   Powerkit zaten "after post" konumuna da basıyor; görünür tek konum o.

   ⚠️ after-post bloğu .entry-container'ın DIŞINDA, </article>'dan sonra
   duruyor → 720px'lik okuma kolonu onu sarmalamıyor. Genişliği burada
   elle veriyoruz: 680px = gövde metniyle birebir aynı hiza. */

/* Dikey sol sütun tamamen kapalı.
   Kalıcı çözüm: Özelleştir > Post Settings > Layout: "Below post content"
   (o zaman HTML hiç üretilmez). Buradaki kural görsel yama. */
.single .entry-sidebar-wrap { display: none !important; }

.single .pk-share-buttons-after-post {
  display: flex;
  justify-content: flex-end;
  max-width: none;
  margin: 64px 0 0;
  padding: 22px 0;
  border-top: 1px solid var(--vustyl-line);
  border-bottom: 1px solid var(--vustyl-line);
}
.single .pk-share-buttons-after-post .pk-share-buttons-items {
  flex-grow: 0;
  flex-wrap: nowrap;
  gap: 14px;
  margin: 0;
}
/* Tema ikonların arasına dikey ayraç çizgisi koyuyor — prototipte yok */
.single .pk-share-buttons-after-post .pk-share-buttons-item {
  border-right: none;
  padding: 0;
  margin: 0;
}
.single .pk-share-buttons-after-post .pk-share-buttons-link {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--vustyl-line);
  border-radius: 50%;
  background: transparent;
  color: var(--vustyl-ink);
  transition: background 0.3s var(--vustyl-ease), color 0.3s var(--vustyl-ease);
}
/* !important şart: Kirki'nin gömülü stili child CSS'ten SONRA yükleniyor
   ve hover rengini altına (#c4a97c) çeviriyor. */
.single .pk-share-buttons-after-post .pk-share-buttons-link:hover {
  background: var(--vustyl-ink) !important;
  color: var(--vustyl-paper) !important;
}
.single .pk-share-buttons-after-post .pk-share-buttons-icon {
  font-size: 14px;
  padding: 0;
}
/* Powerkit link'in İÇİNE ağ adını da basıyor ("Facebook", "X (Twitter)"…).
   34px'lik daireye sığmayınca yan yana taşıp üst üste biniyorlardı.
   Prototipte sadece ikon var. */
.single .pk-share-buttons-after-post .pk-share-buttons-title {
  display: none !important;
}
/* Sayaçlar — prototipte yok, sıfır değerler tasarımı kirletiyor */
.single .pk-share-buttons-total,
.single .pk-share-buttons-count {
  display: none !important;
}

/* --- Fazla paylaşım blokları ---
   Powerkit paylaşım butonlarını altı ayrı konuma basıyor:
   post_header, post_sidebar, after-post ve ilgili yazılarda post_meta x3.
   Görünür kalan tek konum: after-post (yukarıdaki yatay şerit).

   Kalıcı çözüm: Powerkit > Share Buttons ayarlarından bu konumları kapat —
   o zaman HTML hiç üretilmez. Buradaki kural görsel bir yama. */
.single .pk-share-buttons-post_header,
.single .pk-share-buttons-post_sidebar,
.single .pk-share-buttons-post_meta {
  display: none !important;
}

/* Kartların içindeki paylaşım bloğu — arşiv, arama, ilgili yazılar.
   Kartlarda "0 Shares 0 0" yazısı görünüyordu ve kart yüksekliklerini
   bozuyordu. Prototipte kartta paylaşım yok.
   Kalıcı çözüm: Powerkit → Share Buttons → `post_meta` konumunu kapat. */
.entry-share,
.pk-share-buttons-post_meta {
  display: none !important;
}

/* --- Kart başlıkları ---
   Tema ızgara/ilgili yazı kartlarında da .entry-title kullanıyor.
   .single .entry-title kuralı onlara da uyup 57.6px yapıyordu.
   Kart başlıkları anasayfadaki .vustyl-card__title ile aynı ölçüde olmalı. */
.entry-cat-title,
.entry-related .entry-title,
.post-prev-next .entry-title,
.cs-mm-post .entry-title {
  font-size: var(--vustyl-fs-title) !important;
  line-height: 1.22 !important;
  letter-spacing: -0.005em;
}

/* Arşiv ızgarasındaki kart başlıkları */
.archive .entry-title,
.blog .entry-title,
.search .entry-title {
  font-size: var(--vustyl-fs-title) !important;
  line-height: 1.22 !important;
}

/* --- Kart başlıkları 2 satırda sabit ---
   Başlıklar 1–3 satır arasında değiştiği için kart yükseklikleri
   649 / 673 / 697px arasında oynuyordu, ızgara hizası bozuktu.
   Anasayfadaki .vustyl-card__title ile aynı yaklaşım:
   min-height yeri korur (kısa başlıkta da 2 satırlık alan ayrılır),
   line-clamp uzun başlığı 2 satırda keser.
   3 satır istersen aşağıdaki iki değeri birlikte 3 yap. */
.archive .entry-title,
.blog .entry-title,
.search .entry-title,
.entry-related .entry-title,
.post-prev-next .entry-title {
  min-height: calc(2 * 1.22em);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- Bölüm başlığı (ilgili yazılar, arşiv blokları) ---
   Tema h5.title-block + .title-block-wrap kullanıyor ve yazının sağına
   dekoratif bir çizgi çekiyor. Prototipte etiket solda, altında 2px çizgi. */
.title-block-wrap {
  border-bottom: 2px solid var(--vustyl-ink);
  padding-bottom: 18px;
  margin-bottom: 36px;
}
.title-block {
  font-family: var(--vustyl-font-ui) !important;
  font-size: var(--vustyl-fs-label) !important;
  letter-spacing: var(--vustyl-ls-label) !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  margin: 0 !important;
  color: var(--vustyl-ink);
}
.title-block::before,
.title-block::after,
.title-block-wrap::before,
.title-block-wrap::after {
  display: none !important;
}

/* Kart meta satırı — okuma süresi ikonu ve yazısı */
.post-meta,
.post-meta li {
  font-family: var(--vustyl-font-ui) !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vustyl-ink-mute);
  list-style: none;
}

/* Kart üstündeki kategori etiketi — prototipteki kicker
   (renkli 3px çizgi shortcode bloklarında; burada sade tutuyoruz) */
.meta-category,
.meta-category a {
  font-family: var(--vustyl-font-ui) !important;
  font-size: var(--vustyl-fs-label) !important;
  letter-spacing: var(--vustyl-ls-label) !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  color: var(--vustyl-ink) !important;
}
.meta-category ul { list-style: none; margin: 0 0 10px; padding: 0; }
.meta-category li { display: inline-block; }





/* --- Yazı başlığı ve künyesi ---
   Ölçüm (1440px): görsel 140–1300 (1160 geniş), metin kolonu 380–1060 (680 geniş).
   240px fark olduğu için künye görselle hizalanmıyordu.

   Çözüm: .post-header-inner'ı görsel genişliğine (1160) çıkarıyoruz.
   Kicker ve başlık tam satır + ortalanmış → sayfa ortasına gelir.
   Künye solda kalır → görselin sol kenarıyla hizalanır.
   Geniş alan sayesinde üç öğe de tek satıra sığar.

   ⚠️ 22 Ağustos: bir ara künye de 680px'e indirilip sola yaslanmıştı
   (sol eksen denemesi); kullanıcı beğenmedi, bu hale geri alındı.
   Gövde metni sola yaslı kalmaya devam ediyor — künyedeki okuma süresi
   zaten solda olduğu için ikisi aynı sol kenarı paylaşıyor.

   Hedef:
                        FASHION
                     Hello world!
     1 MİNUTE READ              VUSTYL EDİTÖR · MART 16, 2026
     [============ görsel ============]
*/

.single .post-header-inner {
  max-width: 100% !important;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 12px;
}

/* Kicker — tam satır, ortalanmış */
.single .post-header-inner > .entry-inline-meta:first-child {
  flex: 0 0 100%;
  width: 100%;
  max-width: none !important;
  order: 1;
  margin: 0 0 10px;
  justify-content: center !important;
}
.single .meta-category { width: 100%; }
.single .meta-category ul {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.single .meta-category,
.single .meta-category a {
  color: var(--vustyl-ink) !important;
  font-family: var(--vustyl-font-ui) !important;
  font-size: var(--vustyl-fs-label) !important;
  font-weight: 600 !important;
  letter-spacing: var(--vustyl-ls-label) !important;
  text-transform: uppercase !important;
}

/* Başlık — tam satır, ortalanmış, okunabilir genişlikte */
/* Başlık — TAM genişlik satır.
   Dikkat: flex:0 0 100% ile max-width birlikte kullanılırsa max-width kazanır,
   öğe satırın tamamını kaplamaz ve sonraki öğe aynı satıra sığar.
   Bu yüzden kutu 100% kalıyor, metin dolguyla daraltılıyor. */
.single .post-header-inner > .entry-title {
  flex: 0 0 100%;
  order: 2;
  width: 100%;
  max-width: none !important;
  padding-inline: max(0px, calc((100% - 780px) / 2));
  margin: 0 0 18px !important;
  text-align: center !important;
  box-sizing: border-box;
}

/* Künye — solda, tek satır. Yazar+tarih önce, okuma süresi sonra. */
/* Okuma süresi solda, yazar+tarih sağda — AYNI satırda.
   margin-right:auto ilk öğeyi sola yaslar, kalan boşluk ikinciyi sağa iter. */
.single .post-header-inner > .entry-inline-meta:not(:first-child) {
  order: 3;
  flex: 0 1 auto;
  margin: 0 auto 0 0 !important;
}
.single .post-header-inner > .entry-details {
  order: 4;
  flex: 0 1 auto;
  margin: 0 !important;
  margin-left: 0 !important;
}

.single .entry-details,
.single .entry-header .entry-author,
.single .entry-info,
.single .entry-header .post-meta {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap;
  align-items: baseline;
  justify-content: flex-start !important;
  gap: 0 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  white-space: nowrap;
}
.single .entry-info > *,
.single .entry-header .post-meta > li { margin: 0 !important; }

/* Ayraç noktaları */
.single .entry-info > * + *::before {
  content: "·";
  margin-right: 12px;
  color: var(--vustyl-ink-mute);
}

/* Künyede yer kaplayan görünmez öğeler */
.single .entry-header a.author,
.single .entry-header .entry-author img,
.single .entry-header .entry-share {
  display: none !important;
}

/* Künye tipografisi — sessiz */
.single .post-header-inner > .entry-inline-meta:not(:first-child),
.single .entry-details,
.single .entry-details a,
.single .entry-info,
.single .entry-info a,
.single .entry-header .post-meta li {
  font-family: var(--vustyl-font-ui) !important;
  font-size: 0.75rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  line-height: 1.4 !important;
  color: var(--vustyl-ink-mute) !important;
}
.single .entry-info a:hover { color: var(--vustyl-ink) !important; }

/* Dar ekranda künye sarabilsin */
@media (max-width: 780px) {
  .single .entry-details,
  .single .entry-header .entry-author,
  .single .entry-info,
  .single .entry-header .post-meta { flex-wrap: wrap; white-space: normal; }
}

/* --- Yazı altı: ilgili yazılar ve yazar kutusu --- */

/* "You May Also Like" bölümü beyaz bir kutu içindeydi (.archive-wrap),
   krem sayfanın üstünde 1170px'lik beyaz bant olarak duruyordu.
   Ayrıca üstteki 48px boşluk yetersizdi. */
.single .archive-wrap,
.single .archive-related,
.single .post-archive {
  background-color: transparent !important;
}
.single .archive-related {
  margin-top: 96px !important;
  padding-top: 0;
}

/* Yazar kutusu ("Post written by: ...") — künyede zaten yazar adı var,
   biyografi olmadığı için sadece tekrar ediyor.
   Kalıcı kapatma: Powerkit > Author Box modülü veya Customizer'daki
   ilgili anahtar. Buradaki kural görsel yama. */
.single .authors-default { display: none !important; }

/* Kutu gizli ama sarmalayıcı hâlâ 48px margin + 16px padding yer kaplıyordu
   (paylaşım şeridi ile yorum butonu arasında 112px ölü boşluk). */
.single .post-author { display: none !important; }

/* Yorum butonu — şeritten sonra makul aralık */
.single .post-comments-show { margin-top: 40px !important; }

/* ============================================================
   SOL EKSEN — gövde, paylaşım şeridi ve yorum butonu
   22 Ağustos kararı. Künye yukarıda 680px'e indirilip sola yaslandı;
   aynı ekseni gövdeye ve yazı altındaki öğelere de taşıyoruz.

   Tema `.entry-container`'ı 720px kutuya alıp `margin-inline: auto` ile
   ORTALIYOR (`.single .sidebar-disabled .entry-container`, @media ≥1020px).
   Kutuyu 680'e indirip sola yaslıyor, `.entry-content-wrap`'in 20px yan
   dolgusunu da sıfırlıyoruz — yoksa metin görselin 20px sağından başlar.

   Seçici özgüllüğü temanınkiyle AYNI; child CSS sonra yüklendiği için
   kazanıyor. Bu yüzden !important gerekmiyor.
   ============================================================ */

.single .sidebar-disabled .entry-container {
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
}
.single .sidebar-disabled .entry-container .entry-content-wrap {
  padding-inline: 0;
}

/* Asıl kilit BURADA: tema okuma kolonunu 680px'e sabitliyor
   (`.single .entry-container .entry-content`, @media ≥1020px).
   Kapsayıcı 1160px olduğu için sağ yarı boş kalıyordu. */
.single .entry-container .entry-content {
  max-width: none;
}

/* Paylaşım şeridi de aynı genişlikte */
.single .pk-share-buttons-after-post {
  margin-left: 0;
  margin-right: 0;
}

/* "VIEW COMMENTS" butonu — kapsayıcısı 1160px ve text-align:center idi */
.single .post-comments-show {
  text-align: left;
}

/* ============================================================
   FOOTER — prototipteki koyu zeminli footer
   Değerler prototype/assets/style.css'ten birebir alındı:
   zemin --ink, üst dolgu clamp(52px,6vw,84px), ızgara 1.4fr + kolonlar,
   ayraç rgba(250,248,245,0.16), link rengi rgba(250,248,245,0.62).

   Markup child theme'de üretiliyor (inc/footer.php, wp_footer kancası).
   Temanın kendi footer'ı (.site-footer → "Designed & Developed by
   Code Supply Co.") gizleniyor.
   ============================================================ */

.site-footer { display: none !important; }

.vustyl-footer {
  background: var(--vustyl-ink);
  color: var(--vustyl-paper);
  font-family: var(--vustyl-font-ui);
  padding-block: clamp(52px, 6vw, 84px) 34px;
}
/* Sitenin geri kalanıyla aynı hiza: .cs-container 1200px + 20px yan dolgu */
.vustyl-footer__inner {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 20px;
}

.vustyl-footer__top {
  display: grid;
  /* Kolon sayısını PHP satır içi `--vustyl-footer-kolon` ile veriyor.
     repeat(auto-fit, …) BURADA KULLANILAMAZ: aynı ızgarada `1.4fr` gibi
     esnek bir kolonla birleşince kural geçersiz sayılır ve ızgara tek
     kolona düşer (kolonlar alt alta dizilir). */
  grid-template-columns: minmax(0, 1.4fr) repeat(var(--vustyl-footer-kolon, 4), minmax(0, 1fr));
  gap: clamp(24px, 3vw, 48px);
  padding-bottom: 46px;
  border-bottom: 1px solid rgba(250, 248, 245, 0.16);
}

.vustyl-footer__wordmark {
  display: block;
  font-family: var(--vustyl-font-display);
  font-weight: 500;
  font-size: 2.6rem;
  line-height: 0.9;
  letter-spacing: 0.02em;
  color: var(--vustyl-paper);
}
.vustyl-footer__about {
  margin: 16px 0 0;
  font-size: 0.875rem;
  line-height: 1.7;
  color: rgba(250, 248, 245, 0.6);
  max-width: 30ch;
}

.vustyl-footer__col-title {
  font-family: var(--vustyl-font-ui);
  font-size: var(--vustyl-fs-label);
  font-weight: 600;
  letter-spacing: var(--vustyl-ls-label);
  text-transform: uppercase;
  color: var(--vustyl-paper);
  margin: 0 0 18px;
}
.vustyl-footer__col ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.vustyl-footer__col li + li { margin-top: 10px; }
.vustyl-footer__col a {
  font-size: 0.8125rem;
  text-decoration: none;
  color: rgba(250, 248, 245, 0.62);
  transition: color 0.25s var(--vustyl-ease);
}
.vustyl-footer__col a:hover { color: var(--vustyl-paper); }

.vustyl-footer__bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px;
  padding-top: 26px;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(250, 248, 245, 0.45);
}
.vustyl-footer__bottom a {
  color: inherit;
  text-decoration: none;
  transition: color 0.25s var(--vustyl-ease);
}
.vustyl-footer__bottom a:hover { color: var(--vustyl-paper); }

/* Dar ekran — prototipteki kırılma noktaları */
@media (max-width: 1080px) {
  .vustyl-footer__top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vustyl-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .vustyl-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vustyl-footer__bottom { justify-content: flex-start; }
}

/* ============================================================
   404 + ARAMA SONUÇLARI

   Tema iskeleti zaten yeterli, şablon dosyası (404.php) yazmaya gerek yok:
   .page-header > h1.page-title ("404")  +
   .entry-content.content-not-found > p + form.search-form
   Metinler İngilizceydi; functions.php'deki gettext filtresiyle
   Türkçeleştiriliyor (bkz. vustyl_metinler()).
   ============================================================ */

/* --- 404 --- */
.error404 .content-not-found {
  max-width: 560px;
  margin-inline: auto;
  text-align: center;
  padding-bottom: clamp(64px, 8vw, 112px);
}
.error404 .content-not-found p {
  font-family: var(--vustyl-font-ui);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--vustyl-ink-soft);
  margin: 0 0 32px;
}

/* --- 404'ün arama formu ---
   ⚠️ SEÇİCİ DAR TUTULMALI. Bu kurallar önce `.search-form` diye genel
   yazılmıştı ve header'ın açılır aramasını bozdu: tema orada butonu
   `position:absolute; top:0; left:0; width:40px; background:transparent`
   ile alanın soluna oturan bir İKON yapıyor (`:after` ile büyüteç karakteri).
   Zemin + dolgu verilince siyah kareye dönüşüp "ARA" yazısı placeholder'ın
   üstüne bindi.

   İlk düzeltme `.error404 .search-form` idi — O DA YETMEDİ: header'ın arama
   formu da 404 sayfasında `body.error404` içinde kalıyor. Seçici 404'ün kendi
   bloğuna (`.content-not-found`) sabitlendi. */
.error404 .content-not-found .search-form .cs-input-group {
  display: flex;
  gap: 10px;
}
.error404 .content-not-found .search-form .search-field {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--vustyl-font-ui);
  font-size: 0.9375rem;
  padding: 14px 16px;
  border: 1px solid var(--vustyl-line);
  border-radius: 0;
  background: transparent;
  color: var(--vustyl-ink);
}
.error404 .content-not-found .search-form .search-field::placeholder { color: var(--vustyl-ink-mute); }
.error404 .content-not-found .search-form .search-field:focus {
  outline: none;
  border-color: var(--vustyl-ink);
}
.error404 .content-not-found .search-form .search-submit {
  flex: 0 0 auto;
  font-family: var(--vustyl-font-ui);
  font-size: var(--vustyl-fs-label);
  font-weight: 600;
  letter-spacing: var(--vustyl-ls-label);
  text-transform: uppercase;
  padding: 14px 24px;
  border: 1px solid var(--vustyl-ink);
  border-radius: 0;
  background: var(--vustyl-ink);
  color: var(--vustyl-paper);
  cursor: pointer;
  transition: background 0.3s var(--vustyl-ease), color 0.3s var(--vustyl-ease);
}
.error404 .content-not-found .search-form .search-submit:hover {
  background: transparent;
  color: var(--vustyl-ink);
}

/* --- Arama sonuçları ---
   Tema bu sayfayı `cs-page-layout-right` ile sağ kenar çubuklu basıyor;
   çubukta 6 varsayılan WordPress widget'ı var (Recent Posts, Recent
   Comments, Arşivler…). Kategori arşiviyle aynı görünsün diye çubuğu
   kapatıp içeriği tam genişliğe alıyoruz.
   Kalıcı çözüm: Özelleştirici'den arama düzenini tam genişlik yapmak +
   widget'ları silmek — buradaki kural görsel yama. */
.search .sidebar-area { display: none !important; }
.search .content-area {
  width: 100% !important;
  max-width: none !important;
  flex: 0 0 100% !important;
  padding-inline: 0 !important;
}
/* Beyaz kutu — krem sayfanın üstünde bant gibi duruyordu */
.search .archive-wrap,
.search .post-archive {
  background-color: transparent !important;
}

/* Kart ızgarası kategori arşiviyle aynı olsun.
   Tema 3 kolonu `.sidebar-disabled` sınıfına bağlamış:
     @media (min-width:1020px) {
       .sidebar-disabled .archive-wrap .archive-grid article { flex: 0 0 33.3333% }
     }
   Arama sayfasının `.site-content`'i `sidebar-enabled` olduğu için bu kural
   tutmuyor ve temel değer (%50, yani 2 kolon) kalıyordu — kategori arşivi
   3 kolonken arama 2 kolondu. Aynı kırılma noktasında aynı değeri veriyoruz;
   1020px altında temanın kendi kuralları zaten ortak.
   Kalıcı çözüm: Özelleştirici'den arama düzenini kenar çubuksuz yapmak. */
@media (min-width: 1020px) {
  .search .archive-wrap .archive-grid article {
    flex: 0 0 33.3333333333% !important;
    max-width: 33.3333333333% !important;
  }
}

/* Kartlar satırın ÜSTÜNDEN hizalansın.
   Flex satırında içeriği kısa olan kart aşağı kayıyordu (ölçüm: aynı satırda
   bir kart 64px aşağıda başlıyordu, üst kenar tırtıklı görünüyordu).
   Görselsiz sonuçlar (ör. sayfa sonuçları) doğal olarak kısa kalır —
   üstten hizalı olunca bu sorun olmaz. */
.search .archive-grid,
.archive .archive-grid,
.blog .archive-grid {
  align-items: flex-start;
}

/* --- Arama simgesi: üst satır yerine menü satırının sağ ucunda ---
   Tema simgeyi İKİ yere birden basıyor: üst bar (logo satırı, sol kolon) ve
   menü satırı (sağ kolon). Menü satırındaki varsayılan olarak `display:none`.
   Üst satır sadece logo + slogan kalsın diye yer değiştiriyoruz.
   Ölçüm: menü satırındaki simge 1220–1233, yani 1160px'lik kapsayıcının
   sağ ucunda; kolonu zaten `justify-content: flex-end`.

   Mobilde menü satırı gizlendiği için üst bardaki simge açık bırakılıyor. */
@media (min-width: 1020px) {
  .header-large .navbar-topbar .toggle-search { display: none !important; }
  .header-large .navbar-bottombar .toggle-search { display: flex !important; }
}

/* --- "Dergi" butonu ---
   PHP menünün sonuna ekliyor, JS arama simgesinin yanına taşıyor
   (bkz. vustyl_dergi_tasi). Menü kolonunda yer yoktu: ölçüm — kolon 809px,
   menü 793px. Arama kolonu 240px ve neredeyse boş.

   Taşınana kadar menü içinde GİZLİ dursun ki yer değiştirme titremesi olmasın.
   Taşındıktan sonra bu seçici eşleşmez, buton görünür olur.
   Offcanvas menüdeki kopya taşınmaz; onun konumu aşağıda ayrıca ayarlanıyor. */
.navbar-bottombar .navbar-nav .vustyl-dergi-item {
  display: none;
}

/* Arama kolonuna taşındıktan sonraki hâli */
.navbar-bottombar .navbar-col > .vustyl-dergi-item {
  list-style: none;
  margin: 0 22px 0 0;
  padding: 0;
  display: flex;
  align-items: center;
}

/* --- Mobil + tablet: BAŞLIKTAKİ kopya kapalı ---
   1020px altında `.navbar-bottombar` masaüstü menü satırı olmaktan çıkıp
   mobil başlık çubuğuna dönüşüyor (hamburger + logo + arama) — gizlenmiyor.
   JS butonu arama simgesinin yanına taşıyınca logonun ÜSTÜNE biniyordu.
   Bu genişliklerde buton zaten soldaki offcanvas menüde var, başlıktaki
   kopya gereksiz.

   1020px temanın kendi `lg` kırılma noktası: canlıdan okundu →
   `@media (min-width: 1020px) { .cs-d-lg-none { display: none !important } }`.
   Offcanvas menü widget'ı `cs-d-lg-none` taşıyor, yani iki kopya tam bu
   noktada el değiştiriyor. */
@media (max-width: 1019px) {
  .navbar-bottombar .vustyl-dergi-item {
    display: none !important;
  }
}

/* --- OFFCANVAS menüdeki kopya ---
   Kategori listesinin altında; ortalanmış ve son kategoriden ayrılacak
   kadar aşağıda. Menü öğeleri sola yaslı, buton bilerek ortada — liste
   bitti, bu bir eylem. */
.offcanvas .vustyl-dergi-item {
  list-style: none;
  display: flex;
  justify-content: center;
  margin: 26px 0 0;
  padding: 0;
}

a.vustyl-dergi {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: auto !important;
  line-height: 1 !important;
  padding: 11px 34px !important;
  border: 1px solid var(--vustyl-ink);
  background: transparent;
  color: var(--vustyl-ink) !important;
  font-family: var(--vustyl-font-ui);
  font-size: var(--vustyl-fs-label) !important;
  font-weight: 600;
  letter-spacing: var(--vustyl-ls-label);
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 0.45s var(--vustyl-ease), border-color 0.45s var(--vustyl-ease);
}

/* Metin dolgunun ÜSTÜNDE kalsın diye kendi katmanında (PHP'deki span). */
.vustyl-dergi__metin {
  position: relative;
  z-index: 2;
  display: block;
  transition: transform 0.45s var(--vustyl-ease);
}

/* --- Akan mürekkep dolgusu ---
   Soldan girer, imleç çıkınca sağdan akıp gider: transform-origin hover'da
   sol, normalde sağ. scaleX kullanılıyor (width değil) — compositor'da
   çalışıyor, layout tetiklemiyor. */
a.vustyl-dergi::before {
  content: '' !important;
  display: block !important;
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--vustyl-ink);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.5s var(--vustyl-ease);
}
a.vustyl-dergi:hover::before,
a.vustyl-dergi:focus-visible::before {
  transform: scaleX(1);
  transform-origin: left center;
}

/* --- Parıltı ---
   Dolgu yerleştikten hemen sonra üstünden geçen ince ışık şeridi. */
a.vustyl-dergi::after {
  content: '' !important;
  display: block !important;
  position: absolute;
  top: 0;
  bottom: 0;
  left: -55%;
  width: 42%;
  z-index: 1;
  background: linear-gradient(
    100deg,
    rgba(250, 248, 245, 0) 0%,
    rgba(250, 248, 245, 0.30) 50%,
    rgba(250, 248, 245, 0) 100%
  );
  transform: skewX(-18deg);
  opacity: 0;
  pointer-events: none;
}
a.vustyl-dergi:hover::after,
a.vustyl-dergi:focus-visible::after {
  animation: vustyl-parilti 0.85s var(--vustyl-ease) 0.18s;
}
@keyframes vustyl-parilti {
  from { left: -55%; opacity: 1; }
  to   { left: 115%; opacity: 1; }
}

a.vustyl-dergi:hover,
a.vustyl-dergi:focus-visible {
  background: transparent;
  color: var(--vustyl-paper) !important;
}
a.vustyl-dergi:hover .vustyl-dergi__metin {
  transform: translateY(-1px);
}
a.vustyl-dergi:active .vustyl-dergi__metin {
  transform: translateY(0);
}

/* Hareket azaltma tercihi: dolgu anında, parıltı yok. */
@media (prefers-reduced-motion: reduce) {
  a.vustyl-dergi::before { transition: none; }
  a.vustyl-dergi::after { display: none !important; }
  .vustyl-dergi__metin { transition: none; }
  a.vustyl-dergi:hover .vustyl-dergi__metin { transform: none; }
}

/* --- Footer: sosyal hesaplar ---
   Marka kolonunda, tanıtım metninin altında. Simgeler Powerkit'in ikon
   fontundan (`pk-icon-*`) — font zaten her sayfada yüklü, ek istek yok.
   Adresler inc/footer.php içindeki vustyl_footer_sosyal() dizisinde. */
.vustyl-footer__social {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.vustyl-footer__social a {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(250, 248, 245, 0.28);
  border-radius: 50%;
  color: rgba(250, 248, 245, 0.72);
  text-decoration: none;
  transition: background 0.3s var(--vustyl-ease), color 0.3s var(--vustyl-ease), border-color 0.3s var(--vustyl-ease);
}
.vustyl-footer__social a:hover {
  background: var(--vustyl-paper);
  border-color: var(--vustyl-paper);
  color: var(--vustyl-ink);
}
.vustyl-footer__social .pk-icon { font-size: 15px; line-height: 1; }

/* --- Logo görseli ---
   TEK dosya: ŞEFFAF zeminde BEYAZ harfli.
   Footer zemini siyah → olduğu gibi. Header zemini krem → CSS ile ters çevrilir.
   ⚠️ KOYU harfli bir logo yüklenirse `invert(1)` KALDIRILMALI.

   ⚠️⚠️ AŞAĞIDAKİ YÜKSEKLİKLER **KIRPILMIŞ** DOSYAYA GÖRE AYARLANDI
   (`logo-kirpilmis.png`, 240×63, harfler tuvali tam dolduruyor).

   Özgün dosyada (388×180) harfler yalnızca 240×63'lük alanı kaplıyor;
   üstte 52, altta 65, solda 52, sağda 96 piksel şeffaf boşluk var.
   Ölçüm (canlı, 1305px): logo kutusu 381×177 basılıyordu, harfler ekranda
   236×62 kalıyor ve üstte 51 / altta 64 piksel ölü alan oluşuyordu.
   Kırpılmış dosya yüklenmezse harfler bu değerlerin ~%35'i kadar görünür. */
#masthead .navbar-brand img,
#masthead .large-title img {
  filter: invert(1);
  height: 44px !important;   /* KIRPILMIŞ dosyayla harfler 166×44 olur.
                                Bu, 23 Ağustos'taki hâlin (83×22) tam 2 katı
                                ve netlik korunur: dosyada 240px harf verisi var,
                                166px'e basılıyor → 1.45× fazlası.
                                Daha büyüğü için daha yüksek çözünürlüklü export şart. */
  width: auto !important;
  max-width: 100% !important;
}

/* Mobil çubuk / offcanvas başlığındaki küçük kopya */
.offcanvas-header .navbar-brand img,
.navbar-offcanvas .navbar-brand img {
  filter: invert(0);
  height: 26px !important;
  width: auto !important;
}

.vustyl-footer__logo {
  display: inline-block;
  line-height: 0;
}
.vustyl-footer__logo img {
  display: block;
  width: auto;
  height: 52px;   /* kırpılmış dosyayla harfler 198×52 olur — marka kolonu 260px,
                     rahat oturur. Boşluklu dosyayla 96px denendi: harfler 128×34
                     kalıyor, üstte 28 altta 35 piksel ölü alan oluşuyordu. */
  max-width: 100%;
}

/* ============================================================
   YAZI SAYFASI — ELEMENTOR ŞABLONU DÜZENİ (23 Ağustos kararı)

   Yazı sayfasında tema artık SADECE kicker (kategori) + başlık basıyor.
   Öne çıkan görsel, künye ve gövde müşterinin seçtiği Elementor şablonundan
   geliyor. Şablonun dinamik olabilmesi için iki widget eklendi:
   "VUSTYL Öne Çıkan Görsel" ve "VUSTYL Künye" (bkz. inc/yazi-ogeleri.php).

   ⚠️ Öne çıkan görsel YALNIZCA yazı sayfasında gizleniyor. Anasayfa, kategori
   arşivi ve kartlar onu kullanmaya devam ediyor — müşteri yine doldurmalı.
   ============================================================ */

/* Temanın bastığı öne çıkan görsel — şablon kendi görselini koyacak,
   yoksa fotoğraf iki kez görünür. */
.single .entry-header .post-media {
  display: none !important;
}

/* Künye de şablona taşındı; kicker + başlık kalıyor. */
.single .post-header-inner > .entry-inline-meta:not(:first-child),
.single .post-header-inner > .entry-details {
  display: none !important;
}

/* Önceki / sonraki yazı gezinmesi — kullanıcı isteğiyle kaldırıldı. */
.single .post-prev-next {
  display: none !important;
}

/* --- Widget: VUSTYL Öne Çıkan Görsel --- */
.vustyl-yazi-gorsel {
  margin: 0;
  line-height: 0;
}
.vustyl-yazi-gorsel img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}
/* "Orijinal" dışında bir oran seçilirse kırpar */
.vustyl-yazi-gorsel.has-oran img {
  aspect-ratio: var(--vustyl-oran);
  object-fit: cover;
}

/* --- Widget: VUSTYL Künye --- */
.vustyl-yazi-kunye {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 12px;
  font-family: var(--vustyl-font-ui);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--vustyl-ink-mute);
}
.vustyl-yazi-kunye[data-yon="sutun"] {
  flex-direction: column;
  gap: 10px 0;
}
/* Yan yana dizilimde araya ayraç noktası */
.vustyl-yazi-kunye[data-yon="satir"] li + li::before {
  content: "·";
  margin-right: 12px;
  color: var(--vustyl-ink-mute);
}