/* ============================================================
TEK DREAM EVENTS — Birleşik Tema & Bileşen Katmanı
tek-dream-theme.css · v1 · portal.asebo.de + tüm alt alanlar
------------------------------------------------------------
TEK KAYNAK. Her sayfa bunu çeker:
Fontlar (head'e, bu dosyadan ÖNCE):
TEMA: dark varsayılan (:root). Açık tema =
— mevcut portal-header.js mekanizmasıyla (angebotssystem.theme) birebir.
ASLA elle hex yazma; her renk var(--color-*) üstünden.
============================================================ */
/* ---------- 1) TOKENS — DARK (varsayılan) ---------- */
:root {
/* Yüzeyler */
--color-bg: #0A0A0F;
--color-surface: #14141C;
--color-surface-2: #1C1C26;
--color-raised: #22222E;
/* Çizgiler */
--color-border: #2A2A3A;
--color-border-strong: #3A3A4A;
--color-hairline: rgba(255,255,255,0.06);
/* Metin */
--color-text: #ECEAE3;
--color-text-2: #A6A6B6;
--color-text-3: #6E6E80;
/* Marka — Altın */
--color-accent: #C9A84C;
--color-accent-bright: #DABF63;
--color-accent-soft: rgba(201,168,76,0.14);
--color-accent-line: rgba(201,168,76,0.32);
--color-on-accent: #141009;
/* Semantik */
--color-success: #4FB07C; --color-success-soft: rgba(79,176,124,0.15);
--color-danger: #EF5350; --color-danger-soft: rgba(239,83,80,0.15);
--color-warn: #E0A63A; --color-warn-soft: rgba(224,166,58,0.15);
--color-info: #5B9BD5; --color-info-soft: rgba(91,155,213,0.15);
/* Gölge & yarıçap & font */
--shadow: 0 10px 34px rgba(0,0,0,0.55);
--shadow-sm: 0 2px 12px rgba(0,0,0,0.40);
--radius-sm: 8px;
--radius: 12px;
--radius-lg: 18px;
--radius-badge: 6px; /* rozet/durum/chip — pill DEĞİL, köşeli */
--font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
--font-ui: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
/* Salon renkleri — TEMADAN BAĞIMSIZ, sabit. Kaynak: venue-colors.js
SADECE rozet / sol-kenar aksanı / takvim etkinliği için. */
--venue-loewe: #000000;
--venue-antea: #9C27B0;
--venue-lobby: #E91E63;
--venue-majolie: #0D56BF;
--venue-mavie: #FF2B15;
--venue-zitadelle: #FFC107;
--venue-tekdream: #6DBE45;
--venue-tegelersee: #00BCD4;
}
/* ---------- 2) TOKENS — LIGHT () ---------- */
html.theme-light {
--color-bg: #F5F2EA;
--color-surface: #FFFFFF;
--color-surface-2: #FBF9F2;
--color-raised: #FFFFFF;
--color-border: #E7E2D6;
--color-border-strong: #D7D0BF;
--color-hairline: rgba(0,0,0,0.05);
--color-text: #1E1D1A;
--color-text-2: #5C5A52;
--color-text-3: #8C897E;
--color-accent: #9C7610;
--color-accent-bright: #B78A1C;
--color-accent-soft: rgba(156,118,16,0.11);
--color-accent-line: rgba(156,118,16,0.30);
--color-on-accent: #FFFFFF;
--color-success: #2E9E68; --color-success-soft: rgba(46,158,104,0.13);
--color-danger: #D93B36; --color-danger-soft: rgba(217,59,54,0.12);
--color-warn: #B87A12; --color-warn-soft: rgba(184,122,18,0.13);
--color-info: #2F6FB0; --color-info-soft: rgba(47,111,176,0.12);
--shadow: 0 10px 34px rgba(70,58,24,0.10);
--shadow-sm: 0 2px 12px rgba(70,58,24,0.07);
}
/* ---------- 3) TABAN / RESET ---------- */
body {
margin: 0;
background: var(--color-bg);
color: var(--color-text);
font-family: var(--font-ui);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
/* Başlıklar: Cormorant, ASLA italik (marka kuralı). */
h1, h2, h3, .display {
font-family: var(--font-display);
font-weight: 600;
font-style: normal; /* italik yasak */
letter-spacing: -0.01em;
color: var(--color-text);
}
h1 { font-size: 40px; line-height: 1.02; }
h2 { font-size: 28px; line-height: 1.08; }
h3 { font-size: 20px; line-height: 1.15; }
a { color: var(--color-accent); text-decoration: none; }
a:hover { color: var(--color-accent-bright); }
.u-label { /* küçük caps etiket */
font-size: 11px; font-weight: 700; letter-spacing: .06em;
text-transform: uppercase; color: var(--color-text-3);
}
.u-mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; }
/* ---------- 4) BUTONLAR ---------- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
height: 46px; padding: 0 22px; min-height: 44px;
border: 1px solid transparent; border-radius: var(--radius-sm);
font-family: var(--font-ui); font-size: 15px; font-weight: 700;
cursor: pointer; transition: background .15s, border-color .15s, transform .05s, color .15s;
white-space: nowrap;
}
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn-sm { height: 36px; padding: 0 14px; font-size: 13px; border-radius: var(--radius-sm); }
.btn-lg { height: 52px; padding: 0 26px; font-size: 16px; border-radius: var(--radius); }
.btn-primary { background: var(--color-accent); color: var(--color-on-accent); box-shadow: var(--shadow-sm); }
.btn-primary:hover:not(:disabled) { background: var(--color-accent-bright); transform: translateY(-1px); }
.btn-secondary { background: var(--color-surface-2); color: var(--color-text); border-color: var(--color-border-strong); font-weight: 600; }
.btn-secondary:hover:not(:disabled) { border-color: var(--color-accent); color: var(--color-accent); }
.btn-ghost { background: transparent; color: var(--color-accent); font-weight: 600; }
.btn-ghost:hover:not(:disabled) { background: var(--color-accent-soft); }
.btn-danger { background: var(--color-danger-soft); color: var(--color-danger); border-color: var(--color-danger); font-weight: 600; }
.btn-danger:hover:not(:disabled) { background: var(--color-danger); color: #fff; }
/* ---------- 5) FORM KONTROLLERİ ---------- */
.field { display: block; margin-bottom: 16px; }
.field-label {
display: block; margin-bottom: 7px;
font-size: 11px; font-weight: 700; letter-spacing: .06em;
text-transform: uppercase; color: var(--color-text-3);
}
.input, .select, .textarea {
width: 100%; box-sizing: border-box;
padding: 0 14px; height: 46px; min-height: 46px;
background: var(--color-surface-2);
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-sm);
color: var(--color-text);
font-family: var(--font-ui); font-size: 15px;
transition: border-color .15s, box-shadow .15s;
}
.textarea { height: auto; padding: 12px 14px; line-height: 1.5; resize: vertical; }
.input:focus, .select:focus, .textarea:focus {
outline: none; border-color: var(--color-accent);
box-shadow: 0 0 0 3px var(--color-accent-soft);
}
.input--error { border-color: var(--color-danger); background: var(--color-danger-soft); }
.field-error { margin-top: 6px; font-size: 12px; color: var(--color-danger); }
.field-label--error { color: var(--color-danger); }
/* ---------- 6) KARTLAR ---------- */
.card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius);
box-shadow: var(--shadow-sm);
padding: 20px;
}
.card--accent { border-left: 3px solid var(--color-accent); }
/* Salon aksanı: satır içine style="border-left-color:var(--venue-antea)" ekle
ya da venue-colors.js venueAccentStyle() üret. */
.stat-card .stat-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-3); }
.stat-card .stat-value { font-size: 36px; font-weight: 800; letter-spacing: -0.02em; margin-top: 8px; }
/* ---------- 7) ROZETLER & DURUMLAR ---------- */
.badge {
display: inline-flex; align-items: center; gap: 6px;
padding: 3px 11px; border-radius: var(--radius-badge);
font-size: 12px; font-weight: 600; line-height: 1.5;
border: 1px solid transparent;
}
/* Rol rozetleri */
.badge-role { background: var(--color-accent); color: var(--color-on-accent); text-transform: uppercase; font-weight: 700; letter-spacing: .04em; font-size: 11px; }
.badge-role-soft { background: var(--color-accent-soft); color: var(--color-accent); border-color: var(--color-accent-line); text-transform: uppercase; font-weight: 700; letter-spacing: .04em; font-size: 11px; }
.badge-role-outline { border-color: var(--color-border-strong); color: var(--color-text-2); text-transform: uppercase; font-weight: 700; letter-spacing: .04em; font-size: 11px; }
/* Durum rozetleri (nokta + renk) */
.status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 3px 11px; border-radius: var(--radius-badge); }
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status-success { color: var(--color-success); background: var(--color-success-soft); }
.status-warn { color: var(--color-warn); background: var(--color-warn-soft); }
.status-info { color: var(--color-info); background: var(--color-info-soft); }
.status-danger { color: var(--color-danger); background: var(--color-danger-soft); }
/* Salon rozeti — renk venue-colors.js'ten inline gelir (venueBadgeHTML).
Bu sınıf yalnız formu verir; rengi JS/inline set eder. */
.venue-badge {
display: inline-block; padding: 2px 9px; border-radius: var(--radius-badge);
font-size: 12px; font-weight: 600; line-height: 1.5;
border: 1px solid var(--color-border-strong); color: var(--color-text-2);
}
/* ---------- 8) UYARI BANTLARI ---------- */
.alert {
display: flex; align-items: center; gap: 12px;
padding: 14px 18px; border-radius: var(--radius-sm);
border: 1px solid; font-size: 14px; color: var(--color-text);
}
.alert-success { background: var(--color-success-soft); border-color: var(--color-success); }
.alert-info { background: var(--color-info-soft); border-color: var(--color-info); }
.alert-warn { background: var(--color-warn-soft); border-color: var(--color-warn); }
.alert-danger { background: var(--color-danger-soft); border-color: var(--color-danger); }
/* ---------- 9) TABLO ---------- */
.tds-table { width: 100%; border-collapse: collapse; background: var(--color-surface); }
.tds-table thead th {
text-align: left; padding: 13px 16px;
background: var(--color-surface-2);
border-bottom: 1px solid var(--color-border);
font-size: 11px; font-weight: 700; letter-spacing: .06em;
text-transform: uppercase; color: var(--color-text-3);
}
.tds-table tbody td {
padding: 15px 16px; border-bottom: 1px solid var(--color-hairline);
font-size: 14px; color: var(--color-text);
}
.tds-table tbody tr:last-child td { border-bottom: 0; }
.tds-table .num { font-variant-numeric: tabular-nums; color: var(--color-text-2); }