/*
Theme Name: etnastudio v2
Theme URI: https://etnastudio.com
Author: etnastudio
Description: etnastudio 3D baskı servisi için yenilenmiş modern tema. 3D STL canlı önizleme, canlı filament renk seçici, boyut ölçer, lava pulse animasyonları, mobil hamburger menü ve AJAX form altyapısı içerir.
Version: 2.0.0
Requires at least: 5.8
Requires PHP: 7.4
Text Domain: etnastudio-v2
*/

:root{
  --color-bg:#141416; --color-surface:#1d1e21; --color-text:#f1ede6;
  --color-accent-400:#fca54d; --color-accent-500:#f28a1e; --color-accent-600:#d1720e;
  --color-divider: color-mix(in srgb, #f1ede6 16%, transparent);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.5); --shadow-md: 0 3px 10px rgba(0,0,0,.55);
  --radius-md:4px; --radius-lg:7px;
  --font-heading:"Barlow Condensed", system-ui, sans-serif;
  --font-body:"Barlow", system-ui, sans-serif;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--color-bg);color:var(--color-text);font-family:var(--font-body);overflow-x:hidden;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;}

/* --- Lava Pulse Keyframe --- */
@keyframes lavaPulse {
  0% { box-shadow: 0 0 0 0 rgba(242, 138, 30, 0.4); }
  70% { box-shadow: 0 0 0 12px rgba(242, 138, 30, 0); }
  100% { box-shadow: 0 0 0 0 rgba(242, 138, 30, 0); }
}

@keyframes floatSlow {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-6px); }
}

/* --- Preloader Perde Açılış Animasyonu --- */
#etna-preloader {
  position: fixed;
  top: 0; left: 0; width: 100vw; height: 100vh;
  background: #101012;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.75s cubic-bezier(0.77, 0, 0.175, 1);
  will-change: transform;
}
#etna-preloader.done {
  transform: translateY(-100%);
  pointer-events: none;
}
.preloader-content {
  text-align: center;
  max-width: 280px;
  width: 90%;
}
.preloader-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
  animation: floatSlow 2s ease-in-out infinite;
}
.preloader-logo-img {
  width: 64px;
  height: auto;
  display: block;
  filter: drop-shadow(0 0 16px rgba(242, 138, 30, 0.5));
}
.preloader-logo {
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--color-text);
  display: block;
}
.preloader-bar-bg {
  width: 100%;
  height: 4px;
  background: var(--color-surface);
  border-radius: 99px;
  overflow: hidden;
  margin-bottom: 10px;
  border: 1px solid var(--color-divider);
}
.preloader-bar {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, #f28a1e, #fca54d);
  transition: width 0.15s ease-out;
  box-shadow: 0 0 10px rgba(242, 138, 30, 0.8);
}
.preloader-counter {
  font-family: var(--font-heading);
  font-size: 14px;
  color: var(--color-accent-400);
  font-weight: 600;
  letter-spacing: .05em;
}

/* --- Fare Takip Eden Lava Glow Halesi --- */
.cursor-glow {
  position: fixed;
  top: -200px; left: -200px;
  width: 380px; height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(242, 138, 30, 0.08) 0%, rgba(20, 20, 22, 0) 70%);
  pointer-events: none;
  z-index: 999;
  transform: translate(-50%, -50%);
  transition: opacity .3s ease;
}
@media (max-width: 768px) {
  .cursor-glow { display: none; }
}

/* --- Sağ Alt Sabit Hızlı Teklif Butonu (FAB) --- */
.etna-fab {
  position: fixed;
  bottom: 28px; right: 28px;
  z-index: 90;
  background: color-mix(in srgb, var(--color-surface) 90%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--color-accent-500);
  color: var(--color-text);
  padding: 12px 20px;
  border-radius: 99px;
  font-weight: 600;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  transition: all .25s cubic-bezier(0.16, 1, 0.3, 1);
  animation: lavaPulse 3s infinite;
}
.etna-fab:hover {
  transform: translateY(-4px) scale(1.03);
  background: var(--color-accent-500);
  color: #141416;
  box-shadow: 0 12px 28px rgba(242,138,30,0.4);
}
.fab-icon { font-size: 16px; }

/* --- Sol Alt Canlı Sipariş Bildirimi (Toast) --- */
.etna-toast {
  position: fixed;
  bottom: 28px; left: 28px;
  z-index: 90;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-left: 3px solid var(--color-accent-500);
  border-radius: var(--radius-lg);
  padding: 12px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.6);
  opacity: 0;
  transform: translateY(40px) scale(0.95);
  transition: all .4s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  max-width: 320px;
}
.etna-toast.active {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.toast-icon { font-size: 20px; }
.toast-title { font-size: 13.5px; font-weight: 600; color: var(--color-text); }
.toast-sub { font-size: 12px; color: color-mix(in srgb, var(--color-text) 65%, transparent); margin-top: 2px; }

@media (max-width: 600px) {
  .etna-toast { display: none; }
  .etna-fab { bottom: 16px; right: 16px; padding: 10px 16px; font-size: 13px; }
}

/* --- Scroll Reveal --- */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

.nav{position:sticky;top:0;z-index:100;display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:14px max(24px, calc((100% - 1160px)/2 + 24px));
  border-bottom:1px solid var(--color-divider);
  background:color-mix(in srgb, #141416 88%, transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);}
.nav-brand{display:flex;align-items:center;gap:10px;font-family:var(--font-heading);font-weight:600;letter-spacing:.04em;text-transform:uppercase;}
.nav-brand img{height:36px;width:auto;display:block;}
.nav-links{display:flex;align-items:center;gap:20px;}
.nav-links a{opacity:.85;font-size:14px;transition:opacity .15s ease, color .15s ease;}
.nav-links a:hover{opacity:1;color:var(--color-accent-400);}
.nav-links a.active{color:var(--color-accent-400);opacity:1;}
.nav-toggle{display:none;background:transparent;border:none;cursor:pointer;padding:6px;flex-direction:column;gap:5px;z-index:101;}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--color-text);transition:transform .2s ease, opacity .2s ease;}
.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle.open span:nth-child(2){opacity:0;}
.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

@media (max-width: 768px) {
  .nav-toggle{display:flex;}
  .nav-links{position:fixed;top:65px;left:0;right:0;background:var(--color-surface);border-bottom:1px solid var(--color-divider);
    flex-direction:column;padding:24px;gap:16px;display:none;box-shadow:var(--shadow-md);}
  .nav-links.active{display:flex;}
  .nav-links a{font-size:16px;width:100%;text-align:center;}
  .nav-cta{width:100%;text-align:center;margin-top:8px;}
}

.btn-primary{
  background:var(--color-accent-500);color:#141416!important;padding:10px 20px;border-radius:var(--radius-md);
  font-weight:600;display:inline-block;transition:all .2s ease;animation: lavaPulse 3s infinite;
}
.btn-primary:hover{background:var(--color-accent-400);transform:translateY(-2px);box-shadow:0 6px 20px rgba(242,138,30,0.4);}
.btn-secondary{
  border:1px solid var(--color-divider);padding:10px 20px;border-radius:var(--radius-md);font-weight:600;
  display:inline-block;transition:all .2s ease;background:color-mix(in srgb, var(--color-surface) 60%, transparent);
}
.btn-secondary:hover{border-color:var(--color-accent-400);color:var(--color-accent-400);transform:translateY(-2px);}

main, .wrap{max-width:1160px;margin:0 auto;padding:0 24px;}
section{padding:64px 0;background:var(--color-bg);}
h1,h2,h3{font-family:var(--font-heading);font-weight:700;letter-spacing:.01em;margin:0 0 12px;}
h1{font-size:clamp(32px,5vw,52px);text-transform:uppercase;}
h2{font-size:clamp(24px,3.4vw,34px);text-transform:uppercase;}
.lead{color:color-mix(in srgb, var(--color-text) 70%, transparent);margin:0 0 40px;max-width:60ch;}
.eyebrow{font-family:var(--font-heading);color:var(--color-accent-400);letter-spacing:.12em;text-transform:uppercase;font-size:13px;margin:0 0 8px;}
.grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(220px,1fr));gap:20px;}
.card{background:var(--color-surface);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;border:1px solid var(--color-divider);}
.card:hover{transform:translateY(-6px);box-shadow:0 12px 28px rgba(0,0,0,0.6);border-color:color-mix(in srgb, var(--color-accent-400) 40%, transparent);}
.card .thumb{aspect-ratio:1/1;width:100%;object-fit:cover;display:block;background:#101012;}
.card .thumb.product-thumb{
  aspect-ratio: 280 / 186;
  width: 100%;
  max-width: 280px;
  height: auto;
  object-fit: cover;
  background: #101012;
  padding: 0;
  margin: 0 auto;
  display: block;
}
.card .thumb-placeholder{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;color:color-mix(in srgb, var(--color-text) 40%, transparent);font-size:13px;background:#101012;}
.card .info{padding:14px 16px 16px;}
.card .title{font-size:14.5px;font-weight:500;line-height:1.35;margin:0 0 8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.card .price{font-family:var(--font-heading);font-weight:700;font-size:19px;color:var(--color-accent-400);}
.empty{border:1px dashed var(--color-divider);border-radius:var(--radius-lg);padding:48px 24px;text-align:center;color:color-mix(in srgb, var(--color-text) 65%, transparent);}
footer{border-top:1px solid var(--color-divider);background:var(--color-bg);}
footer .inner{max-width:1160px;margin:0 auto;padding:32px 24px;display:flex;flex-wrap:wrap;align-items:center;gap:12px;font-size:13px;color:color-mix(in srgb, var(--color-text) 60%, transparent);}
footer .inner a{margin-left:auto;color:var(--color-accent-400);}

.hero{padding:88px 0 64px;text-align:left;position:relative;overflow:hidden;}
.hero .cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px;}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px;align-items:center;}
@media (max-width:860px){.hero-grid{grid-template-columns:1fr;}.hero-visual{order:-1;max-width:200px;margin:0 auto 8px;}}
.hero-visual img{width:100%;display:block;margin-left:auto;animation: floatSlow 4s ease-in-out infinite;}
.hero-watermark{position:absolute;right:-8%;bottom:-10%;width:min(60vw,760px);filter:brightness(0) invert(1);opacity:0.06;pointer-events:none;z-index:0;}

.steps{display:grid;grid-template-columns:repeat(auto-fit, minmax(220px,1fr));gap:24px;}
.step{background:color-mix(in srgb, var(--color-surface) 50%, transparent);padding:20px;border-radius:var(--radius-lg);border:1px solid var(--color-divider);transition:transform .2s ease, border-color .2s ease;}
.step:hover{transform:translateY(-4px);border-color:var(--color-accent-500);}
.step .num{font-family:var(--font-heading);color:var(--color-accent-400);font-size:28px;font-weight:700;}
.services{display:grid;grid-template-columns:repeat(auto-fit, minmax(260px,1fr));gap:24px;}
.service-card{background:var(--color-surface);border-radius:var(--radius-lg);padding:24px;box-shadow:var(--shadow-sm);position:relative;border:1px solid var(--color-divider);transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;}
.service-card:hover{transform:translateY(-5px);box-shadow:0 10px 24px rgba(242,138,30,0.12);border-color:var(--color-accent-500);}
.service-card .badge{position:absolute;top:16px;right:16px;font-size:11px;background:var(--color-accent-500);color:#141416;padding:2px 8px;border-radius:99px;font-weight:700;}

.calc{background:var(--color-surface);border-radius:var(--radius-lg);padding:32px;box-shadow:var(--shadow-sm);display:grid;grid-template-columns:1fr 1fr;gap:32px;border:1px solid var(--color-divider);}
@media (max-width:720px){.calc{grid-template-columns:1fr;}}
.field{margin-bottom:18px;}
.field label{display:block;margin-bottom:6px;font-size:14px;color:color-mix(in srgb, var(--color-text) 80%, transparent);}
.field select, .field input[type=number]{width:100%;background:var(--color-bg);border:1px solid var(--color-divider);color:var(--color-text);padding:10px 12px;border-radius:var(--radius-md);font-family:var(--font-body);font-size:15px;transition:border-color .15s ease;}
.field select:focus, .field input:focus{outline:none;border-color:var(--color-accent-400);}
.calc-result{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:6px;border-left:1px solid var(--color-divider);padding-left:32px;}
@media (max-width:720px){.calc-result{border-left:none;border-top:1px solid var(--color-divider);padding-left:0;padding-top:24px;}}
.calc-result .price-big{font-family:var(--font-heading);font-weight:700;font-size:48px;color:var(--color-accent-400);line-height:1;}
.calc-result .note{font-size:13px;color:color-mix(in srgb, var(--color-text) 60%, transparent);}

.about-col{max-width:70ch;margin:0 auto;}
.about{display:grid;grid-template-columns:1fr;gap:20px;}
.about p{color:color-mix(in srgb, var(--color-text) 82%, transparent);line-height:1.7;font-size:16.5px;}
.about-lead{font-size:19px!important;color:var(--color-text)!important;}
.pull-quote{border-left:3px solid var(--color-accent-500);margin:36px 0;padding:4px 0 4px 24px;}
.pull-quote p{font-family:var(--font-heading);font-size:clamp(22px,3vw,30px);font-weight:600;color:var(--color-text)!important;line-height:1.3;font-style:normal;}
.about-cta{margin:48px auto 0;padding:32px;background:var(--color-surface);border-radius:var(--radius-lg);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;max-width:70ch;border:1px solid var(--color-divider);}
.about-cta p{margin:0;color:var(--color-text);font-weight:500;}

.contact{display:grid;grid-template-columns:1fr 1fr;gap:40px;}
@media (max-width:800px){.contact{grid-template-columns:1fr;}}
.contact form .field input[type=text], .contact form .field input[type=email], .contact form .field textarea{
  width:100%;background:var(--color-bg);border:1px solid var(--color-divider);color:var(--color-text);
  padding:10px 12px;border-radius:var(--radius-md);font-family:var(--font-body);font-size:15px;transition:border-color .15s ease;}
.contact form .field input:focus, .contact form .field textarea:focus{outline:none;border-color:var(--color-accent-400);}
.contact form .field textarea{min-height:100px;resize:vertical;}
.hp-field{position:absolute;left:-9999px;top:-9999px;}
.form-msg{padding:14px 16px;border-radius:var(--radius-md);margin-bottom:20px;font-size:14px;}
.form-msg.ok{background:color-mix(in srgb, #4caf50 20%, var(--color-surface));border:1px solid #4caf50;color:#a5d6a7;}
.form-msg.err{background:color-mix(in srgb, #e53935 20%, var(--color-surface));border:1px solid #e53935;color:#ef9a9a;}
.contact-info{display:flex;flex-direction:column;gap:10px;color:color-mix(in srgb, var(--color-text) 80%, transparent);}
.contact-info a{color:var(--color-accent-400);}

/* --- Drag & Drop Zone --- */
.dropzone {
  border: 2px dashed var(--color-divider);
  border-radius: var(--radius-lg);
  padding: 24px;
  text-align: center;
  background: color-mix(in srgb, var(--color-surface) 60%, transparent);
  cursor: pointer;
  transition: all .2s ease;
  position: relative;
}
.dropzone:hover, .dropzone.dragover {
  border-color: var(--color-accent-400);
  background: color-mix(in srgb, var(--color-accent-500) 10%, var(--color-surface));
  box-shadow: 0 0 16px rgba(242, 138, 30, 0.15);
}
.dropzone input[type="file"] {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer;
}
.dropzone-icon {
  font-size: 32px;
  margin-bottom: 8px;
  display: block;
}
.dropzone-title {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 4px;
}
.dropzone-sub {
  font-size: 12px;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.dropzone-compact {
  padding: 16px;
  text-align: left;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  max-width: 460px;
}
.dropzone-compact .dropzone-icon { font-size: 22px; margin: 0; }
.dropzone-compact .dropzone-title { font-size: 13.5px; margin: 0; }
.dropzone-compact .dropzone-sub { flex-basis: 100%; margin-left: 32px; margin-top: -2px; }
.dropzone-compact #home-dropzone-cta { flex-basis: 100%; margin-left: 32px; width: fit-content; }

/* --- Güven Rozetleri Şeridi --- */
.trust-strip {
  border-bottom: 1px solid var(--color-divider);
  background: var(--color-surface);
}
.trust-strip-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 36px;
  padding: 18px 24px;
  justify-content: center;
}
.trust-item {
  font-size: 13.5px;
  font-weight: 500;
  color: color-mix(in srgb, var(--color-text) 85%, transparent);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.trust-icon { font-size: 16px; }

/* --- İstatistik Sayaçları --- */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 24px;
  text-align: center;
}
.stat-card {
  padding: 24px 12px;
}
.stat-number {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(36px, 5vw, 52px);
  color: var(--color-accent-400);
  line-height: 1;
}
.stat-label {
  display: block;
  margin-top: 10px;
  font-size: 13.5px;
  color: color-mix(in srgb, var(--color-text) 65%, transparent);
}

/* --- Müşteri Yorumları --- */
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}
.testimonial-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.testimonial-stars {
  color: var(--color-accent-400);
  font-size: 16px;
  letter-spacing: 2px;
}
.testimonial-text {
  margin: 0;
  color: color-mix(in srgb, var(--color-text) 85%, transparent);
  line-height: 1.6;
  font-size: 14.5px;
  flex-grow: 1;
}
.testimonial-author {
  display: flex;
  align-items: center;
  gap: 10px;
}
.testimonial-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  object-fit: cover;
}
.testimonial-name { font-weight: 600; font-size: 13.5px; }
.testimonial-city { font-size: 12px; color: color-mix(in srgb, var(--color-text) 55%, transparent); }

/* --- Lightbox (Galeri / Ürün görselleri) --- */
body.lightbox-open { overflow: hidden; }
.etna-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 11, 0.92);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  z-index: 999999;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease;
  padding: 24px;
}
.etna-lightbox.active {
  opacity: 1;
  visibility: visible;
}
.etna-lightbox .lightbox-img {
  max-width: min(90vw, 1000px);
  max-height: 78vh;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}
.etna-lightbox .lightbox-caption {
  color: var(--color-text);
  font-size: 14px;
  text-align: center;
}
.etna-lightbox .lightbox-close {
  position: absolute;
  top: 20px; right: 24px;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  color: var(--color-text);
  width: 40px; height: 40px;
  border-radius: 50%;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.etna-lightbox .lightbox-close:hover {
  border-color: var(--color-accent-400);
  color: var(--color-accent-400);
}
.lightbox-trigger { cursor: zoom-in; }

/* --- 3D Model Canvas Önizleme & Filament Color Swatches --- */
#stl-preview-wrapper{
  display:none;margin-top:16px;background:var(--color-surface);border:1px solid var(--color-divider);
  border-radius:var(--radius-lg);padding:16px;text-align:center;box-shadow:var(--shadow-md);
}
#stl-canvas-container{width:100%;height:260px;border-radius:var(--radius-md);overflow:hidden;background:#101012;cursor:grab;position:relative;}
#stl-canvas-container:active{cursor:grabbing;}

.stl-controls-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--color-divider);
}

.dimensions-badge {
  font-family: var(--font-heading);
  font-size: 13px;
  background: color-mix(in srgb, var(--color-accent-500) 15%, var(--color-bg));
  border: 1px solid var(--color-accent-500);
  color: var(--color-accent-400);
  padding: 4px 10px;
  border-radius: 99px;
  font-weight: 600;
}

.color-swatches {
  display: flex;
  align-items: center;
  gap: 8px;
}
.color-swatches span {
  font-size: 12px;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  margin-right: 4px;
}
.color-swatch {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease;
}
.color-swatch:hover, .color-swatch.active {
  transform: scale(1.25);
  border-color: #ffffff;
}

/* --- Malzeme Karşılaştırma Paneli Stilleri --- */
.mat-compare-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-top: 24px;
}
.mat-card {
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  padding: 20px;
}
.mat-card h4 {
  font-family: var(--font-heading);
  font-size: 20px;
  margin: 0 0 14px;
  color: var(--color-accent-400);
}
.mat-stat {
  margin-bottom: 12px;
}
.mat-stat-label {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
  margin-bottom: 4px;
}
.mat-bar-bg {
  width: 100%;
  height: 6px;
  background: var(--color-bg);
  border-radius: 99px;
  overflow: hidden;
}
.mat-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #f28a1e, #fca54d);
  border-radius: 99px;
}

/* --- Ürün Kategorileri Izgarası --- */
.kategori-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 56px;
}
.kategori-card {
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  padding: 28px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.kategori-card:hover {
  transform: translateY(-4px);
  border-color: var(--color-accent-500);
  box-shadow: 0 6px 24px rgba(242, 138, 30, .12);
}
.kategori-card.aktif {
  border-color: var(--color-accent-500);
}
.kategori-icon {
  color: var(--color-accent-500);
  filter: drop-shadow(0 0 10px rgba(242, 138, 30, .55));
  margin-bottom: 6px;
  align-self: center;
  padding: 18px 0;
}
.kategori-baslik {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 17px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-text);
}
.kategori-aciklama {
  font-size: 13.5px;
  line-height: 1.5;
  color: color-mix(in srgb, var(--color-text) 65%, transparent);
  flex-grow: 1;
}
.kategori-link {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--color-accent-400);
}
.kategori-card:hover .kategori-link {
  color: var(--color-accent-500);
}

/* Ürün kartında küçük kategori etiketi */
.kategori-etiket {
  display: inline-block;
  font-size: 11px;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
  border: 1px solid var(--color-divider);
  border-radius: 99px;
  padding: 2px 10px;
  margin-bottom: 8px;
}