/* =========================================================
   V57 - MOBİL ACİL STABİLİZASYON
   Amaç: 320px-820px ekranlarda taşma, sıkışma, ilk yükleme
   kaymaları ve eski CSS çakışmalarını son katmanda düzeltmek.
   ========================================================= */

html, body {
  max-width: 100%;
}

img, svg, video, canvas {
  max-width: 100%;
}

img {
  height: auto;
}

body {
  overflow-x: hidden;
}

[hidden] {
  display: none !important;
}

@media (max-width: 820px) {
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    overflow-x: hidden;
  }

  body {
    width: 100%;
    min-width: 0;
    overflow-x: hidden !important;
  }

  *, *::before, *::after {
    min-width: 0;
  }

  .container,
  .account-shell,
  .member-auth-shell,
  .login-shell {
    width: 100% !important;
    max-width: 100% !important;
  }

  .container {
    padding-left: max(14px, env(safe-area-inset-left));
    padding-right: max(14px, env(safe-area-inset-right));
    margin-left: auto;
    margin-right: auto;
  }

  /* ---------------- HEADER / NAV ---------------- */
  .site-header,
  .admin-header {
    width: 100%;
    max-width: 100%;
  }

  .site-header .nav-wrap {
    min-height: 64px !important;
    height: 64px !important;
    gap: 8px !important;
  }

  .site-header .brand {
    min-width: 0;
    gap: 7px !important;
  }

  .site-header .site-logo {
    width: 40px !important;
    height: 40px !important;
    flex: 0 0 40px;
  }

  .site-header .brand > span,
  .site-header .brand-title {
    min-width: 0;
    font-size: clamp(17px, 5vw, 21px) !important;
    line-height: 1.05;
    white-space: nowrap;
  }

  .site-header .menu-btn {
    display: grid !important;
    place-items: center;
    flex: 0 0 44px;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    border-radius: 12px;
  }

  .site-header .main-nav {
    position: fixed !important;
    top: 70px !important;
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    max-width: none !important;
    max-height: calc(100dvh - 84px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    z-index: 1000 !important;
    padding: 10px !important;
    border-radius: 16px !important;
    box-shadow: 0 18px 50px rgba(0,0,0,.18);
  }

  .site-header .main-nav a,
  .site-header .main-nav button {
    width: 100%;
    min-height: 46px;
    padding: 10px 12px !important;
    border-radius: 10px;
    white-space: normal;
  }

  /* Admin / üye paneli üst barı telefonda iki satır */
  .admin-header .nav-wrap {
    height: auto !important;
    min-height: 64px !important;
    padding-top: 8px;
    padding-bottom: 8px;
    gap: 7px !important;
    flex-wrap: wrap !important;
    align-items: center;
  }

  .admin-header .brand {
    min-width: 0;
    flex: 1 1 auto;
    gap: 7px !important;
  }

  .admin-header .site-logo {
    width: 38px !important;
    height: 38px !important;
    flex: 0 0 38px;
  }

  .admin-header .brand > span {
    font-size: 16px !important;
    line-height: 1.05;
    white-space: nowrap;
  }

  .admin-header .admin-actions-top {
    width: 100%;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 6px !important;
    margin: 0;
  }

  .admin-header .admin-top-identity {
    grid-column: 1 / -1;
    width: 100%;
    text-align: left;
    padding: 4px 2px;
  }

  .admin-header .admin-back {
    min-width: 0 !important;
    min-height: 38px;
    padding: 7px 5px !important;
    font-size: 9px !important;
    line-height: 1.15;
    text-align: center;
    white-space: normal !important;
  }

  /* ---------------- ANA SAYFA ---------------- */
  .section,
  .hero,
  .community-hero {
    max-width: 100%;
    overflow: hidden;
  }

  .section {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }

  .community-hero {
    padding-top: 28px !important;
    padding-bottom: 26px !important;
  }

  .community-hero-grid,
  .contact-grid,
  .cards-3,
  .defi-home-grid,
  .organization-public-card,
  .defi-application-wrap,
  .tennis-history-hero {
    grid-template-columns: minmax(0,1fr) !important;
  }

  .community-copy,
  .community-visual,
  .community-hero-grid > *,
  .defi-home-grid > *,
  .organization-public-card > *,
  .active-tournament-wrap > * {
    min-width: 0;
    max-width: 100%;
  }

  .community-copy h1 {
    font-size: clamp(31px, 9.5vw, 43px) !important;
    line-height: 1.02 !important;
    letter-spacing: -.035em !important;
    overflow-wrap: break-word;
  }

  .community-copy > p,
  .section-title p {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }

  .community-groups,
  .interest-mini-list,
  .hero-actions {
    max-width: 100%;
    flex-wrap: wrap !important;
  }

  .quick-grid,
  .community-quick-grid {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 8px !important;
  }

  .quick-card {
    min-width: 0 !important;
    min-height: 70px !important;
    padding: 11px !important;
    font-size: 12px !important;
    overflow-wrap: anywhere;
  }

  .section-title,
  .admin-title {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 7px !important;
  }

  .section-title h2 {
    font-size: clamp(25px, 7.6vw, 33px) !important;
    line-height: 1.08 !important;
    overflow-wrap: anywhere;
  }

  /* ---------------- DEFİ ANA SAYFA ---------------- */
  .defi-home-grid {
    width: 100%;
    gap: 12px !important;
  }

  .defi-card {
    width: 100%;
    max-width: 100%;
    border-radius: 17px !important;
    overflow: hidden !important;
  }

  .defi-card-head {
    min-height: 54px !important;
    padding: 12px 13px !important;
  }

  .defi-card-head strong {
    font-size: 13px !important;
  }

  .defi-card-head small {
    font-size: 9px !important;
    text-align: right;
  }

  .defi-pyramid {
    width: 100%;
    max-width: 100%;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    padding: 20px 7px 24px !important;
    align-items: flex-start !important;
    scroll-padding-inline: 8px;
  }

  .pyramid-row {
    width: max-content;
    min-width: 100% !important;
    max-width: none !important;
    justify-content: center !important;
    gap: 5px !important;
    padding: 0 3px;
  }

  .pyramid-player {
    flex: 0 0 78px !important;
    width: 78px !important;
    min-width: 78px !important;
    max-width: 78px !important;
    min-height: 62px !important;
    padding: 10px 4px 7px !important;
    border-radius: 10px !important;
  }

  .pyramid-player strong {
    max-width: 70px !important;
    font-size: 9px !important;
    line-height: 1.12 !important;
  }

  .pyramid-player small {
    font-size: 7px !important;
    line-height: 1.1 !important;
  }

  .pyramid-rank {
    min-width: 21px !important;
    height: 18px !important;
    top: -7px !important;
    font-size: 8px !important;
    padding: 0 4px !important;
  }

  .home-defi-process {
    max-width: 72px;
    font-size: 6px !important;
    line-height: 1.05;
  }

  .public-ladder {
    width: 100%;
    overflow: hidden;
  }

  .public-ladder .row {
    width: 100%;
    grid-template-columns: 32px minmax(0,1fr) 38px 38px !important;
    gap: 5px !important;
    padding: 10px 8px !important;
  }

  .public-ladder .row strong,
  .public-ladder .row span {
    overflow-wrap: anywhere;
  }

  .match-list {
    padding: 9px !important;
  }

  .match-row {
    grid-template-columns: minmax(0,1fr) auto !important;
    gap: 7px !important;
    padding: 9px !important;
  }

  .public-defi-pause-warning {
    margin-left: 8px !important;
    margin-right: 8px !important;
  }

  /* ---------------- TURNUVA / ORGANİZASYON ---------------- */
  .active-tournament-card,
  .organization-public-card,
  .interest-empty-card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .active-tournament-card,
  .organization-public-card {
    border-radius: 18px !important;
  }

  .organization-copy,
  .organization-form,
  .active-tournament-section {
    min-width: 0;
    max-width: 100%;
  }

  .organization-form,
  .contact-form,
  .admin-form,
  .tournament-application-form {
    width: 100%;
    max-width: 100%;
  }

  .organization-count-grid {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 8px !important;
  }

  .organization-form input,
  .organization-form select,
  .contact-form input,
  .contact-form select,
  .admin-form input,
  .admin-form select,
  .member-auth-form input,
  .member-auth-form select,
  .tournament-application-form input,
  .tournament-application-form select,
  textarea {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 48px;
    font-size: 16px !important; /* iOS otomatik zoom'u engeller */
  }

  .tournament-registration-layout,
  .tournament-application-fields,
  .tournament-category-choice-grid,
  .tournament-settings-grid,
  .organization-admin-date-grid {
    grid-template-columns: minmax(0,1fr) !important;
  }

  .tournament-app-table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ---------------- ÜYE PANELİ ---------------- */
  .admin-main {
    padding-top: 20px !important;
    padding-bottom: 42px !important;
  }

  .account-grid,
  .admin-grid {
    grid-template-columns: minmax(0,1fr) !important;
    gap: 12px !important;
  }

  .account-grid > *,
  .admin-grid > *,
  .admin-card,
  .member-season-history-card,
  .member-discipline-card,
  #defiLeagueCard {
    grid-column: 1 !important;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .admin-card,
  .member-season-history-card,
  .member-discipline-card {
    padding: 14px !important;
    border-radius: 15px !important;
  }

  .account-info-row {
    display: grid !important;
    grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr);
    gap: 8px !important;
    padding: 10px 0 !important;
  }

  .account-info-row span,
  .account-info-row strong {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  #defiLeagueCard .defi-member-pyramid {
    width: 100%;
    max-width: 100%;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #defiLeagueCard .defi-member-pyramid-row {
    width: max-content !important;
    min-width: 100% !important;
    justify-content: center !important;
    gap: 5px !important;
  }

  #defiLeagueCard .defi-member-player {
    flex: 0 0 78px !important;
    width: 78px !important;
    min-width: 78px !important;
    max-width: 78px !important;
    min-height: 70px !important;
    padding: 9px 4px 7px !important;
  }

  #defiLeagueCard .defi-member-player strong {
    font-size: 8.5px !important;
    max-width: 70px;
  }

  #defiLeagueCard .defi-member-player small,
  #defiLeagueCard .defi-member-player em {
    font-size: 6.5px !important;
  }

  .member-league-stats,
  .player-points-grid,
  .player-season-stats {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }

  .member-participation-heading,
  .member-season-history-head,
  .member-discipline-head {
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: 6px !important;
  }

  .compact-member-btn {
    width: 100%;
  }

  /* ---------------- ADMIN PANELİ ---------------- */
  .admin-title h1 {
    font-size: clamp(28px, 8vw, 37px) !important;
    line-height: 1.05;
    overflow-wrap: anywhere;
  }

  .admin-tabs {
    width: 100%;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    padding-bottom: 7px;
  }

  .admin-tab {
    flex: 0 0 auto !important;
    min-width: max-content !important;
    scroll-snap-align: start;
    white-space: nowrap;
  }

  .admin-card-title-row,
  .v52-pause-layout,
  .defi-member-heading,
  .tournament-category-builder-head {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }

  .v52-pause-actions,
  .admin-organization-actions,
  .defi-admin-application-actions,
  .member-v55-presets {
    width: 100%;
  }

  .v52-inactive-player,
  .v52-inactive-player.v53-warning-only {
    grid-template-columns: 38px minmax(0,1fr) auto !important;
    gap: 7px !important;
    padding: 9px !important;
  }

  .v52-inactive-rank {
    width: 36px !important;
    height: 36px !important;
  }

  .member-v55-preset-help,
  .member-v55-permission-groups,
  .member-v55-protected-grid {
    grid-template-columns: minmax(0,1fr) !important;
  }

  .member-v55-presets .member-v24-preset {
    flex: 1 1 calc(50% - 6px) !important;
    min-width: 0 !important;
  }

  .admin-standings,
  .admin-match-list,
  .v35-task-list,
  .v52-inactive-list,
  .member-list {
    width: 100%;
    max-width: 100%;
  }

  /* ---------------- MODALLER ---------------- */
  .player-modal,
  .defi-offer-modal,
  .v35-discipline-modal,
  .member-admin-modal,
  .tournament-modal {
    padding: 10px !important;
  }

  .player-modal-card,
  .defi-offer-modal-card,
  .v35-discipline-modal-card,
  .member-admin-modal-card,
  .tournament-modal-card {
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    max-height: calc(100dvh - 20px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    border-radius: 17px !important;
    padding: 15px !important;
  }

  /* ---------------- FOOTER ---------------- */
  .footer-wrap {
    width: 100%;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }

  .footer-links {
    width: 100%;
    flex-wrap: wrap !important;
  }

  /* ---------------- İLK YÜKLEME / CLS ---------------- */
  #defiPyramid > .empty {
    width: 100%;
    min-height: 150px;
    display: grid;
    place-items: center;
  }

  #ladderRows > .empty,
  #publicMatchHistory > .empty,
  #tournamentPublic > .empty,
  #organizationPublic > .empty,
  #myTournamentApplications > .empty,
  #myOrganizationRegistrations > .empty {
    min-height: 78px;
    display: grid;
    place-items: center;
  }

  .empty {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  button,
  .btn,
  a {
    -webkit-tap-highlight-color: transparent;
  }

  button,
  .btn {
    max-width: 100%;
  }
}

@media (max-width: 390px) {
  .container {
    padding-left: 10px;
    padding-right: 10px;
  }

  .quick-grid,
  .community-quick-grid {
    grid-template-columns: minmax(0,1fr) !important;
  }

  .organization-count-grid {
    grid-template-columns: minmax(0,1fr) !important;
  }

  .pyramid-player,
  #defiLeagueCard .defi-member-player {
    flex-basis: 72px !important;
    width: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;
  }

  .admin-header .admin-actions-top {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }

  .member-v55-presets .member-v24-preset {
    flex-basis: 100% !important;
  }
}

/* Yatay telefonlarda panel yüksekliğini koru */
@media (max-width: 900px) and (orientation: landscape) {
  .site-header .main-nav {
    max-height: calc(100dvh - 76px) !important;
  }

  .player-modal-card,
  .defi-offer-modal-card,
  .v35-discipline-modal-card,
  .member-admin-modal-card {
    max-height: calc(100dvh - 12px) !important;
  }
}


/* =========================================================
   V58 - MOBİL ÜYE OL / GİRİŞ YAP SEKME DÜZELTMESİ
   ========================================================= */
@media (max-width:820px) {
  .member-auth-card {
    position: relative !important;
    z-index: 20 !important;
    overflow: visible !important;
  }

  .auth-tabs {
    position: relative !important;
    z-index: 40 !important;
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    width: 100% !important;
    min-height: 52px !important;
    margin-bottom: 18px !important;
    pointer-events: auto !important;
    isolation: isolate;
  }

  .auth-tabs::before,
  .auth-tabs::after {
    pointer-events: none !important;
  }

  .auth-tab {
    position: relative !important;
    z-index: 41 !important;
    display: grid !important;
    place-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    padding: 10px 8px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 10px !important;
    text-decoration: none !important;
    line-height: 1.15 !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
    -webkit-user-select: none;
    user-select: none;
  }

  .auth-tab.active {
    pointer-events: auto !important;
  }

  .auth-pane {
    position: relative;
    z-index: 1;
    width: 100%;
  }

  .auth-pane[hidden] {
    display: none !important;
  }

  /* Intro/card overlap can block touch on some mobile WebViews. */
  .member-auth-intro {
    position: relative !important;
    z-index: 1 !important;
  }
}


/* =========================================================
   V59 - MOBİL ÜYELİK ONAY KUTULARI
   V57 genel input yüksekliği checkbox'lara da uygulanıyordu.
   ========================================================= */
@media (max-width:820px) {
  .member-register-form .check-row {
    display: flex !important;
    align-items: flex-start !important;
    gap: 9px !important;
    padding: 10px 11px !important;
  }

  .member-register-form .check-row input[type="checkbox"] {
    display: block !important;
    flex: 0 0 18px !important;
    width: 18px !important;
    min-width: 18px !important;
    max-width: 18px !important;
    height: 18px !important;
    min-height: 18px !important;
    max-height: 18px !important;
    margin: 2px 0 0 !important;
    padding: 0 !important;
    border-radius: 4px !important;
    box-sizing: border-box !important;
    touch-action: manipulation;
    accent-color: var(--green);
  }

  .member-register-form .check-row > span {
    flex: 1 1 auto;
    min-width: 0;
  }
}


/* =========================================================
   V60 - E-POSTA DOĞRULAMA ARAYÜZÜ
   ========================================================= */
.email-verify-panel{
  display:grid;
  gap:12px;
  margin-top:14px;
  padding:18px;
  border:1px solid rgba(15,95,60,.18);
  border-radius:16px;
  background:linear-gradient(145deg,rgba(237,249,241,.96),rgba(255,255,255,.98));
  text-align:center;
}
.email-verify-panel[hidden]{display:none!important}
.email-verify-icon{
  display:grid;
  place-items:center;
  width:52px;
  height:52px;
  margin:0 auto;
  border-radius:50%;
  background:#0f5f3c;
  color:#fff;
  font-size:25px;
  font-weight:900;
}
.email-verify-panel>strong{font-size:18px;color:var(--text)}
.email-verify-panel>p{margin:0;color:var(--muted);font-size:13px;line-height:1.55}
#verifyEmailText{font-weight:900;color:var(--text);overflow-wrap:anywhere}
.email-verify-tips{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
.email-verify-tips span{
  padding:9px 8px;
  border-radius:10px;
  background:rgba(15,95,60,.07);
  color:var(--text);
  font-size:11px;
  font-weight:750;
}
.auth-inline-link{
  border:0;
  background:transparent;
  color:var(--green);
  text-decoration:underline;
  font:inherit;
  font-size:12px;
  font-weight:800;
  cursor:pointer;
  padding:5px;
}
.email-resend-login{
  display:grid;
  gap:8px;
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid var(--line);
}
.email-resend-login>span{
  font-size:11px;
  line-height:1.45;
  color:var(--muted);
}
.email-resend-login .btn-small{
  width:max-content;
  max-width:100%;
  min-height:38px;
  padding:8px 11px;
  font-size:11px;
}
.email-confirm-required-note{
  margin-top:13px!important;
  font-weight:700;
}

@media(max-width:520px){
  .email-verify-tips{grid-template-columns:1fr}
  .email-resend-login .btn-small{width:100%}
}
\n\n/* =========================================================\n   V64 - MOBIL FORM KONTROLLERI SON KONTROL\n   Genel 48px input kuralinin checkbox/radio kontrollerini buyutmesini engeller.\n   ========================================================= */\n@media (max-width:820px) {\n  .admin-form input[type="checkbox"],\n  .admin-form input[type="radio"],\n  .organization-form input[type="checkbox"],\n  .organization-form input[type="radio"],\n  .tournament-application-form input[type="checkbox"],\n  .tournament-application-form input[type="radio"],\n  .member-auth-form input[type="checkbox"],\n  .member-auth-form input[type="radio"],\n  .admin-permission-option input[type="checkbox"],\n  .admin-permission-option input[type="radio"] {\n    width:18px !important;\n    min-width:18px !important;\n    max-width:18px !important;\n    height:18px !important;\n    min-height:18px !important;\n    max-height:18px !important;\n    padding:0 !important;\n    flex:0 0 18px !important;\n    accent-color:var(--green);\n  }\n\n  .tournament-category-choice input[type="checkbox"],\n  .tournament-category-choice input[type="radio"] {\n    min-height:0 !important;\n  }\n}\n