/* Saiber Cittaslow — ana sayfadaki "Sakin Şehir" tanıtım bölümü.
   Renkler CSS değişkenleriyle; Elementor stil sekmesi bu değişkenleri yazar. */
.saiber-cittaslow{
	--scs-accent:#fd6f31;          /* turuncu vurgu */
	--scs-second:#2e7d4f;          /* yeşil ikincil */
	--scs-title:#000;
	--scs-text:#6b6c70;
	--scs-bg1:#fff6ef;
	--scs-bg2:#eef6ef;
	--scs-bg3:#e7f2ea;
	position:relative;overflow:hidden;
	background:radial-gradient(120% 120% at 100% 0,var(--scs-bg1) 0,var(--scs-bg2) 38%,var(--scs-bg3) 100%);
	border-radius:24px;padding:48px;
}
.saiber-cittaslow .scs-blob{position:absolute;pointer-events:none;opacity:.5;}
.saiber-cittaslow .scs-blob.b1{top:-90px;right:-70px;width:320px;height:320px;
	background:radial-gradient(circle,color-mix(in srgb,var(--scs-accent) 18%,transparent),transparent 70%);}
.saiber-cittaslow .scs-blob.b2{bottom:-120px;left:-80px;width:330px;height:330px;
	background:radial-gradient(circle,color-mix(in srgb,var(--scs-second) 16%,transparent),transparent 70%);}

.scs-grid{position:relative;z-index:1;display:grid;grid-template-columns:.8fr 1.2fr;
	gap:50px;align-items:center;max-width:1240px;margin:0 auto;}

/* logo sahnesi */
.scs-stage{position:relative;display:flex;flex-direction:column;align-items:center;gap:16px;}
.scs-rings{position:relative;width:248px;height:248px;display:grid;place-items:center;}
.scs-rings::before,.scs-rings::after{content:"";position:absolute;border-radius:50%;}
.scs-rings::before{inset:0;border:2px dashed color-mix(in srgb,var(--scs-accent) 35%,transparent);animation:scsspin 26s linear infinite;}
.scs-rings::after{inset:30px;border:2px solid color-mix(in srgb,var(--scs-second) 18%,transparent);}
@keyframes scsspin{to{transform:rotate(360deg);}}
.scs-badge{width:160px;height:160px;border-radius:50%;background:#fff;
	box-shadow:0 22px 50px -22px color-mix(in srgb,var(--scs-second) 50%,transparent),0 0 0 1px rgba(0,0,0,.04);
	display:grid;place-items:center;animation:scsfloat 5.5s ease-in-out infinite;}
.scs-badge img{width:112px;height:auto;display:block;}
@keyframes scsfloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);}}
.saiber-cittaslow.scs-no-anim .scs-rings::before,
.saiber-cittaslow.scs-no-anim .scs-badge{animation:none;}
.scs-stagecap{font-size:13px;letter-spacing:1px;text-transform:uppercase;color:var(--scs-second);font-weight:600;text-align:center;}

/* içerik */
.scs-eyebrow{display:inline-flex;align-items:center;gap:8px;
	color:var(--scs-accent);font-size:14px;font-weight:800;letter-spacing:1px;text-transform:uppercase;}
.scs-eyebrow i,.scs-eyebrow svg{width:17px;height:17px;font-size:17px;line-height:1;}
.scs-content .scs-title{font-size:45px;line-height:1.21;color:var(--scs-title);font-weight:800;margin:14px 0 16px;}
.scs-lead{font-size:15px;line-height:1.9;color:var(--scs-text);font-weight:500;max-width:600px;margin:0 0 24px;}
.scs-lead p:last-child{margin-bottom:0;}

/* rozetler */
.scs-tags{display:flex;flex-wrap:wrap;gap:10px;}
.scs-tag{display:inline-flex;align-items:center;gap:9px;background:#fff;
	border:1px solid rgba(0,0,0,.06);border-radius:999px;padding:8px 16px;
	font-size:15px;font-weight:600;color:var(--scs-title);
	box-shadow:0 8px 20px -16px color-mix(in srgb,var(--scs-second) 60%,transparent);
	transition:border-color .3s,transform .3s;}
.scs-tag:hover{border-color:color-mix(in srgb,var(--scs-accent) 45%,transparent);transform:translateY(-2px);}
.scs-ic{display:inline-grid;place-items:center;color:var(--scs-accent);width:18px;height:18px;}
.scs-ic i{font-size:18px;line-height:1;}
.scs-ic svg{width:18px;height:18px;}

@media(max-width:900px){
	.saiber-cittaslow{padding:36px 22px;border-radius:20px;}
	.scs-grid{grid-template-columns:1fr;gap:30px;text-align:center;}
	.scs-eyebrow,.scs-tags{justify-content:center;}
	.scs-lead{margin-left:auto;margin-right:auto;}
	.scs-content .scs-title{font-size:32px;}
}