/* ════════════════════════════════════════════════════════════
MODULOR v2 — app.css
Sadece iskelet: header, nav, view container, toast.
Oda-spesifik stiller kendi dosyasında (sofa.css vb.)
════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { height: 100%; -webkit-tap-highlight-color: transparent; }
body {
min-height: 100%;
background : var(--bg-0);
color : var(--text-0);
font-family: var(--font-outfit);
font-size : 20px;
line-height: 1.6;
transition : background var(--dur-mid), color var(--dur-mid);
overflow-x : hidden;
}
/* ── Yükleniyor ─────────────────────────────────────────── */
#app-yukleniyor {
position : fixed;
inset : 0;
background: var(--bg-0);
display : flex;
align-items: center;
justify-content: center;
z-index : 9999;
}
.yukleniyor-logo {
font-size : 42px;
color : var(--text-gold);
animation : nefes 2s ease-in-out infinite;
}
@keyframes nefes {
0%,100% { opacity:.3; transform: scale(.95); }
50% { opacity:1; transform: scale(1.05); }
}
/* ── Header ─────────────────────────────────────────────── */
#app-header {
position : fixed;
top : 0;
left : 0;
right : 0;
height : var(--header-h);
padding-top: var(--safe-top);
z-index : 100;
background: var(--bg-0);
border-bottom: 1px solid var(--border-0);
transition: transform var(--dur-mid) ease;
}
/* Sofa'da aşağı kaydırınca header yukarı kayıp gizlenir */
#app-header.gizli {
transform: translateY(-100%);
}
.header-ic {
height : var(--header-h);
max-width : 640px;
margin : 0 auto;
padding : 0 26px;
display : flex;
align-items: center;
justify-content: space-between;
}
.header-logo {
font-family : var(--font-cinzel);
font-size : 14px;
letter-spacing: .35em;
color : var(--text-gold-dim);
background : none;
border : none;
cursor : pointer;
padding : 0;
transition : color var(--dur-fast);
}
.header-logo:hover { color: var(--text-gold); }
.header-logo:focus, .header-logo:active {
background: none !important;
outline: none;
}
.header-logo:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.header-sagda { display: flex; gap: 16px; align-items: center; }
/* ── Kompakt kimlik (☉Koç ☽Yay ↑Koç) ──────────────────────── */
.header-kimlik {
display : flex;
gap : 13px;
align-items: center;
}
.hk-item {
display : inline-flex;
align-items: baseline;
gap : 3px;
font-size : 17px;
color : var(--text-gold);
font-family: var(--font-cinzel);
letter-spacing: .03em;
white-space: nowrap;
}
.hk-b {
color : var(--text-1);
font-size: 16px;
}
@media (max-width: 640px) {
/* Mobilde header'a font+tema sığmıyor → dropdown'a taşındı.
Header'da kimlik (☉♈ ☽♒ ↑♉) + tema toggle + isim kalır; font gizlenir. */
.header-font { display: none; } /* −A+ dropdown'da */
.header-sagda { gap: 8px; }
.header-isim { font-size: 15px; }
.header-ic { padding: 0 12px; }
.header-kimlik { gap: 5px; }
.hk-b { display: none; } /* burç ADI gizli */
.hk-sem { display: inline; } /* burç SEMBOLÜ görünür (♈♒♉) */
.dd-mobil-kontrol { display: block; }
}
/* Masaüstünde dropdown'daki font/tema gizli (header'da var) */
.dd-mobil-kontrol { display: none; }
/* Burç sembolü — masaüstünde ad varken gizli, mobilde ad yerine görünür */
.hk-sem { display: none; margin: 0 1px; }
/* İsim butonu → dropdown tetikleyici */
.header-isim {
background : transparent;
border : none;
color : var(--text-0);
font-family: var(--font-cinzel);
font-size : 18px;
letter-spacing: .05em;
cursor : pointer;
padding : 8px 5px;
display : inline-flex;
align-items: center;
gap : 6px;
min-height : 57px;
}
.header-isim:hover { color: var(--text-gold); }
.hi-caret { font-size: 13px; opacity: .6; }
/* Header font kontrolü — çerçevesiz, sade */
.header-font {
display: inline-flex;
align-items: center;
gap: 5px;
}
.hf-btn, .hf-a-btn {
background: transparent; border: none;
color: var(--text-2); cursor: pointer;
transition: color var(--dur-fast);
padding: 5px 8px;
min-height: 57px;
}
.hf-btn { font-size: 23px; }
.hf-a-btn { font-family: var(--font-cormorant); font-size: 20px; }
.hf-btn:hover, .hf-a-btn:hover { color: var(--text-gold); }
/* Header tema toggle — çerçevesiz */
.header-tema {
background: transparent;
border: none;
color: var(--text-gold);
font-size: 23px; cursor: pointer;
padding: 5px 8px; min-height: 57px;
transition: opacity var(--dur-fast);
}
.header-tema:hover { opacity: .7; }
/* ── Ana içerik ─────────────────────────────────────────── */
#app-main {
padding-top : calc(var(--header-h) + var(--safe-top));
padding-bottom: calc(var(--safe-bottom) + 100px); /* uçan alt menü butonları için */
min-height : 100dvh;
max-width : 640px;
margin : 0 auto;
width : 100%;
}
/* ── View container ─────────────────────────────────────── */
[data-view] {
padding: 26px 26px 0;
animation: viewGel var(--dur-mid) ease;
}
@keyframes viewGel {
from { opacity:0; transform: translateY(10px); }
to { opacity:1; transform: translateY(0); }
}
/* ── Bottom Nav ─────────────────────────────────────────── */
/* ══ SOFA ALT MENÜ — uçan squircle butonlar ══
Zemin/çerçeve YOK: sayfa butonların arkasından akar.
Her buton kendi oda renginde hâle (glow) taşır — koyu temada
siyah gölge görünmediği için "uçma" hissi ışıkla verilir. */
#bottom-nav {
display: none; /* Varsayılan gizli; app.js yalnız Sofa'da gösterir */
position : fixed;
bottom : 0;
left : 0;
right : 0;
padding : 14px 16px calc(14px + var(--safe-bottom));
z-index : 100;
justify-content: center;
pointer-events: none; /* zemin tıklamayı engellemesin */
background: none;
border-top: none;
}
#bottom-nav.gizli { transform: translateY(140%); }
.nav-ic {
display : flex;
gap : 12px;
justify-content: center;
pointer-events: auto;
}
/* Squircle: daireye yakın kare */
.nav-btn {
width : 62px;
height: 62px;
border-radius: 34%;
display : flex;
align-items: center;
justify-content: center;
cursor : pointer;
padding : 0;
color : var(--nav-r, var(--text-gold));
background: var(--ucan-bg);
border : 1px solid color-mix(in srgb, var(--nav-r, #C9A84C) 42%, transparent);
backdrop-filter: blur(16px) saturate(1.2);
-webkit-backdrop-filter: blur(16px) saturate(1.2);
box-shadow:
0 12px 32px var(--ucan-golge-1),
0 4px 12px var(--ucan-golge-2),
0 0 30px color-mix(in srgb, var(--nav-r, #C9A84C) 30%, transparent),
inset 0 1px 0 var(--ucan-ic-isik);
transition: transform .18s, border-color .2s, box-shadow .2s;
-webkit-tap-highlight-color: transparent;
}
.nav-btn:active { transform: scale(.93); }
.nav-btn.aktif {
border-color: var(--nav-r);
box-shadow:
0 12px 32px var(--ucan-golge-1),
0 4px 12px var(--ucan-golge-2),
0 0 36px color-mix(in srgb, var(--nav-r, #C9A84C) 48%, transparent),
inset 0 1px 0 var(--ucan-ic-isik);
}
/* Her oda kendi rengi */
.nav-btn[data-nav-oda="harita"] { --nav-r:#7a9cd8; }
.nav-btn[data-nav-oda="elements"] { --nav-r:#98b8a0; }
.nav-btn[data-nav-oda="zemin"] { --nav-r:#d8a068; }
.nav-btn[data-nav-oda="gemoloji"] { --nav-r:#b0c8f4; }
html.light .nav-btn[data-nav-oda="harita"] { --nav-r:#3a5aaa; }
html.light .nav-btn[data-nav-oda="elements"] { --nav-r:#286040; }
html.light .nav-btn[data-nav-oda="zemin"] { --nav-r:#a05820; }
html.light .nav-btn[data-nav-oda="gemoloji"] { --nav-r:#3a5aaa; }
.nav-ikon { display:inline-flex; line-height: 1; }
.nav-ikon svg { display:block; }
/* Yazı kaldırıldı — ikon yeterli (Sofa kartları ikonu zaten öğretiyor) */
.nav-etiket { display: none; }
/* ── İkon buton (header vb.) ────────────────────────────── */
.icon-btn {
background: none;
border : none;
cursor : pointer;
color : var(--text-2);
font-size : 21px;
padding : 8px;
border-radius: 8px;
transition: color var(--dur-fast), background var(--dur-fast);
line-height: 1;
}
.icon-btn:hover { color: var(--text-0); background: var(--bg-3); }
/* ── Toast ──────────────────────────────────────────────── */
#app-toast {
position : fixed;
bottom : calc(var(--nav-h) + var(--safe-bottom) + 16px);
left : 50%;
transform : translateX(-50%) translateY(10px);
background: var(--bg-2);
color : var(--text-0);
border : 1px solid var(--border-2);
border-radius: 10px;
padding : 10px 23px;
font-family: var(--font-cinzel);
font-size : 13px;
letter-spacing: .12em;
white-space: nowrap;
opacity : 0;
pointer-events: none;
transition: opacity var(--dur-fast), transform var(--dur-fast);
z-index : 9000;
}
#app-toast.toast-goster {
opacity : 1;
transform: translateX(-50%) translateY(0);
}
#app-toast.toast-uyari {
background: var(--warn);
border-color: rgba(255,255,255,.1);
color: #f5f0e8;
}
#app-toast.toast-basari {
background: var(--success);
border-color: rgba(255,255,255,.1);
color: #f5f0e8;
}
/* ── Plan Engeli Modal ──────────────────────────────────── */
#plan-engeli-modal {
position : fixed;
inset : 0;
background: rgba(8,6,16,.7);
backdrop-filter: var(--blur-bg);
display : none;
align-items: center;
justify-content: center;
z-index : 9800;
padding : 26px;
}
.plan-engeli-ic {
background: var(--bg-2);
border : 1px solid var(--border-gold);
border-radius: 21px;
padding : 36px 31px;
max-width : 442px;
text-align: center;
}
.plan-engeli-ic p {
font-family: var(--font-cormorant);
font-size : 22px;
color : var(--text-0);
margin-bottom: 26px;
line-height: 1.6;
}
.plan-engeli-ic button {
background : none;
border : 1px solid var(--border-gold);
border-radius: 8px;
color : var(--text-gold);
font-family : var(--font-cinzel);
font-size : 14px;
letter-spacing: .2em;
padding : 10px 26px;
cursor : pointer;
transition : all var(--dur-fast);
}
.plan-engeli-ic button:hover {
background: var(--gold-10);
border-color: var(--gold);
}
/* ════════════════════════════════════════════════════════════
SOFA — Oda stilleri
Rapor düzeltmeleri dahil:
- Min 57px dokunma alanı (Apple HIG)
- minimum-scale kaldırıldı (erişilebilirlik)
- safe-area düzeltmeleri
════════════════════════════════════════════════════════════ */
/* ── Sofa genel ─────────────────────────────────────────── */
.sofa-wrap { display: flex; flex-direction: column; gap: 16px; padding-bottom: 10px; }
.sofa-tarih {
text-align : center;
padding : 10px 0 5px;
}
.sofa-tarih-txt {
font-family : var(--font-cinzel);
font-size : 13px;
letter-spacing: .25em;
text-transform: uppercase;
color : var(--text-2);
}
/* ── Kart ───────────────────────────────────────────────── */
.sofa-kart {
background : var(--bg-1);
border : 1px solid var(--border-0);
border-radius: 18px;
padding : 23px 23px 21px;
margin-bottom: 14px; /* kartlar birbirinden ayrı (oda hissi) */
}
.sf-kart-baslik {
font-family : var(--font-cinzel);
font-size : 12px;
letter-spacing: .28em;
text-transform: uppercase;
color : var(--text-gold-dim);
margin-bottom : 18px;
}
/* ── Nabız ──────────────────────────────────────────────── */
.sf-nabiz-ust {
display : flex;
justify-content: space-between;
align-items : center;
margin-bottom : 18px;
}
.sf-nabiz-gun {
font-size : 14px;
color : var(--text-2);
font-family: var(--font-cinzel);
}
.nk-vakitler { display: flex; flex-direction: column; gap: 10px; }
.nk-vakit {
border : 1px solid var(--border-0);
border-radius: 13px;
padding : 16px 18px;
transition : all var(--dur-fast);
}
.nk-vakit.nk-aktif {
border-color : var(--border-gold);
background : rgba(var(--gold-rgb),.04);
}
.nk-vakit.nk-gecmis { opacity: .6; }
.nk-vakit.nk-gelecek { opacity: .4; }
.nk-vakit.nk-secilmis { border-color: var(--border-1); }
.nk-vakit-ust {
display : flex;
align-items: center;
gap : 10px;
margin-bottom: 0;
}
.nk-vakit-zaman {
font-size : 12px;
color : var(--text-2);
font-family: var(--font-cinzel);
width : 47px;
flex-shrink: 0;
}
.nk-vakit-ad {
font-family : var(--font-cinzel);
font-size : 13px;
letter-spacing: .15em;
text-transform: uppercase;
color : var(--text-1);
flex : 1;
}
.nk-aktif-dot { color: var(--text-gold); font-size: 10px; }
.nk-bekleniyor { color: var(--text-2); font-size: 14px; margin-left: auto; }
.nk-badge {
font-size : 13px;
color : var(--text-gold);
background : var(--gold-10);
border : 1px solid var(--gold-20);
border-radius: 5px;
padding : 2px 10px;
margin-left : auto;
}
/* Ritim seçici */
.ritim-secici { margin-top: 16px; }
.ritim-soru {
font-family: var(--font-cormorant);
font-size : 20px;
font-style : italic;
color : var(--text-1);
margin-bottom: 13px;
}
.ritim-grid {
display : grid;
grid-template-columns: repeat(3, 1fr);
gap : 8px;
}
.ritim-btn {
display : flex;
flex-direction : column;
align-items : center;
gap : 5px;
/* Rapor: min 57px dokunma alanı */
min-height : 68px;
padding : 13px 8px;
background : var(--bg-2);
border : 1px solid var(--border-1);
border-radius : 10px;
cursor : pointer;
transition : all var(--dur-fast);
color : var(--text-1);
-webkit-tap-highlight-color: transparent;
touch-action : manipulation;
}
.ritim-btn:hover, .ritim-btn:active {
border-color: var(--border-gold);
background : var(--gold-10);
color : var(--text-gold);
}
.ritim-ikon { font-size: 21px; line-height: 1; }
.ritim-ad { font-family: var(--font-cinzel); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
/* Ritim özet */
.nk-ozet { margin-top: 13px; padding-top: 13px; border-top: 1px solid var(--border-0); }
.nk-eksen {
font-family: var(--font-cinzel);
font-size : 12px;
letter-spacing: .2em;
text-transform: uppercase;
color : var(--text-gold-dim);
margin-bottom: 8px;
}
.nk-mesaj {
font-family: var(--font-cormorant);
font-size : 21px;
font-style : italic;
color : var(--text-0);
line-height: 1.65;
margin-bottom: 5px;
}
.nk-tavsiye {
font-size : 16px;
color : var(--text-1);
line-height: 1.6;
}
/* ── Davet ──────────────────────────────────────────────── */
.sf-davet { text-align: center; padding: 36px 26px; }
.sf-davet-simge {
font-size : 31px;
color : var(--text-gold-dim);
margin-bottom : 18px;
display : block;
}
.sf-davet-baslik {
font-family : var(--font-cinzel);
font-size : 17px;
letter-spacing: .15em;
color : var(--text-gold);
margin-bottom : 13px;
font-weight : 400;
}
.sf-davet-metin {
font-family: var(--font-cormorant);
font-size : 22px;
font-style : italic;
color : var(--text-1);
line-height: 1.7;
margin-bottom: 26px;
}
/* ── Profil formu ───────────────────────────────────────── */
.sf-lbl {
display : block;
font-family : var(--font-cinzel);
font-size : 12px;
letter-spacing: .2em;
text-transform: uppercase;
color : var(--text-2);
margin-bottom: 8px;
margin-top : 21px;
}
.sf-lbl:first-child { margin-top: 0; }
.sf-lbl-not { font-family: var(--font-cormorant); font-style: italic; text-transform: none; letter-spacing: 0; font-size: 16px; color: var(--text-2); }
.sf-input {
width : 100%;
background : var(--bg-2);
border : none;
border-bottom: 1px solid var(--border-1);
border-radius: 0;
color : var(--text-0);
font-family : var(--font-cormorant);
font-size : 23px;
padding : 13px 5px;
outline : none;
transition : border-color var(--dur-fast);
}
.sf-input:focus { border-color: var(--gold); }
.sf-tarih-grup {
display : grid;
grid-template-columns: 1fr 1fr 1fr;
gap : 10px;
margin-bottom : 5px;
}
.sf-select {
background : var(--bg-2);
border : none;
border-bottom : 1px solid var(--border-1);
color : var(--text-0);
font-family : var(--font-cormorant);
font-size : 22px;
padding : 13px 5px;
outline : none;
cursor : pointer;
appearance : none;
-webkit-appearance: none;
text-align : center;
width : 100%;
}
.sf-hata {
font-size : 16px;
color : var(--error);
padding : 8px 0;
margin-top : 10px;
}
/* ── Kademeli konum + saat dropdown'ları ──────────────────── */
.sf-yer-grup {
display : grid;
grid-template-columns: 1fr;
gap : 10px;
margin-bottom : 5px;
}
/* Ülke / İl / İlçe TEK SATIR */
.sf-yer-3lu {
grid-template-columns: 1fr 1fr 1fr;
}
/* Native select açık zemin sorununu çöz: kart zeminine sabitle,
option'ları da koyu yap (bazı tarayıcılar seçili option'u beyaz gösteriyor) */
.sf-select {
background-color: var(--bg-2) !important;
color : var(--text-0) !important;
}
.sf-select option {
background-color: var(--bg-1);
color : var(--text-0);
}
/* Native select: sağda ok, sola hizalı metin, kart zeminiyle uyumlu */
.sf-yer-grup .sf-select,
.sf-saat-grup .sf-select {
text-align : left;
padding-right: 34px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat : no-repeat;
background-position: right 10px center;
}
.sf-yer-3lu .sf-select {
text-align : center;
padding : 13px 26px 13px 8px;
font-size : 20px;
}
.sf-saat-grup {
display : grid;
grid-template-columns: 75px 13px 75px 1fr; /* saat : dk buton — TEK SATIR */
align-items : center;
gap : 8px;
margin-bottom: 5px;
}
.sf-saat-grup .sf-select {
width : 100%;
text-align : center;
padding : 13px 5px;
background-image: none; /* dar saat kutularında ok gösterme */
}
.sf-saat-ayrac {
color : var(--text-2);
font-size : 23px;
text-align : center;
font-family: var(--font-cormorant);
}
.sf-saat-test-btn {
min-width : 0;
white-space : nowrap;
background : transparent;
border : 1px solid var(--oda-cizgi, var(--gold));
color : var(--text-gold);
font-family : var(--font-cinzel);
font-size : 16px;
letter-spacing: .06em;
padding : 13px 10px;
border-radius : 10px;
cursor : pointer;
transition : background var(--dur-fast), color var(--dur-fast);
}
.sf-saat-test-btn:hover {
background: var(--gold-10);
color : var(--text-0);
}
.sf-select:disabled { opacity: .45; cursor: not-allowed; }
/* ── Kimlik kartı (Güneş/Ay/Yükselen) ─────────────────────── */
.sf-kimlik { text-align: center; }
.kmk-isim {
font-family : var(--font-cinzel);
font-size : 26px;
letter-spacing: .08em;
color : var(--text-gold);
margin-bottom : 18px;
}
.kmk-grid {
display : grid;
grid-template-columns: 1fr 1fr 1fr;
gap : 10px;
}
.kmk-hucre {
display : flex;
flex-direction: column;
align-items : center;
gap : 5px;
padding : 16px 8px;
background : var(--bg-2);
border : 1px solid var(--border-0);
border-radius : 13px;
}
.kmk-ikon { font-size: 23px; color: var(--text-gold); }
.kmk-ad {
font-family : var(--font-outfit);
font-size : 13px;
letter-spacing: .1em;
text-transform: uppercase;
color : var(--text-2);
}
.kmk-val {
font-family: var(--font-cormorant);
font-size : 22px;
color : var(--text-0);
}
.kmk-not {
margin-top : 16px;
font-size : 16px;
color : var(--text-2);
font-style : italic;
}
/* ── Pusula ─────────────────────────────────────────────── */
.pu-grid { display: flex; flex-direction: column; gap: 13px; }
.pu-item { display: flex; align-items: center; gap: 16px; }
.pu-ikon {
font-size : 21px;
color : var(--text-gold-dim);
width : 29px;
text-align : center;
flex-shrink: 0;
}
.pu-item div { display: flex; flex-direction: column; gap: 1px; }
.pu-etiket { font-family: var(--font-cinzel); font-size: 12px; letter-spacing: .15em; text-transform: uppercase; color: var(--text-2); }
.pu-deger { font-family: var(--font-cormorant); font-size: 22px; color: var(--text-0); }
.sf-bos { font-family: var(--font-cormorant); font-size: 20px; font-style: italic; color: var(--text-2); }
/* ── AI Yorum ───────────────────────────────────────────── */
.sf-ai-ust {
display : flex;
justify-content: space-between;
align-items : center;
margin-bottom : 8px;
}
.sf-ai-ust .sf-kart-baslik { margin-bottom: 0; }
/* Hak sayacı — rapor: real-time görünür */
.sf-hak-sayac {
font-family: var(--font-cinzel);
font-size : 12px;
letter-spacing: .1em;
color : var(--text-gold-dim);
background : var(--gold-10);
border : 1px solid var(--gold-20);
border-radius: 5px;
padding : 2px 10px;
}
.sf-ai-ac {
font-size : 17px;
color : var(--text-1);
line-height: 1.6;
margin-bottom: 18px;
}
.sf-ai-hazir { font-size: 16px; color: var(--text-gold-dim); margin-bottom: 13px; }
.sf-ai-not { font-size: 14px; color: var(--text-2); margin-top: 10px; font-style: italic; }
/* ── Butonlar ───────────────────────────────────────────── */
.btn-altin {
display : block;
width : 100%;
/* Rapor: min 57px */
min-height : 62px;
background : none;
border : 1px solid var(--border-gold);
border-radius: 10px;
color : var(--text-gold);
font-family : var(--font-cinzel);
font-size : 13px;
letter-spacing: .3em;
text-transform: uppercase;
cursor : pointer;
transition : all var(--dur-fast);
touch-action : manipulation; /* Rapor: ontouchstart kaldır */
}
.btn-altin:hover, .btn-altin:active {
background: var(--gold-10);
border-color: var(--gold);
}
.btn-gold-outline {
display : block;
width : 100%;
min-height : 57px;
background : none;
border : 1px solid var(--border-1);
border-radius: 10px;
color : var(--text-1);
font-family : var(--font-cinzel);
font-size : 13px;
letter-spacing: .2em;
text-transform: uppercase;
cursor : pointer;
transition : all var(--dur-fast);
touch-action : manipulation;
}
.btn-gold-outline:hover { border-color: var(--border-gold); color: var(--text-gold); }
/* ── Denge kartları ─────────────────────────────────────── */
.denge-liste { display: flex; flex-direction: column; gap: 10px; }
.denge-kart, .devam-kart {
display : flex;
align-items: center;
gap : 16px;
padding : 16px 18px;
border : 1px solid var(--border-0);
border-radius: 13px;
cursor : pointer;
transition : all var(--dur-fast);
touch-action: manipulation;
min-height : 68px; /* Rapor: 57px min */
}
.denge-kart:hover, .devam-kart:hover {
border-color: var(--border-gold);
background : var(--gold-10);
}
.dk-ikon { font-size: 22px; color: var(--text-gold-dim); flex-shrink: 0; }
.dk-ic { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.dk-ad { font-family: var(--font-cinzel); font-size: 14px; letter-spacing: .15em; text-transform: uppercase; color: var(--text-0); }
.dk-ac { font-size: 16px; color: var(--text-1); }
.dk-ok { font-size: 14px; color: var(--text-gold-dim); flex-shrink: 0; }
/* ════════════════════════════════════════════════════════════
SPRINT 2 — Gemoloji · Zemin · Plan Engeli Stilleri
════════════════════════════════════════════════════════════ */
/* ── Genel oda stilleri ─────────────────────────────────── */
.gem-wrap { display:flex;flex-direction:column;gap:16px;padding-bottom:10px }
.gem-baslik-wrap{ padding:5px 0 }
.gem-baslik { font-family:var(--font-cinzel);font-size:16px;letter-spacing:.3em;text-transform:uppercase;color:var(--text-gold-dim) }
.gem-bolum { display:flex;flex-direction:column;gap:16px }
.gem-aciklama { font-family:var(--font-cormorant);font-size:21px;font-style:italic;color:var(--text-1);line-height:1.65 }
.gem-bos { padding:52px 0;text-align:center;font-family:var(--font-cormorant);font-size:21px;font-style:italic;color:var(--text-2) }
.gem-yukl { padding:26px 0;text-align:center;font-family:var(--font-cinzel);font-size:13px;letter-spacing:.2em;color:var(--text-gold-dim) }
/* ── Sekmeler ───────────────────────────────────────────── */
.gem-sekmeler { display:flex;gap:5px;overflow-x:auto;padding-bottom:2px }
.gem-sekme {
flex-shrink : 0;
background : none;
border : 1px solid var(--border-1);
border-radius : 8px;
color : var(--text-2);
font-family : var(--font-cinzel);
font-size : 12px;
letter-spacing: .15em;
text-transform: uppercase;
padding : 9px 18px;
cursor : pointer;
transition : all var(--dur-fast);
min-height : 44px;
touch-action : manipulation;
}
.gem-sekme.aktif { color:var(--text-gold);border-color:var(--border-gold);background:var(--gold-10) }
/* ── Taş kartları ───────────────────────────────────────── */
.tas-kart {
background : var(--bg-1);
border : 1px solid var(--border-0);
border-radius: 16px;
padding : 21px;
display : flex;
flex-direction: column;
gap : 10px;
}
.tas-kart-ust { display:flex;align-items:center;gap:16px }
.tas-emoji { font-size:34px;flex-shrink:0 }
.tas-ic { flex:1;display:flex;flex-direction:column;gap:2px }
.tas-ad { font-family:var(--font-cinzel);font-size:17px;letter-spacing:.1em;color:var(--text-0) }
.tas-tip { font-size:13px;color:var(--text-gold-dim);letter-spacing:.1em }
.tas-neden { font-family:var(--font-cormorant);font-size:20px;color:var(--text-1);line-height:1.6 }
.tas-kullanim { font-size:16px;color:var(--text-2);line-height:1.5 }
.tas-koleksiyon-btn {
background : none;
border : 1px solid var(--border-1);
border-radius: 50%;
width : 39px;height:39px;
display : flex;align-items:center;justify-content:center;
cursor : pointer;
color : var(--text-2);
font-size : 18px;
transition : all var(--dur-fast);
flex-shrink : 0;
touch-action : manipulation;
}
.tas-koleksiyon-btn.koleksiyonda { color:var(--text-gold);border-color:var(--border-gold);background:var(--gold-10) }
/* ── Grid (koleksiyon) ──────────────────────────────────── */
.gem-grid {
display : grid;
grid-template-columns: repeat(2,1fr);
gap : 10px;
}
.tas-mini-kart {
background : var(--bg-1);
border : 1px solid var(--border-0);
border-radius: 13px;
padding : 13px 16px;
display : flex;
align-items : center;
gap : 10px;
min-height : 62px;
}
.tas-mini-kart.koleksiyonda { border-color:var(--border-gold);background:rgba(var(--gold-rgb),.04) }
.tas-mini-emoji { font-size:23px;flex-shrink:0 }
.tas-mini-ad { font-size:16px;color:var(--text-0);flex:1;line-height:1.3 }
.tas-mini-ekle {
background : none;border:1px solid var(--border-1);
border-radius: 50%;width:31px;height:31px;
display:flex;align-items:center;justify-content:center;
cursor:pointer;color:var(--text-2);font-size:16px;
transition:all var(--dur-fast);flex-shrink:0;touch-action:manipulation;
}
.tas-mini-ekle.var { color:var(--text-gold);border-color:var(--border-gold) }
/* ── Filtreler ──────────────────────────────────────────── */
.gem-filtreler { display:flex;flex-direction:column;gap:10px }
.gem-ara {
width:100%;background:var(--bg-2);
border:none;border-bottom:1px solid var(--border-1);
color:var(--text-0);font-family:var(--font-outfit);font-size:18px;
padding:13px 5px;outline:none;
}
.gem-filtre-grup { display:flex;gap:8px }
.gem-filtre-select {
flex:1;background:var(--bg-2);
border:1px solid var(--border-1);border-radius:8px;
color:var(--text-1);font-family:var(--font-outfit);font-size:14px;
padding:9px 8px;outline:none;cursor:pointer;appearance:none;-webkit-appearance:none;
}
/* ── İz sistemi ─────────────────────────────────────────── */
.iz-kart { display:flex;flex-direction:column;gap:8px }
.iz-ust { display:flex;justify-content:space-between;align-items:center }
.iz-tas { font-family:var(--font-cinzel);font-size:14px;letter-spacing:.1em;color:var(--text-0) }
.iz-tarih{ font-size:13px;color:var(--text-2) }
.iz-tip { font-size:13px;color:var(--text-gold-dim);letter-spacing:.1em }
.iz-niyet{ font-family:var(--font-cormorant);font-size:20px;font-style:italic;color:var(--text-1);line-height:1.5 }
.iz-ozet { font-size:16px;color:var(--text-2);line-height:1.5 }
/* ── Günüm ──────────────────────────────────────────────── */
.gunum-ay {
display:flex;align-items:center;gap:18px;
padding:18px 21px;background:var(--bg-1);border:1px solid var(--border-0);border-radius:16px;
}
.gunum-ay-emoji { font-size:47px;flex-shrink:0 }
.gunum-ay-ad { font-family:var(--font-cinzel);font-size:16px;letter-spacing:.15em;text-transform:uppercase;color:var(--text-gold);margin-bottom:3px }
.gunum-ay-enerji{ font-family:var(--font-cormorant);font-size:20px;font-style:italic;color:var(--text-1) }
.gunum-mevcut-tas{ }
.gunum-tas-ad { font-family:var(--font-cinzel);font-size:20px;letter-spacing:.12em;color:var(--text-gold);margin-bottom:8px }
.gunum-tas-not { font-size:16px;color:var(--text-2) }
.ritual-tipler { display:flex;flex-direction:column;gap:10px }
.ritual-tip-label{
display:flex;align-items:center;gap:13px;
font-family:var(--font-cormorant);font-size:21px;color:var(--text-1);cursor:pointer;
padding:10px 0;min-height:57px;
}
.ritual-tip-label input { accent-color:var(--gold);width:23px;height:23px;flex-shrink:0 }
/* ── Niyet (Zemin) ──────────────────────────────────────── */
.niyet-aktif { }
.niyet-cumle { font-family:var(--font-cormorant);font-size:25px;font-style:italic;color:var(--text-0);line-height:1.65;margin-bottom:10px }
.niyet-meta { display:flex;gap:16px;margin-bottom:16px }
.niyet-alan { font-family:var(--font-cinzel);font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--text-gold-dim);background:var(--gold-10);border:1px solid var(--gold-20);border-radius:5px;padding:2px 10px }
.niyet-sure { font-size:14px;color:var(--text-2) }
.niyet-alan-secim{ display:flex;flex-wrap:wrap;gap:8px;margin-bottom:5px }
.niyet-alan-btn{
background:none;border:1px solid var(--border-1);border-radius:8px;
color:var(--text-1);font-family:var(--font-cinzel);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
padding:8px 16px;cursor:pointer;transition:all var(--dur-fast);min-height:44px;touch-action:manipulation;
}
.niyet-alan-btn.aktif{ color:var(--text-gold);border-color:var(--border-gold);background:var(--gold-10) }
.niyet-sure-grup{ margin-top:16px }
.niyet-sure-btn{
flex:1;background:none;border:1px solid var(--border-1);border-radius:8px;
color:var(--text-1);font-family:var(--font-cinzel);font-size:13px;letter-spacing:.1em;
padding:10px;cursor:pointer;transition:all var(--dur-fast);min-height:49px;touch-action:manipulation;
}
.niyet-sure-btn.aktif{ color:var(--text-gold);border-color:var(--border-gold);background:var(--gold-10) }
.niyet-log-btn{ margin-top:5px }
.enerji-slider-wrap{ display:flex;flex-direction:column;gap:10px }
.enerji-slider{ width:100%;accent-color:var(--gold) }
.yon-kart { }
.yon-cumle { font-family:var(--font-cormorant);font-size:21px;font-style:italic;color:var(--text-1);line-height:1.6;margin-bottom:5px }
.yon-tarih { font-size:13px;color:var(--text-2) }
.niyet-arsiv-kart { }
.niyet-arsiv-ust { display:flex;justify-content:space-between;align-items:center;margin-bottom:10px }
.niyet-arsiv-alt { display:flex;justify-content:space-between;align-items:center;margin-top:10px;font-size:14px;color:var(--text-2) }
.niyet-tarih { font-size:13px;color:var(--text-2) }
/* ── Plan engeli — rapor yeniden tasarımı ───────────────── */
.plan-engel-kart {
background : var(--bg-1);
border : 1px solid var(--border-gold);
border-radius: 21px;
padding : 36px 26px;
text-align : center;
margin-top : 10px;
}
.pe-ikon { font-family:var(--font-cinzel);font-size:36px;color:var(--text-gold-dim);margin-bottom:21px;display:block }
.pe-baslik { font-family:var(--font-cinzel);font-size:18px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-gold);margin-bottom:16px;font-weight:400 }
.pe-neden { font-family:var(--font-cormorant);font-size:22px;font-style:italic;color:var(--text-1);line-height:1.65;margin-bottom:23px }
.pe-ozellikler{ text-align:left;margin-bottom:26px;display:flex;flex-direction:column;gap:10px }
.pe-ozellik { font-size:17px;color:var(--text-1);display:flex;gap:10px;align-items:baseline }
.pe-not { font-size:14px;color:var(--text-2);margin-top:13px }
.link-btn { background:none;border:none;color:var(--text-gold);font-size:16px;cursor:pointer;text-decoration:underline;text-underline-offset:2px;padding:0 }
/* ════════════════════════════════════════════════════════════
SPRINT 3 — Harita · Elements Stilleri
════════════════════════════════════════════════════════════ */
/* ── Harita: Kapı sekmeleri ─────────────────────────────── */
.harita-wrap { display:flex;flex-direction:column;gap:13px;padding-bottom:10px }
/* ══════════════════════════════════════════════════════════
ODA BARI — her odada aynı yapışkan gezinme sistemi
(app.js: _odaBarSar birincil + alt sekmeleri buraya sarar)
· Orta bar her zaman görünür ve yapışkan.
· html.mdl-derinlik (aşağı kaydırma): header gizli, bar en üste
çıkar, alt sekmeler açığa çıkar.
══════════════════════════════════════════════════════════ */
.mdl-oda-bar{
position: sticky;
top: calc(var(--header-h) + var(--safe-top));
z-index: 90;
background: var(--bg-0);
margin: 0 -26px 14px; /* view padding'ini (26px) aşıp tam ene yayıl */
padding: 10px 26px 8px;
border-bottom: 1px solid var(--border-0);
transition: top var(--dur-mid) ease;
}
/* Aşağı kaydırma: header gizlenince bar en üste otursun */
html.mdl-derinlik .mdl-oda-bar{
top: var(--safe-top);
}
/* Alt sekmeler: normalde kapalı, derinlikte açığa çıkar */
/* (mdl-alt reveal kaldırıldı — alt sekmeler artık en altta sabit) */
.harita-kapilar{ display:flex;gap:8px }
.harita-kapi-btn{
flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;
background:var(--bg-1);border:1px solid var(--border-0);border-radius:13px;
padding:13px 5px;cursor:pointer;transition:all var(--dur-fast);
min-height:70px;touch-action:manipulation;
}
.harita-kapi-btn.aktif{ border-color:var(--border-gold);background:var(--gold-10) }
.hk-ikon{ font-size:21px;color:var(--text-1) }
.harita-kapi-btn.aktif .hk-ikon{ color:var(--text-gold) }
.hk-ad { font-family:var(--font-cinzel);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--text-2) }
.harita-kapi-btn.aktif .hk-ad{ color:var(--text-gold) }
/* ── Harita: Panel sekmeleri (kapı içi) ─────────────────── */
/* Alt sekmeler: sayfanın EN ALTINDA sabit bar (eski oda-nav yerine).
Kapı değişince içeriği güncellenir; içerik 640px'e ortalanır, bg tam en. */
.harita-paneller{
position: fixed; left:0; right:0; bottom:0; z-index:100;
display:flex; gap:6px; overflow-x:auto;
padding: 10px max(16px, calc((100% - 640px)/2 + 16px)) calc(10px + var(--safe-bottom));
background: var(--bg-1);
border-top: 1px solid var(--border-1);
-webkit-overflow-scrolling: touch;
}
.harita-paneller::-webkit-scrollbar{ display:none }
/* Taşınca (çok sekme) kenarda "devamı var" yumuşaması — yalnız gizli içerik olan kenar */
.harita-paneller.tasiyor.sag-fade{
-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 68px), transparent 100%);
mask-image: linear-gradient(to right, #000 calc(100% - 68px), transparent 100%);
}
.harita-paneller.tasiyor.sol-fade{
-webkit-mask-image: linear-gradient(to right, transparent 0, #000 68px);
mask-image: linear-gradient(to right, transparent 0, #000 68px);
}
.harita-paneller.tasiyor.sol-fade.sag-fade{
-webkit-mask-image: linear-gradient(to right, transparent 0, #000 68px, #000 calc(100% - 68px), transparent 100%);
mask-image: linear-gradient(to right, transparent 0, #000 68px, #000 calc(100% - 68px), transparent 100%);
}
.harita-panel-btn{
flex:1 0 auto;background:none;border:1px solid var(--border-1);border-radius:8px;
color:var(--text-2);font-family:var(--font-cinzel);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
padding:8px 16px;cursor:pointer;transition:color var(--dur-fast),border-color var(--dur-fast),background var(--dur-fast);min-height:42px;touch-action:manipulation;
white-space:nowrap;text-align:center;
}
/* Taşınca butonlar içerik boyutunda kalsın (yayılma yerine kaydır) */
.harita-paneller.tasiyor .harita-panel-btn{ flex:0 0 auto; }
.harita-panel-btn.aktif{ color:var(--text-gold);border-color:var(--border-gold);background:var(--gold-10) }
/* ── Kimlik > Özüm: tek cümle özet ───────────────────────── */
.ozum-tek-cumle{
font-family:var(--font-cormorant);font-size:26px;font-style:italic;color:var(--text-0);
line-height:1.75;text-align:center;padding:26px 16px;
border-bottom:1px solid var(--border-0);margin-bottom:5px;
}
/* ── Insight box (Kimlik panelleri) ─────────────────────── */
.insight-box{
display:flex;gap:13px;align-items:baseline;
padding:13px 16px;border-radius:10px;margin-bottom:10px;
font-family:var(--font-cormorant);font-size:20px;line-height:1.5;color:var(--text-1);
background:var(--bg-2);
}
.insight-box:last-child{ margin-bottom:0 }
.insight-box.gold{ background:var(--gold-10);border:1px solid var(--gold-20) }
.insight-box.rose{ background:rgba(139,58,90,.08);border:1px solid rgba(139,58,90,.2) }
.insight-lbl{ font-family:var(--font-cinzel);font-size:12px;letter-spacing:.1em;color:var(--text-gold-dim);flex-shrink:0 }
/* ── Elements ───────────────────────────────────────────── */
.els-sentez{ }
.els-dominant{ display:flex;align-items:center;gap:18px;padding:10px 0 21px;border-bottom:1px solid var(--border-0);margin-bottom:18px }
.els-dominant-emoji{ font-size:47px;flex-shrink:0 }
.els-dominant-ad{ display:block;font-family:var(--font-cinzel);font-size:20px;letter-spacing:.15em;color:var(--text-gold);margin-bottom:5px }
.els-dominant-ac{ display:block;font-family:var(--font-cormorant);font-size:18px;font-style:italic;color:var(--text-1);line-height:1.5 }
.els-bars{ display:flex;flex-direction:column;gap:10px }
.els-bar-row{ display:flex;align-items:center;gap:10px }
.els-bar-row.els-bar-dom .els-bar-ad{ color:var(--text-gold) }
.els-bar-emoji{ font-size:18px;flex-shrink:0;width:23px }
.els-bar-ad { font-size:14px;color:var(--text-1);width:62px;flex-shrink:0 }
.els-bar-track{ flex:1;height:8px;background:var(--bg-2);border-radius:3px;overflow:hidden }
.els-bar-fill { height:100%;background:linear-gradient(90deg,var(--gold),rgba(var(--gold-rgb),.5));border-radius:3px;transition:width .4s ease }
.els-bar-pct { font-size:13px;color:var(--text-2);width:42px;text-align:right;flex-shrink:0 }
.els-eksik-uyari{ font-size:16px;color:var(--text-2);margin-top:16px;line-height:1.5 }
.els-katman-ac { font-family:var(--font-cormorant);font-size:18px;font-style:italic;color:var(--text-1);line-height:1.55;margin-bottom:16px }
/* ════════════════════════════════════════════════════════════
AUTH — Header giriş butonu
════════════════════════════════════════════════════════════ */
.icon-btn-text {
background : none;
border : 1px solid var(--border-gold);
border-radius : 8px;
color : var(--text-gold);
font-family : var(--font-cinzel);
font-size : 12px;
letter-spacing: .2em;
text-transform: uppercase;
padding : 8px 16px;
cursor : pointer;
transition : all var(--dur-fast);
touch-action : manipulation;
min-height : 39px;
}
.icon-btn-text:hover { background: var(--gold-10); }
/* ════════════════════════════════════════════════════════════
SPRINT 4 — Accordion (Hologenetik, İ Ching panelleri)
════════════════════════════════════════════════════════════ */
.acc-liste{ display:flex;flex-direction:column;gap:8px }
.acc-kart { border:1px solid var(--border-0);border-radius:10px;overflow:hidden }
.acc-baslik{
width:100%;display:flex;justify-content:space-between;align-items:center;
background:var(--bg-2);border:none;color:var(--text-0);
font-family:var(--font-cormorant);font-size:20px;
padding:14px 18px;cursor:pointer;text-align:left;touch-action:manipulation;
min-height:57px;
}
.acc-ok { color:var(--text-gold-dim);font-size:14px;flex-shrink:0;margin-left:10px }
.acc-icerik{ padding:16px 18px;border-top:1px solid var(--border-0) }
/* ════════════════════════════════════════════════════════════
SPRINT 5 — Ritim > Gezegenler + Dönüşüm panelleri
Ritim > Yarın — zaman döngüleri grid
════════════════════════════════════════════════════════════ */
/* Gezegen listesi */
.gez-liste { display:flex;flex-direction:column }
.gez-satir { display:flex;align-items:center;gap:13px;padding:14px 0;border-bottom:1px solid var(--border-0) }
.gez-satir:last-child { border-bottom:none }
.gez-sem { font-size:23px;width:31px;text-align:center;color:rgba(107,130,200,.8);flex-shrink:0 }
.gez-ad { font-family:var(--font-cormorant);font-size:20px;font-style:italic;color:var(--text-1);flex:1 }
.gez-sag { text-align:right;flex-shrink:0 }
.gez-burc { font-family:var(--font-cormorant);font-size:20px;font-style:italic;color:var(--text-gold) }
.gez-detay { display:block;font-size:13px;color:var(--text-2) }
/* Ritim Yarın — zaman döngüleri */
.ritim-yarin-grid { display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-bottom:18px }
.ry-kart {
background:var(--bg-2);border:1px solid var(--border-1);border-radius:13px;
padding:21px 16px;text-align:center;display:flex;flex-direction:column;gap:5px;align-items:center
}
.ry-sayi { font-family:var(--font-cinzel);font-size:36px;font-weight:400;line-height:1 }
.ry-etiket{ font-family:var(--font-cinzel);font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--text-2) }
/* ── Auth modal: profil ─────────────────────────────────── */
.sf-lbl-not { font-family:var(--font-cormorant);font-style:italic;text-transform:none;letter-spacing:0;font-size:16px;color:var(--text-2) }
.auth-tarih-grup { display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:5px }
.sf-select {
background:var(--bg-2);border:none;border-bottom:1px solid var(--border-1);
color:var(--text-0);font-family:var(--font-cormorant);font-size:22px;
padding:13px 5px;outline:none;cursor:pointer;appearance:none;
-webkit-appearance:none;text-align:center;width:100%;
}
.auth-profil-kilit-uyari {
font-size:14px;color:var(--warn);margin-top:16px;
padding:10px 13px;border:1px solid rgba(139,58,90,.3);border-radius:8px;line-height:1.5;
}
/* ── nabız WOW metni ────────────────────────────────────── */
.nk-wow {
font-family:var(--font-cormorant);font-size:21px;font-style:italic;
color:var(--text-0);line-height:1.75;margin-bottom:8px;
}
/* ════════════════════════════════════════════════════════════
FAZ 1 — Value-first · Nabız geçmiş · Taş widget
════════════════════════════════════════════════════════════ */
/* Value-first davet */
.sf-value-first { display:flex;flex-direction:column;gap:16px }
.sf-vf-ay { display:flex;align-items:center;gap:18px }
.sf-vf-ay-emoji { font-size:47px;flex-shrink:0 }
.sf-vf-ay-ad { font-family:var(--font-cinzel);font-size:16px;letter-spacing:.15em;text-transform:uppercase;color:var(--text-gold);margin-bottom:3px }
.sf-vf-ay-enerji{ font-family:var(--font-cormorant);font-size:20px;font-style:italic;color:var(--text-1) }
.sf-vf-mesaj { font-family:var(--font-cormorant);font-size:22px;font-style:italic;color:var(--text-0);line-height:1.7 }
/* Nabız geçmiş 7 gün */
.sf-gecmis { }
.gecmis-grid { display:flex;gap:8px;align-items:flex-end;height:73px }
.gecmis-sutun{ display:flex;flex-direction:column;align-items:center;gap:5px;flex:1 }
.gecmis-bar {
width:100%;border-radius:3px 3px 0 0;
min-height:10px;max-height:52px;height:47px;
opacity:.7;transition:opacity .2s;
}
.gecmis-sutun:hover .gecmis-bar { opacity:1 }
.gecmis-gun { font-family:var(--font-cinzel);font-size:10px;letter-spacing:.05em;color:var(--text-2) }
/* Taş widget */
.sf-tas-widget { }
.sf-tas-ic { display:flex;align-items:center;gap:18px }
.sf-tas-emoji{ font-size:36px;flex-shrink:0 }
.sf-tas-ad { font-family:var(--font-cinzel);font-size:17px;letter-spacing:.1em;color:var(--text-gold) }
/* ════════════════════════════════════════════════════════════
SOFA TAMAMLAMA — Derinlik · Gölge · Esma · Paylaş
════════════════════════════════════════════════════════════ */
/* Derinlik ilerleme çubuğu */
.sf-derinlik {
background : var(--bg-1);
border : 1px solid var(--border-0);
border-radius: 13px;
padding : 16px 21px;
}
.sf-derinlik-tam {
border-color: var(--border-gold);
background : var(--gold-10);
text-align : center;
}
.sf-derinlik-ust {
display : flex;
justify-content: space-between;
align-items : center;
margin-bottom : 10px;
}
.sf-derinlik-etiket {
font-family : var(--font-cinzel);
font-size : 12px;
letter-spacing: .2em;
text-transform: uppercase;
color : var(--text-gold-dim);
}
.sf-derinlik-hak {
font-size : 13px;
color : var(--text-2);
}
.sf-derinlik-bar-track {
height : 5px;
background : var(--bg-2);
border-radius: 2px;
overflow : hidden;
}
.sf-derinlik-bar-fill {
height : 100%;
background: linear-gradient(90deg, var(--gold), rgba(var(--gold-rgb),.5));
border-radius: 2px;
transition: width .6s ease;
}
.sf-derinlik-ipucu {
font-size : 13px;
color : var(--text-2);
margin-top : 8px;
font-style : italic;
}
/* Gölge sorusu */
.sf-golge { }
.sf-golge-soru {
font-family: var(--font-cormorant);
font-size : 25px;
font-style : italic;
color : var(--text-0);
line-height: 1.7;
margin-bottom: 13px;
}
.sf-golge-btn { font-size:16px;margin-top:5px }
.sf-golge-input { display:none }
/* Esma */
.sf-esma { }
.sf-esma-ic { display:flex;flex-direction:column;gap:8px }
.sf-esma-ad {
font-family : var(--font-cinzel);
font-size : 22px;
letter-spacing: .15em;
color : var(--text-gold);
}
.sf-esma-anlam {
font-family: var(--font-cormorant);
font-size : 21px;
font-style : italic;
color : var(--text-1);
line-height: 1.65;
}
/* Paylaş butonu (Pusula başlığının yanında) */
.sf-pusula-ust {
display : flex;
justify-content: space-between;
align-items : center;
margin-bottom : 18px;
}
.sf-pusula-ust .sf-kart-baslik { margin-bottom:0 }
.sf-paylas-btn {
background : none;
border : 1px solid var(--border-0);
border-radius: 8px;
color : var(--text-2);
font-size : 18px;
padding : 5px 10px;
cursor : pointer;
transition : all var(--dur-fast);
touch-action : manipulation;
line-height : 1;
}
.sf-paylas-btn:hover {
border-color: var(--border-gold);
color : var(--text-gold);
}
/* ════════════════════════════════════════════════════════════
HARİTA — Motor yükleniyor durumu
════════════════════════════════════════════════════════════ */
.harita-yukl {
display : flex;
align-items : center;
justify-content: center;
min-height : 260px;
}
.harita-yukl-ic { text-align:center }
.harita-yukl-simge{
font-size : 42px;
color : var(--text-gold-dim);
margin-bottom: 18px;
display : block;
animation : nefes 2s ease-in-out infinite;
}
.harita-yukl-mesaj{ font-family:var(--font-cinzel);font-size:14px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-gold-dim);margin-bottom:8px }
.harita-yukl-alt { font-size:16px;color:var(--text-2) }
/* ════════════════════════════════════════════════════════════
ZEMİN — Niyet progress · GEMOLOJİ — Tamamlama stilleri
════════════════════════════════════════════════════════════ */
/* Niyet progress bar */
.niyet-progress-track {
height:5px;background:var(--bg-2);border-radius:2px;
overflow:hidden;margin:13px 0 5px;
}
.niyet-progress-fill {
height:100%;
background:linear-gradient(90deg,var(--gold),rgba(var(--gold-rgb),.5));
border-radius:2px;transition:width .4s ease;
}
.niyet-progress-pct {
font-size:13px;color:var(--text-2);margin-bottom:13px;
}
/* ════════════════════════════════════════════════════════════
ELEMENTS TAM — Sentez · Eksik · Çelişki · Katman
════════════════════════════════════════════════════════════ */
.els-sentez-ust{ display:flex;justify-content:space-between;align-items:center;margin-bottom:10px }
.els-sentez-ust .sf-kart-baslik{ margin-bottom:0 }
.els-dom-badge {
font-family:var(--font-cinzel);font-size:13px;letter-spacing:.1em;
color:var(--text-gold);background:var(--gold-10);border:1px solid var(--gold-20);
border-radius:6px;padding:3px 13px;
}
.els-sentez-ac{ font-family:var(--font-cormorant);font-size:20px;font-style:italic;color:var(--text-1);line-height:1.6;margin-bottom:16px }
.els-eksik{ }
.els-eksik-el{ font-size:17px;color:var(--text-0);margin-bottom:13px }
.els-denge-grup{ display:flex;gap:13px;align-items:baseline;margin-bottom:8px }
.els-denge-etiket{ font-family:var(--font-cinzel);font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--text-2);flex-shrink:0;width:47px }
.els-denge-val{ font-size:17px;color:var(--text-1);line-height:1.5 }
.els-celiski{ border-color:rgba(139,58,90,.25) }
.els-katman-ust{ display:flex;justify-content:space-between;align-items:center;margin-bottom:8px }
.els-katman-ust .sf-kart-baslik{ margin-bottom:0 }
.els-katman-dom{ font-family:var(--font-cinzel);font-size:13px;color:var(--text-gold-dim) }
.els-ad-giris{ }
/* ════════════════════════════════════════════════════════════
ÜST MENÜ DROPDOWN (AyarMenu) — kimlik + font + tema + renk
════════════════════════════════════════════════════════════ */
.hdr-dropdown {
position : fixed;
z-index : 2000;
width : 390px;
max-width : calc(100vw - 31px);
background : var(--bg-1);
border : 1px solid var(--border-1);
border-radius: 18px;
box-shadow : var(--shadow-lg);
padding : 21px;
opacity : 0;
transform : translateY(-10px);
transition : opacity var(--dur-fast), transform var(--dur-fast);
max-height : calc(100vh - 117px);
overflow-y : auto;
}
.hdr-dropdown.acik { opacity: 1; transform: translateY(0); }
.dd-bolum { margin-bottom: 18px; }
.dd-ayrac { height: 1px; background: var(--border-0); margin: 18px 0; }
.dd-baslik {
font-family : var(--font-cinzel);
font-size : 14px;
letter-spacing: .12em;
text-transform: uppercase;
color : var(--text-gold);
margin-bottom : 13px;
}
/* Kişi bilgileri */
.dd-bilgi {
display : flex;
justify-content: space-between;
padding : 6px 0;
font-family : var(--font-cormorant);
font-size : 20px;
}
.dd-k { color: var(--text-2); }
.dd-v { color: var(--text-0); text-align: right; }
.dd-bos { color: var(--text-2); font-style: italic; font-size: 18px; }
/* Font kontrol */
.dd-font { display: flex; align-items: center; gap: 13px; }
.dd-font-btn {
width: 52px; height: 52px;
background: var(--bg-2);
border: 1px solid var(--border-1);
border-radius: 10px;
color: var(--text-0);
font-size: 23px; cursor: pointer;
transition: border-color var(--dur-fast), color var(--dur-fast);
}
.dd-font-btn:hover { border-color: var(--gold); color: var(--text-gold); }
.dd-font-a { font-family: var(--font-cormorant); font-size: 23px; color: var(--text-1); }
/* Tema satırı */
.dd-tema-sat { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dd-tema-btn {
padding: 16px;
background: var(--bg-2);
border: 1px solid var(--border-1);
border-radius: 10px;
color: var(--text-1);
font-family: var(--font-cinzel);
font-size: 17px; letter-spacing: .05em;
cursor: pointer;
transition: all var(--dur-fast);
}
.dd-tema-btn.aktif { border-color: var(--gold); color: var(--text-gold); background: var(--gold-10); }
/* Renk paleti */
.dd-palet-grup { margin-bottom: 13px; }
.dd-palet-et {
font-family: var(--font-outfit);
font-size: 13px; letter-spacing: .1em;
text-transform: uppercase;
color: var(--text-2); margin-bottom: 8px;
}
.dd-swatches { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.dd-swatch {
aspect-ratio: 1;
border: 1px solid var(--border-1);
border-radius: 8px;
cursor: pointer;
transition: transform var(--dur-fast), border-color var(--dur-fast);
}
.dd-swatch:hover { transform: scale(1.1); border-color: var(--gold); }
.dd-reset {
width: 100%; margin-top: 5px;
padding: 12px;
background: transparent;
border: 1px solid var(--border-1);
border-radius: 10px;
color: var(--text-2);
font-family: var(--font-outfit); font-size: 16px;
cursor: pointer;
}
.dd-reset:hover { color: var(--text-0); border-color: var(--border-2); }
/* Profil + çıkış */
.dd-profil {
width: 100%; padding: 17px;
background: var(--gold-10);
border: 1px solid var(--border-gold);
border-radius: 13px;
color: var(--text-gold);
font-family: var(--font-cinzel); font-size: 17px; letter-spacing: .06em;
cursor: pointer; margin-bottom: 10px;
transition: background var(--dur-fast);
}
.dd-profil:hover { background: var(--gold-20); }
.dd-cikis {
width: 100%; padding: 13px;
background: transparent; border: none;
color: var(--error);
font-family: var(--font-outfit); font-size: 17px;
cursor: pointer;
}
.dd-cikis:hover { text-decoration: underline; }
/* ════════════════════════════════════════════════════════════
TARİH DEĞİŞİKLİĞİ UYARI POPUP (Modulor dili)
════════════════════════════════════════════════════════════ */
.mtu-ort {
position: fixed; inset: 0;
/* Auth/profil modalı 9600'de. Bu uyarı profil ekranından tetiklendiği
için ONUN ÜSTÜNDE olmalı — yoksa profil kartının arkasında kalıyordu. */
z-index: 9700;
background: rgba(0,0,0,.6);
backdrop-filter: var(--blur-bg);
display: flex; align-items: center; justify-content: center;
padding: 31px;
opacity: 0; transition: opacity var(--dur-mid);
}
.mtu-ort.acik { opacity: 1; }
.mtu-kart {
max-width: 520px;
background: var(--bg-1);
border: 1px solid var(--border-gold);
border-radius: 21px;
padding: 36px 31px;
text-align: center;
transform: scale(.94); transition: transform var(--dur-mid);
}
.mtu-ort.acik .mtu-kart { transform: scale(1); }
.mtu-ikon { font-size: 42px; color: var(--text-gold); margin-bottom: 16px; }
.mtu-baslik {
font-family: var(--font-cinzel);
font-size: 23px; letter-spacing: .04em;
color: var(--text-gold); margin-bottom: 18px;
}
.mtu-metin {
font-family: var(--font-cormorant);
font-size: 21px; line-height: 1.7;
color: var(--text-1); margin-bottom: 31px;
}
.mtu-butonlar { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.mtu-vazgec, .mtu-onay {
padding: 17px;
border-radius: 13px;
font-family: var(--font-cinzel); font-size: 17px; letter-spacing: .05em;
cursor: pointer;
}
.mtu-vazgec {
background: transparent;
border: 1px solid var(--border-1);
color: var(--text-1);
}
.mtu-vazgec:hover { border-color: var(--border-2); color: var(--text-0); }
.mtu-onay {
background: var(--gold-10);
border: 1px solid var(--border-gold);
color: var(--text-gold);
}
.mtu-onay:hover { background: var(--gold-20); }
/* ════════════════════════════════════════════════════════════
SOFA — 4 KAPI (ayrık odalar, v1 derinlik hissi)
Her kapı kendi data-oda rengini taşır (tokens.css'ten).
════════════════════════════════════════════════════════════ */
.sofa-kapilar {
display : grid;
grid-template-columns: 1fr 1fr;
gap : 14px; /* odalar birbirinden AYRI */
margin-top : 24px;
}
/* Masaüstü: 4 oda TEK SATIR (1×4) */
@media (min-width: 860px) {
.sofa-kapilar { grid-template-columns: repeat(4, 1fr); }
}
.kapi {
position : relative;
background : var(--bg-1);
border : 1px solid var(--border-1);
border-radius: 14px; /* 4 köşe yuvarlak */
padding : 22px 18px 20px;
text-align : left;
cursor : pointer;
min-height : 132px;
display : flex;
flex-direction: column;
gap : 10px;
overflow : hidden;
transition : border-color var(--dur-mid), background var(--dur-mid), transform var(--dur-fast);
}
/* Alt kenarda ince oda-rengi vurgusu (dinlenme hâli) */
.kapi::before {
content: '';
position: absolute;
left: 0; right: 0; bottom: 0;
height: 3px;
background: var(--oda-cizgi, var(--altin));
opacity: .5;
transition: opacity var(--dur-mid), height var(--dur-mid);
}
/* Arka plan mandala deseni — oda rengiyle */
.kapi::after {
content: '';
position: absolute;
right: -28px; bottom: -28px;
width: 110px; height: 110px;
border-radius: 50%;
border: 1px solid var(--oda-cizgi, var(--altin));
opacity: .04;
transition: opacity var(--dur-mid), transform var(--dur-mid);
pointer-events: none;
}
/* HOVER: oda rengi belirginleşir + dış çerçeve o renge döner +
kart hafif yükselir (v1 "oda derinliği" hissi) */
.kapi:hover {
background : var(--bg-2);
border-color : var(--oda-cizgi, var(--altin));
transform : translateY(-3px);
}
.kapi:hover::before { opacity: 1; height: 4px; }
.kapi:hover::after { opacity: .09; transform: scale(1.15); }
.kapi:hover .kapi-baslik { color: var(--oda-aksan, var(--text-0)); }
.kapi:active { transform: translateY(-1px); }
.kapi-baslik {
display : flex;
align-items: center;
gap : 10px;
font-family: var(--font-cinzel);
font-size : 19px;
letter-spacing: .06em;
color : var(--text-0);
z-index : 1;
transition : color var(--dur-mid);
}
.kapi-ikon {
font-size: 22px;
color : var(--oda-aksan, var(--altin));
display : inline-flex;
align-items: center;
vertical-align: middle;
}
.kapi-ikon svg { display: block; }
.kapi-ac {
font-family: var(--font-cormorant);
font-size : 16px;
line-height: 1.5;
color : var(--text-1);
z-index : 1;
}
.kapi-ok { color: var(--oda-aksan, var(--altin)); font-size: 16px; }
@media (max-width: 480px) {
.sofa-kapilar { grid-template-columns: 1fr; } /* çok dar ekranda tek sütun */
}
/* ════════════════════════════════════════════════════════════
LIGHT MODE OKUNABİLİRLİK — biraz bold + kontrast artışı
Açık zeminde ince fontlar soluk görünüyordu; ağırlık eklenir.
════════════════════════════════════════════════════════════ */
html.light body { font-weight: 400; }
html.light .metin-statik,
html.light .metin-ai,
html.light .kapi-ac,
html.light .sf-lbl,
html.light .dd-bilgi,
html.light p { font-weight: 450; }
html.light .sf-kart-baslik,
html.light .kapi-baslik,
html.light .dd-baslik,
html.light .nav-etiket { font-weight: 500; }
/* İnce ayraç çizgileri light'ta biraz daha belirgin */
html.light { --border-0: rgba(30,24,38,.12); --border-1: rgba(30,24,38,.20); }
/* ════════════════════════════════════════════════════════════
ATMOSFERİK ARKA PLAN — yıldız tozu + oda-özel geometrik SVG
Sayfanın altında hafif görünür; içeriğin gerisinde durur.
════════════════════════════════════════════════════════════ */
/* Genel yıldız tozu — tüm sayfalarda, en altta */
body::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
background-image:
radial-gradient(1px 1px at 15% 20%, rgba(255,255,255,.25) 0%, transparent 100%),
radial-gradient(1px 1px at 85% 8%, rgba(255,255,255,.18) 0%, transparent 100%),
radial-gradient(2px 2px at 28% 12%, rgba(201,169,110,.3) 0%, transparent 100%);
}
html.light body::before {
background-image:
radial-gradient(2px 2px at 28% 12%, rgba(160,120,60,.12) 0%, transparent 100%),
radial-gradient(1px 1px at 70% 40%, rgba(120,100,160,.10) 0%, transparent 100%),
radial-gradient(900px 700px at 80% 0%, rgba(180,150,220,.08) 0%, transparent 70%);
}
/* ══════════════════════════════════════════════════════
ODA ARKA PLANLARI — v1'den BİREBİR (7 Tem 2026)
Her view v1'deki kendi body::before katmanını taşır.
Zemin: v1 dokusu + YENİ hafif pusula SVG (v1'de yoktu).
══════════════════════════════════════════════════════ */
section[data-view]::after {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
/* z-index: 0 iken bu katman, konumlandırılmamış içeriğin ÜSTÜNE
boyanıyordu — kartların üstünde bir pus, düşen kontrast. -1
ile kesin olarak arkaya iner. Doku kalır, önü kapatmaz. */
z-index: -1;
/* Sayfa dokusu %50 silik: kontrast içeriğin lehine. */
opacity: .5;
}
/* Pasif (gizli) view'ın arka planı görünmesin */
section[data-view][style*="display:none"]::after,
section[data-view][style*="display: none"]::after { display: none !important; }
/* Light modda desenler açık kalır, dozu yarıya iner
(beyaz yıldız tozu açık zeminde zaten görünmez; grid, atmosfer
ve pusula açık temada da seçilir) */
html.light section[data-view]::after { opacity: .5; }
html.light section[data-view="sofa"]::after { opacity: .12; }
/* ── SOFA — v1 app.html: fractal noise (tanecik dokusu) ── */
section[data-view="sofa"]::after {
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
opacity: 0.05; /* üst doku .5'e indi; tanecik de yarılandı */
}
/* ── HARİTA — v1 harita.html: ince grid + mavi/altın atmosfer ── */
section[data-view="harita"]::after {
background:
repeating-linear-gradient(0deg, transparent, transparent 79px,
rgba(123,156,219,.06) 79px, rgba(123,156,219,.06) 80px),
repeating-linear-gradient(90deg, transparent, transparent 79px,
rgba(123,156,219,.04) 79px, rgba(123,156,219,.04) 80px),
radial-gradient(ellipse 800px 600px at 90% -10%, rgba(123,156,219,.20) 0%, transparent 65%),
radial-gradient(ellipse 600px 800px at -10% 90%, rgba(201,145,58,.14) 0%, transparent 65%);
}
/* ── ELEMENTS — v1 elements.css: yıldız tozu + atmosfer (atm: 123,143,212) ── */
section[data-view="elements"]::after {
background:
radial-gradient(circle 600px at 80% 10%, rgba(123,143,212,.10), transparent),
radial-gradient(circle 500px at 5% 90%, rgba(123,143,212,.08), transparent),
radial-gradient(1px 1px at 15% 25%, rgba(255,255,255,0.45) 0%, transparent 100%),
radial-gradient(1px 1px at 75% 12%, rgba(255,255,255,0.35) 0%, transparent 100%),
radial-gradient(1px 1px at 45% 65%, rgba(255,255,255,0.25) 0%, transparent 100%),
radial-gradient(2px 2px at 28% 18%, rgba(140,200,255,0.65) 0%, transparent 100%),
radial-gradient(1px 1px at 65% 45%, rgba(120,180,255,0.55) 0%, transparent 100%),
radial-gradient(1px 1px at 88% 70%, rgba(100,160,240,0.45) 0%, transparent 100%),
radial-gradient(1000px 660px at 10% 90%, rgba(20,60,140,0.28) 0%, transparent 70%),
radial-gradient(800px 500px at 95% 5%, rgba(30,80,160,0.26) 0%, transparent 70%);
}
/* ── ZEMİN — v1 zemin.html dokusu + YENİ hafif pusula (alt orta) ── */
section[data-view="zemin"]::after {
background-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Cg stroke='rgba(212,164,100,0.30)' fill='none'%3E%3Ccircle cx='200' cy='200' r='150' stroke-width='0.8'/%3E%3Ccircle cx='200' cy='200' r='108' stroke-width='0.5' stroke-dasharray='4,6'/%3E%3Ccircle cx='200' cy='200' r='14' stroke-width='1'/%3E%3Cpolygon points='200,64 210,192 200,216 190,192' fill='rgba(212,164,100,0.32)'/%3E%3Cpolygon points='200,336 210,216 200,192 190,216' fill='rgba(212,164,100,0.08)'/%3E%3Cline x1='56' y1='200' x2='184' y2='200' stroke-width='0.7'/%3E%3Cline x1='216' y1='200' x2='344' y2='200' stroke-width='0.7'/%3E%3Ccircle cx='200' cy='64' r='3' fill='rgba(212,164,100,0.32)'/%3E%3Ccircle cx='200' cy='336' r='2.5' fill='rgba(212,164,100,0.26)'/%3E%3Ccircle cx='56' cy='200' r='2.5' fill='rgba(212,164,100,0.26)'/%3E%3Ccircle cx='344' cy='200' r='2.5' fill='rgba(212,164,100,0.26)'/%3E%3C/g%3E%3C/svg%3E"),
radial-gradient(1px 1px at 15% 20%, rgba(255,255,255,.3) 0%, transparent 100%),
radial-gradient(1px 1px at 82% 8%, rgba(255,255,255,.2) 0%, transparent 100%),
radial-gradient(1px 1px at 45% 65%, rgba(255,255,255,.15) 0%, transparent 100%),
radial-gradient(2px 2px at 28% 12%, rgba(212,164,100,.5) 0%, transparent 100%),
radial-gradient(1px 1px at 70% 42%, rgba(180,140,80,.4) 0%, transparent 100%),
radial-gradient(800px 600px at 85% 5%, rgba(100,60,20,.22) 0%, transparent 70%),
radial-gradient(700px 800px at 5% 90%, rgba(80,50,15,.16) 0%, transparent 70%);
background-repeat: no-repeat;
background-position: center bottom -40px, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
background-size: min(72vw, 420px), auto, auto, auto, auto, auto, auto, auto;
}
/* ── GEMOLOJİ — v1 gemoloji.html: ince grid + mavi yıldız tozu ── */
section[data-view="gemoloji"]::after {
background:
repeating-linear-gradient(0deg, transparent, transparent 79px,
rgba(80,100,200,.05) 79px, rgba(80,100,200,.05) 80px),
repeating-linear-gradient(90deg, transparent, transparent 79px,
rgba(80,100,200,.035) 79px, rgba(80,100,200,.035) 80px),
radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,.28) 0%, transparent 100%),
radial-gradient(1px 1px at 80% 10%, rgba(255,255,255,.20) 0%, transparent 100%),
radial-gradient(2px 2px at 30% 15%, rgba(160,180,255,.5) 0%, transparent 100%),
radial-gradient(1px 1px at 70% 50%, rgba(130,150,240,.4) 0%, transparent 100%),
radial-gradient(900px 700px at 85% 5%, rgba(30,50,150,.30) 0%, transparent 70%),
radial-gradient(700px 700px at 5% 90%, rgba(20,40,120,.24) 0%, transparent 70%);
}
/* İçerik SVG'nin üstünde kalsın */
#app-main, .header-ic { position: relative; z-index: 1; }
/* bottom-nav zaten fixed — sadece z-index ver, position'a DOKUNMA (yoksa sabitliği bozulur) */
#bottom-nav { z-index: 100; }
/* ── Nabız SVG (v1'den taşınan animasyonlu ritim görselleri) ── */
.ritim-btn .ritim-ikon svg{ display:block; }
.ritim-btn .ritim-ikon{ display:flex; align-items:center; justify-content:center; }
.nk-badge svg{ display:inline-block; width:22px; height:22px; vertical-align:middle; margin-right:4px; }
.nk-badge{ display:inline-flex; align-items:center; }
/* Seçili ritmin büyük, canlı görseli (hareket burada okunur) */
.nk-svg-buyuk{ display:flex; justify-content:center; align-items:center; margin:4px 0 12px; }
.nk-svg-buyuk svg{ width:96px; height:96px; }
.ritim-btn .ritim-ikon svg{ width:52px; height:52px; }
/* ── Sofa: inline AI yorum (WOW) + nabız değiştir ── */
.sf-ai-metin{ margin:6px 0 4px; }
.sf-ai-metin p{ font-family:var(--font-cormorant,'Cormorant Garamond',Georgia,serif); font-size:clamp(17px,4.4vw,20px); line-height:1.75; color:var(--text-1); margin:0 0 10px; }
.sf-ai-alt{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:6px; }
.sf-ai-limit{ font-size:12px; color:var(--text-2); font-style:italic; }
.nk-degistir{ margin-top:12px; background:none; border:1px solid var(--border-1); border-radius:8px; padding:7px 14px; font-family:var(--font-cinzel,'Cinzel',serif); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-2); cursor:pointer; transition:color .15s,border-color .15s; }
.nk-degistir:hover{ color:var(--text-gold); border-color:rgba(var(--gold-rgb),.35); }
/* ═══════════════════════════════════════════════════════════
SOFA — Sessiz mod · Mini adım · Günlüğüm · Pusula zenginliği
═══════════════════════════════════════════════════════════ */
/* ── Sessiz mod şeridi ──────────────────────────────────── */
.sf-sessiz-serit {
display : flex;
align-items : center;
gap : 12px;
padding : 12px 14px;
margin : 10px 0;
border : 1px solid var(--border-0);
border-radius: 12px;
background : transparent;
}
.sf-sessiz-serit.sf-sessiz-acik {
border-color: var(--border-gold);
background : rgba(var(--gold-rgb),.05);
}
.sf-sessiz-ikon {
font-size : 18px;
color : var(--text-gold-dim);
flex-shrink: 0;
}
.sf-sessiz-ic { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.sf-sessiz-ad {
font-family : var(--font-cinzel);
font-size : 11px;
letter-spacing: .16em;
text-transform: uppercase;
color : var(--text-gold);
}
.sf-sessiz-ac {
font-family: var(--font-cormorant);
font-size : 15px;
font-style : italic;
color : var(--text-2);
line-height: 1.4;
}
.sf-sessiz-btn {
flex-shrink : 0;
background : none;
border : 1px solid var(--border-0);
border-radius : 7px;
padding : 7px 13px;
font-family : var(--font-cinzel);
font-size : 10px;
letter-spacing: .12em;
text-transform: uppercase;
color : var(--text-2);
cursor : pointer;
transition : border-color .2s ease, color .2s ease;
}
.sf-sessiz-btn:hover {
border-color: var(--border-gold);
color : var(--text-gold);
}
/* ── Mini adım ──────────────────────────────────────────── */
.nk-adim {
display : flex;
align-items : center;
gap : 10px;
flex-wrap : wrap;
margin-top : 12px;
padding : 11px 12px;
border : 1px dashed var(--border-0);
border-radius: 10px;
}
.nk-adim-etiket {
font-family : var(--font-cinzel);
font-size : 9px;
letter-spacing: .18em;
text-transform: uppercase;
color : var(--text-gold-dim);
flex-shrink : 0;
}
.nk-adim-metin {
font-family: var(--font-cormorant);
font-size : 17px;
color : var(--text-1);
line-height: 1.45;
flex : 1;
min-width : 140px;
}
.nk-adim-btn {
flex-shrink : 0;
background : none;
border : 1px solid var(--border-gold);
border-radius : 7px;
padding : 6px 13px;
font-family : var(--font-cinzel);
font-size : 10px;
letter-spacing: .12em;
text-transform: uppercase;
color : var(--text-gold);
cursor : pointer;
transition : background .2s ease;
}
.nk-adim-btn:hover { background: rgba(var(--gold-rgb),.1); }
/* Tamamlandı — altın çiçeklenme (Zemin kutlamasıyla aynı dil) */
.nk-adim-tamam {
border-style: solid;
border-color: var(--border-gold);
background : rgba(var(--gold-rgb),.06);
animation : adimCicek .7s ease;
}
.nk-adim-tik {
font-size : 15px;
color : var(--text-gold);
flex-shrink: 0;
}
.nk-adim-tamam .nk-adim-metin { color: var(--text-2); font-style: italic; }
@keyframes adimCicek {
0% { transform: scale(.97); box-shadow: 0 0 0 0 rgba(var(--gold-rgb),.35); }
60% { transform: scale(1); box-shadow: 0 0 0 9px rgba(var(--gold-rgb),0); }
100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(var(--gold-rgb),0); }
}
/* ── Pusula: enerji barı + görev ────────────────────────── */
.pu-enerji {
margin-top : 16px;
padding-top: 14px;
border-top : 1px solid var(--border-0);
}
.pu-enerji-ust {
display : flex;
align-items : baseline;
justify-content: space-between;
margin-bottom : 7px;
}
.pu-enerji-ad {
font-family : var(--font-cinzel);
font-size : 11px;
letter-spacing: .15em;
text-transform: uppercase;
color : var(--text-2);
}
.pu-enerji-etiket {
font-family: var(--font-cormorant);
font-size : 15px;
font-style : italic;
color : var(--text-2);
}
.pu-enerji-track {
height : 5px;
background : var(--bg-2);
border-radius: 2px;
overflow : hidden;
}
.pu-enerji-fill {
height : 100%;
border-radius: 2px;
opacity : .85;
transition : width .6s ease;
}
.pu-gorev {
margin-top : 14px;
font-family: var(--font-cormorant);
font-size : 19px;
line-height: 1.5;
color : var(--text-1);
font-style : italic;
}
/* ── Günlüğüm ───────────────────────────────────────────── */
.sf-gunluk-sayac {
display : flex;
gap : 18px;
margin-bottom: 10px;
}
.sf-gunluk-sayac span {
font-family : var(--font-cinzel);
font-size : 10px;
letter-spacing: .14em;
text-transform: uppercase;
color : var(--text-2);
}
.sf-gunluk-sayac strong {
font-family: var(--font-cormorant);
font-size : 19px;
color : var(--text-gold);
margin-right: 4px;
}
.sf-gunluk-onizleme {
font-family : var(--font-cormorant);
font-size : 17px;
line-height : 1.5;
color : var(--text-2);
font-style : italic;
margin-bottom: 12px;
padding-left : 11px;
border-left : 2px solid var(--border-gold);
}
/* ── Açık tema uyumu ────────────────────────────────────── */
html.light .sf-sessiz-serit.sf-sessiz-acik { background: rgba(150,120,40,.06); }
html.light .nk-adim-tamam { background: rgba(150,120,40,.07); }
/* ── Ayar menüsü: bildirim tercihleri ───────────────────── */
.dd-bldr {
display : flex;
align-items: flex-start;
gap : 10px;
padding : 8px 0;
cursor : pointer;
}
.dd-bldr input[type="checkbox"] {
margin-top : 3px;
accent-color: var(--gold);
flex-shrink : 0;
cursor : pointer;
}
.dd-bldr input:disabled { opacity: .4; cursor: wait; }
.dd-bldr-ic { display: flex; flex-direction: column; gap: 2px; }
.dd-bldr-ad {
font-family: var(--font-cormorant);
font-size : 16px;
color : var(--text-1);
line-height: 1.3;
}
.dd-bldr-ac {
font-family : var(--font-cinzel);
font-size : 9px;
letter-spacing: .12em;
text-transform: uppercase;
color : var(--text-2);
}
.dd-bldr-not {
margin-top : 6px;
font-size : 11px;
line-height: 1.5;
color : var(--text-2);
font-style : italic;
}
/* ── Sofa: Beni Analiz Et ───────────────────────────────── */
.sf-sentez {
border-color: var(--border-gold);
background : linear-gradient(160deg, rgba(var(--gold-rgb),.05), transparent 70%);
}
.sf-sentez-ac {
font-family : var(--font-cormorant);
font-size : 18px;
line-height : 1.55;
font-style : italic;
color : var(--text-2);
margin-bottom: 14px;
}
.sf-sentez .btn-gold-outline:disabled {
opacity: .45;
cursor : not-allowed;
}
.sf-sentez-tamam { background: none; }
.sf-sentez-tamam .sf-sentez-ac { margin-bottom: 0; }
html.light .sf-sentez {
background: linear-gradient(160deg, rgba(150,120,40,.07), transparent 70%);
}
/* ── Nabız seçici: kartsız, tek başına duran SVG butonlar ────
Eskiden her ritim bir dikdörtgen kutu içindeydi; SVG'ler küçük
kalıyor ve hareketleri okunmuyordu. Kutuyu kaldırdık, SVG'yi
1.5 kat büyüttük — figürün kendisi buton oldu. */
.ritim-grid { gap: 14px 6px; }
.ritim-btn {
background : none;
border : none;
border-radius: 0;
padding : 4px 2px;
min-height : 0;
gap : 7px;
}
.ritim-btn:hover,
.ritim-btn:active {
background : none;
border-color: transparent;
color : var(--text-gold);
}
.ritim-btn .ritim-ikon svg {
width : 80px;
height : 80px;
transition: transform .25s ease, opacity .25s ease;
}
.ritim-btn:hover .ritim-ikon svg,
.ritim-btn:active .ritim-ikon svg {
transform: scale(1.06);
}
.ritim-btn .ritim-ad { opacity: .75; transition: opacity .2s ease; }
.ritim-btn:hover .ritim-ad { opacity: 1; }
/* Dar ekranlarda taşmasın */
@media (max-width: 380px) {
.ritim-btn .ritim-ikon svg { width: 68px; height: 68px; }
}
/* ── Zoom / dar ekran taşma koruması ─────────────────────────
Mobilde 1 kademe zoom yapınca kartların sağ ucu çerçeve
dışına taşıyordu: SVG'ler 80px SABİT genişlikteydi, grid
küçülemiyordu (varsayılan grid sütunu min-content'in altına
inmez). Sütunlara minmax(0,1fr) verip SVG'yi oransal yaptık. */
.ritim-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ritim-btn {
min-width: 0; /* grid/flex öğesinin küçülebilmesi için şart */
max-width: 100%;
}
.ritim-btn .ritim-ikon {
width : 100%;
max-width: 80px;
}
.ritim-btn .ritim-ikon svg {
width : 100%;
height : auto;
max-width : 80px;
aspect-ratio : 1 / 1;
}
.ritim-btn .ritim-ad {
max-width : 100%;
overflow-wrap : anywhere;
hyphens : auto;
text-align : center;
font-size : clamp(8px, 2.4vw, 10px);
}
/* Kartların kendisi de kapsayıcıyı asla aşmasın */
.sofa-kart {
max-width : 100%;
box-sizing : border-box;
overflow-wrap: anywhere;
}
.pu-grid, .nk-adim, .sf-sessiz-serit, .sf-gunluk, .sf-sentez {
max-width : 100%;
box-sizing: border-box;
}
/* Yatay kaydırma çubuğu asla çıkmasın */
#view-sofa { overflow-x: clip; }
/* ── Sofa: Günün Yansıması ──────────────────────────────── */
.sf-yansima {
margin-top : 18px;
padding-top: 16px;
border-top : 1px solid var(--border-0);
}
.sf-yansima-ac {
font-family : var(--font-cormorant);
font-size : 17px;
line-height : 1.55;
font-style : italic;
color : var(--text-2);
margin-bottom: 13px;
}
.sf-yansima-ac em { color: var(--text-gold); font-style: italic; }
/* Dolu altın buton — yansıma ana eylem olduğu için outline'dan ayrışıyor */
.btn-gold {
width : 100%;
padding : 13px;
border : none;
border-radius : 8px;
cursor : pointer;
font-family : var(--font-cinzel);
font-size : 11px;
letter-spacing: .16em;
text-transform: uppercase;
font-weight : 600;
color : #1a1206;
background : linear-gradient(135deg, #e8c56a, #c9a04a);
transition : filter .2s ease;
}
.btn-gold:hover:not(:disabled) { filter: brightness(1.07); }
.btn-gold:disabled {
opacity: .4;
cursor : not-allowed;
filter : grayscale(.5);
}
.sf-yansima-not {
margin-top : 9px;
text-align : center;
font-family : var(--font-cinzel);
font-size : 9px;
letter-spacing: .12em;
text-transform: uppercase;
color : var(--text-2);
opacity : .7;
}
/* ── Sofa: kilitli kademe kartı (Premium daveti) ─────────── */
.sf-kilit {
padding : 15px;
border : 1px dashed var(--border-gold);
border-radius: 11px;
text-align : center;
background : rgba(var(--gold-rgb),.04);
}
.sf-kilit-ad {
display : block;
font-family : var(--font-cinzel);
font-size : 10px;
letter-spacing: .18em;
text-transform: uppercase;
color : var(--text-gold);
margin-bottom : 7px;
}
.sf-kilit p {
font-family : var(--font-cormorant);
font-size : 16px;
line-height : 1.5;
font-style : italic;
color : var(--text-2);
margin-bottom: 12px;
}
/* ── Sofa: Kendi Sorun ──────────────────────────────────── */
.sf-soru {
margin-top : 16px;
padding-top: 15px;
border-top : 1px solid var(--border-0);
}
.sf-soru-ust {
display : flex;
align-items : center;
justify-content: space-between;
margin-bottom : 6px;
}
.sf-soru-ad {
font-family : var(--font-cinzel);
font-size : 10px;
letter-spacing: .18em;
text-transform: uppercase;
color : var(--text-gold);
}
.sf-soru-hak, .sf-soru-kilit {
font-family : var(--font-cinzel);
font-size : 9px;
letter-spacing: .12em;
text-transform: uppercase;
padding : 3px 9px;
border-radius : 20px;
border : 1px solid var(--border-0);
color : var(--text-2);
}
.sf-soru-kilit {
border-color: var(--border-gold);
color : var(--text-gold);
}
.sf-soru-ac {
font-family : var(--font-cormorant);
font-size : 16px;
font-style : italic;
color : var(--text-2);
margin-bottom: 9px;
}
.sf-soru-alan {
width : 100%;
box-sizing : border-box;
background : var(--bg-2);
border : 1px solid var(--border-0);
border-radius: 9px;
padding : 11px;
margin-bottom: 9px;
font-family : var(--font-cormorant);
font-size : 16px;
color : var(--text-0);
resize : vertical;
}
.sf-soru-alan:focus {
outline : none;
border-color: var(--border-gold);
}
.sf-soru-alan[readonly] {
opacity: .55;
cursor : pointer;
}
html.light .sf-kilit { background: rgba(150,120,40,.05); }
/* ── Sofa: Bugünün Dengesi (çevrilebilir kartlar) ────────────
Kartın ön yüzü öneriyi, arka yüzü NEDENİNİ ve ilgili odayı gösterir.
Masaüstü: hover. Mobil: dokunma (hover yok — ilk dokunuş çevirir,
ikincisi odaya götürür).
ÖNEMLİ: iki yüz üst üste binmesin diye grid ile aynı hücreye
yerleştirilip opaklıkla geçiş yapılıyor. */
.bd-tanim {
font-family : var(--font-cormorant);
font-size : 17px;
line-height : 1.55;
color : var(--text-2);
font-style : italic;
margin-bottom: 14px;
}
.bd-tanim strong { color: var(--text-gold); font-style: normal; }
.bd-izgara {
display : grid;
grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
gap : 11px;
}
.bd-kart {
position : relative;
display : grid; /* iki yüz aynı hücrede */
background : var(--bg-2);
border : 1px solid var(--border-0);
border-radius: 11px;
padding : 14px;
min-width : 0;
min-height : 104px;
cursor : pointer;
outline : none;
transition : border-color .25s ease, background .25s ease;
}
.bd-kart:hover,
.bd-kart:focus-visible,
.bd-kart.acik {
border-color: var(--border-gold);
background : rgba(var(--gold-rgb),.06);
}
/* İki yüz de aynı grid hücresinde — üst üste binmez, taşmaz */
.bd-on, .bd-arka {
grid-area : 1 / 1;
min-width : 0;
transition: opacity .28s ease, transform .28s ease;
}
.bd-arka {
opacity : 0;
transform : translateY(6px);
pointer-events : none;
display : flex;
flex-direction : column;
justify-content: space-between;
gap : 10px;
}
.bd-on { opacity: 1; }
.bd-kart:hover .bd-on,
.bd-kart:focus-visible .bd-on,
.bd-kart.acik .bd-on { opacity: 0; transform: translateY(-6px); }
.bd-kart:hover .bd-arka,
.bd-kart:focus-visible .bd-arka,
.bd-kart.acik .bd-arka { opacity: 1; transform: none; pointer-events: auto; }
.bd-ust {
display : flex;
align-items : center;
gap : 8px;
margin-bottom: 8px;
}
.bd-ikon { font-size: 15px; opacity: .9; flex-shrink: 0; }
.bd-etiket {
font-family : var(--font-cinzel);
font-size : 9px;
letter-spacing: .18em;
text-transform: uppercase;
color : var(--text-2);
}
.bd-metin {
font-family : var(--font-cormorant);
font-size : 17px;
line-height : 1.45;
color : var(--text-1);
overflow-wrap: anywhere;
}
.bd-arka-metin {
font-family : var(--font-cormorant);
font-size : 15px;
line-height : 1.5;
font-style : italic;
color : var(--text-2);
overflow-wrap: anywhere;
}
.bd-kopru-link {
font-family : var(--font-cinzel);
font-size : 9px;
letter-spacing: .14em;
text-transform: uppercase;
color : var(--text-gold);
white-space : nowrap;
}
.bd-ay {
margin-top : 14px;
padding-top: 12px;
border-top : 1px solid var(--border-0);
font-family: var(--font-cormorant);
font-size : 16px;
line-height: 1.55;
font-style : italic;
color : var(--text-2);
text-align : right;
}
.bd-ay strong { color: var(--text-gold); font-style: normal; }
.bd-ipucu {
margin-top : 10px;
font-family : var(--font-cinzel);
font-size : 8.5px;
letter-spacing: .1em;
text-transform: uppercase;
color : var(--text-2);
opacity : .55;
text-align : center;
}
html.light .bd-kart:hover,
html.light .bd-kart.acik { background: rgba(150,120,40,.07); }
/* Hareket azaltma tercihi */
@media (prefers-reduced-motion: reduce) {
.bd-on, .bd-arka { transition: opacity .01s; transform: none !important; }
}
/* ── Sofa: Kendi Sorun (bağımsız kart) ──────────────────── */
.sf-soru-kart {
border-color: var(--border-gold);
background : linear-gradient(160deg, rgba(var(--gold-rgb),.045), transparent 70%);
}
.sf-soru-ornek {
margin : 12px 0;
padding : 11px 14px;
border-left : 2px solid var(--border-gold);
font-family : var(--font-cormorant);
font-size : 17px;
font-style : italic;
color : var(--text-2);
opacity : .8;
}
.sf-soru-not {
margin-top : 12px;
font-family: var(--font-cormorant);
font-size : 16px;
line-height: 1.55;
font-style : italic;
color : var(--text-2);
}
.sf-soru-not strong { color: var(--text-gold); font-style: normal; }
html.light .sf-soru-kart {
background: linear-gradient(160deg, rgba(150,120,40,.06), transparent 70%);
}
/* ── Günün Soruları (seçici) ────────────────────────────── */
.sf-soru-oner { margin-bottom: 12px; }
#sf-soru-secici {
position : fixed;
inset : 0;
z-index : 100001;
display : flex;
align-items : center;
justify-content: center;
padding : 20px;
opacity : 0;
pointer-events: none;
transition : opacity .28s ease;
}
#sf-soru-secici.goster { opacity: 1; pointer-events: auto; }
.ss-perde {
position : absolute;
inset : 0;
background : rgba(6,6,10,.82);
backdrop-filter: blur(7px);
}
.ss-kart {
position : relative;
width : min(520px, 100%);
max-height : 82vh;
overflow-y : auto;
background : linear-gradient(170deg, #12101c, #0b0912);
border : 1px solid var(--border-gold);
border-radius: 16px;
padding : 22px;
transform : translateY(12px);
transition : transform .28s ease;
}
#sf-soru-secici.goster .ss-kart { transform: none; }
.ss-ust {
display : flex;
align-items : center;
justify-content: space-between;
margin-bottom : 8px;
}
.ss-baslik {
font-family : var(--font-cinzel);
font-size : 11px;
letter-spacing: .18em;
text-transform: uppercase;
color : var(--text-gold);
}
.ss-kapat {
background : none;
border : none;
color : var(--text-2);
font-size : 24px;
line-height: 1;
cursor : pointer;
padding : 0 4px;
}
.ss-kapat:hover { color: var(--text-0); }
.ss-ac {
font-family : var(--font-cormorant);
font-size : 16px;
line-height : 1.55;
font-style : italic;
color : var(--text-2);
margin-bottom: 16px;
}
.ss-liste { display: flex; flex-direction: column; gap: 9px; }
.ss-soru {
width : 100%;
text-align : left;
background : var(--bg-2);
border : 1px solid var(--border-0);
border-radius: 11px;
padding : 14px 15px;
cursor : pointer;
font-family : var(--font-cormorant);
font-size : 18px;
line-height : 1.45;
color : var(--text-1);
transition : border-color .2s ease, background .2s ease, transform .15s ease;
}
.ss-soru:hover {
border-color: var(--border-gold);
background : rgba(var(--gold-rgb),.07);
transform : translateX(3px);
}
.ss-kendi {
width : 100%;
margin-top : 14px;
background : none;
border : 1px dashed var(--border-0);
border-radius : 9px;
padding : 11px;
cursor : pointer;
font-family : var(--font-cinzel);
font-size : 10px;
letter-spacing: .14em;
text-transform: uppercase;
color : var(--text-2);
}
.ss-kendi:hover { border-color: var(--border-gold); color: var(--text-gold); }
html.light .ss-kart {
background : linear-gradient(170deg, #f7f4ee, #ede8e0);
border-color: rgba(138,104,32,.3);
}
html.light .ss-perde { background: rgba(200,190,175,.6); }
html.light .ss-soru:hover { background: rgba(150,120,40,.08); }
/* ── Harita: zenginleştirilmiş paneller ─────────────────────
Paneller çıplak sayı gösteriyordu ("Yaşam Yolu 9") — anlamını
değil. Motorun yorum sözlükleri zaten yazılmıştı, kullanılmıyordu.
Uzun metinleri hepsini birden dökmemek için kartlar AÇILIR:
kişi hazır olduğunu açar. */
.hr-giris {
font-family : var(--font-cormorant);
font-size : 17px;
line-height : 1.6;
font-style : italic;
color : var(--text-2);
margin-bottom: 16px;
}
.hr-giris strong { color: var(--text-gold); font-style: normal; font-weight: 400; }
.hr-grup-ad {
font-family : var(--font-cinzel);
font-size : 9px;
letter-spacing: .2em;
text-transform: uppercase;
color : var(--text-2);
margin : 22px 0 10px;
}
/* Açılır kart */
.hr-sayi-kart {
cursor : pointer;
outline : none;
transition: border-color .2s ease, background .2s ease;
}
.hr-sayi-kart:hover,
.hr-sayi-kart:focus-visible { border-color: var(--border-gold); }
.hr-sayi-ust {
display : flex;
align-items: center;
gap : 14px;
}
.hr-sayi-rakam {
flex-shrink : 0;
width : 46px;
height : 46px;
display : flex;
align-items : center;
justify-content: center;
border-radius: 50%;
border : 1px solid var(--border-gold);
background : rgba(var(--gold-rgb), .06);
font-family : var(--font-cormorant);
font-size : 22px;
font-weight : 600;
color : var(--text-gold);
line-height : 1;
}
.hr-sayi-bilgi { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.hr-sayi-ad {
font-family : var(--font-cinzel);
font-size : 11px;
letter-spacing: .16em;
text-transform: uppercase;
color : var(--text-0);
}
.hr-sayi-alt {
font-family: var(--font-cormorant);
font-size : 15px;
font-style : italic;
color : var(--text-2);
line-height: 1.35;
}
.hr-ok {
flex-shrink: 0;
color : var(--text-gold);
font-size : 12px;
transition : transform .25s ease;
}
.hr-sayi-kart.acik .hr-ok { transform: rotate(180deg); }
/* İçerik — kapalıyken yer kaplamaz */
.hr-acilir-ic {
max-height: 0;
overflow : hidden;
opacity : 0;
transition: max-height .35s ease, opacity .3s ease, margin-top .3s ease;
}
.hr-sayi-kart.acik .hr-acilir-ic {
max-height: 2400px;
opacity : 1;
margin-top: 16px;
}
.hr-p {
font-family : var(--font-cormorant);
font-size : 17px;
line-height : 1.65;
color : var(--text-1);
margin-bottom: 12px;
overflow-wrap: anywhere;
}
.hr-p:last-child { margin-bottom: 0; }
.hr-alan {
margin-top : 14px;
padding-top: 12px;
border-top : 1px solid var(--border-0);
}
.hr-alan-ad {
display : block;
font-family : var(--font-cinzel);
font-size : 9px;
letter-spacing: .18em;
text-transform: uppercase;
color : var(--text-gold-dim);
margin-bottom : 7px;
}
.hr-soru {
font-family : var(--font-cormorant);
font-size : 16px;
line-height : 1.55;
font-style : italic;
color : var(--text-2);
margin-bottom: 6px;
}
.hr-not { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-0); }
.hr-aralik {
margin-top : 10px;
font-family : var(--font-cinzel);
font-size : 9px;
letter-spacing: .14em;
text-transform: uppercase;
color : var(--text-2);
}
.hr-ozet .hr-p { font-size: 18px; font-style: italic; color: var(--text-1); }
.hr-karmik { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 12px; }
.hr-karmik:last-child { margin-bottom: 0; }
.hr-karmik-say {
flex-shrink: 0;
font-family: var(--font-cormorant);
font-size : 26px;
font-weight: 600;
color : var(--text-gold);
line-height: 1.2;
}
.hr-karmik-met { flex: 1; min-width: 0; }
.hr-cipler { display: flex; flex-wrap: wrap; gap: 8px; }
.hr-cip {
padding : 5px 12px;
border-radius : 20px;
border : 1px solid var(--border-gold);
font-family : var(--font-cinzel);
font-size : 9px;
letter-spacing: .12em;
text-transform: uppercase;
color : var(--text-gold);
}
.hr-adimlar {
margin : 12px 0 0;
padding-left: 20px;
font-family: var(--font-cormorant);
font-size : 17px;
line-height: 1.65;
color : var(--text-1);
}
.hr-adimlar li { margin-bottom: 9px; }
.hr-adimlar li::marker { color: var(--text-gold); }
@media (prefers-reduced-motion: reduce) {
.hr-acilir-ic { transition: none; }
.hr-ok { transition: none; }
}
/* ── Harita: açı satırları ──────────────────────────────── */
.hr-aci {
display : flex;
align-items: center;
gap : 12px;
padding : 9px 0;
border-top : 1px solid var(--border-0);
}
.hr-aci-sem {
flex-shrink: 0;
width : 26px;
text-align : center;
font-size : 15px;
color : var(--text-gold);
}
.hr-aci-ic { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hr-aci-ad {
font-family: var(--font-cormorant);
font-size : 17px;
color : var(--text-1);
}
.hr-aci-alt {
font-family : var(--font-cinzel);
font-size : 9px;
letter-spacing: .12em;
text-transform: uppercase;
color : var(--text-2);
}
.hr-not .hr-alan-ad { display: inline; margin-right: 8px; }
/* ── Harita: Body Graph ─────────────────────────────────── */
.hr-bodygraph { text-align: center; padding: 20px; }
.hr-bodygraph svg { max-width: 260px; width: 100%; height: auto; }
/* ── Harita: Natal çizim ────────────────────────────────── */
.hr-natal { text-align: center; padding: 16px; }
.nc-svg { max-width: 340px; width: 100%; height: auto; }
.nc-cember { fill: none; stroke: var(--border-0); stroke-width: 1; }
.nc-cember.nc-ic { stroke: var(--border-gold); stroke-dasharray: 2 4; }
.nc-cizgi { stroke: var(--border-0); stroke-width: 1; }
.nc-burc {
fill: var(--text-gold); font-size: 14px;
font-family: var(--font-cinzel);
}
.nc-nokta {
fill: var(--bg-2);
stroke: var(--border-gold);
stroke-width: 1;
}
.nc-sem {
fill: var(--text-0); font-size: 11px;
font-family: var(--font-cinzel);
}
.nc-asc { stroke: var(--text-gold); stroke-width: 1.5; opacity: .7; }
.nc-etiket {
fill: var(--text-gold); font-size: 9px;
letter-spacing: .1em; font-family: var(--font-cinzel);
}
/* ── Harita: haftalık takvim ────────────────────────────── */
.hr-hafta {
display : grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap : 6px;
margin-bottom : 20px;
}
.hr-gun {
display : flex;
flex-direction : column;
align-items : center;
gap : 4px;
padding : 11px 4px;
border : 1px solid var(--border-0);
border-radius : 10px;
background : var(--bg-2);
}
.hr-gun.bugun {
border-color: var(--border-gold);
background : rgba(var(--gold-rgb), .08);
}
.hr-gun-ad {
font-family : var(--font-cinzel);
font-size : 8px;
letter-spacing: .1em;
text-transform: uppercase;
color : var(--text-2);
}
.hr-gun-tarih {
font-family: var(--font-cormorant);
font-size : 13px;
color : var(--text-2);
}
.hr-gun-sayi {
font-family: var(--font-cormorant);
font-size : 21px;
font-weight: 600;
color : var(--text-gold);
line-height: 1;
}
/* Aktif dönem vurgusu */
.hr-sayi-kart.hr-aktif {
border-color: var(--border-gold);
background : rgba(var(--gold-rgb), .05);
}
/* ═══════════════════════════════════════════════════════════
ARKA PLAN FONLARI (v1'den taşındı) — her oda kendi atmosferi
Sofa fonu #sofa-bg div'inde (fixed, tüm ekran sabit).
Oda fonları body[data-oda]::before ile — o oda aktifken görünür.
İçerik z-index:1+ ile fonun üstünde akar.
═══════════════════════════════════════════════════════════ */
/* Sofa fonu: sadece Sofa'dayken görünür, fixed (sayfa üstünden akar) */
#sofa-bg{ opacity:0; transition:opacity .5s ease; }
body[data-oda="sofa"] #sofa-bg,
body:not([data-oda]) #sofa-bg{ opacity:1; }
/* Oda fonları — body::before, o oda aktifken */
body::before{
content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
opacity:0; transition:opacity .5s ease; background:transparent;
}
body[data-oda="harita"]::before{
opacity:1;
background:repeating-linear-gradient(
0deg,transparent,transparent 79px,
rgba(123,156,219,0.065) 79px,rgba(123,156,219,0.065) 80px
),
repeating-linear-gradient(
90deg,transparent,transparent 79px,
rgba(123,156,219,0.039) 79px,rgba(123,156,219,0.039) 80px
),
radial-gradient(ellipse 800px 600px at 90% -10%,rgba(123,156,219,0.312) 0%,transparent 65%),
radial-gradient(ellipse 600px 800px at -10% 90%,rgba(201,145,58,0.208) 0%,transparent 65%);
}
body[data-oda="zemin"]::before{
opacity:1;
background:radial-gradient(1px 1px at 15% 20%,rgba(255,255,255,0.600) 0%,transparent 100%),
radial-gradient(1px 1px at 82% 8%,rgba(255,255,255,0.520) 0%,transparent 100%),
radial-gradient(1px 1px at 45% 65%,rgba(255,255,255,0.390) 0%,transparent 100%),
radial-gradient(2px 2px at 28% 12%,rgba(212,164,100,0.600) 0%,transparent 100%),
radial-gradient(1px 1px at 70% 42%,rgba(180,140,80,0.600) 0%,transparent 100%),
radial-gradient(800px 600px at 85% 5%,rgba(100,60,20,0.364) 0%,transparent 70%),
radial-gradient(700px 800px at 5% 90%,rgba(80,50,15,0.260) 0%,transparent 70%);
}
body[data-oda="gemoloji"]::before{
opacity:1;
background:repeating-linear-gradient(0deg,transparent,transparent 79px,rgba(80,100,200,0.047) 79px,rgba(80,100,200,0.047) 80px),
repeating-linear-gradient(90deg,transparent,transparent 79px,rgba(80,100,200,0.031) 79px,rgba(80,100,200,0.031) 80px),
radial-gradient(1px 1px at 20% 30%,rgba(255,255,255,0.600) 0%,transparent 100%),
radial-gradient(1px 1px at 80% 10%,rgba(255,255,255,0.520) 0%,transparent 100%),
radial-gradient(2px 2px at 30% 15%,rgba(160,180,255,0.600) 0%,transparent 100%),
radial-gradient(1px 1px at 70% 50%,rgba(130,150,240,0.600) 0%,transparent 100%),
radial-gradient(900px 700px at 85% 5%,rgba(30,50,150,0.572) 0%,transparent 70%),
radial-gradient(700px 700px at 5% 90%,rgba(20,40,120,0.416) 0%,transparent 70%);
}
body[data-oda="elements"]::before{
opacity:1;
background-image:url("data:image/svg+xml,%3Csvg%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%20680%20400%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%20%3Cline%20x1%3D%220%22%20y1%3D%22200%22%20x2%3D%22680%22%20y2%3D%22200%22%20stroke%3D%22rgba%2880%2C130%2C200%2C0.104%29%22%20stroke-width%3D%220.5%22/%3E%20%3Cline%20x1%3D%2285%22%20y1%3D%220%22%20x2%3D%2285%22%20y2%3D%22400%22%20stroke%3D%22rgba%2880%2C130%2C200%2C0.078%29%22%20stroke-width%3D%220.4%22/%3E%20%3Cline%20x1%3D%22170%22%20y1%3D%220%22%20x2%3D%22170%22%20y2%3D%22400%22%20stroke%3D%22rgba%2880%2C130%2C200%2C0.078%29%22%20stroke-width%3D%220.4%22/%3E%20%3Cline%20x1%3D%22255%22%20y1%3D%220%22%20x2%3D%22255%22%20y2%3D%22400%22%20stroke%3D%22rgba%2880%2C130%2C200%2C0.078%29%22%20stroke-width%3D%220.4%22/%3E%20%3Cline%20x1%3D%22340%22%20y1%3D%220%22%20x2%3D%22340%22%20y2%3D%22400%22%20stroke%3D%22rgba%2880%2C130%2C200%2C0.078%29%22%20stroke-width%3D%220.4%22/%3E%20%3Cline%20x1%3D%22425%22%20y1%3D%220%22%20x2%3D%22425%22%20y2%3D%22400%22%20stroke%3D%22rgba%2880%2C130%2C200%2C0.078%29%22%20stroke-width%3D%220.4%22/%3E%20%3Cline%20x1%3D%22510%22%20y1%3D%220%22%20x2%3D%22510%22%20y2%3D%22400%22%20stroke%3D%22rgba%2880%2C130%2C200%2C0.078%29%22%20stroke-width%3D%220.4%22/%3E%20%3Cline%20x1%3D%22595%22%20y1%3D%220%22%20x2%3D%22595%22%20y2%3D%22400%22%20stroke%3D%22rgba%2880%2C130%2C200%2C0.078%29%22%20stroke-width%3D%220.4%22/%3E%20%3Cpath%20d%3D%22M0%2C200%20C42%2C200%2042%2C60%2085%2C60%20C128%2C60%20128%2C340%20170%2C340%20C213%2C340%20213%2C60%20255%2C60%20C298%2C60%20298%2C340%20340%2C340%20C383%2C340%20383%2C60%20425%2C60%20C468%2C60%20468%2C340%20510%2C340%20C553%2C340%20553%2C60%20595%2C60%20C638%2C60%20638%2C200%20680%2C200%22%20stroke%3D%22rgba%2880%2C130%2C200%2C0.156%29%22%20stroke-width%3D%221%22%20fill%3D%22none%22/%3E%20%3Cpath%20d%3D%22M0%2C200%20C48%2C200%2048%2C80%2097%2C80%20C146%2C80%20146%2C320%20194%2C320%20C243%2C320%20243%2C80%20291%2C80%20C340%2C80%20340%2C320%20388%2C320%20C437%2C320%20437%2C80%20485%2C80%20C534%2C80%20534%2C320%20582%2C320%20C631%2C320%20631%2C200%20680%2C200%22%20stroke%3D%22rgba%28100%2C200%2C160%2C0.156%29%22%20stroke-width%3D%220.8%22%20fill%3D%22none%22/%3E%20%3Cpath%20d%3D%22M0%2C200%20C55%2C200%2055%2C90%20110%2C90%20C165%2C90%20165%2C310%20220%2C310%20C275%2C310%20275%2C90%20330%2C90%20C385%2C90%20385%2C310%20440%2C310%20C495%2C310%20495%2C90%20550%2C90%20C605%2C90%20605%2C200%20660%2C200%22%20stroke%3D%22rgba%28200%2C140%2C100%2C0.130%29%22%20stroke-width%3D%220.7%22%20fill%3D%22none%22/%3E%20%3Cline%20x1%3D%22340%22%20y1%3D%2240%22%20x2%3D%22340%22%20y2%3D%22360%22%20stroke%3D%22rgba%28100%2C160%2C240%2C0.208%29%22%20stroke-width%3D%220.6%22%20stroke-dasharray%3D%223%2C4%22/%3E%20%3C/svg%3E");
background-size:cover; background-position:center;
}
/* İçerik fonların ÜSTÜNDE aksın */
#app{ position:relative; z-index:1; }
/* ═══════════════════════════════════════════════════════════
ODA ALT MENÜSÜ — uçan tek buton + drop-up (OdaMenu modülü)
Mobil : oda logosu + aktif panel adı → dokun → butonlar yukarı dizilir
Masaüstü: buton gizlenir, paneller yatay şerit olarak hep açık
Zemin YOK — sayfa butonların arkasından akar.
═══════════════════════════════════════════════════════════ */
.harita-paneller{
position: fixed; left:0; right:0; bottom:0; z-index:100;
display:flex; justify-content:center;
padding: 14px 16px calc(14px + var(--safe-bottom));
background: none; /* zemin kaldırıldı */
border-top: none;
overflow: visible;
pointer-events: none; /* boşluk tıklamayı engellemesin */
}
.oda-menu-sar{ position:relative; pointer-events:auto; }
/* Oda renkleri — sarmalayıcıdan alt öğelere iner */
.oda-menu-sar[data-oda="harita"] { --om-r:#7a9cd8; }
.oda-menu-sar[data-oda="elements"]{ --om-r:#98b8a0; }
.oda-menu-sar[data-oda="zemin"] { --om-r:#d8a068; }
.oda-menu-sar[data-oda="gemoloji"]{ --om-r:#b0c8f4; }
html.light .oda-menu-sar[data-oda="harita"] { --om-r:#3a5aaa; }
html.light .oda-menu-sar[data-oda="elements"]{ --om-r:#286040; }
html.light .oda-menu-sar[data-oda="zemin"] { --om-r:#a05820; }
html.light .oda-menu-sar[data-oda="gemoloji"]{ --om-r:#3a5aaa; }
/* ── Ana buton: oda logosu + aktif panel adı + ok ── */
.oda-menu-ana{
display:flex; align-items:center; gap:10px;
padding:15px 22px; border-radius:32px;
background: var(--ucan-bg);
border: 1px solid color-mix(in srgb, var(--om-r, #C9A84C) 45%, transparent);
backdrop-filter: blur(16px) saturate(1.2);
-webkit-backdrop-filter: blur(16px) saturate(1.2);
box-shadow:
0 12px 32px var(--ucan-golge-1),
0 4px 12px var(--ucan-golge-2),
0 0 30px color-mix(in srgb, var(--om-r, #C9A84C) 30%, transparent),
inset 0 1px 0 var(--ucan-ic-isik);
color: var(--text-0); cursor:pointer; white-space:nowrap;
font-family: var(--font-cinzel); font-size:12px;
letter-spacing:.14em; text-transform:uppercase;
transition: transform .18s;
-webkit-tap-highlight-color: transparent;
}
.oda-menu-ana:active{ transform: scale(.96); }
.oma-oda{ display:inline-flex; color: var(--om-r); }
.oma-oda svg{ display:block; }
.oma-ok{
display:inline-block; font-size:11px; color: var(--text-2);
transition: transform .25s; margin-left:2px;
}
.oda-menu-sar.acik .oma-ok{ transform: rotate(180deg); }
/* ── Drop-up: PANEL DEĞİL, ana butonla aynı formda ayrı butonlar ── */
.oda-menu-panel{
position:absolute; bottom:calc(100% + 10px); left:50%;
transform: translateX(-50%);
display:flex; flex-direction:column-reverse; align-items:center; gap:9px;
pointer-events:none;
}
.oda-menu-oge{
display:flex; align-items:center; gap:10px;
padding:14px 22px; border-radius:32px; /* ana butonla AYNI form */
background: var(--ucan-bg);
border: 1px solid var(--ucan-cerceve);
backdrop-filter: blur(16px) saturate(1.2);
-webkit-backdrop-filter: blur(16px) saturate(1.2);
box-shadow:
0 12px 32px var(--ucan-golge-1),
0 4px 12px var(--ucan-golge-2),
0 0 26px color-mix(in srgb, var(--om-r, #C9A84C) 22%, transparent),
inset 0 1px 0 var(--ucan-ic-isik);
color: var(--text-1); cursor:pointer; white-space:nowrap;
font-family: var(--font-cinzel); font-size:12px;
letter-spacing:.12em; text-transform:uppercase;
opacity:0; transform: translateY(14px) scale(.9);
transition: opacity .22s ease, transform .26s cubic-bezier(.3,1.3,.5,1), border-color .2s;
-webkit-tap-highlight-color: transparent;
}
.oda-menu-sar.acik .oda-menu-panel{ pointer-events:auto; }
.oda-menu-sar.acik .oda-menu-oge{ opacity:1; transform: translateY(0) scale(1); }
/* Sıralı belirme — alttan üste */
.oda-menu-sar.acik .oda-menu-oge:nth-child(1){ transition-delay:.02s }
.oda-menu-sar.acik .oda-menu-oge:nth-child(2){ transition-delay:.06s }
.oda-menu-sar.acik .oda-menu-oge:nth-child(3){ transition-delay:.10s }
.oda-menu-sar.acik .oda-menu-oge:nth-child(4){ transition-delay:.14s }
.oda-menu-sar.acik .oda-menu-oge:nth-child(5){ transition-delay:.18s }
.oda-menu-oge:active{ transform: scale(.95); }
.omo-ik{ display:inline-flex; color: var(--text-2); }
.omo-ik svg{ display:block; }
.oda-menu-oge.aktif{
color: var(--om-r);
border-color: color-mix(in srgb, var(--om-r) 55%, transparent);
}
.oda-menu-oge.aktif .omo-ik{ color: var(--om-r); }
/* ══ MASAÜSTÜ: buton gizlenir, paneller yatay şerit olarak hep açık ══ */
@media (min-width: 860px){
.oda-menu-ana{ display:none; }
.oda-menu-panel{
position: static; transform:none;
flex-direction: row; gap:10px; pointer-events:auto;
flex-wrap: wrap; justify-content:center;
}
.oda-menu-oge{
opacity:1; transform:none; transition-delay:0s !important;
padding:12px 20px;
}
}
/* ═══════════════════════════════════════════════════════════
TAŞ DETAY POP-UP (TasDetay modülü)
Büyük kristal ikonu + taşın tüm verisi.
═══════════════════════════════════════════════════════════ */
.td-ortu{
position:fixed; inset:0; z-index:400;
display:none; align-items:flex-start; justify-content:center;
background:rgba(6,5,10,.72);
backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
padding:20px 14px; overflow-y:auto;
}
.td-ortu.acik{ display:flex; }
.td-kart{
position:relative; width:100%; max-width:520px; margin:auto;
background:var(--bg-1); border:1px solid var(--border-1);
border-radius:20px; padding:30px 24px 22px;
box-shadow:0 24px 60px rgba(0,0,0,.55);
animation:tdGel .26s cubic-bezier(.2,.9,.3,1);
}
@keyframes tdGel{ from{ opacity:0; transform:translateY(16px) scale(.98) } to{ opacity:1; transform:none } }
.td-kapat{
position:absolute; top:12px; right:12px;
width:34px; height:34px; border-radius:50%;
background:var(--bg-2); border:1px solid var(--border-1);
color:var(--text-2); font-size:19px; line-height:1; cursor:pointer;
display:flex; align-items:center; justify-content:center;
transition:color var(--dur-fast), border-color var(--dur-fast);
}
.td-kapat:hover{ color:var(--text-0); border-color:var(--altin); }
.td-ust{ text-align:center; margin-bottom:18px; }
.td-ikon{ display:flex; justify-content:center; margin-bottom:10px; }
.td-ikon svg{ display:block; }
.td-ad{
font-family:var(--font-cinzel); font-size:21px; font-weight:400;
letter-spacing:.06em; color:var(--text-0); margin:0 0 6px;
}
.td-kimlik{
font-family:var(--font-cinzel); font-size:10px; letter-spacing:.14em;
text-transform:uppercase; color:var(--text-2);
}
.td-kesim{
font-family:var(--font-cormorant); font-style:italic;
font-size:12px; color:var(--text-3); margin-top:5px; opacity:.75;
}
.td-ruh{
text-align:center; font-family:var(--font-cormorant); font-style:italic;
font-size:16px; line-height:1.7; color:var(--text-2);
margin:0 0 20px; padding:0 8px;
}
.td-satir{ margin-bottom:14px; }
.td-etiket{
font-family:var(--font-cinzel); font-size:9.5px; letter-spacing:.14em;
text-transform:uppercase; color:var(--altin); opacity:.8; margin-bottom:4px;
}
.td-deger{
font-family:var(--font-cormorant); font-size:16px;
line-height:1.75; color:var(--text-1);
}
.td-dikkat{
margin:16px 0; padding:12px 14px; border-radius:11px;
background:rgba(216,150,80,.06); border:1px solid rgba(216,150,80,.2);
}
.td-dikkat-bas{
display:flex; align-items:center; gap:6px;
font-family:var(--font-cinzel); font-size:9.5px; letter-spacing:.14em;
text-transform:uppercase; color:#d89650; margin-bottom:6px;
}
.td-dikkat-bas svg{ display:block; }
.td-dikkat-f{ font-family:var(--font-cormorant); font-size:15px; line-height:1.7; color:var(--text-1); margin:0 0 6px; }
.td-dikkat-b{ font-family:var(--font-cormorant); font-size:15px; line-height:1.7; color:var(--text-3); font-style:italic; margin:0; }
.td-alt-blok{
border-top:1px solid var(--border-0);
margin-top:18px; padding-top:16px;
}
.td-not{
margin-top:18px; padding:12px 14px; border-radius:11px;
background:rgba(96,128,208,.04); border:1px solid rgba(96,128,208,.1);
font-family:var(--font-cormorant); font-style:italic;
font-size:13px; line-height:1.75; color:var(--text-3);
}
.td-aksiyon{
display:flex; align-items:center; justify-content:center; gap:2px;
width:100%; margin-top:18px; padding:14px 18px;
border-radius:12px; cursor:pointer;
font-family:var(--font-cinzel); font-size:12px;
letter-spacing:.12em; text-transform:uppercase;
background:linear-gradient(135deg, rgba(201,168,76,.25), rgba(201,168,76,.12));
border:1px solid rgba(201,168,76,.4); color:var(--text-gold);
transition:filter var(--dur-fast);
}
.td-aksiyon svg{ display:block; }
.td-aksiyon:hover{ filter:brightness(1.12); }
.td-aksiyon.var{
background:rgba(255,255,255,.05);
border-color:var(--border-1); color:var(--text-2);
}
/* Taş kartları tıklanabilir görünsün */
.tas-mini-kart, .tas-kart{ cursor:pointer; }
/* ═══════════════════════════════════════════════════════════
ELEMENTS > TAŞIM — dizim + taş haritam
═══════════════════════════════════════════════════════════ */
.els-tas-tabs{ display:flex; gap:9px; margin-bottom:16px; }
.els-tas-tab{
flex:1; display:flex; align-items:center; justify-content:center; gap:8px;
padding:12px 14px; border-radius:12px; cursor:pointer;
background:var(--bg-2); border:1px solid var(--border-1); color:var(--text-2);
font-family:var(--font-cinzel); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
transition:color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
}
.els-tas-tab svg{ display:block; }
.els-tas-tab.aktif{
color:var(--text-gold); border-color:rgba(201,168,76,.42);
background:rgba(201,168,76,.07);
}
.els-dizim-blok{ margin-top:18px; }
.els-dizim-etiket{
font-family:var(--font-cinzel); font-size:10px; letter-spacing:.14em;
text-transform:uppercase; color:var(--altin); opacity:.85; margin-bottom:9px;
}
.els-dizim-not{
font-family:var(--font-cormorant); font-style:italic; font-size:13px;
letter-spacing:0; text-transform:none; color:var(--text-3); opacity:.8;
}
.els-mod-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:8px; }
.els-mod-chip{
display:flex; align-items:center; gap:9px;
padding:11px 13px; border-radius:11px; cursor:pointer; text-align:left;
background:var(--bg-2); border:1px solid var(--border-1); color:var(--text-2);
font-family:var(--font-cinzel); font-size:10.5px; letter-spacing:.08em;
transition:color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
}
.els-mod-chip svg{ display:block; flex-shrink:0; }
.els-mod-chip.aktif{
color:var(--text-gold); border-color:rgba(201,168,76,.45);
background:rgba(201,168,76,.08);
}
.els-kademe-grid, .els-sayi-grid{ display:flex; gap:8px; flex-wrap:wrap; }
.els-kademe-btn, .els-sayi-btn{
padding:10px 16px; border-radius:10px; cursor:pointer;
background:var(--bg-2); border:1px solid var(--border-1); color:var(--text-2);
font-family:var(--font-cinzel); font-size:11px; letter-spacing:.1em;
transition:color var(--dur-fast), border-color var(--dur-fast);
}
.els-sayi-btn{ min-width:52px; text-align:center; }
.els-kademe-btn.aktif, .els-sayi-btn.aktif{
color:var(--text-gold); border-color:rgba(201,168,76,.45);
background:rgba(201,168,76,.08);
}
.els-dizim-ozet{
display:flex; align-items:center; justify-content:space-between; gap:12px;
margin:18px 0 12px; padding:12px 16px; border-radius:12px;
background:rgba(201,168,76,.06); border:1px solid rgba(201,168,76,.18);
font-family:var(--font-cinzel); font-size:12px; letter-spacing:.12em;
text-transform:uppercase; color:var(--text-gold);
}
.els-dizim-ozet-ay{
font-family:var(--font-cormorant); font-style:italic; font-size:14px;
letter-spacing:0; text-transform:none; color:var(--text-2);
}
.els-dizim-sayi{
margin-left:auto; font-family:var(--font-cormorant); font-style:italic;
font-size:14px; letter-spacing:0; text-transform:none; color:var(--text-3);
}
.els-dizim-liste{ display:flex; flex-direction:column; gap:7px; margin-top:10px; }
.els-dizim-tas{
display:flex; align-items:center; gap:11px;
padding:10px 12px; border-radius:10px; cursor:pointer;
background:var(--bg-2); border:1px solid var(--border-0);
transition:border-color var(--dur-fast);
}
.els-dizim-tas:hover{ border-color:var(--border-2); }
.edt-ikon{ display:inline-flex; flex-shrink:0; }
.edt-ad{ font-family:var(--font-cormorant); font-size:16px; color:var(--text-1); }
.edt-adet{
margin-left:auto; font-family:var(--font-cinzel); font-size:11px;
letter-spacing:.1em; color:var(--text-3);
}
.els-dizim-uyari{
display:flex; align-items:flex-start; gap:10px;
margin-bottom:12px; padding:12px 14px; border-radius:11px;
background:rgba(216,150,80,.06); border:1px solid rgba(216,150,80,.2);
font-family:var(--font-cormorant); font-size:15px; line-height:1.7; color:var(--text-2);
}
.els-dizim-uyari svg{ display:block; flex-shrink:0; margin-top:3px; color:#d89650; }
/* ── Taşım: profil seçici, önizleme, max tip, önayarlar ── */
.els-oner-btn{
width:100%; display:flex; align-items:center; justify-content:center; gap:4px;
padding:15px 18px; margin-bottom:8px; border-radius:13px; cursor:pointer;
background:linear-gradient(135deg, rgba(201,168,76,.22), rgba(201,168,76,.1));
border:1px solid rgba(201,168,76,.4); color:var(--text-gold);
font-family:var(--font-cinzel); font-size:12px; letter-spacing:.12em; text-transform:uppercase;
transition:filter var(--dur-fast);
}
.els-oner-btn:hover{ filter:brightness(1.12); }
.els-oner-not{
font-family:var(--font-cormorant); font-style:italic; font-size:14px;
line-height:1.7; color:var(--text-3); margin:0 0 18px; padding:0 4px;
}
.els-profil-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.els-profil-btn{
display:flex; flex-direction:column; align-items:flex-start; gap:3px;
padding:12px 13px; border-radius:12px; cursor:pointer; text-align:left;
background:var(--bg-2); border:1px solid var(--border-1); color:var(--text-2);
transition:color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
}
.els-profil-btn .epb-ikon{ display:inline-flex; margin-bottom:2px; }
.els-profil-btn .epb-ad{
font-family:var(--font-cinzel); font-size:11px; letter-spacing:.08em;
}
.els-profil-btn .epb-not{
font-family:var(--font-cormorant); font-style:italic; font-size:12.5px;
color:var(--text-3); line-height:1.4;
}
.els-profil-btn.aktif{
color:var(--text-gold); border-color:rgba(201,168,76,.45); background:rgba(201,168,76,.08);
}
.els-profil-btn.kapali{ opacity:.4; cursor:not-allowed; }
.els-profil-acik{
font-family:var(--font-cormorant); font-style:italic; font-size:13.5px;
color:var(--text-3); line-height:1.6; margin-top:9px; padding:0 2px;
}
.els-onizleme{
margin-top:12px; padding:14px; border-radius:12px;
background:var(--bg-2); border:1px solid var(--border-0);
}
.els-onz-baslik{
font-family:var(--font-cinzel); font-size:9.5px; letter-spacing:.14em;
text-transform:uppercase; color:var(--altin); opacity:.8; margin-bottom:10px;
}
.els-onz-satir{ display:flex; align-items:center; gap:9px; margin-bottom:7px; }
.els-onz-ik{ display:inline-flex; flex-shrink:0; }
.els-onz-ad{ font-family:var(--font-cormorant); font-size:15px; color:var(--text-1); width:60px; }
.els-onz-track{ flex:1; height:6px; background:rgba(255,255,255,.06); border-radius:3px; overflow:hidden; }
.els-onz-fill{ height:100%; border-radius:3px; transition:width var(--dur-mid); }
.els-onz-pct{ font-family:var(--font-cinzel); font-size:11px; color:var(--text-3); width:38px; text-align:right; }
.els-onz-not{
font-family:var(--font-cormorant); font-style:italic; font-size:13.5px;
color:var(--text-3); line-height:1.6; margin-top:10px;
}
.els-kademe-btn{ flex-direction:column; align-items:flex-start; gap:2px; text-align:left; }
.els-kademe-btn .ekb-ad{ font-family:var(--font-cinzel); font-size:11px; letter-spacing:.1em; }
.els-kademe-btn .ekb-not{
font-family:var(--font-cormorant); font-style:italic; font-size:12px;
color:var(--text-3); letter-spacing:0;
}
.els-kademe-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.els-sayi-row{ display:flex; flex-direction:column; gap:10px; }
.els-sayi-input{
width:100%; padding:12px 14px; border-radius:11px;
background:var(--bg-2); border:1px solid var(--border-1); color:var(--text-0);
font-family:var(--font-cinzel); font-size:16px; text-align:center; letter-spacing:.1em;
}
.els-onayar-grid{ display:flex; gap:7px; flex-wrap:wrap; }
.els-onayar{
padding:8px 12px; border-radius:9px; cursor:pointer;
background:var(--bg-2); border:1px solid var(--border-0); color:var(--text-3);
font-family:var(--font-cormorant); font-size:13px;
transition:color var(--dur-fast), border-color var(--dur-fast);
}
.els-onayar:hover{ color:var(--text-gold); border-color:rgba(201,168,76,.35); }
.els-maxtip-grid{ display:flex; gap:7px; flex-wrap:wrap; }
.els-maxtip-btn{
flex:1; min-width:62px; display:flex; flex-direction:column; align-items:center; gap:2px;
padding:10px 8px; border-radius:11px; cursor:pointer;
background:var(--bg-2); border:1px solid var(--border-1); color:var(--text-2);
transition:color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
}
.els-maxtip-btn .emt-n{ font-family:var(--font-cinzel); font-size:17px; }
.els-maxtip-btn .emt-ad{ font-family:var(--font-cinzel); font-size:9.5px; letter-spacing:.08em; }
.els-maxtip-btn .emt-not{
font-family:var(--font-cormorant); font-style:italic; font-size:11px; color:var(--text-3);
}
.els-maxtip-btn.aktif{
color:var(--text-gold); border-color:rgba(201,168,76,.45); background:rgba(201,168,76,.08);
}
.els-kol-satir{ display:flex; align-items:center; justify-content:space-between; gap:14px; }
.els-kol-toggle{
display:flex; align-items:center; gap:7px; cursor:pointer;
font-family:var(--font-cinzel); font-size:11px; letter-spacing:.1em; color:var(--text-2);
}
.els-kol-toggle input{ width:17px; height:17px; accent-color:var(--altin); cursor:pointer; }
.edt-govde{ display:flex; flex-direction:column; gap:2px; flex:1; min-width:0; }
.edt-desc{
font-family:var(--font-cormorant); font-style:italic; font-size:13px;
color:var(--text-3); line-height:1.5;
}
/* ── Dizim Talebi formu ── */
.els-istiyorum-btn{
width:100%; display:flex; align-items:center; justify-content:center; gap:4px;
padding:15px 18px; border-radius:13px; cursor:pointer;
background:linear-gradient(135deg, rgba(201,168,76,.25), rgba(201,168,76,.12));
border:1px solid rgba(201,168,76,.45); color:var(--text-gold);
font-family:var(--font-cinzel); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
transition:filter var(--dur-fast);
}
.els-istiyorum-btn:hover{ filter:brightness(1.12); }
.els-talep-kart{ margin-top:12px; }
.els-tal-urun-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.els-tal-urun{
display:flex; flex-direction:column; align-items:center; gap:4px;
padding:14px 8px; border-radius:12px; cursor:pointer;
background:var(--bg-2); border:1px solid var(--border-1); color:var(--text-2);
transition:color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
}
.els-tal-urun .etu-ik{ display:inline-flex; }
.els-tal-urun .etu-ad{ font-family:var(--font-cinzel); font-size:11px; letter-spacing:.1em; }
.els-tal-urun .etu-not{
font-family:var(--font-cormorant); font-style:italic; font-size:12px; color:var(--text-3);
}
.els-tal-urun.aktif{
color:var(--text-gold); border-color:rgba(201,168,76,.45); background:rgba(201,168,76,.08);
}
.els-tal-kademe-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.els-tal-kademe{
display:flex; flex-direction:column; align-items:center; gap:3px;
padding:13px 8px; border-radius:11px; cursor:pointer;
background:var(--bg-2); border:1px solid var(--border-1); color:var(--text-2);
transition:color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
}
.els-tal-kademe .etk-ad{ font-family:var(--font-cinzel); font-size:11px; letter-spacing:.1em; }
.els-tal-kademe .etk-fiyat{ font-family:var(--font-cormorant); font-size:14px; color:var(--text-3); }
.els-tal-kademe.aktif{
color:var(--text-gold); border-color:rgba(201,168,76,.45); background:rgba(201,168,76,.08);
}
.els-tal-kademe.aktif .etk-fiyat{ color:var(--text-gold); }
.els-tal-boyut-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:7px; }
.els-tal-boyut{
display:flex; flex-direction:column; align-items:center; gap:2px;
padding:11px 5px; border-radius:11px; cursor:pointer;
background:var(--bg-2); border:1px solid var(--border-1); color:var(--text-2);
transition:color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
}
.els-tal-boyut .etb-cm{ font-family:var(--font-cinzel); font-size:12px; }
.els-tal-boyut .etb-tas,
.els-tal-boyut .etb-fiyat{
font-family:var(--font-cormorant); font-style:italic; font-size:11.5px; color:var(--text-3);
}
.els-tal-boyut.aktif{
color:var(--text-gold); border-color:rgba(201,168,76,.45); background:rgba(201,168,76,.08);
}
.els-tal-fiyat{
display:flex; align-items:center; justify-content:space-between;
margin-top:16px; padding:14px 16px; border-radius:12px;
background:rgba(201,168,76,.07); border:1px solid rgba(201,168,76,.22);
font-family:var(--font-cinzel); font-size:11px; letter-spacing:.12em;
text-transform:uppercase; color:var(--text-2);
}
.els-tal-fiyat strong{ font-size:18px; color:var(--text-gold); letter-spacing:.04em; }
.els-tal-etiket{
display:block; font-family:var(--font-cinzel); font-size:9.5px;
letter-spacing:.14em; text-transform:uppercase; color:var(--altin);
opacity:.85; margin:12px 0 5px;
}
.els-tal-input{
width:100%; padding:12px 14px; border-radius:11px;
background:var(--bg-2); border:1px solid var(--border-1); color:var(--text-0);
font-family:var(--font-cormorant); font-size:16px;
transition:border-color var(--dur-fast);
}
.els-tal-input:focus{ outline:none; border-color:rgba(201,168,76,.45); }
.els-tal-input::placeholder{ color:var(--text-3); opacity:.6; }
.els-tal-alan{ resize:vertical; min-height:74px; line-height:1.6; }
.els-tal-ikili{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media (max-width:420px){ .els-tal-ikili{ grid-template-columns:1fr; } }
.els-talep-ok{
display:flex; align-items:center; gap:14px; margin-top:12px;
border-color:rgba(120,180,120,.3); background:rgba(120,180,120,.05);
}
.els-talep-ok svg{ display:block; flex-shrink:0; color:#7ab87a; }
.els-talep-ok strong{ font-family:var(--font-cinzel); font-size:13px; letter-spacing:.08em; color:var(--text-0); }
.els-talep-ok p{ font-family:var(--font-cormorant); font-size:15px; color:var(--text-2); margin:4px 0 0; }
/* Dizim: min-1 kuralı açıklaması */
.els-dizim-kural{
display:flex; align-items:flex-start; gap:9px;
margin:0 0 12px; padding:11px 14px; border-radius:11px;
background:rgba(201,168,76,.05); border:1px solid rgba(201,168,76,.16);
font-family:var(--font-cormorant); font-size:14.5px; line-height:1.65;
color:var(--text-3);
}
.els-dizim-kural svg{ display:block; flex-shrink:0; margin-top:3px; color:var(--altin); opacity:.75; }
.els-dizim-kural em{ color:var(--text-2); font-style:italic; }
/* ══ Uygunluk Rehberi ═══════════════════════════════════════
Sofa kartı + tam ekran seçim/sonuç modali.
Renkler tamamen mevcut token setinden; yeni değişken yok. */
/* ── Sofa kartı ── */
.sf-uygunluk { cursor: pointer; transition: border-color var(--dur-fast); }
.sf-uygunluk:hover { border-color: var(--border-gold); }
.uy-kart-akis {
font-family: var(--font-cormorant);
font-size : 26px;
color : var(--text-0);
margin-bottom: 6px;
}
.uy-kart-ozet { font-size: 14px; color: var(--text-1); line-height: 1.55; }
.uy-kart-alt {
font-size: 12px; color: var(--text-gold-dim);
letter-spacing: .06em; margin-top: 10px;
}
.uy-kart-btn {
margin-top: 16px; width: 100%;
background: transparent; color: var(--gold);
border: 1px solid var(--border-gold); border-radius: 12px;
padding: 11px; font-family: var(--font-outfit); font-size: 13px;
letter-spacing: .08em; cursor: pointer;
transition: background var(--dur-fast);
}
.uy-kart-btn:hover { background: var(--gold-10); }
/* ── Modal ── */
.uy-ortu {
position: fixed; inset: 0; z-index: 900;
display: none; align-items: flex-start; justify-content: center;
background: var(--blur-bg); backdrop-filter: blur(6px);
padding: calc(var(--safe-top) + 24px) 16px calc(var(--safe-bottom) + 24px);
overflow-y: auto;
}
.uy-ortu.acik { display: flex; }
.uy-kart {
position: relative; width: 100%; max-width: 520px;
background: var(--bg-1); border: 1px solid var(--border-gold);
border-radius: 20px; padding: 26px 22px 24px;
box-shadow: var(--shadow-lg);
}
.uy-kapat {
position: absolute; top: 12px; right: 12px;
width: 32px; height: 32px; border-radius: 50%;
background: transparent; border: 1px solid var(--border-1);
color: var(--text-1); font-size: 18px; cursor: pointer;
}
.uy-kapat:hover { color: var(--text-0); border-color: var(--altin); }
.uy-ust { text-align: center; margin-bottom: 22px; }
.uy-baslik {
font-family: var(--font-cinzel); font-size: 13px;
letter-spacing: .28em; text-transform: uppercase;
color: var(--text-gold-dim);
}
.uy-alt { font-size: 13px; color: var(--text-1); margin-top: 8px; line-height: 1.5; }
/* ── Form ── */
.uy-satir { margin-bottom: 14px; }
.uy-etiket {
display: block; font-size: 12px; color: var(--text-gold-dim);
letter-spacing: .08em; margin-bottom: 6px;
}
.uy-giris {
width: 100%; background: var(--bg-2); color: var(--text-0);
border: 1px solid var(--border-1); border-radius: 10px;
padding: 10px 12px; font-family: var(--font-outfit); font-size: 14px;
}
.uy-giris:focus { outline: none; border-color: var(--border-gold); }
.uy-ikili { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.uy-ucul { display: grid; grid-template-columns: 1fr; gap: 8px; }
.uy-not { font-size: 11px; color: var(--text-1); opacity: .75; margin-top: 6px; }
.uy-btn {
width: 100%; margin-top: 6px;
background: var(--gold-10); color: var(--gold);
border: 1px solid var(--border-gold); border-radius: 12px;
padding: 13px; font-family: var(--font-outfit); font-size: 14px;
letter-spacing: .1em; cursor: pointer;
transition: background var(--dur-fast);
}
.uy-btn:hover { background: var(--gold-20); }
/* ── Sonuç ── */
.uy-sonuc { margin-top: 0; }
.uy-sonuc.dolu {
margin-top: 22px; padding-top: 22px;
border-top: 1px solid var(--border-0);
}
.uy-rozet {
display: inline-block; font-size: 11px; letter-spacing: .14em;
text-transform: uppercase; padding: 5px 12px; border-radius: 999px;
border: 1px solid var(--border-1); color: var(--text-1); margin-bottom: 12px;
}
.uy-cok_uygun { color: var(--success); border-color: var(--success); }
.uy-uygun { color: var(--gold); border-color: var(--border-gold); }
.uy-notr { color: var(--text-1); }
.uy-zorlayici { color: var(--error); border-color: var(--error); }
.uy-akis {
font-family: var(--font-cormorant); font-size: 30px;
color: var(--text-0); line-height: 1.2;
}
.uy-pencere {
font-size: 12px; color: var(--text-gold-dim);
letter-spacing: .06em; margin-top: 6px;
}
.uy-ozet { font-size: 15px; color: var(--text-1); line-height: 1.6; margin-top: 12px; }
.uy-ikili-kutu { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.uy-kutu {
background: var(--bg-2); border: 1px solid var(--border-0);
border-radius: 12px; padding: 12px;
font-size: 13px; color: var(--text-1); line-height: 1.5;
}
.uy-kutu-b {
font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
color: var(--text-gold-dim); margin-bottom: 6px;
}
.uy-oneri {
margin-top: 16px; padding: 13px 14px;
background: var(--gold-10); border-left: 2px solid var(--gold);
border-radius: 0 10px 10px 0;
font-size: 14px; color: var(--text-0); line-height: 1.6;
}
.uy-nabiz, .uy-serh {
margin-top: 14px; font-size: 12px; color: var(--text-1);
opacity: .8; line-height: 1.55;
}
.uy-egilim {
margin-top: 16px; padding: 14px;
background: var(--bg-2); border: 1px solid var(--border-0); border-radius: 12px;
font-size: 14px; color: var(--text-1); line-height: 1.65;
}
.uy-egilim-b {
font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
color: var(--text-gold-dim); margin-bottom: 8px;
}
.uy-denge { margin-top: 12px; }
.uy-zemin {
display: inline-block; margin-top: 8px;
background: transparent; color: var(--gold);
border: 1px solid var(--border-gold); border-radius: 999px;
padding: 6px 14px; font-size: 12px; cursor: pointer;
}
.uy-zemin:hover { background: var(--gold-10); }
.uy-uyari {
padding: 14px; border: 1px solid var(--border-1); border-radius: 12px;
font-size: 14px; color: var(--text-1); line-height: 1.6;
}
.uy-derin { margin-top: 18px; }
@media (max-width: 420px) {
.uy-ikili, .uy-ikili-kutu { grid-template-columns: 1fr; }
}
/* ══ Geri bildirim şeridi ════════════════════════════════════
Tavsiyeden SONRA, hedef zaman geçince sorulan tek soru. */
.gb-serit {
position: relative;
background: var(--bg-2);
border: 1px solid var(--border-gold);
border-radius: 16px;
padding: 18px 20px 16px;
margin-bottom: 14px;
}
.gb-kapat {
position: absolute; top: 8px; right: 10px;
width: 26px; height: 26px; border-radius: 50%;
background: transparent; border: none;
color: var(--text-1); font-size: 16px; cursor: pointer; opacity: .6;
}
.gb-kapat:hover { opacity: 1; }
.gb-soru {
font-family: var(--font-cormorant);
font-size: 18px; color: var(--text-0);
line-height: 1.45; padding-right: 22px;
}
.gb-secenekler {
display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px;
}
.gb-sec {
flex: 1 1 auto;
background: transparent; color: var(--gold);
border: 1px solid var(--border-gold); border-radius: 999px;
padding: 9px 14px; font-family: var(--font-outfit); font-size: 13px;
cursor: pointer; white-space: nowrap;
transition: background var(--dur-fast);
}
.gb-sec:hover { background: var(--gold-10); }
.gb-tesekkur {
font-family: var(--font-cormorant); font-size: 17px;
color: var(--text-gold-dim); text-align: center; padding: 6px 0;
}
/* Kişisel gün hakemi — nötr/sürtünmeli sonuçlarda çıkan gerekçe kutusu */
.uy-hakem {
margin-top: 16px; padding: 13px 14px;
background: var(--bg-2); border: 1px solid var(--border-0);
border-radius: 12px; font-size: 14px; color: var(--text-1); line-height: 1.6;
}
.uy-hakem-b {
font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
color: var(--text-gold-dim); margin-bottom: 7px;
}
/* ══ Derin Raporlar ══════════════════════════════════════════ */
.sf-rapor { cursor: pointer; transition: border-color var(--dur-fast); }
.sf-rapor:hover { border-color: var(--border-gold); }
.rp-kart-ana {
font-family: var(--font-cormorant); font-size: 24px;
color: var(--text-0); margin-bottom: 5px;
}
.rp-kart-alt { font-size: 13px; color: var(--text-1); }
.rp-kart-btn {
margin-top: 15px; width: 100%;
background: transparent; color: var(--gold);
border: 1px solid var(--border-gold); border-radius: 12px;
padding: 11px; font-family: var(--font-outfit); font-size: 13px;
letter-spacing: .08em; cursor: pointer;
transition: background var(--dur-fast);
}
.rp-kart-btn:hover { background: var(--gold-10); }
.rp-ortu {
position: fixed; inset: 0; z-index: 900; display: none;
align-items: flex-start; justify-content: center;
background: var(--blur-bg); backdrop-filter: blur(6px);
padding: calc(var(--safe-top) + 24px) 16px calc(var(--safe-bottom) + 24px);
overflow-y: auto;
}
.rp-ortu.acik { display: flex; }
.rp-kart {
position: relative; width: 100%; max-width: 560px;
background: var(--bg-1); border: 1px solid var(--border-gold);
border-radius: 20px; padding: 26px 22px 24px; box-shadow: var(--shadow-lg);
}
.rp-kapat {
position: absolute; top: 12px; right: 12px;
width: 32px; height: 32px; border-radius: 50%;
background: transparent; border: 1px solid var(--border-1);
color: var(--text-1); font-size: 18px; cursor: pointer;
}
.rp-ust { text-align: center; margin-bottom: 22px; }
.rp-baslik {
font-family: var(--font-cinzel); font-size: 13px; letter-spacing: .28em;
text-transform: uppercase; color: var(--text-gold-dim);
}
.rp-alt { font-size: 13px; color: var(--text-1); margin-top: 8px; }
.rp-davet {
background: var(--gold-10); border: 1px solid var(--border-gold);
border-radius: 14px; padding: 18px; text-align: center;
}
.rp-davet-b { font-family: var(--font-cormorant); font-size: 22px; color: var(--text-0); }
.rp-davet-d { font-size: 12px; color: var(--text-gold-dim); margin-top: 6px; letter-spacing: .04em; }
.rp-btn {
margin-top: 14px; width: 100%;
background: var(--gold-10); color: var(--gold);
border: 1px solid var(--border-gold); border-radius: 12px;
padding: 12px; font-family: var(--font-outfit); font-size: 14px;
letter-spacing: .08em; cursor: pointer;
}
.rp-btn:hover { background: var(--gold-20); }
.rp-btn:disabled { opacity: .6; cursor: default; }
.rp-bekle, .rp-kilit {
background: var(--bg-2); border: 1px solid var(--border-0);
border-radius: 14px; padding: 16px;
font-size: 14px; color: var(--text-1); line-height: 1.6;
}
.rp-kilit-b {
font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
color: var(--text-gold-dim); margin-bottom: 7px;
}
.rp-liste { margin-top: 20px; }
.rp-liste-b {
font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
color: var(--text-gold-dim); margin-bottom: 10px;
}
.rp-satir {
display: flex; align-items: center; gap: 10px; width: 100%;
background: var(--bg-2); border: 1px solid var(--border-0);
border-radius: 12px; padding: 12px 14px; margin-bottom: 8px;
cursor: pointer; text-align: left;
font-family: var(--font-outfit); color: var(--text-1); font-size: 14px;
}
.rp-satir:hover { border-color: var(--border-gold); }
.rp-satir-tip { color: var(--gold); font-size: 13px; min-width: 62px; }
.rp-satir-tarih { flex: 1; }
.rp-rozet {
font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
color: var(--text-gold-dim); border: 1px solid var(--border-1);
border-radius: 999px; padding: 3px 8px;
}
.rp-geri {
background: none; border: none; color: var(--text-gold-dim);
font-family: var(--font-outfit); font-size: 13px; cursor: pointer;
padding: 0 0 14px; letter-spacing: .04em;
}
.rp-r-baslik { font-family: var(--font-cormorant); font-size: 27px; color: var(--text-0); }
.rp-r-tarih { font-size: 12px; color: var(--text-gold-dim); letter-spacing: .06em; margin-top: 4px; }
.rp-r-not { font-size: 12px; color: var(--text-1); opacity: .8; margin-top: 8px; }
.rp-metin {
margin-top: 18px; font-family: var(--font-cormorant);
font-size: 18px; line-height: 1.75; color: var(--text-1);
}
.rp-duzen {
width: 100%; margin-top: 16px;
background: var(--bg-2); color: var(--text-0);
border: 1px solid var(--border-1); border-radius: 12px;
padding: 14px; font-family: var(--font-outfit); font-size: 14px;
line-height: 1.65; resize: vertical;
}
.rp-duzen:focus { outline: none; border-color: var(--border-gold); }
.rp-islem { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
.rp-ikincil {
flex: 1 1 auto;
background: transparent; color: var(--gold);
border: 1px solid var(--border-gold); border-radius: 12px;
padding: 11px 14px; font-family: var(--font-outfit); font-size: 13px;
cursor: pointer; white-space: nowrap;
}
.rp-ikincil:hover { background: var(--gold-10); }
.rp-pasif { color: var(--text-1); border-color: var(--border-1); }
.rp-veri { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--border-0); }
.rp-veri-not { font-size: 12px; color: var(--text-1); opacity: .8; margin-top: 9px; line-height: 1.55; }
.rp-uyari {
position: sticky; bottom: 0;
margin-top: 16px; padding: 12px 14px;
background: var(--bg-2); border: 1px solid var(--border-gold);
border-radius: 12px; font-size: 13px; color: var(--text-0); line-height: 1.55;
opacity: 0; transform: translateY(6px);
transition: opacity var(--dur-fast), transform var(--dur-fast);
pointer-events: none;
}
.rp-uyari.gorunur { opacity: 1; transform: none; }
/* ══ Sofa: katlanabilir satır ════════════════════════════════
Vitrin mantığı — her şey görünür DEĞİL, ulaşılabilir.
Başlık + tek satır özet; gövde dokununca yerinde açılır. */
.sf-satir {
background: var(--bg-1);
border: 1px solid var(--border-0);
border-radius: 14px;
margin-bottom: 8px;
overflow: hidden;
transition: border-color var(--dur-fast);
}
.sf-satir.acik { border-color: var(--border-gold); }
.sf-satir-bas {
display: flex; align-items: center; gap: 12px;
width: 100%; background: none; border: none;
padding: 14px 16px; cursor: pointer; text-align: left;
font-family: var(--font-outfit);
}
.sf-satir-ad {
flex: 0 0 auto;
font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
color: var(--text-gold-dim); white-space: nowrap;
}
.sf-satir-ozet {
flex: 1 1 auto; min-width: 0;
font-size: 13px; color: var(--text-1);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sf-satir-ok {
flex: 0 0 auto; color: var(--text-gold-dim); font-size: 17px;
transform: rotate(90deg); transition: transform var(--dur-fast);
}
.sf-satir.acik .sf-satir-ok { transform: rotate(-90deg); }
.sf-satir-govde {
padding: 2px 16px 16px;
border-top: 1px solid var(--border-0);
}
.sf-satir.acik .sf-satir-govde { animation: sfSatirAc var(--dur-fast) ease-out; }
@keyframes sfSatirAc {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: none; }
}
/* Dar ekranda başlık ve özet alt alta — kesilmesin */
@media (max-width: 380px) {
.sf-satir-bas { flex-wrap: wrap; gap: 4px 10px; }
.sf-satir-ozet { flex-basis: 100%; white-space: normal; }
}
/* ══ Yorumum — kırpık görünüm ════════════════════════════════
Kart kalıyor ama ilk bakışta 3 satır gösteriyor. "Devamı" ile
yerinde açılır; "Tam Ekran" ayrı ve olduğu gibi duruyor.
-webkit-line-clamp yerine max-height: metin blok öğelerinden
oluşuyor, line-clamp bu durumda tarayıcılar arasında güvenilmez. */
.sf-ai-metin.sf-ai-kirpik {
position: relative;
max-height: 5.4em; /* ~3 satır */
overflow: hidden;
}
.sf-ai-metin.sf-ai-kirpik::after {
content: '';
position: absolute; left: 0; right: 0; bottom: 0; height: 2.2em;
background: linear-gradient(to bottom, transparent, var(--bg-1));
pointer-events: none;
}
.sf-ai-metin.sf-ai-kirpik > p:first-child { margin-top: 0; }
.sf-ai-devam {
background: none; border: none; cursor: pointer;
padding: 8px 0 0;
font-family: var(--font-outfit); font-size: 12px;
letter-spacing: .1em; text-transform: uppercase;
color: var(--text-gold-dim);
}
.sf-ai-devam:hover { color: var(--gold); }
/* ══ Haritanın Özeti — satır içeriği ═════════════════════════
Doğumda sabitlenen alanlar. Satır kapalıyken tek satır özet
(.ho-ozet) görünür; açılınca her alan kendi açıklamasıyla gelir. */
.ho-ozet {
font-family: var(--font-cormorant);
font-size: 17px; color: var(--text-1);
}
.ho-satir {
padding: 11px 0;
border-bottom: 1px solid var(--border-0);
}
.ho-satir:last-child { border-bottom: none; padding-bottom: 0; }
.ho-ust {
display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
}
.ho-etiket {
font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
color: var(--text-gold-dim); white-space: nowrap;
}
.ho-deger {
font-family: var(--font-cormorant); font-size: 19px;
color: var(--text-0); text-align: right;
}
.ho-not {
font-size: 13px; color: var(--text-1);
opacity: .85; line-height: 1.5; margin-top: 3px;
}
/* ══ Nabız kartları — v1 kontrast sistemi ════════════════════
v2'de markup v1'den birebir taşınmış ama .nk-svg-wrap kuralları
gelmemiş. Albeni farkı buradan geliyordu: v1'de SVG'ler bir
brightness/saturate filtresiyle öne çıkıyor, v2'de ham duruyordu. */
.nk-svg-wrap {
display: flex; align-items: center; justify-content: center;
width: 100%; aspect-ratio: 1;
}
.nk-svg-wrap svg {
width: 100%; height: 100%;
transition: filter .25s ease, transform .25s ease;
filter: brightness(1.15) saturate(1.35) contrast(1.1);
}
.nabiz-kart:hover .nk-svg-wrap svg,
.nk-c:hover .nk-svg-wrap svg {
filter: brightness(1.4) saturate(1.5) contrast(1.15);
transform: scale(1.04);
}
.nabiz-kart.secili .nk-svg-wrap svg,
.nabiz-kart.nk-secili .nk-svg-wrap svg {
filter: brightness(1.5) saturate(1.6) contrast(1.2)
drop-shadow(0 0 8px currentColor);
}
/* ══ Nabız — vakit satırları ═════════════════════════════════
Kural: seçilmişse kapalı, seçilmemişse açık. Ayrı bir gösterge
yok — açık duran satır zaten "burada yapılacak iş var" demek.
Vakit geçtiyse kayıt kilitli; sadece bakılır. */
.nb-vakit {
border: 1px solid var(--border-0);
border-radius: 14px;
margin-bottom: 8px;
overflow: hidden;
transition: border-color var(--dur-fast), background var(--dur-fast);
}
.nb-vakit.acik { border-color: var(--border-gold); background: var(--gold-10); }
.nb-vakit.kacti { opacity: .55; }
.nb-vakit-bas {
display: flex; align-items: center; gap: 12px;
width: 100%; background: none; border: none;
padding: 15px 16px; cursor: pointer; text-align: left;
font-family: var(--font-outfit);
}
.nb-vakit-sembol { font-size: 13px; flex: 0 0 auto; }
.nb-vakit-ad {
flex: 1 1 auto;
font-size: 13px; letter-spacing: .2em; text-transform: uppercase;
color: var(--text-0);
}
.nb-tik { color: var(--gold); font-size: 13px; }
.nb-kacti {
font-size: 11px; letter-spacing: .08em;
color: var(--text-1); opacity: .7;
}
.nb-vakit-ok {
flex: 0 0 auto; color: var(--text-gold-dim); font-size: 17px;
transform: rotate(90deg); transition: transform var(--dur-fast);
}
.nb-vakit.acik .nb-vakit-ok { transform: rotate(-90deg); }
.nb-vakit-govde { padding: 4px 16px 18px; }
.nb-kilitli { padding: 4px 0 2px; }
.nb-kilitli-ad {
font-family: var(--font-cormorant); font-size: 22px; color: var(--text-0);
}
.nb-kilitli-not {
font-family: var(--font-cormorant); font-size: 15px; font-style: italic;
color: var(--text-1); margin-top: 4px; line-height: 1.5;
}
.nb-kilitli-uyari {
font-size: 12px; color: var(--text-1); opacity: .65; margin-top: 10px;
}
/* Daireler artık iç çerçevede değil — satır genişliğine yayılır */
.nb-vakit-govde #nabiz-kartlar { max-width: none !important; gap: 10px !important; }
/* ══ Nabız daireleri — çerçevelerden kurtar, büyüt ═══════════
Daireler üç kat çerçeve içindeydi: sofa-kart (23px) → vakit
satırı (16px) → grid. Açık vakitte bu katmanlar şeffaflaşır
ve grid tam genişliğe yayılır. */
.sf-nabiz { padding-left: 12px; padding-right: 12px; }
/* Açık vakit satırı: çerçevesiz. Zaten açık olduğu belli. */
.sf-nabiz .nb-vakit.acik {
border-color: transparent;
background: none;
}
.sf-nabiz .nb-vakit.acik .nb-vakit-govde {
padding-left: 2px; padding-right: 2px; padding-bottom: 10px;
}
.nb-vakit-govde #nabiz-kartlar {
max-width: none !important;
gap: 12px !important;
margin-bottom: .5rem !important;
}
/* Daha net: taban filtre yükseldi, seçili hâl belirgin ayrışıyor */
.nk-svg-wrap svg { filter: brightness(1.32) saturate(1.5) contrast(1.18); }
.nabiz-kart:hover .nk-svg-wrap svg,
.nk-c:hover .nk-svg-wrap svg {
filter: brightness(1.55) saturate(1.65) contrast(1.22);
transform: scale(1.05);
}
.nabiz-kart.secili .nk-svg-wrap svg,
.nabiz-kart.nk-secili .nk-svg-wrap svg {
filter: brightness(1.7) saturate(1.8) contrast(1.28)
drop-shadow(0 0 10px currentColor);
}
/* Kart çerçevesi hafifledi — daire kendi halkasıyla zaten çerçeveli */
.nb-vakit-govde .nabiz-kart {
border-color: transparent !important;
background: transparent !important;
}
.nb-vakit-govde .nabiz-kart:hover,
.nb-vakit-govde .nabiz-kart.secili {
border-color: transparent !important;
box-shadow: none !important;
}
/* Etiketler okunur olsun */
.nb-vakit-govde .nabiz-kart-ad,
.nb-vakit-govde .nk-ad {
font-size: 12px !important;
letter-spacing: .16em;
color: var(--text-0) !important;
}
/* ══ Nabız kartları — kontrast yükseltme ═════════════════════
SVG çizgileri ince ve opacity'leri kaynağında düşük (.35–.7).
brightness tek başına opacity'yi etkilemediği için yetmiyor;
contrast + saturate ile birlikte ve ince bir aynı-renk parıltıyla
çizgi kalınlığı algısını da yükseltiyoruz. */
.nk-svg-wrap svg {
filter:
brightness(1.75) saturate(1.9) contrast(1.35)
drop-shadow(0 0 .6px currentColor);
}
.nabiz-kart:hover .nk-svg-wrap svg,
.nk-c:hover .nk-svg-wrap svg {
filter:
brightness(2) saturate(2.05) contrast(1.4)
drop-shadow(0 0 1.2px currentColor);
transform: scale(1.05);
}
.nabiz-kart.secili .nk-svg-wrap svg,
.nabiz-kart.nk-secili .nk-svg-wrap svg {
filter:
brightness(2.15) saturate(2.2) contrast(1.45)
drop-shadow(0 0 9px currentColor);
}
/* Daireyi zeminden ayıran çok hafif bir taban — halka boşlukta durmasın */
.nb-vakit-govde .nabiz-kart {
background: radial-gradient(circle at 50% 45%,
rgba(255,255,255,.045) 0%, transparent 68%) !important;
border-radius: 50%;
}
.nb-vakit-govde .nabiz-kart.secili {
background: radial-gradient(circle at 50% 45%,
rgba(201,168,76,.14) 0%, transparent 70%) !important;
}
/* Etiketler: ince altın yerine tam kontrast */
.nb-vakit-govde .nabiz-kart-ad,
.nb-vakit-govde .nk-ad {
color: rgba(245,240,232,.96) !important;
opacity: 1 !important;
}
/* ══ Nabız daireleri — alt menü butonlarıyla aynı dil ════════
Daireler zeminle aynı tondaydı, bu yüzden "yüzüyor" gibi
duruyordu. Alt menüdeki .nav-btn nasıl duruyorsa aynısı:
zeminin bir ton koyusu + ince halka + yumuşak parıltı. */
.nb-vakit-govde .nabiz-kart {
background: var(--ucan-bg, rgba(10,12,20,.55)) !important;
border: 1px solid color-mix(in srgb, currentColor 34%, transparent) !important;
border-radius: 50%;
box-shadow:
0 8px 22px rgba(0,0,0,.38),
0 0 20px color-mix(in srgb, currentColor 18%, transparent),
inset 0 1px 0 var(--ucan-ic-isik, rgba(255,255,255,.06));
backdrop-filter: blur(10px) saturate(1.15);
-webkit-backdrop-filter: blur(10px) saturate(1.15);
padding: 10px 10px 12px;
transition: border-color .2s, box-shadow .2s, transform .35s cubic-bezier(.2,.7,.3,1);
}
.nb-vakit-govde .nabiz-kart:hover {
border-color: color-mix(in srgb, currentColor 55%, transparent) !important;
box-shadow:
0 10px 26px rgba(0,0,0,.42),
0 0 30px color-mix(in srgb, currentColor 32%, transparent),
inset 0 1px 0 var(--ucan-ic-isik, rgba(255,255,255,.08));
}
.nb-vakit-govde .nabiz-kart.secili {
border-color: color-mix(in srgb, currentColor 78%, transparent) !important;
box-shadow:
0 10px 28px rgba(0,0,0,.45),
0 0 38px color-mix(in srgb, currentColor 46%, transparent),
inset 0 1px 0 var(--ucan-ic-isik, rgba(255,255,255,.1));
}
/* ══ Vakit satırı — her genişlikte dokunulabilir ═════════════
Masaüstünde satır sadece metin gibi duruyordu; tıklama alanı
tüm satıra yayıldı ve imleç işaretçiye çevrildi. */
.nb-vakit-bas { cursor: pointer; min-height: 52px; }
.nb-vakit-bas:hover .nb-vakit-ad { color: var(--gold); }
.nb-vakit-bas:focus-visible { outline: 1px solid var(--border-gold); outline-offset: -2px; }
.nb-vakit-bas * { pointer-events: none; } /* iç öğeler tıklamayı yutmasın */
/* ══ Nabız paneli — alt menüyle aynı zemin ═══════════════════
Butonlar --ucan-bg üzerinde duruyor; nabzın arkasındaki pano
farklı bir tondaydı, bu yüzden iki alan birbirine yabancı
görünüyordu. Aynı değişkene çekildi. */
.sf-nabiz .nb-vakit {
background: var(--ucan-bg);
backdrop-filter: blur(14px) saturate(1.15);
-webkit-backdrop-filter: blur(14px) saturate(1.15);
}
.sf-nabiz .nb-vakit.acik {
background: var(--ucan-bg);
border-color: color-mix(in srgb, var(--gold) 26%, transparent);
}
/* Daireler aynı zeminin üstünde durduğu için kendi kutularına
gerek kalmıyor — halka ve parıltı yeterli ayrımı sağlıyor. */
.nb-vakit-govde .nabiz-kart {
background: transparent !important;
backdrop-filter: none;
-webkit-backdrop-filter: none;
box-shadow: 0 0 18px color-mix(in srgb, currentColor 16%, transparent);
}
.nb-vakit-govde .nabiz-kart:hover {
box-shadow: 0 0 28px color-mix(in srgb, currentColor 30%, transparent);
}
.nb-vakit-govde .nabiz-kart.secili {
box-shadow: 0 0 36px color-mix(in srgb, currentColor 44%, transparent);
}
/* ══ Bulut onayı ═════════════════════════════════════════════
Kutu boş açılır, işaretlenmeden düğme çalışmaz: rıza olumlu
bir eylemle verilmeli. Kayıp listesi gizlenmez. */
.bo-ortu {
/* z-index her şeyin üstünde: ayar dropdown'ı 9800'de; onay 950'deyken
menünün arkasında kalıyor ve okunamıyordu. */
position: fixed; inset: 0; z-index: 10000; display: none;
/* Kısa içerikte dikeyde ortalanır; uzun içerikte üstten başlar ve
kaydırılır (flex-start + auto tek başına uzun içerikte üstü kesiyordu). */
align-items: center; justify-content: center;
background: var(--blur-bg); backdrop-filter: blur(6px);
padding: 16px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
/* Uzun içerik: karta göre değil katmana göre kaydır, kart tam görünür kalsın */
@media (max-height: 720px) {
.bo-ortu { align-items: flex-start; }
}
.bo-ortu.acik { display: flex; }
.bo-kart {
position: relative; width: 100%; max-width: 520px;
max-height: calc(100vh - 32px);
margin: auto;
display: flex; flex-direction: column;
background: var(--bg-1); border: 1px solid var(--border-gold);
border-radius: 20px; box-shadow: var(--shadow-lg);
overflow: hidden;
}
/* Başlık ve kutu sabit; ortadaki açıklama listesi kayar. Böylece
"Onayla" düğmesi ekranın altında kaybolmaz, her zaman görünür. */
.bo-kart > * { padding-left: 22px; padding-right: 22px; }
.bo-kart > *:first-child { padding-top: 24px; }
.bo-govde {
flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch;
padding-top: 4px; padding-bottom: 4px;
}
.bo-kutu, .bo-islem { flex: 0 0 auto; }
.bo-islem { padding-bottom: 22px; padding-top: 10px; }
.bo-kapat {
position: absolute; top: 12px; right: 12px;
width: 32px; height: 32px; border-radius: 50%;
background: transparent; border: 1px solid var(--border-1);
color: var(--text-1); font-size: 18px; cursor: pointer;
}
.bo-baslik {
font-family: var(--font-cormorant); font-size: 26px;
color: var(--text-0); text-align: center;
}
.bo-giris {
font-size: 14px; color: var(--text-1); line-height: 1.6;
text-align: center; margin: 10px 0 20px;
}
.bo-blok {
border: 1px solid var(--border-0); border-left-width: 2px;
border-radius: 0 12px 12px 0; padding: 13px 14px; margin-bottom: 10px;
}
.bo-arti { border-left-color: var(--success, #7fa87f); }
.bo-eksi { border-left-color: var(--gold); }
.bo-notr { border-left-color: var(--border-1); }
.bo-blok-b {
font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
color: var(--text-gold-dim); margin-bottom: 8px;
}
.bo-liste { margin: 0; padding-left: 18px; }
.bo-liste li {
font-size: 13.5px; color: var(--text-1); line-height: 1.6; margin-bottom: 6px;
}
.bo-liste li:last-child { margin-bottom: 0; }
.bo-kutu {
display: flex; gap: 11px; align-items: flex-start;
margin: 18px 0 16px; cursor: pointer;
font-size: 13.5px; color: var(--text-0); line-height: 1.55;
}
.bo-kutu input { margin-top: 3px; flex: 0 0 auto; width: 17px; height: 17px; cursor: pointer; }
.bo-islem { display: flex; gap: 10px; }
.bo-ikincil, .bo-ana {
flex: 1 1 0; border-radius: 12px; padding: 12px;
font-family: var(--font-outfit); font-size: 13.5px; cursor: pointer;
}
.bo-ikincil { background: transparent; color: var(--text-1); border: 1px solid var(--border-1); }
.bo-ana { background: var(--gold-10); color: var(--gold); border: 1px solid var(--border-gold); }
.bo-ana:disabled { opacity: .45; cursor: not-allowed; }
.bo-ana:not(:disabled):hover { background: var(--gold-20); }
/* Bulut senkronu — ayar panelindeki mini işlemler */
.dd-bulut-islem { display: flex; gap: 8px; margin-top: 10px; }
.dd-mini {
flex: 1 1 0;
background: transparent; color: var(--gold);
border: 1px solid var(--border-gold); border-radius: 10px;
padding: 9px 10px; font-family: var(--font-outfit); font-size: 12px;
cursor: pointer; white-space: nowrap;
}
.dd-mini:hover { background: var(--gold-10); }
.dd-mini:disabled { opacity: .55; cursor: default; }
.dd-mini-uyari { color: var(--error, #c98a8a); border-color: color-mix(in srgb, var(--error, #c98a8a) 45%, transparent); }
.dd-mini-uyari:hover { background: color-mix(in srgb, var(--error, #c98a8a) 12%, transparent); }
/* ══ Nabız daireleri — "Beni Analiz Et" zeminiyle aynı ═══════
ÖNEMLİ: .nabiz-kart bir flex KOLONU (svg + etiket), daire değil.
Daireyi svg çiziyor. Zemini svg'nin ARKASINA, dairesel olarak
koymak gerekiyor — kutuya vermek işe yaramıyordu. Sentez kartının
altın köşe gradyanı burada radyal karşılığıyla. */
.nb-vakit-govde .nabiz-kart {
position: relative;
border: none !important;
background: none !important;
box-shadow: none !important;
}
.nb-vakit-govde .nabiz-kart svg {
position: relative;
z-index: 1;
border-radius: 50%;
background: radial-gradient(circle at 42% 34%,
rgba(var(--gold-rgb), .10) 0%,
rgba(var(--gold-rgb), .04) 45%,
transparent 72%);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 22%, transparent);
transition: background .25s ease, box-shadow .25s ease;
}
.nb-vakit-govde .nabiz-kart:hover svg {
background: radial-gradient(circle at 42% 34%,
rgba(var(--gold-rgb), .16) 0%,
rgba(var(--gold-rgb), .06) 48%,
transparent 74%);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 40%, transparent),
0 0 24px color-mix(in srgb, currentColor 22%, transparent);
}
.nb-vakit-govde .nabiz-kart.secili svg {
background: radial-gradient(circle at 42% 34%,
rgba(var(--gold-rgb), .22) 0%,
rgba(var(--gold-rgb), .08) 50%,
transparent 75%);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 70%, transparent),
0 0 30px color-mix(in srgb, currentColor 34%, transparent);
}
/* ══ Nabız "Bu ne?" — dokununca açılan açıklama ══════════════
Dili değiştirmiyoruz; sistem adı kalıyor. Kullanıcı tanımadığı
bir hâle dokunup gündelik açıklamasını okuyor, sonra seçiyor. */
.nk-ne {
position: absolute; top: 4px; left: 5px; z-index: 4;
width: 20px; height: 20px; border-radius: 50%;
background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.22);
color: rgba(255,255,255,.8); font-size: 12px; line-height: 1;
cursor: pointer; padding: 0;
display: flex; align-items: center; justify-content: center;
}
.nk-ne:hover { background: rgba(0,0,0,.55); color: #fff; }
.nk-ac-ortu {
position: fixed; inset: 0; z-index: 10000;
display: flex; align-items: center; justify-content: center;
padding: 24px; background: rgba(0,0,0,.55);
backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
opacity: 0; transition: opacity .2s ease;
}
.nk-ac-ortu.acik { opacity: 1; }
.nk-ac-kart {
position: relative; width: 100%; max-width: 340px; text-align: center;
background: var(--bg-1); border: 1px solid color-mix(in srgb, var(--r) 55%, transparent);
border-radius: 22px; padding: 30px 24px 24px;
box-shadow: 0 20px 60px rgba(0,0,0,.5), 0 0 40px color-mix(in srgb, var(--r) 20%, transparent);
transform: translateY(12px) scale(.97); transition: transform .25s cubic-bezier(.2,.7,.3,1);
}
.nk-ac-ortu.acik .nk-ac-kart { transform: none; }
.nk-ac-kapat {
position: absolute; top: 12px; right: 12px;
width: 30px; height: 30px; border-radius: 50%;
background: transparent; border: 1px solid var(--border-1);
color: var(--text-1); font-size: 17px; cursor: pointer;
}
.nk-ac-sembol { font-size: 34px; color: var(--r); margin-bottom: 8px; }
.nk-ac-ad {
font-family: var(--font-cormorant); font-size: 28px; color: var(--text-0);
}
.nk-ac-his {
font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
color: color-mix(in srgb, var(--r) 75%, var(--text-1)); margin-top: 6px;
}
.nk-ac-metin {
font-family: var(--font-cormorant); font-size: 17px; line-height: 1.65;
color: var(--text-1); margin: 16px 0 22px;
}
.nk-ac-sec {
width: 100%; padding: 13px; border-radius: 13px; cursor: pointer;
background: color-mix(in srgb, var(--r) 18%, transparent);
border: 1px solid color-mix(in srgb, var(--r) 55%, transparent);
color: var(--text-0); font-family: var(--font-outfit); font-size: 14px;
}
.nk-ac-sec:hover { background: color-mix(in srgb, var(--r) 30%, transparent); }