* { margin: 0; padding: 0; box-sizing: border-box; } .page-content { opacity: 0; } @keyframes fadeIn { to { opacity: 1; } } .navbar { box-shadow: none; } body { font-family: 'Comfortaa', cursive; background: #ffffff; min-height: 100vh; overflow-x: hidden; } .side-bar { width: 18px; background: #000000; position: fixed; top: 220px; bottom: 100px; border-radius: 20px; z-index: 100; } .side-bar.left { left: 65px; } .side-bar.right { right: 65px; } .main-content { max-width: 700px; margin: 0 auto; padding: 150px 40px 60px 40px; text-align: center; } .icon-area { width: 200px; height: auto; margin: 0 auto -10px auto; display: block; } .handshake-wrapper { width: 320px; height: auto; margin: 0 auto -20px auto; display: flex; justify-content: center; align-items: center; } .handshake-figure { width: 170px; height: auto; opacity: 0; mix-blend-mode: multiply; } .figure-left { transform: translateX(-40px); margin-right: -85px; position: relative; z-index: 2; animation: slideInLeft 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s forwards; } .figure-right { transform: translateX(-40px); margin-left: -85px; position: relative; z-index: 1; animation: slideInRight 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s forwards; } @keyframes slideInLeft { to { opacity: 1; transform: translateX(0); } } @keyframes slideInRight { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } } h1 { font-family: 'Comfortaa', cursive; font-size: 1.45rem; font-weight: 300; color: #000000; margin-top: 8px; margin-bottom: 16px; } .subtitle { color: #bbbbbb; font-size: 0.95rem; line-height: 1.7; margin-bottom: 30px; } .name-box { width: 100%; max-width: 560px; margin: 0 auto 12px auto; } .name-box input { width: 100%; border: 2px solid #d4d4d4; border-radius: 12px; padding: 14px 20px; font-family: 'Comfortaa', cursive; font-size: 0.9rem; color: #ffffff; outline: none; background: #1a1a1a; transition: border-color 0.2s; } .name-box input::placeholder { color: #666666; } .name-box input:focus { border-color: #555555; } .input-error { border-color: #ff4444 !important; } .comment-box { width: 100%; max-width: 560px; margin: 0 auto 16px auto; position: relative; } .comment-box textarea { width: 100%; min-height: 260px; border: 2px solid #d4d4d4; border-radius: 16px; padding: 22px 18px 22px 30px; font-family: 'Comfortaa', cursive; font-size: 0.95rem; color: #ffffff; resize: vertical; outline: none; padding-bottom: 34px; background: #1a1a1a; transition: border-color 0.2s; } .comment-box textarea::placeholder { color: #666666; } .comment-box textarea:focus { border-color: #555555; } .char-counter { position: absolute; bottom: 12px; right: 18px; font-size: 0.78rem; color: #bbbbbb; pointer-events: none; background: #1a1a1a; padding: 2px 6px; border-radius: 8px; } .btn-row { width: 100%; max-width: 560px; margin: 0 auto 60px auto; display: flex; justify-content: flex-end; } .btn-send { background: #4EF631; color: #ffffff; border: none; padding: 12px 36px; border-radius: 24px; font-family: 'Comfortaa', cursive; font-size: 1rem; font-weight: 600; cursor: pointer; transition: background 0.2s, transform 0.1s; } .btn-send:hover { background: #45dd2c; } .btn-send:active { transform: scale(0.97); } .comments-list { width: 100%; max-width: 520px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; } .comment-card { background: #fafafa; border: 1px solid #e2e2e2; border-radius: 20px; padding: 16px 22px; font-size: 0.88rem; color: #333333; line-height: 1.6; text-align: left; box-shadow: 0 2px 8px rgba(0,0,0,0.04); animation: cardIn 0.35s ease; } @keyframes cardIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .comment-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .comment-avatar { width: 26px; height: 26px; border-radius: 50%; background: #4EF631; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; color: #ffffff; font-weight: 600; flex-shrink: 0; } .comment-author { font-weight: 600; color: #000000; font-size: 0.82rem; } .comment-date { color: #bbbbbb; font-size: 0.72rem; margin-left: auto; } .comment-text { margin: 0; } .admin-reply { margin-top: 14px; padding: 12px 16px; background: #f0fff0; border-left: 3px solid #4EF631; border-radius: 10px; } .reply-label { display: block; font-size: 0.7rem; font-weight: 600; color: #2aa018; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; } .reply-text { margin: 0; font-size: 0.84rem; color: #333333; line-height: 1.6; } .side-bar { transition: left 0.4s ease, right 0.4s ease, opacity 0.4s ease, top 0.3s ease, bottom 0.3s ease; } @media (max-width: 1400px) { .side-bar.left { left: 50px; } .side-bar.right { right: 50px; } } @media (max-width: 1200px) { .side-bar.left { left: 35px; } .side-bar.right { right: 35px; } .side-bar { top: 240px; bottom: 120px; } } @media (max-width: 1000px) { .side-bar.left { left: 20px; } .side-bar.right { right: 20px; } .side-bar { top: 260px; bottom: 140px; width: 14px; } .main-content { padding: 110px 30px 50px 30px; } .icon-area { width: 180px; } } @media (max-width: 768px) { .side-bar { width: 10px; top: 280px; bottom: 160px; opacity: 0.5; } .side-bar.left { left: 10px; } .side-bar.right { right: 10px; } .main-content { padding: 90px 25px 40px 25px; } .icon-area { width: 160px; } h1 { font-size: 1.4rem; } .subtitle { font-size: 0.88rem; } } @media (max-width: 600px) { .side-bar { opacity: 0; pointer-events: none; } .main-content { padding: 80px 20px 40px 20px; } h1 { font-size: 1.3rem; } .subtitle { font-size: 0.85rem; } .icon-area { width: 140px; } .comment-box textarea { min-height: 200px; padding: 16px 18px; font-size: 0.85rem; } .btn-send { padding: 10px 28px; font-size: 0.9rem; } }

Kulağımız Sizde

Websitemizi daha iyi yapmak için sizlerin yorumunuzu önemsiyoruz.
Yorumunuz adınızla birlikte herkese açık olarak görünecektir.

0 / 500