/* ESA Klima Ürün Yönetimi — urunler.css
   Hedef: claude.ai/design ESA Klima referansına yüksek görsel benzerlik.
   Kategori rengi (--e-accent*) ve tasarım tokenları (--e-card-radius / --e-btn-radius
   / --e-shadow / --e-cols) panelden yönetilir; burada yalnızca varsayılanlar ve
   bunları kullanan kurallar bulunur. */

.esaurun-app {
	/* Marka sabitleri */
	--e-bg:#F6F5F1; --e-card:#fff; --e-ink:#0E1726; --e-ink2:#3A4658; --e-ink3:#7A8496;
	--e-line:#ECEAE2; --e-navy:#0A1B2E;
	/* Kategori accent — inline style ile override edilir (varsayılan: soğutma/mavi) */
	--e-accent:#2F6DB5; --e-accent-soft:#E7F0FA; --e-accent-ink:#1F4E80;
	/* Panelden gelen tasarım tokenları (varsayılan) */
	--e-card-radius:20px; --e-btn-radius:999px;
	--e-shadow:0 1px 2px rgba(10,27,46,.04), 0 8px 24px -10px rgba(10,27,46,.10);
	--e-cols:3; --e-cols-m:1;
	color:var(--e-ink);
	font-feature-settings:"ss01";
}

.esaurun-layout { display:grid; grid-template-columns:288px 1fr; gap:30px; align-items:start; }

/* ---------------- Sidebar ---------------- */
.esaurun-sidebar { position:sticky; top:20px; display:flex; flex-direction:column; gap:16px; }
.esaurun-cat-group { background:var(--e-card); border:1px solid var(--e-line); border-radius:var(--e-card-radius); padding:20px; box-shadow:var(--e-shadow); }
.esaurun-cat-head { font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--e-ink3); margin:0 0 12px; display:flex; align-items:center; gap:8px; }
.esaurun-cat-head:before { content:""; width:7px; height:7px; border-radius:50%; background:var(--e-accent); }
.esaurun-cat-list { list-style:none; margin:0; padding:0; }
.esaurun-cat-item a { display:flex; justify-content:space-between; align-items:center; gap:8px; text-decoration:none; color:var(--e-ink2); font-weight:600; font-size:14px; padding:10px 12px; border-radius:12px; transition:background .15s ease,color .15s ease; }
.esaurun-cat-item.is-child a { padding-left:22px; font-weight:500; font-size:13px; color:var(--e-ink3); }
.esaurun-cat-item a:hover { background:var(--e-bg); color:var(--e-ink); }
.esaurun-cat-item.is-active > a { background:var(--e-accent-soft); color:var(--e-accent-ink); }
.esaurun-cat-count { font-size:11px; color:var(--e-ink3); background:var(--e-bg); border-radius:999px; padding:2px 9px; min-width:22px; text-align:center; }
.esaurun-cat-item.is-active .esaurun-cat-count { background:#fff; color:var(--e-accent-ink); }
.esaurun-cta { background:var(--e-navy); color:#fff; border-radius:var(--e-card-radius); padding:22px; }
.esaurun-cta-title { font-weight:700; font-size:11px; letter-spacing:.12em; text-transform:uppercase; margin:0 0 10px; color:rgba(255,255,255,.7); }
.esaurun-cta-text { font-size:13px; color:rgba(255,255,255,.82); margin:0 0 16px; line-height:1.5; }
.esaurun-cta-btn { display:inline-block; background:#fff; color:var(--e-navy); font-weight:600; font-size:13px; text-decoration:none; padding:10px 18px; border-radius:var(--e-btn-radius); transition:transform .15s ease; }
.esaurun-cta-btn:hover { transform:translateY(-2px); }

/* ---------------- Üst şerit ---------------- */
.esaurun-strip { background:var(--e-accent-soft); border-radius:var(--e-card-radius); padding:26px 30px; display:flex; flex-wrap:wrap; gap:24px; align-items:center; justify-content:space-between; margin-bottom:22px; }
.esaurun-strip-head { display:flex; flex-direction:column; gap:8px; max-width:60%; }
.esaurun-strip-title { font-size:30px; font-weight:700; letter-spacing:-.02em; color:var(--e-accent-ink); line-height:1; }
.esaurun-strip-sub { font-size:14px; color:var(--e-ink2); line-height:1.5; }
.esaurun-strip-stats { display:flex; gap:28px; }
.esaurun-stat { text-align:center; }
.esaurun-stat b { display:block; font-size:22px; font-weight:700; color:var(--e-ink); }
.esaurun-stat span { font-size:10px; text-transform:uppercase; letter-spacing:.1em; color:var(--e-ink3); }

/* ---------------- Filtre barı ---------------- */
.esaurun-filterbar { background:var(--e-card); border:1px solid var(--e-line); border-radius:var(--e-card-radius); padding:22px 24px; margin-bottom:24px; box-shadow:var(--e-shadow); }
.esaurun-filterbar-top { display:flex; justify-content:space-between; align-items:center; padding-bottom:14px; margin-bottom:6px; border-bottom:1px solid var(--e-line); }
.esaurun-filterbar-title { font-weight:700; font-size:16px; }
.esaurun-filterbar-count { font-size:13px; color:var(--e-ink3); }
.esaurun-fgroup { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:10px 0; }
.esaurun-fgroup + .esaurun-fgroup { border-top:1px solid rgba(236,234,226,.6); }
.esaurun-fgroup-label { width:128px; flex:0 0 128px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:var(--e-ink3); }
.esaurun-chip { cursor:pointer; border:1px solid var(--e-line); background:var(--e-bg); border-radius:999px; padding:8px 16px; font-size:13px; font-weight:600; color:var(--e-ink2); transition:all .15s ease; line-height:1; }
.esaurun-chip:hover { border-color:var(--e-accent); color:var(--e-accent-ink); }
.esaurun-chip.is-on { background:var(--e-navy); border-color:var(--e-navy); color:#fff; }
.esaurun-chip-all.is-on { background:var(--e-navy); }
/* Chip içi bağlamsal sayı rozeti */
.esaurun-chip-count { display:inline-block; margin-left:7px; font-size:11px; font-weight:700; opacity:.55; }
.esaurun-chip.is-on .esaurun-chip-count { opacity:.8; }
.esaurun-reset { margin-top:10px; cursor:pointer; border:0; background:transparent; color:var(--e-accent-ink); font-weight:600; font-size:13px; text-decoration:underline; padding:0; }

/* ---------------- Grid + kart ---------------- */
.esaurun-grid { display:grid; grid-template-columns:repeat(var(--e-cols),1fr); gap:22px; transition:opacity .2s ease; }
.esaurun-grid.is-loading { opacity:.45; pointer-events:none; }
.esaurun-card { background:var(--e-card); border:1px solid var(--e-line); border-radius:var(--e-card-radius); overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--e-shadow); transition:transform .22s ease, box-shadow .22s ease; }
.esaurun-card:hover { transform:translateY(-4px); box-shadow:0 4px 10px rgba(10,27,46,.08), 0 32px 64px -22px rgba(10,27,46,.30); }
.esaurun-card-media { position:relative; display:block; aspect-ratio:4/3; background-color:var(--e-accent-soft);
	background-image:repeating-linear-gradient(45deg, rgba(0,0,0,.022) 0, rgba(0,0,0,.022) 1px, transparent 1px, transparent 11px);
	display:flex; align-items:center; justify-content:center; }
.esaurun-card-media img { width:100%; height:100%; object-fit:cover; }
.esaurun-card-ph { color:var(--e-accent-ink); opacity:.45; font-size:12px; padding:12px; text-align:center; }
.esaurun-card-body { padding:18px 18px 20px; display:flex; flex-direction:column; gap:7px; flex:1; }
.esaurun-card-badge { align-self:flex-start; font-size:11px; font-weight:700; padding:4px 11px; border-radius:999px; background:var(--e-accent-soft); color:var(--e-accent-ink); }
.esaurun-card-badge[data-badge="Popüler"] { background:#FDEFD6; color:#8a5a12; }
.esaurun-card-badge[data-badge="Premium"] { background:var(--e-navy); color:#fff; }
.esaurun-card-badge[data-badge="Eko"] { background:#E4F6E7; color:#1d6b34; }
.esaurun-card-brand { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--e-accent-ink); }
.esaurun-card-title { font-size:17px; margin:0; line-height:1.25; letter-spacing:-.01em; }
.esaurun-card-title a { color:var(--e-ink); text-decoration:none; }
.esaurun-card-spec { font-size:13px; color:var(--e-ink3); margin:0; line-height:1.45; }
.esaurun-card-chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:2px; }
.esaurun-card-chip { font-size:11px; font-weight:600; padding:4px 10px; border-radius:999px; background:var(--e-accent-soft); color:var(--e-accent-ink); }
.esaurun-card-actions { margin-top:auto; display:flex; gap:8px; padding-top:12px; }
.esaurun-card-actions a { flex:1; text-align:center; text-decoration:none; font-size:13px; font-weight:600; height:42px; display:flex; align-items:center; justify-content:center; gap:4px; border-radius:var(--e-btn-radius); transition:all .16s ease; }
.esaurun-btn-detail { background:var(--e-card); border:1px solid var(--e-line); color:var(--e-ink); }
.esaurun-btn-detail:hover { border-color:var(--e-navy); }
.esaurun-btn-teklif { background:var(--e-navy); color:#fff; }
.esaurun-btn-teklif:hover { transform:translateY(-2px); box-shadow:0 10px 24px -10px rgba(10,27,46,.5); }

/* ---- Fiyat / indirim ---- */
/* Görsel köşesindeki indirim rozeti */
.esaurun-card-off { position:absolute; top:10px; left:10px; z-index:2; font-size:12px; font-weight:800; letter-spacing:.02em;
	background:#e0453a; color:#fff; padding:5px 10px; border-radius:999px; box-shadow:0 6px 16px -6px rgba(224,69,58,.7); }
/* Kart aksiyon satırında fiyat bloğu (Teklif yerine) */
.esaurun-card-actions .esaurun-price--card { flex:1; display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; height:42px; }
.esaurun-price-now { font-size:17px; font-weight:800; letter-spacing:-.01em; color:var(--e-ink); }
.esaurun-price-old { font-size:13px; font-weight:600; color:var(--e-ink3); text-decoration:line-through; }
.esaurun-price-off { font-size:11px; font-weight:800; color:#fff; background:#e0453a; border-radius:999px; padding:3px 8px; }
/* Detay sayfası fiyat bloğu (ürün adının altında) */
.esaurun-price--single { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:0 0 16px; }
.esaurun-price--single .esaurun-price-now { font-size:26px; }
.esaurun-price--single .esaurun-price-old { font-size:16px; }
.esaurun-empty { grid-column:1/-1; text-align:center; padding:50px; color:var(--e-ink3); }
.esaurun-more-wrap { text-align:center; margin-top:28px; }
.esaurun-more { cursor:pointer; border:1px solid var(--e-line); background:var(--e-card); color:var(--e-ink); font-weight:600; font-size:14px; padding:13px 30px; border-radius:var(--e-btn-radius); transition:all .15s ease; }
.esaurun-more:hover { border-color:var(--e-navy); transform:translateY(-2px); }

/* ---------------- Detay sayfası ---------------- */
.esaurun-single {
	max-width:1200px; margin:0 auto; padding:30px 20px 70px;
	--e-bg:#F6F5F1; --e-card:#fff; --e-ink:#0E1726; --e-ink2:#3A4658; --e-ink3:#7A8496; --e-line:#ECEAE2; --e-navy:#0A1B2E;
	--e-accent:#2F6DB5; --e-accent-soft:#E7F0FA; --e-accent-ink:#1F4E80;
	--e-card-radius:24px; --e-btn-radius:999px;
	--e-shadow:0 2px 6px rgba(10,27,46,.05), 0 24px 60px -24px rgba(10,27,46,.18);
	color:var(--e-ink);
}
.esaurun-bc { font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--e-ink3); margin-bottom:20px; }
.esaurun-bc a { color:var(--e-ink3); text-decoration:none; }
.esaurun-bc a:hover { color:var(--e-ink); }
.esaurun-single-head h1 { font-size:46px; line-height:1.04; letter-spacing:-.025em; margin:0 0 10px; font-weight:700; }
.esaurun-single-spec { font-size:16px; color:var(--e-ink2); margin:0 0 14px; }
.esaurun-back { font-size:13px; font-weight:600; color:var(--e-ink2); text-decoration:none; }
.esaurun-back:hover { color:var(--e-ink); }

.esaurun-single-card { background:var(--e-card); border:1px solid var(--e-line); border-radius:var(--e-card-radius); box-shadow:var(--e-shadow); display:grid; grid-template-columns:1fr 1fr; gap:0; overflow:hidden; margin-top:18px; }
.esaurun-gallery-wrap { padding:22px; }
.esaurun-gallery-main { position:relative; margin:0; border-radius:18px; overflow:hidden; background-color:var(--e-accent-soft); cursor:zoom-in;
	background-image:repeating-linear-gradient(45deg, rgba(0,0,0,.022) 0, rgba(0,0,0,.022) 1px, transparent 1px, transparent 11px);
	aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; }
.esaurun-gallery-main img { width:100%; height:100%; object-fit:cover; }
.esaurun-gallery-main .esaurun-card-ph { color:var(--e-accent-ink); opacity:.45; }
/* Zoom (büyüteç) işareti */
.esaurun-gallery-zoom { position:absolute; top:12px; right:12px; display:inline-flex; align-items:center; justify-content:center;
	width:38px; height:38px; border-radius:50%; background:rgba(10,27,46,.55); color:#fff; backdrop-filter:blur(2px);
	pointer-events:none; transition:background .16s ease, transform .16s ease; }
.esaurun-gallery-main:hover .esaurun-gallery-zoom { background:rgba(10,27,46,.8); transform:scale(1.06); }
/* Ana görsel ok butonları */
.esaurun-gallery-nav { position:absolute; top:50%; transform:translateY(-50%); display:inline-flex;flex-direction: column;
    align-items: center;
    justify-content: center;	width:44px; height:44px; border:0; border-radius:50%; background:rgba(255,255,255,.88); color:var(--e-navy); cursor:pointer;
	box-shadow:0 4px 14px -4px rgba(10,27,46,.4); transition:background .16s ease, transform .16s ease; }
.esaurun-gallery-nav:hover { background:#fff; }
.esaurun-gallery-prev { left:12px; }
.esaurun-gallery-next { right:12px; }
.esaurun-gallery-thumbs { display:flex; gap:10px; margin-top:12px; flex-wrap:wrap; }
.esaurun-gallery-thumb { width:70px; height:70px; border-radius:12px; overflow:hidden; border:2px solid transparent; cursor:pointer; padding:0; background:none; }
.esaurun-gallery-thumb.is-active { border-color:var(--e-accent); }
.esaurun-gallery-thumb img { width:100%; height:100%; object-fit:cover; }
/* Lightbox (tam ekran galeri) */
.esaurun-lightbox { position:fixed; inset:0; z-index:99999; display:none; align-items:center; justify-content:center;
	background:rgba(8,15,28,.92); padding:40px; }
.esaurun-lightbox.is-open { display:flex; }
.esaurun-lightbox-img { max-width:90vw; max-height:90vh; object-fit:contain; border-radius:8px; box-shadow:0 20px 60px -20px rgba(0,0,0,.6); }
.esaurun-lightbox-close { position:absolute; top:20px; right:24px; width:44px; height:44px; border:0; border-radius:50%;
	background:rgba(255,255,255,.12); color:#fff; font-size:28px; line-height:1; cursor:pointer; transition:background .16s ease; }
.esaurun-lightbox-close:hover { background:rgba(255,255,255,.25); }
.esaurun-lightbox-nav { position:absolute; top:50%; transform:translateY(-50%); width:52px; height:52px; border:0; border-radius:50%;
	background:rgba(255,255,255,.12); color:#fff; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition:background .16s ease; }
.esaurun-lightbox-nav:hover { background:rgba(255,255,255,.25); }
.esaurun-lightbox-prev { left:24px; }
.esaurun-lightbox-next { right:24px; }
.esaurun-lightbox-count { position:absolute; bottom:24px; left:50%; transform:translateX(-50%); color:rgba(255,255,255,.85);
	font-size:14px; font-weight:600; letter-spacing:.04em; }
/* Mobil açılır filtre toggle işareti */
.esaurun-filterbar-toggle { display:none; color:var(--e-ink3); transition:transform .2s ease; }

.esaurun-single-info { padding:36px 36px 32px; display:flex; flex-direction:column; }
.esaurun-single-brand { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:var(--e-accent-ink); margin-bottom:6px; }
.esaurun-single-name { font-size:26px; font-weight:700; letter-spacing:-.02em; margin:0 0 12px; }
.esaurun-single-lead { font-size:14px; color:var(--e-ink2); line-height:1.6; margin:0 0 16px; }
.esaurun-chips-row { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; }
.esaurun-chips-row span { font-size:12px; font-weight:600; background:var(--e-accent-soft); color:var(--e-accent-ink); border-radius:999px; padding:6px 13px; }
.esaurun-spec-table { width:100%; border-collapse:collapse; margin-bottom:22px; }
.esaurun-spec-table th, .esaurun-spec-table td { text-align:left; padding:13px 2px; font-size:14px; border-bottom:1px solid var(--e-line); }
.esaurun-spec-table th { width:42%; color:var(--e-ink3); font-weight:500; }
.esaurun-spec-table td { color:var(--e-ink); font-weight:500; }
.esaurun-spec-table tr:last-child th, .esaurun-spec-table tr:last-child td { border-bottom:0; }
.esaurun-single-cta { display:flex; flex-wrap:wrap; gap:10px; margin-top:auto; }
.esaurun-single-cta a { text-decoration:none; font-weight:600; font-size:14px; height:48px; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:0 22px; border-radius:var(--e-btn-radius); transition:all .16s ease; }
.esaurun-single-cta .e-primary { background:var(--e-navy); color:#fff; }
.esaurun-single-cta .e-primary:hover { transform:translateY(-2px); box-shadow:0 12px 28px -10px rgba(10,27,46,.5); }
.esaurun-single-cta .e-ghost { background:var(--e-card); border:1px solid var(--e-line); color:var(--e-ink); }
.esaurun-single-cta .e-ghost:hover { border-color:var(--e-navy); }
.esaurun-single-note { font-size:12px; color:var(--e-ink3); margin:14px 0 0; }

.esaurun-section { margin:44px 0 0; }
.esaurun-section h2 { font-size:22px; margin:0 0 16px; letter-spacing:-.01em; }
.esaurun-desc { font-size:15px; line-height:1.7; color:var(--e-ink2); }
.esaurun-docs { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.esaurun-docs a { display:inline-flex; align-items:center; gap:8px; text-decoration:none; color:var(--e-ink); font-weight:600; font-size:14px; border:1px solid var(--e-line); border-radius:12px; padding:11px 15px; background:var(--e-card); }
.esaurun-docs a:hover { border-color:var(--e-accent); }
.esaurun-pdf-btn { display:inline-flex; align-items:center; gap:8px; background:var(--e-accent-ink); color:#fff; text-decoration:none; font-weight:600; font-size:14px; padding:13px 22px; border-radius:var(--e-btn-radius); }

/* Benzer ürünler */
.esaurun-related { margin-top:56px; }
.esaurun-related-head { display:flex; justify-content:space-between; align-items:flex-end; gap:16px; margin-bottom:22px; }
.esaurun-eyebrow { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.16em; color:var(--e-ink3); margin:0 0 6px; }
.esaurun-related-head h2 { font-size:30px; line-height:1.1; letter-spacing:-.02em; margin:0; }
.esaurun-related-all { white-space:nowrap; font-weight:600; font-size:13px; text-decoration:none; color:var(--e-ink); border:1px solid var(--e-line); border-radius:var(--e-btn-radius); padding:10px 18px; transition:all .15s ease; }
.esaurun-related-all:hover { border-color:var(--e-navy); }
.esaurun-related-grid { display:grid; grid-template-columns:repeat(var(--e-cols),1fr); gap:22px; }

/* ---------------- Responsive ---------------- */
@media (max-width:1024px) {
	.esaurun-layout { grid-template-columns:1fr; }
	.esaurun-sidebar { position:static; flex-direction:row; flex-wrap:wrap; }
	.esaurun-cat-group, .esaurun-cta { flex:1 1 260px; }
	.esaurun-grid, .esaurun-related-grid { grid-template-columns:repeat(2,1fr); }
	.esaurun-single-card { grid-template-columns:1fr; }
	.esaurun-single-head h1 { font-size:34px; }
}
@media (max-width:600px) {
	.esaurun-grid, .esaurun-related-grid { grid-template-columns:repeat(var(--e-cols-m),1fr); }
	.esaurun-fgroup-label { width:100%; flex-basis:100%; }
	.esaurun-strip-head { max-width:100%; }
	.esaurun-strip { padding:20px; }
	.esaurun-strip-title { font-size:24px; }
	.esaurun-single-head h1 { font-size:28px; }
	.esaurun-single-info { padding:24px; }
	.esaurun-related-head h2 { font-size:22px; }
	/* Galeri: oklar ve thumb'lar küçük ekranda daralır */
	.esaurun-gallery-nav { width:38px; height:38px; }
	.esaurun-gallery-prev { left:8px; }
	.esaurun-gallery-next { right:8px; }
	.esaurun-gallery-thumb { width:58px; height:58px; }
	.esaurun-gallery-zoom { width:34px; height:34px; top:8px; right:8px; }
	/* Lightbox kontrolleri mobilde */
	.esaurun-lightbox { padding:16px; }
	.esaurun-lightbox-img { max-width:94vw; max-height:80vh; }
	.esaurun-lightbox-nav { width:44px; height:44px; }
	.esaurun-lightbox-prev { left:10px; }
	.esaurun-lightbox-next { right:10px; }
	/* Mobil açılır filtre */
	.esaurun-filterbar--collapsible .esaurun-filterbar-top { cursor:pointer; user-select:none; margin-bottom:0; border-bottom:0; padding-bottom:0; }
	.esaurun-filterbar--collapsible .esaurun-filterbar-toggle { display:inline-flex; }
	.esaurun-filterbar--collapsible.is-open .esaurun-filterbar-top { margin-bottom:6px; padding-bottom:14px; border-bottom:1px solid var(--e-line); }
	.esaurun-filterbar--collapsible.is-open .esaurun-filterbar-toggle { transform:rotate(180deg); }
	.esaurun-filterbar--collapsible .esaurun-fgroups,
	.esaurun-filterbar--collapsible .esaurun-fgroup[data-key="sirala"],
	.esaurun-filterbar--collapsible .esaurun-reset { display:none; }
	.esaurun-filterbar--collapsible.is-open .esaurun-fgroups,
	.esaurun-filterbar--collapsible.is-open .esaurun-reset { display:block; }
	.esaurun-filterbar--collapsible.is-open .esaurun-fgroup[data-key="sirala"] { display:flex; }
}