/* =========================================================
   Global Tokens
========================================================= */
:root{
  /* colors */
  --bg:#f8fafc; --surface:#ffffff; --text:#111827; --muted:#6b7280;
  --brand:#d21e2b; --radius:14px; --border:#e5e7eb; --shadow:0 6px 20px rgba(0,0,0,.06);
  --focus: 0 0 0 3px #d21e2b33;

  /* motion */
  --e-fast: 160ms cubic-bezier(.2,.7,.3,1);
  --e-med: 280ms cubic-bezier(.2,.7,.3,1);
}

@media (prefers-reduced-motion: reduce){
  * { animation: none !important; transition: none !important; }
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  background:var(--bg); color:var(--text);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
a{color:var(--brand); text-decoration:none}
img{max-width:100%; display:block}
button{font:inherit; background:none; border:none; padding:0; color:inherit; cursor:pointer}
.skip-link{position:absolute; left:-9999px; top:-9999px}
.skip-link:focus{left:12px; top:12px; background:#fff; padding:8px 12px; border-radius:8px; box-shadow:var(--shadow); z-index:9999}

/* =========================================================
   Layout
========================================================= */
.wrap{max-width:1200px; margin:0 auto; padding:16px 16px 24px}
@media (min-width:768px){ .wrap{ padding:24px } }

header{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 0; position:sticky; top:0; background:var(--bg); z-index:50
}
.logo{display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.4px}
.logo:focus-visible{outline:none; box-shadow:var(--focus); border-radius:10px; padding:2px 6px}
.logo-bullet{width:12px; height:12px; border-radius:999px; background:var(--brand)}
.cta{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.btn{
  background:var(--brand); color:#fff; padding:10px 14px; border-radius:12px;
  font-weight:700; border:1px solid transparent; box-shadow:var(--shadow);
  position: relative; overflow: hidden;
  transition: transform var(--e-fast), box-shadow var(--e-fast), background var(--e-fast), color var(--e-fast);
}
.btn:hover{ transform: translateY(-1px); box-shadow: 0 10px 24px rgba(0,0,0,.12); }
.btn:active{ transform: translateY(0); }
.btn:focus-visible{outline:none; box-shadow:var(--focus)}
.btn.outline{background:#fff; color:var(--brand); border:1px solid var(--border); box-shadow:none}
/* ripple */
.btn::after{
  content:""; position:absolute; inset:auto; left:var(--rx,50%); top:var(--ry,50%);
  width:0; height:0; border-radius:50%; background: rgba(255,255,255,.35);
  transform: translate(-50%,-50%); transition: width .45s ease, height .45s ease, opacity .6s ease;
  opacity:0; pointer-events:none;
}
.btn.rippling::after{ width:260px; height:260px; opacity:1; }

.section{margin-top:24px}
.grid{display:grid; gap:16px}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
@media (max-width:900px){.grid.cols-2{grid-template-columns:1fr}}

/* =========================================================
   Category Cards (BÜYÜTÜLDÜ + Animasyon)
========================================================= */
.card{
  position:relative; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  overflow:hidden; display:flex; align-items:flex-end; box-shadow:var(--shadow);
  /* boyutlar */
  min-height: 280px;
  /* animasyon */
  transition: transform var(--e-med), box-shadow var(--e-med);
  will-change: transform;
  perspective: 800px; transform-style: preserve-3d;
  /* parallax değerleri JS ile güncelleniyor */
  --rx: 0deg; --ry: 0deg;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
}
@media (min-width:1200px){ .card{ min-height: 320px; } }
@media (max-width:900px){ .card{ min-height: 220px; } }
@media (max-width:600px){ .card{ min-height: 200px; } }

.card:hover{
  transform: translateY(-6px) scale(1.06) rotateX(var(--rx)) rotateY(var(--ry));
  box-shadow: 0 18px 48px rgba(0,0,0,.16);
}
.card img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition: transform var(--e-med), opacity var(--e-med)}
.card:hover img{ transform: scale(1.12); }
.card .overlay{position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.25) 100%)}
.card h3{position:relative; z-index:2; padding:12px; margin:0; font-size:18px; color:#fff}
/* shine efekti */
.card::before{
  content: ""; position: absolute; inset: -2px;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.35), transparent 70%);
  transform: translateX(-120%); animation: shine 1.2s var(--e-med) both paused; pointer-events: none;
}
.card:hover::before{ animation-play-state: running; }
@keyframes shine{ 0%{ transform: translateX(-120%);} 100%{ transform: translateX(120%);} }

/* Scroll reveal (daha belirgin büyüme) */
.reveal { opacity: 0; transform: translateY(14px) scale(.96); transition: transform var(--e-med), opacity var(--e-med); will-change: transform, opacity; }
.reveal.reveal-visible { opacity: 1; transform: translateY(0) scale(1); }

/* =========================================================
   Common Inputs
========================================================= */
.crumbs{display:flex; align-items:center; gap:8px; color:var(--muted); margin:8px 0 12px; flex-wrap:wrap}
.input{padding:10px 12px; border-radius:12px; border:1px solid var(--border); background:#fff; color:var(--text); width:100%}

/* =========================================================
   Product List Cards
========================================================= */
.products{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
@media (max-width:1100px){.products{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.products{grid-template-columns:1fr}}
.p{
  background:var(--surface); border:1px solid var(--border); border-radius:16px; overflow:hidden;
  display:flex; flex-direction:column; box-shadow:var(--shadow);
  transition: transform var(--e-med), box-shadow var(--e-med);
}
.p:hover{ transform: translateY(-4px) scale(1.03); box-shadow: 0 16px 36px rgba(0,0,0,.14); }
.p img{width:100%; aspect-ratio: 4/3; object-fit:cover}
.p .b{padding:12px}
.p .b h4{margin:0 0 4px; font-size:16px}
.p .meta{color:var(--muted); font-size:13px; display:flex; gap:10px; flex-wrap:wrap}
.p .a{display:flex; gap:8px; padding:12px; margin-top:auto; flex-wrap:wrap}

/* Tag çipleri ve bar */
.tags{ display:flex; gap:8px; flex-wrap:wrap; }
.tag{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; border-radius:999px; border:1px solid var(--border); background:#fff;
  font-size:12px; color:#374151; box-shadow:var(--shadow);
  transition: transform var(--e-fast), border-color var(--e-fast), box-shadow var(--e-fast);
}
.tag.active{ border-color: var(--brand); box-shadow:0 0 0 2px #d21e2b20; }
.tag .dot{ width:8px; height:8px; border-radius:999px; background:#d1d5db }
.tag.small{ padding:4px 8px; font-size:11px; box-shadow:none }
.tagbar{ display:flex; gap:8px; flex-wrap:nowrap; overflow:auto; padding-bottom:4px; -webkit-overflow-scrolling:touch }
.tagbar .tag{ white-space:nowrap }
.tag:hover{ transform: translateY(-1px); box-shadow: 0 6px 12px rgba(0,0,0,.06); }

/* =========================================================
   Spec Sheet / Product Details
========================================================= */
.spec-sheet{background:#fff; border:1px solid var(--border); border-radius:16px; padding:16px; box-shadow:var(--shadow)}
.spec-header{display:flex; align-items:center; justify-content:space-between; gap:12px; border-bottom:2px solid #e11d2b22; padding-bottom:12px}
.spec-title{font-weight:800; letter-spacing:.4px; font-size:20px}
.spec-body{display:grid; grid-template-columns:1.2fr .8fr; gap:16px; margin-top:14px}
.spec-visual{display:grid; grid-template-columns:1fr 1fr; gap:10px; align-items:start}
.spec-visual .main{grid-column:1/3; background:#fafafa; border:1px solid var(--border); border-radius:12px; padding:6px}
.spec-visual img{width:100%; border-radius:10px}
@media (max-width:900px){.spec-body{grid-template-columns:1fr}}

/* Full-width hero (PLAIN: orijinal kalite, yazısız, contain) */
.hero-full.hero-plain{
  position: relative; width: 100%; max-height: 70vh;
  border-radius: 16px; background: #fff; border: 1px solid var(--border);
  box-shadow: var(--shadow); overflow: hidden;
}
.hero-full.hero-plain .hero-img{ width: 100%; height: 100%; object-fit: contain; image-rendering: auto; }
.hero-title{ display:none; }

/* Ürün detayları */
.product-details{ margin-top: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 900px){ .product-details{ grid-template-columns: 1fr; } }
.detail-block{ background:#fff; border:1px solid var(--border); border-radius:16px; padding:14px; box-shadow:var(--shadow); }
.detail-block h4{ margin:0 0 8px; font-size:16px }
.detail-block ul{ margin:0; padding-left:18px; color:#374151 }
.detail-block p{ margin:0; color:#374151; line-height:1.6 }

/* =========================================================
   Login
========================================================= */
.login-card{
  background:#fff; border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow);
  max-width:420px; margin:24px auto; padding:18px;
}
.login-card h2{ margin:0 0 6px; font-size:20px }
.login-card p{ margin:0 0 14px; color:var(--muted) }
.login-card .row{ display:grid; gap:10px; margin-top:10px }
.login-card .actions{ display:flex; gap:8px; align-items:center; margin-top:12px; flex-wrap:wrap }

/* =========================================================
   Footer
========================================================= */
footer{margin:24px 0 10px; color:#6b7280; font-size:14px; text-align:center}

/* CTA butonları mobil düzen: yan yana */
@media (max-width: 600px){
  .cta{
    flex-direction: row;        /* yan yana */
    justify-content: center;    /* ortala */
    align-items: center;
    gap: 8px;
    width: 100%;
  }
  .cta .btn{
    flex: 1;                    /* eşit genişlik */
    min-width: 0;               /* taşmayı engelle */
    text-align: center;
  }
  header{
    flex-direction: column;     /* logo üstte, buton grubu altta */
    align-items: center;
    gap: 12px;
  }
}
/* ==== İş Ortaklarımız (brandbar) ==== */
.partners{ margin-top:24px; background:#fff; border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow); padding:12px; }
.partners-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; }
.partners h2{ margin:0; font-size:18px; }
.brandbar{ display:flex; gap:12px; overflow:auto; padding:6px 2px; -webkit-overflow-scrolling:touch; }
.brandbar.admin{ flex-wrap:wrap; overflow:visible; }
.brandchip{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  border:1px solid var(--border); background:#fff; border-radius:12px; padding:8px 10px; min-width:110px;
  box-shadow:var(--shadow); text-align:center; transition:transform var(--e-fast), box-shadow var(--e-fast);
}
.brandchip:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.10); }
.brandchip img{ height:42px; width:auto; object-fit:contain; filter:grayscale(100%); transition:filter .25s; }
.brandchip:hover img{ filter:grayscale(0%); }
.brandchip span{ font-size:12px; color:#374151; }
.brand-actions{ display:flex; gap:8px; margin-top:6px; }
.brand-empty{ color:#6b7280; padding:6px 0; }
/* Admin listeleri */
.catlist{ display:grid; gap:10px }
.catrow{ display:flex; gap:12px; padding:8px; border:1px solid var(--border); border-radius:12px; background:#fff; align-items:center }
.catrow img{ width:120px; height:68px; object-fit:cover; border-radius:10px; border:1px solid var(--border) }
.catrow .meta{ display:flex; flex-direction:column; gap:4px; color:#374151 }
.cat-actions{ margin-left:auto; display:flex; gap:8px }
.products.admin .p img{ aspect-ratio: 4/3; object-fit:cover }
/* Dropzone */
.dropzone{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
}
.dropbox{
  border:2px dashed var(--border); background:#fafafa;
  border-radius:12px; padding:10px 12px; min-width:220px; min-height:54px;
  display:flex; align-items:center; justify-content:center; text-align:center;
  color:#6b7280; cursor:pointer; transition:background .2s, border-color .2s;
}
.dropbox:hover{ background:#f5f7fb; }
.dropbox.drag{ border-color: var(--brand); background:#fff0f2; color:#b91c1c; }
.preview{
  display:flex; align-items:center; gap:8px;
}
.preview img{
  width:56px; height:56px; object-fit:cover; border-radius:10px; border:1px solid var(--border); background:#fff;
}