/* =============================================
   Kuaförlerim Video - marka teması (site ile aynı kimlik)
   Orman yeşili zemin, altın vurgular, Manrope + Cormorant Garamond.
   En son yüklenir; diğer CSS dosyalarındaki değişkenleri ve bileşenleri ezer.
   ============================================= */
:root {
  --primary: #D6B270;
  --primary-dark: #9C7430;
  --primary-light: #F4E2B4;
  --secondary: #3FC495;
  --accent: #3FC495;
  --gold: #D6B270;
  --gold-light: #F4E2B4;
  --gold-dark: #9C7430;
  --gold-muted: rgba(214, 178, 112, 0.32);
  --gold-subtle: rgba(214, 178, 112, 0.10);
  --gold-grad: linear-gradient(135deg, #FBEFCB 0%, #D6B270 45%, #9C7430 100%);
  --bg-dark: #06110D;
  --bg-card: #0B1B15;
  --bg-surface: #0F241C;
  --bg-elevated: #132B22;
  --bg-input: #0B1C15;
  --border-color: rgba(255, 255, 255, 0.08);
  --border-light: rgba(255, 255, 255, 0.13);
  --text-primary: #F6F1E7;
  --text-secondary: #C9D3CC;
  --text-muted: #8FA39A;
  --text-inverse: #1A1206;
  --text-gold: #E9CE93;
  --success: #3FC495;
  --danger: #F87171;
  --warning: #FBBF24;
  --info: #7BA7FF;
  --font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --radius-md: 14px;
  --radius-lg: 22px;
  --shadow-md: 0 10px 28px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.55);
}

html, body { background: #06110D; color: var(--text-primary); font-family: var(--font-family); }
body { background: radial-gradient(900px 500px at 100% -10%, rgba(214,178,112,.10), transparent 60%), radial-gradient(700px 500px at -10% 110%, rgba(31,84,68,.40), transparent 60%), #06110D; }
#app { background: transparent; }
.page { background: transparent; }
::selection { background: rgba(214,178,112,.35); }

/* ---------- Üst başlıklar ---------- */
.top-nav { background: rgba(6, 17, 13, 0.82); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-bottom: 1px solid rgba(214,178,112,.14); }
.top-nav .nav-title { font-family: var(--font-serif); font-size: 22px; font-weight: 600; letter-spacing: .01em; color: var(--text-primary); }
.top-nav .nav-btn { color: var(--text-primary); }

/* ---------- Alt sekme çubuğu ---------- */
.tab-bar { background: linear-gradient(180deg, rgba(10, 27, 21, .78), rgba(6, 17, 13, .96)); border-top: 1px solid rgba(214,178,112,.18); box-shadow: 0 -10px 30px rgba(0,0,0,.35); }
.tab-bar .tab-item { color: rgba(201, 211, 204, .62); }
.tab-bar .tab-item .tab-label { font-weight: 700; letter-spacing: .02em; }
.tab-bar .tab-item.active { color: var(--gold-light); }
.tab-bar .tab-item.active .tab-icon { color: var(--gold); filter: drop-shadow(0 0 8px rgba(214,178,112,.45)); }
.tab-bar .tab-item.active::after { content: ""; position: absolute; top: 2px; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px var(--gold); }
.tab-bar .tab-upload .upload-btn { width: 52px; height: 38px; border-radius: 14px; background: var(--gold-grad) !important; color: #1A1206 !important; display: grid; place-items: center; box-shadow: 0 8px 20px -6px rgba(214,178,112,.7), inset 0 1px 0 rgba(255,255,255,.6); border: 0 !important; }
.tab-bar .tab-upload .upload-btn::before, .tab-bar .tab-upload .upload-btn::after { display: none !important; }
.tab-bar .tab-upload .upload-btn i { font-size: 18px; color: #1A1206; }
.tab-bar .badge { background: var(--danger); }

/* ---------- Akış ---------- */
#page-feed, .video-item { background: #000; }
.feed-tabs .feed-tab { font-family: var(--font-family); font-weight: 800; letter-spacing: .01em; color: rgba(246,241,231,.62); text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.feed-tabs .feed-tab.active { color: #fff; }
.feed-tabs .feed-tab.active::after { background: var(--gold) !important; box-shadow: 0 0 10px rgba(214,178,112,.7); }
.video-item::after { content: ""; position: absolute; inset: auto 0 0 0; height: 42%; background: linear-gradient(180deg, transparent, rgba(3, 10, 7, .78)); pointer-events: none; z-index: 1; }
.video-item .video-info, .video-item .video-actions, .video-item .video-progress, .video-item .mute-btn, .video-item .video-time-display { z-index: 3; }
.video-info .user-name { font-weight: 800; }
.video-info .verified-badge { color: var(--gold); }
.video-info .video-tags .tag { color: var(--gold-light); font-weight: 700; }
.video-info .music-bar { color: rgba(246,241,231,.85); }
.follow-btn { background: var(--gold-grad) !important; color: #1A1206 !important; border: 0 !important; font-weight: 800; border-radius: 999px !important; }
.follow-btn.following { background: rgba(255,255,255,.12) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.25) !important; }
.video-actions .action-btn .action-icon { width: 46px; height: 46px; border-radius: 50%; background: rgba(6, 17, 13, .42); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.12); display: grid; place-items: center; }
.video-actions .action-btn .action-icon i { font-size: 20px; color: #fff; }
.video-actions .action-btn.liked .action-icon i { color: #FF5C7A; }
.video-actions .action-btn.kapali .action-icon i { color: rgba(255,255,255,.55); }
.video-actions .action-count { font-weight: 700; font-size: 11.5px; text-shadow: 0 1px 4px rgba(0,0,0,.7); }
.video-actions .profile-disc { border-color: var(--gold) !important; }
.video-progress .progress-bar { background: var(--gold-grad) !important; }
.video-progress .progress-thumb { background: var(--gold-light) !important; }
.video-loading .spinner-ring { border-top-color: var(--gold) !important; }
.double-tap-heart { color: #FF5C7A; }
.speed-indicator { background: rgba(6,17,13,.75) !important; color: var(--gold-light) !important; border: 1px solid rgba(214,178,112,.4); font-weight: 800; }
.hiz-rozet { position: absolute; z-index: 3; top: calc(var(--safe-top) + 58px); left: 14px; padding: 4px 10px; border-radius: 999px; background: rgba(6,17,13,.6); border: 1px solid rgba(214,178,112,.45); color: var(--gold-light); font-size: 12px; font-weight: 800; opacity: 0; transition: opacity .2s; pointer-events: none; }
.hiz-rozet.show { opacity: 1; }

/* ---------- Giriş / kayıt ---------- */
.auth-page { background: radial-gradient(600px 400px at 50% -10%, rgba(214,178,112,.18), transparent 65%), linear-gradient(180deg, #0B2219, #06110D) !important; }
.bg-circle { background: radial-gradient(circle at 34% 28%, rgba(240,211,150,.5), rgba(156,116,48,.2) 60%, transparent 70%) !important; opacity: .45; }
.auth-logo-glow { background: radial-gradient(circle, rgba(214,178,112,.45), transparent 70%) !important; }
.auth-logo { background: transparent !important; box-shadow: none !important; border: 0 !important; }
.auth-logo .app-brand-icon { width: 92px; height: 92px; border-radius: 24%; box-shadow: 0 18px 40px -10px rgba(0,0,0,.7), 0 0 0 1px rgba(214,178,112,.35); }
.auth-tagline { color: var(--text-secondary) !important; font-weight: 600; }
.auth-tagline .tagline-icon { display: none; }
.auth-form .input-group input { background: rgba(255,255,255,.05) !important; border: 1px solid rgba(255,255,255,.14) !important; color: var(--text-primary) !important; border-radius: 14px !important; }
.auth-form .input-group input:focus { border-color: rgba(214,178,112,.65) !important; box-shadow: 0 0 0 3px rgba(214,178,112,.15) !important; }
.btn-auth { background: var(--gold-grad) !important; color: #1A1206 !important; font-weight: 800 !important; border: 0 !important; border-radius: 999px !important; box-shadow: 0 14px 30px -12px rgba(214,178,112,.75) !important; }
.btn-guest { background: rgba(255,255,255,.05) !important; color: var(--text-primary) !important; border: 1px solid rgba(255,255,255,.16) !important; border-radius: 999px !important; font-weight: 700 !important; }
.btn-guest i { color: var(--gold) !important; }
.brand-text, .brand-accent { font-family: var(--font-serif) !important; }
.brand-accent, .auth-terms a { color: var(--gold-light) !important; }
.divider-line { background: rgba(255,255,255,.1) !important; }
.divider-text { color: var(--text-muted) !important; }

/* ---------- Kartlar, listeler, modallar ---------- */
.modal-overlay { background: rgba(2, 8, 6, .62) !important; backdrop-filter: blur(4px); }
.modal-sheet, .comments-sheet, .modal-content { background: linear-gradient(180deg, #10271E, #07140F) !important; border-top: 1px solid rgba(214,178,112,.25) !important; color: var(--text-primary); }
.empty-state i { color: rgba(214,178,112,.55) !important; }
.empty-state h3 { font-family: var(--font-serif); font-size: 24px; font-weight: 600; }
.search-bar, .search-input-wrap { background: rgba(255,255,255,.05) !important; border: 1px solid rgba(255,255,255,.12) !important; }
.search-input-wrap:focus-within { border-color: rgba(214,178,112,.6) !important; }
.category-pill { background: rgba(255,255,255,.05) !important; border: 1px solid rgba(255,255,255,.12) !important; color: var(--text-secondary) !important; }
.category-pill.active { background: var(--gold-grad) !important; color: #1A1206 !important; border-color: transparent !important; }
.trending-tag { background: rgba(214,178,112,.10) !important; color: var(--gold-light) !important; border: 1px solid rgba(214,178,112,.25) !important; }
#page-settings, .settings-section { background: transparent !important; }
.settings-section { border-color: var(--border-color) !important; }

/* ---------- Yükleme ---------- */
.upload-select .upload-icon { background: rgba(214,178,112,.10) !important; color: var(--gold) !important; border: 1px solid rgba(214,178,112,.3) !important; }
.upload-select h3 { font-family: var(--font-serif); font-size: 30px; font-weight: 600; }
.btn-select-video { background: var(--gold-grad) !important; color: #1A1206 !important; border: 0 !important; font-weight: 800 !important; border-radius: 999px !important; }
.btn-camera { background: rgba(255,255,255,.05) !important; color: var(--text-primary) !important; border: 1px solid rgba(255,255,255,.16) !important; border-radius: 999px !important; }
.upload-hints .hint i { color: var(--success) !important; }
.video-meta-card, .upload-form .form-group { border-color: var(--border-color) !important; }
.cat-item.selected { background: var(--gold-grad) !important; color: #1A1206 !important; border-color: transparent !important; }
#btn-publish { background: var(--gold-grad) !important; color: #1A1206 !important; font-weight: 800 !important; border: 0 !important; }
.upload-secenek { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 16px; background: rgba(255,255,255,.04); border: 1px solid var(--border-color); margin-bottom: 10px; }
.upload-secenek .ikon { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: rgba(214,178,112,.12); color: var(--gold); flex: none; }
.upload-secenek .metin { flex: 1; min-width: 0; }
.upload-secenek b { display: block; font-size: 14px; }
.upload-secenek small { color: var(--text-muted); font-size: 12px; }
.kapak-secici { margin-top: 10px; }
.kapak-secici input[type=range] { width: 100%; accent-color: var(--gold); }
.kapak-secici .kapak-onizleme { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.kapak-secici canvas { width: 54px; height: 96px; border-radius: 10px; object-fit: cover; background: #000; border: 1px solid rgba(214,178,112,.4); }
.anahtar-kucuk { position: relative; width: 44px; height: 26px; flex: none; }
.anahtar-kucuk input { opacity: 0; width: 0; height: 0; }
.anahtar-kucuk span { position: absolute; inset: 0; border-radius: 999px; background: rgba(255,255,255,.14); transition: .2s; cursor: pointer; }
.anahtar-kucuk span::after { content: ""; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: .2s; }
.anahtar-kucuk input:checked + span { background: var(--gold); }
.anahtar-kucuk input:checked + span::after { left: 21px; }
.kalite-bilgi { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: rgba(63,196,149,.08); border: 1px solid rgba(63,196,149,.25); color: #BDEBD8; font-size: 12.5px; line-height: 1.5; margin: 6px 0 14px; }
.kalite-bilgi i { color: var(--success); margin-top: 2px; }

/* ---------- Alttan açılan pencereler (üyelik, oynatma ayarları) ---------- */
.giris-sheet { position: fixed; inset: 0; z-index: 4000; pointer-events: none; }
.giris-sheet__perde { position: absolute; inset: 0; background: rgba(2, 8, 6, .6); opacity: 0; transition: opacity .25s; backdrop-filter: blur(3px); }
.giris-sheet__kutu { position: absolute; left: 50%; bottom: 0; width: 100%; max-width: var(--max-width); transform: translate(-50%, 105%); transition: transform .32s cubic-bezier(.22,.8,.24,1);
  background: linear-gradient(180deg, #12301F 0%, #0A1D15 55%, #07140F 100%); border: 1px solid rgba(214,178,112,.3); border-bottom: 0; border-radius: 28px 28px 0 0;
  padding: 12px 22px calc(22px + var(--safe-bottom)); text-align: center; box-shadow: 0 -20px 60px rgba(0,0,0,.6); }
.giris-sheet.acik { pointer-events: auto; }
.giris-sheet.acik .giris-sheet__perde { opacity: 1; }
.giris-sheet.acik .giris-sheet__kutu { transform: translate(-50%, 0); }
.giris-sheet__tutamac { display: block; width: 42px; height: 5px; border-radius: 999px; background: rgba(255,255,255,.22); margin: 0 auto 16px; }
.giris-sheet__ikon { width: 58px; height: 58px; margin: 0 auto 12px; border-radius: 18px; display: grid; place-items: center; background: var(--gold-grad); color: #1A1206; font-size: 22px; box-shadow: 0 12px 28px -10px rgba(214,178,112,.75); }
.giris-sheet h3 { font-family: var(--font-serif); font-size: 26px; font-weight: 600; margin: 0 0 8px; line-height: 1.15; }
.giris-sheet p { color: var(--text-secondary); font-size: 14px; line-height: 1.55; margin: 0 0 18px; }
.giris-sheet .btn-auth, .giris-sheet .btn-guest { width: 100%; padding: 15px; font-size: 15px; margin-bottom: 10px; cursor: pointer; }
.giris-sheet__vazgec { background: none; border: 0; color: var(--text-muted); font-weight: 700; padding: 10px; cursor: pointer; font-size: 14px; }
.oynatma-ayar .giris-sheet__kutu { text-align: left; }
.ayar-baslik { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin: 6px 0 10px; display: flex; align-items: center; gap: 8px; }
.ayar-cipler { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 18px; }
.ayar-cip { padding: 11px 6px; border-radius: 12px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); color: var(--text-primary); font-weight: 800; font-size: 14px; cursor: pointer; }
.ayar-cip.aktif { background: var(--gold-grad); color: #1A1206; border-color: transparent; box-shadow: 0 8px 18px -8px rgba(214,178,112,.7); }
.ayar-liste { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.ayar-satir { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 14px; border-radius: 14px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); color: var(--text-primary); text-align: left; cursor: pointer; }
.ayar-satir b { display: block; font-size: 14.5px; }
.ayar-satir small { color: var(--text-muted); font-size: 12px; }
.ayar-satir i { color: var(--gold); opacity: 0; }
.ayar-satir.aktif { border-color: rgba(214,178,112,.6); background: rgba(214,178,112,.08); }
.ayar-satir.aktif i { opacity: 1; }
.oynatma-ayar .giris-sheet__vazgec { display: block; width: 100%; text-align: center; margin-top: 4px; }

/* ---------- Bildirim (toast) ---------- */
.toast { background: rgba(16, 39, 30, .96) !important; color: var(--text-primary) !important; border: 1px solid rgba(214,178,112,.3) !important; }
/* ===== Ana sayfa düğmesi (akış sol üst) ===== */
.ana-sayfa-btn { position: absolute; top: calc(var(--safe-top) + 10px); left: 12px; z-index: calc(var(--z-sticky) + 1); width: 40px; height: 40px; display: grid; place-items: center; border-radius: 13px; background: rgba(6, 17, 13, .45); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(214,178,112,.4); box-shadow: 0 6px 18px rgba(0,0,0,.35); text-decoration: none; -webkit-tap-highlight-color: transparent; }
.ana-sayfa-btn img { width: 32px; height: 32px; border-radius: 9px; display: block; }
.ana-sayfa-btn span { position: absolute; right: -5px; bottom: -5px; width: 18px; height: 18px; border-radius: 50%; background: var(--gold-grad); box-shadow: 0 0 0 2px #06110D; font-size: 0; }
.ana-sayfa-btn span::before { content: "\f015"; font: 900 9px/18px "Font Awesome 6 Free"; color: #1A1206; display: block; text-align: center; }
.ana-sayfa-btn:active { transform: scale(.94); }

/* ===== K yükleyici: yeşil K, etrafında dönen altın halka ===== */
.kf-yukleyici { position: relative; width: 62px; height: 62px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle, rgba(6,17,13,.55) 55%, transparent 72%); }
.kf-yukleyici::before { content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(214,178,112,0) 0deg, rgba(214,178,112,.12) 90deg, #C79A4C 220deg, #F6E2A8 320deg, #FFF8E2 352deg, rgba(214,178,112,0) 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4.5px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4.5px));
  filter: drop-shadow(0 0 6px rgba(246,226,168,.55)); animation: kfHalka .9s linear infinite; }
.kf-yukleyici img { width: 58%; height: 58%; border-radius: 22%; box-shadow: 0 4px 14px rgba(0,0,0,.45); animation: kfNefes 1.8s ease-in-out infinite; }
.kf-yukleyici.buyuk { width: 84px; height: 84px; }
@keyframes kfHalka { to { transform: rotate(360deg); } }
@keyframes kfNefes { 50% { transform: scale(.92); opacity: .85; } }
.video-loading .spinner-ring { display: none; }
.video-loading { animation: kfBelir .25s ease .35s both; pointer-events: none; }   /* kısa beklemelerde yanıp sönmesin */
@keyframes kfBelir { from { opacity: 0; } to { opacity: 1; } }
.feed-ilk-yukleme { height: 100%; min-height: 70vh; display: grid; place-items: center; }
.upload-status .status-icon.processing { background: none !important; border: 0 !important; box-shadow: none !important; }