Printbarn

/* ============================================
   PRINTBARN — Kurumsal Kimlik CSS v2
   DecoNetwork Custom CSS — Tam Sürüm
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Assistant:wght@300;400;500;600;700&display=swap');

:root {
  --pb-navy: #0F1B3D;
  --pb-dark-blue: #1B3A6B;
  --pb-royal-blue: #2D5DA1;
  --pb-ice-blue: #E8EEF6;
  --pb-steel: #6B89B0;
  --pb-snow: #F7F9FC;
  --pb-white: #FFFFFF;
  --pb-charcoal: #1A1A2E;
  --pb-success: #2E7D4F;
  --pb-warning: #D4851F;
  --pb-error: #C43C3C;
  --pb-red: #DD1111;
  --pb-red-light: #FDEBEB;
  --pb-radius-sm: 6px;
  --pb-radius-md: 8px;
  --pb-radius-lg: 12px;
  --pb-shadow-sm: 0 1px 3px rgba(15,27,61,0.06);
  --pb-shadow-md: 0 4px 12px rgba(15,27,61,0.08);
  --pb-shadow-lg: 0 8px 24px rgba(15,27,61,0.12);
  --motion-fast: 0.15s ease;
  --motion-normal: 0.2s ease;
  --motion-slow: 0.4s ease;
  --motion-spring: 0.3s cubic-bezier(0.34,1.56,0.64,1);
}

/* --- Tipografi --- */
body, .content, .widget, p, span, div, li, td {
  font-family: 'Assistant', 'Helvetica Neue', sans-serif !important;
  color: var(--pb-charcoal);
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4,h5,h6,.heading,.title,.nav-link,.menu-item,.btn,button {
  font-family: 'Poppins', 'Helvetica Neue', sans-serif !important;
}
h1 { font-size:42px; font-weight:700; letter-spacing:-1px; color:var(--pb-navy); }
h2 { font-size:32px; font-weight:600; letter-spacing:-0.5px; color:var(--pb-navy); }
h3 { font-size:24px; font-weight:600; color:var(--pb-navy); }
h4 { font-size:18px; font-weight:500; color:var(--pb-navy); }
body { background-color:var(--pb-white) !important; }

/* --- Linkler --- */
a { color:var(--pb-royal-blue); text-decoration:none; transition:var(--motion-normal); }
a:hover { color:var(--pb-dark-blue); }

/* --- Butonlar --- */
.btn,button[type="submit"],.checkout-button,.add-to-cart-button {
  font-family:'Poppins',sans-serif !important; font-weight:600;
  border-radius:var(--pb-radius-md); transition:var(--motion-normal); border:none; cursor:pointer;
}
.btn-primary,.checkout-button,.add-to-cart-button,.design-button {
  background:var(--pb-navy) !important; color:#fff !important;
  padding:14px 32px; font-size:15px; border-radius:10px;
}
.btn-primary:hover,.checkout-button:hover,.add-to-cart-button:hover,.design-button:hover {
  background:var(--pb-dark-blue) !important; transform:scale(1.02);
}
.btn-secondary { background:transparent !important; color:var(--pb-navy) !important; border:1.5px solid var(--pb-navy) !important; padding:12px 28px; border-radius:10px; }
.btn-secondary:hover { background:var(--pb-ice-blue) !important; }

/* --- Formlar --- */
input,select,textarea {
  font-family:'Assistant',sans-serif !important; border:1.5px solid var(--pb-ice-blue);
  border-radius:var(--pb-radius-md); padding:12px 14px; font-size:14px;
  background:var(--pb-snow); transition:var(--motion-normal); color:var(--pb-charcoal);
}
input:focus,select:focus,textarea:focus {
  border-color:var(--pb-royal-blue); outline:none;
  box-shadow:0 0 0 3px rgba(45,93,161,0.1);
}

/* --- Kartlar --- */
.product-card,.product-item,.product-thumbnail,.design-item {
  border-radius:var(--pb-radius-lg) !important;
  border:1px solid var(--pb-ice-blue) !important; overflow:hidden;
  transition:var(--motion-normal); background:var(--pb-white);
}
.product-card:hover,.product-item:hover {
  box-shadow:var(--pb-shadow-md); transform:translateY(-2px);
}

/* --- Header --- */
#header,.site-header,header {
  background:var(--pb-white) !important; border-bottom:1px solid var(--pb-ice-blue);
  position:sticky; top:0; z-index:1000;
}
.nav-link,.menu-item a {
  font-family:'Poppins',sans-serif !important; font-weight:500;
  font-size:13px; color:var(--pb-charcoal) !important; transition:var(--motion-normal);
}
.nav-link:hover,.menu-item a:hover { color:var(--pb-royal-blue) !important; }

/* --- Footer --- */
#footer,.site-footer,footer {
  background:var(--pb-navy) !important; color:#fff; padding:60px 0 30px;
}
footer a { color:var(--pb-ice-blue) !important; }
footer a:hover { color:#fff !important; }

/* --- Tablolar --- */
table { width:100%; border-collapse:collapse; border-radius:var(--pb-radius-lg); overflow:hidden; border:1px solid var(--pb-ice-blue); }
th { background:var(--pb-navy); color:#fff; padding:10px 14px; font-size:12px; font-weight:600; text-align:left; }
td { padding:10px 14px; font-size:13px; border-bottom:1px solid var(--pb-ice-blue); }
tr:nth-child(even) td { background:var(--pb-snow); }

/* --- Filtre Accordion --- */
.filter-group .filter-options,.filter-content { max-height:0; overflow:hidden; transition:max-height var(--motion-slow); }
.filter-group.open .filter-options,.filter-group.active .filter-content { max-height:500px; }

/* --- Badge --- */
.badge-new { background:#E0EDFF; color:#1B3A6B; }
.badge-sale { background:#FDECEC; color:#C43C3C; }
.badge-bestseller { background:var(--pb-ice-blue); color:var(--pb-royal-blue); }

/* --- Toast --- */
.toast-success { background:#E9F5EE; color:var(--pb-success); border:1px solid #c4e3d1; }
.toast-error { background:#FDECEC; color:var(--pb-error); border:1px solid #f0c4c4; }
.toast-warning { background:#FDF3E7; color:var(--pb-warning); border:1px solid #f0d9b8; }

/* --- Skeleton Loading --- */
@keyframes shimmer { 0%{background-position:-200px 0} 100%{background-position:200px 0} }
.skeleton { background:linear-gradient(90deg,var(--pb-ice-blue) 25%,#f0f4fa 50%,var(--pb-ice-blue) 75%); background-size:400px 100%; animation:shimmer 1.5s infinite; border-radius:6px; }

/* --- Focus State (A11y) --- */
*:focus-visible { outline:2px solid var(--pb-royal-blue); outline-offset:2px; box-shadow:0 0 0 4px rgba(45,93,161,0.15); }

/* --- Reduced Motion --- */
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:0.01ms !important; transition-duration:0.01ms !important; }
}

/* --- Responsive --- */
@media(max-width:767px) {
  h1 { font-size:28px; }
  h2 { font-size:24px; }
  h3 { font-size:20px; }
  .btn-primary,.checkout-button { padding:12px 24px; font-size:14px; width:100%; }
}
@media(min-width:768px) and (max-width:1023px) {
  h1 { font-size:32px; }
  h2 { font-size:26px; }
}