/* ============================================================
   SOULIVE — RİTÜEL KÖŞESİ (mini-araçlar)
   Ana tasarım sistemini (style.css :root) kullanır.
   ============================================================ */

.rituel-hero { text-align: center; padding: clamp(56px, 8vw, 100px) 0 var(--s-12); position: relative; overflow: hidden; }
.rituel-hero .container-dar { position: relative; z-index: 2; }
.rituel-hero h1 { margin-bottom: var(--s-4); }
.rituel-hero .lead { max-width: 600px; margin: 0 auto; }

/* Demet başlıkları */
.demet { padding: var(--s-12) 0; }
.demet + .demet { border-top: 1px solid var(--border); }
.demet-head { text-align: center; margin-bottom: var(--s-8); }
.demet-head .demet-ikon { font-size: 30px; display: block; margin-bottom: 8px; }
.demet-head h2 { font-size: clamp(26px, 3vw, 34px); }
.demet-head p { color: var(--muted); max-width: 520px; margin: 8px auto 0; }

/* Araç ızgarası + kart kabuğu */
.arac-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--s-6); }
.arac {
  background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: var(--s-6); display: flex; flex-direction: column; min-height: 300px;
  position: relative; overflow: hidden;
  transition: box-shadow .3s, border-color .3s, transform .3s;
}
.arac:hover { box-shadow: var(--shadow); border-color: var(--gold-soft); }
.arac.genis { grid-column: 1 / -1; }
.arac-baslik { font-family: var(--f-serif); font-size: 20px; font-weight: 600; margin-bottom: 4px; color: var(--ink); }
.arac-alt { font-size: 13.5px; color: var(--muted); margin-bottom: var(--s-4); }
.arac-govde { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: var(--s-4); min-height: 180px; }
.arac-ipucu { font-size: 12.5px; color: var(--muted); margin-top: var(--s-4); text-align: center; }
.arac-btn {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 11px 22px; border-radius: 999px; border: 1px solid var(--accent);
  background: var(--accent); color: #fff; font-family: var(--f-sans); font-size: 14.5px; font-weight: 600;
  transition: background .2s, transform .15s;
}
.arac-btn:hover { background: var(--accent-deep); }
.arac-btn:active { transform: scale(.97); }
.arac-btn.ghost { background: transparent; color: var(--accent-deep); }
.arac-btn.ghost:hover { background: var(--accent-soft); }
.arac-btn.mini { padding: 7px 14px; font-size: 13px; }

/* ---- Bugünün Kartı (tarot flip) ---- */
.kart-sahne { perspective: 1200px; width: 150px; height: 250px; cursor: pointer; }
.kart-ic { position: relative; width: 100%; height: 100%; transition: transform .8s cubic-bezier(.2,.8,.3,1); transform-style: preserve-3d; }
.kart-sahne.acik .kart-ic { transform: rotateY(180deg); }
.kart-yuz, .kart-arka {
  position: absolute; inset: 0; border-radius: 12px; backface-visibility: hidden;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  box-shadow: 0 14px 34px -14px rgba(46,42,36,.4);
}
.kart-arka {
  background: linear-gradient(160deg, #3E4A5A, #2A312B);
  border: 1px solid var(--gold);
}
.kart-arka::after {
  content: ''; position: absolute; inset: 8px; border: 1px solid rgba(176,138,62,.5); border-radius: 8px;
}
.kart-arka .desen { color: var(--gold); width: 54px; height: 54px; opacity: .85; }
.kart-yuz {
  transform: rotateY(180deg);
  background: linear-gradient(165deg, #FBF8F2, #F0E9DA);
  border: 1px solid var(--gold); flex-direction: column; padding: 14px; text-align: center;
}
.kart-yuz .kart-no { position: absolute; top: 8px; left: 12px; font-family: var(--f-serif); font-size: 13px; color: var(--gold); }
.kart-yuz .kart-sembol { font-family: var(--f-serif); font-size: 40px; color: var(--accent-deep); margin-bottom: 6px; }
.kart-yuz .kart-ad { font-family: var(--f-serif); font-size: 20px; font-weight: 600; color: var(--ink); line-height: 1.15; }
.kart-mesaj { max-width: 380px; font-size: 15px; color: var(--ink-2); line-height: 1.6; }
.kart-mesaj.gizli { display: none; }

/* ---- Ay Evresi ---- */
.ay-gorsel { width: 130px; height: 130px; }
.ay-ad { font-family: var(--f-serif); font-size: 22px; color: var(--ink); }
.ay-rituel { font-size: 15px; color: var(--ink-2); max-width: 340px; }

/* ---- Oracle / kelime ---- */
.oracle-kelime { font-family: var(--f-serif); font-style: italic; font-size: clamp(30px, 5vw, 46px); color: var(--accent-deep); letter-spacing: -.01em; min-height: 1.2em; }
.oracle-tefekkur { font-size: 15px; color: var(--ink-2); max-width: 360px; line-height: 1.6; }

/* ---- Kristal ---- */
.kristal-gorsel { width: 90px; height: 100px; filter: drop-shadow(0 8px 18px rgba(46,42,36,.18)); }
.kristal-ad { font-family: var(--f-serif); font-size: 21px; color: var(--ink); }
.kristal-niyet { font-size: 14.5px; color: var(--ink-2); max-width: 320px; }

/* ---- Nefes (mod'lu) + Renk-Nefes ---- */
.nefes-alan { position: relative; width: 230px; height: 230px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: background 1.6s ease; }
.nefes-halka { position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--gold); opacity: .28; }
.nefes-halka.r2 { inset: -18px; opacity: .16; }
.nefes-daire {
  width: 150px; height: 150px; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #A9C0A2, var(--accent) 65%, var(--accent-deep));
  display: flex; align-items: center; justify-content: center; color: #fff;
  font-family: var(--f-serif); font-size: 19px; box-shadow: var(--shadow);
  transition: transform 4s ease-in-out;
}
.nefes-modlar { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: var(--s-2); }
.nefes-mod {
  font-size: 12.5px; padding: 6px 13px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border); background: #fff; color: var(--ink-2); transition: all .2s;
}
.nefes-mod.aktif { background: var(--accent); border-color: var(--accent); color: #fff; }
.nefes-sayac { font-size: 13px; color: var(--muted); min-height: 1.2em; }
.nefes-sayac b { color: var(--accent-deep); font-variant-numeric: tabular-nums; }

/* renk-nefes çakra noktaları */
.renk-noktalar { display: flex; gap: 8px; justify-content: center; margin-top: var(--s-2); }
.renk-nokta { width: 22px; height: 22px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; transition: transform .15s, border-color .2s; }
.renk-nokta:hover { transform: scale(1.15); }
.renk-nokta.aktif { border-color: var(--ink); }

/* ---- 5-4-3-2-1 ---- */
.sabit-adim { font-size: 17px; color: var(--ink); max-width: 320px; }
.sabit-adim b { color: var(--accent-deep); font-size: 26px; font-family: var(--f-serif); }
.sabit-noktalar { display: flex; gap: 7px; }
.sabit-nokta { width: 10px; height: 10px; border-radius: 50%; background: var(--border); transition: background .3s; }
.sabit-nokta.dolu { background: var(--gold); }

/* ---- Beden taraması ---- */
.beden-gorsel { width: 90px; height: 200px; }
.beden-durak { font-size: 15.5px; color: var(--ink-2); max-width: 320px; min-height: 2.4em; }

/* ---- Sessizlik molası ---- */
.sessiz-halka { width: 150px; height: 150px; transform: rotate(-90deg); }
.sessiz-halka circle { fill: none; stroke-width: 6; }
.sessiz-halka .iz { stroke: var(--border); }
.sessiz-halka .ilerleme { stroke: var(--gold); stroke-linecap: round; transition: stroke-dashoffset 1s linear; }
.sessiz-kalan { font-family: var(--f-serif); font-size: 30px; color: var(--accent-deep); font-variant-numeric: tabular-nums; }

/* ---- Niyet tohumu / bahçe ---- */
.bahce-toprak { display: flex; align-items: flex-end; justify-content: center; gap: 10px; min-height: 90px; flex-wrap: wrap; }
.filiz { font-size: 26px; transition: transform .4s; transform-origin: bottom; }
.tohum-input, .rituel-input {
  width: 100%; max-width: 340px; padding: 10px 14px; font-size: 14.5px; font-family: var(--f-sans);
  border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg);
}
.tohum-input:focus, .rituel-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* ---- Minnet üçlüsü ---- */
.minnet-isiklar { display: flex; gap: 18px; align-items: center; justify-content: center; min-height: 50px; }
.minnet-isik { width: 14px; height: 14px; border-radius: 50%; background: var(--border); position: relative; transition: background .4s, box-shadow .4s; }
.minnet-isik.yandi { background: var(--gold); box-shadow: 0 0 14px 2px rgba(176,138,62,.55); }

/* ---- Niyet taşı (su) ---- */
.su-yuzey { width: 100%; max-width: 340px; height: 150px; border-radius: var(--r-lg); background: radial-gradient(circle at 50% 40%, #2b4a52, #16303a); position: relative; overflow: hidden; cursor: pointer; }
.su-halka { position: absolute; border: 2px solid rgba(200,230,235,.5); border-radius: 50%; transform: translate(-50%,-50%); pointer-events: none; }

/* ---- Bugünün rengi (mood) ---- */
.mood-noktalar { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.mood-nokta { width: 30px; height: 30px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; transition: transform .15s; }
.mood-nokta:hover { transform: scale(1.15); }
.mood-cumle { font-family: var(--f-serif); font-style: italic; font-size: 18px; color: var(--ink); min-height: 1.4em; }
.mood-serit { display: flex; gap: 5px; justify-content: center; margin-top: var(--s-3); }
.mood-serit span { width: 16px; height: 16px; border-radius: 4px; background: var(--border); }

/* ---- Evet/Hayır ---- */
.eh-cevap { font-family: var(--f-serif); font-size: 34px; color: var(--accent-deep); min-height: 1.2em; }
.eh-not { font-size: 14.5px; color: var(--ink-2); max-width: 300px; }

/* ---- Tibet kâsesi ---- */
.kase-gorsel { width: 150px; height: 110px; cursor: grab; touch-action: none; }
.kase-gorsel:active { cursor: grabbing; }
.kase-dalga { position: absolute; border: 1px solid rgba(176,138,62,.4); border-radius: 50%; transform: translate(-50%,-50%); pointer-events: none; }

/* ---- Çekmece (journal) ---- */
.cekmece-soru { font-family: var(--f-serif); font-size: 18px; color: var(--ink); max-width: 340px; }
.cekmece-alan { width: 100%; max-width: 360px; min-height: 90px; padding: 12px 14px; font-size: 14.5px; font-family: var(--f-sans); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg); resize: vertical; }
.cekmece-alan:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* ---- Kolektif nefes sayacı rozet ---- */
.kolektif-rozet {
  display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--accent-deep);
  background: var(--accent-soft); border-radius: 999px; padding: 6px 14px; margin-top: var(--s-2);
}
.kolektif-rozet .nokta { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: nabiz 2s ease-in-out infinite; }
.kolektif-rozet b { font-variant-numeric: tabular-nums; }
@keyframes nabiz { 0%,100% { opacity: .4; transform: scale(1); } 50% { opacity: 1; transform: scale(1.4); } }

/* ---- Günün ritüeli bandı (ana sayfa) ---- */
.gunun-band { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-6); }
.gunun-kutu { background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s-6); text-align: center; }
.gunun-kutu .k-ust { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-bottom: var(--s-3); }

/* ---- Giriş çağrısı ---- */
.rituel-giris-cagri { margin-top: var(--s-6); font-size: 14.5px; color: var(--ink-2); background: var(--accent-soft); border: 1px solid #D8E4D4; border-radius: 999px; padding: 10px 20px; display: inline-block; }

/* ---- Toast (puan/rozet bildirimi) ---- */
#rituel-toast { position: fixed; right: 20px; bottom: 20px; z-index: 200; display: flex; flex-direction: column; gap: 10px; align-items: flex-end; pointer-events: none; }
.rituel-toast-kart {
  background: var(--bg-dark); color: #F6F3EA; border-radius: 14px; padding: 12px 18px;
  box-shadow: var(--shadow); display: flex; align-items: center; gap: 12px; max-width: 320px;
  transform: translateY(16px) scale(.96); opacity: 0; transition: transform .35s cubic-bezier(.2,.8,.3,1), opacity .35s;
  pointer-events: auto; font-size: 14px; border: 1px solid rgba(176,138,62,.3);
}
.rituel-toast-kart.gor { transform: none; opacity: 1; }
.rituel-toast-kart b { color: #fff; display: block; }
.rituel-toast-kart span { display: block; color: rgba(237,233,223,.75); font-size: 13px; }
.rituel-toast-kart a { color: var(--gold); }
.rituel-toast-kart .puan-art { font-family: var(--f-serif); font-size: 22px; color: var(--gold); font-weight: 600; }
.rituel-toast-kart .rozet-toast { font-size: 30px; }

/* ---- Rozet çipleri ---- */
.rozet { display: inline-flex; align-items: center; gap: 7px; background: #fff; border: 1px solid var(--gold-soft); border-radius: 999px; padding: 6px 14px 6px 8px; font-size: 13px; color: var(--ink-2); }
.rozet .rozet-emoji { font-size: 17px; }
.rozet .rozet-ad { font-weight: 600; }
.rozet.buyuk { padding: 10px 18px 10px 12px; font-size: 15px; background: var(--accent-soft); }
.rozet.buyuk .rozet-emoji { font-size: 22px; }
.rozet-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.rozet.kilitli { opacity: .4; filter: grayscale(1); }

/* ---- Nav puan rozeti ---- */
.nav-puan { display: inline-flex; align-items: center; gap: 5px; font-size: 13px !important; font-weight: 600 !important; color: var(--gold) !important; background: var(--gold-soft); padding: 3px 10px; border-radius: 999px; }

/* ---- Profil: seviye & özet ---- */
.puan-panel { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: var(--s-4); margin-bottom: var(--s-8); }
.puan-kutu { background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s-6); text-align: center; }
.puan-kutu .buyuk-sayi { font-family: var(--f-serif); font-size: 40px; font-weight: 600; color: var(--accent-deep); line-height: 1; font-variant-numeric: tabular-nums; }
.puan-kutu .etiket { font-size: 12.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; margin-top: 8px; }
.seviye-bar { height: 8px; background: var(--bg-2); border-radius: 999px; overflow: hidden; margin-top: 12px; }
.seviye-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--gold)); border-radius: 999px; transition: width .8s; }
.ozet-kart { background: linear-gradient(180deg, #FDFCF8, #fff); border: 1px solid #D8E4D4; border-radius: var(--r-lg); padding: var(--s-8); margin-bottom: var(--s-8); }
.ozet-liste { display: flex; flex-wrap: wrap; gap: 10px; margin: var(--s-4) 0; }
.ozet-cip { display: inline-flex; align-items: center; gap: 7px; background: #fff; border: 1px solid var(--border); border-radius: 999px; padding: 7px 15px; font-size: 14px; }
.ozet-cip b { color: var(--accent-deep); }
.ozet-yorum { font-family: var(--f-serif); font-size: 19px; font-style: italic; line-height: 1.6; color: var(--ink); border-left: 2px solid var(--gold); padding-left: var(--s-4); margin-top: var(--s-4); }

/* ---- Sıralama (leaderboard) ---- */
.sira-satir { display: flex; align-items: center; gap: var(--s-4); background: #fff; border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--s-3) var(--s-6); margin-bottom: 8px; }
.sira-satir.ben { border-color: var(--gold); background: var(--accent-soft); }
.sira-no { font-family: var(--f-serif); font-size: 22px; font-weight: 600; color: var(--muted); width: 42px; text-align: center; flex: 0 0 42px; }
.sira-satir:nth-child(1) .sira-no, .sira-no.altin { color: var(--gold); }
.sira-ad { flex: 1; min-width: 0; }
.sira-ad .isim { font-weight: 600; color: var(--ink); }
.sira-ad .rozetcik { font-size: 12.5px; color: var(--muted); }
.sira-puan { font-family: var(--f-serif); font-size: 21px; font-weight: 600; color: var(--accent-deep); font-variant-numeric: tabular-nums; }
.sira-sekme { display: inline-flex; gap: 6px; margin-bottom: var(--s-6); }
.sira-sekme a { font-size: 14px; padding: 8px 18px; border-radius: 999px; border: 1px solid var(--border); background: #fff; color: var(--ink-2); }
.sira-sekme a.aktif { background: var(--accent); border-color: var(--accent); color: #fff; }

@media (max-width: 720px) {
  .gunun-band { grid-template-columns: 1fr; }
  .arac-grid { grid-template-columns: 1fr; }
  #rituel-toast { right: 12px; left: 12px; bottom: 12px; align-items: stretch; }
  .rituel-toast-kart { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .kart-ic, .nefes-daire, .nefes-alan { transition: none; }
}