* {margin: 0; padding: 0; box-sizing: border-box;}
html {scroll-behavior: smooth; -webkit-font-smoothing: antialiased;}
body {font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", sans-serif; color: #1a202c; background: #f8f9fa; line-height: 1.6; font-weight: 400; letter-spacing: 0.3px;}
.container {max-width: 1000px; margin: 0 auto; padding: 0 16px;}

/* HEADER - ŞIKÇA */
header {background: linear-gradient(135deg, #dc2626 0%, #991b1b 50%, #7f1d1d 100%); color: white; padding: 18px 16px; text-align: center; box-shadow: 0 8px 24px rgba(220, 38, 38, 0.25), 0 0 40px rgba(220, 38, 38, 0.1); position: sticky; top: 0; z-index: 100; border-bottom: 3px solid #b91c1c;}
.header-content h1 {font-size: 22px; font-weight: 800; margin-bottom: 8px; letter-spacing: 0.5px; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);}
.header-content p {font-size: 13px; opacity: 0.95; display: flex; align-items: center; justify-content: center; gap: 6px; font-weight: 600;}

/* HERO */
.hero {background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%); color: white; padding: 60px 16px; text-align: center;}
.hero-inner {max-width: 800px; margin: 0 auto;}
.hero h2 {font-size: 36px; font-weight: 900; margin-bottom: 14px; line-height: 1.1;}
.hero .date {font-size: 15px; opacity: 0.95;}
.hero .school {font-size: 15px; margin-bottom: 20px;}
.hero .description {font-size: 15px; margin-bottom: 30px; line-height: 1.8;}

/* BUTTONS */
.btn-main {display: inline-flex; align-items: center; gap: 8px; padding: 12px 28px; background: white; color: #dc2626; border: none; border-radius: 8px; cursor: pointer; font-weight: 700; font-size: 14px; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);}
.btn-main:active {transform: scale(0.98);}
.btn-submit {padding: 14px 28px; background: linear-gradient(135deg, #dc2626, #b91c1c); color: white; border: none; border-radius: 8px; cursor: pointer; font-weight: 700; font-size: 15px; box-shadow: 0 6px 20px rgba(220, 38, 38, 0.25); margin-top: 6px; transition: all 0.3s ease; position: relative; overflow: hidden;}
.btn-submit::before {content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, transparent 0%, rgba(255, 255, 255, 0.1), transparent 100%); opacity: 0; transition: opacity 0.3s ease;}
.btn-submit:hover {transform: translateY(-2px); box-shadow: 0 10px 28px rgba(220, 38, 38, 0.3);}
.btn-submit:hover::before {opacity: 1;}
.btn-submit:active {transform: scale(0.98);}
.btn-submit:disabled {opacity: 0.6; cursor: not-allowed; transform: none;}
.btn-more {display: inline-flex; align-items: center; gap: 8px; padding: 12px 28px; background: linear-gradient(135deg, #dc2626, #b91c1c); color: white; border: none; border-radius: 8px; cursor: pointer; font-weight: 700; font-size: 14px; margin-top: 24px; box-shadow: 0 6px 16px rgba(220, 38, 38, 0.25); transition: all 0.3s ease; position: relative; overflow: hidden;}
.btn-more::before {content: ""; position: absolute; inset: 0; background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.2), transparent 70%); opacity: 0; transition: opacity 0.3s ease;}
.btn-more:hover {transform: translateY(-2px); box-shadow: 0 10px 24px rgba(220, 38, 38, 0.35);}
.btn-more:hover::before {opacity: 1; animation: shimmer 0.6s ease-in-out;}
.btn-more:active {transform: scale(0.98);}
@keyframes shimmer {from {transform: translateX(-100%);} to {transform: translateX(100%);}}

/* SECTIONS */
.why-red, .info, .needs, .participants, .faq, .form-section {padding: 50px 16px;}
.why-red {padding: 40px 16px;}
h3 {font-size: 28px; font-weight: 900; margin-bottom: 32px; text-align: center; color: #1a202c; position: relative; padding-bottom: 20px;}
.why-red h3::after, .info h3::after, .needs h3::after, .faq h3::after {content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 50px; height: 3px; background: linear-gradient(90deg, #dc2626, #991b1b); border-radius: 2px;}

/* FORM */
.form-container {max-width: 520px; margin: 0 auto; background: linear-gradient(135deg, white 0%, #faf9f8 100%); padding: 40px 28px; border-radius: 16px; box-shadow: 0 12px 36px rgba(220, 38, 38, 0.12), 0 0 1px rgba(220, 38, 38, 0.1); border: 1px solid #fecaca; position: relative; overflow: hidden;}
.form-container::before {content: ''; position: absolute; top: -50%; right: -50%; width: 300px; height: 300px; background: radial-gradient(circle, rgba(220, 38, 38, 0.05), transparent); border-radius: 50%; pointer-events: none;}
.form-desc {text-align: center; color: #64748b; margin-bottom: 12px; font-size: 14px; line-height: 1.6;}
.form-motto {text-align: center; color: #dc2626; margin-bottom: 28px; font-size: 13px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; background: linear-gradient(135deg, #dc2626, #991b1b); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;}
form {display: flex; flex-direction: column; gap: 12px; position: relative; z-index: 1;}
form input, form select {padding: 14px 16px; border: 2px solid #fecaca; border-radius: 10px; font-size: 15px; font-family: inherit; background: white; color: #1a202c; transition: all 0.3s ease; box-shadow: 0 2px 8px rgba(220, 38, 38, 0.04);}
form input::placeholder {color: #a0aec0; font-weight: 500;}
form input:focus, form select:focus {outline: none; border-color: #dc2626; background: white; box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.1), 0 4px 12px rgba(220, 38, 38, 0.15); transform: translateY(-2px);}
form select {cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23dc2626' d='M6 9L1 4h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px;}
form select option {color: #1a202c; background: white;}

/* STATS */
.stats {display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 40px 16px; background: white; text-align: center;}
.stat {padding: 28px 16px; background: linear-gradient(135deg, rgba(220, 38, 38, 0.05), rgba(185, 28, 28, 0.05)); border-radius: 10px; border: 1px solid #fecaca;}
.stat .number {font-size: 32px; font-weight: 900; color: #dc2626; margin-bottom: 6px;}
.stat .label {font-size: 14px; font-weight: 700;}

/* WHY RED CONTENT */
.why-content {display: grid; grid-template-columns: 1fr; gap: 24px; align-items: center;}
.why-text p {margin-bottom: 12px; font-size: 14px; line-height: 1.7; color: #4a5568;}
.why-text p:first-child {font-weight: 600; color: #dc2626; font-size: 15px;}
.why-text p:last-child {margin-bottom: 0;}
.icon-box {width: 80px; height: 80px; margin: 0 auto 12px; background: linear-gradient(135deg, #fecaca, #fca5a5); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 40px; color: #dc2626;}
.why-icon {text-align: center;}
.why-icon p {font-size: 13px; color: #718096; margin-top: 8px; font-weight: 500;}

/* INFO CARDS - ŞİKÇA */
.info-grid {display: grid; grid-template-columns: 1fr; gap: 20px;}
.info .card {background: white; padding: 24px; border-radius: 12px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06); border: 1px solid #e2e8f0; transition: all 0.3s ease; position: relative; overflow: hidden;}
.info .card::before {content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #dc2626, #b91c1c); opacity: 0; transition: opacity 0.3s ease;}
.info .card:hover {transform: translateY(-6px); box-shadow: 0 12px 28px rgba(220, 38, 38, 0.15); border-color: #dc2626;}
.info .card:hover::before {opacity: 1;}
.card-icon {width: 48px; height: 48px; background: linear-gradient(135deg, #dc2626, #b91c1c); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 24px; color: white; margin-bottom: 14px; box-shadow: 0 4px 12px rgba(220, 38, 38, 0.2); transition: transform 0.3s ease;}
.info .card:hover .card-icon {transform: scale(1.1) rotate(5deg);}
.info .card h4 {font-size: 16px; margin-bottom: 10px; font-weight: 700; color: #1a202c;}
.info .card p {font-size: 14px; color: #718096; line-height: 1.7;}

/* PARTICIPANTS LIST - MOBİLE FRİENDLY */
.list-container {background: white; border-radius: 14px; box-shadow: 0 8px 24px rgba(220, 38, 38, 0.08); max-height: 600px; overflow-y: auto; padding: 8px; border: 1px solid #fecaca;}
.participants-list {list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px;}
.participants-list li {padding: 14px 12px; border: none; display: grid; grid-template-columns: 48px 1fr auto; gap: 12px; align-items: center; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); background: linear-gradient(135deg, #ffffff 0%, #faf9f8 100%); border-radius: 11px; box-shadow: 0 2px 8px rgba(220, 38, 38, 0.06); border-left: 3px solid #fecaca; position: relative; overflow: hidden;}
.participants-list li::before {content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(220, 38, 38, 0.02), transparent); opacity: 0; transition: opacity 0.25s ease; pointer-events: none;}
.participants-list li:hover {transform: translateX(6px); box-shadow: 0 8px 20px rgba(220, 38, 38, 0.12); border-left-color: #dc2626; background: linear-gradient(135deg, #ffffff 0%, #fbfbfa 100%);}
.participants-list li:hover::before {opacity: 1;}
.participants-list .avatar {width: 48px; height: 48px; border-radius: 10px; background: linear-gradient(135deg, #dc2626, #991b1b); display: flex; align-items: center; justify-content: center; color: white; font-weight: 800; font-size: 16px; flex-shrink: 0; box-shadow: 0 4px 12px rgba(220, 38, 38, 0.15); border: 2px solid rgba(255, 255, 255, 0.8);}
.participants-list .meta {display: flex; flex-direction: column; gap: 3px; min-width: 0; overflow: hidden;}
.participants-list .name {font-weight: 700; color: #0f1724; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.participants-list .info {color: #64748b; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500;}
.participants-list .time {color: #a0aec0; font-size: 11px; font-weight: 600; white-space: nowrap; flex-shrink: 0; text-align: right; opacity: 0.8;}

/* MODAL - ALL PARTICIPANTS */
.modal-all {display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); z-index: 300; align-items: center; justify-content: center; padding: 16px; backdrop-filter: blur(4px);}
.modal-all.active {display: flex;}
.modal-content {background: white; border-radius: 12px; max-width: 900px; width: 100%; max-height: 85vh; overflow-y: auto; padding: 24px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);}
.modal-header {display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; border-bottom: 2px solid #e2e8f0; padding-bottom: 16px;}
.modal-header h2 {margin: 0; font-size: 24px; color: #1a202c; font-weight: 900;}
.modal-close {background: none; border: none; font-size: 26px; color: #a0aec0; cursor: pointer; padding: 4px;}

/* GRID CONTAINER - RESPONSIVE LAYOUT */
.grid-container {display: grid; grid-template-columns: 1fr; gap: 12px; padding: 8px;}
.grid-item {padding: 16px 14px; border-radius: 11px; background: linear-gradient(135deg, #ffffff 0%, #faf9f8 100%); border: 1px solid #fecaca; display: grid; grid-template-columns: 48px 1fr auto; gap: 12px; align-items: center; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); border-left: 3px solid #fecaca; position: relative; overflow: hidden;}
.grid-item::before {content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(220, 38, 38, 0.02), transparent); opacity: 0; transition: opacity 0.25s ease; pointer-events: none;}
.grid-item:hover {border-color: #dc2626; box-shadow: 0 8px 20px rgba(220, 38, 38, 0.12); background: linear-gradient(135deg, #ffffff 0%, #fbfbfa 100%); border-left-color: #dc2626; transform: translateX(4px);}
.grid-item:hover::before {opacity: 1;}
.grid-item .avatar {width: 48px; height: 48px; border-radius: 10px; background: linear-gradient(135deg, #dc2626, #991b1b); display: flex; align-items: center; justify-content: center; color: white; font-weight: 800; font-size: 16px; flex-shrink: 0; box-shadow: 0 4px 12px rgba(220, 38, 38, 0.15); border: 2px solid rgba(255, 255, 255, 0.8);}
.grid-item > div:nth-child(2) {display: flex; flex-direction: column; gap: 4px; min-width: 0;}
.grid-item .name {font-weight: 700; color: #0f1724; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.grid-item .info {color: #64748b; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500;}
.grid-item .time {color: #a0aec0; font-size: 11px; font-weight: 600; white-space: nowrap; flex-shrink: 0; text-align: right; opacity: 0.8;}

/* THANK YOU CARD */
.feedback-modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:9999}
.feedback-modal .fm-backdrop{position:absolute;inset:0;background:rgba(8,10,12,0.6);backdrop-filter:blur(4px)}
.feedback-modal .fm-card{position:relative;z-index:10;background:white;padding:26px;border-radius:14px;box-shadow:0 30px 80px rgba(0,0,0,0.35);max-width:420px;width:92%;text-align:center}
.feedback-modal .fm-card button.btn-cta{margin-top:8px}
.feedback-modal .fm-illustration{width:86px;height:86px;margin:0 auto 12px;border-radius:20px;display:flex;align-items:center;justify-content:center;font-size:34px;color:white}
.feedback-modal .fm-card h3{margin-top:4px;margin-bottom:8px;font-size:20px}
.feedback-modal .fm-card p{color:#546270;font-size:14px}
.feedback-modal.open{display:flex}
.fm-illustration.success{background:linear-gradient(90deg,#16a34a,#059669)}
.fm-illustration.error{background:linear-gradient(90deg,#ef4444,#dc2626)}
.fm-illustration.info{background:linear-gradient(90deg,#1f6feb,#7c4dff)}
.fm-close{position:absolute;right:12px;top:8px;background:none;border:0;color:#9aa4ad;font-size:18px}

/* Common button styles */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 16px;border-radius:10px;border:0;background:#ef4444;color:white;font-weight:800;cursor:pointer;font-size:14px}
.btn:focus{outline:2px solid rgba(0,0,0,0.06);box-shadow:0 8px 20px rgba(0,0,0,0.08)}
.btn-outline{background:transparent;color:#dc2626;border:1px solid rgba(220,38,38,0.12);padding:8px 12px}
.btn-cta{background:linear-gradient(90deg,#ff6b6b,#ff5252);box-shadow:0 12px 30px rgba(255,82,82,0.12);padding:12px 18px;border-radius:12px;font-weight:800;letter-spacing:0.2px;color:white;border:0}
.btn-cta:hover{transform:translateY(-2px)}

/* feedback modal close rounded button */
.fm-close{width:36px;height:36px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.9);box-shadow:0 6px 18px rgba(0,0,0,0.08);border:1px solid rgba(10,20,30,0.03);color:#41515a}
.fm-close:hover{transform:translateY(-2px)}
.fm-card .btn{min-width:120px}
/* Ensure feedback modal OK button uses app styles even if other rules override */
#fm-ok, #fm-ok.btn, .fm-card #fm-ok {
  background: linear-gradient(90deg,#ff6b6b,#ff5252) !important;
  color: #fff !important;
  border: 0 !important;
  padding: 10px 18px !important;
  border-radius: 10px !important;
  font-weight: 800 !important;
  box-shadow: 0 10px 28px rgba(255,82,82,0.12) !important;
}
#fm-ok:focus{outline:none;box-shadow:0 12px 30px rgba(255,82,82,0.14) !important}

@keyframes fadeInBackdrop {from {background: rgba(10, 10, 10, 0);} to {background: rgba(10, 10, 10, 0.7);}}
@keyframes scaleInBounce {from {transform: scale(0.3) translateY(-30px); opacity: 0;} to {transform: scale(1) translateY(0); opacity: 1;}}
@keyframes slideInDown {from {transform: translateY(-30px); opacity: 0;} to {transform: translateY(0); opacity: 1;}}
@keyframes slideInUp {from {transform: translateY(30px); opacity: 0;} to {transform: translateY(0); opacity: 1;}}

/* FAQ */
.faq-item {background: white; padding: 18px; margin-bottom: 12px; border-radius: 10px; cursor: pointer; border: 1px solid #e2e8f0; border-left: 4px solid transparent;}
.faq-item h4 {display: flex; align-items: center; gap: 10px; margin: 0; font-size: 14px; color: #1a202c; font-weight: 700;}
.faq-item h4 i {color: #dc2626;}
.faq-item p {max-height: 0; overflow: hidden; margin: 0; padding: 0; color: #718096; font-size: 13px; line-height: 1.7;}
.faq-item.open p {max-height: 500px; margin-top: 12px; padding-top: 12px; border-top: 1px solid #e2e8f0;}

/* INSTAGRAM */
.instagram-section {background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%); padding: 50px 16px;}
.ig-stage {display: flex; justify-content: center; align-items: center; margin: 40px 0;}
.ig-card {width: 280px; height: 320px; border-radius: 20px; position: relative; overflow: hidden;}
.ig-content {position: relative; z-index: 2; margin: 8px; padding: 20px; border-radius: 16px; backdrop-filter: blur(20px); background: rgba(255, 255, 255, 0.12); text-align: center; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2);}
.ig-avatar {width: 80px; height: 80px; border-radius: 50%; border: 2px solid white; margin-bottom: 12px;}
.ig-content h2 {margin: 8px 0; font-size: 16px; color: white;}
.ig-content p {font-size: 12px; color: #eee;}
.ig-btn {display: inline-block; margin-top: 12px; padding: 10px 20px; border-radius: 20px; color: white; text-decoration: none; font-weight: 700; background: linear-gradient(45deg, #f09433, #dc2743, #cc2366, #bc1888); font-size: 12px;}

/* FOOTER */
footer {background: #1a202c; color: white; padding: 32px 16px; text-align: center; border-top: 3px solid #dc2626;}
footer p {margin-bottom: 10px; font-size: 13px; line-height: 1.6;}
footer p:first-child {font-weight: 700; margin-bottom: 12px; font-size: 14px;}
footer a {color: #fecaca; text-decoration: none; font-weight: 600;}
footer a:hover {text-decoration: underline;}

/* PAGINATION */
.pagination {display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 24px; flex-wrap: wrap;}
.pagination button, .pagination span {padding: 8px 12px; border-radius: 6px; border: 1px solid #e2e8f0; background: white; color: #1a202c; cursor: pointer; font-size: 13px; font-weight: 600; min-width: 36px; text-align: center;}
.pagination button:hover {background: #f7fafc; border-color: #dc2626;}
.pagination button.active {background: linear-gradient(135deg, #dc2626, #b91c1c); color: white; border-color: #dc2626;}
.pagination button:disabled {opacity: 0.5; cursor: not-allowed;}
.pagination .page-info {color: #718096; font-size: 13px; font-weight: 600;}

/* NEEDS - ŞİKÇA */
.needs-intro {text-align: center; color: #718096; font-size: 15px; margin-bottom: 40px; line-height: 1.8;}
.needs-grid {display: grid; grid-template-columns: 1fr; gap: 20px;}
.need-item {background: white; padding: 24px; border-radius: 12px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06); border: 1px solid #e2e8f0; transition: all 0.3s ease; position: relative; overflow: hidden;}
.need-item::before {content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #991b1b, #dc2626); opacity: 0; transition: opacity 0.3s ease;}
.need-item:hover {transform: translateY(-6px); box-shadow: 0 12px 28px rgba(220, 38, 38, 0.15); border-color: #991b1b;}
.need-item:hover::before {opacity: 1;}
.need-icon {width: 48px; height: 48px; background: linear-gradient(135deg, #991b1b, #dc2626); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 24px; color: white; margin-bottom: 14px; box-shadow: 0 4px 12px rgba(153, 27, 27, 0.2); transition: transform 0.3s ease;}
.need-item:hover .need-icon {transform: scale(1.1) rotate(-5deg);}
.need-item h4 {font-size: 16px; margin-bottom: 10px; font-weight: 700; color: #1a202c;}
.need-item p {font-size: 14px; color: #718096; line-height: 1.7;}
.needs-closing {text-align: center; color: #1a202c; font-size: 15px; margin-top: 40px; line-height: 1.8;}

/* DESKTOP MEDIA QUERIES */
@media (min-width: 768px) {
  header {padding: 22px;}
  .header-content h1 {font-size: 28px; margin-bottom: 10px;}
  .header-content p {font-size: 15px;}

  .hero {padding: 90px 16px;}
  .hero h2 {font-size: 52px;}
  .btn-main:hover {transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);}

  .why-red, .info, .needs, .participants, .faq, .form-section {padding: 80px 16px;}
  .why-red {padding: 60px 16px;}
  h3 {font-size: 40px; margin-bottom: 50px;}

  form input, form select {padding: 16px 18px; font-size: 16px;}
  .btn-submit {padding: 16px 36px; font-size: 16px;}

  .stats {gap: 24px; padding: 60px 16px;}
  .stat {padding: 40px 24px; border-radius: 14px;}
  .stat:hover {transform: translateY(-4px);}
  .stat .number {font-size: 44px;}

  .why-content {grid-template-columns: 1fr 1fr; gap: 48px;}
  .icon-box {width: 100px; height: 100px; margin: 0 auto 14px;}
  .why-icon p {font-size: 14px;}

  .info-grid {grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 28px;}
  .info .card {padding: 36px; border-radius: 14px;}
  .info .card:hover {transform: translateY(-8px);}

  .list-container {max-height: 650px;}
  .participants-list li:hover {background: #f7fafc; box-shadow: inset 0 4px 12px rgba(220, 38, 38, 0.08);}
  .btn-more:hover {transform: translateY(-3px); box-shadow: 0 12px 32px rgba(220, 38, 38, 0.3);}

  /* GRID 50/50 LAYOUT ON DESKTOP */
  .grid-container {grid-template-columns: repeat(2, 1fr); gap: 16px;}
  .grid-item {padding: 16px;}
  .grid-item .avatar {width: 52px; height: 52px; font-size: 20px;}
  .grid-item .name {font-size: 15px;}
  .grid-item .info {font-size: 13px;}
  .grid-item .time {font-size: 12px;}
  .grid-item:hover {border-color: #dc2626; transform: translateY(-2px);}

  .faq-item:hover {border-left-color: #dc2626;}
  .faq-item h4 {font-size: 16px;}

  .ig-card {width: 360px; height: 420px; border-radius: 30px;}
  .ig-avatar:hover {transform: rotate(8deg) scale(1.1);}
  .ig-btn:hover {transform: translateY(-2px);}

  footer {padding: 48px 16px;}
  footer p {font-size: 14px;}

  .pagination {gap: 12px;}
  .pagination button, .pagination span {padding: 10px 14px; font-size: 14px;}
  .pagination button:hover {transform: translateY(-1px);}

  .needs-grid {grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 28px;}
  .need-item {padding: 36px; border-radius: 14px;}
  .need-item:hover {transform: translateY(-8px);}
}

/* MOBILE RESPONSIVENESS */
@media (max-width: 640px) {
  body {font-size: 14px;}
  .container {padding: 0 12px;}

  header {padding: 16px 12px;}
  .header-content h1 {font-size: 18px;}
  .header-content p {font-size: 12px;}

  .hero {padding: 40px 12px;}
  .hero h2 {font-size: 26px; line-height: 1.2;}
  .hero .description {font-size: 13px;}

  h3 {font-size: 22px; margin-bottom: 20px;}

  .stats {grid-template-columns: 1fr; gap: 12px; padding: 30px 12px;}
  .stat {padding: 20px 16px;}
  .stat .number {font-size: 24px;}

  form input, form select {padding: 12px 14px; font-size: 14px;}
  .btn-submit {padding: 12px 24px; font-size: 14px;}

  /* Participants list mobile */
  .participants-list li {padding: 12px 10px; grid-template-columns: 42px 1fr auto; gap: 10px;}
  .participants-list .avatar {width: 42px; height: 42px; font-size: 14px;}
  .participants-list .name {font-size: 13px;}
  .participants-list .info {font-size: 11px;}
  .participants-list .time {font-size: 10px;}

  /* Modal responsive */
  .grid-item {padding: 12px 10px; grid-template-columns: 42px 1fr auto; gap: 10px;}
  .grid-item .avatar {width: 42px; height: 42px; font-size: 14px;}
  .grid-item .name {font-size: 13px;}
  .grid-item .info {font-size: 11px;}
  .grid-item .time {font-size: 10px;}

  .modal-content {padding: 16px; border-radius: 10px;}
  .modal-header {margin-bottom: 16px; padding-bottom: 12px;}
  .modal-header h2 {font-size: 18px;}

  /* Info grid mobile */
  .info-grid {grid-template-columns: 1fr;}
  .info .card {padding: 20px;}
  .info .card h4 {font-size: 14px;}
  .info .card p {font-size: 12px;}

  /* Form */
  .form-container {padding: 24px 16px; border-radius: 12px;}

  /* FAQ */
  .faq-item {padding: 14px; margin-bottom: 10px;}
  .faq-item h4 {font-size: 13px;}
  .faq-item p {font-size: 12px;}

  /* Needs */
  .needs-grid {grid-template-columns: 1fr; gap: 16px;}
  .need-item {padding: 20px;}
  .need-icon {width: 50px; height: 50px; font-size: 26px;}
  .need-item h4 {font-size: 14px;}
  .need-item p {font-size: 12px;}
}

/* CHART SECTION - PROFESYONEL VE MODERN */
.chart-section {
  padding: 60px 16px; 
  background: linear-gradient(135deg, #fafbfc 0%, #ffffff 100%);
  border-top: 1px solid #e5e7eb;
}

.chart-section .container {
  max-width: 1200px;
}

.chart-header {
  margin-bottom: 40px;
  text-align: center;
  position: relative;
}

.chart-header h3 {
  font-size: 32px; 
  font-weight: 900; 
  margin-bottom: 12px;
  background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.chart-subtitle {
  font-size: 15px;
  color: #64748b;
  margin-bottom: 0;
  font-weight: 500;
  letter-spacing: 0.3px;
}

.chart-container {
  background: white; 
  padding: 40px 32px; 
  border-radius: 16px; 
  box-shadow: 0 10px 40px rgba(220, 38, 38, 0.08), 0 0 0 1px rgba(220, 38, 38, 0.05);
  border: 1px solid #f1f5f9;
  position: relative;
  overflow: hidden;
  max-height: 700px;
  overflow-y: auto;
  transition: all 0.3s ease;
}

.chart-container:hover {
  box-shadow: 0 15px 50px rgba(220, 38, 38, 0.12), 0 0 0 1px rgba(220, 38, 38, 0.08);
}

/* Scrollbar - Webkit (Chrome, Safari) */
.chart-container::-webkit-scrollbar {
  width: 8px;
}

.chart-container::-webkit-scrollbar-track {
  background: linear-gradient(180deg, rgba(220, 38, 38, 0.03) 0%, rgba(220, 38, 38, 0.01) 100%);
  border-radius: 10px;
}

.chart-container::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #dc2626 0%, #991b1b 100%);
  border-radius: 10px;
  box-shadow: 0 0 8px rgba(220, 38, 38, 0.2);
  transition: all 0.3s ease;
}

.chart-container::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%);
  box-shadow: 0 0 12px rgba(220, 38, 38, 0.3);
}

/* Scrollbar - Firefox */
.chart-container {
  scrollbar-color: #dc2626 rgba(220, 38, 38, 0.05);
  scrollbar-width: thin;
}

.chart-container::before {
  content: ''; 
  position: absolute; 
  top: -150px; 
  right: -150px; 
  width: 300px; 
  height: 300px; 
  background: radial-gradient(circle, rgba(220, 38, 38, 0.04), transparent); 
  border-radius: 50%; 
  pointer-events: none;
  z-index: 0;
}

.chart-container canvas {
  max-width: 100% !important; 
  height: auto !important;
  position: relative;
  z-index: 1;
}

/* Tablet */
@media (max-width: 768px) {
  .chart-section {padding: 50px 16px;}

  .chart-header {margin-bottom: 32px;}

  .chart-header h3 {
    font-size: 26px; 
    margin-bottom: 10px;
  }

  .chart-subtitle {font-size: 14px;}

  .chart-container {
    padding: 28px 20px; 
    border-radius: 12px; 
    max-height: 600px;
  }
}

/* Mobil */
@media (max-width: 640px) {
  .chart-section {padding: 40px 12px;}

  .chart-header {margin-bottom: 24px;}

  .chart-header h3 {
    font-size: 22px;
    margin-bottom: 8px;
  }

  .chart-subtitle {font-size: 13px;}

  .chart-container {
    padding: 20px 14px; 
    border-radius: 10px; 
    max-height: 500px;
    box-shadow: 0 4px 16px rgba(220, 38, 38, 0.06);
  }
}