:root,[data-theme="dark"]{
  --bg:#0c0c0e;--bg2:#101014;--surface:#141418;--surface2:#1c1c22;
  --border:#252530;--border2:#2e2e3a;--text:#e8e2d8;--text-muted:#5a5668;
  --text-sub:#8a8298;--accent:#d4a843;--accent2:#b8882e;
  --accent-dim:rgba(212,168,67,.12);--accent-glow:rgba(212,168,67,.22);
  --accent-glow2:rgba(212,168,67,.08);--overlay:rgba(0,0,0,.75);
  --cshadow:0 4px 24px rgba(0,0,0,.45);--cvshadow:0 8px 40px rgba(0,0,0,.65);
  --gold-gradient:linear-gradient(135deg,#d4a843,#f0c866,#b8882e);
  --bar-h:58px;
  --cat-yorum: #c8682a; --cat-beğeni: #b84476; --cat-bölüm: #b09010; --cat-duyuru: #4278c4; --cat-uyarı: #cc4040;
}
[data-theme="light"]{
  --bg:#f9f6f1;--bg2:#f4f0ea;--surface:#fff;--surface2:#faf8f4;
  --border:#e8e0d8;--border2:#ddd5c8;--text:#2c2420;--text-muted:#8a7e77;
  --text-sub:#6a5e58;--accent:#b8862e;--accent2:#9a6e1e;
  --accent-dim:rgba(184,134,46,.1);--accent-glow:rgba(184,134,46,.2);
  --accent-glow2:rgba(184,134,46,.06);--overlay:rgba(44,36,32,.5);
  --cshadow:0 4px 20px rgba(44,36,32,.12);--cvshadow:0 8px 32px rgba(44,36,32,.22);
  --gold-gradient:linear-gradient(135deg,#b8862e,#d4a843,#9a6e1e);
  --cat-yorum: #e0844a; --cat-beğeni: #d45c90; --cat-bölüm: #d4aa30; --cat-duyuru: #6094d8; --cat-uyarı: #ee6060;
}
[data-theme="sepia"]{
  --bg:#f3e9d8;--bg2:#ede0c8;--surface:#faf4ea;--surface2:#f5ecd8;
  --border:#ddd0b8;--border2:#ccc0a0;--text:#3e2f1c;--text-muted:#9a8264;
  --text-sub:#7a6244;--accent:#8b5e3c;--accent2:#6e4a2e;
  --accent-dim:rgba(139,94,60,.1);--accent-glow:rgba(139,94,60,.2);
  --accent-glow2:rgba(139,94,60,.06);--overlay:rgba(62,47,28,.45);
  --cshadow:0 4px 20px rgba(62,47,28,.15);--cvshadow:0 8px 32px rgba(62,47,28,.28);
  --gold-gradient:linear-gradient(135deg,#8b5e3c,#c08050,#6e4a2e);
  --cat-yorum: #c8682a; --cat-beğeni: #b84476; --cat-bölüm: #b09010; --cat-duyuru: #4278c4; --cat-uyarı: #cc4040;
}
[data-theme="abyss"]{
  --bg:#07080f;--bg2:#0a0c16;--surface:#10121e;--surface2:#161828;
  --border:#1e2038;--border2:#252848;--text:#c8d4e8;--text-muted:#404860;
  --text-sub:#7080a0;--accent:#5da0d8;--accent2:#4080b8;
  --accent-dim:rgba(93,160,216,.12);--accent-glow:rgba(93,160,216,.22);
  --accent-glow2:rgba(93,160,216,.07);--overlay:rgba(0,0,0,.8);
  --cshadow:0 4px 24px rgba(0,0,0,.55);--cvshadow:0 8px 40px rgba(0,0,0,.75);
  --gold-gradient:linear-gradient(135deg,#5da0d8,#88c0f0,#3a80b8);
  --cat-yorum: #c8682a; --cat-beğeni: #b84476; --cat-bölüm: #b09010; --cat-duyuru: #4278c4; --cat-uyarı: #cc4040;
}
[data-theme="forest"]{
  --bg:#0a120a;--bg2:#0d170d;--surface:#111a11;--surface2:#172217;
  --border:#1e301e;--border2:#263c26;--text:#d0e8c8;--text-muted:#4a6848;
  --text-sub:#7aaa70;--accent:#4caf50;--accent2:#388e3c;
  --accent-dim:rgba(76,175,80,.12);--accent-glow:rgba(76,175,80,.24);
  --accent-glow2:rgba(76,175,80,.07);--overlay:rgba(0,0,0,.78);
  --cshadow:0 4px 24px rgba(0,0,0,.5);--cvshadow:0 8px 40px rgba(0,0,0,.68);
  --gold-gradient:linear-gradient(135deg,#4caf50,#80e080,#2e7d32);
  --cat-yorum: #c8682a; --cat-beğeni: #b84476; --cat-bölüm: #b09010; --cat-duyuru: #4278c4; --cat-uyarı: #cc4040;
}
[data-theme="crimson"]{
  --bg:#100505;--bg2:#160808;--surface:#1c0a0a;--surface2:#240e0e;
  --border:#361414;--border2:#421a1a;--text:#f0d0cc;--text-muted:#6a3838;
  --text-sub:#b06060;--accent:#e05050;--accent2:#c03030;
  --accent-dim:rgba(224,80,80,.12);--accent-glow:rgba(224,80,80,.26);
  --accent-glow2:rgba(224,80,80,.07);--overlay:rgba(0,0,0,.8);
  --cshadow:0 4px 24px rgba(0,0,0,.52);--cvshadow:0 8px 40px rgba(0,0,0,.7);
  --gold-gradient:linear-gradient(135deg,#e05050,#f08080,#c03030);
  --cat-yorum: #c8682a; --cat-beğeni: #b84476; --cat-bölüm: #b09010; --cat-duyuru: #4278c4; --cat-uyarı: #cc4040;
}
[data-theme="dusk"]{
  --bg:#0f0a18;--bg2:#130d20;--surface:#181028;--surface2:#201534;
  --border:#2a1a48;--border2:#361e5a;--text:#e0d0f8;--text-muted:#5a4880;
  --text-sub:#9070c0;--accent:#9370d8;--accent2:#7050b8;
  --accent-dim:rgba(147,112,216,.12);--accent-glow:rgba(147,112,216,.24);
  --accent-glow2:rgba(147,112,216,.07);--overlay:rgba(0,0,0,.78);
  --cshadow:0 4px 24px rgba(0,0,0,.5);--cvshadow:0 8px 40px rgba(0,0,0,.68);
  --gold-gradient:linear-gradient(135deg,#9370d8,#c090f0,#7050b8);
  --cat-yorum: #c8682a; --cat-beğeni: #b84476; --cat-bölüm: #b09010; --cat-duyuru: #4278c4; --cat-uyarı: #cc4040;
}
[data-theme="parchment"]{
  --bg:#ede0c0;--bg2:#e8d8b0;--surface:#f8f0da;--surface2:#f2e8cc;
  --border:#cfc0a0;--border2:#c0b090;--text:#3c2010;--text-muted:#8a6848;
  --text-sub:#6a4828;--accent:#7a4010;--accent2:#5e3008;
  --accent-dim:rgba(122,64,16,.1);--accent-glow:rgba(122,64,16,.2);
  --accent-glow2:rgba(122,64,16,.06);--overlay:rgba(60,32,16,.45);
  --cshadow:0 4px 20px rgba(60,32,16,.18);--cvshadow:0 8px 32px rgba(60,32,16,.3);
  --gold-gradient:linear-gradient(135deg,#7a4010,#c07830,#5e3008);
  --cat-yorum: #e0844a; --cat-beğeni: #d45c90; --cat-bölüm: #d4aa30; --cat-duyuru: #6094d8; --cat-uyarı: #ee6060;
}
[data-theme="slate"]{
  --bg:#e8e8eb;--bg2:#e0e0e4;--surface:#f4f4f6;--surface2:#ebebee;
  --border:#d0d0d8;--border2:#bcbcc8;--text:#1a1a24;--text-muted:#6e6e80;
  --text-sub:#48485c;--accent:#3d3d5c;--accent2:#28283f;
  --accent-dim:rgba(61,61,92,.1);--accent-glow:rgba(61,61,92,.18);
  --accent-glow2:rgba(61,61,92,.05);--overlay:rgba(10,10,20,.45);
  --cshadow:0 4px 20px rgba(0,0,0,.1);--cvshadow:0 8px 32px rgba(0,0,0,.16);
  --gold-gradient:linear-gradient(135deg,#3d3d5c,#6060a0,#28283f);
  --cat-yorum: #e0844a; --cat-beğeni: #d45c90; --cat-bölüm: #d4aa30; --cat-duyuru: #6094d8; --cat-uyarı: #ee6060;
}
[data-theme="midnight"]{
  --bg:#040408;--bg2:#06060e;--surface:#0c0c18;--surface2:#121220;
  --border:#181830;--border2:#20203c;--text:#c0c0e8;--text-muted:#383858;
  --text-sub:#6060a0;--accent:#a090e8;--accent2:#8070c8;
  --accent-dim:rgba(160,144,232,.12);--accent-glow:rgba(160,144,232,.24);
  --accent-glow2:rgba(160,144,232,.07);--overlay:rgba(0,0,0,.85);
  --cshadow:0 4px 24px rgba(0,0,0,.6);--cvshadow:0 8px 40px rgba(0,0,0,.78);
  --gold-gradient:linear-gradient(135deg,#a090e8,#c0b0ff,#8070c8);
  --cat-yorum: #c8682a; --cat-beğeni: #b84476; --cat-bölüm: #b09010; --cat-duyuru: #4278c4; --cat-uyarı: #cc4040;
}
[data-theme="turuncu"]{
  --bg:#100804;--bg2:#160b05;--surface:#1e1008;--surface2:#271508;
  --border:#361a08;--border2:#442010;--text:#f2ddd0;--text-muted:#7a4a38;
  --text-sub:#c08068;--accent:#d4542a;--accent2:#b03c18;
  --accent-dim:rgba(212,84,42,.13);--accent-glow:rgba(212,84,42,.30);
  --accent-glow2:rgba(212,84,42,.10);--overlay:rgba(0,0,0,.82);
  --cshadow:0 4px 24px rgba(0,0,0,.54);--cvshadow:0 8px 40px rgba(0,0,0,.72);
  --gold-gradient:linear-gradient(135deg,#d4542a,#f07040,#b03c18);
  --cat-yorum: #c8682a; --cat-beğeni: #b84476; --cat-bölüm: #b09010; --cat-duyuru: #4278c4; --cat-uyarı: #cc4040;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html{ scroll-behavior:smooth; --body-font:'DM Sans',sans-serif; }
body{
  background:var(--bg);color:var(--text);
  font-family:var(--body-font);
  min-height:100vh;overflow-x:hidden;
  transition:background .3s,color .3s;
}
button{cursor:pointer;font-family:var(--body-font);outline:none;border:none;background:none;}
a{text-decoration:none;color:inherit;}
input,textarea,select{font-family:var(--body-font);}

/* ── ÜST BAR ── */
#topbar{
  position:fixed;top:0;left:0;right:0;z-index:900;
  height:var(--bar-h);
  background:var(--topbar-bg,rgba(12,12,14,.92));
  backdrop-filter:blur(18px) saturate(1.4);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
  border-bottom:1px solid var(--border);
  transform:translateY(0);
  transition:transform .32s cubic-bezier(.4,0,.2,1),background .3s,border-color .3s;
}
[data-theme="light"] #topbar{background:var(--topbar-bg,rgba(249,246,241,.92));}
[data-theme="sepia"] #topbar{background:var(--topbar-bg,rgba(243,233,216,.92));}
[data-theme="abyss"] #topbar{background:var(--topbar-bg,rgba(7,8,15,.92));}
[data-theme="slate"] #topbar{background:var(--topbar-bg,rgba(232,232,235,.94));}
[data-theme="parchment"] #topbar{background:var(--topbar-bg,rgba(237,224,192,.94));}
[data-theme="turuncu"] #topbar{background:var(--topbar-bg,rgba(16,8,4,.94));}
#topbar.hidden{transform:translateY(-100%);}

.topbar-inner{
  max-width:1200px;margin:0 auto;height:100%;
  display:flex;align-items:center;padding:0 16px;gap:0;
}
.topbar-logo{
  display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;flex-shrink:0;cursor:pointer;transition:transform .2s;
}
.topbar-logo:active{transform:scale(.9);}
.topbar-logo svg{width:34px;height:34px;filter:drop-shadow(0 0 6px var(--accent-glow)) brightness(1.1);}
#dg1 stop:nth-child(1){stop-color:var(--accent);}
#dg1 stop:nth-child(2){stop-color:var(--accent);stop-opacity:.75;}
#dg1 stop:nth-child(3){stop-color:var(--accent2);}
#dg2 stop:nth-child(1){stop-color:var(--accent);stop-opacity:.9;}
#dg2 stop:nth-child(2){stop-color:var(--accent2);}
#fg1 stop:nth-child(1){stop-color:var(--accent);}
#fg1 stop:nth-child(2){stop-color:var(--accent2);}

.topbar-nav{display:flex;gap:2px;margin-left:16px;flex:1;}
.nav-link{
  padding:8px 12px;border-radius:9px;
  font-size:calc(13px * var(--fs,1));font-weight:500;
  color:var(--text-sub);transition:color .18s,background .18s;white-space:nowrap;
}
.nav-link:hover{color:var(--text);background:var(--accent-dim);}
.nav-link.active{color:var(--accent);}

.nav-dropdown{position:relative;}
.nav-dropdown-trigger{
  display:flex;align-items:center;gap:6px;
  padding:8px 12px;border-radius:9px;
  font-size:calc(13px * var(--fs,1));font-weight:500;
  color:var(--text-sub);transition:color .18s,background .18s;
  cursor:pointer;white-space:nowrap;user-select:none;
}
.nav-dropdown-trigger:hover{color:var(--text);background:var(--accent-dim);}
.nav-dropdown-trigger.open{color:var(--accent);}
.nav-dropdown-trigger .nd-arrow{
  width:10px;height:10px;flex-shrink:0;opacity:.5;
  transition:transform .28s cubic-bezier(.4,0,.2,1),opacity .18s;
}
.nav-dropdown-trigger.open .nd-arrow{transform:rotate(180deg);opacity:1;}

.cat-mega{
  position:fixed;top:var(--bar-h);left:0;right:0;z-index:850;
  background:var(--bg);border-bottom:1px solid var(--border);
  box-shadow:0 24px 64px rgba(0,0,0,.7),0 1px 0 var(--border2);
  transform:translateY(-6px);opacity:0;pointer-events:none;
  transition:opacity .26s cubic-bezier(.4,0,.2,1),transform .26s cubic-bezier(.4,0,.2,1);
  overflow:hidden;
}
.cat-mega.open{opacity:1;transform:translateY(0);pointer-events:all;}
.cat-mega::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent 0%,var(--accent) 20%,var(--accent2) 50%,var(--accent) 80%,transparent 100%);
  opacity:.45;
}
.cat-mega::after{
  content:'';position:absolute;top:0;right:0;width:320px;height:100%;
  background:radial-gradient(ellipse at 100% 0%,var(--accent-glow2) 0%,transparent 70%);
  pointer-events:none;
}
.cat-mega-inner{max-width:1200px;margin:0 auto;padding:20px 16px 18px;position:relative;z-index:1;}
.cat-mega-header{display:flex;align-items:center;gap:12px;margin-bottom:16px;}
.cat-mega-title{
  font-family:'Cinzel',serif;font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent);opacity:.65;flex-shrink:0;
}
.cat-mega-header::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,var(--border2) 0%,transparent 100%);}
.cat-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;}
@media(max-width:900px){.cat-grid{grid-template-columns:repeat(4,1fr);}}
@media(max-width:600px){.cat-grid{grid-template-columns:repeat(3,1fr);}}
.cat-card{
  display:flex;flex-direction:column;align-items:center;
  gap:8px;padding:12px 8px 10px;border-radius:10px;
  border:1px solid transparent;cursor:pointer;text-decoration:none;
  color:inherit;position:relative;overflow:hidden;
  transition:background .2s,border-color .2s,transform .18s;
}
.cat-card::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 0%,var(--accent-glow2) 0%,transparent 70%);
  opacity:0;transition:opacity .2s;
}
.cat-card:hover{background:var(--surface);border-color:var(--border2);transform:translateY(-2px);}
.cat-card:hover::before{opacity:1;}
.cat-card:hover .cat-icon-wrap{border-color:var(--accent);box-shadow:0 0 14px var(--accent-glow);}
.cat-card:hover .cat-icon-wrap svg{stroke:var(--accent);filter:drop-shadow(0 0 4px var(--accent-glow));}
.cat-card:hover .cat-card-name{color:var(--accent);}
.cat-icon-wrap{
  width:38px;height:38px;border-radius:10px;border:1px solid var(--border);
  background:var(--surface2);display:flex;align-items:center;justify-content:center;
  flex-shrink:0;transition:border-color .2s,box-shadow .2s;
}
.cat-icon-wrap svg{
  width:20px;height:20px;stroke:var(--text-sub);stroke-width:1.4;
  fill:none;stroke-linecap:round;stroke-linejoin:round;transition:stroke .2s,filter .2s;
}
.cat-card-name{font-size:calc(11.5px * var(--fs,1));font-weight:500;color:var(--text-sub);text-align:center;line-height:1.2;transition:color .18s;}
.cat-card-count{font-size:calc(10px * var(--fs,1));color:var(--text-muted);margin-top:-4px;}
.cat-overlay{
  position:fixed;inset:0;top:var(--bar-h);z-index:840;
  background:rgba(0,0,0,.4);backdrop-filter:blur(2px);
  opacity:0;pointer-events:none;transition:opacity .26s;
}
.cat-overlay.open{opacity:1;pointer-events:all;}

.topbar-right{display:flex;align-items:center;gap:8px;}
.profile-btn{
  width:36px;height:36px;border-radius:50%;overflow:hidden;flex-shrink:0;
  border:2px solid var(--border2);transition:border-color .18s,transform .15s,box-shadow .18s;
  position:relative;
}
.profile-btn:hover{border-color:var(--accent);box-shadow:0 0 12px var(--accent-glow);}
.profile-btn:active{transform:scale(.9);}
.profile-mini{width:100%;height:100%;object-fit:cover;display:block;}
.profile-mini-placeholder{
  width:100%;height:100%;background:var(--gold-gradient);
  display:flex;align-items:center;justify-content:center;
  color:#000;font-size:calc(14px * var(--fs,1));font-weight:700;font-family:'Cinzel',serif;
}

/* ── PANEL ── */
#panel-overlay{
  position:fixed;inset:0;z-index:1000;background:transparent;
  opacity:0;pointer-events:none;transition:opacity .3s;
}
#panel-overlay.on{opacity:1;pointer-events:auto;}
#right-panel{
  position:fixed;top:0;right:0;bottom:0;z-index:1001;
  width:65%;max-width:320px;background:var(--surface);
  border-left:1px solid var(--border);transform:translateX(100%);
  transition:transform .36s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;overflow:hidden;
}
#right-panel.open{transform:translateX(0);}
.panel-scroll{flex:1;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.panel-scroll::-webkit-scrollbar{display:none;}
.panel-header{
  padding:48px 20px 20px;
  background:linear-gradient(180deg,var(--surface2) 0%,var(--surface) 100%);
  border-bottom:1px solid var(--border);position:relative;
}
.panel-close{
  position:absolute;top:14px;right:14px;width:30px;height:30px;border-radius:8px;
  background:var(--border);color:var(--text-muted);font-size:calc(16px * var(--fs,1));
  display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s;
}
.panel-close:hover{background:var(--accent-dim);color:var(--accent);}
.panel-profile-wrap{display:flex;flex-direction:column;align-items:center;cursor:pointer;transition:opacity .18s;}
.panel-profile-wrap:hover{opacity:.85;}
.panel-avatar{
  width:68px;height:68px;border-radius:50%;border:2.5px solid var(--accent);
  box-shadow:0 0 20px var(--accent-glow);background:var(--gold-gradient);
  display:flex;align-items:center;justify-content:center;
  color:#000;font-size:calc(24px * var(--fs,1));font-weight:700;
  font-family:'Cinzel',serif;margin-bottom:10px;overflow:hidden;
}
.panel-avatar img{width:100%;height:100%;object-fit:cover;}
.panel-username{font-size:calc(14px * var(--fs,1));font-weight:600;color:var(--text);margin-bottom:2px;}
.panel-usersub{font-size:calc(11px * var(--fs,1));color:var(--text-muted);}
.panel-search-wrap{padding:16px 16px 0;}
.panel-search{
  display:flex;align-items:center;gap:8px;background:var(--bg);
  border:1.5px solid var(--border2);border-radius:11px;padding:9px 12px;transition:border-color .18s;
}
.panel-search:focus-within{border-color:var(--accent);}
.panel-search-ico{color:var(--text-muted);font-size:calc(14px * var(--fs,1));flex-shrink:0;}
.panel-search input{
  flex:1;background:none;border:none;outline:none;
  color:var(--text);font-size:calc(13px * var(--fs,1));font-family:var(--body-font);
}
.panel-search input::placeholder{color:var(--text-muted);}
.panel-menu{padding:12px 8px;}
.panel-item{
  display:flex;align-items:center;gap:12px;
  padding:12px 12px;border-radius:12px;cursor:pointer;transition:background .15s;margin-bottom:2px;
  text-decoration:none;color:inherit;
}
.panel-item:hover{background:var(--accent-dim);}
.panel-item-ico{
  width:34px;height:34px;border-radius:9px;background:var(--surface2);
  border:1px solid var(--border2);display:flex;align-items:center;justify-content:center;
  font-size:calc(16px * var(--fs,1));flex-shrink:0;transition:background .15s,border-color .15s;
}
.panel-item:hover .panel-item-ico{background:var(--accent-dim);border-color:color-mix(in srgb,var(--accent) 30%,var(--border2));}
.panel-item-label{font-size:calc(14px * var(--fs,1));font-weight:500;color:var(--text);flex:1;}
.panel-item-badge{
  background:var(--accent);color:#000;font-size:calc(10px * var(--fs,1));font-weight:700;
  min-width:18px;height:18px;padding:0 4px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
}

/* Bildirim Badge'leri */
.panel-notif-badges{
  display:flex;align-items:center;gap:4px;height:24px;
}
.panel-notif-badge{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:24px;width:24px;height:24px;padding:0;
  border-radius:50%;
  color:white;
  font-size:10px;font-weight:700;
  border:1px solid transparent;
  box-shadow:0 2px 6px rgba(0,0,0,0.2);
  transition:all .2s ease;
  cursor:default;
}
.panel-notif-badge:hover{transform:scale(1.15);}
.panel-notif-badge-yorum{background:#c8682a;}
.panel-notif-badge-begeni{background:#b84476;}
.panel-notif-badge-bolum{background:#b09010;}
.panel-notif-badge-duyuru{background:#4278c4;}
.panel-notif-badge-uyari{background:#cc4040;}
.panel-divider{height:1px;background:var(--border);margin:6px 16px;}

/* Font Accordion */
.font-acc-btn{
  display:flex;align-items:center;gap:12px;padding:12px 12px;border-radius:12px;
  width:100%;cursor:pointer;transition:background .15s;margin-bottom:2px;
}
.font-acc-btn:hover{background:var(--accent-dim);}
.font-acc-ico{
  width:34px;height:34px;border-radius:9px;background:var(--surface2);
  border:1px solid var(--border2);display:flex;align-items:center;justify-content:center;
  font-size:calc(16px * var(--fs,1));flex-shrink:0;
}
.font-acc-label{font-size:calc(14px * var(--fs,1));font-weight:500;color:var(--text);flex:1;text-align:left;}
.font-acc-arrow{font-size:calc(11px * var(--fs,1));color:var(--text-muted);transition:transform .45s cubic-bezier(.34,1.2,.64,1),color .25s;}
.font-acc-btn.open .font-acc-arrow{color:var(--accent);transform:rotate(180deg);}
.font-acc-body{overflow:hidden;max-height:0;opacity:0;transform-origin:top;transition:max-height .6s cubic-bezier(.16,1,.3,1),opacity .4s cubic-bezier(.16,1,.3,1);}
.font-acc-body.open{opacity:1;max-height:900px;}
.font-acc-inner{
  padding:8px 8px 16px;transform:translateY(-12px) scale(.98);
  transition:transform .5s cubic-bezier(.34,1.15,.64,1),opacity .35s ease;opacity:0;
}
.font-acc-body.open .font-acc-inner{transform:translateY(0) scale(1);opacity:1;}

.fa-section-lbl{
  font-size:calc(10px * var(--fs,1));font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-muted);margin-bottom:8px;padding:0 4px;
}
.theme-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-bottom:16px;}
.th-preset{
  aspect-ratio:1;border-radius:8px;border:2px solid transparent;cursor:pointer;
  transition:transform .15s,border-color .15s,box-shadow .15s;
  display:flex;align-items:center;justify-content:center;
  font-size:calc(10px * var(--fs,1));font-weight:700;overflow:hidden;position:relative;
}
.th-preset:hover{transform:scale(1.1);}
.th-preset.active{border-color:var(--accent);box-shadow:0 0 8px var(--accent-glow);}
.th-preset-label{
  position:absolute;bottom:2px;left:0;right:0;
  text-align:center;font-size:calc(8px * var(--fs,1));font-weight:600;line-height:1;opacity:.8;
}
.tp-dark{background:#141418;color:#d4a843;}
.tp-light{background:#f9f6f1;color:#8b5e3c;}
.tp-sepia{background:#f3e9d8;color:#6e4a2e;}
.tp-abyss{background:#10121e;color:#5da0d8;}
.tp-forest{background:#0f1a0f;color:#4caf50;}
.tp-crimson{background:#1a0a0a;color:#e05050;}
.tp-dusk{background:#1a1020;color:#9070d0;}
.tp-parchment{background:#f0e8d0;color:#704020;}
.tp-slate{background:#e8e8eb;color:#3d3d5c;border:1px solid #c0c0cc;}
.tp-midnight{background:#08080f;color:#a090e0;}
.tp-turuncu{background:#1e1008;color:#d4542a;}

.saved-presets{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:16px;overflow:visible;padding:4px 2px;}
.saved-preset-item{
  aspect-ratio:1;border-radius:8px;border:2px solid transparent;cursor:pointer;
  transition:transform .15s,border-color .15s,box-shadow .15s;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  overflow:visible;position:relative;padding:0;
}
.saved-preset-item:hover{transform:scale(1.08);}
.saved-preset-item.active{border-color:var(--accent);box-shadow:0 0 8px var(--accent-glow);}
.saved-preset-item.editing{border-color:#4a90d9;box-shadow:0 0 10px rgba(74,144,217,.5);}
.sp-icon{font-size:calc(16px * var(--fs,1));line-height:1;margin-bottom:2px;}
.sp-label{
  position:absolute;bottom:2px;left:0;right:0;text-align:center;
  font-size:calc(7px * var(--fs,1));font-weight:600;line-height:1;opacity:.9;
  padding:0 2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:0 0 6px 6px;
}
.sp-actions{position:absolute;top:-7px;right:-7px;display:flex;gap:3px;opacity:0;pointer-events:none;transition:opacity .15s;z-index:10;}
.saved-preset-item:hover .sp-actions{opacity:1;pointer-events:auto;}
.sp-act-btn{
  width:18px;height:18px;border-radius:5px;display:flex;align-items:center;justify-content:center;
  font-size:9px;font-weight:700;cursor:pointer;border:1px solid rgba(0,0,0,.25);transition:transform .1s;
}
.sp-act-btn:hover{transform:scale(1.15);}
.sp-act-edit{background:#4a90d9;color:#fff;}
.sp-act-del{background:#d94a4a;color:#fff;}
.saved-empty{font-size:calc(11px * var(--fs,1));color:var(--text-muted);font-style:italic;grid-column:1/-1;text-align:center;padding:10px 0;}
.fa-save-btn.edit-mode{background:linear-gradient(135deg,#4a90d9,#6ab0f9,#3070b9);}
.fa-edit-hint{font-size:calc(10px * var(--fs,1));color:#4a90d9;text-align:center;padding:5px 0 2px;display:none;}
.fa-edit-hint.visible{display:block;}

.cp-target-row{display:flex;gap:8px;margin-bottom:10px;}
.cp-target-btn{
  flex:1;padding:9px 8px;border-radius:10px;border:1.5px solid var(--border2);background:var(--bg);
  display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;
  font-size:calc(12px * var(--fs,1));font-weight:600;color:var(--text-sub);
  transition:border-color .15s,color .15s,background .15s;
}
.cp-target-btn.active{border-color:var(--accent);color:var(--accent);background:var(--accent-dim);}
.cp-dot{width:16px;height:16px;border-radius:4px;border:1px solid rgba(128,128,128,.3);flex-shrink:0;}
.cp-sb-wrap{
  width:100%;aspect-ratio:1/.6;border-radius:10px;overflow:hidden;
  position:relative;cursor:crosshair;margin-bottom:10px;touch-action:none;border:1px solid var(--border2);
}
#cpSbCanvas{display:block;width:100%;height:100%;}
.cp-cursor{
  position:absolute;width:22px;height:22px;border-radius:50%;
  border:2.5px solid #fff;box-shadow:0 0 0 1.5px rgba(0,0,0,.4),0 2px 8px rgba(0,0,0,.5);
  transform:translate(-50%,-50%);pointer-events:none;top:10%;left:90%;transition:box-shadow .1s;
}
.cp-hue-wrap{
  width:100%;height:26px;border-radius:13px;overflow:hidden;position:relative;
  cursor:pointer;margin-bottom:10px;touch-action:none;
  background:linear-gradient(to right,hsl(0,100%,50%),hsl(30,100%,50%),hsl(60,100%,50%),hsl(90,100%,50%),hsl(120,100%,50%),hsl(150,100%,50%),hsl(180,100%,50%),hsl(210,100%,50%),hsl(240,100%,50%),hsl(270,100%,50%),hsl(300,100%,50%),hsl(330,100%,50%),hsl(360,100%,50%));
  border:1px solid var(--border2);
}
.cp-hue-thumb{
  position:absolute;top:50%;width:22px;height:22px;border-radius:50%;background:#fff;
  box-shadow:0 0 0 2px rgba(0,0,0,.3),0 2px 6px rgba(0,0,0,.4);transform:translate(-50%,-50%);
  pointer-events:none;left:0%;
}
.cp-preview-row{display:flex;align-items:center;gap:8px;margin-bottom:12px;}
.cp-preview-swatch{width:36px;height:36px;border-radius:8px;border:1px solid var(--border2);flex-shrink:0;}
.cp-hex-input{
  flex:1;padding:8px 10px;border-radius:9px;border:1.5px solid var(--border2);background:var(--bg);
  color:var(--text);font-size:calc(13px * var(--fs,1));font-family:'Source Code Pro',monospace;
  outline:none;transition:border-color .18s;letter-spacing:.05em;
}
.cp-hex-input:focus{border-color:var(--accent);}

.fa-row{display:flex;flex-direction:column;gap:10px;}
.fa-ctrl{display:flex;flex-direction:column;gap:5px;}
.fa-ctrl-label{font-size:calc(11px * var(--fs,1));font-weight:600;color:var(--text-muted);letter-spacing:.05em;}
.fa-align-row{display:flex;gap:6px;}
.fa-align-btn{
  flex:1;padding:8px 6px;border-radius:9px;border:1.5px solid var(--border2);background:var(--bg);
  color:var(--text-muted);font-size:calc(18px * var(--fs,1));
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:border-color .15s,color .15s,background .15s;
}
.fa-align-btn.active{border-color:var(--accent);color:var(--accent);background:var(--accent-dim);}
.fa-font-dropdown{position:relative;width:100%;}
.fa-font-trigger{
  width:100%;padding:8px 28px 8px 10px;border-radius:9px;border:1.5px solid var(--border2);
  background:var(--bg);color:var(--text);font-size:calc(13px * var(--fs,1));
  text-align:left;cursor:pointer;position:relative;transition:border-color .18s;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.fa-font-trigger::after{
  content:'';position:absolute;right:10px;top:50%;transform:translateY(-50%);width:10px;height:6px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%235a5668'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-size:contain;
}
.fa-font-trigger:hover,.fa-font-trigger.open{border-color:var(--accent);}
.fa-font-list{
  position:absolute;bottom:calc(100% + 6px);left:0;right:0;background:var(--surface);
  border:1px solid var(--border2);border-radius:11px;padding:6px;
  max-height:260px;overflow-y:auto;overflow-x:hidden;
  scrollbar-width:thin;scrollbar-color:var(--border2) transparent;
  box-shadow:0 -8px 28px rgba(0,0,0,.4);z-index:200;
  opacity:0;pointer-events:none;transform:translateY(4px);transition:opacity .18s,transform .18s;
}
.fa-font-list.open{opacity:1;pointer-events:auto;transform:translateY(0);}
.fa-font-list::-webkit-scrollbar{width:4px;}
.fa-font-list::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px;}
.fa-font-group-lbl{font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);padding:8px 8px 4px;}
.fa-font-opt{display:block;width:100%;padding:7px 10px;border-radius:7px;border:none;background:none;text-align:left;cursor:pointer;transition:background .12s;}
.fa-font-opt:hover{background:var(--accent-dim);}
.fa-font-opt.picked{background:var(--accent-dim);}
.fa-font-name{display:block;font-size:calc(13px * var(--fs,1));font-weight:600;color:var(--text);line-height:1.3;}
.fa-font-opt.picked .fa-font-name{color:var(--accent);}
.fa-font-desc{display:block;font-size:calc(10px * var(--fs,1));color:var(--text-muted);line-height:1.3;font-family:'DM Sans',sans-serif !important;margin-top:1px;}
.fa-size-row{display:flex;align-items:center;gap:8px;}
/* Genel Boyut (en üstte, kendi başına) — hızlı erişim için büyük
   butonlar ve geniş layout. Tüm renkler tema değişkenlerinden gelir
   (--surface2/--border/--text), aydınlık+karanlık temada tutarlı. */
.fa-size-row-top{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin:8px 0 16px;padding:0;
}
.fa-size-row-top .fa-size-btn{
  width:46px;height:42px;font-size:20px;
  background:var(--surface2);border:1px solid var(--border2);
  color:var(--text);border-radius:10px;
}
.fa-size-row-top .fa-size-btn:hover{
  border-color:var(--accent);color:var(--accent);background:var(--accent-dim);
}
.fa-size-row-top .fa-size-val{
  flex:1;height:42px;display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:600;color:var(--text);
  background:var(--surface2);border:1px solid var(--border2);border-radius:10px;
}
.fa-size-btn{
  width:28px;height:28px;border-radius:8px;background:var(--surface2);border:1px solid var(--border2);
  color:var(--text);font-size:calc(16px * var(--fs,1));font-weight:600;
  display:flex;align-items:center;justify-content:center;
  transition:background .15s,border-color .15s;flex-shrink:0;
}
.fa-size-btn:hover{background:var(--accent-dim);border-color:var(--accent);}
.fa-size-val{
  flex:1;text-align:center;font-size:calc(13px * var(--fs,1));font-weight:600;
  color:var(--text);background:var(--bg);border:1.5px solid var(--border2);border-radius:8px;padding:5px 0;
}
.sp-icon-trigger{
  width:36px;height:36px;border-radius:9px;flex-shrink:0;background:var(--surface2);
  border:1.5px solid var(--border2);display:flex;align-items:center;justify-content:center;
  font-size:17px;cursor:pointer;font-family:'Cinzel',serif;color:var(--text);
  transition:border-color .15s,background .15s;position:relative;
}
.sp-icon-trigger:hover,.sp-icon-trigger.open{border-color:var(--accent);background:var(--accent-dim);}
.sp-icon-popup{
  /* position:fixed çünkü .font-acc-body parent'ı overflow:hidden — eskiden
     position:absolute idi ama parent panel popup'ı kesiyordu, kullanıcı
     "ikon seçme ekranı açılmıyor" şikayetinin kökü buydu. JS top/left ayarlar. */
  position:fixed;width:230px;
  max-width:calc(100vw - 32px);max-height:260px;overflow-y:auto;overflow-x:hidden;
  scrollbar-width:thin;scrollbar-color:var(--border2) transparent;
  background:var(--surface);border:1px solid var(--border2);border-radius:12px;padding:8px;
  display:grid;grid-template-columns:repeat(7,1fr);gap:3px;
  box-shadow:0 -8px 32px rgba(0,0,0,.45);z-index:9999;
  opacity:0;pointer-events:none;transform:translateY(6px);transition:opacity .18s,transform .18s;
}
.sp-icon-popup.open{opacity:1;pointer-events:auto;transform:translateY(0);}
.sp-icon-popup::-webkit-scrollbar{width:4px;}
.sp-icon-popup::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px;}
.sp-icon-opt{
  aspect-ratio:1;border-radius:6px;display:flex;align-items:center;justify-content:center;
  font-size:15px;cursor:pointer;font-family:'Cinzel',serif;color:var(--text-sub);
  border:1.5px solid transparent;transition:background .1s,border-color .12s,color .12s;
}
.sp-icon-opt:hover{background:var(--accent-dim);color:var(--accent);}
.sp-icon-opt.picked{border-color:var(--accent);background:var(--accent-dim);color:var(--accent);}
.sp-icon-cat{grid-column:1/-1;font-size:9px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);padding:5px 2px 3px;}
.fa-save-row{display:flex;gap:7px;align-items:stretch;}
.fa-save-name{
  flex:1;padding:10px 11px;border-radius:10px;border:1.5px solid var(--border2);
  background:var(--bg);color:var(--text);font-size:calc(13px * var(--fs,1));
  outline:none;transition:border-color .18s;min-width:0;
}
.fa-save-name::placeholder{color:var(--text-muted);}
.fa-save-name:focus{border-color:var(--accent);}
.fa-save-btn{
  padding:10px 14px;border-radius:10px;border:none;background:var(--gold-gradient);
  color:#000;font-size:calc(13px * var(--fs,1));font-weight:600;white-space:nowrap;
  transition:opacity .15s,transform .12s;flex-shrink:0;
}
.fa-save-btn:active{transform:scale(.97);}


/* ── PANEL ARAMA DROPDOWN ── */
.panel-search-wrap{position:relative;}
.ps-dropdown{
  position:absolute;left:0;right:0;top:calc(100% + 4px);
  background:var(--surface);border:1.5px solid var(--border);
  border-radius:12px;overflow:hidden;
  max-height:320px;overflow-y:auto;
  box-shadow:0 8px 32px rgba(0,0,0,.4);
  z-index:9999;scrollbar-width:none;
}
.ps-dropdown:empty{display:none;}
.ps-dropdown::-webkit-scrollbar{display:none;}
.ps-drop-item{
  display:flex;align-items:center;gap:10px;
  padding:9px 12px;cursor:pointer;transition:background .12s;
  border-bottom:1px solid var(--border2);
}
.ps-drop-item:last-of-type{border-bottom:none;}
.ps-drop-item:hover,.ps-drop-item.ps-active{background:var(--accent-dim);}
.ps-drop-cover{
  width:32px;height:46px;border-radius:5px;
  flex-shrink:0;overflow:hidden;
  background:var(--border2);
  display:flex;align-items:center;justify-content:center;
  font-size:9px;font-weight:800;color:rgba(255,255,255,.7);letter-spacing:-.5px;
}
.ps-drop-cover img{width:100%;height:100%;object-fit:cover;display:block;}
.ps-drop-info{flex:1;min-width:0;}
.ps-drop-title{font-size:13px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ps-drop-meta{font-size:11px;color:var(--text-muted);margin-top:2px;}
.ps-drop-more{
  padding:10px 12px;text-align:center;
  font-size:12px;color:var(--accent);font-weight:600;
  cursor:pointer;transition:background .12s;
  border-top:1px solid var(--border2);
}
.ps-drop-more:hover{background:var(--accent-dim);}

/* ── Tamamlandı rozeti — tüm kitap kartlarında kullanılır ── */
.book-completed-badge {
  position: absolute;
  top: 0; left: 0; right: 0;
  background: linear-gradient(135deg, rgba(46,160,67,.92), rgba(20,110,40,.92));
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  text-align: center;
  padding: 4px 4px;
  letter-spacing: .07em;
  text-transform: uppercase;
  z-index: 3;
  pointer-events: none;
  user-select: none;
}

/* ══════════════════════════════════════════
   ZENGİN METİN EDİTÖRÜ — topluluk sayfaları
══════════════════════════════════════════ */
.re-wrap{border:1px solid var(--border);border-radius:10px;overflow:hidden;background:var(--bg);transition:border-color .2s;position:relative;}
.re-wrap:focus-within{border-color:var(--accent);}
.re-toolbar{display:flex;align-items:center;gap:2px;padding:6px 8px;border-bottom:1px solid var(--border);background:var(--surface);flex-wrap:wrap;}
.re-btn{min-width:28px;height:28px;padding:0 5px;border:none;border-radius:5px;background:transparent;color:var(--text-muted);cursor:pointer;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;transition:all .15s;flex-shrink:0;font-family:'Nunito',sans-serif;line-height:1;}
.re-btn:hover{background:var(--surface2);color:var(--text);}
.re-btn.active{background:var(--accent-dim);color:var(--accent2);}
.re-btn svg{width:13px;height:13px;flex-shrink:0;}
.re-sep{width:1px;height:16px;background:var(--border);margin:0 3px;flex-shrink:0;}
.re-body{min-height:140px;padding:11px 13px;outline:none;color:var(--text);font-family:'EB Garamond',serif;font-size:15px;line-height:1.8;}
.re-body:empty::before{content:attr(data-placeholder);color:var(--text-muted);opacity:.45;pointer-events:none;}
.re-body img{max-width:100%;border-radius:8px;margin:6px 0;display:block;}
.re-body blockquote{border-left:3px solid var(--accent);margin:8px 0 8px 4px;padding:4px 12px;color:var(--text-muted);font-style:italic;}
.re-body h2{font-family:'Cinzel',serif;font-size:17px;color:var(--accent2);margin:12px 0 6px;}
.re-body h3{font-family:'Cinzel',serif;font-size:15px;color:var(--text);margin:10px 0 5px;}
.re-body ul,.re-body ol{padding-left:20px;}
.re-body li{margin:3px 0;}
.re-body a{color:var(--accent2);}
.re-wrap.compact .re-toolbar{padding:4px 7px;gap:1px;}
.re-wrap.compact .re-btn{min-width:26px;height:26px;font-size:11px;}
.re-wrap.compact .re-body{min-height:64px;padding:8px 11px;font-size:14px;line-height:1.65;}

/* ════════════════════════════════════════════════════════════════
   FEATURE FLAGS — admin tarafından /anasayfa-yonetimi'nden açılıp
   kapatılabilir. html data attribute'una göre UI elementleri gizler.
   theme-early.js localStorage'tan okuyup data-feature-donations="off"
   ekler.
══════════════════════════════════════════════════════════════════ */

/* Bağış / Destek ol sistemi kapalıyken — ödeme entegrasyonu henüz
   yokken kullanıcının "para gönderebiliyorum" sanmasını engelle. */
html[data-feature-donations="off"] #donate-btn,
html[data-feature-donations="off"] .asc-donate-btn,
html[data-feature-donations="off"] .donate-btn,
html[data-feature-donations="off"] .donatebtn,
html[data-feature-donations="off"] #donatemodal,
html[data-feature-donations="off"] .ws-donate,
html[data-feature-donations="off"] [data-feature="donations"] {
  display: none !important;
}