/* ══════════════════════════════════════════
   PBA Institute — C Programming Tutorial
   style.css — All styles
   ══════════════════════════════════════════ */

/* ── CSS VARIABLES ── */
:root {
  --bg:           #050c1a;
  --bg-2:         #08162d;
  --bg-card:      #0a1d37;
  --bg-raised:    #112b52;
  --nb:           rgba(255,255,255,0.08);
  --nb2:          rgba(255,255,255,0.14);
  --gold:         #ffb400;
  --gold-rich:    #e6a200;
  --gold-light:   #ffc107;
  --gold-dim:     rgba(255,180,0,0.10);
  --gold-glow:    rgba(255,180,0,0.22);
  --teal:         #0d9488;
  --teal-dim:     rgba(13,148,136,0.10);
  --text:         #ffffff;
  --text-mid:     rgba(255,255,255,0.85);
  --text-muted:   rgba(255,255,255,0.58);
  --text-light:   rgba(255,255,255,0.36);
  --code-green:   #5eead4;
  --r-sm:   10px;
  --r-md:   16px;
  --r-lg:   22px;
  --r-xl:   30px;
  --ease:   cubic-bezier(.4,0,.2,1);
  --spring: cubic-bezier(.175,.885,.32,1.275);
  --fd:     'DM Serif Display', Georgia, serif;
  --fb:     'Sora', sans-serif;
  --fm:     'JetBrains Mono', monospace;
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body { font-family: var(--fb); background: var(--bg); color: var(--text); line-height: 1.75; overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul, ol { list-style: none; }

/* ── NOISE OVERLAY ── */
body::before {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:9999; opacity:.35;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
}

/* ── ANIMATIONS ── */
@keyframes fadeUp {
  from { opacity:0; transform:translateY(18px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ── LAYOUT WRAP ── */
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 24px; }

/* ══════════════════════════════════════════
   TOP BAR
   ══════════════════════════════════════════ */
.topbar {
  background: #030810;
  border-bottom: 1px solid rgba(255,180,0,.12);
  padding: 10px 0;
}
.topbar .wrap { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
.tbar-links { display:flex; gap:4px; flex-wrap:wrap; }
.tbar-links a {
  display:flex; align-items:center; gap:7px;
  font-size:12.5px; font-weight:500; color:var(--text-muted);
  padding:7px 13px; border-radius:var(--r-sm);
  border:1px solid transparent;
  transition:.22s var(--ease);
  letter-spacing:.2px;
}
.tbar-links a:hover { color:var(--gold); border-color:rgba(255,180,0,.22); background:var(--gold-dim); }
.tbar-links a i { font-size:11px; }

/* ══════════════════════════════════════════
   BREADCRUMB
   ══════════════════════════════════════════ */
.bc-bar {
  background:rgba(8,22,45,.85);
  border-bottom:1px solid var(--nb);
  padding:11px 0;
}
.bc { display:flex; align-items:center; flex-wrap:wrap; gap:0; font-size:12px; color:var(--text-light); }
.bc li { display:flex; align-items:center; }
.bc li a { color:var(--text-muted); padding:0 5px; transition:color .2s; }
.bc li a:hover { color:var(--gold); }
.bc li .sep { margin:0 4px; opacity:.3; font-size:9px; }
.bc li:last-child span { color:var(--gold); font-weight:600; padding:0 5px; }

/* ══════════════════════════════════════════
   PAGE GRID
   ══════════════════════════════════════════ */
.page-grid {
  display:grid;
  grid-template-columns:1fr 292px;
  gap:28px;
  padding:32px 0 68px;
  align-items:start;
}

/* ══════════════════════════════════════════
   ARTICLE
   ══════════════════════════════════════════ */
article {
  background:var(--bg-card);
  border:1px solid var(--nb);
  border-radius:var(--r-xl);
  overflow:hidden;
  box-shadow:0 20px 55px rgba(0,0,0,.38);
  animation:fadeUp .5s var(--ease) both;
}

/* ── HERO ── */
.art-hero { position:relative; overflow:hidden; }
.art-hero img {
  width:100%; aspect-ratio:16/6; object-fit:cover;
  transition:transform .7s var(--ease);
}
.art-hero:hover img { transform:scale(1.03); }
.art-hero::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to bottom, transparent 38%, rgba(10,29,55,.96));
}
.hero-label { position:absolute; bottom:26px; left:34px; z-index:2; }
.hero-badge {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(255,180,0,.1); border:1px solid rgba(255,180,0,.32);
  backdrop-filter:blur(10px); border-radius:100px;
  padding:7px 16px;
  font-family:var(--fm); font-size:10.5px; font-weight:600;
  letter-spacing:2px; text-transform:uppercase; color:var(--gold);
}
.hero-badge::before { content:'◆'; font-size:7px; }

/* ── ARTICLE BODY ── */
.art-body { padding:42px 46px 50px; }

/* ── META CHIPS ── */
.art-meta {
  display:flex; flex-wrap:wrap; gap:18px; align-items:center;
  margin-bottom:28px; padding-bottom:24px;
  border-bottom:1px solid var(--nb);
}
.meta-chip {
  display:flex; align-items:center; gap:7px;
  font-size:12.5px; color:var(--text-muted); font-weight:500;
}
.meta-chip i { color:var(--gold); font-size:11px; }

/* ── TITLE ── */
h1.post-title {
  font-family:var(--fd);
  font-size:clamp(28px,4vw,44px);
  font-weight:400; line-height:1.18;
  color:var(--text); margin-bottom:22px; letter-spacing:-.3px;
}
h1.post-title .hl { color:var(--gold); text-shadow:0 0 28px rgba(255,180,0,.32); }

/* ── INTRO ── */
.intro { font-size:16px; color:var(--text-mid); line-height:1.92; margin-bottom:8px; }

/* ══════════════════════════════════════════
   SECTION HEADING
   ══════════════════════════════════════════ */
.sh { display:flex; align-items:center; gap:14px; margin:44px 0 20px; }
.sh-icon {
  width:42px; height:42px; flex-shrink:0; border-radius:13px;
  display:flex; align-items:center; justify-content:center; font-size:17px;
  background:var(--gold-dim); border:1px solid rgba(255,180,0,.24);
  color:var(--gold); box-shadow:0 0 18px rgba(255,180,0,.13);
}
h2.sh-title { font-family:var(--fd); font-size:21px; font-weight:400; color:var(--text); letter-spacing:-.2px; }
.sh::after { content:''; flex:1; height:1px; background:linear-gradient(90deg,var(--nb2),transparent); }

/* ══════════════════════════════════════════
   FEATURE GRID
   ══════════════════════════════════════════ */
.feat-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:12px; }
.feat {
  background:rgba(17,43,82,.55); border:1px solid var(--nb);
  border-radius:var(--r-md); padding:20px 18px;
  position:relative; overflow:hidden;
  transition:.28s var(--ease);
}
.feat::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,var(--gold),var(--gold-light));
  opacity:0; transition:opacity .28s;
}
.feat:hover::before { opacity:1; }
.feat:hover { transform:translateY(-5px); border-color:rgba(255,180,0,.2); box-shadow:0 14px 32px rgba(0,0,0,.28),var(--gold-glow); }
.feat-ico { font-size:22px; margin-bottom:11px; }
.feat h3 { font-size:12.5px; font-weight:700; color:var(--gold-light); letter-spacing:.8px; text-transform:uppercase; margin-bottom:7px; }
.feat p { font-size:13px; color:var(--text-muted); line-height:1.7; margin:0; }

/* ══════════════════════════════════════════
   INFO LIST
   ══════════════════════════════════════════ */
.ilist { display:flex; flex-direction:column; gap:9px; }
.ilist li {
  background:rgba(17,43,82,.48); border:1px solid var(--nb);
  border-left:3px solid var(--gold); border-radius:var(--r-sm);
  padding:14px 17px; font-size:14.5px; color:var(--text-mid); line-height:1.8;
  transition:.26s var(--ease);
}
.ilist li:hover { background:rgba(17,43,82,.8); border-left-color:var(--gold-light); transform:translateX(5px); }
.ilist li b { color:var(--gold-light); font-weight:600; margin-right:3px; }

/* ══════════════════════════════════════════
   TABLE
   ══════════════════════════════════════════ */
.tbl-wrap { overflow-x:auto; border-radius:var(--r-md); margin:4px 0 6px; }
table { width:100%; border-collapse:collapse; background:rgba(8,22,45,.75); border:1px solid var(--nb2); border-radius:var(--r-md); overflow:hidden; font-size:14px; }
thead th {
  background:rgba(255,180,0,.09); color:var(--gold);
  font-family:var(--fm); font-size:11px; letter-spacing:1.5px;
  text-transform:uppercase; font-weight:600;
  padding:14px 17px; text-align:left;
  border-bottom:1px solid var(--nb2);
}
tbody td { padding:13px 17px; border-bottom:1px solid var(--nb); color:var(--text-mid); vertical-align:middle; }
tbody tr:last-child td { border-bottom:none; }
tbody tr:hover td { background:rgba(255,180,0,.04); }
.ttag {
  display:inline-block; padding:3px 11px; border-radius:6px;
  background:rgba(255,180,0,.09); border:1px solid rgba(255,180,0,.2);
  color:var(--gold-light); font-family:var(--fm); font-size:12.5px; font-weight:600;
}
code { color:var(--code-green); font-family:var(--fm); font-size:13px; }

/* ══════════════════════════════════════════
   OPERATORS GRID
   ══════════════════════════════════════════ */
.op-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(205px,1fr)); gap:11px; }
.op {
  background:rgba(17,43,82,.48); border:1px solid var(--nb);
  border-radius:var(--r-md); padding:17px 16px;
  transition:.26s var(--ease);
}
.op:hover { border-color:rgba(255,180,0,.2); background:rgba(17,43,82,.8); transform:translateY(-3px); }
.op-lbl { font-family:var(--fm); font-size:10.5px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; color:var(--gold); margin-bottom:11px; }
.sym-row { display:flex; flex-wrap:wrap; gap:6px; }
.sym {
  background:rgba(255,180,0,.08); border:1px solid rgba(255,180,0,.16);
  border-radius:6px; padding:4px 11px;
  font-family:var(--fm); font-size:13.5px; font-weight:600; color:var(--gold-light);
}

/* ══════════════════════════════════════════
   CONTROL FLOW
   ══════════════════════════════════════════ */
.cf-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:11px; }
.cf {
  background:rgba(17,43,82,.48); border:1px solid var(--nb);
  border-radius:var(--r-md); padding:22px 16px; text-align:center;
  transition:.26s var(--ease);
}
.cf:hover { border-color:rgba(13,148,136,.28); box-shadow:0 0 24px rgba(13,148,136,.1); transform:translateY(-4px); }
.cf i { font-size:24px; color:var(--teal); margin-bottom:11px; display:block; }
.cf h3 { font-size:12.5px; font-weight:700; color:var(--text-mid); text-transform:uppercase; letter-spacing:.8px; margin-bottom:7px; }
.cf p { font-size:13px; color:var(--text-muted); line-height:1.65; margin:0; }
.cf p b { color:var(--teal); font-weight:600; }

/* ══════════════════════════════════════════
   STANDARD LIBRARY
   ══════════════════════════════════════════ */
.lib-list { display:flex; flex-direction:column; gap:9px; }
.lib {
  display:flex; align-items:center; gap:15px;
  background:rgba(13,148,136,.07); border:1px solid rgba(13,148,136,.16);
  border-radius:var(--r-sm); padding:13px 17px;
  transition:.26s var(--ease);
}
.lib:hover { background:rgba(13,148,136,.12); border-color:rgba(13,148,136,.28); transform:translateX(5px); }
.lib-tag {
  font-family:var(--fm); font-size:12.5px; font-weight:600; color:var(--teal);
  background:rgba(13,148,136,.1); border:1px solid rgba(13,148,136,.18);
  border-radius:6px; padding:3px 11px; white-space:nowrap; flex-shrink:0;
}
.lib-desc { font-size:13.5px; color:var(--text-muted); line-height:1.65; }

/* ══════════════════════════════════════════
   CODE BLOCK
   ══════════════════════════════════════════ */
.cblock {
  border-radius:var(--r-lg); overflow:hidden;
  border:1px solid rgba(255,180,0,.14);
  box-shadow:0 14px 38px rgba(0,0,0,.34);
  margin:22px 0 6px;
}
.chead {
  background:rgba(255,180,0,.07); border-bottom:1px solid rgba(255,180,0,.12);
  padding:13px 19px; display:flex; justify-content:space-between; align-items:center;
}
.ctitle { font-family:var(--fm); font-size:11.5px; font-weight:600; color:var(--gold); letter-spacing:1.5px; text-transform:uppercase; }
.cdots { display:flex; gap:6px; }
.cdots span { width:11px; height:11px; border-radius:50%; }
.dr { background:#ff5f57; }
.dy { background:#febc2e; }
.dg { background:#28c840; }
.cbody { background:#030d1f; padding:23px 25px; position:relative; overflow-x:auto; }
.cbody pre { color:var(--code-green); font-family:var(--fm); font-size:14px; line-height:2; margin:0; white-space:pre; }

/* ── COPY BUTTON ── */
.copybtn {
  position:absolute; top:13px; right:13px;
  background:rgba(255,180,0,.09); border:1px solid rgba(255,180,0,.2);
  border-radius:7px; color:var(--gold); cursor:pointer;
  padding:5px 12px; font-size:11.5px; font-family:var(--fm); font-weight:600;
  display:flex; align-items:center; gap:6px;
  transition:.22s var(--ease);
}
.copybtn:hover { background:var(--gold); color:#030d1f; }

/* ── OUTPUT ROW ── */
.out-row {
  display:flex; align-items:flex-start; gap:13px;
  background:rgba(13,148,136,.07); border:1px solid rgba(13,148,136,.16);
  border-radius:var(--r-sm); padding:13px 17px; margin-bottom:6px;
}
.out-lbl { font-family:var(--fm); font-size:10.5px; font-weight:700; color:var(--teal); letter-spacing:1px; text-transform:uppercase; white-space:nowrap; margin-top:2px; }
.out-val { font-family:var(--fm); font-size:14px; color:#fff; }

/* ── DIVIDER ── */
hr.div { margin:44px 0; border:none; height:1px; background:linear-gradient(90deg,transparent,var(--nb2),transparent); }

/* ══════════════════════════════════════════
   CONCLUSION
   ══════════════════════════════════════════ */
.conclusion {
  background:linear-gradient(135deg,rgba(255,180,0,.06),rgba(13,148,136,.05));
  border:1px solid rgba(255,180,0,.14); border-radius:var(--r-lg);
  padding:30px 34px; position:relative; overflow:hidden;
}
.conclusion::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,var(--gold),var(--teal)); }
.conclusion p { font-size:15.5px; color:var(--text-mid); line-height:1.9; margin:0; }
.conclusion strong { color:var(--gold-light); font-weight:600; }

/* ══════════════════════════════════════════
   SHARE BUTTONS
   ══════════════════════════════════════════ */
.share { margin-top:42px; }
.share-lbl { font-family:var(--fm); font-size:10.5px; letter-spacing:3px; text-transform:uppercase; color:var(--text-light); margin-bottom:13px; }
.share-btns { display:flex; gap:9px; flex-wrap:wrap; }
.sbtn {
  width:46px; height:46px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(17,43,82,.65); border:1px solid var(--nb2);
  color:var(--text-muted); font-size:16px;
  transition:.28s var(--spring);
}
.sbtn:hover { transform:translateY(-5px); box-shadow:0 10px 24px rgba(0,0,0,.28); }
.sbtn.fb:hover { background:#1877f2; color:#fff; border-color:#1877f2; }
.sbtn.tw:hover { background:#1da1f2; color:#fff; border-color:#1da1f2; }
.sbtn.li:hover { background:#0a66c2; color:#fff; border-color:#0a66c2; }
.sbtn.wa:hover { background:#25d366; color:#fff; border-color:#25d366; }

/* ══════════════════════════════════════════
   SIDEBAR
   ══════════════════════════════════════════ */
aside { position:sticky; top:20px; animation:fadeUp .5s .15s var(--ease) both; }
.sb-card {
  background:var(--bg-card); border:1px solid var(--nb);
  border-radius:var(--r-xl); padding:26px;
  box-shadow:0 20px 55px rgba(0,0,0,.38);
}
.sb-title {
  font-family:var(--fm); font-size:10.5px; letter-spacing:2.5px; text-transform:uppercase;
  color:var(--gold); font-weight:600; margin-bottom:18px;
  display:flex; align-items:center; gap:9px;
  padding-bottom:15px; border-bottom:1px solid var(--nb);
}
.ch-nav { display:flex; flex-direction:column; gap:4px; }
.ch-nav a {
  display:flex; align-items:center; gap:11px;
  padding:10px 13px; border-radius:var(--r-sm);
  background:rgba(17,43,82,.38); border:1px solid transparent;
  color:var(--text-muted); font-size:13px; font-weight:500;
  transition:.22s var(--ease);
}
.ch-nav a:hover { background:rgba(17,43,82,.85); border-color:rgba(255,180,0,.16); color:var(--text); transform:translateX(4px); }
.ch-nav a.active { background:var(--gold-dim); border-color:rgba(255,180,0,.28); color:var(--gold); }
.cnum {
  width:25px; height:25px; flex-shrink:0; border-radius:6px;
  background:rgba(255,180,0,.09); border:1px solid rgba(255,180,0,.18);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--fm); font-size:10.5px; font-weight:700; color:var(--gold);
}
.ch-nav a.active .cnum { background:var(--gold); color:#030d1f; border-color:var(--gold); }

/* ── PROGRESS BAR ── */
.prog-wrap {
  margin-top:18px; background:rgba(17,43,82,.45);
  border:1px solid var(--nb); border-radius:var(--r-md); padding:15px 17px;
}
.prog-meta { display:flex; justify-content:space-between; font-size:11.5px; color:var(--text-muted); margin-bottom:9px; }
.prog-meta span:last-child { color:var(--gold); font-weight:600; }
.prog-track { background:rgba(255,255,255,.07); border-radius:100px; height:5px; overflow:hidden; }
.prog-fill {
  height:100%; border-radius:100px;
  background:linear-gradient(90deg,var(--gold),var(--teal));
  width:0; box-shadow:0 0 10px rgba(255,180,0,.38);
  transition:width 1.2s var(--ease);
}

/* ══════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════ */
footer { background:#030810; border-top:1px solid rgba(255,180,0,.1); padding:24px 0; text-align:center; }
footer p { font-size:13px; color:var(--text-light); }
footer a { color:var(--gold); transition:color .2s; }
footer a:hover { color:var(--gold-light); }

/* ══════════════════════════════════════════
   BACK TO TOP BUTTON
   ══════════════════════════════════════════ */
#btt {
  position:fixed; bottom:26px; right:26px;
  width:48px; height:48px; border-radius:13px;
  background:linear-gradient(135deg,var(--gold),var(--gold-rich));
  color:#030d1f; font-size:16px;
  border:none; cursor:pointer;
  box-shadow:0 8px 22px rgba(255,180,0,.32);
  transition:.28s var(--ease);
  display:none; align-items:center; justify-content:center;
  z-index:9000;
}
#btt:hover { transform:translateY(-5px); box-shadow:0 14px 30px rgba(255,180,0,.44); }
#btt.show { display:flex; }

/* ══════════════════════════════════════════
   RESPONSIVE — TABLET (≤960px)
   ══════════════════════════════════════════ */
@media (max-width: 960px) {
  .page-grid { grid-template-columns:1fr; }
  aside { position:static; }
  .cf-grid { grid-template-columns:1fr 1fr; }
}

/* ══════════════════════════════════════════
   RESPONSIVE — MOBILE (≤680px)
   ══════════════════════════════════════════ */
@media (max-width: 680px) {
  .art-body { padding:26px 20px 34px; }
  h1.post-title { font-size:25px; }
  .cf-grid { grid-template-columns:1fr; }
  .op-grid { grid-template-columns:1fr 1fr; }
  .feat-grid { grid-template-columns:1fr 1fr; }
  .tbar-links a span { display:none; }
}

/* ══════════════════════════════════════════
   RESPONSIVE — SMALL MOBILE (≤430px)
   ══════════════════════════════════════════ */
@media (max-width: 430px) {
  .wrap { padding:0 14px; }
  .page-grid { padding:18px 0 44px; gap:18px; }
  .art-body { padding:20px 14px 26px; }
  h1.post-title { font-size:22px; }
  .feat-grid, .op-grid { grid-template-columns:1fr; }
}
/* ===== IMAGE PROTECTION ===== */

img{
    user-select: none;
    -webkit-user-drag: none;
}

img.protected{
    pointer-events: none;
}