:root{
  --pluk-bg0:#f7f8fd;
  --pluk-bg1:#eef2ff;
  --pluk-card: rgba(255,255,255,.74);
  --pluk-cardSolid:#ffffff;
  --pluk-text:#0b1220;
  --pluk-muted:#5b667a;
  --pluk-border: rgba(15, 23, 42, .10);
  --pluk-shadow: 0 24px 70px rgba(15, 23, 42, .12);
  --pluk-shadow2: 0 12px 34px rgba(15, 23, 42, .10);
  --pluk-primary:#2563eb;
  --pluk-accent:#7c3aed;
  --pluk-ring: rgba(37, 99, 235, .35);
  --pluk-radius: 22px;
  --pluk-radius2: 16px;
  --pluk-blur: 18px;
  --pluk-font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

[data-theme="dark"]{
  --pluk-bg0:#070a12;
  --pluk-bg1:#0b1020;
  --pluk-card: rgba(17, 25, 40, .74);
  --pluk-cardSolid:#0f172a;
  --pluk-text:#f5f7ff;
  --pluk-muted:#cbd5e1;
  --pluk-border: rgba(255,255,255,.14);
  --pluk-shadow: 0 24px 70px rgba(0,0,0,.62);
  --pluk-shadow2: 0 12px 34px rgba(0,0,0,.46);
  --pluk-ring: rgba(99,102,241,.55);
}

html,body{height:100%}

body{
  font-family: var(--pluk-font);
  color: var(--pluk-text);
}

/* Premium gradient background only if the page hasn't defined its own wrapper background */
body{
  background:
    radial-gradient(1200px 700px at 14% 8%, rgba(124, 58, 237, .18), transparent 55%),
    radial-gradient(900px 600px at 86% 18%, rgba(37, 99, 235, .18), transparent 55%),
    radial-gradient(700px 520px at 62% 90%, rgba(16, 185, 129, .12), transparent 60%),
    linear-gradient(180deg, var(--pluk-bg0), var(--pluk-bg1));
}

/* ===== Header ===== */
.pluk-topbar{
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(var(--pluk-blur));
  -webkit-backdrop-filter: blur(var(--pluk-blur));
  border-bottom: 1px solid var(--pluk-border);
  background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.52));
}
[data-theme="dark"] .pluk-topbar{
  background: linear-gradient(180deg, rgba(10,12,20,.82), rgba(10,12,20,.46));
}

.pluk-topbar-inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 20px;
  display:flex;
  align-items:center;
  gap: 14px;
}

.pluk-brand{
  display:flex;
  align-items:center;
  gap: 12px;
  min-width: 220px;
  text-decoration:none;
  color: inherit;
}

.pluk-logo{
  width: 42px;
  height: 42px;
  border-radius: 16px;
  background:
    radial-gradient(circle at 28% 26%, rgba(255,255,255,.92), transparent 55%),
    radial-gradient(circle at 74% 76%, rgba(255,255,255,.22), transparent 62%),
    linear-gradient(135deg, var(--pluk-primary), var(--pluk-accent));
  box-shadow: 0 16px 34px rgba(37,99,235,.20);
  display:grid;
  place-items:center;
  overflow:hidden;
  flex:0 0 auto;
}
.pluk-logo span{
  font-weight: 1000;
  color:#fff;
  font-size: 18px;
  letter-spacing: .6px;
  text-shadow: 0 8px 24px rgba(0,0,0,.35);
}

.pluk-brandText h1{margin:0; font-size: 14px; line-height: 1.1; font-weight: 900; letter-spacing: .45px;}
.pluk-brandText small{display:block; margin-top: 3px; font-size: 11px; color: var(--pluk-muted); font-weight: 750;}

.pluk-nav{
  flex: 1 1 auto;
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--pluk-border);
  background: var(--pluk-card);
  border-radius: 999px;
  box-shadow: var(--pluk-shadow2);
  overflow-x:auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width:none;
}
.pluk-nav::-webkit-scrollbar{display:none}

.pluk-nav a{
  text-decoration:none;
  color: var(--pluk-muted);
  font-weight: 900;
  font-size: 12px;
  letter-spacing:.2px;
  padding: 8px 10px;
  border-radius: 999px;
  white-space:nowrap;
  border: 1px solid transparent;
}
.pluk-nav a[aria-current="page"]{
  color: var(--pluk-text);
  border-color: rgba(37,99,235,.25);
  background: linear-gradient(180deg, rgba(37,99,235,.12), rgba(124,58,237,.08));
}

.pluk-actions{display:flex; align-items:center; gap: 10px; flex-wrap:wrap; justify-content:flex-end;}

.pluk-iconbtn{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  border: 1px solid var(--pluk-border);
  background: var(--pluk-card);
  box-shadow: var(--pluk-shadow2);
  display:grid;
  place-items:center;
  cursor:pointer;
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
  color: var(--pluk-text);
}
.pluk-iconbtn:hover{transform: translateY(-1px); border-color: rgba(37,99,235,.35); box-shadow: var(--pluk-shadow)}
.pluk-iconbtn:active{transform: translateY(0px) scale(.98)}
.pluk-icon{width: 18px; height: 18px; opacity: .95}

.pluk-userchip{
  display:flex; align-items:center; gap: 10px;
  padding: 7px 9px 7px 11px;
  border-radius: 999px;
  border: 1px solid var(--pluk-border);
  background: var(--pluk-card);
  box-shadow: var(--pluk-shadow2);
}
.pluk-avatar{
  width: 30px; height: 30px; border-radius: 12px;
  background:
    radial-gradient(circle at 28% 24%, rgba(255,255,255,.35), transparent 55%),
    linear-gradient(135deg, rgba(37,99,235,.98), rgba(124,58,237,.98));
  box-shadow: 0 14px 28px rgba(124,58,237,.18);
}
.pluk-usertext{display:flex; flex-direction:column; line-height:1.05}
.pluk-username{font-size: 12px; font-weight: 900}
.pluk-usersub{font-size: 11px; color: var(--pluk-muted); font-weight: 800}

.pluk-btn{
  border: 1px solid var(--pluk-border);
  background: var(--pluk-card);
  padding: 12px 14px;
  border-radius: 16px;
  font-weight: 950;
  font-size: 12px;
  letter-spacing: .35px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  box-shadow: var(--pluk-shadow2);
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease, opacity .12s ease;
  user-select:none;
  color: inherit;
  text-decoration:none;
}
.pluk-btn:hover{transform: translateY(-1px); border-color: rgba(37,99,235,.35); box-shadow: var(--pluk-shadow)}
.pluk-btn:active{transform: translateY(0px) scale(.99)}

.pluk-primary{
  background: linear-gradient(135deg, rgba(37,99,235,.98), rgba(124,58,237,.98));
  border-color: rgba(255,255,255,.14);
  color: #fff;
  box-shadow: 0 22px 54px rgba(37,99,235,.22);
}

.pluk-kbd{
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 10px;
  border: 1px solid var(--pluk-border);
  background: rgba(255,255,255,.40);
  color: var(--pluk-text);
}
[data-theme="dark"] .pluk-kbd{background: rgba(255,255,255,.10)}

.pluk-main{
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

/* ===== Footer ===== */
.pluk-footer{
  border-top: 1px solid var(--pluk-border);
  background: rgba(255,255,255,.50);
}
[data-theme="dark"] .pluk-footer{background: rgba(10,12,20,.42)}

.pluk-footer-inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 26px 20px;
  display:grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 18px;
}

.pluk-footer-brand{display:flex; gap: 12px; align-items:flex-start;}
.pluk-footer-logo{
  width: 40px;
  height: 40px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--pluk-primary), var(--pluk-accent));
  display:grid;
  place-items:center;
  color:#fff;
  box-shadow: 0 18px 44px rgba(37,99,235,.18);
  flex:0 0 auto;
}
.pluk-footer-logo span{font-weight: 1000; letter-spacing:.5px}

.pluk-footer-col h3{margin:0 0 6px; font-size: 14px; font-weight: 980}
.pluk-footer-col h4{margin:0 0 8px; font-size: 12px; font-weight: 980; color: var(--pluk-muted); letter-spacing:.35px}
.pluk-footer-col p{margin:0; color: var(--pluk-muted); font-size: 12px; line-height:1.6; font-weight: 800}

.pluk-footer-col a{
  display:block;
  color: var(--pluk-text);
  text-decoration:none;
  font-size: 12px;
  font-weight: 900;
  opacity: .86;
  padding: 6px 0;
}
.pluk-footer-col a:hover{opacity:1; text-decoration:underline}

.pluk-footer-bottom{
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 20px 18px;
  display:flex;
  gap: 12px;
  justify-content:space-between;
  flex-wrap:wrap;
  color: var(--pluk-muted);
  font-size: 12px;
  font-weight: 800;
}
.pluk-footer-muted{color: var(--pluk-muted)}

/* Responsive header/footer */
@media (max-width: 980px){
  .pluk-topbar-inner{flex-wrap:wrap}
  .pluk-brand{min-width:auto}
  .pluk-nav{order:3; width:100%}
  .pluk-actions{width:100%; justify-content:space-between}
}

@media (max-width: 720px){
  .pluk-footer-inner{grid-template-columns: 1fr 1fr;}
}

@media (max-width: 520px){
  .pluk-main{padding: 16px}
  .pluk-topbar-inner{padding: 12px 16px}
  .pluk-userchip{flex:1 1 auto}
  .pluk-nav{padding: 6px 8px}
}

:focus-visible{outline: 3px solid var(--pluk-ring); outline-offset: 2px; border-radius: 16px;}
/* ===== Mobile hamburger for pluk header ===== */
.pluk-navToggle{
  display:none;
  width:44px;
  height:44px;
  border-radius:16px;
  border:1px solid var(--pluk-border);
  background: var(--pluk-card);
  box-shadow: var(--pluk-shadow2);
  cursor:pointer;
  padding: 12px 12px;
}

.pluk-navToggle span{
  display:block;
  height:2px;
  width:100%;
  border-radius:999px;
  background: var(--pluk-text);
}
.pluk-navToggle span + span{ margin-top: 6px; }

@media (max-width: 980px){
  .pluk-navToggle{ display:grid; align-content:center; }
  .pluk-topbar-inner{ position:relative; }

  /* nav'ı dropdown yap */
  .pluk-nav{
    display:none;
    position:absolute;
    left: 16px;
    right: 16px;
    top: calc(100% + 10px);
    width:auto;
    border-radius: 18px;
    background: var(--pluk-cardSolid);
    overflow: hidden;
    padding: 10px;
  }

  .pluk-nav.pluk-navOpen{ display:flex; }

  .pluk-nav{
    flex-direction:column;
    align-items:stretch;
    gap: 6px;
  }

  .pluk-nav a{
    padding: 12px 12px;
    border-radius: 14px;
    background: rgba(255,255,255,.55);
  }

  [data-theme="dark"] .pluk-nav a{
    background: rgba(255,255,255,.08);
  }
}

/* FORCE show hamburger + FORCE hide nav on mobile (debug + fix) */
@media (max-width: 980px){
  #navToggle.pluk-navToggle{ 
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 99999 !important;
  }

  #mainNav.pluk-nav{
    display: none !important;
  }

  #mainNav.pluk-nav.pluk-navOpen{
    display: flex !important;
  }
}
/* Xmas Snow (lightweight) */
#snow{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:9999;
  overflow:hidden;
}

#snow .snowflake{
  position:absolute;
  top:-12px;
  line-height:1;
  will-change:transform;
  animation-name:pluk-fall;
  animation-timing-function:linear;
  opacity:.85;
  text-shadow:0 0 6px rgba(255,255,255,.25);
}

@keyframes pluk-fall{
  to{ transform:translateY(110vh); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  #snow{ display:none; }
}