/* Kurgify — telefon öncelikli koyu tema. Kimlik rengi: mor → pembe. */
:root {
  --zemin: #0e0c15;
  --yuzey: #17141f;
  --yuzey2: #221e2e;
  --yuzey3: #2f2a3e;
  --cizgi: #332d44;
  --yazi: #f5f3fa;
  --yazi2: #ada6c0;
  --yazi3: #736b88;
  --mor: #9b7bff;
  --pembe: #ff4fa3;
  --turkuaz: #22f0ff;
  --gecis: linear-gradient(120deg, #19d9f5 0%, #8a63ff 50%, #ff4fa3 100%);
  --neon-t: 0 0 6px #22f0ffcc, 0 0 18px #22f0ff55;
  --neon-p: 0 0 6px #ff4fa3aa, 0 0 18px #ff4fa344;
  --tehlike: #ff5c6c;
  --sari: #ffd84a;
  --ust-bosluk: env(safe-area-inset-top, 0px);
  --alt-bosluk: env(safe-area-inset-bottom, 0px);
  color-scheme: dark;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--zemin); color: var(--yazi); }
body {
  font: 15px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  overscroll-behavior: none;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; touch-action: manipulation; }
button:disabled { opacity: 0.35; cursor: default; }
input { font: inherit; }
.ikon { display: block; flex: none; }
.bosluk { flex: 1; }

#uygulama { height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }

/* ---------- ana ekran ---------- */
#uygulama.ana {
  overflow-y: auto;
  background:
    repeating-linear-gradient(0deg, #ffffff05 0 1px, transparent 1px 3px),
    radial-gradient(900px 420px at 85% -10%, #ff4fa333, transparent 60%),
    radial-gradient(800px 420px at 0% 0%, #19d9f52a, transparent 60%), var(--zemin);
}
.ana-ust { display: flex; align-items: center; padding: calc(16px + var(--ust-bosluk)) 18px 10px; }
.logo { display: flex; align-items: center; gap: 10px; font-weight: 900; font-size: 24px; letter-spacing: 2px; text-transform: uppercase; text-shadow: 2px 0 #ff4fa3aa, -2px 0 #22f0ffaa; }
.logo img { border-radius: 9px; }
.ana-govde { padding: 6px 18px calc(28px + var(--alt-bosluk)); max-width: 900px; width: 100%; margin: 0 auto; }
.yeni-proje {
  width: 100%; display: flex; align-items: center; gap: 16px; padding: 22px 20px; border-radius: 22px;
  background: var(--gecis); text-align: left; color: #fff; box-shadow: 0 10px 30px #8a63ff40;
}
.yeni-proje:active { transform: scale(0.99); }
.yeni-ikon { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: #ffffff2e; }
.yeni-yazi { display: flex; flex-direction: column; gap: 2px; }
.yeni-yazi b { font-size: 19px; }
.yeni-yazi small { color: #ffffffcc; font-size: 13px; }
.bolum-baslik { margin: 28px 2px 12px; font-weight: 900; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--turkuaz); text-shadow: var(--neon-t); }
.proje-listesi { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.proje-kart { position: relative; background: var(--yuzey); border-radius: 16px; overflow: hidden; border: 1px solid #ffffff08; transition: box-shadow 0.2s, border-color 0.2s; }
.proje-kart:hover { border-color: #22f0ff66; box-shadow: var(--neon-t); }
.kart-ac { display: block; width: 100%; text-align: left; }
.kart-kapak { aspect-ratio: 1 / 1; background: var(--yuzey2); display: grid; place-items: center; color: var(--yazi3); overflow: hidden; }
.kart-kapak img { width: 100%; height: 100%; object-fit: cover; }
.kart-bilgi { padding: 8px 10px 10px; }
.kart-ad { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 22px; }
.kart-alt { color: var(--yazi3); font-size: 12px; }
.kart-menu { position: absolute; right: 2px; bottom: 8px; width: 34px; height: 34px; display: grid; place-items: center; color: var(--yazi2); }
.bos-liste { grid-column: 1 / -1; color: var(--yazi3); padding: 30px 0; text-align: center; }
.alan-bilgi { margin-top: 26px; color: var(--yazi3); font-size: 12px; text-align: center; }
.uyumsuz { padding: 40px 24px; text-align: center; }
.uyumsuz p { color: var(--yazi2); }

/* ---------- editör ---------- */
#uygulama.editor { background: var(--zemin); }
.editor-ust {
  display: flex; align-items: center; gap: 8px; padding: calc(6px + var(--ust-bosluk)) 10px 6px;
  min-height: calc(52px + var(--ust-bosluk)); flex: none;
}
.ikon-d { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; color: var(--yazi); }
.ikon-d:active { background: var(--yuzey2); }
.proje-ad { font-weight: 600; font-size: 14px; max-width: 34vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--yazi2); }
.cozunurluk-d { padding: 7px 11px; border-radius: 99px; border: 1px solid var(--cizgi); font-size: 12px; font-weight: 700; color: var(--yazi2); }
.disa-d {
  display: flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 99px; font-weight: 700; font-size: 14px;
  background: var(--gecis); color: #fff; box-shadow: 0 4px 14px #a35cff55;
}
.disa-d:active { filter: brightness(0.92); }

.onizleme-alan { flex: 1; min-height: 120px; position: relative; display: grid; place-items: center; overflow: hidden; background: #08070c; touch-action: none; }
.onizleme-tuval { display: block; background: #000; box-shadow: 0 0 0 1px #ffffff14, 0 8px 30px #0008; border-radius: 2px; }
.bos-mesaj {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  color: var(--yazi2); background: var(--zemin);
}
/* önizlemede seçili klibin taşıma kutusu */
.dk { position: absolute; display: none; border: 1.5px solid var(--turkuaz); box-shadow: var(--neon-t); pointer-events: none; transform-origin: center; z-index: 3; }
.dk-tutamac {
  position: absolute; right: -15px; bottom: -15px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--gecis); color: #fff; box-shadow: 0 2px 8px #000a; pointer-events: auto; touch-action: none; cursor: nwse-resize;
}
.dk-tutamac::after { content: ""; position: absolute; inset: -10px; }
.dk-kilavuz { position: absolute; display: none; background: var(--sari); pointer-events: none; z-index: 2; }
.dk-kilavuz.dikey { width: 1px; }
.dk-kilavuz.yatay { height: 1px; }

.kontrol-cubugu { display: flex; align-items: center; gap: 4px; padding: 4px 10px; height: 48px; flex: none; }
.zaman-yazi { font-variant-numeric: tabular-nums; font-size: 13px; color: var(--yazi2); min-width: 92px; }
.oynat-d { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: var(--yuzey2); }
.oynat-d:active { background: var(--yuzey3); }

/* zaman çizelgesi */
.zaman-kap { position: relative; flex: none; height: clamp(180px, 32dvh, 300px); background: var(--zemin); border-top: 1px solid #ffffff0a; }
.zc-kaydir { position: absolute; inset: 0; overflow-x: auto; overflow-y: auto; scrollbar-width: none; touch-action: pan-x pan-y; -webkit-overflow-scrolling: touch; }
.zc-kaydir::-webkit-scrollbar { display: none; }
.zc-ic { position: relative; min-height: 100%; }
.zc-tuval { position: sticky; left: 0; top: 0; display: block; pointer-events: none; }
.zc-cizgi { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--turkuaz); pointer-events: none; box-shadow: var(--neon-t); }
.zc-cizgi::before { content: ""; position: absolute; top: 0; left: -6px; width: 14px; height: 14px; background: var(--turkuaz); box-shadow: var(--neon-t); clip-path: polygon(0 0, 100% 0, 100% 55%, 50% 100%, 0 55%); }
.zc-ekle {
  position: absolute; right: 10px; width: 42px; height: 42px; border-radius: 14px; background: var(--gecis); color: #fff;
  display: grid; place-items: center; box-shadow: 0 4px 14px #0009; z-index: 2;
}
.zc-tutamac {
  position: absolute; left: 0; top: 0; width: 18px; display: none; background: var(--turkuaz); box-shadow: var(--neon-t); touch-action: none; z-index: 3; cursor: ew-resize;
}
.zc-tutamac.sol { border-radius: 8px 0 0 8px; }
.zc-tutamac.sag { border-radius: 0 8px 8px 0; }
.zc-tutamac i { position: absolute; left: 50%; top: 50%; width: 3px; height: 16px; margin: -8px 0 0 -1.5px; border-radius: 2px; background: #062a30; }
.zc-tutamac::after { content: ""; position: absolute; inset: -6px -10px; } /* parmak için geniş dokunma alanı */

/* araç çubuğu: ikonlar yuvarlak karo içinde */
.arac-cubugu {
  flex: none; display: flex; gap: 4px; overflow-x: auto; padding: 8px 8px calc(10px + var(--alt-bosluk));
  background: var(--yuzey); border-top: 1px solid #ffffff0d; scrollbar-width: none;
}
.arac-cubugu::-webkit-scrollbar { display: none; }
.arac { flex: none; min-width: 66px; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 2px; border-radius: 12px; color: var(--yazi); }
.arac-ikon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; background: var(--yuzey2); transition: background 0.15s; }
.arac:active .arac-ikon { background: var(--yuzey3); }
.arac.pasif { opacity: 0.35; }
.arac.vurgu .arac-ikon { background: var(--gecis); color: #fff; box-shadow: var(--neon-p); }
.arac:hover .arac-ikon { box-shadow: inset 0 0 0 1px #22f0ff55; }
.arac-ad { font-size: 11px; color: var(--yazi2); white-space: nowrap; }
.geri-arac .arac-ikon { background: transparent; border: 1px solid var(--cizgi); }

/* ---------- alt panel ---------- */
.panel {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; max-height: 64dvh; display: flex; flex-direction: column;
  background: var(--yuzey); border-radius: 22px 22px 0 0; box-shadow: 0 -10px 40px #000a; border-top: 1px solid #ffffff10;
  transform: translateY(100%); transition: transform 0.2s ease; padding-bottom: var(--alt-bosluk);
  max-width: 720px; margin: 0 auto;
}
.panel.acik { transform: none; }
.panel::before { content: ""; width: 40px; height: 4px; border-radius: 2px; background: var(--yuzey3); margin: 8px auto 0; }
.panel-ust { display: flex; align-items: center; padding: 6px 12px 4px 20px; }
.panel-baslik { flex: 1; font-weight: 900; font-size: 14px; letter-spacing: 1.5px; text-transform: uppercase; }
.panel-tamam { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--yuzey2); color: var(--turkuaz); }
.panel-govde { padding: 8px 20px 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
.ayar-baslik { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.6px; color: var(--turkuaz); margin-bottom: -6px; }
.ipucu { color: var(--yazi3); font-size: 12px; text-align: center; }

.kaydirici { display: flex; flex-direction: column; gap: 6px; }
.kd-ust { display: flex; justify-content: space-between; font-size: 13px; color: var(--yazi2); }
.kd-deger { color: var(--yazi); font-variant-numeric: tabular-nums; font-weight: 600; }
.kd-giris { -webkit-appearance: none; appearance: none; width: 100%; height: 32px; background: transparent; touch-action: pan-y; }
.kd-giris::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--turkuaz) 0, var(--pembe) var(--dolu, 0%), var(--yuzey3) var(--dolu, 0%)); }
.kd-giris::-moz-range-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--turkuaz) 0, var(--pembe) var(--dolu, 0%), var(--yuzey3) var(--dolu, 0%)); }
.kd-giris::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -9px; border-radius: 50%; background: #fff; border: 3px solid var(--pembe); box-shadow: 0 1px 6px #0008; }
.kd-giris::-moz-range-thumb { width: 18px; height: 18px; border: 3px solid var(--pembe); border-radius: 50%; background: #fff; }
.hizli-degerler { display: flex; gap: 8px; flex-wrap: wrap; }
.cip { padding: 7px 13px; border-radius: 99px; background: var(--yuzey2); border: 1px solid var(--cizgi); font-size: 13px; }
.cip:active { background: var(--yuzey3); }

.secenekler { display: flex; gap: 8px; flex-wrap: wrap; }
.secenek {
  flex: 1 1 0; min-width: 58px; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 6px;
  border-radius: 14px; background: var(--yuzey2); border: 1.5px solid transparent; font-size: 14px; font-weight: 600;
}
.secenek.secili { border-color: var(--turkuaz); color: #fff; background: #22f0ff14; box-shadow: var(--neon-t); }
.secenek.pasif { opacity: 0.35; }
.secenek-alt { font-size: 10px; font-weight: 400; color: var(--yazi3); }
.oranlar .secenek { flex: 0 0 calc(33.33% - 6px); }
/* bölümlü seçici (dışa aktarma) */
.secenekler.segment { gap: 0; flex-wrap: nowrap; padding: 4px; background: var(--yuzey2); border-radius: 14px; }
.segment .secenek { background: transparent; border: 0; border-radius: 10px; padding: 9px 2px; min-width: 0; font-size: 13px; }
.segment .secenek.secili { background: var(--gecis); color: #fff; box-shadow: 0 2px 10px #a35cff55; }
.renkler { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.renk { width: 42px; height: 42px; border-radius: 50%; border: 2px solid #ffffff22; }
.renk.secili { outline: 3px solid var(--mor); outline-offset: 2px; }

/* ---------- düğmeler ---------- */
.dugme { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 18px; border-radius: 14px; font-weight: 600; }
.dugme.birincil { background: var(--gecis); color: #fff; box-shadow: 0 4px 16px #a35cff44; }
.dugme.ikincil { background: var(--yuzey2); border: 1px solid var(--cizgi); }
.dugme.tehlike { background: var(--tehlike); color: #fff; }
.dugme.tam { width: 100%; }
.dugme.buyuk { padding: 15px 20px; font-size: 16px; border-radius: 16px; }
.dugme:active { filter: brightness(0.9); }

/* ---------- bildirim ---------- */
.bildirimler { position: fixed; left: 0; right: 0; top: calc(62px + var(--ust-bosluk)); z-index: 100; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; padding: 0 16px; }
.bildirim {
  max-width: 460px; padding: 10px 16px; border-radius: 14px; background: #2a2438f2; border: 1px solid #ffffff12; box-shadow: 0 6px 24px #0008; font-size: 14px;
  opacity: 0; transform: translateY(-8px); transition: 0.2s;
}
.bildirim.gorunur { opacity: 1; transform: none; }
.bildirim.hata { background: #5a1d2ef5; }

/* ---------- pencere / menü ---------- */
.pencere-arka { position: fixed; inset: 0; z-index: 90; background: #05040acc; display: grid; place-items: center; padding: 20px; opacity: 0; transition: opacity 0.18s; }
.pencere-arka.acik { opacity: 1; }
.pencere { width: min(360px, 100%); background: var(--yuzey); border: 1px solid #ffffff10; border-radius: 22px; padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.pencere-baslik { font-weight: 700; font-size: 17px; }
.pencere-mesaj { color: var(--yazi2); font-size: 14px; }
.pencere-girdi { padding: 12px; border-radius: 12px; border: 1px solid var(--cizgi); background: var(--yuzey2); color: var(--yazi); -webkit-user-select: text; user-select: text; }
.pencere-dugmeler { display: flex; gap: 10px; justify-content: flex-end; margin-top: 4px; }
.pencere-dugmeler .dugme { flex: 1; }
.menu-kutu { width: min(360px, 100%); background: var(--yuzey); border-radius: 22px; padding: 8px; display: flex; flex-direction: column; align-self: end; margin-bottom: var(--alt-bosluk); }
.menu-baslik { padding: 12px 14px 8px; color: var(--yazi2); font-size: 13px; }
.menu-secenek { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 14px; text-align: left; }
.menu-secenek:active { background: var(--yuzey2); }
.menu-secenek.tehlike { color: var(--tehlike); }

/* ---------- dışa aktarma ---------- */
.disa-ozet {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 12px; border-radius: 16px;
  background: linear-gradient(135deg, #8a63ff1f, #ff6fae14); border: 1px solid #9b7bff33;
}
.disa-ozet div { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.disa-ozet b { font-size: 15px; font-variant-numeric: tabular-nums; }
.disa-ozet small { font-size: 11px; color: var(--yazi3); }
.tam-ekran-katman { position: fixed; inset: 0; z-index: 80; background: #0b0911f2; display: grid; place-items: center; padding: 24px; backdrop-filter: blur(6px); }
.ilerleme-kutu, .sonuc-kutu { width: min(420px, 100%); display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.ilerleme-baslik { font-weight: 900; font-size: 18px; letter-spacing: 3px; text-transform: uppercase; text-shadow: 2px 0 #ff4fa3aa, -2px 0 #22f0ffaa; }
.ilerleme-film { width: 84px; height: 84px; border-radius: 26px; display: grid; place-items: center; background: var(--gecis); color: #fff; animation: nabiz 1.4s ease-in-out infinite; }
@keyframes nabiz { 50% { transform: scale(0.92); box-shadow: 0 0 0 14px #9b7bff1a; } }
.ilerleme-cubuk { width: 100%; height: 12px; border-radius: 6px; background: var(--yuzey3); overflow: hidden; box-shadow: var(--neon-t); }
.ilerleme-cubuk i { display: block; height: 100%; width: calc(var(--oran, 0) * 100%); background: var(--gecis); border-radius: 6px; transition: width 0.2s; }
.ilerleme-yuzde { font-size: 40px; font-weight: 800; font-variant-numeric: tabular-nums; background: var(--gecis); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ilerleme-not { color: var(--yazi2); font-size: 13px; }
.sonuc-video { width: 100%; max-height: 50dvh; border-radius: 16px; background: #000; }
.sonuc-dugmeler { display: flex; flex-direction: column; gap: 10px; width: 100%; }

/* ---------- geniş ekran (PC) ---------- */
@media (min-width: 900px) and (pointer: fine) {
  .zaman-kap { height: clamp(210px, 34dvh, 340px); }
  .arac-cubugu { justify-content: center; }
  .arac { min-width: 80px; }
  .panel { left: 50%; right: auto; width: 520px; transform: translate(-50%, 100%); margin: 0; }
  .panel.acik { transform: translate(-50%, 0); }
  .panel.ortada { top: 50%; bottom: auto; border-radius: 22px; transform: translate(-50%, -40%); opacity: 0; transition: 0.18s; pointer-events: none; }
  .panel.ortada.acik { transform: translate(-50%, -50%); opacity: 1; pointer-events: auto; }
}