olmali (html.Span DEGIL) - satir-ici (inline)
elemanlarda width/wrap kontrolu hic calismiyor, "Gluten" gibi
kelimeler yatayda kirpilip "Glute" olarak kaliyordu (2026-09-16'da
bulundu). display:block + width:100% + min-width:0, bu
'in
flex satirinda kendi sutununa sigacak kadar kucalip metni normal
sekilde 2. satira sarmasini garanti eder - -webkit-line-clamp gibi
WebKit'e ozgu, guvenilirligi supheli bir hileye ihtiyac kalmadan. */
display: block;
width: 100%;
min-width: 0;
font-size: 13px;
font-weight: 600;
line-height: 1.25;
overflow: hidden;
/* "Dayaniklilik" gibi arada bosluk olmayan tek bir uzun kelime,
overflow-wrap olmadan normal kelime-sinirinda sarma kurallariyla HIC
sarmiyor, oldugu gibi tasip yatayda kesiliyordu ("Dayanikl" gibi).
break-word, kelimenin kendi icinden kirilarak 2. satira gecmesine
izin verir - "Kabuklu Yemis" gibi bosluklu etiketleri etkilemez,
onlar zaten normal kelime sinirindan sarar. */
overflow-wrap: break-word;
word-break: break-word;
/* Sabit yukseklik burada degil, kartin kendisinde (.onb-pill-label
height:64px) - 2 satiri asan nadir/cok uzun etiketler bu ust
kapsayicinin overflow:hidden'i ile sessizce kirpilir. Dikey
ortalamayi disaridaki flexbox (align-items:center) hallediyor,
boylece "Kas Yap" gibi tek satirlik etiketler de ikonla tam
hizada, kutunun tepesine yapismadan durur. */
}
.onb-pill-label-content {
display: flex;
flex-direction: row;
align-items: center;
gap: 12px;
flex: 1;
min-width: 0;
}
.onb-number-compact {
width: 100%;
max-width: 260px;
margin: 0 auto;
}
.onb-number-compact input {
width: 100%;
outline: none;
font-family: inherit;
font-size: 18px;
font-weight: 700;
background: rgba(0, 0, 0, 0.025);
border: 1px solid rgba(0, 0, 0, 0.08);
padding: 18px 24px;
border-radius: 20px;
color: var(--color-secondary);
text-align: center;
box-sizing: border-box;
}
.onb-number-compact input:focus {
background: #ffffff;
border-color: var(--color-primary);
box-shadow: 0 0 0 4px rgba(0, 191, 143, 0.12);
}
.onb-subfield-row {
display: flex;
justify-content: center;
gap: 20px;
margin-top: 24px;
flex-wrap: wrap;
border-top: 1px solid rgba(0, 0, 0, 0.05);
padding-top: 20px;
}
.onb-subfield-row > div {
flex: 1;
min-width: 160px;
}
.onb-subfield-row label {
display: block;
text-align: center;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.8px;
text-transform: uppercase;
color: rgba(12, 24, 18, 0.5);
margin-bottom: 12px;
}
.onb-subfield-row .onb-pill-group {
display: flex;
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
}
.onb-subfield-row .onb-pill-label {
/* Bu varyantin ikonu yok (duz "2"/"3" gibi tek karakter), ana kart
desenindeki sabit 64px yukseklik/32px sag bosluk burada anlamsiz -
kucuk, ortali bir chip'e geri donduruluyor. */
height: auto;
padding: 8px 16px;
border-radius: 12px;
justify-content: center;
text-align: center;
}
.onb-tempo-widget {
max-width: 420px;
margin: 0 auto;
}
.onb-tempo-track-labels {
display: flex;
justify-content: space-between;
margin-bottom: 24px;
background: rgba(0, 0, 0, 0.02);
padding: 12px;
border-radius: 20px;
border: 1px solid rgba(0, 0, 0, 0.04);
}
.onb-tempo-track-label {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
flex: 1;
}
.onb-tempo-glass-icon {
width: 52px;
height: 52px;
border-radius: 16px;
background: rgba(255, 255, 255, 0.45);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.7);
display: flex;
align-items: center;
justify-content: center;
}
.onb-tempo-track-icon-svg {
fill: none;
stroke: url(#icon-grad);
stroke-width: 2.2;
stroke-linecap: round;
stroke-linejoin: round;
}
.onb-tempo-track-text {
font-size: 12px;
font-weight: 800;
color: var(--color-secondary);
margin-top: 4px;
}
.onb-contact-heading {
margin: 24px 0 14px;
font-size: 14px;
font-weight: 800;
letter-spacing: 1.2px;
text-transform: uppercase;
text-align: center;
color: var(--color-primary-dark);
border-top: 1px solid rgba(0, 0, 0, 0.05);
padding-top: 16px;
}
.onb-contact-fields {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.onb-contact-fields input {
grid-column: span 2;
width: 100%;
outline: none;
font-family: inherit;
font-size: 13.5px;
font-weight: 600;
padding: 14px 18px;
border-radius: 16px;
border: 1px solid rgba(0, 0, 0, 0.08);
background: rgba(0, 0, 0, 0.025);
text-align: left;
box-sizing: border-box;
}
.onb-contact-fields textarea {
grid-column: span 2;
min-height: 80px;
width: 100%;
padding: 14px 18px;
border-radius: 16px;
border: 1px solid rgba(0, 0, 0, 0.08);
background: rgba(0, 0, 0, 0.025);
font-family: inherit;
font-size: 13px;
outline: none;
resize: none;
box-sizing: border-box;
}
.onb-contact-fields input:focus, .onb-contact-fields textarea:focus {
background: #ffffff;
border-color: var(--color-primary);
}
.onb-phone-field {
grid-column: span 2;
display: flex;
align-items: center;
gap: 8px;
border-radius: 16px;
border: 1px solid rgba(0, 0, 0, 0.08);
background: rgba(0, 0, 0, 0.025);
padding: 0 18px;
box-sizing: border-box;
}
.onb-phone-field:focus-within {
background: #ffffff;
border-color: var(--color-primary);
}
.onb-phone-prefix {
font-family: inherit;
font-size: 13.5px;
font-weight: 700;
color: rgba(0, 0, 0, 0.5);
flex-shrink: 0;
}
.onb-contact-fields .onb-phone-field input {
grid-column: unset;
border: none;
background: transparent;
padding: 14px 0;
flex: 1;
min-width: 0;
}
.onb-contact-fields .onb-phone-field input:focus {
background: transparent;
border: none;
}
.onb-step .dash-range-slider-input {
display: none;
}
.onb-thankyou {
text-align: center;
align-items: center;
}
.onb-thankyou-icon {
width: 72px;
height: 72px;
margin: 10px auto 24px;
border-radius: 50%;
background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
box-shadow: 0 10px 24px rgba(0, 191, 143, 0.35);
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
font-size: 32px;
}
.onb-thankyou h2 {
font-size: 22px;
font-weight: 800;
margin-bottom: 12px;
color: var(--color-secondary);
}
.onb-thankyou-subtitle {
font-size: 14.5px;
line-height: 1.6;
color: rgba(12, 24, 18, 0.6);
margin-bottom: 28px;
font-weight: 400;
}
.onb-thankyou-payment-warning:not(:empty) {
color: #c93b3b;
font-size: 13px;
background-color: rgba(225, 29, 72, 0.08);
border-radius: 16px;
padding: 10px 14px;
margin: -12px 0 20px;
}
.onb-thankyou-privacy {
display: flex;
align-items: flex-start;
gap: 14px;
text-align: left;
background-color: rgba(0, 191, 143, 0.08);
border: 1px solid rgba(0, 191, 143, 0.12);
border-radius: 20px;
padding: 18px 20px;
margin-bottom: 32px;
}
.onb-thankyou-lock {
font-size: 22px;
line-height: 1;
}
.onb-thankyou-privacy-title {
font-weight: 700;
font-size: 13.5px;
color: var(--color-primary-dark);
margin-bottom: 4px;
}
.onb-thankyou-privacy-text {
font-size: 12.5px;
color: rgba(12, 24, 18, 0.6);
line-height: 1.5;
}
.onb-thankyou-cta {
display: inline-flex;
text-decoration: none;
}
.onb-error-message {
text-align: center;
color: #c93b3b;
font-size: 13px;
font-weight: 600;
min-height: 20px;
margin-top: 16px;
}
.onb-nav-row {
display: flex;
justify-content: center;
gap: 16px;
margin-top: 32px;
}
.wizard-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 28px;
border-radius: 999px;
font-size: 0.9rem;
font-weight: 700;
cursor: pointer;
box-shadow: none;
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.wizard-btn-primary {
background: var(--color-primary);
color: var(--color-primary-dark);
border: none;
}
.wizard-btn-primary:hover {
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(0, 191, 143, 0.3);
}
.wizard-btn-secondary {
background: none;
color: var(--color-charcoal);
border: 1px solid var(--color-border);
}
.wizard-btn-secondary:hover {
background: var(--color-sage-tint);
}
.onb-step .dash-slider-wrapper {
max-width: 440px;
margin: 20px auto 10px;
}
.onb-step .dash-slider-range {
background-color: var(--color-primary);
}
.onb-step .dash-slider-thumb {
border-color: var(--color-primary);
background-color: var(--color-primary);
}
.onb-step .dash-slider-thumb:hover,
.onb-step .dash-slider-thumb:focus {
box-shadow: 0 0 0 4px rgba(0, 191, 143, 0.2);
}
.lp-footer {
background-color: var(--lp-off-black);
color: var(--lp-pure-white);
text-align: center;
padding: 50px 69px;
font-size: 0.85rem;
font-weight: 400;
}
@media (max-width: 860px) {
.lp-float-nav {
left: 16px;
right: 16px;
}
.lp-nav-link {
padding: 8px 10px;
font-size: 0.8rem;
}
.lp-nav-cta {
padding: 8px 12px;
font-size: 0.75rem;
}
.hero-section {
min-height: auto;
padding: 120px 24px 64px;
}
.hero-grid {
display: flex;
flex-direction: column-reverse;
align-items: center;
text-align: center;
height: auto;
}
.hero-content {
position: static;
text-align: center;
max-width: 100%;
}
.hero-content p {
text-align: center;
margin-left: auto;
margin-right: auto;
}
.lp-chip-row {
justify-content: center;
}
.lp-scroll-cue {
position: static;
margin-top: 32px;
display: inline-block;
}
.lp-statement-section {
flex-direction: column;
text-align: center;
padding: 64px 24px;
gap: 16px;
}
.lp-statement-label-col {
flex: none;
}
.lp-statement-text {
flex: none;
text-align: center;
margin: 0 auto;
}
.lp-dark-section, .lp-glossary-section, .features-section, .coaches-section, .testimonials-section, .pricing-section {
padding-left: 24px;
padding-right: 24px;
}
.lp-dark-section {
padding-top: 48px;
padding-bottom: 48px;
}
.lp-glossary-section {
padding-bottom: 48px;
}
.features-section, .coaches-section, .testimonials-section, .pricing-section {
padding-top: 40px;
padding-bottom: 40px;
}
.lp-approach-heading {
padding-top: 0;
}
.lp-numbered-row {
flex-direction: column;
gap: 8px;
padding: 20px 0;
}
.feature-card {
padding: 32px 28px;
}
}
/* ---- Haftalik odak karti (Nixtio "Onboarding Task" referansi - koyu, aksiyon gerektiren kalemler) ---- */
.weekly-focus-card {
position: relative;
background: linear-gradient(135deg, #17E6AC 0%, var(--color-primary) 38%, #0A5346 78%, var(--color-primary-dark) 130%);
color: #FFFFFF;
border-radius: var(--radius-xl);
padding: var(--spacing-lg);
margin-bottom: var(--spacing-lg);
box-shadow: 0 20px 32px 0 rgba(0, 61, 51, 0.18);
overflow: hidden;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.weekly-focus-card::after {
content: "";
position: absolute;
right: -60px;
top: -60px;
width: 220px;
height: 220px;
border-radius: 50%;
background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0) 70%);
pointer-events: none;
}
.weekly-focus-card:hover {
transform: translateY(-3px);
box-shadow: 0 20px 32px 0 rgba(0, 61, 51, 0.24);
}
.weekly-focus-header {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--spacing-md);
}
.weekly-focus-title {
font-weight: 700;
font-size: 0.95rem;
letter-spacing: 0.01em;
color: var(--color-primary-dark);
}
.weekly-focus-title-row {
display: flex;
align-items: center;
gap: 10px;
}
.weekly-focus-header-icon {
flex-shrink: 0;
width: 30px;
height: 30px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.92);
display: flex;
align-items: center;
justify-content: center;
}
.weekly-focus-header-icon-mask {
width: 15px;
height: 15px;
background-color: var(--color-primary-dark);
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
}
.weekly-focus-count {
background: rgba(0, 0, 0, 0.28);
color: #FFFFFF;
font-weight: 700;
font-size: 0.75rem;
padding: 2px 10px;
border-radius: 999px;
backdrop-filter: blur(2px);
}
.weekly-focus-list {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: 8px;
}
.weekly-focus-item {
display: flex;
align-items: center;
gap: 14px;
padding: 12px 10px;
border-radius: 16px;
background: rgba(255, 255, 255, 0.10);
text-decoration: none;
color: inherit;
transition: background 0.15s ease, transform 0.15s ease;
}
.weekly-focus-item:hover {
background: rgba(255, 255, 255, 0.18);
transform: translateY(-2px);
}
/* Bento karolarindaki gradient+gloss squircle ikon rozetiyle ayni tarif
(bkz. .member-bento-icon-small) - eskiden duz beyaz kare/koyu ikondu,
bento diliyle tutarli olsun diye ayni gradient+gloss+hover-rotate
uygulandi. Bu component paylasilan (uye/coach/admin ucunde de kullaniliyor,
bkz. render_member_focus/render_admin_focus) - degisiklik site-genelinde
bilerek uygulaniyor, sadece coach/admin'e ozel scope edilmedi. */
.weekly-focus-item-icon {
position: relative;
flex-shrink: 0;
width: 38px;
height: 38px;
border-radius: 30%;
overflow: hidden;
background: linear-gradient(160deg, #17E6AC, var(--color-primary-dark));
box-shadow:
inset 0 1.5px 1.5px rgba(255, 255, 255, 0.55),
inset 0 -6px 9px rgba(0, 0, 0, 0.14),
0 4px 10px -6px rgba(20, 32, 26, 0.35);
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.2s ease;
}
.weekly-focus-item-icon::before {
content: "";
position: absolute;
top: -30%;
left: -10%;
width: 120%;
height: 65%;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0));
border-radius: 50%;
pointer-events: none;
}
.weekly-focus-item:hover .weekly-focus-item-icon {
transform: scale(1.1) rotate(-6deg);
}
.weekly-focus-item-icon-mask {
position: relative;
z-index: 1;
width: 17px;
height: 17px;
background-color: #FFFFFF;
filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.18));
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
}
.weekly-focus-item-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.weekly-focus-item-label {
font-size: 0.85rem;
font-weight: 700;
}
.weekly-focus-item-meta {
font-size: 0.72rem;
color: rgba(255, 255, 255, 0.78);
}
.weekly-focus-item-arrow {
flex-shrink: 0;
width: 32px;
height: 32px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.95);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-primary-dark);
font-size: 0.9rem;
transition: transform 0.15s ease;
}
.weekly-focus-item:hover .weekly-focus-item-arrow {
transform: translateX(2px);
}
.weekly-focus-empty {
position: relative;
z-index: 1;
color: rgba(255, 255, 255, 0.85);
font-size: 0.85rem;
margin: 0;
}
/* ---- Toast bildirimi (form kaydetme mesajlari icin, kalici metin yerine) ---- */
.toast {
position: fixed;
top: 20px;
right: 20px;
z-index: 200;
max-width: 320px;
padding: 12px 20px;
border-radius: var(--radius-md);
font-weight: 600;
font-size: 0.85rem;
box-shadow: var(--glass-shadow-hover);
animation: toast-lifecycle 3.5s ease forwards;
pointer-events: none;
}
.toast-success {
background: var(--color-primary);
color: var(--color-primary-dark);
}
.toast-error {
background: var(--color-accent-wine);
color: #FFFFFF;
}
@keyframes toast-lifecycle {
0% { opacity: 0; transform: translateY(-8px); }
8% { opacity: 1; transform: translateY(0); }
88% { opacity: 1; transform: translateY(0); }
100% { opacity: 0; transform: translateY(-8px); }
}
@media (prefers-reduced-motion: reduce) {
.toast {
animation: none;
opacity: 1;
}
}
/* ---- Sayfa basligi bandi + sekme filtre + 2 sutunlu duzen
(pilot: admin/users.py, mevcut mint paleti sadelestirilerek) ---- */
.admin-users-page,
.admin-users-page button,
.admin-users-page input,
.admin-users-page select,
.admin-users-page textarea,
.admin-users-page .dash-dropdown,
.profile-page,
.profile-page button,
.profile-page input,
.profile-page select,
.profile-page textarea,
.profile-page .dash-dropdown,
.dashboard-page,
.dashboard-page button,
.dashboard-page input,
.dashboard-page select,
.dashboard-page textarea,
.dashboard-page .dash-dropdown,
.admin-measurements-page,
.admin-measurements-page button,
.admin-measurements-page input,
.admin-measurements-page select,
.admin-measurements-page textarea,
.admin-measurements-page .dash-dropdown,
.admin-appointments-page,
.admin-appointments-page button,
.admin-appointments-page input,
.admin-appointments-page select,
.admin-appointments-page textarea,
.admin-appointments-page .dash-dropdown,
.ai-coach-page,
.ai-coach-page button,
.ai-coach-page input,
.ai-coach-page select,
.ai-coach-page textarea,
.ai-coach-page .dash-dropdown,
.admin-coaches-page,
.admin-coaches-page button,
.admin-coaches-page input,
.admin-coaches-page select,
.admin-coaches-page textarea,
.admin-coaches-page .dash-dropdown,
.admin-membership-requests-page,
.admin-membership-requests-page button,
.admin-membership-requests-page input,
.admin-membership-requests-page select,
.admin-membership-requests-page textarea,
.admin-membership-requests-page .dash-dropdown,
.admin-membership-packages-page,
.admin-membership-packages-page button,
.admin-membership-packages-page input,
.admin-membership-packages-page select,
.admin-membership-packages-page textarea,
.admin-membership-packages-page .dash-dropdown,
.admin-service-packages-page,
.admin-service-packages-page button,
.admin-service-packages-page input,
.admin-service-packages-page select,
.admin-service-packages-page textarea,
.admin-service-packages-page .dash-dropdown,
.meal-plans-page,
.meal-plans-page button,
.meal-plans-page input,
.meal-plans-page select,
.meal-plans-page textarea,
.meal-plans-page .dash-dropdown,
.member-detail-page,
.member-detail-page button,
.member-detail-page input,
.member-detail-page select,
.member-detail-page textarea,
.member-detail-page .dash-dropdown,
.appointments-page,
.appointments-page button,
.appointments-page input,
.appointments-page select,
.appointments-page textarea,
.appointments-page .dash-dropdown,
.checkin-page,
.checkin-page button,
.checkin-page input,
.checkin-page select,
.checkin-page textarea,
.meal-plan-page,
.meal-plan-page button,
.meal-plan-page input,
.meal-plan-page select,
.meal-plan-page textarea,
.measurements-page,
.measurements-page button,
.measurements-page input,
.measurements-page select,
.measurements-page textarea,
.membership-page,
.membership-page button,
.membership-page input,
.membership-page select,
.membership-page textarea,
.notifications-page,
.notifications-page button,
.notifications-page input,
.notifications-page select,
.notifications-page textarea,
.testimonials-coach-page,
.testimonials-coach-page button,
.testimonials-coach-page input,
.testimonials-coach-page select,
.testimonials-coach-page textarea,
.weekly-summary-page,
.weekly-summary-page button,
.weekly-summary-page input,
.weekly-summary-page select,
.weekly-summary-page textarea,
.sidenav,
.topbar {
font-family: var(--font-family-admin);
}
.dashboard-kpi-tables {
display: flex;
flex-direction: column;
gap: var(--spacing-lg);
margin-top: var(--spacing-lg);
}
.dashboard-kpi-table-block h3 {
margin-top: 0;
margin-bottom: var(--spacing-sm);
}
.page-header-band {
margin-bottom: var(--spacing-md);
}
/* KURAL (2026-08-10): breadcrumb ("Yonetim / X") her sayfada ayni gri serit
icinde - once sadece Urun/Hizmet Paketleri'nde vardi, artik page-header-band
kullanan HER sayfada standart (referans mockup, onemlitasarim.png). */
.page-header-eyebrow {
display: block;
font-size: 0.72rem;
font-weight: 600;
background: #E5E5E7;
color: var(--color-mist);
letter-spacing: 0.02em;
padding: 10px 16px;
border-radius: 10px;
margin-bottom: 12px;
}
.dashboard-greeting-row {
display: flex;
align-items: center;
gap: 10px;
}
.dashboard-greeting-title {
margin: 0;
}
.dashboard-greeting-icon {
font-size: 1.6rem;
line-height: 1;
flex-shrink: 0;
}
.page-header-row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--spacing-md);
flex-wrap: wrap;
}
.page-header-title {
margin: 0;
}
.page-header-meta {
font-size: 0.82rem;
color: var(--color-mist);
font-variant-numeric: tabular-nums;
}
.page-tabs {
display: flex;
gap: var(--spacing-md);
border-bottom: 1px solid var(--color-border);
margin-bottom: var(--spacing-md);
/* Bu class paylasilan (coaches.py/users.py'de 2-3 filtre sekmesi, ama
meal_plans.py'de 7 gun sekmesi) - kisa listelerde etkisiz, 7 sekmede
mobilde TUM SAYFAYI yatay tasiyordu (arastirma.md 2. denetiminde
admin/meal-plans'ta bulunan asil 142px kaynagi - .emt-wrap fix'i
yeterli degildi, kok neden buradaymis). Wrap yerine kendi icinde
kaydirilabilir yapiliyor - sekme bari boyle bir UI'da beklenen davranis. */
overflow-x: auto;
white-space: nowrap;
}
.page-tabs button {
flex-shrink: 0;
}
.page-tabs button {
background: transparent;
color: var(--color-mist);
box-shadow: none;
border: none;
border-radius: 0;
padding: 8px 2px 10px;
margin-bottom: -1px;
font-size: 0.85rem;
font-weight: 600;
border-bottom: 2px solid transparent;
}
.page-tabs button:hover {
transform: none;
box-shadow: none;
color: var(--color-secondary);
}
.page-tabs button.active {
color: var(--color-primary-dark);
border-bottom-color: var(--color-primary);
}
.admin-split-layout {
display: grid;
grid-template-columns: 1fr 280px;
gap: var(--spacing-lg);
align-items: start;
}
.admin-split-main {
min-width: 0;
}
.admin-split-side {
position: sticky;
top: 88px;
min-width: 0;
}
.admin-side-panel {
background: #FFFFFF;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: var(--spacing-md);
}
.admin-side-panel-title {
font-size: 0.78rem;
font-weight: 700;
color: var(--color-secondary);
margin-bottom: var(--spacing-sm);
}
.admin-donut-legend {
display: flex;
flex-direction: column;
gap: 6px;
margin-top: var(--spacing-sm);
font-size: 0.8rem;
color: var(--color-charcoal);
}
/* Durum Dagilimi karti - diger stat-card-soft kartlarla ayni satirda, ayni
yukseklikte gorunsun diye legend'in ust bosluk/yazi boyutu kucultuldu */
.stat-card-distribution {
min-width: 220px;
}
.stat-card-distribution-body {
display: flex;
align-items: center;
gap: var(--spacing-sm);
}
.stat-card-distribution .admin-donut-legend {
flex: 1;
margin-top: 0;
font-size: 0.75rem;
min-width: 0;
}
.stat-card-distribution .admin-donut-legend-item {
padding: 5px 8px;
}
.admin-donut-legend-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 8px 10px;
border: 1px solid var(--color-border);
border-radius: 8px;
background: #FAFBF9;
}
.admin-donut-legend-label {
display: flex;
align-items: center;
gap: 8px;
}
.admin-donut-legend-value {
font-weight: 700;
font-variant-numeric: tabular-nums;
color: var(--color-secondary);
}
.admin-donut-dot {
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
}
.admin-donut-dot-active { background: var(--color-primary); }
.admin-donut-dot-inactive { background: #D8DED9; }
@media (max-width: 1300px) {
.admin-split-layout {
grid-template-columns: 1fr;
}
.admin-split-side {
position: static;
}
}
/* ---- Panel (dashboard) ---- */
.dashboard-greeting {
color: var(--color-mist);
margin-bottom: var(--spacing-lg);
}
/* ---- Gunluk Ozet karti (dashboard.py) ---- */
/* K/J mockup'undaki gercek yapi: "Bugunku Ozet" tek bir beyaz kart icine
HAPSEDILMIYOR - sade bir bolum basligi (kart degil, sadece metin+rozet),
ardindan .member-bento grid'i sayfa arka planinda dogrudan oturuyor (buyuk
karo kendi golgesiyle, kucuk karolar renkli, kart-icinde-kart sikismasi
olmadan). Once tek bir .daily-summary-card sarmaliyordu - kaldirildi
(2026-08-19, kullanici "sikisikliktan kurtulmak icin ayir" geri bildirimi). */
.daily-summary-section {
margin-bottom: var(--spacing-lg);
}
.daily-summary-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 2px 12px;
gap: var(--spacing-sm);
}
.daily-summary-header-left {
display: flex;
align-items: center;
gap: 10px;
}
.daily-summary-header-title {
font-size: 0.85rem;
font-weight: 700;
color: var(--color-secondary);
}
.daily-summary-header-sub {
font-size: 0.72rem;
color: var(--color-mist);
margin-top: 2px;
}
.daily-summary-header-badge {
font-weight: 700;
font-size: 0.75rem;
padding: 4px 12px;
border-radius: 999px;
flex-shrink: 0;
}
.daily-summary-header-badge-ok {
background: linear-gradient(135deg, #17E6AC, var(--color-primary-dark));
color: #FFFFFF;
}
.daily-summary-header-badge-neutral {
background: linear-gradient(135deg, #CBD5E1, var(--color-module-neutral));
color: #FFFFFF;
}
.daily-summary-header-badge-warn {
background: linear-gradient(135deg, #FDA4AF, var(--color-accent-wine));
color: #FFFFFF;
}
/* Bento kart diline gecis (2026-08-19 kullanici geri bildirimi) - 4 ozellik:
(1) t4 yesil pastel dolgu (.member-bento-tile.t4 ile ayni), (2) avatar artik
duz daire degil gradient+gloss squircle (.member-bento-icon-big ile ayni
tarif), (3) karta hover'da kaldirma+golge (.member-bento-tile:hover ile
ayni), (4) avatara hover'da donme+buyume (.member-bento-icon-mask:hover ile
ayni). */
.daily-summary-note {
display: flex;
gap: var(--spacing-sm);
align-items: flex-start;
padding: 16px 18px;
margin-bottom: var(--spacing-lg);
border-radius: var(--radius-lg);
border: 1px solid var(--color-border);
box-shadow: 0 10px 24px -14px rgba(22, 32, 26, 0.18);
background: #D8F5C8;
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.daily-summary-note:hover {
transform: translateY(-2px);
box-shadow: 0 10px 20px -10px rgba(20, 32, 26, 0.35);
}
.daily-summary-note-avatar {
position: relative;
width: 36px;
height: 36px;
flex-shrink: 0;
border-radius: 30%;
overflow: hidden;
background: linear-gradient(160deg, #17E6AC, var(--color-primary-dark));
color: #FFFFFF;
font-weight: 800;
font-size: 0.85rem;
display: flex;
align-items: center;
justify-content: center;
box-shadow:
inset 0 1.5px 1.5px rgba(255, 255, 255, 0.55),
inset 0 -6px 9px rgba(0, 0, 0, 0.14),
0 4px 10px -6px rgba(20, 32, 26, 0.35);
transition: transform 0.2s ease;
}
.daily-summary-note-avatar::before {
content: "";
position: absolute;
top: -30%;
left: -10%;
width: 120%;
height: 65%;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0));
border-radius: 50%;
pointer-events: none;
}
.daily-summary-note-avatar > * {
position: relative;
z-index: 1;
filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.18));
}
.daily-summary-note:hover .daily-summary-note-avatar {
transform: scale(1.15) rotate(-6deg);
}
.daily-summary-note-text {
font-size: 0.85rem;
font-weight: 700;
color: #16201A;
line-height: 1.5;
margin: 0;
}
.daily-summary-note-sign {
display: block;
font-size: 0.7rem;
color: #384038;
margin-top: 4px;
}
@media (max-width: 640px) {
.daily-summary-header {
flex-wrap: wrap;
}
}
/* ---- Su Takibi karti (checkin.py) ---- */
/* 2 sutunlu grid: su takibi (satir1/kolon1) + kameralı ogun tara (satir1/kolon2,
ikisi align-items:stretch ile ayni yukseklige gelir) + gunun ozeti (satir2/kolon1,
grid'in otomatik yerlesim sirasi - satir1 dolunca sonraki oge satir2/kolon1'e duser -
su takibiyle ayni genislik/hiza icin ekstra sinif gerekmiyor). */
.ci-top-row {
display: grid;
grid-template-columns: repeat(2, minmax(320px, 1fr));
gap: var(--spacing-md);
align-items: stretch;
margin-bottom: var(--spacing-lg);
}
.ci-top-row > * {
margin-bottom: 0;
min-width: 0;
}
@media (max-width: 768px) {
.ci-top-row {
grid-template-columns: 1fr;
}
}
.water-tracker-card {
background: #C3DDF6;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: 0 20px 27px 0 rgba(0, 0, 0, 0.05);
overflow: hidden;
display: flex;
flex-direction: column;
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.water-tracker-card:hover {
transform: translateY(-2px);
box-shadow: 0 10px 20px -10px rgba(20, 32, 26, 0.35);
}
.water-tracker-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px 14px;
border-bottom: 1px solid var(--color-border);
gap: var(--spacing-sm);
}
.water-tracker-header-left {
display: flex;
align-items: center;
gap: 10px;
}
.water-tracker-header-icon {
position: relative;
width: 32px;
height: 32px;
border-radius: 30%;
overflow: hidden;
flex-shrink: 0;
background: linear-gradient(135deg, #7DD3FC, var(--color-module-water));
box-shadow:
inset 0 1.5px 1.5px rgba(255, 255, 255, 0.55),
inset 0 -6px 9px rgba(0, 0, 0, 0.14),
0 4px 10px -6px rgba(20, 32, 26, 0.35);
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.2s ease;
}
.water-tracker-header-icon::before {
content: "";
position: absolute;
top: -30%;
left: -10%;
width: 120%;
height: 65%;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0));
border-radius: 50%;
pointer-events: none;
}
.water-tracker-card:hover .water-tracker-header-icon {
transform: scale(1.15) rotate(-6deg);
}
.water-tracker-header-icon-mask {
position: relative;
z-index: 1;
width: 15px;
height: 15px;
background-color: #FFFFFF;
filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.18));
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
}
.water-tracker-header-title {
font-size: 0.82rem;
font-weight: 700;
color: var(--color-secondary);
}
.water-tracker-header-badge {
background: linear-gradient(135deg, #7DD3FC, var(--color-module-water));
color: #FFFFFF;
font-weight: 700;
font-size: 0.72rem;
padding: 4px 10px;
border-radius: 999px;
flex-shrink: 0;
}
.water-tracker-header-badge-done {
background: linear-gradient(135deg, #17E6AC, var(--color-primary-dark));
color: #FFFFFF;
}
.water-tracker-body {
display: flex;
gap: 18px;
padding: 18px 20px 20px;
align-items: stretch;
flex: 1;
}
.water-tracker-bottle-col {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.water-tracker-bottle-neck {
width: 28px;
height: 11px;
background: rgba(15, 23, 42, 0.03);
border: 2px solid var(--color-border);
border-bottom: none;
border-radius: 6px 6px 0 0;
margin-bottom: -2px;
}
.water-tracker-bottle {
position: relative;
width: 80px;
height: 150px;
border-radius: 26px 26px 12px 12px;
background: rgba(15, 23, 42, 0.03);
border: 2px solid var(--color-border);
overflow: hidden;
}
.water-tracker-bottle-fill {
position: absolute;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(180deg, #38BDF8, var(--color-module-water));
transition: height 0.6s ease;
}
.water-tracker-bottle-wave {
position: absolute;
top: -10px;
left: 0;
width: 200%;
height: 16px;
animation: water-tracker-wave-move 3.2s linear infinite;
}
@keyframes water-tracker-wave-move {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
.water-tracker-bottle-percent {
position: absolute;
top: 10px;
left: 0;
right: 0;
text-align: center;
font-size: 0.85rem;
font-weight: 800;
color: var(--color-secondary);
z-index: 1;
}
.water-tracker-bottle-volume {
font-size: 0.72rem;
color: var(--color-secondary);
font-weight: 700;
text-align: center;
}
.water-tracker-bottle-target {
font-size: 0.64rem;
color: var(--color-mist);
}
.water-tracker-timeline-col {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
}
.water-tracker-timeline {
position: relative;
padding-left: 4px;
}
.water-tracker-timeline::before {
content: "";
position: absolute;
left: 8px;
top: 4px;
bottom: 4px;
width: 2px;
background: var(--color-border);
}
.tl-item {
position: relative;
display: flex;
align-items: center;
gap: 10px;
padding: 6px 0;
}
.tl-dot {
position: relative;
z-index: 1;
width: 18px;
height: 18px;
border-radius: 50%;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
background: #FFFFFF;
border: 2px solid var(--color-border);
}
.tl-item-done .tl-dot {
border: none;
background: linear-gradient(135deg, #38BDF8, var(--color-module-water));
box-shadow: 0 2px 6px rgba(14, 165, 233, 0.35);
}
.tl-check {
width: 9px;
height: 9px;
}
.tl-item-next .tl-dot {
border-color: var(--color-module-water);
box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.16);
animation: tl-pulse 1.6s ease-in-out infinite;
}
@keyframes tl-pulse {
0%, 100% { box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.16); }
50% { box-shadow: 0 0 0 8px rgba(14, 165, 233, 0.05); }
}
.tl-time {
font-size: 0.76rem;
font-weight: 700;
color: var(--color-secondary);
}
.tl-item-future .tl-time {
color: var(--color-mist);
font-weight: 600;
}
.tl-tag {
font-size: 0.62rem;
color: var(--color-module-water);
font-weight: 700;
margin-left: 4px;
}
.water-tracker-footer {
padding: 0 20px 18px;
}
.water-tracker-add-button {
width: 100%;
border: none;
border-radius: 14px;
padding: 12px;
font-weight: 700;
font-size: 0.84rem;
color: #FFFFFF;
cursor: pointer;
background: linear-gradient(135deg, #38BDF8, var(--color-module-water));
box-shadow: 0 6px 16px rgba(14, 165, 233, 0.28);
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.water-tracker-add-button:hover {
transform: translateY(-1px);
box-shadow: 0 8px 18px rgba(14, 165, 233, 0.38);
}
.water-tracker-add-button-locked,
.water-tracker-add-button-locked:hover {
background: rgba(15, 23, 42, 0.08);
color: var(--color-mist);
box-shadow: none;
cursor: not-allowed;
transform: none;
}
/* ---- Haftalik gun seridi ---- */
.day-strip-card {
background: linear-gradient(165deg, rgba(216, 245, 200, 0.55), rgba(255, 227, 176, 0.35));
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: 0 20px 27px 0 rgba(0, 0, 0, 0.05);
margin-bottom: var(--spacing-lg);
overflow: hidden;
}
.day-strip-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 22px 14px;
border-bottom: 1px solid var(--color-border);
}
/* Bento ikonlariyla (.member-bento-icon-big) ayni gradient+gloss+hover dili -
duz tek renkli .chart-header-icon yerine, "ikon sabit/hareketsiz kaliyor"
geri bildirimi uzerine 2026-08-19. Paylasilan .chart-header-icon DEGIL,
sadece bu bilesene ozel - o class'i baska cok sayfada kullaniliyor. */
.day-strip-header-icon {
position: relative;
width: 32px;
height: 32px;
flex-shrink: 0;
border-radius: 30%;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(160deg, #21E0A8, #00885F);
box-shadow:
inset 0 1.5px 1.5px rgba(255, 255, 255, 0.55),
inset 0 -6px 9px rgba(0, 0, 0, 0.14),
0 4px 10px -6px rgba(20, 32, 26, 0.35);
transition: transform 0.2s ease;
}
.day-strip-header-icon::before {
content: "";
position: absolute;
top: -30%;
left: -10%;
width: 120%;
height: 65%;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0));
border-radius: 50%;
pointer-events: none;
}
.day-strip-header-icon-mask {
position: relative;
z-index: 1;
width: 15px;
height: 15px;
background-color: #FFFFFF;
filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.18));
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
}
.day-strip-card:hover .day-strip-header-icon {
transform: scale(1.15) rotate(-6deg);
}
.day-strip-header-left {
display: flex;
align-items: center;
gap: 10px;
}
.day-strip-header-title {
font-size: 0.85rem;
font-weight: 700;
color: var(--color-secondary);
}
.day-strip-header-sub {
font-size: 0.72rem;
color: var(--color-mist);
margin-top: 2px;
}
.day-strip-header-badge {
background: linear-gradient(135deg, #17E6AC, var(--color-primary-dark));
color: #FFFFFF;
font-weight: 700;
font-size: 0.75rem;
padding: 4px 12px;
border-radius: 999px;
flex-shrink: 0;
}
.day-strip {
position: relative;
display: flex;
justify-content: space-between;
gap: 6px;
padding: 20px 20px 16px;
}
.day-strip::before {
content: "";
position: absolute;
left: 56px;
right: 56px;
top: 44px;
height: 2px;
background: repeating-linear-gradient(90deg, var(--color-border) 0 6px, transparent 6px 12px);
z-index: 0;
}
.day-strip-cell {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
flex: 1;
padding: 10px 2px;
border-radius: 18px;
background: rgba(15, 23, 42, 0.02);
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
/* Bento KPI karolarindaki (.member-bento-tile/-big) ayni hover hareketi -
kart yukari kalkiyor + golge, icindeki ikon dairesi dondurup buyuyor -
sadece renk degil, "hareketli ve animasyonlu" davranis da eslesin diye
2026-08-19 kullanici geri bildirimi. */
.day-strip-cell:hover {
transform: translateY(-2px);
box-shadow: 0 10px 20px -10px rgba(20, 32, 26, 0.35);
}
.day-strip-mark {
transition: transform 0.2s ease;
}
.day-strip-cell:hover .day-strip-mark {
transform: scale(1.15) rotate(-6deg);
}
/* Bento KPI karolarindaki (.member-bento-tile) ayni pastel palet - t4 yesil
(tamamlanan gun) / t1 amber (kacirilan gun) - renk dilini uye tarafinda
tutarli tutmak icin, 2026-08-19 kullanici geri bildirimi. */
.day-strip-cell-done {
background: #D8F5C8;
}
.day-strip-cell-missed {
background: #FFE3B0;
}
.day-strip-today {
background: linear-gradient(160deg, rgba(0, 191, 143, 0.22), rgba(0, 191, 143, 0.08));
box-shadow: 0 6px 14px rgba(0, 191, 143, 0.18);
transform: translateY(-2px);
}
.day-strip-label {
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.03em;
text-transform: uppercase;
color: var(--color-mist);
}
.day-strip-today .day-strip-label {
color: var(--color-primary-dark);
}
.day-strip-cell-done .day-strip-label,
.day-strip-cell-missed .day-strip-label {
color: #16201A;
}
.day-strip-mark {
width: 34px;
height: 34px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
background: #FFFFFF;
}
.day-strip-mark-done {
background: linear-gradient(135deg, #17E6AC, var(--color-primary));
box-shadow: 0 4px 10px rgba(0, 191, 143, 0.35);
}
.day-strip-mark-missed {
background: #FFFFFF;
border: 1.5px solid rgba(122, 90, 16, 0.35);
}
.day-strip-mark-future {
border: 1.5px dashed var(--color-border);
background: transparent;
}
.day-strip-today .day-strip-mark-future {
border-color: rgba(0, 191, 143, 0.5);
box-shadow: 0 0 0 4px rgba(0, 191, 143, 0.14);
}
.day-strip-mark-svg {
width: 15px;
height: 15px;
}
.day-strip-mark-missed .day-strip-mark-svg {
width: 9px;
height: 9px;
}
.day-strip-today-tag {
font-size: 0.6rem;
font-weight: 700;
letter-spacing: 0.02em;
color: var(--color-primary-dark);
background: rgba(255, 255, 255, 0.7);
padding: 1px 7px;
border-radius: 999px;
margin-top: -2px;
}
/* ---- Ozet istatistik kartlari (buzlu cam KPI karti) ---- */
.stat-card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: var(--spacing-md);
margin-bottom: var(--spacing-lg);
}
/* Panel sayfasindaki 8 kartlik grid: admin/users sayfasindaki gibi ferah
kartlar icin daha genis bir minimum genislik tabani (bkz. CLAUDE.md #16
dersi - dar bir min-width, uzun etiketlerin ikon rozetiyle cakismasina
yol aciyordu). */
.dashboard-kpi-grid .stat-card-grid {
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
/* ---- Ikon rozeti (sag ust kose, Satinalma Ai kpi-card referansi) + ilerleme cubugu ---- */
.stat-card-icon-badge {
position: absolute;
top: 12px;
right: 12px;
width: 36px;
height: 36px;
border-radius: 8px;
background: linear-gradient(135deg, #17E6AC, var(--color-primary-dark));
box-shadow: 0 4px 10px rgba(0, 191, 143, 0.28);
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.stat-card-icon-badge-mask {
width: 16px;
height: 16px;
display: block;
background-color: #FFFFFF;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
}
.stat-card-soft-open .stat-card-icon-badge {
transform: scale(1.1);
box-shadow: 0 4px 12px rgba(0, 191, 143, 0.25);
}
/* Modul bazli rozet rengi (soft KPI kart) - mevcut --color-module-* setinden turetilmis
acik->koyu gradient dolgular, beyaz ikon. */
.stat-card-soft-measurement .stat-card-icon-badge { background: linear-gradient(135deg, #5EEAD4, var(--color-module-measurement)); }
.stat-card-soft-measurement .stat-card-icon-badge-mask { background-color: #FFFFFF; }
.stat-card-soft-appointment .stat-card-icon-badge { background: linear-gradient(135deg, #93C5FD, var(--color-module-appointment)); }
.stat-card-soft-appointment .stat-card-icon-badge-mask { background-color: #FFFFFF; }
.stat-card-soft-nutrition .stat-card-icon-badge { background: linear-gradient(135deg, #FCD34D, #B45309); }
.stat-card-soft-nutrition .stat-card-icon-badge-mask { background-color: #FFFFFF; }
.stat-card-soft-notification .stat-card-icon-badge { background: linear-gradient(135deg, #FDA4AF, var(--color-module-notification)); }
.stat-card-soft-notification .stat-card-icon-badge-mask { background-color: #FFFFFF; }
.stat-card-soft-ai .stat-card-icon-badge { background: linear-gradient(135deg, #17E6AC, var(--color-module-ai)); }
.stat-card-soft-ai .stat-card-icon-badge-mask { background-color: #FFFFFF; }
.stat-card-soft-sleep .stat-card-icon-badge { background: linear-gradient(135deg, #A5B4FC, var(--color-module-sleep)); }
.stat-card-soft-sleep .stat-card-icon-badge-mask { background-color: #FFFFFF; }
.stat-card-soft-stress .stat-card-icon-badge { background: linear-gradient(135deg, #67E8F9, #0E7490); }
.stat-card-soft-stress .stat-card-icon-badge-mask { background-color: #FFFFFF; }
.stat-card-soft-lifestyle .stat-card-icon-badge { background: linear-gradient(135deg, #FDBA74, var(--color-module-lifestyle)); }
.stat-card-soft-lifestyle .stat-card-icon-badge-mask { background-color: #FFFFFF; }
.stat-card-soft-neutral .stat-card-icon-badge { background: linear-gradient(135deg, #CBD5E1, var(--color-module-neutral)); }
.stat-card-soft-neutral .stat-card-icon-badge-mask { background-color: #FFFFFF; }
.stat-card-progress-bar {
position: absolute;
bottom: 0;
left: 0;
height: 4px;
background: linear-gradient(90deg, #00BF8F, #A42D49);
border-radius: 0 0 var(--radius-lg) 0;
transition: width 0.3s ease;
}
.stat-card-sparkline {
display: flex;
align-items: flex-end;
gap: 3px;
height: 26px;
margin-top: 8px;
}
.stat-card-sparkline-bar {
flex: 1;
min-width: 3px;
background: rgba(0, 191, 143, 0.28);
border-radius: 2px;
}
.stat-card-sparkline-bar:last-child {
background: var(--color-primary);
}
/* ---- Stat kart - "soft" varyant (Soft UI Dashboard referansi, #00BF8F tonu) ---- */
.stat-card-soft {
position: relative;
overflow: hidden;
padding: 18px 20px;
background: #FFFFFF;
border: none;
border-radius: 0.75rem;
box-shadow: 0 20px 27px 0 rgba(0, 0, 0, 0.05);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.stat-card-soft .stat-card-progress-bar {
border-radius: 0 0 0.75rem 0;
}
.stat-card-soft:hover {
transform: translateY(-3px);
box-shadow: 0 20px 27px 0 rgba(0, 0, 0, 0.09);
}
/* Aksiyon gerektiren metrikler icin vurgulu varyant (orn. bekleyen randevu) -
mevcut --color-accent-wine (uyari/hata) tonu, daha buyuk deger yazisi */
.stat-card-soft-urgent {
background: linear-gradient(135deg, var(--color-wine-tint) 0%, #FFFFFF 65%);
border: 1px solid rgba(225, 29, 72, 0.28);
box-shadow: 0 20px 27px 0 rgba(225, 29, 72, 0.12);
}
.stat-card-soft-urgent:hover {
box-shadow: 0 20px 27px 0 rgba(225, 29, 72, 0.2);
}
.stat-card-soft-urgent .stat-card-soft-value {
font-size: 1.85rem;
color: var(--color-accent-wine);
}
.stat-card-soft-urgent .stat-card-soft-label {
color: var(--color-accent-wine);
}
.stat-card-soft-urgent .stat-card-icon-badge {
background: rgba(225, 29, 72, 0.15);
}
.stat-card-soft-urgent .stat-card-icon-badge-mask {
background-color: var(--color-accent-wine);
}
.stat-card-soft-clickable {
cursor: pointer;
text-align: left;
font-family: var(--font-family);
margin-bottom: 0;
}
.stat-card-soft-body {
min-width: 0;
padding-right: 48px;
}
.stat-card-soft-label {
font-size: 0.7rem;
font-weight: 700;
color: var(--color-mist);
letter-spacing: 0.03em;
margin-bottom: 6px;
}
.stat-card-soft-value {
font-size: 1.5rem;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--color-secondary);
font-variant-numeric: tabular-nums;
}
.stat-card-trend {
font-size: 0.72rem;
font-weight: 600;
color: var(--color-mist);
margin-top: 4px;
}
.stat-card-trend-up {
color: var(--color-primary-dark);
}
.stat-card-trend-down {
color: var(--color-mist);
}
/* ====================================================================
K'nin gercek "bento" KPI karti (Panel Vitrini .k-bento/.j-bento'nun
birebir aynisi - .mock-k .k-icon, .h-plan-tile, .j-tile-detail vb.
CSS'inden ayni deger/renklerle tasindi, 2026-08-19). stat_cards.py'nin
paylasilan .stat-card-soft bileseni BILEREK kullanilmiyor - K'nin
duzeni (ikon solda + deger sagda tek satir, kucuk kartlarin KENDISI
renkli) o bilesenin duzeninden (ikon sagda-ustte kose rozeti, beyaz
kart) tamamen farkli, iki ayri "dil". ==================================== */
.member-bento {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin-bottom: var(--spacing-lg);
}
@media (max-width: 640px) {
.member-bento {
grid-template-columns: repeat(2, 1fr);
}
}
.member-bento-big,
.member-bento-tile {
border-radius: 16px;
display: flex;
align-items: center;
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.member-bento-big:hover,
.member-bento-tile:hover {
transform: translateY(-2px);
box-shadow: 0 10px 20px -10px rgba(20, 32, 26, 0.35);
}
.member-bento-big {
grid-column: 1 / -1;
background: #FFFFFF;
box-shadow: 0 10px 24px -14px rgba(22, 32, 26, 0.18);
padding: 16px;
gap: 14px;
}
.member-bento-tile {
padding: 14px;
gap: 10px;
}
.member-bento-tile.t1 { background: #FFE3B0; }
.member-bento-tile.t2 { background: #E9F5A8; }
.member-bento-tile.t3 { background: #C3DDF6; }
.member-bento-tile.t4 { background: #D8F5C8; }
/* Grid'i tam bolmeyen son karo icin (K'nin "Uyelik Suresi" ornegindeki gibi)
tam genislik span - render_member_bento_grid kalan sayisina gore ekliyor.
Masaustu (3 sutun) ve mobil (2 sutun, bkz. .member-bento @media yukarida)
icin AYRI class + AYRI breakpoint - biri digerinin gecerli olmadigi
genislikte hicbir sey yapmiyor (mobile_bento_grid_2026_09_02). */
@media (min-width: 641px) {
.member-bento-tile-full-desktop {
grid-column: 1 / -1;
}
}
@media (max-width: 640px) {
.member-bento-tile-full-mobile {
grid-column: 1 / -1;
}
}
/* Buyuk karttaki ikon - gradient dolgulu squircle, K'nin .k-icon'uyla ayni */
.member-bento-icon-big {
position: relative;
width: 46px;
height: 46px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
border-radius: 30%;
overflow: hidden;
background: linear-gradient(160deg, var(--ic-a), var(--ic-b));
box-shadow:
inset 0 1.5px 1.5px rgba(255, 255, 255, 0.55),
inset 0 -8px 12px rgba(0, 0, 0, 0.14),
0 6px 14px -7px rgba(20, 32, 26, 0.4);
}
.member-bento-icon-big::before {
content: "";
position: absolute;
top: -30%;
left: -10%;
width: 120%;
height: 65%;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0));
border-radius: 50%;
pointer-events: none;
}
.member-bento-icon-big .member-bento-icon-mask {
position: relative;
z-index: 1;
width: 22px;
height: 22px;
background-color: #FFFFFF;
filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.18));
}
/* Kucuk kartlardaki ikon - K'nin gercek markup'inda kucuk karo ikonlari da
".k-icon ic-* .h-plan-ic" birlesimiyle gradient dolgulu (h-plan-ic sadece
boyutu 36px'e kucultuyor, dolgu/gloss yine k-icon'dan geliyor) - duz
beyaz/koyu-ikon degil, buyuk kartla AYNI gradient dili, sadece kucuk olcek. */
.member-bento-icon-small {
position: relative;
width: 36px;
height: 36px;
border-radius: 30%;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
background: linear-gradient(160deg, var(--ic-a), var(--ic-b));
box-shadow:
inset 0 1.5px 1.5px rgba(255, 255, 255, 0.55),
inset 0 -6px 9px rgba(0, 0, 0, 0.14),
0 4px 10px -6px rgba(20, 32, 26, 0.35);
}
.member-bento-icon-small::before {
content: "";
position: absolute;
top: -30%;
left: -10%;
width: 120%;
height: 65%;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0));
border-radius: 50%;
pointer-events: none;
}
.member-bento-icon-small .member-bento-icon-mask {
position: relative;
z-index: 1;
width: 17px;
height: 17px;
background-color: #FFFFFF;
filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.18));
}
.member-bento-icon-mask {
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
}
.member-bento-big:hover .member-bento-icon-mask,
.member-bento-tile:hover .member-bento-icon-mask {
transform: scale(1.15) rotate(-6deg);
}
.member-bento-icon-mask {
transition: transform 0.2s ease;
}
.member-bento-num {
/* px degil rem - erisilebilirlik icin sistem fontu buyutulunce (bkz.
arastirma.md HATA 5) sayfanin geri kalaniyla (hepsi rem) orantili
buyusun, sabit kalip hiyerarsiyi bozmasin. */
font-size: 1rem;
font-weight: 800;
color: #16201A;
line-height: 1.1;
}
.member-bento-big .member-bento-num {
font-size: 1.1875rem;
}
.member-bento-lbl {
font-size: 0.625rem;
color: #384038;
margin-top: 1px;
}
.member-bento-detail {
font-size: 0.5625rem;
font-weight: 700;
margin-top: 3px;
}
.member-bento-detail.good { color: #00744C; }
.member-bento-detail.mid { color: #1D5B96; }
.member-bento-detail.warn { color: #7A5A10; }
/* Hedefe ulasilan karti icin kutlama (K'daki confetti deseni) */
.member-bento-icon-celebrate {
animation: member-bento-celebrate-pulse 1.8s ease-in-out infinite;
}
@keyframes member-bento-celebrate-pulse {
0%, 100% { box-shadow: 0 0 0 4px rgba(0, 191, 143, 0.18); }
50% { box-shadow: 0 0 0 9px rgba(0, 191, 143, 0.05); }
}
.member-bento-confetti-piece {
position: absolute;
top: -4px;
width: 6px;
height: 6px;
border-radius: 2px;
opacity: 0.9;
animation: member-bento-confetti-fall 2.4s ease-in infinite;
}
.member-bento-confetti-1 { left: 4px; background: var(--color-primary); animation-delay: 0s; }
.member-bento-confetti-2 { left: 15px; background: #0EA5E9; animation-delay: 0.5s; }
.member-bento-confetti-3 { left: 26px; background: #F59E0B; animation-delay: 1s; }
@keyframes member-bento-confetti-fall {
0% { transform: translateY(-6px) rotate(0deg); opacity: 1; }
100% { transform: translateY(50px) rotate(260deg); opacity: 0; }
}
.member-bento-tile {
position: relative;
}
@media (prefers-reduced-motion: reduce) {
.member-bento-icon-celebrate,
.member-bento-confetti-piece {
animation: none;
}
}
/* ---- Paket sayfalari KPI kartlari (Toplam/Aktif/Pasif) - halka orani + uye-mavi
"Toplam" kimligi. Onaylanan tasarim, 2026-08-10. Aktif/Pasif kendi anlamsal
renginde kaliyor (yesil=canli, mist=durgun) - "Toplam" bir durum degil notr bir
genel-bakis metrigi oldugu icin projede zaten var olan uye modul mavisini
(--color-module-appointment) odunc aliyor, yeni renk icat edilmedi. */
.pkg-kpi-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
margin-bottom: var(--spacing-lg);
}
.pkg-kpi-card {
background: #FFFFFF;
border: 1px solid var(--color-border);
border-radius: 0.85rem;
box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 0.045);
padding: 16px 18px 15px;
display: flex;
flex-direction: column;
gap: 12px;
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.pkg-kpi-card:hover {
transform: translateY(-2px);
box-shadow: 0 16px 30px 0 rgba(0, 0, 0, 0.08);
}
.pkg-kpi-card-clickable {
cursor: pointer;
}
.pkg-kpi-eyebrow {
display: flex;
align-items: flex-start;
justify-content: space-between;
flex-wrap: wrap;
gap: 6px 8px;
}
.pkg-kpi-eyebrow-left {
display: flex;
align-items: flex-start;
gap: 6px;
min-width: 0;
flex: 1;
}
.pkg-kpi-icon-badge {
width: 22px;
height: 22px;
border-radius: 7px;
background: linear-gradient(135deg, #17E6AC, var(--color-primary-dark));
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.pkg-kpi-icon-badge .stat-card-icon-badge-mask {
width: 12px;
height: 12px;
background-color: #FFFFFF;
}
.pkg-kpi-icon-badge-member {
background: linear-gradient(135deg, #93C5FD, var(--color-module-appointment));
}
.pkg-kpi-icon-badge-member .stat-card-icon-badge-mask {
background-color: #FFFFFF;
}
.pkg-kpi-icon-badge-neutral {
background: linear-gradient(135deg, #CBD5E1, var(--color-module-neutral));
}
.pkg-kpi-icon-badge-neutral .stat-card-icon-badge-mask {
background-color: #FFFFFF;
}
.pkg-kpi-label {
font-size: 0.685rem;
font-weight: 700;
color: var(--color-mist);
letter-spacing: 0.045em;
min-width: 88px;
flex: 1;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
padding-top: 2px;
}
.pkg-kpi-trend-badge {
font-size: 0.66rem;
font-weight: 700;
color: var(--color-primary-dark);
background: var(--color-sage-tint);
padding: 2px 7px;
border-radius: 5px;
white-space: nowrap;
flex-shrink: 0;
}
.pkg-kpi-main {
display: flex;
align-items: center;
gap: 14px;
}
.pkg-kpi-ring {
--thickness: 5px;
width: 46px;
height: 46px;
border-radius: 50%;
flex-shrink: 0;
position: relative;
background: conic-gradient(var(--ring-a, var(--color-primary)) 0 var(--pct-a, 0%), var(--ring-b, var(--color-mist)) var(--pct-a, 0%) var(--pct-b, 0%), var(--color-border) var(--pct-b, 0%) 100%);
-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--thickness) - 2px), #000 calc(100% - var(--thickness)));
mask: radial-gradient(farthest-side, transparent calc(100% - var(--thickness) - 2px), #000 calc(100% - var(--thickness)));
}
.pkg-kpi-ring-pct {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.62rem;
font-weight: 800;
color: var(--color-secondary);
font-variant-numeric: tabular-nums;
}
.pkg-kpi-ring-pulse {
position: absolute;
top: -1px;
left: 50%;
transform: translateX(-50%);
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--color-primary);
box-shadow: 0 0 0 0 rgba(0, 191, 143, 0.45);
}
@media (prefers-reduced-motion: no-preference) {
.pkg-kpi-ring-pulse {
animation: pkg-kpi-pulse 2.4s ease-out infinite;
}
}
@keyframes pkg-kpi-pulse {
0% { box-shadow: 0 0 0 0 rgba(0, 191, 143, 0.45); }
70% { box-shadow: 0 0 0 7px rgba(0, 191, 143, 0); }
100% { box-shadow: 0 0 0 0 rgba(0, 191, 143, 0); }
}
.pkg-kpi-value {
font-size: 1.55rem;
font-weight: 800;
color: var(--color-secondary);
letter-spacing: -0.02em;
line-height: 1;
font-variant-numeric: tabular-nums;
}
.pkg-kpi-divider {
border-top: 1px solid var(--color-border);
}
.pkg-kpi-foot {
display: flex;
align-items: center;
gap: 7px;
font-size: 0.75rem;
color: var(--color-mist);
flex-wrap: wrap;
}
.pkg-kpi-dot {
width: 6px;
height: 6px;
border-radius: 50%;
flex-shrink: 0;
}
.pkg-kpi-dot-primary { background: var(--color-primary); }
.pkg-kpi-dot-neutral { background: var(--color-mist); }
.pkg-kpi-foot-plain {
display: block;
gap: 0;
}
.pkg-kpi-foot-strong {
color: var(--color-secondary);
font-weight: 700;
font-variant-numeric: tabular-nums;
}
@media (max-width: 640px) {
.pkg-kpi-grid {
grid-template-columns: 1fr;
}
}
/* ---- Genel kart + baslik bar (admin bolum kartlari - onaylanmis mockup, 2026-08-09) ---- */
.admin-section-card {
background: #FFFFFF;
border: 1px solid var(--color-border);
border-radius: 0.75rem;
box-shadow: 0 20px 27px 0 rgba(0, 0, 0, 0.05);
overflow: hidden;
margin-bottom: var(--spacing-lg);
}
.admin-section-card-header {
background: #FAFAFA;
padding: 10px 16px;
border-bottom: 1px solid var(--color-border);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--spacing-sm);
}
.admin-section-card-title {
font-size: 0.875rem;
font-weight: 700;
color: var(--color-secondary);
}
.admin-section-card-body {
padding: 16px;
}
.admin-section-card-fields-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px 20px;
}
.admin-section-card-fields-grid .field-group {
max-width: none;
}
.admin-section-card-fields-grid .field-group-full {
grid-column: 1 / -1;
}
@media (max-width: 720px) {
.admin-section-card-fields-grid {
grid-template-columns: 1fr;
}
}
.mpk-group-block {
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
overflow: hidden;
margin-bottom: var(--spacing-md);
}
.mpk-group-block:last-child {
margin-bottom: 0;
}
.mpk-group-header {
background: #FAFAFA;
padding: 10px 16px;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--spacing-sm);
border-bottom: 1px solid var(--color-border);
}
.mpk-group-name-input {
font-weight: 700;
font-size: 0.875rem;
border: none;
background: transparent;
flex: 1;
}
.mpk-group-name-input:focus {
outline: none;
background: #FFFFFF;
border-radius: 4px;
}
.mpk-group-add-variant-button {
font-size: 0.75rem;
padding: 4px 10px;
color: var(--color-primary-dark);
border-color: rgba(0, 191, 143, 0.3);
white-space: nowrap;
}
.mpk-list-chip-row {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
/* .ftag/.ftag-x ile ayni "hero" pill dili (2026-08-25) - eskiden duz
.color-sage-tint dolgulu, cok sade bir rozetti. */
.grp-chip {
display: inline-flex; align-items: center;
background: #E9F5A8;
color: var(--color-primary-dark);
border: 1px solid rgba(0, 61, 51, 0.18);
padding: 5px 12px;
border-radius: 999px;
font-size: 0.75rem;
font-weight: 700;
box-shadow: 0 2px 6px rgba(0, 61, 51, 0.06);
}
/* ---- Soft tablo (Soft UI Dashboard "Authors table" referansi) ---- */
.soft-table-card {
position: relative;
background: #FFFFFF;
border-radius: 0.75rem;
box-shadow: 0 20px 27px 0 rgba(0, 0, 0, 0.05);
padding: 8px 0;
overflow-x: auto;
}
/* Mobilde saga kaydirma ipucu - .apt-history-card::after ile ayni desen
(arastirma.md HATA 6). */
@media (max-width: 900px) {
.soft-table-card::after {
content: "→";
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 40px;
display: flex;
align-items: center;
justify-content: flex-end;
padding-right: 8px;
color: var(--color-mist);
font-size: 1rem;
font-weight: 700;
pointer-events: none;
border-radius: 0 0.75rem 0.75rem 0;
background: linear-gradient(to right, transparent, #FFFFFF 60%);
}
}
.soft-table-header-row,
.soft-table-row {
display: grid;
align-items: center;
gap: 12px;
min-width: 560px;
padding: 14px 24px;
}
.soft-table-header-row {
padding-top: 10px;
padding-bottom: 10px;
background: #FAFAFA;
border-bottom: 1px solid var(--color-border);
}
.soft-table-th {
font-size: 0.66rem;
font-weight: 700;
letter-spacing: 0.05em;
color: var(--color-mist);
}
.soft-table-row {
border-top: 1px solid var(--color-border);
}
/* "Mercan Panel" (CLAUDE.md madde 26) - .soft-table-* icin renkli varyant.
.mb-pkg-bicon (theme.css .mb-pkg-* blogu) burada da ayni sekilde yeniden
kullaniliyor. Kart varsayilan olarak 8px dolgu tasidigi icin (baslik seridi
tam kenara dayanmiyordu) colorful modda dolgu sifirlanip overflow:hidden
ekleniyor - diger Mercan Panel tablolariyla ayni "kenara kadar" gorunum. */
.soft-table-card.mp-colorful {
/* Kartin kendi arkaplani hicbir zaman gorunmuyor - baslik+satirlar padding:0
ile kenara kadar dolduruyor. Bento rengi (kullanicinin istedigi "Profil
Bilgileri" pasteli) bu kart yerine onu SARAN .pf-card'a (bkz.
.admin-users-page/.admin-coaches-page .pf-tile-t1) uygulaniyor. */
padding: 0;
overflow: hidden;
overflow-x: auto;
}
.soft-table-header-row.mp-colorful {
background: linear-gradient(90deg, #5FE0E8, #1EC1CB 55%, #0E8A92 100%);
border-bottom: none;
padding-top: 20px;
padding-bottom: 20px;
}
.soft-table-header-row.mp-colorful .soft-table-th {
font-size: 0.82rem;
color: rgba(0, 0, 0, 0.78);
}
.soft-table-row.mp-tinted {
background: var(--mp-tint) !important;
}
.soft-table-row.mp-tinted:hover .mb-pkg-bicon {
transform: scale(1.12) rotate(-6deg);
}
.soft-table-identity {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
}
.soft-table-identity-text {
min-width: 0;
}
.soft-table-name {
font-weight: 700;
color: var(--color-secondary);
font-size: 0.9rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.soft-table-subtitle {
color: var(--color-mist);
font-size: 0.78rem;
margin-top: 2px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.soft-table-cell-title {
font-weight: 600;
color: var(--color-secondary);
font-size: 0.85rem;
}
.soft-table-cell-subtitle {
color: var(--color-mist);
font-size: 0.78rem;
margin-top: 6px;
}
.soft-table-actions {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 6px;
}
.soft-table-actions button {
margin-bottom: 0;
width: 150px;
text-align: center;
}
/* Ikincil buton: ayni satirdaki durum rozetiyle yarismasin diye
(Pasiflestir/Sifreyi Sifirla gibi ikincil aksiyonlar icin) */
.btn-outline {
background: transparent;
color: var(--color-secondary);
border: 1px solid var(--color-border);
box-shadow: none;
}
.btn-outline:hover {
background: var(--color-sage-tint);
border-color: var(--color-primary);
transform: none;
box-shadow: none;
}
/* Aksiyonun turune gore sabit (deterministik) renk - kisiye gore degil */
.btn-outline-danger {
color: var(--color-accent-wine);
border-color: rgba(225, 29, 72, 0.3);
}
.btn-outline-danger:hover {
background: var(--color-wine-tint);
border-color: var(--color-accent-wine);
}
.btn-outline-success {
color: var(--color-primary-dark);
border-color: rgba(0, 191, 143, 0.3);
}
.btn-outline-success:hover {
background: var(--color-sage-tint);
border-color: var(--color-primary);
}
.btn-outline-info {
color: var(--color-module-appointment);
border-color: rgba(59, 130, 246, 0.3);
}
.btn-outline-info:hover {
background: var(--color-module-appointment-tint);
border-color: var(--color-module-appointment);
}
.soft-table-status-cell {
width: 150px;
display: flex;
align-items: center;
justify-content: center;
}
/* /admin/users tablosu - Rol/Durum/Uyelik Tarihi kolonlari basliklariyla
ayni hizada (ortali) gorunsun diye - .soft-table-status-cell zaten kendi
icinde ortali ama sabit 150px genislikte oldugu icin baslikla hizasi
kaymiyordu, digerleri de merkeze alindi. */
#users-rows-container .soft-table-header-row .soft-table-th:nth-child(2),
#users-rows-container .soft-table-header-row .soft-table-th:nth-child(3),
#users-rows-container .soft-table-header-row .soft-table-th:nth-child(4) {
text-align: center;
}
#users-rows-container .soft-table-row > *:nth-child(2),
#users-rows-container .soft-table-row > *:nth-child(4) {
text-align: center;
}
#users-rows-container .soft-table-status-cell {
width: 100%;
}
/* /admin/coaches tablosu - ayni hizalama duzeltmesi, "Durum" (3. kolon)
basligiyla rozeti ortalansin diye. */
#coach-rows-container .soft-table-header-row .soft-table-th:nth-child(3) {
text-align: center;
}
#coach-rows-container .soft-table-status-cell {
width: 100%;
}
.soft-table-action-link {
background: none;
box-shadow: none;
border: none;
color: var(--color-primary-dark);
font-weight: 700;
font-size: 0.8rem;
padding: 4px 0;
cursor: pointer;
}
.soft-table-action-link:hover {
transform: none;
box-shadow: none;
text-decoration: underline;
}
/* ---- Soft pill (dolu renkli durum rozeti) ---- */
.soft-pill {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.4em 0.9em;
border-radius: 0.45rem;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.03em;
color: #FFFFFF;
white-space: nowrap;
}
.soft-pill-success {
background: linear-gradient(310deg, #00816B 0%, #00BF8F 100%);
}
.soft-pill-neutral {
background: linear-gradient(310deg, #627594 0%, #A8B8D8 100%);
}
.soft-pill-warning {
background: linear-gradient(310deg, #C97F2E 0%, #F0B879 100%);
}
.soft-pill-danger {
background: linear-gradient(310deg, #A8123E 0%, #E11D48 100%);
}
/* ---- Grafik kartlari ---- */
.charts-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: var(--spacing-md);
margin-bottom: var(--spacing-lg);
}
.chart-card {
padding: var(--spacing-md) var(--spacing-lg) var(--spacing-lg);
background: #FFFFFF;
border: 1px solid var(--color-border);
border-radius: 20px;
box-shadow: 0 20px 27px 0 rgba(0, 0, 0, 0.05);
}
.chart-card-title {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.8rem;
font-weight: 700;
color: var(--color-secondary);
margin-bottom: var(--spacing-sm);
}
/* ---- Bos durum (empty state) ---- */
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
padding: 48px 20px;
text-align: center;
}
.empty-state-compact {
padding: 24px 16px;
gap: 8px;
}
.empty-state-icon-wrap {
width: 48px;
height: 48px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #17E6AC, var(--color-primary-dark));
flex-shrink: 0;
}
.empty-state-compact .empty-state-icon-wrap {
width: 36px;
height: 36px;
}
.empty-state-icon {
width: 22px;
height: 22px;
background-color: #FFFFFF;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
}
.empty-state-compact .empty-state-icon {
width: 16px;
height: 16px;
}
.empty-state-icon-ruler { -webkit-mask-image: url(/assets/icons/ruler.svg); mask-image: url(/assets/icons/ruler.svg); }
.empty-state-icon-calendar { -webkit-mask-image: url(/assets/icons/calendar.svg); mask-image: url(/assets/icons/calendar.svg); }
.empty-state-icon-bell { -webkit-mask-image: url(/assets/icons/bell.svg); mask-image: url(/assets/icons/bell.svg); }
.empty-state-icon-inbox { -webkit-mask-image: url(/assets/icons/inbox.svg); mask-image: url(/assets/icons/inbox.svg); }
.empty-state-icon-leaf { -webkit-mask-image: url(/assets/icons/leaf.svg); mask-image: url(/assets/icons/leaf.svg); }
.empty-state-icon-user-search { -webkit-mask-image: url(/assets/icons/user-search.svg); mask-image: url(/assets/icons/user-search.svg); }
.empty-state-icon-users { -webkit-mask-image: url(/assets/icons/users.svg); mask-image: url(/assets/icons/users.svg); }
.empty-state-icon-user-check { -webkit-mask-image: url(/assets/icons/user-check.svg); mask-image: url(/assets/icons/user-check.svg); }
.empty-state-message {
font-size: 0.85rem;
font-weight: 500;
color: var(--color-mist);
max-width: 280px;
}
.empty-state-compact .empty-state-message {
font-size: 0.78rem;
}
/* ---- Yuklenme iskeleti (skeleton) ----
Duz opacity pulse yerine soldan saga kayan "shimmer" isigi - kullanicinin
secimi (2026-08-13, dort canli varyant karsilastirildi: duz pulse/shimmer/
marka renkli spinner/yumusatilmis pulse). */
@keyframes skeleton-shimmer {
0% { background-position: 150% 0; }
100% { background-position: -50% 0; }
}
.skeleton-row, .skeleton-card {
position: relative;
overflow: hidden;
border: 1px solid var(--glass-border);
}
.skeleton-row::after, .skeleton-card::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(100deg, transparent 20%, rgba(15, 23, 42, 0.07) 45%, transparent 70%);
background-size: 200% 100%;
animation: skeleton-shimmer 1.6s ease-in-out infinite;
}
.skeleton-row {
height: 64px;
border-radius: var(--radius-md);
background: var(--glass-bg-flat);
margin-bottom: var(--spacing-sm);
}
.skeleton-card {
height: 96px;
border-radius: var(--radius-lg);
background: var(--glass-bg);
}
.skeleton-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: var(--spacing-md);
margin-bottom: var(--spacing-lg);
}
@media (prefers-reduced-motion: reduce) {
.skeleton-row::after, .skeleton-card::after {
animation: none;
display: none;
}
.skeleton-row, .skeleton-card {
opacity: 0.7;
}
}
/* ---- Dashboard icerik yumusak gecisi (skeleton -> gercek icerik) ---- */
@keyframes dashboard-content-fade-in {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
.dashboard-content-fade-in {
animation: dashboard-content-fade-in 0.35s ease-out;
}
@media (prefers-reduced-motion: reduce) {
.dashboard-content-fade-in {
animation: none;
}
}
/* ---- Kameray la Ogun Tara + Bugunku Ogunlerim (checkin.py) ---- */
.ci-meal-scan-card {
background: #E9F5A8;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: 0 20px 27px 0 rgba(0, 0, 0, 0.05);
overflow: hidden;
display: flex;
flex-direction: column;
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.ci-meal-scan-card:hover {
transform: translateY(-2px);
box-shadow: 0 10px 20px -10px rgba(20, 32, 26, 0.35);
}
.ci-meal-scan-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px 14px;
border-bottom: 1px solid var(--color-border);
gap: var(--spacing-sm);
}
.ci-meal-scan-header-left {
display: flex;
align-items: center;
gap: 10px;
}
.ci-meal-scan-header-icon {
position: relative;
width: 32px;
height: 32px;
border-radius: 30%;
overflow: hidden;
flex-shrink: 0;
background: linear-gradient(135deg, #17E6AC, var(--color-primary-dark));
box-shadow:
inset 0 1.5px 1.5px rgba(255, 255, 255, 0.55),
inset 0 -6px 9px rgba(0, 0, 0, 0.14),
0 4px 10px -6px rgba(20, 32, 26, 0.35);
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.2s ease;
}
.ci-meal-scan-header-icon::before {
content: "";
position: absolute;
top: -30%;
left: -10%;
width: 120%;
height: 65%;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0));
border-radius: 50%;
pointer-events: none;
}
.ci-meal-scan-card:hover .ci-meal-scan-header-icon {
transform: scale(1.15) rotate(-6deg);
}
.ci-meal-scan-header-icon-mask {
position: relative;
z-index: 1;
width: 15px;
height: 15px;
background-color: #FFFFFF;
filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.18));
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
}
.ci-meal-scan-header-title {
font-size: 0.82rem;
font-weight: 700;
color: var(--color-secondary);
}
.ci-meal-scan-header-badge {
background: linear-gradient(135deg, #17E6AC, var(--color-primary-dark));
color: #FFFFFF;
font-weight: 700;
font-size: 0.72rem;
padding: 4px 10px;
border-radius: 999px;
flex-shrink: 0;
}
.ci-meal-scan-body {
flex: 1;
padding: 18px 20px 20px;
display: flex;
}
/* dcc.Upload, verdigimiz id'yi kendi disina sardigi bir wrapper div'e koyuyor
(asil dashed kutuyu ciziyor olan .ci-meal-scan-frame ise o wrapper'in ICINDE
ayri bir div) - id'siz/stilsiz wrapper flex baglaminda icerigine gore
kuculuyordu, bu yuzden kutu kartin tamamini doldurmuyordu. Wrapper'i da
burada acikca genisletiyoruz. */
#meal-photo-upload {
flex: 1;
width: 100%;
display: flex;
}
.ci-meal-scan-frame {
flex: 1;
width: 100%;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
border: 2px dashed rgba(0, 191, 143, 0.35);
border-radius: var(--radius-md);
background: linear-gradient(160deg, rgba(0, 191, 143, 0.08), rgba(0, 191, 143, 0.02));
cursor: pointer;
padding: 20px;
min-height: 180px;
transition: border-color 0.15s ease, background 0.15s ease;
}
.ci-meal-scan-frame:hover {
border-color: rgba(0, 191, 143, 0.6);
background: linear-gradient(160deg, rgba(0, 191, 143, 0.12), rgba(0, 191, 143, 0.03));
}
.ci-meal-scan-button {
width: 60px;
height: 60px;
border-radius: 50%;
background: linear-gradient(135deg, #17E6AC, var(--color-primary-dark));
color: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 8px 18px rgba(0, 191, 143, 0.30);
}
.ci-meal-scan-button-mask {
width: 24px;
height: 24px;
background-color: #FFFFFF;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
}
.ci-meal-scan-hint {
font-size: 0.8rem;
font-weight: 700;
color: var(--color-secondary);
}
.ci-meal-scan-subhint {
font-size: 0.72rem;
color: var(--color-mist);
}
.ci-meal-log-header {
display: flex;
flex-direction: column;
gap: 4px;
margin-bottom: var(--spacing-md);
}
.ci-meal-log-header .section-header-row {
margin-bottom: 0;
}
.ci-meal-log-totals-row {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--spacing-sm);
}
.ci-meal-log-total-badge {
display: flex;
align-items: center;
gap: 6px;
padding: 4px 12px;
border-radius: 999px;
background: var(--color-module-nutrition-tint);
}
.ci-meal-log-total-badge-mask {
width: 14px;
height: 14px;
background-color: #B45309;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
}
.ci-meal-log-total-badge-value {
font-weight: 800;
font-size: 0.85rem;
color: #B45309;
}
.ci-meal-log-totals-detail {
font-size: 0.85rem;
font-weight: 600;
color: var(--color-secondary);
}
.ci-meal-log-empty {
color: var(--color-mist);
font-size: 0.85rem;
}
.ci-meal-log-delete-btn {
width: 34px;
height: 34px;
padding: 0;
background: transparent;
border: none;
box-shadow: none;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.ci-meal-log-delete-btn-mask {
width: 16px;
height: 16px;
background-color: var(--color-mist);
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
}
.ci-meal-log-delete-btn:hover {
background: transparent;
transform: none;
box-shadow: none;
}
.ci-meal-log-delete-btn:hover .ci-meal-log-delete-btn-mask {
background-color: var(--color-accent-wine);
}
/* ---- Gunluk Check-in ---- */
.checkin-form {
display: flex;
flex-direction: column;
gap: var(--spacing-md);
}
.checkin-form-submit {
align-self: flex-start;
}
.checkin-form-locked-note {
color: var(--color-mist);
font-size: 0.85rem;
margin: 0;
}
.ci-summary-body-locked .dash-input-container:has(input:disabled) {
background-color: rgba(15, 23, 42, 0.04);
cursor: not-allowed;
}
.ci-summary-body-locked .dash-input-element:disabled {
color: var(--color-mist);
-webkit-text-fill-color: var(--color-mist);
opacity: 1;
}
.checkin-rating .dash-options-list-option:has(input:disabled) {
cursor: not-allowed;
opacity: 0.5;
}
.checkin-rating .dash-options-list-option.selected:has(input:disabled) {
opacity: 1;
}
.checkin-rating {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin-bottom: 0;
max-width: 100%;
}
/* .checkin-field-control genislik tanimlamiyor (flex-shrink:0, auto) - icindeki
.dash-input-container'in width:100%'u boyle bir "auto genislikli ebeveyn"
icinde belirsiz kaliyor, tarayici input'u ~32px'e (asiri kucuk, "kayip"
gorunumlu) daraltiyor. SABIT width (sadece max-width degil) bu belirsizligi
ortadan kaldiriyor - bkz. kullanici raporu 2026-08-23, masaustunde input hic
gorunmuyordu. */
.checkin-sleep-input {
width: 140px;
max-width: 140px;
}
/* ---- Gunun Ozeti karti - Su Takibi ile ayni desen: ikon rozetli baslik +
govde icinde tablo basligi olmadan alt alta "alan" satirlari + footer. ---- */
.ci-summary-card {
background: #FFE3B0;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: 0 20px 27px 0 rgba(0, 0, 0, 0.05);
overflow: hidden;
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.ci-summary-card:hover {
transform: translateY(-2px);
box-shadow: 0 10px 20px -10px rgba(20, 32, 26, 0.35);
}
.ci-summary-header {
display: flex;
align-items: center;
gap: 10px;
padding: 16px 20px 14px;
border-bottom: 1px solid var(--color-border);
}
/* Paylasilan .chart-header-icon YERINE scoped kopya (bkz. CLAUDE.md madde 16) -
bento dilindeki gradient+gloss+hover-rotate treatment'i .chart-header-icon'a
eklemek onu kullanan diger sayfalari da etkilerdi, bu yuzden ayri class. */
.ci-summary-header-icon {
position: relative;
width: 32px;
height: 32px;
border-radius: 30%;
overflow: hidden;
flex-shrink: 0;
background: linear-gradient(135deg, #17E6AC, var(--color-primary-dark));
box-shadow:
inset 0 1.5px 1.5px rgba(255, 255, 255, 0.55),
inset 0 -6px 9px rgba(0, 0, 0, 0.14),
0 4px 10px -6px rgba(20, 32, 26, 0.35);
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.2s ease;
}
.ci-summary-header-icon::before {
content: "";
position: absolute;
top: -30%;
left: -10%;
width: 120%;
height: 65%;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0));
border-radius: 50%;
pointer-events: none;
}
.ci-summary-card:hover .ci-summary-header-icon {
transform: scale(1.15) rotate(-6deg);
}
.ci-summary-header-icon-mask {
position: relative;
z-index: 1;
width: 15px;
height: 15px;
background-color: #FFFFFF;
filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.18));
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
}
.ci-summary-header-title {
font-size: 0.9rem;
font-weight: 800;
color: var(--color-secondary);
}
.ci-summary-body {
display: flex;
flex-direction: column;
}
.checkin-field-row {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
padding: 16px 20px;
}
.checkin-field-row + .checkin-field-row {
border-top: 1px solid var(--color-border);
}
.checkin-field-control {
flex-shrink: 0;
}
/* Dar ekranda etiket ("Bu gece kac saat uyudun?") + input ayni satirda
sigmayinca input kirpiliyordu (satir sarmiyor, kart overflow:hidden
fazlaligi kesiyordu) - dar ekranda input'u tam genislikte alta al,
kesilme riski kalmasin. */
@media (max-width: 480px) {
.checkin-field-row {
flex-direction: column;
align-items: stretch;
}
.checkin-field-control {
width: 100%;
}
.checkin-sleep-input {
max-width: none;
width: 100%;
box-sizing: border-box;
}
}
.ci-summary-footer {
padding: 4px 20px 20px;
}
.checkin-rating label {
font-weight: 400;
color: var(--color-charcoal);
margin-top: 0;
margin-bottom: 0;
display: flex;
align-items: center;
gap: 4px;
}
/* Segmented pill görünümü - dcc.RadioItems'in Dash 4.4 iskeleti secili
secenege otomatik olarak .selected class'i ekliyor (bkz. .onb-pill-group
ile ayni desen), biz sadece bunu 1-5 puanlama icin kare/rozet stiline
ceviriyoruz. */
.checkin-rating .dash-options-list-option {
min-width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 3px;
border-radius: 10px;
border: 1.5px solid var(--color-border);
background-color: #FFFFFF;
color: var(--color-charcoal);
font-weight: 700;
font-size: 0.8rem;
cursor: pointer;
transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.checkin-rating .dash-options-list-option:hover {
transform: translateY(-1px);
}
.checkin-rating .dash-options-list-option.selected {
color: #FFFFFF;
border-color: transparent;
}
.checkin-rating-sleep .dash-options-list-option.selected {
background: linear-gradient(135deg, #A5B4FC, var(--color-module-sleep));
box-shadow: 0 4px 10px rgba(99, 102, 241, 0.32);
}
.checkin-rating-nutrition .dash-options-list-option.selected {
background: linear-gradient(135deg, #FCD34D, #B45309);
box-shadow: 0 4px 10px rgba(180, 83, 9, 0.28);
}
.checkin-rating-stress .dash-options-list-option.selected {
background: linear-gradient(135deg, #67E8F9, #0E7490);
box-shadow: 0 4px 10px rgba(14, 116, 144, 0.28);
}
.checkin-rating-lifestyle .dash-options-list-option.selected {
background: linear-gradient(135deg, #FDBA74, var(--color-module-lifestyle));
box-shadow: 0 4px 10px rgba(249, 115, 22, 0.28);
}
.checkin-rating .dash-options-list-option-checkbox {
display: none;
}
.checkin-field-label {
display: flex;
align-items: flex-start;
gap: 12px;
}
.checkin-field-label-center {
align-items: center;
}
.checkin-field-icon {
width: 34px;
height: 34px;
border-radius: 10px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
margin-top: 2px;
}
.checkin-field-icon-mask {
width: 16px;
height: 16px;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
}
.checkin-field-icon-sleep { background: linear-gradient(135deg, #A5B4FC, var(--color-module-sleep)); }
.checkin-field-icon-sleep .checkin-field-icon-mask { background-color: #FFFFFF; }
.checkin-field-icon-nutrition { background: linear-gradient(135deg, #FCD34D, #B45309); }
.checkin-field-icon-nutrition .checkin-field-icon-mask { background-color: #FFFFFF; }
.checkin-field-icon-stress { background: linear-gradient(135deg, #67E8F9, #0E7490); }
.checkin-field-icon-stress .checkin-field-icon-mask { background-color: #FFFFFF; }
.checkin-field-icon-lifestyle { background: linear-gradient(135deg, #FDBA74, var(--color-module-lifestyle)); }
.checkin-field-icon-lifestyle .checkin-field-icon-mask { background-color: #FFFFFF; }
@media (max-width: 768px) {
.stat-card-grid {
grid-template-columns: 1fr 1fr;
}
.charts-grid {
grid-template-columns: 1fr;
}
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
textarea {
font-size: 16px;
}
}
@media (max-width: 640px) {
.navbar {
margin: 8px 8px 0;
top: 8px;
padding: 8px 14px;
gap: 6px;
}
.navbar-links {
justify-content: flex-start;
flex-wrap: nowrap;
overflow-x: auto;
scrollbar-width: none;
}
.navbar-links::-webkit-scrollbar {
display: none;
}
.navbar-brand {
display: none;
}
.navbar-username {
display: none;
}
.stat-card-grid {
grid-template-columns: 1fr;
}
}
.notif-actions {
display: flex;
gap: var(--spacing-sm);
margin-top: var(--spacing-sm);
}
/* ---- Testimonials ---- */
.testimonial-form-card {
padding: var(--spacing-md);
margin-bottom: var(--spacing-md);
background: #FFFFFF;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
box-shadow: 0 20px 27px 0 rgba(0, 0, 0, 0.05);
}
.testimonial-form-message {
margin-top: var(--spacing-sm);
}
.testimonial-readonly {
font-style: italic;
padding: var(--spacing-sm);
background: var(--color-paper);
border-radius: var(--radius-sm);
}
.testimonial-coach-response-readonly {
margin-top: var(--spacing-sm);
padding-left: var(--spacing-sm);
border-left: 2px solid var(--color-primary);
color: var(--color-mist);
font-size: 0.9em;
}
.testimonial-own-status {
display: inline-block;
margin-bottom: var(--spacing-sm);
font-size: 0.85em;
color: var(--color-mist);
}
/* Eskiden --glass-bg/--glass-border (K'den ONCEKI bir tasarim dili, bkz.
CLAUDE.md madde 4) kullaniyordu - bu sayfa (coach K portu, 2026-08-21)
diger K bento kartlariyla ayni pastel+hover-lift diline getirildi.
.testimonial-pending-card/.testimonial-approved-card SADECE bu dosyada
(callbacks/testimonials.py) kullaniliyor, scoping riski yok. */
.testimonial-pending-card {
padding: var(--spacing-lg);
margin-bottom: var(--spacing-md);
background: #FFE3B0;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: 0 20px 27px 0 rgba(0, 0, 0, 0.05);
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.testimonial-pending-card:hover {
transform: translateY(-2px);
box-shadow: 0 10px 20px -10px rgba(20, 32, 26, 0.35);
}
.testimonial-approved-card {
background: #D8F5C8;
}
.testimonial-pending-header {
display: flex;
align-items: center;
gap: var(--spacing-sm);
margin-bottom: var(--spacing-sm);
}
.testimonial-pending-name {
font-weight: 600;
}
.testimonial-pending-email {
font-size: 0.85em;
color: var(--color-mist);
}
.testimonial-pending-content {
font-style: italic;
padding: var(--spacing-sm);
background: var(--color-paper);
border-radius: var(--radius-sm);
}
.testimonial-coach-response-input {
width: 100%;
margin-top: var(--spacing-sm);
}
.testimonial-content-edit-row {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 6px;
}
.testimonial-pending-content-input {
width: 100%;
font-style: italic;
background: rgba(255, 255, 255, 0.55);
}
.testimonial-content-save-btn {
align-self: flex-end;
background: linear-gradient(135deg, #17E6AC, var(--color-primary-dark));
color: #FFFFFF;
border: none;
box-shadow: 0 4px 10px rgba(0, 191, 143, 0.28);
}
.testimonial-content-save-btn:hover {
background: linear-gradient(135deg, #17E6AC, var(--color-primary-dark));
color: #FFFFFF;
border-color: transparent;
filter: brightness(1.05);
box-shadow: 0 4px 10px rgba(0, 191, 143, 0.28);
}
.testimonial-pending-actions {
display: flex;
gap: var(--spacing-sm);
margin-top: var(--spacing-sm);
}
.testimonial-approve-btn {
background: var(--color-primary);
color: #FFFFFF;
border-color: var(--color-primary);
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.testimonial-reject-btn {
background: var(--color-accent-wine);
color: #FFFFFF;
border-color: var(--color-accent-wine);
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.testimonial-approve-btn:hover,
.testimonial-reject-btn:hover {
transform: translateY(-1px);
box-shadow: 0 8px 18px -6px rgba(20, 32, 26, 0.35);
}
.testimonials-approved-section {
margin-top: var(--spacing-xl);
}
.testimonial-approved-badge {
margin-left: auto;
padding: 3px 12px;
border-radius: 999px;
background: linear-gradient(135deg, #5EEAD4, #0D9488);
color: #FFFFFF;
font-size: 0.72rem;
font-weight: 700;
}
.testimonial-pending-badge {
margin-left: auto;
padding: 3px 12px;
border-radius: 999px;
background: linear-gradient(135deg, #FCD9A8, var(--color-warning));
color: #FFFFFF;
font-size: 0.72rem;
font-weight: 700;
white-space: nowrap;
}
.testimonial-delete-btn {
width: 34px;
height: 34px;
padding: 0;
background: transparent;
border: none;
box-shadow: none;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.testimonial-delete-btn-mask {
width: 16px;
height: 16px;
background: linear-gradient(135deg, #FDA4AF, var(--color-accent-wine));
-webkit-mask-image: url(/assets/icons/trash.svg);
mask-image: url(/assets/icons/trash.svg);
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
}
.testimonial-carousel {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-md);
min-height: 200px;
}
.testimonial-carousel-track {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-md);
width: 100%;
}
.testimonial-public-card {
flex: 1 1 260px;
max-width: 320px;
padding: var(--spacing-md);
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: var(--radius-md);
box-shadow: var(--glass-shadow);
}
.testimonial-public-content {
font-style: italic;
margin: var(--spacing-sm) 0;
}
.testimonial-public-name {
font-weight: 600;
}
.testimonial-public-coach-response {
margin-top: var(--spacing-sm);
padding-left: var(--spacing-sm);
border-left: 2px solid var(--color-primary);
color: var(--color-mist);
font-size: 0.9em;
}
.testimonial-public-date {
margin-top: var(--spacing-sm);
font-size: 0.8em;
color: var(--color-mist);
}
.mpk-image-upload {
border: 2px dashed var(--color-border);
border-radius: var(--radius-md);
padding: var(--spacing-lg);
text-align: center;
color: var(--color-mist);
cursor: pointer;
margin-bottom: var(--spacing-sm);
}
.mpk-image-preview {
max-width: 200px;
border-radius: var(--radius-sm);
margin-bottom: var(--spacing-sm);
}
.mpk-components-empty {
color: var(--color-mist);
font-size: 0.85rem;
margin-bottom: var(--spacing-sm);
}
.mpk-comp-add-button {
margin-top: var(--spacing-sm);
}
.mpk-comp-input .dash-input-container {
max-width: 100%;
height: 36px;
margin-bottom: 0;
}
/* admin/measurements birleşik ölçüm tablosu - Yaş/Boy/BKİ hesaplanan, salt-okunur
hücreler (bkz. pages/admin/measurements.py render_measurement_fields_table) */
.am-readonly-cell {
display: flex;
align-items: center;
height: 36px;
padding: 0 12px;
border-radius: 8px;
background: #FAFAFA;
color: var(--color-secondary);
font-weight: 600;
font-size: 0.85rem;
}
.mpk-link-output-text {
height: auto;
min-height: 36px;
overflow-wrap: anywhere;
word-break: break-all;
}
.mpk-link-copy-status {
margin-top: 6px;
font-size: 0.8rem;
color: var(--color-primary);
font-weight: 600;
}
.am-measurement-table {
margin-bottom: var(--spacing-md);
}
/* Oncesi/sonrasi fotograf ozelligi (pages/admin/measurements.py) */
.am-photo-field {
margin-bottom: var(--spacing-md);
}
.am-standalone-pair-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: var(--spacing-lg);
margin-bottom: var(--spacing-md);
}
.am-standalone-pair-col {
background: rgba(255, 255, 255, 0.55);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: var(--spacing-md);
}
.am-standalone-pair-title {
font-size: 0.78rem;
font-weight: 800;
color: var(--color-secondary);
text-transform: uppercase;
letter-spacing: 0.04em;
margin-bottom: var(--spacing-sm);
}
.am-photo-upload {
border: 2px dashed var(--color-border);
border-radius: var(--radius-md);
padding: var(--spacing-md);
text-align: center;
color: var(--color-mist);
font-size: 0.85rem;
cursor: pointer;
}
.am-photo-upload:hover {
border-color: rgba(0, 191, 143, 0.5);
background: rgba(0, 191, 143, 0.04);
}
.am-photo-preview-img {
max-width: 160px;
border-radius: var(--radius-sm);
margin-top: var(--spacing-sm);
display: block;
}
.am-compare-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--spacing-md);
margin-top: var(--spacing-md);
}
.am-compare-photo {
position: relative;
border-radius: var(--radius-md);
overflow: hidden;
aspect-ratio: 3 / 4;
background: #F5F5F5;
}
.am-compare-photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.am-compare-photo-badge {
position: absolute;
top: 10px;
left: 10px;
background: rgba(0, 0, 0, 0.55);
color: #FFFFFF;
font-size: 0.7rem;
font-weight: 700;
padding: 3px 10px;
border-radius: 999px;
}
.am-compare-meta {
grid-column: 1 / 3;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 10px;
background: var(--color-sage-tint);
color: var(--color-primary-dark);
border-radius: var(--radius-sm);
padding: 12px 16px;
font-size: 0.85rem;
font-weight: 600;
}
.am-compare-delta-badge {
font-size: 1.05rem;
font-weight: 800;
}
.am-compare-download-btn {
display: inline-flex;
align-items: center;
gap: 6px;
background: #FFFFFF;
border: 1.5px solid var(--color-primary);
color: var(--color-primary-dark);
border-radius: 999px;
padding: 8px 18px;
font-weight: 700;
font-size: 0.82rem;
text-decoration: none;
}
.am-compare-download-btn:hover {
background: var(--color-sage-tint);
}
.am-compare-align-hint {
font-size: 0.82rem;
color: var(--color-mist);
margin-top: var(--spacing-md);
margin-bottom: var(--spacing-sm);
}
.am-compare-align-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: var(--spacing-md);
margin-bottom: var(--spacing-md);
}
.am-compare-final-row {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--spacing-sm);
}
.am-compare-final-img {
max-width: 100%;
width: 260px;
border-radius: var(--radius-md);
box-shadow: 0 10px 24px -10px rgba(20, 32, 26, 0.4);
}
.mpk-options-editor {
min-width: 0;
}
.mpk-flavor-checklist {
display: flex;
flex-direction: column;
gap: 4px;
}
.mpk-flavor-checklist .dash-options-list-option {
display: flex;
align-items: center;
gap: 6px;
font-size: 0.82rem;
color: var(--color-secondary);
padding: 2px 0;
cursor: pointer;
}
/* "Bileşenler" bölümü yanlışlıkla .field-group (max-width:400px, arama/filtre
kutuları için tasarlanmış) class'ını kullanıyordu - tüm bileşen tablosunu
400px'e sıkıştırıyordu. Bu, genişlik kısıtı olmayan kendi class'ı. */
.mpk-components-section {
margin-bottom: var(--spacing-sm);
}
/* Yeni Paket Ekle / bilesen editoru icindeki soft-table'lar dar konteynerde
sikismasin diye kendi min-width'lerini istiyor - varsayilan .soft-table-row
560px isim alanini kirpiyordu. */
.mpk-components-table .soft-table-row,
.mpk-components-table .soft-table-header-row {
min-width: 720px;
}
.mpk-form-header-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--spacing-sm);
margin-bottom: var(--spacing-sm);
}
.mpk-form-header-row h3 {
margin: 0;
}
.mpk-list-actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.mpk-list-thumb {
width: 56px;
height: 56px;
object-fit: cover;
border-radius: var(--radius-sm);
flex-shrink: 0;
}
/* ---- Paket Incele + Sec paneli (landing + /uyelik ortak) ---- */
.pkg-review-panel-backdrop {
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.25);
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease;
z-index: 90;
}
.pkg-review-panel-backdrop-open {
opacity: 1;
pointer-events: auto;
}
.pkg-review-panel {
position: fixed;
top: 0;
right: 0;
height: 100vh;
width: 420px;
max-width: 92vw;
background: #FFFFFF;
box-shadow: -12px 0 40px rgba(15, 23, 42, 0.15);
padding: var(--spacing-lg);
transform: translateX(100%);
transition: transform 0.25s ease;
z-index: 91;
overflow-y: auto;
box-sizing: border-box;
}
.pkg-review-panel-open {
transform: translateX(0);
}
.pkg-review-summary {
padding-bottom: var(--spacing-md);
border-bottom: 1px solid var(--color-border);
margin-bottom: var(--spacing-md);
}
.pkg-review-summary-title {
margin: 0 0 var(--spacing-sm);
}
.pkg-review-summary-list {
list-style: none;
padding: 0;
margin: 0 0 var(--spacing-sm);
color: var(--color-secondary);
font-size: 0.88rem;
}
.pkg-review-summary-list li {
padding: 3px 0;
}
.pkg-review-summary-price {
font-size: 1.3rem;
font-weight: 700;
color: var(--color-primary-dark);
}
.pkg-review-step {
margin-bottom: var(--spacing-lg);
}
.pkg-review-step h5 {
margin: 0 0 var(--spacing-sm);
font-size: 0.85rem;
text-transform: none;
color: var(--color-secondary);
}
.pkg-review-empty {
color: var(--color-mist);
font-size: 0.85rem;
}
.pkg-review-flavor-row {
margin-bottom: var(--spacing-md);
}
.pkg-review-flavor-row > label {
display: block;
font-size: 0.82rem;
font-weight: 600;
color: var(--color-secondary);
margin-bottom: 6px;
}
/* Aroma secimi artik acilir bir Dropdown degil, hep-gorunur pill listesi -
popover clipping/scroll sorunu (5 aroma girilse bile sadece 3'u gorunmesi)
boylece tamamen ortadan kalkiyor. */
.pkg-review-flavor-radio {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.pkg-review-flavor-radio .dash-options-list-option {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
border-radius: 999px;
border: 1px solid var(--color-border);
background-color: #FFFFFF;
color: var(--color-charcoal);
font-size: 0.85rem;
cursor: pointer;
transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.pkg-review-flavor-radio .dash-options-list-option.selected {
background-color: var(--color-primary);
border-color: var(--color-primary);
color: var(--color-primary-dark);
}
.pkg-review-flavor-radio-input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.pkg-review-delivery-radio {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: var(--spacing-sm);
}
/* minmax(0, 1fr) - duz "1fr" aslinda minmax(auto, 1fr) demek, yani icerik
(secili il/ilce'nin avatar+metin genisligi) hucrenin izin verdiginden
genis olmak isteyince grid kendini buyutup karti tasiriyordu (klasik CSS
Grid tuzagi). minmax(0, 1fr) track'in icerigin min-content boyutunun
ALTINA da kucula bilmesine izin veriyor, dropdown'un kendi
overflow:hidden/text-overflow:ellipsis'i gerisini hallediyor. */
.pkg-review-address-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 8px;
margin-bottom: 8px;
}
@media (max-width: 480px) {
.pkg-review-address-grid { grid-template-columns: 1fr; }
}
.pkg-review-address-input {
min-height: 70px;
}
.pkg-review-pickup-note {
font-size: 0.85rem;
color: var(--color-secondary);
background: var(--color-paper);
padding: var(--spacing-sm);
border-radius: 14px;
border: 1px solid var(--color-border);
}
.pkg-review-pickup-header {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 2px 2px 12px;
}
.pkg-review-pickup-icon {
width: 34px;
height: 34px;
border-radius: 10px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
color: #FFFFFF;
background: linear-gradient(160deg, var(--color-primary), var(--color-primary-dark));
}
.pkg-review-pickup-icon svg {
width: 16px;
height: 16px;
}
.pkg-review-pickup-title {
display: flex;
flex-direction: column;
gap: 2px;
padding-top: 2px;
}
.pkg-review-pickup-title strong {
font-size: 0.88rem;
font-weight: 700;
color: var(--color-secondary);
}
.pkg-review-pickup-title span {
font-size: 0.8rem;
line-height: 1.5;
color: var(--color-charcoal);
opacity: 0.75;
}
.pkg-review-pickup-map {
border-radius: 12px;
overflow: hidden;
border: 1px solid var(--color-border);
background: #FFFFFF;
}
.pkg-review-pickup-map-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 12px;
border-bottom: 1px solid var(--color-border);
font-size: 0.72rem;
font-weight: 700;
color: var(--color-secondary);
}
.pkg-review-pickup-map-link {
display: inline-flex;
align-items: center;
gap: 4px;
color: var(--color-primary-dark);
text-decoration: none;
}
.pkg-review-pickup-map-link:hover {
text-decoration: underline;
}
.pkg-review-pickup-map-link svg {
width: 11px;
height: 11px;
}
.pkg-review-pickup-map-frame-link {
display: block;
position: relative;
}
.pkg-review-pickup-map-frame {
display: block;
width: 100%;
height: 120px;
border: 0;
pointer-events: none;
filter: grayscale(35%) contrast(1.05);
}
.pkg-picker-radio {
display: flex;
flex-direction: column;
gap: 10px;
}
.pkg-review-panel-content {
display: flex;
flex-direction: column;
gap: var(--spacing-md);
text-align: left;
}
/* Landing sayfasi kendi --lp-* marka kimligini kullaniyor (bkz. CLAUDE.md madde 4) -
paylasilan .pkg-review-panel ana app'in --color-*/--glass-* tokenlariyla
tasarlandigi icin, landing'de acildiginda burada --lp-* ile eziliyor. */
.landing-page .pkg-review-panel {
background: var(--lp-pure-white);
}
.landing-page .pkg-review-summary {
border-bottom-color: var(--lp-hairline);
}
.landing-page .pkg-review-summary-title,
.landing-page .pkg-review-step h5,
.landing-page .pkg-review-flavor-row > label {
color: var(--lp-off-black);
}
.landing-page .pkg-review-summary-list {
color: var(--lp-steel-gray);
}
.landing-page .pkg-review-summary-price {
color: var(--lp-signal-blue);
}
.landing-page .pkg-review-flavor-radio .dash-options-list-option,
.landing-page .pkg-review-delivery-radio .dash-options-list-option {
border-color: var(--lp-hairline);
color: var(--lp-off-black);
}
.landing-page .pkg-review-flavor-radio .dash-options-list-option.selected,
.landing-page .pkg-review-delivery-radio .dash-options-list-option.selected {
background-color: var(--lp-off-black);
border-color: var(--lp-off-black);
color: var(--lp-pure-white);
}
/* Global .dash-options-list-option:hover kurali (satir ~924) hover'da metni
--color-charcoal'a zorluyor - secili+siyah arka planli lp pill'lerde bu,
koyu metnin koyu arka planla karismasina (görünmez yazı) yol açıyordu. */
.landing-page .pkg-review-flavor-radio .dash-options-list-option.selected:hover,
.landing-page .pkg-review-delivery-radio .dash-options-list-option.selected:hover {
color: var(--lp-pure-white) !important;
}
.landing-page .pkg-review-pickup-note {
background: var(--lp-off-white);
color: var(--lp-off-black);
}
.landing-page #lp-confirm-button {
background: var(--lp-off-black);
color: var(--lp-pure-white);
border-radius: var(--lp-radius-button);
}
.landing-page #lp-confirm-button:hover {
background: var(--lp-signal-blue);
}
@media (max-width: 992px) {
.onboarding-page-split {
flex-direction: column;
gap: 30px;
padding: 100px 16px 40px;
align-items: center;
}
.report-col {
max-width: 100%;
width: 100%;
}
.onb-logo-link {
align-self: center;
}
.onb-report-manifesto {
text-align: center;
align-items: center;
}
.onb-hero-badge {
align-self: center;
}
.wizard-col {
max-width: 100%;
}
.profile-report-card {
padding: 20px;
border-radius: 24px;
}
.mobile-matrix-header {
display: flex;
width: 100%;
}
.onb-report-card-title {
display: none;
}
.matrix-container {
display: none;
margin-top: 14px;
}
.profile-report-card.expanded .matrix-container {
display: flex;
}
}
/* 0. adim (paket secimi) - pkg-review- ve pkg-picker-radio siniflari
components/package_review_panel.py'de tanimli (degistirilmiyor, bkz. CLAUDE.md madde 19) -
burada SADECE #onb-step-0 scope'unda cam kart estetigi uygulaniyor, global tanimlarina
dokunulmuyor (baska sayfalardaki - orn. pages/membership.py slide-out paneli - kullanimini
etkilememesi icin). Gercek DOM: dcc.RadioItems varsayilan Dash 4.4 render'i - option'lar
`.dash-options-list-option` sinifiyla cikiyor (bkz. assets/theme.css satir ~9586/9670,
ayni deseni .pkg-review-flavor-radio/.pkg-review-delivery-radio icin zaten kullaniyor). */
#onb-step-0 .pkg-picker-radio .dash-options-list-option {
display: flex;
justify-content: space-between;
align-items: center;
padding: 24px;
border-radius: 22px;
border: 1px solid rgba(0, 0, 0, 0.08);
background: rgba(255, 255, 255, 0.5);
cursor: pointer;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
margin-bottom: 14px;
}
#onb-step-0 .pkg-picker-radio .dash-options-list-option:hover {
background-color: #ffffff;
border-color: var(--color-primary);
transform: translateY(-2px);
}
#onb-step-0 .pkg-picker-radio .dash-options-list-option.selected {
border-color: var(--color-primary);
box-shadow: 0 15px 30px -10px rgba(0, 191, 143, 0.15), 0 0 0 4px rgba(0, 191, 143, 0.12);
background: #ffffff;
}
#onb-step-0 .pkg-review-panel-content,
#onb-step-0 .pkg-review-step {
background: rgba(255, 255, 255, 0.5);
border: 1px solid rgba(0, 0, 0, 0.06);
border-radius: 20px;
padding: 20px;
margin-top: 16px;
}
#onb-step-0 .pkg-review-summary {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.4));
border: 1px solid rgba(255, 255, 255, 0.7);
border-radius: 20px;
padding: 18px 24px;
}
#onb-step-0 .pkg-review-delivery-radio .dash-options-list-option {
border-radius: 16px;
border: 1px solid rgba(0, 0, 0, 0.08);
background: rgba(255, 255, 255, 0.4);
padding: 16px;
text-align: center;
font-weight: 700;
}
#onb-step-0 .pkg-review-delivery-radio .dash-options-list-option.selected {
background: var(--color-primary);
border-color: var(--color-primary);
color: #ffffff;
box-shadow: 0 6px 15px rgba(0, 191, 143, 0.2);
}
#onb-step-0 .pkg-review-address-input {
width: 100%;
min-height: 80px;
padding: 14px;
border-radius: 16px;
border: 1px solid rgba(0, 0, 0, 0.08);
background: rgba(255, 255, 255, 0.6);
font-size: 13px;
outline: none;
resize: none;
box-sizing: border-box;
}
#onb-step-0 .pkg-review-address-input:focus {
background: #ffffff;
border-color: var(--color-primary);
}
/* ====================================================================
404 sayfasi (pages/not_found_404.py) - onaylanan mockup'in birebir
kod karsiligi. Kart yuzeyi .member-hero-dotgrid ile ayni teknik
(koyu nokta, eliptik maske), aksiyon karolari gercek KPI bento
karosuyla (.member-bento-tile) ayni siniflar/degerler, path-hint
gercek info-chip diliyle (.mb-pkg-price-chip/.pf-status-badge).
==================================================================== */
.not-found-page {
min-height: calc(100vh - 32px);
display: flex;
align-items: center;
justify-content: center;
padding: 24px 0;
}
.nf-stage {
width: 100%;
max-width: 760px;
}
.nf-card {
position: relative;
background: var(--glass-bg);
backdrop-filter: blur(20px) saturate(1.2);
-webkit-backdrop-filter: blur(20px) saturate(1.2);
border: 1px solid var(--glass-border);
border-radius: 22px;
box-shadow: var(--glass-shadow);
padding: 40px 40px 168px;
overflow: hidden;
}
.nf-card::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
background-image: radial-gradient(rgba(17, 20, 15, 0.18) 1px, transparent 1.5px);
background-size: 16px 16px;
-webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 45%, black 45%, transparent 88%);
mask-image: radial-gradient(ellipse 90% 80% at 50% 45%, black 45%, transparent 88%);
pointer-events: none;
}
.nf-route {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
}
.nf-content {
position: relative;
z-index: 1;
display: grid;
gap: 18px;
max-width: 480px;
}
.nf-eyebrow {
display: inline-flex;
align-items: center;
gap: 7px;
width: fit-content;
padding: 6px 13px 6px 10px;
border-radius: 999px;
background: #D8F5C8;
color: var(--color-primary-dark);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.nf-eyebrow-icon-mask {
width: 13px;
height: 13px;
background-color: var(--color-primary-dark);
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
}
.nf-code {
margin: 0;
font-size: 84px;
line-height: 0.9;
font-weight: 800;
letter-spacing: -0.03em;
color: var(--color-secondary);
}
.nf-title {
margin: 0;
font-size: 22px;
font-weight: 700;
letter-spacing: -0.01em;
text-wrap: balance;
}
.nf-lede {
margin: 0;
font-family: "Inter", sans-serif;
font-size: 14.5px;
line-height: 1.65;
color: var(--color-charcoal);
max-width: 46ch;
}
.nf-path-hint {
display: inline-flex;
align-items: center;
gap: 10px;
background: #FFFFFF;
border: 1px solid var(--glass-border);
padding: 6px 8px 6px 12px;
border-radius: 999px;
width: fit-content;
max-width: 100%;
}
.nf-path-hint-icon-mask {
width: 13px;
height: 13px;
flex-shrink: 0;
background-color: var(--color-mist, #6B7268);
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
}
.nf-path-hint code {
font-family: "Inter", ui-monospace, monospace;
font-size: 12.5px;
color: var(--color-secondary);
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.nf-path-hint-status {
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.02em;
color: #FFFFFF;
background: linear-gradient(135deg, #FDA4AF, var(--color-accent-wine));
padding: 4px 11px;
border-radius: 999px;
flex-shrink: 0;
}
.nf-actions {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
margin-top: 4px;
}
.nf-act-tile {
border-radius: 16px;
display: flex;
align-items: center;
gap: 10px;
padding: 14px;
text-decoration: none;
color: inherit;
cursor: pointer;
border: none;
font-family: inherit;
text-align: left;
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.nf-act-tile:hover {
transform: translateY(-2px);
box-shadow: 0 10px 20px -10px rgba(20, 32, 26, 0.35);
}
.nf-act-tile:focus-visible {
outline: 2px solid var(--color-primary-dark);
outline-offset: 2px;
}
.nf-act-tile.t4 { background: #D8F5C8; }
.nf-act-tile.t1 { background: #FFE3B0; }
.nf-act-icon {
position: relative;
width: 36px;
height: 36px;
border-radius: 30%;
flex-shrink: 0;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
box-shadow:
inset 0 1.5px 1.5px rgba(255, 255, 255, 0.55),
inset 0 -6px 9px rgba(0, 0, 0, 0.14),
0 4px 10px -6px rgba(20, 32, 26, 0.35);
}
.nf-act-icon.grad-primary { background: linear-gradient(160deg, #17E6AC, var(--color-primary-dark)); }
.nf-act-icon.grad-blue { background: linear-gradient(160deg, #93C5FD, #3B82F6); }
.nf-act-icon-mask {
position: relative;
z-index: 1;
width: 17px;
height: 17px;
background-color: #FFFFFF;
filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.18));
transition: transform 0.2s ease;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
}
.nf-act-tile:hover .nf-act-icon-mask {
transform: scale(1.15) rotate(-6deg);
}
.nf-act-title {
font-size: 13px;
font-weight: 800;
color: #16201A;
line-height: 1.2;
}
.nf-act-sub {
font-size: 10px;
color: #384038;
margin-top: 1px;
}
.nf-trail {
position: absolute;
z-index: 1;
left: 0;
right: 0;
bottom: 26px;
height: 118px;
pointer-events: none;
}
.nf-trail svg { width: 100%; height: 100%; }
.nf-foot-fill { fill: var(--color-primary-dark); opacity: 0.16; }
.nf-foot-fill.is-last { opacity: 0.4; }
.nf-foot-groove { fill: #FFFFFF; opacity: 0.6; }
@media (max-width: 640px) {
.nf-card { padding: 28px 22px 130px; border-radius: 20px; }
.nf-code { font-size: 58px; }
.nf-title { font-size: 18.5px; }
.nf-lede { font-size: 13.5px; }
.nf-actions { grid-template-columns: 1fr; }
.nf-trail { height: 96px; bottom: 20px; }
}
@media (prefers-reduced-motion: no-preference) {
.nf-dot-travel { animation: nf-travel 4.5s ease-in-out infinite; }
}
@keyframes nf-travel {
0%, 8% { offset-distance: 0%; }
55%, 100% { offset-distance: 62%; }
}
/* ---- Ürün Kütüphanesi: /admin/urunler + /admin/urun-paketleri picker (2026-08-25) ---- */
/* .pf-card'in varsayilan `overflow:hidden`'i, "+ Urun Ekle" picker popover'ini
(position:absolute, kartin altina tasan) gorunmez kilip "kayboluyor" izlenimi
yaratiyordu - .meal-plans-page'deki ayni sorunun ayni cozumu (satir ~4643). */
.admin-membership-packages-page .pf-card { overflow: visible; }
/* ---- Hizmet Kütüphanesi: /admin/hizmetler + /admin/hizmet-paketleri picker (2026-08-26) ---- */
/* Ayni sorun ve ayni cozum: "+ Hizmet Ekle" picker popover'ini gorunur kilmak icin. */
.admin-service-packages-page .pf-card { overflow: visible; }
/* Ürünler/Ürün detay kartlarinin arka plani, ustteki bento istatistik
satirindaki (render_member_bento_grid, big_first=False) 2. ve 3. karonun
(.member-bento-tile.t2/.t3) renkleriyle birebir esleniyor - kullanicinin
istegi (2026-08-25): "Urunler" = TOPLAM VARYANT karosunun rengi (t2),
"Urun" detay karti = KULLANILMAYAN VARYANT karosunun rengi (t3). */
.admin-products-page .prc-card-list { background: #E9F5A8; }
.admin-products-page .prc-card-detail { background: #C3DDF6; }
/* /admin/urunler'deki ayni t2/t3 esleme, /admin/urun-paketleri'nin
Bilesenler/Musteri Onizlemesi ikilisine (2026-08-25). Sayfadaki TUM
kartlar bento t1-t4 paletini donguleyerek boyaniyor - kullanicinin
istegi (2026-08-25): "bento kartlarinin renklerini kullan". */
.admin-membership-packages-page .mpk-card-new { background: #FFE3B0; }
.admin-membership-packages-page .mpk-card-components { background: #E9F5A8; }
.admin-membership-packages-page .mpk-card-preview { background: #C3DDF6; }
.admin-membership-packages-page .mpk-card-list { background: #D8F5C8; }
/* "Mevcut Paketler"/"Mevcut Hizmet Paketleri" listesi - varsayilan 560px
satir min-width'i, "Bilesenler" kolonundaki cok satirli urun isimli
chip'lerle bir arada mobilde kullanilamaz kadar sikisiyordu (kullanici
raporu: Bilesenler basligi ve chip metinleri ekran kenarindan kirpiliyordu,
2026-08-28). .soft-table-card zaten overflow-x:auto - satirlarin gercek
icerigine uygun daha genis bir min-width vererek yatay kaydirma
kullanilabilir hale getiriliyor (kesilme degil, kaydirma). */
.admin-membership-packages-page .mpk-card-list .soft-table-row,
.admin-membership-packages-page .mpk-card-list .soft-table-header-row,
.admin-service-packages-page .svc-card-list .soft-table-row,
.admin-service-packages-page .svc-card-list .soft-table-header-row {
min-width: 760px;
}
/* .grp-chip (site geneli "hero pill" dili) tam pill (999px) kose yaricapiyla
TEK SATIRLIK kisa etiketler icin tasarlandi - burada urun isimleri uzun
oldugunda chip 2-3 satira sarmaliyor, 999px yaricap o zaman kapsulun
uclarini asiri yuvarlayip "blob" gibi bir bicime sokuyordu (ekran goruntusu
raporu). Sadece bu listedeki chip'lerde daha olculu bir kose yaricapina
ceviriliyor - .grp-chip'in diger kullanimlari (kisa etiketler) etkilenmiyor. */
.mpk-list-chip-row .grp-chip {
border-radius: 12px;
white-space: normal;
text-align: left;
line-height: 1.3;
}
/* /admin/hizmet-paketleri - ayni bento t1-t4 donguleme mantigi. */
.admin-service-packages-page .svc-card-new { background: #FFE3B0; }
.admin-service-packages-page .svc-card-list { background: #E9F5A8; }
.admin-service-packages-page .svc-card-payment { background: #C3DDF6; }
.admin-service-packages-page .svc-card-output { background: #D8F5C8; }
/* /admin/hizmetler + /admin/hizmet-paketleri (2026-08-26) - Urun Kutuphanesi'yle
ayni gorsel dil, aroma alani olmadigi icin sadelestirilmis tek-satir varyant
karti. */
.admin-services-page .hiz-card-list { background: #E9F5A8; }
.admin-services-page .hiz-card-detail { background: #C3DDF6; }
.variant-row-live-simple {
display: grid;
grid-template-columns: 1.6fr 1fr auto auto;
gap: 12px;
align-items: center;
padding: 12px 14px;
}
.variant-row-live-simple + .variant-row-live-simple { border-top: 1px dashed var(--color-border); }
.variant-row-live-simple .v-name, .variant-row-live-simple .v-price { width: 100%; }
/* /admin/hizmet-paketleri - Bilesenler/Musteri Onizlemesi ikilisi, urun-paketleri
ile ayni t2/t3 esleme. .svc-card-new/-payment/-output renkleri degismiyor. */
.admin-service-packages-page .svc-card-components { background: #E9F5A8; }
.admin-service-packages-page .svc-card-preview { background: #C3DDF6; }
.admin-service-packages-page .svc-card-list { background: #D8F5C8; }
/* /admin/site-settings - tek kart, bento paletinden t3 (kullanici t1
turuncuyu begenmedi, 2026-08-25). */
.admin-site-settings-page .ss-card-countdown { background: #C3DDF6; }
/* Renkli kartlarin icindeki duz Soft Tablo'lar (colorful=True OLMAYANLAR -
orn. "Uyeye Odeme Baglantisi Olustur"/"Olusan Baglanti") varsayilan olarak
hep opak beyaz (#FFFFFF/#FAFAFA) - kart artik pastel renkliyken bu beyaz
kutu gibi "kopup" duruyordu. Saydam beyaza cevirip kartin kendi rengi
arkadan gorunsun diye (2026-08-25). */
.admin-membership-packages-page :is(.mpk-card-new, .mpk-card-components, .mpk-card-preview, .mpk-card-list) .soft-table-card:not(.mp-colorful),
.admin-service-packages-page :is(.svc-card-new, .svc-card-list, .svc-card-payment, .svc-card-output, .svc-card-components, .svc-card-preview) .soft-table-card:not(.mp-colorful) {
background: rgba(255, 255, 255, 0.5);
}
.admin-membership-packages-page :is(.mpk-card-new, .mpk-card-components, .mpk-card-preview, .mpk-card-list) .soft-table-header-row:not(.mp-colorful),
.admin-service-packages-page :is(.svc-card-new, .svc-card-list, .svc-card-payment, .svc-card-output, .svc-card-components, .svc-card-preview) .soft-table-header-row:not(.mp-colorful) {
background: rgba(255, 255, 255, 0.35);
}
/* "Üyeye Odeme Baglantisi Olustur"/"Olusan Baglanti" (components/package_payment_link.py)
Soft Tablo'yu bir FORM icin yeniden kullaniyor (2 dropdown + buton /
metin + "Kopyala" butonu) - varsayilan 560px satir min-width'i mobilde
bu kisa formu bile gereksiz yere yatay kaydirmali yapiyordu (kullanici
ekran goruntusu raporu, 2026-09-04). Diger Soft Tablo/Mercan Panel veri
listeleri (Mevcut Paketler, Uye/Coach listesi vb.) icin yatay kaydirma
halen bilincli/istenen davranis - sadece bu iki form burada min-width'siz
tek sutuna indiriliyor. Baslik satiri (Uye/Paket/"") dropdown'larin kendi
placeholder'i ("Uye secin"/"Paket secin") zaten etiket gorevi gordugu
icin mobilde gizleniyor - stack edilince baslik ile alan hizasi bozulurdu. */
@media (max-width: 640px) {
.mpk-link-form .soft-table-header-row,
.mpk-link-output .soft-table-header-row {
display: none;
}
.mpk-link-form .soft-table-row,
.mpk-link-output .soft-table-row {
min-width: 0;
grid-template-columns: 1fr !important;
gap: 10px;
}
.mpk-link-form .soft-table-card::after,
.mpk-link-output .soft-table-card::after {
display: none;
}
}
.prc-grid {
display: grid;
grid-template-columns: 0.8fr 1.2fr;
gap: 20px;
align-items: start;
}
@media (max-width: 900px) { .prc-grid { grid-template-columns: 1fr; } }
.mpk-builder-grid {
display: grid;
grid-template-columns: 1.05fr 0.95fr;
gap: 20px;
align-items: start;
}
@media (max-width: 900px) { .mpk-builder-grid { grid-template-columns: 1fr; } }
.prc-search-input {
width: 100%;
margin-bottom: 12px;
}
.picker-anchor { position: relative; display: inline-block; margin-top: 14px; }
.picker {
position: absolute; top: calc(100% + 10px); left: 0; width: 340px; z-index: 5;
background: #FFFFFF; border: 1px solid var(--color-border); border-radius: 14px;
box-shadow: var(--glass-shadow-hover);
}
.picker-search { padding: 12px 14px; border-bottom: 1px solid var(--color-border); }
.picker-search input { width: 100%; }
.picker-list { max-height: 260px; overflow-y: auto; }
.picker-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; }
.picker-item:hover { background: var(--color-sage-tint); }
.picker-item-text strong { display: block; font-size: 0.83rem; font-weight: 700; }
.picker-item-text span { display: block; font-size: 0.72rem; color: var(--color-mist); }
.picker-quickadd {
padding: 11px 14px; border-top: 1px solid var(--color-border); background: var(--color-paper);
font-size: 0.8rem; color: var(--color-primary-dark); font-weight: 700; cursor: pointer;
}
/* mpk-group-header icindeki "Urunu duzenle" dcc.Link'i (/admin/urunler'e gider)
- hicbir global `a{}` reset yok, tarayici varsayilanina (mavi/altcizili)
dusmesin diye kucuk, notr bir link stili. */
.group-source {
font-size: 0.72rem;
font-weight: 700;
color: var(--color-primary-dark);
text-decoration: none;
white-space: nowrap;
}
.group-source:hover {
text-decoration: underline;
}
/* "+ Urun Ekle" picker toggle butonu - genel `button{}` reset'i zaten pill
sekli/golgeyi veriyor (theme.css basi), burada sadece pf-gradient-btn
ailesiyle ayni yesil gradient dolguyu ve picker-anchor icinde dogru
konumu saglıyoruz. */
.add-group-btn {
background: linear-gradient(135deg, #17E6AC, var(--color-primary-dark));
display: inline-flex;
align-items: center;
gap: 6px;
}
.variant-row-live {
display: grid;
grid-template-columns: 1.4fr 0.9fr auto auto;
grid-template-areas:
"name price status del"
"tags tags tags tags";
column-gap: 12px;
row-gap: 8px;
align-items: center;
padding: 12px 14px;
}
.variant-row-live + .variant-row-live { border-top: 1px dashed var(--color-border); }
.variant-row-live .v-name { grid-area: name; width: 100%; }
.variant-row-live .v-price { grid-area: price; width: 100%; }
.variant-row-live .row-status { grid-area: status; }
.variant-row-live .row-del { grid-area: del; }
.variant-row-live .tag-input { grid-area: tags; }
.tag-input {
display: flex; flex-wrap: wrap; gap: 7px; align-items: center;
background: rgba(255, 255, 255, 0.55);
border: 1px solid rgba(15, 23, 42, 0.1);
border-radius: 12px; padding: 9px 11px; min-height: 40px;
width: 100%;
}
@media (max-width: 640px) {
.variant-row-live {
grid-template-columns: 1fr 1fr;
grid-template-areas:
"name name"
"price status"
"tags tags"
"del del";
}
.variant-row-live .row-del { justify-self: end; }
}
/* "5 TOPLAM VARYANT" bento karosuyla (.member-bento-tile.t2) ayni renk -
kullanicinin istegi (2026-08-25). */
.ftag-x {
display: inline-flex; align-items: center; gap: 7px;
font-size: 0.78rem; font-weight: 700; color: var(--color-primary-dark);
background: #E9F5A8;
border: 1px solid rgba(0, 61, 51, 0.18);
border-radius: 999px; padding: 6px 8px 6px 13px;
box-shadow: 0 2px 6px rgba(0, 61, 51, 0.08);
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.ftag-x:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0, 61, 51, 0.14); }
.ftag-x i {
font-style: normal; display: inline-flex; align-items: center; justify-content: center;
width: 17px; height: 17px; border-radius: 50%; flex-shrink: 0;
background: rgba(0, 61, 51, 0.14); color: var(--color-primary-dark);
font-size: 0.62rem; line-height: 1; cursor: pointer;
transition: background 0.15s ease, color 0.15s ease;
}
.ftag-x i:hover { background: rgba(225, 29, 72, 0.18); color: var(--color-accent-wine); }
.tag-add { border: none; background: transparent; font-size: 0.76rem; flex: 1; min-width: 110px; outline: none; }
.row-status { font-size: 0.72rem; font-weight: 700; white-space: nowrap; color: var(--color-primary-dark); }
.row-del { color: var(--color-mist); cursor: pointer; background: none; border: none; }
.mpk-item-row {
display: grid; grid-template-columns: 1.3fr 1.8fr 0.6fr auto;
gap: 10px; align-items: center; padding: 9px 14px;
}
.mpk-item-row-label { display: flex; flex-direction: column; gap: 2px; }
.mpk-price-zero-warning {
font-size: 0.7rem; font-weight: 700; color: var(--color-warning);
background: var(--color-warning-tint);
border-radius: 6px; padding: 2px 7px; width: fit-content;
}
.mpk-item-row + .mpk-item-row { border-top: 1px dashed var(--color-border); }
.mpk-item-qty-input { width: 56px; }
.flavor-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.ftag {
font-size: 0.76rem; font-weight: 700; color: var(--color-primary-dark);
background: #E9F5A8;
border: 1px solid rgba(0, 61, 51, 0.18);
border-radius: 999px; padding: 5px 12px;
}
/* ---- Islem Logu Detay Paneli (Mercan Panel bento kurallari, CLAUDE.md madde 26) ----
pf-icon-idle: madde 26'da spec edilmis ("kart basligindaki ikon ... idle'da
kendiliginden hafifce sallanip buyuyen surekli animasyon") ama "mockup, henuz
production kodunda degil" denmisti - burasi ilk gercek kullanim. */
@keyframes pf-icon-idle-sway {
0%, 100% { transform: rotate(-4deg) scale(1); }
50% { transform: rotate(4deg) scale(1.05); }
}
.pf-icon-idle { animation: pf-icon-idle-sway 3.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
.pf-icon-idle { animation: none; }
}
.aud-clickable-row { cursor: pointer; }
.aud-note-cell {
display: flex; align-items: center; gap: 6px; min-width: 0;
font-size: 0.85rem; color: var(--color-mist);
}
.aud-note-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.aud-expand-hint {
display: flex; align-items: center; gap: 3px; flex-shrink: 0;
font-size: 0.66rem; font-weight: 800; letter-spacing: 0.02em;
color: #FFFFFF; background: var(--color-primary-dark);
padding: 4px 9px; border-radius: 999px;
white-space: nowrap; transition: all 0.15s ease;
}
.aud-clickable-row:hover .aud-expand-hint,
.aud-clickable-row:focus-visible .aud-expand-hint {
background: var(--color-primary); transform: translateX(2px);
}
.aud-expand-hint-icon { width: 11px; height: 11px; flex-shrink: 0; }
.aud-detail-overlay {
position: fixed; inset: 0; z-index: 1200;
background: rgba(11, 20, 17, 0.46);
display: flex; align-items: flex-start; justify-content: center;
padding: 8vh 16px 40px;
}
.aud-detail-modal {
background: #FFFFFF;
border-radius: 18px;
box-shadow: 0 30px 60px -12px rgba(0, 25, 20, 0.35), 0 10px 24px -8px rgba(0, 25, 20, 0.2);
width: 100%; max-width: 560px; max-height: 78vh; overflow: hidden;
display: flex; flex-direction: column;
}
.aud-detail-head {
background: linear-gradient(90deg, #5FE0E8, #1EC1CB 55%, #0E8A92 100%);
padding: 18px 22px;
display: flex; align-items: center; gap: 14px;
}
/* Ayni gradient+gloss squircle dili (.member-bento-icon-big ile ayni), ama satir
ikonlarindan (teal ustunde .mb-pkg-bicon) BILINCLI olarak farkli renk ailesi
(mercan/pembe) - vurgu/dikkat cekmesi icin (madde 26). */
.aud-detail-head-icon {
position: relative;
width: 42px; height: 42px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
border-radius: 30%; overflow: hidden;
background: linear-gradient(160deg, #FF9F7A, #EF5DA8);
box-shadow:
inset 0 1.5px 1.5px rgba(255, 255, 255, 0.55),
inset 0 -8px 12px rgba(0, 0, 0, 0.14),
0 6px 14px -7px rgba(20, 32, 26, 0.4);
}
.aud-detail-head-icon::before {
content: "";
position: absolute; top: -30%; left: -10%; width: 120%; height: 65%;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0));
border-radius: 50%;
pointer-events: none;
}
.aud-detail-head-icon-mask {
position: relative; z-index: 1;
width: 20px; height: 20px;
background-color: #FFFFFF;
filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.18));
-webkit-mask-size: contain; mask-size: contain;
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-position: center; mask-position: center;
}
.aud-detail-head-title { flex: 1; min-width: 0; color: #06302E; }
.aud-detail-head-eyebrow { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.75; }
.aud-detail-head-title h3 { font-size: 16px; margin: 2px 0 0; font-weight: 700; }
.aud-detail-close {
width: 30px; height: 30px; border-radius: 8px; border: none; cursor: pointer;
background: rgba(255, 255, 255, 0.5); color: #06302E; font-size: 15px; line-height: 1;
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.aud-detail-close:hover { background: rgba(255, 255, 255, 0.75); }
.aud-detail-meta {
padding: 12px 22px; font-size: 13px; font-weight: 700; color: var(--color-secondary);
border-bottom: 1px solid var(--color-border);
}
.aud-detail-body { padding: 6px 0; overflow-y: auto; }
.aud-detail-item {
margin: 8px 14px; padding: 12px 14px; border-radius: 12px;
background: var(--mp-tint);
}
.aud-detail-item-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.aud-detail-field { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; }
.aud-detail-values { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; }
.aud-detail-value {
flex: 1; min-width: 0; padding: 7px 10px; border-radius: 8px;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; line-height: 1.5;
word-break: break-all; background: rgba(255, 255, 255, 0.6);
}
.aud-detail-value-old { text-decoration: line-through; text-decoration-color: rgba(225, 29, 72, 0.5); opacity: 0.75; }
.aud-detail-value-new { font-weight: 600; }
.aud-detail-arrow { padding-top: 8px; opacity: 0.5; flex-shrink: 0; }
/* Yasal belge sayfalari (/legal/) - herkese acik, oturum gerektirmiyor */
.legal-page { max-width: 900px; margin: 0 auto; padding: 40px 24px 80px; font-family: inherit; }
.legal-page-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.legal-nav-link {
font-size: 13px; font-weight: 600; padding: 8px 14px; border-radius: 999px;
background: #fff; border: 1px solid rgba(15, 23, 42, 0.08); color: var(--color-text-muted, #64748B);
text-decoration: none;
}
.legal-nav-link.active { background: var(--color-primary, #00BF8F); color: #fff; border-color: transparent; }
.legal-page-body { background: #fff; border-radius: 20px; padding: 36px 40px; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06); }
.legal-page-body h1 { font-size: 24px; margin-bottom: 20px; }
.legal-page-text {
white-space: pre-wrap; word-wrap: break-word; font-family: inherit; font-size: 15px;
line-height: 1.7; color: #1F2937;
}
/* Onboarding - yasal onay checkbox'lari (KVKK ayri riza kurali, 2026/347) */
.onb-legal-consents { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.onb-consent-row { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.onb-consent-row .dash-checklist { display: inline-block; }
.onb-consent-link { font-size: 12px; color: var(--color-primary, #00BF8F); text-decoration: underline; white-space: nowrap; }
/* ---- Uye akilli dock (anahtar: MEMBER_REDESIGN_USERS) ---- */
.navbar-icon-droplet { -webkit-mask-image: url(/assets/icons/droplet.svg); mask-image: url(/assets/icons/droplet.svg); }
.navbar-icon-camera { -webkit-mask-image: url(/assets/icons/camera.svg); mask-image: url(/assets/icons/camera.svg); }
.navbar-icon-check { -webkit-mask-image: url(/assets/icons/check.svg); mask-image: url(/assets/icons/check.svg); }
.smart-dock { display: none; }
@media (max-width: 991px) {
.dock-bottom.dock-smart {
background: #FFFFFF;
border: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
box-shadow: 0 14px 30px -10px rgba(17, 20, 15, 0.3);
border-radius: 24px;
padding: 8px 8px 10px;
}
.dock-bottom.dock-smart::before { display: none; }
.dock-smart .dock-item { color: #7C857F; box-shadow: none; margin-bottom: 0; transform: none; }
.dock-smart .dock-item:hover { box-shadow: none; transform: none; }
.dock-smart .dock-item .dock-item-icon { width: 22px; height: 22px; }
.dock-smart .dock-item::before {
content: "";
position: absolute;
top: 2px;
left: 50%;
width: 44px;
height: 32px;
margin-left: -22px;
border-radius: 11px;
background: transparent;
z-index: -1;
}
.dock-smart #dock-link-dashboard { color: #0E7C5F; }
.dock-smart #dock-link-appointments { color: #BE185D; }
.dock-smart #dock-link-meal-plan { color: #E8870B; }
.dock-smart #dock-link-dashboard.active::before { background: #DDF5EC; }
.dock-smart #dock-link-appointments.active::before { background: #FBD9E6; }
.dock-smart #dock-link-meal-plan.active::before { background: #FFE3B0; }
.dock-smart .dock-more-btn.active::before { background: #EEF1EA; }
.dock-smart .dock-more-btn.active { color: #4A5547; }
.dock-smart .dock-item.active .dock-item-label { color: #003D33; }
.dock-smart .smart-dock { display: flex; flex: 0 0 auto; margin: 0 4px; }
.smart-fab {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
margin-top: -40px;
padding: 0;
border: none;
background: none;
font: inherit;
font-size: 10.5px;
font-weight: 800;
color: #003D33;
cursor: pointer;
}
.smart-fab-btn {
position: relative;
width: 62px;
height: 62px;
border-radius: 21px;
border: 4px solid #FFFFFF;
background: var(--task-c, #00BF8F);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 10px 22px -8px rgba(0, 0, 0, 0.45);
transition: background-color 0.45s ease;
}
/* halka: kalan sure */
.smart-fab-btn::before {
content: "";
position: absolute;
inset: -9px;
border-radius: 26px;
padding: 3px;
background: conic-gradient(var(--task-c, #00BF8F) calc(var(--task-p, 1) * 360deg), rgba(0, 0, 0, 0.07) 0);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
pointer-events: none;
}
.smart-fab .smart-icon { width: 26px; height: 26px; background-color: var(--task-ink, #003D33); }
.smart-fab-dot {
display: none;
position: absolute;
top: -6px;
right: -6px;
width: 14px;
height: 14px;
border-radius: 50%;
background: #E11D48;
border: 3px solid #FFFFFF;
animation: smartDot 2s ease-in-out infinite;
}
#app-dock-bottom.has-dot:not(.cap-open) .smart-fab-dot { display: block; }
@keyframes smartDot { 50% { transform: scale(1.25); } }
.smart-cap {
position: absolute;
left: 6px;
right: 6px;
bottom: calc(100% + 58px);
display: flex;
align-items: center;
gap: 12px;
padding: 12px 12px 14px;
border-radius: 22px;
background: var(--task-c, #00BF8F);
color: var(--task-ink, #003D33);
box-shadow: 0 18px 30px -14px rgba(17, 20, 15, 0.45);
transform-origin: 50% 130%;
transform: translateY(14px) scale(0.4);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease, visibility 0s linear 0.45s;
}
.smart-cap::after {
content: "";
position: absolute;
left: 50%;
bottom: -7px;
margin-left: -7px;
border: 7px solid transparent;
border-bottom: 0;
border-top-color: var(--task-c, #00BF8F);
}
#app-dock-bottom.cap-open .smart-cap { transform: none; opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
.smart-cap-icon-wrap {
width: 40px;
height: 40px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.22);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.smart-cap .smart-icon { width: 20px; height: 20px; background-color: var(--task-ink, #003D33); }
.smart-cap-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.smart-cap-title { font-size: 11.5px; font-weight: 700; opacity: 0.85; }
.smart-cap-sub { font-size: 15.5px; font-weight: 800; }
.smart-cap-go {
border: none;
border-radius: 999px;
padding: 9px 14px;
background: #FFFFFF;
color: #003D33;
font: inherit;
font-size: 13px;
font-weight: 800;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
}
.smart-dock.act-link .smart-cap-done,
.smart-dock.act-done .smart-cap-link { display: none; }
.smart-cap-timer {
position: absolute;
left: 16px;
right: 16px;
bottom: 6px;
height: 3px;
border-radius: 2px;
background: rgba(255, 255, 255, 0.3);
overflow: hidden;
display: none;
}
.smart-cap-timer::after {
content: "";
display: block;
height: 100%;
background: var(--task-ink, #003D33);
transform-origin: left;
}
#app-dock-bottom.cap-open:not(.cap-manual) .smart-cap-timer { display: block; }
#app-dock-bottom.cap-open:not(.cap-manual) .smart-cap-timer::after { animation: smartTimer 3.2s linear forwards; }
@keyframes smartTimer { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.smart-fab-icon-swap { animation: smartSwap 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes smartSwap { from { transform: scale(0.5) rotate(-30deg); opacity: 0; } }
html.kb-open .dock-bottom.dock-smart { display: none; }
@media (prefers-reduced-motion: reduce) {
.smart-fab-dot, .smart-fab-icon-swap, #app-dock-bottom.cap-open:not(.cap-manual) .smart-cap-timer::after { animation: none; }
.smart-cap, .smart-fab-btn { transition: none; }
}
}
@media (max-height: 500px) and (orientation: landscape) {
.smart-fab { margin-top: -18px; }
.smart-cap { bottom: calc(100% + 34px); }
.smart-fab-btn { width: 44px; height: 44px; border-radius: 15px; }
.smart-fab-label { display: none; }
}
/* Sozlesme kopyalari (admin) */
.cc-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 6px 0; }
.cc-label { flex: 1 1 220px; }
.cc-link { font-weight: 600; text-decoration: underline; color: inherit; }
.cc-btn { padding: 6px 14px; font-size: 13px; }
/* Sozlesme okuma katmani (eski paket sayfalari) */
.lgr { position: fixed; inset: 0; z-index: 10000; display: none; align-items: center; justify-content: center; }
.lgr--open { display: flex; }
.lgr .lgr-bg { position: absolute; inset: 0; border: 0; border-radius: 0; box-shadow: none; padding: 0; margin: 0; background: rgba(17, 20, 15, .5); cursor: pointer; }
.lgr-box { position: relative; display: flex; flex-direction: column; width: 640px; max-width: calc(100% - 24px); max-height: 86%; background: #fff; color: #1B211D; border-radius: 18px; padding: 18px; gap: 12px; box-sizing: border-box; text-align: left; }
.lgr-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.lgr-title { font-weight: 800; font-size: 18px; line-height: 1.2; overflow-wrap: anywhere; }
.lgr-x { flex: none; height: 38px; padding: 0 16px; border: 0; border-radius: 10px; background: #F3F5F0; color: inherit; font: inherit; font-weight: 700; cursor: pointer; }
.lgr-text { flex: 1; min-height: 0; overflow-y: auto; padding: 12px; border-radius: 12px; background: #F8F9F6; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13.5px; line-height: 1.6; }
.lgr-link { display: inline; padding: 0; margin: 0; border: 0; border-radius: 0; box-shadow: none; background: none; font: inherit; text-decoration: underline; cursor: pointer; min-height: 0; color: inherit; }
body:has(.lgr--open) { overflow: hidden; }
/* hesap silme sayfasi */
.legal-page-body h2 { font-size: 18px; margin: 24px 0 10px; }
.legal-page-body ol { padding-left: 20px; line-height: 1.6; }
.del-page-done { padding: 12px 16px; border-radius: 12px; background: #D8F5C8; color: #0E3B24; }
.del-page-table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 8px 0 16px; }
.del-page-table th, .del-page-table td { text-align: left; padding: 9px 10px; border-bottom: 1px solid #E5E7EB; vertical-align: top; }
.del-page-table th { font-size: 12px; color: #64748B; }
.del-page-btn { display: inline-block; margin-top: 12px; padding: 10px 18px; border-radius: 12px; background: #003D33; color: #fff; font-weight: 700; text-decoration: none; }
@media (max-width: 480px) { .legal-page-body { padding: 22px 16px; } .del-page-table { font-size: 13px; } }