/* --------------------------------------------------------------------------
   1) Marka değişkenleri
   -------------------------------------------------------------------------- */
:root {
	--cloud-bg: #F6F5F1;
	--cloud-bg-2: #EFEDE6;
	--cloud-card: #FFFFFF;
	--cloud-ink: #0E1726;
	--cloud-ink-2: #3A4658;
	--cloud-ink-3: #6B7589;
	--cloud-line: #E5E2D8;
	--cloud-navy: #0A1B2E;
	--cloud-navy-2: #14253B;
	--cloud-cool: oklch(0.62 0.16 240);
	--cloud-cool-soft: oklch(0.94 0.04 240);
	--cloud-cool-ink: oklch(0.35 0.12 240);
	--cloud-warm: oklch(0.66 0.16 40);
	--cloud-warm-soft: oklch(0.95 0.045 50);
	--cloud-warm-ink: oklch(0.42 0.14 35);
	--cloud-radius-lg: 28px;
	--cloud-radius-md: 18px;
	--cloud-radius-sm: 12px;
	--cloud-shadow-card: 0 1px 0 rgba(255,255,255,.7) inset, 0 1px 2px rgba(10,27,46,.04), 0 8px 24px -8px rgba(10,27,46,.08);
	--cloud-shadow-lift: 0 1px 0 rgba(255,255,255,.7) inset, 0 2px 4px rgba(10,27,46,.05), 0 24px 60px -20px rgba(10,27,46,.18);
}

/* Yardımcı buton tonları (Flatsome [button] renkleri yetmediğinde) */
.cloud-btn-cool a,
a.cloud-btn-cool { background: var(--cloud-cool) !important; border-color: var(--cloud-cool) !important; color: #fff !important; }
.cloud-btn-warm a,
a.cloud-btn-warm { background: var(--cloud-warm) !important; border-color: var(--cloud-warm) !important; color: #fff !important; }

/* Eyebrow / küçük etiket metni */
.cloud-eyebrow {
	display: inline-block;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .16em;
	color: var(--cloud-ink-3);
	margin-bottom: 10px;
}

/* Genel kart yüzeyi (col bg + depth yerine ince ayar gerektiğinde) */
.cloud-card {
	background: var(--cloud-card);
	border: 1px solid var(--cloud-line);
	border-radius: var(--cloud-radius-md);
	box-shadow: var(--cloud-shadow-card);
}

/* --------------------------------------------------------------------------
   2) Hero — mevsime duyarlı (anasayfa)
   Section áp dụng/Section: #cloud-hero ([ux_html] içine yerleşir)
   -------------------------------------------------------------------------- */
#cloud-hero {
	position: relative;
	/*border-radius: var(--cloud-radius-lg);*/
	overflow: hidden;
	padding: clamp(28px, 4vw, 60px);
	background: linear-gradient(135deg, #0A1B2E 0%, #14253B 100%);
	color: #fff;
	 min-height: calc(95vh - 80px);
	display: flex;
	align-items: center;
	transition: background .6s ease;
}
#cloud-hero[data-mode="cool"] {
	background:
		radial-gradient(120% 120% at 85% 15%, oklch(0.55 0.15 240 / .55) 0%, transparent 55%),
		linear-gradient(140deg, oklch(0.34 0.09 245) 0%, #08111f 78%);
}
#cloud-hero[data-mode="warm"] {
	background:
		radial-gradient(120% 130% at 80% 90%, oklch(0.62 0.17 45 / .65) 0%, transparent 55%),
		linear-gradient(140deg, oklch(0.40 0.13 40) 0%, #160c06 80%);
}
/* Parçacık katmanı (kar / kor) */
#cloud-hero .cloud-hero-fx { position:absolute; inset:0; pointer-events:none; opacity:.6;
	background-image:
		radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,.6) 0, transparent 50%),
		radial-gradient(2px 2px at 70% 20%, rgba(255,255,255,.5) 0, transparent 50%),
		radial-gradient(1.5px 1.5px at 40% 70%, rgba(255,255,255,.5) 0, transparent 50%),
		radial-gradient(2px 2px at 85% 60%, rgba(255,255,255,.45) 0, transparent 50%),
		radial-gradient(1.5px 1.5px at 55% 45%, rgba(255,255,255,.5) 0, transparent 50%);
	animation: cloud-fx 9s linear infinite;
}
#cloud-hero[data-mode="warm"] .cloud-hero-fx {
	background-image:
		radial-gradient(2px 2px at 25% 80%, rgba(255,180,90,.7) 0, transparent 50%),
		radial-gradient(2px 2px at 65% 85%, rgba(255,150,70,.6) 0, transparent 50%),
		radial-gradient(1.5px 1.5px at 45% 75%, rgba(255,200,120,.6) 0, transparent 50%),
		radial-gradient(2px 2px at 80% 70%, rgba(255,160,80,.5) 0, transparent 50%);
	animation-direction: reverse;
}
@keyframes cloud-fx { from{ transform:translateY(-6px) } 50%{ transform:translateY(6px) } to{ transform:translateY(-6px) } }
@media (prefers-reduced-motion: reduce){ #cloud-hero .cloud-hero-fx{ animation:none } }

/* Three.js canvas — degradenin üstünde, içeriğin altında */
#cloud-hero .cloud-hero-canvas { position:absolute; inset:0; z-index:0; display:block; width:100%; height:100%; }
#cloud-hero.cloud-has-3d .cloud-hero-fx { display:none; }
#cloud-hero .cloud-hero-inner {
	position:relative; z-index:1; width:100%;
	display:grid; grid-template-columns: 1.35fr .85fr; gap:40px; align-items:center;
}
#cloud-hero .cloud-hero-toprow { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:22px; }
#cloud-hero .cloud-hero-toggle {
	display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px;margin-bottom:0;
	background: rgba(255,255,255,.12); backdrop-filter: blur(6px);
}
#cloud-hero .cloud-hero-toggle button {
	border: 0; cursor: pointer; background: transparent; color: rgba(255,255,255,.78); margin: 0 5px;
	font: inherit; font-size: 13px; font-weight: 600; padding: 8px 16px; border-radius: 999px; transition: all .25s ease;
}
#cloud-hero .cloud-hero-toggle button[aria-pressed="true"] { background: #fff; color: var(--cloud-navy); }
#cloud-hero .cloud-hero-season { font-size: 12.5px; color: rgba(255,255,255,.72); }
#cloud-hero .cloud-hero-title {
	color: #fff; font-size: var(--hero-title, clamp(34px, 4.6vw, 60px)); line-height: 1.03; letter-spacing: -0.035em; margin: 0 0 18px; font-weight: 700;
}
#cloud-hero .cloud-w-cool { color: oklch(0.78 0.13 240); }
#cloud-hero .cloud-w-warm { color: oklch(0.80 0.14 50); }
#cloud-hero .cloud-hero-lead { color: rgba(255,255,255,.80); font-size: var(--hero-lead, clamp(15px, 1.1vw, 18px)); max-width: 560px; margin: 0 0 26px; line-height:1.55; }
/* Üst rozet */
#cloud-hero .cloud-hero-badge {
	display:inline-flex; align-items:center; gap:8px; margin-bottom:16px; padding:7px 14px;
	border-radius:999px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.20);
	backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
	font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.85);
}
#cloud-hero .cloud-hero-badge i { width:7px; height:7px; border-radius:50%; background:oklch(0.78 0.16 50); }
#cloud-hero .cloud-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; }
#cloud-hero .cloud-hero-cta a {
	display: inline-flex; align-items: center; gap: 8px; height: 50px; padding: 0 26px; border-radius: 999px;
	font-size: 14px; font-weight: 600; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease;
}
#cloud-hero .cloud-hero-cta a:hover { transform: translateY(-2px); }
#cloud-hero .cloud-hero-cta .cloud-cta-1 { background:#fff; color: var(--cloud-navy); }
#cloud-hero[data-mode="cool"] .cloud-hero-cta .cloud-cta-1 { background: oklch(0.65 0.16 240); color:#fff; box-shadow:0 12px 30px -10px oklch(0.65 0.16 240 / .7); }
#cloud-hero[data-mode="warm"] .cloud-hero-cta .cloud-cta-1 { background: oklch(0.68 0.16 45); color:#fff; box-shadow:0 12px 30px -10px oklch(0.68 0.16 45 / .7); }
#cloud-hero .cloud-hero-cta .cloud-cta-2 { background: rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.28); }

/* Sağ bilgi paneli */
#cloud-hero .cloud-hero-side { display:flex; flex-direction:column; gap:14px; }
#cloud-hero .cloud-hero-tiles { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
#cloud-hero .cloud-hero-tile {
	background: rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.16);
	border-radius: var(--cloud-radius-md); padding:16px; backdrop-filter: blur(8px); display:flex; flex-direction:column; gap:4px;
}
#cloud-hero .cloud-tile-label { font-size:10px; text-transform:uppercase; letter-spacing:.12em; color:rgba(255,255,255,.65); }
#cloud-hero .cloud-tile-temp { font-size:34px; font-weight:700; letter-spacing:-.03em; line-height:1; }
#cloud-hero .cloud-tile-temp small { font-size:14px; font-weight:600; opacity:.7; }
#cloud-hero .cloud-hero-tile[data-tone="cool"] .cloud-tile-temp { color: oklch(0.82 0.12 240); }
#cloud-hero .cloud-hero-tile[data-tone="warm"] .cloud-tile-temp { color: oklch(0.84 0.13 55); }
#cloud-hero .cloud-tile-sub { font-size:11px; color:rgba(255,255,255,.6); }
/* Aktif moda göre kart soluklaştırma: soğukta warm kart, sıcakta cool kart soluklaşır */
#cloud-hero .cloud-hero-tile { transition: opacity .5s ease; }
#cloud-hero[data-mode="cool"] .cloud-hero-tile[data-tone="warm"],
#cloud-hero[data-mode="warm"] .cloud-hero-tile[data-tone="cool"] { opacity:.45; }
#cloud-hero .cloud-hero-teams { background: rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.16); border-radius: var(--cloud-radius-md); padding:16px; backdrop-filter: blur(8px); }
#cloud-hero .cloud-teams-top { display:flex; align-items:center; gap:12px; }
#cloud-hero .cloud-teams-num { font-size:38px; font-weight:700; letter-spacing:-.03em; line-height:1; }
#cloud-hero .cloud-teams-txt { display:flex; flex-direction:column; }
#cloud-hero .cloud-teams-txt b { font-size:14px; }
#cloud-hero .cloud-teams-txt span { font-size:11px; color:rgba(255,255,255,.6); }
#cloud-hero .cloud-teams-dots { margin-left:auto; display:flex; gap:4px; }
#cloud-hero .cloud-teams-dots i { width:8px; height:8px; border-radius:50%; }
#cloud-hero .cloud-teams-dots i:nth-child(1){ background:oklch(0.7 0.15 240); }
#cloud-hero .cloud-teams-dots i:nth-child(2){ background:oklch(0.7 0.15 150); }
#cloud-hero .cloud-teams-dots i:nth-child(3){ background:oklch(0.75 0.15 55); }
#cloud-hero .cloud-teams-dots i:nth-child(4){ background:oklch(0.7 0.15 20); }
#cloud-hero .cloud-teams-meta { display:flex; justify-content:space-between; gap:10px; margin-top:12px; padding-top:12px; border-top:1px solid rgba(255,255,255,.14); font-size:11px; color:rgba(255,255,255,.65); }
#cloud-hero .cloud-teams-meta span:first-child { color: oklch(0.78 0.14 150); }

/* Marka şeridi (marquee) — eski bağımsız satır (geriye dönük) */
.cloud-marquee { overflow:hidden; white-space:nowrap; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.cloud-marquee-track { display:inline-flex; gap:42px; padding:14px 0; animation: cloud-marquee 28s linear infinite; }
.cloud-marquee-track span { font-weight:600; color:var(--cloud-ink-3); font-size:15px; }
@keyframes cloud-marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }
@media (prefers-reduced-motion: reduce){ .cloud-marquee-track{ animation:none } }

/* Marka şeridi — hero'nun İÇİNDE, en altta (üstünde blur, beyaz %50 yazı) */
#cloud-hero .cloud-hero-inner { padding-bottom: 50px; }
#cloud-hero .cloud-hero-brands {
	position:absolute; left:0; right:0; bottom:0; z-index:2;
	overflow:hidden; white-space:nowrap; padding:11px 0;
	backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
	background:linear-gradient(to top, rgba(0,0,0,.30) 0%, rgba(0,0,0,.10) 60%, rgba(0,0,0,0) 100%);
	-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
	mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
#cloud-hero .cloud-hero-brands-track { display:inline-flex; gap:42px; padding-left:42px; animation: cloud-marquee 28s linear infinite; }
#cloud-hero .cloud-hero-brands-track span { font-weight:600; font-size:var(--hero-brand, 15px); letter-spacing:.02em; color:rgba(255,255,255,.5); white-space:nowrap; }
@media (prefers-reduced-motion: reduce){ #cloud-hero .cloud-hero-brands-track{ animation:none } }

/* --------------------------------------------------------------------------
   3) Smart Climate paneli (anasayfa)
   Section: #cloud-smart ([ux_html] içine yerleşir)
   -------------------------------------------------------------------------- */
#cloud-smart { display:grid; grid-template-columns: 1.5fr 1fr; gap:22px; align-items:start;
	--cloud-dial-color: var(--cloud-cool); }
#cloud-smart.cloud-smart { background:var(--cloud-sm-section, transparent); }

/* ---- Sol: kat planı ---- */
#cloud-smart .cloud-floor {
	background:var(--cloud-sm-plan, #EAEEF3); border:1px solid var(--cloud-line);
	border-radius:var(--cloud-radius-lg); padding:20px; box-shadow:var(--cloud-shadow-card);
}
#cloud-smart .cloud-floor-head { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
#cloud-smart .cloud-floor-headL { display:flex; align-items:center; gap:10px; }
#cloud-smart .cloud-floor-title { font-weight:700; font-size:15px; color:var(--cloud-ink); }
#cloud-smart .cloud-floor-tag { font-size:11px; font-weight:600; color:oklch(0.55 0.14 150); background:#E9F7EE; border-radius:999px; padding:3px 10px; }
#cloud-smart .cloud-scenes { display:flex; gap:6px; flex-wrap:wrap; }
#cloud-smart .cloud-scenes button {
	border:1px solid var(--cloud-line); background:#fff; color:var(--cloud-ink-2);
	border-radius:999px; padding:7px 14px; font-size:12px; font-weight:600; cursor:pointer; transition:all .18s ease;
}
#cloud-smart .cloud-scenes button[aria-pressed="true"] { background:var(--cloud-navy); border-color:var(--cloud-navy); color:#fff; }

/* Plan grid — büyük oda 2x2 span, plan benzeri collage */
#cloud-smart .cloud-plan {
	display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:minmax(86px,auto);
	grid-auto-flow:dense; gap:10px; background:rgba(255,255,255,.45); border-radius:var(--cloud-radius-md); padding:12px;
}
#cloud-smart .cloud-room {
	position:relative; cursor:pointer; border:1.5px solid var(--cloud-line); border-radius:14px;
	padding:13px 14px; background:var(--room-bg, #fff); transition:all .18s ease; text-align:left;
	display:flex; flex-direction:column; grid-column:span 2;
}
#cloud-smart .cloud-room[data-size="large"] { grid-column:span 2; grid-row:span 2; }
#cloud-smart .cloud-room:hover { border-color:var(--cloud-cool); }
#cloud-smart .cloud-room[aria-selected="true"] { border-color:var(--cloud-cool); box-shadow:0 0 0 3px color-mix(in srgb, var(--cloud-cool) 22%, transparent); }
#cloud-smart .cloud-room[aria-selected="true"][data-mode="warm"] { border-color:var(--cloud-warm); box-shadow:0 0 0 3px color-mix(in srgb, var(--cloud-warm) 22%, transparent); }
#cloud-smart .cloud-room-name { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--cloud-ink-3); }
#cloud-smart .cloud-room-dot { position:absolute; top:13px; right:13px; width:8px; height:8px; border-radius:50%; background:var(--cloud-ink-3); }
#cloud-smart .cloud-room[data-mode="cool"] .cloud-room-dot { background:var(--cloud-cool); }
#cloud-smart .cloud-room[data-mode="warm"] .cloud-room-dot { background:var(--cloud-warm); }
#cloud-smart .cloud-room-temp { margin-top:auto; font-size:24px; font-weight:700; letter-spacing:-.02em; color:var(--cloud-ink); }
#cloud-smart .cloud-room[data-size="large"] .cloud-room-temp { font-size:34px; }
#cloud-smart .cloud-room[data-mode="off"] .cloud-room-temp { color:var(--cloud-ink-3); }
#cloud-smart .cloud-room-dev { font-size:11px; color:var(--cloud-ink-3); margin-top:3px; }

/* Alt oda şeridi (JS doldurur) */
#cloud-smart .cloud-roomstrip { display:flex; gap:10px; margin-top:12px; overflow-x:auto; }
#cloud-smart .cloud-roomstrip:empty { display:none; }
#cloud-smart .cloud-strip-chip { flex:0 0 auto; cursor:pointer; background:#fff; border:1px solid var(--cloud-line); border-radius:12px; padding:10px 14px; min-width:120px; text-align:left; }
#cloud-smart .cloud-strip-chip[aria-selected="true"] { border-color:var(--cloud-navy); }
#cloud-smart .cloud-strip-chip b { display:block; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--cloud-ink-3); margin-bottom:3px; }
#cloud-smart .cloud-strip-chip span { font-size:15px; font-weight:700; color:var(--cloud-ink); }

/* ---- Sağ: kontrol + kartlar ---- */
#cloud-smart .cloud-side { display:flex; flex-direction:column; gap:14px; }
#cloud-smart .cloud-hub { background:var(--cloud-sm-hub, var(--cloud-cool-soft)); border-radius:var(--cloud-radius-lg); padding:20px; }
#cloud-smart .cloud-panel-head { display:flex; flex-direction:column; gap:3px; margin-bottom:14px; }
#cloud-smart .cloud-panel-eyebrow { font-size:10px; text-transform:uppercase; letter-spacing:.14em; color:var(--cloud-ink-3); }
#cloud-smart .cloud-dial-title { font-size:20px; color:var(--cloud-ink); font-weight:700; letter-spacing:-.01em; }
#cloud-smart .cloud-dial-title .cloud-dial-mode { color:var(--cloud-cool-ink); }
#cloud-smart .cloud-hub-inner { background:#fff; border-radius:var(--cloud-radius-md); padding:18px; display:flex; align-items:center; gap:18px; box-shadow:var(--cloud-shadow-card); }
#cloud-smart .cloud-dial { flex:0 0 auto; }
#cloud-smart .cloud-dial-ring {
	--p:50; position:relative; width:110px; height:110px; border-radius:50%;
	background: conic-gradient(var(--cloud-dial-color, var(--cloud-cool)) calc(var(--p)*1%), var(--cloud-bg-2) 0);
	display:flex; align-items:center; justify-content:center; transition: background .4s ease;
}
#cloud-smart .cloud-dial-ring::before { content:""; position:absolute; width:84px; height:84px; border-radius:50%; background:#fff; }
#cloud-smart .cloud-dial-temp { position:relative; display:flex; flex-direction:column; align-items:center; line-height:1; }
#cloud-smart .cloud-dial-num { font-size:30px; font-weight:700; letter-spacing:-.03em; color:var(--cloud-ink); }
#cloud-smart .cloud-dial-temp small { font-size:9px; font-weight:700; letter-spacing:.14em; color:var(--cloud-ink-3); margin-top:3px; }
#cloud-smart .cloud-hub-ctrl { flex:1; display:flex; flex-direction:column; gap:4px; }
#cloud-smart .cloud-hub-device { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--cloud-ink-3); }
#cloud-smart .cloud-hub-room { font-size:18px; font-weight:700; color:var(--cloud-ink); }
#cloud-smart .cloud-hub-btns { display:flex; gap:8px; margin-top:8px; }
#cloud-smart .cloud-dial-up, #cloud-smart .cloud-dial-down {
	width:40px; height:40px; border-radius:10px; border:1px solid var(--cloud-line);
	background:var(--cloud-bg); color:var(--cloud-ink); font-size:20px; cursor:pointer; transition:all .15s ease;
}
#cloud-smart .cloud-dial-kapat {
	flex:1; border-radius:10px; border:1px solid var(--cloud-line); background:var(--cloud-bg);
	color:var(--cloud-ink-2); font-size:12px; font-weight:700; letter-spacing:.04em; cursor:pointer; transition:all .15s ease;
}
#cloud-smart .cloud-dial-up:hover, #cloud-smart .cloud-dial-down:hover, #cloud-smart .cloud-dial-kapat:hover { border-color:var(--cloud-navy); }
#cloud-smart .cloud-dial-kapat[aria-pressed="true"] { background:var(--cloud-navy); border-color:var(--cloud-navy); color:#fff; }

/* Bilgi kartları */
#cloud-smart .cloud-info-card { display:flex; gap:13px; align-items:flex-start; background:#fff; border:1px solid var(--cloud-line); border-radius:var(--cloud-radius-md); padding:16px; }
#cloud-smart .cloud-info-icon { flex:0 0 auto; width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; }
#cloud-smart .cloud-info-energy .cloud-info-icon { background:#E9F7EE; color:#1d8a44; }
#cloud-smart .cloud-info-tip .cloud-info-icon { background:var(--cloud-cool-soft); color:var(--cloud-cool-ink); }
#cloud-smart .cloud-info-icon svg { width:18px; height:18px; }
#cloud-smart .cloud-info-body { flex:1; font-size:13px; color:var(--cloud-ink-2); line-height:1.5; }
#cloud-smart .cloud-info-eyebrow { display:block; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:var(--cloud-ink-3); margin-bottom:4px; }
#cloud-smart .cloud-info-body b { display:block; font-size:15px; color:var(--cloud-ink); margin-bottom:4px; }
#cloud-smart .cloud-info-body b small { font-size:12px; font-weight:600; color:var(--cloud-ink-3); }
#cloud-smart .cloud-energy-val { font-size:22px; font-weight:800; color:#1d8a44; letter-spacing:-.02em; }
#cloud-smart .cloud-info-desc, #cloud-smart .cloud-tip-text { display:block; }

/* --------------------------------------------------------------------------
   4) Ürün filtresi + kartlar (urunler)
   Section: .cloud-filter-bar / .cloud-product-grid
   -------------------------------------------------------------------------- */
.cloud-filter-bar {
	display:flex; flex-wrap:wrap; gap:10px 18px; align-items:center;
	background:var(--cloud-card); border:1px solid var(--cloud-line);
	border-radius:var(--cloud-radius-md); padding:16px 18px; box-shadow:var(--cloud-shadow-card);
}
.cloud-filter-group { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.cloud-filter-group > .cloud-filter-label { font-size:12px; font-weight:600; color:var(--cloud-ink-3); margin-right:4px; }
.cloud-chip {
	cursor:pointer; border:1px solid var(--cloud-line); background:var(--cloud-bg);
	border-radius:999px; padding:7px 14px; font-size:13px; font-weight:600; color:var(--cloud-ink-2);
	transition:all .18s ease; user-select:none;
}
.cloud-chip:hover { border-color:var(--cloud-navy); }
.cloud-chip[aria-pressed="true"] { background:var(--cloud-navy); border-color:var(--cloud-navy); color:#fff; }
.cloud-filter-meta { margin-left:auto; display:flex; align-items:center; gap:12px; font-size:13px; color:var(--cloud-ink-3); }
.cloud-filter-reset { cursor:pointer; border:0; background:transparent; color:var(--cloud-cool-ink); font-weight:600; font-size:13px; text-decoration:underline; }
.cloud-filter-count b { color:var(--cloud-ink); }

.cloud-product-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.cloud-product {
	background:var(--cloud-card); border:1px solid var(--cloud-line); border-radius:var(--cloud-radius-md);
	overflow:hidden; box-shadow:var(--cloud-shadow-card); display:flex; flex-direction:column; transition:transform .2s ease, box-shadow .2s ease;
}
.cloud-product:hover { transform:translateY(-3px); box-shadow:var(--cloud-shadow-lift); }
.cloud-product.cloud-hidden { display:none; }
.cloud-product .cloud-product-media {
	aspect-ratio:4/3; background:linear-gradient(135deg,var(--cloud-bg-2),#fff);
	display:flex; align-items:center; justify-content:center; color:var(--cloud-ink-3); font-size:12px;
}
.cloud-product .cloud-product-body { padding:16px; display:flex; flex-direction:column; gap:6px; flex:1; }
.cloud-product .cloud-product-brand { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--cloud-cool-ink); }
.cloud-product h3 {  margin:0; line-height:1.25; color:var(--cloud-ink); }
.cloud-product .cloud-product-specs { display:flex; flex-wrap:wrap; gap:6px; margin:4px 0; }
.cloud-product .cloud-product-specs span { font-size:11px; background:var(--cloud-bg); border:1px solid var(--cloud-line); border-radius:999px; padding:3px 9px; color:var(--cloud-ink-2); }
.cloud-product .cloud-tag { position:absolute; }
.cloud-product .cloud-product-tag { align-self:flex-start; font-size:11px; font-weight:700; padding:3px 10px; border-radius:999px; }
.cloud-product .cloud-product-tag[data-tag="Yeni"] { background:var(--cloud-cool-soft); color:var(--cloud-cool-ink); }
.cloud-product .cloud-product-tag[data-tag="Popüler"] { background:#FDEFD6; color:#8a5a12; }
.cloud-product .cloud-product-tag[data-tag="Premium"] { background:var(--cloud-navy); color:#fff; }
.cloud-product .cloud-product-tag[data-tag="Eko"] { background:#E4F6E7; color:#1d6b34; }
.cloud-product .cloud-product-actions { margin-top:auto; display:flex; gap:8px; padding-top:8px; }
.cloud-product .cloud-product-actions a {
	flex:1; text-align:center; text-decoration:none; font-size:13px; font-weight:600;
	padding:9px 10px; border-radius:999px; transition:all .18s ease;
}
.cloud-product .cloud-product-actions .cloud-detail { background:var(--cloud-navy); color:#fff; }
.cloud-product .cloud-product-actions .cloud-wa { background:#E4F6E7; color:#1d6b34; }
.cloud-empty { grid-column:1/-1; text-align:center; padding:40px; color:var(--cloud-ink-3); }

/* --------------------------------------------------------------------------
   5) WhatsApp sabit buton (tüm sayfalar)
   -------------------------------------------------------------------------- */
.cloud-wa-fab {
	position:fixed; right:18px; bottom:18px; z-index:9999;
	width:56px; height:56px; border-radius:50%;
	background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center;
	box-shadow:0 10px 30px -8px rgba(37,211,102,.6); text-decoration:none; transition:transform .2s ease;
}
.cloud-wa-fab:hover { transform:scale(1.06); }
.cloud-wa-fab svg { width:28px; height:28px; fill:#fff; }

/* --------------------------------------------------------------------------
   6) Çözüm kartları (anasayfa) — dekoratif ikon + bölünmüş liste
   -------------------------------------------------------------------------- */
.cloud-solcard { position:relative; overflow:hidden; box-shadow:var(--cloud-shadow-card); display:flex; flex-direction:column; }
.cloud-solcard-cool { --sol-accent: oklch(0.45 0.13 245); --sol-line: rgba(10,27,46,.10); }
.cloud-solcard-warm { --sol-accent: oklch(0.52 0.15 45); --sol-line: rgba(60,30,10,.12); }
/* Dekoratif köşe ışıması */
.cloud-solcard:after { content:""; position:absolute; top:-30px; right:-30px; width:160px; height:160px; border-radius:50%; opacity:.30; pointer-events:none; }
.cloud-solcard-cool:after { background:radial-gradient(circle at 30% 30%, oklch(0.78 0.13 240 / .5), transparent 70%); }
.cloud-solcard-warm:after { background:radial-gradient(circle at 30% 30%, oklch(0.82 0.13 55 / .5), transparent 70%); }
/* Eşit ikon + eşit yazı boyutları (iki kartta birebir) */
.cloud-solcard .cloud-eyebrow { display:flex; align-items:center; gap:8px; color:var(--cloud-ink-2); font-size:11px; }
.cloud-solcard .cloud-sol-icon { display:inline-flex; width:90px; height:90px; color:var(--sol-accent); }
.cloud-solcard .cloud-sol-icon svg { width:90px; height:90px; }
.cloud-solcard h3 { line-height:1.2; letter-spacing:-.02em; margin:0 0 8px; min-height:58px; }
.cloud-solcard .cloud-sol-lead { font-size:14px; line-height:1.5; color:var(--cloud-ink-2); margin:0 0 8px; min-height:63px; }
/* Buton listesi (kategori linkleri) */
.cloud-solbtns { display:flex; flex-direction:column; margin:6px 0 18px; }
.cloud-solbtn { display:flex; align-items:center; justify-content:space-between; gap:8px;
	padding:13px 4px; border-top:1px solid var(--sol-line); font-size:14px; font-weight:600; color:var(--cloud-ink);
	text-decoration:none; transition:padding .15s ease, color .15s ease; }
.cloud-solbtn:first-child { border-top:0; }
.cloud-solbtn span { font-size:18px; color:var(--cloud-ink-3); transition:transform .15s ease, color .15s ease; }
.cloud-solbtn:hover { color:var(--sol-accent); padding-left:8px; }
.cloud-solbtn:hover span { color:var(--sol-accent); transform:translateX(3px); }
.cloud-solcard .cloud-btn-cool, .cloud-solcard .cloud-btn-warm { margin-top:auto; }

/* --------------------------------------------------------------------------
   7) İstatistik kartı (Neden ESA)
   -------------------------------------------------------------------------- */
.cloud-stats{
    position: relative;
    overflow: hidden; /* önemli */
    
    background: linear-gradient(135deg,#0A1B2E,#14253B);
    color:#fff;
    border-radius: var(--cloud-radius-lg);
    padding: clamp(28px,4vw,52px);
}

.cloud-stats::before{
    content:'';
    position:absolute;

    left:50%;
    bottom:-120px;
    transform:translateX(-50%);

    width:80%;
    height:250px;

    background: radial-gradient(
        ellipse at center,
        rgba(120, 200, 255, .25) 0%,
        rgba(120, 200, 255, .15) 40%,
        transparent 75%
    );

    filter: blur(60px);
    pointer-events:none;
}
.cloud-stats-head { display:flex; justify-content:space-between; align-items:flex-end; gap:20px; margin-bottom:30px; }
.cloud-stats-title { color:#fff; font-size:clamp(24px,2.4vw,34px); letter-spacing:-.02em; margin:0; max-width:560px; }
.cloud-stats-btn { white-space:nowrap; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25); color:#fff; text-decoration:none; font-weight:600; font-size:14px; padding:11px 22px; border-radius:999px; transition:all .15s ease; }
.cloud-stats-btn:hover { background:#fff; color:var(--cloud-navy); }
.cloud-stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.cloud-stat { border-left:1px solid rgba(255,255,255,.16); padding-left:18px; }
.cloud-stat b { display:block; font-size:clamp(30px,3.4vw,44px); font-weight:700; letter-spacing:-.03em; line-height:1; }
.cloud-stat span { font-size:13px; color:rgba(255,255,255,.65); }

/* --------------------------------------------------------------------------
   8) CTA bandı (açık degrade)
   -------------------------------------------------------------------------- */
.cloud-cta-band { border-radius:var(--cloud-radius-lg); padding:clamp(36px,5vw,70px); text-align:center;
	background:linear-gradient(120deg, oklch(0.93 0.045 240) 0%, #F6F5F1 50%, oklch(0.94 0.05 50) 100%); }
.cloud-cta-band .cloud-eyebrow { color:var(--cloud-ink-3); }
.cloud-cta-title { font-size:clamp(30px,4vw,52px); letter-spacing:-.03em; line-height:1.05; margin:0 0 14px; color:var(--cloud-ink); }
.cloud-cta-lead { font-size:clamp(15px,1.2vw,18px); color:var(--cloud-ink-2); max-width:600px; margin:0 auto 26px; }
.cloud-cta-actions { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.cloud-cta-actions a { text-decoration:none; font-weight:600; font-size:14px; height:50px; display:inline-flex; align-items:center; padding:0 26px; border-radius:999px; transition:all .2s ease; }
.cloud-cta-primary { background:var(--cloud-navy); color:#fff; }
.cloud-cta-primary:hover { transform:translateY(-2px); box-shadow:0 14px 32px -12px rgba(10,27,46,.6); }
.cloud-cta-ghost { background:transparent; color:var(--cloud-ink); border:1px solid var(--cloud-line); }
.cloud-cta-ghost:hover { border-color:var(--cloud-navy); }

/* --------------------------------------------------------------------------
   9) Hizmet detay giriş kartı (montaj vb.) — beyaz kart + sağ görsel
   -------------------------------------------------------------------------- */
.cloud-svc-head .cloud-w-cool { color: oklch(0.55 0.16 240); }
.cloud-svc-head .cloud-w-warm { color: oklch(0.60 0.16 45); }
.cloud-svc-head h1 { font-size:clamp(34px,4.6vw,58px); line-height:1.04; letter-spacing:-.035em; }
/* Beyaz giriş kartı + yeşil tikli liste */
.cloud-svc-card { box-shadow:var(--cloud-shadow-lift); }
.cloud-svc-list h2 { font-size:26px; letter-spacing:-.02em; margin:0 0 10px; }
.cloud-svc-list ul { list-style:none; margin:14px 0 22px; padding:0; }
.cloud-svc-list ul li { position:relative; padding:8px 0 8px 30px; font-size:14.5px; color:var(--cloud-ink); }
.cloud-svc-list ul li:before { content:"✓"; position:absolute; left:0; top:7px; width:20px; height:20px; border-radius:50%;
	background:#E4F6E7; color:#1d8a44; font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; }

/* --------------------------------------------------------------------------
   10) Responsive — tablet & mobil
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
	.cloud-product-grid { grid-template-columns:repeat(2,1fr); }
	#cloud-smart { grid-template-columns:1fr; }
	#cloud-hero .cloud-hero-inner { grid-template-columns:1fr; gap:28px; }
	.cloud-stats-grid { grid-template-columns:repeat(2,1fr); gap:24px 20px; }
}
@media (max-width: 600px) {
	.cloud-product-grid { grid-template-columns:1fr; }
	#cloud-hero { padding:24px; min-height:auto; }
	#cloud-hero .cloud-hero-title { font-size:var(--hero-title-sm, 30px); }
	#cloud-hero .cloud-hero-lead { font-size:var(--hero-lead-sm, 15px); }
	#cloud-hero .cloud-hero-brands-track span { font-size:var(--hero-brand-sm, 12px); }
	#cloud-hero .cloud-hero-tiles { grid-template-columns:1fr 1fr; }
	.cloud-filter-meta { margin-left:0; width:100%; }
	#cloud-smart .cloud-plan { grid-template-columns:repeat(2,1fr); }
	#cloud-smart .cloud-room, #cloud-smart .cloud-room[data-size="large"] { grid-column:span 1; grid-row:auto; }
	#cloud-smart .cloud-hub-inner { flex-direction:column; align-items:stretch; text-align:center; }
	#cloud-smart .cloud-dial { align-self:center; }
	.cloud-stats-head { flex-direction:column; align-items:flex-start; }
	.cloud-stats-grid { grid-template-columns:1fr 1fr; }
	.cloud-stat { border-left:0; padding-left:0; }
}