/* ============================================================================
anket.css — anket.oneteamglobal.ai
İki katman:
① TABAN (bu blok): referans sitedeki tailwind/shadcn bileşenlerinin (düğme,
giriş alanı, sekme, onay kutusu, radyo, ilerleme, OTP) aynı görünümü
veren el yazımı karşılığı + tarayıcı sıfırlaması (preflight).
② ÖZEL: referans sitenin kendi stil dosyası (renk, ölçü, kırılımlar) —
birebir alındı; sınıf adları anket.js'teki DOM ile aynı.
========================================================================== */
/* ---- sıfırlama (tailwind preflight'ın burada gereken kısmı) ---- */
*, ::before, ::after { box-sizing: border-box; border: 0 solid; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; tab-size: 4; }
h1, h2, h3, h4 { font-size: inherit; font-weight: inherit; }
a { color: inherit; text-decoration: inherit; }
b, strong { font-weight: bolder; }
small { font-size: 80%; }
img, svg { display: block; vertical-align: middle; }
img { max-width: 100%; height: auto; }
ol, ul { list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; background: transparent; border-radius: 0; letter-spacing: inherit; }
button { cursor: pointer; appearance: none; }
textarea { resize: vertical; }
::placeholder { color: var(--muted-foreground); opacity: 1; }
fieldset { min-width: 0; }
legend { padding: 0; }
summary { display: list-item; }
[hidden] { display: none !important; }
svg.lucide { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* ---- düğme (shadcn Button: default / outline / ghost) ---- */
.btn {
display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; gap: 8px;
height: 36px; padding: 8px 16px; border-radius: calc(var(--radius) - 2px);
font-size: 14px; line-height: 20px; font-weight: 500; white-space: nowrap;
background: var(--primary); color: var(--primary-foreground);
transition: color .15s, background-color .15s, border-color .15s, box-shadow .15s, opacity .15s;
outline: none;
}
.btn:has(> svg) { padding-inline: 12px; }
.btn:hover { background: color-mix(in oklab, var(--primary) 90%, transparent); }
.btn:disabled { pointer-events: none; opacity: .5; }
.btn:focus-visible { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent); }
.btn svg { pointer-events: none; flex-shrink: 0; width: 16px; height: 16px; }
/* Tailwind v4'te `border` sınıfının rengi currentColor'dır (referansta çerçeve koyu görünür). */
.btn-outline { border: 1px solid currentColor; background: var(--background); color: var(--foreground); box-shadow: 0 1px 2px 0 rgb(0 0 0 / .05); }
.btn-outline:hover { background: var(--accent); color: var(--accent-foreground); }
.btn-ghost { background: transparent; color: var(--foreground); }
.btn-ghost:hover { background: var(--accent); color: var(--accent-foreground); }
/* ---- giriş alanı / metin alanı ---- */
.inp {
display: block; height: 36px; width: 100%; min-width: 0; padding: 4px 12px;
border: 1px solid var(--input); border-radius: calc(var(--radius) - 2px);
font-size: 16px; line-height: 24px; box-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);
transition: color .15s, box-shadow .15s; outline: none;
}
.ta {
display: flex; min-height: 64px; width: 100%; padding: 8px 12px;
border: 1px solid var(--input); border-radius: calc(var(--radius) - 2px);
font-size: 16px; line-height: 24px; box-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);
transition: color .15s, box-shadow .15s; outline: none; field-sizing: content;
}
.inp:focus-visible, .ta:focus-visible { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent); }
.inp:disabled, .ta:disabled { cursor: not-allowed; opacity: .5; }
@media (min-width: 768px) { .inp, .ta { font-size: 14px; line-height: 20px; } }
/* ---- onay kutusu (button[role=checkbox]) ---- */
.cb {
display: grid; place-content: center; width: 16px; height: 16px; flex-shrink: 0;
border: 1px solid var(--input); border-radius: 4px; box-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);
transition: box-shadow .15s; outline: none; color: inherit;
}
.cb:focus-visible { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent); }
.cb:disabled { cursor: not-allowed; opacity: .5; }
.cb[data-state="checked"] { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); }
.cb > svg { width: 14px; height: 14px; display: none; pointer-events: none; }
.cb[data-state="checked"] > svg { display: block; }
/* ---- radyo (button[role=radio]) ---- */
.rd {
position: relative; display: grid; place-content: center; width: 16px; height: 16px; flex-shrink: 0; aspect-ratio: 1;
border: 1px solid var(--input); border-radius: 50%; box-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);
color: var(--primary); transition: color .15s, box-shadow .15s; outline: none;
}
.rd:focus-visible { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent); }
.rd > svg { width: 8px; height: 8px; fill: var(--primary); stroke: none; display: none; pointer-events: none; }
.rd[data-state="checked"] > svg { display: block; }
/* ---- ilerleme çubuğu ---- */
.prog { position: relative; display: block; width: 100%; height: 8px; overflow: hidden; border-radius: 9999px; background: color-mix(in oklab, var(--primary) 20%, transparent); }
.prog > span { display: block; width: 100%; height: 100%; background: var(--primary); transition: transform .3s; }
/* ---- sekmeler ---- */
[data-slot="tabs"] { display: flex; flex-direction: column; gap: 8px; }
[data-slot="tabs-list"] {
display: inline-flex; width: fit-content; height: 36px; align-items: center; justify-content: center;
padding: 3px; border-radius: var(--radius); background: var(--muted); color: var(--muted-foreground);
}
[data-slot="tabs-trigger"] {
position: relative; display: inline-flex; flex: 1; height: calc(100% - 1px); align-items: center; justify-content: center; gap: 6px;
padding: 4px 8px; border: 1px solid transparent; border-radius: calc(var(--radius) - 2px);
font-size: 14px; line-height: 20px; font-weight: 500; white-space: nowrap;
color: color-mix(in oklab, var(--foreground) 60%, transparent); transition: color .15s, background-color .15s, box-shadow .15s;
}
[data-slot="tabs-trigger"]:hover { color: var(--foreground); }
[data-slot="tabs-trigger"][data-state="active"] { background: var(--background); color: var(--foreground); box-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1); }
[data-slot="tabs-trigger"] svg { width: 16px; height: 16px; flex-shrink: 0; pointer-events: none; }
[data-slot="tabs-content"] { flex: 1; outline: none; }
/* ---- tek kullanımlık kod (OTP) ---- */
[data-slot="input-otp"] { position: relative; display: flex; align-items: center; gap: 8px; cursor: text; user-select: none; }
[data-slot="input-otp-group"] { display: flex; align-items: center; }
[data-slot="input-otp-slot"] {
position: relative; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px;
border-top: 1px solid var(--input); border-bottom: 1px solid var(--input); border-right: 1px solid var(--input);
font-size: 14px; box-shadow: 0 1px 2px 0 rgb(0 0 0 / .05); transition: box-shadow .15s, border-color .15s; outline: none;
}
[data-slot="input-otp-slot"]:first-child { border-left: 1px solid var(--input); border-top-left-radius: calc(var(--radius) - 2px); border-bottom-left-radius: calc(var(--radius) - 2px); }
[data-slot="input-otp-slot"]:last-child { border-top-right-radius: calc(var(--radius) - 2px); border-bottom-right-radius: calc(var(--radius) - 2px); }
[data-slot="input-otp-slot"][data-active="true"] { z-index: 10; border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent); }
.otp-caret { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.otp-caret > i { display: block; width: 1px; height: 16px; background: var(--foreground); animation: caret-blink 1s ease-out infinite; }
.otp-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; font-family: monospace; }
@keyframes caret-blink { 0%, 70%, to { opacity: 1; } 20%, 50% { opacity: 0; } }
/* ============================================================================
② ÖZEL — referans sitenin stil dosyası
========================================================================== */
:root {
--background: #fcfcfd;
--foreground: #182f3c;
--card: #fff;
--card-foreground: #182f3c;
--popover: #fff;
--popover-foreground: #182f3c;
--primary: #174656;
--primary-foreground: #fff;
--secondary: #eef3f5;
--secondary-foreground: #183a47;
--muted: #f2f5f7;
--muted-foreground: #5c6c76;
--accent: #e9f1f3;
--accent-foreground: #174656;
--destructive: #b62c37;
--border: #d8e0e5;
--input: #bbc9d0;
--ring: #43899a;
--chart-1: #174656;
--chart-2: #347b8d;
--chart-3: #bf9953;
--radius: 0.75rem;
}
* {
box-sizing: border-box;
}
body {
background: var(--background);
color: var(--foreground);
margin: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 1.65;
}
button,
a,
input,
textarea,
summary {
-webkit-tap-highlight-color: transparent;
}
button,
summary {
cursor: pointer;
}
h1,
h2,
h3,
p {
margin: 0;
}
a {
color: inherit;
}
:is(button:focus-visible, a:focus-visible, summary:focus-visible) {
outline-offset: 5px;
outline: 3px solid #5197aa;
}
h1:focus {
outline: none;
}
.app-shell {
grid-template-columns: minmax(285px, 31%) minmax(0, 1fr);
min-height: 100vh;
display: grid;
}
.journey-panel {
color: #fff;
background: #000;
flex-direction: column;
height: 100vh;
min-height: 700px;
padding: 44px clamp(28px, 3.6vw, 65px);
display: flex;
position: sticky;
top: 0;
overflow: hidden;
}
.brand-logo {
background: #000;
border-radius: 8px;
flex-shrink: 0;
display: block;
position: relative;
overflow: hidden;
}
.brand-logo img {
width: 140%;
max-width: none;
height: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.desktop-logo {
width: 190px;
height: 136px;
}
.mobile-logo {
width: 108px;
height: 76px;
}
.admin-logo {
width: 120px;
height: 84px;
}
.eyebrow {
letter-spacing: 0.15em;
color: #376575;
margin-bottom: 22px;
font-size: 0.75rem;
font-weight: 700;
display: block;
}
em {
font-family:
Georgia,
Times New Roman,
serif;
font-weight: 400;
}
.journey-heading {
margin-top: 42px;
}
.journey-heading .eyebrow {
color: #bacbd3;
margin-bottom: 0;
font-size: 13px;
}
.journey-nav {
gap: 18px;
margin-top: 32px;
display: grid;
}
.journey-step {
color: #b0c2cc;
align-items: center;
gap: 15px;
display: flex;
}
.journey-step > span {
border: 1px solid #49606d;
border-radius: 50%;
place-items: center;
width: 35px;
height: 35px;
font-size: 13px;
display: grid;
}
.journey-step strong {
font-size: 14px;
font-weight: 400;
}
.journey-step.current {
color: #fff;
}
.journey-step.current > span {
color: #112c3a;
background: #e0c78b;
border-color: #e0c78b;
font-weight: 700;
}
.journey-step.current strong {
font-weight: 700;
}
.journey-step.complete > span {
color: #e0c78b;
}
.journey-bottom {
margin-top: auto;
padding-top: 44px;
}
.journey-bottom span {
color: #b4c5cf;
letter-spacing: 0.12em;
font-size: 13px;
}
.journey-bottom p {
color: #b4c5cf;
margin-top: 8px;
font-size: 14px;
}
.main-panel {
min-width: 0;
padding: 35px clamp(24px, 5.2vw, 90px) 22px;
}
.mobile-brand {
display: none;
}
.topbar {
color: #5d6d76;
justify-content: space-between;
align-items: center;
gap: 16px;
font-size: 14px;
display: flex;
}
.topbar > span:last-child {
align-items: center;
gap: 7px;
display: flex;
}
.step-progress {
background: #e1e8eb;
border-radius: 0;
height: 3px;
margin-top: 18px;
}
.content {
max-width: 710px;
margin: 62px auto 0;
animation: 0.35s both appear;
}
.content.wide {
max-width: 800px;
margin-top: 44px;
}
h1 {
letter-spacing: -0.045em;
margin-bottom: 28px;
font-size: clamp(36px, 3.9vw, 59px);
font-weight: 500;
line-height: 1.1;
}
h1 em {
color: #2c6976;
letter-spacing: -0.04em;
}
.lead {
color: #405865;
margin-bottom: 21px;
font-size: 18px;
line-height: 1.8;
}
.welcome > p:not(.lead) {
color: #566a75;
font-size: 16px;
}
.welcome > p strong {
color: #243f4e;
font-weight: 500;
}
.welcome h1 {
letter-spacing: -0.035em;
font-size: clamp(35px, 3.3vw, 51px);
font-weight: 500;
line-height: 1.19;
}
.welcome-closing {
margin-top: 22px;
}
.welcome .authority-note {
border-top: 1px solid #e0e7eb;
padding-top: 23px;
}
.authority-note {
color: #5d707c;
gap: 12px;
margin-top: 28px;
font-size: 14px;
line-height: 1.7;
display: flex;
}
.authority-note svg {
flex-shrink: 0;
margin-top: 3px;
}
.authority-note strong {
color: #314e5c;
font-weight: 600;
}
.actions {
border-top: 1px solid #e4eaee;
justify-content: space-between;
align-items: center;
gap: 14px;
margin-top: 34px;
padding-top: 24px;
display: flex;
}
.primary-button {
white-space: normal;
border-radius: 10px;
gap: 18px;
height: auto;
min-height: 52px;
padding: 15px 23px;
font-size: 16px;
font-weight: 600;
}
.primary-button svg {
width: 18px;
height: 18px;
}
.back-button {
color: #576d79;
height: 48px;
padding: 14px 6px;
font-size: 15px;
}
.secondary-button {
height: 49px;
margin-top: 25px;
padding: 0 22px;
font-size: 16px;
}
.first-step-note {
color: #6c7f89;
font-size: 14px;
}
.content-footer {
letter-spacing: 0.04em;
color: #6a7b85;
justify-content: space-between;
gap: 15px;
margin-top: 44px;
padding-bottom: 5px;
font-size: 13px;
font-weight: 700;
display: flex;
}
.content-footer span {
letter-spacing: 0;
font-weight: 400;
}
.roadmap {
grid-template-columns: minmax(0, 1fr);
gap: 16px;
margin: 30px 0 48px;
display: grid;
}
.roadmap > div {
background: #f5f8fa;
border: 1px solid #d9e3e8;
border-left: 3px solid #cadbe1;
border-radius: 12px;
padding: 24px 28px;
}
.roadmap > div:first-child {
border-left-color: #b89a52;
}
.roadmap span {
color: #5e808e;
margin-bottom: 8px;
font-size: 14px;
display: block;
}
.roadmap strong {
margin: 0 0 8px;
font-size: 24px;
font-weight: 600;
line-height: 1.35;
display: block;
}
.roadmap p {
color: #5c707b;
margin: 0;
font-size: 16px;
line-height: 1.6;
}
.roadmap + .section-title {
color: #566d79;
border-top: 1px solid #e2e9ed;
padding-top: 30px;
font-size: 19px;
}
.section-title {
letter-spacing: -0.02em;
margin-bottom: 17px;
font-size: 22px;
font-weight: 600;
}
.definitions > div {
border-bottom: 1px solid #e2e9ed;
gap: 17px;
padding: 19px 0;
display: flex;
}
.definitions > div > svg {
color: #3d6d7c;
flex-shrink: 0;
width: 22px;
height: 22px;
margin-top: 3px;
}
.definitions h3 {
font-size: 17px;
font-weight: 600;
}
.definitions p {
color: #5a6f7b;
margin-top: 4px;
font-size: 15px;
line-height: 1.65;
}
.definitions details {
margin-top: 9px;
}
.definitions summary {
color: #2f6274;
align-items: center;
gap: 6px;
font-size: 14px;
list-style: none;
display: flex;
}
.definitions summary::-webkit-details-marker {
display: none;
}
.intro {
color: #5a707e;
margin-bottom: 26px;
font-size: 16px;
}
.model-list {
gap: 16px;
}
.model-card {
background: #fff;
border: 1px solid #d6e1e6;
border-radius: 16px;
transition:
border-color 0.15s,
box-shadow 0.15s;
overflow: hidden;
}
.model-card:hover {
border-color: #789faa;
}
.model-card.selected {
border: 2px solid #2b6b7d;
box-shadow: 0 4px 18px #1746560a;
}
.model-choice {
cursor: pointer;
align-items: flex-start;
gap: 16px;
padding: 23px 23px 12px;
display: flex;
}
.option-letter {
color: #4d6e7c;
background: #edf2f5;
border-radius: 9px;
flex-shrink: 0;
place-items: center;
width: 36px;
height: 36px;
font-size: 17px;
font-weight: 700;
display: grid;
}
.selected .option-letter {
color: #fff;
background: #174656;
}
.model-choice h2 {
letter-spacing: -0.025em;
font-size: 20px;
font-weight: 600;
line-height: 1.4;
}
.model-choice p {
color: #5e737f;
margin-top: 8px;
font-size: 15px;
line-height: 1.65;
}
.choice-radio {
width: 22px;
height: 22px;
margin-top: 5px;
margin-left: auto;
}
.model-details {
padding: 0 25px 22px 75px;
}
.role-line {
color: #376778;
margin-bottom: 14px;
font-size: 14px;
font-weight: 600;
}
.schedule-line {
color: #405e6d;
border-top: 1px solid #e4ebef;
align-items: flex-start;
gap: 9px;
padding-top: 13px;
font-size: 14px;
display: flex;
}
.schedule-line svg {
flex-shrink: 0;
margin-top: 3px;
}
.threshold {
color: #566f7d;
margin-top: 11px;
font-size: 14px;
line-height: 1.6;
}
.model-foot {
color: #677e8c;
margin-top: 11px;
font-size: 14px;
}
.schedule-options {
background: #f0f6f7;
border-top: 1px solid #cddde2;
padding: 21px 25px;
}
.schedule-options h3 {
margin-bottom: 14px;
font-size: 16px;
font-weight: 600;
}
.schedule-choice {
cursor: pointer;
background: #fff;
border: 1px solid #d4e0e5;
border-radius: 10px;
align-items: flex-start;
gap: 12px;
padding: 15px;
display: flex;
}
.schedule-choice.chosen {
border-color: #35768a;
}
.schedule-choice > button {
margin-top: 5px;
}
.schedule-choice strong {
font-size: 14px;
font-weight: 600;
}
.schedule-choice p {
color: #627783;
margin-top: 4px;
font-size: 14px;
}
.muted {
color: #617582;
margin-top: 21px;
}
.small {
font-size: 14px;
}
.review-card {
background: #f1f6f7;
border: 1px solid #cddde3;
border-radius: 14px;
margin-bottom: 29px;
padding: 22px 24px;
}
.mini-label {
color: #3f6b7a;
letter-spacing: 0.08em;
font-size: 13px;
font-weight: 700;
}
.review-card h3 {
margin: 10px 0;
font-size: 20px;
font-weight: 600;
line-height: 1.4;
}
.review-card p {
color: #4a6877;
align-items: flex-start;
gap: 10px;
font-size: 15px;
display: flex;
}
.review-card svg {
flex-shrink: 0;
margin-top: 3px;
}
.review-top {
justify-content: space-between;
align-items: center;
gap: 12px;
display: flex;
}
.review-top button {
color: #2b687b;
text-underline-offset: 3px;
font-size: 14px;
text-decoration: underline;
}
.field-row {
grid-template-columns: 1fr 1fr;
gap: 18px;
display: grid;
}
.field label {
margin-bottom: 9px;
font-size: 14px;
font-weight: 600;
display: block;
}
.field input {
background: #fff;
border-radius: 9px;
height: 50px;
font-size: 16px;
}
.field textarea {
background: #fff;
border-radius: 10px;
padding: 14px;
font-size: 16px;
line-height: 1.6;
}
.field-hint {
color: #6a7f8b;
margin-top: 10px;
font-size: 14px;
}
.comment-field {
margin-top: 28px;
}
.comment-field label span {
color: #6b808b;
margin-left: 5px;
font-size: 14px;
font-weight: 400;
}
.counter {
text-align: right;
color: #758895;
margin-top: 4px;
font-size: 13px;
display: block;
}
.eligibility {
cursor: pointer;
color: #466270;
align-items: flex-start;
gap: 12px;
margin-top: 26px;
font-size: 14px;
line-height: 1.7;
display: flex;
}
.eligibility > button {
flex-shrink: 0;
width: 20px;
height: 20px;
margin-top: 4px;
}
.error-message {
color: #9b2e3c;
background: #fff0f0;
border: 1px solid #ebc5c8;
border-radius: 9px;
margin-top: 22px;
padding: 14px 17px;
font-size: 15px;
}
.success-symbol {
color: #31745d;
background: #e8f3ef;
border-radius: 50%;
place-items: center;
width: 78px;
height: 78px;
margin-bottom: 28px;
display: grid;
}
.success-screen h1 {
font-size: 46px;
}
.receipt {
color: #70848e;
margin-top: 24px;
font-size: 13px;
}
.admin-page {
max-width: 1200px;
margin: auto;
padding: 26px 35px 70px;
}
.admin-header {
border-bottom: 1px solid #dce4e8;
justify-content: space-between;
align-items: center;
padding: 10px 0 28px;
display: flex;
}
.admin-brand {
letter-spacing: 0.06em;
font-size: 23px;
text-decoration: none;
}
.admin-header > span {
color: #5f7785;
align-items: center;
gap: 8px;
font-size: 14px;
display: flex;
}
.admin-title {
justify-content: space-between;
align-items: flex-end;
gap: 20px;
margin: 42px 0 30px;
display: flex;
}
.admin-title h1 {
margin-bottom: 10px;
font-size: 40px;
}
.admin-title .eyebrow {
margin-bottom: 13px;
}
.admin-title p {
color: #647c88;
}
.admin-tools {
gap: 10px;
display: flex;
}
.admin-tools button {
height: 43px;
font-size: 14px;
}
.admin-login {
background: #fff;
border: 1px solid #d9e4e8;
border-radius: 16px;
gap: 17px;
max-width: 500px;
padding: 28px;
display: grid;
}
.admin-login h2 {
font-size: 23px;
}
.admin-login p {
color: #657b87;
}
.admin-login input,
.admin-login button {
min-height: 46px;
}
.stats-head {
align-items: center;
gap: 24px;
margin: 32px 0;
display: flex;
}
.stats-head > strong {
color: #245f72;
font-size: 64px;
font-weight: 500;
}
.stats-head h2 {
font-size: 22px;
}
.stats-head p {
color: #617785;
font-size: 14px;
}
.model-stats {
grid-template-columns: repeat(3, 1fr);
gap: 18px;
display: grid;
}
.model-stats section {
background: #fff;
border: 1px solid #dce5e9;
border-radius: 14px;
padding: 24px;
}
.stat-letter {
color: #316c7e;
font-size: 16px;
font-weight: 700;
}
.model-stats h2 {
min-height: 55px;
margin-top: 10px;
font-size: 18px;
line-height: 1.5;
}
.stat-number {
justify-content: space-between;
align-items: center;
margin: 18px 0;
display: flex;
}
.stat-number b {
font-size: 35px;
font-weight: 500;
}
.stat-number span {
color: #627e8b;
}
.schedule-stats {
background: #edf3f5;
border-radius: 14px;
margin: 30px 0;
padding: 25px;
}
.schedule-stats h2 {
margin-bottom: 18px;
font-size: 20px;
}
.schedule-stats > div {
border-top: 1px solid #d5e1e6;
justify-content: space-between;
align-items: center;
gap: 18px;
padding: 12px 0;
font-size: 15px;
display: flex;
}
.schedule-stats strong {
white-space: nowrap;
}
.response-heading {
justify-content: space-between;
align-items: center;
gap: 20px;
margin: 36px 0 20px;
display: flex;
}
.response-heading h2 {
font-size: 22px;
}
.response-heading input {
max-width: 320px;
height: 45px;
font-size: 16px;
}
.responses-list {
gap: 15px;
display: grid;
}
.responses-list article {
background: #fff;
border: 1px solid #dbe5e9;
border-radius: 14px;
padding: 25px;
}
.response-header {
justify-content: space-between;
align-items: flex-start;
gap: 20px;
margin-bottom: 15px;
display: flex;
}
.response-header h3 {
font-size: 18px;
font-weight: 600;
}
.response-header span,
.response-header time {
color: #68818e;
overflow-wrap: anywhere;
font-size: 14px;
}
.response-model {
font-size: 16px;
}
.responses-list article > p {
color: #587480;
margin-top: 6px;
font-size: 15px;
}
.responses-list blockquote {
white-space: pre-wrap;
overflow-wrap: anywhere;
background: #f3f6f8;
border-left: 3px solid #b59b63;
margin: 18px 0 0;
padding: 16px 20px;
font-size: 16px;
}
.empty-responses {
text-align: center;
color: #587481;
border: 1px dashed #bfcfd7;
border-radius: 14px;
padding: 40px;
}
@keyframes appear {
0% {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@media (min-width: 1600px) {
.content {
margin-top: 85px;
}
}
@media (max-width: 1000px) {
.journey-panel {
padding: 32px 26px;
}
.main-panel {
padding: 30px;
}
.content {
margin-top: 43px;
}
.role-line {
font-size: 13px;
}
.field-row {
grid-template-columns: 1fr;
}
}
@media (max-width: 760px) {
.app-shell {
display: block;
}
.journey-panel {
display: none;
}
.main-panel {
padding: 0 22px 22px;
}
.mobile-brand {
color: #fff;
background: #000;
justify-content: space-between;
align-items: center;
height: 104px;
margin: 0 -22px 24px;
padding: 0 22px;
display: flex;
}
.mobile-brand > span:first-child {
letter-spacing: 0.06em;
font-size: 22px;
}
.mobile-brand > span:last-child {
color: #dac68e;
font-size: 13px;
}
.topbar {
gap: 8px;
font-size: 13px;
}
.topbar > span:last-child {
gap: 5px;
}
.content,
.content.wide {
margin-top: 34px;
}
h1 {
font-size: 42px;
line-height: 1.13;
}
.lead {
font-size: 17px;
line-height: 1.75;
}
.eyebrow {
margin-bottom: 17px;
font-size: 13px;
}
.welcome h1 {
font-size: 36px;
line-height: 1.2;
}
.authority-note {
margin-top: 24px;
font-size: 14px;
}
.actions {
margin-top: 27px;
padding-top: 21px;
}
.first-step-note {
max-width: 115px;
font-size: 13px;
}
.primary-button {
gap: 12px;
padding: 14px 19px;
font-size: 15px;
}
.content-footer {
margin-top: 35px;
font-size: 12px;
}
.content-footer span {
text-align: right;
max-width: 190px;
}
.roadmap {
gap: 14px;
margin: 27px 0 38px;
}
.roadmap > div {
padding: 20px;
}
.roadmap strong {
font-size: 21px;
}
.roadmap p {
font-size: 15px;
}
.model-choice {
gap: 11px;
padding: 18px 16px 12px;
}
.option-letter {
width: 29px;
height: 29px;
font-size: 14px;
}
.model-choice h2 {
font-size: 18px;
}
.model-choice p {
font-size: 14px;
}
.choice-radio {
width: 20px;
height: 20px;
margin-top: 4px;
}
.model-details {
padding: 0 17px 19px 56px;
}
.role-line {
font-size: 13px;
line-height: 1.65;
}
.schedule-line {
font-size: 14px;
}
.model-foot {
font-size: 13px;
}
.threshold {
font-size: 14px;
}
.schedule-options {
padding: 19px 16px;
}
.schedule-options h3 {
font-size: 15px;
}
.schedule-choice {
gap: 10px;
padding: 13px 11px;
}
.review-card {
padding: 19px;
}
.review-card h3 {
font-size: 19px;
}
.field-row {
grid-template-columns: 1fr;
gap: 18px;
}
.success-screen h1 {
font-size: 37px;
}
.admin-page {
padding: 20px;
}
.admin-title {
flex-direction: column;
align-items: flex-start;
}
.admin-title h1 {
font-size: 35px;
}
.model-stats {
grid-template-columns: 1fr;
}
.model-stats h2 {
min-height: 0;
}
.stat-number {
margin: 12px 0;
}
.response-heading {
flex-direction: column;
align-items: flex-start;
}
.response-heading input {
max-width: none;
}
.response-header {
flex-direction: column;
gap: 4px;
}
.stats-head {
gap: 17px;
}
.stats-head h2 {
font-size: 18px;
}
.stats-head > strong {
font-size: 55px;
}
}
@media (prefers-reduced-motion: reduce) {
* {
scroll-behavior: auto !important;
transition: none !important;
animation: none !important;
}
}
.amare-council-note {
border-top: 1px solid #dce5e9;
margin-top: 16px;
padding-top: 16px;
}
.amare-council-note strong {
color: #243f4e;
margin-bottom: 5px;
font-size: 14px;
font-weight: 600;
display: block;
}
.amare-council-note p {
color: #566d79;
margin: 0;
font-size: 14px;
line-height: 1.65;
}
.rejection-screen > .eyebrow,
.rejection-screen > h1 {
color: #a82932;
}
.rejection-instruction {
color: #922632;
background: #fff1f2;
border: 1px solid #e9b6bc;
border-radius: 12px;
gap: 12px;
margin: 24px 0;
padding: 18px 20px;
font-size: 16px;
display: flex;
}
.rejection-instruction svg {
flex-shrink: 0;
margin-top: 3px;
}
.rejection-instruction strong {
margin-bottom: 4px;
display: block;
}
.rejection-screen .model-card.rejected {
background: #fff4f4;
border: 2px solid #b62e3c;
}
.rejected .option-letter {
color: #fff;
background: #ad2836;
}
.rejected .choice-radio {
color: #b62e3c;
background: #ffe4e7;
border-color: #b62e3c;
}
.rejection-badge {
color: #fff;
background: #a82932;
border-radius: 6px;
align-items: center;
gap: 7px;
margin-top: 12px;
padding: 6px 10px;
font-size: 14px;
font-weight: 600;
display: inline-flex;
}
.rejection-reason {
margin-top: 28px;
}
.rejection-reason > label {
color: #a82932;
}
.rejection-model-name {
color: #8e3540;
margin: 0 0 10px;
font-size: 14px;
}
.voting-purpose {
color: #596f7b;
border-top: 1px solid #dde5e9;
margin-top: 28px;
padding-top: 22px;
font-size: 14px;
}
.voting-purpose p {
margin-top: 9px;
}
.eliminated-summary,
.review-rejection {
color: #94333d;
background: #fff4f4;
border: 1px solid #e8c2c7;
border-radius: 12px;
margin: 20px 0;
padding: 18px 22px;
}
.eliminated-summary > span {
letter-spacing: 0.04em;
margin-bottom: 6px;
font-size: 13px;
display: block;
}
.eliminated-summary > strong {
font-size: 15px;
display: block;
}
.eliminated-summary > button {
cursor: pointer;
margin-top: 9px;
font-size: 14px;
text-decoration: underline;
}
.review-rejection h3 {
margin: 10px 0;
font-size: 18px;
font-weight: 600;
}
.review-rejection p,
.response-rejection p {
white-space: pre-wrap;
overflow-wrap: anywhere;
font-size: 15px;
}
.review-rejection .mini-label {
color: #94333d;
}
.rejection-stat {
color: #a82932;
border-top: 1px solid #e7d3d5;
gap: 4px;
margin-top: 16px;
padding-top: 14px;
font-size: 14px;
display: grid;
}
.rejection-stat span {
color: #765761;
font-size: 13px;
}
.response-rejection {
color: #94333d;
background: #fff4f4;
border-left: 3px solid #b62e3c;
margin: 16px 0;
padding: 10px 15px;
}
.response-rejection strong {
font-size: 14px;
}
.roadmap p.roadmap-voting {
margin-top: 10px;
font-size: 14px;
}
.rejected .choice-radio svg {
fill: #b62e3c;
}
.rejection-badge {
padding: 10px 14px;
font-size: 18px;
font-weight: 800;
}
.survey-status {
color: #3b5968;
background: #f2f6f8;
border-left: 3px solid #b79c61;
border-radius: 8px;
gap: 5px;
margin: 18px 0;
padding: 13px 16px;
font-size: 14px;
display: grid;
}
.survey-status strong {
color: #253f4c;
}
.survey-utility {
color: #33677a;
justify-content: flex-end;
gap: 20px;
margin: 14px 0;
font-size: 14px;
display: flex;
}
.survey-utility a,
.survey-utility button {
cursor: pointer;
text-decoration: underline;
}
.journey-bottom a {
color: #e1ca96;
margin-bottom: 14px;
display: block;
}
.welcome-actions {
border-top: 1px solid #dce5e9;
flex-direction: column;
gap: 24px;
margin-top: 30px;
padding-top: 28px;
display: flex;
}
.welcome-edit-note {
color: #405c69;
gap: 12px;
font-size: 14px;
line-height: 1.65;
display: flex;
}
.welcome-edit-note > svg {
color: #517784;
flex-shrink: 0;
margin-top: 3px;
}
.welcome-edit-note > div > strong {
color: #233f4e;
margin-bottom: 5px;
font-size: 16px;
display: block;
}
.welcome-edit-note p strong {
font-weight: 600;
}
.welcome-start > .primary-button {
justify-content: center;
gap: 14px;
width: 100%;
min-height: 56px;
}
.welcome-start > p {
text-align: center;
color: #5c717b;
max-width: 540px;
margin: 10px auto 0;
font-size: 14px;
line-height: 1.65;
}
.welcome-return {
border-top: 1px solid #e1e8eb;
justify-content: space-between;
align-items: center;
gap: 16px;
padding-top: 22px;
display: flex;
}
.welcome-return > p {
color: #5c717b;
font-size: 14px;
}
.welcome-return > button {
color: #315a6a;
border-color: #bfced5;
flex-shrink: 0;
min-height: 44px;
padding: 10px 18px;
}
@media (max-width: 480px) {
.welcome-return {
flex-direction: column;
align-items: stretch;
gap: 10px;
}
.welcome-return > p {
text-align: center;
}
}
.public-intro-note {
background: #f3f7f8;
border-radius: 8px;
padding: 14px 16px;
font-size: 14px !important;
}
.saved-actions {
flex-wrap: wrap;
align-items: center;
gap: 20px;
display: flex;
}
.saved-actions > a {
color: #2f687b;
text-decoration: underline;
}
.legacy-consent {
background: #faf7ee;
border: 1px solid #d4c6a8;
border-radius: 12px;
margin: 22px 0;
padding: 20px;
}
.legacy-consent > p {
color: #5c6b73;
margin-top: 10px;
}
.public-consent {
background: #f1f6f7;
border-radius: 8px;
padding: 16px;
}
.email-verification .field {
margin-bottom: 22px;
}
.otp-field {
margin-top: 26px;
}
.otp-field [data-slot="input-otp-slot"] {
width: 44px;
height: 52px;
font-size: 24px;
}
.verification-links {
color: #276276;
flex-wrap: wrap;
gap: 20px;
margin-top: 14px;
font-size: 14px;
display: flex;
}
.verification-links button {
cursor: pointer;
text-decoration: underline;
}
.public-results {
width: min(1080px, 100%);
margin: 0 auto;
padding: 28px 30px 60px;
}
.public-header {
color: #ead79e;
background: #000;
border-radius: 14px;
justify-content: space-between;
align-items: center;
margin-bottom: 40px;
padding: 14px 24px;
display: flex;
}
.public-results h1 {
font-size: 42px;
}
.public-toolbar {
justify-content: space-between;
align-items: center;
gap: 18px;
margin: 26px 0;
display: flex;
}
.public-models {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
display: grid;
}
.public-models article {
background: #fff;
border: 1px solid #d3e0e6;
border-radius: 14px;
padding: 22px;
}
.public-models h2 {
min-height: 105px;
margin: 12px 0 18px;
font-size: 17px;
font-weight: 600;
line-height: 1.5;
}
.public-models article > div {
color: #225d69;
align-items: baseline;
gap: 10px;
display: flex;
}
.public-models article > div strong {
font-size: 30px;
}
.public-models article > div span {
font-size: 14px;
}
.public-models article > .public-rejected {
color: #a82932;
}
.public-list-heading {
justify-content: space-between;
align-items: center;
gap: 20px;
margin: 38px 0 18px;
display: flex;
}
.public-list-heading h2 {
font-size: 22px;
font-weight: 600;
}
.public-list-heading input {
max-width: 260px;
}
.public-table-head,
.public-person summary {
grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr);
align-items: center;
gap: 15px;
padding: 16px 20px;
display: grid;
}
.public-table-head {
color: #5c7785;
border-bottom: 1px solid #d6e0e5;
font-size: 14px;
}
.public-person {
background: #fff;
border-bottom: 1px solid #dce5e9;
}
.public-person summary {
cursor: pointer;
font-size: 15px;
list-style: none;
}
.public-person summary::-webkit-details-marker {
display: none;
}
.public-person summary small {
color: #6e818b;
margin-top: 3px;
font-size: 12px;
font-weight: 400;
display: block;
}
.public-person summary strong {
overflow-wrap: anywhere;
}
.vote-tag {
border-radius: 7px;
justify-self: start;
padding: 6px 10px;
font-size: 14px;
}
.vote-tag.positive {
color: #22634e;
background: #e7f3ef;
}
.vote-tag.negative {
color: #9d3440;
background: #fff0f0;
}
.public-reasons {
color: #536b77;
border-top: 1px solid #edf1f3;
padding: 10px 20px 22px;
font-size: 14px;
}
.public-reasons p {
margin: 9px 0;
}
.public-quote {
white-space: pre-wrap;
overflow-wrap: anywhere;
background: #f7f9fa;
border-left: 3px solid #c3d1d8;
padding: 12px 16px;
}
.public-bottom-actions {
flex-wrap: wrap;
align-items: center;
gap: 22px;
margin-top: 35px;
display: flex;
}
.public-primary-link {
color: #fff;
background: #174656;
border-radius: 9px;
padding: 13px 23px;
}
.mail-setup {
background: #f7f9fa;
border: 1px solid #cfdae0;
border-radius: 14px;
margin: 30px 0;
padding: 25px;
}
.mail-setup h2 {
font-size: 21px;
font-weight: 600;
}
.mail-setup summary {
cursor: pointer;
color: #2b6274;
margin: 16px 0;
font-weight: 600;
}
.mail-setup .field {
margin: 18px 0;
}
.mail-setup form {
max-width: 520px;
}
.mail-setup form > .muted {
margin-bottom: 20px;
}
.mail-provider {
gap: 24px;
display: flex;
}
.mail-provider label {
align-items: center;
gap: 8px;
display: flex;
}
.admin-public-link {
color: #296579;
text-decoration: underline;
}
@media (max-width: 760px) {
.public-results {
padding: 20px 18px 40px;
}
.public-header {
margin-bottom: 28px;
padding: 10px 15px;
}
.public-results h1 {
font-size: 34px;
}
.public-models {
grid-template-columns: 1fr;
}
.public-models h2 {
min-height: 0;
}
.public-list-heading {
display: block;
}
.public-list-heading input {
max-width: none;
margin-top: 14px;
}
.public-table-head,
.public-person summary {
grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr);
gap: 8px;
padding: 13px 10px;
}
.vote-tag {
padding: 5px 6px;
font-size: 13px;
}
.public-person summary {
font-size: 14px;
}
.rejection-badge {
font-size: 16px;
}
.rejection-screen > h1 {
font-size: 34px;
}
.mail-setup {
padding: 18px;
}
}
.results-next-note {
color: #335968;
background: #edf5f6;
border-left: 3px solid #347182;
border-radius: 10px;
margin: 22px 0;
padding: 18px 20px;
font-size: 15px;
}
.results-next-note p {
margin-top: 6px;
}
.results-in-flow .public-models h2 {
min-height: 126px;
font-size: 15px;
}
.results-in-flow .public-models article {
padding: 18px;
}
.results-in-flow .public-models article > div {
flex-wrap: wrap;
gap: 0 8px;
}
.results-in-flow .public-models article > div span {
font-size: 13px;
}
.journey-bottom > button {
color: #e1ca96;
cursor: pointer;
margin-bottom: 14px;
display: block;
}
@media (max-width: 760px) {
.results-in-flow .public-models h2 {
min-height: 0;
}
}
.phase-scope {
color: #254858;
background: #eaf2f5;
border: 1px solid #c8d9df;
border-left: 5px solid #356575;
border-radius: 12px;
margin: 24px 0;
padding: 24px;
}
.phase-scope > strong {
margin-bottom: 10px;
font-size: 21px;
line-height: 1.4;
display: block;
}
.phase-scope p {
font-size: 16px;
line-height: 1.7;
}
.roadmap > div.phase-current {
background: #fffaf0;
border-color: #ddc992;
border-left-width: 5px;
}
.roadmap .phase-badge {
color: #49606c;
letter-spacing: 0.025em;
background: #e4ebef;
border-radius: 5px;
margin: 16px 0 0;
padding: 5px 10px;
font-size: 13px;
font-weight: 700;
display: inline-block;
}
.roadmap .phase-current .phase-badge {
color: #51411c;
background: #e9d8a7;
}
@media (max-width: 480px) {
.phase-scope {
padding: 20px;
}
.phase-scope > strong {
font-size: 19px;
}
}
.preference-badge {
color: #175b33;
background: #e4f5e9;
border: 1px solid #84c6a1;
border-radius: 8px;
align-items: center;
gap: 8px;
margin-top: 14px;
padding: 10px 14px;
font-size: 18px;
font-weight: 800;
line-height: 1.4;
display: inline-flex;
}
.preference-badge svg {
flex-shrink: 0;
}
.preference-screen .model-card.selected {
background: #f2fbf5;
border-color: #38945c;
}
.preference-screen .model-card.selected .option-letter {
color: #fff;
background: #267b49;
}
@media (max-width: 480px) {
.preference-badge {
font-size: 16px;
}
}
.tradeoff-intro {
color: #3c5967;
background: #f2f6f8;
border: 1px solid #d6e1e6;
border-radius: 12px;
margin: 22px 0;
padding: 20px;
}
.tradeoff-intro > strong {
color: #263f4c;
font-size: 17px;
display: block;
}
.tradeoff-intro > p {
margin-top: 7px;
font-size: 14px;
line-height: 1.65;
}
.tradeoff-intro > button {
color: #315f71;
align-items: center;
gap: 7px;
margin-top: 12px;
font-size: 14px;
text-decoration: underline;
display: inline-flex;
}
.model-tradeoffs {
border: 1px solid #e1e6e8;
border-radius: 10px;
margin: 0 0 20px;
overflow: hidden;
}
.model-tradeoffs strong {
color: #344f5d;
margin-bottom: 7px;
font-size: 14px;
display: block;
}
.tradeoff-benefit {
background: #f1f6f5;
padding: 15px 17px;
}
.tradeoff-benefit p {
color: #425f65;
font-size: 14px;
line-height: 1.65;
}
.tradeoff-costs {
background: #fcfaf5;
border-top: 1px solid #e1e6e8;
padding: 15px 17px;
}
.tradeoff-costs ul {
color: #625a49;
margin: 0;
padding-left: 18px;
font-size: 14px;
line-height: 1.65;
}
.tradeoff-costs li + li {
margin-top: 9px;
}
.tradeoff-comment {
background: #f4f7f8;
border: 1px solid #dce5e9;
border-radius: 12px;
margin-top: 26px;
padding: 22px;
}
.tradeoff-comment .field-hint {
margin: 8px 0 14px;
}
.model-feedback {
margin: 30px 0;
}
.model-feedback h2 {
margin-bottom: 8px;
font-size: 22px;
line-height: 1.4;
}
.model-feedback > p {
color: #5b707b;
margin-bottom: 16px;
font-size: 14px;
}
.model-feedback > details {
background: #fff;
border: 1px solid #d9e3e7;
border-radius: 10px;
margin-top: 10px;
}
.model-feedback summary {
color: #304f5f;
padding: 16px;
font-size: 14px;
}
.model-feedback summary > span {
font-weight: 600;
}
.model-feedback summary > small {
color: #627c86;
margin-top: 5px;
display: block;
}
.model-feedback-body {
padding: 0 18px 18px;
}
.model-feedback-body article {
border-top: 1px solid #e0e8eb;
padding: 16px 0;
}
.model-feedback-body article > strong {
font-size: 14px;
display: block;
}
.model-feedback-body article > span {
color: #627784;
margin: 3px 0 8px;
font-size: 13px;
display: block;
}
.model-feedback-body p {
color: #455c68;
white-space: pre-wrap;
overflow-wrap: anywhere;
font-size: 14px;
}
@media (max-width: 480px) {
.tradeoff-comment {
padding: 16px;
}
.tradeoff-intro {
padding: 17px;
}
}
.amare-followup {
color: #405d6b;
background: #f5f8fa;
border: 1px solid #dce5e9;
border-radius: 10px;
margin: 0 0 32px;
padding: 20px;
}
.amare-followup > strong {
margin-bottom: 8px;
font-size: 16px;
display: block;
}
.amare-followup > p,
.naming-note > p {
font-size: 14px;
line-height: 1.7;
}
.amare-followup + .section-title {
border-top: 1px solid #e2e9ed;
padding-top: 28px;
}
.naming-note {
color: #5b5749;
background: #fcfaf4;
border-left: 3px solid #b89a52;
border-radius: 6px;
margin: 16px 0 22px;
padding: 16px 18px;
}
.naming-note > strong {
margin-bottom: 6px;
font-size: 15px;
display: block;
}
.definitions .name-proposals {
background: #f3f6f8;
border-radius: 8px;
margin-top: 12px;
padding: 12px 14px;
font-size: 14px;
line-height: 1.65;
}
.example-banner {
color: #6a501b;
background: #fff7e4;
border: 1px solid #ddbb62;
border-left: 5px solid #b58a2d;
border-radius: 12px;
margin: 22px 0;
padding: 20px 22px;
}
.example-banner > strong {
font-size: 17px;
line-height: 1.5;
display: block;
}
.example-banner > p {
margin-top: 8px;
font-size: 14px;
line-height: 1.7;
}
.example-badge {
vertical-align: middle;
color: #765519;
letter-spacing: 0.04em;
background: #fff5da;
border: 1px solid #dec785;
border-radius: 5px;
padding: 3px 7px;
font-size: 12px;
font-weight: 800;
line-height: 1.4;
display: inline-block;
}
.public-models article > .example-badge {
width: fit-content;
margin-bottom: 12px;
display: block;
}
.public-person summary > strong > .example-badge {
width: fit-content;
margin-top: 5px;
display: block;
}
.example-inline-note {
color: #765519;
background: #fff7e5;
border-radius: 7px;
padding: 10px 12px;
font-size: 14px;
}
.results-mode-actions {
flex-wrap: wrap;
gap: 10px;
display: flex;
}
@media (max-width: 600px) {
.public-toolbar {
flex-wrap: wrap;
gap: 14px;
}
.results-mode-actions {
width: 100%;
}
}
.member-portal {
max-width: 1240px;
min-height: 100vh;
margin: auto;
padding: 24px 40px 70px;
}
.portal-header {
color: #e4d19b;
background: #000;
border-radius: 14px;
align-items: center;
gap: 25px;
padding: 14px 24px;
display: flex;
}
.portal-logo {
border: 0;
width: 135px;
height: 90px;
}
.portal-header > span {
letter-spacing: 0.015em;
font-size: 15px;
}
.portal-exit {
color: #eadcba;
margin-left: auto;
font-size: 14px;
text-decoration: underline;
}
.portal-review-banner {
color: #705824;
background: #fff9eb;
border: 1px solid #e3d5ad;
border-radius: 9px;
flex-wrap: wrap;
gap: 5px 18px;
margin: 18px 0 35px;
padding: 13px 18px;
font-size: 14px;
display: flex;
}
.portal-review-banner > strong {
letter-spacing: 0.035em;
font-size: 13px;
}
.portal-entry-grid {
grid-template-columns: minmax(0, 1fr);
gap: 28px;
max-width: 620px;
margin: 35px auto 0;
padding: 10px 0;
display: grid;
}
.portal-intro {
text-align: center;
}
.portal-intro h1 {
margin-bottom: 16px;
font-size: clamp(32px, 4vw, 46px);
line-height: 1.18;
}
.portal-intro > p {
color: #536a77;
max-width: 440px;
margin: auto;
font-size: 16px;
line-height: 1.7;
}
.portal-login-card {
width: 100%;
max-width: 440px;
margin: auto;
padding: 0;
}
.portal-login-card .portal-email-button {
background: #fff;
gap: 10px;
width: 100%;
min-height: 48px;
}
.portal-login-card .portal-entry-caption {
text-align: center;
margin: 10px 0 24px;
font-size: 14px;
}
.portal-login-card .portal-access-note {
text-align: center;
border-top: 1px solid #dce5e9;
margin: 24px 0 0;
padding-top: 18px;
font-size: 13px;
line-height: 1.7;
}
.portal-login-card h2 {
margin: 12px 0;
font-size: 26px;
font-weight: 600;
}
.portal-login-card p {
color: #526c79;
margin-bottom: 22px;
font-size: 15px;
line-height: 1.7;
}
.portal-login-card .primary-button {
justify-content: center;
gap: 10px;
width: 100%;
min-height: 48px;
}
.portal-login-card small {
text-align: center;
color: #6d7f86;
margin: 10px 0 18px;
font-size: 13px;
display: block;
}
.portal-login-card .portal-text-link {
text-align: center;
color: #376779;
width: 100%;
margin-top: 17px;
font-size: 14px;
text-decoration: underline;
display: block;
}
.portal-login-card label {
margin-bottom: 8px;
font-size: 14px;
display: block;
}
.portal-login-card label > span {
color: #71858f;
font-size: 13px;
}
.portal-login-card form > .primary-button {
margin-top: 20px;
}
.portal-dashboard {
max-width: 1020px;
margin: auto;
}
.portal-dashboard-heading {
justify-content: space-between;
align-items: flex-start;
gap: 18px;
margin: 35px 0;
display: flex;
}
.portal-dashboard-heading h1 {
margin-bottom: 10px;
font-size: 38px;
}
.portal-dashboard-heading .eyebrow {
margin-bottom: 12px;
}
.portal-dashboard-heading p,
.portal-tab-intro {
color: #5d7581;
font-size: 14px;
}
.portal-tabs [data-slot="tabs-list"] {
background: #eaf0f3;
border-radius: 10px;
width: 100%;
height: auto;
margin-bottom: 25px;
padding: 5px;
display: flex;
}
.portal-tabs [data-slot="tabs-trigger"] {
padding: 13px 16px;
font-size: 15px;
}
.portal-tabs [data-slot="tabs-trigger"][data-state="active"] {
color: #254f60;
background: #fff;
}
.portal-survey-card {
background: #fff;
border: 1px solid #dce5e9;
border-radius: 13px;
margin-bottom: 20px;
padding: 26px;
}
.portal-survey-card.current {
background: #edf5f5;
border: 1px solid #adc7ca;
border-top: 4px solid #265969;
margin-bottom: 36px;
padding: 30px;
}
.portal-survey-card.current h2 {
color: #193f4b;
font-size: 29px;
}
.portal-survey-card.current .portal-tag {
color: #fff;
background: #265969;
}
.portal-survey-card.current .portal-current-scope {
max-width: 680px;
margin-top: 10px;
font-size: 14px;
}
.portal-survey-card.current .portal-card-actions .primary-button {
min-height: 48px;
}
.portal-card-top {
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 12px;
margin-bottom: 14px;
display: flex;
}
.portal-card-top > span:last-child {
color: #677b86;
font-size: 13px;
}
.portal-tag {
color: #326175;
letter-spacing: 0.03em;
background: #e7f1f3;
border-radius: 5px;
padding: 5px 9px;
font-size: 12px;
font-weight: 700;
display: inline-block;
}
.portal-tag.muted {
color: #687c87;
background: #eef2f4;
}
.portal-survey-card h2 {
margin: 12px 0;
font-size: 23px;
line-height: 1.4;
}
.portal-survey-card p {
color: #526a77;
font-size: 15px;
line-height: 1.7;
}
.portal-survey-card small {
color: #71848d;
margin-top: 15px;
font-size: 13px;
display: block;
}
.portal-card-actions {
flex-wrap: wrap;
gap: 13px;
margin-top: 22px;
display: flex;
}
.portal-planned {
display: block;
}
.portal-planned > h2 {
margin-bottom: 8px;
font-size: 20px;
}
.portal-planned > p {
color: #657b85;
margin-bottom: 24px;
font-size: 14px;
}
.portal-survey-sequence {
margin: 0;
padding: 0;
list-style: none;
}
.portal-survey-sequence > li {
grid-template-columns: 38px minmax(0, 1fr);
gap: 18px;
padding-bottom: 25px;
display: grid;
position: relative;
}
.portal-survey-sequence > li:not(:last-child):before {
content: "";
background: #d5e0e5;
width: 1px;
position: absolute;
top: 38px;
bottom: 0;
left: 18px;
}
.portal-sequence-number {
color: #526b76;
background: #f1f5f7;
border: 1px solid #ccdce2;
border-radius: 50%;
place-items: center;
width: 38px;
height: 38px;
font-size: 15px;
font-weight: 600;
display: grid;
}
.portal-survey-sequence article {
border-bottom: 1px solid #e0e7eb;
padding: 2px 0 22px;
}
.portal-survey-sequence > li:last-child article {
border-bottom: 0;
}
.portal-sequence-label {
color: #6b808b;
letter-spacing: 0.04em;
font-size: 12px;
font-weight: 600;
}
.portal-survey-sequence h3 {
color: #364f5c;
margin: 7px 0;
font-size: 19px;
line-height: 1.4;
}
.portal-survey-sequence p {
color: #596f7b;
max-width: 740px;
font-size: 14px;
line-height: 1.7;
}
.portal-survey-sequence small {
color: #6a808b;
margin-top: 9px;
font-size: 13px;
display: block;
}
.portal-bottom-note {
color: #6b7e88;
margin: 18px 0;
font-size: 14px;
}
.portal-tab-title {
margin-bottom: 10px;
font-size: 24px;
}
.portal-tab-intro {
margin-bottom: 22px;
}
.portal-empty {
color: #58717d;
background: #f2f6f8;
border-radius: 10px;
margin-bottom: 20px;
padding: 22px;
font-size: 14px;
}
.portal-history-example {
background: #fff;
border: 1px solid #dce5e9;
border-radius: 12px;
margin: 18px 0;
}
.portal-history-example summary {
justify-content: space-between;
align-items: center;
gap: 18px;
padding: 21px;
display: flex;
}
.portal-history-example summary strong {
font-size: 15px;
}
.portal-history-example summary small {
color: #6a808b;
margin-top: 4px;
font-size: 13px;
display: block;
}
.portal-history-example > div {
color: #536d7b;
border-top: 1px solid #e2e9ec;
padding: 20px;
font-size: 14px;
}
.portal-history-example p + p {
margin-top: 10px;
}
.portal-survey-card > .portal-demo-saved {
color: #287048;
align-items: center;
gap: 8px;
margin-top: 13px;
font-size: 14px;
display: flex;
}
.portal-survey-card > button {
margin-top: 18px;
}
.portal-survey-bar {
color: #866522;
border-bottom: 1px solid #dee6eb;
flex-wrap: wrap;
justify-content: space-between;
gap: 12px;
margin-bottom: 15px;
padding-bottom: 18px;
font-size: 13px;
display: flex;
}
.portal-survey-bar button,
.portal-back {
color: #34677b;
align-items: center;
gap: 8px;
font-size: 14px;
display: flex;
}
.portal-results-wrap {
max-width: 1100px;
margin: auto;
padding: 20px;
}
.portal-results-wrap > .portal-back {
margin-bottom: 15px;
}
@media (max-width: 800px) {
.member-portal {
padding: 16px 18px 45px;
}
.portal-entry-grid {
gap: 24px;
margin-top: 24px;
}
.portal-intro h1 {
font-size: 34px;
}
.portal-header {
gap: 15px;
padding: 12px 17px;
}
.portal-header > span {
font-size: 13px;
}
.portal-login-card {
padding: 0;
}
}
@media (max-width: 480px) {
.portal-logo {
width: 100px;
height: 72px;
}
.portal-dashboard-heading {
flex-wrap: wrap;
}
.portal-tabs [data-slot="tabs-trigger"] {
gap: 5px;
padding: 12px 6px;
font-size: 13px;
}
.portal-tabs [data-slot="tabs-trigger"] svg {
display: none;
}
.portal-survey-card {
padding: 20px;
}
.portal-card-actions {
flex-direction: column;
}
.portal-card-actions button {
justify-content: center;
width: 100%;
}
.portal-review-banner {
margin-bottom: 24px;
}
.portal-history-example summary {
gap: 10px;
padding: 17px;
}
}
.no-opposition {
cursor: pointer;
background: #f4f8fa;
border: 1px solid #cbd9e0;
border-radius: 13px;
align-items: flex-start;
gap: 15px;
padding: 24px;
display: flex;
}
.no-opposition.chosen {
background: #eaf4f7;
border: 2px solid #3f788d;
}
.no-opposition > button {
flex-shrink: 0;
margin-top: 5px;
}
.no-opposition strong {
color: #2e5364;
font-size: 18px;
}
.no-opposition p {
color: #5b7480;
margin-top: 7px;
font-size: 14px;
line-height: 1.65;
}
.no-opposition div > span {
color: #34677a;
align-items: center;
gap: 6px;
margin-top: 12px;
font-size: 14px;
font-weight: 600;
display: flex;
}
.review-neutral,
.no-opposition-count {
color: #3c5e6e;
background: #edf5f7;
border: 1px solid #d8e5ea;
border-radius: 9px;
margin: 18px 0;
padding: 17px;
font-size: 14px;
}
.vote-tag.neutral {
color: #4c6878;
background: #edf3f6;
}
@media (max-width: 480px) {
.portal-survey-card.current {
padding: 22px 20px;
}
.portal-survey-card.current h2 {
font-size: 25px;
}
.portal-survey-sequence > li {
gap: 13px;
}
.portal-survey-sequence h3 {
font-size: 18px;
}
.portal-intro h1 {
font-size: 32px;
}
}
.results-in-flow .results-title,
.public-results .results-title {
margin-bottom: 18px;
font-size: clamp(28px, 3.4vw, 39px);
line-height: 1.2;
}
.results-example-notice {
border-left-width: 3px;
border-radius: 8px;
margin: 16px 0;
padding: 12px 16px;
}
.results-example-notice > strong {
font-size: 13px;
}
.results-example-notice > p {
margin-top: 4px;
font-size: 14px;
}
.results-in-flow .public-toolbar,
.public-results .public-toolbar {
margin: 20px 0 16px;
font-size: 14px;
}
.results-overview {
background: #fff;
border: 1px solid #d2e0e5;
border-radius: 14px;
overflow: hidden;
}
.results-overview-heading {
background: #edf5f5;
justify-content: space-between;
align-items: center;
gap: 15px;
padding: 20px;
display: flex;
}
.results-overview-heading h2 {
color: #214e5b;
margin: 0 0 5px;
font-size: 20px;
font-weight: 600;
}
.results-overview-heading p {
color: #47636f;
margin: 0;
font-size: 14px;
line-height: 1.5;
}
.results-comparison {
border-collapse: collapse;
table-layout: fixed;
width: 100%;
}
.results-comparison th:first-child {
width: 54%;
}
.results-comparison thead th {
color: #59717d;
text-align: left;
vertical-align: middle;
border-bottom: 1px solid #dce6ea;
padding: 13px 18px;
font-size: 13px;
font-weight: 500;
}
.results-comparison thead th:last-child {
text-align: center;
}
.results-comparison tbody th,
.results-comparison td {
vertical-align: middle;
border-bottom: 1px solid #e3eaee;
padding: 18px;
}
.results-comparison tbody th {
text-align: left;
color: #324e5c;
font-size: 14px;
font-weight: 500;
line-height: 1.5;
}
.summary-model-label {
align-items: center;
gap: 12px;
display: flex;
}
.summary-letter {
color: #466977;
background: #edf2f5;
border-radius: 7px;
flex-shrink: 0;
place-items: center;
width: 30px;
height: 30px;
font-weight: 700;
display: grid;
}
.summary-vote {
color: #246252;
align-items: baseline;
gap: 7px;
display: flex;
}
.summary-vote strong {
font-size: 23px;
font-weight: 650;
}
.summary-vote > span {
color: #5e7780;
font-size: 13px;
}
.summary-bar {
background: #e6efed;
border-radius: 4px;
height: 5px;
margin-top: 7px;
overflow: hidden;
}
.summary-bar > span {
background: #398775;
border-radius: 4px;
height: 100%;
display: block;
}
.summary-rejection {
text-align: center;
color: #a13b45;
font-size: 22px;
font-weight: 600;
display: block;
}
.results-overview-footer {
background: #fafcfc;
padding: 14px 20px;
}
.results-overview-footer p {
color: #49636e;
margin: 0 0 7px;
font-size: 14px;
line-height: 1.6;
}
.results-overview-footer small {
color: #617985;
font-size: 13px;
line-height: 1.6;
display: block;
}
.results-decision-note,
.results-privacy-note {
color: #647882;
margin: 12px 0;
font-size: 13px;
line-height: 1.7;
}
.results-flow-hint {
color: #335d6c;
margin: 16px 0 0;
font-size: 14px;
}
.results-in-flow .public-list-heading,
.public-results .public-list-heading {
margin: 28px 0 8px;
}
.results-list-help {
color: #607782;
margin-bottom: 15px;
font-size: 14px;
}
.results-in-flow .public-person summary,
.public-results .public-person summary {
padding-top: 12px;
padding-bottom: 12px;
}
.public-person summary:hover {
background: #f2f7f8;
}
.public-person summary:focus-visible {
outline-offset: -2px;
outline: 2px solid #387b8b;
}
.public-person[open] summary {
background: #edf5f6;
}
.public-person summary > strong > .example-badge {
margin: 0 0 0 7px;
display: inline-block;
}
.results-grouped-feedback {
background: #f6f9fa;
border: 1px solid #dae4e9;
border-radius: 10px;
margin-top: 28px;
}
.results-grouped-feedback > summary {
cursor: pointer;
color: #355b6b;
padding: 17px 20px;
font-size: 14px;
font-weight: 600;
}
.results-grouped-feedback > .model-feedback {
margin: 0;
padding: 0 18px 18px;
}
@media (max-width: 600px) {
.results-comparison th:first-child {
width: 49%;
}
.results-comparison thead th {
padding: 10px 8px;
font-size: 12px;
}
.results-comparison tbody th,
.results-comparison td {
padding: 14px 8px;
}
.results-comparison tbody th {
font-size: 13px;
}
.summary-model-label {
align-items: flex-start;
gap: 7px;
}
.summary-letter {
width: 23px;
height: 25px;
font-size: 13px;
}
.summary-vote {
flex-wrap: wrap;
gap: 4px;
}
.summary-vote strong,
.summary-rejection {
font-size: 20px;
}
.summary-vote > span {
font-size: 12px;
}
.results-overview-heading {
padding: 16px;
}
.results-overview-heading h2 {
font-size: 18px;
}
.results-overview-footer {
padding: 13px 14px;
}
.results-in-flow .public-list-heading input,
.public-results .public-list-heading input {
margin-top: 10px;
}
}
.expectation-options {
border: 0;
margin: 24px 0 12px;
padding: 0;
}
.expectation-options legend {
color: #526e7b;
margin-bottom: 16px;
font-size: 14px;
}
.expectation-option {
cursor: pointer;
background: #fff;
border: 1px solid #d8e3e8;
border-radius: 10px;
align-items: flex-start;
gap: 14px;
margin-bottom: 10px;
padding: 17px 18px;
display: flex;
}
.expectation-option.selected {
background: #f0f8f4;
border-color: #438d78;
}
.expectation-option > button {
flex-shrink: 0;
margin-top: 3px;
}
.expectation-option > span {
min-width: 0;
}
.expectation-option strong {
color: #2d505d;
font-size: 16px;
display: block;
}
.expectation-option > span > span {
color: #5a707c;
margin-top: 4px;
font-size: 14px;
line-height: 1.6;
display: block;
}
.expectation-option:has(button:disabled) {
opacity: 0.65;
cursor: default;
}
.expectation-counter {
color: #436b5c;
margin-bottom: 20px;
font-size: 14px;
}
.expectation-answer ul {
flex-wrap: wrap;
gap: 8px;
margin: 12px 0;
padding: 0;
list-style: none;
display: flex;
}
.expectation-answer li {
color: #315f54;
background: #eef6f2;
border: 1px solid #cce0d6;
border-radius: 6px;
padding: 6px 10px;
font-size: 14px;
}
.expectation-answer .public-quote {
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.expectation-summary {
background: #f7faf9;
border: 1px solid #d8e3e8;
border-radius: 12px;
margin: 26px 0;
padding: 20px;
}
.expectation-summary > div {
justify-content: space-between;
align-items: center;
gap: 10px;
display: flex;
}
.expectation-summary h2 {
color: #2b535f;
font-size: 20px;
line-height: 1.4;
}
.expectation-summary > p {
color: #607882;
margin: 8px 0 12px;
font-size: 13px;
line-height: 1.7;
}
.expectation-summary ul {
margin: 0;
padding: 0;
list-style: none;
}
.expectation-summary li {
color: #46646e;
border-top: 1px solid #e0e9e6;
justify-content: space-between;
gap: 15px;
padding: 9px 0;
font-size: 14px;
display: flex;
}
.expectation-summary li strong {
color: #305f52;
flex-shrink: 0;
font-weight: 600;
}
@media (max-width: 480px) {
.expectation-summary {
padding: 16px;
}
.expectation-summary h2 {
font-size: 18px;
}
.expectation-option {
padding: 15px;
}
}
.model-choice .decision-authority {
background: #faf5e8;
border-left: 4px solid #826a35;
border-radius: 7px;
margin-top: 14px;
padding: 14px 16px;
}
.decision-authority-label {
letter-spacing: 0.04em;
color: #71613c;
font-size: 12px;
font-weight: 650;
display: block;
}
.model-choice .decision-authority p {
color: #293f4b;
margin-top: 7px;
font-size: 17px;
line-height: 1.55;
}
.model-choice .decision-authority strong {
font-weight: 750;
}
.amare-council-note p strong {
font-weight: 750;
font-size: inherit;
color: #293f4b;
display: inline;
}
@media (max-width: 600px) {
.model-choice .decision-authority {
padding: 12px;
}
.model-choice .decision-authority p {
font-size: 16px;
}
}
.graphical-overview {
border-color: #c9dcdf;
border-radius: 18px;
box-shadow: 0 8px 28px #244e5d06;
}
.results-visual-header {
color: #fff;
background: #173f4b;
justify-content: space-between;
align-items: center;
gap: 24px;
padding: 25px 28px;
display: flex;
}
.results-kicker {
letter-spacing: 0.16em;
color: #c6d8dc;
margin-bottom: 8px;
font-size: 12px;
font-weight: 600;
display: block;
}
.results-visual-header h2 {
color: #fff;
margin: 0 0 7px;
font-size: 25px;
font-weight: 600;
line-height: 1.25;
}
.results-visual-header p {
color: #d5e4e6;
margin: 0;
font-size: 14px;
line-height: 1.6;
}
.results-visual-header .example-badge {
margin-top: 12px;
}
.results-total {
text-align: center;
border-left: 1px solid #51717a;
flex-shrink: 0;
min-width: 112px;
padding-left: 24px;
}
.results-total strong {
color: #ead398;
font-variant-numeric: tabular-nums;
font-size: 48px;
font-weight: 500;
line-height: 1.1;
display: block;
}
.results-total > span {
color: #d5e4e6;
margin-top: 7px;
font-size: 12px;
display: block;
}
.model-chart {
margin: 0;
padding: 22px 26px 18px;
}
.model-chart figcaption {
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 12px;
margin-bottom: 16px;
display: flex;
}
.model-chart figcaption > span {
color: #46616e;
font-size: 14px;
font-weight: 600;
}
.chart-legend {
color: #526e79;
flex-wrap: wrap;
gap: 15px;
font-size: 12px;
display: flex;
}
.chart-legend > span {
align-items: center;
gap: 6px;
display: flex;
}
.chart-legend i {
border-radius: 3px;
width: 9px;
height: 9px;
display: block;
}
.preference-dot {
background: #348c7c;
}
.rejection-dot {
background: #bd6270;
}
.chart-scale {
color: #748991;
justify-content: space-between;
margin-left: calc(33.3333% + 82px);
margin-right: 82px;
font-size: 12px;
display: flex;
}
.model-chart-row {
border-bottom: 1px solid #e5ecee;
grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
align-items: center;
gap: 18px;
padding: 21px 0;
display: grid;
}
.chart-model-heading {
align-items: flex-start;
gap: 11px;
display: flex;
}
.chart-model-letter {
color: #315965;
background: #edf3f5;
border: 1px solid #d8e5e8;
border-radius: 10px;
flex-shrink: 0;
place-items: center;
width: 34px;
height: 34px;
font-size: 16px;
font-weight: 700;
display: grid;
}
.chart-model-heading h3 {
color: #2c4b59;
overflow-wrap: anywhere;
margin: 3px 0 0;
font-size: 14px;
font-weight: 550;
line-height: 1.55;
}
.chart-bar-pair {
gap: 11px;
display: grid;
}
.chart-value-row {
grid-template-columns: 60px minmax(0, 1fr) 72px;
align-items: center;
gap: 10px;
display: grid;
}
.chart-series-label {
color: #647985;
font-size: 12px;
}
.chart-track {
background: repeating-linear-gradient(
90deg,
#edf2f3 0 calc(25% - 1px),
#dbe5e8 calc(25% - 1px) 25%
);
border-radius: 4px;
height: 15px;
overflow: hidden;
}
.chart-track > span {
border-radius: 4px;
height: 100%;
display: block;
}
.preference .chart-track > span {
background: #348c7c;
}
.rejection .chart-track > span {
background: #bd6270;
}
.chart-value {
white-space: nowrap;
font-variant-numeric: tabular-nums;
align-items: baseline;
gap: 4px;
display: flex;
}
.chart-value strong {
font-size: 19px;
font-weight: 650;
}
.preference .chart-value strong {
color: #236557;
}
.rejection .chart-value strong {
color: #9b4252;
}
.chart-value small {
color: #607681;
font-size: 12px;
}
.chart-footnote {
color: #6c8089;
margin: 15px 0 0;
font-size: 12px;
line-height: 1.7;
}
.results-neutral-stat {
background: #f1f5f8;
border-radius: 10px;
align-items: center;
gap: 14px;
margin: 0 26px;
padding: 16px 18px;
display: flex;
}
.neutral-stat-number {
color: #38576c;
background: #e0e9f0;
border-radius: 9px;
place-items: center;
min-width: 41px;
height: 41px;
padding: 0 6px;
font-size: 24px;
font-weight: 600;
display: grid;
}
.results-neutral-stat strong {
color: #3d5e6d;
font-size: 14px;
}
.results-neutral-stat p {
color: #6a808b;
margin: 4px 0 0;
font-size: 13px;
line-height: 1.5;
}
.results-neutral-stat > .example-badge {
margin-left: auto;
}
.results-common-model-note {
text-align: center;
color: #70848b;
margin: 13px 20px 18px;
font-size: 12px;
}
.expectation-summary {
background: #fff;
border-radius: 14px;
padding: 22px 24px;
}
.expectation-summary ul {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 17px 25px;
margin-top: 18px;
display: grid;
}
.expectation-summary li {
border: 0;
padding: 0;
font-size: 14px;
display: block;
}
.expectation-stat-label {
justify-content: space-between;
gap: 10px;
margin-bottom: 7px;
display: flex;
}
.expectation-stat-track {
background: #f0eee7;
border-radius: 4px;
height: 6px;
overflow: hidden;
}
.expectation-stat-track > span {
background: #b69b5e;
border-radius: 4px;
height: 100%;
display: block;
}
@media (max-width: 640px) {
.results-visual-header {
gap: 15px;
padding: 21px 19px;
}
.results-visual-header h2 {
font-size: 22px;
}
.results-total {
min-width: 80px;
padding-left: 14px;
}
.results-total strong {
font-size: 39px;
}
.results-total > span {
font-size: 12px;
}
.model-chart {
padding: 18px;
}
.model-chart-row {
grid-template-columns: minmax(0, 1fr);
gap: 16px;
padding: 18px 0;
}
.chart-model-heading {
align-items: center;
}
.chart-model-heading h3 {
margin: 0;
font-size: 14px;
}
.chart-scale {
margin-left: 70px;
margin-right: 82px;
}
.chart-model-letter {
border-radius: 8px;
width: 29px;
height: 29px;
font-size: 14px;
}
.results-neutral-stat {
flex-wrap: wrap;
gap: 10px;
margin: 0 18px;
padding: 13px;
}
.results-neutral-stat > .example-badge {
margin-left: 0;
}
.expectation-summary {
padding: 18px;
}
.expectation-summary ul {
grid-template-columns: minmax(0, 1fr);
gap: 15px;
}
}
/* ============================================================================
③ UX turu (16 Eyl 2026): katılım sayacı, zaman çizelgesi, katlanır kart,
karşılaştırma tablosu, doğrulandı rozeti, gönderim uyarısı, erişim talebi
========================================================================== */
.katilim { margin: 14px 0 4px; }
.katilim-satir { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 14px; color: #3d5e6d; }
.katilim-satir strong { color: #193f4b; font-weight: 600; }
.katilim-cubuk { height: 7px; margin-top: 8px; border-radius: 4px; background: #dbe5e8; overflow: hidden; }
.katilim-cubuk > span { display: block; height: 100%; border-radius: 4px; background: #348c7c; transition: width .4s; }
.zaman { list-style: none; margin: 18px 0 4px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; position: relative; }
.zaman::before { content: ""; position: absolute; left: 6%; right: 6%; top: 8px; height: 2px; background: #dbe5e8; }
.zaman li { position: relative; text-align: center; padding-top: 22px; font-size: 14px; }
.zaman .nokta { position: absolute; top: 2px; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: #fff; border: 2px solid #b8c9d0; }
.zaman li.done .nokta { background: #348c7c; border-color: #348c7c; }
.zaman li.current .nokta { background: #e0c78b; border-color: #b89a52; box-shadow: 0 0 0 4px #f3ead2; }
.zaman li strong { display: block; color: #2c4b59; font-size: 14px; font-weight: 600; }
.zaman li.pending strong { color: #7b8e97; font-weight: 500; }
.zaman li small { display: block; color: #647985; font-size: 12px; line-height: 1.4; margin-top: 3px; }
@media (max-width: 600px) { .zaman { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 8px; } .zaman::before { display: none; } .zaman li { text-align: left; padding: 0 0 0 22px; } .zaman .nokta { left: 0; top: 2px; margin-left: 0; } }
.model-detay > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px; color: #2f6274; font-size: 14px; font-weight: 600; padding: 2px 0 12px; }
.model-detay > summary::-webkit-details-marker { display: none; }
.model-detay > summary svg { transition: transform .2s; }
.model-detay[open] > summary svg { transform: rotate(180deg); }
.karsilastirma-kutu { background: #f6f9fa; border: 1px solid #dae4e9; border-radius: 12px; margin: 22px 0; }
.karsilastirma-kutu > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; padding: 16px 20px; color: #355b6b; font-size: 15px; font-weight: 600; }
.karsilastirma-kutu > summary::-webkit-details-marker { display: none; }
.karsilastirma-kutu > .small { padding: 0 20px 16px; margin: 0; }
.kiyas { margin: 0 20px 6px; background: #fff; border: 1px solid #d6e1e6; border-radius: 12px; overflow: hidden; }
.kiyas-baslik, .kiyas-satir { display: grid; grid-template-columns: 52px minmax(0, 1.05fr) minmax(0, 1.2fr); gap: 14px; padding: 14px 16px; }
.kiyas-baslik { background: #edf3f5; color: #46617e; font-size: 13px; font-weight: 600; padding: 10px 16px; }
.kiyas-satir { border-top: 1px solid #e4ebef; align-items: start; }
.kiyas-kurullar { display: flex; flex-wrap: wrap; gap: 6px; }
.kurul-cip { display: inline-block; padding: 6px 10px; border-radius: 7px; background: #174656; color: #fff; font-size: 14px; font-weight: 600; line-height: 1.3; }
.kurul-cip.yok { background: #eef2f4; color: #aab7be; text-decoration: line-through; font-weight: 500; }
.kiyas-cumle { color: #2c4b59; font-size: 14px; line-height: 1.55; }
.kiyas-cumle strong { color: #1c3e4b; font-weight: 700; }
@media (max-width: 640px) {
.kiyas { margin: 0 14px 6px; }
.kiyas-baslik { display: none; }
.kiyas-satir { grid-template-columns: 40px minmax(0, 1fr); grid-template-areas: "model kurullar" "model cumle"; gap: 8px 12px; }
.kiyas-model { grid-area: model; } .kiyas-kurullar { grid-area: kurullar; } .kiyas-cumle { grid-area: cumle; }
.kiyas-model .option-letter { width: 32px; height: 32px; font-size: 15px; }
}
.dogrulandi { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding: 6px 10px; border-radius: 7px; background: #e7f3ef; color: #22634e; font-size: 14px; font-weight: 600; }
.gonderim-uyari { margin-top: 26px; padding: 14px 16px; border-radius: 10px; background: #fff7e4; border: 1px solid #ddbb62; border-left: 5px solid #b58a2d; color: #5f4614; font-size: 14px; line-height: 1.6; }
.portal-login-card .btn.primary-button[disabled] { opacity: .5; }
.verification-links button[disabled], .portal-text-link[disabled] { color: #8a9aa3; text-decoration: none; cursor: default; }
/* Listede görünmeyen lider → doğrudan iletişim (WhatsApp) */
.iletisim { margin: 16px 0 6px; padding: 16px 18px; border-radius: 12px; background: #f1f6f7; border: 1px solid #cddde3; text-align: left; }
.iletisim > p:first-child { color: #33515f; font-size: 14px; line-height: 1.65; margin: 0 0 12px; }
.iletisim > p:first-child strong { color: #1c3e4b; }
.wa-btn { width: 100%; min-height: 48px; gap: 10px; background: #1f9d55; color: #fff; font-size: 15px; font-weight: 600; border-radius: 10px; }
.wa-btn:hover { background: #178a49; }
.iletisim > .small { margin: 12px 0 0; text-align: center; }
/* Durum rozeti (panel kartı) + yönetici sekmesi */
.durum-rozet { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 12px 14px; border-radius: 10px; font-size: 15px; line-height: 1.4; }
.durum-rozet.var { background: #e7f3ef; color: #22634e; border: 1px solid #b9dccb; }
.durum-rozet.yok { background: #fff7e4; color: #6a501b; border: 1px solid #e5d3a0; }
.durum-rozet svg { flex-shrink: 0; }
.yonetim-form label { display: block; margin: 12px 0 6px; font-size: 14px; font-weight: 600; }
.yonetim-form .field-row { margin-top: 4px; }
.yonetim-satir { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); gap: 15px; align-items: center; padding: 12px 20px; border-bottom: 1px solid #e4ebef; font-size: 14px; }
.yonetim-satir small { display: block; color: #6e818b; font-size: 12px; margin-top: 2px; }
.yonetim-liste { margin: 10px 0 0; padding: 0; list-style: none; columns: 2; column-gap: 24px; }
.yonetim-liste li { padding: 6px 0; border-bottom: 1px solid #edf1f3; font-size: 14px; break-inside: avoid; }
.yonetim-liste small { color: #6e818b; font-size: 13px; }
@media (max-width: 640px) { .yonetim-liste { columns: 1; } .yonetim-satir { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: 8px; padding: 10px; } }
/* ============================================================================
④ TASARIM TURU (17 Eyl 2026) — tipografi sistemi, altın vurgu, geçiş hareketi,
alt adım çubuğu, karar akışı şeması, kişi noktaları, dokunuş, iskelet/boş
durum, yazdırma. Koyu tema bilinçli olarak yapılmadı.
========================================================================== */
/* ---- 1) tipografi: sistem yazı yığını + ölçek ---- */
:root {
--yazi: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--t-xs: 12px; --t-sm: 13.5px; --t-base: 16px; --t-md: 17.5px; --t-lg: 22px; --t-xl: 30px;
--t-2xl: clamp(34px, 3.6vw, 52px);
--altin: #c9a961; --altin-koyu: #a88a3f; --altin-acik: #f3ead2; --altin-metin: #6b5420;
}
body { font-family: var(--yazi); font-size: var(--t-base); line-height: 1.6; -webkit-font-smoothing: antialiased; }
h1 { letter-spacing: -0.03em; font-weight: 600; }
.welcome h1, .success-screen h1, .portal-intro h1, .results-title, .rejection-screen > h1, .preference-screen > h1, .expectations-screen > h1 { font-size: var(--t-2xl); line-height: 1.12; }
.rejection-screen > h1 { text-transform: none; font-weight: 700; letter-spacing: -0.02em; color: #8f2630; }
h2.section-title, .portal-tab-title, .results-visual-header h2, .expectation-summary h2, .public-list-heading h2, .portal-survey-card h2 { letter-spacing: -0.015em; }
.portal-dashboard-heading h1 { font-size: var(--t-xl); }
.lead { font-size: var(--t-md); line-height: 1.7; }
.eyebrow { letter-spacing: 0.14em; font-weight: 700; color: var(--altin-metin); }
.journey-heading .eyebrow { color: var(--altin); }
p, li, dd, label { line-height: 1.6; }
/* ---- 2) altın vurgu (markanın rengi içerikte de var) ---- */
.prog > span, .step-progress > span { background: linear-gradient(90deg, var(--altin-koyu), var(--altin)); }
.step-progress { background: #ece6d8; }
.portal-survey-card.current { border-top-color: var(--altin-koyu); background: linear-gradient(180deg, #fbf8f0 0%, #eef4f4 120px); }
.portal-survey-card.current .portal-tag { background: var(--altin-koyu); color: #fff; }
[data-slot="tabs-trigger"][data-state="active"] { box-shadow: inset 0 -3px 0 var(--altin), 0 1px 3px 0 rgb(0 0 0 / .08); }
:is(button:focus-visible, a:focus-visible, summary:focus-visible) { outline-color: var(--altin-koyu); }
.inp:focus-visible, .ta:focus-visible { border-color: var(--altin-koyu); box-shadow: 0 0 0 3px rgba(201, 169, 97, .35); }
.katilim-cubuk > span { background: linear-gradient(90deg, var(--altin-koyu), var(--altin)); }
.durum-rozet.yok { background: var(--altin-acik); border-color: var(--altin); color: var(--altin-metin); }
.results-total strong { color: var(--altin); }
.chart-model-letter, .option-letter { border-color: transparent; }
.model-card.selected .option-letter, .preference-screen .model-card.selected .option-letter { background: var(--altin-koyu); color: #fff; }
.preference-screen .model-card.selected { border-color: var(--altin-koyu); background: #fdfaf2; box-shadow: 0 8px 28px rgba(168, 138, 63, .12); }
.preference-badge { color: var(--altin-metin); background: var(--altin-acik); border-color: var(--altin); }
.journey-step.current > span { background: var(--altin); border-color: var(--altin); }
.journey-step.complete > span { color: var(--altin); border-color: rgba(201, 169, 97, .5); }
.journey-bottom a, .journey-bottom > button { color: var(--altin); }
.survey-status { border-left-color: var(--altin-koyu); }
.gonderim-uyari { border-color: var(--altin); border-left-color: var(--altin-koyu); }
.zaman li.current .nokta { background: var(--altin); border-color: var(--altin-koyu); box-shadow: 0 0 0 4px var(--altin-acik); }
.primary-button { box-shadow: 0 6px 18px rgba(23, 70, 86, .18); }
.primary-button:hover { box-shadow: 0 8px 22px rgba(23, 70, 86, .26); }
/* ---- 3) adımlar arası geçiş (yalnız transform/opacity) ---- */
@keyframes icerik-ileri { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes icerik-geri { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
@keyframes tik { from { transform: scale(.3); opacity: 0; } 60% { transform: scale(1.2); } to { transform: scale(1); opacity: 1; } }
.content { animation: none; }
.content.ileri { animation: icerik-ileri .32s cubic-bezier(.2, .7, .2, 1) both; }
.content.geri { animation: icerik-geri .32s cubic-bezier(.2, .7, .2, 1) both; }
.journey-step.complete > span svg { animation: tik .35s ease-out both; }
/* ---- 4) telefonda yapışık alt adım çubuğu ---- */
.alt-cubuk { display: none; }
@media (max-width: 760px) {
.alt-cubuk { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 120; align-items: center; gap: 10px;
background: rgba(255, 255, 255, .96); border-top: 1px solid #dce5e9; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); box-shadow: 0 -8px 24px rgba(24, 47, 60, .08); }
.alt-cubuk .btn-ghost { width: 44px; padding: 0; justify-content: center; color: #34677b; }
.alt-cubuk .primary-button { min-height: 44px; padding: 10px 18px; gap: 8px; box-shadow: none; }
.alt-cubuk .noktalar { display: flex; gap: 7px; flex: 1; justify-content: center; }
.alt-cubuk .noktalar i { width: 8px; height: 8px; border-radius: 50%; background: #d6e1e6; transition: transform .2s, background-color .2s; }
.alt-cubuk .noktalar i.tamam { background: var(--altin-koyu); }
.alt-cubuk .noktalar i.simdi { background: #174656; transform: scale(1.4); }
.main-panel { padding-bottom: 100px; }
/* 🔴 Bu gizleme YALNIZ eski anket akışına aittir: orada düğmelerin yerine yukarıdaki sabit `.alt-cubuk` geçiyor.
ŞEMA TABANLI anket (`.g-anket`) o çubuğu HİÇ ÇİZMİYOR; kapsam daraltılmadan burası telefonda düğmeleri
gizliyor ve yerine bir şey koymuyordu — yani yeni anket 760px altında İLERLETİLEMİYORDU (Emre, 20 Eyl:
"telefonda devam tuşu çıkmıyor"). Yeni anketin şeridi aşağıda `position: sticky` ile yapışık duruyor.
**Ders: bir akış için yazılmış gizleme kuralı, o akışın sınıfına BAĞLANMALI.** */
.app-shell:not(.g-anket) .content .actions { display: none; }
.g-anket .main-panel { padding-bottom: 0; }
}
/* ---- 5) karar akışı şeması (model kartı) ---- */
.akis { display: grid; gap: 8px; margin: 10px 0 12px; }
.akis-yol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.akis .kutu { display: inline-block; padding: 6px 10px; border-radius: 8px; border: 1px solid #cfdbe1; background: #fff; color: #2c4b59; font-size: 14px; font-weight: 600; line-height: 1.3; }
.akis .kutu.koyu { background: #174656; border-color: #174656; color: #fff; }
.akis .ok { color: #8d9ea7; font-size: 15px; }
.akis em { font-family: Georgia, "Times New Roman", serif; color: #2c6976; font-size: 15px; }
.model-choice .decision-authority p { font-size: 14.5px; margin-top: 6px; }
.model-choice .decision-authority strong { font-weight: 650; }
/* ---- 6) kişi noktaları (sonuç grafiği) ---- */
.nokta-serit { display: flex; flex-wrap: wrap; gap: 5px; padding: 2px 0 0 70px; }
.nokta { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px #c9d6db; padding: 0; cursor: pointer; transition: transform .15s; }
.nokta.tercih { background: #348c7c; }
.nokta.itiraz { background: #bd6270; }
.nokta:hover, .nokta:focus-visible { transform: scale(1.35); z-index: 1; }
.public-person.vurgula { box-shadow: inset 4px 0 0 var(--altin); background: #fdfaf2; transition: background .6s; }
@media (max-width: 640px) { .nokta-serit { padding-left: 0; } }
/* ---- 7) seçim dokunuşları ---- */
@keyframes pop { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } }
.model-card.selected .option-letter, .model-card.rejected .option-letter { animation: pop .3s ease-out; }
.model-card { transition: border-color .18s, box-shadow .18s, transform .18s; }
.model-card:active { transform: scale(.995); }
.cb[data-state="checked"] > svg path { stroke-dasharray: 24; stroke-dashoffset: 24; animation: ciz .28s ease-out forwards; }
@keyframes ciz { to { stroke-dashoffset: 0; } }
.expectation-option { transition: background-color .18s, border-color .18s; }
.rd[data-state="checked"] > svg { animation: pop .25s ease-out; }
.rejection-badge, .preference-badge { animation: icerik-ileri .25s ease-out both; }
/* ---- 8) iskelet ve boş durum ---- */
@keyframes parilti { from { background-position: 100% 0; } to { background-position: 0 0; } }
.iskelet { display: grid; gap: 12px; padding: 6px 0; }
.iskelet.sade { padding: 18px 0; }
.iskelet i { display: block; height: 14px; border-radius: 6px; background: linear-gradient(90deg, #e9eef1 0%, #f6f8f9 50%, #e9eef1 100%); background-size: 200% 100%; animation: parilti 1.2s linear infinite; }
.iskelet i:first-child { height: 22px; width: 60% !important; }
.bos-kart { text-align: center; background: #fff; border: 1px dashed #c5d3d9; border-radius: 16px; padding: 36px 24px; margin: 6px 0 18px; }
.bos-ikon { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--altin-acik); color: var(--altin-metin); margin-bottom: 14px; }
.bos-kart h2 { font-size: var(--t-lg); font-weight: 600; margin-bottom: 8px; }
.bos-kart p { color: #5a707e; max-width: 460px; margin: 0 auto; }
.bos-kart .empty-responses { border: 0; padding: 0; text-align: center; }
.bos-kart .results-flow-hint { margin-top: 14px; }
/* ---- 10) yazdırma ---- */
@media print {
.journey-panel, .portal-survey-bar, .mobile-brand, .survey-utility, .actions, .alt-cubuk, .public-toolbar, .public-bottom-actions,
.portal-header, .portal-back, .results-mode-actions, .public-list-heading input, .nokta-serit, button { display: none !important; }
.app-shell { display: block; } .main-panel, .public-results { padding: 0; }
body { background: #fff; color: #000; font-size: 12pt; }
.content, .public-results { max-width: none; margin: 0; animation: none; }
.results-visual-header { background: #fff !important; color: #000 !important; border-bottom: 2px solid #000; }
.results-visual-header h2, .results-visual-header p, .results-total strong, .results-total > span { color: #000 !important; }
.chart-track > span { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.public-person { break-inside: avoid; }
details > summary { list-style: none; }
}
/* Yanıtı olan kişi: ilk sayfada ve kayıtlı ekranda belirgin "Yanıtımı düzenle" */
.mevcut-yanit { background: linear-gradient(180deg, #fbf6e8, #fdfaf2); border: 1px solid var(--altin); border-left: 5px solid var(--altin-koyu); border-radius: 12px; padding: 18px 20px; margin: 0 0 18px; }
.mevcut-yanit.kapali { background: #eef4f4; border-color: #adc7ca; border-left-color: #265969; }
.mevcut-ust { display: flex; gap: 12px; align-items: flex-start; color: var(--altin-metin); }
.mevcut-yanit.kapali .mevcut-ust { color: #254f60; }
.mevcut-ust svg { flex-shrink: 0; margin-top: 2px; }
.mevcut-ust strong { display: block; font-size: 16px; color: #1c3e4b; }
.mevcut-ust p { margin-top: 4px; font-size: 14px; color: #5a707e; }
.mevcut-yanit .portal-card-actions { margin-top: 14px; }
.duzenle-cta { min-height: 50px; font-size: 16px; }
.welcome-return { align-items: center; gap: 18px; }
.welcome-return strong { display: block; color: #233f4e; font-size: 16px; }
.welcome-return p { margin-top: 3px; }
.welcome-return > .btn { min-height: 48px; padding: 12px 20px; border-color: var(--altin-koyu); color: #1c3e4b; font-weight: 600; }
/* ---- Açılır bölümler: tıklanabilirliği belli olan tek dil (Emre, 17 Eyl) ----
summary'ler düğme gibi: çerçeve, zemin, sağda daire içinde ok; hover'da koyulaşır,
açıkken ok döner ve altın ton alır. İçerideki eski inline ok gizlenir. */
.acilir-oku { --ok-svg: url("data:image/svg+xml;utf8,"); }
.model-detay > summary, .karsilastirma-kutu > summary, .results-grouped-feedback > summary, .model-feedback > details > summary, .definitions summary {
--ok-svg: url("data:image/svg+xml;utf8,");
position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 11px 50px 11px 14px; border: 1px solid #cfdbe1; border-radius: 10px; background: #f6f9fa;
color: #1c3e4b; font-size: 14px; font-weight: 600; cursor: pointer; list-style: none; user-select: none;
transition: background-color .15s, border-color .15s, box-shadow .15s;
}
.model-detay > summary::-webkit-details-marker, .karsilastirma-kutu > summary::-webkit-details-marker, .results-grouped-feedback > summary::-webkit-details-marker, .model-feedback > details > summary::-webkit-details-marker, .definitions summary::-webkit-details-marker { display: none; }
.model-detay > summary svg, .karsilastirma-kutu > summary svg, .definitions summary svg { display: none; }
.model-detay > summary::after, .karsilastirma-kutu > summary::after, .results-grouped-feedback > summary::after, .model-feedback > details > summary::after, .definitions summary::after, .public-person > summary::after {
content: ""; position: absolute; right: 12px; top: 50%; width: 26px; height: 26px; margin-top: -13px; border-radius: 50%;
background: #fff var(--ok-svg) center / 14px 14px no-repeat; border: 1px solid #c9d6db; box-shadow: 0 1px 2px rgba(24, 47, 60, .08);
transition: transform .2s, background-color .15s, border-color .15s;
}
.model-detay > summary:hover, .karsilastirma-kutu > summary:hover, .results-grouped-feedback > summary:hover, .model-feedback > details > summary:hover, .definitions summary:hover {
background: #eef4f5; border-color: #9fb9c2; box-shadow: 0 2px 8px rgba(24, 47, 60, .08);
}
.model-detay[open] > summary, .karsilastirma-kutu[open] > summary, .results-grouped-feedback[open] > summary, .model-feedback > details[open] > summary, .definitions details[open] summary {
background: var(--altin-acik); border-color: var(--altin); color: #1c3e4b; border-bottom-left-radius: 0; border-bottom-right-radius: 0;
}
.model-detay[open] > summary::after, .karsilastirma-kutu[open] > summary::after, .results-grouped-feedback[open] > summary::after, .model-feedback > details[open] > summary::after, .definitions details[open] summary::after, .public-person[open] > summary::after {
transform: rotate(180deg); border-color: var(--altin-koyu); background-color: #fff;
}
.model-detay > summary { margin: 0 0 12px; }
.model-detay[open] > summary { margin-bottom: 0; }
.model-detay > .model-tradeoffs { border-top-left-radius: 0; border-top-right-radius: 0; border-color: var(--altin); }
.karsilastirma-kutu { border: 0; background: transparent; }
.karsilastirma-kutu > summary { padding: 14px 50px 14px 18px; font-size: 15px; }
.karsilastirma-kutu[open] > .kiyas { margin-top: 0; border-top: 0; border-color: var(--altin); border-top-left-radius: 0; border-top-right-radius: 0; }
.karsilastirma-kutu > .small { padding: 10px 4px 0; }
.results-grouped-feedback { border: 0; background: transparent; }
.results-grouped-feedback > summary { padding: 14px 50px 14px 18px; font-size: 15px; }
.results-grouped-feedback > .model-feedback { border: 1px solid var(--altin); border-top: 0; border-radius: 0 0 10px 10px; padding: 14px 18px 18px; background: #fff; }
.model-feedback > details { border: 0; margin-top: 8px; }
.model-feedback > details > summary { padding: 12px 50px 12px 14px; }
.model-feedback > details > summary > small { margin: 0; font-weight: 500; }
.model-feedback-body { border: 1px solid var(--altin); border-top: 0; border-radius: 0 0 10px 10px; padding: 0 16px 6px; }
.definitions summary { display: inline-flex; width: auto; padding: 8px 44px 8px 12px; font-size: 13.5px; }
.definitions summary::after { width: 22px; height: 22px; margin-top: -11px; right: 10px; background-size: 12px 12px; }
.definitions details[open] summary { border-radius: 10px 10px 0 0; }
.definitions details[open] p { background: #fdfaf2; border: 1px solid var(--altin); border-top: 0; border-radius: 0 10px 10px 10px; padding: 10px 12px; margin: 0; }
.definitions details[open] p + p { border-top: 0; border-radius: 0 0 10px 10px; padding-top: 0; }
.public-person > summary { position: relative; padding-right: 54px; }
.public-person > summary::after { --ok-svg: url("data:image/svg+xml;utf8,"); }
.public-person > summary:hover::after { border-color: #9fb9c2; }
.public-table-head { padding-right: 54px; }
@media (max-width: 640px) { .public-person > summary { padding-right: 44px; } .public-person > summary::after { right: 8px; width: 22px; height: 22px; margin-top: -11px; background-size: 12px 12px; } .public-table-head { padding-right: 44px; } }
/* Eleme kural kartı: üç yol (1 / 2 / 0 model) + canlı sayaç; kilitli kart */
.eleme-kural { background: #fff; border: 2px solid #b62e3c; border-radius: 14px; padding: 18px 20px; margin: 22px 0; box-shadow: 0 8px 28px rgba(182, 46, 60, .08); }
.eleme-kural-baslik { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.eleme-kural-baslik strong { color: #8f2630; font-size: 17px; }
.eleme-sayac { display: inline-block; padding: 6px 12px; border-radius: 999px; background: #fff1f2; color: #922632; font-size: 13px; font-weight: 700; border: 1px solid #e9b6bc; }
.eleme-yollar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.eleme-yol { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border: 1px solid #e4ebef; border-radius: 10px; background: #f8fafb; transition: background-color .15s, border-color .15s; }
.eleme-yol.aktif { background: #fff1f2; border-color: #b62e3c; }
.eleme-no { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #ad2836; color: #fff; font-weight: 800; font-size: 14px; }
.eleme-yol:last-child .eleme-no { background: #3f788d; }
.eleme-yol strong { display: block; color: #1c3e4b; font-size: 14px; }
.eleme-yol p { margin-top: 3px; color: #5b7480; font-size: 13px; line-height: 1.5; }
.eleme-not { display: flex; gap: 8px; align-items: flex-start; margin: 14px 0 0; color: #7a2b34; font-size: 13.5px; line-height: 1.55; }
.eleme-not svg { flex-shrink: 0; margin-top: 3px; }
.choice-check { width: 22px; height: 22px; margin-top: 5px; margin-left: auto; border-radius: 6px; }
.rejected .choice-check { background: #b62e3c; border-color: #b62e3c; color: #fff; }
.model-card.kilitli { opacity: .55; }
.model-card.kilitli .model-choice { cursor: not-allowed; }
.kilit-not { display: block; margin-top: 10px; color: #7b8e97; font-size: 13px; }
@media (max-width: 640px) { .eleme-yollar { grid-template-columns: minmax(0, 1fr); } .eleme-kural { padding: 16px; } }
/* Yönetim: e-postası olmayan Diamond (hedefe sayılır, e-posta alamaz) */
.eposta-yok { color: #922632; font-weight: 600; }
/* Giriş sayfası üst yazısı (ad: Ortak Akıl) */
.portal-intro > .portal-ustyazi { margin: 0 auto 14px; color: var(--altin-koyu, #a88a4a); font-size: 13px; font-weight: 700; letter-spacing: .18em; }
/* Avatar: kişinin kendi fotoğrafı ya da baş harfleri (altın halka) */
.avatar { display: inline-grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; overflow: hidden;
background: linear-gradient(145deg, #1f4a59, #132f3a); color: #f1e2b3; font-weight: 700; font-size: 15px; letter-spacing: .02em;
box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--altin, #c9a75c); }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar.kucuk { width: 30px; height: 30px; font-size: 12px; box-shadow: 0 0 0 1.5px var(--altin, #c9a75c); }
.avatar.buyuk { width: 84px; height: 84px; font-size: 30px; }
.portal-dashboard-heading { display: flex; justify-content: flex-start; align-items: center; gap: 22px; }
.portal-kisi { display: inline-flex; align-items: center; gap: 14px; margin-left: auto; }
.portal-kisi .portal-exit { margin-left: 0; }
.bar-kisi { display: inline-flex; align-items: center; gap: 10px; }
.dogrulandi .avatar { margin-right: 4px; }
@media (max-width: 640px) { .avatar.buyuk { width: 64px; height: 64px; font-size: 24px; } .portal-dashboard-heading { gap: 16px; } }
@media print { .avatar { display: none; } }
/* Fotoğraf ekle/değiştir + sonuç listesinde kişi fotoğrafı */
.avatar-dugme { position: relative; padding: 0; border: 0; background: none; border-radius: 50%; cursor: pointer; flex-shrink: 0; line-height: 0; }
.avatar-dugme:disabled { opacity: .6; cursor: progress; }
.avatar-dugme:focus-visible { outline: 3px solid var(--altin, #c9a75c); outline-offset: 6px; }
.avatar-rozet { position: absolute; right: -4px; bottom: -2px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
background: #173f4d; color: #fff; border: 2px solid #fff; transition: transform .15s ease; }
.avatar-dugme:hover .avatar-rozet { transform: scale(1.08); background: var(--altin-koyu, #a88a4a); }
.portal-dashboard-heading p.foto-satir { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-top: 8px; font-size: 13px; color: #6a808b; }
.foto-link { padding: 0; border: 0; background: none; color: #1f5a6e; font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.foto-link:disabled { color: #6a808b; text-decoration: none; cursor: progress; }
.foto-hata { color: #a3283a; font-weight: 600; }
.avatar.kisi { width: 36px; height: 36px; font-size: 13px; margin-right: 12px; }
.kisi-ad { display: flex; align-items: center; min-width: 0; }
.kisi-ad strong { min-width: 0; }
/* Yönetim: ek e-postalar */
.ek-form select.inp { appearance: auto; min-height: 44px; }
.ek-liste li { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.ek-liste li small { display: block; }
/* Sonuç listesi — açılan bölüm: seçimler (olgu satırları) ile kişinin KENDİ sözleri (alıntı kartları) ayrışır */
.public-reasons { padding: 16px 20px 24px; }
.secim-ozet { margin: 0; display: grid; gap: 0; border: 1px solid #e6edf0; border-radius: 10px; background: #fbfcfd; overflow: hidden; }
.secim-ozet > div { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 14px; padding: 11px 16px; border-top: 1px solid #edf1f3; }
.secim-ozet > div:first-child { border-top: 0; }
.secim-ozet dt { color: #6b808a; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding-top: 2px; }
.secim-ozet dd { margin: 0; color: #24414e; font-size: 14px; font-weight: 600; }
.secim-ozet dd small { display: block; margin-top: 3px; color: #7b8e97; font-size: 12.5px; font-weight: 400; }
.secim-ozet dd > span { display: block; }
.secim-ozet dd > span + span { margin-top: 4px; }
.secim-ozet .expectation-answer { margin: 0; padding: 0; background: none; border: 0; }
.secim-ozet .expectation-answer ul { margin: 0; }
.soz-bolum { margin-top: 18px; }
.public-reasons p.soz-baslik { display: flex; align-items: center; margin: 0 0 10px; color: #6a5a2c; font-size: 13px; letter-spacing: .02em; }
.soz-baslik .avatar.kisi { width: 28px; height: 28px; font-size: 11px; margin-right: 10px; }
.soz-baslik strong { color: #3a2f12; }
.soz { position: relative; margin: 0 0 12px; padding: 16px 20px 16px 54px; border-radius: 12px; background: linear-gradient(180deg, #fdf8ea, #fffdf6); border: 1px solid #ead9a6; border-left: 5px solid var(--altin-koyu, #a88a4a); }
.soz::before { content: "\201C"; position: absolute; left: 16px; top: 4px; font-family: Georgia, 'Times New Roman', serif; font-size: 54px; line-height: 1; color: var(--altin, #c9a75c); }
.soz.itiraz { background: linear-gradient(180deg, #fdf1f2, #fffafa); border-color: #ecc4c9; border-left-color: #b62e3c; }
.soz.itiraz::before { color: #d98a93; }
.soz-etiket { display: block; margin-bottom: 6px; color: #7a6a3a; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.soz.itiraz .soz-etiket { color: #9a2f3b; }
.public-reasons .soz p.public-quote { margin: 0; padding: 0; background: none; border: 0; color: #1d2f38; font-size: 15.5px; line-height: 1.65; font-style: italic; }
@media (max-width: 640px) { .secim-ozet > div { grid-template-columns: minmax(0, 1fr); gap: 3px; } .soz { padding: 14px 16px 14px 46px; } .soz::before { left: 12px; font-size: 46px; } }
/* Model bazında görüşler: kişi listesiyle aynı alıntı kartları */
.model-feedback-body article.gorus { border-top: 0; padding: 14px 0 2px; }
.model-feedback-body article.gorus + article.gorus { border-top: 1px dashed #e3dcc4; }
.model-feedback-body p.soz-baslik { display: flex; align-items: center; margin: 0 0 10px; color: #6a5a2c; font-size: 13px; white-space: normal; }
.model-feedback-body .soz p.public-quote { margin: 0; padding: 0; background: none; border: 0; color: #1d2f38; font-size: 15.5px; line-height: 1.65; font-style: italic; white-space: pre-wrap; overflow-wrap: anywhere; }
/* ===== Hazırlanan anketler: amaç kutusu, güçlü zaman rozeti, öneri alanı ===== */
.hazirlik-amac, .oneri-cagri { display: flex; gap: 14px; align-items: flex-start; margin: 14px 0 26px; padding: 16px 18px; border-radius: 12px; background: linear-gradient(180deg, #fbf6e8, #fdfaf2); border: 1px solid var(--altin, #c9a75c); color: #6a5a2c; }
.hazirlik-amac svg, .oneri-cagri svg { flex-shrink: 0; margin-top: 2px; color: var(--altin-koyu, #a88a4a); }
.hazirlik-amac strong, .oneri-cagri strong { display: block; color: #2b2410; font-size: 16px; }
.portal-planned .hazirlik-amac p, .oneri-cagri p { margin: 5px 0 0; color: #5d5433; font-size: 14px; line-height: 1.6; }
.oneri-cagri { align-items: center; flex-wrap: wrap; margin: 22px 0 8px; text-align: left; }
.oneri-cagri > div { flex: 1 1 260px; }
.zaman-rozet { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; padding: 7px 14px; border-radius: 999px; background: #173f4d; color: #f4e6b8; font-size: 13.5px; font-weight: 700; letter-spacing: .02em; }
.zaman-rozet svg { color: var(--altin, #c9a75c); }
.oneri-ac { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 560px; margin-top: 14px; padding: 12px 16px; border-radius: 10px; border: 1px solid #cfdce2; background: #fff; color: #1c3e4b; font: inherit; font-weight: 600; cursor: pointer; text-align: left; transition: border-color .15s, background-color .15s; }
.oneri-ac:hover, .oneri-ac.acik { border-color: var(--altin-koyu, #a88a4a); background: #fdfaf2; }
.oneri-ac span { flex: 1; }
.oneri-ac small { padding: 3px 10px; border-radius: 999px; background: #eef3f5; color: #496471; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.oneri-ac.acik small { background: #f1e6c4; color: #5d4a12; }
.oneri-alan { max-width: 760px; margin-top: 12px; padding: 16px; border: 1px solid #e3dcc4; border-radius: 12px; background: #fff; }
.oneri-form label { display: block; margin-bottom: 6px; color: #233f4e; font-size: 14px; font-weight: 600; }
.oneri-form-alt { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 8px; }
.oneri-form-alt small { color: #6b808a; font-size: 12.5px; }
.oneri-not { color: #6a5a2c; font-size: 13.5px; }
.oneri-liste { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
.oneri { padding: 14px 16px; border: 1px solid #e6edf0; border-radius: 10px; background: #fbfcfd; }
.oneri.benim { border-color: #d9c78f; background: #fffdf6; }
.oneri.alindi { border-color: #8fbfa3; background: #f4fbf6; }
.oneri-ust { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 0; }
.oneri-ust strong { color: #1c3e4b; font-size: 14.5px; }
.oneri-ust em { font-family: inherit; margin-left: 8px; color: #7a6a3a; font-size: 12px; font-style: normal; font-weight: 700; }
.oneri-ust small { margin-left: 8px; color: #8a9aa2; font-size: 12px; }
.alindi-rozet { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; padding: 4px 10px; border-radius: 999px; background: #1f6b45; color: #fff; font-size: 12px; font-weight: 700; }
.portal-planned .oneri-metin, .oneri-metin { margin: 10px 0 12px; color: #1d2f38; font-size: 15px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.oneri-alt { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.oy-dugme { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 8px 14px; border-radius: 999px; border: 1px solid #cfdce2; background: #fff; color: #33515e; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s; }
.oy-dugme b { padding-left: 2px; font-weight: 800; }
.oy-dugme.destek:hover, .oy-dugme.destek.secili { border-color: #1f6b45; background: #e8f5ed; color: #14502f; }
.oy-dugme.karsi { color: #66777f; font-weight: 500; }
.oy-dugme.karsi:hover, .oy-dugme.karsi.secili { border-color: #a9b6bc; background: #eef1f3; color: #3c4a51; }
.oy-dugme:disabled { opacity: .6; cursor: progress; }
.oy-sayi { display: inline-flex; align-items: center; gap: 6px; color: #14502f; font-size: 13.5px; font-weight: 700; }
.oy-sayi.karsi { color: #7b8a91; font-weight: 500; }
.oneri-islem { display: inline-flex; gap: 14px; margin-left: auto; }
.oneri-bos { padding: 14px; border: 1px dashed #d5dfe4; border-radius: 10px; color: #6b808a; font-size: 14px; text-align: center; }
.oneri-yonetim-baslik { margin: 18px 0 6px; font-size: 15px; color: #1c3e4b; }
.oneri-yonetim-liste li { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.oneri-yonetim-liste li.soluk { opacity: .55; }
.oneri-yonetim-metin { display: block; margin-top: 4px; color: #33515e; font-size: 13.5px; white-space: pre-wrap; }
.oneri-yonetim-liste small svg { vertical-align: -2px; }
@media (max-width: 640px) { .oneri-alan { padding: 12px; } .oy-dugme { flex: 1 1 auto; justify-content: center; } .oneri-islem { margin-left: 0; } .alindi-rozet { margin-left: 0; } .oneri-form-alt { flex-wrap: wrap; } }
@media print { .oneri-ac, .oneri-alan, .hazirlik-amac, .oneri-cagri { display: none; } }
/* Eleme gerekçesi: elenen kartın İÇİNDE, modele özel kutu */
.kart-gerekce { margin: 4px 22px 18px 72px; padding: 14px 16px; border-radius: 10px; background: #fff; border: 1px solid #ecc4c9; border-left: 4px solid #b62e3c; }
.kart-gerekce label { display: block; margin-bottom: 8px; color: #7a1f2a; font-size: 14.5px; font-weight: 700; }
.kart-gerekce label span { margin-left: 6px; color: #9a5a62; font-size: 12.5px; font-weight: 500; }
.kart-gerekce .ta { width: 100%; }
.gerekce-yonlendirme { display: flex; gap: 8px; align-items: flex-start; margin: 18px 0 0; padding: 12px 14px; border-radius: 10px; background: #fff1f2; color: #7a2b34; font-size: 14px; line-height: 1.55; }
.gerekce-yonlendirme svg { flex-shrink: 0; margin-top: 3px; }
@media (max-width: 640px) { .kart-gerekce { margin: 4px 14px 16px; } }
/* ===== Hazırlanan anketler — kart düzeni (17 Eyl, ikinci tur) ===== */
.hazirlanan > h2 { font-size: 24px; letter-spacing: -.01em; }
.hazirlanan .portal-survey-sequence > li { grid-template-columns: 46px minmax(0, 1fr); gap: 18px; padding-bottom: 22px; }
.hazirlanan .portal-survey-sequence > li:not(:last-child):before { left: 22px; top: 50px; width: 2px; background: linear-gradient(180deg, var(--altin, #c9a75c), #e7dfc6 70%, transparent); }
.hazirlanan .portal-sequence-number { width: 46px; height: 46px; margin-top: 14px; font-size: 17px; font-weight: 800; color: #3a2f12; background: linear-gradient(145deg, #f6e9bf, #e3cc8a); border: 0; box-shadow: 0 0 0 4px #fbf6e8, 0 4px 10px rgba(168, 138, 74, .25); }
.hazirlanan .portal-survey-sequence article.hazirlik-kart, .hazirlanan .portal-survey-sequence > li:last-child article.hazirlik-kart { padding: 0; border: 1px solid #e1e8ec; border-radius: 16px; background: #fff; overflow: hidden; box-shadow: 0 1px 2px rgba(23, 63, 77, .04), 0 10px 28px rgba(23, 63, 77, .06); transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease; }
.hazirlanan .hazirlik-kart:hover { border-color: #d9c78f; box-shadow: 0 1px 2px rgba(23, 63, 77, .05), 0 16px 36px rgba(23, 63, 77, .1); }
.hazirlik-ust { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 18px 22px 0; }
.hazirlanan .portal-sequence-label { color: #8a7436; font-size: 11.5px; font-weight: 800; letter-spacing: .12em; }
.hazirlik-ust .zaman-rozet { margin-top: 0; padding: 6px 13px; font-size: 12.5px; }
.hazirlanan .hazirlik-kart h3 { margin: 10px 22px 6px; color: #12303b; font-size: 22px; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; }
.hazirlanan .hazirlik-kart > p { margin: 0 22px 18px; max-width: 760px; color: #536a76; font-size: 15px; line-height: 1.65; }
.hazirlik-alt { padding: 14px 22px 18px; background: linear-gradient(180deg, #fbf8ee, #fdfbf4); border-top: 1px solid #efe6c9; }
.hazirlik-alt .oneri-ac { max-width: none; margin-top: 0; padding: 12px 14px; gap: 14px; border: 1px solid #e2d5a8; border-radius: 12px; background: #fff; box-shadow: 0 1px 0 rgba(168, 138, 74, .12); }
.hazirlik-alt .oneri-ac:hover { border-color: var(--altin-koyu, #a88a4a); background: #fffdf6; transform: translateY(-1px); }
.hazirlik-alt .oneri-ac.acik { border-color: var(--altin-koyu, #a88a4a); background: #fffdf6; }
.oneri-ikon { flex-shrink: 0; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: #173f4d; color: #f1e2b3; font-style: normal; }
.oneri-ac > span { display: block; min-width: 0; }
.oneri-ac > span strong { display: block; color: #12303b; font-size: 15.5px; font-weight: 700; }
.oneri-ac > span em { display: block; margin-top: 2px; color: #6b7f89; font-family: inherit; font-size: 13px; font-style: normal; font-weight: 400; }
.hazirlik-alt .oneri-ac small { padding: 5px 12px; background: #f1e6c4; color: #5d4a12; font-size: 12.5px; }
.oneri-ok { flex-shrink: 0; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid #d9c78f; color: #6a5a2c; font-style: normal; transition: transform .2s ease; }
.oneri-ac.acik .oneri-ok { transform: rotate(180deg); background: #f1e6c4; }
.hazirlik-alt .oneri-alan { max-width: none; margin-top: 12px; border-color: #e2d5a8; box-shadow: 0 6px 18px rgba(23, 63, 77, .05); }
@media (max-width: 640px) {
.hazirlanan .portal-survey-sequence > li { grid-template-columns: minmax(0, 1fr); gap: 0; }
.hazirlanan .portal-survey-sequence > li:not(:last-child):before { display: none; }
.hazirlanan .portal-sequence-number { position: absolute; z-index: 1; top: -2px; left: 16px; width: 34px; height: 34px; margin: 0; font-size: 14px; box-shadow: 0 0 0 3px #fff; }
.hazirlik-ust { padding: 22px 16px 0 60px; } .hazirlanan .hazirlik-kart h3 { margin: 12px 16px 6px; font-size: 19px; } .hazirlanan .hazirlik-kart > p { margin: 0 16px 16px; }
.hazirlik-alt { padding: 12px; } .oneri-ac > span em { display: none; } .hazirlik-alt .oneri-ac small { white-space: normal; text-align: center; }
}
/* Yönetim: önerilerin yapay zekâ özeti */
.oneri-ozet { margin: 14px 0 20px; padding: 16px 18px; border-radius: 14px; border: 1px solid #d9c78f; background: linear-gradient(180deg, #fdf9ec, #fffdf7); }
.oneri-ozet.bos { background: #fbfcfd; border-color: #e1e8ec; }
.ozet-ust { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.ozet-dugme { display: inline-flex; align-items: center; gap: 8px; }
.ozet-zaman { flex: 1 1 240px; color: #6a5a2c; font-size: 13px; line-height: 1.5; }
.oneri-ozet.bos .ozet-zaman { color: #5b707b; }
.oneri-yonetim .ozet-genel { margin: 16px 0 4px; color: #1d2f38; font-size: 15.5px; line-height: 1.65; font-weight: 500; }
.ozet-anket { margin-top: 18px; padding-top: 16px; border-top: 1px solid #ead9a6; }
.ozet-anket h3 { margin: 0 0 6px; color: #12303b; font-size: 18px; }
.ozet-anket h4 { margin: 16px 0 8px; color: #8a7436; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.oneri-yonetim .ozet-anket p { margin: 4px 0; color: #33515e; font-size: 14.5px; line-height: 1.6; }
.ozet-tema, .ozet-tartisma { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ozet-tema li { padding: 12px 14px; border-radius: 10px; background: #fff; border: 1px solid #ece3c4; }
.ozet-tema strong { color: #12303b; font-size: 15px; }
.ozet-sayi { float: right; margin-left: 10px; padding: 3px 10px; border-radius: 999px; background: #e8f5ed; color: #14502f; font-size: 12px; font-weight: 700; }
.ozet-tema small { display: block; margin-top: 4px; color: #7b8a91; font-size: 12.5px; }
.ozet-tartisma li { padding: 10px 14px; border-radius: 10px; background: #fff6f6; border: 1px solid #efcfd3; color: #4a2a2f; font-size: 14.5px; line-height: 1.55; }
.ozet-soru { margin: 0; padding-left: 22px; display: grid; gap: 12px; }
.ozet-soru > li { color: #12303b; font-size: 15px; line-height: 1.5; }
.ozet-soru ul { margin: 6px 0 4px; padding-left: 18px; color: #33515e; font-size: 14px; font-weight: 400; }
.ozet-soru small { display: block; color: #7b8a91; font-size: 12.5px; }
.oneri-yonetim .ozet-not { margin-top: 16px; color: #8a7a4a; font-size: 12.5px; }
@media print { .ozet-dugme, .oneri-ozet .foto-link { display: none; } }
/* Yarım kalan yanıt: karşılama bandı + panel rozeti */
.mevcut-yanit.yarim { background: linear-gradient(180deg, #eef6f8, #f7fbfc); border-color: #9fc3cf; border-left-color: #1f5a6e; }
.mevcut-yanit.yarim .mevcut-ust { color: #1f5a6e; }
.durum-rozet.yarim { background: #eaf4f7; border: 1px solid #9fc3cf; color: #173f4d; }
/* Yorumlara isimsiz oy çubuğu (alıntı kartının altında) */
.yorum-oy { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 14px; padding-top: 12px; border-top: 1px dashed rgba(120, 100, 50, .25); }
.soz.itiraz .yorum-oy { border-top-color: rgba(150, 60, 70, .22); }
.yorum-oy .oy-dugme { min-height: 36px; padding: 6px 13px; font-size: 13px; font-style: normal; background: rgba(255, 255, 255, .85); }
.yorum-oy small { margin-left: auto; color: #8a8f93; font-size: 12px; font-style: normal; }
.yorum-oy.kendi small { color: #7a6a3a; font-weight: 700; }
.yorum-oy .oy-sayi { font-style: normal; }
.yorum-oy-hata { flex-basis: 100%; color: #a3283a; font-size: 13px; font-style: normal; font-weight: 600; }
.yorum-oy-hata a { color: inherit; }
@media (max-width: 640px) { .yorum-oy small { margin-left: 0; flex-basis: 100%; } .yorum-oy .oy-dugme { flex: 1 1 auto; justify-content: center; } }
@media print { .yorum-oy .oy-dugme, .yorum-oy small { display: none; } }
/* Yazı boyutu düğmesi (A / A+) */
html.yazi-buyuk #kok { zoom: 1.15; }
.yazi-dugme { position: fixed; left: 14px; bottom: 14px; z-index: 60; display: inline-flex; align-items: baseline; gap: 1px; min-width: 52px; height: 40px; padding: 0 12px; border-radius: 999px;
border: 1px solid #cfd9de; background: rgba(255, 255, 255, .96); color: #173f4d; font-family: inherit; line-height: 40px; cursor: pointer; box-shadow: 0 4px 14px rgba(23, 63, 77, .16); }
.yazi-dugme span { font-size: 13px; font-weight: 700; } .yazi-dugme b { font-size: 19px; font-weight: 800; } .yazi-dugme i { margin-left: 3px; font-style: normal; font-size: 15px; font-weight: 800; color: var(--altin-koyu, #a88a4a); }
.yazi-dugme[aria-pressed="true"] { background: #173f4d; color: #f4e6b8; border-color: #173f4d; }
.yazi-dugme:focus-visible { outline: 3px solid var(--altin, #c9a75c); outline-offset: 3px; }
@media (max-width: 760px) { .yazi-dugme { bottom: 84px; left: 10px; height: 36px; line-height: 36px; min-width: 46px; opacity: .92; } }
@media print { .yazi-dugme { display: none; } }
/* Yönetim: yorum özeti — model başına lehte / aleyhte */
.ozet-modeller { display: grid; gap: 12px; margin-top: 16px; }
.ozet-model { padding: 14px 16px; border-radius: 12px; background: #fff; border: 1px solid #ece3c4; }
.ozet-model h3 { margin: 0 0 10px; color: #12303b; font-size: 16px; }
.ozet-iki { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ozet-iki h4 { margin: 0 0 6px; }
.ozet-arg { margin: 0; padding-left: 18px; display: grid; gap: 6px; color: #24414e; font-size: 14.5px; line-height: 1.55; }
.ozet-arg.lehte li::marker { color: #1f6b45; } .ozet-arg.aleyhte li::marker { color: #b62e3c; }
.ozet-arg small { display: block; color: #7b8a91; font-size: 12.5px; }
.oneri-yonetim .ozet-yok { margin: 0; color: #8a9aa2; font-size: 13.5px; }
.ozet-duz { margin: 0; padding-left: 18px; display: grid; gap: 6px; color: #24414e; font-size: 14.5px; line-height: 1.55; }
@media (max-width: 640px) { .ozet-iki { grid-template-columns: minmax(0, 1fr); } }
/* Yönetim: ek katılımcı arama */
.kat-ara { display: flex; gap: 10px; align-items: stretch; } .kat-ara .inp { flex: 1; min-width: 0; }
/* ===================== Anket motoru: doldurma, sonuç, tasarım ===================== */
.g-soru h1 { font-size: clamp(26px, 3.4vw, 36px); line-height: 1.25; }
.oneri-rozet { display: inline-flex; align-items: center; gap: 6px; margin: 4px 0 10px; padding: 5px 12px; border-radius: 999px; background: #fbf3d8; border: 1px solid #e2d5a8; color: #6a5a2c; font-size: 12.5px; font-weight: 700; }
.g-giris { white-space: pre-wrap; }
.g-bilgi { list-style: none; margin: 18px 0; padding: 0; display: grid; gap: 8px; color: #33515e; font-size: 15px; }
.g-bilgi li { display: flex; gap: 10px; align-items: center; } .g-bilgi svg { color: var(--altin-koyu, #a88a4a); flex-shrink: 0; }
.g-secenekler { display: grid; gap: 10px; margin-top: 22px; }
.g-secenek { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border: 1px solid #d5e0e5; border-radius: 12px; background: #fff; cursor: pointer; transition: border-color .15s, background-color .15s, box-shadow .15s; }
.g-secenek:hover { border-color: #9fb8c2; } .g-secenek.secili { border-color: #173f4d; background: #f1f7f9; box-shadow: 0 0 0 1px #173f4d inset; }
.g-secenek.kilitli { opacity: .5; cursor: not-allowed; }
.g-secenek strong { display: block; color: #12303b; font-size: 16px; } .g-secenek small { display: block; margin-top: 3px; color: #5b707b; font-size: 13.5px; line-height: 1.5; }
.g-secenek .rd, .g-secenek .cb { margin-top: 2px; flex-shrink: 0; }
.g-ipucu { margin: 12px 0 0; color: #6b808a; font-size: 13.5px; }
.g-olcek { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.g-olcek-d { width: 58px; height: 58px; border-radius: 14px; border: 1px solid #cfdce2; background: #fff; color: #12303b; font: inherit; font-size: 20px; font-weight: 700; cursor: pointer; transition: all .15s; }
.g-olcek-d:hover { border-color: #173f4d; } .g-olcek-d.secili { background: #173f4d; border-color: #173f4d; color: #f4e6b8; transform: translateY(-2px); }
.g-olcek-uc { display: flex; justify-content: space-between; max-width: 420px; margin-top: 8px; color: #6b808a; font-size: 13px; }
.g-siralama { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; }
.g-siralama li { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid #d5e0e5; border-radius: 12px; background: #fff; }
.g-siralama b { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #173f4d; color: #f4e6b8; font-size: 14px; flex-shrink: 0; }
.g-siralama li > span:nth-child(2) { flex: 1; color: #12303b; font-weight: 600; }
.g-sira-d { display: inline-flex; gap: 6px; } .g-sira-d button { width: 38px; height: 38px; border-radius: 10px; border: 1px solid #cfdce2; background: #f6f9fa; font-size: 17px; cursor: pointer; }
.g-sira-d button:disabled { opacity: .35; cursor: default; }
.g-siralama.sonuc small { color: #6b808a; font-size: 12.5px; }
.g-gerekce { margin-top: 20px; padding: 14px 16px; border-radius: 12px; background: #fbfcfd; border: 1px solid #e1e8ec; border-left: 4px solid var(--altin-koyu, #a88a4a); }
.g-gerekce label { display: block; margin-bottom: 8px; color: #233f4e; font-weight: 700; font-size: 14.5px; } .g-gerekce label span { margin-left: 6px; color: #7b8a91; font-weight: 500; font-size: 12.5px; }
.g-ozet { margin: 18px 0 22px; display: grid; gap: 0; border: 1px solid #e1e8ec; border-radius: 12px; overflow: hidden; background: #fff; }
.g-ozet > div { padding: 14px 16px; border-top: 1px solid #edf1f3; } .g-ozet > div:first-child { border-top: 0; }
.g-ozet dt { display: flex; justify-content: space-between; gap: 12px; color: #5b707b; font-size: 13.5px; font-weight: 600; } .g-ozet dd { margin: 6px 0 0; color: #12303b; font-size: 15.5px; font-weight: 600; }
.g-ozet .public-quote { margin-top: 8px; font-weight: 400; font-size: 14px; } .g-sira-ozet { margin: 0; padding-left: 20px; font-weight: 600; } .g-metin-ozet { font-weight: 400; white-space: pre-wrap; }
.g-onizleme-bant { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 16px; background: #173f4d; color: #f4e6b8; font-size: 14px; } .g-onizleme-bant .foto-link { color: #fff; margin-left: auto; }
.g-sonuc-kart { margin: 22px 0; padding: 22px; border: 1px solid #e1e8ec; border-radius: 16px; background: #fff; box-shadow: 0 8px 24px rgba(23, 63, 77, .05); }
.g-sonuc-kart h2 { margin: 6px 0 8px; font-size: 21px; color: #12303b; line-height: 1.35; }
.g-cubuklar { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 14px; }
.g-cubuk-ust { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 6px; color: #24414e; font-size: 14.5px; } .g-cubuklar li.onde .g-cubuk-ust span { font-weight: 700; }
.g-kimler { margin-top: 6px; } .g-kimler summary { display: inline; cursor: pointer; color: #1f5a6e; font-size: 12.5px; font-weight: 600; padding: 0; border: 0; background: none; } .g-kimler summary::after { display: none; } .g-kimler p { margin: 6px 0 0; color: #5b707b; font-size: 13px; line-height: 1.6; }
.g-ortalama { margin: 10px 0 0; color: #33515e; font-size: 15px; } .g-ortalama strong { font-size: 30px; color: #12303b; }
.g-gerekceler { margin-top: 16px; }
.yonetim-secici { margin: 0 0 16px; padding: 12px 14px; border: 1px solid #d9c78f; border-radius: 12px; background: #fdfaf2; } .yonetim-secici label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 700; color: #6a5a2c; }
.yonetim-secici select.inp, .tasarim select.inp { appearance: auto; min-height: 44px; width: 100%; }
.tasarim > label, .t-soru > label { display: block; margin: 12px 0 5px; color: #233f4e; font-size: 13.5px; font-weight: 600; }
.tasarim .inp, .tasarim .ta { width: 100%; }
.t-sorular { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.t-soru { padding: 16px; border: 1px solid #e1e8ec; border-left: 4px solid #173f4d; border-radius: 12px; background: #fbfcfd; }
.t-soru-ust { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; } .t-soru-ust strong { color: #12303b; } .t-soru-d { margin-left: auto; display: inline-flex; gap: 12px; }
.t-satir { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 18px; margin-top: 12px; } .t-satir label { display: grid; gap: 5px; color: #233f4e; font-size: 13px; font-weight: 600; }
.t-kisa { width: 84px !important; } .t-onay { display: inline-flex !important; grid-auto-flow: column; align-items: center; gap: 8px !important; cursor: pointer; }
.t-ekle { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 16px 0 4px; } .t-ekle span { color: #5b707b; font-size: 13.5px; font-weight: 600; } .t-ekle .btn { min-height: 38px; padding: 6px 12px; font-size: 13.5px; }
.t-eylem { margin-top: 16px; } .t-ac { margin-top: 20px; padding-top: 6px; border-top: 1px dashed #d9c78f; }
.ozet-aktar { margin-left: 10px; font-size: 12.5px; }
@media (max-width: 640px) { .g-olcek-d { width: 50px; height: 50px; } .g-sonuc-kart { padding: 16px; } .t-soru-d { margin-left: 0; } }
/* ===== Yönetim: anket listesi → anket sayfası · Katılımcılar ===== */
.yonetim-nav { display: inline-flex; gap: 4px; margin: 4px 0 18px; padding: 4px; border-radius: 12px; background: #eaf0f3; }
.yonetim-nav button { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border: 0; border-radius: 9px; background: none; color: #496471; font: inherit; font-weight: 600; font-size: 14.5px; cursor: pointer; }
.yonetim-nav button.secili { background: #fff; color: #12303b; box-shadow: 0 1px 3px rgba(23, 63, 77, .12), inset 0 -2px 0 var(--altin, #c9a75c); }
.yonetim-aciklama { margin: 0 0 14px; color: #5b707b; font-size: 14px; }
.yonetim-anketler { display: grid; gap: 14px; }
.yonetim-anket { margin: 0; border-left: 5px solid #cfdce2; transition: box-shadow .2s, border-color .2s; }
.yonetim-anket.acik { border-left-color: #1f6b45; } .yonetim-anket.hazirlik { border-left-color: var(--altin-koyu, #a88a4a); } .yonetim-anket.kapali { border-left-color: #8a9aa2; }
.yonetim-anket:hover { box-shadow: 0 10px 28px rgba(23, 63, 77, .1); }
.yonetim-anket h2 { margin: 8px 0 6px; } .yonetim-sayi { margin: 0 0 12px; color: #33515e; font-size: 15px; } .yonetim-sayi strong { color: #12303b; font-size: 17px; }
.portal-tag.hazirlik { background: #fbf3d8; color: #6a5a2c; }
.yonetim-anket-ust { margin: 0 0 18px; padding: 16px 18px; border-radius: 14px; background: linear-gradient(180deg, #f3f7f9, #fbfcfd); border: 1px solid #dfe8ec; }
.yonetim-anket-ust .portal-back { margin: 0 0 12px; } .yonetim-anket-ust h2 { margin: 8px 0 4px; font-size: 24px; color: #12303b; } .yonetim-anket-ust p { margin: 0; color: #5b707b; font-size: 14.5px; }
.giremeyen-not { margin: 0 0 8px; color: #6b808a; font-size: 13px; }
/* ===== Gündem + Toplantılar (Aşama 1-2) ===== */
.gtoplanti { display: flex; gap: 14px; align-items: flex-start; margin: 4px 0 18px; padding: 16px 18px; border-radius: 14px; background: #173f4d; color: #e8f1f4; }
.gtoplanti svg { flex-shrink: 0; margin-top: 2px; color: var(--altin, #c9a75c); }
.gtoplanti strong { display: block; font-size: 17px; color: #fff; } .gtoplanti p { margin: 4px 0 0; font-size: 14px; color: #c7d8de; }
.gtoplanti-ad { display: block; margin-top: 2px; color: #f4e6b8; font-size: 14px; font-weight: 600; }
.gtoplanti.kesin { background: linear-gradient(135deg, #173f4d, #1f6b45); } .gtoplanti.bos { background: #eaf0f3; color: #33515e; } .gtoplanti.bos strong { color: #12303b; } .gtoplanti.bos p { color: #5b707b; }
.gbolum { margin: 22px 0 0; } .gbolum > h2 { display: flex; align-items: baseline; gap: 10px; margin: 0 0 12px; font-size: 20px; color: #12303b; } .gbolum > h2 small { padding: 2px 10px; border-radius: 999px; background: #eaf0f3; color: #496471; font-size: 13px; }
.gform { margin: 0 0 16px; padding: 16px; border: 1px solid var(--altin, #c9a75c); border-radius: 12px; background: #fdfaf2; }
.gliste { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 12px; }
.gmadde { padding: 16px 18px; border: 1px solid #e0e9ed; border-left: 5px solid #cfdce2; border-radius: 12px; background: #fff; transition: box-shadow .2s, border-color .2s; }
.gmadde:hover { box-shadow: 0 8px 22px rgba(23, 63, 77, .08); }
.gmadde.benim { border-left-color: var(--altin-koyu, #a88a4a); background: #fffdf6; } .gmadde.secili, .gmadde.gundemde { border-left-color: #1f6b45; } .gmadde.karar { border-left-color: #173f4d; } .gmadde.gizli { opacity: .6; }
.gmadde-ust { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gmadde-kim { display: grid; line-height: 1.3; } .gmadde-kim strong { color: #1c3e4b; font-size: 14.5px; } .gmadde-kim em { font-family: inherit; font-style: normal; font-weight: 700; font-size: 12px; color: #7a6a3a; } .gmadde-kim small { color: #8a9aa2; font-size: 12px; }
.gsira { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #173f4d; color: #f4e6b8; font-weight: 800; font-size: 15px; }
.gdurum { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; color: #fff; background: #496471; }
.gdurum.karar { background: #173f4d; } .gdurum.gorusuldu { background: #1f6b45; } .gdurum.gizli { background: #8a9aa2; }
.gmadde-baslik { margin: 12px 0 6px; font-size: 18px; line-height: 1.35; color: #12303b; }
.gmadde-aciklama { margin: 0 0 10px; color: #3d5560; font-size: 15px; line-height: 1.6; white-space: pre-line; }
.gmadde-not { display: flex; gap: 8px; margin: 0 0 10px; padding: 10px 12px; border-radius: 10px; background: #eef6f1; color: #1d4a33; font-size: 14px; } .gmadde-not svg { flex-shrink: 0; margin-top: 2px; }
.gdestekciler { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 10px; color: #496471; font-size: 13.5px; }
.gdestek-yuzler { display: inline-flex; } .gdestek-yuzler .avatar { margin-left: -8px; box-shadow: 0 0 0 2px #fff; } .gdestek-yuzler .avatar:first-child { margin-left: 0; }
.avatar.mini { width: 26px; height: 26px; font-size: 10.5px; } .avatar.mini img { width: 26px; height: 26px; }
.gmadde-alt { flex-wrap: wrap; } .yorum-dugme.secili { border-color: #173f4d; background: #eaf0f3; color: #12303b; }
.gmod { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px; padding-top: 10px; border-top: 1px dashed #d6e1e6; font-size: 13.5px; } .gmod-sira { font-weight: 700; color: #1f6b45; }
.gsonuc { margin-top: 12px; padding: 12px; border-radius: 10px; background: #f3f7f9; } .gsonuc label { font-size: 13px; font-weight: 600; color: #33515e; } .gsonuc-dugmeler { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.gyorumlar { margin-top: 12px; padding-top: 12px; border-top: 1px solid #e6edf0; } .gyorumlar ul { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 10px; }
.gyorumlar li { display: flex; gap: 10px; align-items: flex-start; } .gyorumlar li > div { flex: 1; min-width: 0; } .gyorumlar li.soluk { opacity: .55; }
.gyorumlar li strong { color: #1c3e4b; font-size: 13.5px; } .gyorumlar li small { color: #8a9aa2; font-size: 12px; } .gyorumlar li p { margin: 2px 0 0; color: #33515e; font-size: 14.5px; line-height: 1.55; white-space: pre-line; }
.gyorum-form { display: flex; gap: 10px; align-items: flex-end; } .gyorum-form textarea { flex: 1; } @media (max-width: 560px) { .gyorum-form { flex-direction: column; align-items: stretch; } }
.gmod-kart { border-left: 5px solid var(--altin-koyu, #a88a4a); } .gtoplanti-form { margin-top: 14px; padding-top: 14px; border-top: 1px solid #e6edf0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* ===== Anketler sekmesi: açık anket göstergesi ===== */
.sekme-canli { display: inline-block; width: 9px; height: 9px; margin-left: 7px; border-radius: 50%; background: #1f6b45; vertical-align: middle; }
.sekme-canli.nabiz { background: #d9822b; box-shadow: 0 0 0 0 rgba(217, 130, 43, .6); animation: sekmeNabiz 1.4s ease-out infinite; }
.sekme-cagri { animation: sekmeCagri 1.4s ease-in-out infinite; color: #8a4b0f !important; font-weight: 700; }
@keyframes sekmeNabiz { 0% { box-shadow: 0 0 0 0 rgba(217, 130, 43, .65); } 70% { box-shadow: 0 0 0 9px rgba(217, 130, 43, 0); } 100% { box-shadow: 0 0 0 0 rgba(217, 130, 43, 0); } }
@keyframes sekmeCagri { 0%, 100% { background-color: transparent; } 50% { background-color: #fbe9d2; } }
@media (prefers-reduced-motion: reduce) { .sekme-canli.nabiz, .sekme-cagri { animation: none; } .sekme-cagri { background-color: #fbe9d2; } }
/* ===== Toplantı notları (Aşama 3-4) ===== */
.tnot-uyari { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; padding: 10px 14px; border-radius: 10px; background: #eaf0f3; color: #33515e; font-size: 13.5px; } .tnot-uyari svg { flex-shrink: 0; color: #496471; }
.tnot-kutu { margin: 12px 0 16px; } .tnot-kutu:empty { display: none; } .tnot-kutu > .portal-tag { margin-bottom: 10px; }
.tnot-kutu.taslak, .tnot-kutu.islem, .tnot-kutu.hata { padding: 14px 16px; border: 1px dashed var(--altin-koyu, #a88a4a); border-radius: 12px; background: #fffdf6; }
.tnot { margin-top: 14px; } .tnot-bolum { margin: 0 0 22px; } .tnot-bolum > h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 17px; color: #12303b; } .tnot-bolum > h3 svg { color: var(--altin-koyu, #a88a4a); }
.tnot-genel { margin: 0; padding: 14px 16px; border-radius: 12px; background: linear-gradient(180deg, #f3f7f9, #fbfcfd); border: 1px solid #dfe8ec; color: #24414d; font-size: 15.5px; line-height: 1.65; }
.tnot-kararlar { margin: 0; padding-left: 22px; display: grid; gap: 8px; color: #1d4a33; font-weight: 600; line-height: 1.5; } .tnot-kararlar li::marker { color: #1f6b45; }
.tnot-isler, .tnot-acik { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .tnot-isler li, .tnot-acik li { padding: 10px 12px; border-radius: 10px; background: #f6f9fa; border: 1px solid #e6edf0; color: #33515e; line-height: 1.5; } .tnot-isler small { display: block; margin-top: 2px; color: #7a6a3a; font-weight: 700; font-size: 12.5px; }
.tnot-madde { margin: 0 0 12px; padding: 14px 16px; border: 1px solid #e0e9ed; border-left: 5px solid #173f4d; border-radius: 12px; background: #fff; } .tnot-madde h4 { margin: 0 0 6px; font-size: 16px; color: #12303b; } .tnot-madde > p { margin: 0 0 10px; color: #3d5560; line-height: 1.6; }
.tnot-gundem { margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: #e8f5ed; color: #14502f; font-size: 11.5px; font-weight: 700; vertical-align: middle; }
.tnot-gorusler { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px; } .tnot-gorusler li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; background: linear-gradient(180deg, #fdf8ea, #fffdf6); border: 1px solid #ead9a6; }
.tnot-gorusler strong { color: #2b2410; font-size: 13.5px; } .tnot-gorusler p { margin: 2px 0 0; color: #4a4025; font-size: 14.5px; line-height: 1.55; }
.tnot-pay { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 7px; } .tnot-pay li { display: grid; grid-template-columns: 26px minmax(90px, 190px) 1fr auto; gap: 10px; align-items: center; font-size: 13.5px; color: #33515e; }
.tnot-pay-ad { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; } .tnot-pay-cubuk { height: 10px; border-radius: 999px; background: #eaf0f3; overflow: hidden; } .tnot-pay-cubuk i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #173f4d, #2f7d8f); } .tnot-pay-sure { color: #5b707b; font-size: 12.5px; white-space: nowrap; }
@media (max-width: 560px) { .tnot-pay li { grid-template-columns: 26px 1fr auto; } .tnot-pay-cubuk { grid-column: 1 / -1; } }
.tnot-mod { margin: 12px 0; padding: 12px 14px; border-radius: 12px; background: #f3f7f9; } .tnot-esle { margin-top: 10px; } .tnot-esle summary { cursor: pointer; font-weight: 700; color: #12303b; }
.esle-liste li { align-items: center; } .esle-sec { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .esle-sec select { min-width: 200px; }
.tnot-duzenle h3 { margin: 16px 0 6px; font-size: 15px; color: #12303b; } .tnot-d-satir { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 8px; } .tnot-d-satir textarea { flex: 1; } .tnot-d-satir .inp { max-width: 200px; }
.tnot-d-madde { margin-bottom: 14px; padding: 12px; border: 1px solid #e0e9ed; border-radius: 10px; display: grid; gap: 8px; }
.tgundem { margin-top: 12px; } .tgundem summary { cursor: pointer; font-weight: 700; color: #33515e; padding: 6px 0; }
.tmetin { margin-top: 14px; padding-top: 14px; border-top: 1px solid #e6edf0; } .tmetin-ust { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .tmetin-ust h3 { margin: 0; font-size: 17px; color: #12303b; }
.tmetin-ara { display: flex; gap: 8px; } .tmetin-ara .inp { width: 220px; max-width: 60vw; }
.tmetin-liste { list-style: none; margin: 12px 0; padding: 0; display: grid; gap: 10px; } .tmetin-liste li { display: grid; grid-template-columns: 62px 26px 1fr auto; gap: 10px; align-items: flex-start; } .tmetin-liste li.soluk { opacity: .5; }
.tmetin-saat { color: #8a9aa2; font-size: 12px; font-variant-numeric: tabular-nums; padding-top: 4px; } .tmetin-liste strong { color: #1c3e4b; font-size: 13.5px; } .tmetin-liste p { margin: 2px 0 0; color: #33515e; font-size: 14.5px; line-height: 1.6; }
@media (max-width: 560px) { .tmetin-liste li { grid-template-columns: 26px 1fr; } .tmetin-saat { grid-column: 1 / -1; padding: 0; } }
.tmetin-sayfa { display: flex; align-items: center; justify-content: center; gap: 14px; color: #5b707b; font-size: 14px; }
.gtakvim { margin-top: 16px; padding-top: 14px; border-top: 1px solid #e6edf0; } .gtakvim h3 { margin: 0 0 4px; font-size: 16px; color: #12303b; }
/* ===== Gündem — yeniden tasarım (17 Eyl): kahraman alan, destek sütunlu kartlar, açılır ayrıntılar ===== */
.ghero { position: relative; display: flex; align-items: stretch; justify-content: space-between; gap: 24px; margin: 0 0 18px; padding: 28px 30px; border-radius: 22px; overflow: hidden; color: #eaf3f6;
background: radial-gradient(120% 140% at 100% 0%, rgba(201, 167, 92, .28), transparent 55%), linear-gradient(135deg, #0f2f3a 0%, #173f4d 55%, #1d5466 100%); box-shadow: 0 18px 40px rgba(15, 47, 58, .22); }
.ghero::after { content: ''; position: absolute; right: -60px; bottom: -80px; width: 260px; height: 260px; border-radius: 50%; border: 1px solid rgba(244, 230, 184, .18); box-shadow: 0 0 0 40px rgba(244, 230, 184, .05), 0 0 0 90px rgba(244, 230, 184, .03); pointer-events: none; }
.ghero > svg { display: none; } .ghero-sol { position: relative; z-index: 1; display: grid; gap: 4px; align-content: start; min-width: 0; }
.ghero-ust { font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--altin, #c9a75c); }
.ghero .ghero-gun { display: block; font-size: clamp(26px, 4.2vw, 38px); line-height: 1.12; font-weight: 800; color: #fff; letter-spacing: -.01em; }
.ghero-saat { font-size: 17px; font-weight: 600; color: #f4e6b8; } .ghero .gtoplanti-ad { display: inline; margin: 0; color: #d6e6ec; font-weight: 500; font-size: inherit; }
.ghero .ghero-durum { margin: 10px 0 0; max-width: 56ch; color: #c2d6dd; font-size: 14.5px; line-height: 1.5; }
.btn.ghero-cta { justify-self: start; margin-top: 16px; display: inline-flex; align-items: center; gap: 8px; padding: 13px 22px; border: 0; border-radius: 999px; background: linear-gradient(180deg, #e2c27a, #c9a75c); color: #1d1606; font-weight: 800; font-size: 15.5px; box-shadow: 0 8px 20px rgba(201, 167, 92, .35); transition: transform .15s, box-shadow .15s; }
.btn.ghero-cta:hover { transform: translateY(-1px); box-shadow: 0 12px 26px rgba(201, 167, 92, .45); }
.ghero-sag { position: relative; z-index: 1; display: grid; align-content: center; justify-items: center; gap: 8px; flex-shrink: 0; } .ghero-sag small { color: #a9c3cc; font-size: 12px; letter-spacing: .04em; }
.ghero-sayac { display: flex; gap: 10px; } .ghero-sayac span { display: grid; justify-items: center; min-width: 74px; padding: 12px 10px; border-radius: 16px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(244, 230, 184, .22); backdrop-filter: blur(4px); }
.ghero-sayac b { font-size: 34px; line-height: 1; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; } .ghero-sayac i { margin-top: 4px; font-style: normal; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: #f4e6b8; }
.ghero-rozet { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: #1f6b45; color: #fff; box-shadow: 0 0 0 8px rgba(31, 107, 69, .25); }
.ghero.kesin { background: radial-gradient(120% 140% at 100% 0%, rgba(31, 107, 69, .5), transparent 55%), linear-gradient(135deg, #0f2f3a, #173f4d 60%, #1b5a45); }
.ghero.bos { background: linear-gradient(135deg, #eef3f5, #f7fafb); color: #33515e; box-shadow: none; border: 1px dashed #c4d3da; } .ghero.bos .ghero-gun { color: #12303b; font-size: clamp(20px, 3vw, 26px); } .ghero.bos .ghero-durum { color: #5b707b; } .ghero.bos .ghero-ust { color: var(--altin-koyu, #a88a4a); } .ghero.bos::after { display: none; }
@media (max-width: 640px) { .ghero { flex-direction: column; padding: 22px 20px; } .ghero-sag { justify-items: start; } .ghero-sayac span { min-width: 64px; padding: 10px 8px; } .ghero-sayac b { font-size: 28px; } }
.gac { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: 0; border-radius: 999px; background: none; color: #496471; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; } .gac:hover { background: #eaf0f3; color: #12303b; } .gac svg:last-child { transition: transform .2s; } .gac.acik svg:last-child { transform: rotate(180deg); }
.gmod-kart { margin: 0 0 18px; border: 1px solid #ead9a6; border-radius: 16px; background: #fffdf6; overflow: hidden; } .gmod-cubuk { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; }
.gmod-durum { flex: 1; min-width: 180px; color: #5a4c22; font-size: 14px; font-weight: 600; } .gmod-dugmeler { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .gmod-dugmeler .btn { padding: 9px 16px; font-size: 14px; }
.gmod-ic { padding: 4px 18px 18px; border-top: 1px solid #f0e4bd; background: #fff; animation: gAcil .22s ease-out; } .gmod-ic .gtoplanti-form { border-top: 0; margin-top: 8px; padding-top: 8px; }
@keyframes gAcil { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.gform-sarma { margin: 0 0 18px; animation: gAcil .22s ease-out; } .gform-sarma .gform { margin: 0; border-radius: 16px; box-shadow: 0 10px 28px rgba(23, 63, 77, .08); }
.gbolum > h2 { font-size: 18px; letter-spacing: -.005em; }
.gmadde { padding: 0; border-left-width: 1px; border-radius: 16px; overflow: hidden; } .gmadde.benim, .gmadde.secili, .gmadde.gundemde, .gmadde.karar { border-left-width: 1px; } .gmadde.benim { border-color: #ead9a6; } .gmadde.secili { border-color: #1f6b45; box-shadow: 0 0 0 2px rgba(31, 107, 69, .15); }
.gmadde-govde { display: grid; grid-template-columns: 84px 1fr; gap: 0; } .gmadde-ic { min-width: 0; padding: 16px 18px 14px 4px; }
.goy { display: grid; justify-items: center; align-content: center; gap: 2px; margin: 12px; padding: 12px 6px; min-height: 84px; border-radius: 14px; border: 1px solid #dbe6ea; background: #f6f9fa; color: #33515e; font: inherit; }
button.goy { cursor: pointer; transition: transform .12s, background-color .15s, border-color .15s, box-shadow .15s; } button.goy:hover { transform: translateY(-2px); border-color: #1f6b45; background: #eef7f1; box-shadow: 0 8px 18px rgba(31, 107, 69, .14); }
.goy b { padding: 0; font-size: 24px; line-height: 1.1; font-weight: 800; color: #12303b; font-variant-numeric: tabular-nums; } .goy span { font-size: 11px; font-weight: 700; letter-spacing: .02em; color: #5b707b; } .goy svg { color: #8aa0aa; }
button.goy.secili { border-color: #1f6b45; background: linear-gradient(180deg, #1f6b45, #185638); } button.goy.secili b, button.goy.secili span, button.goy.secili svg { color: #fff; } .goy.sabit { background: none; border-style: dashed; }
.gmadde-govde > .gsira { align-self: start; justify-self: center; margin: 18px 0 0; width: 44px; height: 44px; font-size: 19px; }
.gmadde-bas { display: flex; align-items: flex-start; gap: 10px; } .gmadde-bas .gdurum { margin-left: auto; flex-shrink: 0; } .gmadde-baslik { margin: 0 0 6px; font-size: 18.5px; font-weight: 700; letter-spacing: -.005em; }
.gmadde-kim { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; line-height: 1.3; margin-bottom: 8px; } .gmadde-kim strong { font-size: 13.5px; } .gmadde-kim em { padding: 1px 8px; border-radius: 999px; background: #fbf3d8; } .gmadde-kim small::before { content: '· '; }
.gmadde-aciklama { margin: 0 0 6px; font-size: 14.5px; } .gmadde-aciklama.kisa { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .gdevam { margin: 0 0 8px; font-size: 13px; }
.gmadde-ic .gmadde-alt { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 8px; } .gmadde-alt .gdestekciler { margin: 0; flex: 1; min-width: 0; font-size: 12.5px; } .gdestek-adlar { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gdestek-bos { flex: 1; color: #9aabb3; font-size: 12.5px; } .gdestek-say { display: inline-flex; align-items: center; gap: 5px; color: #496471; font-size: 13px; font-weight: 700; }
.gmadde-alt .yorum-dugme { min-height: 34px; padding: 6px 12px; } .gmadde > .gmod, .gmadde > .gsonuc, .gmadde > .gyorumlar { margin: 0; padding: 12px 18px; border-top: 1px solid #eef2f4; background: #fbfcfd; border-radius: 0; } .gmadde > .gmod { border-top-style: dashed; }
@media (max-width: 560px) { .gmadde-govde { grid-template-columns: 68px 1fr; } .goy { margin: 10px 8px; min-height: 72px; } .goy b { font-size: 20px; } }
.gbos { display: grid; justify-items: center; gap: 6px; padding: 36px 20px; border: 1px dashed #c4d3da; border-radius: 16px; background: #f9fbfc; color: #5b707b; text-align: center; } .gbos svg { color: var(--altin-koyu, #a88a4a); } .gbos strong { color: #12303b; font-size: 17px; }
.gnasil { margin: 22px 0 0; text-align: center; } .gnasil-liste { max-width: 640px; margin: 10px auto 0; padding: 16px 20px 16px 38px; border-radius: 14px; background: #f6f9fa; color: #3d5560; font-size: 14px; line-height: 1.6; text-align: left; animation: gAcil .22s ease-out; } .gnasil-liste strong { color: #12303b; }
@media (prefers-reduced-motion: reduce) { .gmod-ic, .gform-sarma, .gnasil-liste { animation: none; } button.goy:hover, .btn.ghero-cta:hover { transform: none; } }
.ghero .ghero-rozet svg { color: #fff; margin: 0; } .ghero .ghero-cta svg { color: inherit; margin: 0; }
.goy { align-self: start; } button.oy-dugme.goy { border-radius: 14px; min-height: 84px; padding: 12px 6px; gap: 2px; }
button.oy-dugme.goy.secili, button.oy-dugme.goy.secili:hover { border-color: #1f6b45; background: linear-gradient(180deg, #23774d, #185638); color: #fff; }
.gmadde > .gmod { padding: 7px 18px; justify-content: flex-end; gap: 14px; font-size: 12.5px; background: none; } .gmadde > .gmod .foto-link { font-size: 12.5px; color: #6b808a; } .gmadde > .gmod .gmod-sira { margin-right: auto; }
.gmadde-govde { grid-template-columns: 104px 1fr; } .goy span { font-size: 10.5px; letter-spacing: 0; white-space: nowrap; } button.oy-dugme.goy { width: 80px; justify-self: center; }
@media (max-width: 560px) { .gmadde-govde { grid-template-columns: 92px 1fr; } button.oy-dugme.goy, .goy { width: 74px; margin: 10px 8px; } .gmadde-ic { padding-right: 12px; } .gmadde-baslik { font-size: 16.5px; } }
.gmadde-alt .yorum-dugme { flex: 0 0 auto; width: auto; margin-left: auto; } .gmadde-alt .gdestekciler { flex-wrap: nowrap; }
@media (max-width: 560px) { .gmadde-alt .gdestek-adlar { display: none; } .gmadde-alt .gdestekciler { flex: 0 1 auto; } .gmadde-kim small { flex-basis: 100%; } .gmadde-kim small::before { content: ''; } }
/* ===== Anketler sekmesi: CANLI oylama rozeti — kırmızı, yüksek sesli (Emre, 17 Eyl) ===== */
.sekme-canli, .sekme-canli.nabiz { display: inline-flex; align-items: center; gap: 6px; width: auto; height: auto; margin-left: 9px; padding: 3px 9px 3px 7px; border-radius: 999px; background: #d91f26; color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .08em; line-height: 1.4; vertical-align: middle; box-shadow: 0 0 0 0 rgba(217, 31, 38, .7); animation: canliHale 1.5s ease-out infinite; }
.sekme-canli i { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: canliNokta 1s ease-in-out infinite; }
.sekme-canli.nabiz { padding: 4px 11px 4px 8px; font-size: 12px; animation: canliHale 1s ease-out infinite, canliZipla 1s ease-in-out infinite; }
[data-sekme="surveys"].sekme-canli-var { color: #a3151b !important; font-weight: 700; }
.sekme-cagri { animation: canliSekme 1s ease-in-out infinite; color: #a3151b !important; box-shadow: inset 0 0 0 2px rgba(217, 31, 38, .55); border-radius: 10px; }
@keyframes canliHale { 0% { box-shadow: 0 0 0 0 rgba(217, 31, 38, .75); } 70% { box-shadow: 0 0 0 12px rgba(217, 31, 38, 0); } 100% { box-shadow: 0 0 0 0 rgba(217, 31, 38, 0); } }
@keyframes canliNokta { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }
@keyframes canliZipla { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
@keyframes canliSekme { 0%, 100% { background-color: transparent; } 50% { background-color: #fde3e4; } }
@media (prefers-reduced-motion: reduce) { .sekme-canli, .sekme-canli.nabiz, .sekme-canli i, .sekme-cagri { animation: none; } .sekme-cagri { background-color: #fde3e4; } }
/* ===== Gündem: haftalık döngü şeridi ===== */
.ghero { flex-wrap: wrap; } .ghero-ust i { font-style: normal; font-weight: 600; letter-spacing: .04em; text-transform: none; color: #a9c3cc; margin-left: 6px; }
.gdongu { position: relative; z-index: 1; flex: 1 0 100%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; list-style: none; margin: 6px 0 0; padding: 14px 0 0; border-top: 1px solid rgba(244, 230, 184, .16); }
.gdongu li { display: flex; align-items: center; gap: 9px; min-width: 0; opacity: .55; } .gdongu li.gecti { opacity: .8; } .gdongu li.simdi { opacity: 1; }
.gdongu b { display: grid; place-items: center; flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; border: 1px solid rgba(244, 230, 184, .4); color: #f4e6b8; font-size: 12px; font-weight: 800; }
.gdongu li.gecti b { background: rgba(31, 107, 69, .9); border-color: transparent; color: #fff; } .gdongu li.simdi b { background: var(--altin, #c9a75c); border-color: transparent; color: #1d1606; box-shadow: 0 0 0 4px rgba(201, 167, 92, .25); }
.gdongu span { display: grid; min-width: 0; color: #fff; font-size: 13.5px; font-weight: 700; line-height: 1.25; } .gdongu small { color: #a9c3cc; font-size: 11.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 560px) { .gdongu { grid-template-columns: repeat(2, 1fr); row-gap: 12px; } }
/* ===== Karar defteri (Aşama 5) ===== */
.khero { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin: 0 0 16px; padding: 22px 26px; border-radius: 20px; color: #eaf3f6; background: radial-gradient(120% 160% at 100% 0%, rgba(201, 167, 92, .25), transparent 55%), linear-gradient(135deg, #0f2f3a, #173f4d 60%, #1d5466); box-shadow: 0 14px 32px rgba(15, 47, 58, .18); }
.khero strong { display: block; margin: 4px 0; font-size: clamp(22px, 3.4vw, 30px); font-weight: 800; color: #fff; } .khero strong em { font-style: normal; color: #ffb4b0; } .khero p { margin: 0; color: #c2d6dd; font-size: 14px; } .khero .btn.ghero-cta { margin: 0; }
.ksuzgec { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 14px; } .ksuzgec button { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid #dbe6ea; border-radius: 999px; background: #fff; color: #496471; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.ksuzgec button b { padding: 1px 7px; border-radius: 999px; background: #eaf0f3; color: #33515e; font-size: 12px; } .ksuzgec button.secili { border-color: #173f4d; background: #173f4d; color: #fff; } .ksuzgec button.secili b { background: rgba(255, 255, 255, .18); color: #fff; }
.kliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.kkart { position: relative; display: grid; grid-template-columns: 40px 1fr; gap: 12px; padding: 14px 16px; border: 1px solid #e0e9ed; border-radius: 14px; background: #fff; } .kkart.benim { border-color: #ead9a6; background: #fffdf6; } .kkart.gecikti { border-color: #f0b9b6; background: #fff8f7; } .kkart.tamam, .kkart.iptal { opacity: .72; }
.kkart-ikon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #eaf0f3; color: #33515e; } .kkart.karar .kkart-ikon { background: #173f4d; color: #f4e6b8; } .kkart.tamam .kkart-ikon { background: #1f6b45; color: #fff; } .kkart.gecikti .kkart-ikon { background: #d9443c; color: #fff; }
.kkart-metin { margin: 0 0 8px; color: #12303b; font-size: 15.5px; font-weight: 600; line-height: 1.5; } .kkart.tamam .kkart-metin { text-decoration: line-through; text-decoration-color: #9ab3a5; }
.kkart-alt { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12.5px; color: #5b707b; } .kkisi { display: inline-flex; align-items: center; gap: 6px; } .kkisi strong { color: #1c3e4b; font-size: 13px; } .kkisi em { font-style: normal; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: #fbf3d8; color: #7a6a3a; font-size: 11.5px; } .kkisi.bos { color: #9aabb3; }
.kdurum { padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 800; letter-spacing: .02em; background: #eaf0f3; color: #33515e; } .kdurum.suruyor { background: #fbf3d8; color: #6a5a2c; } .kdurum.tamam { background: #e8f5ed; color: #14502f; } .kdurum.iptal { background: #eef1f3; color: #6b7a82; } .kdurum.karar { background: #173f4d; color: #f4e6b8; } .kdurum.gecikti { background: #d9443c; color: #fff; }
.ktarih { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; } .kkart.gecikti .ktarih { color: #b3261e; } .kkaynak { flex-basis: 100%; color: #8a9aa2; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kkart-not { margin: 8px 0 0; padding: 8px 12px; border-radius: 10px; background: #f6f9fa; color: #3d5560; font-size: 13.5px; line-height: 1.5; } .kkart-guncelle { margin-top: 8px; font-size: 13px; } .kkart-sil { position: absolute; top: 10px; right: 14px; font-size: 12px; color: #9aabb3; }
.kkart-form { margin-top: 10px; animation: gAcil .2s ease-out; } .kkart-dugmeler { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; } .kkart-dugmeler .btn { padding: 8px 14px; font-size: 13.5px; }
.kform { margin: 0 0 16px; } .kform-tur { display: inline-flex; gap: 4px; margin-bottom: 12px; padding: 4px; border-radius: 12px; background: #eaf0f3; } .kform-tur button { padding: 8px 14px; border: 0; border-radius: 9px; background: none; font: inherit; font-size: 13.5px; font-weight: 600; color: #496471; cursor: pointer; } .kform-tur button.secili { background: #fff; color: #12303b; box-shadow: 0 1px 3px rgba(23, 63, 77, .14); }
.kanket { margin-top: 26px; } .kanket > summary { cursor: pointer; padding: 10px 0; font-weight: 700; color: #33515e; } .kanket .portal-survey-card { margin-top: 10px; }
.gacikis { margin: 0 0 18px; border: 1px solid #dbe6ea; border-radius: 16px; background: #fff; overflow: hidden; } .gacikis.gecikenli { border-color: #f0b9b6; }
.gacikis-bas { display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 16px; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; color: #12303b; } .gacikis-bas:hover { background: #f6f9fa; } .gacikis-bas > svg:first-child { color: var(--altin-koyu, #a88a4a); } .gacikis-bas span { flex: 1; display: grid; } .gacikis-bas strong { font-size: 15px; } .gacikis-bas small { color: #6b808a; font-size: 12.5px; } .gacikis.gecikenli .gacikis-bas small { color: #b3261e; }
.gacikis-bas > svg:last-child { transition: transform .2s; color: #8aa0aa; } .gacikis-bas.acik > svg:last-child { transform: rotate(180deg); } .gacikis .kliste { padding: 4px 14px 0; animation: gAcil .2s ease-out; } .gacikis .portal-card-actions { padding: 10px 14px 14px; margin: 0; }
.gmadde-anket { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 8px; padding: 8px 12px; border-radius: 10px; background: #eef3fb; color: #1f3f73; font-size: 13.5px; } .gsonuc-ipucu { display: block; margin-top: 8px; color: #6b808a; font-size: 12px; }
.khero strong em, .kkisi em { font-family: inherit; }
.kkart-ata { display: grid; grid-template-columns: 1fr 170px auto; gap: 10px; align-items: end; margin-top: 12px; padding-top: 12px; border-top: 1px dashed #d6e1e6; } .kkart-ata label { font-size: 12.5px; font-weight: 600; color: #33515e; } .kkart-ata .btn { padding: 9px 14px; font-size: 13.5px; }
@media (max-width: 640px) { .kkart-ata { grid-template-columns: 1fr; } }
/* ===== Tasarım turu (17 Eyl): karşılama kartı · okuma modu · sohbet görünümü · halkalı konuşma payı · lider kartı ===== */
.karsilama { margin: 0 0 18px; padding: 16px 20px 18px; border-radius: 18px; border: 1px solid #ead9a6; background: linear-gradient(180deg, #fffaf0, #fffdf8); box-shadow: 0 8px 22px rgba(168, 138, 74, .12); }
.karsilama-ust { display: block; margin-bottom: 10px; font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--altin-koyu, #a88a4a); }
.karsilama-ana { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .karsilama-ana > div { flex: 1; min-width: 200px; } .karsilama-ana strong { display: block; font-size: 19px; line-height: 1.3; color: #12303b; } .karsilama-ana p { margin: 3px 0 0; color: #5b707b; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60ch; }
.karsilama-ikon { display: grid; place-items: center; flex-shrink: 0; width: 50px; height: 50px; border-radius: 14px; background: #173f4d; color: #f4e6b8; } .karsilama .btn.ghero-cta { margin: 0; }
.karsilama.canli { border-color: #f0b9b6; background: linear-gradient(180deg, #fff5f4, #fffafa); box-shadow: 0 8px 22px rgba(217, 31, 38, .12); } .karsilama.canli .karsilama-ust { color: #b3261e; } .karsilama.canli .karsilama-ikon { background: #d91f26; color: #fff; animation: canliHale 1.5s ease-out infinite; }
.karsilama.canli .btn.ghero-cta { background: linear-gradient(180deg, #e3343a, #c2181f); color: #fff; box-shadow: 0 8px 20px rgba(217, 31, 38, .3); } .karsilama.gecikti .karsilama-ikon { background: #d9443c; color: #fff; }
.karsilama-diger { list-style: none; margin: 14px 0 0; padding: 12px 0 0; border-top: 1px dashed #e6d7aa; display: grid; gap: 4px; } .karsilama-diger button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 8px; border: 0; border-radius: 10px; background: none; font: inherit; font-size: 14px; color: #33515e; text-align: left; cursor: pointer; } .karsilama-diger button:hover { background: rgba(23, 63, 77, .06); } .karsilama-diger button span { flex: 1; } .karsilama-diger svg:last-child { color: #9aabb3; }
.karsilama.bos { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-color: #cfe6d8; background: #f3faf6; box-shadow: none; color: #1d4a33; font-size: 14.5px; } .karsilama.bos svg { color: #1f6b45; flex-shrink: 0; }
@media (prefers-reduced-motion: reduce) { .karsilama.canli .karsilama-ikon { animation: none; } }
.lider-ad { padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; text-align: left; border-bottom: 1px dotted transparent; } .lider-ad:hover, .lider-ad:focus-visible { border-bottom-color: currentColor; }
.lider-perde { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: 18px; background: rgba(9, 28, 35, .55); backdrop-filter: blur(3px); animation: perdeGel .18s ease-out; }
.lider-kart { position: relative; width: min(460px, 100%); max-height: 86vh; overflow: auto; padding: 24px; border-radius: 22px; background: #fff; box-shadow: 0 30px 70px rgba(9, 28, 35, .35); animation: kartGel .22s cubic-bezier(.2, .9, .3, 1.1); }
.lider-kart header { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; padding-right: 36px; } .lider-kart header strong { display: block; font-size: 21px; color: #12303b; line-height: 1.2; } .lider-sayilar { color: #5b707b; font-size: 13.5px; } .lider-sayilar b { color: #12303b; font-size: 15px; }
.lider-kart h4 { margin: 16px 0 6px; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--altin-koyu, #a88a4a); } .lider-kart ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .lider-kart li { padding: 9px 12px; border-radius: 10px; background: #f6f9fa; } .lider-kart li span { display: block; color: #1c3e4b; font-size: 14px; line-height: 1.45; } .lider-kart li small { color: #7b8d96; font-size: 12px; }
.okuma-kapat { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 50%; background: #eaf0f3; color: #12303b; cursor: pointer; } .okuma-kapat:hover { background: #dbe6ea; }
@keyframes perdeGel { from { opacity: 0; } to { opacity: 1; } } @keyframes kartGel { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
.okuma { position: fixed; inset: 0; z-index: 380; overflow: auto; background: #fbfaf6; animation: perdeGel .2s ease-out; }
.okuma-ust { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px clamp(18px, 5vw, 56px); background: rgba(15, 47, 58, .97); color: #fff; } .okuma-ust strong { display: block; font-size: 19px; } .okuma-ust small { color: #a9c3cc; font-size: 13px; } .okuma-ust .okuma-kapat { position: static; background: rgba(255, 255, 255, .12); color: #fff; flex-shrink: 0; }
.okuma-govde { display: grid; grid-template-columns: 250px minmax(0, 760px); gap: 48px; justify-content: center; padding: 34px clamp(18px, 5vw, 56px) 80px; }
.okuma-ic { position: sticky; top: 92px; align-self: start; max-height: calc(100vh - 120px); overflow: auto; font-size: 14px; } .okuma-ic strong { display: block; margin-bottom: 8px; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--altin-koyu, #a88a4a); } .okuma-ic ul { list-style: none; margin: 0; padding: 0; border-left: 2px solid #e6dfcc; }
.okuma-ic button { display: block; width: 100%; padding: 7px 12px; border: 0; background: none; font: inherit; color: #496471; text-align: left; cursor: pointer; line-height: 1.35; } .okuma-ic button:hover { color: #12303b; background: rgba(23, 63, 77, .05); } .okuma-ic li.alt button { padding-left: 24px; font-size: 13px; color: #6b808a; }
.okuma-yazi { font-size: 17px; } .okuma-yazi .tnot-genel { font-size: 18.5px; line-height: 1.75; background: none; border: 0; border-left: 4px solid var(--altin, #c9a75c); border-radius: 0; padding: 4px 0 4px 20px; } .okuma-yazi .tnot-bolum { margin-bottom: 34px; scroll-margin-top: 90px; } .okuma-yazi .tnot-madde, .okuma-yazi .tmetin { scroll-margin-top: 90px; }
.okuma-yazi .tnot-bolum > h3 { font-size: 22px; margin-bottom: 14px; } .okuma-yazi .tnot-madde > p, .okuma-yazi .tnot-kararlar, .okuma-yazi .tnot-isler li { font-size: 16.5px; line-height: 1.7; } .okuma-yazi .tnot-madde h4 { font-size: 19px; }
@media (max-width: 900px) { .okuma-govde { grid-template-columns: 1fr; gap: 18px; padding-top: 20px; } .okuma-ic { position: static; max-height: none; padding: 12px 14px; border-radius: 14px; background: #fff; border: 1px solid #e6dfcc; } .okuma-ic ul { display: flex; flex-wrap: wrap; gap: 4px; border: 0; } .okuma-ic li.alt { display: none; } .okuma-ic button { padding: 6px 12px; border-radius: 999px; background: #f3efe3; font-size: 13px; } }
.tnot-bul { display: inline-block; margin-top: 4px; font-size: 13px; }
.tnot-pay.halka { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 18px 10px; } .tnot-pay.halka li { display: grid; grid-template-columns: 1fr; justify-items: center; gap: 4px; text-align: center; }
.pay-halka { display: grid; place-items: center; width: 74px; height: 74px; border-radius: 50%; background: conic-gradient(var(--renk, #173f4d) calc(var(--pay) * 1%), #e6edf0 0); transition: transform .2s; } .tnot-pay.halka li:hover .pay-halka { transform: scale(1.06); }
.pay-halka .avatar { width: 60px; height: 60px; font-size: 19px; box-shadow: 0 0 0 3px #fff; } .pay-halka .avatar img { width: 60px; height: 60px; } .tnot-pay.halka .tnot-pay-ad { max-width: 100%; font-size: 13px; white-space: normal; line-height: 1.25; } .tnot-pay.halka .tnot-pay-sure { font-size: 12px; }
.tcizgi { margin: 12px 0 6px; } .tcizgi-serit { position: relative; height: 26px; border-radius: 8px; background: #eaf0f3; overflow: hidden; } .tcizgi-serit button { position: absolute; top: 0; bottom: 0; min-width: 3px; padding: 0; border: 0; cursor: pointer; opacity: .88; transition: opacity .12s, transform .12s; } .tcizgi-serit button:hover, .tcizgi-serit button:focus-visible { opacity: 1; transform: scaleY(1.25); z-index: 1; }
.tcizgi-alt { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; color: #8a9aa2; font-size: 11.5px; font-variant-numeric: tabular-nums; } .tcizgi-ad { flex: 1; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #5b707b; } .tcizgi-ad i { display: inline-block; width: 9px; height: 9px; margin: 0 4px 0 10px; border-radius: 3px; vertical-align: baseline; }
.tmetin-liste.sohbet { gap: 2px; } .tmetin-liste.sohbet li.tbalon { display: grid; grid-template-columns: 34px 1fr; column-gap: 10px; align-items: start; } .tmetin-liste.sohbet li.tbalon.yeni { margin-top: 14px; } .tbalon-yuz { grid-row: 1 / span 2; padding-top: 2px; }
.tbalon-kim { display: flex; align-items: baseline; gap: 8px; } .tbalon-kim strong { color: var(--renk, #173f4d); font-size: 13.5px; } .tbalon-kim .tmetin-saat, .tbalon-govde .tmetin-saat { padding: 0; font-size: 11.5px; }
.tbalon-govde { grid-column: 2; position: relative; display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; max-width: 760px; margin-top: 3px; padding: 10px 14px; border-radius: 4px 16px 16px 16px; background: #fff; border: 1px solid #e3ebee; border-left: 3px solid var(--renk, #173f4d); } .tbalon.devam .tbalon-govde { border-radius: 16px; } .tbalon-govde p { flex: 1 1 260px; margin: 0; color: #24414d; font-size: 15px; line-height: 1.6; } .tbalon-govde .foto-link { font-size: 12px; }
.tbalon.vurgu .tbalon-govde { animation: balonVurgu 2.2s ease-out; } @keyframes balonVurgu { 0%, 40% { background: #fff4d6; box-shadow: 0 0 0 3px rgba(201, 167, 92, .35); } 100% { background: #fff; box-shadow: none; } }
@media (max-width: 560px) { .tmetin-liste.sohbet li.tbalon { grid-template-columns: 28px 1fr; } }
@media (prefers-reduced-motion: reduce) { .lider-perde, .lider-kart, .okuma, .tbalon.vurgu .tbalon-govde { animation: none; } }
/* ===== UX turu (17 Eyl): 20 düzeltme ===== */
/* 10 — kısa süreli bildirimler */
.bildirimler { position: fixed; left: 50%; bottom: 18px; z-index: 600; display: grid; gap: 8px; width: min(440px, calc(100vw - 24px)); transform: translateX(-50%); pointer-events: none; }
.bildirim { pointer-events: auto; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: #12303b; color: #fff; font-size: 14.5px; line-height: 1.4; box-shadow: 0 14px 34px rgba(9, 28, 35, .35); animation: bildirimGel .24s cubic-bezier(.2, .9, .3, 1.1); }
.bildirim span { flex: 1; } .bildirim > svg { flex-shrink: 0; color: #7fd6a4; } .bildirim.hata { background: #8f1d18; } .bildirim.hata > svg { color: #ffd0cc; }
.bildirim button { display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; cursor: pointer; } .bildirim.gidiyor { opacity: 0; transform: translateY(8px); transition: opacity .2s, transform .2s; }
@keyframes bildirimGel { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
/* 9 — sitenin kendi onay katmanı */
.onay-kart { position: relative; width: min(420px, 100%); padding: 26px 24px 20px; border-radius: 20px; background: #fff; box-shadow: 0 30px 70px rgba(9, 28, 35, .35); text-align: center; animation: kartGel .22s cubic-bezier(.2, .9, .3, 1.1); }
.onay-ikon { display: inline-grid; place-items: center; width: 52px; height: 52px; margin-bottom: 12px; border-radius: 50%; background: #eaf0f3; color: #173f4d; } .onay-kart.tehlikeli .onay-ikon { background: #fde3e1; color: #b3261e; }
.onay-kart p { margin: 0 0 18px; color: #12303b; font-size: 16.5px; line-height: 1.55; } .onay-dugmeler { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; } .onay-dugmeler .btn { min-width: 130px; min-height: 46px; }
.btn.btn-tehlike { background: #c2261e; border-color: #c2261e; color: #fff; } .btn.btn-tehlike:hover { background: #a81f18; }
/* 19 — katman açıkken arka plan kaymaz */
body.katman-acik { overflow: hidden; }
/* 18 — bağlantı bandı */
.bag-bandi { position: fixed; top: 0; left: 0; right: 0; z-index: 650; padding: 9px 16px; background: #8f1d18; color: #fff; font-size: 14px; font-weight: 600; text-align: center; } body.baglanti-yok { padding-top: 38px; }
/* 7 — çalışan düğme */
.mesgul { position: relative; pointer-events: none; opacity: 1 !important; } .mesgul::before { content: ''; display: inline-block; width: 14px; height: 14px; margin-right: 8px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; vertical-align: -2px; animation: mesgulDon .7s linear infinite; }
@keyframes mesgulDon { to { transform: rotate(360deg); } }
/* 8 — destek verince sayı zıplar */
.goy.zipla b { animation: sayiZipla .35s cubic-bezier(.2, .9, .3, 1.4); } @keyframes sayiZipla { 0% { transform: scale(1); } 45% { transform: scale(1.45); } 100% { transform: scale(1); } }
/* 11 — alan sayaçları */
.sayac { display: block; margin-top: 4px; text-align: right; color: #6b7d86; font-size: 12px; font-variant-numeric: tabular-nums; } .sayac.tamam { color: #1f6b45; } .sayac.eksik { color: #8a6a1f; } .sayac.yakin { color: #b3261e; font-weight: 700; } .gyorum-form { flex-wrap: wrap; } .gyorum-form .sayac { flex-basis: 100%; order: 3; margin-top: 0; }
/* 4 + 20 — yazı boyutu: üst bantta, üç kademe */
.yazi-dugme.bant { position: static; height: 34px; min-width: 50px; padding: 0 10px; margin-right: 6px; border-radius: 999px; border: 1px solid rgba(244, 230, 184, .45); background: rgba(255, 255, 255, .08); color: #f4e6b8; box-shadow: none; opacity: 1; line-height: 1; cursor: pointer; display: inline-flex; align-items: baseline; justify-content: center; gap: 1px; }
.yazi-dugme.bant:hover { background: rgba(255, 255, 255, .16); } .yazi-dugme[data-kademe="buyuk"], .yazi-dugme[data-kademe="cokbuyuk"] { background: var(--altin, #c9a75c); color: #1d1606; border-color: transparent; }
body[data-gorunum="dashboard"] .yazi-dugme.yuzen, body[data-gorunum="entry"] .yazi-dugme.yuzen, body[data-gorunum="yukleniyor"] .yazi-dugme.yuzen { display: none; }
html.yazi-cokbuyuk #kok { zoom: 1.28; } .portal-kisi { display: inline-flex; align-items: center; gap: 8px; }
/* 5 — küçük profil */
.portal-dashboard-heading.kucuk { gap: 12px; margin-bottom: 14px; align-items: center; } .portal-dashboard-heading.kucuk .avatar.buyuk { width: 52px; height: 52px; font-size: 18px; } .portal-dashboard-heading.kucuk .avatar.buyuk img { width: 52px; height: 52px; }
.portal-dashboard-heading.kucuk .avatar-rozet { width: 20px; height: 20px; } .portal-dashboard-heading.kucuk .avatar-rozet svg { width: 11px; height: 11px; } .portal-dashboard-heading.kucuk .eyebrow { display: none; } .portal-dashboard-heading.kucuk h1 { margin: 0; font-size: 21px; line-height: 1.2; }
.portal-dashboard-heading.kucuk p { margin: 0; font-size: 13px; } .portal-dashboard-heading.kucuk .foto-satir { display: none; }
/* 3 — mobilde sekmeler yatay kayar, seçili ortaya gelir */
@media (max-width: 760px) {
.portal-tabs [data-slot="tabs-list"] { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; touch-action: pan-x; scroll-snap-type: x proximity; scrollbar-width: none; gap: 4px; -webkit-overflow-scrolling: touch; }
.portal-tabs [data-slot="tabs-list"]::-webkit-scrollbar { display: none; } .portal-tabs [data-slot="tabs-trigger"] { flex: 0 0 auto; min-width: max-content; padding-left: 14px; padding-right: 14px; scroll-snap-align: center; white-space: nowrap; }
}
.anket-alt { margin-bottom: 18px; }
/* 15 — uzun adlar ve başlıklar */
.gmadde-baslik, .kkart-metin, .tnot-madde h4, .karsilama-ana strong, .lider-kart li span, .portal-dashboard-heading h1 { overflow-wrap: anywhere; } .gmadde-bas { flex-wrap: wrap; } .gmadde-bas .gdurum { margin-left: 0; }
.lider-ad { overflow-wrap: anywhere; } .kkisi strong, .gmadde-kim strong { min-width: 0; } .gmod-cubuk .gmod-durum { overflow-wrap: anywhere; }
/* 20 — dokunma alanları ve karşıtlık */
.foto-link { display: inline-flex; align-items: center; min-height: 36px; padding: 4px 2px; } .gmadde > .gmod .foto-link, .kkart-sil, .tbalon-govde .foto-link { min-height: 36px; padding: 4px 6px; }
@media (pointer: coarse) { .foto-link, .gac, .ksuzgec button, .oy-dugme { min-height: 44px; } .okuma-ic button { padding-top: 10px; padding-bottom: 10px; } .tcizgi-serit { height: 34px; } }
.gmadde-kim small, .gdestek-bos, .kkaynak, .tmetin-saat, .gyorumlar li small, .tcizgi-alt, .oneri-ust small, .lider-kart li small, .kkisi.bos, .small.muted, .giremeyen-not, .gsonuc-ipucu { color: #5d6f78; }
.gmadde > .gmod .foto-link, .kkart-sil { color: #56686f; } .portal-tab-intro, .yonetim-aciklama, .gnasil-liste { color: #4d616b; }
@media (prefers-reduced-motion: reduce) { .bildirim, .onay-kart, .goy.zipla b { animation: none; } .mesgul::before { animation-duration: 1.6s; } }
/* mobil üst bant: başlık sıkışmasın, "Çıkış yap" kırılmasın */
.portal-exit { white-space: nowrap; } .portal-header > span:not(.portal-kisi) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
@media (max-width: 560px) { .portal-header { gap: 8px; } .portal-header > span:not(.portal-kisi) { display: none; } .portal-header .portal-kisi { margin-left: auto; } .portal-header .portal-logo img { max-height: 58px; width: auto; } }
/* ===== İleri tasarım turu (18 Eyl) — parti 1 ===== */
/* 3 — hareket sözlüğü: tek zamanlama ve eğri */
:root { --sure-kisa: .16s; --sure-orta: .26s; --sure-uzun: .42s; --egri: cubic-bezier(.2, .8, .2, 1); --egri-yay: cubic-bezier(.34, 1.56, .64, 1); }
.gmadde, .kkart, .portal-survey-card, .hazirlik-kart, .tnot-madde { transition: transform var(--sure-kisa) var(--egri), box-shadow var(--sure-orta) var(--egri); }
.gmadde:active, .kkart:active { transform: scale(.992); } .btn:active, .oy-dugme:active, .goy:active { transform: scale(.96); transition-duration: .08s; }
.btn, .oy-dugme { transition: transform var(--sure-kisa) var(--egri-yay), background-color var(--sure-kisa), border-color var(--sure-kisa), box-shadow var(--sure-orta); }
/* 1 — görünüm geçişleri */
@media (prefers-reduced-motion: no-preference) {
::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--sure-orta); animation-timing-function: var(--egri); }
html[data-gecis="sekme"]::view-transition-old(root) { animation: gecisSol var(--sure-orta) var(--egri) both; } html[data-gecis="sekme"]::view-transition-new(root) { animation: gecisSag var(--sure-orta) var(--egri) both; }
::view-transition-group(not-kart), ::view-transition-group(lider-yuz) { animation-duration: var(--sure-uzun); animation-timing-function: var(--egri); }
.okuma-ust { view-transition-name: not-kart; } .lider-kart header .avatar { view-transition-name: lider-yuz; }
}
@keyframes gecisSol { to { opacity: 0; transform: translateX(-14px); } } @keyframes gecisSag { from { opacity: 0; transform: translateX(14px); } }
/* 4 — ışık ve malzeme: metalik altın, ince doku */
.btn.ghero-cta { background: linear-gradient(110deg, #d9b871 0%, #f1d896 30%, #c9a75c 55%, #e8cc85 80%, #c9a75c 100%); background-size: 220% 100%; background-position: var(--isik, 0%) 0; transition: background-position .6s var(--egri), transform var(--sure-kisa) var(--egri-yay), box-shadow var(--sure-orta); }
.btn.ghero-cta:hover { background-position: 100% 0; } .btn.ghero-cta.kucuk { margin: 0; padding: 8px 14px; font-size: 13.5px; box-shadow: none; }
.ghero, .khero { background-blend-mode: soft-light; } .ghero::before, .khero::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .35; background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .025) 0 2px, transparent 2px 6px); }
.gmadde, .kkart, .tnot-madde { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 2px rgba(23, 63, 77, .06); }
/* 2 — katmanlı üst alan: ince çubuk */
.gcubuk { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 12px; margin: -6px -8px 14px; padding: 9px 16px; border-radius: 0 0 14px 14px; background: rgba(15, 47, 58, .96); color: #fff; box-shadow: 0 10px 24px rgba(15, 47, 58, .25); backdrop-filter: blur(6px); animation: cubukGel var(--sure-orta) var(--egri); }
.gcubuk[hidden] { display: none; } .gcubuk-gun { font-weight: 800; font-size: 14px; white-space: nowrap; } .gcubuk-durum { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #c2d6dd; font-size: 13px; }
@keyframes cubukGel { from { transform: translateY(-100%); } to { transform: none; } } body.baglanti-yok .gcubuk { top: 38px; }
/* 5 — haftanın akış çizgisi */
.hcizgi { margin: -6px 0 18px; padding: 14px 16px 10px; border: 1px solid #dbe6ea; border-radius: 14px; background: #fff; }
.hcizgi-serit { position: relative; height: 34px; border-bottom: 2px solid #dbe6ea; }
.hcizgi-gun { position: absolute; top: 0; bottom: -2px; width: 1px; background: #e6edf0; } .hcizgi-gun b { position: absolute; top: 20px; left: 3px; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #8a9aa2; }
.hcizgi-nokta { position: absolute; top: 9px; width: 9px; height: 9px; margin-left: -4px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); } .hcizgi-nokta.madde { background: var(--altin-koyu, #a88a4a); top: 4px; width: 11px; height: 11px; } .hcizgi-nokta.destek { background: #1f6b45; } .hcizgi-nokta.yorum { background: #2f6f9f; top: 14px; }
.hcizgi-simdi { position: absolute; top: -4px; bottom: -2px; width: 2px; background: #d91f26; } .hcizgi-simdi em { position: absolute; top: -12px; left: 4px; font-size: 10px; font-style: normal; font-weight: 800; color: #d91f26; }
.hcizgi-kapanis { position: absolute; top: -2px; bottom: -2px; width: 0; border-left: 2px dashed #c9a75c; } .hcizgi-toplanti { position: absolute; right: -6px; top: 6px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #173f4d; color: #f4e6b8; }
.hcizgi-alt { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 10px; font-size: 12px; color: #5d6f78; } .hcizgi-alt i { display: inline-block; width: 8px; height: 8px; margin-right: 5px; border-radius: 50%; } .hcizgi-alt i.madde { background: var(--altin-koyu, #a88a4a); } .hcizgi-alt i.destek { background: #1f6b45; } .hcizgi-alt i.yorum { background: #2f6f9f; } .hcizgi-kalan { margin-left: auto; font-weight: 700; color: #12303b; }
/* 12 — benzer madde uyarısı */
.benzer { margin: 10px 0 4px; padding: 10px 12px; border-radius: 10px; background: #fff7e6; border: 1px solid #ead9a6; font-size: 13.5px; } .benzer strong { display: inline-flex; align-items: center; gap: 6px; color: #6a5a2c; font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase; }
.benzer ul { list-style: none; margin: 6px 0; padding: 0; display: grid; gap: 4px; } .benzer li span { display: block; color: #12303b; } .benzer li small { color: #7a6a3a; } .benzer > small { color: #8a7a4a; }
/* 14 — mikrofon */
.mik { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid #cfdce2; border-radius: 50%; background: #fff; color: #33515e; cursor: pointer; } .mik[aria-pressed="true"] { background: #d91f26; border-color: #d91f26; color: #fff; animation: canliHale 1.2s ease-out infinite; }
/* 11 — kişisel özet */
.tnot-bolum.kisisel { padding: 16px 18px; border-radius: 14px; background: #fffdf6; border: 1px solid #ead9a6; } .tnot-bolum.kisisel > h3 { color: #6a5a2c; }
/* 18 — lider profili+ */
.lider-rozetler { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 6px; } .lider-rozet { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; background: #173f4d; color: #f4e6b8; font-size: 12px; font-weight: 700; }
.lider-bulut { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; margin: 6px 0 4px; color: #496471; } .lider-bulut span { font-weight: 600; }
/* 20 — temalar: yalnız üst alan ve vurgu */
html[data-tema="kamp"] { --altin: #f2b84b; --altin-koyu: #c98a1f; } html[data-tema="kamp"] .ghero, html[data-tema="kamp"] .khero, html[data-tema="kamp"] .okuma-ust, html[data-tema="kamp"] .gcubuk { background: radial-gradient(120% 140% at 100% 0%, rgba(242, 184, 75, .35), transparent 55%), linear-gradient(135deg, #0b4a6e 0%, #0e6f8c 55%, #12889d 100%); }
html[data-tema="kamp"] .ghero::after { border-color: rgba(255, 255, 255, .25); } html[data-tema="kamp"] .portal-header { background: linear-gradient(90deg, #06283a, #0b4a6e); }
html[data-tema="yilsonu"] { --altin: #e6c46a; --altin-koyu: #b8923a; } html[data-tema="yilsonu"] .ghero, html[data-tema="yilsonu"] .khero, html[data-tema="yilsonu"] .okuma-ust, html[data-tema="yilsonu"] .gcubuk { background: radial-gradient(90% 120% at 80% 0%, rgba(230, 196, 106, .4), transparent 55%), radial-gradient(60% 80% at 10% 100%, rgba(120, 90, 200, .35), transparent 60%), linear-gradient(135deg, #0a1030 0%, #16204d 60%, #221a4a 100%); }
html[data-tema="yilsonu"] .ghero::before { background: radial-gradient(circle at 20% 30%, rgba(255, 255, 255, .5) 0 1px, transparent 2px), radial-gradient(circle at 70% 20%, rgba(255, 255, 255, .45) 0 1px, transparent 2px), radial-gradient(circle at 45% 70%, rgba(255, 255, 255, .4) 0 1px, transparent 2px), radial-gradient(circle at 85% 65%, rgba(255, 255, 255, .5) 0 1px, transparent 2px); opacity: .9; }
.tema-secenekler { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; } .tema-sec { display: grid; gap: 4px; justify-items: start; padding: 12px; border: 2px solid #dbe6ea; border-radius: 14px; background: #fff; font: inherit; text-align: left; cursor: pointer; } .tema-sec.secili { border-color: var(--altin, #c9a75c); box-shadow: 0 0 0 3px rgba(201, 167, 92, .2); }
.tema-sec i { display: block; width: 100%; height: 36px; border-radius: 8px; background: linear-gradient(135deg, #0f2f3a, #173f4d 55%, #1d5466); } .tema-sec i[data-tema="kamp"] { background: linear-gradient(135deg, #0b4a6e, #12889d); } .tema-sec i[data-tema="yilsonu"] { background: linear-gradient(135deg, #0a1030, #221a4a); } .tema-sec strong { color: #12303b; } .tema-sec small { color: #6b7d86; }
@media (prefers-reduced-motion: reduce) { .gcubuk, .mik[aria-pressed="true"] { animation: none; } .gmadde:active, .kkart:active, .btn:active { transform: none; } }
/* ===== İleri tasarım turu — parti 2 ===== */
/* 6 — karar haritası */
.kgorunum { display: flex; justify-content: flex-end; margin: -6px 0 8px; } .harita { padding: 14px; border: 1px solid #dbe6ea; border-radius: 16px; background: #fff; overflow-x: auto; }
.harita-bas { display: grid; grid-template-columns: repeat(4, 1fr); min-width: 700px; margin-bottom: 6px; font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--altin-koyu, #a88a4a); }
.harita-svg { display: block; width: 100%; min-width: 700px; font: 500 13px/1 system-ui, sans-serif; } .hb { fill: none; stroke: #c9d6dc; stroke-width: 2; transition: opacity var(--sure-orta); } .hb.sonuk { opacity: .18; }
.hd rect { fill: #f3f7f9; stroke: #cfdce2; cursor: pointer; transition: fill var(--sure-kisa), stroke var(--sure-kisa); } .hd text { fill: #12303b; pointer-events: none; }
.hd.madde rect { fill: #fbf3d8; stroke: #ead9a6; } .hd.toplanti rect { fill: #eaf0f3; } .hd.karar rect { fill: #173f4d; stroke: #173f4d; } .hd.karar text { fill: #f4e6b8; } .hd.is rect { fill: #e8f5ed; stroke: #b9dcc8; } .hd.anket rect { fill: #eef3fb; stroke: #c4d3ea; }
.hd.secili rect { stroke: #d91f26; stroke-width: 2.5; } .hd.sonuk { opacity: .25; } .hd:hover rect { stroke: #12303b; }
/* 7 — akış diyagramı */
.results-akis { margin: 18px 0; } .results-akis > summary { cursor: pointer; padding: 10px 0; font-weight: 700; color: #33515e; } .akis-svg { display: block; width: 100%; max-width: 760px; margin: 8px auto 0; font: 500 13px system-ui, sans-serif; overflow: visible; }
.akis-yol { fill: none; stroke: #173f4d; opacity: .32; transition: opacity var(--sure-kisa); } .akis-yol:hover { opacity: .7; } .akis-yol.ince { stroke-dasharray: 6 5; opacity: .35; } .akis-sayi { fill: #12303b; font-size: 12px; font-weight: 800; text-anchor: middle; paint-order: stroke; stroke: #fff; stroke-width: 4px; }
.akis-dugum.sol { fill: #1f6b45; } .akis-dugum.sag { fill: #b3261e; } .akis-dugum.yok { fill: #8a9aa2; } .akis-ad { fill: #12303b; } .akis-n { font-weight: 800; fill: #5d6f78; }
/* 8 — konu ısı şeridi */
.isi { display: flex; align-items: center; gap: 8px; margin: -2px 0 10px; font-size: 12.5px; color: #5d6f78; } .isi i { display: block; height: 8px; width: clamp(60px, calc(var(--yogunluk) * 220px), 220px); border-radius: 999px; background: linear-gradient(90deg, #f4e6b8, #d97f1f calc(var(--yogunluk) * 100%), #b3261e); opacity: calc(.45 + var(--yogunluk) * .55); }
/* 9 — katılım eğrisi */
.egri { margin: 8px 0 14px; padding: 12px 14px; border-radius: 12px; background: #fff; border: 1px solid #dbe6ea; } .egri svg { display: block; width: 100%; max-width: 640px; } .egri-izgara { stroke: #eaf0f3; } .egri-etiket { fill: #8a9aa2; font-size: 10px; }
.egri-alt { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; font-size: 12.5px; color: #5d6f78; } .egri-alt i { display: inline-block; width: 12px; height: 4px; margin-right: 5px; border-radius: 2px; vertical-align: middle; }
/* 13 — görüş kümeleri */
.kume { margin: 0 0 12px; padding: 12px 14px; border-radius: 12px; background: #f6f3ea; border: 1px solid #ead9a6; } .kume-bas { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; } .kume-bas strong { display: inline-flex; align-items: center; gap: 6px; color: #6a5a2c; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; } .kume-bas small { color: #8a7a4a; } .kume-bas .foto-link { margin-left: auto; }
.kume-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .kume-liste button { display: flex; gap: 12px; align-items: flex-start; width: 100%; padding: 10px 12px; border: 1px solid #e6dfcc; border-radius: 10px; background: #fff; font: inherit; text-align: left; cursor: pointer; } .kume-liste li.secili button { border-color: #a88a4a; box-shadow: 0 0 0 3px rgba(201, 167, 92, .2); }
.kume-sayi { display: grid; place-items: center; flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px; background: #173f4d; color: #f4e6b8; font-weight: 800; } .kume-liste strong { display: block; color: #12303b; font-size: 14.5px; } .kume-liste em { display: block; margin-top: 3px; color: #5b707b; font-size: 13px; font-style: normal; }
.gyorumlar li.kume-vurgu > div { background: #fff4d6; border-radius: 8px; padding: 4px 8px; margin: -4px -8px; }
/* 15 — sunum · 17 — duvar ekranı */
.sunum, .duvar { position: fixed; inset: 0; z-index: 390; display: grid; grid-template-rows: auto 1fr auto; color: #fff; background: radial-gradient(120% 140% at 100% 0%, rgba(201, 167, 92, .28), transparent 55%), linear-gradient(135deg, #0f2f3a 0%, #173f4d 55%, #1d5466 100%); animation: perdeGel .2s ease-out; }
.sunum header, .duvar header { display: flex; align-items: center; gap: 16px; padding: 18px clamp(18px, 5vw, 60px); } .sunum header .okuma-kapat, .duvar header .okuma-kapat { position: static; margin-left: auto; background: rgba(255, 255, 255, .12); color: #fff; }
.sunum-sayfa { overflow: auto; padding: 10px clamp(18px, 8vw, 120px) 20px; animation: gAcil var(--sure-orta) var(--egri); } .sunum-sayfa h2 { margin: 0 0 22px; font-size: clamp(28px, 4.5vw, 46px); font-weight: 800; color: var(--altin, #c9a75c); letter-spacing: -.01em; }
.sunum-liste { margin: 0; padding-left: 1.2em; display: grid; gap: 14px; font-size: clamp(18px, 2.4vw, 26px); line-height: 1.4; } .sunum-liste li::marker { color: var(--altin, #c9a75c); font-weight: 800; } .sunum-liste small { display: block; margin-top: 2px; font-size: .62em; color: #a9c3cc; } .sunum-liste.kucuk { font-size: clamp(16px, 2vw, 22px); } .sunum-liste.kucuk strong { color: #fff; }
.sunum-bos { font-size: 20px; color: #a9c3cc; } .sunum-tarih { margin: 0 0 16px; font-size: 22px; color: #f4e6b8; font-weight: 700; } .sunum-pay li { color: #fff; } .sunum-pay .tnot-pay-ad, .sunum-pay .tnot-pay-sure { color: #e8f1f4; }
.sunum footer, .duvar footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px clamp(18px, 5vw, 60px) 22px; } .sunum-noktalar { display: inline-flex; gap: 6px; } .sunum-noktalar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .3); } .sunum-noktalar i.aktif { background: var(--altin, #c9a75c); }
.sunum footer .btn-outline, .duvar footer .btn-outline { border-color: rgba(255, 255, 255, .4); color: #fff; background: transparent; }
.duvar-sure { padding: 6px 14px; border-radius: 999px; background: rgba(255, 255, 255, .1); color: #f4e6b8; font-weight: 800; font-variant-numeric: tabular-nums; font-size: 18px; }
.duvar-govde { overflow: auto; padding: 10px clamp(18px, 8vw, 120px) 20px; display: grid; gap: 18px; align-content: start; animation: gAcil var(--sure-orta) var(--egri); } .gsira.buyuk { width: 64px; height: 64px; font-size: 28px; background: var(--altin, #c9a75c); color: #1d1606; }
.duvar-govde h2 { margin: 0; font-size: clamp(30px, 5vw, 56px); line-height: 1.15; font-weight: 800; letter-spacing: -.01em; } .duvar-aciklama { margin: 0; max-width: 70ch; font-size: clamp(17px, 2.2vw, 24px); line-height: 1.5; color: #d6e6ec; }
.duvar-alt { display: flex; gap: 40px; flex-wrap: wrap; align-items: center; } .duvar-kisi { display: flex; align-items: center; gap: 12px; } .duvar-kisi small, .duvar-destek small { display: block; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #a9c3cc; } .duvar-kisi strong { font-size: 20px; }
.duvar-destek .gdestek-yuzler .avatar { width: 40px; height: 40px; font-size: 14px; margin-left: -10px; box-shadow: 0 0 0 2px #173f4d; } .duvar-destek .gdestek-yuzler .avatar:first-child { margin-left: 0; }
.duvar-onceki { display: flex; gap: 12px; max-width: 80ch; padding: 14px 18px; border-radius: 14px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(244, 230, 184, .25); } .duvar-onceki svg { flex-shrink: 0; color: var(--altin, #c9a75c); } .duvar-onceki small { display: block; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #a9c3cc; } .duvar-onceki p { margin: 4px 0 0; font-size: 18px; line-height: 1.45; }
/* 19 — yoklama */
.yoklama-bolum { margin: 0 0 18px; } .yoklama { margin: 0 0 12px; padding: 16px 18px; border-radius: 16px; background: #fff; border: 1px solid #dbe6ea; } .yoklama.acik { border-color: #d91f26; box-shadow: 0 0 0 4px rgba(217, 31, 38, .08); }
.yoklama-bas { display: grid; gap: 8px; margin-bottom: 12px; } .yoklama-bas strong { font-size: 18px; color: #12303b; line-height: 1.3; } .yoklama.acik .portal-tag { background: #d91f26; color: #fff; animation: canliHale 1.5s ease-out infinite; }
.yoklama-secenekler { display: grid; gap: 8px; } .yoklama-sec { position: relative; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 14px; border: 1px solid #cfdce2; border-radius: 12px; background: #fff; font: inherit; font-size: 15px; font-weight: 600; color: #12303b; text-align: left; cursor: pointer; overflow: hidden; }
.yoklama-cubuk { position: absolute; left: 0; top: 0; bottom: 0; width: var(--w, 0%); background: #e8f5ed; transition: width var(--sure-uzun) var(--egri); z-index: 0; } .yoklama-ad { position: relative; z-index: 1; flex: 1; } .yoklama-sec b { position: relative; z-index: 1; font-size: 16px; }
.yoklama-sec.secili { border-color: #1f6b45; box-shadow: inset 0 0 0 2px #1f6b45; } .yoklama-sec:disabled { cursor: default; } .yoklama-not { margin: 10px 0 0; color: #5d6f78; font-size: 12.5px; }
.yoklama.buyuk { background: rgba(255, 255, 255, .08); border-color: rgba(244, 230, 184, .3); } .yoklama.buyuk strong, .yoklama.buyuk .yoklama-not { color: #fff; } .yoklama.buyuk .yoklama-sec { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .25); color: #fff; font-size: 20px; min-height: 60px; } .yoklama.buyuk .yoklama-cubuk { background: rgba(31, 107, 69, .55); }
.yoklama-form { margin-bottom: 12px; } .tyoklamalar { margin: 10px 0; }
/* 16 — baskı ve PDF */
@page { margin: 18mm 16mm; }
@media print {
body { background: #fff; padding: 0; } .portal-header, .yazi-dugme, .bildirimler, .bag-bandi, .gcubuk, .karsilama, [role="tablist"], .anket-alt, .portal-card-actions, .okuma-araclar, .khero-araclar, .kgorunum, .oy-dugme, .gmod, .gsonuc, .kkart-guncelle, .kkart-sil, .foto-link, .btn, .lider-perde, .sunum, .duvar, .mik, .gnasil, .tmetin-ara, .tmetin-sayfa, .tcizgi, .hcizgi, .gacikis, .gmod-kart, .gform-sarma, .yoklama-form { display: none !important; }
.okuma { position: static; inset: auto; overflow: visible; background: #fff; color: #000; } .okuma-ust { position: static; padding: 0 0 8mm; background: none; color: #000; border-bottom: 2px solid #c9a75c; margin-bottom: 8mm; } .okuma-ust strong { font-size: 26pt; } .okuma-ust small, .okuma-ust .ghero-ust { color: #555; }
.okuma-govde { display: block; padding: 0; } .okuma-ic { display: block; position: static; max-height: none; margin-bottom: 8mm; border: 0; } .okuma-ic ul { border: 0; } .okuma-ic button { padding: 2px 0; color: #000; } .okuma-ic li.alt { display: list-item; }
.okuma-yazi .tnot-bolum, .kkart, .tnot-madde { break-inside: avoid; } .tnot-genel { border-left: 3px solid #c9a75c; } .tbalon-govde { border: 1px solid #ccc; box-shadow: none; }
.khero, .ghero { background: none !important; color: #000; box-shadow: none; border-bottom: 2px solid #c9a75c; border-radius: 0; padding: 0 0 6mm; } .khero strong, .khero p, .ghero-gun, .ghero-durum, .ghero-saat { color: #000 !important; } .ghero::after, .ghero::before, .khero::before { display: none; } .ghero-sag { display: none; }
.kkart, .gmadde { border: 1px solid #bbb; box-shadow: none; page-break-inside: avoid; } .kdurum, .gdurum, .portal-tag { border: 1px solid #999; background: none !important; color: #000 !important; }
.member-portal::after { content: 'One Team Yönetim Kurulu · Ortak Akıl Platformu · yonetimkurulu.oneteamglobal.ai'; display: block; margin-top: 10mm; padding-top: 3mm; border-top: 1px solid #ccc; font-size: 9pt; color: #666; }
body.katman-acik { overflow: visible; } body.katman-acik .portal-dashboard { display: none; }
}
.yoklama-bas .portal-tag { justify-self: start; }
/* ===== Panel açılışı: SAHNE (18 Eyl; Emre: "ilk gördükleri sayfa daha ilgi çekici olmalı") ===== */
.member-portal.sahneli { padding-top: 0; }
.sahne { position: relative; margin: 0 0 22px; padding: 0 0 6px; border-radius: 0 0 34px 34px; color: #eaf3f6; overflow: hidden; isolation: isolate;
background: radial-gradient(110% 90% at 85% -10%, rgba(201, 167, 92, .32), transparent 55%), radial-gradient(70% 60% at 0% 100%, rgba(31, 107, 69, .35), transparent 60%), linear-gradient(160deg, #06131a 0%, #0f2f3a 55%, #173f4d 100%); box-shadow: 0 24px 60px rgba(6, 19, 26, .35); }
.sahne::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .025) 0 2px, transparent 2px 7px); opacity: .5; }
.sahne::after { content: ''; position: absolute; right: -120px; top: 40px; z-index: -1; width: 420px; height: 420px; border-radius: 50%; border: 1px solid rgba(244, 230, 184, .16); box-shadow: 0 0 0 60px rgba(244, 230, 184, .04), 0 0 0 130px rgba(244, 230, 184, .025); pointer-events: none; animation: sahneNefes 9s ease-in-out infinite; }
@keyframes sahneNefes { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
.sahne .portal-header { margin: 0; border-radius: 0; background: transparent; box-shadow: none; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.sahne .portal-dashboard { padding-top: 22px; padding-bottom: 0; }
.sahne .portal-dashboard-heading.kucuk { margin-bottom: 18px; } .sahne .portal-dashboard-heading .eyebrow { color: var(--altin, #c9a75c); display: block; font-size: 11px; letter-spacing: .16em; margin-bottom: 4px; }
.sahne .portal-dashboard-heading.kucuk .eyebrow { display: none; } .selam { margin: 0 0 2px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 14px; font-weight: 700; color: #f4e6b8; } .selam time { font-weight: 500; color: #a9c3cc; }
.sahne .portal-dashboard-heading h1 { color: #fff; } .sahne .portal-dashboard-heading.kucuk h1 { font-size: 24px; } .sahne .portal-dashboard-heading p { color: #a9c3cc; } .sahne .portal-dashboard-heading.kucuk .avatar.buyuk { width: 64px; height: 64px; font-size: 22px; box-shadow: 0 0 0 3px rgba(244, 230, 184, .35); } .sahne .portal-dashboard-heading.kucuk .avatar.buyuk img { width: 64px; height: 64px; }
.sahne .foto-link { color: #f4e6b8; } .sahne .foto-satir span { color: #a9c3cc; }
.sahne .karsilama { margin: 0 0 18px; border-color: rgba(244, 230, 184, .28); background: rgba(255, 255, 255, .07); box-shadow: none; backdrop-filter: blur(8px); }
.sahne .karsilama-ust { color: var(--altin, #c9a75c); } .sahne .karsilama-ana strong { color: #fff; } .sahne .karsilama-ana p { color: #c2d6dd; } .sahne .karsilama-ikon { background: rgba(255, 255, 255, .12); color: #f4e6b8; }
.sahne .karsilama-diger { border-top-color: rgba(255, 255, 255, .12); } .sahne .karsilama-diger button { color: #d6e6ec; } .sahne .karsilama-diger button:hover { background: rgba(255, 255, 255, .08); } .sahne .karsilama-diger svg:last-child { color: #a9c3cc; }
.sahne .karsilama.canli { border-color: rgba(255, 120, 120, .5); background: rgba(217, 31, 38, .14); } .sahne .karsilama.canli .karsilama-ust { color: #ffb4b0; }
.sahne .karsilama.bos { border-color: rgba(127, 214, 164, .35); background: rgba(31, 107, 69, .22); color: #d8f3e3; } .sahne .karsilama.bos svg { color: #7fd6a4; } .sahne .karsilama.bos strong { color: #fff; }
.sahne .portal-tabs [data-slot="tabs-list"] { margin: 0 0 -6px; padding: 6px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .1); border-radius: 16px; backdrop-filter: blur(8px); }
.sahne .portal-tabs [data-slot="tabs-trigger"] { color: #c2d6dd; border-radius: 11px; } .sahne .portal-tabs [data-slot="tabs-trigger"]:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.sahne .portal-tabs [data-slot="tabs-trigger"][data-state="active"] { background: #fff; color: #12303b; box-shadow: 0 6px 18px rgba(0, 0, 0, .25), inset 0 -3px 0 var(--altin, #c9a75c); }
.sahne [data-sekme="surveys"].sekme-canli-var { color: #ffb4b0 !important; } .sahne [data-sekme="surveys"][data-state="active"].sekme-canli-var { color: #a3151b !important; }
.govde-alan { padding-top: 0; } .govde-alan .portal-tabs { margin: 0; }
/* Gündem üst alanı sahnenin altında AÇIK renkli kart: iki koyu blok üst üste binmesin */
.sahneli .ghero { color: #12303b; background: radial-gradient(120% 140% at 100% 0%, rgba(201, 167, 92, .22), transparent 55%), linear-gradient(160deg, #fffdf6 0%, #fbf4e2 100%); border: 1px solid #ead9a6; box-shadow: 0 16px 40px rgba(168, 138, 74, .16); }
.sahneli .ghero::after { border-color: rgba(168, 138, 74, .22); box-shadow: 0 0 0 40px rgba(168, 138, 74, .05), 0 0 0 90px rgba(168, 138, 74, .03); } .sahneli .ghero::before { opacity: .25; }
.sahneli .ghero-ust { color: var(--altin-koyu, #a88a4a); } .sahneli .ghero-ust i { color: #7a6a3a; } .sahneli .ghero .ghero-gun { color: #12303b; font-size: clamp(30px, 4.6vw, 44px); } .sahneli .ghero-saat { color: #6a5a2c; } .sahneli .ghero .gtoplanti-ad { color: #33515e; } .sahneli .ghero .ghero-durum { color: #4d616b; }
.sahneli .ghero-sayac span { background: #12303b; border-color: transparent; } .sahneli .ghero-sayac b { color: #fff; } .sahneli .ghero-sayac i { color: #f4e6b8; } .sahneli .ghero-sag small { color: #6a5a2c; }
.sahneli .ghero.kesin { background: radial-gradient(120% 140% at 100% 0%, rgba(31, 107, 69, .18), transparent 55%), linear-gradient(160deg, #fffdf6 0%, #eef7f1 100%); border-color: #cfe6d8; }
.sahneli .gdongu { border-top-color: rgba(168, 138, 74, .25); } .sahneli .gdongu span { color: #12303b; } .sahneli .gdongu small { color: #6b7d86; } .sahneli .gdongu b { border-color: rgba(168, 138, 74, .5); color: #6a5a2c; } .sahneli .gdongu li.simdi b { background: #12303b; color: #f4e6b8; box-shadow: 0 0 0 4px rgba(18, 48, 59, .15); } .sahneli .gdongu li.gecti b { background: #1f6b45; color: #fff; }
.sahneli .ghero.bos { background: linear-gradient(135deg, #f7f9fb, #fbfcfd); border-style: dashed; }
.sahneli .hcizgi { margin-top: -10px; border-radius: 0 0 16px 16px; border-top: 0; background: #fffdf9; }
html[data-tema="kamp"] .sahne { background: radial-gradient(110% 90% at 85% -10%, rgba(242, 184, 75, .38), transparent 55%), linear-gradient(160deg, #06283a 0%, #0b4a6e 55%, #0e6f8c 100%); }
html[data-tema="yilsonu"] .sahne { background: radial-gradient(90% 120% at 80% 0%, rgba(230, 196, 106, .4), transparent 55%), radial-gradient(60% 80% at 10% 100%, rgba(120, 90, 200, .35), transparent 60%), linear-gradient(160deg, #06081a 0%, #16204d 60%, #221a4a 100%); }
@media (max-width: 760px) { .sahne { border-radius: 0 0 26px 26px; } .sahne .portal-dashboard { padding-top: 14px; } .sahne .portal-dashboard-heading.kucuk .avatar.buyuk { width: 52px; height: 52px; } .sahne .portal-dashboard-heading.kucuk .avatar.buyuk img { width: 52px; height: 52px; } }
@media (prefers-reduced-motion: reduce) { .sahne::after { animation: none; } }
@media print { .sahne { background: none; color: #000; box-shadow: none; } }
.sahne .portal-logo img { mix-blend-mode: screen; border-radius: 12px; } .sahne { padding-bottom: 16px; } .sahne .portal-tabs [data-slot="tabs-list"] { margin-bottom: 0; }
@media (max-width: 760px) { .sahne .portal-tabs [data-slot="tabs-list"] { margin-left: 0; margin-right: 0; border-radius: 14px; } }
.sahne .portal-logo, .sahne .brand-logo { background: transparent !important; box-shadow: none; } .sahne .portal-logo img { mix-blend-mode: screen; }
@media (max-width: 760px) { .portal-tabs [data-slot="tabs-list"] { justify-content: flex-start; } .portal-tabs [data-slot="tabs-list"] > :first-child { margin-left: 0; } }
/* ===== Açılış kuralı (18 Eyl): oylanmış canlı ankette rozet sessiz yeşil, canlılık yalnız bekleyen oyda ===== */
.sekme-canli.sessiz, .sahne .sekme-canli.sessiz { background: #1f6b45; color: #eafbf0; animation: none; box-shadow: none; padding: 3px 9px 3px 7px; font-size: 11px; }
.sekme-canli.sessiz i { animation: none; background: #7fd6a4; }
[data-sekme="surveys"].sekme-canli-var.oylandi { color: inherit !important; font-weight: 600; }
.sahne [data-sekme="surveys"].sekme-canli-var.oylandi { color: #c2d6dd !important; } .sahne [data-sekme="surveys"][data-state="active"].sekme-canli-var.oylandi { color: #12303b !important; }
/* ===== KOMİSYONLAR (Aşama B, 18 Eyl 2026) — kart ızgarası + komisyon sayfası; öneri kartları gündemin .gmadde düzenini paylaşır ===== */
.kom-giris { margin: 0 0 18px; } .kom-giris .eyebrow { display: block; color: var(--altin-koyu, #a88a4a); font-size: 11px; letter-spacing: .16em; margin-bottom: 4px; }
.kom-giris h2 { margin: 0 0 6px; font-size: clamp(22px, 3.2vw, 30px); color: #12303b; } .kom-giris p { margin: 0; color: #4d616b; max-width: 62ch; } .kom-yetki-not { display: inline-block; margin-top: 4px; color: #1f6b45; font-weight: 600; }
.kom-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.kom-kart { width: 100%; text-align: left; display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 1px solid #e3e8ec; border-radius: 16px; background: #fff; box-shadow: 0 6px 18px rgba(18, 48, 59, .05); cursor: pointer; transition: transform var(--sure-kisa, .16s) ease, box-shadow var(--sure-kisa, .16s) ease, border-color var(--sure-kisa, .16s) ease; font: inherit; color: inherit; }
.kom-kart:hover, .kom-kart:focus-visible { transform: translateY(-2px); border-color: var(--altin, #c9a75c); box-shadow: 0 14px 30px rgba(18, 48, 59, .12); outline: none; }
.kom-ust { display: flex; align-items: center; gap: 12px; } .kom-baskan-foto { width: 46px; height: 46px; flex: 0 0 46px; font-size: 16px; } .kom-baskan-foto img { width: 46px; height: 46px; }
.kom-ad { display: flex; flex-direction: column; min-width: 0; } .kom-ad strong { font-size: 17px; color: #12303b; line-height: 1.2; } .kom-ad small { color: #6b7d86; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kom-alt { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; font-size: 12px; color: #6b7d86; } .kom-alt span { display: inline-flex; align-items: center; gap: 4px; } .kom-alt span.var { color: #a0672b; font-weight: 700; } .kom-alt em { margin-left: auto; font-style: normal; color: #1f6b45; font-weight: 700; font-size: 11px; letter-spacing: .04em; }
.kom-detay { display: flex; flex-direction: column; gap: 14px; } .kom-geri { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; }
.kom-baslik { display: flex; align-items: center; gap: 16px; } .kom-baslik .eyebrow { display: block; color: var(--altin-koyu, #a88a4a); font-size: 11px; letter-spacing: .16em; } .kom-baslik h2 { margin: 2px 0 4px; font-size: clamp(24px, 3.6vw, 34px); color: #12303b; } .kom-baslik p { margin: 0; color: #4d616b; }
.kom-baskan-buyuk { width: 72px; height: 72px; flex: 0 0 72px; font-size: 24px; box-shadow: 0 0 0 3px rgba(201, 167, 92, .35); } .kom-baskan-buyuk img { width: 72px; height: 72px; }
.kom-ozet { margin: 0; color: #33515e; line-height: 1.55; max-width: 70ch; white-space: pre-line; }
.kom-uyeler { border: 1px solid #e3e8ec; border-radius: 14px; background: #fbfcfd; padding: 0 16px; } .kom-uyeler summary { cursor: pointer; padding: 12px 0; font-weight: 700; color: #12303b; display: flex; align-items: center; gap: 8px; list-style: none; } .kom-uyeler summary::-webkit-details-marker { display: none; } .kom-uyeler summary::after { content: '›'; margin-left: auto; font-size: 20px; transition: transform var(--sure-kisa, .16s); } .kom-uyeler[open] summary::after { transform: rotate(90deg); }
.kom-uye-liste { list-style: none; margin: 0 0 12px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px 16px; } .kom-uye-liste li { display: flex; align-items: center; gap: 10px; padding: 4px 0; } .kom-uye-liste li span { display: flex; flex-direction: column; min-width: 0; } .kom-uye-liste strong { color: #12303b; font-size: 14px; } .kom-uye-liste small { color: #6b7d86; }
.kom-uyeler h3 { margin: 10px 0 6px; font-size: 14px; color: #33515e; } .kom-isler { list-style: disc; margin: 0 0 14px; padding-left: 18px; color: #4d616b; font-size: 14px; line-height: 1.5; } .kom-isler li { margin: 3px 0; }
.kom-bolum { border-top: 1px solid #e3e8ec; padding-top: 14px; } .kom-bolum-bas { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; } .kom-bolum-bas h3 { margin: 0; display: inline-flex; align-items: center; gap: 8px; font-size: 18px; color: #12303b; } .kom-bolum-bas h3 b { font-size: 12px; background: #12303b; color: #fff; border-radius: 999px; padding: 2px 8px; }
.kom-oner { margin-bottom: 12px; display: inline-flex; align-items: center; gap: 6px; }
.kdurum.alindi { background: #eef2f5; color: #4d616b; } .kdurum.gorusuluyor { background: #fbe9d2; color: #8a4b12; } .kdurum.karar { background: #dff3e7; color: #1f6b45; } .kdurum.uygun { background: #fde3e4; color: #a3151b; }
.kom-oneri.kapali { opacity: .82; } .kom-yanit { margin: 8px 0 0; padding: 8px 12px; border-left: 3px solid var(--altin, #c9a75c); background: #fffdf6; color: #33515e; border-radius: 0 8px 8px 0; font-size: 14px; } .kom-yanit.karar { border-left-color: #1f6b45; background: #f3faf6; } .kom-yanit b { color: #12303b; }
.kom-durum-form { margin-top: 10px; padding: 12px; border: 1px dashed #d9c78f; border-radius: 12px; background: #fffdf6; } .kom-durum-form label { display: block; font-size: 12px; font-weight: 700; color: #6a5a2c; margin: 8px 0 4px; }
.kom-karar-form { margin-bottom: 14px; border: 1px solid #cfe6d8; background: #f3faf6; } .kom-karar-form h3 { margin: 0 0 8px; font-size: 16px; color: #1f6b45; }
.kom-karar-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .kom-karar { display: grid; grid-template-columns: 96px 1fr auto; gap: 12px; align-items: start; padding: 12px 14px; border: 1px solid #e3e8ec; border-left: 4px solid #1f6b45; border-radius: 12px; background: #fff; }
.kom-karar time { font-size: 12px; font-weight: 700; color: #1f6b45; padding-top: 3px; } .kom-karar p { margin: 0; color: #12303b; line-height: 1.5; } .kom-gerekce { display: block; margin-top: 4px; color: #4d616b; } .kom-bag { display: block; margin-top: 4px; color: #a0672b; font-weight: 600; }
.komisyon-yetki-kart .field-row { gap: 10px; }
@media (max-width: 640px) { .kom-liste { grid-template-columns: 1fr; } .kom-karar { grid-template-columns: 1fr; gap: 4px; } .kom-karar button { justify-self: end; } .kom-baskan-buyuk { width: 56px; height: 56px; flex-basis: 56px; font-size: 18px; } .kom-baskan-buyuk img { width: 56px; height: 56px; } }
@media print { .kom-kart { box-shadow: none; } .kom-oner, .kom-geri { display: none; } }
/* Komisyon sayfası düzeni (Emre, 18 Eyl ekran görüntüsü: "tasarımda hatalar var") — diğer sekmeler gibi: krem başlık kartı + beyaz bölüm kartları */
.kom-hero { position: relative; overflow: hidden; margin: 0 0 16px; padding: 24px 28px; border-radius: 22px; border: 1px solid #ead9a6; color: #12303b; background: radial-gradient(120% 140% at 100% 0%, rgba(201, 167, 92, .22), transparent 55%), linear-gradient(160deg, #fffdf6 0%, #fbf4e2 100%); box-shadow: 0 16px 40px rgba(168, 138, 74, .16); }
.kom-hero::after { content: ''; position: absolute; right: -90px; top: -60px; width: 300px; height: 300px; border-radius: 50%; border: 1px solid rgba(168, 138, 74, .22); box-shadow: 0 0 0 40px rgba(168, 138, 74, .05), 0 0 0 90px rgba(168, 138, 74, .03); pointer-events: none; }
.kom-hero > * { position: relative; z-index: 1; }
.kom-giris { margin-bottom: 16px; } .kom-giris h2 { margin: 0 0 6px; }
.kom-detay { gap: 0; } .kom-detay .kom-hero { display: flex; flex-direction: column; gap: 14px; }
.kom-geri { align-self: flex-start; padding: 6px 12px; font-size: 13px; border-radius: 999px; background: rgba(255, 255, 255, .7); }
.kom-hero .kom-baslik h2 { margin: 2px 0 4px; } .kom-hero .kom-ozet { margin: 0; }
.kom-hero .kom-uyeler { background: rgba(255, 255, 255, .6); border-color: rgba(168, 138, 74, .35); margin: 0; }
.kom-bolum.portal-survey-card { border-top: 0; padding-top: 22px; margin-bottom: 16px; }
.kom-bolum-bas h2 { margin: 0; display: inline-flex; align-items: center; gap: 8px; font-size: 20px; color: #12303b; } .kom-bolum-bas h2 b { font-size: 12px; background: #12303b; color: #fff; border-radius: 999px; padding: 2px 8px; }
.btn-kucuk { padding: 7px 12px; font-size: 13px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; }
.kom-oner { margin: 0 0 14px; } .kom-bolum .gmadde-liste { margin: 0; } .kom-bolum .portal-empty { margin: 0; }
@media (max-width: 640px) { .kom-hero { padding: 18px 16px; border-radius: 18px; } .kom-bolum.portal-survey-card { padding-top: 18px; } }
/* ===== KONU İZİ + BİRLEŞİK ARŞİV (Aşama C, 18 Eyl 2026) ===== */
.konu-kart { max-width: 640px; } .konu-bas { margin: 0 0 14px; padding-right: 36px; } .konu-bas .eyebrow { display: block; color: var(--altin-koyu, #a88a4a); font-size: 11px; letter-spacing: .16em; } .konu-bas h2 { margin: 2px 0 6px; font-size: 22px; color: #12303b; line-height: 1.25; } .konu-bas p { margin: 0; color: #4d616b; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.konu-cizgi { list-style: none; margin: 0; padding: 0 0 0 4px; position: relative; } .konu-cizgi::before { content: ''; position: absolute; left: 17px; top: 14px; bottom: 14px; width: 2px; background: linear-gradient(#dbe6ea, #c9a75c); }
.konu-adim { position: relative; display: grid; grid-template-columns: 28px 1fr; gap: 12px; padding: 8px 0; } .konu-nokta { position: relative; z-index: 1; width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #fff; border: 2px solid #dbe6ea; color: #496471; }
.konu-adim.karar .konu-nokta, .konu-adim.is_tamam .konu-nokta { border-color: #1f6b45; color: #1f6b45; background: #dff3e7; } .konu-adim.yonlendirildi .konu-nokta, .konu-adim.gundem .konu-nokta { border-color: var(--altin, #c9a75c); color: #7a6a3a; background: #fffdf6; } .konu-adim.uygun_degil .konu-nokta, .konu-adim.geri_cekildi .konu-nokta { border-color: #d9a3a5; color: #a3151b; background: #fde3e4; } .konu-adim.is .konu-nokta { border-color: #d9822b; color: #8a4b12; background: #fbe9d2; }
.konu-adim time { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; color: #6b7d86; text-transform: uppercase; } .konu-adim time small { text-transform: none; font-weight: 500; letter-spacing: 0; } .konu-adim strong { display: block; color: #12303b; margin: 2px 0; } .konu-adim p { margin: 2px 0 0; color: #33515e; line-height: 1.5; } .konu-gerekce { padding: 6px 10px; border-left: 3px solid var(--altin, #c9a75c); background: #fffdf6; border-radius: 0 8px 8px 0; } .konu-adim small { color: #6b7d86; }
.konu-baglar { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px solid #e3e8ec; }
.konu-ac { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: #496471; text-decoration: none; padding: 2px 8px; border: 1px solid #dbe6ea; border-radius: 999px; background: #fff; } .konu-ac:hover { border-color: var(--altin, #c9a75c); color: #12303b; }
.kkart-iz { margin-top: 8px; } .kkart-not.gerekce { border-left: 3px solid var(--altin, #c9a75c); background: #fffdf6; padding: 6px 10px; border-radius: 0 8px 8px 0; } .kkart-not.gerekce b { color: #12303b; }
.gdurum.yonlendirildi { background: #fffdf6; color: #7a6a3a; border: 1px solid #ead9a6; }
.gyonlendir { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; padding: 8px 10px; border: 1px dashed #d9c78f; border-radius: 10px; background: #fffdf6; } .gyonlendir .inp { flex: 1; min-width: 180px; max-width: 320px; padding: 7px 10px; font-size: 13.5px; }
.gyon-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .gyon-liste li { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: center; padding: 10px 14px; border: 1px solid #ead9a6; border-radius: 12px; background: #fffdf6; } .gyon-liste strong { color: #12303b; } .gyon-liste small { grid-column: 2; color: #6b7d86; } .gyon-dugmeler { grid-column: 1 / -1; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; } .gyon-dugmeler .foto-link { display: inline-flex; align-items: center; gap: 4px; }
.karsiv { display: flex; flex-direction: column; gap: 10px; margin: 0 0 14px; } .karsiv-ara { position: relative; display: flex; align-items: center; gap: 8px; } .karsiv-ara > svg { position: absolute; left: 12px; color: #6b7d86; pointer-events: none; } .karsiv-ara .inp { padding-left: 36px; } .karsiv-ara .foto-link { position: absolute; right: 10px; }
.ksuzgec.kaynak { margin: 0; } .ksuzgec.kaynak button { padding: 6px 12px; font-size: 13px; }
.gmadde-kim em.gundemden { color: #7a6a3a; background: #fffdf6; border: 1px solid #ead9a6; }
@media (max-width: 640px) { .konu-adim { grid-template-columns: 26px 1fr; gap: 10px; } .konu-cizgi::before { left: 16px; } .gyon-liste li { grid-template-columns: 1fr; } .gyon-liste small { grid-column: 1; } }
/* ===== GİZLİLİK DÜZEYİ (Aşama D, 18 Eyl 2026; Atakan Yaman) ===== */
.tgizlilik { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; padding: 10px 12px; border: 1px solid #e3e8ec; border-radius: 12px; background: #fbfcfd; font-size: 13.5px; color: #33515e; } .tgizlilik > span { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: #12303b; }
.tgizlilik button { padding: 6px 12px; border: 1px solid #dbe6ea; border-radius: 999px; background: #fff; color: #496471; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; } .tgizlilik button.secili { background: #12303b; border-color: #12303b; color: #fff; } .tgizlilik button:disabled { opacity: .6; cursor: default; } .tgizlilik em { font-style: normal; color: #a3151b; font-weight: 600; }
.tnot-uyari.kisitli { background: #fffdf6; border-color: #ead9a6; color: #6a5a2c; } .tnot-uyari.kisitli b { color: #12303b; }
.kom-yanit.gizli, .kkart-not.gerekce.gizli, .konu-gerekce.gizli { display: inline-flex; align-items: center; gap: 6px; border-left-color: #b8c4ca; background: #f4f6f8; color: #6b7d86; font-style: italic; font-size: 13px; }
.kk-gizli { display: flex; align-items: flex-start; gap: 8px; margin: 8px 0 4px; font-size: 13.5px; color: #33515e; cursor: pointer; } .kk-gizli input { margin-top: 3px; } .kk-gizli small { display: block; color: #6b7d86; }
/* ===== E1 (18 Eyl 2026): yetki haritası, sürüm geçmişi, yeniden değerlendirme, beyan, komisyon görüşleri ===== */
.yetki-harita { margin: 18px 0 0; border: 1px solid #e3e8ec; border-radius: 16px; background: #fff; padding: 0 18px; } .yetki-harita summary { cursor: pointer; padding: 14px 0; font-weight: 700; color: #12303b; display: flex; align-items: center; gap: 8px; list-style: none; } .yetki-harita summary::-webkit-details-marker { display: none; } .yetki-harita summary::after { content: '›'; margin-left: auto; font-size: 20px; transition: transform .16s; } .yetki-harita[open] summary::after { transform: rotate(90deg); }
.yetki-harita h3 { margin: 16px 0 8px; font-size: 15px; color: #12303b; } .yetki-tablo-sarma { overflow-x: auto; -webkit-overflow-scrolling: touch; } .yetki-tablo { width: 100%; border-collapse: collapse; font-size: 13.5px; } .yetki-tablo th, .yetki-tablo td { text-align: left; vertical-align: top; padding: 8px 10px; border-top: 1px solid #eef2f5; } .yetki-tablo thead th { font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: #6b7d86; border-top: 0; } .yetki-tablo tbody th { color: #12303b; white-space: nowrap; } .yetki-tablo tbody th .foto-link { font-weight: 700; } .yetki-tablo ul { margin: 0; padding-left: 16px; color: #33515e; } .yetki-tablo td small { display: block; color: #6b7d86; margin-top: 2px; } .yetki-tablo .muted, .yetki-tablo li.muted { color: #8a9aa3; list-style: none; margin-left: -16px; } .yetki-tablo.rol td { color: #33515e; }
.yetki-not { margin: 10px 0 14px; font-size: 13px; color: #4d616b; line-height: 1.5; } .yetki-not b { color: #12303b; }
.kkart-iz { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; } .kkart-iz .foto-link { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; }
.ksurum { margin-top: 10px; padding: 10px 12px; border: 1px solid #e3e8ec; border-radius: 12px; background: #fbfcfd; } .ksurum h4 { margin: 0 0 8px; font-size: 13px; color: #12303b; display: inline-flex; align-items: center; gap: 6px; } .ksurum ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .ksurum li { display: grid; grid-template-columns: auto auto 1fr; gap: 4px 10px; align-items: baseline; font-size: 13px; } .ksurum time { color: #6b7d86; font-size: 12px; } .ksurum-alan { font-weight: 700; color: #33515e; } .ksurum-fark { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 2px; } .ksurum-fark del { color: #a3151b; background: #fde3e4; text-decoration: line-through; padding: 2px 6px; border-radius: 6px; } .ksurum-fark ins { color: #1f6b45; background: #dff3e7; text-decoration: none; padding: 2px 6px; border-radius: 6px; } .ksurum li small { grid-column: 1 / -1; color: #8a9aa3; }
.kyeniden { margin-top: 10px; } .kyeniden label { display: block; font-size: 13px; font-weight: 600; color: #33515e; margin-bottom: 6px; }
.gdurum.yeniden { background: #fbe9d2; color: #8a4b12; } .gmadde-not.yeniden { border-left-color: #d9822b; }
.gbeyan { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 8px; font-size: 12.5px; } .gbeyan-liste { display: inline-flex; align-items: center; gap: 4px; color: #7a6a3a; background: #fffdf6; border: 1px solid #ead9a6; border-radius: 999px; padding: 2px 9px; } .gbeyan .foto-link { font-size: 12.5px; }
.khero-link { background: none; border: 0; padding: 0; font: inherit; color: #f4e6b8; text-decoration: underline; cursor: pointer; }
.kom-oneri .gyorumlar { margin-top: 10px; }
@media (max-width: 640px) { .yetki-tablo { font-size: 12.5px; } .yetki-tablo th, .yetki-tablo td { padding: 6px 8px; } .yetki-tablo tbody th { white-space: normal; } }
/* ===== E2 (18 Eyl 2026): yaklaşanlar takvimi, katılım listesi, katkı özeti ===== */
.takvim { margin: 0 0 16px; padding: 16px 18px; border: 1px solid #e3e8ec; border-radius: 16px; background: #fff; } .takvim-bas { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; } .takvim-bas h2 { margin: 0; display: inline-flex; align-items: center; gap: 8px; font-size: 17px; color: #12303b; } .takvim-bas h2 small { font-size: 12px; background: #eef2f5; color: #496471; border-radius: 999px; padding: 2px 8px; } .takvim-bas > span { display: flex; gap: 14px; } .takvim-bas .foto-link { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; }
.takvim-liste { list-style: none; margin: 0; padding: 0; } .takvim-oge { display: grid; grid-template-columns: 76px 28px 1fr auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid #eef2f5; } .takvim-oge:first-child { border-top: 0; } .takvim-oge time { display: flex; flex-direction: column; line-height: 1.15; } .takvim-oge time b { color: #12303b; font-size: 13px; } .takvim-oge time small { color: #6b7d86; font-size: 12px; } .takvim-ikon { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #eef2f5; color: #496471; } .takvim-oge.toplanti .takvim-ikon { background: #12303b; color: #f4e6b8; } .takvim-oge.anket-kapanis .takvim-ikon, .takvim-oge.anket-acilis .takvim-ikon { background: #fde3e4; color: #a3151b; } .takvim-oge.is .takvim-ikon { background: #fbe9d2; color: #8a4b12; } .takvim-oge.oneri-kapanis .takvim-ikon { background: #fffdf6; color: #7a6a3a; border: 1px solid #ead9a6; }
.takvim-oge > div { min-width: 0; display: flex; flex-direction: column; } .takvim-oge strong { color: #12303b; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .takvim-oge small { color: #6b7d86; font-size: 12px; } .takvim-oge.benim strong { color: #8a4b12; }
.tnot-katilim-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .tnot-katilim-liste li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border: 1px solid #e3e8ec; border-radius: 999px; background: #fbfcfd; font-size: 13px; } .tnot-katilim-liste small { color: #6b7d86; }
.katkim-ac { margin-left: 2px; display: inline-flex; align-items: center; gap: 4px; font-size: inherit; } .sahne .katkim-ac { color: #f4e6b8; }
.katkim-kart { max-width: 600px; } .katkim-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; } .katkim-liste li { display: flex; flex-direction: column; padding: 12px 14px; border: 1px solid #e3e8ec; border-radius: 12px; background: #fbfcfd; } .katkim-liste b { font-size: 26px; color: #12303b; line-height: 1.1; } .katkim-liste span { color: #33515e; font-size: 13px; margin-top: 2px; } .katkim-liste small { color: #6b7d86; font-size: 11.5px; margin-top: 4px; }
.katkim-not { margin: 12px 0 0; display: flex; gap: 6px; align-items: flex-start; font-size: 12.5px; color: #6b7d86; }
@media (max-width: 640px) { .takvim-oge { grid-template-columns: 64px 24px 1fr auto; gap: 8px; } .takvim-oge strong { white-space: normal; } }
/* ===== E3 (18 Eyl 2026): belge alanı + ekler ===== */
.belge-hero h2 { margin: 2px 0 6px; font-size: clamp(22px, 3.2vw, 30px); color: #12303b; } .belge-hero p { margin: 0; color: #4d616b; max-width: 66ch; } .belge-hero .eyebrow { display: block; color: var(--altin-koyu, #a88a4a); font-size: 11px; letter-spacing: .16em; margin-bottom: 4px; }
.belge-ekle-satir { margin: 0 0 14px; } .belge-form { margin-bottom: 14px; } .belge-form h3 { margin: 0 0 10px; font-size: 16px; color: #12303b; } .belge-dosya-sec { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 8px 0; color: #4d616b; font-size: 13px; }
.belge-grup { margin: 0 0 18px; } .belge-grup h2 { margin: 0 0 8px; font-size: 16px; color: #12303b; display: inline-flex; align-items: center; gap: 8px; } .belge-grup h2 small { font-size: 12px; background: #eef2f5; color: #496471; border-radius: 999px; padding: 2px 8px; }
.belge-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .belge-kart { display: grid; grid-template-columns: 40px 1fr; gap: 12px; padding: 14px 16px; border: 1px solid #e3e8ec; border-radius: 14px; background: #fff; } .belge-ikon { width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: #eef2f5; color: #496471; } .belge-kart.dosya .belge-ikon { background: #dff3e7; color: #1f6b45; } .belge-kart.baglanti .belge-ikon { background: #fffdf6; color: #7a6a3a; border: 1px solid #ead9a6; } .belge-kart.metin .belge-ikon { background: #12303b; color: #f4e6b8; }
.belge-ic { min-width: 0; } .belge-bas { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .belge-bas h3 { margin: 0; font-size: 16px; color: #12303b; } .belge-aciklama { margin: 4px 0 0; color: #4d616b; font-size: 14px; line-height: 1.5; } .belge-govde { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; } .belge-dosya { display: inline-flex; align-items: center; gap: 6px; color: #33515e; font-size: 13.5px; } .belge-dosya small { color: #8a9aa3; }
.belge-metin { white-space: pre-wrap; color: #33515e; font-size: 14px; line-height: 1.55; max-height: 7.5em; overflow: hidden; position: relative; } .belge-metin.acik { max-height: none; } .belge-metin:not(.acik)::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2.2em; background: linear-gradient(transparent, #fff); }
.belge-alt { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 8px; font-size: 12.5px; color: #6b7d86; } .belge-islem { display: flex; gap: 12px; }
.ekler { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; } .ek { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border: 1px solid #dbe6ea; border-radius: 999px; background: #fbfcfd; font-size: 12.5px; } .ek a { display: inline-flex; align-items: center; gap: 4px; color: #12303b; text-decoration: none; max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ek a:hover { text-decoration: underline; } .ek small { color: #8a9aa3; } .ek-sil { border: 0; background: none; padding: 0 2px; color: #a3151b; cursor: pointer; display: inline-flex; } .ek-ekle { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; }
.kom-belge { margin: 0; } .kom-belge .foto-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
@media (max-width: 640px) { .belge-kart { grid-template-columns: 32px 1fr; padding: 12px; } .belge-ikon { width: 32px; height: 32px; border-radius: 9px; } }
/* ===== E4 (18 Eyl 2026): kimlik doğrulamalı katılım ===== */
.gkatil { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; } .gkatil .ghero-cta.katil { background: #12303b; color: #f4e6b8; border-color: #12303b; } .sahneli .ghero .gkatil .ghero-cta.katil { background: #12303b; color: #f4e6b8; } .gkatil small { display: inline-flex; align-items: center; gap: 4px; color: #6a5a2c; font-size: 12px; } .gkatil-adres a { font-size: 12.5px; color: #12303b; }
.tnot-katilim-liste li.dogrulandi { border-color: #cfe6d8; background: #f3faf6; } .tnot-katilim-liste li svg { color: #1f6b45; }
.zoom-kimlik-kart .tema-secenekler { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gbeyan-dugme { display: inline-flex; flex-direction: column; gap: 1px; } .gbeyan-dugme small { color: #8a9aa3; font-size: 11.5px; line-height: 1.3; } .gbeyan-dugme .foto-link { color: #6b7d86; font-weight: 500; }
/* ===== SADE TUR (18 Eyl 2026; Emre: "milyon dolarlık site gibi dursun, kafa karıştırmasın") =====
Tek görsel dil: açık zemin, altın vurgu, tek koyu sahne, dört rozet rengi. Gölge ve kenarlık yarıya, boşluk artar, süs animasyonları kalkar (CANLI rozeti bilerek kalır). */
:root { --sade-kenar: #e6ebee; --sade-golge: 0 1px 2px rgba(18, 48, 59, .04), 0 8px 24px rgba(18, 48, 59, .06); }
.portal-survey-card, .kom-kart, .belge-kart, .gmadde, .kkart, .takvim, .yetki-harita, .kom-uyeler, .tnot-kutu, .kom-karar { box-shadow: var(--sade-golge) !important; border-color: var(--sade-kenar) !important; border-radius: 16px !important; }
.kom-hero, .belge-hero, .sahneli .ghero { box-shadow: var(--sade-golge) !important; }
.sahne::after, .kom-hero::after, .sahneli .ghero::after { display: none !important; }
.sahne::before { opacity: .25 !important; }
@media (prefers-reduced-motion: no-preference) { .sahne::after { animation: none !important; } }
.ghero-sayac span { box-shadow: none !important; }
.gdongu, .hcizgi, .gnasil { display: none !important; }
/* sekmeler: daha az, daha büyük nefes */
.portal-tabs [data-slot="tabs-trigger"] { padding: 10px 16px; font-size: 14.5px; }
.portal-yonetim, .portal-yardim { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 999px; background: rgba(255, 255, 255, .06); color: #eaf3f6; font: inherit; font-size: 13px; cursor: pointer; margin-right: 8px; }
.portal-yonetim[aria-current="true"] { background: #fff; color: #12303b; } .portal-yardim { width: 32px; height: 32px; padding: 0; justify-content: center; font-weight: 800; }
/* karşılama: tek eylem */
.karsilama-diger { margin: 8px 0 0; } .karsilama-diger button { background: none; border: 0; padding: 0; color: #c2d6dd; font: inherit; font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; text-decoration: underline; }
/* madde kartı: tek eylem + Ayrıntı */
.gmadde-daha { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--sade-kenar); display: flex; flex-direction: column; gap: 8px; } .gmadde-daha .gmadde-iz { display: flex; } .gmadde-daha .oneri-islem { display: flex; gap: 12px; }
.gmadde .gdevam { margin-left: auto; font-size: 13px; color: #496471; }
.gmadde-aciklama.kisa { max-height: 3.2em; overflow: hidden; }
/* moderatör anahtarı */
.mod-anahtar { position: fixed; right: 18px; bottom: 18px; z-index: 95; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; border: 1px solid #12303b; background: #fff; color: #12303b; font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; box-shadow: 0 10px 28px rgba(18, 48, 59, .18); }
.mod-anahtar.acik { background: #12303b; color: #f4e6b8; } @media print { .mod-anahtar { display: none; } }
/* toplantı notu: katlı bölümler */
.tnot-katli { border: 1px solid var(--sade-kenar); border-radius: 14px; padding: 0 16px; margin: 12px 0; background: #fbfcfd; } .tnot-katli > summary { cursor: pointer; padding: 12px 0; font-weight: 700; color: #12303b; display: flex; align-items: center; gap: 8px; list-style: none; } .tnot-katli > summary::-webkit-details-marker { display: none; } .tnot-katli > summary::after { content: '›'; margin-left: auto; font-size: 20px; transition: transform .16s; } .tnot-katli[open] > summary::after { transform: rotate(90deg); }
.tnot #tn-\:-karar, .tnot-kararlar li { font-size: 15.5px; }
/* kararlar: iki liste + küçük bağlantılar */
.ksuzgec-ek { display: inline-flex; gap: 14px; align-items: center; margin-left: auto; } .ksuzgec-ek .foto-link { font-size: 13px; color: #496471; } .ksuzgec-ek .foto-link.secili { color: #12303b; font-weight: 700; }
.khero-daha { display: flex; gap: 14px; margin-top: 6px; } .khero-araclar { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
/* tanıtım katmanı */
.tanitim-kart { max-width: 480px; text-align: center; } .tanitim-ikon { width: 64px; height: 64px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #12303b; color: #f4e6b8; margin-bottom: 12px; } .tanitim-kart .eyebrow { display: block; color: var(--altin-koyu, #a88a4a); font-size: 11px; letter-spacing: .16em; } .tanitim-kart h2 { margin: 6px 0 8px; font-size: 24px; color: #12303b; } .tanitim-kart p { margin: 0; color: #4d616b; line-height: 1.55; }
.tanitim-alt { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; } .tanitim-nokta { display: inline-flex; gap: 6px; } .tanitim-nokta i { width: 8px; height: 8px; border-radius: 50%; background: #dbe6ea; } .tanitim-nokta i.secili { background: #12303b; }
@media (max-width: 640px) { .mod-anahtar { right: 12px; bottom: 12px; padding: 9px 14px; } .ksuzgec-ek { margin-left: 0; width: 100%; } .khero-araclar { align-items: flex-start; } }
.karsilama-diger-liste { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } .karsilama-diger-liste li button { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 8px 10px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 10px; background: rgba(255, 255, 255, .06); color: #eaf3f6; font: inherit; font-size: 13.5px; cursor: pointer; text-decoration: none; } .karsilama-diger-liste li button span { flex: 1; } .karsilama-diger-liste li button svg:last-child { color: #a9c3cc; }
/* Sade tur #9 — Yönetim → Katılımcılar üç alt bölüm */
.yonetim-alt { margin: 0 0 14px; } .yonetim-alt button { display: inline-flex; align-items: center; gap: 6px; } .yonetim-grup { display: flex; flex-direction: column; gap: 14px; } .yonetim-grup[hidden] { display: none; } .zoom-sina-kart .portal-card-actions { margin-top: 4px; }
.zoom-kimlik-kart .tema-sec i { display: none; } .zoom-kimlik-kart .tema-sec { padding-top: 14px; }
.daha-goster { display: flex; justify-content: center; margin: 10px 0 4px; }
/* ===== SADE TUR 3 (19 Eyl 2026; Emre 2-4-5-9) ===== */
/* 2) sayaç yerine durum pili */
.ghero-durum-pili { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; font-size: 13.5px; font-weight: 700; background: #eef2f5; color: #33515e; } .ghero-durum-pili.acik { background: #dff3e7; color: #1f6b45; } .ghero-durum-pili.hazir { background: #12303b; color: #f4e6b8; } .ghero-durum-pili.bekliyor { background: #fbe9d2; color: #8a4b12; }
.ghero-sag { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; } .ghero-sag small { color: #6a5a2c; font-size: 12.5px; }
/* 4) tek eylem rengi: altın YALNIZ "senin sıran" düğmesinde */
.sahneli .ghero { border-color: var(--sade-kenar) !important; background: #fff !important; box-shadow: var(--sade-golge) !important; } .sahneli .ghero::before { display: none; }
.sahneli .ghero .ghero-gun { color: #12303b; } .sahneli .ghero-ust { color: #6b7d86; } .sahneli .ghero-saat { color: #33515e; }
.kom-hero, .belge-hero { border-color: var(--sade-kenar) !important; background: #fff !important; } .kom-hero .eyebrow, .belge-hero .eyebrow, .kom-giris .eyebrow, .konu-bas .eyebrow, .tanitim-kart .eyebrow { color: #6b7d86 !important; }
.tema-sec.secili { border-color: #12303b !important; box-shadow: none !important; } .portal-tabs [data-slot="tabs-trigger"][data-state="active"] { box-shadow: 0 6px 18px rgba(0, 0, 0, .18) !important; }
.gdurum.yonlendirildi { background: #eef2f5; color: #496471; border-color: transparent; } .gbeyan-liste { background: #eef2f5; color: #496471; border-color: transparent; } .kom-yanit { border-left-color: #b8c4ca; background: #f7f9fb; } .kom-hero .kom-uyeler { border-color: var(--sade-kenar); background: #fbfcfd; }
.gyonlendir, .kom-durum-form { border-color: #cfd8dd; background: #fbfcfd; } .ksurum-fark del { background: #f4f6f8; color: #6b7d86; } .konu-gerekce, .kkart-not.gerekce { border-left-color: #b8c4ca; background: #f7f9fb; }
.sahne .karsilama { border-color: rgba(255, 255, 255, .14); } .sahne .karsilama-ust { color: #a9c3cc; } .karsilama .ghero-cta, .ghero .ghero-cta, .gkatil .ghero-cta.katil, .kom-oner.btn, .primary-button { background: var(--altin, #c9a75c) !important; color: #12303b !important; border-color: var(--altin, #c9a75c) !important; }
.khero .ghero-cta { background: #fff !important; color: #12303b !important; border-color: #fff !important; } /* moderatör ekleme düğmesi: eylem rengi değil */
.khero { background: #fff !important; color: #12303b !important; box-shadow: var(--sade-golge) !important; border: 1px solid var(--sade-kenar); } .khero strong, .khero .ghero-ust { color: #12303b !important; } .khero p { color: #4d616b !important; } .khero strong em { color: #a3151b !important; } .khero-link { color: #496471 !important; } .khero .ghero-cta { border: 1px solid #12303b !important; }
.sekme-canli.sessiz { background: #eef2f5 !important; color: #33515e !important; } .sekme-canli.sessiz i { background: #1f6b45; }
/* 5) kişi etiketi */
.kisi-etiket { display: inline-flex; align-items: center; gap: 8px; min-width: 0; } .kisi-etiket-ic { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; } .kisi-etiket-ic strong { font-size: 14px; color: #12303b; } .kisi-rol { color: #6b7d86; font-size: 11.5px; } .kisi-etiket-ic > small { color: #8a9aa3; font-size: 11.5px; }
.gmadde-kim { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .gyorumlar li { display: flex; gap: 10px; align-items: flex-start; } .gyorumlar .yorum-metin { flex: 1; min-width: 0; } .gyorumlar .yorum-metin p { margin: 2px 0 0; } .kkisi { display: inline-flex; align-items: center; gap: 6px; }
.tnot-katilim-liste li { padding: 4px 10px 4px 4px; }
/* 9) sahne üstü */
.selam { display: none; } .sahne-rol { color: #a9c3cc; font-size: 13.5px; } .sahne .portal-dashboard-heading h1 { margin-top: 0; }
.gmadde-kim .kisi-etiket small::before { content: none !important; }
/* ===== İLERİ TUR (19 Eyl 2026; Emre "hepsini yap" — tek madde, anlık yorum, önbellek, toplantı günü, karar cümlesi, klavye, mikro-geri bildirim, yoğunluk, marka) ===== */
/* 1) tek madde görünümü */
.tek-madde .kom-geri { margin-bottom: 14px; } .gliste.tek { margin-top: 0; } .gliste.tek .gmadde { box-shadow: 0 10px 30px rgba(18, 48, 59, 0.08); }
.tek-madde-paylas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 12px 4px 0; color: #6b7d86; font-size: 13px; }
.gmadde-baslik-ac { all: unset; cursor: pointer; color: inherit; font: inherit; border-radius: 6px; } .gmadde-baslik-ac:hover { text-decoration: underline; text-decoration-color: rgba(201, 169, 97, 0.7); text-underline-offset: 3px; } .gmadde-baslik-ac:focus-visible { outline: 2px solid #c9a961; outline-offset: 3px; }
/* 2) anlık yorum: kutu tek satır, odaklanınca büyür; yeni satır kayarak gelir */
.gyorum-form textarea.ta { min-height: 44px; height: 44px; transition: height 0.2s ease; resize: none; } .gyorum-form textarea.ta:focus, .gyorum-form textarea.ta:not(:placeholder-shown) { height: 88px; }
.gyorumlar li.yeni { animation: yorumGel 0.32s ease-out both; } @keyframes yorumGel { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* 4) toplantı günü modu */
.toplanti-modu { background: #0b1e26; color: #fff; border-radius: 18px; padding: 26px 24px 24px; margin: 0 0 16px; text-align: center; box-shadow: 0 16px 40px rgba(11, 30, 38, 0.25); }
.toplanti-modu .eyebrow { display: inline-block; color: #c9a961; letter-spacing: 0.14em; font-size: 12px; font-weight: 700; margin-bottom: 8px; } .toplanti-modu h2 { margin: 0 0 4px; font-size: clamp(22px, 4vw, 30px); color: #fff; } .toplanti-modu p { margin: 0 0 16px; color: #a9c3cc; }
.toplanti-modu .gkatil.buyuk { display: flex; flex-direction: column; align-items: center; gap: 8px; } .toplanti-modu .gkatil.buyuk .ghero-cta { font-size: 18px; padding: 16px 30px; } .toplanti-modu .gkatil small { color: #a9c3cc; }
/* 5) karar cümlesi */
.kkart-cumle { margin: -4px 0 8px; color: #4f6670; font-size: 13.5px; }
/* 7) klavye: odak halkaları tek dil */
.portal-dashboard [role="tab"]:focus-visible, .gmadde:focus-within, .kkart:focus-within { outline: 2px solid #c9a961; outline-offset: 2px; }
.btn:focus-visible, .foto-link:focus-visible, .primary-button:focus-visible, .goy:focus-visible { outline: 2px solid #c9a961; outline-offset: 2px; }
/* 8) mikro-geri bildirim: yeni kart kayarak gelir, düğmeye basınca hafifçe çöker */
html.kart-gel .gliste .gmadde, html.kart-gel .kliste .kkart, html.kart-gel .kom-liste li { animation: kartGel 0.26s ease-out both; } @keyframes kartGel { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.btn:active, .primary-button:active, .ghero-cta:active, .goy:active { transform: scale(0.98); }
/* 9) yoğunluk anahtarı: Rahat (varsayılan) / Sık */
.yogunluk-kart .ksuzgec { margin-top: 10px; }
html[data-yogunluk="sik"] .gliste { gap: 6px; } html[data-yogunluk="sik"] .gmadde-ic { padding: 10px 12px; } html[data-yogunluk="sik"] .gmadde-baslik { font-size: 16px; } html[data-yogunluk="sik"] .gmadde-aciklama { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 4px; }
html[data-yogunluk="sik"] .kkart { padding: 10px 12px; } html[data-yogunluk="sik"] .kkart-metin { font-size: 14.5px; margin-bottom: 4px; } html[data-yogunluk="sik"] .kkart-cumle { display: none; } html[data-yogunluk="sik"] .kliste { gap: 6px; }
html[data-yogunluk="sik"] .ghero, html[data-yogunluk="sik"] .khero, html[data-yogunluk="sik"] .kom-hero { padding-top: 14px; padding-bottom: 14px; } html[data-yogunluk="sik"] .takvim li { padding: 4px 0; }
/* 10) marka dokunuşları: logo altında altın çizgi, ince doku, 200 ms geçişler, tek renk boş durum */
.portal-header { position: relative; background: #000 radial-gradient(120% 140% at 0% 0%, rgba(201, 169, 97, 0.10), transparent 55%); } .portal-header::after { content: ''; position: absolute; left: 24px; right: 24px; bottom: 0; height: 2px; background: linear-gradient(90deg, #c9a961, rgba(201, 169, 97, 0)); border-radius: 2px; }
.portal-dashboard .portal-survey-card, .gmadde, .kkart, .kom-kart, .takvim { transition: box-shadow 0.2s ease, border-color 0.2s ease; } .gmadde:hover, .kkart:hover { box-shadow: 0 8px 24px rgba(18, 48, 59, 0.08); }
.portal-empty { color: #6b7d86; } .portal-empty svg { color: #9ab0b8; }
@media (prefers-reduced-motion: reduce) { html.kart-gel .gliste .gmadde, html.kart-gel .kliste .kkart, html.kart-gel .kom-liste li, .gyorumlar li.yeni { animation: none; } .gyorum-form textarea.ta { transition: none; } .btn:active, .primary-button:active, .ghero-cta:active, .goy:active { transform: none; } }
.toplanti-modu .tm-zaman { margin: 0 0 16px; color: #a9c3cc; } .toplanti-modu .ghero-durum { margin: 14px 0 0; color: #a9c3cc; font-size: 13.5px; } .toplanti-modu .gkatil-adres a { color: #c9a961; }
.tm-oneriler .tm-oner { margin: 10px 0 12px; } .tm-oneriler .tm-oner .ghero-cta { font-size: 15px; padding: 12px 20px; }
/* ===== MADDE KARTI (19 Eyl 2026; Emre: "açılmaları kapanmaları güzel değil, tıklayınca bir şey olmuyor") — tek hâl, tek düğme, her yeri tıklanır ===== */
.gmadde.kapali { cursor: pointer; } .gmadde.kapali:hover { box-shadow: 0 8px 24px rgba(18, 48, 59, 0.10); border-color: #c9d6dc; }
.gmadde-baslik-ac { display: none; }
.gmadde-ac { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; margin-left: auto; min-height: 38px; padding: 6px 12px 6px 14px; border: 1.5px solid #c9d6dc; border-radius: 999px; background: #fff; color: #12303b; font-size: 13.5px; font-weight: 600; transition: background 0.2s ease, border-color 0.2s ease; }
.gmadde-ac b { font-weight: 700; } .gmadde-ac .gmadde-ac-etiket { color: #496471; font-weight: 500; } .gmadde-ac .gmadde-ac-etiket::before { content: '·'; margin: 0 2px 0 -2px; color: #9ab0b8; }
.gmadde-ac svg:last-child { transition: transform 0.2s ease; color: #496471; } .gmadde-ac.acik svg:last-child { transform: rotate(180deg); }
.gmadde-ac:hover, .gmadde.kapali:hover .gmadde-ac { background: #12303b; border-color: #12303b; color: #fff; } .gmadde-ac:hover .gmadde-ac-etiket, .gmadde.kapali:hover .gmadde-ac .gmadde-ac-etiket, .gmadde-ac:hover svg:last-child, .gmadde.kapali:hover .gmadde-ac svg:last-child { color: #fff; }
.gmadde-ac:focus-visible { outline: 2px solid #c9a961; outline-offset: 2px; }
.gmadde-arac { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; margin-top: 10px; padding-top: 10px; border-top: 1px dashed #dfe6ea; font-size: 13px; } .gmadde-arac .foto-link { display: inline-flex; align-items: center; gap: 4px; } .gmadde-arac .foto-link:last-child { margin-left: auto; }
.gmadde.acik .gmadde-aciklama.kisa { display: block; -webkit-line-clamp: unset; overflow: visible; }
@media (max-width: 560px) { .gmadde-ac { padding: 6px 10px; font-size: 13px; } .gmadde-ac .gmadde-ac-etiket { display: none; } }
@media (prefers-reduced-motion: reduce) { .gmadde-ac, .gmadde-ac svg:last-child { transition: none; } }
/* açık kartta "Dosya ekle" ile "Düzenle · Geri çek" aynı satırda; açıklayıcı bloklar tam satır */
.gmadde-daha { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 16px; } .gmadde-daha .ekler { margin-top: 0; flex: 1 1 auto; } .gmadde-daha .oneri-islem { margin-left: auto; }
.gmadde-daha .gbeyan, .gmadde-daha .gmadde-not, .gmadde-daha .gmadde-anket, .gmadde-daha .gmadde-iz { flex-basis: 100%; }
/* telefonda görüş: ad üstte, metin tam genişlikte altta */
@media (max-width: 560px) { .gyorumlar li { flex-wrap: wrap; } .gyorumlar li .yorum-metin { flex: 1 1 100%; } .gyorumlar li > .foto-link { margin-left: auto; } }
/* ===== TELEFON SIĞMA (19 Eyl 2026; Emre'nin iPhone ekran görüntüsü: üst bant sağdan taşıyor, sekmeler kesik, Düzenle düğmesi CTA'nın üstüne biniyor) ===== */
.portal-exit { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 560px) {
.tel-gizle { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.portal-header { gap: 8px; padding: 10px 12px; } .portal-logo { width: 84px; height: 60px; }
.portal-header > span:not(.portal-kisi) { display: none; }
.portal-kisi { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; flex-wrap: nowrap; min-width: 0; }
.portal-yonetim, .portal-yardim, .portal-exit { width: 36px; height: 36px; padding: 0; justify-content: center; gap: 0; border: 1px solid rgba(255, 255, 255, .25); border-radius: 999px; margin: 0; }
.portal-exit { color: #eadcba; font-size: 0; } .portal-exit svg { width: 16px; height: 16px; }
.yazi-dugme.bant { padding: 4px 8px; font-size: 13px; }
/* sekme şeridi kaydırılabilir: sağ kenar solarak "devamı var" der */
.portal-tabs [data-slot="tabs-list"] { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); padding-right: 28px; }
.portal-tabs [data-slot="tabs-list"].sonda { -webkit-mask-image: none; mask-image: none; }
/* moderatör anahtarı: küçük yuvarlak, CTA'nın üstüne binmez */
.mod-anahtar { width: 44px; height: 44px; padding: 0; justify-content: center; gap: 0; right: 12px; bottom: 12px; box-shadow: 0 6px 18px rgba(18, 48, 59, .18); }
.portal-dashboard { padding-bottom: 64px; }
}
/* ===== ANKET NABZI (19 Eyl 2026; Emre: "telefonda en önde anket olsun, oylamadıysa bağırsın; oyladıysa da canlı devam ettiğini görsün") ===== */
.anabiz { margin: 0 0 16px; padding: 16px 18px 14px; border-radius: 18px; }
.anabiz.bekliyor { background: #fff; color: #12303b; border: 1px solid #f0d6d2; box-shadow: 0 12px 34px rgba(0, 0, 0, .26); animation: anabizNefes 2.8s ease-in-out infinite; }
.anabiz.oylandi { background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .16); color: #eaf2f4; }
@keyframes anabizNefes { 0%, 100% { box-shadow: 0 12px 34px rgba(0, 0, 0, .26), 0 0 0 0 rgba(180, 35, 24, .38); } 50% { box-shadow: 0 12px 34px rgba(0, 0, 0, .26), 0 0 0 12px rgba(180, 35, 24, 0); } }
.anabiz-bas { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.anabiz-canli { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 800; letter-spacing: .12em; }
.anabiz.bekliyor .anabiz-canli { color: #b42318; } .anabiz.oylandi .anabiz-canli { color: #8fe0b0; }
.anabiz-canli i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: anabizNabiz 1.4s ease-in-out infinite; }
@keyframes anabizNabiz { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .3; transform: scale(.65); } }
.anabiz-sure { margin-left: auto; font-size: 13px; } .anabiz.bekliyor .anabiz-sure { color: #6b7d86; } .anabiz.oylandi .anabiz-sure { color: #a9c3cc; }
.anabiz-baslik { margin: 0 0 4px; font-size: clamp(19px, 4.4vw, 24px); line-height: 1.25; color: inherit; }
.anabiz-durum { margin: 0 0 12px; font-size: 14px; line-height: 1.5; } .anabiz.bekliyor .anabiz-durum { color: #4f6670; } .anabiz.oylandi .anabiz-durum { color: #a9c3cc; }
.anabiz-sayi { margin: 0 0 6px; font-size: 13px; } .anabiz-sayi strong { font-size: 15px; }
.anabiz-cubuk { height: 8px; border-radius: 999px; overflow: hidden; background: rgba(18, 48, 59, .10); } .anabiz.oylandi .anabiz-cubuk { background: rgba(255, 255, 255, .14); }
.anabiz-cubuk span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #c9a961, #e2cb8c); transition: width .6s ease; }
.anabiz-eylem { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 14px; }
.anabiz-dugme { min-height: 48px; } .anabiz.oylandi .anabiz-dugme { border-color: rgba(255, 255, 255, .4); color: #fff; background: transparent; }
.anabiz-ikincil { font-size: 13px; } .anabiz.oylandi .anabiz-ikincil { color: #c9a961; }
@media (prefers-reduced-motion: reduce) { .anabiz.bekliyor { animation: none; } .anabiz-canli i, .mini-bar-canli i { animation: none; } .anabiz-cubuk span { transition: none; } }
/* Kaydırınca üstte kalan ince bar (mobil #9) — varsayılan olarak yalnız telefonda. */
.mini-bar { display: none; }
.mini-bar-canli { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: #1f6b45; }
.mini-bar-canli.nabiz { color: #b42318; } .mini-bar-canli i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.mini-bar-canli.nabiz i { animation: anabizNabiz 1.4s ease-in-out infinite; }
/* ===== MOBİL KALİTE TURU (19 Eyl 2026; Emre'nin 10 maddesi) ===== */
@media (max-width: 560px) {
/* 1) üst alan yarıya: ilk ekranda gerçek içerik görünsün */
.portal-logo { width: 72px; height: 52px; }
.portal-dashboard-heading { gap: 10px; align-items: center; }
.portal-dashboard-heading .eyebrow, .portal-dashboard-heading .foto-satir { display: none; }
.portal-dashboard-heading h1 { font-size: 19px; margin: 0; }
.portal-dashboard-heading .avatar.buyuk { width: 46px; height: 46px; font-size: 18px; }
.portal-dashboard-heading .avatar-rozet { width: 18px; height: 18px; } .portal-dashboard-heading .avatar-rozet svg { width: 11px; height: 11px; }
.sahne { padding-bottom: 12px; } .karsilama { padding: 12px 14px; margin-top: 10px; }
.karsilama-ana { gap: 10px; } .karsilama-ana .ghero-cta { width: 100%; justify-content: center; }
.anabiz { margin-bottom: 12px; padding: 14px 15px 12px; }
/* 2) sekmeler alta sabit çubuk: beşi de görünür, başparmak menzilinde */
.sahne .portal-tabs [data-slot="tabs-list"], .portal-tabs [data-slot="tabs-list"] {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 120; margin: 0; padding: 5px 2px calc(5px + env(safe-area-inset-bottom));
border-radius: 0; border: 0; border-top: 1px solid rgba(255, 255, 255, .13); background: #0b1e26; backdrop-filter: none;
display: flex; gap: 0; overflow: visible; -webkit-mask-image: none; mask-image: none; box-shadow: 0 -6px 20px rgba(0, 0, 0, .22); }
.sahne .portal-tabs [data-slot="tabs-trigger"], .portal-tabs [data-slot="tabs-trigger"] { flex: 1 1 0; min-width: 0; flex-direction: column; gap: 3px; padding: 7px 2px 5px; font-size: 11px; line-height: 1.15;
border-radius: 12px; white-space: nowrap; overflow: hidden; text-overflow: clip; position: relative; color: #9fb6bf; background: none; }
.sahne .portal-tabs [data-slot="tabs-trigger"] svg, .portal-tabs [data-slot="tabs-trigger"] svg { display: block; width: 20px; height: 20px; }
.sahne .portal-tabs [data-slot="tabs-trigger"][data-state="active"], .portal-tabs [data-slot="tabs-trigger"][data-state="active"] { background: none; color: #f4e6b8; box-shadow: none; }
.sahne .portal-tabs [data-slot="tabs-trigger"][data-state="active"]::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 26px; height: 3px; border-radius: 0 0 3px 3px; background: var(--altin, #c9a75c); }
.sahne .portal-tabs [data-slot="tabs-trigger"]:hover { background: none; }
.govde-alan { padding-bottom: calc(78px + env(safe-area-inset-bottom)); }
/* 3) sekmedeki "CANLI / OYLANDI" rozeti noktaya iner (metin ekran okuyucuda kalır) */
/* eski kurallar !important ile hap zemini/metin rengi dayatıyor; alt çubukta yalnız nokta kalsın ve etiket çubuğun rengini alsın */
.sekme-canli.nokta, .sekme-canli.sessiz.nokta { position: absolute; top: 3px; left: 50%; margin: 0 0 0 9px; padding: 0 !important; border: 0; background: none !important; box-shadow: none; min-height: 0; animation: none; }
.sahne [data-sekme="surveys"].sekme-canli-var, .sahne [data-sekme="surveys"][data-state="active"].sekme-canli-var,
.sahne [data-sekme="surveys"].sekme-canli-var.oylandi, .sahne [data-sekme="surveys"][data-state="active"].sekme-canli-var.oylandi { color: inherit !important; }
.portal-tabs .sekme-cagri { box-shadow: none; animation: none; }
.sekme-canli.nabiz.nokta i { animation: anabizNabiz 1.4s ease-in-out infinite; }
.sekme-canli.nokta b { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sekme-canli.nokta i { display: block; width: 8px; height: 8px; border-radius: 50%; background: #b42318; }
.sekme-canli.sessiz.nokta i { background: #2f9e63; animation: none; }
/* 4) anket kartı: başlık önce, künye altında tek satır */
.portal-survey-card.current h2 { margin-top: 0; }
.portal-card-top { flex-wrap: wrap; gap: 4px 10px; font-size: 12.5px; margin: 6px 0 10px; }
.portal-card-actions { flex-direction: column; align-items: stretch; } .portal-card-actions .btn { width: 100%; justify-content: center; }
/* 5) kontrol satırları teke insin: çipler tek satırda kayar */
.ksuzgec, .anket-alt { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; touch-action: pan-x; scrollbar-width: none; padding-bottom: 2px; }
.ksuzgec::-webkit-scrollbar, .anket-alt::-webkit-scrollbar { display: none; }
.ksuzgec > *, .anket-alt > * { flex: 0 0 auto; }
/* 7) ölçüler: okunur yazı, 44 px dokunma hedefi, iOS'ta kendiliğinden büyütmeyi önleyen 16 px kutular */
small, .small, .muted, .portal-empty, .sahne-rol, .gmadde-kim small, .kkart-cumle, .anabiz-sure, .gdestek-bos { font-size: 13px; }
input.inp, textarea.ta, select.inp, input[type="search"] { font-size: 16px; }
.portal-yonetim, .portal-yardim, .portal-exit, .yazi-dugme.bant { width: 44px; height: 44px; }
.portal-kisi .avatar.kucuk { width: 40px; height: 40px; }
.foto-link { min-height: 44px; }
/* 8) kart içinde kart olmasın: tek çerçeve, ince ayraç */
.portal-survey-card .durum-rozet, .portal-survey-card .katilim, .hazirlik-kart, .kume { border-left: 0; border-right: 0; border-radius: 0; }
.portal-planned .portal-survey-card { box-shadow: none; }
/* 9) kaydırınca üstte kalan ince bar (gündem çubuğunun yerini alır) */
.mini-bar:not([hidden]) { display: flex; position: sticky; top: 0; z-index: 110; align-items: center; gap: 10px; padding: 9px 16px; margin: 0 -16px 12px;
background: rgba(255, 255, 255, .94); backdrop-filter: blur(10px); border-bottom: 1px solid #e3eaee; }
.mini-bar-ad { font-size: 14px; font-weight: 800; color: #12303b; } .mini-bar .ghero-cta.kucuk { margin-left: auto; min-height: 36px; padding: 6px 14px; font-size: 13px; }
.gcubuk { display: none !important; }
/* Alt çubuk gerçekten TIKLANABİLİR olsun: .sahne "isolation: isolate" ile kendi yığın bağlamını kuruyor, içindeki
fixed çubuk o bağlamda kalıyor ve DOM'da sonra gelen .ghero (position: relative) tıklamayı yutuyordu. Sahneyi
bir kademe yukarı alıyoruz; katmanlar (95+) ve bildirimler (600) hâlâ üstte. */
.sahne { z-index: 2; }
/* 10) iPhone alt boşluğu; yüzen moderatör anahtarı alt çubuğun üstünde durur */
.mod-anahtar { bottom: calc(76px + env(safe-area-inset-bottom)); }
.bildirimler { bottom: calc(78px + env(safe-area-inset-bottom)); }
}
/* telefonda anket nabzı varken karşılama kartı tek satıra iner (aynı ekranda iki çağrı yarışmasın) */
@media (max-width: 560px) { .anabiz ~ .karsilama { padding: 10px 14px; } .anabiz ~ .karsilama .karsilama-ust { font-size: 10.5px; } .anabiz ~ .karsilama .karsilama-ana p { display: none; } .anabiz ~ .karsilama .karsilama-ikon { display: none; } }
/* ===== ANKET SORU TASLAĞI (20 Eyl 2026) — planlı anketin soruları, yalnız kapısı açık liderlere ===== */
.anket-taslak { margin: 12px 0 0; padding: 12px 14px; border: 1px dashed #cbd9df; border-radius: 14px; background: #fbfcfd; }
/* Örnek anket kartı: tek ve apaçık bir düğme — basan kişi gerçek formun içine düşer (Emre, 20 Eyl). */
.taslak-ac { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: left;
padding: 14px 16px; border: 1px solid #12303b; border-radius: 12px; background: #12303b; color: #f4e6b8; cursor: pointer;
transition: transform .15s ease, box-shadow .15s ease; }
.taslak-ac:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(18, 48, 59, .18); }
.taslak-ac:active { transform: none; }
.taslak-ac-ic { display: grid; gap: 3px; min-width: 0; }
.taslak-ac-ic strong { display: flex; align-items: center; gap: 8px; font-size: 15.5px; font-weight: 700; color: #fff; }
.taslak-ac-ic small { color: #bcd2d9; font-size: 12.5px; line-height: 1.45; }
.taslak-ac > svg { flex: none; }
.taslak-sonuc { margin-top: 2px; }
.taslak-not { display: flex; align-items: flex-start; gap: 6px; margin: 10px 0; padding: 8px 10px; border-radius: 10px; background: #eef4f6; color: #3f6b7a; font-size: 13px; line-height: 1.5; }
@media (max-width: 560px) { .anket-taslak { padding: 10px 12px; } .taslak-ac { padding: 12px 13px; } }
/* Taslak gezisi: planlama bandı her sayfada, gönderim kapalı */
.g-onizleme-bant.taslak-bant { background: #7a1f1a; color: #ffe9e6; align-items: flex-start; line-height: 1.5; }
.g-onizleme-bant.taslak-bant strong { color: #fff; } .g-onizleme-bant.taslak-bant .foto-link { color: #ffd9d4; }
.taslak-son { margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; background: #f6f3ea; color: #6b5a2f; font-size: 13.5px; line-height: 1.55; }
.g-giris { white-space: pre-line; }
.g-soru .oneri-rozet { white-space: normal; text-align: left; line-height: 1.45; max-width: 640px; align-items: flex-start; }
.g-soru .oneri-rozet svg { flex-shrink: 0; margin-top: 2px; }
/* Şık açıklamasında satır başı korunur: uzun şıkların artı/eksi satırları alt alta okunur (20 Eyl) */
.g-secenek small { white-space: pre-line; }
.g-secenek small b { color: #12303b; font-weight: 700; }
/* ===== DALLI ANKET SONUÇ EKRANI (20 Eyl 2026) ===== */
.ornek-bant { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 14px; padding: 12px 14px; border-radius: 12px; background: #7a1f1a; color: #ffe9e6; font-size: 13.5px; line-height: 1.5; }
.ornek-bant strong { color: #fff; }
.g-yollar { margin: 0 0 22px; padding: 18px 20px; border: 1px solid #dfe7eb; border-radius: 16px; background: #fbfcfd; }
.g-yollar h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: 18px; color: #12303b; }
.g-sonuc-suzgec { margin: 0 0 18px; }
.g-kime { display: inline-flex; align-items: flex-start; gap: 5px; margin: 6px 0 10px; padding: 4px 10px; border-radius: 999px; background: #f6f3ea; color: #8a6a1f; font-size: 12.5px; line-height: 1.45; }
.g-sonuc-kart.kosullu { border-left: 3px solid #e0cd9a; }
.g-kisiler { display: grid; gap: 14px; }
.g-kisi-kart { padding: 16px 18px; border: 1px solid #dfe7eb; border-radius: 14px; background: #fff; }
.g-kisi-kart .soz-baslik small { color: #6b7d86; font-weight: 500; }
.g-kisi-yol { margin: 12px 0 0; display: grid; gap: 10px; }
.g-kisi-yol dt { font-size: 13px; color: #6b7d86; line-height: 1.4; }
.g-kisi-yol dd { margin: 2px 0 0; font-size: 14.5px; font-weight: 600; color: #12303b; }
.g-kisi-yol .public-quote { margin: 6px 0 0; font-weight: 400; }
.welcome-sonuc-not { margin: 10px 0 0; color: #6b7d86; font-size: 13px; line-height: 1.55; }
@media (max-width: 560px) { .g-yollar { padding: 14px 15px; } .g-kisi-kart { padding: 13px 14px; } .welcome-start { flex-direction: column; align-items: stretch; } }
/* ===== SONUÇ EKRANI: TEK BAKIŞTA ÖZET (20 Eyl 2026; Emre "kaotik olmuş; grafik, diyagram, animasyon") ===== */
.gs-hero { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin: 0 0 22px; padding: 22px 24px; border-radius: 20px; background: linear-gradient(135deg, #0b1e26, #143a48); color: #eaf3f6; }
.gs-hero-yazi { flex: 1; min-width: 240px; } .gs-hero h1 { margin: 0 0 6px; color: #fff; font-size: clamp(21px, 3.4vw, 28px); }
.gs-manset { margin: 0 0 6px; font-size: 16px; line-height: 1.55; color: #dbe9ee; } .gs-manset strong { color: #f4e6b8; } .gs-manset em { color: #ffcfc9; font-style: normal; }
.gs-alt { margin: 0; color: #a9c3cc; font-size: 13.5px; }
.gs-halka { position: relative; width: 128px; height: 128px; flex: 0 0 auto; }
.gs-halka svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.gs-halka-iz { fill: none; stroke: rgba(255, 255, 255, .13); stroke-width: 12; }
.gs-halka-yay { fill: none; stroke: #c9a961; stroke-width: 12; stroke-linecap: round; animation: gsHalka 1.1s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes gsHalka { from { stroke-dashoffset: var(--cevre); } }
.gs-halka-ic { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.gs-halka-ic strong { display: block; font-size: 30px; color: #fff; line-height: 1; } .gs-halka-ic small { color: #a9c3cc; font-size: 12px; }
.gs-bolum { margin: 0 0 20px; } .gs-bolum h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 2px; font-size: 19px; color: #12303b; }
.gs-akis { margin-top: 10px; padding: 8px 4px; border: 1px solid #dfe7eb; border-radius: 16px; background: #fbfcfd; overflow-x: auto; }
.gs-akis svg { width: 100%; min-width: 620px; height: auto; display: block; }
.gs-kok { fill: #12303b; } .gs-kok-sayi { fill: #fff; font-size: 22px; font-weight: 700; text-anchor: middle; } .gs-kok-alt { fill: #a9c3cc; font-size: 11px; text-anchor: middle; }
.gs-serit { fill: none; stroke: #cbd9df; stroke-linecap: round; opacity: .9; stroke-dasharray: 460; animation: gsCiz .9s ease-out both; animation-delay: var(--gecikme, 0ms); }
.gs-kol.onde .gs-serit { stroke: #c9a961; } .gs-kol.onde .gs-nokta { fill: #c9a961; } .gs-kol.onde .gs-kol-ad { fill: #12303b; font-weight: 700; }
@keyframes gsCiz { from { stroke-dashoffset: 460; } to { stroke-dashoffset: 0; } }
.gs-nokta { fill: #8aa0aa; } .gs-kol-ad { fill: #33515e; font-size: 14px; font-weight: 600; } .gs-kol-sayi { fill: #6b7d86; font-size: 12.5px; }
.gs-kol { animation: gsKolGel .5s ease-out both; animation-delay: var(--gecikme, 0ms); }
@keyframes gsKolGel { from { opacity: 0; transform: translateX(-8px); } }
.gs-ipucu { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; color: #6b7d86; font-size: 13px; }
.gs-kararlar { display: grid; gap: 10px; }
.gs-karar { border: 1px solid #dfe7eb; border-radius: 14px; background: #fff; overflow: hidden; animation: gsKartGel .4s ease-out both; animation-delay: var(--gecikme, 0ms); }
@keyframes gsKartGel { from { opacity: 0; transform: translateY(6px); } }
.gs-karar.kosullu { border-left: 3px solid #e0cd9a; }
.gs-karar-bas { all: unset; cursor: pointer; display: flex; align-items: center; gap: 14px; width: 100%; box-sizing: border-box; padding: 14px 16px; }
.gs-karar-bas:hover { background: #f7fafb; } .gs-karar-bas:focus-visible { outline: 2px solid #c9a961; outline-offset: -2px; }
.gs-karar-no { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: #eef4f6; color: #3f6b7a; font-size: 12.5px; font-weight: 700; display: grid; place-content: center; }
.gs-karar-ic { flex: 1; min-width: 0; } .gs-karar-ic strong { display: block; font-size: 15px; color: #12303b; line-height: 1.4; }
.gs-karar-kime { display: block; margin-top: 2px; color: #8a6a1f; font-size: 12px; }
.gs-karar-kazanan { display: block; margin-top: 4px; color: #1f6b45; font-size: 14px; font-weight: 700; }
.gs-mini-cubuk { display: block; margin-top: 6px; height: 6px; border-radius: 999px; background: #eef2f4; overflow: hidden; }
.gs-mini-cubuk i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #c9a961, #e2cb8c); transform-origin: left; animation: gsBar .8s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes gsBar { from { transform: scaleX(0); } }
.gs-karar-bas > svg:last-child { flex: 0 0 auto; color: #8aa0aa; transition: transform .2s ease; }
.gs-karar.acik .gs-karar-bas > svg:last-child { transform: rotate(180deg); }
.gs-karar-ayrinti { padding: 0 16px 8px; border-top: 1px solid #eef2f4; animation: gsAc .3s ease-out both; }
@keyframes gsAc { from { opacity: 0; transform: translateY(-4px); } }
.gs-karar-ayrinti .g-sonuc-kart { border: 0; padding: 14px 0 0; box-shadow: none; background: none; }
@media (max-width: 560px) { .gs-hero { gap: 16px; padding: 16px 16px 18px; } .gs-halka { width: 96px; height: 96px; } .gs-halka-ic strong { font-size: 24px; } .gs-karar-bas { padding: 12px 13px; gap: 10px; } }
@media (prefers-reduced-motion: reduce) { .gs-halka-yay, .gs-serit, .gs-kol, .gs-karar, .gs-mini-cubuk i, .gs-karar-ayrinti { animation: none; } .gs-karar-bas > svg:last-child { transition: none; } }
/* Ayrıntı kartında şıklar YAN YANA sütunlar (20 Eyl 2026; Emre: "tablolar çok büyüyor, seçimler yan yana kısa kısa olsun") */
.g-sutunlar { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 10px; align-items: stretch; margin: 14px 0 10px; }
.g-sutun { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 6px; padding: 10px 8px 12px; border: 1px solid #e6edf0; border-radius: 12px; background: #fbfcfd; text-align: center; animation: gsKartGel .45s ease-out both; animation-delay: var(--gecikme, 0ms); }
.g-sutun-oran { font-size: 15px; font-weight: 800; color: #33515e; font-variant-numeric: tabular-nums; }
.g-sutun-iz { width: 34px; height: 92px; border-radius: 8px; background: #eef2f4; display: flex; align-items: flex-end; overflow: hidden; }
.g-sutun-iz i { display: block; width: 100%; border-radius: 8px 8px 0 0; background: linear-gradient(180deg, #d9c48d, #c9a961); transform-origin: bottom; animation: gsSutun .7s cubic-bezier(.2, .8, .2, 1) both; animation-delay: var(--gecikme, 0ms); }
@keyframes gsSutun { from { transform: scaleY(0); } }
.g-sutun-ad { font-size: 13px; line-height: 1.35; color: #33515e; overflow-wrap: anywhere; }
.g-sutun small { margin-top: auto; padding-top: 2px; color: #6b7d86; font-size: 12px; } /* sayı her kartın ALTINA otursun: satırdaki kartlar eşit yükseklikte hizalanır */
.g-sutun.onde { border-color: #c9a961; background: #fdfaf2; } .g-sutun.onde .g-sutun-oran { color: #12303b; } .g-sutun.onde .g-sutun-ad { font-weight: 700; color: #12303b; }
.g-sutunlar.olcek { grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); } .g-sutunlar.olcek .g-sutun-iz { width: 26px; height: 74px; }
.g-kimler.toplu p { display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 0 0 8px; font-size: 13px; line-height: 1.5; }
.g-kimler.toplu p strong { color: #12303b; } .g-kimler.toplu p span { color: #4f6670; }
@media (max-width: 560px) { .g-sutunlar { grid-template-columns: repeat(2, 1fr); gap: 8px; } .g-sutun-iz { height: 74px; width: 30px; } }
@media (prefers-reduced-motion: reduce) { .g-sutun, .g-sutun-iz i { animation: none; } }
/* Şık içi 4 haftalık takvim şeridi (20 Eyl 2026; Emre: "ne kadar çalışılacak anlaşılsın") */
.g-takvim { margin-top: 10px; display: grid; gap: 4px; font-size: 12px; }
.g-takvim-bas, .g-takvim-satir { display: grid; grid-template-columns: 96px repeat(4, minmax(0, 1fr)) 92px; align-items: center; gap: 5px; }
.g-takvim-bas b { color: #8aa0aa; font-weight: 600; text-align: center; font-size: 11px; letter-spacing: .01em; }
.g-takvim-satir > span { color: #33515e; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-takvim-satir i { display: flex; align-items: center; justify-content: center; height: 26px; border-radius: 7px; background: #eef2f4; color: #9ab0b8; }
/* Marka renkleri BİLEREK: kare "buluşma var" demiyor, HANGİ ARAÇLA olduğunu söylüyor (Emre, 20 Eyl).
Dolu Zoom mavisi = canlı toplantı · kesikli yeşil WhatsApp = toplantı yok, yazışma var · boş gri = hiçbiri. */
.g-takvim-satir i.var { background: #2d8cff; color: #fff; }
.g-takvim-satir i.wa { background: #fff; border: 1px dashed #9bd9b4; color: #25d366; }
.g-takvim-satir i svg { display: block; }
.g-takvim-satir em { font-style: normal; color: #6b7d86; text-align: right; font-size: 11.5px; }
.g-secenek.secili .g-takvim-satir i.var { background: #1877e0; }
/* Telefonda 62px "Yönetim Kurulu"yu "Yönetim …" diye kırpıyordu — hangi kurul olduğu takvimin TEK okunur bilgisi,
kırpılacak son şey o. Etiket 88px + 11px punto ile tam sığıyor; kareler yine 15px işarete bol bol yeter. */
@media (max-width: 560px) { .g-takvim-bas, .g-takvim-satir { grid-template-columns: 88px repeat(4, minmax(0, 1fr)); }
.g-takvim-bas b { font-size: 10px; } .g-takvim-satir > span { font-size: 11px; }
.g-takvim-satir em { grid-column: 1 / -1; text-align: left; padding-left: 2px; }
.g-takvim-satir i { height: 22px; } }
/* Koşan toplam (20 Eyl 2026; Emre: "kaç üye olduğunu kafadan toplamak zorunda kalmasın").
Düğmelerin hemen üstünde durur: seçim yapılınca aynı bakışta sonuç görünür. Eksikken sayı SÖNÜK
ve "şimdilik" der — tamamlanmamış bir toplamı kesinmiş gibi göstermek toplamamaktan kötüdür. */
.g-toplam { margin: 22px 0 6px; padding: 14px 16px; border: 1px solid #d9e4e8; border-radius: 14px; background: #f6fafb; }
.g-toplam.eksik { background: #fbfbf9; border-style: dashed; }
.g-toplam-ust { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.g-toplam-ust > span { color: #52707c; font-size: 13px; font-weight: 600; letter-spacing: .01em; }
.g-toplam-ust strong { color: #12303b; font-size: 26px; font-weight: 800; line-height: 1.1; }
.g-toplam.eksik .g-toplam-ust strong { color: #5c7581; }
.g-toplam-ust strong em { font-style: normal; font-size: 13px; font-weight: 600; color: #8aa0aa; }
.g-toplam-dokum { margin: 8px 0 0; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 13px; color: #52707c; }
.g-toplam-dokum span { background: #fff; border: 1px solid #e3ecef; border-radius: 999px; padding: 3px 11px; }
.g-toplam-dokum span b { color: #12303b; font-weight: 800; }
.g-toplam-dokum span.bekliyor { background: none; border: none; padding: 3px 0; color: #8aa0aa; font-style: italic; }
.g-toplam-dokum i { font-style: normal; color: #9ab0b8; font-weight: 700; }
@media (max-width: 560px) { .g-toplam { margin-top: 18px; padding: 12px 13px; } .g-toplam-ust strong { font-size: 22px; } }
/* Giriş ekranı uyarı kutusu (22 Eyl, Emre: "kırmızıyla… giren herkes bunu kaçırmamalı"): başlığın hemen altında, tam genişlik. */
.g-uyari-kutu { display: flex; gap: 12px; align-items: flex-start; margin: 18px 0 20px; padding: 16px 18px; border-radius: 14px;
background: #fdecea; border: 2px solid #c0392b; color: #5c1a12; }
.g-uyari-kutu > svg { flex: none; color: #c0392b; margin-top: 1px; }
.g-uyari-kutu strong { display: block; font-size: 17px; font-weight: 800; color: #8e1f14; letter-spacing: .01em; margin-bottom: 4px; }
.g-uyari-kutu p { margin: 0; font-size: 15.5px; line-height: 1.55; white-space: pre-line; }
.g-uyari-kutu p b { color: #8e1f14; font-weight: 800; }
@media (max-width: 560px) { .g-uyari-kutu { padding: 13px 14px; gap: 10px; } .g-uyari-kutu strong { font-size: 16px; } .g-uyari-kutu p { font-size: 15px; } }
/* Üst sınır aşımı: UYARI, hata değil — kırmızı değil kehribar; kişi bilerek bırakabilir. */
.g-toplam.asim { border-color: #ecd49a; background: #fffaf0; }
.g-toplam-uyari { margin: 10px 0 0; display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; line-height: 1.5; color: #6b4e12; }
.g-toplam-uyari svg { flex: none; margin-top: 2px; color: #b7791f; }
.g-toplam-uyari b { color: #4a340a; }
/* Sonuç ekranının asıl sayısı: kurulun kaç kişi olacağı — ankette sorulmuyor, cevaplardan türüyor (20 Eyl 2026). */
.gs-boy { border: 1px solid #d9e4e8; border-radius: 16px; padding: 18px 18px 14px; background: linear-gradient(180deg, #f8fbfc, #fff); }
.gs-boy-manset { margin: 6px 0 2px; font-size: 16px; color: #33515e; line-height: 1.5; }
.gs-boy-manset strong { color: #12303b; font-size: 22px; font-weight: 800; }
.gs-boy-manset span { color: #6b7d86; font-size: 13.5px; }
.gs-boy .g-ipucu { margin-bottom: 14px; }
@media (max-width: 560px) { .gs-boy { padding: 14px 13px 12px; } .gs-boy-manset strong { font-size: 19px; } }
/* Boy dağılımı bir HİSTOGRAM: değerler sayı ekseninde sıralı, o yüzden sarmalanmaz, YATAY kayar.
Karo düzeni 13 ayrı boyu telefonda 7 satıra yayıyordu ve eksen duygusu kayboluyordu.
Şerit kuralı (24 Ağu dersi): overscroll-behavior-x + touch-action, yoksa jest sayfaya zincirlenir. */
.gs-boy .g-sutunlar { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x proximity;
overscroll-behavior-x: contain; touch-action: pan-x; -webkit-overflow-scrolling: touch; }
.gs-boy .g-sutun { flex: 0 0 58px; scroll-snap-align: center; }
.gs-boy .g-sutun-ad { font-size: 12px; white-space: nowrap; }
@media (max-width: 560px) { .gs-boy .g-sutun { flex-basis: 52px; } }
/* Soru altında başkalarının gerekçeleri (20 Eyl 2026; Emre: "birbirinin gerekçelerini okuyarak ilerlemeli").
KAPALI başlar ve yalnız kişi kendi seçimini yaptıktan sonra doğar — çapa etkisi olmasın. */
.g-baskalari { margin-top: 18px; border: 1px solid #e3ecef; border-radius: 13px; background: #fbfdfd; }
.g-baskalari > summary { list-style: none; cursor: pointer; padding: 12px 14px; display: flex; align-items: center; gap: 8px;
color: #33515e; font-size: 13.5px; font-weight: 600; border-radius: 13px; }
.g-baskalari > summary::-webkit-details-marker { display: none; }
.g-baskalari > summary b { color: #12303b; font-weight: 800; }
.g-baskalari > summary small { color: #8aa0aa; font-weight: 500; }
.g-baskalari > summary:hover { background: #f2f7f8; }
.g-baskalari[open] > summary { border-bottom: 1px solid #eef3f5; border-radius: 13px 13px 0 0; }
.g-baskalari-liste { padding: 4px 14px 12px; display: grid; gap: 12px; max-height: 420px; overflow-y: auto; overscroll-behavior-y: contain; }
.g-baskalari-liste .gorus { padding: 0; border: none; background: none; }
.g-baskalari-yok { margin-top: 16px; color: #8aa0aa; font-size: 13px; display: flex; align-items: center; gap: 7px; }
/* 🔴 TELEFONDA "DEVAM ET" KATLANIN ALTINDA KALIYORDU (20 Eyl 2026; Emre: "telefonda devam tuşu çıkmıyor").
Soru + şıklar + gerekçe kutusu 375px'te ~660px tutuyor; düğme şeridi 1005px'te başlıyor ve orada olduğuna
dair hiçbir işaret yok. `position: fixed` KULLANILMAZ — 24 Ağu dersi: atası `isolation`/`transform` taşıyan
bir fixed katman yığın bağlamına hapsolur, ekranda doğru görünüp TIKLANMAZ. `sticky` akışta kalır, o tuzağa
düşmez; ataların hiçbirinde `overflow:hidden` yok (ölçüldü: content/main-panel/app-shell hepsi visible). */
@media (max-width: 900px) {
.g-anket .content > .actions {
position: sticky; bottom: 0; z-index: 3;
margin-top: 22px; margin-left: -16px; margin-right: -16px;
padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
background: var(--background, #fafcfd);
box-shadow: 0 -10px 22px -14px rgba(18, 48, 59, .35);
}
.g-anket .content > .actions .primary-button { flex: 1; justify-content: center; }
}
/* Madde listesi (20 Eyl 2026; Emre: "herkes hayati kararları madde madde kendi yazabilmeli").
Her madde ayrı kutu: sonradan birleştirilip oylanacak, paragraf değil. */
.g-soru .intro { white-space: pre-line; } /* soru açıklamasındaki satır başları (madde işaretli açıklamalar) korunur */
.g-liste { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 10px; }
.g-liste li { display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 10px; }
.g-liste-no { width: 32px; height: 32px; border-radius: 50%; background: #eef3f5; color: #12303b; font-weight: 800; font-size: 14px;
display: flex; align-items: center; justify-content: center; }
.g-liste .inp { min-height: 48px; font-size: 16px; } /* 16px: iOS odakta yakınlaştırmasın */
.g-liste-sil { width: 44px; height: 44px; border: 0; border-radius: 12px; background: none; color: #8aa0aa; cursor: pointer;
display: flex; align-items: center; justify-content: center; }
.g-liste-sil:hover, .g-liste-sil:focus-visible { background: #f3e3de; color: #b5533c; }
.g-liste li:only-child .g-liste-sil:empty { display: none; }
.g-liste-ekle { margin-top: 2px; }
.g-liste-sonuc { display: grid; gap: 14px; }
@media (max-width: 560px) { .g-liste li { grid-template-columns: 26px 1fr auto; gap: 8px; } .g-liste-no { width: 26px; height: 26px; font-size: 12.5px; } }
.g-liste-form { margin: 0; } /* yalnız Enter yedeği için var; görünümü olmayan sarmalayıcı */