/* =========================
   app.css (FINAL / TEK PARÇA)
   - Tek kural tek yerde
   - Header her sayfada aynı (krem)
   - Tema sadece body.page-* ile (EN ALTA)
   - Menü renkleri nav-ukd / nav-elo / nav-cr ile
   ========================= */

/* =========================
   BASE
   ========================= */
:root{
  --bg: #F6F0E6;           /* krem */
  --card: #FFF9F0;
  --ink: #0E1A13;
  --muted: #4C5B52;
  --green: #1E5D3A;        /* koyu yeşil */
  --green-2:#2C7A4A;
  --red: #C63D3D;          /* vurgu kırmızı */
  --amber:#C98A1A;
  --line:#E6D8C7;
  --shadow: 0 10px 30px rgba(0,0,0,.08);
  --radius: 18px;
  --radius-sm: 14px;
}

*{box-sizing:border-box}
html,body{height:100%}

html, body { touch-action: manipulation; }

/* ✅ iOS + Android: otomatik text büyütme kapalı (tek yerde) */
html{
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
  background: var(--bg);
  color: var(--ink);
  overflow-x:hidden;
}

a{color:inherit; text-decoration:none}

/* container + safe-area (iphone notch) */
.container{
  max-width: 1100px;
  margin:0 auto;
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right:max(16px, env(safe-area-inset-right));
}

/* Grid içindeki kartların içerik yüzünden büyümesini engelle (iOS/Safari fix) */
.grid > *, .card { min-width: 0; }

/* =========================
   HEADER (GLOBAL - HER SAYFA AYNI)
   ========================= */
.site-header{
  position:sticky; top:0; z-index:50;

  /* notch/dynamic island garanti */
  padding-top: max(10px, env(safe-area-inset-top));
  padding-top: max(10px, constant(safe-area-inset-top)); /* eski iOS fallback */

  background: rgba(246,240,230,.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 6px 18px rgba(0,0,0,.04);
}


/* başlığın sola yapışmasını kesin engelle */
.site-header .container{
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right:max(16px, env(safe-area-inset-right));
}

.header-row{
  display:flex;
  align-items:center;
  gap:14px;
  padding:12px 0;
}

.brand{display:flex; align-items:center; gap:10px; font-weight:800;}
.brand-logo{width:42px; height:42px; flex-shrink:0;}
.brand-text{letter-spacing:.2px}

.nav{
  display:flex;
  gap:10px;
  margin-left:auto;
  justify-content:flex-end;
}

.nav-link{
  display:inline-flex;
  align-items:center;
  white-space: nowrap;
  padding:10px 12px;
  border-radius: 999px;
  color: var(--muted);
  font-weight:800;
  transition: .15s transform, .15s box-shadow, .15s background;
}
.nav-link:hover{
  background: rgba(0,0,0,.03);
  transform: translateY(-1px);
}

/* Menü renkleri (her sayfada aynı kural) */
.nav-link.nav-ukd{ color: var(--green); }
.nav-link.nav-elo{ color: var(--amber); }
.nav-link.nav-cr { color: var(--red); }

/* Aktif link: renkli “soft” arkaplan + gölge */
.nav-link.is-active{
  box-shadow: var(--shadow);
  border-color: transparent;
}
.nav-link.nav-ukd.is-active{ background: rgba(30,93,58,.10); }
.nav-link.nav-elo.is-active{ background: rgba(201,138,26,.12); }
.nav-link.nav-cr.is-active { background: rgba(198,61,61,.10); }

.auth{display:flex; gap:10px; align-items:center}

/* Hamburger */
.nav-toggle{
  display:none;
  margin-left:auto;
  background: rgba(30,93,58,.08);
  border: 1px solid rgba(30,93,58,.14);
  padding:10px;
  border-radius:12px;
}
.nav-toggle:hover{ background: rgba(30,93,58,.12); }
.nav-toggle:active{ transform: scale(.98); }
.nav-toggle span{
  display:block;
  width:22px; height:2px;
  background: var(--green);
  margin:5px 0;
  border-radius:2px;
}
.nav-toggle:focus{ outline: none; }
.nav-toggle:focus-visible{ outline: 2px solid rgba(30,93,58,.35); outline-offset: 2px; }

/* Mobil menü: default kapalı, JS class ekleyince açılır */
.nav-mobile{
  display:none;
  padding: 8px 0 10px;
  gap: 8px;
}
.nav-mobile.is-open{
  display:flex;
  flex-direction:column;
}
.nav-mobile .nav-link{
  display:block;
  padding: 6px 12px;
  margin: 2px 0;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 900;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.55);
}
.nav-mobile .nav-link.nav-ukd{ background: rgba(30,93,58,.10); color: var(--green); }
.nav-mobile .nav-link.nav-elo{ background: rgba(201,138,26,.12); color: var(--amber); }
.nav-mobile .nav-link.nav-cr { background: rgba(198,61,61,.10); color: var(--red); }
.nav-mobile .nav-link.is-active{
  box-shadow: var(--shadow);
  border-color: transparent;
}
.mobile-auth{margin-top:10px; gap:10px}

/* =========================
   BUTTONS
   ========================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px;
  border-radius: 999px;
  font-weight:800;
  border: 1px solid transparent;
  cursor:pointer;
  user-select:none;
}

.btn-primary{background: var(--green); color:#fff; box-shadow: var(--shadow);}
.btn-primary:hover{background: var(--green-2);}
.btn-ghost{background: transparent; border-color: var(--line); color: var(--green);}
.btn-ghost:hover{background: rgba(30,93,58,.08);}

/* =========================
   HERO + CARDS
   ========================= */
.hero{padding:28px 0 14px;}

.hero-card{
  background: linear-gradient(135deg, rgba(30,93,58,.10), rgba(198,61,61,.08));
  border:1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding:18px;
}

.hero-title{margin:0 0 6px; font-size: 28px; line-height:1.15;}
.hero-sub{margin:0; color:var(--muted); font-weight:600}

.badges{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px}
.badge{
  padding:8px 10px; border-radius:999px; border:1px solid var(--line);
  background: rgba(255,255,255,.55); font-weight:800; color: var(--green);
}

.grid{display:grid; gap:14px;}
.grid-2{grid-template-columns: 1fr 1fr;}

.card{
  background: var(--card);
  border:1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding:16px;
  transition: .15s transform, .15s box-shadow;
}

.card-title{margin:0 0 8px; font-size:18px}
.muted{color:var(--muted)}
.small{font-size: 13px}

/* HOME: 3 kartı farklı renklendir */
.card.card-ukd{
  background: linear-gradient(135deg, rgba(30,93,58,.10), rgba(255,255,255,.75));
  border-color: rgba(30,93,58,.18);
}
.card.card-elo{
  background: linear-gradient(135deg, rgba(201,138,26,.14), rgba(255,255,255,.75));
  border-color: rgba(201,138,26,.22);
}
.card.card-cr{
  background: linear-gradient(135deg, rgba(198,61,61,.10), rgba(255,255,255,.75));
  border-color: rgba(198,61,61,.18);
}
.card.card-ukd:hover,
.card.card-elo:hover,
.card.card-cr:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 34px rgba(0,0,0,.10);
}

/* =========================
   FORMS
   ========================= */
.form-row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}
.field{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
}

.label{font-weight:800; color:var(--green)}

/* ✅ iOS/Android zoom engeli: input/select/textarea >=16px */
input, select, textarea{
  font-size:16px;
}

.input{
  width:100%;
  max-width:100%;
  padding:12px 12px;
  border-radius: 14px;
  border:1px solid var(--line);
  background:#fff;
  font-weight:800;
  outline:none;

  font-size:16px;   /* net */
  line-height:1.2;
}
input.input, select.input, textarea.input{ width:100%; max-width:100%; }

.input:focus{
  border-color: rgba(30,93,58,.55);
  box-shadow: 0 0 0 4px rgba(30,93,58,.10);
}

.help{color:var(--muted); font-size:12px; font-weight:600}

.tabs{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px}
.tab{
  padding:10px 12px; border-radius:999px; border:1px solid var(--line);
  font-weight:900; color:var(--green);
  background: rgba(255,255,255,.55);
}
.tab.is-active{background: var(--green); color:#fff; border-color: transparent;}

/* Inline uyarı */
.inline-alert{
  display:none;
  margin-top:8px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(198,61,61,.28);
  background: rgba(198,61,61,.10);
  color: var(--red);
  font-weight:900;
  font-size:13px;
}
.inline-alert.is-show{ display:block; }

/* invalid input vurgusu */
.input.is-invalid{
  border-color: rgba(198,61,61,.55) !important;
  box-shadow: 0 0 0 4px rgba(198,61,61,.10) !important;
}

/* =========================
   ROUNDS UI (UKD/ELO)
   ========================= */
.rounds{display:flex; flex-direction:column; gap:10px; margin-top:12px}

.round{
  border:1px solid var(--line);
  background:#fff;
  border-radius: var(--radius-sm);
  padding:12px;
}

.round-head{display:flex; justify-content:space-between; align-items:center; gap:10px}
.round-no{font-weight:900; color:var(--green)}
.round-actions{display:flex; gap:8px; align-items:center}

.icon-btn{
  width:36px; height:36px; border-radius:12px; border:1px solid var(--line);
  background: rgba(246,240,230,.7);
  cursor:pointer;
}
.icon-btn:hover{background: rgba(30,93,58,.08);}

.round-body{display:grid; grid-template-columns: 1.2fr 1fr; gap:10px; margin-top:10px}
.rounds + .kpi-panel{ margin-top: 16px; }

.round-row{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.round-title{
  font-weight:950;
  color: var(--green);
  display:flex;
  align-items:center;
  gap:8px;
  min-width:110px;
}
.round-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px; height:32px;
  border-radius:999px;
  border:2px solid var(--line);
  background: rgba(30,93,58,.08);
}
.round .opp{ width:180px; }

.result-picker{
  margin-left:auto;
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
}

.pill{
  padding:12px 14px;
  border-radius:999px;
  border:2px solid var(--line);
  background:#fff;
  font-weight:950;
  cursor:pointer;
  min-width:56px;
  text-align:center;
  transition: .15s transform, .15s box-shadow, .15s border-color;
}
.pill:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(0,0,0,.08);
}
.pill[data-r="1"]{
  border-color: rgba(30,93,58,.35);
  background: rgba(30,93,58,.10);
  color: var(--green);
}
.pill[data-r="0.5"]{
  border-color: rgba(201,138,26,.35);
  background: rgba(201,138,26,.12);
  color: var(--amber);
}
.pill[data-r="0"]{
  border-color: rgba(198,61,61,.35);
  background: rgba(198,61,61,.12);
  color: var(--red);
}

.pill.is-active{
  transform: translateY(-1px);
  color:#fff !important;
  border-color: transparent !important;
  box-shadow: 0 14px 26px rgba(0,0,0,.14);
}
.pill[data-r="1"].is-active{ background: var(--green) !important; }
.pill[data-r="0.5"].is-active{ background: var(--amber) !important; }
.pill[data-r="0"].is-active{ background: var(--red) !important; }
.pill:active{ transform: translateY(0px) scale(0.98); }

.pill-add{
  border-color: rgba(30,93,58,.35);
  background: rgba(30,93,58,.08);
  color: var(--green);
  min-width:auto;
}

.round-tools{
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
  margin-top:12px;
}
.btn-add-round{ padding:12px 16px; }

/* Summary bar */
.summary-bar{
  position: sticky; bottom: 10px; z-index: 40;
  display:flex; gap:12px; flex-wrap:wrap; align-items:center; justify-content:space-between;
  background: rgba(255,249,240,.95);
  border:1px solid var(--line);
  border-radius: 999px;
  padding:10px 12px;
  box-shadow: var(--shadow);
  margin-top:14px;
}
.summary-items{display:flex; gap:12px; flex-wrap:wrap; align-items:center}
.kpi{display:flex; flex-direction:column; gap:2px; min-width:100px}
.kpi .k{font-size:12px; color:var(--muted); font-weight:800}
.kpi .v{font-size:16px; font-weight:950}
.delta.plus{color: var(--green)}
.delta.minus{color: var(--red)}
.actions{display:flex; gap:10px; align-items:center; flex-wrap:wrap}

/* =========================
   TOAST (tek yerde + safe-area)
   ========================= */
.toast{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(16px + env(safe-area-inset-bottom));
  background: rgba(14,26,19,.92);
  color:#fff;
  padding:12px 14px;
  border-radius: 999px;
  font-weight:800;
  font-size:14px;
  opacity:0;
  pointer-events:none;
  transition: .2s;
  max-width: min(520px, calc(100% - 24px));
}
.toast.show{opacity:1}

/* =========================
   FOOTER (GLOBAL) — daha kibar (FINAL)
   ========================= */
.site-footer{
  border-top: 1px solid var(--line);
  margin-top: 28px;
  padding: 14px 0 18px;
  background: rgba(255,255,255,.25);
}

.footer-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.footer-copy{
  font-size:12px;
  line-height:1.2;
  font-weight:600;
  color: var(--muted);
  letter-spacing:.2px;
}

.footer-copy .brand-name{
  font-weight:700;
  color: var(--ink);
  opacity:.85;
}

.footer-links{
  display:flex;
  gap:10px;
  font-size:12px;
  font-weight:600;
  opacity:.65;
}

/* DARK PAGES (UKD/ELO/CR): sadece renk override */
body.page-ukd .site-footer,
body.page-elo .site-footer,
body.page-cr  .site-footer{
  background: transparent !important;
  border-top: 1px solid rgba(255,255,255,.12) !important;
}

body.page-ukd .footer-copy,
body.page-elo .footer-copy,
body.page-cr  .footer-copy{
  color: rgba(255,255,255,.70) !important;
}

body.page-ukd .footer-copy .brand-name,
body.page-elo .footer-copy .brand-name,
body.page-cr  .footer-copy .brand-name{
  color: rgba(255,255,255,.90) !important;
}

/* =========================
   CHESS-RESULTS UI (tablo + kartlar)
   ========================= */
.cr-fide a,
.fide-link{
  color: var(--green);
  font-weight: 900;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cr-fide a:hover,
.fide-link:hover { opacity: .85; }

.cr-msg{
  margin-top:12px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--line);
  background: rgba(30,93,58,.08);
  font-weight:800;
  color: var(--green);
  display:none;
}
.cr-msg.is-err{ background: rgba(198,61,61,.10); color: var(--red); }

#cr_table_wrap{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  max-width:100%;
  min-width:0;
}
.cr-table{
  width:100%;
  min-width: 760px;
  border-collapse: collapse;
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
}
.cr-table th,.cr-table td{
  text-align:left;
  padding:10px;
  border-bottom:1px solid var(--line);
  font-weight:800;
}
.cr-table th{ color: var(--green); background: rgba(246,240,230,.55); }
.cr-table td{ font-weight:700; color: var(--ink); }
.cr-table tr:last-child td{ border-bottom:0; }

.cr-table-scroll{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  border-radius: 14px;
}

.delta-tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:3px 8px;
  border-radius:999px;
  border:1px solid var(--line);
  font-weight:900;
  font-size:12px;
  margin-left:10px;
  background: rgba(0,0,0,.02);
}
.delta-tag.pos{ color: var(--green); background: rgba(30,93,58,.08); }
.delta-tag.neg{ color: var(--red);   background: rgba(198,61,61,.10); }
.delta-tag.neu{ color: #b36b00;      background: rgba(255,170,0,.12); }

.btn-xs{
  padding:6px 10px;
  border-radius:12px;
  font-weight:900;
}

.cr-selected-card{
  background: linear-gradient(135deg, rgba(30,93,58,.10), rgba(255,255,255,.65));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  max-width:100%;
  min-width:0;
}
.cr-selected-card .name{
  font-weight: 950;
  font-size: 18px;
  margin-top: 4px;
}
.cr-selected-card .meta{ margin-top: 6px; }

/* KPI panels (UKD/ELO/CR ortak) */
.kpi-panels{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 14px;
}
.kpi-panel{
  background:#fff;
  border:1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px;
}
.kpi-panel .panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}
.kpi-panel .panel-title{
  font-weight: 950;
  color: var(--green);
  margin:0;
}
.kpi-panel .summary-items{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:12px;
  margin-top: 14px;
}
.kpi-panel .kpi{
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px;
  background: rgba(246,240,230,.35);
  min-width:0;
}
.kpi-panel .kpi .k{
  font-size:12px;
  font-weight:900;
}
.kpi-panel .kpi .v{
  font-size:22px;
  font-weight:950;
  margin-top:4px;
}

/* Chess-results round cards */
.cr-rounds{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top: 12px;
}

.cr-round{
  background:#fff;
  border:1px solid var(--line);
  border-radius: var(--radius-sm);
  padding:12px;
  box-shadow: 0 8px 18px rgba(0,0,0,.05);
}

.cr-round-head{
  display:grid;
  grid-template-columns: 44px 1fr 72px;
  gap:12px;
  align-items:center;
}

.cr-round-badge{
  width:44px;
  height:44px;
  border-radius:999px;
  border:2px solid var(--line);
  background: rgba(30,93,58,.08);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:950;
  color: var(--green);
}

.cr-opp-name{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  font-weight:950;
}

.cr-opp-meta{
  margin-top:6px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  color: var(--muted);
  font-weight:800;
  font-size:13px;
}

.cr-meta-item b{
  color: var(--ink);
  font-weight:950;
}

.cr-result{
  text-align:right;
}
.cr-result-label{
  font-size:12px;
  color: var(--muted);
  font-weight:800;
}
.cr-result-val{
  margin-top:4px;
  font-size:18px;
  font-weight:950;
  color: var(--ink);
}

.cr-round-foot{
  margin-top:12px;
  padding-top:12px;
  border-top:1px dashed var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.cr-pick-label{
  font-weight:900;
  color: var(--green);
}

.cr-picks{
  display:flex;
  gap:8px;
  align-items:center;
}

.cr-muted{
  color: var(--muted);
  font-weight:800;
  font-size:13px;
}

.cr-muaf{
  display:inline-flex;
  align-items:center;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid var(--line);
  color: var(--muted);
  font-weight:900;
  font-size:12px;
  background: rgba(246,240,230,.55);
}

.delta-badges{ display:inline-flex; gap:8px; align-items:center; }
.delta-badge{
  display:inline-flex;
  align-items:center;
  padding:3px 8px;
  border-radius:999px;
  border:1px solid var(--line);
  font-weight:950;
  font-size:12px;
  background: rgba(0,0,0,.02);
}
.delta-badge.pos{ color: var(--green); background: rgba(30,93,58,.08); }
.delta-badge.neg{ color: var(--red);   background: rgba(198,61,61,.10); }
.delta-badge.neu{ color: #b36b00;      background: rgba(255,170,0,.12); }
.delta-badge.is-ukd{ box-shadow: inset 0 0 0 1px rgba(30,93,58,.10); }
.delta-badge.is-elo{ box-shadow: inset 0 0 0 1px rgba(198,61,61,.08); }

/* =========================
   RESPONSIVE
   ========================= */
@media (max-width: 920px){
  .nav{display:none}
  .auth{display:none}
  .nav-toggle{display:block}

  .grid-2{grid-template-columns: 1fr}
  .form-row{ grid-template-columns: 1fr; }
  .round-body{grid-template-columns: 1fr}
  .result-picker{justify-content:flex-start; margin-left:0;}
  .round .opp{ width:100%; }

  .kpi-panels{ grid-template-columns: 1fr; }
  .kpi-panel .summary-items{ grid-template-columns: 1fr; }

  .nav-mobile.is-open{
    gap: 6px;
    padding: 6px 0 10px;
  }
  .nav-mobile .nav-link{
    padding: 8px 10px;
    font-size: 16px;
    line-height: 1.2;
  }
}

@media (max-width: 520px){
  .header-row{ padding:10px 0; gap:10px; }
  .brand-logo{ width:34px; height:34px; }
  .brand-text{ font-size:16px; }

  .hero{ padding:18px 0 10px; }
  .hero-card{ padding:14px; }
  .hero-title{ font-size:22px; }
  .hero-sub{ font-size:14px; line-height:1.35; }

  .actions .btn{ width:100%; justify-content:center; }
  .btn{ padding:12px 14px; }
  .card{ padding:14px; }
  .round{ padding:10px; }

  .round-title{ min-width:0; width:100%; justify-content:flex-start; }
  .result-picker{ width:100%; justify-content:flex-start; gap:8px; }
  .pill{ min-width:48px; padding:10px 10px; }
  .pill-add{ width:100%; justify-content:center; }

  /* Mobilde sayfa uzamasın: + sadece SON turda kalsın */
  .round:not(:last-child) .pill-add{ display:none; }

  select.input{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* uzun sayfa hissi azalır */
  .summary-bar{ position: static; border-radius: var(--radius); }

  /* CR cards mobile */
  .cr-round-head{
    grid-template-columns: 44px 1fr;
    grid-template-rows: auto auto;
    align-items:start;
  }
  .cr-result{
    grid-column: 1 / -1;
    text-align:left;
    margin-top:6px;
    display:flex;
    align-items:center;
    gap:10px;
  }
  .cr-round-foot{
    flex-direction:column;
    align-items:stretch;
  }
  .cr-picks{
    justify-content:space-between;
  }
  .cr-picks .btn-xs{
    flex: 1 1 0;
    justify-content:center;
  }

  /* SADECE MOBİL: UKD/ELO tur satırı 2 satır layout */
  .calc-root[data-mode="ukd"] .form-row,
  .calc-root[data-mode="elo"] .form-row{
    grid-template-columns: 1fr 1fr;
    gap:10px;
    align-items:end;
  }

  .calc-root[data-mode="ukd"] .actions .btn,
  .calc-root[data-mode="elo"] .actions .btn{
    width: 100% !important;
    white-space: nowrap;
    font-size: 12.5px;
    padding: 10px 10px;
    line-height: 1.1;
  }

  .calc-root[data-mode="ukd"] .round-row,
  .calc-root[data-mode="elo"] .round-row{
    display:flex;
    flex-wrap: wrap;
    gap:8px;
    align-items:center;
  }

  .calc-root[data-mode="ukd"] .round-title,
  .calc-root[data-mode="elo"] .round-title{
    flex: 0 0 auto;
    min-width: auto;
    width: auto;
    font-size: 14px;
  }

  .calc-root[data-mode="ukd"] .round .opp,
  .calc-root[data-mode="elo"] .round .opp{
    flex: 1 1 160px;
    min-width: 140px;
    width: auto;
  }

  .calc-root[data-mode="ukd"] .result-picker,
  .calc-root[data-mode="elo"] .result-picker{
    width: 100%;
    margin-left: 0;
    display:flex;
    justify-content: space-between;
    gap:8px;
    flex-wrap: nowrap;
  }

  .calc-root[data-mode="ukd"] .pill,
  .calc-root[data-mode="elo"] .pill{
    flex: 1 1 0;
    min-width: 0;
    padding: 10px 0;
    font-size: 16px;
  }

  .calc-root[data-mode="ukd"] .pill-add,
  .calc-root[data-mode="elo"] .pill-add{
    flex: 1 1 0;
    min-width: 0;
    padding: 10px 0;
    font-size: 0 !important;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  .calc-root[data-mode="ukd"] .pill-add::before,
  .calc-root[data-mode="elo"] .pill-add::before{
    content:"+";
    font-size: 16px;
    font-weight: 950;
    line-height: 1;
    color: var(--green);
  }

  .calc-root[data-mode="ukd"] .kpi-panel .summary-items,
  .calc-root[data-mode="elo"] .kpi-panel .summary-items{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:10px;
  }

  /* ✅ son garanti: mobilde input kesin 16px */
  input, select, textarea,
  .input{
    font-size:16px !important;
  }
}

/* =========================
   THEMES (EN ALTA) — SADECE BODY PAGE CLASS
   Header her sayfada aynı kalır.
   ========================= */

/* UKD - yeşil arkaplan */
body.page-ukd{
  background:
    radial-gradient(1200px 700px at 50% 15%, rgba(90,160,110,.22), transparent 60%),
    radial-gradient(900px 600px at 50% 75%, rgba(40,110,70,.18), transparent 65%),
    linear-gradient(180deg,#0b1611 0%,#0f1f16 50%,#0b1611 100%) !important;
}

/* ELO - altın arkaplan */
body.page-elo{
  background:
    radial-gradient(1200px 700px at 50% 12%, rgba(255,225,150,.30), transparent 60%),
    radial-gradient(900px 600px at 50% 78%, rgba(235,190,95,.20), transparent 65%),
    linear-gradient(180deg,#0f0d06 0%, #151105 50%, #0f0d06 100%) !important;
}

/* CR - kırmızı arkaplan */
body.page-cr{
  background:
    radial-gradient(1200px 700px at 50% 12%, rgba(198,61,61,.26), transparent 60%),
    radial-gradient(900px 600px at 50% 78%, rgba(120,35,35,.18), transparent 65%),
    linear-gradient(180deg,#120707 0%, #1a0b0b 50%, #120707 100%) !important;
}

/* Hero kart temaları */
body.page-ukd .hero-card{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(10px);
}
body.page-ukd .hero-title,
body.page-ukd .hero-sub{ color: rgba(245,247,245,.92); }

body.page-elo .hero-card{
  background: linear-gradient(135deg, rgba(255,225,155,.22), rgba(220,175,85,.14));
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(10px);
}
body.page-elo .hero-title,
body.page-elo .hero-sub{ color: rgba(245,246,240,.92); }

body.page-cr .hero-card{
  background: linear-gradient(135deg, rgba(198,61,61,.22), rgba(60,20,20,.14));
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(10px);
}
body.page-cr .hero-title,
body.page-cr .hero-sub{ color: rgba(245,246,240,.92); }

/* Dark pages footer: arkaplanın parçası gibi */
body.page-ukd .site-footer,
body.page-elo .site-footer,
body.page-cr  .site-footer{
  background: transparent !important;
  border-top: 1px solid rgba(255,255,255,.12) !important;
}

body.page-ukd .footer-copy,
body.page-elo .footer-copy,
body.page-cr  .footer-copy{
  color: rgba(255,255,255,.72) !important;
}
body.page-ukd .footer-copy .brand-name,
body.page-elo .footer-copy .brand-name,
body.page-cr  .footer-copy .brand-name{
  color: rgba(255,255,255,.90) !important;
}
body.page-ukd .footer-links a,
body.page-elo .footer-links a,
body.page-cr  .footer-links a{
  color: rgba(255,255,255,.78) !important;
}

/* =========================
   CR: UKD gibi ince + geniş (daha az boşluk)
   ========================= */

/* CR ana kartın iç paddingini biraz azalt */
body.page-cr [data-cr-root]{ padding: 14px; }

/* Round kartları: boşlukları sıkılaştır */
.cr-rounds{ gap:10px; }
.cr-round{
  padding:10px;
  box-shadow: 0 6px 14px rgba(0,0,0,.045);
}

/* Üst satır daha kompakt */
.cr-round-head{
  grid-template-columns: 40px 1fr 64px;
  gap:10px;
}

/* Badge biraz küçülsün */
.cr-round-badge{
  width:40px; height:40px;
  font-size: 14px;
}

/* İsim + meta boşlukları */
.cr-opp-meta{ margin-top:4px; gap:10px; font-size:12.5px; }
.cr-result-val{ font-size:16px; margin-top:2px; }

/* Alt bölüm: daha az nefes */
.cr-round-foot{
  margin-top:10px;
  padding-top:10px;
}

/* Tahmin butonları: tek sırada tam yayılsın */
.cr-picks{ width:100%; }
.cr-picks .pill{
  flex: 1 1 0;
  min-width: 0;
  padding: 12px 0;
}

/* Mobilde de aynı mantık */
@media (max-width: 520px){
  .cr-picks .pill{
    padding: 14px 0;
    font-size: 18px;
    min-height: 52px;
  }
}

/* =========================
   SONUÇ (CR) — daha belirgin (label küçük + değer pill)
   ========================= */
.cr-result{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:4px;
  min-width:72px;
}

.cr-result-label{
  font-size:11px;
  letter-spacing:.3px;
  text-transform:uppercase;
  color: var(--muted);
  font-weight:900;
  opacity:.85;
}

.cr-result-val{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:44px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background: rgba(246,240,230,.75);
  font-size:20px;
  line-height:1;
  font-weight:950;
  color: var(--ink);
  box-shadow: 0 6px 14px rgba(0,0,0,.06);
}

/* Opsiyonel: sonuç tipine göre renk (HTML'de class verince çalışır)
   <div class="cr-result-val is-win">1</div> gibi */
.cr-result-val.is-win { background: rgba(30,93,58,.12); color: var(--green); border-color: rgba(30,93,58,.20); }
.cr-result-val.is-draw{ background: rgba(201,138,26,.14); color: var(--amber); border-color: rgba(201,138,26,.22); }
.cr-result-val.is-loss{ background: rgba(198,61,61,.12); color: var(--red); border-color: rgba(198,61,61,.20); }
.cr-result-val.is-na  { opacity:.75; }

/* Mobile: Sonuç satırı daha okunur (label solda, pill sağda) */
@media (max-width: 520px){
  .cr-result{
    width:100%;
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-top:6px;
  }
  .cr-result-label{ font-size:12px; }
  .cr-result-val{ font-size:22px; padding:8px 12px; min-width:56px; }
}