/* ============================================================ SİAYSD ANKET — style.css Safkan İngiliz Atı Yetiştiricileri ve Sahipleri Derneği ------------------------------------------------------------ Tüm marka renkleri ve font CSS değişkenleriyle tanımlıdır. Logo renklerine göre ayarlanmıştır; istenirse buradan tek noktadan değiştirilebilir. ============================================================ */ /* ---- FONT ---- Montserrat, aşağıda Google Fonts üzerinden HTML içinde yükleniyor. Fontu lokal kullanmak isterseniz assets/fonts/ klasörüne ekleyip burada @font-face ile tanımlayabilirsiniz. Örnek: @font-face { font-family: "Montserrat"; src: url("../fonts/Montserrat-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; } */ /* ============================================================ 1. MARKA DEĞİŞKENLERİ (LOGO RENKLERİNE GÖRE) ============================================================ */ :root { /* Ana yeşiller — logodaki koyu yeşil at silüeti */ --color-primary: #2c5c34; /* koyu yeşil — ana marka rengi */ --color-primary-dark: #1f4326; /* butonda hover, koyu vurgular */ --color-primary-darker: #16311c; /* en koyu ton, başlıklar */ --color-primary-light: #eef4ee; /* çok açık yeşil zemin */ --color-primary-tint: #e0ece1; /* seçili kart arka planı */ /* İkincil yeşil — logodaki parlak yeşil tay */ --color-accent: #5aaa2e; /* canlı yeşil vurgu */ --color-accent-dark: #4b8f26; /* Altın / hardal — logodaki başak ve çerçeve tonları */ --color-gold: #c79a3a; /* altın vurgu */ --color-gold-dark: #a97f2c; /* Nötr tonlar */ --color-text: #1e2a20; /* ana metin */ --color-heading: #16311c; /* başlık metni */ --color-muted: #5f6b62; /* açıklama / ikincil metin */ --color-border: #d6ded7; /* kenarlıklar */ --color-border-strong: #c2ccc4; --color-background: #ffffff; --color-surface: #ffffff; /* kart yüzeyi */ --color-surface-alt: #f7faf7; /* hafif zeminli bölümler */ /* Durum renkleri */ --color-error: #b42318; --color-error-bg: #fdf1f0; --color-success: #2c7a4b; /* Tipografi */ --font-primary: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; /* Ölçüler */ --radius: 12px; --radius-sm: 8px; --max-width: 900px; --focus-ring: 0 0 0 3px rgba(90, 170, 46, 0.35); } /* ============================================================ 2. TEMEL SIFIRLAMA ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-primary); font-size: 16px; line-height: 1.6; color: var(--color-text); background-color: var(--color-background); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img { max-width: 100%; height: auto; display: block; } a { color: var(--color-primary); text-decoration: none; } a:hover { text-decoration: underline; } button { font-family: inherit; } /* Görme engelli kullanıcılar için gizli, ekran okuyucuya açık */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ============================================================ 3. YERLEŞİM ============================================================ */ .page { display: flex; flex-direction: column; min-height: 100vh; } .container { width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 20px; } .main { flex: 1 0 auto; padding: 40px 0 64px; } /* İnce üst şerit — logo altın/yeşil çizgisi hissi */ .topbar { height: 4px; background: linear-gradient( 90deg, var(--color-primary) 0%, var(--color-accent) 50%, var(--color-gold) 100% ); } /* ============================================================ 4. ÜST ALAN (HERO) ============================================================ */ .hero { text-align: center; padding: 8px 0 28px; border-bottom: 1px solid var(--color-border); margin-bottom: 36px; } .hero__logo { width: 132px; height: auto; margin: 0 auto 20px; } .hero__title { font-size: 1.75rem; font-weight: 800; letter-spacing: 0.02em; color: var(--color-heading); margin: 0 0 10px; } .hero__desc { max-width: 620px; margin: 0 auto; color: var(--color-muted); font-size: 1.02rem; font-weight: 400; } /* ============================================================ 5. BÖLÜMLER ============================================================ */ .section { margin-bottom: 40px; } .section__title { font-size: 0.82rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-gold-dark); margin: 0 0 4px; } .section__heading { font-size: 1.3rem; font-weight: 700; color: var(--color-heading); margin: 0 0 20px; } /* ============================================================ 6. FORM ALANLARI ============================================================ */ .field { margin-bottom: 22px; } .field__label { display: block; font-weight: 600; font-size: 0.95rem; color: var(--color-heading); margin-bottom: 8px; } .field__required { color: var(--color-accent-dark); } .field__input { width: 100%; padding: 13px 15px; font-size: 1rem; font-family: inherit; color: var(--color-text); background: var(--color-surface); border: 1.5px solid var(--color-border-strong); border-radius: var(--radius-sm); transition: border-color 0.15s ease, box-shadow 0.15s ease; } .field__input::placeholder { color: #9aa39c; } .field__input:hover { border-color: var(--color-primary); } .field__input:focus { outline: none; border-color: var(--color-primary); box-shadow: var(--focus-ring); } /* Hatalı alan */ .field.has-error .field__input { border-color: var(--color-error); background: var(--color-error-bg); } .field__error { display: none; color: var(--color-error); font-size: 0.88rem; font-weight: 500; margin-top: 7px; } .field.has-error .field__error { display: block; } /* ============================================================ 7. KVKK ONAY ALANI ============================================================ */ .consent { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px; background: var(--color-surface-alt); border: 1px solid var(--color-border); border-radius: var(--radius-sm); margin-bottom: 6px; } .consent__checkbox { flex-shrink: 0; width: 22px; height: 22px; margin-top: 1px; accent-color: var(--color-primary); cursor: pointer; } .consent__text { font-size: 0.94rem; color: var(--color-text); line-height: 1.55; cursor: pointer; } .consent__link { color: var(--color-primary); font-weight: 600; text-decoration: underline; } .field.has-error .consent { border-color: var(--color-error); background: var(--color-error-bg); } /* ============================================================ 8. ANKET İLERLEME BİLGİSİ ============================================================ */ .progress { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 14px 18px; background: var(--color-primary-light); border: 1px solid var(--color-border); border-radius: var(--radius-sm); margin-bottom: 28px; } .progress__label { font-weight: 600; font-size: 0.95rem; color: var(--color-heading); } .progress__count { font-weight: 700; font-size: 0.95rem; color: var(--color-primary); } .progress__bar { flex-basis: 100%; height: 6px; background: var(--color-border); border-radius: 999px; overflow: hidden; } .progress__fill { height: 100%; width: 0%; background: var(--color-accent); border-radius: 999px; transition: width 0.3s ease; } /* ============================================================ 9. ANKET SORULARI ============================================================ */ .question { padding: 26px 24px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); margin-bottom: 22px; } .question.has-error { border-color: var(--color-error); } .question__number { display: inline-block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-gold-dark); margin-bottom: 8px; } .question__text { font-size: 1.08rem; font-weight: 600; color: var(--color-heading); line-height: 1.5; margin: 0 0 18px; } /* Cevap kartları */ .options { display: flex; flex-direction: column; gap: 12px; } .option { position: relative; display: flex; align-items: center; gap: 14px; padding: 15px 17px; background: var(--color-surface); border: 1.5px solid var(--color-border-strong); border-radius: var(--radius-sm); cursor: pointer; transition: border-color 0.15s ease, background-color 0.15s ease; } .option:hover { border-color: var(--color-primary); background: var(--color-primary-light); } /* Gerçek radio inputu — erişilebilirlik için görünür ve klavye uyumlu */ .option__input { flex-shrink: 0; width: 20px; height: 20px; margin: 0; accent-color: var(--color-primary); cursor: pointer; } .option__label { font-size: 0.98rem; color: var(--color-text); cursor: pointer; line-height: 1.4; } /* Seçili durum: kenarlık + arka plan + tik ikonu (yalnızca renk değil) */ .option__check { position: absolute; right: 16px; display: none; align-items: center; justify-content: center; width: 22px; height: 22px; color: var(--color-primary); } .option.is-selected { border-color: var(--color-primary); background: var(--color-primary-tint); box-shadow: inset 0 0 0 1px var(--color-primary); } .option.is-selected .option__label { font-weight: 600; color: var(--color-heading); } .option.is-selected .option__check { display: flex; } /* Klavye ile odaklanınca görünür halka */ .option__input:focus-visible { outline: none; } .option:focus-within { box-shadow: var(--focus-ring); border-color: var(--color-primary); } /* Soru hata mesajı */ .question__error { display: none; color: var(--color-error); font-size: 0.88rem; font-weight: 500; margin-top: 14px; } .question.has-error .question__error { display: block; } /* Çoklu seçim ipucu (soru metni altında) */ .question__hint { font-size: 0.85rem; font-weight: 500; color: var(--color-muted); margin: -10px 0 16px; } /* Çoklu seçim (checkbox) kartlarında köşe yuvarlaması kare-ye yakın */ .option__input[type="checkbox"] { border-radius: 4px; } /* ---- İLAVE YORUM / AÇIK METİN KUTUSU ---- */ .option-comment { margin-top: 12px; /* Varsayılan gizli; ilgili seçenek seçilince JS açar */ display: none; } .option-comment.is-visible { display: block; } .comment-box { width: 100%; min-height: 92px; padding: 12px 14px; font-family: inherit; font-size: 0.96rem; color: var(--color-text); background: var(--color-surface); border: 1.5px solid var(--color-border-strong); border-radius: var(--radius-sm); resize: vertical; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .comment-box::placeholder { color: #9aa39c; } .comment-box:hover { border-color: var(--color-primary); } .comment-box:focus { outline: none; border-color: var(--color-primary); box-shadow: var(--focus-ring); } .comment-box.has-error { border-color: var(--color-error); background: var(--color-error-bg); } /* Soru 56 gibi tek başına açık metinli soru */ .question--open .comment-box { margin-top: 4px; } /* ============================================================ 10. BUTONLAR ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 32px; font-size: 1rem; font-weight: 700; letter-spacing: 0.02em; border: 1.5px solid transparent; border-radius: var(--radius-sm); cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.05s ease; text-align: center; } .btn:active { transform: translateY(1px); } .btn:focus-visible { outline: none; box-shadow: var(--focus-ring); } .btn--primary { background: var(--color-primary); color: #ffffff; } .btn--primary:hover { background: var(--color-primary-dark); text-decoration: none; } .btn--primary:disabled, .btn--primary.is-loading { background: var(--color-border-strong); color: #ffffff; cursor: not-allowed; } .btn--secondary { background: transparent; color: var(--color-primary); border-color: var(--color-border-strong); } .btn--secondary:hover { border-color: var(--color-primary); background: var(--color-primary-light); text-decoration: none; } .btn--block { width: 100%; } /* Yükleniyor spinner'ı */ .btn__spinner { display: none; width: 18px; height: 18px; border: 2.5px solid rgba(255, 255, 255, 0.4); border-top-color: #ffffff; border-radius: 50%; animation: spin 0.7s linear infinite; } .btn.is-loading .btn__spinner { display: inline-block; } @keyframes spin { to { transform: rotate(360deg); } } /* ============================================================ 11. GÖNDERİM ALANI ============================================================ */ .submit-area { margin-top: 34px; text-align: center; } .submit-area .btn { min-width: 260px; } /* ============================================================ 12. SONUÇ / DURUM SAYFALARI (teşekkür, hata, 404 vb.) ============================================================ */ .status { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 560px; margin: 0 auto; padding: 20px 0; } .status__logo { width: 120px; margin-bottom: 28px; } .status__icon { display: flex; align-items: center; justify-content: center; width: 76px; height: 76px; border-radius: 50%; margin-bottom: 24px; } .status__icon--success { background: var(--color-primary-light); color: var(--color-success); } .status__icon--error { background: var(--color-error-bg); color: var(--color-error); } .status__icon--info { background: var(--color-primary-light); color: var(--color-primary); } .status__icon--gold { background: #faf3e2; color: var(--color-gold-dark); } .status__icon svg { width: 40px; height: 40px; } .status__title { font-size: 1.6rem; font-weight: 800; letter-spacing: 0.02em; color: var(--color-heading); margin: 0 0 16px; } .status__text { font-size: 1.05rem; color: var(--color-text); margin: 0 0 12px; line-height: 1.65; } .status__subtext { font-size: 0.95rem; color: var(--color-muted); margin: 0 0 28px; } .status__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; } /* Büyük 404 rakamı */ .status__code { font-size: 4.5rem; font-weight: 800; line-height: 1; color: var(--color-primary); letter-spacing: -0.02em; margin-bottom: 8px; } /* ============================================================ 12.5. ADIM GÖSTERGESİ (Kayıt -> Sorular) ============================================================ */ .steps { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 32px; } .step { display: flex; align-items: center; gap: 9px; font-size: 0.9rem; font-weight: 600; color: var(--color-muted); } .step__num { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--color-border); color: var(--color-surface); font-size: 0.85rem; font-weight: 700; flex-shrink: 0; } .step.is-active .step__num { background: var(--color-primary); } .step.is-active { color: var(--color-heading); } .step.is-done .step__num { background: var(--color-accent); } .steps__divider { width: 40px; height: 2px; background: var(--color-border); border-radius: 999px; } @media (max-width: 480px) { .step__text { display: none; } .steps__divider { width: 28px; } } /* ============================================================ 12.6. KVKK MODAL (POPUP) ============================================================ */ .modal { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(22, 49, 28, 0.55); } .modal.is-open { display: flex; animation: modalFade 0.18s ease; } @keyframes modalFade { from { opacity: 0; } to { opacity: 1; } } .modal__dialog { background: var(--color-surface); width: 100%; max-width: 640px; max-height: 85vh; border-radius: var(--radius); display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 12px 40px rgba(22, 49, 28, 0.25); } .modal__header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; border-bottom: 1px solid var(--color-border); } .modal__title { font-size: 1.1rem; font-weight: 700; color: var(--color-heading); margin: 0; } .modal__close { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: none; background: transparent; color: var(--color-muted); border-radius: var(--radius-sm); cursor: pointer; flex-shrink: 0; transition: background-color 0.15s ease, color 0.15s ease; } .modal__close:hover { background: var(--color-primary-light); color: var(--color-heading); } .modal__close:focus-visible { outline: none; box-shadow: var(--focus-ring); } .modal__body { padding: 22px 24px; overflow-y: auto; color: var(--color-text); font-size: 0.95rem; line-height: 1.7; } .modal__body h3 { font-size: 1rem; color: var(--color-heading); margin: 20px 0 8px; } .modal__body h3:first-child { margin-top: 0; } .modal__body p { margin: 0 0 12px; } .modal__footer { padding: 16px 24px; border-top: 1px solid var(--color-border); text-align: right; } /* ============================================================ 13. FOOTER ============================================================ */ .footer { flex-shrink: 0; border-top: 1px solid var(--color-border); background: var(--color-surface-alt); padding: 26px 0; } .footer__inner { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; } .footer__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; list-style: none; margin: 0; padding: 0; } .footer__links a { font-size: 0.88rem; color: var(--color-muted); font-weight: 500; } .footer__links a:hover { color: var(--color-primary); } /* Footer'daki KVKK bağlantısı buton olsa da link gibi görünür */ .footer__kvkk-link { font-family: inherit; font-size: 0.88rem; font-weight: 500; color: var(--color-muted); background: none; border: none; padding: 0; cursor: pointer; text-decoration: none; } .footer__kvkk-link:hover { color: var(--color-primary); text-decoration: underline; } .footer__kvkk-link:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 4px; } .footer__copy { font-size: 0.82rem; color: var(--color-muted); margin: 0; } /* ============================================================ 14. RESPONSIVE ============================================================ */ @media (max-width: 640px) { .main { padding: 28px 0 48px; } .hero { margin-bottom: 28px; } .hero__logo { width: 104px; } .hero__title { font-size: 1.4rem; } .hero__desc { font-size: 0.96rem; } .question { padding: 20px 18px; } .question__text { font-size: 1rem; } .submit-area .btn { width: 100%; min-width: 0; } .status__title { font-size: 1.35rem; } .status__actions { flex-direction: column; width: 100%; } .status__actions .btn { width: 100%; } } /* Hareket azaltma tercihi */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }