/* =====================================================================
   project2-me.com — Portal styles (projectmanagement.com-style paneled layout)
   Static site. No WordPress required.
   ===================================================================== */

:root{
  --navy:      #0E2A47;   /* top nav / dark background */
  --navy-2:    #143a61;
  --blue:      #1C6FB8;   /* primary blue */
  --blue-dark: #155a96;
  --blue-soft: #EAF3FB;
  --orange:    #E8772E;   /* accent / tag */
  --green:     #2E9E6B;
  --paper:     #EEF1F5;   /* page background */
  --surface:   #FFFFFF;
  --line:      #DCE3EB;
  --line-soft: #EBEFF4;
  --ink:       #16222E;
  --muted:     #64748B;
  --muted-2:   #8A97A6;
  --radius:    6px;
  --maxw:      1240px;
  --shadow:    0 1px 2px rgba(16,42,71,.06);
  --shadow-md: 0 6px 20px rgba(16,42,71,.10);
  --sans:      "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; font-family:var(--sans); background:var(--paper); color:var(--ink);
  font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:var(--blue); text-decoration:none; }
a:hover{ color:var(--blue-dark); text-decoration:underline; }
h1,h2,h3,h4{ margin:0; line-height:1.25; color:var(--ink); font-weight:700; }
ul{ margin:0; padding:0; list-style:none; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 18px; }

/* ---------- Image placeholders (no image, gradient) ---------- */
.thumb{ position:relative; overflow:hidden; background:#9fb2c4; }
.thumb::after{ content:attr(data-label); position:absolute; left:8px; bottom:7px; color:#fff;
  font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; opacity:.92; text-shadow:0 1px 2px rgba(0,0,0,.35); }
.g1{ background:linear-gradient(135deg,#1C6FB8,#0E2A47); }
.g2{ background:linear-gradient(135deg,#2E9E6B,#10503a); }
.g3{ background:linear-gradient(135deg,#E8772E,#a23c12); }
.g4{ background:linear-gradient(135deg,#6C5CE7,#2d2473); }
.g5{ background:linear-gradient(135deg,#0EA5A5,#0a4f52); }
.g6{ background:linear-gradient(135deg,#C0392B,#5c130c); }
.g7{ background:linear-gradient(135deg,#3867d6,#1b2f6e); }
.g8{ background:linear-gradient(135deg,#576574,#2c333d); }

/* =====================================================================
   TOP BAR
   ===================================================================== */
.topbar{ background:var(--navy); color:#aebfce; font-size:12.5px; }
.topbar .wrap{ display:flex; justify-content:space-between; align-items:center; height:34px; }
.topbar a{ color:#cdd9e6; }
.topbar__left{ display:flex; gap:16px; }
.topbar__right{ display:flex; gap:14px; align-items:center; }
.topbar__right .sep{ color:#3f5063; opacity:.6; }
.topbar .pill{ background:var(--blue); color:#fff; padding:3px 12px; border-radius:999px; font-weight:600; }
.topbar .pill:hover{ background:var(--blue-dark); text-decoration:none; }

/* =====================================================================
   MASTHEAD (logo + search)
   ===================================================================== */
.masthead{ background:var(--surface); border-bottom:1px solid var(--line); }
.masthead .wrap{ display:flex; align-items:center; gap:26px; height:84px; }
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; }
.brand:hover{ text-decoration:none; }
.brand__mark{ width:46px; height:46px; border-radius:9px; background:linear-gradient(135deg,var(--navy),var(--blue));
  display:grid; place-items:center; color:#fff; font-weight:800; font-size:18px; position:relative; }
.brand__mark::after{ content:""; position:absolute; left:9px; bottom:9px; width:18px; height:3px; border-radius:2px; background:var(--orange); }
.brand__name{ font-size:21px; font-weight:800; color:var(--navy); letter-spacing:-.2px; }
.brand__name b{ color:var(--blue); }
.brand__sub{ display:block; font-size:11px; font-weight:600; color:var(--muted-2); letter-spacing:.02em; }
.brand__logo{ height:48px; max-width:240px; width:auto; object-fit:contain; display:block; }

.masthead__search{ flex:1; max-width:440px; margin-left:auto; }
.searchbox{ display:flex; border:1.5px solid var(--line); border-radius:6px; overflow:hidden; background:#fff; }
.searchbox input{ flex:1; border:0; outline:0; padding:10px 14px; font-size:14px; font-family:var(--sans); color:var(--ink); }
.searchbox button{ background:var(--blue); border:0; color:#fff; padding:0 18px; cursor:pointer; font-size:15px; }
.searchbox button:hover{ background:var(--blue-dark); }
.masthead__cta{ display:flex; gap:10px; }
.btn{ display:inline-flex; align-items:center; gap:7px; border:0; border-radius:6px; cursor:pointer;
  font-family:var(--sans); font-weight:600; font-size:14px; padding:10px 18px; text-decoration:none; transition:.15s; }
.btn--primary{ background:var(--orange); color:#fff; }
.btn--primary:hover{ background:#cf5f1c; color:#fff; text-decoration:none; }
.btn--ghost{ background:#fff; color:var(--navy); border:1.5px solid var(--line); }
.btn--ghost:hover{ border-color:var(--blue); color:var(--blue); text-decoration:none; }
.btn--sm{ padding:7px 13px; font-size:13px; }
.btn--block{ width:100%; justify-content:center; }

/* =====================================================================
   MAIN NAVIGATION (dark bar)
   ===================================================================== */
.nav{ background:var(--navy-2); position:sticky; top:0; z-index:50; box-shadow:0 2px 8px rgba(16,42,71,.18); }
.nav .wrap{ display:flex; align-items:stretch; }
.nav__menu{ display:flex; }
.nav__menu > li{ position:relative; }
.nav__menu > li > a{ display:flex; align-items:center; gap:6px; color:#dce6f1; font-weight:600; font-size:14px;
  padding:0 17px; height:46px; text-decoration:none; border-bottom:3px solid transparent; }
.nav__menu > li > a:hover{ background:rgba(255,255,255,.07); color:#fff; }
.nav__menu > li.active > a{ color:#fff; border-bottom-color:var(--orange); background:rgba(255,255,255,.05); }
.nav__menu .caret{ font-size:10px; opacity:.7; }
.nav__menu .drop{ position:absolute; top:100%; left:0; min-width:210px; background:#fff; border:1px solid var(--line);
  border-top:3px solid var(--blue); box-shadow:var(--shadow-md); padding:6px; display:none; border-radius:0 0 6px 6px; }
.nav__menu li:hover .drop{ display:block; }
.nav__menu .drop a{ display:block; padding:8px 12px; color:var(--ink); font-size:13.5px; font-weight:500; border-radius:4px; }
.nav__menu .drop a:hover{ background:var(--blue-soft); color:var(--blue-dark); text-decoration:none; }
.nav__spacer{ flex:1; }
.nav__icon{ display:flex; align-items:center; color:#bcd0e3; padding:0 14px; }

/* =====================================================================
   AD SLOTS (AdSense)
   ===================================================================== */
.ad{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  background:repeating-linear-gradient(45deg,#f3f6fa,#f3f6fa 10px,#eef2f7 10px,#eef2f7 20px);
  border:1px dashed #c4d0dd; color:#9aa9b8; border-radius:var(--radius); text-align:center; }
.ad small{ font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:#aab6c4; }
.ad b{ font-size:13px; color:#8493a3; font-weight:700; }
.ad--leaderboard{ height:96px; max-width:728px; margin:16px auto; width:100%; }
.ad--box{ height:250px; }
.ad--tall{ height:600px; }

/* =====================================================================
   HERO STRIP
   ===================================================================== */
.hero{ padding:18px 0 4px; }
.hero__grid{ display:grid; grid-template-columns:1.7fr 1fr; gap:18px; }
.feature{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }
.feature__thumb{ height:300px; }
.feature__body{ padding:18px 20px 20px; }
.eyebrow{ display:inline-block; font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:#fff; background:var(--orange); padding:3px 9px; border-radius:3px; margin-bottom:10px; }
.feature__body h1{ font-size:25px; line-height:1.2; margin-bottom:9px; }
.feature__body h1 a{ color:var(--ink); }
.feature__body h1 a:hover{ color:var(--blue); text-decoration:none; }
.feature__excerpt{ color:var(--muted); font-size:14.5px; margin-bottom:12px; }
.meta{ display:flex; flex-wrap:wrap; align-items:center; gap:9px; color:var(--muted-2); font-size:12.5px; }
.meta .dot{ width:3px; height:3px; border-radius:50%; background:var(--muted-2); display:inline-block; }
.meta .cat{ color:var(--blue); font-weight:700; }

/* Editor's picks panel (hero right) */
.pick{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); display:flex; flex-direction:column; }
.pick__rows{ padding:4px 0; }
.pick__row{ display:flex; gap:12px; padding:11px 16px; border-bottom:1px solid var(--line-soft); align-items:flex-start; }
.pick__row:last-child{ border-bottom:0; }
.pick__num{ font-size:20px; font-weight:800; color:var(--line); line-height:1; min-width:22px; }
.pick__row:hover .pick__num{ color:var(--blue); }
.pick__row h4{ font-size:14px; font-weight:600; line-height:1.32; margin-bottom:3px; }
.pick__row h4 a{ color:var(--ink); }
.pick__row h4 a:hover{ color:var(--blue); text-decoration:none; }
.pick__row .meta{ font-size:11.5px; }

/* =====================================================================
   PANEL (portal kutusu) — imza eleman
   ===================================================================== */
.panel{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); margin-bottom:18px; overflow:hidden; }
.panel__head{ display:flex; align-items:center; justify-content:space-between; padding:11px 16px;
  border-bottom:2px solid var(--blue); background:linear-gradient(#fff,#fbfdff); }
.panel__head h2{ font-size:15.5px; font-weight:800; color:var(--navy); display:flex; align-items:center; gap:9px; }
.panel__head h2::before{ content:""; width:5px; height:18px; background:var(--blue); border-radius:2px; }
.panel__head .more{ font-size:12.5px; font-weight:700; color:var(--blue); }
.panel--accent .panel__head{ border-bottom-color:var(--orange); }
.panel--accent .panel__head h2::before{ background:var(--orange); }
.panel--green .panel__head{ border-bottom-color:var(--green); }
.panel--green .panel__head h2::before{ background:var(--green); }
.panel__body{ padding:16px; }
.panel__body--flush{ padding:0; }

/* Card grid (inside panel) */
.cards2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.acard{ display:flex; flex-direction:column; }
.acard__thumb{ height:120px; border-radius:5px; overflow:hidden; margin-bottom:9px; position:relative; }
.acard__tag{ position:absolute; top:7px; left:7px; background:rgba(14,42,71,.9); color:#fff; font-size:10px;
  font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding:3px 7px; border-radius:3px; }
.acard h3{ font-size:14.5px; line-height:1.3; margin-bottom:5px; }
.acard h3 a{ color:var(--ink); }
.acard h3 a:hover{ color:var(--blue); text-decoration:none; }
.acard .meta{ font-size:11.5px; margin-top:auto; }

/* List rows (thumb + title) */
.list-rows{ }
.lrow{ display:flex; gap:13px; padding:12px 16px; border-bottom:1px solid var(--line-soft); align-items:center; }
.lrow:last-child{ border-bottom:0; }
.lrow:hover{ background:#fafcfe; }
.lrow__thumb{ width:84px; height:58px; border-radius:5px; flex-shrink:0; }
.lrow__main{ min-width:0; flex:1; }
.lrow__main h3{ font-size:14px; line-height:1.32; margin-bottom:4px; font-weight:600; }
.lrow__main h3 a{ color:var(--ink); }
.lrow__main h3 a:hover{ color:var(--blue); text-decoration:none; }
.lrow .meta{ font-size:11.5px; }
.badge{ display:inline-block; font-size:11px; font-weight:700; padding:2px 8px; border-radius:999px; }
.badge--blue{ background:var(--blue-soft); color:var(--blue-dark); }
.badge--green{ background:#e3f5ec; color:#1f7a52; }
.badge--orange{ background:#fdeee2; color:#bd5a1c; }

/* Lesson row (level + duration) */
.lrow__lvl{ display:flex; gap:7px; align-items:center; margin-top:5px; }

/* Document row */
.docrow{ display:flex; gap:13px; padding:12px 16px; border-bottom:1px solid var(--line-soft); align-items:center; }
.docrow:last-child{ border-bottom:0; }
.docrow:hover{ background:#fafcfe; }
.doc-ico{ width:46px; height:46px; border-radius:7px; flex-shrink:0; display:grid; place-items:center;
  color:#fff; font-size:11px; font-weight:800; background:linear-gradient(135deg,var(--navy),var(--blue)); letter-spacing:.03em; }
.doc-ico.pdf{ background:linear-gradient(135deg,#C0392B,#7c1a10); }
.doc-ico.xls{ background:linear-gradient(135deg,#1e7a46,#0d4527); }
.doc-ico.doc{ background:linear-gradient(135deg,#1C6FB8,#10395e); }
.docrow__main{ flex:1; min-width:0; }
.docrow__main h3{ font-size:14px; font-weight:600; margin-bottom:3px; }
.docrow__main h3 a{ color:var(--ink); } .docrow__main h3 a:hover{ color:var(--blue); text-decoration:none; }
.docrow__meta{ font-size:11.5px; color:var(--muted-2); }

/* Webinar / video card */
.vid{ position:relative; border-radius:6px; overflow:hidden; height:130px; }
.vid__play{ position:absolute; inset:0; display:grid; place-items:center; }
.vid__play span{ width:46px; height:46px; border-radius:50%; background:rgba(255,255,255,.92); display:grid; place-items:center; color:var(--blue); padding-left:3px; }
.vid__time{ position:absolute; right:7px; bottom:7px; background:rgba(0,0,0,.72); color:#fff; font-size:11px; font-weight:700; padding:2px 6px; border-radius:3px; }
.vid-title{ font-size:13.5px; font-weight:600; margin-top:7px; line-height:1.3; }
.vid-title a{ color:var(--ink); } .vid-title a:hover{ color:var(--blue); text-decoration:none; }

/* Discussion row */
.disc{ display:flex; gap:13px; padding:12px 16px; border-bottom:1px solid var(--line-soft); align-items:center; }
.disc:last-child{ border-bottom:0; }
.disc__av{ width:38px; height:38px; border-radius:50%; flex-shrink:0; background:linear-gradient(135deg,#1C6FB8,#0E2A47);
  display:grid; place-items:center; color:#fff; font-weight:700; font-size:14px; }
.disc__main{ flex:1; min-width:0; }
.disc__main h3{ font-size:13.5px; font-weight:600; margin-bottom:2px; }
.disc__main h3 a{ color:var(--ink); } .disc__main h3 a:hover{ color:var(--blue); text-decoration:none; }
.disc__main .meta{ font-size:11.5px; }
.disc__count{ text-align:center; flex-shrink:0; }
.disc__count b{ display:block; font-size:17px; color:var(--blue); line-height:1; }
.disc__count small{ font-size:10px; color:var(--muted-2); text-transform:uppercase; letter-spacing:.04em; }

/* =====================================================================
   MAIN LAYOUT (content + sidebar)
   ===================================================================== */
.layout{ display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:22px; padding:22px 0 30px; }
.col-main{ min-width:0; }
.main-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start; }
.main-grid .span2{ grid-column:1 / -1; }

/* Sidebar panels */
.side .panel__body{ padding:14px 16px; }
.rank{ counter-reset:r; }
.rank li{ counter-increment:r; display:flex; gap:11px; padding:10px 0; border-bottom:1px solid var(--line-soft); align-items:flex-start; }
.rank li:last-child{ border-bottom:0; }
.rank li::before{ content:counter(r); font-size:15px; font-weight:800; color:#fff; background:var(--blue); width:22px; height:22px;
  border-radius:5px; display:grid; place-items:center; flex-shrink:0; }
.rank li:nth-child(1)::before{ background:var(--orange); }
.rank a{ color:var(--ink); font-size:13.5px; font-weight:600; line-height:1.3; }
.rank a:hover{ color:var(--blue); text-decoration:none; }
.rank small{ display:block; color:var(--muted-2); font-size:11px; font-weight:400; margin-top:2px; }

/* Anket */
.poll p{ font-size:14px; font-weight:600; margin:0 0 12px; }
.poll__opt{ display:flex; align-items:center; gap:9px; padding:9px 11px; border:1px solid var(--line); border-radius:6px; margin-bottom:8px; cursor:pointer; font-size:13.5px; }
.poll__opt:hover{ border-color:var(--blue); background:var(--blue-soft); }
.poll__opt i{ width:15px; height:15px; border:2px solid var(--muted-2); border-radius:50%; flex-shrink:0; }

/* Newsletter */
.news p{ font-size:13.5px; color:var(--muted); margin:0 0 11px; }
.news input{ width:100%; padding:10px 12px; border:1.5px solid var(--line); border-radius:6px; font-size:13.5px; margin-bottom:9px; font-family:var(--sans); }

/* Kategori listesi */
.catlist li{ display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--line-soft); font-size:13.5px; }
.catlist li:last-child{ border-bottom:0; }
.catlist a{ color:var(--ink); font-weight:500; } .catlist a:hover{ color:var(--blue); }
.catlist .n{ color:var(--muted-2); font-size:12px; background:var(--line-soft); padding:1px 8px; border-radius:999px; }

/* =====================================================================
   FOOTER
   ===================================================================== */
.site-footer{ background:var(--navy); color:#a9bccd; margin-top:10px; }
.site-footer a{ color:#c2d2e1; } .site-footer a:hover{ color:#fff; }
.foot-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:34px; padding:42px 0 30px; }
.foot h4{ color:#fff; font-size:14px; margin-bottom:14px; letter-spacing:.02em; }
.foot li{ padding:6px 0; font-size:13.5px; }
.foot__brand .brand__name{ color:#fff; } .foot__brand .brand__name b{ color:#7db8e6; }
.foot__brand p{ font-size:13px; line-height:1.6; margin:12px 0 0; color:#9fb2c4; }
.foot__social{ display:flex; gap:9px; margin-top:14px; }
.foot__social a{ width:34px; height:34px; border-radius:6px; background:rgba(255,255,255,.08); display:grid; place-items:center; color:#cfe0ef; }
.foot__social a:hover{ background:var(--blue); }
.foot-bottom{ border-top:1px solid rgba(255,255,255,.1); }
.foot-bottom .wrap{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; padding:15px 18px; font-size:12.5px; color:#8ea2b5; }
.foot-bottom a{ color:#8ea2b5; }

/* =====================================================================
   INNER PAGE (article / list) helpers
   ===================================================================== */
.pagehead{ background:linear-gradient(120deg,var(--navy),var(--navy-2)); color:#fff; padding:26px 0; }
.pagehead .wrap{ }
.pagehead .crumb{ font-size:12.5px; color:#9fb6cb; margin-bottom:7px; }
.pagehead .crumb a{ color:#bcd0e3; }
.pagehead h1{ color:#fff; font-size:27px; }
.pagehead p{ color:#bcd0e0; margin:8px 0 0; max-width:680px; font-size:14.5px; }

.article{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:30px 34px; box-shadow:var(--shadow); }
.article h1{ font-size:28px; line-height:1.22; margin-bottom:12px; }
.article__meta{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; color:var(--muted-2); font-size:12.5px; padding-bottom:16px; border-bottom:1px solid var(--line-soft); margin-bottom:18px; }
.article__lead{ height:280px; border-radius:6px; margin-bottom:20px; overflow:hidden; }
.article__lead .thumb{ width:100%; height:100%; border-radius:inherit; }
.article__content{ font-size:15.5px; line-height:1.75; color:#26323d; }
.article__content p{ margin:0 0 1.05em; }
.article__content h2{ font-size:20px; margin:1.5em 0 .5em; }
.article__content blockquote{ margin:1.4em 0; border-left:4px solid var(--orange); padding:4px 0 4px 18px; color:var(--navy-2); font-style:italic; }
.chips{ display:flex; flex-wrap:wrap; gap:7px; margin:22px 0 0; }
.chip{ background:var(--line-soft); color:var(--navy-2); font-size:12px; padding:5px 11px; border-radius:999px; }
.chip:hover{ background:var(--blue); color:#fff; text-decoration:none; }

.filterbar{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 18px; }
.filterbar a{ font-size:13px; font-weight:600; padding:7px 14px; border:1px solid var(--line); border-radius:999px; background:#fff; color:var(--navy-2); }
.filterbar a.active,.filterbar a:hover{ background:var(--blue); color:#fff; border-color:var(--blue); text-decoration:none; }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:1080px){
  .layout{ grid-template-columns:1fr; }
  .side{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
  .side .panel{ margin-bottom:0; }
}
@media (max-width:880px){
  .hero__grid{ grid-template-columns:1fr; }
  .main-grid{ grid-template-columns:1fr; }
  .nav__menu{ overflow-x:auto; }
}
@media (max-width:620px){
  .topbar__left{ display:none; }
  .masthead .wrap{ height:auto; flex-wrap:wrap; gap:12px; padding:12px 18px; }
  .masthead__search{ order:3; max-width:none; width:100%; margin-left:0; }
  .cards2{ grid-template-columns:1fr; }
  .side{ grid-template-columns:1fr; }
  .foot-grid{ grid-template-columns:1fr 1fr; gap:24px; }
  .article{ padding:22px 18px; }
}

/* =====================================================================
   PROJECT VIEWER (MS Project embedded app)
   ===================================================================== */
.nav__menu .tag-new{ font-size:9px; font-weight:800; background:var(--orange); color:#fff; padding:1px 5px;
  border-radius:3px; margin-left:6px; text-transform:uppercase; letter-spacing:.04em; vertical-align:middle; }
.viewer{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
.viewer__bar{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 16px;
  border-bottom:2px solid var(--blue); background:linear-gradient(#fff,#fbfdff); flex-wrap:wrap; }
.viewer__title{ font-weight:800; color:var(--navy); font-size:15px; display:flex; align-items:center; gap:9px; }
.viewer__status{ font-size:11px; font-weight:700; padding:2px 9px; border-radius:999px; text-transform:none; letter-spacing:0; }
.viewer__status.ok{ background:#e3f5ec; color:#1f7a52; }
.viewer__status.wait{ background:#fff4e2; color:#b5731a; }
.viewer__status.off{ background:#fdecea; color:#b5302a; }
.viewer__actions{ display:flex; gap:9px; }
.viewer__frame{ position:relative; height:660px; background:#f5f8fb; }
.viewer__frame iframe{ width:100%; height:100%; border:0; display:block; }
.viewer__overlay{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:30px; background:linear-gradient(135deg,#f6f9fc,#eef3f8); }
.viewer__overlay .ico{ width:72px; height:72px; border-radius:16px; background:linear-gradient(135deg,var(--navy),var(--blue));
  display:grid; place-items:center; color:#fff; font-size:30px; margin-bottom:16px; }
.viewer__overlay h3{ font-size:18px; margin-bottom:8px; color:var(--navy); }
.viewer__overlay p{ color:var(--muted); max-width:440px; margin:0 0 8px; font-size:14px; }
.viewer__overlay code{ background:#fff; border:1px solid var(--line); padding:2px 8px; border-radius:5px; color:var(--blue-dark); font-size:13px; }

.howto{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:20px; }
.howto .step{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow); }
.howto .step b{ display:inline-grid; place-items:center; width:30px; height:30px; border-radius:8px; background:var(--blue-soft);
  color:var(--blue-dark); font-size:15px; margin-bottom:10px; }
.howto .step h4{ font-size:15px; margin-bottom:5px; }
.howto .step p{ font-size:13px; color:var(--muted); margin:0; }
.formats{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; align-items:center; color:var(--muted); font-size:13px; }
.fmt{ font-size:11px; font-weight:800; padding:4px 10px; border-radius:5px; color:#fff; background:linear-gradient(135deg,var(--navy),var(--blue)); letter-spacing:.03em; }
@media (max-width:880px){ .howto{ grid-template-columns:1fr; } .viewer__frame{ height:520px; } }

/* =====================================================================
   CONTENT IMAGES (inline figures inside articles / lessons)
   ===================================================================== */
.article__content img{ max-width:100%; height:auto; border-radius:10px; display:block; }
.content-figure{ margin:24px 0; }
.content-figure img{ width:100%; height:auto; border-radius:10px; box-shadow:var(--shadow-md); }
.content-figure figcaption{ margin-top:8px; font-size:12.5px; color:var(--muted); text-align:center; font-style:italic; }
.article__content figure{ margin:24px 0; }
.article__content figure img{ width:100%; }
.article__content figcaption{ margin-top:8px; font-size:12.5px; color:var(--muted); text-align:center; font-style:italic; }

/* =====================================================================
   SHARE + PRINT TOOLBAR (detail pages)
   ===================================================================== */
.sharebar{ display:flex; align-items:center; gap:7px; margin:6px 0 18px; flex-wrap:wrap; }
.sharebar__label{ font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted-2); margin-right:2px; }
.share-btn{ display:inline-grid; place-items:center; width:32px; height:32px; border-radius:50%; border:0; cursor:pointer;
  color:#fff; background:#64748B; transition:transform .12s, filter .12s, box-shadow .12s; box-shadow:var(--shadow); }
.share-btn svg{ width:14px; height:14px; }
.share-btn:hover{ transform:translateY(-2px); filter:brightness(1.06); text-decoration:none; color:#fff; box-shadow:var(--shadow-md); }
.share-btn--x{ background:#0f1419; }
.share-btn--in{ background:#0A66C2; }
.share-btn--wa{ background:#25D366; }
.share-btn--mail{ background:#EA4335; }
.share-btn--print{ background:#334155; }

/* Document detail hero (file-type icon acts as the cover) */
.doc-hero{ display:flex; gap:20px; align-items:center; flex-wrap:wrap; background:var(--blue-soft);
  border:1px solid var(--line); border-radius:12px; padding:24px; margin:6px 0 8px; }
.doc-hero__main{ flex:1; min-width:220px; }

/* =====================================================================
   PRINT STYLES — clean article/lesson/document output
   ===================================================================== */
@media print{
  .topbar, .nav, .site-footer, .masthead__search, .masthead__cta,
  .side, .ad, .ad-real, .sharebar, .no-print, .pagehead .crumb{ display:none !important; }
  .masthead{ border:0; }
  .layout{ display:block; }
  .wrap{ max-width:100%; padding:0; }
  body{ background:#fff; color:#000; }
  a{ color:#000; text-decoration:none; }
  .article__content img, .content-figure img{ box-shadow:none; max-width:100%; }
  .panel, .article{ box-shadow:none; border:0; }
}

/* =====================================================================
   CONTACT PAGE + FORM
   ===================================================================== */
.contact-grid{ display:grid; grid-template-columns:1.6fr 1fr; gap:18px; align-items:start; }
.contact-form .cf-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.cf-field{ margin-bottom:14px; }
.cf-field label{ display:block; font-weight:600; font-size:13.5px; margin-bottom:6px; color:var(--ink); }
.cf-field input, .cf-field textarea{ width:100%; padding:10px 13px; border:1.5px solid var(--line); border-radius:6px;
  font-size:14px; font-family:var(--sans); color:var(--ink); background:#fff; }
.cf-field input:focus, .cf-field textarea:focus{ outline:0; border-color:var(--blue); }
.cf-field textarea{ min-height:150px; resize:vertical; line-height:1.6; }
.contact-info .ci-item{ display:flex; gap:12px; align-items:flex-start; padding:10px 0; border-bottom:1px solid var(--line-soft); }
.contact-info .ci-item:last-child{ border-bottom:0; }
.contact-info .ci-ic{ font-size:18px; width:24px; text-align:center; color:var(--blue); }
.contact-info .ci-item b{ display:block; font-size:12.5px; color:var(--muted); font-weight:700; }
.contact-info .ci-item a, .contact-info .ci-item span{ color:var(--ink); font-size:14px; }
.formflash{ padding:12px 16px; border-radius:8px; margin-bottom:16px; font-size:14px; }
.formflash.ok{ background:#e6f6ee; color:#1c6e49; border:1px solid #bfe6d2; }
.formflash.error{ background:#fdeceb; color:#a93226; border:1px solid #f3c8c3; }
@media (max-width:860px){
  .contact-grid{ grid-template-columns:1fr; }
  .contact-form .cf-row{ grid-template-columns:1fr; }
}

/* =====================================================================
   COOKIE CONSENT BANNER
   ===================================================================== */
.cookie-banner{ position:fixed; left:16px; right:16px; bottom:16px; z-index:200; margin:0 auto; max-width:920px;
  background:var(--navy); color:#dce6f1; border:1px solid rgba(255,255,255,.1); border-radius:10px;
  box-shadow:0 10px 30px rgba(0,0,0,.25); padding:14px 18px; display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.cookie-banner span{ flex:1; min-width:220px; font-size:13.5px; line-height:1.5; }
.cookie-banner a{ color:#7db8e6; text-decoration:underline; }
.cookie-banner .btn{ white-space:nowrap; }
.cookie-banner[hidden]{ display:none; }
@media print{ .cookie-banner{ display:none !important; } }

/* =====================================================================
   PARTNER / SISTER-SITE BANNER (sidebar)
   ===================================================================== */
.partner-banner{ display:block; position:relative; margin-bottom:18px; border:1px solid var(--line);
  border-radius:10px; overflow:hidden; background:#fff; box-shadow:var(--shadow); text-decoration:none; transition:.15s; }
.partner-banner:hover{ box-shadow:var(--shadow-md); transform:translateY(-2px); text-decoration:none; }
.partner-banner img{ width:100%; height:auto; display:block; }
.partner-banner__label{ position:absolute; top:8px; left:8px; z-index:2; background:rgba(14,42,71,.82); color:#fff;
  font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:3px 9px; border-radius:999px; }
@media print{ .partner-banner{ display:none !important; } }

/* =====================================================================
   MS PROJECT VIEWER PAGE
   ===================================================================== */
.pagehead--viewer{ padding:18px 0; }
.viewer-intro{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.viewer-intro h1{ font-size:23px; }
.viewer-intro p{ margin:5px 0 0; font-size:13.5px; max-width:680px; color:#bcd0e0; }

/* Upload section */
.mpp-upload-section{ padding:36px 0 48px; }

/* Drop zone */
.mpp-dropzone{
  position:relative;
  border:2.5px dashed var(--blue);
  border-radius:14px;
  background:var(--surface);
  padding:52px 32px 44px;
  text-align:center;
  cursor:pointer;
  transition:border-color .2s, background .2s, box-shadow .2s;
  outline:none;
  margin-bottom:32px;
  box-shadow:var(--shadow);
}
.mpp-dropzone:hover,
.mpp-dropzone:focus-visible{
  border-color:var(--orange);
  background:rgba(232,119,46,.04);
  box-shadow:0 0 0 4px rgba(232,119,46,.12), var(--shadow-md);
}
.mpp-dropzone--over{
  border-color:var(--orange) !important;
  background:rgba(232,119,46,.07) !important;
  box-shadow:0 0 0 6px rgba(232,119,46,.15), var(--shadow-md) !important;
}
.mpp-dropzone--success{
  border-color:var(--green) !important;
  background:rgba(46,158,107,.04) !important;
}
.mpp-dropzone--loading{
  opacity:.7; pointer-events:none;
}
/* Spinner shown during file read */
.mpp-dz-spinner{
  width:32px; height:32px; margin:10px auto 0;
  border:3px solid var(--line);
  border-top-color:var(--blue);
  border-radius:50%;
  animation:mppSpin .7s linear infinite;
}
@keyframes mppSpin{ to{ transform:rotate(360deg); } }

/* Open-in-viewer button */
.mpp-open-btn{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--orange); color:#fff;
  border:none; border-radius:10px;
  padding:14px 36px; font-size:17px; font-weight:700;
  text-decoration:none; cursor:pointer;
  box-shadow:0 4px 18px rgba(232,119,46,.35);
  transition:background .2s, box-shadow .2s, transform .15s;
}
.mpp-open-btn:hover{
  background:#d4621c;
  box-shadow:0 6px 24px rgba(232,119,46,.45);
  transform:translateY(-1px);
  color:#fff; text-decoration:none;
}

/* Override: file input no longer inside dropzone */
.mpp-dropzone input[type="file"]{
  position:absolute; inset:0; opacity:0; width:0; height:0; pointer-events:none;
}
.mpp-dz-icon{
  color:var(--blue); margin-bottom:16px;
}
.mpp-dz-icon svg{
  width:56px; height:56px;
}
.mpp-dz-main{
  font-size:18px; font-weight:700; color:var(--navy); margin:0 0 6px;
}
.mpp-dz-sub{
  font-size:14px; color:var(--muted); margin:0 0 14px;
}
.mpp-dz-browse{
  color:var(--blue); font-weight:600; text-decoration:underline; text-underline-offset:2px;
}
.mpp-dz-formats{
  display:inline-block;
  background:var(--paper); border:1px solid var(--line);
  border-radius:20px; padding:4px 14px;
  font-size:12px; font-weight:600; color:var(--muted); letter-spacing:.3px;
}

/* Status bar */
.mpp-status{
  text-align:center; font-size:14px; font-weight:500;
  border-radius:8px; padding:12px 20px; margin-bottom:24px;
  border:1px solid transparent;
}
.mpp-status--info   { background:#EAF3FB; border-color:#b3d4f5; color:#155a96; }
.mpp-status--success{ background:#e3f5ec; border-color:#9fd6be; color:#1f7a52; }
.mpp-status--warn   { background:#fff4e2; border-color:#fcd8a0; color:#b5731a; }
.mpp-status--error  { background:#fdecea; border-color:#f5b8b5; color:#b5302a; }

/* Feature cards */
.viewer-feat-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:16px;
  margin-bottom:28px;
}
.viewer-feat{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px 20px; display:flex; flex-direction:column; gap:6px;
  transition:box-shadow .2s;
}
.viewer-feat:hover{ box-shadow:var(--shadow-md); }
.vf-icon{ font-size:22px; }
.viewer-feat strong{ color:var(--navy); font-size:14.5px; }
.viewer-feat span{ color:var(--muted); font-size:13px; line-height:1.5; }

.viewer-hint{
  font-size:13px; color:var(--muted); margin:4px 0 0; padding:0; text-align:center;
}
.viewer-hint a{ color:var(--blue); }

@media(max-width:600px){
  .viewer-intro{ flex-direction:column; align-items:flex-start; }
  .mpp-dropzone{ padding:36px 20px 30px; }
  .mpp-dz-main{ font-size:16px; }
}