/* 04.11 akşam (Onur): Tarot'un tabanı uzay DEĞİL: gece mavisi kadife + altın varak baskı desen (Onur anketi 04.11): hafif açılı seçildi; 05.11 iki lüks seçenek: gorsel/taban_A.webp (ılık ışık), taban_B.webp (ay ışığı), renkler gece mavisi (asıl palet); gök (three.js) kaldırıldı. Figür: siyah kedi (gorsel/kedi/).
   Yazsam mı? Tarot Kart Analizi (site/tarot, taslaklar/tarot/taslak_2'den üretime alındı 04.11). Görsel dil astroloji ile aynı:
   aynı gece, aynı yazı tipleri (Bricolage Grotesque arayüz, Literata okuma), altın yalnız çizgi ve odakta.
   Masa: açılımın gerçek geometrisi; kartlar okunaklı boyda, büyük açılımlarda kaydırılır. */
:root {
  --gece: #04050c; --mur: rgba(9, 11, 26, .78); --altin: #e8c77a; --altin-acik: #ffe29a; --krem: #f6efe0; --yazi: #e9e5f2; --sis: #a7b2d6;
  --cizgi: rgba(232, 199, 122, .28); --cizgi-zayif: rgba(232, 199, 122, .14);
  --ui: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif; --oku: "Literata", Georgia, "Times New Roman", serif;
  --alt: 66px; --ust: 54px; --kenar: 16px; --kus: 96px; --kusAlan: 112px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { background: var(--gece); color-scheme: dark; }
body { margin: 0; background: var(--gece); color: var(--yazi); font-family: var(--oku); font-size: 17px; line-height: 1.6; min-height: 100svh; overflow-x: hidden; -webkit-font-smoothing: antialiased; text-size-adjust: 100%; }
body.gok-yok { background: var(--gece) var(--neb, none) center / cover fixed; }
html.tabakaAcik, html.tabakaAcik body { overflow: hidden; }
canvas#gokGL { position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }
a { color: inherit; }
button, select, input, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--altin-acik); outline-offset: 3px; border-radius: 6px; }
::selection { background: rgba(232, 199, 122, .4); }
.gizli { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }

/* ---------- üst ve alt çubuk ---------- */
.ust { position: fixed; top: 0; left: 0; right: 0; z-index: 20; display: flex; justify-content: space-between; align-items: center; padding: calc(env(safe-area-inset-top) + 14px) 20px 22px; background: linear-gradient(rgba(3, 4, 11, .97) 72%, rgba(3, 4, 11, 0)); pointer-events: none; }
.marka { pointer-events: auto; text-decoration: none; font: 650 16px var(--ui); letter-spacing: -.01em; color: var(--krem); }
.marka span { font-weight: 400; color: var(--sis); margin-left: 4px; }
.ust { justify-content: flex-start; gap: 6px; }
.geriSite { pointer-events: auto; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin-left: -8px; border-radius: 50%; color: var(--krem); }
.geriSite svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.geriSite:hover, .geriSite:focus-visible { background: rgba(255, 255, 255, .08); }
html[data-gomulu="1"] .geriSite { display: none; }
.alt { position: fixed; bottom: 0; left: 0; right: 0; z-index: 30; display: flex; justify-content: center; padding: 14px 8px calc(env(safe-area-inset-bottom) + 6px); background: linear-gradient(to top, rgba(3, 4, 11, .97) 55%, rgba(3, 4, 11, 0)); }
.alt a { flex: 1; max-width: 160px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px 6px; text-decoration: none; font: 500 12.5px var(--ui); color: var(--sis); position: relative; }
.alt a svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.alt a.aktif { color: var(--altin-acik); }
.alt a.aktif::before { content: ""; position: absolute; top: -2px; left: 50%; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--altin-acik); box-shadow: 0 0 10px 2px rgba(255, 226, 154, .8); }
#sahne { position: relative; z-index: 5; outline: none; padding-bottom: calc(var(--alt) + 30px + env(safe-area-inset-bottom)); }
#bildirim { position: fixed; left: 50%; bottom: calc(var(--alt) + 24px + env(safe-area-inset-bottom)); transform: translate(-50%, 12px); z-index: 90; width: max-content; max-width: min(92vw, 420px); padding: 12px 18px; border-radius: 12px; background: rgba(14, 16, 34, .97); border: 1px solid var(--cizgi); font: 500 14.5px/1.4 var(--ui); color: var(--krem); opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; text-align: center; }
#bildirim.goster { opacity: 1; transform: translate(-50%, 0); }

/* ---------- yazı öğeleri ---------- */
h1, h2, h3 { font-family: var(--ui); color: var(--krem); margin: 0; text-wrap: balance; }
.soluk { color: var(--sis); }
.not { font: 400 14.5px/1.55 var(--ui); color: #c4cce6; margin: 18px 0 0; }
.not a { color: var(--altin-acik); text-decoration-style: dotted; text-underline-offset: 4px; }
.ayna { font: italic 400 14px/1.5 var(--oku); color: var(--sis); margin: 28px 0 0 !important; }
.yasalNot { font: 400 12px/1.5 var(--ui); color: var(--sis); opacity: .85; margin: 14px 0 0 !important; max-width: 62ch; }
.etiket { display: block; font: 600 13px var(--ui); color: var(--sis); margin: 0 0 8px; letter-spacing: .01em; }
.metinDugme { background: none; border: 0; padding: 10px 0; font: 500 14.5px var(--ui); color: var(--altin); text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 4px; cursor: pointer; text-align: left; }
.metinDugme:hover { color: var(--altin-acik); }
.dugme { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 13px 24px; border-radius: 999px; border: 1px solid var(--altin); background: transparent; color: var(--altin-acik); font: 600 15.5px/1.25 var(--ui); text-decoration: none; cursor: pointer; text-align: center; transition: background .2s, color .2s, box-shadow .2s, opacity .2s; }
.dugme:hover { background: rgba(232, 199, 122, .14); }
.dugme.dolu { background: linear-gradient(180deg, #f3d791, #dcb45f); color: #1a1405; border-color: transparent; box-shadow: 0 6px 28px -8px rgba(232, 199, 122, .7); }
.dugme.dolu:hover { background: linear-gradient(180deg, #ffe7a9, #e6bd6a); }
.dugme:disabled { opacity: .42; cursor: default; box-shadow: none; }
.kilitSimge { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; flex: none; vertical-align: -3px; margin-right: 8px; }
.hata { color: #ffb4a2; font: 500 14.5px var(--ui); margin: 10px 0 0; }
.eylem { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; margin: 20px 0 4px; }
.say { font: 500 13px var(--ui); color: var(--sis); margin-left: 6px; white-space: nowrap; }
.cip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--cizgi); background: rgba(9, 11, 26, .55); color: var(--yazi); font: 500 14px/1.2 var(--ui); cursor: pointer; transition: border-color .2s, background .2s, color .2s; }
.cip:hover { border-color: var(--altin); }
.cip span { color: var(--sis); font-size: 12.5px; }
.cip.secili, .cip:has(input:checked) { border-color: var(--altin); background: rgba(232, 199, 122, .16); color: var(--altin-acik); }
.cip input { position: absolute; opacity: 0; pointer-events: none; }
.cip:has(input:focus-visible) { outline: 2px solid var(--altin-acik); outline-offset: 2px; }
.niyetler .cip span, .hazirlar .cip { color: inherit; font-size: 14px; }
.belir { opacity: 0; transform: translateY(10px); transition: opacity .55s ease, transform .55s cubic-bezier(.2, .8, .2, 1); }
.belir.gel { opacity: 1; transform: none; }

/* ---------- ekran düzeni ---------- */
.ekran { position: relative; padding: calc(env(safe-area-inset-top) + var(--ust)) var(--kenar) 0; max-width: 100%; }
.ekran.tek { max-width: 720px; margin: 0 auto; }
.ekran.genis { max-width: 1180px; margin: 0 auto; }
.bas { display: grid; grid-template-columns: minmax(0, 1fr) var(--kusAlan); column-gap: 6px; align-items: start; text-shadow: 0 2px 22px rgba(0, 0, 8, .9), 0 0 3px rgba(0, 0, 8, .6); }
.basMetin { padding-top: 8px; min-width: 0; }
.ustYazi { margin: 0 0 6px; font: 500 13.5px var(--ui); color: var(--sis); }
.bas h1 { font: 650 clamp(26px, 7vw, 40px)/1.1 var(--ui); letter-spacing: -.022em; }
.soruBas h1, .katalogEkran .bas h1 .soruAlinti { font: italic 400 clamp(19px, 5.2vw, 25px)/1.38 var(--oku); letter-spacing: 0; }
.soruAlinti { font-style: italic; }
.altYazi { margin: 10px 0 0; font: 400 15.5px/1.55 var(--oku); color: #d6dbee; max-width: 40ch; }
.kusYeri { position: relative; height: calc(var(--kus) * 1.04 + 54px); }

/* ---------- baykuş ---------- */
.baykus { position: absolute; inset: 0; }
.kus { position: absolute; right: 2px; top: 0; width: var(--kus); aspect-ratio: 1; cursor: pointer; transform-origin: 50% 90%; z-index: 1; }
.kus .ifade { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; filter: drop-shadow(0 8px 18px rgba(0, 0, 10, .55)); transform-origin: 50% 100%; }
.kus .ifade.b { opacity: 0; }
.kus.gecis .ifade.b { opacity: 1; transition: opacity .24s ease; }
.dal { position: absolute; right: calc(-1 * var(--kenar)); top: calc(var(--kus) * .76); width: calc(var(--kus) + 30px + var(--kenar)); height: auto; z-index: 3; pointer-events: none; filter: drop-shadow(0 6px 10px rgba(0, 0, 8, .6)); }
.soz { position: absolute; right: 0; top: calc(var(--kus) * 1.04); width: 100%; margin: 0; text-align: right; font: italic 400 13px/1.36 var(--oku); color: var(--krem); opacity: .92; }
.soz.gel { animation: sozGel .5s ease; }
@keyframes sozGel { from { opacity: 0; transform: translateY(4px); } to { opacity: .92; transform: none; } }

/* ---------- 1. soru ---------- */
.soruForm { margin-top: 18px; }
.soruForm textarea, .secenekForm input, .takipForm input { width: 100%; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--cizgi); background: rgba(6, 8, 20, .82); color: var(--krem); font: 400 17px/1.5 var(--oku); resize: vertical; min-height: 54px; }
.soruForm textarea { min-height: 104px; }
.soruForm textarea:focus, .secenekForm input:focus, .takipForm input:focus { outline: none; border-color: var(--altin); box-shadow: 0 0 0 3px rgba(232, 199, 122, .18); }
::placeholder { color: rgba(167, 178, 214, .62); }
.niyetler { border: 0; padding: 0; margin: 20px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.niyetler legend { width: 100%; padding: 0; }
.seciliAcilim { margin: 18px 0 0; font: 400 15px/1.5 var(--ui); color: var(--krem); }
.gununKucuk { display: flex; flex-direction: column; gap: 2px; margin: 34px 0 0; padding: 14px 0 0; border-top: 1px solid var(--cizgi-zayif); text-decoration: none; max-width: 420px; }
.gk1 { font: 600 14.5px var(--ui); color: var(--altin); }
.gk2 { font: 400 13.5px var(--ui); color: var(--sis); }

/* ---------- 2. öneri ---------- */
.oneriler { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 14px; }
.oneri { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; padding: 16px; border-radius: 18px; border: 1px solid var(--cizgi-zayif); background: var(--mur); backdrop-filter: blur(6px); }
.oneri:first-child { border-color: var(--cizgi); }
.oneri h2 { font: 650 19px/1.25 var(--ui); }
.oneri p { margin: 6px 0 0; font: 400 15.5px/1.55 var(--oku); color: #dfe3f3; }
.oneri .pozlar { font: 400 13px/1.5 var(--ui); color: var(--sis); }
.oneri .dugme { margin-top: 12px; padding: 11px 20px; }
.sema rect { fill: rgba(232, 199, 122, .1); stroke: var(--altin); stroke-width: .9; }
.sema rect.yatik { fill: rgba(232, 199, 122, .22); }
.oneriSema { display: flex; align-items: flex-start; justify-content: center; padding-top: 2px; }

/* ---------- 3. katalog ---------- */
.katlar { display: flex; gap: 8px; margin: 18px calc(-1 * var(--kenar)) 0; padding: 2px var(--kenar) 6px; overflow-x: auto; scrollbar-width: none; }
.katlar::-webkit-scrollbar { display: none; }
.katlar .cip { flex: none; }
.katGrup { margin-top: 24px; }
.katGrup h2 { font: 650 15px var(--ui); color: var(--altin); margin: 0 0 10px; letter-spacing: .01em; }
.katGrup ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); }
.katKart { width: 100%; display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px; border-radius: 14px; border: 1px solid var(--cizgi-zayif); background: var(--mur); text-align: left; cursor: pointer; transition: border-color .2s, background .2s; }
.katKart:hover { border-color: var(--altin); background: rgba(20, 20, 40, .85); }
.kkMetin { display: flex; flex-wrap: wrap; align-items: baseline; min-width: 0; }
.kkMetin b { font: 650 15.5px/1.3 var(--ui); color: var(--krem); }
.kkNeden { flex-basis: 100%; margin-top: 4px; font: 400 13.5px/1.5 var(--ui); color: #c4cce6; }

/* ---------- 4. masa ---------- */
.masaEkran { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "bas" "sahne" "okuma"; }
.masaEkran > .bas { grid-area: bas; }
.masaEkran > .sahneAlan { grid-area: sahne; min-width: 0; }
.masaEkran > .okuma { grid-area: okuma; min-width: 0; }
.masaKap { position: relative; margin: 6px calc(-1 * var(--kenar)) 0; }
.masaUst { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 0 var(--kenar); min-height: 40px; }
.acilimAd { font: 600 14px var(--ui); color: var(--altin); }
.olcekDugme { padding: 8px 0; font-size: 13.5px; }
.masaKaydir { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: rgba(232, 199, 122, .35) transparent; }
.masaYer { position: relative; margin: 0 auto; }
.masaIc { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.masaIc::before { content: ""; position: absolute; inset: -6px; border-radius: 28px; background: radial-gradient(ellipse at center, rgba(40, 30, 70, .34), rgba(10, 8, 24, 0) 70%); pointer-events: none; }
.yuva { position: absolute; width: var(--kw); display: flex; flex-direction: column; align-items: center; gap: 4px; }
.yuvaKart { position: relative; display: block; width: var(--kw); height: var(--kh); padding: 0; border: 1px dashed rgba(232, 199, 122, .34); border-radius: 8px; background: rgba(8, 9, 22, .38); cursor: default; }
.yuva.yat .yuvaKart { transform: rotate(90deg); z-index: 2; }
.yuva.dolu .yuvaKart { border-color: transparent; background: none; }
.yuvaKart .no { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font: 600 15px var(--ui); color: rgba(232, 199, 122, .6); }
.yuva.dolu .no { left: 4px; top: 4px; transform: none; z-index: 3; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: rgba(4, 5, 12, .82); font-size: 11.5px; line-height: 20px; color: var(--altin-acik); text-align: center; }
.yuva.yat .no { transform: rotate(-90deg); }
.yuva.bekliyor .yuvaKart { border-style: solid; border-color: var(--altin-acik); box-shadow: 0 0 0 3px rgba(255, 226, 154, .16), 0 0 26px rgba(255, 226, 154, .35); animation: bekle 1.6s ease-in-out infinite; }
.yuva.siradaki .yuvaKart { cursor: pointer; }
.yuva.siradaki .kart3b { box-shadow: 0 0 0 2px var(--altin-acik), 0 0 30px 4px rgba(255, 226, 154, .55); border-radius: 7px; animation: bekle 1.6s ease-in-out infinite; }
.yuva.acik .yuvaKart { cursor: zoom-in; }
.yuvaAd { font: 500 12px/1.2 var(--ui); color: var(--sis); text-align: center; white-space: nowrap; max-width: calc(var(--kw) + 40px); overflow: hidden; text-overflow: ellipsis; }
.yuva.acik .yuvaAd { color: var(--krem); }
@keyframes bekle { 50% { box-shadow: 0 0 0 2px rgba(255, 226, 154, .5), 0 0 14px rgba(255, 226, 154, .2); } }

.kart3b { position: absolute; inset: 0; perspective: 1200px; }
.kart3b .ic { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .9s cubic-bezier(.3, .7, .15, 1); }
.kart3b.acik .ic { transform: rotateY(180deg); }
.kart3b img { position: absolute; inset: 0; width: 100%; height: 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden; display: block; user-select: none; border-radius: 6px; }
.kart3b .yuz { transform: rotateY(180deg); object-fit: cover; box-shadow: 0 14px 30px -12px rgba(0, 0, 8, .9); }
.kart3b.ters .yuz { transform: rotateY(180deg) rotate(180deg); }
.kart3b .arka { box-shadow: 0 10px 24px -10px rgba(0, 0, 8, .9); }

/* deste alanı */
.desteAlan { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 10px; }
.desteAlan:empty { display: none; }
@media (max-width: 959px) {
  .desteAlan { position: sticky; bottom: calc(var(--alt) + env(safe-area-inset-bottom)); z-index: 12; margin: 10px calc(-1 * var(--kenar)) 0; padding: 26px var(--kenar) 8px; background: linear-gradient(to top, rgba(3, 4, 11, .96) 70%, rgba(3, 4, 11, 0)); }
  .masaEkran .soruBas h1 { font-size: 18px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .masaEkran .bas { --kus: 78px; --kusAlan: 96px; }
  .masaEkran .kusYeri { height: calc(var(--kus) + 62px); }
  .yigin { width: 88px; height: 148px; }
}
.tur { margin: 0; font: 400 14.5px/1.5 var(--ui); color: #d6dbee; text-align: center; max-width: 40ch; }
.tur b { color: var(--altin-acik); font-weight: 600; }
.tur .kalan { display: block; font-size: 13px; color: var(--sis); }
.yigin { position: relative; width: 104px; height: 175px; margin: 8px 0 4px; cursor: grab; touch-action: none; }
.yigin:active { cursor: grabbing; }
.yigin img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 7px; box-shadow: 0 10px 22px -10px rgba(0, 0, 8, .9); transition: transform .26s cubic-bezier(.3, .7, .2, 1); transform: translate(calc(var(--i) * -0.6px), calc(var(--i) * -1.2px)); user-select: none; -webkit-user-drag: none; }
/* kesme: kullanıcı destenin üstünü yana sürükler; parçalar yan yana durur, biri seçilir, deste birleşir */
.kesSahne { position: relative; height: calc(var(--ph) + 40px); margin: 10px 0 4px; touch-action: none; user-select: none; -webkit-user-select: none; }
.kp { position: absolute; left: calc(50% - var(--pw) / 2); top: 10px; width: var(--pw); height: var(--ph); padding: 0; border: 0; background: none; color: var(--sis); font: 500 12.5px var(--ui); cursor: grab; touch-action: none; transition: transform .38s cubic-bezier(.3, .7, .2, 1), filter .25s; -webkit-tap-highlight-color: transparent; }
.kp:active { cursor: grabbing; }
.kp.tasinan { transition: none; filter: drop-shadow(0 16px 18px rgba(0, 0, 8, .75)); pointer-events: none; }
.kpGorsel { position: absolute; inset: 0; display: block; }
.kpGorsel img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 6px; transform: translate(calc(var(--j) * -0.8px), calc(var(--j) * -1.6px)); box-shadow: 0 8px 18px -10px #000; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.kpSay { position: absolute; left: 50%; top: calc(100% + 8px); transform: translateX(-50%); white-space: nowrap; pointer-events: none; }
.kesSahne[data-parca] .kp:not([data-yer="0"]) { cursor: default; }
.kesSahne.secim .kp { cursor: pointer; animation: kpBekle 1.6s ease-in-out infinite; }
.kesSahne.secim .kp:hover .kpGorsel, .kesSahne.secim .kp:focus-visible .kpGorsel { filter: drop-shadow(0 0 12px rgba(255, 226, 154, .65)); }
.kesSahne.birles .kp { cursor: default; }
.kp.secildi { color: var(--altin-acik); }
.kp.secildi .kpGorsel { filter: drop-shadow(0 0 14px rgba(255, 226, 154, .7)); }
.kesSahne.birles .kp:not(.secildi) .kpSay { opacity: 0; }
@keyframes kpBekle { 0%, 100% { filter: none; } 50% { filter: drop-shadow(0 0 8px rgba(255, 226, 154, .45)); } }
.kesEylem { justify-content: center; margin-top: 4px; }
.yelpazeKap { width: calc(100% + 2 * var(--kenar)); margin: 0 calc(-1 * var(--kenar)); overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; padding: 18px 0 8px; scrollbar-width: thin; scrollbar-color: rgba(232, 199, 122, .35) transparent; }
.yelpaze { position: relative; height: calc(var(--yk) * 1.68 + 64px); }
.yk { position: absolute; top: 14px; width: var(--yk); aspect-ratio: 720 / 1209; padding: 0; border: 0; background: none; cursor: pointer; transform: translateY(var(--y)) rotate(var(--r)); transform-origin: 50% 120%; transition: transform .22s cubic-bezier(.3, .7, .2, 1), opacity .3s; }
.yk img { width: 100%; height: 100%; display: block; border-radius: 6px; box-shadow: -4px 6px 14px -6px rgba(0, 0, 8, .9); pointer-events: none; }
.yk:hover, .yk:focus-visible { transform: translateY(calc(var(--y) - 16px)) rotate(var(--r)); }
.yk.alindi { opacity: 0; pointer-events: none; transform: translateY(calc(var(--y) - 40px)) rotate(var(--r)); }
.kaydirNot { margin: 0; font: 400 13px var(--ui); color: var(--sis); }
.ucan { position: fixed; z-index: 60; pointer-events: none; transform-origin: 50% 50%; }
.ucan img { width: 100%; height: 100%; border-radius: 6px; box-shadow: 0 20px 40px -14px rgba(0, 0, 8, .9); }
.secenekForm { width: 100%; max-width: 460px; display: flex; flex-direction: column; }
.secenekForm .tur { text-align: left; margin-bottom: 12px; }
.secenekForm input { margin-bottom: 12px; font-size: 16px; }

/* okuma */
.okuma { margin-top: 18px; }
.acNot { margin: 0 0 10px; padding: 12px 14px; border-left: 2px solid var(--altin); background: rgba(232, 199, 122, .07); font: 400 15px/1.5 var(--ui); color: #dfe3f3; }
.acNot b { color: var(--altin-acik); font-weight: 600; }
.poz { padding: 18px 0 16px; border-bottom: 1px solid var(--cizgi-zayif); }
.pozUst { display: flex; align-items: center; gap: 8px; margin: 0; font: 600 13.5px var(--ui); color: var(--altin); }
.pozNo { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; border: 1px solid var(--cizgi); font: 600 12px var(--ui); color: var(--altin-acik); }
.pozAnlam { margin: 4px 0 8px; font: 400 13.5px/1.45 var(--ui); color: var(--sis); }
.poz h3 { font: 650 20px/1.25 var(--ui); margin: 0 0 6px; }
.tersE { display: inline-block; margin-left: 4px; padding: 1px 8px; border-radius: 999px; border: 1px solid rgba(255, 180, 160, .45); font: 500 12px/1.6 var(--ui); color: #ffc9b8; vertical-align: 3px; }
.pozMetin { margin: 0; font: 400 16.5px/1.65 var(--oku); color: var(--krem); text-wrap: pretty; }
.kilitli .pozMetin { filter: blur(5px); user-select: none; color: var(--sis); }
.odeme { margin: 16px 0 4px; padding: 18px; border-radius: 18px; border: 1px solid var(--cizgi); background: linear-gradient(180deg, rgba(40, 30, 10, .5), rgba(9, 11, 26, .85)); }
.odeme p { margin: 0 0 8px; font: 400 15px/1.55 var(--ui); color: #dfe3f3; }
.odBas { font: 650 17px var(--ui) !important; color: var(--altin-acik) !important; display: flex; align-items: center; }
.odeme .eylem { margin: 14px 0 6px; }
.kucukNot { font-size: 12.5px !important; margin: 6px 0 0 !important; }
.bolum { margin-top: 30px; }
.bolum h2 { font: 650 13.5px var(--ui); color: var(--altin); margin: 0 0 10px; letter-spacing: .02em; }
.bolum p { margin: 0 0 12px; font: 400 16.5px/1.65 var(--oku); color: var(--krem); text-wrap: pretty; }
.bolum.cevap { padding: 20px 18px 8px; margin-left: calc(-1 * 4px); border-radius: 18px; border: 1px solid var(--cizgi); background: rgba(9, 11, 26, .72); }
.bolum.cevap h2 { font-size: 15px; }
.oneriSatir { padding-left: 12px; border-left: 2px solid var(--altin); }
.kapanis { font-style: italic; color: var(--altin-acik) !important; }
.takip .soluk { font: 400 14px/1.5 var(--ui); }
.hazirlar { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 14px; }
.sohbet { display: flex; flex-direction: column; gap: 10px; }
.sohbet .sen { align-self: flex-end; max-width: 86%; margin: 0; padding: 10px 14px; border-radius: 16px 16px 4px 16px; background: rgba(232, 199, 122, .16); font: 500 15px/1.45 var(--ui); color: var(--krem); }
.sohbet .kahin { align-self: flex-start; max-width: 94%; padding: 12px 16px 2px; border-radius: 16px 16px 16px 4px; border: 1px solid var(--cizgi-zayif); background: rgba(9, 11, 26, .8); }
.sohbet .kahin p { font-size: 15.5px; margin-bottom: 10px; }
.takipForm { display: flex; gap: 10px; margin-top: 14px; }
.takipForm input { flex: 1; min-width: 0; }
.takipForm .dugme { flex: none; padding: 12px 20px; }
.kriz p { font: 400 17px/1.65 var(--oku); color: var(--krem); }
.kriz a { color: var(--altin-acik); }

/* kart ayrıntısı */
.tabaka { position: fixed; inset: 0; z-index: 80; display: flex; align-items: flex-end; justify-content: center; background: rgba(2, 3, 9, .72); backdrop-filter: blur(4px); }
.tabakaIc { position: relative; width: min(100%, 760px); max-height: 92svh; overflow-y: auto; padding: 22px var(--kenar) calc(26px + env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0; border: 1px solid var(--cizgi); border-bottom: 0; background: #0a0b1c; display: grid; gap: 16px; }
.kapat { position: absolute; right: 10px; top: 8px; width: 40px; height: 40px; border: 0; border-radius: 20px; background: rgba(255, 255, 255, .06); font: 400 24px/1 var(--ui); color: var(--krem); cursor: pointer; }
.buyukKart { margin: 0 auto; width: min(64vw, 270px); }
.buyukKart img { width: 100%; display: block; border-radius: 10px; box-shadow: 0 24px 50px -18px #000; }
.buyukKart.ters img { transform: rotate(180deg); }
.tabakaMetin h2 { font: 650 22px var(--ui); margin: 6px 0 4px; }
.tabakaMetin p { margin: 0 0 10px; font: 400 16px/1.6 var(--oku); }
.tabakaMetin .soluk { font: 400 13.5px/1.5 var(--ui); }

/* okumalarım */
.gecmis { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 10px; }
.gecmisKart { width: 100%; text-align: left; display: flex; flex-direction: column; gap: 3px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--cizgi-zayif); background: var(--mur); cursor: pointer; }
.gecmisKart:hover { border-color: var(--altin); }
.gTarih { font: 500 12.5px var(--ui); color: var(--sis); }
.gSoru { font: italic 400 16px/1.4 var(--oku); color: var(--krem); }
.gAcilim { font: 400 13px/1.45 var(--ui); color: var(--altin); }

/* ---------- masaüstü ---------- */
@media (min-width: 960px) {
  :root { --kus: 140px; --kusAlan: 160px; --kenar: 40px; }
  .soz { font-size: 14.5px; }
  .bas h1 { font-size: 40px; }
  .soruBas h1 { font-size: 25px; }
  .masaEkran { grid-template-columns: minmax(0, 1fr) minmax(400px, 480px); grid-template-rows: auto 1fr; grid-template-areas: "sahne bas" "sahne okuma"; column-gap: clamp(32px, 4vw, 64px); padding-left: clamp(24px, 3vw, 48px); min-height: 100svh; align-items: start; }
  .masaEkran > .sahneAlan { position: sticky; top: calc(var(--ust) + 6px); align-self: start; max-height: calc(100svh - var(--ust) - var(--alt) - 20px); overflow-y: auto; scrollbar-width: none; }
  .masaKap { margin: 0; }
  .masaUst { padding: 0; }
  .yelpazeKap { width: 100%; margin: 0; }
  .oneri { grid-template-columns: 110px minmax(0, 1fr); padding: 20px; }
  .tabaka { align-items: center; }
  .tabakaIc { grid-template-columns: 300px minmax(0, 1fr); align-items: start; border-radius: 22px; border-bottom: 1px solid var(--cizgi); padding: 28px; }
  .buyukKart { width: 300px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ödeme: uygulamada satın alma düğmeleri, tarayıcıda "Uygulamada aç" */
.odeme .dugme[disabled] { opacity: .55; pointer-events: none; }
.odeme .odHak { font: 600 14.5px var(--ui) !important; color: var(--altin-acik) !important; }

/* 04.11 gece (Onur): Tarot tabanı uzay DEĞİL, kumaş/koltuk kılıfı DEĞİL: altın varaklı koyu zümrüt (gorsel/taban.webp; siyah lake denendi, varak yazının altına giriyordu). Figür: siyah Ankara kedisi (gorsel/kedi/kedi.webp). */
canvas#gokGL { display: none; }
body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: #03040c url(../gorsel/taban_A.webp) center bottom / cover no-repeat; }
body::after { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(120% 46% at 62% 10%, rgba(255, 196, 120, .17), rgba(255, 196, 120, 0) 70%), radial-gradient(80% 30% at 70% 16%, rgba(120, 140, 220, .10), rgba(120, 140, 220, 0) 70%), linear-gradient(rgba(3, 4, 12, .26) 0%, rgba(3, 4, 12, .2) 30%, rgba(3, 4, 12, .08) 56%, rgba(3, 4, 12, 0) 78%, rgba(3, 4, 12, .18) 100%); }
.dal { display: none; }
.kus .ifade { filter: drop-shadow(0 0 1px rgba(255, 220, 180, .45)) drop-shadow(0 0 16px rgba(255, 205, 150, .18)) drop-shadow(0 10px 16px rgba(0, 0, 0, .7)); }
@media (max-width: 959px) { :root { --kus: 118px; } }
/* 05.11 (Onur: kartlı ekranda alt kısım çok kararmış): alt çubuk ve deste alanı kadifeyi örtmez, yalnız hafif gölge */
.alt { background: linear-gradient(to top, rgba(3, 4, 12, .82) 38%, rgba(3, 4, 12, 0)); }
@media (max-width: 959px) { .desteAlan { background: linear-gradient(to top, rgba(3, 4, 12, .5) 45%, rgba(3, 4, 12, 0)); } }
/* 05.11 sabah (Onur: üstte başlık+kedi alanı çok karartılmış, derinlik ölüyor): üst karartma azaltıldı, başlık arkasına yumuşak ılık ışık; üst çubuk kadifeyi örtmez */
.ust { background: linear-gradient(rgba(3, 4, 12, .78) 45%, rgba(3, 4, 12, 0)); }
@media (max-width: 959px) { body::before { background-size: auto max(114%, 150vw); } }
/* 05.11: geniş ekran / uzaklaştırmada kadife büyüyüp bulanıklaşmasın: desen boyu 1512 px genişlikteki hâlinde sabit, yanlar aynalı doku */
/* 05.11 (Onur): bilgisayarda deste + "kes" düğmesi masanın altında görünmeyen kaydırmada kalıyordu → deste sağ sütunda, sorunun altında */
@media (min-width: 960px) {
  .masaEkran { grid-template-rows: auto auto 1fr; grid-template-areas: "sahne bas" "sahne deste" "sahne okuma"; }
  .masaEkran > .sahneAlan { display: contents; }
  .masaEkran .masaKap { grid-area: sahne; position: sticky; top: calc(var(--ust) + 6px); align-self: start; max-height: calc(100svh - var(--ust) - var(--alt) - 20px); overflow-y: auto; scrollbar-width: none; min-width: 0; }
  .masaEkran .desteAlan { grid-area: deste; min-width: 0; margin-top: 0; }
}
/* 05.11 (Onur): kadife desen üstünde yazılar okunsun */
#sahne { text-shadow: 0 1px 2px rgba(0, 0, 8, .95), 0 0 12px rgba(3, 4, 12, .85); }
#sahne .dugme.dolu, #sahne .dugme.dolu * { text-shadow: none; }
.yasalNot { background: rgba(3, 4, 12, .62); padding: 10px 12px; border-radius: 10px; opacity: 1; color: #c9cfe6; }
.alt { background: linear-gradient(to top, rgba(3, 4, 12, .95) 55%, rgba(3, 4, 12, .62) 80%, rgba(3, 4, 12, 0)); }
.yuvaAd { text-shadow: 0 1px 2px #000, 0 0 10px rgba(3, 4, 12, .95); }
@media (max-width: 959px) { .masaEkran .soz { width: 200px; } .masaEkran .kusYeri { height: calc(var(--kus) + 60px); } }
@media (min-width: 960px) { body::before { --th: max(100vh, min(150vw, 2268px)); background-image: url(../gorsel/taban_A_ayna.webp); background-size: auto var(--th); background-repeat: repeat-x; background-position: calc(50vw - var(--th) / 3) bottom; } }
.soz { text-shadow: 0 1px 3px rgba(0, 0, 0, .95), 0 0 14px rgba(3, 4, 12, .9); }
/* 05.11 (Onur: kedi telefonda epey küçük) — kedi büyütüldü */
@media (max-width: 959px) {
  :root { --kus: 150px; --kusAlan: 138px; }
  .kus { right: -10px; }
  .masaEkran .bas { --kus: 116px; --kusAlan: 112px; }
  .masaEkran .kusYeri { height: calc(var(--kus) + 52px); }
}
@media (min-width: 960px) { :root { --kus: 172px; --kusAlan: 180px; } }


/* ---------- 06.11 OKUNURLUK (Onur: lacivert kadife üstünde yazılar okunmuyor) ----------
   Yazı artık altın varak desenin doğrudan üstüne oturmaz: yarı saydam koyu "cam" panellerin (bulanık) üstündedir; kadife panelin kenarlarından ve arasından görünür.
   Ölçüt WCAG AA: normal yazı ≥ 4.5:1 (ölçüm: onur_isler/TAROT_GUNDUZ_0611/KONTRAST.md). Küçük yazılar 13 px altına inmez. */
:root {
  --sis: #c3cceb; --soluk2: #d4dbf1;
  --mur: rgba(7, 9, 24, .88);
  --pn: rgba(6, 8, 22, .56); --pn2: rgba(6, 8, 22, .8); --pn-kenar: rgba(232, 199, 122, .26);
  --cam: blur(7px) saturate(1.05);
}
.basMetin, .soruForm, .gununKucuk, .okuma, .not, .masaKap, .desteAlan:not(:empty), .soz, .katGrup > h2 {
  background: var(--pn); -webkit-backdrop-filter: var(--cam); backdrop-filter: var(--cam);
}
.basMetin, .soruForm, .gununKucuk, .okuma, .not, .desteAlan:not(:empty) { border: 1px solid var(--pn-kenar); border-radius: 20px; box-shadow: 0 14px 40px -22px rgba(0, 0, 8, .9); }
.basMetin { padding: 12px 16px 16px; }
.soruForm { padding: 18px 16px 14px; margin-top: 16px; }
.soruForm .not { background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 0; }
.not { padding: 12px 16px; border-radius: 14px; }
.gununKucuk { padding: 14px 16px; margin-top: 22px; border-top: 1px solid var(--pn-kenar); border-radius: 16px; }
.okuma { padding: 4px 18px 18px; }
.okuma.kriz, .kriz.okuma { padding: 20px 18px; }
.masaKap { border-block: 1px solid var(--pn-kenar); background: rgba(6, 8, 22, .4); }
.masaUst { padding-top: 10px; padding-bottom: 4px; }
.masaIc::before { display: none; }
.desteAlan:not(:empty) { padding: 12px 16px 14px; }
.katGrup > h2 { display: inline-block; padding: 5px 14px; border-radius: 999px; border: 1px solid var(--pn-kenar); font-size: 15px; }
.soz { width: max-content !important; max-width: min(100%, 220px); margin-left: auto; padding: 6px 12px; border-radius: 14px; border: 1px solid var(--pn-kenar); opacity: 1; color: var(--krem); font-size: 14px; line-height: 1.38; text-align: left; }
.soz:empty { display: none; }
@keyframes sozGel { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (min-width: 960px) { .soz { max-width: 260px; font-size: 15px; } }

/* kutu ve karolar daha dolu */
.oneri, .katKart, .gecmisKart { -webkit-backdrop-filter: var(--cam); backdrop-filter: var(--cam); border-color: var(--pn-kenar); }
.katKart:hover { background: rgba(20, 22, 46, .92); }
.cip { background: rgba(8, 10, 26, .82); border-color: rgba(232, 199, 122, .4); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.cip span { font-size: 13.5px; }
.cip.secili, .cip:has(input:checked) { background: rgba(60, 46, 14, .9); }
.soruForm textarea, .secenekForm input, .takipForm input { background: rgba(4, 5, 14, .92); border-color: rgba(232, 199, 122, .42); }
::placeholder { color: rgba(205, 213, 238, .8); }
.bolum.cevap, .sohbet .kahin { background: rgba(4, 6, 18, .72); }
.yasalNot { background: rgba(3, 4, 12, .78); color: #d3daf0; font-size: 13px; }
.not, .not a { color: var(--soluk2); }
.not { font-size: 15px; }
.altYazi, .tur, .oneri p, .acNot, .odeme p { color: #e3e8f8; }
.kkNeden { color: var(--soluk2); font-size: 14.5px; }
.hata { color: #ffc1b2; }
.tersE { color: #ffd6c8; border-color: rgba(255, 190, 170, .6); font-size: 13px; }

/* küçük yazılar */
.etiket { font-size: 14px; }
.ustYazi { font-size: 14.5px; }
.say { font-size: 14px; }
.pozAnlam { font-size: 14.5px; }
.oneri .pozlar { font-size: 14px; }
.gk2, .gTarih { font-size: 14px; }
.gAcilim, .kucukNot { font-size: 13.5px !important; }
.kaydirNot, .tur .kalan { font-size: 13.5px; }
.yuvaAd { font-size: 13px; color: #cfd7f1; max-width: calc(var(--kw) + 56px); }
.yuva.acik .yuvaAd { color: var(--krem); }
.yuvaKart { background: rgba(6, 8, 22, .55); border-color: rgba(232, 199, 122, .55); }
.yuvaKart .no { color: #f1d489; }
.alt a { font-size: 13.5px; color: #cdd5f0; }
.alt a.aktif { color: var(--altin-acik); }
.dugme:disabled { opacity: .62; }
.dugme.dolu:disabled { opacity: 1; background: linear-gradient(180deg, #b9a46a, #a38d55); color: #14100a; box-shadow: none; }
.pozNo { font-size: 13px; }
.poz .pozUst { font-size: 14.5px; }

/* üst ve alt çubuk: kaydırılan yazı altından karışmasın */
.ust { background: linear-gradient(rgba(3, 4, 12, .94) 62%, rgba(3, 4, 12, 0)); }
.alt { background: linear-gradient(to top, rgba(3, 4, 12, .98) 62%, rgba(3, 4, 12, .72) 86%, rgba(3, 4, 12, 0)); }

@media (max-width: 959px) {
  .masaKap { border-radius: 0; }
  .desteAlan:not(:empty) { margin: 10px 0 0; background: var(--pn2); }
  .masaEkran .soz { max-width: 190px; }
}
@media (min-width: 960px) {
  .masaKap { border-radius: 20px; border: 1px solid var(--pn-kenar); }
  .masaUst { padding-left: 16px; padding-right: 16px; }
}
.okuma:empty, .soruBas:empty { display: none; }
.kpSay { padding: 2px 10px; border-radius: 999px; background: var(--pn2); border: 1px solid var(--pn-kenar); font-size: 13px; }

/* 06.11: uygulama kapalı testte; "Yakında Google Play'de" tıklanmaz (Play sayfası herkese açılınca yeniden bağlantı) */
.dugme.yakinda { cursor: default; pointer-events: none; }

/* 06.11 (Onur): paylaşım görseli ekranda */
.pyKatman { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 18px; background: rgba(4, 4, 12, .78); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; transition: opacity .2s ease; }
.pyKatman.acik { opacity: 1; }
.pyKutu { display: flex; flex-direction: column; align-items: center; gap: 16px; max-width: 100%; max-height: 100%; }
.pyGorsel { display: block; max-width: min(92vw, 460px); max-height: calc(100svh - 150px); width: auto; height: auto; border-radius: 18px; box-shadow: 0 24px 60px -12px rgba(0, 0, 0, .75), 0 0 0 1px rgba(232, 199, 122, .35); -webkit-touch-callout: default; user-select: auto; }
.pyEylem { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; }
.pyKatman .metinDugme { color: #f4ead6; }