* {  margin: 0;  padding: 0;  box-sizing: border-box;}
body {  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;  height: 100vh;  display: flex;  align-items: center;  justify-content: center;  background: #cda853;  color: #fff;  text-align: center;  overflow: hidden;  position: relative;}
body::before {  content: '';  position: fixed;  top: 0;  left: 0;  width: 100%;  height: 100%;  background: url('https://eronTurkiye.b-cdn.net/TUID/logo.svg') repeat;  background-size: 280px 120px;  opacity: 0.7;  z-index: 0;  pointer-events: none;}
:root {  --secondary-gold: #aa752f;  --dark-gold: #8a6329;  --light-gold: #d4a574;  --white: #ffffff;  --dark-gray: #333;  --border-gray: #e1e5e9;  --success-green: #28a745;}
.container {  width: 100%;  padding: 2rem;  display: flex;  justify-content: center;  align-items: center;}
.responsive-card {  background: var(--white);  border-radius: 20px;  box-shadow: 0 20px 40px rgba(0,0,0,0.1);  overflow: hidden;  width: 80vw;  height: 80vh;  display: flex;  flex-direction: row;  position: relative;  z-index: 1;}
.content-container {  padding: 3rem 2rem;  box-shadow: 0 20px 40px rgba(0,0,0,0.2);  margin: 0 auto 2rem auto;  display: flex;  flex-direction: column;  justify-content: center;  align-items: center;}
.section-header {  font-size: 2.5rem;  font-weight: 700;  color: var(--dark-gray);  margin-bottom: 0.5rem;}
.label {  display: block;  margin-bottom: 0.5rem;  color: var(--dark-gray);  font-weight: 500;  font-size: 1.1rem;}
.form-group {margin-bottom: 1.5rem;}
.input-field {  width: 100%;  padding: 1rem 1.25rem;  border: 2px solid var(--border-gray);  border-radius: 12px;  font-size: 1.2rem;  transition: all 0.3s ease;  background: var(--white);}
.input-field:focus {  outline: none;  border-color: var(--secondary-gold);  box-shadow: 0 0 0 3px rgba(170,117,47,0.1);}
.input-field.error {  border-color: #dc2626;  box-shadow: 0 0 0 2px rgba(220,38,38,0.2);}
.error-message {  color: #dc2626;  font-size: 0.875rem;  margin-top: 0.5rem;}
.btn {  padding: 1.25rem 2.5rem;  border: none;  border-radius: 12px;  font-size: 1.2rem;  font-weight: 600;  cursor: pointer;  transition: all 0.3s ease;  min-width: 140px;}
.btn-primary {  background: var(--secondary-gold);  color: var(--white);}
.btn-primary:hover {background: var(--dark-gold);transform: translateY(-1px);}
.btn-primary:disabled {background: #c0c0c0;color: #888;cursor: not-allowed;transform: none;opacity: 0.7;}
.btn-secondary {  background: #f8f9fa;  color: #666;  border: 2px solid var(--border-gray);}
.btn-success {  background: var(--success-green);  color: var(--white);}
.btn-success:hover {  background: #218838;  transform: translateY(-1px);}
.btn-full-width {width: 100%;}
.left-section {flex: 1;padding: 3rem;display: flex;flex-direction: column;justify-content: center;align-items: center;}
.right-section {  flex: 1;  background: #f1f1f1;  display: flex;  align-items: center;  justify-content: center;  padding: 2rem;  position: relative;}
.right-section img {  width: 280px;  height: 120px;  object-fit: contain;}
.time-grid {  display: grid;  grid-template-columns: repeat(4, 1fr);  gap: clamp(0.5rem, 3vw, 2rem);  margin: clamp(1rem, 4vw, 2rem) 0;}
.time-unit {  background: #f8f9fa;  padding: clamp(0.8rem, 3vw, 2rem) clamp(0.4rem, 2vw, 1.5rem);  border-radius: clamp(10px, 2vw, 20px);  border: 1px solid #e9ecef;  box-shadow: 0 4px 12px rgba(0,0,0,0.05);}
.time-number {  font-size: clamp(1.8rem, 8vw, 6.5rem);  font-weight: 700;  display: block;  margin-bottom: clamp(0.2rem, 1vw, 0.8rem);  color: var(--secondary-gold);}
.time-label {  font-size: clamp(0.75rem, 3vw, 2.2rem);  font-weight: 500;  color: var(--secondary-gold);  text-transform: uppercase;  letter-spacing: 0.05em;}
.page-title {  font-size: clamp(1.8rem, 8vw, 6rem);  font-weight: 700;  margin: 0;  background: linear-gradient(135deg, var(--secondary-gold) 0%, var(--light-gold) 50%, var(--secondary-gold) 100%);  -webkit-background-clip: text;  -webkit-text-fill-color: transparent;  background-clip: text;  letter-spacing: -0.02em;  filter: drop-shadow(0 1px 2px rgba(170,117,47,0.1));  animation: title-glow 3s ease-in-out infinite alternate;}
.countdown-display {margin: 2rem 0;text-align: center;}
.countdown-number {font-size: 12rem;  font-weight: 900;  color: var(--white);  background: linear-gradient(135deg, var(--secondary-gold) 0%, var(--light-gold) 50%, var(--secondary-gold) 100%);  -webkit-background-clip: text;  -webkit-text-fill-color: transparent;  background-clip: text;  display: block;  line-height: 1;}
.countdown-label {  font-size: 5.5rem;  font-weight: 700;  background: linear-gradient(135deg, var(--secondary-gold) 0%, var(--light-gold) 50%, var(--secondary-gold) 100%);  -webkit-background-clip: text;  -webkit-text-fill-color: transparent;  background-clip: text;  margin-top: 1rem;  display: block;  letter-spacing: 0.05em;  filter: drop-shadow(0 1px 2px rgba(170,117,47,0.1));  animation: title-glow 3s ease-in-out infinite alternate;}
.screen {display: none;}
.screen.active {  display: flex;  flex-direction: column;}
#giris-ekrani.screen.active {  display: flex;  flex-direction: row;}
#bilgi-guncelle-ekrani.screen.active { position: fixed; top: 0; left: 0; width: 100%; height: 100%; overflow-y: auto; display: flex; flex-direction: column; align-items: center; padding: clamp(1rem,3vw,2rem); box-sizing: border-box; z-index: 50; }
#bilgi-guncelle-ekrani .bg-kart { margin: auto; width: 100%; max-width: 860px; flex-shrink: 0; }
.bg-kart { width: 100%; max-width: 860px; background: #fff; border-radius: 24px; box-shadow: 0 24px 60px rgba(0,0,0,0.15); overflow: hidden; }
.bg-kart-baslik { background: linear-gradient(135deg, var(--secondary-gold), var(--dark-gold)); padding: clamp(1.25rem,3vw,2rem) clamp(1.25rem,3vw,2.5rem); display: flex; align-items: center; justify-content: center; gap: 1rem; }
.bg-kart-baslik h2 { color: #fff; font-size: clamp(1rem,3vw,1.5rem); font-weight: 700; margin: 0; }
.bg-kart-baslik p { color: rgba(255,255,255,0.8); font-size: clamp(0.75rem,2vw,0.9rem); margin: 0.2rem 0 0; }
.bg-kart-form { padding: clamp(1.25rem,3vw,2rem) clamp(1.25rem,3vw,2.5rem); }
.bg-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(0.75rem,2vw,1.25rem); }
.bg-tam { grid-column: 1 / -1; }
@media (max-width: 540px) { .bg-form-grid { grid-template-columns: 1fr; } .bg-tam { grid-column: 1; } .bg-kart { border-radius: 16px; } }
.quiz-body, .result-body {background: #cda853;color: var(--dark-gray);padding: 1rem;min-height: 100vh;overflow: auto;height: auto;display: flex;align-items: center;justify-content: center;position: relative;}
.result-body {margin: 0;padding: 2rem 1rem;}
.quiz-container, .result-container {width: 80vw;height: 80vh;margin: 0 auto;position: relative;z-index: 10;background: var(--white);border-radius: 20px;box-shadow: 0 20px 40px rgba(0,0,0,0.2);overflow-y: auto;display: flex;flex-direction: column;}
.quiz-container {padding: 1rem;}
.quiz-header,.question-card {max-width: 1200px;margin: 0 auto;}
.quiz-header {  padding: 0.75rem;  margin-bottom: 0.75rem;  text-align: center;  border-bottom: 1px solid rgba(170, 117, 47, 0.1);  width: 100%;  flex-shrink: 0;}
.quiz-header img {  height: 50px;  margin-bottom: 0.75rem;}
.quiz-info {display: flex;justify-content: space-between;align-items: center;font-size: 16px;margin-top: 1rem;padding-top: 1rem;border-top: 1px solid rgba(170, 117, 47, 0.1);}
.question-number {color: var(--secondary-gold);font-weight: 600;}
.time-remaining {  color: #dc2626;  font-weight: 600;}
.question-card {  padding: 1rem;  width: 100%;  flex: 1;  display: flex;  flex-direction: column;  overflow-y: auto;  min-height: 0;  margin-bottom: 0;}
.question-text {font-size: 18px;font-weight: 600;color: var(--dark-gray);margin-bottom: 0.5rem;line-height: 1.4;text-align: left;width: 100%;}
.options-container {display: grid;gap: 0.75rem;margin-bottom: 1.5rem;width: 100%;}
.option {  background: #f8f9fa;  border: 2px solid #e9ecef;  border-radius: 8px;  padding: 1rem;  cursor: pointer;  transition: all 0.2s ease;  font-size: 16px;  line-height: 1.3;  color: var(--dark-gray);  font-weight: 500;  display: flex;  align-items: center;  width: 100%;  box-sizing: border-box;}
.option:hover {  background: rgba(170, 117, 47, 0.05);  border-color: var(--secondary-gold);}
.option.selected {  background: rgba(170, 117, 47, 0.1);  border-color: var(--secondary-gold);  color: var(--secondary-gold);}
.option-letter {  display: flex;  align-items: center;  justify-content: center;  width: 28px;  height: 28px;  border-radius: 50%;  background: #e9ecef;  border: 2px solid #dee2e6;  margin-right: 0.75rem;  font-weight: 700;  font-size: 14px;  color: #666;  transition: all 0.2s ease;  flex-shrink: 0;}
.option:hover .option-letter, .option.selected .option-letter {background: var(--secondary-gold);border-color: var(--secondary-gold);color: var(--white);}
.option-text {  flex: 1;  text-align: left;}
.navigation-buttons {  display: flex;  justify-content: flex-end;  gap: 0.1rem;  width: 100%;  background: var(--white);  padding: 1rem;  border-top: 1px solid rgba(170, 117, 47, 0.1);  flex-shrink: 0;  margin-top: auto;}    
.result-container {padding: 2rem;}
.result-header {  padding: 1rem 0;  margin-bottom: 2rem;  text-align: center;  border-bottom: 2px solid var(--secondary-gold);  flex-shrink: 0;}
.result-header img {height: 60px;margin-bottom: 1rem;}
.result-title {font-size: 2.2rem;font-weight: 600;color: var(--secondary-gold);margin: 0;}
.content-grid {display: grid;grid-template-columns: 1fr 1fr;gap: 2rem;width: 100%;flex: 1;}
.panel {background: #f8f9fa;border-radius: 12px;border: 2px solid var(--secondary-gold);overflow: hidden;height: fit-content;}
.panel-header {background: var(--secondary-gold);color: var(--white);padding: 1rem 1.5rem;font-weight: 600;font-size: 1.3rem;}
.panel-content {padding: 1rem;}
.stat-row {display: flex;justify-content: space-between;padding: 0.75rem 0;border-bottom: 1px solid rgba(170, 117, 47, 0.1);font-size: 16px;}
.stat-row:last-child {border-bottom: none;}
.stat-label {color: #666;font-weight: 500;}
.stat-value {  font-weight: 600;  color: var(--dark-gray);}
.rank-value {  background: var(--secondary-gold);  color: var(--white);  padding: 0.25rem 0.75rem;  border-radius: 15px;  font-weight: 600;}
.leaderboard-item {display: flex;align-items: center;padding: 0.5rem 0;border-bottom: 1px solid rgba(170, 117, 47, 0.1);font-size: 15px;}
.leaderboard-item:last-child {border-bottom: none;}
.position {width: 30px;font-weight: 600;color: #666;}
.position.first { color: var(--secondary-gold); }
.position.second { color: var(--light-gold); }
.position.third { color: var(--dark-gold); }
.participant-name {flex: 1;margin-left: 1rem;font-weight: 500;color: var(--dark-gray);}
.score {font-weight: 600;color: var(--secondary-gold);}
.top10-container {width: 90vw;max-width: 1000px;height: 80vh;margin: 0 auto;display: flex;flex-direction: column;position: relative;z-index: 10;justify-content: center;align-items: center;}
.top10-content { display: flex; flex-direction: column; justify-content: center; width: 100%;}
.top10-table {width: 100%;border-collapse: collapse;background: var(--white);border-radius: 12px;overflow: hidden;box-shadow: 0 4px 12px rgba(0,0,0,0.1);}
.top10-table th {background: var(--secondary-gold);color: var(--white);padding: 1.5rem 0.5rem;font-weight: 600;font-size: clamp(0.9rem, 2.5vw, 1.2rem);text-align: center;  border-bottom: 2px solid var(--dark-gold);}
.top10-table td {padding: 1.3rem 0.5rem;text-align: center;border-bottom: 1px solid #f0f0f0;font-size: clamp(0.85rem, 2.2vw, 1.1rem);color: var(--dark-gray);vertical-align: middle;}
.top10-table tbody tr:hover {background: rgba(170, 117, 47, 0.05);transform: translateY(-1px);transition: all 0.2s ease;}
.rank-cell {font-weight: 700;color: var(--secondary-gold);min-width: 50px;}
.rank-cell.gold { color: #FFD700; }
.rank-cell.silver { color: #C0C0C0; }
.rank-cell.bronze { color: #CD7F32; }
.isim {text-align: left;font-weight: 500;max-width: 200px;word-wrap: break-word;}
.sehir {color: #666;font-size: clamp(0.8rem, 2vw, 0.95rem);}
.skor {font-weight: 600;color: var(--secondary-gold);min-width: 60px;}
.sure {color: #666;font-size: clamp(0.75rem, 1.8vw, 0.9rem);min-width: 80px;}
@keyframes title-glow{0%{filter:brightness(1) drop-shadow(0 1px 2px rgba(170,117,47,0.1));}100%{filter:brightness(1.05) drop-shadow(0 2px 4px rgba(170,117,47,0.2));}}
@keyframes subtitle-shimmer{0%,100%{background-position:0% 50%;filter:drop-shadow(0 1px 3px rgba(170,117,47,0.15));}50%{background-position:100% 50%;filter:drop-shadow(0 2px 6px rgba(170,117,47,0.25));}}
.sayfa-terk-uyari-kutu{display:none;position:fixed;bottom:1.5rem;left:50%;transform:translateX(-50%);z-index:100;background:rgba(0,0,0,0.7);color:#fff;border-radius:10px;white-space:nowrap;line-height:1.6;pointer-events:none;font-size:clamp(11px,1.8vw,15px);padding:clamp(0.5rem,1.2vw,0.85rem) clamp(0.85rem,2vw,1.5rem);}
@media(max-width:480px){.sayfa-terk-uyari-kutu{font-size:12px;padding:0.5rem 0.9rem;bottom:1rem;border-radius:8px;}}
@media(min-width:1440px){.sayfa-terk-uyari-kutu{font-size:16px;padding:1rem 1.8rem;}}

@media (max-width: 480px) {
  body{padding:.5rem}
  .main-card,#giris-ekrani.screen.active{flex-direction:column}
  .content-container{padding:1rem}
  .right-section{order:-1;height:150px;padding:1rem}
  .right-section img{width:200px;height:80px}
  .left-section{padding:1.5rem}
  .section-header{font-size:1.5rem}
  .page-title{margin-bottom:2rem}
  .time-grid{grid-template-columns:repeat(2,1fr);max-width:300px;margin:0 auto;gap:.75rem}
  .time-unit{padding:1rem .75rem;border-radius:12px}
  .time-number{font-size:2.2rem;margin-bottom:.3rem}
  .time-label{font-size:.9rem}
  .countdown-number{font-size:3rem}
  .countdown-label{font-size:1.5rem}
  .quiz-container{padding:.5rem}
  .quiz-header{display:none}
  .quiz-container::before{content:attr(data-question) ' / ' attr(data-total);position:absolute;top:.75rem;left:1rem;font-size:14px;font-weight:600;color:var(--secondary-gold);z-index:10}
  .quiz-container::after{content:attr(data-time);position:absolute;top:.75rem;right:1rem;font-size:14px;font-weight:600;color:#dc2626;z-index:10}
  .question-card{padding:2.5rem .75rem .75rem; width:100%}
  .question-text{font-size:16px;margin-bottom:1rem}
  .options-container{gap:.4rem;margin-bottom:.5rem}
  .option{padding:.5rem .4rem;font-size:14px}
  .option-letter{width:24px;height:24px;font-size:12px;margin-right:.5rem}
  .navigation-buttons{padding:.75rem;flex-direction:column;gap:.75rem}
  .btn{padding:.75rem 1rem;font-size:14px;width:100%}
  .content-grid{grid-template-columns:1fr;gap:.9rem}
  
  .top10-container{width:95vw;height:85vh;margin:0 auto}
  .top10-table th{padding:1rem 0.3rem;font-size:0.8rem}
  .top10-table td{padding:0.9rem 0.3rem;font-size:0.75rem}
  .isim{max-width:100px;font-size:0.75rem}
  .sehir{font-size:0.7rem}
  .sure{font-size:0.7rem}
}

@media (min-width:481px) and (max-width:1024px) {
  body{padding:.5rem}
  .main-card,#giris-ekrani.screen.active{flex-direction:column}
  .content-container{padding:clamp(1rem,3vw,2rem)}
  .right-section{order:-1;height:clamp(150px,20vw,180px);padding:1rem}
  .right-section img{width:clamp(200px,30vw,260px);height:clamp(80px,12vw,110px)}
  .left-section{padding:clamp(1.5rem,3vw,2rem)}
  .section-header{font-size:clamp(1.5rem,4vw,2.5rem)}
  .time-grid{grid-template-columns:repeat(4,1fr);gap:clamp(.5rem,2vw,1rem)}
  .countdown-number{font-size:clamp(6rem,10vw,12rem)}
  .countdown-label{font-size:clamp(3rem,5vw,5.5rem)}
  .quiz-container{padding:.5rem}
  .quiz-header,.question-card{width:95%;margin:0 auto 1rem}
  .quiz-info{flex-direction:column;gap:.5rem;text-align:center}
  .question-text{font-size:clamp(16px,3vw,22px)}
  .option{padding:clamp(1rem,2vw,2rem);font-size:clamp(14px,3vw,18px)}
  .navigation-buttons{flex-direction:column;gap:.75rem}
  .btn{width:100%;padding:clamp(.875rem,2vw,1.25rem) 1.5rem;font-size:clamp(14px,3vw,18px)}
  .content-grid{grid-template-columns:1fr;gap:clamp(.9rem,3vw,2rem)}
  
  .top10-table th{padding:2.2rem 0.6rem;font-size:1.3rem}
  .top10-table td{padding:1.8rem 0.6rem;font-size:1.2rem}
  .isim{font-size:1.2rem}
  .sehir{font-size:1.1rem}
  .sure{font-size:1rem}
}

@media (min-width:1280px) and (max-width:1365px) {
  .top10-container{width:80vw;height:65vh;margin:0 auto}
  .top10-table th{padding:0.5rem 0.25rem;font-size:0.75rem}
  .top10-table td{padding:0.4rem 0.25rem;font-size:0.7rem}
  .isim{font-size:0.7rem !important}
  .sehir{font-size:0.6rem}
  .skor{font-size:0.85rem !important}
  .sure{font-size:0.85rem !important}
}

@media (min-width:1366px) and (max-width:1439px) {
  .top10-container{width:75vw;height:60vh;margin:0 auto}
  .top10-table th{padding:0.6rem 0.3rem;font-size:0.8rem}
  .top10-table td{padding:0.5rem 0.3rem;font-size:0.75rem}
  .isim{font-size:0.75rem !important}
  .sehir{font-size:0.65rem}
  .skor{font-size:0.9rem !important}
  .sure{font-size:0.9rem !important}
}

@media (min-width:1440px) and (max-width:1599px) {
  .top10-container{width:70vw;height:55vh;margin:0 auto}
  .top10-table th{padding:0.7rem 0.35rem;font-size:0.85rem}
  .top10-table td{padding:0.6rem 0.35rem;font-size:0.8rem}
  .isim{font-size:0.8rem !important}
  .sehir{font-size:0.7rem}
  .skor{font-size:0.95rem !important}
  .sure{font-size:0.95rem !important}
}

@media (min-width:1600px) and (max-width:1679px) {
  .top10-container{width:65vw;height:50vh;margin:0 auto}
  .top10-table th{padding:0.6rem 0.3rem;font-size:0.8rem}
  .top10-table td{padding:0.5rem 0.3rem;font-size:0.75rem}
  .isim{font-size:0.75rem !important}
  .sehir{font-size:0.65rem}
  .skor{font-size:0.9rem !important}
  .sure{font-size:0.9rem !important}
}

@media (min-width:1680px) and (max-width:1919px) {
  .top10-container{width:70vw;height:60vh;margin:0 auto}
  .top10-table th{padding:0.8rem 0.4rem;font-size:0.9rem}
  .top10-table td{padding:0.7rem 0.4rem;font-size:0.85rem}
  .isim{font-size:0.85rem !important}
  .sehir{font-size:0.75rem}
  .skor{font-size:1rem !important}
  .sure{font-size:1rem !important}
}

@media (min-width:1920px) {
  .quiz-container{width:95vw;height:95vh;padding:1rem}
  .quiz-header{width:100%;margin:0;padding:1rem;margin-bottom:0;max-width:none}
  .question-card{width:100%;margin:0;padding:2rem;display:grid;grid-template-rows:1fr 1fr;height:100%;gap:1rem;max-width:none}
  .question-text{font-size:3rem;margin-bottom:0;display:flex;align-items:center;justify-content:start;text-align:start}
  .options-container{grid-template-columns:1fr 1fr;gap:1.5rem;margin-bottom:0;align-self:center;width:100%}
  .option{padding:clamp(1.5rem,3vw,2.5rem);font-size:2rem;width:100%;box-sizing:border-box}
  .option-letter{font-size:2rem; width: 48px; height: 48px;}
  .question-number{font-size:2rem;}
  .time-remaining{font-size:2rem;}
  .result-container{padding:clamp(2rem,4vw,4rem)}
}