:root {
  --zemin: #0b0d14;
  --cam: rgba(255, 255, 255, .06);
  --cam-kenar: rgba(255, 255, 255, .12);
  --yazi: #f3f4f8;
  --soluk: #9aa0b4;
  --vurgu: #ff8a3d;
  --vurgu2: #ffb86b;
  --yesil: #3ddc97;
  --kirmizi: #ff5d6c;
  --mavi: #6aa8ff;
  --yaricap: 20px;
}
* { box-sizing: border-box; margin: 0; }
html, body { min-height: 100%; }
body {
  font-family: Manrope, system-ui, -apple-system, sans-serif;
  background: var(--zemin);
  color: var(--yazi);
  -webkit-font-smoothing: antialiased;
  padding: 16px;
  overflow-x: hidden;
}
[hidden] { display: none !important; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }

/* hareketli zemin */
.zemin { position: fixed; inset: 0; z-index: -1; overflow: hidden; }
.zemin i { position: absolute; width: 55vmax; height: 55vmax; border-radius: 50%; filter: blur(90px); opacity: .32; animation: suzul 26s ease-in-out infinite alternate; }
.zemin i:nth-child(1) { background: #ff7a2f; top: -22vmax; left: -14vmax; }
.zemin i:nth-child(2) { background: #5b5bff; bottom: -26vmax; right: -16vmax; animation-duration: 32s; animation-delay: -8s; }
.zemin i:nth-child(3) { background: #d6338a; top: 30%; left: 45%; width: 34vmax; height: 34vmax; opacity: .2; animation-duration: 38s; animation-delay: -15s; }
@keyframes suzul { to { transform: translate3d(7vmax, 5vmax, 0) scale(1.15); } }

.cam {
  background: var(--cam);
  border: 1px solid var(--cam-kenar);
  border-radius: var(--yaricap);
  backdrop-filter: blur(26px) saturate(150%);
  -webkit-backdrop-filter: blur(26px) saturate(150%);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.soluk { color: var(--soluk); }
.marka { font-weight: 800; font-size: 18px; letter-spacing: -.02em; display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.nokta { width: 10px; height: 10px; border-radius: 50%; background: linear-gradient(135deg, var(--vurgu), #ff4d8d); box-shadow: 0 0 16px var(--vurgu); animation: nabiz 2.4s ease-in-out infinite; }
@keyframes nabiz { 50% { transform: scale(1.35); opacity: .7; } }

.dugme { padding: 10px 18px; border-radius: 999px; font-weight: 700; font-size: 14px; transition: transform .18s, box-shadow .18s, background .18s, opacity .18s; white-space: nowrap; }
.dugme:active { transform: scale(.96); }
.dugme:disabled { opacity: .5; cursor: default; }
.dugme.ana { background: linear-gradient(135deg, var(--vurgu), #ff5f6d); color: #1a0d05; box-shadow: 0 8px 24px rgba(255, 122, 47, .35); }
.dugme.ana:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 12px 30px rgba(255, 122, 47, .5); }
.dugme.hayalet { background: rgba(255, 255, 255, .07); border: 1px solid var(--cam-kenar); }
.dugme.hayalet:hover { background: rgba(255, 255, 255, .13); }
.dugme.onayli { background: rgba(61, 220, 151, .16); border: 1px solid rgba(61, 220, 151, .5); color: var(--yesil); }

/* giriş */
.giris { min-height: calc(100vh - 32px); display: grid; place-items: center; }
.giris-kart { width: min(380px, 100%); padding: 32px; display: grid; gap: 16px; animation: belir .6s cubic-bezier(.2, .8, .2, 1); }
.giris-kart input { padding: 14px 16px; border-radius: 14px; border: 1px solid var(--cam-kenar); background: rgba(0, 0, 0, .3); color: var(--yazi); font: inherit; outline: none; transition: border-color .2s, box-shadow .2s; }
.giris-kart input:focus { border-color: var(--vurgu); box-shadow: 0 0 0 4px rgba(255, 138, 61, .18); }
.hata { color: var(--kirmizi); font-size: 13px; min-height: 18px; }
@keyframes belir { from { opacity: 0; transform: translateY(16px) scale(.98); } }

/* üst */
#panel { max-width: 1180px; margin: 0 auto; display: grid; gap: 16px; }
.ust { display: flex; align-items: center; gap: 16px; padding: 12px 16px; position: sticky; top: 12px; z-index: 5; }
.sekmeler { display: flex; gap: 4px; margin: 0 auto; background: rgba(0, 0, 0, .25); padding: 4px; border-radius: 999px; }
.sekmeler button { padding: 8px 18px; border-radius: 999px; font-weight: 700; font-size: 14px; color: var(--soluk); transition: all .25s; }
.sekmeler button.secili { background: rgba(255, 255, 255, .14); color: var(--yazi); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15); }

.hesaplar { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.hesap { display: flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; border-radius: 999px; background: var(--cam); border: 1px solid var(--cam-kenar); backdrop-filter: blur(20px); transition: all .25s; flex: none; text-align: left; }
.hesap.secili { border-color: var(--vurgu); background: rgba(255, 138, 61, .14); }
.hesap img, .hesap .harf { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: linear-gradient(135deg, #f58529, #dd2a7b, #8134af); display: grid; place-items: center; font-weight: 800; }
.hesap b { display: block; font-size: 14px; }
.hesap small { color: var(--soluk); font-size: 12px; }

.ozet { display: flex; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--soluk); }
.ozet span { padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .05); }
.ozet b { color: var(--yazi); }

/* kuyruk */
.gun { margin: 8px 0 4px; font-weight: 800; font-size: 15px; letter-spacing: -.01em; display: flex; align-items: baseline; gap: 10px; }
.gun small { color: var(--soluk); font-weight: 600; }
.liste { display: grid; gap: 10px; }
.kart { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: center; padding: 12px; animation: belir .45s cubic-bezier(.2, .8, .2, 1) backwards; transition: transform .2s, border-color .2s; }
.kart:hover { transform: translateY(-2px); border-color: rgba(255, 255, 255, .22); }
.kucuk { width: 64px; height: 88px; border-radius: 12px; overflow: hidden; background: rgba(0, 0, 0, .4); position: relative; cursor: pointer; }
.kucuk img, .kucuk video { width: 100%; height: 100%; object-fit: cover; display: block; }
.kucuk .adet { position: absolute; top: 4px; right: 4px; font-size: 10px; font-weight: 800; background: rgba(0, 0, 0, .6); padding: 2px 6px; border-radius: 8px; }
.bilgi { min-width: 0; display: grid; gap: 6px; }
.satir { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.saat { font-weight: 800; font-size: 17px; font-variant-numeric: tabular-nums; }
.rozet { padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .02em; background: rgba(255, 255, 255, .1); }
.rozet.deneme { background: rgba(106, 168, 255, .18); color: var(--mavi); }
.rozet.reels { background: rgba(255, 93, 140, .18); color: #ff8fb0; }
.rozet.karusel { background: rgba(255, 184, 107, .18); color: var(--vurgu2); }
.rozet.tekli { background: rgba(190, 150, 255, .18); color: #c9a8ff; }
.rozet.hikaye { background: rgba(61, 220, 151, .16); color: var(--yesil); }
.durum { font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
.durum::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.durum.taslak { color: var(--vurgu2); }
.durum.onayli, .durum.yayinlandi { color: var(--yesil); }
.durum.yayinlaniyor { color: var(--mavi); }
.durum.hata { color: var(--kirmizi); }
.metin { color: var(--soluk); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eylem { display: flex; gap: 8px; }
.bos { padding: 56px 20px; text-align: center; color: var(--soluk); }
.bos b { display: block; color: var(--yazi); font-size: 17px; margin-bottom: 6px; }
.uyari { color: var(--kirmizi); font-size: 12px; white-space: normal; }

/* takvim */
.takvim-ust { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.takvim-ust h2 { font-size: 20px; letter-spacing: -.02em; text-transform: capitalize; }
.izgara { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.izgara .ad { font-size: 12px; color: var(--soluk); font-weight: 700; padding: 4px 8px; }
.hucre { min-height: 104px; padding: 8px; border-radius: 14px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .07); display: flex; flex-direction: column; gap: 4px; }
.hucre.dis { opacity: .35; }
.hucre.bugun { border-color: var(--vurgu); box-shadow: inset 0 0 0 1px var(--vurgu); }
.hucre > b { font-size: 13px; }
.cip { font-size: 11px; font-weight: 700; padding: 3px 6px; border-radius: 7px; text-align: left; background: rgba(255, 255, 255, .09); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-left: 3px solid var(--vurgu2); transition: background .2s; }
.cip:hover { background: rgba(255, 255, 255, .18); }
.cip.onayli, .cip.yayinlandi { border-left-color: var(--yesil); }
.cip.hata { border-left-color: var(--kirmizi); }
.cip.yayinlaniyor { border-left-color: var(--mavi); }
.cok { font-size: 11px; color: var(--soluk); }

/* önizleme */
.perde { position: fixed; inset: 0; z-index: 20; background: rgba(4, 5, 10, .72); backdrop-filter: blur(10px); display: grid; place-items: center; padding: 16px; animation: soluk-gel .25s; overflow-y: auto; }
@keyframes soluk-gel { from { opacity: 0; } }
.onizleme { position: relative; display: grid; grid-template-columns: auto minmax(260px, 360px); gap: 28px; padding: 28px; max-width: 100%; animation: belir .4s cubic-bezier(.2, .8, .2, 1); }
.kapat { position: absolute; top: 10px; right: 14px; font-size: 28px; line-height: 1; color: var(--soluk); z-index: 3; }
.telefon { width: 318px; max-width: 100%; aspect-ratio: 9 / 18.6; border-radius: 44px; padding: 9px; background: linear-gradient(160deg, #2a2c36, #0c0d12); box-shadow: 0 30px 80px rgba(0, 0, 0, .6), inset 0 0 0 1.5px rgba(255, 255, 255, .14); }
.ekran { width: 100%; height: 100%; border-radius: 36px; overflow: hidden; background: #000; position: relative; font-family: -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 13px; color: #fff; }
.ayrinti { display: grid; gap: 14px; align-content: start; min-width: 0; padding-top: 6px; }
.ayrinti h3 { font-size: 20px; letter-spacing: -.02em; }
.ayrinti dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 13px; }
.ayrinti dt { color: var(--soluk); }
.ayrinti dd { font-weight: 600; overflow-wrap: anywhere; }
.ayrinti pre { font: inherit; font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; background: rgba(0, 0, 0, .3); padding: 12px; border-radius: 14px; max-height: 220px; overflow-y: auto; line-height: 1.5; }

/* telefon içi: ortak */
.ig-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: linear-gradient(135deg, #f58529, #dd2a7b, #8134af); flex: none; display: grid; place-items: center; font-weight: 700; font-size: 13px; }
.ig-ikon { width: 26px; height: 26px; stroke: #fff; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ekran video, .ekran .medya img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Reels görünümü */
.reels .medya { position: absolute; inset: 0; }
.reels .ust-yazi { position: absolute; top: 14px; left: 16px; right: 16px; display: flex; justify-content: space-between; font-weight: 700; font-size: 17px; text-shadow: 0 1px 6px rgba(0, 0, 0, .5); z-index: 2; }
.reels .ust-yazi small { font-size: 11px; font-weight: 700; background: rgba(0, 0, 0, .45); padding: 3px 9px; border-radius: 999px; align-self: center; }
.reels .yan { position: absolute; right: 10px; bottom: 76px; display: grid; gap: 18px; justify-items: center; z-index: 2; filter: drop-shadow(0 1px 4px rgba(0, 0, 0, .5)); }
.reels .alt { position: absolute; left: 0; right: 0; bottom: 0; padding: 60px 56px 16px 14px; background: linear-gradient(transparent, rgba(0, 0, 0, .65)); z-index: 1; }
.reels .kim { display: flex; align-items: center; gap: 8px; font-weight: 600; margin-bottom: 8px; }
.reels .takip { border: 1px solid rgba(255, 255, 255, .8); border-radius: 8px; padding: 3px 9px; font-size: 12px; }
.reels .yazi { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.35; white-space: pre-line; }
.reels .ses { margin-top: 8px; font-size: 12px; opacity: .95; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Akış görünümü */
.akis { background: #000; height: 100%; display: flex; flex-direction: column; overflow-y: auto; scrollbar-width: none; }
.akis .bas { display: flex; align-items: center; gap: 10px; padding: 12px; font-weight: 600; }
.akis .bas small { display: block; font-weight: 400; font-size: 11px; opacity: .8; }
.akis .serit { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; background: #111; flex: none; }
.akis .serit::-webkit-scrollbar { display: none; }
.akis .serit .medya { flex: none; width: 100%; aspect-ratio: 4 / 5; scroll-snap-align: start; }
.akis .sayac { position: absolute; top: 66px; right: 12px; background: rgba(0, 0, 0, .6); padding: 3px 9px; border-radius: 999px; font-size: 11px; }
.akis .eylemler { display: flex; gap: 14px; padding: 10px 12px 4px; align-items: center; }
.akis .eylemler .son { margin-left: auto; }
.akis .noktalar { display: flex; gap: 4px; justify-content: center; margin: -22px 0 12px; pointer-events: none; }
.akis .noktalar i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .35); transition: background .2s; }
.akis .noktalar i.secili { background: #4f9dff; }
.akis .aciklama { padding: 4px 12px 16px; line-height: 1.4; white-space: pre-line; overflow-wrap: anywhere; }

/* Hikâye görünümü */
.hikaye .medya { position: absolute; inset: 0; }
.hikaye .cubuk { position: absolute; top: 10px; left: 10px; right: 10px; height: 2.5px; border-radius: 2px; background: rgba(255, 255, 255, .35); z-index: 2; overflow: hidden; }
.hikaye .cubuk::after { content: ""; display: block; height: 100%; width: 60%; background: #fff; }
.hikaye .bas { position: absolute; top: 22px; left: 12px; display: flex; align-items: center; gap: 8px; font-weight: 600; z-index: 2; text-shadow: 0 1px 4px rgba(0, 0, 0, .5); }

.bildirim { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 80px); padding: 12px 20px; border-radius: 999px; background: rgba(20, 22, 30, .92); border: 1px solid var(--cam-kenar); font-weight: 600; font-size: 14px; transition: transform .35s cubic-bezier(.2, .8, .2, 1); z-index: 30; max-width: calc(100vw - 32px); }
.bildirim.acik { transform: translate(-50%, 0); }

@media (max-width: 760px) {
  .ust { flex-wrap: wrap; }
  .sekmeler { order: 3; width: 100%; justify-content: center; }
  .ust .dugme { margin-left: auto; }
  .kart { grid-template-columns: 56px 1fr; }
  .kucuk { width: 56px; height: 78px; }
  .eylem { grid-column: 1 / -1; }
  .eylem .dugme { flex: 1; }
  .onizleme { grid-template-columns: 1fr; justify-items: center; padding: 20px 16px; gap: 18px; }
  .ayrinti { width: 100%; }
  .hucre { min-height: 64px; padding: 5px; }
  .cip { font-size: 0; padding: 0; height: 6px; border-left-width: 0; background: var(--vurgu2); }
  .cip.onayli, .cip.yayinlandi { background: var(--yesil); }
  .cip.hata { background: var(--kirmizi); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* düzenleme formu */
.form { display: grid; gap: 12px; max-height: min(78vh, 720px); overflow-y: auto; padding-right: 6px; }
.form h3 { font-size: 20px; letter-spacing: -.02em; }
.alan { display: grid; gap: 5px; font-size: 12px; color: var(--soluk); font-weight: 600; min-width: 0; }
.form input, .form select, .form textarea { width: 100%; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--cam-kenar); background: rgba(0, 0, 0, .32); color: var(--yazi); font: inherit; font-size: 13px; outline: none; transition: border-color .2s, box-shadow .2s; }
.form textarea { resize: vertical; line-height: 1.5; }
.form input:focus, .form select:focus, .form textarea:focus { border-color: var(--vurgu); box-shadow: 0 0 0 3px rgba(255, 138, 61, .18); }
.form select option { background: #15171f; }
.iki { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.medya-liste { display: grid; gap: 6px; }
.medya-satir { display: grid; grid-template-columns: 78px 1fr 1fr auto; gap: 6px; }
.medya-satir .dugme { padding: 6px 12px; }
@media (max-width: 760px) { .iki { grid-template-columns: 1fr; } .medya-satir { grid-template-columns: 78px 1fr auto; } .medya-satir [name=m-alt] { grid-column: 1 / -2; } }