/* Cozy Dark overrides for EmirhanDemirden.com
   SAFE VERSION: does not change template transforms/sizing.
   Load this file LAST.
*/

:root{
  /* Cozy dark palette */
  --cozy-bg: #0E111A;
  --cozy-text: #E9ECF1;
  --cozy-muted: rgba(233,236,241,.78);

  --cozy-primary: #8B7DFF;  /* cozy violet */
  --cozy-accent:  #F4C95D;  /* warm amber */

  /* Surfaces */
  --cozy-surface: rgba(255,255,255,.07);
  --cozy-surface-2: rgba(255,255,255,.05);
  --cozy-pill: rgba(255,255,255,.08);
  --cozy-stroke: rgba(233,236,241,.12);

  --cozy-shadow: 0 18px 55px rgba(0,0,0,.45);
  --cozy-radius: 22px;
}

html, body{ height: 100%; }

body{
  color: var(--cozy-text);
  font-family: Poppins, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial;

  /* cozy dark background */
  background:
    radial-gradient(1200px 700px at 10% 5%, rgba(139,125,255,.18), transparent 60%),
    radial-gradient(900px 600px at 90% 0%, rgba(244,201,93,.12), transparent 55%),
    radial-gradient(800px 500px at 30% 90%, rgba(76,189,255,.08), transparent 60%),
    var(--cozy-bg);
  background-attachment: fixed;
}

/* Keep template decorative bg stable (no scroll “shifting”) */
.background.gradient{
  position: fixed !important;
  inset: 0;
  pointer-events: none;
  opacity: .18;
  filter: saturate(1.05);
}

/* Soften bubbles */
.background.gradient .bg-bubbles li{
  opacity: .10;
  background: rgba(139,125,255,.18);
}
.background.gradient .bg-bubbles li:nth-child(2n){
  background: rgba(244,201,93,.12);
}

/* IMPORTANT: do NOT change template positioning/transforms */
.page .container,
.page .sidebar,
.page .card-started,
.page .card-inner,
.page .top-menu{
  z-index: 5;
}

/* Cozy glass cards */
.page .card-started,
.page .card-inner{
  border-radius: var(--cozy-radius) !important;
  background: linear-gradient(180deg, var(--cozy-surface), var(--cozy-surface-2)) !important;
  border: 1px solid var(--cozy-stroke) !important;
  box-shadow: var(--cozy-shadow) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Remove harsh masks some skins add */
.page .card-inner:before,
.page .card-inner:after{
  background: transparent !important;
}

/* Typography */
.page, .page *{
  color: var(--cozy-text);
}

h1,h2,h3,h4,h5,h6{
  color: var(--cozy-text) !important;
  letter-spacing: -.01em;
}

p, .desc, .subtitle, .text-box{
  color: var(--cozy-muted) !important;
}

/* Links */
a{ color: linear-gradient(135deg, rgba(139,125,255,.22), rgba(244,201,93,.12)) !important; }
a:hover{ color: linear-gradient(135deg, rgba(139,125,255,.22), rgba(244,201,93,.12)) !important; }

/* Title accent bar */
.content .title:before{
  background: linear-gradient(135deg, rgba(139,125,255,.22), rgba(244,201,93,.12)) !important;
}

/* Top menu cozy dark */
.page .top-menu{
  border-radius: 18px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.06)) !important;
  border: 1px solid var(--cozy-stroke) !important;
  box-shadow: 0 16px 50px rgba(0,0,0,.40) !important;
}

.page .top-menu ul li a{
  border-radius: 999px !important;
  background: transparent !important;
  color: rgba(233,236,241,.82) !important;
}

.page .top-menu ul li a .icon,
.page .top-menu ul li a span{
  color: rgba(233,236,241,.82) !important;
}

.page .top-menu ul li.active a,
.page .top-menu ul li a:hover{
  background: rgba(255,255,255,.10) !important;
}

/* Sidebar menu block (left) */
.page .sidebar .top-menu{
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.06)) !important;
  border: 1px solid rgba(233,236,241,.10) !important;
  box-shadow: 0 16px 50px rgba(0,0,0,.38) !important;
}

/* Hamburger button (top-left) — dark cozy */
.page .sidebar .menu-btn{
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(233,236,241,.10) !important;
  box-shadow: 0 14px 40px rgba(0,0,0,.40) !important;
  border-radius: 16px !important;
}
.page .sidebar .menu-btn span,
.page .sidebar .menu-btn:before,
.page .sidebar .menu-btn:after{
  background: rgba(233,236,241,.78) !important;
}

/* Pills / Buttons */
.lnk,
.button,
.btn,
input[type="submit"],
button{
  border-radius: 999px !important;
}

.lnk,
.button,
.btn,
.page .lnks a{
  color: linear-gradient(135deg, rgba(139,125,255,.22), rgba(244,201,93,.12)) !important;
  transition: transform .18s ease;
}

.lnk:hover,
.button:hover,
.btn:hover,
.page .lnks a:hover{
  transform: translateY(-2px);
  color: linear-gradient(135deg, rgba(139,125,255,.22), rgba(244,201,93,.12)) !important;
}

/* Inputs */
input, textarea, select{
  border-radius: 14px !important;
  border: 1px solid rgba(233,236,241,.14) !important;
  background: rgba(255,255,255,.06) !important;
  color: rgba(233,236,241,.92) !important;
}
input::placeholder, textarea::placeholder{
  color: rgba(233,236,241,.55) !important;
}

/* Icons + social */
.page .social a,
.page .social a .icon{
  color: rgba(233,236,241,.72) !important;
}
.page .social a:hover,
.page .social a:hover .icon{
  color: var(--cozy-accent) !important;
}

/* Lines/borders that were too harsh */
.page .line,
.page .border-line,
.page .content .border-line,
.page .card-inner .border-line{
  background: rgba(233,236,241,.10) !important;
}

/* Blog cards */
.blog-item,
.box-item{
  border-radius: 18px !important;
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(233,236,241,.10) !important;
}

/* Images */
img{ border-radius: 18px; }

/* Nice selection */
::selection{
  background: rgba(139,125,255,.28);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* --- Cozy hamburger (top-left) --- */
/* Some templates use .btn-sidebar, some use .menu-btn; we style all safely */

.page .btn-sidebar,
.page .menu-btn,
.page .sidebar .menu-btn,
.page .header .menu-btn{
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06)) !important;
  border: 1px solid rgba(233,236,241,.14) !important;
  box-shadow: 0 14px 40px rgba(0,0,0,.50) !important;
  border-radius: 16px !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* The 3 lines / icon inside the button */
.page .btn-sidebar span,
.page .menu-btn span,
.page .sidebar .menu-btn span,
.page .btn-sidebar:before,
.page .btn-sidebar:after,
.page .menu-btn:before,
.page .menu-btn:after{
  background: rgba(233,236,241,.85) !important;
}

/* Hover/active glow */
.page .btn-sidebar:hover,
.page .menu-btn:hover,
.page .sidebar .menu-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 55px rgba(0,0,0,.60) !important;
  border-color: rgba(139,125,255,.22) !important;
}
/* =========================
   Cozy Blog Post Styling
   ========================= */

/* Blog popup/card container */
.blog-card,
.blog-single,
.blog-detail,
.blog-post,
.card-inner.blog-card,
.card-inner.blog-single{
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Blog title */
.blog-card h1,
.blog-card h2,
.blog-single h1,
.blog-single h2{
  color: var(--cozy-text) !important;
  font-weight: 600;
  letter-spacing: .2px;
}

/* Blog metadata line */
.blog-card .meta,
.blog-single .meta{
  color: rgba(233,236,241,.60) !important;
}

/* Blog text */
.blog-card p,
.blog-single p{
  color: rgba(233,236,241,.80) !important;
  line-height: 1.75;
  font-size: 15px;
}

/* Blog links (orange cozy accent) */
.blog-card a,
.blog-single a{
  color: var(--cozy-accent) !important;
  font-weight: 500;
}

.blog-card a:hover,
.blog-single a:hover{
  color: #ffb84a !important;
}

/* Code blocks */
.blog-card pre,
.blog-card code,
.blog-single pre,
.blog-single code{
  border-radius: 12px;
  font-family: monospace;
  color: #f6f6f6;
}

/* Blog images */
.blog-card img,
.blog-single img{
  border-radius: 16px;
  box-shadow: 0 10px 35px rgba(0,0,0,.45);
  margin: 10px 0;
}

/* Close button */
.blog-card .close,
.blog-single .close{
  color: rgba(233,236,241,.70) !important;
  transition: all .2s ease;
}

.blog-card .close:hover,
.blog-single .close:hover{
  color: var(--cozy-accent) !important;
  transform: scale(1.1);
}