/* ═══════════════════════════════════════════════════════════════════════ MARTA BELLA — tema Bütün sayfaların rengi, yazı tipi ve ölçüleri BURADAN gelir. Tonu değiştirmek gerekirse yalnız bu dosyaya dokunun. İKİ TEMA var ve ikisi de AYNI belirteçleri kullanır: varsayılan → AÇIK ("Fildişi") — kullanıcı seçmediyse bu gelir :root[data-tema=koyu] → KOYU ("İpek") — espresso zemin, altın işleme Sayfalarda sabit renk YAZMAYIN. `rgba(255,255,255,.06)` gibi bir değer açık temada görünmez olur; onun yerine aşağıdaki belirteçleri kullanın: --yuzey-1 / --yuzey-2 kutu içi hafif zeminler --ayrac / --ayrac-2 satır arası çizgiler --altin-sis / -cizgi / -cizgi-2 altın tonlu zemin ve kenarlık --yesim-sis / -cizgi / -cizgi-2 "iyi/canlı" durumları --kirmizi-sis / -cizgi / -cizgi-2 uyarı ve borç --kirmizi-metin açık zeminde de okunan uyarı yazısı Tema seçimi `localStorage.bellaTema` içinde durur ve `` içindeki küçük betik ilk boyamadan ÖNCE `data-tema`yı kurar — yoksa açık temada bir an koyu ekran çakar. ═══════════════════════════════════════════════════════════════════════ */ /* ══════════════════ AÇIK TEMA — varsayılan ══════════════════ Beyaz değil fildişi: güzellik merkezine sıcak durması için zemin kremli, altın da açık zeminde okunacak kadar koyultuldu (#D9B65C beyazda kayboluyor). */ :root{ color-scheme:light; /* ——— altın ——— */ --altin-isik:#C9A227; /* Altın metin, KENDİ TONLU ZEMİNİ üstünde de okunmalı (seçili çip, vurgulu kart, rozet). Düz zeminde 7.4:1, altın tonlu zeminde 5.0:1. */ --altin:#6B5210; --altin-orta:#B08E1E; /* accent-color, form kutucukları */ --altin-koyu:#7A5E10; --metal:linear-gradient(142deg,#F8EDC4 0%,#E3C766 34%,#CDA832 58%,#AD8720 100%); --altin-uzeri:#2A210A; /* altın dolgu üzerine BEYAZ yazılmaz */ /* Süs altını (zemin/kenarlık) fazla soluktu — beyaz üstünde kayboluyordu. Metin altını (--altin) zaten koyu, oraya dokunma. */ --altin-sis:rgba(154,119,20,.13); --altin-cizgi:rgba(154,119,20,.38); --altin-cizgi-2:rgba(154,119,20,.62); /* ——— vurgu ——— */ /* Yeşim de kendi tonlu zemininde ölçüldü: "CANLI" rozeti 3.58'de kalıyordu. */ --yesim:#06603F; --yesim-sis:rgba(15,138,107,.12); --yesim-cizgi:rgba(15,138,107,.34); --yesim-cizgi-2:rgba(15,138,107,.5); --kirmizi:#C2434A; --kirmizi-metin:#9B2F36; /* açık zeminde okunan uyarı yazısı */ --kirmizi-sis:rgba(194,67,74,.11); --kirmizi-cizgi:rgba(194,67,74,.32); --kirmizi-cizgi-2:rgba(194,67,74,.5); /* ——— zemin ——— */ --zemin:#E9E2D3; /* ana zemin — beyaz kart üstünde net dursun */ --zemin-2:#FFFFFF; /* bir kat üstü: kutular */ --zemin-3:#FDFBF7; /* kenar çubuğu — beyazdan bir tık sıcak */ /* Kart yüzeyi. Açık temada BEYAZ + gerçek kenarlık + hafif gölge; koyu temanın "saydam beyaz" numarası burada işe yaramaz. */ --kart:#FFFFFF; /* Modal ve çekmece gibi zeminden KOPAN yüzeyler */ --kart-2:#FFFFFF; --kart-cizgi:rgba(36,30,21,.16); --yan-zemin:#FDFBF7; /* Form alanı. Beyaz kart üstünde beyaz input "alan" gibi durmuyordu; hafif sıcak bir zemin + belirgin kenarlık onu alan yapıyor. */ --alan-zemin:#FAF7F0; --alan-cizgi:rgba(36,30,21,.20); /* Büyük rakamların altın gradyanı — açık zeminde koyu uçlar */ /* Rakam gradyanının AÇIK UCU da okunur olmalı: 22px'lik rakamda eşik 4.5 ve #A8801A beyaz üstünde 3.44'te kalıyordu. */ --metal-yazi:linear-gradient(180deg,#8A6A12,#5C4509); --siyah:var(--zemin); /* eski ad, uyumluluk için */ --zemin-perde:rgba(251,248,242,.97); --zemin-2-perde:rgba(255,255,255,.98); --perde:rgba(40,33,23,.42); /* mobil menü karartması */ /* ——— yüzeyler ——— Açık temada bunlar SİYAH alfadır; koyu temada beyaz alfaya döner. */ --yuzey-1:rgba(36,30,21,.03); --yuzey-2:rgba(36,30,21,.058); --ayrac:rgba(36,30,21,.13); --ayrac-2:rgba(36,30,21,.19); --cam:var(--yuzey-2); --cam-koyu:var(--yuzey-1); --cizgi:rgba(154,119,20,.22); --cizgi-2:var(--ayrac); --cam-cizgi:var(--cizgi); /* eski ad */ /* ——— metin ——— */ --ink:#241E15; --dim:#645B4C; /* ikincil */ /* ÜÇÜNCÜL METİN --zemin İLE BİRLİKTE HAREKET EDER: zemin her koyulaştığında bu da koyulaşmalı, yoksa 4.5:1 altına düşer. #E9E2D3 zeminde 4.9:1. */ --dim-2:#676052; /* ——— gölge ——— */ /* Tarayıcının kendi takvim ikonu: açık temada zaten koyu, dokunma */ --takvim-ikon:none; --golge-1:0 1px 3px rgba(40,33,23,.10),0 1px 1px rgba(40,33,23,.05); --golge-2:0 20px 50px -28px rgba(40,33,23,.32); --golge-3:0 40px 90px -38px rgba(40,33,23,.38); } /* ══════════════════ KOYU TEMA — "İpek" ══════════════════ 2026-09-21'de bir tık açıldı (#0B0906 → #1B1710); metin ve çizgiler de buna göre aydınlatıldı, yoksa kontrast düşüp soluk görünüyor. */ :root[data-tema="koyu"]{ color-scheme:dark; --altin-isik:#F6E7B4; --altin:#D9B65C; --altin-orta:#C9A227; --altin-koyu:#A9841C; --altin-uzeri:#2A210A; --altin-sis:rgba(217,182,92,.10); --altin-cizgi:rgba(217,182,92,.30); --altin-cizgi-2:rgba(217,182,92,.45); --yesim:#7FDCC0; --yesim-sis:rgba(127,220,192,.11); --yesim-cizgi:rgba(127,220,192,.30); --yesim-cizgi-2:rgba(127,220,192,.45); --kirmizi:#EE8A8E; --kirmizi-metin:#F5B3B6; --kirmizi-sis:rgba(238,138,142,.11); --kirmizi-cizgi:rgba(238,138,142,.30); --kirmizi-cizgi-2:rgba(238,138,142,.44); --zemin:#1B1710; --zemin-2:#231E16; --zemin-3:#2B2519; --kart:linear-gradient(150deg,var(--yuzey-2),var(--yuzey-1)); --kart-2:linear-gradient(160deg,#2B2519,#1B1710); --kart-cizgi:var(--cizgi-2); --alan-zemin:var(--yuzey-2); --alan-cizgi:var(--cizgi); --yan-zemin:linear-gradient(180deg,var(--zemin-3),var(--zemin)); /* Koyu ucu 4.27'de kalıyordu (müşteri kartındaki 22px'lik rakamlar, kart yüzeyi #2D2A23). Eşik 4.5 — açıldı, en kötü durumda 4.87. */ --metal-yazi:linear-gradient(180deg,#F8EDC4,#B99128); --zemin-perde:rgba(27,23,16,.97); --zemin-2-perde:rgba(35,30,22,.97); --perde:rgba(5,4,2,.66); --yuzey-1:rgba(255,255,255,.028); --yuzey-2:rgba(255,255,255,.055); --ayrac:rgba(255,255,255,.085); --ayrac-2:rgba(255,255,255,.14); --cizgi:rgba(246,231,180,.16); --ink:#F8F3E9; --dim:#B5AB96; /* Kenar çubuğu (#2B2519) üstünde 4.07'de kalıyordu — açıldı. 0.9.7'de bir tık daha: yeşim/kırmızı SİS zemininde (randevu bloğunun saati, müşteri listesindeki "7 seans" ve "bakiye") 3.78'e düşüyordu. Şimdi en kötü durumda 4.74. */ --dim-2:#ACA18C; /* Koyu temada takvim ikonu siyah kalıyor ve görünmüyordu — ters çevir */ --takvim-ikon:invert(1) brightness(1.6); --golge-1:0 1px 2px rgba(0,0,0,.28); --golge-2:0 24px 60px -30px rgba(0,0,0,.72); --golge-3:0 44px 100px -40px rgba(0,0,0,.8); } /* ══════════════════ temadan bağımsız ══════════════════ */ :root{ /* ——— tipografi ——— */ --display:"Fraunces",Georgia,serif; --body:"IBM Plex Sans",system-ui,sans-serif; --mono:"IBM Plex Mono",ui-monospace,monospace; /* ——— ölçü ——— */ --r:20px; --r-orta:16px; --r-kucuk:12px; --gut:clamp(18px,4.4vw,72px); --hiz:.7s cubic-bezier(.22,.8,.26,1); /* ——— panel ——— */ --yan:262px; /* kenar çubuğu genişliği */ /* ——— ferahlık: kutu içi boşluk ve satır aralığı ——— */ --ic-bosluk:clamp(22px,2.8vw,32px); --satir:1.72; } /* Tema değişince renkler yumuşak geçsin; hareket azaltmada anında değişir. */ @media (prefers-reduced-motion:no-preference){ body,.kutu,.yan,.ust{transition:background-color .25s ease,border-color .25s ease,color .25s ease} } /* ══════════════════ tema düğmesi ══════════════════ Hem vitrin başlığında hem panel üst şeridinde aynı düğme kullanılır. */ .tema-dugme{ display:inline-flex;align-items:center;justify-content:center; width:38px;height:38px;flex:0 0 auto;padding:0; border-radius:50%;cursor:pointer; background:var(--yuzey-2);border:1px solid var(--ayrac);color:var(--dim); transition:color .2s,border-color .2s,background .2s; } .tema-dugme:hover{color:var(--altin);border-color:var(--altin-cizgi);background:var(--altin-sis)} .tema-dugme svg{width:17px;height:17px;stroke:currentColor;fill:none; stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} /* Açık temada ay, koyu temada güneş görünür — düğme "neye geçeceğini" gösterir */ .tema-dugme .ay{display:block} .tema-dugme .gunes{display:none} :root[data-tema="koyu"] .tema-dugme .ay{display:none} :root[data-tema="koyu"] .tema-dugme .gunes{display:block}