/* =====================================================================
   HoroscopeHand — Cosmic Content Styles  (css/cosmic-content.css)
   Icerik sayfalarinin (burc listesi/tek, ozellik, tas, uyum, tarot) eski
   style.css siniflarini kozmik temaya tasir. cosmic.css'ten SONRA yuklenir.
   Boylece icerik sayfalarinin HTML markup'i degismeden modern gorunur.
   ===================================================================== */

:root { --gold-tint: brightness(0) saturate(100%) invert(86%) sepia(28%) saturate(560%) hue-rotate(345deg) brightness(95%) contrast(92%); }

/* ---------- Burc ikonlari (CSS sprite — eski style.css'ten tasindi) ----------
   Icerik sayfalari artik style.css yuklemedigi icin bu arka plan tanimlari burada. */
.icn1  { background: url('../images/brcicnb1.png')  center/contain no-repeat; }
.icn2  { background: url('../images/brcicnb2.png')  center/contain no-repeat; }
.icn3  { background: url('../images/brcicnb3.png')  center/contain no-repeat; }
.icn4  { background: url('../images/brcicnb4.png')  center/contain no-repeat; }
.icn5  { background: url('../images/brcicnb5.png')  center/contain no-repeat; }
.icn6  { background: url('../images/brcicnb6.png')  center/contain no-repeat; }
.icn7  { background: url('../images/brcicnb7.png')  center/contain no-repeat; }
.icn8  { background: url('../images/brcicnb8.png')  center/contain no-repeat; }
.icn9  { background: url('../images/brcicnb9.png')  center/contain no-repeat; }
.icn10 { background: url('../images/brcicnb10.png') center/contain no-repeat; }
.icn11 { background: url('../images/brcicnb11.png') center/contain no-repeat; }
.icn12 { background: url('../images/brcicnb12.png') center/contain no-repeat; }
.sbrcicnb1  { background: url('../images/sbrcicnb1.png')  center/contain no-repeat; }
.sbrcicnb2  { background: url('../images/sbrcicnb2.png')  center/contain no-repeat; }
.sbrcicnb3  { background: url('../images/sbrcicnb3.png')  center/contain no-repeat; }
.sbrcicnb4  { background: url('../images/sbrcicnb4.png')  center/contain no-repeat; }
.sbrcicnb5  { background: url('../images/sbrcicnb5.png')  center/contain no-repeat; }
.sbrcicnb6  { background: url('../images/sbrcicnb6.png')  center/contain no-repeat; }
.sbrcicnb7  { background: url('../images/sbrcicnb7.png')  center/contain no-repeat; }
.sbrcicnb8  { background: url('../images/sbrcicnb8.png')  center/contain no-repeat; }
.sbrcicnb9  { background: url('../images/sbrcicnb9.png')  center/contain no-repeat; }
.sbrcicnb10 { background: url('../images/sbrcicnb10.png') center/contain no-repeat; }
.sbrcicnb11 { background: url('../images/sbrcicnb11.png') center/contain no-repeat; }
.sbrcicnb12 { background: url('../images/sbrcicnb12.png') center/contain no-repeat; }

/* ---------- Layout shell ---------- */
.syf { max-width: var(--maxw); margin: 0 auto; padding: var(--space-4); position: relative; }
@media (min-width: 768px) { .syf { padding: var(--space-6); } }
.ortl { width: 100%; max-width: 100%; margin: 0 auto; position: relative; }
.t { clear: both; }

.icsyfds { display: grid; grid-template-columns: 1fr; gap: var(--space-8); align-items: start; }
@media (min-width: 950px) { .icsyfds { grid-template-columns: minmax(0, 1fr) 320px; } }
.icsyfds > .t { display: none; }

.slblm { width: 100% !important; min-width: 0; float: none !important; }
.sgblm { width: 100% !important; float: none !important; margin-top: 0 !important; }

/* ---------- Breadcrumb ---------- */
.ustlnklr { font-family: var(--font-body); font-size: 0.98rem; line-height: 1.7; color: var(--text-muted); margin-top: var(--space-2); margin-bottom: var(--space-2); }
.ustlnklr a { color: var(--text-muted); text-decoration: none; }
.ustlnklr a:hover { color: var(--accent-gold); }
.ustlnklr span { color: var(--text-muted); }

/* ---------- Headings ---------- */
.icsyfbslk { font-family: var(--font-display); font-size: clamp(1.7rem, 4.4vw, 2.5rem); font-weight: 700; color: var(--text-primary); margin-top: var(--space-6); text-shadow: 0 0 30px rgba(109,91,255,0.3); line-height: 1.22; letter-spacing: 0.3px; }
.icsyfabslk { font-family: var(--font-body); font-weight: 400; font-size: 1.05rem; color: var(--text-muted); margin-top: var(--space-3); line-height: 1.6; }
.icsyftrh { font-size: 1rem; font-weight: 600; color: var(--accent-gold-soft); margin-top: var(--space-2); letter-spacing: 0.5px; }
.yzort { text-align: center; }

/* ---------- Period tabs (gunluk/haftalik/aylik) ---------- */
.icsygha { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-6); }
.icsygha a {
  flex: 1 1 30%; min-width: 130px; text-align: center; padding: var(--space-4) var(--space-3);
  font-size: 0.98rem; font-weight: 600; color: var(--text-primary); background: var(--glass-surface);
  border: 1px solid var(--glass-border); border-radius: var(--radius-pill);
  transition: all 0.25s var(--ease-soft);
}
.icsygha a:hover { border-color: var(--glass-border-hover); color: var(--accent-gold); }
.icsygha a.scl { background: linear-gradient(135deg, var(--brand-violet), var(--brand-violet-deep)); color: #fff; border-color: transparent; }
.icsygha .t { display: none; }

/* ---------- Long-form reading text ---------- */
.icsyfnrmlyz, .boicyzlr {
  font-family: var(--font-body); font-size: calc(1.14rem * var(--read-scale, 1)); line-height: 1.85; color: var(--text-primary);
  margin-top: var(--space-6);
  background: var(--glass-surface); border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg); padding: var(--space-6);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.icsyfnrmlyz p, .boicyzlr p { margin: 0 0 var(--space-8); }
.icsyfnrmlyz p:last-child, .boicyzlr p:last-child { margin-bottom: 0; }
.boicyzlr span, .boicyzlr strong,
.icsyfnrmlyz span, .icsyfnrmlyz strong { color: var(--accent-gold-soft); font-weight: 600; font-size: 1.04em; }

/* ---------- Yazi boyutu kontrolu (A- / A / A+) ---------- */
.fontscale { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-6); margin-bottom: var(--space-2); }
.fontscale-lbl { font-size: 0.85rem; color: var(--text-muted); margin-right: var(--space-1); }
.fontscale-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 1px;
  width: 46px; height: 46px; min-width: 46px; padding: 0; box-sizing: border-box;
  font-family: var(--font-body); color: var(--text-primary); cursor: pointer;
  background: var(--glass-surface); border: 1px solid var(--glass-border); border-radius: 50%;
  transition: all 0.2s var(--ease-soft); line-height: 1;
}
.fontscale-btn:hover { border-color: var(--glass-border-hover); color: var(--accent-gold); }
.fontscale-btn:active { transform: scale(0.94); }
.fontscale-btn .a { font-weight: 700; }
.fontscale-btn[data-act="dec"] .a { font-size: 0.82rem; }
.fontscale-btn[data-act="reset"] .a { font-size: 1.05rem; }
.fontscale-btn[data-act="inc"] .a { font-size: 1.28rem; }
.fontscale-btn .sym { font-size: 0.68rem; font-weight: 700; opacity: 0.85; align-self: flex-start; margin-top: 0.55em; }
.fontscale-btn.scl-active { background: linear-gradient(135deg, var(--brand-violet), var(--brand-violet-deep)); border-color: transparent; color: #fff; }

/* ozellik bolum basliklari */
.bobslk { font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; color: var(--accent-gold); margin-top: var(--space-8); margin-bottom: var(--space-2); padding-top: var(--space-4); border-top: 1px solid var(--glass-border); }
.bobslk + .boicyzlr { margin-top: var(--space-2); }

/* ---------- Burc grid (liste sayfalari) - masaustu 4 sutun (4-4-4) ---------- */
.icsyfbrclr { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); margin: var(--space-6) 0; }
@media (max-width: 900px) { .icsyfbrclr { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .icsyfbrclr { grid-template-columns: repeat(2, 1fr); } }
.icsyfbrclr > a { display: block; }
.icsyfbrclr > .t { display: none; }
.icbrclrtk {
  background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border: 1px solid var(--glass-border); border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-2); text-align: center;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: transform 0.3s var(--ease-soft), border-color 0.3s, box-shadow 0.3s;
}
.icbrclrtk:hover { transform: translateY(-4px); border-color: var(--glass-border-hover); box-shadow: 0 14px 30px rgba(0,0,0,0.45), var(--shadow-glow); }
.icbrclrtk .brctrh { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); }
.icbrclrtk .icn { width: 56px; height: 56px; margin: var(--space-3) auto; filter: var(--gold-tint); transition: transform 0.3s var(--ease-soft); }
.icbrclrtk:hover .icn { transform: scale(1.08); }
.icbrclrtk .brcism { font-family: var(--font-display); font-size: 1.05rem; color: var(--accent-gold); }

/* ---------- Sidebar modulleri ---------- */
.sgblm { display: flex; flex-direction: column; gap: var(--space-6); }
.tklmdl {
  background: var(--glass-surface); border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg); padding: var(--space-6);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
a > .tklmdl { transition: transform 0.3s var(--ease-soft), border-color 0.3s; }
a:hover > .tklmdl { transform: translateY(-3px); border-color: var(--glass-border-hover); }
.tklmdl .tkbslk { font-family: var(--font-display); font-size: 1.1rem; color: var(--accent-gold); margin-bottom: var(--space-2); }
.tklmdl .tklnk { display: flex; align-items: center; gap: var(--space-3); font-size: 0.95rem; color: var(--text-primary); padding: var(--space-2) 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
.tklmdl .tklnk:hover { color: var(--accent-gold); }
.tklmdl .tklnk .sicn { width: 28px; height: 28px; flex-shrink: 0; filter: var(--gold-tint); }
.tklmdl .tklnk .hrspyz { line-height: 1.3; }
.tklmdl .mdlrsm { border-radius: var(--radius-md); overflow: hidden; margin-bottom: var(--space-3); }
.tklmdl .mdlrsm img { width: 100%; display: block; opacity: 0.92; }
.tklmdl .mdlbslk { font-family: var(--font-display); font-size: 1.1rem; color: var(--accent-gold); margin-top: var(--space-2); }
.tklmdl .mdlyz { font-size: 0.9rem; color: var(--text-muted); margin-top: var(--space-1); line-height: 1.5; }

/* ---------- Burc uyumu secici ---------- */
.uyumlrds { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: var(--space-6); margin: var(--space-8) auto; text-align: center; }
.uymblmlr { width: 220px; max-width: 100%; position: relative; }
.uymblmlr .bslk { font-family: var(--font-display); font-size: 1.15rem; color: var(--text-primary); margin-bottom: var(--space-4); }
.uymblmlr .tkbrc { width: 178px; height: 180px; margin: var(--space-4) auto 0; position: relative; }
.uymblmlr .tkbrc .brclrtk {
  width: 170px; height: 170px; position: absolute; left: 0; top: 0; display: none;
  border-radius: var(--radius-lg); border: 1px solid var(--glass-border);
  background: linear-gradient(135deg, rgba(109,91,255,0.25), rgba(30,27,75,0.6));
  box-shadow: 0 0 30px rgba(0,0,0,0.5), var(--shadow-glow); backdrop-filter: blur(8px);
}
.uymblmlr .tkbrc .brclrtk.dblck { display: block; }
.uymblmlr .tkbrc .brclrtk .kbtnicn { width: 60%; height: 60px; margin: 50px auto 0; filter: var(--gold-tint); }
.uymblmlr .tkbrc .brclrtk .tarihyz { position: absolute; top: 12px; left: 1%; width: 98%; font-size: 0.8rem; color: var(--text-muted); }
.uymblmlr .tkbrc .brclrtk .burcyz { position: absolute; bottom: 12px; left: 1%; width: 98%; font-family: var(--font-display); font-size: 1.05rem; color: var(--accent-gold); }
.uyumort { width: 120px; opacity: 0.55; margin: var(--space-12) var(--space-6) 0; align-self: center; filter: var(--gold-tint); }
.uyumort img { width: 100%; display: block; }
.slctbx { width: 200px; max-width: 100%; margin: var(--space-6) auto 0; }
/* .slctbx select / .glass-select stilleri cosmic.css'te tek kaynak olarak tanimli (ozel kozmik select). */
.uymgstr {
  display: block; width: 90%; max-width: 320px; margin: var(--space-8) auto 0;
  padding: var(--space-3) var(--space-6); text-align: center; font-weight: 600; letter-spacing: 0.5px;
  color: #fff; background: linear-gradient(135deg, var(--brand-violet), var(--brand-violet-deep));
  border-radius: var(--radius-pill); box-shadow: var(--shadow-glow); transition: all 0.3s var(--ease-soft);
}
.uymgstr:hover { transform: translateY(-2px); box-shadow: 0 0 34px rgba(109,91,255,0.5); }

/* ---------- Tarot kartlari ---------- */
.trtkrtlrds { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--space-6); margin-top: var(--space-8); padding-bottom: var(--space-12); width: auto; }
.trtkrtlrds > a { display: block; }
.trtkrtlrds > .t { display: none; }
.trtkrtlrtk { width: 100%; height: auto; padding: 0; display: block; }
.trtkrtlrtk .trtkrtrsm { width: 100%; position: relative; }
.trtkrtlrtk .trtkrtrsm .front, .trtkrtlrtk .trtkrtrsm .back { border-radius: var(--radius-sm); box-shadow: 0 6px 20px rgba(0,0,0,0.6); overflow: hidden; }
.trtkrtlrtk .trtkrtrsm img { width: 100%; display: block; }
.trtkrtlrtk .trtkrtyz { font-family: var(--font-display); font-size: 0.95rem; color: var(--accent-gold); text-align: center; margin-top: var(--space-3); }

/* Varsayilan (dokunmatik / hover yok): kart onunu (.front blue back) gizle, gercek karti goster */
.trtkrtlrtk .trtkrtrsm .front { display: none; }
.trtkrtlrtk .trtkrtrsm .back { position: static; transform: none; }

/* Hover destekli cihazlar: 3D flip (mavi arka -> hover'da gercek kart) */
@media (hover: hover) {
  .trtkrtlrtk { perspective: 1000px; }
  .trtkrtlrtk .trtkrtrsm { transition: transform 0.7s var(--ease-soft); transform-style: preserve-3d; }
  .trtkrtlrtk .trtkrtrsm .front { display: block; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
  .trtkrtlrtk .trtkrtrsm .back { position: absolute; top: 0; left: 0; width: 100%; transform: rotateY(180deg); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
  a:hover .trtkrtlrtk .trtkrtrsm { transform: rotateY(180deg); }
}
@media (hover: hover) and (prefers-reduced-motion: reduce) {
  .trtkrtlrtk .trtkrtrsm { transition: none; }
}

/* Tarot tek kart */
.tkkrtyz { font-family: var(--font-body); font-size: calc(1.14rem * var(--read-scale, 1)); line-height: 1.85; color: var(--text-primary); margin: var(--space-6) 0; background: var(--glass-surface); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); padding: var(--space-6); }
.trtkrttk { width: 180px; max-width: 45%; float: left; margin: 0 var(--space-6) var(--space-4) 0; border-radius: var(--radius-md); overflow: hidden; box-shadow: 0 6px 22px rgba(0,0,0,0.55); }
.trtkrttk img { width: 100%; display: block; }

/* ============================================================
   RTL (Arapça / dir="rtl") - layout cogunlukla grid/flex ile
   otomatik mirror olur; asagidaki birkac yon-bagimli kural elle.
   ============================================================ */
[dir="rtl"] .icsyfnrmlyz,
[dir="rtl"] .boicyzlr,
[dir="rtl"] .tkkrtyz { text-align: right; }
[dir="rtl"] .fontscale-lbl { margin-right: 0; margin-left: var(--space-1); }
[dir="rtl"] .trtkrttk { float: right; margin: 0 0 var(--space-4) var(--space-6); }
[dir="rtl"] .ustlnklr { text-align: right; }

/* Uyum hub: tum kombinasyon linkleri (SEO icin crawlable grid) */
/* .uyumlrds flex container oldugundan tam-satir flex item olarak yerlesir */
.uyum-tum-linkler { flex: 1 0 100%; width: 100%; margin-top: var(--space-10); clear: both; text-align: left; }
.uyum-link-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--space-2);
  margin-top: var(--space-4);
}
.uyum-link-grid a {
  display: block;
  padding: var(--space-2) var(--space-3);
  background: var(--glass-surface-2);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 0.9rem;
  text-decoration: none;
  transition: color .2s ease, border-color .2s ease;
}
.uyum-link-grid a:hover {
  color: var(--accent-gold);
  border-color: var(--accent-gold-soft);
}