/* ============================================================
   KS KADRO KUR - STYLE (V45.1 - OPTIMIZED & STATUS BADGES)
   ============================================================ */

@font-face {
    font-family: 'BagorKlodjen';
    src: url('assets/BagorKlodjen.ttf') format('truetype');
    font-weight: normal; font-style: normal; font-display: swap;
}

body { margin: 0; padding: 0; background: #0a0a0a; }

/* WRAPPER */
.ks-app-wrapper {
    width: 100%; max-width: 1200px; margin: 0 auto; position: relative;
    background: #0a0a0a; color: white; font-family: 'Rajdhani', sans-serif;
    border: 2px solid #009933; border-radius: 10px; overflow: hidden; box-sizing: border-box;
}
.ks-app-wrapper * { box-sizing: border-box; }

.ks-app-wrapper .app-container { display: flex; height: 850px; width: 100%; }

/* SIDEBAR */
.ks-app-wrapper .sidebar {
    width: 340px; background: #111; border-right: 2px solid #009933;
    padding: 20px; display: flex; flex-direction: column; gap: 15px; z-index: 20; overflow-y: auto;
}

.ks-app-wrapper .brand { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid #333; padding-bottom: 15px; margin-bottom: 10px; }
.ks-app-wrapper .brand img { height: 45px; margin:0; }
.ks-app-wrapper .brand h1 { margin: 0; font-family: 'Oswald', sans-serif; color: #39ff14; letter-spacing: 1px; font-size: 26px; line-height: 1; }

.ks-app-wrapper .control-group label { display: block; color: #888; font-size: 13px; margin-bottom: 5px; font-weight: bold; text-transform: uppercase; }
.ks-app-wrapper .control-group input, 
.ks-app-wrapper .control-group select {
    width: 100%; padding: 12px; background: #222; border: 1px solid #444;
    color: white; border-radius: 6px; font-family: 'Rajdhani', sans-serif; font-size: 16px; font-weight: bold; transition: 0.3s;
    height: auto; margin: 0;
}
.ks-app-wrapper .control-group input:focus, .ks-app-wrapper .control-group select:focus { border-color: #39ff14; outline: none; box-shadow: 0 0 8px rgba(57,255,20,0.2); }
.ks-app-wrapper #inputName::placeholder { color: #ffcc00; opacity: 0.7; font-weight: bold; }

/* FORMA SEÇİCİ */
.ks-app-wrapper .kit-selector { display: flex; gap: 8px; justify-content: space-between; }
.ks-app-wrapper .kit-btn { 
    flex: 1; height: 50px; border-radius: 8px; border: 2px solid #333; 
    cursor: pointer; transition: 0.3s; background-size: contain; background-repeat: no-repeat; background-position: center; 
    background-color: rgba(255,255,255,0.05); padding: 0;
}
.ks-app-wrapper .kit-btn:hover { transform: scale(1.05); border-color: white; }
.ks-app-wrapper .kit-btn.active { border-color: #39ff14; box-shadow: 0 0 10px #39ff14; background-color: rgba(57, 255, 20, 0.1); }
.ks-app-wrapper .kit-btn.cubuklu { background-image: url('assets/forma_cubuklu.png'); }
.ks-app-wrapper .kit-btn.siyah { background-image: url('assets/forma_siyah.png'); }
.ks-app-wrapper .kit-btn.beyaz { background-image: url('assets/forma_beyaz.png'); }
.ks-app-wrapper .kit-btn.krem { background-image: url('assets/forma_krem.png'); }

/* REKLAM VE BUTONLAR */
.ks-app-wrapper .sidebar-ad { width: 100%; height: 80px; margin: 15px 0; border-radius: 6px; overflow: hidden; display: flex; justify-content: center; align-items: center; border: none; }

.ks-app-wrapper .info-btn {
    width: 100%; padding: 12px; background: transparent; border: 1px solid #444; color: #aaa; border-radius: 6px; cursor: pointer;
    font-size: 13px; font-weight: bold; font-family: 'Rajdhani', sans-serif; transition: 0.3s; display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 10px;
}
.ks-app-wrapper .info-btn:hover { border-color: #39ff14; color: #39ff14; background: rgba(57, 255, 20, 0.05); }

.ks-app-wrapper .share-app-btn {
    width: 100%; margin-top: 10px; padding: 14px; background: linear-gradient(90deg, #004d1a, #000);
    border: 2px solid #39ff14; color: #39ff14; font-family: 'Rajdhani', sans-serif; font-weight: 900; font-size: 16px;
    border-radius: 8px; cursor: pointer; display: flex; justify-content: center; align-items: center; gap: 10px;
    transition: 0.3s; text-transform: uppercase; box-shadow: 0 0 5px rgba(57, 255, 20, 0.2); position: relative; overflow: hidden;
}
.ks-app-wrapper .share-app-btn:hover { background: #39ff14; color: black; box-shadow: 0 0 20px #39ff14; transform: scale(1.02); }
.ks-app-wrapper .share-app-btn i { animation: firePulse 1.5s infinite; }

.ks-app-wrapper .sidebar-promo { text-align: center; padding: 15px 0 5px 0; border-top: 1px solid #333; margin-top: 10px; }
.ks-app-wrapper .sidebar-promo img { height: 40px; width: auto; margin-bottom: 5px; }
.ks-app-wrapper .sidebar-promo p { color: #fff; font-size: 11px; font-weight: bold; margin: 0; opacity: 0.8; }

.ks-app-wrapper .actions { margin-top: 10px; display: flex; flex-direction: column; gap: 10px; }
.ks-app-wrapper .dl-btn {
    padding: 15px; border: none; border-radius: 8px; font-weight: 900; cursor: pointer; font-size: 16px; text-transform: uppercase; letter-spacing: 1px;
    background: #333; color: white; transition: 0.3s; display: flex; justify-content: center; align-items: center; gap: 10px; width: 100%;
}
.ks-app-wrapper .dl-btn.story { background: linear-gradient(45deg, #006622, #009933); }
.ks-app-wrapper .dl-btn:hover { filter: brightness(1.2); transform: translateY(-2px); }

/* SAHA VE GÖRSELLER */
.ks-app-wrapper .preview-area { flex-grow: 1; position: relative; background: radial-gradient(circle at center, #1a2e1a, #000); display: flex; flex-direction: column; overflow: hidden; }
.ks-app-wrapper .bg-fx {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-image: url('data:image/svg+xml;utf8,<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><g fill="%2339ff14" fill-opacity="0.03"><path d="M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z"/></g></svg>');
}
.ks-app-wrapper .match-header { height: 80px; display: flex; justify-content: space-between; align-items: center; padding: 0 20px; background: linear-gradient(to bottom, rgba(0,0,0,0.9), transparent); z-index: 20; }
.ks-app-wrapper .match-info .opponent { font-size: 28px; font-weight: 900; text-transform: uppercase; text-shadow: 0 0 10px rgba(57,255,20,0.5); font-family: 'Oswald'; margin: 0; line-height:1.2; }
.ks-app-wrapper .match-info .details { color: #39ff14; font-size: 14px; font-weight: bold; letter-spacing: 1px; }
.ks-app-wrapper .user-badge { text-align: right; }
.ks-app-wrapper .td-name { font-size: 18px; font-weight: bold; margin-bottom: 0; }
.ks-app-wrapper .score-pred { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.ks-app-wrapper .score-label { font-family: 'Rajdhani', sans-serif; font-size: 14px; font-weight: bold; color: white; letter-spacing: 1px; }
.ks-app-wrapper #display-score { font-family: 'Oswald'; font-size: 28px; color: #39ff14; line-height: 1; }

.ks-app-wrapper .pitch-container { flex-grow: 1; margin: 10px 20px; position: relative; border: 3px solid rgba(255,255,255,0.8); border-radius: 12px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.6); perspective: 1000px; }
.ks-app-wrapper .pitch-texture { position: absolute; width: 100%; height: 100%; z-index: 1; background: repeating-linear-gradient(0deg, #2e7d32, #2e7d32 40px, #368e3b 40px, #368e3b 80px); }
.ks-app-wrapper .pitch-lines { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.ks-app-wrapper .pitch-lines::before { content: ""; position: absolute; top: 50%; width: 100%; height: 3px; background: rgba(255,255,255,0.7); transform: translateY(-50%); }
.ks-app-wrapper .pitch-lines::after { content: ""; position: absolute; top: 50%; left: 50%; width: 160px; height: 160px; border: 3px solid rgba(255,255,255,0.7); border-radius: 50%; transform: translate(-50%, -50%); }
.ks-app-wrapper .center-logo-watermark { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60%; opacity: 0.15; z-index: 3; filter: grayscale(100%); margin:0; pointer-events: none; }
.ks-app-wrapper #formation-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; }
.ks-app-wrapper .pitch-instruction { position: absolute; top: 10px; width: 100%; text-align: center; color: rgba(255,255,255,0.8); font-size: 14px; font-weight: bold; z-index: 15; text-shadow: 0 2px 4px black; letter-spacing: 1px; animation: pulse 2s infinite; pointer-events: none; }
.ks-app-wrapper .pitch-legend { position: absolute; bottom: 20px; left: 20px; background: rgba(0,0,0,0.6); padding: 10px; border-radius: 8px; z-index: 15; border: 1px solid rgba(255,255,255,0.2); backdrop-filter: blur(2px); }
.ks-app-wrapper .legend-item { display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,0.9); font-size: 11px; font-weight: bold; margin-bottom: 4px; }
.ks-app-wrapper .l-dot { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.ks-app-wrapper .l-gk { background: #000; border: 1px solid #666; } .ks-app-wrapper .l-def { background: #009933; } .ks-app-wrapper .l-mid { background: #ffcc00; } .ks-app-wrapper .l-wing { background: #005ce6; } .ks-app-wrapper .l-fwd { background: #cc0000; }

/* OYUNCU BİRİMLERİ */
.ks-app-wrapper .player-unit { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; cursor: pointer; transition: 0.3s; }
.ks-app-wrapper .player-unit:hover { transform: translate(-50%, -50%) scale(1.15); z-index: 100; }
.ks-app-wrapper .player-kit { width: 65px; height: 65px; border: none; border-radius: 0; background-color: transparent; display: flex; justify-content: center; align-items: center; font-family: 'BagorKlodjen', sans-serif; font-size: 28px; letter-spacing: 2px; font-weight: normal; padding-bottom: 2px; position: relative; transition: all 0.3s; z-index: 2; background-size: contain; background-repeat: no-repeat; background-position: center; filter: drop-shadow(0 5px 5px rgba(0,0,0,0.8)); line-height: 1; margin: 0; }
.ks-app-wrapper .player-kit.changed { filter: drop-shadow(0 0 5px #39ff14) drop-shadow(0 5px 5px rgba(0,0,0,0.9)); }

/* NORMAL FORMALAR */
.ks-app-wrapper .kit-cubuklu { background-image: url('assets/forma_cubuklu.png'); color: white; text-shadow: 0 2px 4px black; }
.ks-app-wrapper .kit-siyah { background-image: url('assets/forma_siyah.png'); color: #39ff14; text-shadow: 0 2px 4px black; }
.ks-app-wrapper .kit-beyaz { background-image: url('assets/forma_beyaz.png'); color: #004d1a; text-shadow: 0 0 2px white; }
.ks-app-wrapper .kit-krem { background-image: url('assets/forma_krem.png'); color: #004d1a; text-shadow: 0 0 2px rgba(255,255,255,0.5); }

/* KALECİ VARYASYONLARI */
.ks-app-wrapper .kit-gk-mavi { background-image: url('assets/forma_kaleci_mavi.png'); color: white; text-shadow: 0 0 2px black; }
.ks-app-wrapper .kit-gk-mor { background-image: url('assets/forma_kaleci_mor.png'); color: white; text-shadow: 0 0 2px black; }
.ks-app-wrapper .kit-gk-sari { background-image: url('assets/forma_kaleci_sari.png'); color: black; text-shadow: none; }

.ks-app-wrapper .captain-badge { position: absolute; top: 5px; left: 0px; background: #ffcc00; color: black; font-weight: 900; font-size: 10px; width: 18px; height: 18px; border-radius: 50%; border: 1px solid black; display: flex; justify-content: center; align-items: center; z-index: 6; box-shadow: 0 2px 4px rgba(0,0,0,0.5); line-height: 1; }
.ks-app-wrapper .player-flag { position: absolute; top: 40px; right: -10px; font-size: 20px; filter: drop-shadow(0 2px 2px rgba(0,0,0,0.8)); z-index: 5; line-height: 1; }
.ks-app-wrapper .player-info { margin-top: 3px; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: bold; text-transform: uppercase; white-space: nowrap; text-shadow: 1px 1px 1px black; box-shadow: 0 3px 6px rgba(0,0,0,0.6); position: relative; z-index: 1; line-height: 1.2; }
.ks-app-wrapper .info-gk { background: #000000; color: white; border: 1px solid #555; } .ks-app-wrapper .info-def { background: #009933; color: white; } .ks-app-wrapper .info-mid { background: #ffcc00; color: black; text-shadow: none; font-weight: 900; } .ks-app-wrapper .info-wing { background: #005ce6; color: white; } .ks-app-wrapper .info-fwd { background: #cc0000; color: white; } .ks-app-wrapper .info-default { background: rgba(0,0,0,0.8); color: white; border-left: 3px solid #39ff14; }

/* FOOTER */
.ks-app-wrapper .squad-footer { height: 60px; background: #111; display: flex; justify-content: space-between; align-items: center; padding: 0 20px; border-top: 2px solid #333; z-index: 20; }
.ks-app-wrapper .footer-cta { color: white; font-size: 13px; font-weight: bold; letter-spacing: 0.5px; display: flex; align-items: center; gap: 8px; }
.ks-app-wrapper .footer-cta i { color: #39ff14; font-size: 16px; }
.ks-app-wrapper .brand-footer { display: flex; align-items: center; gap: 8px; }
.ks-app-wrapper .brand-footer img { height: 30px; margin:0; }
.ks-app-wrapper .brand-footer span { font-weight: bold; color: #39ff14; font-size: 12px; }

/* MODALS */
.ks-app-wrapper .modal { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); z-index: 999; backdrop-filter: blur(5px); }
.ks-app-wrapper .modal-content { background: rgba(20, 20, 20, 0.98); border: 1px solid #009933; margin: 10% auto; width: 90%; max-width: 400px; border-radius: 12px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.9); }
.ks-app-wrapper .modal-header { padding: 15px; background: #111; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #333; }
.ks-app-wrapper .modal-header h3 { margin: 0; color: white; font-size: 18px; }
.ks-app-wrapper .modal-search { padding: 10px; border-bottom: 1px solid #333; background: #1a1a1a; }
.ks-app-wrapper .player-list-styled { list-style: none; padding: 0; margin: 0; max-height: 40vh; overflow-y: auto; text-align: left; }
.ks-app-wrapper .player-list-styled li { padding: 10px 15px; border-bottom: 1px solid #333; cursor: pointer; transition: 0.2s; display: flex; justify-content: space-between; align-items: center; margin:0; }
.ks-app-wrapper .player-list-styled li:hover { background: #009933; color: white; }

/* SAKAT VE CEZALI ROZETLERİ (Yeni Eklenti) */
.ks-app-wrapper .status-badge {
    font-size: 10px; padding: 3px 6px; border-radius: 4px; margin-left: 10px;
    font-weight: 900; letter-spacing: 0.5px; display: inline-flex; align-items: center; gap: 4px;
}
.ks-app-wrapper .status-badge.inj { background: rgba(255, 77, 77, 0.2); color: #ff4d4d; border: 1px solid #ff4d4d; }
.ks-app-wrapper .status-badge.sus { background: rgba(255, 204, 0, 0.2); color: #ffcc00; border: 1px solid #ffcc00; }

@keyframes firePulse { 0% { transform: scale(1); text-shadow: 0 0 0px #39ff14; } 50% { transform: scale(1.3); text-shadow: 0 0 10px #39ff14; } 100% { transform: scale(1); text-shadow: 0 0 0px #39ff14; } }
@keyframes shake { 0% { transform: translateX(0); } 25% { transform: translateX(-5px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-5px); } 100% { transform: translateX(0); } }

/* MOBILE */
@media (max-width: 900px) {
    .ks-app-wrapper { border: none; border-radius: 0; }
    .ks-app-wrapper .app-container { flex-direction: column; height: auto !important; overflow: visible; }
    .ks-app-wrapper .preview-area { order: 1; height: 550px; border-bottom: 2px solid #009933; }
    .ks-app-wrapper .sidebar { order: 2; width: 100%; border-right: none; height: auto; box-shadow: none; padding-bottom: 40px; }
    .ks-app-wrapper .pitch-container { margin: 10px 5px; }
    .ks-app-wrapper .pitch-lines::after { width: 100px; height: 100px; }
    .ks-app-wrapper .player-kit { width: 45px; height: 45px; font-size: 20px; }
    .ks-app-wrapper .player-info { font-size: 9px; padding: 1px 4px; margin-top: 1px; }
    .ks-app-wrapper .player-flag { top: 30px; right: -8px; font-size: 16px; }
    .ks-app-wrapper .captain-badge { width: 14px; height: 14px; font-size: 8px; top: 0; left: 0; }
    .ks-app-wrapper .squad-footer { flex-direction: column; gap: 10px; height: auto; padding: 15px; text-align: center; }
    .ks-app-wrapper .match-info .opponent { font-size: 20px; }
    .ks-app-wrapper .match-info .details { font-size: 11px; }
    .ks-app-wrapper .td-name { font-size: 14px; }
    .ks-app-wrapper #display-score { font-size: 22px; }
}