/* =========================================================
   ADS Squash - Uyelik, profil ve video galerisi sayfalari
   ========================================================= */

.m-page {
  --m-primary: #973131;
  --m-primary-dark: #7a2525;
  --m-primary-soft: #f6e9e7;
  --m-gold: #E0A75E;
  --m-gold-soft: #fbf1e3;
  --m-gold-text: #8a5714;
  --m-surface: #ffffff;
  --m-surface-2: #f7f5f2;
  --m-border: #e6e1db;
  --m-text: #221c1a;
  --m-text-2: #4e4643;
  --m-muted: #7b726e;
  --m-success: #16803c;
  --m-success-soft: #e7f5ec;
  --m-danger: #c62f2f;
  --m-danger-soft: #fdecec;
  --m-info: #2456c9;
  --m-info-soft: #e8effd;
  --m-radius: 16px;
  --m-radius-sm: 10px;
  --m-shadow: 0 1px 3px rgba(34, 28, 26, .06), 0 8px 24px -12px rgba(34, 28, 26, .12);

  width: 100%;
  max-width: var(--container, 1240px);
  margin: 2.5rem auto 4rem;
  padding: 0 20px;
  font-family: var(--font-body, 'Inter', system-ui, sans-serif);
  color: var(--m-text);
  line-height: 1.55;
}

.m-page-wide { max-width: var(--container, 1240px); }

.m-page p { margin-top: 0; }
.m-page a { color: inherit; }
.m-page img { display: block; max-width: 100%; }
.m-page [hidden] { display: none !important; }


.m-page h1, .m-page h2, .m-page h3 { font-family: var(--font-body, 'Inter', system-ui, sans-serif); line-height: 1.25; }
.m-page-head h1, .m-auth-card h1, .m-auth-side h2, .m-hero-body h1, .m-auth-done h1 { font-family: var(--font-display); font-weight: 800; letter-spacing: .01em; text-transform: uppercase; line-height: 1; }

/* ---------- Basliklar ---------- */
.m-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 1.75rem; }
.m-page-head h1 { font-size: clamp(2.2rem, 4vw, 3rem); }
.m-page-head h1 span { color: var(--m-primary); }
.m-page-head p { margin-top: .35rem; color: var(--m-muted); }
.m-back { display: inline-flex; align-items: center; gap: 4px; margin-bottom: .5rem; color: var(--m-muted) !important; font-size: .9rem; font-weight: 500; }
.m-back:hover { color: var(--m-primary) !important; }

/* ---------- Kart ---------- */
.m-card { background: var(--m-surface); border: 1px solid var(--m-border); border-radius: var(--m-radius); box-shadow: var(--m-shadow); }
.m-card + .m-card { margin-top: 1.25rem; }
.m-card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; padding: 1.1rem 1.4rem; border-bottom: 1px solid var(--m-border); }
.m-card-head h2 { font-size: 1.05rem; font-weight: 600; display: flex; align-items: center; gap: .5rem; }
.m-card-head h2 i { color: var(--m-primary); }
.m-card-head p { color: var(--m-muted); font-size: .85rem; }
.m-card-body { padding: 1.4rem; }

/* ---------- Form ---------- */
.m-form { display: flex; flex-direction: column; gap: 1.1rem; }
.m-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem 1.25rem; }
.m-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem 1.25rem; }
.m-field { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.m-label { font-size: .88rem; font-weight: 600; color: var(--m-text); }
.m-label .m-req { color: var(--m-primary); }
.m-hint { font-size: .8rem; color: var(--m-muted); }

.m-input, .m-select, .m-textarea {
  width: 100%;
  min-height: 46px;
  padding: .65rem .9rem;
  border: 1.5px solid var(--m-border);
  border-radius: var(--m-radius-sm);
  background: var(--m-surface);
  color: var(--m-text);
  font: inherit;
  font-size: .95rem;
  transition: border-color .2s, box-shadow .2s;
}
.m-textarea { min-height: 110px; resize: vertical; line-height: 1.6; }
.m-input:hover, .m-select:hover, .m-textarea:hover { border-color: #d4ccc4; }
.m-input:focus, .m-select:focus, .m-textarea:focus { outline: none; border-color: var(--m-primary); box-shadow: 0 0 0 4px rgba(151, 49, 49, .14); }
.m-input[readonly] { background: var(--m-surface-2); color: var(--m-muted); }
.m-input-suffix { position: relative; }
.m-input-suffix .m-input { padding-right: 3rem; }
.m-input-suffix span { position: absolute; right: .9rem; top: 50%; transform: translateY(-50%); color: var(--m-muted); font-size: .85rem; pointer-events: none; }
.m-input-icon { position: relative; }
.m-input-icon > i { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); color: var(--m-muted); font-size: 1.1rem; pointer-events: none; }
.m-input-icon > .m-input { padding-left: 2.6rem; }
.m-input-icon > .m-input:has(+ .m-eye) { padding-right: 2.8rem; }
.m-eye { position: absolute; right: .4rem; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border: 0; border-radius: 8px; background: none; color: var(--m-muted); font-size: 1.1rem; cursor: pointer; display: grid; place-items: center; }
.m-eye:hover { color: var(--m-text); background: var(--m-surface-2); }

.m-check { display: inline-flex; align-items: center; gap: .55rem; font-size: .9rem; color: var(--m-text-2); cursor: pointer; }
.m-check input { width: 18px; height: 18px; accent-color: var(--m-primary); }

.m-segmented { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 12px; background: var(--m-surface-2); border: 1px solid var(--m-border); }
.m-segmented label { position: relative; cursor: pointer; }
.m-segmented input { position: absolute; opacity: 0; pointer-events: none; }
.m-segmented span { display: block; padding: .45rem .9rem; border-radius: 9px; font-size: .88rem; font-weight: 500; color: var(--m-text-2); transition: background .2s, color .2s; }
.m-segmented input:checked + span { background: var(--m-surface); color: var(--m-primary); box-shadow: 0 1px 3px rgba(0, 0, 0, .1); font-weight: 600; }
.m-segmented input:focus-visible + span { outline: 2px solid var(--m-primary); outline-offset: 2px; }

/* Uyelik turu secimi (kayit) */
.m-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.m-choices-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.m-choice { position: relative; cursor: pointer; }
.m-choice input { position: absolute; opacity: 0; pointer-events: none; }
.m-choice span { display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: .85rem .5rem; border: 1.5px solid var(--m-border); border-radius: var(--m-radius-sm); text-align: center; font-size: .88rem; font-weight: 600; color: var(--m-text-2); transition: border-color .2s, background .2s, color .2s; }
.m-choice span i { font-size: 1.4rem; color: var(--m-muted); }
.m-choice input:checked + span { border-color: var(--m-primary); background: var(--m-primary-soft); color: var(--m-primary); }
.m-choice input:checked + span i { color: var(--m-primary); }
.m-choice input:focus-visible + span { outline: 2px solid var(--m-primary); outline-offset: 2px; }

/* ---------- Butonlar ---------- */
.m-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 46px;
  padding: 0 1.3rem;
  border: 1.5px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-size: .95rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s, transform .1s;
}
.m-btn:active { transform: translateY(1px); }
.m-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.m-btn i { font-size: 1.15rem; }
.m-btn-primary { background: var(--m-primary); color: #fff !important; }
.m-btn-primary:hover { background: var(--m-primary-dark); }
.m-btn-gold { background: var(--m-gold); color: #3b2410 !important; }
.m-btn-gold:hover { background: #d4974a; }
.m-btn-outline { border-color: var(--m-border); background: var(--m-surface); color: var(--m-text) !important; }
.m-btn-outline:hover { border-color: var(--m-primary); color: var(--m-primary) !important; }
.m-btn-danger { border-color: rgba(198, 47, 47, .3); background: none; color: var(--m-danger) !important; }
.m-btn-danger:hover { background: var(--m-danger-soft); }
.m-btn-sm { min-height: 36px; padding: 0 .95rem; font-size: .85rem; }
.m-btn-block { width: 100%; }
.m-icon-btn { width: 38px; height: 38px; display: inline-grid; place-items: center; border: 0; border-radius: 10px; background: none; color: var(--m-muted); font-size: 1.15rem; cursor: pointer; }
.m-icon-btn:hover { background: var(--m-surface-2); color: var(--m-text); }
.m-icon-btn.is-danger:hover { background: var(--m-danger-soft); color: var(--m-danger); }
.m-actions { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; }

/* ---------- Uyari ---------- */
.m-alert { display: flex; align-items: flex-start; gap: .65rem; padding: .85rem 1rem; border-radius: var(--m-radius-sm); font-size: .92rem; font-weight: 500; }
.m-alert i { font-size: 1.2rem; line-height: 1.3; flex-shrink: 0; }
.m-alert-error { background: var(--m-danger-soft); color: var(--m-danger); }
.m-alert-success { background: var(--m-success-soft); color: var(--m-success); }
.m-alert-info { background: var(--m-info-soft); color: var(--m-info); }
.m-alert-gold { background: var(--m-gold-soft); color: var(--m-gold-text); }
.m-flash { margin-bottom: 1.25rem; }

/* ---------- Rozet ---------- */
.m-badge { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .7rem; border-radius: 999px; font-size: .78rem; font-weight: 600; background: var(--m-gold-soft); color: var(--m-gold-text); }
.m-badge i { font-size: .95rem; }
.m-badge-primary { background: var(--m-primary-soft); color: var(--m-primary); }

/* ---------- Giris / kayit ---------- */
.m-auth { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); max-width: 980px; margin: 0 auto; overflow: hidden; background: var(--m-surface); border-radius: 24px; box-shadow: 0 30px 60px -30px rgba(60, 20, 20, .45); }
.m-auth-side { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; padding: 2.5rem; background: radial-gradient(circle at 20% 0%, #b44a46 0%, var(--m-primary) 45%, #5e1c1c 100%); color: #fff; overflow: hidden; }
.m-auth-side::after { content: ""; position: absolute; right: -90px; bottom: -90px; width: 260px; height: 260px; border-radius: 50%; border: 36px solid rgba(224, 167, 94, .16); }
.m-auth-logo { width: 84px; height: 84px; border-radius: 20px; object-fit: cover; background: #fff; box-shadow: 0 10px 24px rgba(0, 0, 0, .25); }
.m-auth-side h2 { margin-top: 1.5rem; color: #fff; font-size: 2.1rem; }
.m-auth-side h2 span { color: var(--m-gold); }
.m-auth-side > div > p { margin-top: .6rem; color: rgba(255, 255, 255, .78); font-size: .95rem; }
.m-benefits { position: relative; z-index: 1; display: flex; flex-direction: column; gap: .9rem; list-style: none; }
.m-benefits li { display: flex; gap: .75rem; align-items: flex-start; font-size: .92rem; color: rgba(255, 255, 255, .9); }
.m-benefits i { flex-shrink: 0; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: rgba(224, 167, 94, .2); color: var(--m-gold); font-size: 1.05rem; }
.m-auth-card { padding: 2.5rem; }
.m-auth-card h1 { font-size: 2.3rem; }
.m-auth-card > p { margin-top: .3rem; margin-bottom: 1.6rem; color: var(--m-muted); }
.m-auth-card .m-form { gap: 1rem; }
.m-auth-foot { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--m-border); text-align: center; color: var(--m-muted); font-size: .92rem; }
.m-auth-foot a { color: var(--m-primary) !important; font-weight: 600; }
.m-auth-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.m-auth-done { max-width: 560px; margin: 0 auto; padding: 3rem 2.5rem; text-align: center; }
.m-auth-done .m-done-icon { width: 72px; height: 72px; margin: 0 auto 1.25rem; display: grid; place-items: center; border-radius: 50%; background: var(--m-success-soft); color: var(--m-success); font-size: 2.2rem; }
.m-auth-done h1 { font-size: 2.2rem; }
.m-auth-done p { margin: .75rem 0 1.75rem; color: var(--m-text-2); }

/* ---------- Profil ---------- */
.m-hero { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1.75rem; align-items: center; padding: 2rem; border-radius: 24px; background: linear-gradient(120deg, var(--m-primary) 0%, #6d2222 100%); color: #fff; overflow: hidden; box-shadow: 0 24px 50px -28px rgba(60, 20, 20, .6); }
.m-hero::after { content: ""; position: absolute; right: -70px; top: -70px; width: 240px; height: 240px; border-radius: 50%; border: 32px solid rgba(224, 167, 94, .14); pointer-events: none; }
.m-hero-photo { position: relative; z-index: 1; width: 148px; height: 148px; border-radius: 50%; padding: 4px; background: var(--m-gold); flex-shrink: 0; }
.m-hero-photo img, .m-hero-photo .m-initials { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: top; border: 3px solid #fff; }
.m-hero-photo button { all: unset; display: block; width: 100%; height: 100%; cursor: zoom-in; border-radius: 50%; }
.m-initials { display: grid; place-items: center; background: #fff; color: var(--m-primary); font-size: 2.6rem; font-weight: 700; }
.m-hero-body { position: relative; z-index: 1; min-width: 0; }
.m-hero-body h1 { margin-top: .5rem; color: #fff; font-size: clamp(2.2rem, 4vw, 3.2rem); }
.m-hero .m-badge { background: rgba(224, 167, 94, .22); color: var(--m-gold); }
.m-hero-meta { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin-top: .6rem !important; color: rgba(255, 255, 255, .82); font-size: .92rem; }
.m-hero-meta span { display: inline-flex; align-items: center; gap: .35rem; }
.m-hero-bio { margin-top: .9rem !important; max-width: 60ch; color: rgba(255, 255, 255, .9); white-space: pre-line; }
.m-hero-actions { position: relative; z-index: 1; display: flex; flex-direction: column; gap: .6rem; }
.m-hero .m-btn-outline { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .35); color: #fff !important; }
.m-hero .m-btn-outline:hover { background: rgba(255, 255, 255, .16); border-color: #fff; }

.m-profile-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.25rem; margin-top: 1.5rem; align-items: start; }
.m-profile-grid > .m-card + .m-card { margin-top: 0; }
.m-profile-grid .m-span-2 { grid-column: 1 / -1; }

.m-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.25rem; }
.m-fact { display: flex; gap: .75rem; align-items: flex-start; min-width: 0; }
.m-fact > i { flex-shrink: 0; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: var(--m-gold-soft); color: var(--m-gold-text); font-size: 1.1rem; }
.m-fact dt { font-size: .78rem; color: var(--m-muted); }
.m-fact dd { font-weight: 600; overflow-wrap: anywhere; }

.m-list { list-style: none; display: flex; flex-direction: column; }
.m-list li { display: flex; align-items: center; gap: .85rem; padding: .8rem 0; border-bottom: 1px solid var(--m-border); }
.m-list li:last-child { border-bottom: 0; }
.m-list-year { flex-shrink: 0; min-width: 56px; padding: .25rem .5rem; border-radius: 8px; background: var(--m-primary-soft); color: var(--m-primary); font-size: .82rem; font-weight: 700; text-align: center; }
.m-list-main { min-width: 0; flex: 1; }
.m-list-main strong { display: block; font-weight: 600; }
.m-list-main span { color: var(--m-muted); font-size: .85rem; }
.m-empty-note { color: var(--m-muted); font-size: .92rem; }

/* ---------- Fotograf galerisi ---------- */
.m-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .75rem; }
.m-photo { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 12px; background: var(--m-surface-2); }
.m-photo > button { all: unset; display: block; width: 100%; height: 100%; cursor: zoom-in; }
.m-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.m-photo:hover img { transform: scale(1.04); }
.m-photo-tools { position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: .4rem; justify-content: flex-end; padding: .5rem; background: linear-gradient(to top, rgba(0, 0, 0, .65), transparent); }
.m-photo-tools form { margin: 0; }
.m-photo-tools button { display: inline-flex; align-items: center; gap: .3rem; height: 32px; padding: 0 .7rem; border: 0; border-radius: 8px; background: rgba(255, 255, 255, .92); color: var(--m-text); font: inherit; font-size: .78rem; font-weight: 600; cursor: pointer; }
.m-photo-tools button:hover { background: #fff; color: var(--m-primary); }
.m-photo-tools button.is-danger:hover { color: var(--m-danger); }

.m-upload { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem; padding: 1.6rem 1rem; border: 2px dashed #d9d0c7; border-radius: var(--m-radius); background: var(--m-surface-2); text-align: center; color: var(--m-muted); cursor: pointer; transition: border-color .2s, background .2s; }
.m-upload:hover, .m-upload:focus-within { border-color: var(--m-primary); background: var(--m-primary-soft); }
.m-upload i { font-size: 2rem; color: var(--m-primary); }
.m-upload strong { color: var(--m-text); }
.m-upload input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.m-upload-status { font-weight: 600; color: var(--m-primary); }

.m-photo-field { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.m-photo-preview { width: 140px; height: 140px; flex-shrink: 0; border-radius: 50%; overflow: hidden; border: 3px solid var(--m-gold); background: var(--m-surface-2); }
.m-photo-preview img, .m-photo-preview .m-initials { width: 100%; height: 100%; object-fit: cover; object-position: top; font-size: 2rem; }

/* ---------- Sekmeler ---------- */
.m-tabs { display: flex; gap: .35rem; margin-bottom: 1.25rem; padding: .35rem; overflow-x: auto; border-radius: 14px; background: var(--m-surface); border: 1px solid var(--m-border); scrollbar-width: none; }
.m-tabs::-webkit-scrollbar { display: none; }
.m-tab { display: inline-flex; align-items: center; gap: .45rem; padding: .6rem 1rem; border-radius: 10px; color: var(--m-text-2) !important; font-size: .92rem; font-weight: 500; white-space: nowrap; }
.m-tab:hover { background: var(--m-surface-2); }
.m-tab.is-active { background: var(--m-primary); color: #fff !important; }
.m-tab-count { padding: 0 .45rem; border-radius: 999px; background: rgba(0, 0, 0, .08); font-size: .75rem; }
.m-tab.is-active .m-tab-count { background: rgba(255, 255, 255, .22); }

.m-edit-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1.25rem; align-items: start; }
.m-edit-layout > .m-card + .m-card { margin-top: 0; }
.m-form-foot { display: flex; justify-content: flex-end; gap: .75rem; padding: 1rem 1.4rem; border-top: 1px solid var(--m-border); background: var(--m-surface-2); border-radius: 0 0 var(--m-radius) var(--m-radius); }

/* Turnuva satirlari */
.m-rows { display: flex; flex-direction: column; }
.m-row { display: grid; grid-template-columns: minmax(0, 1fr) 110px minmax(0, .7fr) auto; gap: .6rem; align-items: center; padding: .75rem 1.4rem; border-bottom: 1px solid var(--m-border); }
.m-row:last-child { border-bottom: 0; }
.m-row-head { padding-top: .6rem; padding-bottom: .6rem; background: var(--m-surface-2); color: var(--m-muted); font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.m-row-new { background: var(--m-gold-soft); border-radius: 0 0 var(--m-radius) var(--m-radius); }
.m-row .m-input { min-height: 40px; padding: .45rem .7rem; font-size: .9rem; }
.m-row-actions { display: flex; gap: .25rem; justify-content: flex-end; }

/* ---------- Uye listesi ---------- */
.m-toolbar { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-bottom: 1.5rem; }
.m-search { position: relative; flex: 1 1 260px; max-width: 380px; }
.m-search i { position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); color: var(--m-muted); }
.m-search .m-input { padding-left: 2.5rem; border-radius: 999px; }
.m-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.m-chip { display: inline-flex; align-items: center; gap: .35rem; height: 38px; padding: 0 .95rem; border: 1.5px solid var(--m-border); border-radius: 999px; background: var(--m-surface); color: var(--m-text-2); font: inherit; font-size: .88rem; font-weight: 500; cursor: pointer; transition: all .2s; }
.m-chip:hover { border-color: var(--m-primary); color: var(--m-primary); }
.m-chip.is-active { border-color: var(--m-primary); background: var(--m-primary); color: #fff; }
.m-count { margin-left: auto; color: var(--m-muted); font-size: .88rem; }

.m-member-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1.1rem; }
.m-member { display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: 1.6rem 1rem 1.3rem; border: 1px solid var(--m-border); border-radius: var(--m-radius); background: var(--m-surface); text-align: center; box-shadow: var(--m-shadow); transition: transform .25s, box-shadow .25s, border-color .25s; }
.m-member:hover { transform: translateY(-4px); border-color: var(--m-gold); box-shadow: 0 18px 36px -20px rgba(60, 20, 20, .35); }
.m-member-photo { width: 104px; height: 104px; margin-bottom: .6rem; border-radius: 50%; padding: 3px; background: linear-gradient(135deg, var(--m-gold), var(--m-primary)); }
.m-member-photo img, .m-member-photo .m-initials { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: top; border: 3px solid #fff; font-size: 1.8rem; }
.m-member strong { font-size: 1.02rem; font-weight: 600; }
.m-member small { color: var(--m-muted); font-size: .82rem; }

/* ---------- Bos durum ---------- */
.m-empty { display: flex; flex-direction: column; align-items: center; gap: .6rem; padding: 3.5rem 1.5rem; text-align: center; color: var(--m-muted); }
.m-empty > i { display: grid; place-items: center; width: 68px; height: 68px; border-radius: 20px; background: var(--m-gold-soft); color: var(--m-gold-text); font-size: 2rem; }
.m-empty strong { color: var(--m-text); font-size: 1.1rem; }

/* ---------- Video galerisi ---------- */
.m-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin-top: .6rem; font-size: .92rem; }
.m-crumbs a { display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .6rem; border-radius: 8px; color: var(--m-text-2) !important; font-weight: 500; }
.m-crumbs a:hover { background: var(--m-surface); color: var(--m-primary) !important; }
.m-crumbs i.ri-arrow-right-s-line { color: var(--m-muted); }
.m-crumbs .is-current { padding: .25rem .6rem; color: var(--m-primary); font-weight: 600; }

.m-section-title { display: flex; align-items: center; gap: .5rem; margin: 2rem 0 1rem; font-size: 1.05rem; font-weight: 600; }
.m-section-title:first-child { margin-top: 0; }
.m-section-title small { color: var(--m-muted); font-weight: 500; }

.m-folders { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .85rem; }
.m-folder { display: flex; align-items: center; gap: .85rem; padding: 1rem 1.1rem; border: 1px solid var(--m-border); border-radius: 14px; background: var(--m-surface); box-shadow: var(--m-shadow); transition: border-color .2s, transform .2s; }
.m-folder:hover { border-color: var(--m-gold); transform: translateY(-2px); }
.m-folder > i { flex-shrink: 0; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--m-gold-soft); color: var(--m-gold-text); font-size: 1.4rem; }
.m-folder span { min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.m-media { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem; }
.m-media-item { all: unset; box-sizing: border-box; min-width: 0; position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: 14px; background: var(--m-surface); border: 1px solid var(--m-border); box-shadow: var(--m-shadow); cursor: pointer; transition: transform .25s, box-shadow .25s; }
.m-media-item:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -20px rgba(60, 20, 20, .35); }
.m-media-item:focus-visible { outline: 3px solid var(--m-primary); outline-offset: 2px; }
.m-media-thumb { position: relative; aspect-ratio: 16 / 10; background: linear-gradient(135deg, #3a2a28, #1d1514); display: grid; place-items: center; color: rgba(255, 255, 255, .55); font-size: 2.2rem; overflow: hidden; }
.m-media-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.m-media-play { position: absolute; z-index: 1; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: rgba(151, 49, 49, .88); color: #fff; font-size: 1.7rem; box-shadow: 0 6px 20px rgba(0, 0, 0, .35); transition: transform .25s; }
.m-media-item:hover .m-media-play { transform: scale(1.08); }
.m-media-duration { position: absolute; z-index: 1; right: .5rem; bottom: .5rem; padding: .1rem .45rem; border-radius: 6px; background: rgba(0, 0, 0, .7); color: #fff; font-size: .75rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.m-media-name { padding: .7rem .85rem; font-size: .86rem; font-weight: 500; color: var(--m-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Mobil ---------- */
@media (max-width: 900px) {
  .m-auth { grid-template-columns: minmax(0, 1fr); }
  .m-auth-side { padding: 2rem; }
  .m-benefits { display: none; }
  .m-auth-side h2 { margin-top: 1rem; font-size: 1.6rem; }
  .m-hero { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; padding: 2rem 1.25rem; }
  .m-hero-meta { justify-content: center; }
  .m-hero-bio { margin-inline: auto; }
  .m-hero-actions { flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .m-profile-grid, .m-edit-layout { grid-template-columns: minmax(0, 1fr); }
  .m-edit-layout > aside { order: -1; }
}

@media (max-width: 640px) {
  .m-page { margin-top: 1.5rem; padding: 0 16px; }
  .m-auth-card { padding: 1.75rem 1.25rem; }
  .m-grid-2, .m-grid-3, .m-facts { grid-template-columns: minmax(0, 1fr); }
  .m-choices { grid-template-columns: minmax(0, 1fr); }
  .m-choice span { flex-direction: row; justify-content: flex-start; padding: .75rem 1rem; }
  .m-card-body { padding: 1.1rem; }
  .m-card-head { padding: 1rem 1.1rem; }
  .m-card-head p { flex-basis: 100%; }
  .m-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .m-media { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
  .m-media-name { padding: .5rem .6rem; font-size: .78rem; }
  .m-media-play { width: 42px; height: 42px; font-size: 1.3rem; }
  .m-member-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
  .m-member { padding: 1.1rem .5rem 1rem; }
  .m-member-photo { width: 80px; height: 80px; }
  .m-row { grid-template-columns: 96px minmax(0, 1fr); padding: .85rem 1.1rem; }
  .m-row > .m-input:first-of-type { grid-column: 1 / -1; }
  .m-row-head { display: none; }
  .m-row-actions { grid-column: 1 / -1; }
  .m-count { flex-basis: 100%; margin-left: 0; }
  .m-search { max-width: none; }
  .m-form-foot .m-btn { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .m-page * { transition: none !important; animation: none !important; }
}