/* Görev: Rehber sayfaları (what-is-a-rebus / rebus-puzzles / how-to-solve / idiom-puzzles) —
   makale tipografisi + breadcrumb + tanım kutusu + CTA paneli. styles.css'in ÜSTÜNE yüklenir,
   token tanımlamaz (tek kaynak: styles.css :root). Kart/galeri/nav/footer styles.css'ten gelir. */

.guide { max-width: 840px; margin: 0 auto; padding: 28px 20px 56px; }
.guide > h1 { font-size: clamp(1.8rem, 4vw + .6rem, 2.6rem); margin-bottom: .35em; }
/* H2 çapası: kısa altın→mor şerit. Uzun metinde bölüm başları metne karışıyordu (390px'te
   ölçülüp görüldü) — göz taramada tutunacak sabit bir işaret gerekir. */
.guide h2 { position: relative; text-align: left; font-size: clamp(1.3rem, 2vw + .6rem, 1.7rem); margin: 1.9em 0 .5em; padding-top: 14px; }
.guide h2::before {
  content: ""; position: absolute; top: 0; left: 0; width: 36px; height: 5px; border-radius: 3px;
  background: linear-gradient(90deg, var(--accent-gold), var(--brand-primary));
}
.guide h3 { margin-top: 1.3em; }
/* Uzun-form okuma: 1.55 gövde değeri makale için sıkışıktı → 1.65 */
.guide p, .guide li { font-size: 1.02rem; line-height: 1.65; }
.guide ul, .guide ol { color: var(--text-secondary); padding-left: 22px; }
.guide li { margin-bottom: .55em; }
.guide section { max-width: none; padding: 0; margin: 0; }
/* 🪤 Üstteki reset (0,1,1) .gcta/.gsec sınıf kurallarını (0,1,0) EZİYORDU: CTA paneli
   padding'siz doğuyor, içerik kart kenarına yapışıyordu (cihazda görüldü, ölçüldü: padding 0px).
   Element+sınıf seçicisi resetten güçlü — kayıplar burada geri verilir. */
.guide section.gsec { margin-top: 1.2em; }
.guide section.gcta { margin: 2em 0 0; padding: 22px 20px; }

/* Breadcrumb */
.crumbs { font-size: .84rem; color: var(--text-secondary); margin-bottom: 14px; }
.crumbs a { color: var(--brand-primary-dark); display: inline-block; padding: 5px 2px; } /* dokunma yüksekliği ~30px */
.crumbs span { opacity: .7; }

/* Görünür tazelik damgası — Article schema'daki dateModified'ın insan-okur yarısı */
.gupdated { font-size: .82rem; color: var(--text-secondary); opacity: .85; margin: -4px 0 18px; }

/* "What's new" — hub'daki dürüst tarihli site güncellemeleri (sahte blog DEĞİL) */
.gnews { list-style: none; padding-left: 0; }
.gnews li {
  padding: 12px 14px; margin-bottom: 10px; font-size: .98rem;
  background: var(--surface-card); border-radius: 12px; box-shadow: var(--shadow-soft);
}
.gnews time { font: 800 .78rem/1 var(--font-display); color: var(--brand-primary-dark); letter-spacing: .04em; text-transform: uppercase; }

/* Who/How beyanı (Google "helpful content" Who/How/Why çerçevesi): kim yazdı + nasıl üretildi */
.gabout {
  margin: 22px 0 0; padding: 14px 16px; font-size: .88rem; color: var(--text-secondary);
  background: rgba(123, 109, 181, .06); border-radius: 12px; border: 1px dashed rgba(123, 109, 181, .25);
}

/* "On this page" hızlı atlama — CHIP satırı: mobilde yatay kayar, dokunma hedefi büyük.
   (Eski düz-metin hali linkleri gövde metnine karıştırıyordu.) SERP "jump to" kaynağı da bu. */
.gtoc {
  display: flex; align-items: center; gap: 8px; overflow-x: auto;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
  margin: 0 -20px 20px; padding: 2px 20px 6px;
  mask-image: linear-gradient(90deg, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent);
}
.gtoc::-webkit-scrollbar { display: none; }
.gtoc__label {
  flex: none; font: 800 .72rem/1 var(--font-display); text-transform: uppercase;
  letter-spacing: .06em; color: var(--text-secondary);
}
.gtoc a {
  flex: none; white-space: nowrap; font-weight: 700; font-size: .86rem;
  color: var(--brand-primary-dark); background: var(--surface-card);
  border: 1px solid rgba(123, 109, 181, .22); border-radius: 999px; padding: 9px 14px; /* ≥32px dokunma */
}
.gtoc a:active { background: rgba(123, 109, 181, .12); }

/* Öne çıkan tanım kutusu — featured snippet hedefi: kısa, tırnaksız, tek paragraf */
.defbox {
  background: var(--surface-card); border-left: 5px solid var(--brand-primary);
  border-radius: 12px; box-shadow: var(--shadow-soft);
  padding: 16px 18px; margin: 0 0 1.2em;
}
.defbox p { margin: 0; font-size: 1.06rem; color: var(--text-primary); }

/* Makale içi tekil örnek görseli (worked example) */
.gfig { margin: 1em 0 1.4em; background: var(--surface-card); border-radius: 16px; box-shadow: var(--shadow-soft); padding: 14px; }
.gfig img { margin: 0 auto; border-radius: 10px; max-height: 320px; width: auto; max-width: 100%; }
.gfig figcaption { text-align: center; font-size: .88rem; color: var(--text-secondary); padding-top: 10px; }

/* "Up next" — makale sonunda TEK net sıradaki adım (okuma rotası: what-is → how-to →
   puzzles → idioms → daily). gnext ızgarası "hepsi", pager "şimdi ne" sorusuna cevap. */
.gpager {
  display: block; margin: 1.8em 0 0; padding: 16px 18px; border-radius: 16px;
  background: linear-gradient(160deg, var(--brand-primary), var(--brand-primary-dark));
  box-shadow: var(--shadow-3d-purple); transition: transform .12s ease, filter .15s ease;
}
.gpager, .gpager:hover { color: #fff; }
.gpager:hover { filter: brightness(1.07); }
.gpager:active { transform: translateY(2px); }
.gpager small { display: block; font: 800 .72rem/1 var(--font-display); text-transform: uppercase; letter-spacing: .08em; opacity: .8; margin-bottom: 4px; }
.gpager strong { display: block; font-family: var(--font-display); font-size: 1.18rem; line-height: 1.25; }
.gpager span { display: block; font-size: .88rem; opacity: .92; margin-top: 2px; }

/* CTA panelindeki journey karakteri — oyunun kostüm setinden, sayfa temasına göre seçili
   (DELETE/journey-contact.png → chroma-key → assets/mascots/, FAVO 2026-08-13) */
.gcta__mascot { height: 130px; width: auto; margin: 0 auto 10px; }

/* Rehber CTA paneli — sonuç ekranındaki dcta'nın makale hali */
.gcta {
  margin: 2em 0 0; background: var(--surface-card); border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft); padding: 22px 20px; text-align: center;
}
.gcta h2 { text-align: center; margin: 0 0 .4em; padding-top: 0; }
.gcta h2::before { display: none; } /* çapa şeridi ortalanmış panel başlığında sırıtır */
.gcta p { margin: 0 0 14px; }
.gcta .cta-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.gcta .btn--daily {
  display: inline-block; font-family: var(--font-display); font-weight: 800;
  background: var(--brand-primary); color: #fff; border-radius: var(--radius-btn);
  padding: 12px 22px; box-shadow: var(--shadow-3d-purple); text-decoration: none;
}
.gcta__fine { font-size: .82rem; color: var(--text-secondary); margin-top: 12px !important; }

/* Rehber galerisi: .pz-grid'i sarar; başlık + sayı rozeti üstte */
.gsec { margin-top: 1.2em; }
.gsec__badge {
  display: inline-block; font: 800 12px/1 var(--font-display); letter-spacing: .06em;
  text-transform: uppercase; color: #fff; background: var(--brand-primary);
  border-radius: 999px; padding: 6px 12px; margin-bottom: 8px;
}
.gsec__badge--easy { background: var(--cta-primary-dark); }
.gsec__badge--hard { background: #B04040; }

/* Rehberler arası "devamını oku" kartları */
.gnext { display: grid; gap: 12px; grid-template-columns: 1fr; margin: 1em 0 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .gnext { grid-template-columns: 1fr 1fr; } }
.gnext a {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface-card); border-radius: 14px; box-shadow: var(--shadow-soft);
  padding: 14px 16px; font-weight: 700; color: var(--text-primary); transition: transform .15s ease;
}
.gnext a:hover { transform: translateY(-2px); color: var(--brand-primary-dark); }
.gnext a small { display: block; font-weight: 400; color: var(--text-secondary); margin-top: 3px; }
/* Oyunun event ikonları (ana sayfa kartlarıyla AYNI sayfa↔ikon eşlemesi — siteler arası tanınırlık) */
.gnext__ico { flex: none; width: 30px; height: 30px; }
.gnext__txt { min-width: 0; }

/* PDF indirme CTA'sı (printable sayfası) — .btn--daily .gcta KAPSAMINDA kaldığı için
   dışarıda çıplak link kalıyordu (cihazda görüldü: "zayıf ve güvensiz"). Kendi bloğu: */
.pdl { text-align: center; margin: 22px 0 4px; }
.pdl__btn {
  display: inline-flex; align-items: center; gap: 12px; text-align: left;
  font-family: var(--font-display); font-weight: 800; font-size: 1.08rem; line-height: 1.15;
  background: var(--cta-primary); color: var(--text-primary); text-decoration: none;
  padding: 14px 26px 14px 18px; border-radius: 999px;
  box-shadow: 0 5px 0 var(--cta-primary-dark), 0 12px 24px rgba(74, 52, 38, .20);
  transition: transform .12s ease, filter .15s ease, box-shadow .12s ease;
}
.pdl__btn:hover { filter: brightness(1.05); color: var(--text-primary); }
.pdl__btn:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--cta-primary-dark), 0 8px 16px rgba(74, 52, 38, .15); }
.pdl__btn svg { flex: none; width: 34px; height: 34px; padding: 7px; box-sizing: border-box; background: rgba(255, 255, 255, .35); border-radius: 50%; }
.pdl__btn small { display: block; font: 700 .78rem/1.2 'Nunito', sans-serif; opacity: .8; margin-top: 3px; }
.pdl__fine {
  display: flex; justify-content: center; gap: 6px 16px; flex-wrap: wrap;
  font-size: .84rem; color: var(--text-secondary); margin: 12px 0 0;
}
.pdl__fine span::before { content: "✓ "; color: var(--cta-primary-dark); font-weight: 800; }

/* Katlanır FAQ (history/printable) — daily.css'teki .dfaq'ın rehber-sayfa ikizi */
.dfaq { border-top: 1px solid rgba(201, 154, 46, .25); padding: 10px 0; }
.dfaq summary { font-weight: 700; cursor: pointer; padding: 4px 0; }
.dfaq p { margin: 8px 0 2px; color: var(--text-secondary); }

/* İçindekiler değil ama hızlı-cevap listesi (nasıl-çözülür sayfası) */
.gtricks { counter-reset: trick; list-style: none; padding-left: 0; }
.gtricks > li {
  counter-increment: trick; position: relative; padding: 14px 16px 14px 56px; margin-bottom: 10px;
  background: var(--surface-card); border-radius: 14px; box-shadow: var(--shadow-soft);
}
.gtricks > li::before {
  content: counter(trick); position: absolute; left: 14px; top: 14px;
  width: 30px; height: 30px; display: grid; place-items: center;
  font: 800 15px/1 var(--font-display); color: #fff;
  background: var(--brand-primary); border-radius: 50%;
}
.gtricks strong { display: block; color: var(--text-primary); margin-bottom: 2px; }