/* Kadrel arayüzü — açık, sade, içerik odaklı (Canva / Adobe Express çizgisi).
   Zemin beyaz, çalışma alanı açık gri. Tek vurgu: logonun laciverti. Pro işareti: altın taç.
   Yazı: Onest (başlık 700, metin 400/500). Serif, büyük harf + geniş aralıklı etiket, gren, parıltı YOK.
   Boşluklar 4'ün katı. Köşe: 6 8 10 12 16. */
:root {
  --bg: #ffffff;
  --bg2: #f5f6f8;
  --fill: #f1f2f5;
  --fill2: #e7e9ee;
  --line: #e8eaef;
  --line2: #d8dbe2;
  --text: #10131c;
  --text2: #454b59;
  --muted: #7a8090;
  --faint: #a4a9b4;
  --brand: #23349a;
  --brand2: #1a2877;
  --brand-soft: #eef1fb;
  --gold: #f0a81c;
  --danger: #d6392a;
  --brass: #23349a;   /* eski ad: app.js'te geçen yerler için */
  --c: #23349a;
  --cink: #fff;
  --top: 0px;
  --bot: 0px;
  --sans: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
  --shadow-card: 0 1px 2px rgba(16,19,28,.06), 0 4px 14px rgba(16,19,28,.07);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 15px; line-height: 1.45; overscroll-behavior: none; -webkit-font-smoothing: antialiased; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
svg.i { width: 1em; height: 1em; flex: none; display: inline-block; vertical-align: -0.14em; }
::-webkit-scrollbar { display: none; }

#app { height: 100%; position: relative; overflow: hidden; }
.screen { position: absolute; inset: 0; display: none; }
.screen.on { display: block; }

/* ============================================================ ANA SAYFA */
#home { padding-top: 0 !important; }
#home, .tab-screen { overflow-y: auto; overflow-x: hidden; padding-top: var(--top); padding-bottom: calc(var(--bot) + 92px); scrollbar-width: none; background: var(--bg); }

/* ana sayfa üst alanı: logonun lacivertinden açık mavi-leylağa çok hafif geçiş, alta doğru beyaza erir */
.h-hero {
  padding: var(--top) 0 26px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0) 20%, rgba(255,255,255,.55) 62%, rgba(255,255,255,.9) 84%, #fff 100%),
    linear-gradient(115deg, #cdd8ff 0%, #ddd9ff 50%, #efdcf8 100%);
}
.h-hero .h-top { position: static; background: none; backdrop-filter: none; padding: 16px 16px 6px; }
.h-hero .wordmark { height: 36px; margin-top: 4px; }
.h-hero .search {
  height: 50px; margin: 14px 16px 0; border-radius: 12px; background: #fff;
  border: 1px solid rgba(35,52,154,.07); box-shadow: 0 2px 4px rgba(35,52,154,.05), 0 8px 22px rgba(35,52,154,.09);
}
.h-hero .search:focus-within { border-color: var(--brand); }
.h-hero .me .avatar { background-color: #fff; box-shadow: 0 1px 4px rgba(35,52,154,.14); }
/* Pro düğmesi: logonun lacivertinde geçişli, altın taçlı. Pro açıkken altın rozet. */
#home .pro-chip {
  height: 36px; padding: 0 13px 0 5px; gap: 7px; border-radius: 10px; font-size: 13.5px; font-weight: 700; letter-spacing: 0;
  color: #fff; background: linear-gradient(135deg, #16236b 0%, #2b3fb8 60%, #4a5fe0 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 4px 12px rgba(35,52,154,.32);
}
#home .pro-chip .pc-ic { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; background: rgba(255,255,255,.14); }
#home .pro-chip svg { color: #ffc94a; font-size: 15px; }
#home .pro-chip:active { transform: scale(.97); }
#home .pro-chip.is-pro { color: #5a3a00; background: linear-gradient(135deg, #ffe39a 0%, #f5bf45 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 4px 12px rgba(200,140,20,.3); }
#home .pro-chip.is-pro .pc-ic { background: rgba(255,255,255,.45); }
#home .pro-chip.is-pro svg { color: #b8780a; }
/* profil: marka renklerinde ince halka */
.h-hero .me { display: grid; place-items: center; width: 40px; height: 40px; padding: 2px; border-radius: 50%; background: linear-gradient(135deg, #23349a, #7d6cf0 55%, #e2a2d6); box-shadow: 0 3px 10px rgba(35,52,154,.2); }
.h-hero .me .avatar { width: 36px; height: 36px; background-color: #fff; box-shadow: 0 0 0 2px #fff; font-size: 15px; }
.h-hero .me .avatar svg { font-size: 19px; }
.h-hero .me:active { transform: scale(.95); }
#cat-chips { padding-top: 0; }

/* ============================================================ ALT MENÜ */
.tabbar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 20; display: flex;
  padding: 2px 4px calc(var(--bot) + 2px); background: rgba(255,255,255,.97); backdrop-filter: blur(10px); border-top: 1px solid var(--line);
}
.tabbar button { flex: 1; height: 58px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--text2); font-size: 11.5px; font-weight: 500; }
.tabbar svg { font-size: 25px; }
.tabbar .ic-on { display: none; }
.tabbar button.on { color: var(--brand); font-weight: 600; }
.tabbar button.on .ic-on { display: inline-block; }
.tabbar button.on .ic-off { display: none; }
.tabbar button:active svg { transform: scale(.92); }

/* sekme başlığı */
.tab-head { padding: 20px 16px 4px; }
.tab-head h1 { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -.4px; }
.tpl-search { margin-top: 44px; }
.cat-head.with-back { align-items: center; gap: 6px; padding-left: 8px; }
.cat-head.with-back .ibtn { order: -2; }
.sec-sub { font-size: 13px; color: var(--muted); }

/* Tasarımlarım */
.empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 72px 32px 0; }
.empty-ico { width: 72px; height: 72px; border-radius: 20px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); font-size: 34px; margin-bottom: 10px; }
.empty b { font-size: 18px; font-weight: 700; }
.empty > span:not(.empty-ico) { color: var(--text2); font-size: 14.5px; max-width: 260px; }
.empty .btn { width: auto; padding: 0 22px; margin-top: 18px; }
.hist-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 10px; padding: 0 16px; }
.hcell { text-align: left; }
.hcell img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 8px; box-shadow: var(--shadow-card); background: var(--fill); }
.hcell small { display: block; margin-top: 6px; font-size: 12px; color: var(--muted); }
.hist-big { display: flex; justify-content: center; margin: 4px 0 16px; }
.hist-big img { width: 58%; border-radius: 10px; box-shadow: var(--shadow-card); }

/* Daha fazla */
#more-body { padding: 12px 16px 0; }
.profile { width: 100%; display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 12px; border: 1px solid var(--line); text-align: left; }
.profile .avatar { width: 52px; height: 52px; font-size: 20px; flex: none; }
.profile .avatar svg { font-size: 24px; }
.mt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mt b { font-size: 15.5px; font-weight: 600; color: var(--text); line-height: 1.3; }
.mt small { font-size: 12.5px; color: var(--muted); line-height: 1.35; margin-top: 1px; }
.mchev { color: var(--faint); font-size: 18px; flex: none; }
.procard { width: 100%; margin-top: 12px; display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: 12px; text-align: left; color: #fff; background: var(--brand); }
.procard .pc-t { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.procard b { display: flex; align-items: center; gap: 6px; font-size: 16px; font-weight: 700; }
.procard b svg { color: var(--gold); }
.procard small { font-size: 12.5px; color: rgba(255,255,255,.78); }
.procard .pc-b { flex: none; height: 34px; padding: 0 14px; border-radius: 8px; display: grid; place-items: center; background: #fff; color: var(--brand); font-weight: 700; font-size: 13.5px; }
.mgroup h3 { margin: 24px 0 8px; font-size: 13.5px; font-weight: 700; color: var(--text2); }
.mlist { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.mrow { width: 100%; display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 8px 14px; text-align: left; background: #fff; }
.mrow + .mrow { border-top: 1px solid var(--line); }
button.mrow:active { background: var(--bg2); }
.mi { width: 24px; flex: none; display: grid; place-items: center; color: var(--text2); font-size: 23px; }
.mrow .check { min-height: 0; flex: none; }
.seg.sm { flex: none; padding: 2px; }
.seg.sm button { flex: none; height: 30px; padding: 0 12px; font-size: 13px; }
.ver { margin: 22px 0 0; text-align: center; font-size: 12.5px; color: var(--muted); }
.about-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.about-head h2 { margin: 0; }
.about-head p { margin: 0; }
.sheet .mlist { margin-top: 4px; }
.btn.danger { color: #fff; background: var(--danger); }

.h-top {
  position: sticky; top: calc(var(--top) * -1); z-index: 5; display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; background: rgba(255,255,255,.96); backdrop-filter: blur(10px);
}
.brand { display: flex; align-items: center; gap: 8px; }
.brand-ico { width: 32px; height: 32px; border-radius: 8px; display: block; flex: none; }
.brand-ico.big { width: 64px; height: 64px; border-radius: 16px; }
.wordmark { height: 28px; width: auto; display: block; margin-top: 2px; }
.h-acts { display: flex; align-items: center; gap: 8px; }

.pro-chip {
  height: 34px; padding: 0 12px; border-radius: 8px; display: inline-flex; align-items: center; gap: 6px;
  font-size: 13.5px; font-weight: 600; color: var(--text); background: var(--fill);
}
.pro-chip svg { font-size: 16px; color: var(--gold); }
.pro-chip.is-pro { background: #fff4dc; color: #7a4f00; }
.me .avatar, .avatar {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-soft) center/cover;
  color: var(--brand); font-weight: 700; font-size: 14px;
}

.search {
  display: flex; flex-direction: row; align-items: center; gap: 10px; height: 46px; padding: 0 14px; margin: 4px 16px 0;
  border-radius: 10px; background: var(--fill); border: 1px solid transparent; transition: border-color .15s, background .15s;
}
.search:focus-within { background: #fff; border-color: var(--brand); }
.search svg { color: var(--muted); font-size: 19px; }
.search input { flex: 1; min-width: 0; border: 0; background: none; outline: none; height: 100%; font-size: 15px; }
.search input::placeholder { color: var(--muted); }
.search input::-webkit-search-cancel-button { display: none; }

.chips { display: flex; gap: 8px; overflow-x: auto; padding: 14px 16px 2px; scrollbar-width: none; }
.chip {
  flex: none; height: 34px; padding: 0 14px; border-radius: 8px; display: inline-flex; align-items: center; gap: 6px;
  font-size: 13.5px; font-weight: 500; color: var(--text2); background: var(--fill); white-space: nowrap;
}
.chip.on { background: var(--text); color: #fff; }

/* ana sayfa kategorileri: tek sıra, yana kayar; sonda "Tüm kategoriler" */
#cat-chips { scroll-padding: 16px; }
#cat-chips .chip { height: 38px; gap: 7px; padding: 0 13px; font-weight: 600; color: var(--text); }
#cat-chips .chip .ci { width: 16px; height: 16px; flex: none; color: var(--text2); }
#cat-chips .chip:active { background: var(--fill2); }
#cat-chips .chip.on { background: var(--brand); color: #fff; }
#cat-chips .chip.on .ci { color: #fff; }
#cat-chips .more-cats { background: #fff; color: var(--brand); box-shadow: inset 0 0 0 1px var(--line2); }
#cat-chips .more-cats .ci { color: var(--brand); }

/* Seçenek A: yazı sekmeleri — kutu yok, seçili olan kalın + altında lacivert çizgi.
   (Seçenek D denemek için index.html'de #cat-chips'ten "cat-tabs" sınıfını kaldırmak yeter: eski çip görünümü döner) */
#cat-chips.cat-tabs { gap: 22px; padding: 2px 16px 0; margin: 0; border-bottom: 1px solid var(--line); }
#cat-chips.cat-tabs .chip {
  position: relative; height: auto; padding: 10px 0 12px; border-radius: 0; background: none; box-shadow: none;
  font-size: 15px; font-weight: 500; color: #6b7180;
}
#cat-chips.cat-tabs .chip .ci { display: none; }
#cat-chips.cat-tabs .chip:active { background: none; color: var(--text); }
#cat-chips.cat-tabs .chip.on { background: none; color: var(--text); font-weight: 700; }
#cat-chips.cat-tabs .chip.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--brand); }
#cat-chips.cat-tabs .more-cats { color: var(--brand); font-weight: 600; gap: 2px; padding-right: 2px; }
#cat-chips.cat-tabs .more-cats .ci { display: inline-block; width: 15px; height: 15px; color: var(--brand); }

/* tüm kategoriler penceresi: gruplu liste, küçük fotoğraflı satırlar */
.cs-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.cs-top h2 { margin: 0 !important; }
.x-btn { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--fill); color: var(--text2); font-size: 17px; }
.cat-group h3 { margin: 22px 0 4px; font-size: 14px; font-weight: 700; color: var(--text2); }
.cat-row { width: 100%; display: flex; align-items: center; gap: 12px; padding: 7px 0; text-align: left; }
.cat-row:active { opacity: .7; }
.cat-row .th { width: 50px; height: 50px; flex: none; border-radius: 10px; background: var(--fill) center/cover; }
.cat-row .t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cat-row b { font-size: 15.5px; font-weight: 600; color: var(--text); line-height: 1.3; }
.cat-row small { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cat-row.on b { color: var(--brand); }
.cat-row.on .th { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--brand); }
.cs-empty { padding: 24px 0; text-align: center; }

/* imza hatırlatma */
.nudge {
  margin: 20px 16px 0; padding: 12px 14px; border-radius: 12px; display: flex; align-items: center; gap: 12px; width: calc(100% - 32px); text-align: left;
  background: var(--brand-soft);
}
.nudge .ni { width: 40px; height: 40px; border-radius: 10px; flex: none; display: grid; place-items: center; background: var(--brand); color: #fff; font-size: 20px; }
.nudge .ni.logo { background: #fff center/cover; box-shadow: 0 0 0 1px var(--line); }
.nudge .ni:not(.logo) { font-weight: 700; font-size: 17px; }
.nudge .ni svg { font-size: 20px; }
.nudge b { display: block; font-weight: 700; font-size: 15px; line-height: 1.25; color: var(--text); }
.nudge span { display: block; font-size: 13px; color: var(--text2); margin-top: 1px; line-height: 1.35; }
.nudge > div { flex: 1; }
.nudge > svg { color: var(--brand); font-size: 18px; }

/* bölüm */
.sec { margin-top: 28px; }
.sec-head { display: flex; align-items: center; gap: 10px; padding: 0 16px 12px; }
.sec-head .no { display: none; }
.sec-head h2 { margin: 0; font-weight: 700; font-size: 18px; line-height: 1.2; letter-spacing: -.2px; flex: 1; }
.sec-head .more { font-size: 13.5px; font-weight: 600; color: var(--brand); display: inline-flex; align-items: center; gap: 2px; }
.sec-head .more svg { font-size: 14px; }
.kicker { display: none; }

.row { display: flex; gap: 12px; overflow-x: auto; padding: 0 16px 4px; scroll-snap-type: x mandatory; scroll-padding: 16px; scrollbar-width: none; }
.row > * { scroll-snap-align: start; }

/* öne çıkanlar */
.hero { margin-top: 24px; }
.hcard { flex: none; width: 62vw; max-width: 280px; text-align: left; position: relative; }
.hcard .lock { top: 10px; right: 10px; }
.hcard .th { border-radius: 0; box-shadow: var(--shadow-card); }
.hcard small { display: block; margin-top: 10px; font-size: 12.5px; color: var(--muted); }
.hcard b { display: block; margin-top: 1px; font-weight: 600; font-size: 15px; line-height: 1.25; color: var(--text); }

/* şablon kartı */
.tcard { flex: none; width: 36vw; max-width: 165px; text-align: left; position: relative; }
.tcard .th { border-radius: 0; box-shadow: var(--shadow-card); }
.tcard b { display: block; margin-top: 8px; font-size: 13.5px; font-weight: 500; color: var(--text); line-height: 1.3; }
.tcard small { display: block; font-size: 12px; color: var(--muted); }
.th { display: block; width: 100%; height: auto; background: var(--fill); }
.lock {
  position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center;
  background: #fff; color: var(--gold); font-size: 15px; box-shadow: 0 1px 4px rgba(16,19,28,.18);
}
.hcard, .tcard { transition: transform .15s; }
.hcard:active, .tcard:active { transform: scale(.97); }

/* kategori görünümü */
.cat-head { display: flex; align-items: baseline; gap: 10px; padding: 24px 16px 14px; }
.cat-head h2 { margin: 0; font-weight: 700; font-size: 22px; letter-spacing: -.3px; order: -1; }
.cat-head small { font-size: 13.5px; color: var(--muted); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 12px; padding: 0 16px; }
.grid2 .tcard { width: auto; max-width: none; }
.empty-q { padding: 48px 16px; color: var(--muted); text-align: center; font-size: 15px; }


/* ============================================================ DÜZENLEYİCİ */
#editor.on { display: flex; flex-direction: column; background: var(--bg2); }
.ed-top {
  flex: none; display: grid; grid-template-columns: 1fr minmax(0, auto) 1fr; align-items: center; gap: 4px;
  padding: calc(var(--top) + 6px) 8px 6px; background: #fff; border-bottom: 1px solid var(--line);
}
.ed-title { text-align: center; min-width: 0; max-width: 46vw; }
.ed-top > .ibtn { justify-self: start; }
.ed-acts { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.ed-acts .ibtn { font-size: 21px; width: 38px; }
.ed-title small { display: block; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ed-title b { display: block; font-weight: 700; font-size: 15.5px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ibtn { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; font-size: 22px; color: var(--text); }
.ibtn.sm { width: 34px; height: 34px; font-size: 18px; color: var(--text2); background: var(--fill); border-radius: 50%; }
.ibtn:active { background: var(--fill); }
.save {
  height: 36px; padding: 0 14px; border-radius: 8px; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; white-space: nowrap;
  color: #fff; background: var(--brand);
}
.save:active { background: var(--brand2); }
.save svg { font-size: 17px; }
.save:disabled { opacity: .6; }

.stage { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 104px 20px 10px; background: var(--bg2); }
#card { touch-action: none; user-select: none; -webkit-user-select: none; display: block; border-radius: 4px; box-shadow: 0 2px 6px rgba(16,19,28,.08), 0 12px 32px rgba(16,19,28,.14); background: #000; }

.strip { flex: none; display: flex; align-items: center; gap: 8px; padding: 4px 16px 10px; background: var(--bg2); }
.slides { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; min-width: 0; padding: 3px; }
.slide { position: relative; flex: none; width: 34px; border-radius: 4px; overflow: hidden; opacity: .55; outline: 2px solid transparent; outline-offset: 2px; transition: opacity .15s; }
.slide.on { opacity: 1; outline-color: var(--brand); }
.slide canvas { display: block; width: 100%; }
.strip-add { flex: none; width: 34px; height: 42px; border-radius: 6px; display: grid; place-items: center; color: var(--text2); background: #fff; border: 1px solid var(--line2); font-size: 16px; }

/* araç paneli */
.tool {
  flex: none; height: 0; overflow: hidden; background: #fff; border-radius: 16px 16px 0 0;
  box-shadow: 0 -6px 24px rgba(16,19,28,.10); transition: height .28s cubic-bezier(.2,.8,.2,1);
}
.tool.open { height: min(48vh, 440px); }
.tool-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 12px 8px 16px; }
.tool-head b { font-weight: 700; font-size: 17px; line-height: 1.2; }
.tool-body { height: calc(100% - 56px); overflow-y: auto; padding: 4px 16px 28px; scrollbar-width: none; }
.pane { display: none; flex-direction: column; gap: 16px; }
.pane.on { display: flex; }

/* alt araç çubuğu */
.dock {
  flex: none; display: flex; overflow-x: auto; scrollbar-width: none; gap: 0; padding: 4px 4px calc(var(--bot) + 4px);
  background: #fff; border-top: 1px solid var(--line);
}
.dock button {
  flex: 1 1 0; min-width: 50px; position: relative; height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  color: var(--text2); font-size: 11px; font-weight: 500;
}
.dock button svg { font-size: 23px; }
.dock button.on { color: var(--brand); font-weight: 600; }
.dock button.on::before { content: ""; position: absolute; top: 0; width: 24px; height: 3px; border-radius: 0 0 3px 3px; background: var(--brand); }
.dock button:disabled { opacity: .3; }

/* şablon seçici */
.tpl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 10px; }
.tpl-grid button { position: relative; text-align: left; }
.tpl-grid .th { border-radius: 8px; box-shadow: 0 0 0 1px var(--line); }
.tpl-grid button.on .th { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--brand); }
.tpl-grid span { display: block; margin-top: 7px; font-size: 12px; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tpl-grid button.on span { color: var(--brand); font-weight: 600; }
.tpl-grid .lock { top: 6px; right: 6px; width: 22px; height: 22px; font-size: 13px; border-radius: 6px; }

/* ============================================================ FORM */
.g { display: flex; flex-direction: column; gap: 14px; }
label { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
label > span, .lbl { font-size: 13px; color: var(--text2); font-weight: 600; }
input:not([type=checkbox]):not([type=range]):not([type=color]):not([type=file]):not([type=search]), textarea, select {
  width: 100%; min-height: 46px; padding: 12px 14px; border-radius: 10px; outline: none; font-size: 15px; color: var(--text);
  background: var(--fill); border: 1px solid transparent; transition: border-color .15s, background .15s;
}
textarea { resize: none; line-height: 1.45; }
input:not([type=checkbox]):not([type=range]):not([type=color]):focus, textarea:focus, select:focus { border-color: var(--brand) !important; background: #fff !important; }
input::placeholder, textarea::placeholder { color: var(--faint); }
input[type=color] { width: 100%; height: 46px; padding: 5px; border-radius: 10px; background: var(--fill); border: 1px solid transparent; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.row3 { display: grid; grid-template-columns: 1.4fr .8fr .8fr; gap: 10px; }

/* açma / kapama */
.checks { display: flex; flex-direction: column; gap: 2px; }
.check { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; font-size: 15px; color: var(--text); }
.check > span { font-size: 15px; color: var(--text); font-weight: 400; order: -1; }
.check.tall { align-self: end; min-height: 46px; }
.check input { appearance: none; position: relative; width: 44px; height: 26px; flex: none; margin: 0; border-radius: 999px; background: var(--fill2); transition: background .2s; }
.check input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(16,19,28,.3); transition: transform .2s; }
.check input:checked { background: var(--brand); }
.check input:checked::after { transform: translateX(18px); }

/* kaydırıcı */
.slider { display: grid; grid-template-columns: 1fr auto; gap: 0 8px; }
.slider b { font-size: 13px; color: var(--text2); font-weight: 600; font-variant-numeric: tabular-nums; }
.slider input { grid-column: 1 / -1; }
input[type=range] { appearance: none; width: 100%; height: 32px; background: none; margin: 0; }
input[type=range]::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--brand) var(--p, 50%), var(--fill2) var(--p, 50%)); }
input[type=range]::-webkit-slider-thumb { appearance: none; width: 22px; height: 22px; margin-top: -9px; border-radius: 50%; background: #fff; border: 1px solid var(--line2); box-shadow: 0 1px 4px rgba(16,19,28,.25); }

.ghost, .file-btn {
  min-height: 44px; padding: 0 14px; border-radius: 10px; display: inline-flex; flex-direction: row; align-items: center; justify-content: center; gap: 8px;
  background: var(--fill); font-weight: 600; font-size: 14px; color: var(--text);
}
.ghost svg, .file-btn svg { font-size: 18px; }
.ghost.wide { width: 100%; }
.ghost.danger { color: var(--danger); background: #fdeeec; }
.ghost:active, .file-btn:active { background: var(--fill2); }
.ghost:disabled { opacity: .4; }
.file-btn input { display: none; }
.file-btn > span, .file-btn { color: var(--text); }
.muted { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.5; }
.acts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.acts .wide { grid-column: 1 / -1; }

.search-row { display: flex; gap: 8px; }
.search-row .search { margin: 0; flex: 1; height: 44px; }
.photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; max-height: 300px; overflow-y: auto; scrollbar-width: none; }
.photo-grid button { aspect-ratio: 4 / 5; border-radius: 8px; background: var(--fill) center/cover; box-shadow: inset 0 0 0 3px transparent; }
.photo-grid button.on { box-shadow: inset 0 0 0 3px var(--brand); }
.photo-grid .muted { grid-column: 1 / -1; padding: 8px 0; }

.seg { display: flex; padding: 3px; gap: 3px; border-radius: 10px; background: var(--fill); }
.seg button { flex: 1; height: 36px; border-radius: 8px; font-size: 13.5px; font-weight: 500; color: var(--text2); }
.seg button.on { background: #fff; color: var(--text); font-weight: 600; box-shadow: 0 1px 3px rgba(16,19,28,.12); }

.logo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; max-height: 250px; overflow-y: auto; scrollbar-width: none; }
.logo-grid button { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; border-radius: 10px; background: var(--fill); }
.logo-grid img { width: 38px; height: 38px; object-fit: contain; }
.logo-grid button.flag img { height: 26px; object-fit: cover; border-radius: 3px; margin: 6px 0; box-shadow: 0 0 0 1px rgba(0,0,0,.08); }
.logo-grid span { font-size: 11px; color: var(--text2); text-align: center; line-height: 1.2; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.logo-grid .muted { grid-column: 1 / -1; }

.sign-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.sign-grid button { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 2px 8px; border-radius: 10px; background: var(--fill); font-size: 12px; color: var(--text2); border: 1px solid transparent; }
.sign-grid button svg { font-size: 24px; color: var(--text); }
.sign-grid button.on { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); font-weight: 600; }
.sign-grid button.on svg { color: var(--brand); }

.swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.swatches button { width: 36px; height: 36px; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(0,0,0,.1); outline: 2px solid transparent; outline-offset: 2px; font-size: 9px; font-weight: 700; color: rgba(0,0,0,.65); }
.swatches button.on { outline-color: var(--brand); }

/* ============================================================ ALT PENCERE */
.sheet-wrap { position: absolute; inset: 0; z-index: 50; display: none; }
.sheet-wrap.on { display: block; }
.sheet-back { position: absolute; inset: 0; background: rgba(16,19,28,.45); animation: fade .2s; }
.sheet {
  position: absolute; left: 0; right: 0; bottom: 0; max-height: 94%; overflow-y: auto; padding: 20px 16px calc(24px + var(--bot)); scrollbar-width: none;
  border-radius: 16px 16px 0 0; background: #fff; box-shadow: 0 -8px 30px rgba(16,19,28,.18);
  animation: up .3s cubic-bezier(.2,.8,.2,1);
}
.sheet h2 { font-weight: 700; font-size: 22px; line-height: 1.2; margin: 0 0 6px; letter-spacing: -.3px; }
.sheet h2 em { font-style: normal; color: var(--brand); }
.sheet p { margin: 0 0 18px; color: var(--text2); font-size: 14.5px; }
.sheet .grip { width: 36px; height: 4px; border-radius: 2px; background: var(--line2); margin: -8px auto 16px; }
.sheet .search { margin: 0; }
.sheet .stack { display: flex; flex-direction: column; gap: 14px; }
@keyframes up { from { transform: translateY(48px); opacity: 0; } }
@keyframes fade { from { opacity: 0; } }

/* Pro: üç örnek kart yan yana, düz (eğik değil), ana sayfadaki kartlarla aynı köşe */
.pw-art { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0 0 20px; }
.pw-art canvas { display: block; width: 100%; height: auto; border-radius: 10px; box-shadow: var(--shadow-card); background: var(--fill); }
.perks { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.perks li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; color: var(--text); }
.perks li svg { color: var(--brand); font-size: 18px; margin-top: 1px; }
.plans { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.plan { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 12px; text-align: left; border: 1.5px solid var(--line2); }
.plan.on { border-color: var(--brand); background: var(--brand-soft); }
.plan .radio { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--line2); flex: none; display: grid; place-items: center; background: #fff; }
.plan.on .radio { border-color: var(--brand); }
.plan.on .radio::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--brand); }
.plan .pt { flex: 1; display: flex; flex-direction: column; }
.plan .pt b { font-weight: 600; font-size: 15px; }
.plan .pt small { color: var(--muted); font-size: 12.5px; }
.plan .pp { font-weight: 700; font-size: 15.5px; font-variant-numeric: tabular-nums; }
.plan .tag { font-size: 11px; font-weight: 700; padding: 3px 7px; border-radius: 6px; color: #fff; background: var(--brand); }
.note { font-size: 12px; color: var(--muted); text-align: center; margin: 12px 0 0; line-height: 1.5; }
.link { display: block; margin: 14px auto 0; color: var(--brand); font-weight: 600; font-size: 14px; }

.btn {
  width: 100%; height: 50px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; font-size: 15.5px;
  background: var(--fill); color: var(--text);
}
.btn.primary { color: #fff; background: var(--brand); }
.btn.primary:active { background: var(--brand2); }
.btn:disabled { opacity: .55; }

/* Sayfan */
.brand-logo { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.brand-logo .avatar { width: 76px; height: 76px; font-size: 28px; }
.brand-logo .stack { flex: 1; gap: 8px !important; }

/* ============================================================ REKLAM */
.ad { position: absolute; inset: 0; z-index: 60; display: none; place-items: center; background: rgba(16,19,28,.75); padding: 24px; }
.ad.on { display: grid; animation: fade .2s; }
.ad-card { width: 100%; max-width: 360px; border-radius: 16px; padding: 20px; background: #fff; text-align: center; }
.ad-card small { color: var(--muted); font-size: 12px; font-weight: 600; }
.ad-body { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 28px 0; }
.ad-body b { font-weight: 700; font-size: 20px; }
.ad-body span { color: var(--text2); font-size: 14px; }

/* ============================================================ BİLDİRİM */
.toast {
  position: absolute; left: 50%; bottom: calc(84px + var(--bot)); z-index: 70; transform: translate(-50%, 12px); opacity: 0; pointer-events: none;
  max-width: calc(100% - 32px); padding: 11px 16px; border-radius: 10px; background: #1b1f2a; color: #fff; font-weight: 500; font-size: 14px; text-align: center;
  box-shadow: 0 8px 24px rgba(16,19,28,.25); transition: .25s;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ============================================================ YAZI TİPİ */
.ts { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 12px; border: 1px solid var(--line); }
.ts-head { display: flex; align-items: center; justify-content: space-between; min-height: 20px; }
.ts-reset { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: var(--brand); }
.ts-reset svg { font-size: 14px; }
.ts-row { display: flex; gap: 8px; }
.font-btn {
  flex: 1; min-width: 0; height: 46px; padding: 0 12px 0 14px; border-radius: 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: var(--fill); text-align: left;
}
.font-btn .fn { font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.font-btn > svg { color: var(--muted); font-size: 16px; flex: none; }
.tog { width: 46px; height: 46px; flex: none; border-radius: 10px; display: grid; place-items: center; font-size: 19px; color: var(--text2); background: var(--fill); }
.tog.on { color: #fff; background: var(--brand); }
.ts .slider { margin-top: 0; }

.fchips { padding: 12px 16px 4px; margin: 0 -16px; }
.font-list { display: flex; flex-direction: column; margin-top: 6px; }
.frow { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 6px 2px; border-bottom: 1px solid var(--line); text-align: left; }
.frow .fname { flex: 1; min-width: 0; font-size: 23px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.frow small { font-size: 12px; color: var(--muted); flex: none; }
.frow > svg { color: var(--brand); font-size: 19px; flex: none; }
.frow.on .fname { color: var(--brand); }
.fsec { padding: 18px 2px 6px; font-size: 13px; font-weight: 700; color: var(--text2); }

/* kartta seçili yazının çerçevesi (sürükleme / iki parmak) */
.sel { position: absolute; pointer-events: none; border: 2px solid var(--brand); border-radius: 4px; box-shadow: 0 0 0 1px rgba(255,255,255,.8); opacity: 0; transition: opacity .15s; }
.sel.on { opacity: 1; }

/* ============================================================ EKLER (2026-10-04) */
.tab-head .tab-sub { margin: 2px 0 0; font-size: 14px; color: var(--muted); }
.tabbar button span { white-space: nowrap; }

/* özel günler şeridi */
.day-card .when { display: block; margin-top: 8px; font-size: 12px; font-weight: 600; color: var(--brand); }
.day-card .when.today { color: var(--danger); }
.day-card .when + b { margin-top: 1px; }
.notif-ask { margin: 14px 16px 0; padding: 12px 12px 12px 14px; border-radius: 12px; display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); }
.notif-ask .na-ic { width: 38px; height: 38px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); font-size: 20px; }
.notif-ask > div { flex: 1; min-width: 0; }
.notif-ask b { display: block; font-size: 14.5px; font-weight: 700; line-height: 1.3; }
.notif-ask span { display: block; font-size: 12.5px; color: var(--text2); line-height: 1.35; margin-top: 1px; }
.notif-ask .na-yes { flex: none; height: 34px; padding: 0 14px; border-radius: 8px; background: var(--brand); color: #fff; font-weight: 600; font-size: 13.5px; }
.notif-ask .na-no { flex: none; width: 28px; height: 28px; display: grid; place-items: center; color: var(--muted); font-size: 16px; }

/* hızlı başla */
.qa { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 0 16px; }
.qa-b { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px; border-radius: 12px; text-align: left; background: var(--bg2); min-width: 0; }
.qa-b:active { background: var(--fill2); }
.qa-ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; margin-bottom: 8px; background: #fff; color: var(--brand); font-size: 20px; box-shadow: 0 1px 2px rgba(16,19,28,.06); }
.qa-b b { font-size: 13.5px; font-weight: 600; line-height: 1.25; color: var(--text); }
.qa-b small { font-size: 11.5px; line-height: 1.3; color: var(--muted); }

/* takvim penceresi */
.cal-m { margin: 20px 0 6px; font-size: 14px; font-weight: 700; color: var(--text2); }
.cal-m:first-child { margin-top: 4px; }
.cal-row { width: 100%; display: flex; align-items: center; gap: 12px; padding: 8px 0; text-align: left; border-bottom: 1px solid var(--line); }
.cal-row:active { opacity: .7; }
.cal-d { width: 48px; height: 52px; flex: none; border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--bg2); border-top: 3px solid var(--dc); }
.cal-d b { font-size: 18px; font-weight: 700; line-height: 1.1; }
.cal-d small { font-size: 11px; color: var(--muted); }

/* Sayfan: sayfa seçici + marka kiti */
.pages-row { display: flex; gap: 14px; overflow-x: auto; margin: 0 -16px 14px; padding: 2px 16px 4px; scrollbar-width: none; }
.pg { flex: none; width: 64px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.pg .avatar { width: 52px; height: 52px; font-size: 19px; }
.pg.on .avatar { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--brand); }
.pg.add .avatar { background: var(--fill); color: var(--text2); font-size: 22px; }
.pg small { max-width: 64px; font-size: 11.5px; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pg.on small { color: var(--brand); font-weight: 600; }
.kit { margin: 18px 0; padding: 14px; border-radius: 12px; border: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.kit p { margin: 0 !important; }
.kit-head { display: flex; align-items: center; justify-content: space-between; }
.kit-head b { display: inline-flex; align-items: center; gap: 8px; font-size: 15.5px; font-weight: 700; }
.kit-head b svg { color: var(--brand); font-size: 19px; }
.pro-tag { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border-radius: 6px; font-size: 12px; font-weight: 700; background: #fff4dc; color: #7a4f00; }
.pro-tag svg { color: var(--gold); font-size: 13px; }
.kit-fonts { display: flex; flex-direction: column; gap: 8px; }
.kit-fonts .fn { font-size: 15.5px !important; }
.kit.locked .swatches, .kit.locked .kit-fonts, .kit.locked .check { opacity: .6; }
.sw-custom { width: 36px; height: 36px; border-radius: 50%; display: grid !important; place-items: center; position: relative; overflow: hidden; color: var(--text2); font-size: 16px;
  background: conic-gradient(#f2453d, #ffc629, #2bd17e, #3aa8ff, #a46bff, #ff4f9a, #f2453d); outline: 2px solid transparent; outline-offset: 2px; }
.sw-custom svg { color: #fff; filter: drop-shadow(0 1px 1px rgba(0,0,0,.4)); }
.sw-custom.on { background: var(--sw); outline-color: var(--brand); }
.sw-custom input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; padding: 0; }
.btn.danger-ghost { background: none; color: var(--danger); height: 44px; }

/* paylaşım ve düzenleyici menüsü */
.sheet .mlist + .mlist { margin-top: 12px; }
.sh-tip { margin: 12px 2px 0 !important; font-size: 12.5px !important; }
.text-quick { margin-bottom: 4px; }
.text-quick .ghost { font-size: 13.5px; }

/* video */
.vid-prev { display: flex; justify-content: center; margin: 2px 0 6px; }
.vid-prev canvas { display: block; max-width: 100%; max-height: 44vh; width: auto; height: auto; border-radius: 10px; background: #000; box-shadow: var(--shadow-card); }
.vchips { margin: 0 -16px 4px; }

/* Keşfet (topluluk) */
#kesfet-body { padding-bottom: 8px; }
.com-top { display: flex; align-items: center; gap: 10px; padding: 14px 16px 0; }
.com-top select { flex: 1; min-height: 36px !important; height: 36px; padding: 0 10px !important; font-size: 13.5px !important; border-radius: 8px !important; }
.com-tip { margin-top: 14px; }
.com-load { padding: 40px 16px; text-align: center; }
.com-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 12px; padding: 18px 16px 0; }
.ccard { position: relative; text-align: left; }
.ccard img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; box-shadow: var(--shadow-card); background: var(--fill); }
.cc-t { display: flex; flex-direction: column; margin-top: 8px; min-width: 0; }
.cc-t b { font-size: 13.5px; font-weight: 600; line-height: 1.3; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-t small { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-l { position: absolute; top: 8px; right: 8px; display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 8px; border-radius: 6px; font-size: 12px; font-weight: 600; background: rgba(255,255,255,.94); color: var(--text); }
.cc-l svg { font-size: 14px; }
.cc-l.on svg { color: #e0245e; }
.ghost.danger { color: var(--danger); }

/* davet */
.inv-code { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px; margin-bottom: 14px; border-radius: 12px; background: var(--brand-soft); text-align: center; }
.inv-code small { font-size: 12.5px; color: var(--text2); font-weight: 600; }
.inv-code b { font-size: 32px; font-weight: 800; letter-spacing: .12em; color: var(--brand); }
.inv-code span { font-size: 12.5px; color: var(--text2); }
.inv-enter { margin-top: 22px; display: flex; flex-direction: column; gap: 8px; }
.empty.sm { padding: 18px 12px 8px; }

/* ============================================================ düzenleyici: Geri al / Sıfırla, parça menüsü, Efekt */
.stage-bar { position: absolute; top: 10px; left: 0; right: 0; display: flex; justify-content: center; gap: 8px; z-index: 3; pointer-events: none; }
.sbtn { pointer-events: auto; height: 34px; min-width: 38px; padding: 0 10px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: #fff; color: var(--text); font-size: 13px; font-weight: 600; box-shadow: 0 1px 2px rgba(16,19,28,.08), 0 0 0 1px var(--line); }
.sbtn svg { font-size: 18px; }
.sbtn:disabled { opacity: .4; }
.sbtn:not(:disabled):active { background: var(--fill); }

.part-menu { position: absolute; z-index: 6; display: none; align-items: center; gap: 2px; padding: 4px; border-radius: 12px; background: var(--text); box-shadow: 0 8px 24px rgba(16,19,28,.3); }
.part-menu.on { display: flex; }
.part-menu b { padding: 0 8px 0 10px; font-size: 12px; font-weight: 600; color: rgba(255,255,255,.6); white-space: nowrap; }
.part-menu button { height: 36px; padding: 0 10px; border-radius: 8px; display: inline-flex; align-items: center; gap: 6px; color: #fff; font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.part-menu button svg { font-size: 17px; }
.part-menu button:active { background: rgba(255,255,255,.12); }
.part-menu [data-pm="del"] { color: #ff8a80; }

.fx-parts { margin: 0 -16px; padding: 4px 16px 6px; }
.fx-parts .chip.off { color: var(--muted); background: #fff; box-shadow: inset 0 0 0 1px dashed var(--line2); }
.fx-parts .chip.off svg { font-size: 15px; }
.fx-head { display: flex; align-items: center; justify-content: space-between; margin: 12px 0 8px; }
.fx-head b { font-size: 15px; font-weight: 700; }
.fx-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.fxb { height: 74px; border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; background: var(--fill); }
.fxb.on { background: var(--brand-soft); box-shadow: inset 0 0 0 2px var(--brand); }
.fxb small { font-size: 12px; color: var(--text2); font-weight: 500; }
.fxb.on small { color: var(--brand); font-weight: 600; }
.fxs { font-size: 24px; font-weight: 800; line-height: 1; color: var(--text); letter-spacing: -.02em; }
.fx-golge .fxs { text-shadow: 0 3px 6px rgba(0,0,0,.45); }
.fx-cizgi .fxs { color: #fff; -webkit-text-stroke: 1.5px var(--text); }
.fx-neon .fxs { color: #fff; text-shadow: 0 0 6px var(--brand), 0 0 12px var(--brand); }
.fx-kutu .fxs { color: #fff; background: var(--text); padding: 2px 7px; border-radius: 5px; }

.hidden-parts { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 12px; background: var(--bg2); margin-bottom: 4px; }
.hp-row { display: flex; flex-wrap: wrap; gap: 8px; }
.hp { height: 34px; padding: 0 12px; border-radius: 8px; display: inline-flex; align-items: center; gap: 6px; background: #fff; color: var(--brand); font-size: 13px; font-weight: 600; box-shadow: inset 0 0 0 1px var(--line2); }
.hp svg { font-size: 16px; }

/* renk seçici: düğme + açılır palet */
.cpick { display: flex; flex-direction: column; gap: 10px; }
.cbtn { width: 100%; min-height: 46px; padding: 0 12px; border-radius: 10px; display: flex; align-items: center; gap: 10px; background: var(--fill); text-align: left; }
.cdot { width: 24px; height: 24px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
.cdot.none { background: conic-gradient(#f2453d, #ffc629, #2bd17e, #3aa8ff, #a46bff, #ff4f9a, #f2453d); }
.cbtn .cl { flex: 1; min-width: 0; font-size: 14.5px; font-weight: 500; color: var(--text); }
.cbtn small { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.cbtn .cchev { color: var(--muted); font-size: 15px; transition: transform .2s; }
.cpick.open .cchev { transform: rotate(180deg); }
.pal { display: flex; flex-wrap: wrap; gap: 9px; padding: 2px 2px 4px; }
.pal button, .pal .swc { width: 34px; height: 34px; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); outline: 2px solid transparent; outline-offset: 2px; }
.pal button.on { outline-color: var(--brand); }
.pal .sw0 { width: auto; padding: 0 10px; border-radius: 17px; background: #fff; font-size: 11.5px; font-weight: 700; color: var(--text2); }
.pal .swc { position: relative; display: grid !important; place-items: center; overflow: hidden; color: #fff; font-size: 15px;
  background: conic-gradient(#f2453d, #ffc629, #2bd17e, #3aa8ff, #a46bff, #ff4f9a, #f2453d); }
.pal .swc input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; padding: 0; }
.pal .swc svg { filter: drop-shadow(0 1px 1px rgba(0,0,0,.4)); }
.ts [data-col] .cbtn, .g > [data-col] .cbtn { background: #fff; box-shadow: inset 0 0 0 1px var(--line); }

/* Efekt / Animasyon ayar kutuları */
.fx-opts, .fx-gen { display: flex; flex-direction: column; gap: 14px; margin-bottom: 14px; }
.fx-opts { padding: 12px; border-radius: 12px; background: var(--brand-soft); }
.fx-opts .cbtn { background: #fff; }
.fx-parts .chip.anim span::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 6px; border-radius: 50%; background: var(--gold); vertical-align: middle; }
.fx-parts .chip.on.anim span::after { background: #fff; }

/* animasyon seçenekleri: küçük hareket önizlemesi */
.an-grid { grid-template-columns: repeat(3, 1fr); }
.anb { height: 74px; border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: var(--fill); }
.anb.on { background: var(--brand-soft); box-shadow: inset 0 0 0 2px var(--brand); }
.anb small { font-size: 12px; color: var(--text2); font-weight: 500; }
.anb.on small { color: var(--brand); font-weight: 600; }
.ans { width: 34px; height: 22px; display: grid; place-items: center; overflow: hidden; }
.ans i { display: block; width: 26px; height: 8px; border-radius: 3px; background: var(--text); }
.anb.on .ans i { background: var(--brand); }
.an-belir .ans i { animation: anBelir 1.6s infinite; }
.an-kay .ans i { animation: anKay 1.6s infinite; }
.an-soldan .ans i { animation: anSol 1.6s infinite; }
.an-sagdan .ans i { animation: anSag 1.6s infinite; }
.an-buyu .ans i { animation: anBuyu 1.6s infinite; }
.an-zipla .ans i { animation: anZipla 1.6s infinite; }
.an-don .ans i { animation: anDon 1.6s infinite; }
.an-yazi .ans i { animation: anYazi 1.6s infinite steps(6); transform-origin: left; }
@keyframes anBelir { 0% { opacity: 0; } 50%, 100% { opacity: 1; } }
@keyframes anKay { 0% { opacity: 0; transform: translateY(12px); } 50%, 100% { opacity: 1; transform: none; } }
@keyframes anSol { 0% { opacity: 0; transform: translateX(-24px); } 50%, 100% { opacity: 1; transform: none; } }
@keyframes anSag { 0% { opacity: 0; transform: translateX(24px); } 50%, 100% { opacity: 1; transform: none; } }
@keyframes anBuyu { 0% { opacity: 0; transform: scale(.3); } 35% { transform: scale(1.15); } 50%, 100% { opacity: 1; transform: none; } }
@keyframes anZipla { 0% { transform: translateY(-16px); } 20% { transform: none; } 30% { transform: translateY(-6px); } 40%, 100% { transform: none; } }
@keyframes anDon { 0% { opacity: 0; transform: rotate(-90deg) scale(.6); } 50%, 100% { opacity: 1; transform: none; } }
@keyframes anYazi { 0% { transform: scaleX(0); } 60%, 100% { transform: scaleX(1); } }
#an-video { margin-top: 12px; }

/* alt araç çubuğu: 8 sekme dar ekrana sığsın */
.dock button { flex: 1 1 auto; min-width: 0; padding: 0 2px; font-size: 10.5px; letter-spacing: -.1px; }
.dock button span { white-space: nowrap; }
.dock button svg { font-size: 22px; }

/* çok sayfalı şablon etiketi */
.pages-tag { position: absolute; left: 8px; top: 8px; display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border-radius: 6px; background: rgba(16,19,28,.78); color: #fff; font-size: 11.5px; font-weight: 600; }
.pages-tag svg { font-size: 13px; }

/* Ekle çubuğu (kartın üstünde) */
.add-bar { position: absolute; top: 54px; left: 0; right: 0; z-index: 3; display: flex; justify-content: center; gap: 6px; padding: 0 12px; overflow-x: auto; scrollbar-width: none; }
.add-bar button { flex: none; height: 40px; padding: 0 11px; border-radius: 10px; display: inline-flex; align-items: center; gap: 6px; background: #fff; color: var(--text); font-size: 13px; font-weight: 600;
  box-shadow: 0 1px 2px rgba(16,19,28,.08), 0 0 0 1px var(--line); }
.add-bar button svg { font-size: 18px; color: var(--brand); }
.add-bar button:active { background: var(--fill); }
/* şekil ve simge seçici */
.shape-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.shape-grid.sm { grid-template-columns: repeat(7, 1fr); gap: 6px; }
.shape-grid button { height: 86px; border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: var(--fill); }
.shape-grid.sm button { height: 58px; gap: 4px; }
.shape-grid.sm small { display: none; }
.shape-grid button.on { background: var(--brand-soft); box-shadow: inset 0 0 0 2px var(--brand); }
.shape-grid small { font-size: 11.5px; color: var(--text2); }
.sh { display: block; width: 34px; height: 34px; background: var(--text); }
.sh-round { border-radius: 8px; } .sh-circle { border-radius: 50%; }
.sh-tri { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.sh-star { clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.sh-line { height: 5px; border-radius: 3px; }
.sh-arrow { height: 5px; border-radius: 3px; position: relative; }
.sh-arrow::after { content: ""; position: absolute; right: -2px; top: -6px; border-left: 10px solid var(--text); border-top: 8px solid transparent; border-bottom: 8px solid transparent; }
.icon-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.icon-grid button { aspect-ratio: 1; border-radius: 10px; display: grid; place-items: center; background: var(--fill); font-size: 28px; color: var(--text); }
.icon-grid button:active { background: var(--brand-soft); color: var(--brand); }
#layer-body .acts { margin-top: 4px; }
/* Ekle çubuğu: dar ekranda sığsın (simge üstte, yazı altta); sığmazsa kayar, başı kesilmez */
.add-bar { top: 50px; justify-content: flex-start; }
.add-bar::before, .add-bar::after { content: ""; margin: auto; }
.add-bar button { flex-direction: column; justify-content: center; height: 50px; min-width: 54px; padding: 0 8px; gap: 2px; font-size: 11.5px; }
.stage { padding-top: 112px; }
.add-bar { gap: 4px; padding: 0 8px; }
.add-bar button { min-width: 50px; padding: 0 6px; }

/* Ekle çubuğu: yan yana simge + yazı (Logo kalkınca sığıyor); sığmazsa kayar, başı kesilmez */
.add-bar { top: 54px; gap: 5px; padding: 0 10px; }
.add-bar button { flex-direction: row; height: 40px; min-width: 0; padding: 0 9px; gap: 5px; font-size: 12.5px; }
.add-bar button svg { font-size: 17px; }
.stage { padding-top: 104px; }
/* parça menüsü: simge üstte, yazı altta */
.part-menu { gap: 0; padding: 4px; }
.part-menu b { display: none; }
.part-menu button { flex-direction: column; height: 50px; min-width: 54px; padding: 0 6px; gap: 3px; font-size: 11px; justify-content: center; }
.part-menu button svg { font-size: 19px; }
/* seçili öğenin tutamakları: ince çerçeve; köşelikler ve kenar çubukları öğenin büyüklüğüne göre incelir (--hc, --hb, --ht) */
.stage { overflow: hidden; }
.hdl { position: absolute; inset: 0; pointer-events: none; z-index: 4; display: none; }
.hdl.on { display: block; }
.hd-frame { position: absolute; box-shadow: 0 0 0 1.5px var(--brand), 0 0 0 2.5px rgba(255,255,255,.7); pointer-events: none; --hc: 14px; --hb: 18px; --ht: 4px; }
.hd { position: absolute; pointer-events: auto; touch-action: none; }
.hd::after { content: ""; position: absolute; inset: -14px; }
.hd-tl, .hd-tr, .hd-bl, .hd-br { width: var(--hc); height: var(--hc); border: 0 solid var(--brand); filter: drop-shadow(0 0 1px #fff); }
.hd-tl { left: -2px; top: -2px; border-top-width: var(--ht); border-left-width: var(--ht); }
.hd-tr { right: -2px; top: -2px; border-top-width: var(--ht); border-right-width: var(--ht); }
.hd-bl { left: -2px; bottom: -2px; border-bottom-width: var(--ht); border-left-width: var(--ht); }
.hd-br { right: -2px; bottom: -2px; border-bottom-width: var(--ht); border-right-width: var(--ht); }
.hd-t, .hd-b { left: 50%; width: var(--hb); height: var(--ht); transform: translateX(-50%); border-radius: 2px; background: var(--brand); box-shadow: 0 0 0 1px #fff; }
.hd-t { top: calc(var(--ht) / -2); } .hd-b { bottom: calc(var(--ht) / -2); }
.hd-l, .hd-r { top: 50%; width: var(--ht); height: var(--hb); transform: translateY(-50%); border-radius: 2px; background: var(--brand); box-shadow: 0 0 0 1px #fff; }
.hd-l { left: calc(var(--ht) / -2); } .hd-r { right: calc(var(--ht) / -2); }
.hd-rot { left: 50%; bottom: -44px; width: 30px; height: 30px; margin-left: -15px; border-radius: 50%; background: #fff; color: var(--text); display: grid; place-items: center; font-size: 17px; box-shadow: 0 1px 4px rgba(16,19,28,.3); }
/* üst satır: Kontur / Köşe yuvarlatma ve altında açılan çubuk */
.sb-sep { width: 1px; height: 22px; align-self: center; margin: 0 2px; background: var(--line2); }
.sbtn.on { background: var(--brand-soft); color: var(--brand); box-shadow: 0 0 0 1.5px var(--brand); }
.tb-pop { position: absolute; top: 50px; left: 50%; transform: translateX(-50%); z-index: 7; width: min(340px, calc(100% - 24px)); display: none; flex-direction: column; gap: 12px;
  padding: 14px; border-radius: 14px; background: #fff; box-shadow: 0 8px 28px rgba(16,19,28,.18), 0 0 0 1px var(--line); }
.tb-pop.on { display: flex; }
.pop-row { display: flex; gap: 8px; }
.ps { flex: 1; height: 42px; border-radius: 10px; display: grid; place-items: center; background: #fff; box-shadow: inset 0 0 0 1.5px var(--line2); color: var(--text2); font-size: 18px; }
.ps.on { box-shadow: inset 0 0 0 2px var(--brand); color: var(--brand); }
.ps i { display: block; width: 30px; border-top: 3px solid var(--text); }
.ps-dash i { border-top-style: dashed; } .ps-dash2 i { border-top: 2px dashed var(--text); } .ps-dot i { border-top-style: dotted; }
/* Ekle düğmeleri: kayan çubuk üst / alt kenarı kesmesin — gerçek kenarlık + dikey boşluk */
.add-bar { top: 51px; padding: 3px 10px; }
.add-bar button { box-shadow: 0 1px 2px rgba(16,19,28,.06); border: 1px solid var(--line2); }
/* parça menüsü dar ekranda iki satıra iner */
.part-menu { flex-wrap: wrap; justify-content: center; max-width: calc(100% - 12px); }
.part-menu button { min-width: 50px; padding: 0 5px; }

/* silgi: parmağın altında boyut halkası */
.erase-ring { position: absolute; z-index: 5; pointer-events: none; display: none; transform: translate(-50%, -50%); border-radius: 50%; border: 2px solid var(--brand); background: rgba(35,52,154,.12); }
.erase-ring.on { display: block; }
.pop-tip { margin: 0 !important; font-size: 12.5px; }
.stage-bar { gap: 6px; }
.sbtn { min-width: 36px; padding: 0 9px; }
/* silgi ayarı kartın altında, küçük */
.tb-pop.bottom { top: auto; bottom: 8px; gap: 8px; padding: 10px 12px; }
.tb-pop.bottom .row2 .ghost { font-size: 12.5px; min-height: 38px; }
.tb-pop.bottom .btn { height: 40px; font-size: 14px; }
.tb-pop.bottom { padding: 8px 10px; border-radius: 12px; }
.er-row { display: flex; align-items: center; gap: 6px; }
.er-row .slider { flex: 1; min-width: 0; margin: 0; }
.er-row .slider > span { font-size: 12px; }
.er-b { width: 38px; height: 38px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--fill); font-size: 18px; color: var(--text); }
.er-done { height: 38px; flex: none; padding: 0 14px; border-radius: 10px; background: var(--brand); color: #fff; font-weight: 600; font-size: 13.5px; }

/* döndürme ve konumlandırma düğmeleri: seçimin altında yan yana (küçük öğede köşeyle çakışmasın diye biraz aşağıda) */
.hd-rot { bottom: -56px; margin-left: -35px; }
.hd-pos { left: 50%; bottom: -56px; width: 30px; height: 30px; margin-left: 5px; border-radius: 50%; background: #fff; color: var(--text); display: grid; place-items: center; font-size: 17px; box-shadow: 0 1px 4px rgba(16,19,28,.3); }
.hd-rot::after, .hd-pos::after { inset: -6px; }
/* hizalama çizgileri: kartın ortasına gelince */
.guide { position: absolute; z-index: 3; pointer-events: none; display: none; background: #d63ce0; }
.guide.on { display: block; }
.guide.v { width: 1.5px; margin-left: -.75px; }
.guide.h { height: 1.5px; margin-top: -.75px; }

/* favori kalbi: şablon kartının sağ üst köşesi (kilitliyse kilidin solunda) */
.fav { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.92); color: var(--text2); font-size: 16px; box-shadow: 0 1px 4px rgba(16,19,28,.2); }
.fav.with-lock { right: 40px; }
.fav.on { color: #e5364b; }
.fav:active { transform: scale(.9); }
.hcard .fav { top: 10px; right: 10px; } .hcard .fav.with-lock { right: 44px; }

/* ============================================================ BİLEŞENLER (web/bilesen.js) */
.add-bar .bl-add { background: var(--brand); color: #fff; border-color: var(--brand) !important; }
.add-bar .bl-add svg { color: #fff; }
.bl { min-height: 78vh; }
.bl-top { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.bl-top h2 { flex: 1; margin: 0 !important; }
.bl-top .bl-backbtn { width: 36px; height: 36px; margin-left: -6px; }
.bl-q { margin-bottom: 14px !important; }
.bl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 12px; padding: 4px 0 6px; }
.bl-tile { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.bl-tile small { font-size: 12.5px; font-weight: 500; color: var(--text); text-align: center; line-height: 1.25; }
.bl-art { position: relative; width: 78%; aspect-ratio: 1; }
.bl-back, .bl-front { position: absolute; inset: 0; border-radius: 22%; }
.bl-back { background: var(--a); opacity: .45; transform: translate(9%, -7%) rotate(9deg); }
.bl-front { display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(120% 90% at 20% 10%, rgba(255,255,255,.38), transparent 55%), linear-gradient(150deg, var(--a), var(--b));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -6px 14px rgba(0,0,0,.18), 0 6px 14px rgba(16,19,28,.18); }
.bl-front::after { content: ""; position: absolute; inset: 0; opacity: .18; mix-blend-mode: overlay;
  background: repeating-linear-gradient(115deg, rgba(255,255,255,.5) 0 1px, transparent 1px 5px); }
.bl-front svg { width: 72%; height: 72%; position: relative; z-index: 1; filter: drop-shadow(0 2px 2px rgba(0,0,0,.18)); }
.bl-tile:active .bl-front { transform: scale(.95); }
.bl-pro { position: absolute; top: -6px; right: -6px; z-index: 2; width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; background: #fff; color: var(--gold); font-size: 14px; box-shadow: 0 1px 4px rgba(16,19,28,.2); }
.bl-note { font-size: 12.5px !important; margin: 16px 0 0 !important; line-height: 1.45; }
.bl-note.top { margin: 0 0 14px !important; }
.bl-sub { margin: 18px 0 10px; font-size: 14px; font-weight: 700; color: var(--text2); }
.bl-items { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.bl-items.wide { grid-template-columns: repeat(2, 1fr); }
.bl-item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 4px 8px; border-radius: 12px;
  background: linear-gradient(180deg, #faf9f7, #f1efeb); box-shadow: inset 0 0 0 1px rgba(16,19,28,.05); }
.bl-item .bl-pv { width: 100%; aspect-ratio: 1; display: grid; place-items: center; }
.bl-item canvas { width: 100%; height: auto; display: block; }
.bl-item small { font-size: 11.5px; color: var(--text2); text-align: center; line-height: 1.2; }
.bl-item .bl-pro { top: 4px; right: 4px; }
.bl-item:active { background: var(--brand-soft); }
.bl-more { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
.bl-sbar { display: flex; gap: 8px; }
.bl-sbar input { flex: 1; min-width: 0; }
.btn.sm { height: 46px; width: 50px; padding: 0; flex: none; display: grid; place-items: center; }
.bl-chips { padding: 10px 0 2px; margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
.bl-res { margin-top: 14px; }
.bl-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.bl-photos button { position: relative; aspect-ratio: 3 / 4; border-radius: 8px; background: var(--fill) center/cover; }
.bl-photos.up button { aspect-ratio: 1; }
.bl-photos button.busy, .bl-icons button.busy, .bl-draws button.busy { opacity: .45; }
.bl-dur { position: absolute; left: 6px; bottom: 6px; padding: 2px 6px; border-radius: 5px; background: rgba(16,19,28,.7); color: #fff; font-size: 11px; font-weight: 600; }
.bl-del { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: rgba(16,19,28,.65); color: #fff; font-size: 13px; }
.bl-credit { font-size: 11.5px !important; margin: 10px 0 0 !important; }
.bl-icons img { width: 30px; height: 30px; }
.bl-draws { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.bl-draws button { aspect-ratio: 1; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); display: grid; place-items: center; padding: 6px; }
.bl-draws img { max-width: 100%; max-height: 100%; }
.bl-form { display: flex; flex-direction: column; gap: 14px; }
.bl-qr-pv { display: grid; place-items: center; padding: 10px; border-radius: 12px; background: var(--fill); }
.empty.sm { padding: 30px 16px 0; }
/* müzik listesi */
.bl-mus { display: flex; flex-direction: column; gap: 8px; }
.mus-row { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 12px; background: var(--fill); }
.mus-row.on { background: var(--brand-soft); box-shadow: inset 0 0 0 2px var(--brand); }
.mus-row .mt { flex: 1; display: flex; flex-direction: column; }
.mus-row .mt b { font-size: 14.5px; }
.mus-play { width: 42px; height: 42px; flex: none; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--brand); font-size: 18px; box-shadow: 0 1px 3px rgba(16,19,28,.15); }
.mus-play.on-play { background: var(--brand); color: #fff; }
.mus-play.static { color: var(--text2); }
.ghost.sm { height: 36px; padding: 0 12px; font-size: 13px; }
.vd-mus { margin: 4px 0 12px; }
.vd-mus b { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.vd-mus .chips { padding: 8px 0 2px; }
/* düzenle paneli */
.bl-row { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 2px 16px 4px; }
.bl-row button { position: relative; flex: none; width: 64px; height: 64px; border-radius: 10px; background: var(--fill); display: grid; place-items: center; padding: 4px; }
.bl-row button canvas { width: 100%; height: 100%; }
.bl-row button.on { background: var(--brand-soft); box-shadow: inset 0 0 0 2px var(--brand); }
.bl-row .bl-pro { top: 2px; right: 2px; width: 18px; height: 18px; font-size: 11px; border-radius: 5px; }
.bl-rows { display: flex; flex-direction: column; gap: 6px; }
.bl-drow { display: grid; grid-template-columns: 1fr 92px 34px; gap: 6px; align-items: center; }
.bl-tscroll { overflow-x: auto; scrollbar-width: none; }
.bl-tgrid { display: grid; gap: 4px; min-width: 100%; }
.bl-tgrid input { height: 40px; padding: 0 8px; font-size: 13.5px; min-width: 0; }
.bl-tgrid input.th { font-weight: 700; background: var(--brand-soft); }
.bl-tacts { display: flex; flex-wrap: wrap; gap: 6px; }
.bl-cells { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.bl-cells button { position: relative; aspect-ratio: 1; border-radius: 10px; background: var(--fill); display: grid; place-items: center; overflow: hidden; font-size: 22px; color: var(--text2); }
.bl-cells canvas { width: 100%; height: 100%; }
.bl-cells small { position: absolute; left: 5px; top: 4px; font-size: 11px; font-weight: 700; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.an-loop-h { display: flex; align-items: baseline; gap: 8px; margin: 18px 0 8px; }
.an-loop-h b { font-size: 14px; }
.an-loop-h small { font-size: 12px; color: var(--muted); }
/* sürekli hareket önizlemeleri (animasyon paneli + bileşen kutuları) */
.lp-nabiz .ans i, .bl-item.lp-nabiz canvas, .bl-row .lp-nabiz canvas { animation: lpNabiz 1.2s ease-in-out infinite; }
.lp-salla .ans i, .bl-item.lp-salla canvas, .bl-row .lp-salla canvas { animation: lpSalla 1.2s ease-in-out infinite; }
.lp-zipla .ans i, .bl-item.lp-zipla canvas, .bl-row .lp-zipla canvas { animation: lpZipla 1.2s ease-in-out infinite; }
.lp-suzul .ans i, .bl-item.lp-suzul canvas, .bl-row .lp-suzul canvas { animation: lpSuzul 1.6s ease-in-out infinite; }
.lp-it .ans i, .bl-item.lp-it canvas, .bl-row .lp-it canvas { animation: lpIt 1.2s ease-in-out infinite; }
.lp-don .ans i, .bl-item.lp-don canvas, .bl-row .lp-don canvas { animation: lpDon 2s linear infinite; }
.lp-yanip .ans i, .bl-item.lp-yanip canvas, .bl-row .lp-yanip canvas { animation: lpYanip 1.2s ease-in-out infinite; }
@keyframes lpNabiz { 50% { transform: scale(1.12); } }
@keyframes lpSalla { 25% { transform: rotate(-8deg); } 75% { transform: rotate(8deg); } }
@keyframes lpZipla { 50% { transform: translateY(-14%); } }
@keyframes lpSuzul { 25% { transform: translateY(-6%); } 75% { transform: translateY(6%); } }
@keyframes lpIt { 50% { transform: translateX(10%); } }
@keyframes lpDon { to { transform: rotate(360deg); } }
@keyframes lpYanip { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { [class*="lp-"] canvas, [class*="lp-"] .ans i { animation: none !important; } }

/* çerçeveye bırakma: hedefin üstünde vurgu */
.drop-hl { position: absolute; z-index: 4; pointer-events: none; display: none; border-radius: 6px; box-shadow: 0 0 0 2.5px #8b5cf6, 0 0 0 5px rgba(139,92,246,.25); }
.drop-hl.on { display: block; }
.bl-tabs { margin-bottom: 12px; }
.bl-art.pic img { position: absolute; inset: -6%; width: 112%; height: 112%; object-fit: contain; }
.bl-tile:active .bl-art.pic img { transform: scale(.95); }

/* Ekle çubuğu: Metin, Görsel, Video yalnız simge (satır telefona sığsın) */
.add-bar button.only { width: 42px; min-width: 42px; padding: 0; justify-content: center; }
.add-bar button.only span { display: none; }
.add-bar button.only svg { font-size: 20px; }
@media (max-width: 400px) {
  .add-bar { gap: 4px; padding-left: 8px; padding-right: 8px; }
  .add-bar button:not(.only) { padding: 0 8px; gap: 4px; font-size: 12px; }
  .add-bar button:not(.only) svg { font-size: 16px; }
  .add-bar button.only { width: 38px; min-width: 38px; }
}

.bl-none { padding: 18px 0; text-align: center; font-size: 13.5px; }

/* kartta yerinde yazı düzenleme kutusu */
.inl { position: absolute; z-index: 6; display: none; align-items: flex-end; gap: 6px; padding: 6px; border-radius: 14px; background: #fff;
  box-shadow: 0 10px 30px rgba(16,19,28,.22), 0 0 0 2px var(--brand); }
.inl.on { display: flex; }
.inl textarea { flex: 1; min-width: 0; min-height: 40px; max-height: 150px; padding: 9px 10px; border: 0; border-radius: 10px; background: var(--fill); font-size: 16px; line-height: 1.35; resize: none; }
.inl-ok { width: 40px; height: 40px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--brand); color: #fff; font-size: 20px; }
/* klavye açıkken: kart büyük kalsın */
#editor.kb .stage-bar, #editor.kb .add-bar, #editor.kb .strip, #editor.kb .dock, #editor.kb .tool-head { display: none !important; }
#editor.kb .stage { padding-top: 8px; padding-bottom: 6px; }
#editor.kb .tool.open { height: 128px; }
#editor.kb .hdl, #editor.kb .part-menu { display: none !important; }

/* bileşen kutucukları (yeni dil): tek kart, mat koyu renk, üstten hafif ışık, ince baskı dokusu, krem simge + pirinç ayrıntı */
.bl-art { width: 74%; }
.bl-art .bl-front { border-radius: 24%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"),
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0) 46%, rgba(0,0,0,.10)),
    linear-gradient(170deg, var(--a), var(--b));
  background-size: 120px 120px, auto, auto; background-blend-mode: soft-light, normal, normal;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(0,0,0,.18), 0 1px 2px rgba(16,19,28,.14), 0 5px 12px rgba(16,19,28,.13); }
.bl-art .bl-front::after { display: none; }
.bl-art .bl-front svg { width: 78%; height: 78%; filter: drop-shadow(0 1px .6px rgba(0,0,0,.28)); }

/* yerinde düzenleme (yeni): kartın üstünde, yazının kendi biçimiyle; ince kesikli çerçeve + yanında tik */
.inl { padding: 0 !important; background: transparent !important; box-shadow: none !important; border-radius: 4px !important; display: none; outline: 1.5px dashed var(--brand); outline-offset: 2px; }
.inl.on { display: block !important; }
.inl textarea { display: block; width: 100%; min-height: 0 !important; max-height: none !important; margin: 0; border: 0; border-radius: 0 !important;
  background: rgba(255,255,255,.0) !important; resize: none; overflow: hidden; caret-color: var(--brand); white-space: pre-wrap; word-break: break-word; }
.inl textarea:focus { outline: none; box-shadow: none; }
.inl-ok { position: absolute; right: -6px; top: -48px; width: 40px !important; height: 40px !important; border-radius: 50% !important; box-shadow: 0 4px 12px rgba(16,19,28,.25); }
/* Düzenle ile gelinen alan kısa bir an vurgulanır */
label.flash > textarea, label.flash > input, .flash { animation: fieldFlash 1.4s ease; }
@keyframes fieldFlash { 0%, 60% { box-shadow: 0 0 0 3px var(--brand); } 100% { box-shadow: 0 0 0 0 transparent; } }
.bl-art.pic img { inset: 0 !important; width: 100% !important; height: 100% !important; filter: drop-shadow(0 4px 8px rgba(16,19,28,.16)); }

/* Diğer (⋯) penceresi */
.mm-head { display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; margin: -6px 0 10px; }
.mm-head b { text-align: center; font-size: 16px; }
.mm-acts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 6px 0 14px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.mm-acts button { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 0; border-radius: 10px; font-size: 12.5px; color: var(--text); }
.mm-acts button svg { font-size: 24px; }
.mm-acts button:disabled { opacity: .35; }
.mm-acts button.danger { color: var(--danger, #d23b2f); }
.mm-acts button:active { background: var(--fill); }
.mm .mrow.off { opacity: .35; }
/* yerinde düzenleme: klavyenin üstünde yazı çubuğu */
.tbar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 40; display: none; flex-direction: column; background: #fff; box-shadow: 0 -4px 18px rgba(16,19,28,.12); padding: 6px 8px calc(6px + var(--bot)); }
.tbar.on { display: flex; }
.tb-row { display: flex; align-items: center; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.tb-row > button, .tb-size button { flex: none; height: 44px; min-width: 42px; padding: 0 8px; border-radius: 10px; display: grid; place-items: center; font-size: 20px; color: var(--text); }
.tb-row > button.on { background: var(--brand-soft); color: var(--brand); }
.tb-col { position: relative; }
.tb-col i { position: absolute; left: 11px; right: 11px; bottom: 8px; height: 4px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(16,19,28,.15); }
.tb-font { font-size: 14px !important; font-weight: 600; max-width: 120px; }
.tb-font span { display: block; max-width: 104px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-size { flex: none; display: flex; align-items: center; gap: 0; border-radius: 10px; background: var(--fill); }
.tb-size b { min-width: 40px; text-align: center; font-size: 14px; }
.tb-size button { min-width: 34px !important; font-size: 16px !important; }
.tb-ok { margin-left: auto; background: var(--brand) !important; color: #fff !important; border-radius: 50% !important; width: 44px; }
.tb-pal { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 4px 2px 10px; }
.tb-pal button { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(16,19,28,.15); }
.tb-pal button.on { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--brand); }
.tb-pal .sw0 { width: auto; padding: 0 10px; border-radius: 17px; background: var(--fill); font-size: 12px; font-weight: 600; }
#editor.kb .inl-ok { display: none; }
.inl-ok { display: none !important; }

.tb-row { overflow: visible !important; gap: 6px !important; }
.tb-scroll { flex: 1; min-width: 0; display: flex; align-items: center; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.tb-scroll > button { flex: none; height: 44px; min-width: 40px; padding: 0 7px; border-radius: 10px; display: grid; place-items: center; font-size: 20px; color: var(--text); }
.tb-scroll > button.on { background: var(--brand-soft); color: var(--brand); }
.tb-font { max-width: 92px !important; }
.tb-font span { max-width: 80px !important; }
.tb-ok { flex: none; margin-left: 0 !important; }

/* yazı çubuğu (yeni) */
.tb-col { position: relative; width: 44px; }
.tb-col .tc-a { font: 600 20px/1 var(--sans); margin-top: -8px; }
.tb-col .tc-rb { position: absolute; left: 10px; right: 10px; bottom: 13px; height: 2px; border-radius: 1px; background: linear-gradient(90deg, #f2453d, #ffc629, #2bd17e, #3aa8ff, #a46bff, #ff4f9a); }
.tb-col .tc-cur { position: absolute; left: 10px; right: 10px; bottom: 6px; height: 5px; border-radius: 2.5px; box-shadow: 0 0 0 1px rgba(16,19,28,.18); }
.tb-col i:not(.tc-rb):not(.tc-cur) { display: none; }
.tb-sep { flex: none; width: 1px; height: 24px; background: var(--line2); margin: 0 4px; }
.tb-pt { font-size: 14px !important; font-weight: 600; white-space: nowrap; padding: 0 10px !important; }
.tc-aa { font: 600 16px/1 var(--sans); letter-spacing: .5px; }
/* punto penceresi */
.fsz { display: flex; align-items: center; gap: 14px; padding: 10px 0 4px; }
.fsz input[type=range] { flex: 1; }
.fsz-n { flex: none; display: flex; align-items: center; height: 46px; border-radius: 12px; box-shadow: inset 0 0 0 1.5px var(--line2); }
.fsz-n button { width: 40px; height: 46px; display: grid; place-items: center; font-size: 18px; color: var(--text); }
.fsz-n input { width: 54px; height: 46px; padding: 0; border: 0; background: transparent; text-align: center; font-size: 16px; font-weight: 600; -moz-appearance: textfield; }
.fsz-n input::-webkit-outer-spin-button, .fsz-n input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* yazı tipi listesi (sade): "AaBbCc" örneği */
.frow .fsample { margin-left: 8px; color: var(--muted); font-size: 15px; }

/* + (yeni tasarım) düğmesi: alt menüde "Daha fazla"nın hizasında, üstünde */
.fab { position: absolute; right: calc(10% - 28px); bottom: calc(66px + var(--bot)); z-index: 30; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  background: var(--brand); color: #fff; font-size: 28px; box-shadow: 0 6px 18px rgba(35,52,154,.35), 0 2px 4px rgba(16,19,28,.18); }
.fab:active { transform: scale(.94); }
.fab[hidden] { display: none; }
/* yazı çubuğu: renk düğmesi yalnız seçili rengi (ya da gökkuşağı) gösterir */
.tb-col .tc-a { margin-top: -6px !important; }
.tb-col .tc-cur { bottom: 8px !important; height: 5px !important; }
/* punto penceresi: dar sayı kutusu, − ve + yakın */
.fsz-n button { width: 32px !important; }
.fsz-n input { width: 40px !important; }
/* eklenen yazı düzenlenirken kartın kendisi görünür: yazı kutusunun yazısı şeffaf, imleç görünür */
.inl.live textarea { color: transparent !important; -webkit-text-fill-color: transparent; }
.inl.live textarea::selection { background: rgba(35,52,154,.25); }
#bos-bg:not(:empty) { margin-bottom: 14px; }
.fab { bottom: calc(80px + var(--bot)) !important; }

/* yazı kutusu kartla aynı yerden satır kırsın: kelime ortasından bölme yok */
.inl textarea { word-break: normal !important; overflow-wrap: normal !important; }
#tpls .tpl-search { margin-top: 22px; }

.inl-mirror { position: fixed; left: -9999px; top: 0; visibility: hidden; white-space: pre-wrap; word-break: normal; overflow-wrap: normal; box-sizing: border-box; }

/* punto kutusu (Canva gibi): beyaz, ince gri çerçeve, − sayı + */
.fsz-n { height: 50px !important; border-radius: 14px !important; background: #fff !important; box-shadow: none !important; border: 1.5px solid var(--line2); }
.fsz-n button { width: 42px !important; height: 47px !important; font-size: 20px !important; }
.fsz-n input { width: 52px !important; height: 47px !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; font-size: 18px !important; font-weight: 500 !important; color: var(--text) !important; text-align: center; }
.fsz-n input:focus { outline: none; box-shadow: none !important; }
/* renk paleti: gökkuşağı (+) özel renk */
.sw-any { flex: none; width: 36px !important; height: 36px !important; border-radius: 50% !important; display: grid; place-items: center; color: #111;
  background: conic-gradient(#f2453d, #ffc629, #2bd17e, #36c5d6, #3aa8ff, #a46bff, #ff4f9a, #f2453d) !important; position: relative; font-size: 16px; }
.sw-any::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: #fff; }
.sw-any svg { position: relative; z-index: 1; }
/* boş tasarım: zemin seçimi + renk çubuğu */
.bg-sel { position: absolute; z-index: 3; display: none; pointer-events: none; box-shadow: 0 0 0 2px #8b5cf6; }
.bg-sel.on { display: block; }
.bg-pal { pointer-events: auto; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: #fff; color: var(--text); font-size: 24px; box-shadow: 0 4px 14px rgba(16,19,28,.2); }
.cbar { z-index: 41; }
.cb-sw { gap: 10px !important; padding: 6px 2px; }
.cb-sw > button { flex: none; width: 40px !important; height: 40px !important; min-width: 0 !important; padding: 0 !important; border-radius: 50% !important; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(16,19,28,.15); }
.cb-sw > button.on, .cb-cur { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #8b5cf6 !important; }
.cb-sw > .sw-any { width: 40px !important; height: 40px !important; }
/* tam renk seçici */
.cp-sv { position: relative; height: 170px; border-radius: 14px; touch-action: none; margin-top: 4px; }
.cp-hue { position: relative; height: 22px; margin: 16px 0 14px; border-radius: 11px; touch-action: none; background: linear-gradient(90deg, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); }
.cp-dot { position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.35); pointer-events: none; }
.cp-hue .cp-dot { top: 50%; }
.cp-hex { display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 12px; border-radius: 14px; border: 1.5px solid var(--line2); }
.cp-hex input { flex: 1; border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; font-size: 16px; text-transform: uppercase; }
.cp-sw { width: 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(16,19,28,.15); }

/* yerinde düzenleme: görünür yazı kutusu; uzun kelime kutu kenarında bölünür (kartla aynı) */
.inl textarea { overflow-wrap: anywhere !important; word-break: normal !important; color: inherit; -webkit-text-fill-color: currentColor; }
.cp-hex { display: flex !important; flex-direction: row !important; align-items: center; }
.cb-sw > button.on, .cb-sw > button { background: var(--sw) !important; color: inherit; } .cb-sw > .sw-any { background: conic-gradient(#f2453d, #ffc629, #2bd17e, #36c5d6, #3aa8ff, #a46bff, #ff4f9a, #f2453d) !important; }

/* çoklu seçim: seçim kutusu + seçilenlerin çerçeveleri */
.marq { position: absolute; z-index: 5; display: none; pointer-events: none; border: 1.5px solid var(--brand); background: rgba(35,52,154,.14); border-radius: 2px; }
.marq.on { display: block; }
.msel { position: absolute; inset: 0; z-index: 4; display: none; pointer-events: none; }
.msel.on { display: block; }
.msel i { position: absolute; border: 1.5px solid var(--brand); border-radius: 3px; box-shadow: 0 0 0 1px rgba(255,255,255,.7); }
.msel i.u { border: 1.5px dashed var(--brand); box-shadow: none; }
.part-menu button.off { opacity: .45; }
#editor.kb .msel, #editor.kb .marq { display: none !important; }

/* Bileşenler: Canva gibi bölümler (başlık + yatay sıra + Tümünü gör), yüzlerce öğe */
.bl-shead { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 20px 0 8px; }
.bl-shead h3 { margin: 0; font-size: 15px; font-weight: 700; color: var(--text); }
.bl-shead h3 small { font-size: 12px; font-weight: 500; color: var(--text2); margin-left: 2px; }
.bl-all { flex: none; font-size: 13px; font-weight: 600; color: var(--brand); padding: 4px 0; }
.bl-count { margin: 0 0 4px !important; font-size: 12.5px; }
.bl-items { grid-template-columns: repeat(4, 1fr); gap: 8px; }
.bl-items.wide { grid-template-columns: repeat(2, 1fr); }
.bl-items:not(.wide) .bl-item small { display: none; }
.bl-items.row { display: flex; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 2px 16px 6px; }
.bl-items.row::-webkit-scrollbar { display: none; }
.bl-items.row .bl-item { flex: none; width: calc((100% - 24px) / 4.3); }
.bl-items.row.wide .bl-item { width: calc((100% - 8px) / 2.3); }
.bl-item .bl-pv { min-height: 40px; }
.bl-icons.row, .bl-draws.row { display: flex; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 2px 16px 6px; gap: 8px; min-height: 60px; }
.bl-icons.row::-webkit-scrollbar, .bl-draws.row::-webkit-scrollbar { display: none; }
.bl-icons.row button { flex: none; width: 56px; height: 56px; }
.bl-draws.row button { flex: none; width: 104px; height: 104px; }
.bl-draws.ic { grid-template-columns: repeat(5, 1fr); }
.bl-draws.ic button { padding: 10px; }
.bl-gchips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px 8px; padding: 0 16px; }
.bl-gchips::-webkit-scrollbar { display: none; }
.bl-gchips .chip { flex: none; }
.bl-gchips .chip.on { background: var(--brand); color: #fff; }
.bl-moreb { margin-top: 12px; }

.bl-sen { display: block; width: 100%; height: 1px; grid-column: 1 / -1; }
.bl-hold { min-height: 8px; }
.bl-icons button img, .bl-draws.ic button img { width: 70%; height: 70%; object-fit: contain; }
.bl-draws.ic button img { width: 100%; height: 100%; }

/* videolu şablonlar */
.vcard { width: 27vw; max-width: 128px; }
.vcard .vplay { position: absolute; top: 7px; right: 7px; width: 26px; height: 26px; border-radius: 50%; background: rgba(0,0,0,.5); color: #fff; display: grid; place-items: center; font-size: 13px; }
.vgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 8px; }
.vgrid .vcard { width: auto; max-width: none; }
#vid-bg .lbl { display: block; margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--text2); }
.vb-th { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-bottom: 10px; }
.vb-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 10px; }
.vb-grid button { position: relative; aspect-ratio: 9 / 16; border-radius: 8px; background: var(--fill) center / cover; }
.vb-grid button.on { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--brand); }
.vb-grid .bl-dur { position: absolute; left: 4px; bottom: 4px; font-size: 10px; padding: 1px 5px; border-radius: 6px; background: rgba(0,0,0,.55); color: #fff; }
#vid-bg:not(:empty) { margin-bottom: 14px; }

/* ============================================================ YAN MENÜ (ana sayfa sağ üstteki menü düğmesi) */
/* menü düğmesi: Pro düğmesinin yanında zeminsiz dört küçük kare (sonuncusu içi boş); basınca / menü açıkken o da dolar */
.hmb { width: 40px; height: 40px; flex: none; display: grid; grid-template-columns: 8px 8px; gap: 4px; place-content: center; border-radius: 10px; }
.hmb span { width: 8px; height: 8px; border-radius: 2.5px; background: var(--brand); transition: background-color .2s, transform .2s; }
.hmb span:nth-child(4) { background: transparent; box-shadow: inset 0 0 0 1.6px var(--brand); }
.hmb:active span, .hmb.on span { transform: scale(.88); }
.hmb:active span:nth-child(4), .hmb.on span:nth-child(4) { background: var(--brand); }
.dr { position: absolute; inset: 0; z-index: 45; pointer-events: none; }
.dr-dim { position: absolute; inset: 0; background: rgba(16,19,28,.42); opacity: 0; transition: opacity .3s; }
.dr.open .dr-dim { pointer-events: auto; }
.dr-pn {
  position: absolute; top: 0; bottom: 0; right: 0; width: min(330px, 86%); pointer-events: auto; touch-action: pan-y;
  transform: translateX(110%); transition: transform .34s cubic-bezier(.2,.8,.2,1);
  background: linear-gradient(180deg, #eef0ff 0, #fff 190px); border-radius: 22px 0 0 22px;
  box-shadow: -10px 0 32px rgba(16,19,28,0);
}
.dr.open .dr-pn { box-shadow: -10px 0 32px rgba(16,19,28,.18); }
.dr.drag .dr-pn, .dr.drag .dr-dim { transition: none; }
.dr-body { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; padding: calc(var(--top) + 20px) 16px calc(var(--bot) + 24px); scrollbar-width: none; }
.dr-me { width: 100%; display: flex; align-items: center; gap: 12px; padding: 4px 2px 14px; text-align: left; }
.dr-me .avatar { width: 46px; height: 46px; font-size: 18px; flex: none; background-color: #fff; box-shadow: 0 1px 4px rgba(35,52,154,.16); }
.dr-me .mt, .dr-row .mt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dr-me b { font-size: 16.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dr-me small, .dr-row small { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dr-me .mchev { color: var(--faint); }
.dr-pro {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 14px; text-align: left; color: #fff;
  background: linear-gradient(135deg, #2c3fae 0%, #23349a 50%, #1a2877 100%); box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 6px 18px rgba(35,52,154,.25);
}
.dr-pro > span { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: rgba(255,255,255,.12); color: var(--gold); font-size: 19px; flex: none; }
.dr-pro b { flex: 1; display: flex; flex-direction: column; font-size: 15px; font-weight: 700; }
.dr-pro small { font-size: 12px; font-weight: 400; color: rgba(255,255,255,.75); }
.dr-pro em { font-style: normal; font-weight: 700; font-size: 13px; padding: 7px 12px; border-radius: 8px; background: #fff; color: var(--brand); }
.dr-body h4 { margin: 20px 2px 8px; font-size: 13px; font-weight: 700; color: var(--text2); }
.dr-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.dr-tile { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 4px 10px; border-radius: 12px; background: #fff; border: 1px solid var(--line); font-size: 12px; font-weight: 500; line-height: 1.25; text-align: center; color: var(--text); box-shadow: 0 1px 2px rgba(16,19,28,.04); }
.dr-tile span { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; font-size: 20px; color: var(--brand); background: linear-gradient(160deg, #f3f5ff, #e4e8fb); }
.dr-tile:active, .dr-row:active, .dr-me:active, .dr-pro:active { transform: scale(.97); }
.dr-list { border-radius: 12px; border: 1px solid var(--line); background: #fff; overflow: hidden; }
.dr-row { width: 100%; display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 8px 12px; text-align: left; }
.dr-row + .dr-row { border-top: 1px solid var(--line); }
.dr-row b { font-size: 14.5px; font-weight: 600; }
.dr-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; font-size: 18px; color: var(--text2); background: var(--fill); }
.dr-row em { font-style: normal; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 6px; color: #8a5a00; background: #fdf0d2; flex: none; }
.dr-list[data-g="soon"] .dr-row b { color: var(--text2); }
.dr-foot { margin-top: 20px; }

/* ============================================================ PRO PAKETİ */
.sec-note { margin: -6px 16px 12px; font-size: 13px; color: var(--muted); }
.pro-mini { display: inline-flex; align-items: center; gap: 3px; margin-left: 8px; padding: 2px 7px; border-radius: 6px; font-size: 11.5px; font-weight: 700; color: #7a4f00; background: #fff4dc; }
.pro-mini svg { color: var(--gold); font-size: 12px; }
.btn .pro-mini { margin-left: 6px; }
label.mrow.check-row { flex-direction: row; align-items: center; gap: 12px; cursor: pointer; }
.check-row .check { min-height: 0; flex: none; }

/* sayfana özel: davet kartı */
.fy-cta {
  width: calc(100% - 32px); margin: 20px 16px 0; padding: 14px; border-radius: 14px; display: flex; align-items: center; gap: 14px; text-align: left; color: #fff;
  background: linear-gradient(135deg, #2c3fae 0%, #23349a 55%, #1a2877 100%); box-shadow: 0 1px 0 rgba(255,255,255,.16) inset, 0 8px 22px rgba(35,52,154,.22);
}
.fy-art { position: relative; width: 58px; height: 64px; flex: none; }
.fy-art i { position: absolute; width: 38px; height: 48px; border-radius: 6px; background: #fff; box-shadow: 0 3px 10px rgba(0,0,0,.25); }
.fy-art i:nth-child(1) { left: 0; top: 10px; transform: rotate(-9deg); background: linear-gradient(160deg, #ffd9a8, #ff9d6b); }
.fy-art i:nth-child(2) { left: 18px; top: 2px; transform: rotate(7deg); background: linear-gradient(160deg, #c9d2ff, #8a99f0); }
.fy-art i:nth-child(3) { left: 10px; top: 14px; background: #fff; }
.fy-art i:nth-child(3)::after { content: ""; position: absolute; left: 6px; right: 6px; bottom: 6px; height: 5px; border-radius: 3px; background: #23349a; }
.fy-t { flex: 1; min-width: 0; }
.fy-t b { display: block; font-size: 16px; font-weight: 700; }
.fy-t span { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.4; color: rgba(255,255,255,.8); }
.fy-go { flex: none; display: inline-flex; align-items: center; gap: 2px; height: 34px; padding: 0 12px; border-radius: 9px; background: #fff; color: var(--brand); font-weight: 700; font-size: 13.5px; }
.fy-acts { margin-bottom: 16px; }
.sheet .grid2 { padding: 0; }

/* ilk açılış */
.ob-dots { display: flex; gap: 6px; margin-bottom: 14px; }
.ob-dots i { width: 22px; height: 4px; border-radius: 2px; background: var(--fill2); }
.ob-dots i.on { background: var(--brand); width: 34px; }
.ob-dots i.done { background: #9aa6e6; }
.ob-cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 18px; }
.ob-cat { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 4px 10px; border-radius: 12px; border: 1px solid var(--line); background: #fff; font-size: 12.5px; font-weight: 500; color: var(--text); }
.ob-cat svg { font-size: 22px; color: var(--text2); }
.ob-cat.on { border-color: var(--brand); background: var(--brand-soft); box-shadow: inset 0 0 0 1px var(--brand); }
.ob-cat.on svg { color: var(--brand); }
.ob-cat em { position: absolute; top: 6px; right: 6px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 11px; font-weight: 700; color: #fff; background: var(--brand); }
.ob-prev { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 18px 0; }
.ob-prev .th { border-radius: 6px; box-shadow: var(--shadow-card); }

.mlist .check-row { min-height: 58px; }

/* planlayıcı */
.pl-days { margin: 0 -16px 10px; padding: 6px 16px 4px; }
.chip.pl-day { height: auto; padding: 7px 12px; flex-direction: column; align-items: flex-start; gap: 0; }
.chip.pl-day small { font-size: 11px; opacity: .75; }
.chip.pl-day b { font-size: 13.5px; font-weight: 600; }
.pl-hours { padding: 6px 0 4px; margin: 0 0 10px; flex-wrap: wrap; }
.pl-time { margin-bottom: 14px; }
.pl-sum { margin: 4px 0 12px !important; font-weight: 600; color: var(--brand) !important; }
.pl-sum.bad { color: var(--danger) !important; }
.pl-when { display: flex; align-items: center; justify-content: center; gap: 6px; font-weight: 600; color: var(--brand) !important; }
.pl-when.late { color: var(--danger) !important; }
.pp-acts { margin-top: 14px; }
.pp-acts .ghost { width: 100%; }
.pw-strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 8px; }
.pw-d { display: flex; flex-direction: column; align-items: center; padding: 8px 0 6px; border-radius: 10px; background: var(--bg2); }
.pw-d small { font-size: 11px; color: var(--muted); }
.pw-d b { font-size: 16px; font-weight: 700; }
.pw-d i { height: 16px; min-width: 16px; margin-top: 2px; border-radius: 8px; font-style: normal; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.pw-d.has { background: var(--brand-soft); }
.pw-d.has i { background: var(--brand); color: #fff; padding: 0 4px; }
.pl-row { width: 100%; display: flex; align-items: center; gap: 12px; padding: 8px 0; text-align: left; border-bottom: 1px solid var(--line); }
.pl-row img { width: 46px; height: 58px; flex: none; object-fit: cover; border-radius: 6px; box-shadow: var(--shadow-card); background: var(--fill); }
.pl-row .mt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pl-row b { font-size: 14.5px; font-weight: 600; }
.pl-row small { font-size: 12.5px; color: var(--muted); }
.pl-row .mchev { color: var(--faint); }
.pl-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 26px 20px 10px; color: var(--text2); font-size: 13.5px; }
.pl-empty svg { font-size: 30px; color: var(--brand); margin-bottom: 6px; }
.pl-empty b { font-size: 16px; color: var(--text); }
.pl-acts { margin-top: 16px; }
.pl-acts .ghost { width: 100%; }
.next-plan { width: calc(100% - 32px); margin: 20px 16px 0; padding: 10px 12px; border-radius: 12px; display: flex; align-items: center; gap: 12px; text-align: left; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-card); }
.next-plan img { width: 40px; height: 50px; object-fit: cover; border-radius: 5px; flex: none; }
.next-plan .mt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.next-plan small { font-size: 11.5px; font-weight: 700; color: var(--brand); }
.next-plan b { font-size: 14.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.next-plan .mt > span { font-size: 12.5px; color: var(--muted); }
.next-plan .mchev { color: var(--faint); }

/* toplu üretim */
.bk-lab { display: flex; align-items: center; justify-content: space-between; }
.ghost.sm { min-height: 30px; padding: 0 10px; font-size: 12.5px; border-radius: 8px; }
.ghost.sm svg { font-size: 15px; }
.bk-count { margin: 8px 0 10px !important; font-size: 13px !important; color: var(--text2) !important; }
.bk-grid { margin-bottom: 14px; }
.bk-grid .tcard b { margin-top: 4px; font-size: 12px; color: var(--muted); }

/* profil önizleme */
.pf-head { display: flex; align-items: center; gap: 14px; margin: 2px 0 14px; }
.pf-av { width: 64px; height: 64px; font-size: 24px; flex: none; box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #d8dbe2; }
.pf-head .mt { display: flex; flex-direction: column; min-width: 0; }
.pf-head .mt > b { font-size: 16px; font-weight: 700; }
.pf-head small { font-size: 13px; color: var(--text2); }
.pf-n { font-size: 13px; color: var(--text2); margin-top: 2px; }
.pf-n b { color: var(--text); }
.pf-seg { margin-bottom: 10px; }
.pf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin: 0 -16px; }
.pf-c { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; background: var(--fill); }
.pf-grid.sq .pf-c { aspect-ratio: 1 / 1; }
.pf-c img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-c em { position: absolute; left: 4px; top: 4px; padding: 2px 6px; border-radius: 5px; font-style: normal; font-size: 10.5px; font-weight: 700; color: #fff; background: rgba(35,52,154,.88); }
.pf-grid > .muted { grid-column: 1 / -1; padding: 20px 16px; text-align: center; }
.pf-tip { margin-top: 12px !important; text-align: center; }

/* boyut paketi */
.sz-ic { width: 30px; height: 30px; flex: none; display: grid; place-items: center; }
.sz-ic i { display: block; max-width: 26px; max-height: 26px; width: 26px; border-radius: 3px; border: 1.8px solid var(--brand); background: var(--brand-soft); }
#sz-go { margin-top: 14px; }

/* açıklama ve etiketler */
.cp-open { display: flex; gap: 8px; overflow-x: auto; margin: 6px -16px 16px; padding: 2px 16px; scrollbar-width: none; }
.cp-o { flex: none; max-width: 240px; padding: 9px 12px; border-radius: 10px; background: var(--bg2); border: 1px solid var(--line); font-size: 13px; line-height: 1.35; text-align: left; color: var(--text); white-space: normal; }
.cp-o:active { background: var(--fill2); }
.cp-tl { display: block; margin-bottom: 4px; }
.lbl small, .bk-lab small, label > span small { font-weight: 400; }
.cp-g { margin: 8px 0 10px; }
.cp-g > small { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.cp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cp-t { height: 30px; padding: 0 10px; border-radius: 8px; font-size: 13px; color: var(--text2); background: var(--fill); }
.cp-t.on { color: #fff; background: var(--brand); }
.cp-set { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--brand); background: var(--brand-soft); }
.cp-set em { font-style: normal; font-weight: 500; opacity: .7; }
.cp-set.add { color: var(--text2); background: none; border: 1px dashed var(--line2); }
.cp-name { display: flex; gap: 8px; margin-top: 8px; }
.cp-name input { flex: 1; }
.btn.sm { width: auto; height: 46px; padding: 0 14px; font-size: 14px; }

/* fotoğraftan Reels */
.rl-top { display: flex; gap: 14px; margin-bottom: 14px; }
.rl-prev { position: relative; width: 42%; flex: none; aspect-ratio: 9 / 16; border-radius: 12px; overflow: hidden; background: #0e1018; box-shadow: var(--shadow-card); }
.rl-prev canvas { width: 100%; height: 100%; display: block; }
.rl-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: rgba(255,255,255,.8); font-size: 13.5px; font-weight: 600; cursor: pointer; }
.rl-empty svg { font-size: 30px; }
.rl-side { flex: 1; min-width: 0; }
.rl-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 8px; }
.rl-ph { position: relative; aspect-ratio: 3 / 4; border-radius: 7px; background: var(--fill) center/cover; }
.rl-ph em { position: absolute; left: 4px; bottom: 4px; font-style: normal; font-size: 10.5px; font-weight: 700; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.rl-del { position: absolute; top: 3px; right: 3px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; color: #fff; background: rgba(16,19,28,.6); }
.rl-add { aspect-ratio: 3 / 4; border-radius: 7px; border: 1.5px dashed var(--line2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--brand); font-size: 20px; cursor: pointer; }
.rl-add small { font-size: 11px; font-weight: 600; color: var(--text2); }

.vgrid .tcard { width: auto; max-width: none; }


/* panorama + profil bulmacası + Reels şablonları */
.pn-prev { margin: 0 -16px 14px; overflow-x: auto; scrollbar-width: none; }
.pn-strip { display: flex; padding: 0 16px; width: max-content; }
.pn-cell { position: relative; flex: none; height: 230px; }
.pn-cell + .pn-cell { border-left: 2px dashed rgba(255,255,255,.85); }
.pn-pg { display: block; height: 100%; width: auto; }
.pn-cell em { position: absolute; left: 8px; top: 8px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 12px; font-weight: 700; color: #fff; background: rgba(16,19,28,.7); }
.pn-ph { align-self: end; }
.pn-acts, .pz-acts { margin-top: 14px; }
.pn-acts .ghost, .pz-acts .ghost { width: 100%; }
.pz-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin: 0 -16px 14px; }
.pz-c { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: var(--fill); }
.pz-c img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pz-c em { position: absolute; right: 6px; top: 6px; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 13px; display: grid; place-items: center; font-style: normal; font-size: 13px; font-weight: 800; color: #fff; background: var(--brand); box-shadow: 0 1px 4px rgba(0,0,0,.3); }
.rtcard .th { aspect-ratio: 9 / 16; height: auto; object-fit: cover; }
.chip svg { color: var(--gold); }

.depth-tg { margin: 4px 0 10px; color: var(--brand); }
.depth-tg svg { color: var(--brand); }

/* ---------- Üyelik, Keşfet (yarışma, sıralama), rozetler, yönetim (2026-10-12) ---------- */
.profile.acct { margin-bottom: 12px; position: relative; }
.profile.acct .dot { position: absolute; top: 12px; right: 36px; width: 9px; height: 9px; border-radius: 50%; background: var(--danger); }
.avatar.xl { width: 64px; height: 64px; font-size: 26px; flex: none; }
.linkbtn { display: inline-flex; align-items: center; gap: 6px; align-self: center; height: 34px; padding: 0 6px; font-size: 13.5px; font-weight: 600; color: var(--brand); }
.linkbtn svg { font-size: 16px; }
.sheet h2.center { text-align: center; }
h3.sec { margin: 22px 0 10px; font-size: 14px; font-weight: 700; color: var(--text2); }
h3.sec.pad { margin: 22px 16px 10px; }
.muted.pad { margin: 10px 16px 0; }
.au-seg { margin-bottom: 16px; }
.warn-box { padding: 12px 14px; border-radius: 10px; background: #fdeeec; color: #8a2116 !important; font-size: 13.5px !important; }
.warn { color: var(--danger) !important; }
.ok { color: #0f7a4b !important; }
.empty.sm { padding: 22px 12px 8px; }

/* rozetler */
.bdgs { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.bdgs:empty { display: none; }
.bdg { width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 13px; flex: none; }
.bdg-list { display: flex; flex-direction: column; gap: 8px; }
.bdg-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); }
.bdg-row .bdg { width: 38px; height: 38px; font-size: 20px; }
.bdg-row.off { opacity: .45; }
.bdg-row.off .bdg { filter: grayscale(1); }
.bdg-ok { color: #0f7a4b; font-size: 18px; }
.b-ilk { background: #eef1fb; color: #23349a; }
.b-uretken { background: #e3f4ef; color: #0f6e5a; }
.b-yukselen { background: #e7f0ff; color: #1d4ed8; }
.b-populer { background: #ffeee2; color: #c2410c; }
.b-efsane { background: #f1eaff; color: #6d28d9; }
.b-haftanin { background: #fff2d6; color: #a15c00; }

/* hesap / tasarımcı başı */
.acc-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.acc-head .mt b { font-size: 18px; }
.cr-head { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; margin-top: -10px; }
.cr-head h2 { margin: 0 !important; }
.ig-btn { width: auto; padding: 0 18px; height: 42px; font-size: 14px; }
.cr-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 16px 0; }
.cr-stats div { display: flex; flex-direction: column; align-items: center; padding: 10px 4px; border-radius: 12px; background: var(--bg2); }
.cr-stats b { font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cr-stats small { font-size: 12px; color: var(--muted); }
.ms-list { display: flex; flex-direction: column; gap: 10px; }
.ms-row { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 12px; border: 1px solid var(--line); }
.ms-row img { width: 56px; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 6px; flex: none; background: var(--fill); }
.ms-row .mt small + small { margin-top: 2px; }
.bar { height: 6px; border-radius: 6px; background: var(--fill2); margin: 7px 0 3px; overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: 6px; background: var(--brand); }
.ghost.ico-only { width: 40px; height: 40px; padding: 0; flex: none; display: grid; place-items: center; }
.rw-hero { width: 76px; height: 76px; margin: 6px auto 12px; border-radius: 22px; display: grid; place-items: center; font-size: 38px; color: #a15c00; background: #fff2d6; }
.rw-list { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 18px; }
.rw-item { padding: 12px 14px; border-radius: 12px; background: var(--bg2); text-align: center; }
.rw-item b { display: block; font-size: 15.5px; }
.rw-item span { font-size: 13.5px; color: var(--text2); }

/* Keşfet */
.com-seg { padding: 14px 16px 0; }
.com-seg .seg button { padding: 0 4px; }
.com-top .linkbtn { margin-left: auto; }
.cbanner { display: flex; align-items: center; gap: 12px; width: calc(100% - 32px); margin: 14px 16px 0; padding: 14px; border-radius: 14px; text-align: left; color: #3d2a00; background: linear-gradient(135deg, #fff2d6, #ffe7b0); }
.cbanner > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cbanner small { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #a15c00; }
.cbanner b { font-size: 16px; line-height: 1.25; }
.cbanner div span { font-size: 12.5px; color: #6b4a00; }
.cb-ico { width: 42px; height: 42px; border-radius: 12px; flex: none; display: grid; place-items: center; font-size: 22px; background: #fff; color: #a15c00; }
.com-feat { display: flex; gap: 12px; overflow-x: auto; padding: 0 16px 4px; scrollbar-width: none; scroll-snap-type: x mandatory; }
.com-feat::-webkit-scrollbar { display: none; }
.com-feat .ccard { width: 42%; flex: none; scroll-snap-align: start; }
.ccard img { border-radius: 8px; }
.cc-u { position: absolute; top: 8px; right: 8px; display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 7px; border-radius: 6px; font-size: 11.5px; font-weight: 600; background: rgba(255,255,255,.94); color: var(--text); font-variant-numeric: tabular-nums; }
.cc-u svg { font-size: 13px; }
.cc-rank { position: absolute; top: 8px; left: 8px; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 13px; display: grid; place-items: center; font-size: 13px; font-weight: 800; color: #fff; background: rgba(16,19,28,.78); }
.cc-rank.r1, .rk-n.r1 { background: #d99a0b; color: #fff; }
.cc-rank.r2, .rk-n.r2 { background: #8d96a8; color: #fff; }
.cc-rank.r3, .rk-n.r3 { background: #b36b38; color: #fff; }
.com-grid.in-sheet { padding: 0; }
.cm-meta { margin-bottom: 14px !important; }
.cm-by { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin-bottom: 14px; border-radius: 12px; border: 1px solid var(--line); text-align: left; }
.cm-by .mt small:first-child { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.cm-ig { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 8px; font-size: 13px; font-weight: 600; color: #fff; background: var(--brand); flex: none; }
.cm-ig svg { font-size: 16px; }
.ct-wrap { padding: 14px 16px 0; }
.ct-card { position: relative; padding: 18px; border-radius: 16px; background: linear-gradient(160deg, #fff7e6, #ffeccc); color: #3d2a00; overflow: hidden; }
.ct-card.off { background: var(--bg2); color: var(--text); }
.ct-card small { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #a15c00; }
.ct-card h3 { margin: 4px 0 6px; font-size: 22px; line-height: 1.2; }
.ct-card p { margin: 0 0 12px; font-size: 14px; color: #5c4300; }
.ct-card.off p { color: var(--text2); }
.ct-ico { position: absolute; right: 14px; top: 14px; font-size: 40px; color: rgba(161,92,0,.28); }
.ct-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.ct-meta span { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 8px; font-size: 12.5px; font-weight: 600; background: rgba(255,255,255,.7); }
.win-card { display: flex; align-items: center; gap: 12px; width: calc(100% - 32px); margin: 0 16px; padding: 10px; border-radius: 12px; border: 1px solid var(--line); text-align: left; }
.win-card img { width: 64px; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 6px; }
.rk-list { display: flex; flex-direction: column; padding: 14px 16px 0; }
.rk-row { display: flex; align-items: center; gap: 10px; padding: 10px 6px; text-align: left; border-bottom: 1px solid var(--line); }
.rk-row.me { background: var(--brand-soft); border-radius: 10px; border-bottom-color: transparent; }
.rk-n { width: 28px; height: 28px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 13px; font-weight: 800; color: var(--text2); background: var(--fill); }
.rk-u { display: flex; flex-direction: column; align-items: flex-end; flex: none; }
.rk-u b { font-size: 16px; font-variant-numeric: tabular-nums; }
.rk-u small { font-size: 11.5px; color: var(--muted); }

/* yönetim */
.adm-tabs { display: flex; gap: 6px; overflow-x: auto; margin: 0 -4px 14px; padding: 0 4px 2px; scrollbar-width: none; }
.adm-tabs::-webkit-scrollbar { display: none; }
.adm-tabs button { flex: none; height: 34px; padding: 0 12px; border-radius: 8px; font-size: 13.5px; font-weight: 600; color: var(--text2); background: var(--fill); display: inline-flex; align-items: center; }
.adm-tabs button.on { color: #fff; background: var(--brand); }
.adm-tabs .dot { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 6px; border-radius: 9px; font-style: normal; font-size: 11px; color: #fff; background: var(--danger); }
.adm-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.adm-stats div { display: flex; flex-direction: column; padding: 12px; border-radius: 12px; background: var(--bg2); }
.adm-stats small { font-size: 12px; color: var(--muted); font-weight: 600; }
.adm-stats b { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.adm-stats span { font-size: 12px; color: var(--text2); }
.adm-filt { margin-bottom: 12px; }
.adm-q { margin-bottom: 10px; }
.adm-item { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.adm-item > img { width: 52px; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 6px; flex: none; background: var(--fill); }
.adm-item > .avatar { flex: none; }
.adm-ico { width: 44px; height: 44px; border-radius: 10px; flex: none; display: grid; place-items: center; font-size: 22px; background: #fff2d6; color: #a15c00; }
.adm-item .mt small { margin-top: 2px; }
.adm-acts { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px; }
.adm-acts .ghost { height: 34px; padding: 0 12px; font-size: 13px; }
#adm-body > .btn.primary { margin-bottom: 6px; }

/* bilgisayar ekranına özel parçalar (web/desk.css açar); telefonda gizli */
.h-title, .desk-cats, .fab-l { display: none; }

/* web: giriş düğmesi + hesap yuvarlağı (app.js paintMe; telefondaki uygulamada gizli) */
.h-me, .rail-me, .me-pop { display: none; }
html.web .h-me:not([hidden]) {
  display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px 0 10px; border-radius: 10px; background: #fff; color: var(--brand);
  font-weight: 700; font-size: 13.5px; box-shadow: 0 1px 2px rgba(16,19,28,.06), inset 0 0 0 1px rgba(35,52,154,.16);
}
html.web .h-me svg { font-size: 19px; }
html.web .h-me.in { padding: 0; width: 40px; height: 40px; border-radius: 50%; background: none; box-shadow: none; justify-content: center; }
html.web .h-me.in .me-l { display: none; }
.me-av {
  position: relative; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex: none; color: #fff; font-weight: 700; font-size: 15px;
  background: linear-gradient(140deg, #3a4fd0 0%, #23349a 55%, #5b3fc4 100%); box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(35,52,154,.28);
}
.me-av.pro { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #f0b43a, 0 3px 8px rgba(200,140,20,.3); }
.me-av.lg { width: 46px; height: 46px; font-size: 19px; }
.me-crown { position: absolute; top: -8px; right: -8px; width: 19px; height: 19px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--gold); font-size: 11px; box-shadow: 0 1px 3px rgba(16,19,28,.22); }
.me-dot { position: absolute; bottom: -1px; right: -1px; width: 11px; height: 11px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 0 2px #fff; }
.tabbar .rail-me, .rw-nav { display: none; }
/* dar telefon ekranı: yazılar alt satıra kaymasın; "Giriş yap" yalnız simge olur */
html.web .h-me, #home .pro-chip { white-space: nowrap; flex: none; }
.h-top .brand { min-width: 0; }
.h-acts { flex-wrap: nowrap; }
/* dar telefon ekranı (tarayıcıda): "Giriş yap" yazılı kalır, Pro düğmesi yalnız taç olur */
@media (max-width: 440px) {
  html.web .h-me:not(.in) { height: 36px; padding: 0 14px; gap: 0; color: #fff; background: var(--brand); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 4px 12px rgba(35,52,154,.28); }
  html.web .h-me:not(.in) svg { display: none; }
  html.web #home .pro-chip { width: 36px; padding: 0; justify-content: center; background: linear-gradient(135deg, #ffe39a 0%, #f5bf45 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 4px 12px rgba(200,140,20,.28); }
  html.web #home .pro-chip .pc-l { display: none; }
  html.web #home .pro-chip .pc-ic { background: none; }
  html.web #home .pro-chip svg { color: #8a5a00; font-size: 17px; }
  html.web .h-hero .wordmark { height: 32px; }
}
/* tarayıcıda aşağı çekip yenile (sayfa kendi içinde kaydığı için tarayıcınınki çalışmıyor; app.js "aşağı çek") */
.ptr { position: absolute; top: calc(var(--top) + 6px); left: 50%; z-index: 40; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: #fff; color: var(--brand); font-size: 20px; box-shadow: 0 2px 10px rgba(16,19,28,.2); transform: translate(-50%, -60px); opacity: 0; pointer-events: none; }
.ptr.ready { background: var(--brand); color: #fff; }
.ptr.spin svg { animation: ptrspin .7s linear infinite; }
@keyframes ptrspin { to { transform: rotate(360deg); } }