/* ============================================================
   Fabrika Okulu — Öğrenci Paneli (v4)
   Standalone doküman; siteye birebir benzeyen header.
   ============================================================ */
:root{
  --bg:#ffffff; --card:#f5f7fa; --line:#e3e8ef; --line2:#e7ecf3;
  --hover:#eef2f7;
  --ink:#12233a; --ink2:#5a6577; --ink3:#98a1b3;
  --navy:#194977; --navy-d:#142b56; --navy-soft:#e7edf5;
  --brand-navy:#012963;
  --sky:#5baecf; --sky-soft:#e9f3f9;
  --green:#1f9d5b; --green-soft:#e7f6ee;
  --amber:#d9871a; --amber-soft:#fbf0dd;
  --gray-soft:#eef1f6;
  --surface:#ffffff; /* kart içi beyaz yüzeyler (input, ghost buton, sekme) — tema ile hafif renklenir */
  --head-h:152px; /* promo(39) + header bar(113) */
  --maxw:1310px;
}
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;}
a{text-decoration:none;color:inherit;}

/* ============ HEADER (site header replikası) ============ */
.topbar{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line);}
.promo{background:#194977;min-height:39px;display:flex;align-items:center;justify-content:center;padding-top:env(safe-area-inset-top,0);}
.promo-inner{max-width:var(--maxw);width:100%;margin:0 auto;padding:0 15px;text-align:center;color:#fff;font-size:13px;font-weight:400;letter-spacing:.2px;line-height:1.5;}
.site-header{height:113px;max-width:var(--maxw);margin:0 auto;padding:0 15px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;}
.hleft{display:flex;align-items:center;gap:6px;}
.brand{display:flex;flex-direction:column;align-items:center;gap:2px;justify-self:center;}
.brand img{height:100px;width:auto;display:block;}
.hactions{display:flex;align-items:center;justify-content:flex-end;gap:10px;}
.hbelge{display:inline-flex;align-items:center;gap:7px;height:42px;padding:0 15px;border-radius:9px;background:#194977;color:#fff;font-size:13.5px;font-weight:600;cursor:pointer;white-space:nowrap;transition:.15s;}
.hbelge:hover{background:#142b56;}
.hbelge i{font-size:18px;}
/* Mobilde header kalabalık olmasın: Belge Yükle yan menüde zaten var → gizle */
@media(max-width:760px){.hbelge{display:none;}}

/* Bildirim zili + okunmamış rozeti */
.hbell{position:relative;}
.nbadge{position:absolute;top:-4px;right:-4px;min-width:17px;height:17px;padding:0 4px;border-radius:20px;
  background:#d1493d;color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;
  border:2px solid #fff;line-height:1;}

/* ===== BİLDİRİMLERİM ===== */
.nl{border:1px solid var(--line);border-radius:14px;background:#fff;overflow:hidden;margin-top:6px;}
.nl-item{display:flex;align-items:flex-start;gap:11px;padding:14px 16px;border-bottom:1px solid var(--line2);
  text-decoration:none;color:inherit;transition:background .13s;}
.nl-item:last-child{border-bottom:none;}
.nl-item:hover{background:var(--hover);}
/* Okunmamış: farklı arka plan + dolu nokta */
.nl-item.unread{background:#eef4fa;}
.nl-item.unread:hover{background:#e5eef7;}
.nl-dot{width:8px;height:8px;border-radius:50%;background:transparent;margin-top:6px;flex:none;}
.nl-item.unread .nl-dot{background:#194977;}
.nl-main{flex:1;min-width:0;}
.nl-t{display:block;font-size:14px;font-weight:600;color:var(--ink);line-height:1.4;}
.nl-item.unread .nl-t{font-weight:700;}
.nl-b{display:block;font-size:13px;color:var(--ink2);margin-top:3px;line-height:1.5;}
.nl-when{font-size:11.5px;color:var(--ink3);white-space:nowrap;flex:none;margin-top:2px;}
.nl-more{display:flex;justify-content:center;margin-top:14px;}
@media(max-width:600px){
  .nl-item{padding:12px 13px;}
  .nl-when{display:none;}
}
.hicon{width:42px;height:42px;border-radius:9px;background:#5baecf;color:#fff;display:flex;align-items:center;justify-content:center;font-size:19px;cursor:pointer;transition:.15s;}
.hicon:hover{background:#49a0c4;}
.burger{display:none;background:none;border:none;font-size:22px;color:var(--ink);cursor:pointer;width:42px;height:42px;border-radius:9px;align-items:center;justify-content:center;}

/* Header içi hesap navigasyonu (masaüstü) */
.acct-nav{display:flex;align-items:center;gap:4px;}
.anav{display:inline-flex;align-items:center;padding:3px 14px;border-radius:999px;font-size:14px;font-weight:600;color:#384865;cursor:pointer;white-space:nowrap;border:2px solid transparent;transition:color .14s,border-color .14s;}
.anav.active{border-color:#142b56;color:#142b56;font-weight:600;}
.anav .nbadge{margin-left:7px;font-size:10px;background:var(--amber);color:#fff;border-radius:20px;padding:1px 6px;font-weight:700;}

/* Kullanıcı dropdown */
.user-menu{position:relative;}
.user-btn{display:flex;align-items:center;gap:9px;padding:5px 11px 5px 5px;border:1px solid var(--line);border-radius:12px;background:#fff;cursor:pointer;font-family:inherit;transition:.14s;}
.user-btn:hover{background:var(--hover);}
.uav{width:32px;height:32px;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0;}
.uname{font-size:14px;font-weight:600;color:var(--ink);}
.uchev{font-size:16px;color:var(--ink3);transition:transform .18s;}
.user-menu.open .uchev{transform:rotate(180deg);}
.user-drop{position:absolute;right:0;top:calc(100% + 8px);width:220px;background:#fff;border:1px solid var(--line);border-radius:13px;box-shadow:0 14px 36px rgba(6,42,99,.15);padding:6px;display:none;z-index:60;}
.user-menu.open .user-drop{display:block;}
.drop-item{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:9px;font-size:14px;color:var(--ink2);cursor:pointer;text-decoration:none;}
.drop-item i{font-size:18px;}
.drop-item:hover{background:var(--hover);color:var(--ink);}
.drop-item.danger{color:#d1493d;}
.drop-item.danger:hover{background:#fdecec;}
.drop-div{height:1px;background:var(--line2);margin:6px 6px;}

.layout{max-width:var(--maxw);margin:0 auto;min-height:calc(100vh - var(--head-h));}

/* Sidebar masaüstünde gizli — sadece mobilde çekmece */
#sidebar{display:none;background:#fff;padding:18px 14px;}
.suser{display:flex;align-items:center;gap:11px;padding:6px 8px 16px;}
.suser .a{width:42px;height:42px;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;}
.suser .nm{font-size:14px;font-weight:600;}
.suser .rl{font-size:12px;color:var(--ink3);}
nav.snav{display:flex;flex-direction:column;gap:3px;}
.ni{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:10px;font-size:14px;color:var(--ink2);cursor:pointer;text-decoration:none;transition:.12s;}
.ni i{font-size:19px;width:20px;text-align:center;}
.ni:hover{background:var(--hover);}
.ni.active{background:var(--navy);color:#fff;font-weight:500;}
.ni .badge{margin-left:auto;font-size:11px;background:var(--amber-soft);color:var(--amber);padding:1px 8px;border-radius:20px;font-weight:600;}
.ni.active .badge{background:rgba(255,255,255,.22);color:#fff;}
.sdiv{border-top:1px solid var(--line2);margin:14px 4px 10px;}
.ni.logout{color:#d1493d;}

.content{padding:26px 30px;}

.panel{display:none;}
.panel.show{display:block;animation:fade .2s;}
@keyframes fade{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
h2{font-size:21px;font-weight:700;margin-bottom:3px;color:var(--navy);}
.sub{font-size:13px;color:var(--ink3);margin-bottom:20px;}

.sechead{font-size:14px;font-weight:600;margin:0 0 12px;display:flex;align-items:center;gap:8px;color:var(--ink);}
.sechead i{color:var(--navy);font-size:18px;}

/* Eğitim kartları */
.ecard{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;}
.ecard .cbody{padding:16px 17px;flex:1;display:flex;flex-direction:column;}
.ecard .et{font-size:14px;font-weight:600;}
.ecard .em{font-size:12px;color:var(--ink3);margin-top:3px;}
.ecard .bar{height:6px;background:var(--line2);border-radius:20px;margin:12px 0 4px;}
.ecard .bar>div{height:6px;border-radius:20px;}
.ecard .pctline{font-size:11px;color:var(--ink3);margin-bottom:12px;}
.ecard .cfoot{margin-top:auto;}
.ebtn{width:100%;font-size:13px;padding:9px 0;color:#fff;border:none;border-radius:9px;font-weight:500;cursor:pointer;text-align:center;display:block;}

.egrid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
@media(max-width:1040px){.egrid3{grid-template-columns:repeat(2,1fr);}}
@media(max-width:640px){.egrid3{grid-template-columns:1fr;}}
.chead{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px;}
.cicn{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#fff;}
.cicn i{font-size:21px;}

/* Takvim grid kartlar */
.tk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:13px;}
.tk-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:15px 16px;}
.tk-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px;}
.tk-date{display:flex;flex-direction:column;align-items:center;justify-content:center;width:46px;height:46px;border-radius:11px;line-height:1;flex-shrink:0;}
.tk-date b{font-size:17px;font-weight:700;}
.tk-date span{font-size:10px;margin-top:3px;text-transform:uppercase;letter-spacing:.3px;}
.tk-title{font-size:14px;font-weight:600;margin-bottom:7px;}
.tk-time{font-size:12px;color:var(--ink3);display:flex;align-items:center;gap:6px;}
.tk-time i{font-size:14px;}

/* KPI */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:20px 0 6px;}
.kpis.k3{grid-template-columns:repeat(3,1fr);}
@media(max-width:720px){.kpis{grid-template-columns:repeat(2,1fr);}.kpis.k3{grid-template-columns:repeat(2,1fr);}}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:15px 16px;display:flex;align-items:center;gap:13px;}
.kpi-ic{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.kpi-ic i{font-size:20px;}
.kpi .v{font-size:22px;font-weight:700;color:var(--ink);line-height:1;}
.kpi .l{font-size:12px;color:var(--ink3);margin-top:3px;}
.ic-navy{background:var(--navy-soft);color:var(--navy);}
.ic-amber{background:var(--amber-soft);color:var(--amber);}
.ic-sky{background:var(--sky-soft);color:var(--sky);}
.ic-green{background:var(--green-soft);color:var(--green);}

/* Görev/sınav/sipariş kompakt grid */
.gv-mod{font-size:11px;font-weight:700;color:var(--ink3);letter-spacing:.6px;padding:2px 2px 11px;}
.gv-mod.mt{padding-top:20px;}
.gv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(244px,1fr));gap:13px;align-items:start;}
.gv-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:15px 16px;display:flex;flex-direction:column;}
.gv-card.active{border:1.5px solid var(--navy);box-shadow:0 3px 14px rgba(26,58,92,.10);}
.gv-card.locked{background:#fafbfc;cursor:not-allowed;}
.gv-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.gv-ic{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;}
.gv-ic i{font-size:19px;}
.gv-title{font-size:14px;font-weight:600;margin-bottom:5px;}
.gv-title.muted{color:var(--ink3);}
.gv-meta{font-size:12px;color:var(--ink3);display:flex;align-items:center;gap:5px;}
.gv-meta i{font-size:13px;}
.gv-card .ebtn{margin-top:12px;}
.score{font-size:16px;font-weight:700;color:var(--green);}
.score small{font-size:12px;color:var(--ink3);font-weight:500;}
.gv-price{margin-top:11px;font-size:16px;font-weight:700;color:var(--ink);}
.acc-wrap{max-width:680px;}

/* Kart derinliği + hover */
.kpi,.ecard,.tk-card,.gv-card,.card,.side-card{box-shadow:0 1px 2px rgba(20,43,86,.04),0 8px 22px rgba(20,43,86,.05);}
.ecard,.gv-card{transition:transform .18s,box-shadow .18s,border-color .18s;}
.ecard:hover,.gv-card:not(.locked):hover{transform:translateY(-2px);box-shadow:0 6px 14px rgba(20,43,86,.07),0 18px 38px rgba(20,43,86,.11);}

/* Dashboard: ana içerik + sabit sağ ray */
.dash{display:grid;grid-template-columns:1fr 336px;gap:24px;align-items:start;}
@media(max-width:1080px){.dash{grid-template-columns:1fr;}}
.rail{display:flex;flex-direction:column;gap:18px;}
.rail .side-card{margin-bottom:0;}
.qlink{display:flex;align-items:center;gap:12px;padding:9px 6px;border-radius:10px;font-size:13.5px;font-weight:500;color:var(--ink);cursor:pointer;text-decoration:none;transition:background .14s;}
.qlink:hover{background:var(--hover);}
.qic{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.qic i{font-size:17px;}
.qchev{margin-left:auto;color:var(--ink3);font-size:16px;}
.cta{background:linear-gradient(135deg,var(--navy),var(--navy-d));border-radius:14px;padding:18px 19px;color:#fff;box-shadow:0 10px 26px rgba(20,43,86,.16);}
.cta h5{font-size:15px;font-weight:700;margin-bottom:5px;}
.cta p{font-size:12.5px;opacity:.85;margin-bottom:14px;line-height:1.5;}
.cta-btn{display:inline-flex;align-items:center;gap:7px;background:#fff;color:var(--navy);font-size:13px;font-weight:600;padding:9px 15px;border-radius:9px;text-decoration:none;}
.cta-btn i{font-size:16px;}

/* Banner */
.banner{display:flex;align-items:center;gap:10px;padding:12px 15px;border-radius:12px;font-size:13px;margin-bottom:18px;line-height:1.4;}
.banner i{font-size:18px;flex-shrink:0;}
.banner.amber{background:var(--amber-soft);border:1px solid #f0dcb6;color:#8a5a10;}
.banner.amber b{color:#6f4a0d;}

.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:15px 17px;margin-bottom:12px;}
.btn{font-size:13px;padding:9px 17px;background:var(--navy);color:#fff;border:none;border-radius:9px;font-weight:500;cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:6px;}
.btn:hover{background:var(--navy-d);}
.btn.ghost{background:var(--surface);color:var(--navy);border:1px solid #cdd6e2;}
.btn.ghost:hover{background:var(--hover);}
.chip{display:inline-block;font-size:11px;padding:4px 11px;border-radius:20px;font-weight:600;}
.c-green{background:var(--green-soft);color:var(--green);}
.c-navy{background:var(--navy-soft);color:var(--navy);}
.c-sky{background:var(--sky-soft);color:var(--sky);}
.c-amber{background:var(--amber-soft);color:var(--amber);}
.c-gray{background:var(--gray-soft);color:var(--ink3);}

.resume{background:linear-gradient(120deg,var(--navy),var(--navy-d));border-radius:16px;padding:22px;color:#fff;margin-bottom:24px;position:relative;overflow:hidden;box-shadow:0 12px 30px rgba(20,43,86,.18);}
.resume .lbl{font-size:12px;opacity:.8;text-transform:uppercase;letter-spacing:.6px;}
.resume h3{font-size:19px;font-weight:700;margin:6px 0 3px;}
.resume .meta{font-size:13px;opacity:.9;}
.resume .pbar{height:7px;background:rgba(255,255,255,.25);border-radius:20px;margin:16px 0 6px;max-width:360px;}
.resume .pbar>div{height:7px;background:var(--sky);border-radius:20px;}
.resume .pct{font-size:12px;opacity:.9;}
.resume .go{display:inline-block;margin-top:16px;background:#fff;color:var(--navy);padding:10px 20px;border:none;border-radius:9px;font-weight:600;font-size:13px;cursor:pointer;text-decoration:none;}
.resume .ill{position:absolute;right:-10px;bottom:-14px;font-size:120px;opacity:.12;}

.side-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 17px;margin-bottom:18px;}
.side-card h4{font-size:13px;font-weight:700;margin-bottom:14px;display:flex;align-items:center;gap:7px;color:var(--navy);}
.side-card h4 i{font-size:17px;}
.ring-wrap{display:flex;align-items:center;gap:16px;}
.ring{width:74px;height:74px;flex-shrink:0;}
.ann{font-size:13px;color:var(--ink2);line-height:1.55;}
.ann b{color:var(--ink);}

.kv{display:flex;justify-content:space-between;padding:13px 0;border-bottom:1px solid var(--line2);}
.kv:last-child{border-bottom:none;}
.kv .k{font-size:13px;color:var(--ink3);}
.kv .val{font-size:13px;font-weight:600;}

/* Hesap düzenleme formu */
.acc-form{margin-top:14px;}
.acc-field{margin-bottom:14px;}
.acc-field label{display:block;font-size:12px;font-weight:600;color:var(--ink2);margin-bottom:6px;}
.acc-field input{width:100%;height:46px;padding:0 13px;border:1px solid var(--line);border-radius:10px;font-size:14px;background:var(--surface);color:var(--ink);outline:none;}
.acc-field input:focus{border-color:var(--navy);box-shadow:0 0 0 3px rgba(25,73,119,.08);}
.acc-field input:disabled{background:#f1f5f9;color:#94a3b8;}
.acc-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media(max-width:600px){.acc-grid{grid-template-columns:1fr;}}
.acc-msg{font-size:13px;padding:11px 14px;border-radius:10px;margin-bottom:14px;display:none;}
.acc-msg.show{display:block;}
.acc-msg.ok{background:var(--green-soft);color:#0f6e56;}
.acc-msg.err{background:#fef2f2;color:#b91c1c;}

.empty{text-align:center;padding:50px 20px;color:var(--ink3);}
.empty i{font-size:46px;color:#cbd5e1;display:block;margin-bottom:12px;}
.empty p{font-size:14px;margin-bottom:16px;}

.overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:45;}
@media(max-width:1024px){
  .site-header{grid-template-columns:auto 1fr auto;gap:8px;padding:0 16px;}
  .acct-nav{display:none;}
  .burger{display:flex;}
  .user-menu{display:none;}
  .brand img{height:78px;}
  #sidebar{display:flex;flex-direction:column;position:fixed;top:0;left:0;height:100%;width:264px;transform:translateX(-105%);transition:transform .22s;z-index:70;overflow-y:auto;}
  #sidebar.open{transform:translateX(0);}
  .overlay{z-index:65;}
  .overlay.show{display:block;}
  .content{padding:20px 16px;}
}

/* ===== "MESAJLARIM" İKONU (gömülü SVG — OES_Notifications::icon_mono/color) =====
   Tabler webfont ikonlarıyla aynı kutuya oturur. mono sürüm currentColor aldığı
   için mavi .hicon zemininde beyaz, aktif navy .ni zemininde de beyaz görünür. */
.fabo-msg-ic{display:inline-block;width:20px;height:20px;flex:0 0 20px;vertical-align:-4px;}
.hicon .fabo-msg-ic{width:22px;height:22px;flex:0 0 22px;vertical-align:0;}
.ni .fabo-msg-ic{width:20px;height:20px;flex:0 0 20px;vertical-align:0;}
/* Başlıkta renkli sürüm */
.h2-ic{display:flex;align-items:center;gap:10px;}
.h2-ic .fabo-msg-ic{width:28px;height:28px;flex:0 0 28px;vertical-align:0;}
/* Boş durum: .empty i yerine SVG geldiği için ölçüyü burada veriyoruz */
.empty .fabo-msg-ic.empty-ic{display:block;width:52px;height:52px;flex:none;margin:0 auto 12px;opacity:.75;}

/* ===== PANEL PNG İKONLARI (assets/img/panel/*.png) =====
   Renkli illüstrasyonlar; Tabler çizgi ikonlarıyla aynı kutuya oturur. */
.fabo-ic{display:inline-block;object-fit:contain;width:20px;height:20px;flex:0 0 20px;}

/* Yan menü (mobil çekmece): ikon BEYAZ yuvarlak kutunun içinde durur.
   Beyaz kenar çubuğunda görünmez; aktif öğe navy zeminli olduğu için navy
   konturlu renkli ikon orada kaybolurdu — bu kutu onu okunur tutuyor.
   .ni i genişliği de 24'e çekildi ki PNG'li ve Tabler'lı satırlar hizalansın. */
.ni .fabo-ic{width:24px;height:24px;flex:0 0 24px;padding:3px;border-radius:7px;background:#fff;}
.ni i{width:24px;}

/* Hızlı Erişim rayı: .qic zeminleri zaten açık tonlu, ikon olduğu gibi durur */
.qic .fabo-ic{width:22px;height:22px;flex:0 0 22px;}

/* ===== BÖLÜM İÇİ SEKME ŞERİDİ (Eğitimlerim: Devam Eden / Bitmiş / Yeni) ===== */
.ptabs{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:16px 0 20px;}
.ptab{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;
  border:1.5px solid var(--line);background:var(--surface);color:var(--ink2);font-size:13.5px;font-weight:600;
  cursor:pointer;text-decoration:none;transition:border-color .14s,color .14s,background .14s;}
.ptab:hover{background:var(--hover);}
.ptab.active{border-color:var(--navy);color:var(--navy);background:var(--surface);}
.ptab .fabo-ic{width:22px;height:22px;flex:0 0 22px;}
.ptab-n{font-size:11px;font-weight:700;background:var(--navy-soft);color:var(--navy);border-radius:20px;padding:1px 7px;}
.ptab.active .ptab-n{background:var(--navy);color:#fff;}
.ptab.as-link{margin-left:auto;}
@media(max-width:640px){.ptab.as-link{margin-left:0;}}

/* [hidden] tek başına yetmez: .ecard'da display:flex tanımlı ve onu ezer.
   Sekme filtresi bu yüzden açık bir kurala ihtiyaç duyuyor. */
.ecard[hidden],.eg-empty[hidden]{display:none !important;}

/* Kullanıcı dropdown'ı artık secondary bölümleri de taşıyor (masaüstünde üst
   menüde yer yok). Biraz genişledi + PNG ikonlar için ölçü. */
.user-drop{width:248px;}
.drop-item .fabo-ic{width:20px;height:20px;flex:0 0 20px;}
.drop-item span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.drop-item.active{background:var(--navy-soft);color:var(--navy);font-weight:600;}

/* ==========================================================================
   ÇALIŞMA ORTAMI BANNER'I + PANEL GÖRÜNÜMÜ SEÇİCİ
   Banner .dash-main içindedir → sağ raya ve mobil çekmeceye TAŞMAZ; genişliği
   her zaman ana sütun kadardır. Görsel geniş (≈2.5:1) olduğu için 5:1 şeride
   `cover` ile kırpılır; odak noktası temaya göre PHP'den gelir.
   ========================================================================== */
.fo-banner{
  height:clamp(132px,15.5vw,196px);
  border-radius:16px;
  background-color:var(--card);
  background-size:cover;
  background-repeat:no-repeat;
  background-position:50% 60%;
  border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(20,43,86,.05),0 10px 26px rgba(20,43,86,.08);
  margin-bottom:20px;
}
.fo-banner[hidden]{display:none;}
@media(max-width:640px){.fo-banner{height:118px;border-radius:13px;margin-bottom:16px;}}

/* ---- Tercihler & Ayarlar > Panel Görünümü ---- */
.thm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;}
.thm{
  display:flex;align-items:center;gap:12px;text-align:left;
  padding:9px 11px 9px 9px;border:1.5px solid var(--line);border-radius:13px;
  background:var(--surface);cursor:pointer;font-family:inherit;position:relative;
  transition:border-color .14s,box-shadow .14s,transform .14s;
}
.thm:hover{border-color:var(--navy);transform:translateY(-1px);}
.thm.active{border-color:var(--navy);box-shadow:0 0 0 3px var(--navy-soft);}
.thm-prev{
  width:74px;height:52px;border-radius:9px;flex:none;
  background:var(--gray-soft);background-size:cover;background-position:50% 60%;
  display:flex;align-items:center;justify-content:center;color:var(--ink3);
  border:1px solid var(--line2);
}
.thm-prev i{font-size:20px;}
.thm-meta{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1;}
.thm-meta b{font-size:13.5px;font-weight:600;color:var(--ink);}
.thm-meta i{font-size:11.5px;font-style:normal;color:var(--ink3);line-height:1.35;}
.thm-dots{display:flex;gap:4px;margin-top:5px;}
.thm-dots em{width:11px;height:11px;border-radius:50%;border:1px solid rgba(0,0,0,.08);display:block;}
.thm-tick{
  width:20px;height:20px;border-radius:50%;flex:none;
  background:var(--navy);color:#fff;display:none;align-items:center;justify-content:center;
}
.thm-tick i{font-size:13px;}
.thm.active .thm-tick{display:flex;}

/* ---- Banner üstündeki "Görünüm" düğmesi + hızlı tema seçici ----
   Kullanıcı temayı değiştirebileceğini panele girer girmez görsün diye düğme
   HER ZAMAN duruyor: banner varsa görselin sağ üstünde cam etkili bir hap,
   banner kapalıyken (Klasik tema) başlığın üstünde sade bir düğme. */
.fo-hero{position:relative;margin-bottom:20px;}
.fo-hero .fo-banner{margin-bottom:0;}
.fo-hero--bare{display:flex;justify-content:flex-end;margin-bottom:12px;}

.fo-thmbtn{
  position:absolute;top:12px;right:12px;z-index:2;
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.65);
  background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  color:#1b2a3d;font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;
  box-shadow:0 4px 14px rgba(10,25,45,.18);transition:background .14s,transform .14s;
}
.fo-thmbtn:hover{background:#fff;transform:translateY(-1px);}
.fo-thmbtn i{font-size:17px;}
.fo-hero--bare .fo-thmbtn{
  position:static;background:var(--surface);border:1px solid var(--line);
  color:var(--ink2);box-shadow:none;
}
.fo-hero--bare .fo-thmbtn:hover{background:var(--hover);}
@media(max-width:520px){.fo-thmbtn span{display:none;}.fo-thmbtn{padding:9px 11px;}}

.fo-thmpop{
  position:absolute;top:56px;right:12px;z-index:30;
  width:min(292px,calc(100vw - 40px));
  background:var(--surface);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 18px 44px rgba(20,43,86,.20);padding:10px;
}
.fo-thmpop[hidden]{display:none;}
.fo-hero--bare .fo-thmpop{top:calc(100% + 6px);right:0;}
.fo-thmpop-h{font-size:11.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--ink3);padding:2px 4px 9px;}
.fo-thmpop-list{display:flex;flex-direction:column;gap:5px;}
.fo-thmpop-all{
  display:flex;align-items:center;gap:8px;margin-top:9px;padding:9px 8px 3px;
  border-top:1px solid var(--line2);font-size:12.5px;font-weight:600;color:var(--navy);cursor:pointer;
}
.fo-thmpop-all i{font-size:16px;}

/* Seçicinin kompakt satırları (kart içindeki büyük .thm ile aynı davranış) */
.thm-sm{padding:6px 9px 6px 6px;border-radius:11px;gap:10px;border-width:1.5px;}
.thm-sm:hover{transform:none;}
.thm-sm .thm-prev{width:46px;height:32px;border-radius:7px;}
.thm-sm .thm-prev i{font-size:15px;}
.thm-sm .thm-meta b{font-size:13px;}
.thm-dot{width:12px;height:12px;border-radius:50%;flex:none;border:1px solid rgba(0,0,0,.08);}
.thm-sm .thm-tick{width:18px;height:18px;}
.thm-sm .thm-tick i{font-size:12px;}