/*-----------------------------------------------------------------------------------
Copyright (c) 2026
Theme Name:  -
Theme URI:   -
Description: -
Author:      - Adem Duran -
Author URI:  - https: //ademduran.com -  https://bionluk.com/adeemdrn - @frontend.adem -
Version:     - 1.02.1 -

-----------------------------------------------------------------------------------*/
@import url('__root.css');
@import url('__responsive.css');
@import url('../font/font.css');

body {
       font-family: var(--font_sans) !important;
       font-size: calc(var(--font_size) * 0.8) !important;
       line-height: var(--leading_normal) !important;
       font-weight: var(--font_normal) !important;
       color: var(--color_text) !important;
       background-color: var(--color_white) !important;
       overflow-x: hidden !important;
       -webkit-font-smoothing: antialiased;
       -moz-osx-font-smoothing: grayscale;
       opacity: 0;
       transition: opacity 0.25s ease;
}

/*==================================================
===| [Preloader] CSS
===================================================*/
body.css-loaded {
       opacity: 1;
}

body:not(.css-loaded) * {
       animation: none !important;
       transition: none !important;
}

body.css-loaded #preloader {
       pointer-events: none;
}

#preloader {
       position: fixed;
       inset: 0;
       z-index: 9999;
       background: var(--color_white, #fff);
       display: flex;
       align-items: center;
       justify-content: center;
       transition: opacity .4s ease, visibility .4s ease;
}

#preloader.hide {
       opacity: 0;
       visibility: hidden;
}

.preloader__inner {
       text-align: center;
}

.preloader__inner .logo {
       display: block;
       font-size: calc(var(--font_size, 16px) * 1.2);
       letter-spacing: 4px;
       color: var(--color_primary, #333);
       margin-bottom: calc(var(--base_spacing, 16px) * 0.7);
       font-weight: var(--font_semibold, 600);
}

.preloader__inner .bar {
       width: 100%;
       height: 3px;
       background: rgba(216, 216, 216, 0.425);
       overflow: hidden;
       border-radius: var(--radius_sm, 4px);
}

.preloader__inner .bar span {
       display: block;
       width: 40%;
       height: 100%;
       background: var(--color_primary, #333);
       animation: loading 1.2s infinite ease-in-out;
}

@keyframes loading {
       0% {
              transform: translateX(-100%);
       }

       100% {
              transform: translateX(250%);
       }
}

/*==================================================
===| [Input Style] CSS
===================================================*/
.form-control,
.form-select {
       border-radius: var(--radius_sm) !important;
       border: 1px solid var(--color_border2) !important;
       font-size: calc(var(--font_size)*.8) !important;
       font-weight: var(--font_semibold) !important;
       transition: border-color var(--transition_lg), color var(--transition_lg);
       color: var(--color_secondary) !important;
}

.form-control:focus,
.form-select:focus {
       border-color: var(--color_primary) !important;
       box-shadow: 0 0 0 4px #e8593c14 !important;
}

.form-floating>label,
.form-select>label {
       color: var(--color_text) !important;
       font-weight: var(--font_medium);
}

/*==================================================
===| [Link Style] CSS
===================================================*/
.theme__btn {
       position: relative;
       display: inline;
}

.theme__btn .btn__link {
       padding: calc(var(--base_spacing) * 1) calc(var(--base_spacing) * 1.6);
       color: var(--color_white);
       text-decoration: none;
       letter-spacing: 2px;
       background-color: var(--color_primary);
       border-radius: var(--radius_sm);
       display: inline-flex;
       align-items: center;
       font-weight: var(--font_semibold);
       gap: 15px;
       border: 0.2px solid transparent;
       transition: background-color var(--transition_lg), border-color var(--transition_lg);
}

.theme__btn .btn__link.btn__secondary {
       color: var(--color_primary);
       background-color: var(--color_bg2);
       transition: background-color var(--transition_lg);
}

.theme__btn .btn__link.btn__secondary:hover {
       background-color: var(--color_secondary);
}

.theme__btn .btn__link:hover {
       background-color: var(--color_secondary);
       border-color: #e8593ca3;
}

.theme__btn .btn__link .icons {
       margin-top: -2px;
       display: block;
       width: 20px;
       height: 20px;
       background-color: var(--color_white);
       border-radius: var(--radius_full);
       justify-content: center;
       align-items: center;
       display: flex;
       flex-shrink: 0;
}

.theme__btn .btn__link.btn__secondary .icons {
       background-color: var(--color_primary);
}

.theme__btn .btn__link.btn__secondary .icons svg {
       color: var(--color_white);
}

.theme__btn .btn__link .icons svg {
       color: var(--color_primary);
}

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;900&display=swap');

:root {
       --color_primary: #e8593c;
       --color_secondary: #0f0f0f;
       --color_accent: #161616;
       --color_bg: #fdeeec;
       --color_bg2: #f8f7f4;
       --color_bg_dark: #251614;
       --color_black: #0a0d13;
       --color_white: #ffffff;
       --color_text: #4b5563;
       --color_text_light: #a8acb3;
       --color_text_dark: #1f2937;
       --color_text_blue: #7177B5;
       --color_border: #ffffff14;
       --color_border2: #e8593c3e;
       --color_gray: #f9fafb;
       --color_success: #10b981;
       --color_error: #ef4444;
       --color_warning: #f59e0b;
       --color_info: #3b82f6;
       --shadow_none: none;
       --shadow_xs: 0 1px 2px rgba(0, 0, 0, .05);
       --shadow_sm: 0 1px 3px rgba(0, 0, 0, .1);
       --shadow_md: 0 4px 6px rgba(0, 0, 0, .1);
       --shadow_lg: 0 10px 15px rgba(0, 0, 0, .1);
       --shadow_xl: 0 20px 25px rgba(0, 0, 0, .1);
       --shadow_2xl: 0 25px 50px rgba(0, 0, 0, .25);
       --shadow_inner: inset 0 2px 4px rgba(0, 0, 0, .05);
       --shadow_colored: 0 10px 40px rgba(181, 151, 113, .3);
       --font_sans: "Montserrat", sans-serif;
       --font_size: clamp(12px, 1.6vw, 16px);
       --font_thin: 100;
       --font_light: 300;
       --font_normal: 400;
       --font_medium: 500;
       --font_semibold: 600;
       --font_bold: 700;
       --font_black: 900;
       --leading_none: 1;
       --leading_tight: 1.25;
       --leading_normal: 1.5;
       --leading_relaxed: 1.75;
       --leading_loose: 2;
       --base_spacing: clamp(10px, 1.5vw, 16px);
       --radius_none: 0;
       --radius_sm: 6px;
       --radius_md: 8px;
       --radius_lg: 12px;
       --radius_xl: 16px;
       --radius_2xl: 24px;
       --radius_3xl: 32px;
       --radius_full: 9999px;
       --duration_xs: 75ms;
       --duration_sm: 150ms;
       --duration: 200ms;
       --duration_md: 300ms;
       --duration_lg: 500ms;
       --duration_xl: 700ms;
       --ease: ease;
       --ease_linear: linear;
       --ease_in: ease-in;
       --ease_out: ease-out;
       --ease_in_out: ease-in-out;
       --ease_smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
       --ease_bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
       --transition_xs: var(--duration_xs) var(--ease_out);
       --transition_sm: var(--duration_sm) var(--ease_out);
       --transition: var(--duration) var(--ease);
       --transition_md: var(--duration_md) var(--ease_in_out);
       --transition_lg: var(--duration_lg) var(--ease_smooth);
       --transition_xl: var(--duration_xl) var(--ease_smooth);
       --section_spacing_xxs: clamp(15px, 1.5vw, 20px);
       --section_spacing_xs: clamp(20px, 3vw, 40px);
       --section_spacing_sm: clamp(32px, 4.5vw, 60px);
       --section_spacing_md: clamp(48px, 6.5vw, 80px);
       --section_spacing_lg: clamp(72px, 9vw, 120px);
       --section_spacing_xl: clamp(96px, 12vw, 160px);
       --sidebar_width: 220px;
       --mobile_topbar_height: 58px;
       --bottom_nav_height: 64px;
}

/* ── RESET & BASE ── */
*,
*::before,
*::after {
       box-sizing: border-box;
       margin: 0;
       padding: 0;
}

html {
       -webkit-text-size-adjust: 100%;
}

body {
       font-family: var(--font_sans);
       font-size: var(--font_size);
       background-color: #0d0d0d;
       color: var(--color_white);
       display: flex;
       min-height: 100vh;
       overflow-x: hidden;
}

/* =============================================
   DESKTOP SIDEBAR
   ============================================= */
.sidebar {
       width: var(--sidebar_width);
       background-color: var(--color_secondary);
       border-right: 1px solid var(--color_border);
       flex-direction: column;
       position: fixed;
       top: 0;
       left: 0;
       height: 100vh;
       z-index: 100;
       overflow-y: auto;
}

.sidebar-brand {
       display: flex;
       align-items: center;
       gap: 8px;
       padding: 16px 20px;
       border-bottom: 1px solid var(--color_border);
       flex-shrink: 0;
}

.brand-logo {
       font-size: 14px;
       font-weight: var(--font_black);
       color: var(--color_primary);
       letter-spacing: 1px;
}

.brand-label {
       font-size: 11px;
       color: var(--color_text_light);
       font-weight: var(--font_medium);
}

.sidebar-user {
       display: flex;
       align-items: center;
       gap: 10px;
       padding: 16px 20px;
       border-bottom: 1px solid var(--color_border);
}

.user-name {
       font-size: 13px;
       font-weight: var(--font_bold);
       color: var(--color_white);
       margin: 0;
       line-height: 1.2;
}

.user-role {
       font-size: 10px;
       color: var(--color_text_light);
       margin: 0;
       margin-top: 2px;
}

.sidebar-nav {
       flex: 1;
       padding: 12px;
       display: flex;
       flex-direction: column;
       gap: 2px;
}

.nav-item {
       display: flex;
       align-items: center;
       gap: 10px;
       padding: 9px 12px;
       border-radius: var(--radius_md);
       font-size: 13px;
       font-weight: var(--font_medium);
       color: var(--color_text_light);
       text-decoration: none;
       transition: background var(--transition_sm), color var(--transition_sm);
       position: relative;
}

.nav-item:hover {
       background-color: var(--color_accent);
       color: var(--color_white);
}

.nav-item.active {
       background-color: var(--color_primary);
       color: var(--color_white);
}

.nav-badge {
       margin-left: auto;
       background-color: var(--color_primary);
       color: var(--color_white);
       font-size: 10px;
       font-weight: var(--font_bold);
       padding: 1px 6px;
       border-radius: var(--radius_full);
       min-width: 18px;
       text-align: center;
}

.nav-item.active .nav-badge {
       background-color: rgba(255, 255, 255, 0.25);
}

.sidebar-footer {
       padding: 16px 12px;
       border-top: 1px solid var(--color_border);
       flex-shrink: 0;
}

.logout-btn {
       display: flex;
       align-items: center;
       gap: 10px;
       padding: 9px 12px;
       border-radius: var(--radius_md);
       font-size: 13px;
       font-weight: var(--font_medium);
       color: var(--color_text_light);
       text-decoration: none;
       transition: background var(--transition_sm), color var(--transition_sm);
       width: 100%;
}

.logout-btn:hover {
       background-color: rgba(232, 89, 60, 0.1);
       color: var(--color_primary);
}

/* =============================================
   MOBİL TOPBAR
   ============================================= */
.mobile-topbar {
       position: fixed;
       top: 0;
       left: 0;
       right: 0;
       height: var(--mobile_topbar_height);
       background-color: var(--color_secondary);
       border-bottom: 1px solid var(--color_border);
       align-items: center;
       justify-content: space-between;
       padding: 0 16px;
       z-index: 99;
}

.mobile-menu-btn {
       background: none;
       border: none;
       color: var(--color_white);
       padding: 6px;
       border-radius: var(--radius_sm);
       cursor: pointer;
       display: flex;
       align-items: center;
       justify-content: center;
       transition: background var(--transition_sm);
}

.mobile-menu-btn:hover {
       background-color: var(--color_accent);
}

.mobile-brand {
       font-size: 16px;
       font-weight: var(--font_black);
       color: var(--color_primary);
       letter-spacing: 1px;
}

/* =============================================
   MOBİL OFFCANVAS
   ============================================= */
.offcanvas-isl {
       background-color: var(--color_secondary);
       border-right: 1px solid var(--color_border);
       width: 280px;
}

.offcanvas-isl-header {
       padding: 16px 20px;
       border-bottom: 1px solid var(--color_border);
       display: flex;
       align-items: center;
       justify-content: space-between;
}

.offcanvas-isl-body {
       padding: 16px 12px;
       display: flex;
       flex-direction: column;
       height: 100%;
}

.offcanvas-logout {
       margin-top: auto;
       padding-top: 12px;
       border-top: 1px solid var(--color_border);
}

/* =============================================
   MAIN CONTENT
   ============================================= */
.main-content {
       flex: 1;
       min-height: 100vh;
       background-color: #0d0d0d;
       /* Mobilde topbar + bottom nav boşluğu */
       padding: calc(var(--mobile_topbar_height) + 20px) 16px calc(var(--bottom_nav_height) + 16px);
}

@media (min-width: 992px) {
       .main-content {
              margin-left: var(--sidebar_width);
              padding: 28px 32px 32px;
       }
}

/* =============================================
   TOPBAR (Desktop)
   ============================================= */
.topbar {
       display: flex;
       align-items: flex-start;
       justify-content: space-between;
       margin-bottom: 32px;
}

.mobile-welcome {
       margin-bottom: 24px;
}

.page-title {
       font-size: 20px;
       font-weight: var(--font_bold);
       color: var(--color_white);
       margin: 0 0 4px;
       line-height: 1.2;
}

@media (min-width: 992px) {
       .page-title {
              font-size: 22px;
       }
}

.page-subtitle {
       font-size: 12px;
       color: var(--color_text_light);
       margin: 0;
}

/* =============================================
   BUTTONS
   ============================================= */
.btn-primary-isl {
       display: inline-flex;
       align-items: center;
       gap: 6px;
       background-color: var(--color_primary);
       color: var(--color_white);
       border: none;
       border-radius: var(--radius_md);
       padding: 10px 18px;
       font-size: 13px;
       font-weight: var(--font_bold);
       font-family: var(--font_sans);
       cursor: pointer;
       transition: background var(--transition_sm), transform var(--transition_xs);
       text-decoration: none;
       white-space: nowrap;
}

.btn-primary-isl:hover {
       background-color: #d44e33;
       transform: translateY(-1px);
       color: var(--color_white);
}

.btn-primary-isl:active {
       transform: translateY(0);
}

.btn-sm-isl {
       padding: 8px 12px;
       font-size: 12px;
}

.btn-cancel {
       background: none;
       border: 1px solid rgba(255, 255, 255, 0.12);
       color: var(--color_text_light);
       border-radius: var(--radius_md);
       padding: 9px 16px;
       font-size: 13px;
       font-weight: var(--font_medium);
       font-family: var(--font_sans);
       cursor: pointer;
       transition: border-color var(--transition_sm), color var(--transition_sm);
}

.btn-cancel:hover {
       border-color: rgba(255, 255, 255, 0.25);
       color: var(--color_white);
}

/* =============================================
   SECTION LABEL
   ============================================= */
.section-label {
       font-size: 10px;
       font-weight: var(--font_bold);
       color: var(--color_text_light);
       letter-spacing: 1.5px;
       text-transform: uppercase;
       margin-bottom: 14px;
}

/* =============================================
   AVATAR
   ============================================= */
.avatar {
       width: 38px;
       height: 38px;
       border-radius: var(--radius_md);
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 13px;
       font-weight: var(--font_bold);
       flex-shrink: 0;
}

.avatar-sm {
       width: 28px;
       height: 28px;
       font-size: 10px;
       border-radius: 6px;
}

.avatar-mk {
       background-color: #1e3a5f;
       color: #6bb3f5;
}

.avatar-yk {
       background-color: #2d1f47;
       color: #a78bfa;
}

.avatar-zk {
       background-color: #14372a;
       color: #4ade80;
}

/* =============================================
   PLAYER CARDS
   ============================================= */
.player-card {
       background-color: #1a1a1a;
       border: 1px solid var(--color_border);
       border-radius: var(--radius_xl);
       padding: 18px;
       height: 100%;
       transition: border-color var(--transition_sm), transform var(--transition_sm);
}

.player-card:hover {
       border-color: rgba(255, 255, 255, 0.15);
       transform: translateY(-2px);
}

.pc-name {
       font-size: 14px;
       font-weight: var(--font_bold);
       color: var(--color_white);
       margin: 0;
       line-height: 1.2;
}

.pc-badge {
       font-size: 10px;
       font-weight: var(--font_bold);
       padding: 2px 7px;
       border-radius: var(--radius_full);
       letter-spacing: 0.3px;
       display: inline-block;
       margin-top: 3px;
}

.badge-blue {
       background-color: #1e3a5f;
       color: #6bb3f5;
}

.badge-purple {
       background-color: #2d1f47;
       color: #a78bfa;
}

.badge-green {
       background-color: #14372a;
       color: #4ade80;
}

.pc-position {
       font-size: 11px;
       color: var(--color_text_light);
       margin: 0 0 14px;
}

.pc-stats {
       display: flex;
       gap: 16px;
}

.pc-stat {
       display: flex;
       flex-direction: column;
       gap: 2px;
}

.pc-stat-val {
       font-size: 20px;
       font-weight: var(--font_black);
       color: var(--color_white);
       line-height: 1;
}

.pc-stat-val.accent {
       color: var(--color_primary);
}

.pc-stat-label {
       font-size: 10px;
       color: var(--color_text_light);
}

/* ── ADD CARD ── */
.player-card-add {
       border: 1px dashed rgba(255, 255, 255, 0.15);
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       cursor: pointer;
       min-height: 148px;
       gap: 10px;
       transition: border-color var(--transition_sm), background var(--transition_sm), transform var(--transition_sm);
}

.player-card-add:hover {
       border-color: var(--color_primary);
       background-color: rgba(232, 89, 60, 0.04);
       transform: translateY(-2px);
}

.add-icon {
       width: 48px;
       height: 48px;
       border-radius: var(--radius_full);
       border: 1px dashed rgba(255, 255, 255, 0.2);
       display: flex;
       align-items: center;
       justify-content: center;
       color: var(--color_primary);
       transition: border-color var(--transition_sm), background var(--transition_sm);
}

.player-card-add:hover .add-icon {
       border-color: var(--color_primary);
       background-color: rgba(232, 89, 60, 0.1);
}

.add-label {
       font-size: 12px;
       font-weight: var(--font_medium);
       color: var(--color_text_light);
       margin: 0;
       text-align: center;
       transition: color var(--transition_sm);
}

.player-card-add:hover .add-label {
       color: var(--color_primary);
}

/* =============================================
   MATCH ROWS
   ============================================= */
.matches-list {
       display: flex;
       flex-direction: column;
       gap: 10px;
}

.match-row {
       background-color: #1a1a1a;
       border: 1px solid var(--color_border);
       border-radius: var(--radius_lg);
       padding: 14px 16px;
       display: flex;
       align-items: center;
       justify-content: space-between;
       gap: 12px;
       transition: border-color var(--transition_sm);
       flex-wrap: wrap;
}

.match-row:hover {
       border-color: rgba(255, 255, 255, 0.12);
}

.match-row-left {
       display: flex;
       align-items: center;
       gap: 12px;
}

.match-row-right {
       display: flex;
       align-items: center;
       gap: 8px;
       flex-shrink: 0;
}

.match-league-badge {
       font-size: 10px;
       font-weight: var(--font_bold);
       padding: 4px 9px;
       border-radius: var(--radius_sm);
       letter-spacing: 0.3px;
       flex-shrink: 0;
       white-space: nowrap;
}

.badge-blue-sm {
       background-color: #1e3a5f;
       color: #6bb3f5;
}

.badge-purple-sm {
       background-color: #2d1f47;
       color: #a78bfa;
}

.match-date {
       font-size: 13px;
       font-weight: var(--font_bold);
       color: var(--color_white);
       margin: 0;
       line-height: 1.3;
}

.match-location {
       font-size: 11px;
       color: var(--color_text_light);
       margin: 0;
}

.match-player-name {
       font-size: 13px;
       font-weight: var(--font_medium);
       color: var(--color_white);
       white-space: nowrap;
}

.match-countdown {
       font-size: 11px;
       font-weight: var(--font_bold);
       padding: 3px 10px;
       border-radius: var(--radius_full);
       white-space: nowrap;
}

.countdown-soon {
       background-color: rgba(232, 89, 60, 0.15);
       color: var(--color_primary);
}

.countdown-later {
       background-color: rgba(255, 255, 255, 0.07);
       color: var(--color_text_light);
}

/* Match row mobil: sağ taraf alta geçer */
@media (max-width: 480px) {
       .match-row {
              flex-direction: column;
              align-items: flex-start;
       }

       .match-row-right {
              width: 100%;
              padding-top: 8px;
              border-top: 1px solid var(--color_border);
       }
}

/* =============================================
   BOTTOM NAV (Mobil)
   ============================================= */
.bottom-nav {
       position: fixed;
       bottom: 0;
       left: 0;
       right: 0;
       height: var(--bottom_nav_height);
       background-color: var(--color_secondary);
       border-top: 1px solid var(--color_border);
       align-items: center;
       justify-content: space-around;
       z-index: 99;
       padding: 0 4px;
}

.bottom-nav-item {
       display: flex;
       flex-direction: column;
       align-items: center;
       gap: 4px;
       flex: 1;
       padding: 8px 4px;
       color: var(--color_text_light);
       text-decoration: none;
       font-size: 10px;
       font-weight: var(--font_medium);
       transition: color var(--transition_sm);
       min-width: 0;
}

.bottom-nav-item:hover,
.bottom-nav-item.active {
       color: var(--color_primary);
}

.bottom-nav-item span {
       font-size: 9px;
       white-space: nowrap;
}

.bottom-nav-add {
       color: var(--color_text_light);
}

.bottom-add-btn {
       width: 40px;
       height: 40px;
       border-radius: var(--radius_full);
       background-color: var(--color_primary);
       display: flex;
       align-items: center;
       justify-content: center;
       color: var(--color_white);
       margin-bottom: 2px;
       transition: background var(--transition_sm), transform var(--transition_xs);
}

.bottom-nav-add:hover .bottom-add-btn {
       background-color: #d44e33;
       transform: scale(1.05);
}

/* =============================================
   MODAL
   ============================================= */
.modal-isl {
       background-color: #1a1a1a;
       border: 1px solid rgba(255, 255, 255, 0.1);
       border-radius: var(--radius_xl);
       color: var(--color_white);
}

.modal-isl-header {
       padding: 18px 20px 14px;
       border-bottom: 1px solid var(--color_border);
       display: flex;
       align-items: center;
       justify-content: space-between;
}

.modal-isl-title {
       font-size: 15px;
       font-weight: var(--font_bold);
       color: var(--color_white);
       margin: 0;
}

.modal-close-btn {
       background: none;
       border: none;
       color: var(--color_text_light);
       cursor: pointer;
       padding: 4px;
       border-radius: var(--radius_sm);
       display: flex;
       align-items: center;
       justify-content: center;
       transition: color var(--transition_sm), background var(--transition_sm);
       flex-shrink: 0;
}

.modal-close-btn:hover {
       color: var(--color_white);
       background-color: rgba(255, 255, 255, 0.08);
}

.modal-isl-body {
       padding: 18px 20px;
}

.modal-isl-footer {
       padding: 14px 20px 18px;
       border-top: 1px solid var(--color_border);
       display: flex;
       align-items: center;
       justify-content: flex-end;
       gap: 10px;
}

/* Modal mobil: tam ekrana yakın */
@media (max-width: 576px) {
       .modal-dialog {
              margin: 12px;
       }

       .modal-isl-footer {
              flex-direction: column-reverse;
       }

       .modal-isl-footer .btn-cancel,
       .modal-isl-footer .btn-primary-isl {
              width: 100%;
              justify-content: center;
       }
}

/* =============================================
   FORM ELEMENTS
   ============================================= */
.isl-label {
       display: block;
       font-size: 11px;
       font-weight: var(--font_semibold);
       color: var(--color_text_light);
       letter-spacing: 0.5px;
       text-transform: uppercase;
       margin-bottom: 6px;
}

.isl-input {
       width: 100%;
       background-color: #111;
       border: 1px solid rgba(255, 255, 255, 0.1);
       border-radius: var(--radius_md);
       padding: 10px 12px;
       font-size: 13px;
       font-family: var(--font_sans);
       color: var(--color_white);
       transition: border-color var(--transition_sm), box-shadow var(--transition_sm);
       outline: none;
       appearance: none;
       -webkit-appearance: none;
       /* Mobilde zoom engelle */
       font-size: max(16px, 13px);
}

@media (min-width: 576px) {
       .isl-input {
              font-size: 13px;
       }
}

.isl-input::placeholder {
       color: rgba(255, 255, 255, 0.2);
}

.isl-input:focus {
       border-color: var(--color_primary);
       box-shadow: 0 0 0 3px rgba(232, 89, 60, 0.1);
}

.isl-input option {
       background-color: #1a1a1a;
       color: var(--color_white);
}

.isl-textarea {
       min-height: 80px;
       resize: vertical;
       font-size: 13px;
}

/* =============================================
   SCROLLBAR
   ============================================= */
::-webkit-scrollbar {
       width: 5px;
}

::-webkit-scrollbar-track {
       background: transparent;
}

::-webkit-scrollbar-thumb {
       background-color: rgba(255, 255, 255, 0.1);
       border-radius: 10px;
}

.action-group {
       display: flex;
       gap: 8px;
       flex-wrap: wrap;
}

/* base */
.action-btn {
       display: inline-flex;
       align-items: center;
       gap: 6px;
       padding: 6px 12px;
       border-radius: 8px;
       font-size: 13px;
       font-weight: 500;
       border: 1px solid rgba(255, 255, 255, 0.1);
       background: transparent;
       color: #fff;
       cursor: pointer;
       transition: all 0.25s ease;
}

/* edit */
.action-btn--edit:hover {
       background: rgba(255, 255, 255, 0.08);
       transform: translateY(-1px);
}

/* delete */
.action-btn--delete {
       padding: 6px 10px;
}

.action-btn--delete:hover {
       background: rgba(255, 59, 48, 0.15);
       border-color: rgba(255, 59, 48, 0.3);
       transform: translateY(-1px);
}

/* icon */
.action-btn .icon {
       font-size: 14px;
       line-height: 1;
}

.action-btn--delete {
       border-radius: 6px;
}

.filter-tabs {
       display: flex;
       flex-wrap: wrap;
       gap: 8px;
       margin-bottom: 28px;
}

.filter-tab {
       display: inline-flex;
       align-items: center;
       padding: 7px 16px;
       border-radius: var(--radius_full);
       border: 1px solid rgba(255, 255, 255, 0.15);
       background: none;
       color: var(--color_text_light);
       font-size: 13px;
       font-weight: 600;
       font-family: var(--font_sans);
       cursor: pointer;
       transition: all 150ms ease;
       white-space: nowrap;
}

.filter-tab:hover {
       border-color: rgba(255, 255, 255, 0.35);
       color: #fff;
}

.filter-tab.active {
       background-color: var(--color_primary);
       border-color: var(--color_primary);
       color: #fff;
}

/* ── KİŞİ FİLTRE TABS (ikinci satır) ── */
.person-tab {
       display: inline-flex;
       align-items: center;
       padding: 7px 16px;
       border-radius: var(--radius_full);
       border: 1px solid rgba(255, 255, 255, 0.15);
       background: none;
       color: var(--color_text_light);
       font-size: 13px;
       font-weight: 600;
       font-family: var(--font_sans);
       cursor: pointer;
       transition: all 150ms ease;
       white-space: nowrap;
}

.person-tab:hover {
       border-color: rgba(255, 255, 255, 0.35);
       color: #fff;
}

.person-tab.active {
       background-color: var(--color_primary);
       border-color: var(--color_primary);
       color: #fff;
}

/* ── BÖLÜM BAŞLIĞI ── */
.section-label {
       font-size: 10px;
       font-weight: 700;
       color: var(--color_text_light);
       letter-spacing: 1.5px;
       text-transform: uppercase;
       margin-bottom: 12px;
}

/* ── MAÇ SATIRI ── */
.match-row {
       background-color: #1a1a1a;
       border: 1px solid var(--color_border);
       border-radius: var(--radius_lg);
       padding: 14px 20px;
       display: flex;
       align-items: center;
       justify-content: space-between;
       gap: 12px;
       margin-bottom: 10px;
       transition: border-color 150ms ease;
}

.match-row:hover {
       border-color: rgba(255, 255, 255, 0.12);
}

.match-row-left {
       display: flex;
       align-items: center;
       gap: 14px;
       min-width: 0;
}

.match-row-right {
       display: flex;
       align-items: center;
       gap: 10px;
       flex-shrink: 0;
}

/* ── LİG BADGE ── */
.league-badge {
       font-size: 10px;
       font-weight: 700;
       padding: 5px 9px;
       border-radius: 6px;
       letter-spacing: 0.3px;
       flex-shrink: 0;
       white-space: nowrap;
}

.badge-u13 {
       background-color: #1e3a5f;
       color: #6bb3f5;
}

.badge-u15 {
       background-color: #14372a;
       color: #4ade80;
}

.badge-40 {
       background-color: #3a2d14;
       color: #fbbf24;
}

/* ── MAÇ BİLGİSİ ── */
.match-date {
       font-size: 14px;
       font-weight: 700;
       color: #fff;
       margin: 0 0 2px;
       line-height: 1.2;
}

.match-location {
       font-size: 11px;
       color: var(--color_text_light);
       margin: 0;
}

/* ── AVATAR ── */
.avatar {
       width: 28px;
       height: 28px;
       border-radius: 6px;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 10px;
       font-weight: 700;
       flex-shrink: 0;
}

.avatar-mk {
       background-color: #1e3a5f;
       color: #6bb3f5;
}

.avatar-yk {
       background-color: #2d1f47;
       color: #a78bfa;
}

.avatar-zk {
       background-color: #14372a;
       color: #4ade80;
}

.player-name {
       font-size: 13px;
       font-weight: 500;
       color: #fff;
       white-space: nowrap;
}

/* ── DURUM ── */
.status-badge {
       font-size: 11px;
       font-weight: 600;
       padding: 3px 10px;
       border-radius: 9999px;
       white-space: nowrap;
}

.status-soon {
       background-color: rgba(232, 89, 60, 0.15);
       color: var(--color_primary);
}

.status-later {
       background-color: rgba(255, 255, 255, 0.07);
       color: var(--color_text_light);
}

.status-played {
       background-color: rgba(255, 255, 255, 0.07);
       color: var(--color_text_light);
}

/* ── İSTATİSTİK LİNK ── */
.stat-link {
       font-size: 12px;
       font-weight: 700;
       color: var(--color_primary);
       text-decoration: none;
       white-space: nowrap;
       transition: opacity 150ms ease;
}

.stat-link:hover {
       opacity: 0.75;
       color: var(--color_primary);
}

/* ── GRUP BOŞLUK ── */
.match-group {
       margin-bottom: 28px;
}

/* ── MOBİL ── */
@media (max-width: 600px) {

       .match-row {
              flex-direction: column;
              align-items: flex-start;
       }

       .match-row-right {
              width: 100%;
              padding-top: 10px;
              border-top: 1px solid var(--color_border);
              flex-wrap: wrap;
       }

       .filter-tabs {
              gap: 6px;
       }

       .filter-tab,
       .person-tab {
              font-size: 12px;
              padding: 6px 12px;
       }
}


.section-label {
       font-size: 10px;
       font-weight: 700;
       color: var(--color_text_light);
       letter-spacing: 1.5px;
       text-transform: uppercase;
       margin-bottom: 12px;
}

.player-tabs {
       display: flex;
       gap: 8px;
       overflow-x: auto;
       padding-bottom: 4px;
       margin-bottom: 28px;
       scrollbar-width: none;
}

.player-tabs::-webkit-scrollbar {
       display: none;
}

.player-tab {
       display: flex;
       align-items: center;
       gap: 10px;
       padding: 10px 14px;
       border-radius: var(--radius_lg);
       border: 1px solid transparent;
       background: #1a1a1a;
       cursor: pointer;
       transition: all 150ms ease;
       flex-shrink: 0;
       text-decoration: none;
}

.player-tab:hover {
       border-color: rgba(255, 255, 255, 0.12);
}

.player-tab.active {
       border-color: var(--color_primary);
       background-color: rgba(232, 89, 60, 0.06);
}

.player-tab-name {
       font-size: 14px;
       font-weight: 700;
       color: #fff;
       display: block;
       line-height: 1.2;
}

.player-tab-cat {
       font-size: 11px;
       color: var(--color_text_light);
       display: block;
}

/* =============================================
       SPORCU PANEL İÇERİĞİ
       ============================================= */
.player-panel {
       display: none;
}

.player-panel.active {
       display: block;
}

.player-header {
       gap: 16px;
       margin-bottom: 24px;
       flex-wrap: wrap;
}

.player-header-left {
       display: flex;
       align-items: center;
       gap: 14px;
       min-width: 0;
}

.player-header-name {
       font-size: 18px;
       font-weight: 700;
       color: #fff;
       margin: 0 0 3px;
}

.player-header-sub {
       font-size: 12px;
       color: var(--color_text_light);
       margin: 0;
}

.btn-instagram {
       display: inline-flex;
       align-items: center;
       gap: 7px;
       border: 1px solid rgba(255, 255, 255, 0.18);
       background: none;
       color: #fff;
       font-size: 12px;
       font-weight: 600;
       font-family: var(--font_sans);
       padding: 9px 16px;
       border-radius: 8px;
       cursor: pointer;
       transition: border-color 150ms ease, background 150ms ease;
       white-space: nowrap;
       text-decoration: none;
       flex-shrink: 0;
}

.btn-instagram:hover {
       border-color: rgba(255, 255, 255, 0.35);
       background-color: rgba(255, 255, 255, 0.05);
       color: #fff;
}

.stat-card {
       background-color: #1a1a1a;
       border: 1px solid var(--color_border);
       border-radius: var(--radius_xl);
       padding: 24px 16px;
       text-align: center;
}

.stat-card-val {
       font-size: 34px;
       font-weight: 900;
       color: var(--color_primary);
       line-height: 1;
       margin-bottom: 8px;
}

.stat-card-label {
       font-size: 12px;
       color: var(--color_text_light);
       font-weight: 500;
}

/* ═══════════════════════════════════════════════
   RESPONSIVE MATCH TABLE
   ═══════════════════════════════════════════════ */

/* Wrapper */
.match-table-wrap {
       background-color: #1a1a1a;
       border: 1px solid var(--color_border);
       border-radius: var(--radius_xl);
       overflow-x: auto;
       scrollbar-width: thin;
       scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}

.match-table-wrap::-webkit-scrollbar {
       height: 6px;
}

.match-table-wrap::-webkit-scrollbar-track {
       background: transparent;
}

.match-table-wrap::-webkit-scrollbar-thumb {
       background-color: rgba(255, 255, 255, 0.1);
       border-radius: 10px;
}

/* Base Table */
.match-table {
       width: 100%;
       border-collapse: collapse;
       margin-bottom: 0;
       min-width: 520px;
}

.match-table thead th {
       font-size: 10px;
       font-weight: var(--font_bold);
       color: var(--color_text_light);
       letter-spacing: 1px;
       text-transform: uppercase;
       padding: 14px 20px;
       border-bottom: 1px solid var(--color_border);
       white-space: nowrap;
       background: transparent;
       vertical-align: middle;
}

.match-table tbody tr {
       border-bottom: 1px solid var(--color_border);
       transition: background-color 150ms ease;
}

.match-table tbody tr:hover {
       background-color: rgba(255, 255, 255, 0.03);
}

.match-table tbody td {
       padding: 14px 20px;
       font-size: 13px;
       color: #fff;
       background-color: transparent;
       vertical-align: middle;
       white-space: nowrap;
}

/* Cell Variants */
.match-table tbody td.td-muted {
       color: var(--color_text_light);
}

.match-table tbody td.td-pts {
       font-weight: var(--font_bold);
       color: var(--color_primary);
       text-align: right;
}

.match-table tbody td.td-num {
       color: rgba(255, 255, 255, 0.85);
       text-align: right;
}

/* Category Badge inside table */
.match-table .cat-badge {
       display: inline-block;
       font-size: 10px;
       font-weight: var(--font_bold);
       padding: 3px 8px;
       border-radius: 6px;
}

/* ═══════════════════════════════════════════════
   MOBILE: Card View (max-width: 767.98px)
   ═══════════════════════════════════════════════ */
@media (max-width: 767.98px) {
       .match-table-wrap {
              background: transparent;
              border: none;
              border-radius: 0;
              overflow-x: visible;
       }

       .match-table {
              min-width: auto;
       }

       /* Hide original header */
       .match-table thead {
              display: none;
       }

       /* Row becomes a card */
       .match-table tbody tr {
              display: block;
              background-color: #1a1a1a;
              border: 1px solid var(--color_border);
              border-radius: var(--radius_lg);
              padding: 16px;
              margin-bottom: 12px;
              transition: border-color 150ms ease;
       }

       .match-table tbody tr:hover {
              background-color: #1a1a1a;
              border-color: rgba(255, 255, 255, 0.12);
       }

       /* Cell becomes a flex row */
       .match-table tbody td {
              display: flex;
              justify-content: space-between;
              align-items: center;
              padding: 10px 0;
              font-size: 13px;
              white-space: normal;
       }

       .match-table tbody td:last-child {
              border-bottom: none;
       }

       /* Add labels via pseudo-elements */
       .match-table tbody td:nth-of-type(1)::before {
              content: "TARİH";
       }

       .match-table tbody td:nth-of-type(2)::before {
              content: "KAT.";
       }

       .match-table tbody td:nth-of-type(3)::before {
              content: "SAHA";
       }

       .match-table tbody td:nth-of-type(4)::before {
              content: "PTS";
       }

       .match-table tbody td:nth-of-type(5)::before {
              content: "REB";
       }

       .match-table tbody td:nth-of-type(6)::before {
              content: "AST";
       }

       .match-table tbody td:nth-of-type(7)::before {
              content: "STL";
       }

       .match-table tbody td::before {
              font-size: 10px;
              font-weight: var(--font_bold);
              color: var(--color_text_light);
              letter-spacing: 0.5px;
              margin-right: 12px;
              flex-shrink: 0;
       }

       /* Reset text-align for mobile card view */
       .match-table tbody td.td-pts,
       .match-table tbody td.td-num {
              text-align: left;
       }

       .match-table tbody td.td-pts {
              color: var(--color_primary);
              font-weight: var(--font_bold);
       }
}

/* ── BADGE ── */
.cat-badge {
       display: inline-block;
       font-size: 10px;
       font-weight: 700;
       padding: 3px 8px;
       border-radius: 6px;
}

.badge-40 {
       background-color: #3a2d14;
       color: #fbbf24;
}

.badge-u13 {
       background-color: #1e3a5f;
       color: #6bb3f5;
}

.badge-u15 {
       background-color: #14372a;
       color: #4ade80;
}

/* ── AVATAR ── */
.avatar {
       border-radius: 10px;
       display: flex;
       align-items: center;
       justify-content: center;
       font-weight: 700;
       flex-shrink: 0;
}

.avatar-md {
       width: 38px;
       height: 38px;
       font-size: 13px;
}

.avatar-lg {
       width: 52px;
       height: 52px;
       font-size: 16px;
       border-radius: 14px;
}

.avatar-mk {
       background-color: #1e3a5f;
       color: #6bb3f5;
}

.avatar-yk {
       background-color: #2d1f47;
       color: #a78bfa;
}

.avatar-zk {
       background-color: #14372a;
       color: #4ade80;
}

/* =============================================
       MOBİL
       ============================================= */
@media (max-width: 576px) {

       .player-header-name {
              font-size: 15px;
       }

       .stat-card {
              padding: 16px 10px;
       }

       .stat-card-val {
              font-size: 26px;
       }

       .stat-card-label {
              font-size: 11px;
       }

       .btn-instagram {
              font-size: 11px;
              padding: 7px 12px;
       }
}

.summary-card {
       background-color: #1a1a1a;
       border: 1px solid var(--color_border);
       border-radius: var(--radius_xl);
       padding: 28px 24px;
       text-align: center;
       height: 100%;
}

.summary-val {
       font-size: 36px;
       font-weight: 900;
       line-height: 1;
       margin-bottom: 10px;
}

.summary-val.color-white {
       color: #fff;
}

.summary-val.color-primary {
       color: var(--color_primary);
}

.summary-val.color-success {
       color: var(--color_success);
}

.summary-label {
       font-size: 12px;
       color: var(--color_text_light);
       font-weight: 500;
}

/* =============================================
       BÖLÜM BAŞLIĞI
       ============================================= */
.section-label {
       font-size: 10px;
       font-weight: 700;
       color: var(--color_text_light);
       letter-spacing: 1.5px;
       text-transform: uppercase;
       margin-bottom: 14px;
}

.tx-row {
       background-color: #1a1a1a;
       border: 1px solid var(--color_border);
       border-radius: var(--radius_lg);
       padding: 16px 20px;
       transition: border-color 150ms ease;
}

.tx-row:hover {
       border-color: rgba(255, 255, 255, 0.1);
}

.tx-icon {
       width: 42px;
       height: 42px;
       border-radius: 10px;
       background-color: #2a2a2a;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 20px;
       flex-shrink: 0;
}

.tx-title {
       font-size: 14px;
       font-weight: 700;
       color: #fff;
}

.tx-sub {
       font-size: 11px;
       color: var(--color_text_light);
}

.tx-amount {
       font-size: 15px;
       font-weight: 700;
       color: #fff;
       white-space: nowrap;
}

/* STATUS */
.tx-status {
       font-size: 11px;
       font-weight: 700;
       padding: 3px 10px;
       border-radius: 999px;
       white-space: nowrap;
}

.status-paid {
       background-color: rgba(16, 185, 129, 0.15);
       color: var(--color_success);
}

.status-pending {
       background-color: rgba(232, 89, 60, 0.15);
       color: var(--color_primary);
}

/* =============================================
       MOBİL
       ============================================= */
@media (max-width: 576px) {

       .summary-card {
              padding: 20px 12px;
       }

       .summary-val {
              font-size: 24px;
       }

       .summary-label {
              font-size: 11px;
       }

       .tx-row {
              padding: 14px 14px;
              gap: 10px;
       }

       .tx-icon {
              width: 36px;
              height: 36px;
              font-size: 17px;
       }

       .tx-title {
              font-size: 13px;
       }

       .tx-sub {
              font-size: 10px;
       }

       .tx-amount {
              font-size: 13px;
       }
}

@media (max-width: 400px) {
       .tx-title {
              font-size: 12px;
       }
}

.settings-card {
       background-color: #1a1a1a;
       border: 1px solid var(--color_border);
       border-radius: var(--radius_xl);
       padding: 24px;
       height: 100%;
}

.card-section-label {
       font-size: 10px;
       font-weight: 700;
       color: var(--color_text_light);
       letter-spacing: 1.5px;
       text-transform: uppercase;
       margin-bottom: 20px;
}

/* =============================================
       SATIR
       ============================================= */
.setting-row {
       padding: 14px 0;
       border-bottom: 1px solid var(--color_border);
}

.setting-row:last-child {
       border-bottom: none;
       padding-bottom: 0;
}

.setting-row:first-of-type {
       padding-top: 0;
}

.setting-label {
       font-size: 10px;
       font-weight: 700;
       color: var(--color_text_light);
       letter-spacing: 1px;
       text-transform: uppercase;
       margin-bottom: 8px;
}

/* Normal görünüm (read-only) */
.setting-display {
       display: flex;
       align-items: center;
       justify-content: space-between;
       gap: 12px;
}

.setting-value {
       font-size: 14px;
       font-weight: 600;
       color: #fff;
}

/* Edit görünüm */
.setting-edit {
       display: none;
       flex-direction: column;
       gap: 10px;
}

.setting-edit.visible {
       display: flex;
}

.setting-display.hidden {
       display: none;
}

/* =============================================
       INPUT
       ============================================= */
.isl-input {
       width: 100%;
       background-color: #111;
       border: 1px solid rgba(255, 255, 255, 0.1);
       border-radius: 8px;
       padding: 10px 12px;
       font-size: 13px;
       font-family: var(--font_sans);
       color: #fff;
       outline: none;
       transition: border-color 150ms ease, box-shadow 150ms ease;
       appearance: none;
       -webkit-appearance: none;
}

.isl-input::placeholder {
       color: rgba(255, 255, 255, 0.2);
}

.isl-input:focus {
       border-color: var(--color_primary);
       box-shadow: 0 0 0 3px rgba(232, 89, 60, 0.1);
}

/* =============================================
       BUTONLAR
       ============================================= */
.btn-edit {
       display: inline-flex;
       align-items: center;
       gap: 6px;
       background-color: #2a2a2a;
       border: 1px solid rgba(255, 255, 255, 0.1);
       color: #fff;
       font-size: 12px;
       font-weight: 600;
       font-family: var(--font_sans);
       padding: 7px 13px;
       border-radius: 8px;
       cursor: pointer;
       transition: background 150ms ease, border-color 150ms ease;
       white-space: nowrap;
       flex-shrink: 0;
}

.btn-edit:hover {
       background-color: #333;
       border-color: rgba(255, 255, 255, 0.2);
}

.btn-save {
       display: inline-flex;
       align-items: center;
       gap: 6px;
       background-color: var(--color_primary);
       border: none;
       color: #fff;
       font-size: 12px;
       font-weight: 700;
       font-family: var(--font_sans);
       padding: 9px 16px;
       border-radius: 8px;
       cursor: pointer;
       transition: background 150ms ease;
       white-space: nowrap;
}

.btn-save:hover {
       background-color: #d44e33;
}

.btn-cancel-edit {
       display: inline-flex;
       align-items: center;
       gap: 6px;
       background: none;
       border: 1px solid rgba(255, 255, 255, 0.12);
       color: var(--color_text_light);
       font-size: 12px;
       font-weight: 600;
       font-family: var(--font_sans);
       padding: 8px 14px;
       border-radius: 8px;
       cursor: pointer;
       transition: border-color 150ms ease, color 150ms ease;
       white-space: nowrap;
}

.btn-cancel-edit:hover {
       border-color: rgba(255, 255, 255, 0.25);
       color: #fff;
}

.btn-action {
       display: inline-flex;
       align-items: center;
       gap: 6px;
       background-color: #2a2a2a;
       border: 1px solid rgba(255, 255, 255, 0.1);
       color: #fff;
       font-size: 12px;
       font-weight: 600;
       font-family: var(--font_sans);
       padding: 7px 16px;
       border-radius: 8px;
       cursor: pointer;
       transition: background 150ms ease;
       white-space: nowrap;
       flex-shrink: 0;
}

.btn-action:hover {
       background-color: #333;
}

.btn-danger {
       background-color: rgba(239, 68, 68, 0.15);
       border-color: rgba(239, 68, 68, 0.3);
       color: var(--color_error);
}

.btn-danger:hover {
       background-color: rgba(239, 68, 68, 0.25);
}

/* =============================================
       TOGGLE (2FA)
       ============================================= */
.toggle-wrap {
       display: flex;
       align-items: center;
       gap: 10px;
}

.toggle-label-text {
       font-size: 13px;
       color: var(--color_text_light);
       font-weight: 500;
}

.toggle {
       position: relative;
       width: 40px;
       height: 22px;
       flex-shrink: 0;
}

.toggle input {
       opacity: 0;
       width: 0;
       height: 0;
       position: absolute;
}

.toggle-slider {
       position: absolute;
       inset: 0;
       background-color: #333;
       border-radius: 99px;
       cursor: pointer;
       transition: background 200ms ease;
}

.toggle-slider::before {
       content: '';
       position: absolute;
       width: 16px;
       height: 16px;
       border-radius: 50%;
       background-color: #fff;
       left: 3px;
       top: 3px;
       transition: transform 200ms ease;
}

.toggle input:checked+.toggle-slider {
       background-color: var(--color_success);
}

.toggle input:checked+.toggle-slider::before {
       transform: translateX(18px);
}

/* =============================================
       BAŞARILI MESAJ
       ============================================= */
.save-feedback {
       font-size: 11px;
       color: var(--color_success);
       font-weight: 600;
       display: none;
}

.save-feedback.visible {
       display: inline;
}

/* =============================================
       MOBİL
       ============================================= */
@media (max-width: 576px) {

       .settings-card {
              padding: 18px 16px;
       }

       .setting-value {
              font-size: 13px;
       }
}